/* ═══════════════════════════════════════════════════════════
   vic-goldabacus — Design System v2
   Product UI: 清晰 / 安静 / 可靠 / 专业
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   Layer: reset
   ═══════════════════════════════════════════════════════════ */

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        scroll-behavior: smooth;
    }

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

    body {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    img, svg {
        display: block;
        max-width: 100%;
    }

    input, button, textarea, select {
        font: inherit;
        color: inherit;
    }

    button {
        cursor: pointer;
        background: none;
        border: none;
    }

    ul, ol {
        list-style: none;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   Layer: tokens
   ═══════════════════════════════════════════════════════════ */

@layer tokens {
    :root {
        /* ── Sidebar (frosted glass, Apple macOS style) ── */
        --color-sidebar: rgba(255,255,255,0.92);
        --color-sidebar-border: rgba(0,0,0,0.08);
        --color-sidebar-hover: rgba(0,0,0,0.05);
        --color-sidebar-active: rgba(0,113,227,0.10);
        --color-sidebar-text: #1D1D1F;
        --color-sidebar-text-active: #0071E3;
        --color-sidebar-brand: #0071E3;

        /* ── Text ─────────────────────────────────────── */
        --color-text-primary: #1D1D1F;
        --color-text-secondary: #86868B;
        --color-text-muted: #A1A1A6;
        --color-text-inverse: #FFFFFF;

        /* ── Surface ──────────────────────────────────── */
        --color-surface: #F5F5F7;
        --color-surface-raised: #FFFFFF;
        --color-surface-alt: #F0F0F2;

        /* ── Accent (Apple blue) ──────────────────────── */
        --color-accent: #0071E3;
        --color-accent-hover: #0077ED;
        --color-accent-light: rgba(0,113,227,0.08);
        --color-ring: #0071E3;
        --color-input: #D2D2D7;

        /* ── Semantic ─────────────────────────────────── */
        --color-success: #30B158;
        --color-success-light: #ECFDF5;
        --color-success-border: rgba(48,177,88,0.25);
        --color-warning: #D97706;
        --color-warning-light: #FFFBEB;
        --color-warning-border: rgba(217,119,6,0.25);
        --color-danger: #E11D48;
        --color-danger-light: #FFF1F2;
        --color-danger-border: rgba(225,29,72,0.25);
        --color-info: #0071E3;

        /* ── 凭证列表（亿企盈风）──────────────────────── */
        --color-vlist-accent: #0061C8;   /* 时间轴圆点 / 当前计数 */
        --color-vlist-head: #EAF2FB;     /* 卡片头淡蓝 */

        /* ── Border ───────────────────────────────────── */
        --color-border: #D2D2D7;
        --color-border-subtle: #E5E5EA;

        /* ── Typography (Apple SF Pro stack) ──────────── */
        --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
        --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", "Consolas", monospace;

        --text-xs: 0.6875rem;   /* 11px */
        --text-sm: 0.75rem;     /* 12px */
        --text-base: 0.8125rem; /* 13px */
        --text-lg: 0.9375rem;   /* 15px */
        --text-xl: 1rem;        /* 16px */
        --text-2xl: 1.25rem;    /* 20px */
        --text-3xl: 1.5rem;     /* 24px */
        --text-4xl: 1.875rem;   /* 30px */

        --leading-tight: 1.25;
        --leading-normal: 1.5;
        --leading-relaxed: 1.65;

        --tracking-tight: -0.02em;
        --tracking-normal: -0.01em;
        --tracking-wide: 0.02em;

        /* ── Spacing (dense, 财务实用) ──────────────── */
        --space-xs: 4px;
        --space-sm: 8px;
        --space-md: 12px;
        --space-lg: 14px;
        --space-xl: 24px;
        --space-2xl: 28px;
        --space-3xl: 40px;
        --space-4xl: 52px;

        /* ── Border Radius (restrained) ─────────────── */
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 10px;
        --radius-xl: 12px;
        --radius-full: 9999px;

        /* ── Shadows (subtle, 边线优先) ──────────────── */
        --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.03);
        --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04);
        --shadow-md: 0 2px 6px -1px rgba(0,0,0,0.05);
        --shadow-lg: 0 4px 10px -2px rgba(0,0,0,0.05);
        --shadow-xl: 0 8px 16px -4px rgba(0,0,0,0.06);

        /* ── Transitions (direct, no spring bounce) ───── */
        --transition-fast: 120ms ease;
        --transition-base: 200ms ease;
        --transition-slow: 300ms ease;

        /* ── Layout ───────────────────────────────────── */
        --sidebar-width: 220px;
        --topbar-height: 48px;
        --content-max-width: 1600px;

        /* ── Z-Index scale ────────────────────────────── */
        --z-base: 0;
        --z-dropdown: 50;
        --z-sticky: 80;
        --z-topbar: 90;
        --z-sidebar: 100;
        --z-overlay: 120;
        --z-flash: 150;
        --z-modal: 200;
        --z-toast: 300;
        --z-tooltip: 400;
    }
}

/* ═══════════════════════════════════════════════════════════
   Layer: base
   ═══════════════════════════════════════════════════════════ */

@layer base {
    html {
        font-size: 16px;
        color: var(--color-text-primary);
    }

    body {
        font-family: var(--font-sans);
        font-size: var(--text-base);
        background: var(--color-surface);
        min-height: 100vh;
    }

    h1, h2, h3, h4 {
        line-height: var(--leading-tight);
        color: var(--color-text-primary);
        text-wrap: balance;
    }

    h1 { font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.03em; }
    h2 { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.02em; }
    h3 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; }
    h4 { font-size: var(--text-xl); font-weight: 500; }

    a:not(.btn):not(.nav-item):not(.sidebar-brand):not(.card-action) {
        color: var(--color-accent);
        transition: color var(--transition-fast);
    }

    a:not(.btn):not(.nav-item):not(.sidebar-brand):not(.card-action):hover {
        color: var(--color-accent-hover);
    }

    /* Links inside dark sidebar */
    .sidebar a:not(.btn) {
        color: var(--color-sidebar-text);
    }

    .text-muted { color: var(--color-text-muted); }
    .text-sm { font-size: var(--text-sm); }
    .text-xs { font-size: var(--text-xs); }
    .text-lg { font-size: var(--text-lg); }
    .text-right { text-align: right; }
    .text-center { text-align: center; }

    .font-mono {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
    }

    .tabular-nums {
        font-variant-numeric: tabular-nums;
    }

    /* ── Skip to content (accessibility) ─────────────── */
    .skip-link {
        position: absolute;
        top: -100%;
        left: var(--space-lg);
        z-index: var(--z-tooltip);
        padding: var(--space-sm) var(--space-lg);
        background: var(--color-accent);
        color: #fff;
        border-radius: var(--radius-sm);
        font-size: var(--text-sm);
        font-weight: 500;
    }
    .skip-link:focus {
        top: var(--space-sm);
    }

    /* 键盘焦点兜底（组件层 .btn/.input 有更精细的 focus，会覆盖此规则） */
    :focus-visible {
        outline: 2px solid var(--color-ring);
        outline-offset: 2px;
    }
}

/* ═══════════════════════════════════════════════════════════
   Layer: layout
   ═══════════════════════════════════════════════════════════ */

@layer layout {
    .layout-sidebar {
        display: flex;
    }

    .layout-sidebar .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        z-index: var(--z-sidebar);
        overflow-y: auto;
    }

    .layout-sidebar .main-content {
        margin-left: var(--sidebar-width);
        flex: 1;
        min-width: 0;
    }

    .layout-auth {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: linear-gradient(180deg, #F0F0F5 0%, #E8E8ED 100%);
    }
}

