/* ═══════════════════════════════════════════════════════════════
   BILT — CRT / Phosphor Palette  (data-palette="crt")
   Inspired by the phosphor glow of 1980s CRT monitors.
   Deep blue-black background, glowing cyan elements, scanline
   overlay, edge vignette, and an animated phosphor bloom orb.
   All rules scoped to html[data-palette="crt"] — zero bleed.
   ═══════════════════════════════════════════════════════════════ */


/* ══ DARK MODE (default) ════════════════════════════════════════ */

html[data-palette="crt"] {
    /* Core phosphor palette */
    --lav:            #00e5ff;
    --lav2:           #00c4dd;
    --peri:           #0099bb;
    --mint:           #00ffcc;
    --surf:           #010f1e;
    --surf2:          #011627;

    /* Background depth layers */
    --bg-void:        #000c14;
    --bg-surface:     #010f1e;
    --bg-panel:       #010f1e;
    --bg-card:        #011627;
    --bg-card-hover:  #021d33;

    /* Borders */
    --border-dim:     rgba(0,229,255,.20);
    --border-mid:     rgba(0,229,255,.38);
    --border-active:  rgba(0,229,255,.68);

    /* Accent */
    --accent:         #00e5ff;
    --accent-dim:     rgba(0,229,255,.10);
    --accent-glow:    rgba(0,229,255,.08);

    /* Text hierarchy */
    --text-primary:   rgba(0,229,255,.90);
    --text-secondary: rgba(0,229,255,.58);
    --text-muted:     rgba(0,229,255,.30);

    /* Background effects */
    --grid-line:      rgba(0,229,255,.03);
    --scan-color:     rgba(0,229,255,.015);

    /* Status */
    --danger:         #ff4466;
    --success:        #00ff88;

    /* Border aliases */
    --border-lav:     rgba(0,229,255,.20);
    --border-lav2:    rgba(0,229,255,.35);

    /* Semantic alpha stops */
    --accent-a04:     rgba(0,229,255,.04);
    --accent-a06:     rgba(0,229,255,.06);
    --accent-a07:     rgba(0,229,255,.07);
    --accent-a08:     rgba(0,229,255,.08);
    --accent-a10:     rgba(0,229,255,.10);
    --accent-a12:     rgba(0,229,255,.12);
    --accent-a14:     rgba(0,229,255,.14);
    --accent-a15:     rgba(0,229,255,.15);
    --accent-a25:     rgba(0,229,255,.25);
    --accent-a28:     rgba(0,229,255,.28);
    --accent-a30:     rgba(0,229,255,.30);
    --accent-a35:     rgba(0,229,255,.35);
    --accent-a45:     rgba(0,229,255,.45);
    --accent-a50:     rgba(0,229,255,.50);

    /* Structural — small functional corners, terminal aesthetic */
    --radius-xl:      8px;
    --radius-modal:   8px;
    --radius-panel:   5px;
    --radius-card:    5px;
    --radius-tile:    5px;
    --radius-input:   4px;
    --radius-sm:      4px;
    --radius-pill:    4px;

    /* Buttons — translucent cyan fill with cyan text */
    --btn-gradient:   rgba(0,229,255,.18);
    --btn-text:       #00e5ff;

    /* Shadows — CRT phosphor glow system */
    --shadow-xl:           0 0 14px rgba(0,229,255,.70), 0 0 36px rgba(0,229,255,.26);
    --shadow-panel:        0 0 5px  rgba(0,229,255,.65);
    --shadow-card:         0 0 5px  rgba(0,229,255,.65);
    --shadow-card-sm:      0 0 4px  rgba(0,229,255,.50);
    --shadow-btn:          0 0 5px  rgba(0,229,255,.65);
    --shadow-btn-hover:    0 0 8px  rgba(0,229,255,.50), 0 0 22px rgba(0,229,255,.18);
    --shadow-btn-sm:       0 0 4px  rgba(0,229,255,.40);
    --shadow-btn-sm-hover: 0 0 8px  rgba(0,229,255,.40), 0 0 16px rgba(0,229,255,.15);

    /* Font — monospace terminal */
    --font-ui: 'Share Tech Mono', monospace;
}


