/* ============================================================
   TEST YOUR RIG — design system v2
   Cyberpunk/synthwave gamer aesthetic. Deep near-black backgrounds,
   hot cyan primary, magenta counter-accent, amber for warnings.
   Angular geometry, neon glows on interactive states, fast motion.

   ORGANIZATION:
     1. Design tokens + backward-compat aliases
     2. Global base (reset, body, headings, scrollbar, focus)
     3. Shared surfaces (panels, buttons, inputs, callouts)
     4. Effects (glow, scanline overlay, grid texture)
     5. Nav (top bar, dropdowns, mobile burger)
     6. Consent banner + auth modal (site-wide UI)
     7. Language + theme switchers
     8. Utilities
     9. Reduced-motion + RTL
   ============================================================ */

/* ═══════════════ 1. DESIGN TOKENS ═══════════════════════════ */
:root{
  /* --- surfaces -------------------------------------------- */
  --bg:            #030812;   /* deep near-black */
  --bg-2:          #07091260;
  --panel:         #071424;   /* base card surface */
  --panel-2:       #0a192b;   /* elevated card surface */
  --panel-3:       #10233c;   /* highlighted card / hover */
  --border:        #183554;
  --border-bright: #285277;
  --border-hot:    color-mix(in oklab, var(--neon-cyan) 45%, var(--border-bright));

  /* --- text --------------------------------------------- */
  --text:      #f3f7ff;
  --text-dim:  #c1ccdc;
  --muted:     #9aabc4;
  --muted-2:   #62789b;

  /* --- signature neons ---------------------------------- */
  --neon-cyan:    #00eff0;    /* primary interactive + branding */
  --neon-magenta: #ff4bb6;    /* counter-accent, hover states */
  --neon-amber:   #ffc636;    /* warnings, CTAs, run buttons */
  --neon-green:   #35f0a0;    /* success, saved state */
  --neon-violet:  #b36cff;
  --neon-red:     #ff4d6d;

  /* --- backward-compat aliases for pages not yet rebuilt -- */
  --accent:  var(--neon-cyan);
  --gpu:     var(--neon-cyan);
  --cpu:     var(--neon-amber);
  --green:   var(--neon-green);
  --amber:   var(--neon-amber);
  --red:     var(--neon-red);
  --violet:  var(--neon-violet);
  --raise:   var(--panel-3);

  /* --- glows -------------------------------------------- */
  --glow-cyan-sm: 0 0 12px rgba(0,239,240,.35);
  --glow-cyan:    0 0 24px rgba(0,239,240,.5), 0 0 6px rgba(0,239,240,.7);
  --glow-magenta: 0 0 24px rgba(255,75,182,.45), 0 0 6px rgba(255,75,182,.7);
  --glow-amber:   0 0 22px rgba(255,198,54,.4), 0 0 5px rgba(255,198,54,.6);

  /* --- type ---------------------------------------------- */
  --font-disp: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --mono: var(--font-mono);   /* alias */
  --disp: var(--font-disp);   /* alias */

  /* --- geometry (radius scale; --chamfer-* kept as legacy aliases) */
  --radius-sm:    7px;
  --radius-md:    11px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --chamfer:      var(--radius-md);
  --chamfer-sm:   var(--radius-sm);
  --chamfer-md:   var(--radius-md);
  --chamfer-lg:   var(--radius-lg);
  --chamfer-xl:   var(--radius-xl);

  /* --- motion -------------------------------------------- */
  --dur-fast: 90ms;
  --dur:      160ms;
  --dur-slow: 260ms;
  --ease:     cubic-bezier(.2,0,.1,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Rounded shape override — respects the existing shape toggle */
html[data-shape="rounded"]{
  /* shape toggle is permanently 'rounded'; values unified with :root scale */
  --chamfer:    var(--radius-md);
  --chamfer-sm: var(--radius-sm);
  --chamfer-md: var(--radius-md);
  --chamfer-lg: var(--radius-lg);
  --chamfer-xl: var(--radius-xl);
}

/* ═══════════════ 2. GLOBAL BASE ══════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box }
html{ background:var(--bg); color-scheme:dark }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-disp); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; overflow-x:hidden;
}
html[dir="rtl"] body{ font-family:'Cairo', var(--font-disp) }

/* Global grid texture — very subtle, evokes a HUD readout */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(11,33,48,.33) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,33,48,.33) 1px, transparent 1px),
    radial-gradient(circle at 75% 18%, rgba(0,72,92,.20), transparent 28%);
  background-size:66px 66px, 66px 66px, auto;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
}
body > *{ position:relative; z-index:1 }

