/* =====================================================================
 * N14 / 38 · vLLM 部署指南 —— 独立皮肤「青绿推理仪表盘」
 * 顶部 KPI 指标行 + 左侧滑杆参数台 + 右侧显存预算与命令；批量矩阵。
 * 主题：只消费公共导航写入的 <html data-theme>，不自建开关。
 * ===================================================================== */

.vl-page {
    --nx-bg:        #f2f7f8;
    --nx-bg-2:      #e8f2f3;
    --nx-surface:   #ffffff;
    --nx-surface-2: #f2f8f9;
    --nx-surface-3: #e4f0f1;
    --nx-ink:       #0f2429;
    --nx-ink-2:     #41616a;
    --nx-ink-3:     #809ba2;
    --nx-line:      #d6e7e9;
    --nx-line-2:    #e9f3f4;
    --nx-a:         #0d8f80;
    --nx-b:         #1b4d8f;
    --nx-tint:      #dff3ef;
    --nx-deep:      #086c61;
    --tsk-card: #ffffff; --tsk-line: #d6e7e9; --tsk-faint: #809ba2; --tsk-sub: #41616a; --tsk-ink: #0f2429;
}
:root[data-theme="dark"] .vl-page {
    --nx-bg:        #081216;
    --nx-bg-2:      #0d1a1f;
    --nx-surface:   #122229;
    --nx-surface-2: #182d35;
    --nx-surface-3: #203a43;
    --nx-ink:       #edf7f7;
    --nx-ink-2:     #a9c3c8;
    --nx-ink-3:     #78979d;
    --nx-line:      #25424a;
    --nx-line-2:    #1b323a;
    --nx-a:         #5fd0bd;
    --nx-b:         #7aa7e8;
    --nx-tint:      rgba(95, 208, 189, .14);
    --nx-deep:      #9ce3d5;
    --tsk-card: #122229; --tsk-line: #25424a; --tsk-faint: #78979d; --tsk-sub: #a9c3c8; --tsk-ink: #edf7f7;
}

.vl-page .n14-hero h1 em { color: var(--nx-a); }
.vl-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 20px; }

/* KPI 指标行 */
.vl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 20px; }
.vl-kpi { position: relative; overflow: hidden; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--nx-sh-sm); }
.vl-kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--nx-a); }
.vl-kpi:nth-child(2)::after { background: var(--nx-b); }
.vl-kpi:nth-child(3)::after { background: #d9a441; }
.vl-kpi:nth-child(4)::after { background: #8c6fd0; }
.vl-kpi__k { font-size: 12px; color: var(--nx-ink-3); }
.vl-kpi__v { font-family: var(--nx-mono); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; color: var(--nx-ink); line-height: 1.3; margin-top: 4px; }
.vl-kpi__u { font-size: 12px; color: var(--nx-ink-3); font-family: var(--nx-sans); }
.vl-kpi__sub { font-size: 11px; color: var(--nx-ink-3); margin-top: 4px; }

/* 仪表盘主体 */
.vl-dash { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 16px; align-items: start; }
.vl-right { display: grid; gap: 16px; }
.vl-slider { margin-bottom: 16px; }
.vl-slider .n14-label { display: flex; justify-content: space-between; align-items: baseline; }
.vl-slider .n14-label b { font-family: var(--nx-mono); font-size: 14px; color: var(--nx-a); }
.vl-slider input[type="range"] { width: 100%; accent-color: var(--nx-a); height: 20px; }

.vl-budget__total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.vl-budget__total b { font-family: var(--nx-mono); font-size: 30px; color: var(--nx-ink); line-height: 1.2; }
.vl-budget__total span { font-size: 12.5px; color: var(--nx-ink-3); }
.vl-bar { display: flex; height: 24px; border-radius: 8px; overflow: hidden; background: var(--nx-surface-3); border: 1px solid var(--nx-line); }
.vl-bar i { display: block; height: 100%; transition: width .25s; }
.vl-bar i[data-k="w"] { background: var(--nx-b); }
.vl-bar i[data-k="k"] { background: var(--nx-a); }
.vl-bar i[data-k="r"] { background: #d9a441; }
.vl-bar i[data-k="f"] { background: repeating-linear-gradient(45deg, var(--nx-line) 0 5px, var(--nx-surface-2) 5px 10px); }
.vl-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--nx-ink-2); }
.vl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vl-legend em { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.vl-legend b { font-family: var(--nx-mono); color: var(--nx-ink); }
.vl-alert { margin-top: 13px; white-space: pre-line; }
.vl-command .n14-code { max-height: 260px; overflow: auto; font-size: 12.5px; line-height: 1.8; }
.vl-split { align-items: start; }
.vl-split .n14-code { max-height: 300px; overflow: auto; }
.vl-paramwrap { max-height: 300px; overflow: auto; }
.vl-textarea { font-family: var(--nx-mono); font-size: 12.5px; }
.vl-batchmsg { margin-top: 14px; white-space: pre-line; }
.vl-batchwrap { margin-top: 16px; max-height: 360px; overflow: auto; }

@media (max-width: 980px) {
    .vl-dash { grid-template-columns: 1fr; }
    .vl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .vl-kpis { grid-template-columns: 1fr; }
    .vl-legend { gap: 8px; }
}