/* ══ BRIGHT MODIFIER ════════════════════════════════════════════ */
/* "Brightness turned up" — deep navy instead of near-black,
   stronger text contrast and glow intensity.                     */

html[data-palette="crt"][data-theme="bright"] {
    --bg-void:        #021d33;
    --bg-surface:     #032540;
    --bg-panel:       #032540;
    --bg-card:        #032f52;
    --bg-card-hover:  #04395e;
    --surf:           #032540;
    --surf2:          #032f52;

    --text-primary:   rgba(0,229,255,.98);
    --text-secondary: rgba(0,229,255,.72);
    --text-muted:     rgba(0,229,255,.44);

    --border-dim:     rgba(0,229,255,.28);
    --border-lav:     rgba(0,229,255,.28);
    --border-mid:     rgba(0,229,255,.50);
    --border-lav2:    rgba(0,229,255,.50);
    --border-active:  rgba(0,229,255,.80);

    --accent-dim:     rgba(0,229,255,.16);
    --accent-glow:    rgba(0,229,255,.12);

    --shadow-btn:          0 0 8px  rgba(0,229,255,.80);
    --shadow-btn-hover:    0 0 14px rgba(0,229,255,.70), 0 0 40px rgba(0,229,255,.30);
    --shadow-panel:        0 0 8px  rgba(0,229,255,.75);
    --shadow-card:         0 0 8px  rgba(0,229,255,.65);
}

html[data-palette="crt"][data-theme="bright"] body::before {
    background-image: repeating-linear-gradient(
        180deg,
        transparent       0px,
        transparent       2px,
        rgba(0,0,0,.08)   2px,
        rgba(0,0,0,.08)   3px
    ) !important;
    background-size: auto !important;
    animation: none !important;
    z-index: 9998 !important;
}

html[data-palette="crt"][data-theme="bright"] body::after {
    top: 0 !important;
    height: 100% !important;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent      55%,
        rgba(0,0,0,.45)  100%
    ) !important;
    animation: none !important;
    z-index: 9997 !important;
}


/* ══ LIGHT MODIFIER ═════════════════════════════════════════════ */
/* Near-opposite brightness — pale cyan-white backgrounds,
   dark teal text. The "inverse phosphor" terminal look.          */

html[data-palette="crt"][data-theme="light"] {
    --lav:            #007a99;
    --lav2:           #006080;
    --peri:           #004d66;
    --mint:           #00aa88;
    --surf:           #f0fbff;
    --surf2:          #e4f4fa;

    --bg-void:        #e0f7ff;
    --bg-surface:     #f0fbff;
    --bg-panel:       #f0fbff;
    --bg-card:        #e4f4fa;
    --bg-card-hover:  #d8eef7;

    --border-dim:     rgba(0,100,130,.15);
    --border-mid:     rgba(0,100,130,.30);
    --border-active:  rgba(0,122,153,.65);
    --border-lav:     rgba(0,100,130,.15);
    --border-lav2:    rgba(0,100,130,.30);

    --accent:         #007a99;
    --accent-dim:     rgba(0,122,153,.10);
    --accent-glow:    rgba(0,122,153,.08);

    --text-primary:   rgba(0,40,55,.92);
    --text-secondary: rgba(0,40,55,.60);
    --text-muted:     rgba(0,40,55,.38);

    --grid-line:      rgba(0,100,130,.06);
    --scan-color:     rgba(0,100,130,.012);

    --danger:         #cc2244;
    --success:        #008844;

    --accent-a04:     rgba(0,122,153,.04);
    --accent-a06:     rgba(0,122,153,.06);
    --accent-a07:     rgba(0,122,153,.07);
    --accent-a08:     rgba(0,122,153,.08);
    --accent-a10:     rgba(0,122,153,.10);
    --accent-a12:     rgba(0,122,153,.12);
    --accent-a14:     rgba(0,122,153,.14);
    --accent-a15:     rgba(0,122,153,.15);
    --accent-a25:     rgba(0,122,153,.25);
    --accent-a28:     rgba(0,122,153,.28);
    --accent-a30:     rgba(0,122,153,.30);
    --accent-a35:     rgba(0,122,153,.35);
    --accent-a45:     rgba(0,122,153,.45);
    --accent-a50:     rgba(0,122,153,.50);

    --btn-gradient:   rgba(0,122,153,.18);
    --btn-text:       #004d66;

    --shadow-xl:           0 0 12px rgba(0,122,153,.25), 0 0 30px rgba(0,122,153,.12);
    --shadow-panel:        0 0 5px  rgba(0,122,153,.28);
    --shadow-card:         0 0 5px  rgba(0,122,153,.28);
    --shadow-card-sm:      0 0 4px  rgba(0,122,153,.20);
    --shadow-btn:          0 0 5px  rgba(0,122,153,.45);
    --shadow-btn-hover:    0 0 8px  rgba(0,122,153,.40), 0 0 22px rgba(0,122,153,.18);
    --shadow-btn-sm:       0 0 4px  rgba(0,122,153,.32);
    --shadow-btn-sm-hover: 0 0 8px  rgba(0,122,153,.30), 0 0 16px rgba(0,122,153,.12);
}

