/* tokens */
:root, html[data-theme="dark"] {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --bg-card-hover: #273549;
    --bg-input: #0b1120;
    --text: #e2e8f0;
    --text-dim: #94a3b8;
    --border: #334155;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --up: #ef4444;
    --down: #22c55e;
    --flat: #6b7280;
    --warn: #f59e0b;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius: var(--radius-md);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --gap-sm: 4px;
    --gap-md: 8px;
    --gap-lg: 12px;
    --up-soft: color-mix(in oklab, var(--up) 14%, transparent);
    --down-soft: color-mix(in oklab, var(--down) 14%, transparent);
    --flat-soft: color-mix(in oklab, var(--flat) 14%, transparent);
    --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent);
    --warn-soft: color-mix(in oklab, var(--warn) 14%, transparent);
    --on-accent: #fff;
    --scrim: rgba(0, 0, 0, 0.55);
    --cat-1: #3b82f6;
    --cat-2: #ef4444;
    --cat-3: #f59e0b;
    --cat-4: #22c55e;
    --cat-5: #a855f7;
    --cat-6: #06b6d4;
    --cat-7: #ec4899;
    --cat-8: #84cc16;
    --cat-9: #f97316;
    --cat-10: #14b8a6;
    --cat-11: #6366f1;
    --font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

html[data-theme="light"] {
    --bg: #f1f5f9;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-input: #ffffff;
    --text: #0f172a;
    --text-dim: #64748b;
    --border: #e2e8f0;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --up: #dc2626;
    --down: #16a34a;
    --flat: #6b7280;
    --warn: #d97706;
    --shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.1);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius: var(--radius-md);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --gap-sm: 4px;
    --gap-md: 8px;
    --gap-lg: 12px;
    --up-soft: color-mix(in oklab, var(--up) 14%, transparent);
    --down-soft: color-mix(in oklab, var(--down) 14%, transparent);
    --flat-soft: color-mix(in oklab, var(--flat) 14%, transparent);
    --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent);
    --warn-soft: color-mix(in oklab, var(--warn) 14%, transparent);
    --on-accent: #fff;
    --scrim: rgba(15, 23, 42, 0.35);
    --cat-1: #60a5fa;
    --cat-2: #f87171;
    --cat-3: #fbbf24;
    --cat-4: #4ade80;
    --cat-5: #c084fc;
    --cat-6: #22d3ee;
    --cat-7: #f472b6;
    --cat-8: #a3e635;
    --cat-9: #fb923c;
    --cat-10: #2dd4bf;
    --cat-11: #818cf8;
}

/* base */
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
}

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--flat); }

/* components */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* drawer transitions */
.slide-enter-active,
.slide-leave-active {
    transition: transform 0.25s ease;
}

.slide-enter-from,
.slide-leave-to {
    transform: translateX(100%);
}

.slide-left-enter-active,
.slide-left-leave-active {
    transition: transform 0.25s ease;
}

.slide-left-enter-from,
.slide-left-leave-to {
    transform: translateX(-100%);
}

/* shared components — 不放入 @layer：Tailwind CDN v3 的 preflight/utilities 是
   unlayered（优先级最高），会覆盖 @layer 内规则导致 .chart-btn.is-active 等失效。
   改为普通规则后靠类选择器 specificity 天然高于 preflight 的元素重置。 */
.panel {
        background: var(--bg-card-hover);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }

    .section-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 8px;
    }

    .micro-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: var(--text-dim);
        font-weight: 500;
    }

    .chart-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        padding: 2px 0 8px;
    }

    .chart-group {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .chart-btn {
        background: var(--bg-card-hover);
        color: var(--text-dim);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 2px 10px;
        cursor: pointer;
        font-size: 12px;
        line-height: 18px;
    }

    .chart-btn.is-active {
        background: var(--accent);
        color: var(--on-accent);
        border-color: var(--accent);
    }

    .chart-check {
        display: flex;
        align-items: center;
        gap: 3px;
        cursor: pointer;
        color: var(--text-dim);
        font-size: 12px;
    }

    .empty-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 128px;
    }