h1,h2,h3,h4,h5,h6{ font-family:var(--font-disp); letter-spacing:-.015em; margin:0 }
a{ color:var(--neon-cyan); text-decoration:none }
a:hover{ text-shadow: var(--glow-cyan-sm) }

::selection{ background:var(--neon-cyan); color:#001a1a }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:#0a1020 }
::-webkit-scrollbar-thumb{ background:var(--border-bright); border-radius:2px }
::-webkit-scrollbar-thumb:hover{ background:var(--neon-cyan) }

*:focus-visible{
  outline:2px solid var(--neon-cyan);
  outline-offset:2px;
  box-shadow: var(--glow-cyan-sm);
}

/* ═══════════════ 3. SHARED SURFACES ══════════════════════════ */

/* Chamfered panel — the primary card surface */
.tyr-panel{
  background:var(--panel);
  border:1px solid var(--border);
  padding:22px 24px;
  position:relative;
}
html[data-shape="rounded"] .tyr-panel{
  border-radius:var(--chamfer-lg);
}

/* Panel with a hot glowing left edge — for featured content */
.tyr-panel.hot{
  border-inline-start:2px solid var(--neon-cyan);
  box-shadow: inset 8px 0 32px -12px color-mix(in oklab, var(--neon-cyan) 30%, transparent);
}

/* Angular button — primary interactive element */
.tyr-btn{
  --btn-color: var(--text);
  --btn-bg: transparent;
  --btn-border: var(--border-bright);
  --btn-glow: transparent;
  font-family:var(--font-mono); font-weight:600; font-size:12.5px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:11px 18px;
  background:var(--btn-bg); color:var(--btn-color);
  border:1px solid var(--btn-border);
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  position:relative; user-select:none;
}
html[data-shape="rounded"] .tyr-btn{ border-radius:8px }
.tyr-btn:hover{
  color:var(--text); border-color:var(--neon-cyan);
  box-shadow: var(--glow-cyan-sm);
  transform:translateY(-1px);
}
.tyr-btn:active{ transform:translateY(0) }
.tyr-btn:disabled{ opacity:.4; cursor:not-allowed; pointer-events:none }

/* Primary CTA button — filled neon, glowing */
.tyr-btn.primary{
  --btn-color: #001820;
  --btn-bg: var(--neon-cyan);
  --btn-border: transparent;
  box-shadow: var(--glow-cyan-sm);
}
.tyr-btn.primary:hover{
  --btn-bg: var(--neon-cyan);
  color: #001820; filter:brightness(1.1);
  box-shadow: var(--glow-cyan);
}
.tyr-btn.magenta{
  --btn-color: #1a0410;
  --btn-bg: var(--neon-magenta);
  --btn-border: transparent;
  box-shadow: 0 0 12px rgba(255,46,166,.35);
}
.tyr-btn.magenta:hover{ box-shadow: var(--glow-magenta); filter:brightness(1.1) }
.tyr-btn.amber{
  --btn-color: #1a1000;
  --btn-bg: var(--neon-amber);
  --btn-border: transparent;
  box-shadow: 0 0 12px rgba(255,183,40,.35);
}
.tyr-btn.amber:hover{ box-shadow: var(--glow-amber); filter:brightness(1.1) }

/* Ghost button — subtle, secondary */
.tyr-btn.ghost{ --btn-bg: transparent; --btn-border: var(--border) }
.tyr-btn.ghost:hover{ --btn-border: var(--neon-cyan) }

/* Input — dark, mono, with neon focus */
.tyr-input,
input[type="text"].tyr-input,
input[type="email"].tyr-input,
input[type="password"].tyr-input,
input[type="url"].tyr-input,
textarea.tyr-input{
  font-family:var(--font-mono); font-size:13px;
  padding:11px 14px; background:var(--panel-2); color:var(--text);
  border:1px solid var(--border);
  outline:none; width:100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-input{ border-radius:8px }
.tyr-input:focus{
  border-color:var(--neon-cyan);
  box-shadow: var(--glow-cyan-sm), inset 0 0 20px -8px rgba(0,255,240,.25);
}
.tyr-input::placeholder{ color:var(--muted-2) }

/* Eyebrow label — small mono uppercase tag before headlines */
.tyr-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  padding:6px 12px; background:var(--panel);
  border:1px solid var(--border);
}
html[data-shape="rounded"] .tyr-eyebrow{ border-radius:999px }
.tyr-eyebrow .dot{
  width:10px; height:10px; background:var(--neon-cyan); border-radius:0;
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  filter: drop-shadow(0 0 3px var(--neon-cyan));
  animation: tyr-pulse 2s ease-in-out infinite;
}
@keyframes tyr-pulse{
  0%,100%{ opacity:1;  filter: drop-shadow(0 0 3px var(--neon-cyan)) }
  50%   { opacity:.55; filter: drop-shadow(0 0 8px var(--neon-cyan)) }
}

/* ═══════════════ 4. EFFECTS ═════════════════════════════════ */

/* Scanline overlay — apply .tyr-scanlines to any element */
.tyr-scanlines{ position:relative }
.tyr-scanlines::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom, transparent 0, transparent 3px,
    rgba(0,255,240,.03) 3px, rgba(0,255,240,.03) 4px
  );
  mix-blend-mode: overlay;
}

