/* UnfoldX Monitor — Linear / Clerk style ops console */

:root {
    --bg: #f3f3f0;
    --sidebar: #ebebe6;
    --card: #ffffff;
    --line: #e2e2dc;
    --line-strong: #d4d4cc;
    --text: #141413;
    --muted: #6f6f69;
    --faint: #9a9a93;
    --accent: #171717;
    --ok: #0d7a4f;
    --ok-soft: #e3f4ec;
    --bad: #c4332a;
    --bad-soft: #fdecea;
    --warn: #9a6700;
    --warn-soft: #fff4d6;
    --info: #315e8a;
    --info-soft: #e8f0f8;
    --shadow: 0 1px 2px rgba(20, 20, 19, 0.04);
    --space: 28px;
    --radius: 16px;
    --font: "Plus Jakarta Sans", "Source Han Sans SC", "Noto Sans SC", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    letter-spacing: -0.015em;
}

body.monitor-app { min-height: 100vh; }
.chart-container { position: relative; height: 320px; width: 100%; }

/* Login */
.ux-login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background: var(--bg);
}
.ux-login {
    width: min(400px, 100%);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 36px 32px 28px;
    box-shadow: var(--shadow);
}
.ux-login-mark {
    width: 36px;
    height: 36px;
    display: block;
    object-fit: contain;
}
.ux-login h1 {
    margin: 18px 0 6px;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.03em;
}
.ux-login p.lead { margin: 0 0 24px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.ux-field { margin-bottom: 14px; }
.ux-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}
.ux-input, .ux-select, .ux-date {
    width: 100%;
    border: 1px solid var(--line-strong);
    background: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    color: var(--text);
}
.ux-input:focus, .ux-select:focus, .ux-date:focus {
    outline: none;
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(20, 20, 19, 0.08);
}
.ux-btn {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 9px 13px;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.ux-btn:disabled { opacity: .4; cursor: default; }
.ux-btn-primary { background: var(--accent); color: #fff; }
.ux-btn-primary:hover { background: #2a2a28; }
.ux-btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--text); }
.ux-btn-ghost:hover { background: var(--bg); }
.ux-btn-icon { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; }

/* Shell */
.ux-shell { display: flex; height: 100vh; overflow: hidden; background: var(--bg); }
.ux-sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--sidebar);
    color: var(--text);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
}
.ux-brand {
    padding: 18px 16px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ux-brand-mark {
    width: 28px;
    height: 28px;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}
.ux-brand-name { font-weight: 700; font-size: 13px; letter-spacing: -0.02em; }
.ux-brand-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.ux-nav { flex: 1; overflow-y: auto; padding: 4px 10px 16px; }
.ux-nav-label {
    padding: 14px 10px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--faint);
}
.ux-nav-label:first-child { padding-top: 4px; }
.sidebar-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 0;
    background: transparent;
    color: #3f3f3a;
    border-radius: 8px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 520;
    text-align: left;
    cursor: pointer;
}
.sidebar-item i { width: 15px; color: var(--faint); font-size: 12px; }
.sidebar-item:hover { background: rgba(255,255,255,.55); }
.sidebar-item.active {
    background: var(--card);
    color: var(--text);
    font-weight: 620;
    box-shadow: var(--shadow);
}
.sidebar-item.active i { color: var(--text); }
.ux-userbox { padding: 12px; border-top: 1px solid var(--line); }
.ux-user-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ux-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #dddcd6;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
}
.ux-user-name { font-size: 13px; font-weight: 620; }
.ux-user-role { font-size: 11px; color: var(--muted); }

.ux-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ux-topbar {
    min-height: 60px;
    padding: 12px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 20;
    flex-shrink: 0;
}
.ux-kicker { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
#tab-title {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.035em;
}
.ux-title-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.ux-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ux-range {
    display: flex;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 3px;
}
.quick-range-btn {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 7px;
    cursor: pointer;
}
.quick-range-btn.is-active,
.quick-range-btn.bg-blue-50 {
    background: var(--accent);
    color: #fff;
}
.ux-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
}
.ux-dates input[type="date"] {
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
}
.ux-dates input[type="date"]:focus { outline: none; }
.ux-tz { font-size: 11px; color: var(--faint); }