/* ═══════════════════════════════════════════════════════════
   Layer: components — Sidebar
   ═══════════════════════════════════════════════════════════ */

@layer components {
    .sidebar {
        background: var(--color-sidebar);
        backdrop-filter: blur(40px) saturate(180%);
        -webkit-backdrop-filter: blur(40px) saturate(180%);
        border-right: 1px solid var(--color-sidebar-border);
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    .sidebar--collapsed {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .sidebar-brand {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-lg);
        border-bottom: 1px solid var(--color-sidebar-border);
        transition: background var(--transition-fast);
        cursor: pointer;
    }
    .sidebar-brand:hover {
        background: rgba(0,0,0,0.03);
    }

    .sidebar-logo {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-md);
        background: var(--color-sidebar-brand);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: var(--text-base);
        flex-shrink: 0;
        box-shadow: 0 2px 6px rgba(0,113,227,0.2);
    }

    .sidebar-title {
        font-size: var(--text-lg);
        font-weight: 600;
        color: var(--color-sidebar-text);
        letter-spacing: var(--tracking-normal);
    }

    .sidebar-brand-copy {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.15;
    }

    .sidebar-version {
        margin-top: 3px;
        color: var(--color-text-tertiary);
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 0.02em;
        line-height: 1;
    }

    .sidebar-nav {
        flex: 1;
        padding: var(--space-sm);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .nav-group {
        min-width: 0;
    }

    .nav-group-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: none;
        border: none;
        cursor: pointer;
        min-height: 36px;
        padding: 0 var(--space-md);
        border-radius: var(--radius-sm);
        font-size: var(--text-base);
        font-weight: 500;
        color: var(--color-text-muted);
        line-height: 1.35;
        text-align: left;
        transition: background-color var(--transition-fast), color var(--transition-fast);
    }

    .nav-group-header:hover {
        color: var(--color-text-secondary);
        background: var(--color-sidebar-hover);
    }

    .nav-group-header:focus-visible {
        outline: 2px solid var(--color-ring);
        outline-offset: -2px;
    }

    .nav-arrow {
        width: 16px;
        flex: 0 0 16px;
        font-size: 12px;
        line-height: 1;
        text-align: center;
        transform-origin: center;
        transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nav-group.open .nav-arrow {
        transform: rotate(90deg);
    }

    .nav-group-body {
        height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-2px);
        visibility: hidden;
        transition:
            height 200ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 140ms ease,
            transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0s linear 200ms;
    }

    .nav-group.open .nav-group-body {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        transition:
            height 200ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 140ms ease 35ms,
            transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0s;
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 var(--space-md);
        border-radius: var(--radius-sm);
        color: var(--color-sidebar-text);
        font-size: var(--text-base);
        font-weight: 500;
        min-height: 36px;
        transition: background-color var(--transition-fast), color var(--transition-fast);
        margin-top: 2px;
    }

    .nav-item:hover {
        background: var(--color-sidebar-hover);
        color: var(--color-text-primary);
    }

    .nav-item.active {
        background: var(--color-sidebar-active);
        color: var(--color-sidebar-text-active);
        font-weight: 600;
    }

    .nav-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        opacity: 0.65;
        color: inherit;
    }

    /* Flat top-level link */
    .nav-item--flat {
        min-height: 36px;
        padding: 0 var(--space-md);
        font-size: var(--text-base);
        font-weight: 500;
        color: var(--color-text-muted);
        gap: 0;
        border-radius: var(--radius-sm);
    }

    .nav-item--flat:hover {
        color: var(--color-text-secondary);
        background: var(--color-sidebar-hover);
    }

    .nav-item--flat.active {
        color: var(--color-sidebar-text-active);
        background: var(--color-sidebar-active);
        font-weight: 600;
    }

    .sidebar-footer {
        padding: var(--space-md) var(--space-lg);
        border-top: 1px solid var(--color-sidebar-border);
    }

    .sidebar-user {
        display: block;
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-sidebar-text);
    }

    .sidebar-role {
        display: block;
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        margin-top: 2px;
    }

    /* ── Top Bar ─────────────────────────────────────── */
    .top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--topbar-height);
        padding: 0 var(--space-xl);
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid var(--color-border-subtle);
        position: sticky;
        top: 0;
        z-index: var(--z-topbar);
    }

    .top-bar-left {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-size: var(--text-sm);
    }

    .top-bar-right {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
    }

    .breadcrumb {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    .breadcrumb a {
        color: var(--color-accent);
    }

    .breadcrumb a:hover {
        color: var(--color-accent-hover);
    }

    .breadcrumb-sep {
        color: var(--color-border);
        margin: 0 2px;
    }

    /* ── Page Content ────────────────────────────────── */
    .page-content {
        padding: var(--space-xl);
        max-width: var(--content-max-width);
    }

    /* Wider variant for table-heavy pages */
    .page-content-wide {
        padding: var(--space-xl);
        max-width: 1400px;
    }

    /* Responsive table wrapper */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-sm);
    }

    /* ── Filter bar（筛选栏：账簿/报表共用）────────────── */
    .filter-bar {
        display: flex;
        gap: var(--space-sm);
        align-items: flex-end;
        flex-wrap: wrap;
        padding: var(--space-md);
        background: var(--color-surface);
        border-radius: var(--radius-md);
        margin: var(--space-lg) 0;
    }

    /* filter-bar 嵌在 .card 内的变体（不重复套背景/内边距/外边距） */
    .filter-bar--flat {
        background: transparent;
        padding: 0;
        margin: 0;
    }

    /* ── Info bar（"共 N 条 + 图例"信息条）────────────── */
    .info-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-sm) var(--space-md);
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        font-size: 12px;
        color: var(--color-text-secondary);
    }

    /* ── Data table card（card + 横向滚动容器）─────────── */
    /* 与 .card 搭配使用：class="card data-table-card" */
    .data-table-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Amount cell（金额单元格：等宽+表格数字+右对齐）── */
    .amount-cell {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--space-lg);
    }

    .page-header h2 {
        margin: 0;
    }

    .flash-container {
        padding: 0 var(--space-xl);
        margin-top: var(--space-md);
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    /* ── Page section ────────────────────────────────── */
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--space-md);
    }

    .section-title {
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--color-text-primary);
    }

    .section-subtitle {
        font-size: var(--text-sm);
        color: var(--color-text-muted);
    }
}

/* ═══════════════════════════════════════════════════════════
   Layer: components — Cards
   ═══════════════════════════════════════════════════════════ */