/* Chromatic aberration on hover — subtle color-split effect */
.tyr-chroma{ transition: text-shadow var(--dur-fast) var(--ease) }
.tyr-chroma:hover{
  text-shadow: 1.5px 0 var(--neon-cyan), -1.5px 0 var(--neon-magenta);
}

/* Angular divider strip — decorative */
.tyr-divider{
  height:1px; background: linear-gradient(90deg, transparent, var(--border-bright), transparent);
  margin:24px 0;
}

/* ═══════════════ 5. NAV ══════════════════════════════════════ */
.tyr-nav{
  position:sticky; top:0; z-index:100;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px) saturate(1.5);
  border-bottom:1px solid var(--border);
}
.tyr-nav::before{
  content:""; position:absolute; inset:0 0 -1px 0; pointer-events:none;
  background: linear-gradient(90deg, transparent 15%, var(--neon-cyan) 50%, transparent 85%);
  opacity:.3; height:1px; top:auto;
}
html[dir="rtl"] .tyr-nav{ font-family:'Cairo', system-ui, sans-serif }

.tyr-nav-inner{
  max-width:1200px; margin-inline:auto;
  display:flex; align-items:center; gap:24px;
  padding:12px clamp(16px, 3vw, 28px);
}

.tyr-brand{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  text-decoration:none; flex-shrink:0;
}
.tyr-brand .tyr-logo{
  height:56px; width:auto; display:block;
  filter: drop-shadow(0 0 8px rgba(0,255,240,.22));
  transition: filter var(--dur) var(--ease);
}
.tyr-brand:hover .tyr-logo{ filter: drop-shadow(0 0 14px rgba(0,255,240,.45)) }
@media (max-width:560px){ .tyr-brand .tyr-logo{ height:44px } }

/* ─── Nav-consistency fix (v3.21.19) ─────────────────────────────
   Most pages set padding on <body> for content margin — that padding
   also insets the sticky nav so it doesn't reach the viewport edges.
   Result: the nav looks different on every page depending on that value.
   Neutralize body's horizontal + top padding (nav needs to be flush) and
   restore equivalent horizontal padding on the .wrap that holds the
   content. Bottom padding stays because it only affects page-end spacing.
   Pages that opt out via [data-no-nav] keep their original body padding. */
body:not([data-no-nav]) {
  padding-top: 0 !important;
  padding-inline: 0 !important;
}
body:not([data-no-nav]) .wrap {
  padding-inline: clamp(16px, 3vw, 32px);
}

.tyr-links{
  display:flex; align-items:center; gap:4px; margin-inline-start:auto;
  flex-wrap:nowrap;
}
.tyr-links > a,
.tyr-links > .tyr-dd > .tyr-ddbtn{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  color:var(--text-dim); text-decoration:none;
  padding:8px 14px;
  border:1px solid transparent; background:transparent; cursor:pointer;
  letter-spacing:.02em;
  /* Nav labels must never break mid-phrase. Without this, "Can I run it?"
     and "Host a server" wrapped onto two lines and shoved the whole bar out
     of alignment once the nav got crowded. (v3.21.67) */
  white-space:nowrap;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
  display:inline-flex; align-items:center; gap:6px; position:relative;
}
html[data-shape="rounded"] .tyr-links > a,
html[data-shape="rounded"] .tyr-links > .tyr-dd > .tyr-ddbtn{ border-radius:6px }
.tyr-links > a:hover,
.tyr-links > .tyr-dd > .tyr-ddbtn:hover{
  color:var(--text); background: color-mix(in oklab, var(--neon-cyan) 8%, transparent);
}
.tyr-links > a.active,
.tyr-links > .tyr-dd > .tyr-ddbtn.active{
  color:var(--neon-cyan); background: color-mix(in oklab, var(--neon-cyan) 14%, transparent);
  border-color: color-mix(in oklab, var(--neon-cyan) 40%, transparent);
  text-shadow: 0 0 8px rgba(0,255,240,.4);
}

/* Dropdown */
.tyr-dd{ position:relative }
.tyr-caret{ font-size:9px; opacity:.6; transition: transform var(--dur-fast) var(--ease) }
.tyr-dd:hover .tyr-caret,
.tyr-dd.open .tyr-caret{ transform: rotate(-180deg); opacity:1 }