/* Light — base text colour for plain elements */
html[data-palette="crt"][data-theme="light"] body {
    color: rgba(0,40,55,.92);
}

/* Light — subtle teal scanlines on pale background */
html[data-palette="crt"][data-theme="light"] body::before {
    background-image: repeating-linear-gradient(
        180deg,
        transparent            0px,
        transparent            2px,
        rgba(0,100,130,.055)   2px,
        rgba(0,100,130,.055)   3px
    ) !important;
    background-size: auto !important;
    animation: none !important;
    z-index: 9998 !important;
}

/* Light — gentle vignette on pale background */
html[data-palette="crt"][data-theme="light"] body::after {
    top: 0 !important;
    height: 100% !important;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent        55%,
        rgba(0,80,110,.10) 100%
    ) !important;
    animation: none !important;
    z-index: 9997 !important;
}

/* Light — dim teal-tinted glow orb */
html[data-palette="crt"][data-theme="light"]::before {
    background: radial-gradient(
        ellipse at center,
        rgba(0,122,153,.06) 0%,
        rgba(0,122,153,.03) 40%,
        transparent         65%
    );
    mix-blend-mode: multiply;
    animation: none;
}


/* ══ BODY + ORB (dark / bright shared) ═════════════════════════ */

html[data-palette="crt"] body {
    font-family: var(--font-ui);
}

/* Phosphor glow orb — pure CSS, no HTML element required */
html[data-palette="crt"]::before {
    content: '';
    position: fixed;
    bottom: -260px;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 700px;
    background: radial-gradient(
        ellipse at center,
        rgba(0,229,255,.10)  0%,
        rgba(0,229,255,.055) 35%,
        rgba(0,229,255,.020) 60%,
        transparent          76%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
    animation: crtOrbDrift 24s ease-in-out infinite;
}

@keyframes crtOrbDrift {
    0%   { transform: translateX(-50%) translateY(0px)   scale(1);    opacity: .80; }
    22%  { transform: translateX(-51%) translateY(-28px) scale(1.04); opacity: 1;   }
    48%  { transform: translateX(-49%) translateY(-14px) scale(.97);  opacity: .85; }
    74%  { transform: translateX(-52%) translateY(-36px) scale(1.03); opacity: 1;   }
    100% { transform: translateX(-50%) translateY(0px)   scale(1);    opacity: .80; }
}

/* CRT scanlines — replace base grid pattern */
html[data-palette="crt"] body::before {
    background-image: repeating-linear-gradient(
        180deg,
        transparent       0px,
        transparent       2px,
        rgba(0,0,0,.10)   2px,
        rgba(0,0,0,.10)   3px
    );
    background-size: auto;
    animation: none;
    z-index: 9998;
}

/* CRT edge vignette — replace scrolling scanline bar */
html[data-palette="crt"] body::after {
    top: 0;
    height: 100%;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent      55%,
        rgba(0,0,0,.55)  100%
    );
    animation: none;
    z-index: 9997;
}


/* ══ BUTTONS (dark / bright) ════════════════════════════════════ */

