/* =====================================================================
 * N14 / 41 · 模型量化技术图解 —— 独立皮肤「图解实验室」
 * 冷蓝数据面板 + 珊瑚误差色；显存堆叠条、位宽滑杆、SVG 映射图。
 * 主题：只消费公共导航写入的 <html data-theme>，不自建开关。
 * ===================================================================== */

.mq-page {
    --nx-bg:        #f2f6fc;
    --nx-bg-2:      #e8eff9;
    --nx-surface:   #ffffff;
    --nx-surface-2: #f3f7fd;
    --nx-surface-3: #e6eef9;
    --nx-ink:       #101c33;
    --nx-ink-2:     #465878;
    --nx-ink-3:     #8595ad;
    --nx-line:      #d9e3f2;
    --nx-line-2:    #eaf0f9;
    --nx-a:         #2456c4;
    --nx-b:         #0e8f8f;
    --nx-tint:      #e5edff;
    --nx-deep:      #1b439c;
    --mq-err:       #e05a4f;
    --tsk-card: #ffffff; --tsk-line: #d9e3f2; --tsk-faint: #8595ad; --tsk-sub: #465878; --tsk-ink: #101c33;
}
:root[data-theme="dark"] .mq-page {
    --nx-bg:        #0a101c;
    --nx-bg-2:      #101a2b;
    --nx-surface:   #14203a;
    --nx-surface-2: #1a2a48;
    --nx-surface-3: #223556;
    --nx-ink:       #edf3ff;
    --nx-ink-2:     #a9badd;
    --nx-ink-3:     #7d90b2;
    --nx-line:      #2a3c5e;
    --nx-line-2:    #1e2d49;
    --nx-a:         #7fa8ff;
    --nx-b:         #5fd0c5;
    --nx-tint:      rgba(127, 168, 255, .16);
    --nx-deep:      #b3cbff;
    --mq-err:       #f2918a;
    --tsk-card: #14203a; --tsk-line: #2a3c5e; --tsk-faint: #7d90b2; --tsk-sub: #a9badd; --tsk-ink: #edf3ff;
}

.mq-page .n14-hero h1 em { color: var(--nx-a); }
.mq-hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.mq-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 22px; }
.mq-examples .n14-small { margin-right: 4px; }
.mq-disclaimer { margin-top: 16px; max-width: 56ch; }

.mq-console { border-top: 3px solid var(--nx-b); }
.mq-console .n14-row { margin-bottom: 13px; }
.mq-console .n14-row:last-of-type { margin-bottom: 0; }
.mq-precision { margin-bottom: 13px; }
.mq-kvrow { align-items: center; justify-content: space-between; }

/* 显存预算：堆叠条 + 分项 */
.mq-budget { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--nx-line-2); }
.mq-budget__total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mq-budget__total b { font-family: var(--nx-mono); font-size: 30px; color: var(--nx-ink); line-height: 1.2; }
.mq-budget__total span { font-size: 13px; color: var(--nx-ink-3); }
.mq-bar { display: flex; height: 22px; border-radius: 7px; overflow: hidden; background: var(--nx-surface-3); border: 1px solid var(--nx-line); }
.mq-bar i { display: block; height: 100%; min-width: 1px; transition: width .25s; }
.mq-bar i[data-k="w"] { background: var(--nx-a); }
.mq-bar i[data-k="k"] { background: var(--nx-b); }
.mq-bar i[data-k="o"] { background: #e0a63c; }
.mq-bar i[data-k="f"] { background: repeating-linear-gradient(45deg, var(--nx-line) 0 5px, var(--nx-surface-2) 5px 10px); }
.mq-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--nx-ink-2); }
.mq-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mq-legend em { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.mq-legend b { font-family: var(--nx-mono); color: var(--nx-ink); }
.mq-verdict { margin-top: 12px; }
.mq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; margin-top: 12px; }
.mq-stats div { background: var(--nx-surface-2); border: 1px solid var(--nx-line); border-radius: 9px; padding: 8px 11px; }
.mq-stats b { display: block; font-family: var(--nx-mono); font-size: 16px; color: var(--nx-ink); }
.mq-stats span { font-size: 11.5px; color: var(--nx-ink-3); }

/* 量化图解 */
.mq-diagram { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
.mq-slider input[type="range"] { width: 100%; accent-color: var(--nx-a); height: 22px; }
.mq-slider__ticks { display: flex; justify-content: space-between; font-family: var(--nx-mono); font-size: 11px; color: var(--nx-ink-3); }
.mq-formula { margin-top: 14px; padding: 11px 13px; background: var(--nx-surface-2); border: 1px dashed var(--nx-line); border-radius: 10px; font-family: var(--nx-mono); font-size: 12.5px; line-height: 1.8; color: var(--nx-ink-2); }
.mq-plot { width: 100%; min-height: 210px; background: var(--nx-surface-2); border: 1px solid var(--nx-line); border-radius: 12px; padding: 8px; }
.mq-plot svg { width: 100%; height: 210px; display: block; overflow: visible; }
.mq-table { margin-top: 14px; max-height: 250px; overflow: auto; }
.mq-note { margin-top: 14px; }
.mq-batchmsg { margin-top: 14px; }
.mq-page #mqBatchWrap { margin-top: 18px; }

@media (max-width: 980px) {
    .mq-hero, .mq-diagram { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .mq-budget__total b { font-size: 24px; }
    .mq-legend { gap: 9px; }
}