.tyr-ddmenu{
  position:absolute; top:calc(100% + 6px); inset-inline-end:0; min-width:200px;
  background: var(--panel); border:1px solid var(--border-bright);
  padding:6px; display:none; flex-direction:column; gap:2px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(0,255,240,.1) inset;
  z-index:110;
}
html[data-shape="rounded"] .tyr-ddmenu{ border-radius:10px }
.tyr-dd:hover .tyr-ddmenu,
.tyr-dd.open .tyr-ddmenu{ display:flex }

.tyr-ddmenu a{
  font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim);
  padding:9px 12px; text-decoration:none;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-ddmenu a{ border-radius:6px }
html[dir="rtl"] .tyr-ddmenu a{ font-family:'Cairo', sans-serif }
.tyr-ddmenu a:hover{
  color:var(--neon-cyan);
  background: color-mix(in oklab, var(--neon-cyan) 12%, transparent);
}
.tyr-ddmenu a.active{
  color:var(--neon-cyan);
  background: color-mix(in oklab, var(--neon-cyan) 18%, transparent);
}

.tyr-ddlabel{
  font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2);
  padding:10px 12px 4px; user-select:none;
}
.tyr-ddlabel:not(:first-child){
  margin-top:4px; padding-top:10px;
  border-top:1px solid var(--border);
}

/* Burger menu (mobile) */
.tyr-burger{
  display:none; margin-inline-start:auto;
  background: transparent; border:1px solid var(--border-bright);
  color:var(--text); cursor:pointer;
  padding:8px 12px; font-family:var(--font-mono); font-size:16px; line-height:1;
}
html[data-shape="rounded"] .tyr-burger{ border-radius:6px }
.tyr-burger:hover{ border-color:var(--neon-cyan); box-shadow: var(--glow-cyan-sm) }

@media (max-width:900px){
  .tyr-burger{ display:inline-flex; align-items:center; justify-content:center }
  .tyr-links{
    position:absolute; top:100%; inset-inline:0;
    flex-direction:column; align-items:stretch;
    background: var(--panel); border-top:1px solid var(--border);
    padding:8px; gap:4px; display:none;
    margin-inline-start:0;
    max-height:80vh; overflow-y:auto;
  }
  .tyr-links.open{ display:flex }
  .tyr-links > a, .tyr-links > .tyr-dd > .tyr-ddbtn{ width:100%; justify-content:flex-start }
  .tyr-dd{ width:100% }
  .tyr-ddmenu{
    position:static; display:flex; margin:4px 8px;
    box-shadow:none; background: var(--panel-2);
  }
  html[data-shape="rounded"] .tyr-ddmenu{ border-radius:8px }
  .tyr-auth{ width:100% }
  .tyr-acct{ width:100% }
  .tyr-acctbtn{ width:100%; max-width:none; justify-content:flex-start }
  .tyr-acctbtn .nm{ max-width:none }
  .tyr-acctmenu{
    position:static; display:flex; margin:4px 8px;
    box-shadow:none; background: var(--panel-2);   }
}