html[data-palette="crt"] .btn-submit,
html[data-palette="crt"] .btn-primary,
html[data-palette="crt"] .btn-export,
html[data-palette="crt"] .btn-primary-link {
    border: 1px solid rgba(0,229,255,.65);
    text-shadow: 0 0 4px rgba(0,229,255,.70);
}
html[data-palette="crt"] .btn-submit:hover,
html[data-palette="crt"] .btn-primary:hover,
html[data-palette="crt"] .btn-export:hover,
html[data-palette="crt"] .btn-primary-link:hover {
    border-color: #00e5ff;
}

html[data-palette="crt"] .btn-cancel,
html[data-palette="crt"] .btn-outline-link,
html[data-palette="crt"] .back-btn {
    border-color: rgba(0,229,255,.30);
    color: rgba(0,229,255,.60);
}
html[data-palette="crt"] .btn-cancel:hover,
html[data-palette="crt"] .btn-outline-link:hover,
html[data-palette="crt"] .back-btn:hover {
    border-color: rgba(0,229,255,.65);
    color: #00e5ff;
    box-shadow: 0 0 5px rgba(0,229,255,.40);
}


/* ══ DIAMOND (dark / bright) ════════════════════════════════════ */

html[data-palette="crt"] .diamond {
    background: #00e5ff;
    box-shadow: 0 0 5px rgba(0,229,255,.65), 0 0 12px rgba(0,229,255,.30);
}


/* ══ NAV / HEADER (dark / bright) ══════════════════════════════ */

html[data-palette="crt"] .bilt-header {
    background: rgba(0,12,20,0.96);
    border-bottom-color: rgba(0,229,255,.20);
    box-shadow: 0 1px 0 rgba(0,229,255,.18), 0 2px 16px rgba(0,229,255,.08);
}

html[data-palette="crt"] .bilt-header-wordmark,
html[data-palette="crt"] .bilt-nav-head-title {
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-shadow: 0 0 5px rgba(0,229,255,.80), 0 0 12px rgba(0,229,255,.38);
}

html[data-palette="crt"] .bilt-nav-drawer {
    background: #010f1e;
    border-left-color: rgba(0,229,255,.20);
}