@layer components {
    /* ── Default Card ────────────────────────────────── */
    .card {
        background: var(--color-surface-raised);
        color: var(--color-text-primary);
        border: 1px solid var(--color-border-subtle);
        border-radius: var(--radius-md);
        /* 卡片内加载遮罩（.submit-overlay）自动贴合本卡片圆角（穿透 form 中间层） */
        --ov-radius: var(--radius-md);
        box-shadow: none;
        overflow: hidden;
    }

    .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-lg) var(--space-xl);
        border-bottom: 1px solid var(--color-border-subtle);
    }

    .card-header h3 {
        margin: 0;
        font-size: var(--text-base);
    }

    .card-body {
        padding: var(--space-xl);
    }

    .card-footer {
        padding: var(--space-md) var(--space-xl);
        border-top: 1px solid var(--color-border-subtle);
        background: var(--color-surface);
    }

    /* ── Metric Card (dashboard stats) ───────────────── */
    .card-metric {
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--space-xl);
        transition: box-shadow var(--transition-base), border-color var(--transition-base);
    }

    .card-metric:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--color-input);
    }

    .card-metric-label {
        font-size: var(--text-xs);
        font-weight: 500;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: var(--space-sm);
    }

    .card-metric-value {
        font-size: var(--text-4xl);
        font-weight: 700;
        letter-spacing: var(--tracking-tight);
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    .card-metric-detail {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        margin-top: var(--space-sm);
    }

    .card-metric-trend {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: var(--text-xs);
        font-weight: 500;
        margin-top: var(--space-sm);
        padding: 2px 8px;
        border-radius: var(--radius-full);
    }

    .card-metric-trend.up {
        color: var(--color-success);
        background: var(--color-success-light);
    }

    .card-metric-trend.down {
        color: var(--color-danger);
        background: var(--color-danger-light);
    }

    /* ── Action Card (clickable) ─────────────────────── */
    .card-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-xl) var(--space-lg);
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        text-align: center;
        text-decoration: none;
        color: var(--color-text-primary);
        cursor: pointer;
        transition: all var(--transition-base);
    }

    .card-action:hover {
        border-color: var(--color-accent);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .card-action:active {
        transform: translateY(0);
        box-shadow: var(--shadow-xs);
    }

    .card-action-icon {
        width: 28px;
        height: 28px;
        margin-bottom: var(--space-xs);
        color: var(--color-accent);
        opacity: 0.8;
        transition: transform var(--transition-base), opacity var(--transition-base);
    }

    .card-action:hover .card-action-icon {
        transform: scale(1.1);
        opacity: 1;
    }

    .card-action-title {
        font-size: var(--text-sm);
        font-weight: 600;
    }

    .card-action-desc {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
    }

    /* ── Flat card (no border, subtle bg) ────────────── */
    .card-flat {
        background: var(--color-surface-alt);
        border-radius: var(--radius-md);
        padding: var(--space-lg);
    }
}

/* ═══════════════════════════════════════════════════════════
   Layer: components — Buttons & Forms
   ═══════════════════════════════════════════════════════════ */