.ux-banner {
    margin: 0 24px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    display: none;
    position: relative;
    z-index: 20;
    flex-shrink: 0;
}
.ux-banner.is-on { display: block; margin-top: 12px; }
.ux-banner-error { background: var(--bad-soft); color: #7a1610; border: 1px solid #f3c4c0; }
.ux-banner-warn { background: var(--warn-soft); color: #6b4a08; }
.ux-banner-ok { background: var(--ok-soft); color: #1d4a30; }

.ux-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 24px 28px 56px;
    position: relative;
    z-index: 0;
    isolation: isolate;
}
.ux-scroll.is-fill { overflow: hidden; padding: 12px 16px 16px; display: flex; }

/*
 * Page header stays above the scroller. Horizontal wrappers must not become
 * nested vertical scrollports: overflow-x:auto otherwise computes overflow-y
 * to auto, sticky thead attaches there, and rows paint over the frozen header.
 */
.ux-scroll .overflow-x-auto {
    overflow-x: auto;
    overflow-y: clip;
}
.ux-scroll .overflow-auto,
.ux-scroll .overflow-y-auto,
.ux-scroll .overflow-x-auto.max-h-64,
.ux-scroll .overflow-x-auto.max-h-80,
.ux-scroll .overflow-x-auto.max-h-96 {
    overflow: auto;
}
.ux-scroll .overflow-auto table,
.ux-scroll .overflow-x-auto table,
.ux-scroll .overflow-y-auto table {
    border-collapse: separate;
    border-spacing: 0;
}
.ux-scroll .overflow-auto thead,
.ux-scroll .overflow-x-auto thead,
.ux-scroll .overflow-y-auto thead {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
}
.ux-scroll .overflow-auto thead th,
.ux-scroll .overflow-x-auto thead th,
.ux-scroll .overflow-y-auto thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--line);
}
.ux-scroll thead.bg-slate-50,
.ux-scroll thead.bg-slate-50 th {
    background: #f8fafc;
}
.ux-scroll.is-fill > .tab-pane { flex: 1; min-height: 0; }

