/* ==========================================================================
   Theme: Ghost Protocol V2
   Optional secondary skin, chosen in Settings → System → Appearance.

   Every rule that changes the application is scoped to
   html[data-theme="ghost-protocol-v2"], so Classic (the default) renders
   exactly as app.css draws it. The theme works by re-pointing the design
   tokens from app.css at a palette; component rules below only add what a
   token cannot express (glow, grid, mono labels, ambient layers).

   Palette:  html[data-ghost-palette]  green | ice | amber | red
   Effects:  html[data-ghost-crt|glitch|rain]  on | off
   ========================================================================== */

/* --------------------------------------------------------------------------
   Unscoped: safe in every theme
   -------------------------------------------------------------------------- */

/* The ambient host renders in every theme and draws nothing unless a theme turns it on. */
.theme-ambience {
    display: none;
}

/* Palette swatches for the Appearance picker. They show while Classic is still the saved theme. */
.appearance-swatch[data-palette="green"] { --appearance-swatch: #b8ff56; }
.appearance-swatch[data-palette="ice"] { --appearance-swatch: #67d9ff; }
.appearance-swatch[data-palette="amber"] { --appearance-swatch: #ffd06e; }
.appearance-swatch[data-palette="red"] { --appearance-swatch: #ff527b; }

@media screen {

    /* ----------------------------------------------------------------------
       1. Palettes. Phosphor Green is the default and the fallback.
       ---------------------------------------------------------------------- */

    html[data-theme="ghost-protocol-v2"] {
        --ghost-accent: #b8ff56;
        --ghost-secondary: #34f1cb;
        --ghost-bg: #040907;
        --ghost-panel: #0a130e;
        --ghost-panel-raised: #0d1b13;
        --ghost-edge: #2b4730;
        --ghost-text: #e0f6da;
        --ghost-muted: #789481;
        --ghost-warning: #ffc46b;
        --ghost-danger: #ff6d84;
        --ghost-ink: #071007;
        /* Approximates the accent hue on the raster logo (grayscale → sepia → rotate). */
        --ghost-logo-hue: 45deg;
    }

    html[data-theme="ghost-protocol-v2"][data-ghost-palette="ice"] {
        --ghost-accent: #67d9ff;
        --ghost-secondary: #b4a0ff;
        --ghost-bg: #030911;
        --ghost-panel: #091422;
        --ghost-panel-raised: #0d1c2c;
        --ghost-edge: #25455b;
        --ghost-text: #e2f4ff;
        --ghost-muted: #7a9cb3;
        --ghost-warning: #ffd17b;
        --ghost-danger: #ff759b;
        --ghost-ink: #031521;
        --ghost-logo-hue: 160deg;
    }

    html[data-theme="ghost-protocol-v2"][data-ghost-palette="amber"] {
        --ghost-accent: #ffd06e;
        --ghost-secondary: #ff9e50;
        --ghost-bg: #110c04;
        --ghost-panel: #1c1409;
        --ghost-panel-raised: #271a0a;
        --ghost-edge: #564127;
        --ghost-text: #fff1d9;
        --ghost-muted: #b09b7b;
        --ghost-warning: #fff1a0;
        --ghost-danger: #ff746c;
        --ghost-ink: #261303;
        --ghost-logo-hue: 0deg;
    }

    html[data-theme="ghost-protocol-v2"][data-ghost-palette="red"] {
        --ghost-accent: #ff527b;
        --ghost-secondary: #fc8d5e;
        --ghost-bg: #110508;
        --ghost-panel: #1b0b11;
        --ghost-panel-raised: #250e16;
        --ghost-edge: #583042;
        --ghost-text: #ffe6eb;
        --ghost-muted: #ae7b8c;
        --ghost-warning: #ffc473;
        --ghost-danger: #ff4855;
        --ghost-ink: #21050b;
        --ghost-logo-hue: 300deg;
    }

    /* ----------------------------------------------------------------------
       2. Token mapping. Re-points app.css tokens; components follow.
       ---------------------------------------------------------------------- */

    html[data-theme="ghost-protocol-v2"] {
        --ghost-grid: color-mix(in srgb, var(--ghost-accent) 4.5%, transparent);
        --ghost-glow: color-mix(in srgb, var(--ghost-accent) 45%, transparent);
        /* CRT scanlines are painted into surfaces (below their content), never laid over it. */
        --ghost-scan: linear-gradient(transparent, transparent);

        --color-background: var(--ghost-bg);
        --color-background-raised: color-mix(in srgb, var(--ghost-bg) 55%, var(--ghost-panel));
        --color-background-elevated: color-mix(in srgb, var(--ghost-panel) 70%, var(--ghost-bg));
        --color-sidebar: color-mix(in srgb, var(--ghost-bg) 80%, #000);
        --color-surface: var(--ghost-panel);
        --color-surface-raised: var(--ghost-panel-raised);
        --color-surface-hover: color-mix(in srgb, var(--ghost-panel-raised) 88%, var(--ghost-accent));
        --color-field: color-mix(in srgb, var(--ghost-bg) 85%, #000);
        --color-field-hover: color-mix(in srgb, var(--ghost-bg) 70%, var(--ghost-panel));

        --color-border: var(--ghost-edge);
        --color-border-strong: color-mix(in srgb, var(--ghost-edge) 70%, var(--ghost-accent));
        --color-border-loud: color-mix(in srgb, var(--ghost-edge) 40%, var(--ghost-accent));

        /* Muted steps blend toward the primary text so body copy keeps AA on every surface. */
        --color-text: var(--ghost-text);
        --color-text-muted: color-mix(in srgb, var(--ghost-text) 50%, var(--ghost-muted));
        --color-text-subtle: color-mix(in srgb, var(--ghost-text) 22%, var(--ghost-muted));
        --color-text-faint: var(--ghost-muted);
        --color-ink: var(--ghost-ink);

        --color-accent: var(--ghost-accent);
        --color-accent-hover: color-mix(in srgb, var(--ghost-accent) 80%, #fff);
        --color-accent-active: color-mix(in srgb, var(--ghost-accent) 80%, #000);
        --color-accent-text: var(--ghost-accent);
        --color-accent-soft: color-mix(in srgb, var(--ghost-accent) 15%, transparent);
        --color-accent-faint: color-mix(in srgb, var(--ghost-accent) 7%, transparent);
        --color-accent-glow: color-mix(in srgb, var(--ghost-accent) 30%, transparent);

        /* Semantic tones keep their meaning: info follows the accent (the "live" colour in the
           reference), the rest stay distinct hues tuned to read as neon on near-black. */
        --color-info: var(--ghost-accent);
        --color-info-soft: color-mix(in srgb, var(--ghost-accent) 12%, transparent);
        --color-purple: #c49bff;
        --color-purple-soft: color-mix(in srgb, #c49bff 13%, transparent);
        --color-warning: var(--ghost-warning);
        --color-warning-soft: color-mix(in srgb, var(--ghost-warning) 13%, transparent);
        --color-success: #4cf5b4;
        --color-success-soft: color-mix(in srgb, #4cf5b4 12%, transparent);
        --color-danger: var(--ghost-danger);
        --color-danger-soft: color-mix(in srgb, var(--ghost-danger) 13%, transparent);
        --color-hot: color-mix(in srgb, var(--ghost-warning) 50%, var(--ghost-danger));
        --color-hot-soft: color-mix(in srgb, var(--color-hot) 13%, transparent);
        --color-neutral: var(--ghost-muted);
        --color-neutral-soft: color-mix(in srgb, var(--ghost-muted) 12%, transparent);

        --overlay-dark: color-mix(in srgb, #000 78%, transparent);

        --font-sans: "IBM Plex Mono", "Cascadia Mono", "Cascadia Code", "JetBrains Mono", "SFMono-Regular",
            Consolas, "Lucida Console", "Liberation Mono", monospace;
        --font-mono: "IBM Plex Mono", "Cascadia Mono", "Cascadia Code", "SFMono-Regular", Consolas,
            "Lucida Console", "Liberation Mono", monospace;
        --font-display: "Barlow Condensed", Bahnschrift, "Archivo Narrow", Oswald, "Roboto Condensed",
            "Arial Narrow", sans-serif;
        --font-poster: var(--font-display);

        --shadow-panel: 0 1.25rem 2.75rem rgba(0, 0, 0, 0.6), 0 0 3rem color-mix(in srgb, var(--ghost-accent) 8%, transparent);
        --shadow-raised: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.6), 0 0 1.25rem color-mix(in srgb, var(--ghost-accent) 7%, transparent);
        --focus-ring: inset 0 0 0 2px var(--ghost-secondary), inset 0 0 0 4px var(--ghost-bg);
        --texture-line: transparent;

        /* Aliases some older component styles read with a fallback. Classic never defines them,
           so they keep their fallbacks there and pick up the palette here. */
        --text-primary: var(--color-text);
        --text-muted: var(--color-text-muted);
        --color-focus: var(--ghost-secondary);
        --warning: var(--color-warning);
        --success: var(--color-success);
        --danger: var(--color-danger);

        background:
            linear-gradient(var(--ghost-grid) 1px, transparent 1px) 0 0 / 28px 28px,
            linear-gradient(90deg, var(--ghost-grid) 1px, transparent 1px) 0 0 / 28px 28px,
            var(--ghost-bg);
        color-scheme: dark;
    }

    html[data-theme="ghost-protocol-v2"][data-ghost-crt="on"] {
        --ghost-scan: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.18) 3px 4px);
    }

    html[data-theme="ghost-protocol-v2"] ::selection {
        background: color-mix(in srgb, var(--ghost-accent) 35%, transparent);
        color: var(--ghost-text);
    }

    /* ----------------------------------------------------------------------
       3. Canvas and ambient layers
       The canvas grid lives on <html>; body and the shell go transparent so
       it and the ambient layers (z-index -1, behind every layout) show
       through the gaps between surfaces.
       ---------------------------------------------------------------------- */

    html[data-theme="ghost-protocol-v2"] body {
        background: transparent;
        font-size: 0.875rem;
        letter-spacing: 0.01em;
    }

    html[data-theme="ghost-protocol-v2"] body::before,
    html[data-theme="ghost-protocol-v2"] .app-shell::after {
        display: none;
    }

    html[data-theme="ghost-protocol-v2"] .app-shell {
        background: transparent;
    }

    html[data-theme="ghost-protocol-v2"] .theme-ambience {
        background:
            radial-gradient(ellipse at 95% -15%, color-mix(in srgb, var(--ghost-accent) 12%, transparent), transparent 36%),
            radial-gradient(ellipse at 5% 100%, color-mix(in srgb, var(--ghost-secondary) 6.5%, transparent), transparent 43%);
        display: block;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        position: fixed;
        z-index: -1;
    }

    html[data-theme="ghost-protocol-v2"] .theme-ambience > * {
        pointer-events: none;
        position: absolute;
    }

    html[data-theme="ghost-protocol-v2"] .theme-ambience-scanlines {
        background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, 0.3) 3px 4px);
        display: none;
        inset: 0;
        opacity: 0.45;
    }

    html[data-theme="ghost-protocol-v2"][data-ghost-crt="on"] .theme-ambience-scanlines {
        display: block;
    }

    /* Digital rain: two masked glyph sheets sliding on the compositor (transform only), faded in
       from the left so it stays on the far side of the page and well below text contrast. */
    html[data-theme="ghost-protocol-v2"] .theme-ambience-rain {
        --ghost-rain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='640'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.85' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23f)' font-family='monospace' font-size='13'%3E%3Ctext x='3 3 3 3 3 3 3 3 3 3 3 3 3 3' y='365 381 397 413 429 445 461 477 493 509 525 541 557 573'%3E%E3%83%90%E3%83%AB%E3%83%ACC%E3%82%B7%E3%83%8C%E3%83%930%E3%83%90%E3%83%89%E3%83%948%E3%82%BC3%3C/text%3E%3Ctext x='3 3 3 3 3 3 3 3 3 3 3' y='61 77 93 109 125 141 157 173 189 205 221'%3E%E3%83%980%E3%83%95%E3%82%AA%E3%83%A284%E3%83%8E%E3%83%95%E3%83%95D%3C/text%3E%3Ctext x='19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19' y='13 29 45 61 77 93 109 125 141 157 173 189 205 221 237 253'%3E%E3%83%8F%E3%83%AE%E3%82%B1%E3%83%9C%E3%83%81%E3%82%B7%E3%83%8A57%E3%83%AF%E3%83%9C%E3%83%AF%E3%83%83%E3%82%BB%E3%83%A8%E3%82%AA%3C/text%3E%3Ctext x='35 35 35 35 35 35 35 35 35 35 35 35 35 35' y='317 333 349 365 381 397 413 429 445 461 477 493 509 525'%3E%E3%83%AB%E3%82%A7%E3%82%AB%E3%83%962%E3%83%B1%E3%82%A85%E3%82%A40%E3%82%BB%E3%82%BB%E3%82%AF%E3%83%86%3C/text%3E%3Ctext x='35 35 35 35 35 35 35 35 35' y='461 477 493 509 525 541 557 573 589'%3EE%E3%83%AA%E3%83%8A%E3%82%A3%E3%83%B0%E3%83%8C%E3%83%99%E3%83%AB%E3%82%BF%3C/text%3E%3Ctext x='51 51 51 51 51 51' y='317 333 349 365 381 397'%3E%E3%82%BD%E3%83%B0%E3%82%B9%E3%83%A5%E3%83%A5%E3%83%A5%3C/text%3E%3Ctext x='51 51 51 51 51 51 51 51' y='61 77 93 109 125 141 157 173'%3EE%E3%83%A19D%E3%83%AC%E3%83%9C%E3%82%A5%E3%83%A4%3C/text%3E%3Ctext x='67 67 67 67 67 67 67 67 67 67 67 67 67 67' y='397 413 429 445 461 477 493 509 525 541 557 573 589 605'%3E2C%E3%83%8FD%E3%83%A9%E3%83%AA1%E3%83%82%E3%83%83%E3%82%AA9%E3%82%B2%E3%82%A9%E3%82%B7%3C/text%3E%3Ctext x='83 83 83 83 83 83 83' y='205 221 237 253 269 285 301'%3E%E3%83%9A%E3%83%A7%E3%83%82%E3%82%A8%E3%83%A8%E3%82%B5%E3%83%98%3C/text%3E%3Ctext x='99 99 99 99 99 99 99 99 99 99 99 99 99 99 99' y='365 381 397 413 429 445 461 477 493 509 525 541 557 573 589'%3E%E3%82%A7%E3%83%99%E3%83%86D%E3%82%B5%E3%82%A90%E3%83%9D%E3%83%8E%E3%83%92%E3%82%AA%E3%82%BC%E3%83%8F35%3C/text%3E%3Ctext x='115 115 115 115 115 115 115 115 115 115 115 115 115 115 115' y='141 157 173 189 205 221 237 253 269 285 301 317 333 349 365'%3EA%E3%82%BD%E3%82%BA%E3%82%B3%E3%83%9F%E3%83%94%E3%83%B0%E3%83%98%E3%83%A8%E3%83%82%E3%82%B6%E3%82%BEA%E3%83%8C%E3%83%94%3C/text%3E%3Ctext x='115 115 115 115 115 115 115 115 115 115 115 115 115 115 115' y='109 125 141 157 173 189 205 221 237 253 269 285 301 317 333'%3E%E3%83%B1%E3%83%97%E3%82%B6A%E3%83%9E%E3%83%B18%E3%83%B2%E3%83%8B%E3%82%A7%E3%82%A5%E3%83%A7%E3%83%AE%E3%82%BA1%3C/text%3E%3Ctext x='131 131 131 131 131 131 131 131 131 131' y='397 413 429 445 461 477 493 509 525 541'%3E%E3%83%A7%E3%83%8A%E3%83%95%E3%83%8F%E3%82%BE%E3%83%89%E3%83%9A%E3%83%AC%E3%83%920%3C/text%3E%3Ctext x='147 147 147 147 147 147 147 147' y='285 301 317 333 349 365 381 397'%3EE%E3%83%80%E3%83%939%E3%82%AC%E3%83%9C7%E3%82%A2%3C/text%3E%3Ctext x='163 163 163 163 163 163 163' y='285 301 317 333 349 365 381'%3E%E3%83%A0%E3%83%A5%E3%83%AE%E3%83%93%E3%82%B3%E3%82%A6%E3%83%A2%3C/text%3E%3Ctext x='179 179 179 179 179 179 179 179 179 179 179 179' y='109 125 141 157 173 189 205 221 237 253 269 285'%3E0%E3%83%9A%E3%82%B04%E3%83%81%E3%83%88%E3%82%A8%E3%83%A0A%E3%82%BD%E3%83%8F%E3%83%A6%3C/text%3E%3Ctext x='179 179 179 179 179 179 179 179 179 179 179' y='477 493 509 525 541 557 573 589 605 621 637'%3E%E3%83%85%E3%83%AC%E3%82%AF65%E3%82%B5%E3%83%A2%E3%83%AD41%E3%82%A7%3C/text%3E%3Ctext x='195 195 195 195 195 195 195 195 195 195 195 195 195 195' y='253 269 285 301 317 333 349 365 381 397 413 429 445 461'%3E%E3%83%87%E3%82%A4%E3%82%B5%E3%82%B4%E3%83%9D%E3%82%AC2C%E3%83%B0%E3%83%A0%E3%83%9CDB%E3%82%A4%3C/text%3E%3Ctext x='195 195 195 195 195 195 195 195' y='205 221 237 253 269 285 301 317'%3E%E3%82%B6%E3%83%80F%E3%82%BE1%E3%82%A79%E3%83%B2%3C/text%3E%3Ctext x='211 211 211 211 211 211 211 211 211 211 211 211 211' y='365 381 397 413 429 445 461 477 493 509 525 541 557'%3E%E3%83%955%E3%83%89F%E3%83%8A%E3%82%A57%E3%83%98%E3%83%8F%E3%83%B2%E3%82%AF%E3%82%B7%E3%82%AC%3C/text%3E%3Ctext x='227 227 227 227 227 227' y='317 333 349 365 381 397'%3E%E3%83%B23%E3%82%BA%E3%82%B66%E3%82%BB%3C/text%3E%3Ctext x='227 227 227 227 227 227 227' y='93 109 125 141 157 173 189'%3E%E3%82%B6%E3%83%A81%E3%83%95%E3%83%AB%E3%83%AE%E3%83%81%3C/text%3E%3Ctext x='243 243 243 243 243 243 243 243 243 243 243 243' y='125 141 157 173 189 205 221 237 253 269 285 301'%3E6%E3%83%97%E3%83%8C%E3%83%A8%E3%83%9D%E3%83%9EE%E3%82%BA%E3%82%AB%E3%82%AB%E3%82%AA2%3C/text%3E%3Ctext x='259 259 259 259 259 259 259 259' y='381 397 413 429 445 461 477 493'%3E%E3%83%84%E3%83%AC%E3%83%92%E3%82%A5%E3%82%A25%E3%83%81%E3%82%A9%3C/text%3E%3Ctext x='259 259 259 259 259 259 259 259 259 259 259 259 259 259' y='285 301 317 333 349 365 381 397 413 429 445 461 477 493'%3E%E3%82%B02%E3%83%94%E3%83%85%E3%83%A4%E3%83%A9%E3%83%86%E3%82%B57%E3%82%A2%E3%83%97%E3%83%88%E3%83%A0%E3%83%91%3C/text%3E%3Ctext x='275 275 275 275 275 275 275 275 275 275 275 275 275 275 275 275' y='173 189 205 221 237 253 269 285 301 317 333 349 365 381 397 413'%3E%E3%82%A3F%E3%83%AF%E3%82%A9%E3%82%AD%E3%82%A8%E3%83%91%E3%83%99%E3%83%B1%E3%83%97%E3%83%94%E3%83%9E%E3%82%B8%E3%82%A3%E3%83%A15%3C/text%3E%3Ctext x='291 291 291 291 291 291 291 291 291' y='77 93 109 125 141 157 173 189 205'%3E%E3%83%98%E3%82%BA%E3%82%AD%E3%83%A80%E3%83%A4%E3%82%B6%E3%83%97%E3%82%BE%3C/text%3E%3Ctext x='307 307 307 307 307 307 307' y='237 253 269 285 301 317 333'%3E%E3%83%A2%E3%82%B9%E3%83%99%E3%82%A4%E3%83%98%E3%83%A4%E3%83%A7%3C/text%3E%3Ctext x='307 307 307 307 307 307 307 307 307 307' y='61 77 93 109 125 141 157 173 189 205'%3EA0%E3%83%8B%E3%83%86%E3%82%A89%E3%83%A0%E3%83%90%E3%83%8B%E3%82%A5%3C/text%3E%3C/g%3E%3C/svg%3E");
        bottom: 0;
        display: none;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%);
        mask-image: linear-gradient(90deg, transparent, #000 65%);
        opacity: 0.28;
        right: 0;
        top: 0;
        width: 55%;
    }

    html[data-theme="ghost-protocol-v2"][data-ghost-rain="on"] .theme-ambience-rain {
        display: block;
    }

    html[data-theme="ghost-protocol-v2"] .theme-ambience-rain::before,
    html[data-theme="ghost-protocol-v2"] .theme-ambience-rain::after {
        animation: ghost-rain-fall 11s linear infinite;
        background: var(--ghost-accent);
        content: "";
        height: calc(100% + 640px);
        left: 0;
        -webkit-mask: var(--ghost-rain) 0 0 / 320px 640px repeat;
        mask: var(--ghost-rain) 0 0 / 320px 640px repeat;
        position: absolute;
        right: 0;
        top: -640px;
        will-change: transform;
    }

    html[data-theme="ghost-protocol-v2"] .theme-ambience-rain::after {
        animation-duration: 17s;
        background: var(--ghost-secondary);
        -webkit-mask-position: 160px 220px;
        mask-position: 160px 220px;
        opacity: 0.45;
    }

    @keyframes ghost-rain-fall {
        from { transform: translateY(0); }
        to { transform: translateY(640px); }
    }

    /* ----------------------------------------------------------------------
       4. Typography: terminal labels, condensed display headings
       ---------------------------------------------------------------------- */

    html[data-theme="ghost-protocol-v2"] h1,
    html[data-theme="ghost-protocol-v2"] h2,
    html[data-theme="ghost-protocol-v2"] h3,
    html[data-theme="ghost-protocol-v2"] h4 {
        letter-spacing: 0.04em;
    }

    html[data-theme="ghost-protocol-v2"] h1 {
        letter-spacing: 0.05em;
        text-shadow: 3px 3px 0 color-mix(in srgb, var(--ghost-accent) 14%, transparent);
    }

    html[data-theme="ghost-protocol-v2"] :is(
        .eyebrow, .panel-kicker, .stat-label, .sidebar-heading, .field-group > label,
        .data-table th, .definition-grid dt, .status-chip, .tab, .button, .text-action,
        .nav-link, .pager-link, .appearance-fieldset legend) {
        font-family: var(--font-mono);
        font-stretch: normal;
    }

    html[data-theme="ghost-protocol-v2"] :is(.eyebrow, .panel-kicker, .sidebar-heading, .data-table th) {
        letter-spacing: 0.14em;
    }

    html[data-theme="ghost-protocol-v2"] :is(.button, .text-action, .tab) {
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }

    html[data-theme="ghost-protocol-v2"] .status-chip {
        font-size: 0.62rem;
        letter-spacing: 0.04em;
        text-shadow: 0 0 0.45rem color-mix(in srgb, currentColor 45%, transparent);
    }

    html[data-theme="ghost-protocol-v2"] .nav-link {
        font-size: 0.78rem;
        letter-spacing: 0.06em;
    }

    html[data-theme="ghost-protocol-v2"] .eyebrow {
        color: var(--ghost-secondary);
    }

    html[data-theme="ghost-protocol-v2"] .eyebrow::before {
        background: var(--ghost-accent);
        box-shadow: 0 0 0.5rem var(--ghost-glow);
    }

    html[data-theme="ghost-protocol-v2"] .page-description {
        letter-spacing: 0.02em;
    }

    /* Title glitch: a sliced, offset copy of the page title flashes for a few frames every
       ~7s. The copy is drawn from data-text and given empty alternative text, so assistive
       technology reads the title once. */
    html[data-theme="ghost-protocol-v2"][data-ghost-glitch="on"] .page-heading h1[data-text] {
        animation: ghost-flicker 11s infinite;
        position: relative;
    }

    html[data-theme="ghost-protocol-v2"][data-ghost-glitch="on"] .page-heading h1[data-text]::after {
        animation: ghost-glitch 7.2s steps(1) infinite;
        clip-path: inset(34% 0 39% 0);
        color: var(--ghost-secondary);
        content: attr(data-text);
        content: attr(data-text) / "";
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        text-shadow: none;
    }

    @keyframes ghost-glitch {
        0%, 90%, 93%, 95%, 98%, 100% { opacity: 0; transform: translateX(0); }
        91% { opacity: 0.85; transform: translateX(-5px); }
        92% { opacity: 0.7; transform: translateX(6px); }
        94% { opacity: 0.9; transform: translateX(-3px); }
        96% { opacity: 0.55; transform: translateX(4px); }
    }

    @keyframes ghost-flicker {
        0%, 96%, 98%, 100% { filter: none; }
        97% { filter: brightness(1.5); }
        99% { filter: brightness(0.75); }
    }

    /* ----------------------------------------------------------------------
       5. Shell: sidebar, topbar, navigation, brand
       ---------------------------------------------------------------------- */

    html[data-theme="ghost-protocol-v2"] .sidebar {
        background:
            var(--ghost-scan),
            linear-gradient(180deg, color-mix(in srgb, var(--ghost-accent) 4%, transparent), transparent 30%),
            color-mix(in srgb, var(--color-sidebar) 90%, transparent);
    }

    html[data-theme="ghost-protocol-v2"] .topbar {
        background:
            var(--ghost-scan),
            color-mix(in srgb, var(--color-background-elevated) 93%, transparent);
        box-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
    }

    html[data-theme="ghost-protocol-v2"] .topbar::after {
        box-shadow: 0 0 1.1rem var(--ghost-glow);
    }

    html[data-theme="ghost-protocol-v2"] .brand-logo {
        filter: grayscale(1) sepia(1) saturate(3.2) hue-rotate(var(--ghost-logo-hue)) brightness(1.08)
            drop-shadow(0 0 0.4rem color-mix(in srgb, var(--ghost-accent) 35%, transparent));
    }

    html[data-theme="ghost-protocol-v2"] .nav-link.active {
        color: var(--ghost-accent);
    }

    html[data-theme="ghost-protocol-v2"] .nav-link.active::before {
        background: color-mix(in srgb, var(--ghost-accent) 13%, transparent);
        box-shadow:
            inset 3px 0 0 var(--ghost-accent),
            inset 0 0 0 1px color-mix(in srgb, var(--ghost-accent) 32%, transparent);
    }

    html[data-theme="ghost-protocol-v2"] .nav-link.active .nav-icon {
        border-color: color-mix(in srgb, var(--ghost-accent) 45%, transparent);
        color: var(--ghost-accent);
    }

    html[data-theme="ghost-protocol-v2"] .status-pulse {
        box-shadow: 0 0 0.6rem var(--ghost-glow);
    }

    /* ----------------------------------------------------------------------
       6. Surfaces: panels, tiles, cards, dialogs, popovers
       ---------------------------------------------------------------------- */

    html[data-theme="ghost-protocol-v2"] :is(.panel, .account-card, .stat-tile) {
        --panel-fill:
            var(--ghost-scan),
            linear-gradient(145deg, color-mix(in srgb, var(--ghost-accent) 6%, transparent), transparent 55%),
            color-mix(in srgb, var(--ghost-panel) 92%, transparent);
        filter: drop-shadow(0 0.75rem 1.5rem rgba(0, 0, 0, 0.45));
    }

    html[data-theme="ghost-protocol-v2"] .panel-header {
        background: linear-gradient(90deg, color-mix(in srgb, var(--ghost-accent) 8%, transparent), transparent 48%);
    }

    html[data-theme="ghost-protocol-v2"] .panel-title::after {
        box-shadow: 0 0 0.6rem color-mix(in srgb, var(--panel-accent, var(--ghost-accent)) 55%, transparent);
    }

    html[data-theme="ghost-protocol-v2"] :is(.app-dialog, .notification-dropdown) {
        background:
            var(--ghost-scan),
            linear-gradient(170deg, var(--color-surface), var(--color-background-raised));
        box-shadow: var(--shadow-panel);
    }

    html[data-theme="ghost-protocol-v2"] .app-dialog {
        border-top-color: var(--ghost-accent);
    }

    html[data-theme="ghost-protocol-v2"] .app-dialog.app-dialog-danger {
        border-top-color: var(--color-danger);
    }

    /* ----------------------------------------------------------------------
       7. Controls
       ---------------------------------------------------------------------- */

    html[data-theme="ghost-protocol-v2"] .button-primary:hover:not(:disabled) {
        filter: brightness(1.1);
    }

    html[data-theme="ghost-protocol-v2"] :is(.field-control, .select-control, .search-input):focus {
        box-shadow: 0 0 0.75rem color-mix(in srgb, var(--ghost-accent) 14%, transparent);
    }

    html[data-theme="ghost-protocol-v2"] :is(input, textarea, select) {
        caret-color: var(--ghost-accent);
    }

    html[data-theme="ghost-protocol-v2"] .tab.active::after,
    html[data-theme="ghost-protocol-v2"] .tab[aria-selected="true"]::after {
        box-shadow: 0 0 0.6rem var(--ghost-glow);
    }

    /* ----------------------------------------------------------------------
       8. Data tables
       ---------------------------------------------------------------------- */

    html[data-theme="ghost-protocol-v2"] .data-table thead th {
        background: color-mix(in srgb, #000 22%, var(--color-background-elevated));
    }

    html[data-theme="ghost-protocol-v2"] .data-table thead th::after {
        box-shadow: 0 0 0.5rem var(--ghost-glow);
    }

    html[data-theme="ghost-protocol-v2"] .data-table > tbody > tr > td {
        border-bottom-color: color-mix(in srgb, var(--ghost-accent) 12%, transparent);
    }

    html[data-theme="ghost-protocol-v2"] .data-table > tbody > tr:hover > td {
        background-color: color-mix(in srgb, var(--ghost-accent) 6%, transparent);
    }

    /* ----------------------------------------------------------------------
       9. Component styles that carry the Classic brand pink as a literal
       ---------------------------------------------------------------------- */

    html[data-theme="ghost-protocol-v2"] .notification-dropdown {
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 16px color-mix(in srgb, var(--ghost-accent) 12%, transparent);
    }

    html[data-theme="ghost-protocol-v2"] .machine-hero {
        background:
            radial-gradient(circle at top right, var(--color-accent-soft), transparent 35%),
            linear-gradient(145deg, var(--color-surface), var(--color-background-raised));
        border-color: color-mix(in srgb, var(--ghost-accent) 22%, transparent);
    }

    html[data-theme="ghost-protocol-v2"] .machine-tab.is-active {
        background: linear-gradient(135deg, var(--color-accent-soft), var(--color-accent-faint));
        border-color: color-mix(in srgb, var(--ghost-accent) 30%, transparent);
    }

    html[data-theme="ghost-protocol-v2"] .machine-tab.is-active small {
        background: var(--color-accent-soft);
    }

    html[data-theme="ghost-protocol-v2"] .machine-task-card:hover {
        background: var(--color-accent-faint);
        border-color: color-mix(in srgb, var(--ghost-accent) 26%, transparent);
    }

    html[data-theme="ghost-protocol-v2"] :is(.credential-reveal, .credential-value) {
        border-color: color-mix(in srgb, var(--ghost-accent) 28%, transparent);
    }

    html[data-theme="ghost-protocol-v2"] .credential-reveal {
        background: var(--color-accent-faint);
    }

    html[data-theme="ghost-protocol-v2"] .machine-config-actions {
        border-color: color-mix(in srgb, var(--ghost-accent) 20%, transparent);
    }

    /* ----------------------------------------------------------------------
       10. Preferences
       ---------------------------------------------------------------------- */

    /* Keep the look, drop the motion: no rain, no glitch, no flicker. */
    @media (prefers-reduced-motion: reduce) {
        html[data-theme="ghost-protocol-v2"] .theme-ambience-rain {
            display: none !important;
        }

        html[data-theme="ghost-protocol-v2"] .page-heading h1[data-text],
        html[data-theme="ghost-protocol-v2"] .page-heading h1[data-text]::after {
            animation: none !important;
        }

        html[data-theme="ghost-protocol-v2"] .page-heading h1[data-text]::after {
            display: none;
        }
    }

    /* More contrast: stronger muted text and borders, no ambient texture at all. */
    @media (prefers-contrast: more) {
        html[data-theme="ghost-protocol-v2"] {
            --color-border: color-mix(in srgb, var(--ghost-edge) 60%, var(--ghost-text));
            --color-border-strong: color-mix(in srgb, var(--ghost-edge) 35%, var(--ghost-text));
            --color-text-muted: color-mix(in srgb, var(--ghost-text) 80%, var(--ghost-muted));
            --color-text-subtle: color-mix(in srgb, var(--ghost-text) 65%, var(--ghost-muted));
            --color-text-faint: color-mix(in srgb, var(--ghost-text) 50%, var(--ghost-muted));
            --ghost-grid: transparent;
            --ghost-scan: linear-gradient(transparent, transparent);
            --focus-ring: inset 0 0 0 3px var(--ghost-secondary), inset 0 0 0 6px var(--ghost-bg);
        }

        html[data-theme="ghost-protocol-v2"] .theme-ambience {
            display: none;
        }
    }
}