:root { --bg:#0e1419; --nav:#111a21; --panel:#151f27; --line:#2a3943; --line-soft:#202d35; --text:#e4edf2; --muted:#8fa1ac; --teal:#2ba68d; --blue:#3b82f6; --red:#dc6b6b; --amber:#d7a84d; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; color:var(--text); background:var(--bg); font:14px "Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:0; }
button, input, select, textarea { font:inherit; }
button, .button { border:1px solid var(--line); border-radius:4px; color:var(--text); background:#18242d; cursor:pointer; text-decoration:none; }
button:hover, .button:hover { border-color:#4c6675; background:#1e2d37; }
.primary { border-color:#288e7a; color:white; background:#237c6a; }
.primary:hover { background:#2a927c; }
.hidden { display:none !important; }
.admin-shell { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:100vh; }
.admin-nav { position:sticky; top:0; display:flex; height:100vh; flex-direction:column; border-right:1px solid var(--line); background:var(--nav); }
.admin-brand { display:flex; align-items:center; gap:10px; min-height:70px; padding:14px 16px; border-bottom:1px solid var(--line); }
.admin-brand > div, .login-mark { display:grid; width:34px; height:34px; place-items:center; border:1px solid #2c7669; border-radius:5px; color:#d7fff7; background:#17463f; font-weight:800; }
.admin-brand span, .admin-brand small { display:block; }
.admin-brand small { margin-top:3px; color:var(--muted); font-size:9px; }
.admin-nav nav { display:grid; gap:2px; padding:15px 10px; }
.admin-nav nav button { padding:10px 12px; border-color:transparent; color:var(--muted); background:transparent; text-align:left; }
.admin-nav nav button.active { border-color:#2c4f4a; color:#eafffa; background:#172b29; }
.admin-nav-foot { display:grid; gap:12px; margin-top:auto; padding:14px; border-top:1px solid var(--line); }
.admin-nav-foot a { color:#a9bdc7; text-decoration:none; }
.admin-nav-foot > div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.admin-nav-foot button { padding:4px 8px; color:var(--muted); background:transparent; }
.admin-main { min-width:0; }
.admin-main > header { display:flex; position:sticky; z-index:2; top:0; min-height:70px; align-items:center; justify-content:space-between; padding:12px 26px; border-bottom:1px solid var(--line); background:rgba(14,20,25,.96); }
.admin-main > header div { display:flex; align-items:center; gap:10px; }
.admin-main h1 { margin:0; font-size:18px; }
#admin-menu { display:none; padding:6px 9px; }
#admin-clock { color:var(--muted); font-size:12px; }
.admin-view { display:none; padding:26px; }
.admin-view.active { display:block; }
.monitor-band { margin-bottom:18px; border:1px solid var(--line); border-top:2px solid #2ba68d; background:#111a21; }
.monitor-heading { display:flex; min-height:48px; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line-soft); }
.monitor-heading > div { display:flex; align-items:center; gap:8px; }
.monitor-heading > span { color:var(--muted); font-size:10px; }
.health-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--amber); }
.health-dot.healthy { background:#35bd82; box-shadow:0 0 0 3px rgba(53,189,130,.12); }
.health-dot.unhealthy { background:#dc6b6b; box-shadow:0 0 0 3px rgba(220,107,107,.12); }
.monitor-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
.monitor-grid > div { min-width:0; padding:13px 14px; border-right:1px solid var(--line-soft); }
.monitor-grid > div:last-child { border-right:0; }
.monitor-grid span, .monitor-grid strong, .monitor-grid small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.monitor-grid span { color:var(--muted); font-size:10px; }
.monitor-grid strong { margin-top:6px; font-size:15px; }
.monitor-grid small { margin-top:4px; color:#718590; font-size:9px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.metric-card { position:relative; min-width:0; min-height:116px; padding:19px 20px 17px; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#121d26; }
.metric-card::before { position:absolute; inset:0 auto 0 0; width:3px; background:var(--metric-color,#5b8def); content:""; }
.metric-card span, .metric-card strong, .metric-card small { display:block; }
.metric-card span { color:var(--muted); font-size:11px; }
.metric-card strong { margin-top:9px; overflow:hidden; color:#edf5f8; font-size:25px; text-overflow:ellipsis; white-space:nowrap; }
.metric-card small { margin-top:5px; color:#718590; font-size:10px; }
.metric-card small b { color:#65d7b4; font-weight:650; }
.metric-blue { --metric-color:#4c8df6; } .metric-green { --metric-color:#35bd82; } .metric-cyan { --metric-color:#34b8c8; } .metric-violet { --metric-color:#9874e8; }
.metric-amber { --metric-color:#d9a441; } .metric-teal { --metric-color:#2ba68d; } .metric-red { --metric-color:#d96976; } .metric-slate { --metric-color:#8ba2af; }
.dashboard-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:20px 0; padding:12px 14px; border:1px solid var(--line); background:#111a21; }
.dashboard-controls > div { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:11px; }
.dashboard-controls > button { padding:7px 11px; }
.range-control { display:flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.range-control button { min-width:72px; padding:6px 10px; border:0; border-right:1px solid var(--line); border-radius:0; color:var(--muted); background:#10171d; }
.range-control button:last-child { border-right:0; }
.range-control button.active { color:#eafffa; background:#1d4a43; }
.dashboard-charts { display:grid; grid-template-columns:minmax(380px,.85fr) minmax(520px,1.35fr); gap:18px; }
.chart-panel, .recent-panel { min-width:0; border:1px solid var(--line); border-radius:6px; background:#111b24; }
.panel-heading { display:flex; min-height:62px; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line-soft); }
.panel-heading h2 { margin:0; font-size:14px; }
.panel-heading p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.panel-heading > span { color:var(--muted); font-size:10px; }
.model-chart-layout { display:grid; grid-template-columns:190px minmax(0,1fr); min-height:280px; align-items:center; gap:16px; padding:18px; }
.donut-wrap { display:grid; place-items:center; }
.donut-chart { display:grid; width:168px; height:168px; place-items:center; border-radius:50%; background:#263640; }
.donut-chart::before { grid-area:1/1; width:94px; height:94px; border:1px solid #344953; border-radius:50%; background:#111b24; content:""; }
.donut-chart > div { z-index:1; grid-area:1/1; text-align:center; }
.donut-chart strong, .donut-chart span { display:block; }
.donut-chart strong { max-width:82px; overflow:hidden; font-size:20px; text-overflow:ellipsis; white-space:nowrap; }
.donut-chart span { margin-top:3px; color:var(--muted); font-size:9px; }
.model-legend { min-width:0; }
.model-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line-soft); }
.model-row:last-child { border-bottom:0; }
.model-row > div { min-width:0; }
.model-row strong, .model-row span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.model-row strong { position:relative; padding-left:14px; font-size:11px; }
.model-row strong::before { position:absolute; top:4px; left:0; width:7px; height:7px; border-radius:50%; background:var(--series-color); content:""; }
.model-row span { margin-top:4px; color:var(--muted); font-size:9px; }
.model-row b { color:#bdd0d8; font-size:10px; white-space:nowrap; }
.chart-legend { display:flex; gap:13px; color:var(--muted); font-size:9px; }
.chart-legend span::before { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:currentColor; content:""; }
.chart-legend .input { color:#4c8df6; } .chart-legend .output { color:#35bd82; } .chart-legend .cache { color:#d9a441; }
.canvas-wrap { position:relative; height:280px; padding:14px; }
#token-trend { display:block; width:100%; height:100%; }
.chart-empty { position:absolute; inset:0; display:grid; place-items:center; margin:0; color:var(--muted); font-size:11px; }
.dashboard-lower { display:grid; grid-template-columns:minmax(420px,1.2fr) minmax(360px,.8fr); align-items:start; gap:18px; margin-top:18px; }
.recent-list { min-height:226px; padding:4px 16px 12px; }
.recent-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; padding:12px 2px; border-bottom:1px solid var(--line-soft); }
.recent-row:last-child { border-bottom:0; }
.recent-row strong, .recent-row span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent-row strong { font-size:11px; } .recent-row span { margin-top:4px; color:var(--muted); font-size:9px; }
.recent-row b { color:#65d7b4; font-size:11px; white-space:nowrap; }
.dashboard-lower .dashboard-bands { grid-template-columns:1fr; gap:18px; margin-top:0; }
.dashboard-bands { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:24px; }
.dashboard-bands section { border-top:2px solid #326b65; }
.dashboard-bands h2 { margin:0; padding:14px 0; font-size:14px; }
dl { margin:0; border-top:1px solid var(--line); }
dl div { display:flex; justify-content:space-between; padding:13px 4px; border-bottom:1px solid var(--line-soft); }
dt { color:var(--muted); } dd { margin:0; } .healthy { color:#70d2b8; }
.toolbar { display:flex; align-items:center; gap:8px; margin-bottom:15px; }
.toolbar input { width:min(360px,100%); }
.toolbar button, .toolbar .button { padding:8px 12px; }
input, select, textarea { width:100%; padding:8px 9px; border:1px solid var(--line); border-radius:4px; outline:none; color:var(--text); background:#0e151a; }
input:focus, select:focus, textarea:focus { border-color:#3c8b7d; box-shadow:0 0 0 2px rgba(43,166,141,.12); }
.table-wrap { max-width:100%; overflow:auto; border:1px solid var(--line); }
table { width:100%; min-width:1120px; border-collapse:collapse; background:#111a20; }
th, td { padding:10px 12px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:middle; white-space:nowrap; }
th { position:sticky; z-index:1; top:0; color:#b8c8d0; background:#18242c; font-size:11px; font-weight:650; }
td { color:#d0dce2; font-size:12px; }
td small { display:block; margin-top:4px; color:var(--muted); }
th:last-child { position:sticky; z-index:3; right:0; min-width:190px; background:#18242c; box-shadow:-10px 0 18px rgba(5,10,14,.2); }
td.actions { position:sticky; z-index:2; right:0; min-width:190px; background:#111a20; box-shadow:-10px 0 18px rgba(5,10,14,.16); white-space:nowrap; }
tbody tr:hover td { background:#142029; }
tbody tr:hover td.actions { background:#142029; }
td.actions button { margin:2px 4px 2px 0; padding:5px 8px; font-size:11px; }
.danger { border-color:#704247; color:#ffc7cc; background:#392226; }
.status { display:inline-block; padding:3px 6px; border:1px solid #3a5964; border-radius:3px; color:#aec4cd; font-size:10px; }
.status.active, .status.paid { border-color:#2c6c5c; color:#83d9bd; }
.status.published { border-color:#2c6c5c; color:#83d9bd; }
.status.reviewed, .status.applied { border-color:#2c6c5c; color:#83d9bd; }
.status.disabled, .status.deleted, .status.refunded, .status.archived { border-color:#704247; color:#e9a3aa; }
.status.rejected { border-color:#704247; color:#e9a3aa; }
.status.pending { border-color:#795e2e; color:#e2bd70; }
.status.provisioning { border-color:#795e2e; color:#e2bd70; }
.status.submitted { border-color:#795e2e; color:#e2bd70; }
.inline-form { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); align-items:end; gap:10px; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.license-create { grid-template-columns:repeat(6,minmax(125px,1fr)) auto; }
.agent-create { grid-template-columns:repeat(3,minmax(180px,1fr)); }
.agent-create button { align-self:end; }
.agent-site-status { min-height:22px; margin:-10px 0 14px; }
form label { display:grid; gap:6px; color:#aebec6; font-size:11px; }
.inline-form button { height:34px; padding:7px 12px; }
.notice { margin-bottom:18px; padding:13px; border:1px solid #377466; color:#d6f5ed; background:#132a27; white-space:pre-wrap; }
.announcement-form { display:grid; max-width:880px; gap:14px; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.announcement-form .announcement-heading { min-height:0; padding:0 0 12px; }
.announcement-form textarea { min-height:150px; resize:vertical; line-height:1.65; }
.announcement-form-actions { display:flex; align-items:center; gap:10px; }
.announcement-form-actions button { padding:9px 16px; }
.announcement-form-actions .form-status { margin-left:0; }
.table-empty { height:120px; color:var(--muted); text-align:center; }
.feedback-admin-intro { max-width:920px; margin:0 0 18px; padding:12px 14px; border-left:3px solid #2ba68d; color:#aebec6; background:#132723; font-size:12px; line-height:1.65; }
.feedback-skill-form { display:grid; max-width:880px; gap:14px; margin-bottom:24px; padding:18px; border:1px solid var(--line); background:#111b24; }
.feedback-skill-form .feedback-skill-heading { min-height:0; padding:0 0 12px; }
.feedback-skill-form textarea { min-height:112px; resize:vertical; line-height:1.65; }
#feedback-body td { max-width:260px; white-space:normal; line-height:1.55; }
#feedback-body td:first-child input { width:16px; height:16px; }
.pricing-settings { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); align-items:end; gap:14px; margin-bottom:18px; }
.toggle { display:flex; min-height:34px; align-items:center; gap:8px; }
.toggle input, td input[type=checkbox] { width:16px; height:16px; }
#pricing-body input[type=number] { min-width:110px; }
.save-pricing { margin-top:16px; padding:9px 16px; }
.form-status { min-height:18px; margin-left:10px; color:var(--amber); font-size:12px; }
.api-config-form { width:100%; max-width:none; }
.api-connection-settings { display:grid; grid-template-columns:1.4fr 1fr 180px; align-items:end; gap:14px; margin-bottom:22px; }
.api-key-state { display:grid; min-height:58px; align-content:center; gap:6px; padding:8px 10px; border-left:3px solid #3b82f6; background:#111a21; }
.api-key-state span { color:var(--muted); font-size:10px; }
.api-key-state strong { font-size:12px; }
.api-model-heading { padding-right:0; padding-left:0; }
.api-model-heading button { padding:7px 11px; }
#api-model-body input[type=radio], #api-model-body input[type=checkbox] { width:16px; height:16px; }
#api-model-body input[type=text] { min-width:180px; }
#api-model-body tr.new-model input[data-key=modelId] { border-color:#3c8b7d; }
.api-config-actions { display:flex; align-items:center; gap:10px; margin-top:16px; }
.api-config-actions button { padding:9px 16px; }
.api-config-list { display:grid; gap:14px; }
.api-config-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:6px; background:#111a20; }
.api-config-card > header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.api-config-card > header strong { overflow:hidden; color:#edf5f8; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.api-active-choice, .api-enabled { display:flex; align-items:center; gap:7px; color:#b8c8d0; font-size:12px; }
.api-active-choice input, .api-enabled input { width:16px; height:16px; }
.api-remove-model { padding:7px 11px; }
.api-config-main-grid { display:grid; grid-template-columns:minmax(190px,.8fr) minmax(260px,1.3fr) minmax(190px,1fr) minmax(190px,.9fr) minmax(120px,.5fr); gap:12px; }
.api-config-price-grid { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:12px; margin-top:12px; }
.api-config-card label { min-width:0; }
.api-config-card input, .api-config-card select { width:100%; min-width:0; }
.api-enabled { width:max-content; margin-top:14px; }
.modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:18px; background:#0e1419; }
.modal > form { display:grid; width:min(430px,100%); max-height:calc(100vh - 36px); gap:12px; overflow:auto; padding:25px; border:1px solid #334852; border-radius:6px; background:#121c23; box-shadow:0 22px 70px rgba(0,0,0,.5); }
.modal h2 { margin:4px 0 8px; font-size:20px; }
.modal > form > span { color:var(--muted); font-size:10px; }
.modal .primary { padding:10px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; }
.modal-head h2 { margin:0; }
.modal-head button { width:30px; height:30px; font-size:20px; }
@media (max-width:1200px) { .dashboard-charts, .dashboard-lower { grid-template-columns:1fr; } .dashboard-lower .dashboard-bands { grid-template-columns:1fr 1fr; } .monitor-grid { grid-template-columns:repeat(3,1fr); } .monitor-grid > div:nth-child(3) { border-right:0; } .monitor-grid > div:nth-child(-n+3) { border-bottom:1px solid var(--line-soft); } }
@media (max-width:1350px) { .api-config-main-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.api-config-price-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .metrics { grid-template-columns:repeat(2,1fr); } .dashboard-bands, .dashboard-lower .dashboard-bands { grid-template-columns:1fr; } .license-create, .inline-form, .pricing-settings { grid-template-columns:repeat(2,1fr); } .api-connection-settings { grid-template-columns:1fr 1fr; } .api-key-state { grid-column:1/-1; } }
@media (max-width:680px) { .admin-shell { display:block; } .admin-nav { position:fixed; z-index:10; inset:0 auto 0 0; width:230px; transform:translateX(-100%); transition:transform .18s ease; } .admin-shell.nav-open .admin-nav { transform:translateX(0); transition:transform .18s ease; } #admin-menu { display:block; } .admin-main > header { padding:10px 14px; } .admin-view { padding:16px; } .monitor-grid { grid-template-columns:repeat(2,1fr); } .monitor-grid > div:nth-child(n) { border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); } .monitor-grid > div:nth-child(2n) { border-right:0; } .monitor-grid > div:nth-last-child(-n+2) { border-bottom:0; } .metrics { grid-template-columns:1fr 1fr; gap:9px; } .metric-card { min-height:105px; padding:16px 14px; } .metric-card strong { font-size:20px; } .dashboard-controls { align-items:flex-start; } .dashboard-controls > div { align-items:flex-start; flex-direction:column; } .dashboard-charts { grid-template-columns:minmax(0,1fr); } .model-chart-layout { grid-template-columns:1fr; } .canvas-wrap { height:250px; padding:10px; } .chart-legend { gap:8px; } .inline-form, .license-create, .pricing-settings, .api-connection-settings { grid-template-columns:1fr; } }
@media (max-width:680px) { .api-config-main-grid, .api-config-price-grid { grid-template-columns:1fr; }.api-config-card > header { grid-template-columns:1fr auto; }.api-active-choice { grid-column:1/-1; }.api-config-card > header strong { white-space:normal; } }