/* ============================================
           DESIGN TOKENS
           ============================================ */
        *, *::before, *::after { font-family: 'Roboto', sans-serif; }
        [x-cloak] { display: none !important; }

        :root {
            --radius-sm: 6px;
            --radius: 10px;
            --radius-lg: 14px;
            --radius-xl: 20px;

            --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
            --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);

            /* Z-INDEX SCALE (documented) — never use raw numbers */
            --z-bg: 0;            /* background pattern */
            --z-vignette: 1;      /* top/bottom gradient overlay */
            --z-scanline: 2;      /* animated CRT scanline */
            --z-content: 10;      /* main content area */
            --z-header: 40;       /* sticky app header */
            --z-popover: 50;      /* dropdowns, popovers */
            --z-overlay: 50;      /* sidebar overlay (mobile) */
            --z-sidebar: 60;      /* sidebar panel */
            --z-modal: 70;        /* future: modal dialogs */

            --background: oklch(1 0 0);
            --foreground: oklch(0.145 0 0);
            --card: oklch(1 0 0);
            --card-foreground: oklch(0.145 0 0);
            --popover: oklch(1 0 0);
            --popover-foreground: oklch(0.145 0 0);
            --primary: oklch(0.205 0 0);
            --primary-foreground: oklch(0.985 0 0);
            --secondary: oklch(0.97 0 0);
            --secondary-foreground: oklch(0.205 0 0);
            --muted: oklch(0.97 0 0);
            --muted-foreground: oklch(0.556 0 0);
            --accent: oklch(0.97 0 0);
            --accent-foreground: oklch(0.205 0 0);
            --destructive: oklch(0.577 0.245 27.325);
            --success: oklch(0.696 0.17 162.48);
            --warning: oklch(0.769 0.188 70.08);
            --border: oklch(0.922 0 0);
            --input: oklch(0.922 0 0);
            --ring: oklch(0.708 0 0);
        }

        .dark {
            --background: oklch(0.145 0 0);
            --foreground: oklch(0.985 0 0);
            --card: oklch(0.205 0 0);
            --card-foreground: oklch(0.985 0 0);
            --popover: oklch(0.205 0 0);
            --popover-foreground: oklch(0.985 0 0);
            --primary: oklch(0.922 0 0);
            --primary-foreground: oklch(0.205 0 0);
            --secondary: oklch(0.269 0 0);
            --secondary-foreground: oklch(0.985 0 0);
            --muted: oklch(0.269 0 0);
            --muted-foreground: oklch(0.708 0 0);
            --accent: oklch(0.269 0 0);
            --accent-foreground: oklch(0.985 0 0);
            --destructive: oklch(0.704 0.191 22.216);
            --success: oklch(0.696 0.17 162.48);
            --warning: oklch(0.769 0.188 70.08);
            --border: oklch(0.28 0 0);
            --input: oklch(0.28 0 0);
            --ring: oklch(0.556 0 0);

            --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
            --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
        }

        body {
            background-color: var(--background);
            color: var(--foreground);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }

        /* ============================================
           BACKGROUND LAYERS (z: 0 → 2)
           Three clean layers, no mix-blend-mode chaos
           ============================================ */
        .bg-pattern {
            position: fixed; inset: 0;
            z-index: var(--z-bg);
            pointer-events: none;
            background-image:
                linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px);
            background-size: 44px 44px;
            -webkit-mask-image: radial-gradient(ellipse 100% 80% at center, black 30%, transparent 90%);
            mask-image: radial-gradient(ellipse 100% 80% at center, black 30%, transparent 90%);
        }
        .dark .bg-pattern {
            background-image:
                linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
        }

        .bg-vignette {
            position: fixed; inset: 0;
            z-index: var(--z-vignette);
            pointer-events: none;
            background:
                linear-gradient(180deg, rgba(0,0,0,0.04) 0%, transparent 15%, transparent 85%, rgba(0,0,0,0.04) 100%);
        }
        .dark .bg-vignette {
            background:
                linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 18%, transparent 82%, rgba(0,0,0,0.3) 100%);
        }

        .grid-scan-wrapper {
            position: fixed; inset: 0;
            z-index: var(--z-scanline);
            pointer-events: none;
        }
        .scan-container {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            -webkit-mask-image:
                linear-gradient(black 1px, transparent 1px),
                linear-gradient(90deg, black 1px, transparent 1px);
            -webkit-mask-size: 44px 44px;
            mask-image:
                linear-gradient(black 1px, transparent 1px),
                linear-gradient(90deg, black 1px, transparent 1px);
            mask-size: 44px 44px;
            overflow: hidden;
        }
        @keyframes scan-move {
            0%   { top: 100%; }
            100% { top: -70vh; }
        }
        .scanner-dark {
            position: absolute; left: 0; top: 100%;
            width: 100%; height: 70vh;
            background: linear-gradient(to bottom,
                rgba(255,255,255,0.80) 0%,
                rgba(255,255,255,0.45) 10%,
                rgba(255,255,255,0.20) 30%,
                transparent 100%);
            animation: scan-move 8s linear infinite;
        }
        .scanner-light {
            position: absolute; left: 0; top: 100%;
            width: 100%; height: 70vh;
            background: linear-gradient(to bottom,
                rgba(0,0,0,0.75) 0%,
                rgba(0,0,0,0.45) 10%,
                rgba(0,0,0,0.20) 30%,
                transparent 100%);
            animation: scan-move 8s linear infinite;
        }

        /* ============================================
           SIDEBAR (z: 60) + OVERLAY (z: 50)
           ============================================ */
        .sidebar {
            position: fixed; top: 0; left: 0; bottom: 0;
            width: 240px;
            z-index: var(--z-sidebar);
            background-color: var(--card);
            border-right: 1px solid var(--border);
            transform: translateX(-100%);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex; flex-direction: column;
            box-shadow: var(--shadow-lg);
        }
        .sidebar-open { transform: translateX(0); }
        @media (min-width: 768px) {
            .sidebar { transform: translateX(0); box-shadow: none; }
            .sidebar-closed-desktop { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
        }

        .sidebar-overlay {
            position: fixed; inset: 0;
            z-index: var(--z-overlay);
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .sidebar-overlay-active { opacity: 1; pointer-events: auto; }
        @media (min-width: 768px) {
            .sidebar-overlay-desktop-off { display: none !important; }
        }

        .main-area {
            min-height: 100vh;
            display: flex; flex-direction: column;
            transition: padding-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        @media (min-width: 768px) {
            .main-area--sidebar-open { padding-left: 240px; }
        }

        .nav-item {
            width: 100%;
            text-align: left;
            padding: 10px 14px;
            font-size: 14px;
            border-radius: var(--radius);
            cursor: pointer;
            color: var(--muted-foreground);
            display: flex; align-items: center; gap: 10px;
            transition: background-color 0.15s, color 0.15s;
        }
        .nav-item:hover { background-color: var(--secondary); color: var(--foreground); }
        .nav-item--active {
            background-color: var(--secondary);
            color: var(--foreground);
            font-weight: 500;
        }
        .nav-item-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; }

        /* ============================================
           HEADER (z: 40, sticky, solid)
           ============================================ */
        .app-header {
            position: sticky; top: 0;
            z-index: var(--z-header);
            height: 56px;
            background-color: var(--background);
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center;
            padding: 0 20px;
            gap: 12px;
        }
        .icon-btn {
            display: inline-flex; align-items: center; justify-content: center;
            width: 36px; height: 36px;
            border-radius: var(--radius);
            color: var(--muted-foreground);
            cursor: pointer;
            transition: background-color 0.15s, color 0.15s;
        }
        .icon-btn:hover { background-color: var(--secondary); color: var(--foreground); }

        /* ============================================
           CONTENT (z: 10)
           ============================================ */
        .content {
            position: relative;
            z-index: var(--z-content);
            flex: 1;
            max-width: 768px;
            width: 100%;
            margin: 0 auto;
            padding: 32px 20px 64px;
        }
        .page-title {
            font-size: 22px; font-weight: 700;
            color: var(--foreground);
            margin-bottom: 4px;
            letter-spacing: -0.01em;
        }
        .page-subtitle {
            font-size: 13px;
            color: var(--muted-foreground);
            margin-bottom: 24px;
        }

        /* ============================================
           CARD
           ============================================ */
        .card {
            background-color: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 20px;
            box-shadow: var(--shadow-sm);
            transition: box-shadow 0.2s, border-color 0.2s;
        }
        .card-hover:hover {
            box-shadow: var(--shadow-md);
            border-color: color-mix(in oklch, var(--border) 60%, var(--ring) 40%);
        }
        .card-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 16px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border);
        }
        .card-title {
            font-size: 12px; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.08em;
            color: var(--muted-foreground);
            display: flex; align-items: center; gap: 8px;
        }

        /* ============================================
           STATUS BADGE
           ============================================ */
        .status-badge {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 4px 10px;
            font-size: 11px; font-weight: 500;
            border-radius: 999px;
            text-transform: uppercase; letter-spacing: 0.05em;
        }
        .status-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .status-running {
            background-color: color-mix(in oklch, var(--success) 18%, transparent);
            color: var(--success);
        }
        .status-running .status-dot {
            background-color: var(--success);
            box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 25%, transparent);
            animation: pulse-dot 2s ease-in-out infinite;
        }
        .status-stopped {
            background-color: var(--secondary);
            color: var(--muted-foreground);
        }
        .status-stopped .status-dot { background-color: var(--muted-foreground); }
        @keyframes pulse-dot {
            0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 25%, transparent); }
            50%      { box-shadow: 0 0 0 5px color-mix(in oklch, var(--success) 12%, transparent); }
        }

        /* ============================================
           INPUTS / BUTTONS / SELECT
           ============================================ */
        .label {
            display: block;
            font-size: 11px; font-weight: 500;
            text-transform: uppercase; letter-spacing: 0.06em;
            color: var(--muted-foreground);
            margin-bottom: 6px;
        }
        .input-field {
            width: 100%;
            background-color: var(--secondary);
            border: 1px solid var(--input);
            color: var(--foreground);
            border-radius: var(--radius);
            padding: 10px 12px;
            font-size: 14px;
            transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
        }
        .input-field::placeholder { color: var(--muted-foreground); }
        .input-field:focus {
            outline: none;
            border-color: var(--ring);
            background-color: var(--background);
            box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 18%, transparent);
        }
        .input-field--readonly {
            cursor: default; pointer-events: none;
            background-color: var(--muted);
            color: var(--muted-foreground);
            text-align: center;
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
        }

        .btn {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 8px;
            padding: 10px 16px;
            font-size: 14px; font-weight: 500;
            border-radius: var(--radius);
            cursor: pointer;
            transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
            border: 1px solid transparent;
            user-select: none;
        }
        .btn:active { transform: scale(0.97); }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .btn-primary { background: var(--primary); color: var(--primary-foreground); }
        .btn-primary:hover { filter: brightness(1.08); }
        .btn-secondary {
            background: var(--secondary);
            color: var(--secondary-foreground);
            border-color: var(--border);
        }
        .btn-secondary:hover { background: var(--accent); }
        .btn-success { background: var(--success); color: white; }
        .btn-success:hover { filter: brightness(1.08); }
        .btn-danger { background: var(--destructive); color: white; }
        .btn-danger:hover { filter: brightness(1.08); }
        .btn-ghost { background: transparent; color: var(--muted-foreground); }
        .btn-ghost:hover { background: var(--secondary); color: var(--foreground); }
        .btn-icon {
            width: 36px; height: 36px;
            padding: 0;
        }

        .select-wrap { position: relative; }
        .select-trigger {
            width: 100%;
            background: var(--secondary);
            border: 1px solid var(--input);
            color: var(--foreground);
            border-radius: var(--radius);
            padding: 10px 12px;
            font-size: 14px;
            text-align: left;
            display: flex; align-items: center; justify-content: space-between;
            gap: 8px; cursor: pointer;
            transition: border-color 0.15s, background-color 0.15s;
        }
        .select-trigger:hover { border-color: var(--ring); }
        .select-trigger-placeholder { color: var(--muted-foreground); }
        .select-chevron {
            width: 16px; height: 16px;
            flex-shrink: 0;
            color: var(--muted-foreground);
            transition: transform 0.2s;
        }
        .select-chevron-open { transform: rotate(180deg); }
        .select-dropdown {
            position: absolute;
            top: calc(100% + 6px);
            left: 0; right: 0;
            z-index: var(--z-popover);
            background: var(--popover);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            padding: 4px;
            max-height: 220px;
            overflow-y: auto;
        }
        .select-option {
            width: 100%; text-align: left;
            padding: 9px 11px;
            font-size: 14px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            color: var(--muted-foreground);
            transition: background-color 0.1s, color 0.1s;
        }
        .select-option:hover { background: var(--secondary); color: var(--foreground); }
        .select-option--active {
            background: var(--secondary);
            color: var(--foreground);
            font-weight: 500;
        }

        /* ============================================
           METRIC TILES
           ============================================ */
        .metric-tile {
            background-color: var(--muted);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 12px;
            text-align: center;
        }
        .metric-label {
            font-size: 10px; font-weight: 500;
            text-transform: uppercase; letter-spacing: 0.06em;
            color: var(--muted-foreground);
            margin-bottom: 4px;
        }
        .metric-value {
            font-family: 'JetBrains Mono', monospace;
            font-size: 14px; font-weight: 500;
            color: var(--foreground);
            line-height: 1.2;
        }

        /* ============================================
           LOG
           ============================================ */
        .log-row {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 12px 16px;
            transition: background-color 0.1s;
        }
        .log-row:hover { background-color: var(--secondary); }
        .log-row + .log-row { border-top: 1px solid var(--border); }
        .log-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            margin-top: 6px;
            flex-shrink: 0;
        }
        .log-level {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px; font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .log-time {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: var(--muted-foreground);
        }
        .log-msg {
            font-size: 13px;
            color: var(--card-foreground);
            line-height: 1.5;
            margin-top: 2px;
            word-break: break-word;
        }
        .log-del {
            opacity: 0;
            cursor: pointer;
            color: var(--muted-foreground);
            padding: 4px;
            border-radius: var(--radius-sm);
            transition: opacity 0.15s, color 0.15s, background-color 0.15s;
            flex-shrink: 0;
        }
        .log-row:hover .log-del { opacity: 0.7; }
        .log-del:hover { opacity: 1 !important; color: var(--destructive); background-color: var(--secondary); }

        /* ============================================
           EMPTY STATE
           ============================================ */
        .empty-state {
            display: flex; flex-direction: column; align-items: center;
            padding: 64px 20px 48px;
            text-align: center;
        }
        .empty-icon-wrap {
            width: 72px; height: 72px;
            border-radius: 50%;
            background: var(--secondary);
            border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 20px;
            color: var(--muted-foreground);
        }