@layer components {
    /* ── Buttons ─────────────────────────────────────── */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        height: 34px;
        padding: 0 var(--space-xl);
        font-size: var(--text-sm);
        font-weight: 500;
        border-radius: var(--radius-full);
        letter-spacing: -0.01em;
        transition: all var(--transition-fast);
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid transparent;
        line-height: 1;
        user-select: none;
        outline: none;
    }

    .btn:active {
        transform: scale(0.98);
    }

    .btn:focus-visible {
        box-shadow: 0 0 0 3px rgba(0,113,227,0.25);
    }

    .btn-primary {
        background: var(--color-accent);
        color: #fff;
    }

    .btn-primary:hover {
        background: var(--color-accent-hover);
    }

    .btn-secondary {
        background: var(--color-surface-raised);
        color: var(--color-text-primary);
        border-color: var(--color-border);
    }

    .btn-secondary:hover {
        background: var(--color-surface);
        border-color: var(--color-input);
    }

    .btn-ghost {
        background: transparent;
        color: var(--color-text-secondary);
    }

    .btn-ghost:hover {
        background: var(--color-surface);
        color: var(--color-text-primary);
    }

    .btn-danger {
        background: var(--color-danger);
        color: #fff;
    }

    .btn-danger:hover {
        background: #BE123C;
    }

    .btn-sm {
        height: 32px;
        padding: 0 var(--space-md);
        font-size: var(--text-xs);
    }

    .btn-lg {
        height: 40px;
        padding: 0 var(--space-xl);
        font-size: var(--text-base);
    }

    .btn-block {
        display: flex;
        width: 100%;
    }

    .btn:disabled,
    .btn.disabled {
        opacity: 0.45;
        pointer-events: none;
    }

    /* ── Button group ────────────────────────────────── */
    .btn-group {
        display: inline-flex;
        gap: 0;
    }

    .btn-group .btn {
        border-radius: 0;
    }

    .btn-group .btn:first-child {
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    }

    .btn-group .btn:last-child {
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }

    .btn-group .btn + .btn {
        margin-left: -1px;
    }

    /* ── Forms ───────────────────────────────────────── */
    .form {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        padding: var(--space-xl);
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .form-row {
        flex-direction: row;
        align-items: center;
        gap: var(--space-md);
    }

    .form-label {
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-text-secondary);
    }

    .form-hint {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        margin-top: 2px;
    }

    .form-error {
        font-size: var(--text-xs);
        color: var(--color-danger);
        margin-top: 2px;
    }

    .input {
        width: 100%;
        height: 40px;
        padding: 0 var(--space-lg);
        font-size: var(--text-sm);
        color: var(--color-text-primary);
        background: var(--color-surface-alt);
        border: none;
        border-radius: var(--radius-full);
        transition: background var(--transition-fast), box-shadow var(--transition-fast);
        outline: none;
    }

    .input::placeholder {
        color: var(--color-text-muted);
    }

    .input:focus,
    .input:focus-visible {
        background: var(--color-surface-raised);
        box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
    }

    .input:disabled {
        background: var(--color-surface);
        color: var(--color-text-muted);
        cursor: not-allowed;
    }

    textarea.input {
        height: auto;
        padding: var(--space-md) var(--space-lg);
        min-height: 80px;
        resize: vertical;
        line-height: var(--leading-relaxed);
        border-radius: var(--radius-lg);
    }

    /* ── Input validation states ───────────────────── */
    .input.is-valid {
        border-color: var(--color-success);
    }
    .input.is-valid:focus {
        box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
    }
    .input.is-invalid {
        border-color: var(--color-danger);
    }
    .input.is-invalid:focus {
        box-shadow: 0 0 0 3px rgba(225,29,72,0.12);
    }
    .form-feedback {
        font-size: var(--text-xs);
        margin-top: 2px;
    }
    .form-feedback.error {
        color: var(--color-danger);
    }
    .form-feedback.success {
        color: var(--color-success);
    }

    select.input {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2371717A' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 30px;
        cursor: pointer;
    }

    .checkbox-label {
        display: inline-flex;
        align-items: center;
        gap: var(--space-sm);
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
        cursor: pointer;
    }

    .checkbox-label input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--color-accent);
        cursor: pointer;
    }

    /* ── Search bar (Apple pill style) ──────────────── */
    .search-bar {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: 0 var(--space-md);
        background: var(--color-surface-alt);
        border: none;
        border-radius: var(--radius-full);
        margin-bottom: var(--space-lg);
        height: 40px;
    }

    .search-bar .input {
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .search-bar .input:focus {
        box-shadow: none;
    }

    /* ── Flash Messages ──────────────────────────────── */
    .flash {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-md) var(--space-lg);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        border: 1px solid;
        animation: flashIn var(--transition-slow);
    }

    @keyframes flashIn {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .flash-success {
        background: var(--color-success-light);
        color: var(--color-success);
        border-color: var(--color-success-border);
    }

    .flash-error {
        background: var(--color-danger-light);
        color: var(--color-danger);
        border-color: var(--color-danger-border);
    }

    .flash-warning {
        background: var(--color-warning-light);
        color: var(--color-warning);
        border-color: var(--color-warning-border);
    }

    .flash-info {
        background: var(--color-accent-light);
        color: var(--color-accent);
        border-color: rgba(37,87,214,0.2);
    }

    .flash-close {
        flex-shrink: 0;
        font-size: var(--text-xl);
        color: inherit;
        opacity: 0.5;
        padding: 0 var(--space-xs);
        line-height: 1;
        transition: opacity var(--transition-fast);
    }

    .flash-close:hover {
        opacity: 1;
    }

    /* ── Toast ───────────────────────────────────────── */
    /* 统一异步操作反馈（指南 §26）：右上角浮层、可关闭、
       Error 持久不自动消失、同类消息最多 5 条防刷屏。 */
    .toast-container {
        position: fixed;
        top: var(--space-lg);
        right: var(--space-lg);
        z-index: var(--z-toast);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-sm);
        max-width: min(420px, calc(100vw - var(--space-2xl)));
        pointer-events: none;
    }

    .toast {
        pointer-events: auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-md);
        max-width: 100%;
        padding: var(--space-md) var(--space-lg);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        line-height: 1.5;
        border: 1px solid;
        box-shadow: var(--shadow-md);
        animation: vgMsgPop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
        word-break: break-word;
    }

    /* 统一消息弹出动画：非线性放大 + 渐显 + 弹性缓动（toast 原地弹出 / banner 从上方弹出共用） */
    @keyframes vgMsgPop {
        0%   { opacity: 0; transform: translateY(-10px) scale(0.92); }
        60%  { opacity: 1; transform: translateY(2px) scale(1.03); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .toast-success {
        background: var(--color-success-light);
        color: var(--color-success);
        border-color: var(--color-success-border);
    }

    .toast-error {
        background: var(--color-danger-light);
        color: var(--color-danger);
        border-color: var(--color-danger-border);
    }

    .toast-warning {
        background: var(--color-warning-light);
        color: var(--color-warning);
        border-color: var(--color-warning-border);
    }

    .toast-info {
        background: var(--color-accent-light);
        color: var(--color-accent);
        border-color: rgba(37,87,214,0.2);
    }

    .toast-close {
        flex-shrink: 0;
        font-size: var(--text-xl);
        color: inherit;
        opacity: 0.55;
        padding: 0 var(--space-xs);
        line-height: 1;
        transition: opacity var(--transition-fast);
    }

    .toast-close:hover {
        opacity: 1;
    }

    /* ── Banner（统一长消息）────────────────────────── */
    /* 全局 flash 顶部通知条 + 卡片/页面内状态横幅共用视觉：
       半透明（color-mix 降透明度 + backdrop blur）+ vgMsgPop 弹出动画 + × 关闭。
       全局 flash 放 .vg-banner-container（fixed 顶部）；内容流内状态横幅 absolute 到各自容器顶部。 */
    .vg-banner-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--z-toast);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-lg);
        pointer-events: none;
    }
    /* shell 模式避开侧栏（侧栏宽 var(--sidebar-width)，fixed 顶部条从内容区开始） */
    .layout-sidebar .vg-banner-container { left: var(--sidebar-width); }

    .vg-banner {
        pointer-events: auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-md);
        padding: var(--space-md) var(--space-lg);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        line-height: 1.5;
        border: 1px solid;
        box-shadow: var(--shadow-md);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        animation: vgMsgPop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
        word-break: break-word;
    }
    .vg-banner a {
        color: inherit;
        text-decoration: underline;
        font-weight: 500;
    }
    .vg-banner .vg-banner-body { flex: 1; min-width: 0; }

    .vg-banner-success {
        background: color-mix(in srgb, var(--color-success-light) 76%, transparent);
        color: var(--color-success);
        border-color: var(--color-success-border);
    }
    .vg-banner-warning {
        background: color-mix(in srgb, var(--color-warning-light) 76%, transparent);
        color: var(--color-warning);
        border-color: var(--color-warning-border);
    }
    .vg-banner-danger {
        background: color-mix(in srgb, var(--color-danger-light) 76%, transparent);
        color: var(--color-danger);
        border-color: var(--color-danger-border);
    }
    .vg-banner-info {
        background: color-mix(in srgb, var(--color-accent-light) 76%, transparent);
        color: var(--color-accent);
        border-color: rgba(37, 87, 214, 0.2);
    }

    .vg-banner-close {
        flex-shrink: 0;
        font-size: var(--text-xl);
        color: inherit;
        opacity: 0.55;
        padding: 0 var(--space-xs);
        line-height: 1;
        transition: opacity var(--transition-fast);
        cursor: pointer;
    }
    .vg-banner-close:hover {
        opacity: 1;
    }

    /* ── Confirm Modal ──────────────────────────────── */
    /* 统一破坏性/关键操作确认（指南 §27）：对象/影响/是否可恢复三段式。
       替代原生 confirm()——Promise 异步、focus 管理、Esc/点遮罩取消。 */
    .confirm-overlay {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-modal) + 110);  /* 确认框必须浮在业务弹窗(.lx-upload-modal z-index:300)之上 */
        background: rgba(15, 23, 42, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-xl);
        animation: overlayIn var(--transition-fast);
    }

    @keyframes overlayIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .confirm-modal {
        width: 100%;
        max-width: 420px;
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xl);
        padding: var(--space-xl);
        animation: modalIn var(--transition-base);
    }

    @keyframes modalIn {
        from { opacity: 0; transform: translateY(8px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .confirm-title {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--color-text-primary);
    }

    .confirm-title .confirm-icon {
        font-size: var(--text-xl);
        line-height: 1;
    }

    .confirm-modal.danger .confirm-title {
        color: var(--color-danger);
    }

    .confirm-message {
        margin-top: var(--space-md);
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .confirm-sub {
        margin-top: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        background: var(--color-border-subtle);
        border-left: 3px solid var(--color-border);
        border-radius: var(--radius-sm);
        color: var(--color-text-muted);
        font-size: var(--text-xs);
    }

    .confirm-actions {
        margin-top: var(--space-xl);
        display: flex;
        justify-content: flex-end;
        gap: var(--space-sm);
    }

    /* ── 重置整个网站确认弹窗（backup.html）────────────────── */
    .reset-modal {
        max-width: 500px;
        padding: 0;
        overflow: hidden;
    }

    /* 浅红头带：一眼识别为危险不可逆操作 */
    .reset-modal .confirm-head {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-lg) var(--space-xl);
        background: var(--color-danger-light);
        border-bottom: 1px solid var(--color-danger-border);
    }
    .reset-modal .confirm-head .confirm-icon { font-size: var(--text-2xl); line-height: 1; }
    .reset-modal .confirm-head-title { font-size: var(--text-lg); font-weight: 600; color: var(--color-danger); }
    .reset-modal .confirm-head-sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

    .reset-modal .confirm-body { padding: var(--space-xl); }

    /* 警示摘要框：被清除内容的范围 + 安全网说明 */
    .reset-modal .reset-warn {
        display: flex;
        gap: var(--space-md);
        padding: var(--space-md) var(--space-lg);
        background: var(--color-danger-light);
        border: 1px solid var(--color-danger-border);
        border-radius: var(--radius-md);
    }
    .reset-modal .reset-warn-icon { font-size: var(--text-lg); line-height: 1.4; }
    .reset-modal .reset-warn-title { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-primary); line-height: 1.6; }
    .reset-modal .reset-warn-sub { margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.6; }

    /* 表单字段 */
    .reset-modal .reset-field { margin-top: var(--space-lg); }
    .reset-modal .reset-field .form-label { display: block; margin-bottom: var(--space-xs); }
    .reset-modal .reset-field .input { width: 100%; }

    /* 需照抄的确认文字令牌（可点击复制） */
    .reset-modal .reset-copy {
        margin-bottom: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        background: var(--color-surface-alt);
        border: 1px dashed var(--color-danger-border);
        border-radius: var(--radius-md);
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-danger);
        text-align: center;
        letter-spacing: 0.02em;
        cursor: pointer;
        user-select: all;
        transition: border-color var(--transition-fast), background var(--transition-fast);
    }
    .reset-modal .reset-copy:hover { border-color: var(--color-danger); background: var(--color-danger-light); }

    /* 确认文字输入框：实时校验绿/红状态 */
    .reset-modal .input[data-reset-confirm] {
        border: 1px solid var(--color-border-subtle);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }
    .reset-modal .input[data-reset-confirm].confirm-ok {
        border-color: var(--color-success);
        box-shadow: 0 0 0 3px rgba(48,177,88,.15);
    }
    .reset-modal .input[data-reset-confirm].confirm-wrong {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 3px rgba(225,29,72,.12);
    }

    /* 校验提示文字 */
    .reset-modal .reset-hint { margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); transition: color var(--transition-fast); }
    .reset-modal .reset-hint.ok { color: var(--color-success); }
    .reset-modal .reset-hint.wrong { color: var(--color-danger); }

    /* ── 全屏加载遮罩（重置提交后盖住整页）────────────────── */
    .reset-loading {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-modal) + 10);
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: var(--space-lg);
        animation: overlayIn var(--transition-fast);
    }
    .reset-loading-spinner {
        width: 40px; height: 40px;
        border: 3px solid var(--color-border);
        border-top-color: var(--color-danger);
        border-radius: 50%;
        animation: submit-spin .6s linear infinite;
    }
    .reset-loading-text { font-size: var(--text-base); font-weight: 500; color: var(--color-text-primary); }
    .reset-loading-sub { font-size: var(--text-sm); color: var(--color-text-muted); }

    /* ── 页面专属按钮收编（自模板局部 <style> 移入全局）── */
    /* 凭证卡片 hover 动作栏（list.html；_voucher_list_table.html partial 引用 → 必须全局） */
    .vca-btn {
        border: none; background: transparent; cursor: pointer;
        color: var(--color-text-secondary); font-size: var(--text-xs);
        padding: 3px 8px; border-radius: var(--radius-sm); white-space: nowrap;
        display: inline-flex; align-items: center; gap: 3px;
        transition: background var(--transition-fast), color var(--transition-fast);
    }
    .vca-btn:hover { background: var(--color-accent-light); color: var(--color-accent); }
    .vca-btn.danger:hover { background: rgba(225,29,72,.1); color: var(--color-danger); }
    /* 凭证卡片 hover 动作栏容器（_voucher_list_table.html partial 引用 → 全局） */
    .vcard-actions { display: none; align-items: center; gap: 2px; }
    .vcard:hover .vcard-status { display: none; }
    .vcard:hover .vcard-actions { display: flex; }

    /* 凭证录入导航（form.html .vchr-nav） */
    .vchr-nav .nav-btn {
        width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--color-border); background: var(--color-surface-raised);
        border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer;
        font-size: var(--text-xs);
    }
    .vchr-nav .nav-btn:hover { background: var(--color-accent-light); color: var(--color-accent); border-color: var(--color-accent); }

    /* 凭证录入：保存主键（亿企代账风格橙色） / 行内按钮 / 分录删除 */
    .btn-primary-fill {
        background: var(--color-warning); color: #fff; border: 1px solid var(--color-warning);
        padding: 6px 16px; border-radius: var(--radius-sm); font-size: var(--text-sm);
        cursor: pointer; font-weight: 600;
    }
    .btn-primary-fill:hover { filter: brightness(0.95); }
    .btn-line {
        background: var(--color-surface-raised); color: var(--color-text-primary);
        border: 1px solid var(--color-border); padding: 6px 14px; border-radius: var(--radius-sm);
        font-size: var(--text-sm); cursor: pointer;
    }
    .btn-line:hover { background: var(--color-surface); }
    .btn-del {
        border: none; background: transparent; color: var(--color-danger);
        cursor: pointer; font-size: 16px; line-height: 1; opacity: 0; transition: opacity var(--transition-fast);
    }
    .entry-row:hover .btn-del { opacity: 1; }

    /* 按钮内 spinner（import_verify / index / lx_preview_step3 三处重复 → 全局一份） */
    .btn-spinner {
        display: inline-block;
        width: 14px; height: 14px;
        border: 2px solid rgba(255,255,255,.4);
        border-top-color: #fff;
        border-radius: 50%;
        animation: submit-spin .6s linear infinite;
        vertical-align: middle; margin-right: 4px;
    }
    @keyframes submit-spin { to { transform: rotate(360deg); } }

    /* 悬浮刷新球（base.html embed 壳） */
    .btn-refresh {
        position: fixed; bottom: 24px; right: 24px; z-index: var(--z-sticky);
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border: 1px solid var(--color-border);
        border-radius: 50%; background: var(--color-surface-raised);
        color: var(--color-text-secondary); cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all var(--transition-fast);
    }
    .btn-refresh:hover { color: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 2px 12px rgba(37,87,214,0.18); }
    .btn-refresh:active { transform: rotate(180deg); transition: transform 0.4s ease; }

    /* ── 标准下划线 Tab（科目管理/报表映射共用，_standard_tabs.html）── */
    .standard-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-border); margin-bottom: var(--space-lg); }
    .standard-tab {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-text-muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: all var(--transition-fast);
        text-decoration: none;
    }
    .standard-tab:hover { color: var(--color-accent); }
    .standard-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
    .tab-separator { width: 1px; height: 20px; background: var(--color-border); align-self: center; margin: 0 var(--space-sm); }

    /* 账单管理顶部 tab（be-tabs）——视觉与 standard-tab 对齐（同高同 active 态） */
    .be-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--color-border); padding: 0 var(--space-lg); }
    .be-tab {
        padding: var(--space-sm) var(--space-lg); font-size: var(--text-sm); font-weight: 500;
        color: var(--color-text-muted); border-bottom: 2px solid transparent;
        margin-bottom: -2px; cursor: pointer; text-decoration: none;
        white-space: nowrap;   /* 阻止长 tab 名（如「领星利润自动报告」）在窄屏逐字竖排 */
        transition: color var(--transition-fast), border-color var(--transition-fast);
    }
    .be-tab:hover { color: var(--color-accent); }
    .be-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

    /* ── 财务报表（BS/IS/CF/季报 共用）─────────────── */
    .report-header { text-align: center; margin-bottom: var(--space-xl); }
    .report-header h2 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
    .report-header .subtitle { font-size: var(--text-sm); color: var(--color-text-secondary); }
    .report-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
    .report-table th { background: var(--color-surface); padding: 6px var(--space-md); font-weight: 600; color: var(--color-text-secondary); border-bottom: 2px solid var(--color-border); text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; }
    .report-table td { padding: 5px var(--space-md); border-bottom: 1px solid var(--color-border-subtle); }
    /* 分节标题行：td 限定 class，勿用全局 .section-header（display:flex 破坏表格行模型，KI-29） */
    .report-table td.bs-section { background: var(--color-surface); font-weight: 700; font-size: var(--text-sm); padding: 8px var(--space-md); }
    .report-table .sub-item td:first-child { padding-left: var(--space-xl); }
    .report-table .total-row td { font-weight: 700; border-top: 1px solid var(--color-text-primary); }
    .report-table .grand-total td { font-weight: 700; border-top: 2px solid var(--color-text-primary); border-bottom: 3px double var(--color-text-primary); font-size: var(--text-base); }
    .report-table .amount { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
    .report-table .amount.negative { color: var(--color-danger); }
    /* 排版稳定：科目名不换行、行次列固定窄、金额列固定宽 */
    .report-table .col-name { white-space: nowrap; min-width: 130px; }
    .report-table .col-no { text-align: right; width: 46px; }
    .balance-check { text-align: center; padding: var(--space-md); margin-top: var(--space-lg); border-radius: var(--radius-md); font-weight: 600; }
    .balance-ok { background: var(--color-success-light); color: var(--color-success); }
    .balance-fail { background: var(--color-danger-light); color: var(--color-danger); }
    .collapsed { display: none; }

    /* ── Badge 语义色相（报告类型 / 平台 / 状态 专用）── */
    .badge-blue { background: #dbeafe; color: #1e40af; }
    .badge-indigo { background: #e0e7ff; color: #3730a3; }
    .badge-red { background: var(--color-danger-light); color: #991b1b; }
    .badge-amber { background: var(--color-warning-light); color: #92400e; }
    .badge-purple { background: #f3e8ff; color: #6b21a8; }
    .badge-gray { background: #f3f4f6; color: #6b7280; }

    /* ── Badge ───────────────────────────────────────── */
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        font-size: var(--text-xs);
        font-weight: 600;
        border-radius: var(--radius-full);
        line-height: 1.5;
        border: 1px solid transparent;
        white-space: nowrap;   /* 阻止中文在窄容器逐字竖向排列（手机端硬伤） */
    }

    .badge-success {
        background: var(--color-success-light);
        color: var(--color-success);
        border-color: var(--color-success-border);
    }

    .badge-warning {
        background: var(--color-warning-light);
        color: var(--color-warning);
        border-color: var(--color-warning-border);
    }

    .badge-danger {
        background: var(--color-danger-light);
        color: var(--color-danger);
        border-color: var(--color-danger-border);
    }

    .badge-info {
        background: var(--color-accent-light);
        color: var(--color-accent);
        border-color: rgba(37,87,214,0.25);
    }

    .badge-neutral {
        background: var(--color-surface);
        color: var(--color-text-secondary);
        border-color: var(--color-border);
    }

    /* ── Toolbar / action bar ────────────────────────── */
    .toolbar {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-md) 0;
    }

    .toolbar-divider {
        width: 1px;
        height: 24px;
        background: var(--color-border);
        margin: 0 var(--space-xs);
    }
}

/* ═══════════════════════════════════════════════════════════
   Layer: components — Tables & Data
   ═══════════════════════════════════════════════════════════ */

@layer components {
    .table-financial {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--text-sm);
    }

    /* Auto-fit columns variant */
    .table-auto {
        width: auto;
        min-width: 100%;
        table-layout: auto;
    }
    .table-auto th,
    .table-auto td {
        white-space: nowrap;
    }
    .table-auto th.col-fluid,
    .table-auto td.col-fluid {
        white-space: normal;
    }

    .table-financial thead {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .table-financial th {
        background: var(--color-surface);
        padding: 6px var(--space-sm);
        font-weight: 500;
        color: var(--color-text-muted);
        text-align: left;
        border-bottom: 1px solid var(--color-border-subtle);
        white-space: nowrap;
        font-size: var(--text-xs);
        letter-spacing: 0.02em;
    }

    .table-financial th.text-right,
    .table-financial th.amount {
        text-align: right;
    }

    .table-financial td {
        padding: 6px var(--space-sm);
        border-bottom: 1px solid var(--color-border-subtle);
        color: var(--color-text-primary);
    }

    .table-financial td.amount {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    .table-financial tbody tr {
        transition: background-color var(--transition-fast);
    }

    .table-financial tbody tr:hover {
        background: rgba(37,87,214,0.03);
    }

    /* Voucher entry color bars — subtle, not thick side-tabs */
    .table-financial tr.debit-row {
        box-shadow: inset 2px 0 0 var(--color-accent);
    }

    .table-financial tr.credit-row {
        box-shadow: inset 2px 0 0 #F59E0B;
    }

    /* Amount colors */
    .amount-positive { color: var(--color-success); }
    .amount-negative { color: var(--color-danger); }
    .amount-zero { color: var(--color-text-muted); }

    /* 红字（负数）：12 格数字 & 表单输入格 */
    .dg-wrap.amount-negative .dg-cell,
    .dg-input-wrap.amount-negative .dg-cell,
    .vcl-amt.amount-negative,
    .vcf-dr.amount-negative,
    .vcf-cr.amount-negative { color: var(--color-danger); }

    /* Drill-down link */
    .drill-link {
        color: var(--color-accent);
        cursor: pointer;
        border-bottom: 1px dashed var(--color-accent);
        transition: all var(--transition-fast);
    }

    .drill-link:hover {
        color: var(--color-accent-hover);
        border-bottom-style: solid;
    }

    /* Expand/collapse */
    .expand-icon {
        display: inline-block;
        width: 16px;
        text-align: center;
        transition: transform var(--transition-base);
        cursor: pointer;
    }

    .expand-icon.expanded {
        transform: rotate(90deg);
    }

    /* ── Empty state ─────────────────────────────────── */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--space-3xl) var(--space-xl);
        text-align: center;
        gap: var(--space-md);
    }

    .empty-state-icon {
        opacity: 0.3;
        margin-bottom: var(--space-sm);
        color: var(--color-text-muted);
    }

    .empty-state-title {
        font-size: var(--text-lg);
        font-weight: 600;
        color: var(--color-text-primary);
    }

    .empty-state-desc {
        font-size: var(--text-sm);
        color: var(--color-text-muted);
        max-width: 400px;
        line-height: var(--leading-relaxed);
    }

    /* ── Skeleton loader ─────────────────────────────── */
    .skeleton {
        background: linear-gradient(
            90deg,
            var(--color-border-subtle) 25%,
            var(--color-surface) 50%,
            var(--color-border-subtle) 75%
        );
        background-size: 200% 100%;
        animation: skeletonWave 1.5s ease-in-out infinite;
        border-radius: var(--radius-sm);
    }

    @keyframes skeletonWave {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .skeleton-text {
        height: 14px;
        margin-bottom: var(--space-sm);
    }

    .skeleton-text:last-child {
        width: 60%;
    }

    .skeleton-heading {
        height: 22px;
        width: 40%;
        margin-bottom: var(--space-lg);
    }

    .skeleton-card {
        height: 120px;
        border-radius: var(--radius-md);
    }

    /* ── Table skeleton（账簿/报表空壳占位）─── */
    .table-skeleton {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: var(--space-lg) var(--space-md) var(--space-xl);
    }
    .table-skeleton-head {
        padding: 0 var(--space-sm) 4px;
    }
    .table-skeleton-head .skeleton {
        height: 12px;
        width: 200px;
    }
    .table-skeleton-row {
        display: grid;
        grid-template-columns: 90px 1.8fr repeat(8, 1fr);
        gap: var(--space-md);
        align-items: center;
    }
    .table-skeleton-row .skeleton {
        height: 14px;
        border-radius: 6px;
    }
    .table-skeleton-row.is-head .skeleton {
        height: 11px;
        opacity: 0.45;
    }
    .table-skeleton-row:nth-child(even) .skeleton {
        opacity: 0.7;
    }

    /* ── Top loading progress bar（数据请求的细进度条）─── */
    .vg-progress {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: calc(var(--z-sidebar) + 2);
        pointer-events: none;
        overflow: hidden;
    }
    .vg-progress-bar {
        height: 100%;
        width: 45%;
        background: linear-gradient(
            90deg,
            transparent,
            var(--color-accent),
            transparent
        );
        animation: vgProgressSlide 1.1s ease-in-out infinite;
    }
    @keyframes vgProgressSlide {
        0% { margin-left: -45%; }
        100% { margin-left: 100%; }
    }
}

/* ═══════════════════════════════════════════════════════════
   Layer: components — Searchable Account Dropdown
   ═══════════════════════════════════════════════════════════ */

@layer components {
    .acct-custom-select {
        position: relative;
        max-width: 320px;
        font-size: var(--text-sm);
        user-select: none;
    }

    .acct-trigger {
        display: flex;
        align-items: center;
        width: 100%;
        height: 32px;
        padding: 0 6px;
        gap: 4px;
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        text-align: left;
        font: inherit;
        font-size: var(--text-sm);
        color: var(--color-text-primary);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .acct-trigger:hover {
        border-color: var(--color-accent);
    }

    .acct-custom-select.is-open .acct-trigger {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(37,87,214,0.1);
    }

    .acct-trigger-text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .acct-trigger-text.is-placeholder {
        color: var(--color-text-muted);
    }

    .acct-arrow {
        flex-shrink: 0;
        font-size: 10px;
        color: var(--color-text-muted);
        transition: transform var(--transition-fast);
    }

    .acct-custom-select.is-open .acct-arrow {
        transform: rotate(180deg);
    }

    .acct-panel {
        position: fixed;
        z-index: var(--z-modal);
        min-width: 280px;
        max-width: 400px;
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .acct-panel[hidden] {
        display: none;
    }

    .acct-suggestion {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        border-bottom: 1px solid var(--color-border-subtle);
        cursor: pointer;
        transition: background var(--transition-fast);
    }

    .acct-suggestion:hover {
        background: rgba(37,87,214,0.06);
    }

    .acct-sugg-label {
        display: inline-flex;
        align-items: center;
        padding: 1px 7px;
        font-size: 11px;
        font-weight: 600;
        border-radius: var(--radius-full);
        background: rgba(5,150,105,0.12);
        color: var(--color-success);
        flex-shrink: 0;
    }

    .acct-sugg-text {
        font-size: var(--text-sm);
        color: var(--color-text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .acct-search-wrapper {
        padding: var(--space-xs);
        border-bottom: 1px solid var(--color-border-subtle);
    }

    .acct-search {
        width: 100%;
        height: 32px;
        padding: 0 var(--space-sm);
        font-size: var(--text-sm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        outline: none;
        box-sizing: border-box;
        transition: border-color var(--transition-fast);
    }

    .acct-search:focus {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 2px rgba(37,87,214,0.1);
    }

    .acct-search::placeholder {
        color: var(--color-text-muted);
    }

    .acct-options {
        flex: 1;
        overflow-y: auto;
        max-height: 200px;
    }

    .acct-option {
        padding: var(--space-sm) var(--space-md);
        cursor: pointer;
        font-size: var(--text-sm);
        color: var(--color-text-primary);
        transition: background var(--transition-fast);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .acct-option:hover {
        background: rgba(37,87,214,0.06);
    }

    .acct-option.is-highlighted {
        background: rgba(37,87,214,0.08);
    }

    .acct-option.is-selected {
        background: rgba(37,87,214,0.1);
        font-weight: 500;
        color: var(--color-accent);
    }

    .acct-option.is-hidden {
        display: none;
    }

    .acct-option-new {
        border-top: 1px solid var(--color-border-subtle);
        color: var(--color-accent);
        font-weight: 500;
    }

    .acct-option-new:hover {
        background: rgba(37,87,214,0.06);
    }

    .acct-no-results {
        padding: var(--space-md);
        text-align: center;
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    .acct-no-results.is-hidden {
        display: none;
    }

    /* Quick-add panel */
    .acct-quick-add {
        position: absolute;
        left: calc(100% + 8px);
        top: 0;
        width: 240px;
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        z-index: 1;
        display: flex;
        flex-direction: column;
    }

    .acct-quick-add.is-hidden {
        display: none;
    }

    .acct-quick-add-header {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--color-text-primary);
        border-bottom: 1px solid var(--color-border-subtle);
    }

    .acct-quick-add-body {
        padding: var(--space-md);
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .acct-quick-add-body label {
        font-size: var(--text-xs);
        color: var(--color-text-secondary);
        margin-bottom: -6px;
    }

    .acct-quick-add-body input,
    .acct-quick-add-body select {
        height: 30px;
        padding: 0 var(--space-sm);
        font-size: var(--text-sm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        outline: none;
        box-sizing: border-box;
    }

    .acct-quick-add-body input:focus,
    .acct-quick-add-body select:focus {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 2px rgba(37,87,214,0.1);
    }

    .acct-quick-add-foot {
        padding: var(--space-sm) var(--space-md);
        border-top: 1px solid var(--color-border-subtle);
        display: flex;
        justify-content: flex-end;
        gap: var(--space-sm);
    }

    .acct-quick-add-foot button {
        height: 28px;
        padding: 0 var(--space-md);
        font-size: var(--text-xs);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .acct-quick-cancel {
        background: transparent;
        border: 1px solid var(--color-border);
        color: var(--color-text-secondary);
    }

    .acct-quick-cancel:hover {
        background: var(--color-surface);
    }

    .acct-quick-confirm {
        background: var(--color-accent);
        border: 1px solid var(--color-accent);
        color: #fff;
    }

    .acct-quick-confirm:hover {
        background: var(--color-accent-hover);
    }

    .acct-quick-error {
        padding: 0 var(--space-md) var(--space-sm);
        font-size: var(--text-xs);
        color: var(--color-danger);
    }

    .acct-quick-error:empty {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   Layer: pages — Auth
   ═══════════════════════════════════════════════════════════ */

@layer pages {
    .auth-container {
        width: 100%;
        max-width: 420px;
        padding: var(--space-xl);
    }

    .auth-card {
        padding: var(--space-3xl);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl);
    }

    .auth-header {
        text-align: center;
        margin-bottom: var(--space-2xl);
    }

    .auth-title {
        font-size: 2rem;
        font-weight: 700;
        color: var(--color-accent);
        letter-spacing: -0.03em;
    }

    .auth-subtitle {
        font-size: var(--text-base);
        color: var(--color-text-muted);
        margin-top: var(--space-xs);
        font-weight: 400;
    }

    .auth-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }

    .auth-footer {
        text-align: center;
        margin-top: var(--space-xl);
        padding-top: var(--space-xl);
        border-top: 1px solid var(--color-border-subtle);
    }

    /* ── Error Page ──────────────────────────────────── */
    .error-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        text-align: center;
        gap: var(--space-lg);
    }

    .error-code {
        font-size: 6rem;
        font-weight: 800;
        color: var(--color-border);
        line-height: 1;
        letter-spacing: var(--tracking-tight);
    }

    .error-message {
        font-size: var(--text-xl);
        color: var(--color-text-secondary);
    }

    /* ── Dashboard ──────────────────────────────────── */
    .dashboard-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: var(--space-lg);
        margin-bottom: var(--space-2xl);
    }
    .dashboard-metrics .metric-featured {
        grid-column: span 2;
    }
    .dashboard-actions {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
        margin-bottom: var(--space-2xl);
    }
    .dashboard-bottom {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--space-xl);
    }
    .dashboard-panels {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }
    .panel-links {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .panel-link {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-sm);
        border-radius: var(--radius-sm);
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
        transition: background var(--transition-fast), color var(--transition-fast);
    }
    .panel-link:hover {
        background: var(--color-surface);
        color: var(--color-text-primary);
    }
    .panel-link-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        opacity: 0.5;
        color: inherit;
    }
}

/* ═══════════════════════════════════════════════════════════
   Layer: components — Native element polish
   ═══════════════════════════════════════════════════════════ */

@layer components {
    /* ── Dark sidebar scrollbar ─────────────────────── */
    .sidebar-nav::-webkit-scrollbar {
        width: 6px;
    }
    .sidebar-nav::-webkit-scrollbar-track {
        background: transparent;
    }
    .sidebar-nav::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.12);
        border-radius: 3px;
    }
    .sidebar-nav::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.22);
    }

    /* Firefox */
    .sidebar-nav {
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.12) transparent;
        scrollbar-gutter: stable;
    }

    /* Generic scrollbar — for any scrollable container */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: var(--color-border);
        border-radius: 3px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: var(--color-input);
    }
    .custom-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: var(--color-border) transparent;
    }

    /* ── File input ─────────────────────────────────── */
    .input[type="file"] {
        padding: var(--space-sm) var(--space-md);
        height: auto;
        cursor: pointer;
        line-height: 1.5;
    }
    .input[type="file"]::file-selector-button {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        height: 32px;
        padding: 0 var(--space-md);
        margin-right: var(--space-md);
        font-size: var(--text-xs);
        font-weight: 500;
        color: var(--color-text-primary);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all var(--transition-fast);
    }
    .input[type="file"]::file-selector-button:hover {
        background: var(--color-border-subtle);
        border-color: var(--color-input);
    }

    /* ── Custom checkbox / radio polish ─────────────── */
    input[type="checkbox"] {
        accent-color: var(--color-accent);
    }
    input[type="radio"] {
        accent-color: var(--color-accent);
    }

    /* ── Range input ────────────────────────────────── */
    input[type="range"] {
        accent-color: var(--color-accent);
        height: 6px;
    }

    /* ── Disabled select consistency ────────────────── */
    select.input:disabled {
        background: var(--color-surface);
        color: var(--color-text-muted);
        cursor: not-allowed;
        opacity: 0.7;
    }

    /* ── Textarea resize grip ───────────────────────── */
    textarea.input {
        line-height: var(--leading-relaxed);
    }
}

/* ═══════════════════════════════════════════════════════════
   Layer: utilities
   ═══════════════════════════════════════════════════════════ */

@layer utilities {
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    .mt-0 { margin-top: 0; }
    .mt-xs { margin-top: var(--space-xs); }
    .mt-sm { margin-top: var(--space-sm); }
    .mt-md { margin-top: var(--space-md); }
    .mt-lg { margin-top: var(--space-lg); }
    .mt-xl { margin-top: var(--space-xl); }
    .mt-2xl { margin-top: var(--space-2xl); }

    .mb-0 { margin-bottom: 0; }
    .mb-xs { margin-bottom: var(--space-xs); }
    .mb-sm { margin-bottom: var(--space-sm); }
    .mb-md { margin-bottom: var(--space-md); }
    .mb-lg { margin-bottom: var(--space-lg); }
    .mb-xl { margin-bottom: var(--space-xl); }

    .gap-sm { gap: var(--space-sm); }
    .gap-md { gap: var(--space-md); }
    .gap-lg { gap: var(--space-lg); }

    .flex { display: flex; }
    .inline-flex { display: inline-flex; }
    .flex-col { flex-direction: column; }
    .items-center { align-items: center; }
    .items-start { align-items: flex-start; }
    .items-end { align-items: flex-end; }
    .justify-between { justify-content: space-between; }
    .justify-center { justify-content: center; }
    .justify-end { justify-content: flex-end; }
    .flex-1 { flex: 1; }
    .flex-wrap { flex-wrap: wrap; }

    .grid { display: grid; }
    .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

    .w-full { width: 100%; }
    .max-w-sm { max-width: 420px; }
    .max-w-md { max-width: 560px; }
    .mx-auto { margin-left: auto; margin-right: auto; }

    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .text-balance {
        text-wrap: balance;
    }
}

/* ═══════════════════════════════════════════════════════════
   顶栏全局筛选自定义下拉（gf_filter.js）
   复用 .acct-* 系列视觉，新增：选中蓝光态 / 加载蒙层 / 移除项
   ═══════════════════════════════════════════════════════════ */
@layer components {
    .gf-filter { display: flex; align-items: center; gap: 6px; }
    /* 移动端「筛选」按钮/角标/滑下面板：桌面隐藏，≤768px 由 responsive.css 激活 */
    .gf-sheet-toggle[hidden],
    .gf-sheet-count[hidden] { display: none; }
    .gf-filter-sheet { display: none; }
    /* 清除筛选按钮：桌面紧凑 ✕ 图标（「清除全部」标签桌面隐藏，移动端面板内显示） */
    .gf-clear { width: 26px; height: 26px; padding: 0; font-size: 14px; line-height: 1; border-radius: 4px; opacity: .5; flex: 0 0 auto; }
    .gf-clear .gf-clear-label { display: none; }
    .gf-filter-select { position: relative; }
    /* 全局筛选宽度（移动端由 responsive.css 覆盖为弹性/滚动条） */
    .gf-w-150 { width: 150px; }
    .gf-w-280 { width: 280px; }
    .gf-w-130 { width: 130px; }

    /* 顶栏 48px 内紧凑（acct-trigger 默认 32px），圆角 4 → 6 稍微大一点 */
    .gf-filter-select .acct-trigger {
        height: 30px;
        border-radius: 6px;
    }

    /* 需求3 蓝光态：简约高级风 — 细描边 + 顶部微渐变 + 环状柔光 + 弥散光晕（200ms 缓动） */
    .gf-filter-select .acct-trigger {
        transition: border-color var(--transition-base),
                    box-shadow var(--transition-base),
                    background var(--transition-base);
    }
    .gf-filter-select.is-filtered .acct-trigger {
        border-color: rgba(37, 87, 214, 0.42);
        background: linear-gradient(180deg, rgba(37, 87, 214, 0.06), rgba(37, 87, 214, 0.015));
        box-shadow:
            0 0 0 1px rgba(37, 87, 214, 0.05),
            0 1px 2px rgba(24, 24, 27, 0.05);
    }

    /* 打开态箭头翻转（对齐 .acct-custom-select.is-open，容器类是 .gf-filter-select） */
    .gf-filter-select.is-open .acct-arrow {
        transform: rotate(180deg);
    }

    /* 需求3 加载蒙层：半透明遮罩 + 顶部细进度条（淡入淡出，缓动曲线） */
    .gf-filter-select .gf-loading {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.55);
        border-radius: var(--radius-sm);
        cursor: wait;
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--transition-base);
    }
    .gf-filter-select.is-loading .gf-loading { opacity: 1; }

    .gf-filter-select .gf-loading-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 3px;
        width: 45%;
        border-radius: 2px;
        background: linear-gradient(90deg, transparent, rgba(37, 87, 214, 0.9), transparent);
        animation: gfLoadSlide 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    @keyframes gfLoadSlide {
        0%   { left: -45%; }
        100% { left: 100%; }
    }

    /* 需求4 吸顶移除选择项（恒显示，空值点击无副作用） */
    .gf-remove {
        display: flex;
        align-items: center;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
        color: var(--color-text-muted);
        border-bottom: 1px solid var(--color-border-subtle);
        cursor: pointer;
        user-select: none;
        transition: background var(--transition-fast), color var(--transition-fast);
    }
    .gf-remove:hover {
        background: rgba(37, 87, 214, 0.05);
        color: rgba(37, 87, 214, 1);
    }

    /* 面板宽度：随触发宽度，窄框也保证可读 */
    .gf-filter-select .acct-panel {
        position: absolute;   /* fixed → absolute：相对 .gf-filter-select，绕开 .top-bar backdrop-filter 对 fixed 的 containing-block 劫持 */
        min-width: 180px;
        max-width: 340px;
    }
    .gf-filter-select .acct-option { transition: background var(--transition-base); }
}

/* ═══════════════════════════════════════════════════════════
   Window adapt — 窄窗口微收紧（桌面财务软件，非移动端）
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    :root { --space-xl: 20px; --space-2xl: 24px; --topbar-height: 44px; }
    .card-body { padding: var(--space-lg); }
    .card-header { padding: var(--space-sm) var(--space-lg); }
    .filter-bar { padding: var(--space-sm) var(--space-md); }
}
@media (max-width: 900px) {
    :root { --sidebar-width: 200px; }
}

/* ═══════════════════════════════════════════════════════════
   Reduced motion — 尊重系统「减弱动态效果」（指南 §30）
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}