.ux-card, .ux-surface, .bg-white {
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.ux-card { border-radius: var(--radius); padding: 18px; }
.ux-card-title { margin: 0; font-size: 14px; font-weight: 650; }
.ux-card-sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

.ux-life {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 16px;
}
.ux-life-item { min-width: 88px; }
.ux-life-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.ux-life-value { font-size: 16px; font-weight: 650; letter-spacing: -0.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ux-life-hint { font-size: 11px; color: var(--faint); margin-top: 2px; }
.ux-life-item + .ux-life-item {
    border-left: 1px solid var(--line);
    padding-left: 24px;
}
@media (max-width: 960px) {
    .ux-life-item + .ux-life-item { border-left: none; padding-left: 0; }
}

.ux-kpi {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 16px 14px;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
}
.ux-kpi-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.ux-kpi-value {
    margin-top: 8px;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.ux-kpi-foot { margin-top: auto; padding-top: 10px; font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.ux-chip { display: inline-flex; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 650; }
.ux-chip-up { background: var(--ok-soft); color: var(--ok); }
.ux-chip-down { background: var(--bad-soft); color: var(--bad); }

.ux-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.ux-table th {
    font-size: 11px;
    font-weight: 650;
    color: var(--muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: transparent;
}
.ux-table td { padding: 12px; border-bottom: 1px solid #eeebe4; }
.ux-link { color: var(--text); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; background: none; border: 0; font: inherit; padding: 0; }
.ux-empty { padding: 48px 16px; text-align: center; color: var(--muted); font-size: 13px; }

.ux-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space);
}
.ux-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px 20px;
    box-shadow: var(--shadow);
}
.ux-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}
.ux-panel-title {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.02em;
}
.ux-panel-kicker {
    font-size: 11px;
    font-weight: 600;
    color: var(--faint);
    white-space: nowrap;
    padding-top: 3px;
}
.ux-panel-sub {
    margin: 0 0 18px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.55;
}

/* Flush sibling cards on a page never sit on top of each other */
.tab-pane > .bg-white + .bg-white:not([class*="mt-"]) {
    margin-top: var(--space);
}

/* Empty tables drop chrome so they don't look like a clipped grid */
.ux-table:has(td[colspan]) thead,
.ux-panel table:has(td[colspan]) thead { display: none; }
.ux-empty-well {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    min-height: 132px;
    padding: 32px 20px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 520;
    background: #f7f7f3;
    border: 1px dashed var(--line);
    border-radius: 12px;
}
.ux-empty-well em {
    font-style: normal;
    font-size: 12px;
    color: var(--faint);
    font-weight: 500;
}
.ux-table:has(.ux-empty-well),
.ux-panel table:has(.ux-empty-well) { width: 100%; }
.ux-table:has(.ux-empty-well) td,
.ux-panel table:has(.ux-empty-well) td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.ux-mono { font-family: var(--mono); font-size: 12px; }
.ux-pagehead { margin-bottom: 16px; }
.ux-pagehead p { margin: 6px 0 0; color: var(--muted); font-size: 13px; max-width: 72ch; line-height: 1.55; }

.interaction-tab-btn.active { background: var(--accent) !important; color: #fff !important; }

.no-scrollbar { scrollbar-width: thin; scrollbar-color: #cfcfc6 transparent; }
.artifact-code-viewer {
    display: grid; grid-template-columns: auto 1fr; max-height: min(70vh, 720px);
    overflow: auto; background: #161616; border-radius: 10px;
    font-family: var(--mono); font-size: 12px; line-height: 1.55;
}
.artifact-code-gutter {
    position: sticky; left: 0; z-index: 1; padding: 12px 0;
    background: #1e1e1e; color: #777; text-align: right; user-select: none;
    border-right: 1px solid #333; min-width: 3.25rem;
}
.artifact-code-gutter span { display: block; padding: 0 10px 0 12px; min-height: 1.55em; }
.artifact-code-body { margin: 0; padding: 12px 14px; overflow-x: auto; background: transparent !important; }
.artifact-code-body code, .artifact-code-body .hljs { background: transparent !important; padding: 0 !important; }
.artifact-media-frame {
    display: flex; align-items: center; justify-content: center;
    min-height: 240px; max-height: min(70vh, 720px); overflow: auto;
    background: #161616; border-radius: 10px; padding: 12px;
}
.artifact-media-frame img, .artifact-media-frame video { max-width: 100%; max-height: min(66vh, 680px); border-radius: 8px; }

.sls-log-table { table-layout: fixed; }
.sls-log-table th { position: relative; }
.sls-log-table .col-resizer {
    position: absolute; top: 0; right: 0; width: 10px; height: 100%;
    cursor: col-resize; user-select: none; z-index: 5;
}

/* Motion + interaction */
.ux-card, .ux-surface, .ux-kpi, .ux-life, .ux-panel, .bg-white {
    transition: box-shadow .22s ease, border-color .22s ease;
}
.ux-kpi, .ux-life-item {
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.ux-kpi:hover, .ux-life-item:hover {
    transform: translateY(-2px);
}
.ux-card:hover, .ux-kpi:hover, .ux-panel:hover, .bg-white:hover {
    box-shadow: 0 6px 16px -12px rgba(20,20,19,.22);
    border-color: var(--line-strong);
}
.sidebar-item, .ux-btn, .quick-range-btn, .ux-link, .interaction-tab-btn {
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ux-btn:active, .quick-range-btn:active, .sidebar-item:active { transform: scale(.97); }
.ux-btn-icon.is-spinning i { animation: ux-spin .7s linear infinite; }
@keyframes ux-spin { to { transform: rotate(360deg); } }

.tab-pane { animation: none; }
.tab-pane.is-entering .ux-life-item,
.tab-pane.is-entering .bg-white,
.tab-pane.is-entering .ux-kpi,
.tab-pane.is-entering .ux-card {
    animation: ux-rise .48s cubic-bezier(.22,1,.36,1) both;
}
.tab-pane.is-entering .ux-life-item:nth-child(2),
.tab-pane.is-entering .bg-white:nth-child(2) { animation-delay: .04s; }
.tab-pane.is-entering .ux-life-item:nth-child(3),
.tab-pane.is-entering .bg-white:nth-child(3) { animation-delay: .08s; }
.tab-pane.is-entering .ux-life-item:nth-child(4),
.tab-pane.is-entering .bg-white:nth-child(4) { animation-delay: .12s; }
.tab-pane.is-entering .ux-life-item:nth-child(5) { animation-delay: .16s; }
.tab-pane.is-entering .ux-life-item:nth-child(6) { animation-delay: .2s; }

@keyframes ux-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.ux-scroll { scroll-behavior: smooth; }
.ux-table tbody tr { transition: background .16s ease; }
.ux-table tbody tr:hover td { background: #f6f6f2; }

.ux-nav-toggle {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ux-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20,20,19,.28);
    backdrop-filter: blur(6px);
    z-index: 30;
    opacity: 0;
    transition: opacity .2s ease;
}
.ux-backdrop.is-on { display: block; opacity: 1; }

.tippy-box[data-theme~='monitor'] {
    background: #171717;
    color: #f5f5f2;
    font-family: var(--font);
    font-size: 12px;
    line-height: 1.45;
    border-radius: 8px;
    padding: 2px 2px;
}
.tippy-box[data-theme~='monitor'] .tippy-content { padding: 6px 8px; }
.tippy-box[data-theme~='monitor'][data-placement^='top'] > .tippy-arrow { color: #171717; }

@media (max-width: 1100px) {
    .ux-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .chart-container { height: 280px; }
}
@media (max-width: 900px) {
    .ux-scroll { padding: 14px; }
    #tab-title { font-size: 20px; }
    .ux-topbar { padding: 10px 14px; }
    .ux-controls { width: 100%; }
    .ux-range, .ux-dates { flex: 1; }
    .ux-dates { min-width: 0; }
    .chart-container, .h-80, .h-72, .h-64 { height: 240px !important; }
    .vi-workbench { grid-template-columns: 1fr !important; }
    .vi-left, .vi-right { max-height: 240px; }
}
@media (max-width: 767px) {
    .ux-nav-toggle { display: grid; }
    .ux-sidebar {
        display: flex !important;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        transform: translateX(-104%);
        transition: transform .28s cubic-bezier(.22,1,.36,1);
        box-shadow: 12px 0 40px -24px rgba(0,0,0,.35);
        pointer-events: none;
    }
    .ux-sidebar.is-open {
        transform: none;
        pointer-events: auto;
    }
}
@media (max-width: 640px) {
    :root { --space: 20px; }
    .ux-life { gap: 12px 16px; }
    .ux-life-item { min-width: 42%; }
    .ux-kpi-value, .text-2xl { font-size: 22px !important; }
    .ux-title-meta { display: none; }
    .ux-kbd span { display: none; }
    .ux-cmdk { padding-top: 8vh; }
    .ux-panel { padding: 18px 16px 16px; }
    .ux-scroll { padding: 16px 14px 36px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

#nprogress .bar {
    background: #171717 !important;
    height: 2px;
}
#nprogress .peg { box-shadow: none !important; }
#nprogress .spinner { display: none !important; }

body.is-fetching #refresh-btn i { animation: ux-spin .7s linear infinite; }

.ux-kbd {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}
.ux-kbd:hover { border-color: var(--line-strong); color: var(--text); }
.ux-kbd kbd {
    font: inherit;
    font-family: var(--mono);
    font-size: 10px;
    background: var(--bg);
    border-radius: 4px;
    padding: 1px 5px;
}

.ux-cmdk[hidden] { display: none !important; }
.ux-cmdk {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: start center;
    padding: 12vh 16px 16px;
}
.ux-cmdk-scrim {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 19, .28);
    backdrop-filter: blur(8px);
}
.ux-cmdk-panel {
    position: relative;
    width: min(520px, 100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 80px -32px rgba(20,20,19,.45);
    overflow: hidden;
}
.ux-cmdk-panel input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
    font: inherit;
    font-size: 14px;
    outline: none;
}
.ux-cmdk-panel ul { list-style: none; margin: 0; padding: 6px; max-height: 320px; overflow: auto; }
.ux-cmdk-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 560;
    cursor: pointer;
}
.ux-cmdk-item.is-on, .ux-cmdk-item:hover { background: #f3f3ef; }
.ux-cmdk-empty { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 13px; }
.ux-cmdk-foot {
    border-top: 1px solid var(--line);
    padding: 8px 12px;
    font-size: 11px;
    color: var(--faint);
}

.notyf { font-family: var(--font); }
.notyf__toast { border-radius: 10px !important; box-shadow: 0 10px 24px -16px rgba(20,20,19,.4) !important; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#log-modal:not(.hidden), #video-modal:not(.hidden) {
    animation: ux-fade .18s ease both;
}
@keyframes ux-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

[v-cloak] { display: none; }

/* ===== 图表空态 ===== */
.chart-empty {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 6px;
    text-align: center;
    color: var(--faint);
    font-size: 13px;
    pointer-events: none;
}
.chart-empty i { font-size: 20px; opacity: .6; }
.chart-empty em { font-style: normal; font-size: 11px; opacity: .7; }

/* ===== 队列等待面板空态 ===== */
.qw-panel { position: relative; }
.qw-panel .qw-grid { transition: opacity .2s ease; }
.qw-panel.is-empty .qw-grid { opacity: .3; }
.qw-empty {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: color-mix(in srgb, var(--card) 78%, transparent);
    place-content: center;
    justify-items: center;
    gap: 5px;
    text-align: center;
}
.qw-panel.is-empty .qw-empty { display: grid; }
.qw-empty i { font-size: 18px; opacity: .55; }
.qw-empty span { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.qw-empty em { font-style: normal; font-size: 11px; color: var(--faint); }

/* ===== KPI 空态覆盖层 ===== */
.ux-kpi-card { position: relative; display: flex; flex-direction: column; }
.ux-kpi-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.ux-kpi-empty {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: var(--card);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: var(--faint);
    font-size: 12px;
    pointer-events: none;
}
.ux-kpi-empty i { font-size: 18px; opacity: .6; }
.ux-kpi-card.is-empty > *:not(.ux-kpi-empty) { visibility: hidden; }
.ux-kpi-card.is-empty .ux-kpi-empty { display: flex; }

/* ===== 首屏骨架屏 ===== */
.ux-skel {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    background: var(--line);
    border-radius: 6px;
    min-height: 1em;
}
.ux-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    animation: ux-shimmer 1.4s infinite;
}
@keyframes ux-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* ===== 更新时间戳（顶栏） ===== */
.ux-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
    padding: 0 2px;
}
.ux-updated::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ok);
    opacity: .85;
    flex-shrink: 0;
}
body.is-fetching .ux-updated::before {
    background: var(--warn);
    animation: ux-blink .9s ease-in-out infinite;
}
@keyframes ux-blink { 50% { opacity: .25; } }

/* ===== 数据刷新后的轻扫光 ===== */
@keyframes ux-glow {
    0% { box-shadow: 0 0 0 0 rgba(20,20,19,0); }
    35% { box-shadow: 0 0 0 3px rgba(20,20,19,.06); }
    100% { box-shadow: 0 0 0 0 rgba(20,20,19,0); }
}
.just-updated { animation: ux-glow .8s ease; }

/* ===== 页头说明行（短文案 + 口径胶囊） ===== */
.ux-note-row { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.ux-note-tip {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--faint);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1px 9px;
    cursor: help;
}

/* ===== 侧栏图标按钮（退出等） ===== */
.ux-icon-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--faint);
    display: grid;
    place-items: center;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s ease;
}
.ux-icon-btn:hover { background: var(--card); border-color: var(--line-strong); color: var(--text); }

/* ===== 侧栏当前项左侧指示条 ===== */
.sidebar-item.active { position: relative; }
.sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
}

/* ===== 任务列表 ===== */
.task-list-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.task-list-toolbar h3 { margin: 0; font-size: 16px; font-weight: 680; }
.task-list-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; }
.task-list-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.task-list-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 650; }
.task-list-filters .ux-select { min-width: 132px; padding: 8px 10px; font-size: 12.5px; }
.task-list-filters .ux-input { width: 170px; padding: 8px 10px; font-size: 12.5px; }
.task-list-filters .ux-date { width: 142px; padding: 8px 10px; font-size: 12.5px; }
.task-list-summary {
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 38px;
    padding: 0 4px;
    color: var(--muted);
    font-size: 12px;
}
#task-list-status-text { margin-left: auto; color: var(--faint); }
.task-list-feed { display: grid; gap: 12px; }
.task-list-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px 14px;
    box-shadow: var(--shadow);
}
.task-list-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.task-list-card-title { min-width: 0; }
.task-list-card-title h4 { margin: 7px 0 0; font-size: 15px; font-weight: 670; line-height: 1.4; }
.task-list-card-title code { color: var(--muted); font-family: var(--mono); font-size: 11px; word-break: break-all; }
.task-list-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.task-list-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    background: var(--bg);
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 680;
}
.task-list-badge.source-production { background: var(--info-soft); color: var(--info); }
.task-list-badge.source-batch { background: var(--warn-soft); color: var(--warn); }
.task-list-badge.status-completed { background: var(--ok-soft); color: var(--ok); }
.task-list-badge.status-failed { background: var(--bad-soft); color: var(--bad); }
.task-list-card-time { flex-shrink: 0; color: var(--faint); font-family: var(--mono); font-size: 11px; }
.task-list-grid { display: grid; grid-template-columns: 1fr; gap: 13px; margin-top: 14px; }
.task-list-block { min-width: 0; border-top: 1px solid var(--line); padding-top: 12px; }
.task-list-label { margin-bottom: 6px; color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.task-list-instruction {
    margin: 0;
    max-height: 7.9em;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
    font: 12.5px/1.65 var(--font);
}
.task-list-instruction-wrap.is-collapsible { position: relative; padding-bottom: 23px; }
.task-list-instruction-wrap.is-collapsible:not(.is-expanded)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    height: 34px;
    pointer-events: none;
    background: linear-gradient(transparent, var(--card));
}
.task-list-instruction-wrap.is-expanded .task-list-instruction { max-height: none; }
.task-list-expand {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    border: 0;
    padding: 2px 0;
    background: transparent;
    color: var(--info);
    font: 650 11px var(--font);
    cursor: pointer;
}
.task-list-expand:hover { text-decoration: underline; text-underline-offset: 2px; }
.task-list-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 7px 22px; color: var(--muted); font-size: 11.5px; }
.task-list-meta-row { display: flex; gap: 8px; align-items: flex-start; }
.task-list-meta-row strong { min-width: 58px; color: var(--faint); font-weight: 650; }
.task-list-meta-row span { min-width: 0; word-break: break-word; }
.task-list-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.task-list-chip { max-width: 100%; padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font: 10.5px/1.35 var(--mono); word-break: break-all; }
.task-list-chip.is-download { color: var(--info); border-color: color-mix(in srgb, var(--info) 28%, var(--line)); text-decoration: none; }
.task-list-chip.is-download:hover { background: var(--info-soft); border-color: var(--info); }
.task-list-chip.is-download.is-loading { opacity: .55; pointer-events: none; }
.task-list-error { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bad-soft); color: var(--bad); font-size: 11.5px; white-space: pre-wrap; word-break: break-word; }
.task-list-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.task-list-video-action { background: var(--ok); border-color: var(--ok); color: #fff; }
.task-list-video-action:hover { filter: brightness(.94); }
.task-list-video-action.is-loading { opacity: .6; }
.task-list-empty { padding: 54px 20px; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.task-list-pagination { display: flex; justify-content: center; align-items: center; gap: 14px; padding-top: 18px; }
.task-list-pagination span { min-width: 70px; text-align: center; color: var(--muted); font: 12px var(--mono); }

@media (max-width: 900px) {
    .task-list-toolbar { align-items: stretch; flex-direction: column; }
    .task-list-grid { grid-template-columns: 1fr; }
    .task-list-card-head { flex-direction: column; gap: 8px; }
}

@media (max-width: 560px) {
    .task-list-filters, .task-list-filters label { width: 100%; }
    .task-list-filters .ux-input, .task-list-filters .ux-select, .task-list-filters .ux-date, .task-list-filters .ux-btn { width: 100%; }
    .task-list-summary { flex-wrap: wrap; }
    #task-list-status-text { width: 100%; margin-left: 0; }
    .task-list-meta { grid-template-columns: 1fr; }
}

/* ============================================================
   深色模式：变量翻转 + Tailwind 工具类映射
   ============================================================ */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0e0e0d;
    --sidebar: #131312;
    --card: #171716;
    --line: #262624;
    --line-strong: #3a3a36;
    --text: #f2f2ee;
    --muted: #a3a39b;
    --faint: #76766f;
    --accent: #f2f2ee;
    --ok: #4ade80;
    --ok-soft: rgba(74,222,128,.12);
    --bad: #f87171;
    --bad-soft: rgba(248,113,113,.12);
    --warn: #fbbf24;
    --warn-soft: rgba(251,191,36,.12);
    --info: #7ea6d8;
    --info-soft: rgba(126,166,216,.14);
    --shadow: 0 1px 2px rgba(0,0,0,.5);
}
html[data-theme="dark"] .ux-btn-primary { color: #141413; }
html[data-theme="dark"] .ux-btn-primary:hover { background: #d8d8d2; }
html[data-theme="dark"] .ux-btn-ghost { background: #1c1c1a; border-color: #3a3a36; color: #e8e8e2; }
html[data-theme="dark"] .ux-btn-ghost:hover { background: #262624; }
html[data-theme="dark"] .vi-btn-primary { color: #141413; }
html[data-theme="dark"] .quick-range-btn.is-active { color: #141413; }

/* 中性色工具类映射 */
html[data-theme="dark"] .bg-white { background-color: var(--card) !important; }
html[data-theme="dark"] .bg-slate-50 { background-color: #1c1c1a !important; }
html[data-theme="dark"] .bg-slate-50\/60 { background-color: rgba(28,28,26,.6) !important; }
html[data-theme="dark"] .bg-slate-100 { background-color: #232320 !important; }
html[data-theme="dark"] .bg-slate-700 { background-color: #3f3f3a !important; }
html[data-theme="dark"] .text-slate-900 { color: #f5f5f1 !important; }
html[data-theme="dark"] .text-slate-800 { color: #e8e8e2 !important; }
html[data-theme="dark"] .text-slate-700 { color: #d4d4cd !important; }
html[data-theme="dark"] .text-slate-600 { color: #b3b3ab !important; }
html[data-theme="dark"] .text-slate-500 { color: #9a9a93 !important; }
html[data-theme="dark"] .text-slate-400 { color: #82827b !important; }
html[data-theme="dark"] .border-slate-200\/60 { border-color: rgba(58,58,54,.6) !important; }
html[data-theme="dark"] .border-slate-200 { border-color: #3a3a36 !important; }
html[data-theme="dark"] .border-slate-100 { border-color: #2b2b28 !important; }
html[data-theme="dark"] .border-slate-50 { border-color: #232320 !important; }
html[data-theme="dark"] .divide-slate-50 > * + * { border-color: #232320 !important; }

/* 彩色 chip 工具类映射（图标底 / 趋势色 / 状态色） */
html[data-theme="dark"] .bg-blue-50 { background-color: rgba(96,165,250,.14) !important; }
html[data-theme="dark"] .text-blue-600 { color: #93c5fd !important; }
html[data-theme="dark"] .text-blue-500 { color: #93c5fd !important; }
html[data-theme="dark"] .bg-green-50 { background-color: rgba(74,222,128,.13) !important; }
html[data-theme="dark"] .text-green-600 { color: #86efac !important; }
html[data-theme="dark"] .text-green-700 { color: #86efac !important; }
html[data-theme="dark"] .text-green-500 { color: #86efac !important; }
html[data-theme="dark"] .bg-purple-50 { background-color: rgba(192,132,252,.14) !important; }
html[data-theme="dark"] .text-purple-600 { color: #d8b4fe !important; }
html[data-theme="dark"] .bg-orange-50 { background-color: rgba(251,146,60,.14) !important; }
html[data-theme="dark"] .text-orange-600 { color: #fdba74 !important; }
html[data-theme="dark"] .bg-red-50 { background-color: rgba(248,113,113,.13) !important; }
html[data-theme="dark"] .text-red-400 { color: #fca5a5 !important; }
html[data-theme="dark"] .text-red-500 { color: #f87171 !important; }
html[data-theme="dark"] .text-red-600 { color: #fca5a5 !important; }
html[data-theme="dark"] .text-red-700 { color: #fca5a5 !important; }
html[data-theme="dark"] .text-red-900 { color: #fecaca !important; }
html[data-theme="dark"] .border-red-100 { border-color: rgba(248,113,113,.25) !important; }
html[data-theme="dark"] .bg-amber-50\/70 { background-color: rgba(251,191,36,.12) !important; }
html[data-theme="dark"] .text-amber-600 { color: #fcd34d !important; }
html[data-theme="dark"] .bg-emerald-50\/70 { background-color: rgba(52,211,153,.12) !important; }
html[data-theme="dark"] .text-emerald-600 { color: #6ee7b7 !important; }
html[data-theme="dark"] .border-emerald-100 { border-color: rgba(52,211,153,.25) !important; }
html[data-theme="dark"] .bg-rose-50\/70 { background-color: rgba(251,113,133,.13) !important; }
html[data-theme="dark"] .text-rose-500 { color: #fda4af !important; }
html[data-theme="dark"] .border-rose-100 { border-color: rgba(251,113,133,.25) !important; }
html[data-theme="dark"] .bg-fuchsia-50\/70 { background-color: rgba(232,121,249,.14) !important; }
html[data-theme="dark"] .text-fuchsia-600 { color: #e879f9 !important; }
html[data-theme="dark"] .border-fuchsia-100 { border-color: rgba(232,121,249,.22) !important; }
html[data-theme="dark"] .bg-violet-50\/70 { background-color: rgba(167,139,250,.15) !important; }
html[data-theme="dark"] .text-violet-500 { color: #a78bfa !important; }
html[data-theme="dark"] .border-violet-100 { border-color: rgba(167,139,250,.22) !important; }
html[data-theme="dark"] .bg-amber-50\/70 { background-color: rgba(251,191,36,.14) !important; }
html[data-theme="dark"] .bg-emerald-50\/70 { background-color: rgba(52,211,153,.14) !important; }
html[data-theme="dark"] .bg-indigo-50 { background-color: rgba(129,140,248,.14) !important; }
html[data-theme="dark"] .text-indigo-600 { color: #a5b4fc !important; }
html[data-theme="dark"] .text-yellow-600 { color: #fde047 !important; }

/* 组件内硬编码浅色映射 */
html[data-theme="dark"] .ux-avatar { background: #333330; color: #e8e8e2; }
html[data-theme="dark"] .ux-input, html[data-theme="dark"] .ux-select,
html[data-theme="dark"] .ux-date, html[data-theme="dark"] .ux-kbd,
html[data-theme="dark"] .ux-range, html[data-theme="dark"] .ux-dates,
html[data-theme="dark"] .ux-note-tip, html[data-theme="dark"] .ux-icon-btn:hover {
    background: #1c1c1a;
}
html[data-theme="dark"] .ux-input, html[data-theme="dark"] .ux-select,
html[data-theme="dark"] .ux-date, html[data-theme="dark"] .ux-kbd,
html[data-theme="dark"] .ux-range, html[data-theme="dark"] .ux-dates,
html[data-theme="dark"] .ux-note-tip { border-color: var(--line-strong); }
html[data-theme="dark"] .ux-empty-well { background: #1c1c1a; }
html[data-theme="dark"] .ux-skel { background: #2b2b28; }
html[data-theme="dark"] .ux-skel::after { background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%); }
html[data-theme="dark"] tr:hover td { background: rgba(255,255,255,.035) !important; }
html[data-theme="dark"] #nprogress .bar { background: #e8e8e3 !important; }
html[data-theme="dark"] .sidebar-item { color: #a3a39b; }
html[data-theme="dark"] .sidebar-item:hover { background: rgba(255,255,255,.06); color: #e8e8e2; }
html[data-theme="dark"] .sidebar-item i { color: #76766f; }
html[data-theme="dark"] .ux-banner { color: #cfcfc8; }
html[data-theme="dark"] .ux-banner-error { color: #fca5a5; }
html[data-theme="dark"] .ux-banner-warn { color: #fcd34d; }
html[data-theme="dark"] .ux-banner-ok { color: #86efac; }