/* Auth chip */
.tyr-auth{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px;
}
.tyr-authbtn{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase;
  color:var(--text); background: transparent;
  border:1px solid var(--neon-cyan);
  padding:7px 14px; cursor:pointer;
  box-shadow: var(--glow-cyan-sm);
  transition: all var(--dur-fast) var(--ease);
  text-decoration:none;
}
html[data-shape="rounded"] .tyr-authbtn{ border-radius:6px }
.tyr-authbtn:hover{
  background: var(--neon-cyan); color: #001820;
  box-shadow: var(--glow-cyan);
}
.tyr-userchip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; background: var(--panel-2);
  border:1px solid var(--border);
  cursor:pointer; color:var(--text-dim); font-size:12px;
}
html[data-shape="rounded"] .tyr-userchip{ border-radius:6px }
.tyr-userchip:hover{ border-color:var(--neon-cyan); color:var(--text) }
.tyr-avatar{
  width:22px; height:22px; border-radius:50%;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
  color:#001820; font-weight:700; font-size:11px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Signed-in account button + dropdown (matches .tyr-ddmenu pattern) */
.tyr-acct{ position:relative; display:inline-flex }
.tyr-acctbtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; max-width:190px;
  background: var(--panel-2); border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer;
  font-family:var(--font-mono); font-size:12px;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-acctbtn{ border-radius:6px }
.tyr-acctbtn:hover,
.tyr-acct.open .tyr-acctbtn{ border-color:var(--neon-cyan); color:var(--text) }
.tyr-acctbtn .av{
  flex:none; width:22px; height:22px; border-radius:50%;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
  color:#001820; font-weight:700; font-size:11px;
  display:inline-flex; align-items:center; justify-content:center;
}
.tyr-acctbtn .nm{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px;
}

.tyr-acctmenu{
  position:absolute; top:calc(100% + 6px); inset-inline-end:0; min-width:210px;
  background: var(--panel); border:1px solid var(--border-bright);
  padding:6px; display:none; flex-direction:column; gap:2px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(0,255,240,.1) inset;
  z-index:110;
}
html[data-shape="rounded"] .tyr-acctmenu{ border-radius:10px }
.tyr-acctmenu.open{ display:flex }
.tyr-acctmenu .who{
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
  padding:6px 12px 8px; margin-bottom:2px;
  border-bottom:1px solid var(--border);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tyr-acctmenu .mi{
  display:block; width:100%; text-align:start;
  font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim);
  padding:9px 12px; text-decoration:none;
  background:transparent; border:0; cursor:pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-acctmenu .mi{ border-radius:6px }
html[dir="rtl"] .tyr-acctmenu .mi,
html[dir="rtl"] .tyr-acctbtn{ font-family:'Cairo', sans-serif }
.tyr-acctmenu .mi:hover{
  color:var(--neon-cyan);
  background: color-mix(in oklab, var(--neon-cyan) 12%, transparent);
}
#tyrSignout.mi:hover{
  color:var(--neon-red);
  background: color-mix(in oklab, var(--neon-red) 12%, transparent);
}

/* Language + theme buttons */
.tyr-lang, .tyr-theme{
  font-family:var(--font-mono); font-size:11.5px;
  background:transparent; color:var(--muted);
  border:1px solid var(--border);
  padding:7px 12px; cursor:pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-lang,
html[data-shape="rounded"] .tyr-theme{ border-radius:6px }
.tyr-lang:hover, .tyr-theme:hover{ color:var(--neon-cyan); border-color:var(--neon-cyan) }
.tyr-theme{ padding:7px 10px }
.tyr-themewrap{ position:relative }
.tyr-thememenu{
  position:absolute; top:calc(100% + 6px); inset-inline-end:0; min-width:160px;
  background: var(--panel); border:1px solid var(--border-bright);
  padding:6px; display:none; flex-direction:column; gap:2px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  z-index:110;
}
html[data-shape="rounded"] .tyr-thememenu{ border-radius:10px }
.tyr-thememenu.open{ display:flex }
.tyr-thememenu button{
  font-family:var(--font-mono); font-size:12px;
  background:transparent; border:none; color:var(--text-dim);
  padding:8px 10px; text-align:start; cursor:pointer;
  display:flex; align-items:center; gap:8px;
}
.tyr-thememenu button:hover{ color:var(--neon-cyan); background: color-mix(in oklab, var(--neon-cyan) 12%, transparent) }
.tyr-thememenu button .swatch{
  width:12px; height:12px; border-radius:50%;
  border:1px solid var(--border-bright);
}

/* ═══════════════ 6. CONSENT + AUTH MODAL ════════════════════ */

.tyr-consent{
  position:fixed; bottom:16px; inset-inline:16px; z-index:150;
  background: var(--panel); border:1px solid var(--neon-cyan);
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(0,255,240,.15) inset, var(--glow-cyan-sm);
  padding:16px 20px;
  display:none; align-items:center; gap:14px; flex-wrap:wrap;
  max-width:820px; margin-inline:auto;
}
html[data-shape="rounded"] .tyr-consent{ border-radius:14px }
.tyr-consent.show{ display:flex }
.tyr-consent p{ margin:0; flex:1; min-width:240px; font-size:13px; color:var(--text-dim) }
.tyr-consent p a{ color:var(--neon-cyan); text-decoration:none; border-bottom:1px dashed color-mix(in oklab, var(--neon-cyan) 40%, transparent) }

/* Cookie consent banner (.tyr-cc — emitted by showConsent) */
.tyr-cc{
  position:fixed; bottom:16px; inset-inline:16px; z-index:150;
  max-width:820px; margin-inline:auto;
  background:var(--panel); border:1px solid var(--neon-cyan);
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(0,255,240,.15) inset, var(--glow-cyan-sm);
  padding:14px 18px;
}
html[data-shape="rounded"] .tyr-cc{ border-radius:14px }
.tyr-cc-in{ display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap }
.tyr-cc-in p{ margin:0; flex:1; min-width:240px; font-size:13px; line-height:1.5; color:var(--text-dim) }
.tyr-cc-btns{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.tyr-cc-link{
  font-family:var(--font-mono); font-size:12px; color:var(--neon-cyan); text-decoration:none;
  border-bottom:1px dashed color-mix(in oklab, var(--neon-cyan) 40%, transparent);
}
.tyr-cc-b{
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  padding:8px 14px; cursor:pointer;
  border:1px solid var(--border-bright); background:var(--panel-2); color:var(--text);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-cc-b{ border-radius:6px }
.tyr-cc-b.ghost:hover{ border-color:var(--neon-cyan); color:var(--neon-cyan) }
.tyr-cc-b.ok{ background:var(--neon-cyan); border-color:transparent; color:#001820 }
.tyr-cc-b.ok:hover{ box-shadow: var(--glow-cyan-sm); filter:brightness(1.05) }
html[dir="rtl"] .tyr-cc-b, html[dir="rtl"] .tyr-cc-link{ font-family:'Cairo', sans-serif }

/* PWA install prompt (.tyr-install — emitted by buildInstallPrompt).
   Sits above the legal bar. Fades in and gently slides up on show. */
.tyr-install{
  margin-top:64px; margin-inline:auto; max-width:1200px;
  padding:14px 20px;
  display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap;
  background: linear-gradient(180deg, color-mix(in oklab, var(--neon-cyan) 8%, transparent) 0%, transparent 100%);
  border:1px solid color-mix(in oklab, var(--neon-cyan) 35%, var(--border));
  border-inline-start-width:3px;
  border-radius:12px;
  opacity:0; transform:translateY(6px);
  animation: tyr-install-in .35s ease .1s forwards;
}
@keyframes tyr-install-in { to { opacity:1; transform:none } }
.tyr-install.hidden{ display:none }
.tyr-install .ic{
  width:38px; height:38px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px;
  background: color-mix(in oklab, var(--neon-cyan) 14%, transparent);
  color: var(--neon-cyan);
}
.tyr-install .ic svg{ width:20px; height:20px }
.tyr-install .body{ flex:1; min-width:220px }
.tyr-install .body h5{
  margin:0; font-size:14px; font-weight:600; color:var(--text);
  font-family:var(--font-disp, inherit); letter-spacing:.01em;
}
.tyr-install .body p{
  margin:2px 0 0; font-size:12.5px; color:var(--muted); line-height:1.45;
  font-family:var(--font-mono);
}
.tyr-install .actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.tyr-install button{
  font-family:var(--font-disp, inherit); font-size:13px; font-weight:600;
  padding:8px 14px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; transition:filter .15s ease, background .15s;
}
.tyr-install .install-btn{
  background: var(--neon-cyan); color:#062;
  border-color: var(--neon-cyan);
}
.tyr-install .install-btn:hover{ filter: brightness(1.08) }
.tyr-install .dismiss-btn{
  background: transparent; color:var(--muted);
  border-color: var(--border);
}
.tyr-install .dismiss-btn:hover{ color: var(--text); border-color: var(--muted) }

/* iOS instructions modal — used when beforeinstallprompt isn't available. */
.tyr-ios-modal{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background: rgba(4,6,10,.72); backdrop-filter: blur(4px);
  opacity:0; animation: tyr-install-in .2s ease forwards;
}
.tyr-ios-modal .card{
  max-width:420px; width:100%;
  background: var(--panel, var(--bg2, #0e131a));
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px 22px 18px;
  color: var(--text);
}
.tyr-ios-modal h4{
  margin:0 0 8px; font-size:16px; font-weight:600;
  font-family:var(--font-disp, inherit);
}
.tyr-ios-modal p{
  margin:0 0 14px; font-size:13.5px; line-height:1.5; color:var(--muted);
  font-family:var(--font-mono);
}
.tyr-ios-modal ol{ margin:0 0 16px; padding-inline-start:20px; font-size:13.5px; line-height:1.7; color:var(--text) }
.tyr-ios-modal ol li b{ color: var(--neon-cyan); font-weight:600 }
.tyr-ios-modal .close{
  width:100%; padding:10px; border-radius:8px; cursor:pointer;
  background: var(--neon-cyan); color:#062; border:none;
  font-family:var(--font-disp, inherit); font-weight:600; font-size:13px;
}

/* Site footer (.tyr-legal — emitted by buildLegal) */
.tyr-legal{ margin-top:64px; border-top:1px solid var(--border); padding:22px 24px }
.tyr-legal-in{
  max-width:1200px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:14px 20px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12px; color:var(--muted);
}
.tyr-legal-in nav{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.tyr-legal-in nav a, .tyr-legal-link{
  font-family:var(--font-mono); font-size:12px; color:var(--text-dim);
  background:none; border:0; padding:0; cursor:pointer; text-decoration:none;
  transition: color var(--dur-fast) var(--ease);
}
.tyr-legal-in nav a:hover, .tyr-legal-link:hover{ color:var(--neon-cyan) }
html[dir="rtl"] .tyr-legal-in{ font-family:'Cairo', sans-serif }

.tyr-modalbg{
  position:fixed; inset:0; background: rgba(4,7,13,.85);
  backdrop-filter: blur(6px);
  display:none; align-items:center; justify-content:center;
  padding:20px; z-index:200;
}
.tyr-modalbg.show{ display:flex }
.tyr-modal{
  background: var(--panel); border:1px solid var(--border-bright);
  padding:24px 26px; max-width:440px; width:100%;
  position:relative;
  box-shadow: 0 30px 100px rgba(0,0,0,.8), 0 0 0 1px rgba(0,255,240,.1) inset;
}
html[data-shape="rounded"] .tyr-modal{ border-radius:14px }
.tyr-modal .tabs{
  display:flex; gap:6px; margin-bottom:18px;
  border-bottom:1px solid var(--border); padding-bottom:12px;
}
.tyr-modal .tb{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  background:transparent; border:1px solid var(--border);
  color:var(--muted); padding:8px 14px; cursor:pointer;
  transition: all var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-modal .tb{ border-radius:6px }
.tyr-modal .tb.on{
  color:var(--neon-cyan); border-color:var(--neon-cyan);
  background: color-mix(in oklab, var(--neon-cyan) 12%, transparent);
  box-shadow: var(--glow-cyan-sm);
}
.tyr-modal .fields{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px }
.tyr-modal input{
  font-family:var(--font-mono); font-size:13px;
  padding:11px 14px; background:var(--panel-2); color:var(--text);
  border:1px solid var(--border); outline:none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-modal input{ border-radius:8px }
.tyr-modal input:focus{ border-color:var(--neon-cyan); box-shadow: var(--glow-cyan-sm) }
.tyr-modal .forgot{
  background:transparent; border:none; color:var(--neon-cyan);
  font-family:var(--font-mono); font-size:11.5px; cursor:pointer; padding:0;
  text-decoration:none;
}
.tyr-modal .forgot:hover{ text-shadow: var(--glow-cyan-sm) }

/* Auth + forgot-password modal (.tyr-authmodal — emitted by openAuth/openForgot) */
.tyr-authmodal{
  position:fixed; inset:0; background:rgba(4,7,13,.85);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:9500;
}
.tyr-authmodal .card{
  background:var(--panel); border:1px solid var(--border-bright);
  padding:24px 26px; max-width:440px; width:100%; position:relative;
  box-shadow:0 30px 100px rgba(0,0,0,.8), 0 0 0 1px rgba(0,255,240,.1) inset;
}
html[data-shape="rounded"] .tyr-authmodal .card{ border-radius:14px }
.tyr-authmodal .x{
  position:absolute; top:12px; inset-inline-end:12px;
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border); color:var(--muted);
  font-size:18px; line-height:1; cursor:pointer;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-authmodal .x{ border-radius:6px }
html[dir="rtl"] .tyr-authmodal .x{ inset-inline-end:auto; inset-inline-start:12px }
.tyr-authmodal .x:hover{ color:var(--neon-cyan); border-color:var(--neon-cyan) }
.tyr-authmodal .tabs{ display:flex; gap:6px; margin:2px 0 18px; border-bottom:1px solid var(--border); padding-bottom:12px }
.tyr-authmodal .tb{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  background:transparent; border:1px solid var(--border); color:var(--muted);
  padding:8px 14px; cursor:pointer;
  transition:all var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-authmodal .tb{ border-radius:6px }
.tyr-authmodal .tb.on{ color:var(--neon-cyan); border-color:var(--neon-cyan); background:color-mix(in oklab,var(--neon-cyan) 12%,transparent); box-shadow:var(--glow-cyan-sm) }
.tyr-authmodal .atitle{ font-family:var(--font-disp); font-size:18px; font-weight:700; margin:2px 30px 6px 0; color:var(--text) }
html[dir="rtl"] .tyr-authmodal .atitle{ margin:2px 0 6px 30px }
.tyr-authmodal .asub{ font-family:var(--font-mono); font-size:12px; color:var(--muted); line-height:1.5; margin:0 0 16px }
.tyr-authmodal .fields{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px }
.tyr-authmodal input{
  font-family:var(--font-mono); font-size:13px; padding:11px 14px; width:100%;
  background:var(--panel-2); color:var(--text); border:1px solid var(--border); outline:none;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-authmodal input{ border-radius:8px }
.tyr-authmodal input:focus{ border-color:var(--neon-cyan); box-shadow:var(--glow-cyan-sm) }
.tyr-authmodal .forgot{ background:transparent; border:none; color:var(--neon-cyan); font-family:var(--font-mono); font-size:11.5px; cursor:pointer; padding:0; align-self:flex-start; text-align:start }
.tyr-authmodal .forgot:hover{ text-shadow:var(--glow-cyan-sm) }
.tyr-authmodal .err{ font-family:var(--font-mono); font-size:11.5px; color:var(--neon-red); min-height:14px; margin-bottom:10px; line-height:1.5 }
.tyr-authmodal .err.ok{ color:var(--neon-green) }
.tyr-authmodal .sub{
  width:100%; font-family:var(--font-disp); font-weight:700; font-size:14px;
  color:#04121a; background:var(--neon-cyan); border:none; padding:12px 16px; cursor:pointer;
  box-shadow:var(--glow-cyan-sm); transition:box-shadow var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-authmodal .sub{ border-radius:9px }
.tyr-authmodal .sub:hover{ box-shadow:var(--glow-cyan); filter:brightness(1.04) }
.tyr-authmodal .sub:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; filter:none }

/* Site announcement banner (.tyr-ann — emitted by loadAnnouncement) */
.tyr-ann{
  position:relative; z-index:120;
  background:color-mix(in oklab, var(--neon-amber) 12%, var(--panel));
  border-bottom:1px solid color-mix(in oklab, var(--neon-amber) 40%, var(--border));
}
.tyr-ann-inner{
  max-width:1200px; margin-inline:auto; padding:10px 24px;
  display:flex; align-items:center; gap:14px;
}
.tyr-ann-body{ flex:1; font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); line-height:1.5 }
.tyr-ann-body strong{ color:var(--neon-amber); font-weight:700; margin-inline-end:8px }
html[dir="rtl"] .tyr-ann-body strong{ margin-inline-end:0; margin-inline-start:8px }
.tyr-ann-x{
  flex:none; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border-bright); color:var(--muted);
  font-size:16px; line-height:1; cursor:pointer;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-ann-x{ border-radius:6px }
.tyr-ann-x:hover{ color:var(--neon-amber); border-color:var(--neon-amber) }

/* Maintenance banner — outranks announcements. Warning-red palette,
   warning glyph, session-dismissable. Visually distinct from the
   amber announcement bar so users read it as a warning, not news. */
.tyr-maint{
  position:relative; z-index:121;
  background:color-mix(in oklab, var(--neon-red) 14%, var(--panel));
  border-bottom:1px solid color-mix(in oklab, var(--neon-red) 45%, var(--border));
}
.tyr-maint-inner{
  max-width:1200px; margin-inline:auto; padding:10px 24px;
  display:flex; align-items:center; gap:12px;
}
.tyr-maint-ic{
  flex:none; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--neon-red); font-size:14px; line-height:1;
}
.tyr-maint-body{ flex:1; font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); line-height:1.5 }
.tyr-maint-body strong{ color:var(--neon-red); font-weight:700; margin-inline-end:8px }
html[dir="rtl"] .tyr-maint-body strong{ margin-inline-end:0; margin-inline-start:8px }
.tyr-maint-x{
  flex:none; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border-bright); color:var(--muted);
  font-size:16px; line-height:1; cursor:pointer; border-radius:6px;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tyr-maint-x:hover{ color:var(--neon-red); border-color:var(--neon-red) }
.tyr-modal .err{
  color:var(--neon-red); font-family:var(--font-mono); font-size:11.5px;
  margin:8px 0; min-height:1.4em;
}
.tyr-modal .submit{
  width:100%; font-family:var(--font-mono); font-weight:700; font-size:13px;
  letter-spacing:.03em; text-transform:uppercase;
  color:#001820; background:var(--neon-cyan);
  border:none; padding:13px; cursor:pointer;
  box-shadow: var(--glow-cyan-sm);
  transition: filter var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
html[data-shape="rounded"] .tyr-modal .submit{ border-radius:8px }
.tyr-modal .submit:hover{ filter:brightness(1.1); box-shadow: var(--glow-cyan) }
.tyr-modal .submit:disabled{ opacity:.5; cursor:not-allowed }
.tyr-modal .close{
  position:absolute; top:12px; right:12px;
  background:transparent; border:none; color:var(--muted);
  font-size:20px; cursor:pointer; padding:6px 10px;
}
.tyr-modal .close:hover{ color:var(--text) }

/* ═══════════════ 9. REDUCED MOTION + RTL ════════════════════ */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .tyr-eyebrow .dot{ animation:none }
  body::before{ display:none }
}

/* Utility: visually hidden but screen-reader accessible */
.tyr-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;
}