html[data-palette="crt"] .bilt-nav-item              { color: rgba(0,229,255,.55); }
html[data-palette="crt"] .bilt-nav-item:hover         { color: rgba(0,229,255,.90); border-color: rgba(0,229,255,.35); text-shadow: 0 0 5px rgba(0,229,255,.60); }
html[data-palette="crt"] .bilt-nav-item.active        { color: #00e5ff; border-color: rgba(0,229,255,.55); background: rgba(0,229,255,.10); text-shadow: 0 0 5px rgba(0,229,255,.80), 0 0 12px rgba(0,229,255,.38); }

html[data-palette="crt"] .bilt-nav-item::before {
    background: linear-gradient(105deg, rgba(0,229,255,0) 0%, rgba(0,229,255,.06) 40%, rgba(0,229,255,.13) 50%, rgba(0,229,255,.06) 60%, rgba(0,229,255,0) 100%);
}
html[data-palette="crt"] .bilt-ctrl-btn::before {
    background: linear-gradient(105deg, rgba(0,229,255,0) 0%, rgba(0,229,255,.07) 40%, rgba(0,229,255,.14) 50%, rgba(0,229,255,.07) 60%, rgba(0,229,255,0) 100%);
}
html[data-palette="crt"] .bilt-ctrl-btn:hover { color: rgba(0,229,255,.90); }

html[data-palette="crt"] .bilt-nav-badge  { color: #000; }

html[data-palette="crt"] .bilt-avatar     { background: rgba(0,229,255,.15); border-color: rgba(0,229,255,.50); color: #00e5ff; }
html[data-palette="crt"] .bilt-status-dot { background: #00ff88; box-shadow: 0 0 8px #00ff88; }


/* ══ NAV / HEADER — LIGHT ═══════════════════════════════════════ */

html[data-palette="crt"][data-theme="light"] .bilt-header {
    background: rgba(224,247,255,0.96);
    border-bottom-color: rgba(0,100,130,.20);
    box-shadow: 0 1px 0 rgba(0,100,130,.15), 0 2px 12px rgba(0,100,130,.06);
}

html[data-palette="crt"][data-theme="light"] .bilt-nav-drawer {
    background: #f0fbff;
    border-left-color: rgba(0,100,130,.15);
}

html[data-palette="crt"][data-theme="light"] .bilt-header-wordmark,
html[data-palette="crt"][data-theme="light"] .bilt-nav-head-title {
    color: #007a99;
    text-shadow: none;
}

html[data-palette="crt"][data-theme="light"] .bilt-nav-item              { color: rgba(0,40,55,.58); }
html[data-palette="crt"][data-theme="light"] .bilt-nav-item:hover         { color: rgba(0,40,55,.90); border-color: rgba(0,100,130,.35); text-shadow: none; box-shadow: none; }
html[data-palette="crt"][data-theme="light"] .bilt-nav-item.active        { color: #007a99; border-color: rgba(0,122,153,.55); background: rgba(0,122,153,.08); text-shadow: none; box-shadow: none; }

html[data-palette="crt"][data-theme="light"] .bilt-nav-item::before {
    background: linear-gradient(105deg, rgba(0,122,153,0) 0%, rgba(0,122,153,.06) 40%, rgba(0,122,153,.12) 50%, rgba(0,122,153,.06) 60%, rgba(0,122,153,0) 100%);
}
html[data-palette="crt"][data-theme="light"] .bilt-ctrl-btn::before {
    background: linear-gradient(105deg, rgba(0,122,153,0) 0%, rgba(0,122,153,.07) 40%, rgba(0,122,153,.14) 50%, rgba(0,122,153,.07) 60%, rgba(0,122,153,0) 100%);
}
html[data-palette="crt"][data-theme="light"] .bilt-ctrl-btn       { color: rgba(0,40,55,.60); }
html[data-palette="crt"][data-theme="light"] .bilt-ctrl-btn:hover  { color: rgba(0,40,55,.90); }

html[data-palette="crt"][data-theme="light"] .bilt-nav-badge  { color: #fff; }
html[data-palette="crt"][data-theme="light"] .bilt-avatar     { background: rgba(0,122,153,.12); border-color: rgba(0,122,153,.40); color: #007a99; }
html[data-palette="crt"][data-theme="light"] .bilt-status-dot { background: #008844; box-shadow: 0 0 8px #008844; }
html[data-palette="crt"][data-theme="light"] .bilt-user-pill  { border-color: rgba(0,100,130,.22); color: rgba(0,40,55,.70); }


/* ══ DIAMOND + BUTTONS — LIGHT ══════════════════════════════════ */

html[data-palette="crt"][data-theme="light"] .diamond {
    background: #007a99;
    box-shadow: 0 0 4px rgba(0,122,153,.45);
}

html[data-palette="crt"][data-theme="light"] .btn-submit,
html[data-palette="crt"][data-theme="light"] .btn-primary,
html[data-palette="crt"][data-theme="light"] .btn-export,
html[data-palette="crt"][data-theme="light"] .btn-primary-link {
    border-color: rgba(0,122,153,.55);
    text-shadow: none;
}
html[data-palette="crt"][data-theme="light"] .btn-submit:hover,
html[data-palette="crt"][data-theme="light"] .btn-primary:hover,
html[data-palette="crt"][data-theme="light"] .btn-export:hover,
html[data-palette="crt"][data-theme="light"] .btn-primary-link:hover {
    border-color: #007a99;
}

html[data-palette="crt"][data-theme="light"] .btn-cancel,
html[data-palette="crt"][data-theme="light"] .btn-outline-link,
html[data-palette="crt"][data-theme="light"] .back-btn {
    border-color: rgba(0,100,130,.28);
    color: rgba(0,40,55,.60);
}
html[data-palette="crt"][data-theme="light"] .btn-cancel:hover,
html[data-palette="crt"][data-theme="light"] .btn-outline-link:hover,
html[data-palette="crt"][data-theme="light"] .back-btn:hover {
    border-color: rgba(0,122,153,.55);
    color: #007a99;
    box-shadow: none;
}