@import url("https://fonts.googleapis.com/css2?family=Russo+One&family=Share+Tech+Mono&family=PT+Mono&display=swap");

        :root {
            --bg-void: #040810;
            --bg-deep: #060d1a;
            --bg-surface: #0a1628;
            --bg-panel: #0d1e35;
            --bg-card: #10233f;
            --bg-elevated: #122848;
            --border-faint: rgba(0, 140, 255, 0.08);
            --border-subtle: rgba(0, 160, 255, 0.15);
            --border-mid: rgba(0, 180, 255, 0.25);
            --border-active: rgba(0, 200, 255, 0.5);
            --accent-primary: #00b4ff;
            --accent-bright: #00d4ff;
            --accent-pulse: #00eeff;
            --accent-amber: #ff8c00;
            --accent-green: #00ff9d;
            --accent-red: #ff4d6d;
            --text-primary: #e8f4ff;
            --text-secondary: #8ab4d4;
            --text-muted: #5b7a97;
            --text-disabled: #35506b;
            --shadow-panel: 0 0 0 1px rgba(0, 160, 255, 0.08), 0 14px 40px rgba(0, 0, 0, 0.45);
            --glow-sm: 0 0 10px rgba(0, 180, 255, 0.25);
            --glow-md: 0 0 16px rgba(0, 180, 255, 0.35), 0 0 32px rgba(0, 120, 255, 0.18);
            --glow-amber: 0 0 12px rgba(255, 140, 0, 0.35);
            --radius-sm: 4px;
            --radius-md: 6px;
            --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background:
                radial-gradient(circle at top center, rgba(0, 180, 255, 0.1), transparent 30%),
                linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-void) 100%);
            color: var(--text-primary);
            font-family: "PT Mono", monospace;
            font-size: 13px;
            line-height: 1.6;
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            background-image:
                linear-gradient(rgba(0, 140, 255, 0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 140, 255, 0.035) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: 0;
        }

        a,
        button,
        input,
        textarea {
            font: inherit;
        }

        .topbar {
            position: sticky;
            top: 0;
            z-index: 20;
            min-height: 72px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding: 12px 28px;
            background: rgba(4, 8, 16, 0.9);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border-mid);
        }

/* TASK-037 final cabinet cascade guard */
.cabinet-body .app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.cabinet-body .app-sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 0 18px; border-right: 1px solid var(--border-subtle); background: linear-gradient(180deg, rgba(4, 8, 16, 0.98), rgba(6, 13, 26, 0.98)); overflow: auto; }
.cabinet-body .app-main { min-width: 0; width: min(var(--content-max), calc(100% - 56px)); margin: 0 auto; padding: 0 0 84px; }
.cabinet-body .app-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; padding: 12px 0 10px; border-bottom: 1px solid var(--border-subtle); background: rgba(4, 8, 16, 0.84); backdrop-filter: blur(12px); }
.cabinet-body .workspace-section { margin-top: 44px; scroll-margin-top: 86px; }
.cabinet-body .processing-grid, .cabinet-body .history-layout { display: grid; grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); gap: var(--space-grid); align-items: start; }
.cabinet-body .processing-panel, .cabinet-body .history-list-panel { position: sticky; top: 84px; }
.cabinet-body .panel, .cabinet-body .card, .cabinet-body .summary-card, .cabinet-body .state-card { display: flex; flex-direction: column; gap: 12px; padding: var(--space-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(13, 30, 53, 0.8), rgba(10, 22, 40, 0.92)); box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(0, 212, 255, 0.08); overflow: visible; }
.cabinet-body .result-card, .cabinet-body .empty-state { border: 1px solid var(--border-mid); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(12, 31, 55, 0.78), rgba(7, 17, 31, 0.94)); box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(0, 212, 255, 0.08); overflow: visible; }
.cabinet-body .panel::before, .cabinet-body .result-card::before, .cabinet-body .empty-state::before { display: none; }
.cabinet-body .source-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 7px; border: 1px solid var(--border-mid); border-radius: 0; background: rgba(8, 18, 34, 0.52); }
.cabinet-body .source-tab { flex-direction: column; gap: 7px; min-height: 78px; padding: 12px 10px; border: 1px solid transparent; border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(15, 34, 58, 0.72), rgba(7, 16, 29, 0.86)); color: var(--text-muted); font-family: "Share Tech Mono", var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 18px rgba(0, 0, 0, 0.22); clip-path: none; }
.cabinet-body .source-tab.is-active, .cabinet-body .source-tab.active { color: var(--accent-bright); border-color: rgba(0, 212, 255, 0.58); background: linear-gradient(180deg, rgba(0, 92, 140, 0.58), rgba(9, 37, 66, 0.94)); box-shadow: var(--glow-sm), inset 0 1px 0 rgba(0, 238, 255, 0.22), inset 0 -12px 24px rgba(0, 0, 0, 0.18); }
.cabinet-body .source-panel { padding: var(--space-card); border: 1px solid var(--border-mid); border-radius: var(--radius-lg); background: rgba(0, 180, 255, 0.035); }
.cabinet-body .result-head { padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); background: rgba(4, 8, 16, 0.32); }
.cabinet-body .result-head h2 { font-size: 16px; }
.cabinet-body .result-toolbar { padding: 12px 18px; border-bottom: 1px solid var(--border-faint); background: rgba(7, 17, 31, 0.72); }
.cabinet-body .content { padding: 18px; max-height: min(58vh, 680px); }
.cabinet-body .empty-state { display: grid; gap: 10px; padding: 24px; color: var(--text-secondary); }
.cabinet-body .history-result-meta, .cabinet-body .history-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cabinet-body .history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: rgba(0, 180, 255, 0.035); }
.cabinet-body .history-item:hover, .cabinet-body .history-item.is-selected { border-color: var(--border-active); box-shadow: var(--glow-sm); }
.cabinet-body .record-preview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1180px) { .cabinet-body .processing-grid, .cabinet-body .history-layout { grid-template-columns: 1fr; } .cabinet-body .processing-panel, .cabinet-body .history-list-panel { position: static; } }
@media (max-width: 860px) { .cabinet-body .app-shell { grid-template-columns: 1fr; } .cabinet-body .app-sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--border-subtle); } .cabinet-body .app-main, .cabinet-body.history-page .app-main { width: min(100% - 24px, var(--content-max)); } .cabinet-body .app-topbar { position: static; align-items: flex-start; flex-direction: column; } .cabinet-body .history-meta, .cabinet-body .history-result-meta, .cabinet-body .grid-2, .cabinet-body .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cabinet-body .source-tabs, .cabinet-body .record-preview-stats, .cabinet-body .cost-estimate-details { grid-template-columns: 1fr; } .cabinet-body .history-item { grid-template-columns: 1fr; } }