:root{
    --void:#04070d;
    --panel:rgba(10,18,32,0.72);
    --panel-edge:rgba(56,240,255,0.16);
    --cyan:#38f0ff;
    --cyan-dim:rgba(56,240,255,0.55);
    --violet:#a06bff;
    --magenta:#ff3d8b;
    --amber:#ffc24b;
    --lime:#5dffa8;
    --text:#d6e6f2;
    --text-dim:#6f8299;
    --mono:'JetBrains Mono', monospace;
  }
  html.light{
    --void:#eef3f8;
    --panel:rgba(255,255,255,0.78);
    --panel-edge:rgba(8,120,150,0.22);
    --cyan:#087a96;
    --cyan-dim:rgba(8,122,150,0.55);
    --violet:#6d3fd6;
    --magenta:#c81e6b;
    --amber:#a3620a;
    --lime:#15803d;
    --text:#17222e;
    --text-dim:#5a6b7d;
  }
  /* light mode: kill neon glows, soften atmosphere, keep the cyberpunk bones */
  html.light .brand h1{ color:#0d1520; text-shadow:0 1px 0 rgba(255,255,255,.8); }
  html.light .stat .n, html.light .op-name{ text-shadow:none; }
  html.light .op-name{ color:#0d1520; }
  html.light .stats-big .v{ text-shadow:none; }
  html.light .glow-orb{ opacity:.10; }
  html.light .grid-bg{
    background-image:
      linear-gradient(rgba(8,122,150,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(8,122,150,0.07) 1px, transparent 1px);
  }
  html.light .scanline{ display:none; }
  html.light .prompt, html.light .home-title, html.light h2{ text-shadow:none; }
  html.light .xp-fill, html.light .ladder-step.done .dot, html.light .ladder-step.current .dot{ box-shadow:none; }
  /* category tab bar: hard-coded navy strip → clean white bar with legible labels */
  html.light .mode-tabs{ background:rgba(255,255,255,.7); }
  html.light .mode-tabs button{ color:#41525f; }
  html.light .mode-tabs button:hover:not(.active){ color:#17222e; background:rgba(8,122,150,.08); }
  html.light .mode-tabs button.active{ color:#ffffff; background:var(--cyan); }
  /* other hard-coded dark surfaces */
  html.light .landing-chips span{ background:rgba(255,255,255,.6); color:#41525f; }
  html.light .stats-big{ background:rgba(255,255,255,.6); }
  html.light .mc-ar{ color:#5a6b7d; }
  html.light .mode-card h2{ color:#0d1520; text-shadow:none; }

  /* theme toggle button */
  .theme-btn{
    width:40px;height:40px;flex:none;cursor:pointer;background:var(--panel);
    border:1px solid var(--panel-edge);border-radius:10px;color:var(--cyan);
    font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;
    transition:transform .15s ease, border-color .15s ease;backdrop-filter:blur(12px);
  }
  .theme-btn:hover{ transform:scale(1.08); border-color:var(--cyan-dim); }
  .theme-btn:active{ transform:scale(.94); }

  .pass-wrap{ position:relative; }
  .pass-wrap input{ width:100%; padding-right:44px; }
  .pass-eye{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; font-size:16px; line-height:1;
    color:var(--text-dim); padding:6px; opacity:.75;
  }
  .pass-eye:hover{ opacity:1; color:var(--cyan); }
  .pass-eye.on{ color:var(--cyan); opacity:1; }
  .forgot-link{
    display:inline-block; margin-top:6px; font-family:var(--mono); font-size:10.5px;
    letter-spacing:1px; color:var(--text-dim); cursor:pointer; text-decoration:none;
  }
  .forgot-link:hover{ color:var(--cyan); }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--void);
    color:var(--text);
    font-family:'Space Grotesk', sans-serif;
    min-height:100vh;
    padding:28px 16px 90px;
    overflow-x:hidden;
    position:relative;
  }

  /* ==== animated grid backdrop ==== */
  .grid-bg{
    position:fixed; inset:0; z-index:-3; pointer-events:none;
    background-image:
      linear-gradient(rgba(56,240,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(56,240,255,0.05) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, black 30%, transparent 100%);
    animation:gridDrift 24s linear infinite;
  }
  @keyframes gridDrift{ from{background-position:0 0;} to{background-position:0 48px;} }

  .glow-orb{
    position:fixed; z-index:-2; pointer-events:none; border-radius:50%;
    filter:blur(90px); opacity:0.28;
  }
  .orb-1{width:520px;height:520px; background:radial-gradient(circle, var(--cyan), transparent 65%); top:-180px; left:-120px; animation:orbFloat 16s ease-in-out infinite alternate;}
  .orb-2{width:460px;height:460px; background:radial-gradient(circle, var(--violet), transparent 65%); bottom:-160px; right:-100px; animation:orbFloat 20s ease-in-out infinite alternate-reverse;}
  @keyframes orbFloat{ from{transform:translate(0,0) scale(1);} to{transform:translate(60px,40px) scale(1.12);} }

  /* scanline sweep */
  .scanline{
    position:fixed; left:0; right:0; height:2px; z-index:-1; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(56,240,255,0.35), transparent);
    animation:scanSweep 7s linear infinite;
  }
  @keyframes scanSweep{ from{top:-2%;} to{top:102%;} }

  .wrap{max-width:880px; margin:0 auto; position:relative;}

  /* ==== header ==== */
  header{
    display:flex; align-items:flex-end; justify-content:space-between;
    flex-wrap:wrap; gap:16px; margin-bottom:26px;
    animation:dropIn .7s cubic-bezier(.2,.9,.3,1.2) both;
  }
  @keyframes dropIn{ from{opacity:0; transform:translateY(-18px);} to{opacity:1; transform:none;} }

  .brand{display:flex; align-items:center; gap:14px;}
  .mark{
    width:48px;height:48px; flex:none; position:relative;
    display:flex; align-items:center; justify-content:center;
    font-family:'Noto Kufi Arabic',sans-serif; font-weight:700; font-size:20px; color:var(--cyan);
  }
  .mark::before, .mark::after{
    content:""; position:absolute; inset:0; border:1.5px solid var(--cyan);
    clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  }
  .mark::after{
    border-color:var(--violet); opacity:.6;
    animation:hexSpin 6s linear infinite;
  }
  @keyframes hexSpin{ from{transform:rotate(0) scale(1.18);} to{transform:rotate(360deg) scale(1.18);} }

  .brand h1{
    font-family:'Orbitron', sans-serif; font-weight:900; font-size:26px; margin:0;
    letter-spacing:4px; color:#fff;
    text-shadow:0 0 18px rgba(56,240,255,0.5);
  }
  .brand h1 span{color:var(--cyan);}
  .tagline{
    font-family:var(--mono); font-size:10.5px; color:var(--text-dim);
    letter-spacing:1.5px; text-transform:uppercase; margin-top:4px;
  }
  .tagline::before{content:"▸ "; color:var(--cyan);}

  .stats{display:flex; gap:14px;}
  .stat{
    background:var(--panel); border:1px solid var(--panel-edge);
    border-radius:10px; padding:8px 16px; text-align:center; min-width:76px;
    backdrop-filter:blur(12px); position:relative; overflow:hidden;
  }
  .stat::before{
    content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  }
  .stat .n{
    font-family:'Orbitron',sans-serif; font-size:22px; font-weight:700; color:var(--cyan);
    line-height:1.1; text-shadow:0 0 12px rgba(56,240,255,0.6);
    transition:transform .25s;
  }
  .stat .n.pulse{animation:numPulse .5s ease;}
  @keyframes numPulse{ 40%{transform:scale(1.35); color:#fff;} }
  .stat .l{font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin-top:2px;}

  /* ==== controls ==== */
  .controls{
    display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;
    animation:dropIn .7s .12s cubic-bezier(.2,.9,.3,1.2) both;
  }
  .seg{
    display:flex; background:var(--panel); backdrop-filter:blur(12px);
    border:1px solid var(--panel-edge); border-radius:10px; overflow:hidden;
  }
  .seg button{
    background:none; border:none; color:var(--text-dim);
    font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.8px;
    padding:10px 13px; cursor:pointer; text-transform:uppercase;
    border-right:1px solid rgba(56,240,255,0.08);
    transition:all .2s; position:relative;
  }
  .seg button:last-child{border-right:none;}
  .seg button.active{
    background:linear-gradient(180deg, rgba(56,240,255,0.22), rgba(56,240,255,0.08));
    color:var(--cyan); text-shadow:0 0 10px rgba(56,240,255,0.8);
    box-shadow:inset 0 0 14px rgba(56,240,255,0.12);
  }
  .seg button:hover:not(.active){color:var(--text); background:rgba(56,240,255,0.05);}

  .timer-toggle{
    background:var(--panel); backdrop-filter:blur(12px);
    border:1px solid var(--panel-edge); border-radius:10px;
    color:var(--text-dim); font-family:var(--mono); font-size:11px; font-weight:600;
    letter-spacing:0.8px; padding:10px 16px; cursor:pointer; text-transform:uppercase;
    transition:all .25s;
  }
  .timer-toggle.on{
    border-color:var(--magenta); color:var(--magenta);
    text-shadow:0 0 10px rgba(255,61,139,0.8);
    box-shadow:0 0 18px rgba(255,61,139,0.25), inset 0 0 14px rgba(255,61,139,0.1);
    animation:togglePulse 2s ease-in-out infinite;
  }
  @keyframes togglePulse{ 50%{box-shadow:0 0 26px rgba(255,61,139,0.4), inset 0 0 14px rgba(255,61,139,0.15);} }
  .timer-toggle:hover{color:var(--text);}
  .timer-toggle.on:hover{color:var(--magenta);}

  /* ==== main console panel ==== */
  .console{
    background:var(--panel); backdrop-filter:blur(18px);
    border:1px solid var(--panel-edge); border-radius:16px;
    padding:34px 36px 30px; position:relative; overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(56,240,255,0.06);
    animation:dropIn .7s .22s cubic-bezier(.2,.9,.3,1.2) both;
  }
  .console::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent 5%, var(--cyan) 40%, var(--violet) 60%, transparent 95%);
    animation:edgeFlow 4s linear infinite;
    background-size:200% 100%;
  }
  @keyframes edgeFlow{ from{background-position:200% 0;} to{background-position:-200% 0;} }

  /* corner brackets */
  .console .corner{position:absolute; width:16px; height:16px; border:2px solid var(--cyan-dim); pointer-events:none;}
  .corner.tl{top:10px; left:10px; border-right:none; border-bottom:none;}
  .corner.tr{top:10px; right:10px; border-left:none; border-bottom:none;}
  .corner.bl{bottom:10px; left:10px; border-right:none; border-top:none;}
  .corner.br{bottom:10px; right:10px; border-left:none; border-top:none;}

  .console-head{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:16px; flex-wrap:wrap; gap:10px;
  }
  .eyebrow{
    font-family:var(--mono); font-size:11px; letter-spacing:2.5px;
    text-transform:uppercase; color:var(--cyan);
    display:flex; align-items:center; gap:8px;
  }
  .eyebrow .blink{
    width:8px; height:8px; background:var(--cyan); border-radius:2px;
    animation:blink 1.4s steps(2) infinite;
    box-shadow:0 0 8px var(--cyan);
  }
  @keyframes blink{ 50%{opacity:0.15;} }
  #levelTag{color:var(--amber); text-shadow:0 0 10px rgba(255,194,75,0.6);}

  .seal{
    font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700; letter-spacing:3px;
    color:var(--violet); border:1px solid var(--violet); border-radius:6px;
    padding:5px 12px; text-transform:uppercase;
    box-shadow:0 0 14px rgba(160,107,255,0.25), inset 0 0 10px rgba(160,107,255,0.08);
  }

  /* countdown */
  .countdown-wrap{display:none; align-items:center; gap:12px; margin-bottom:18px;}
  .countdown-wrap.show{display:flex; animation:fadeSlide .4s ease both;}
  .countdown-track{
    flex:1; height:8px; background:rgba(255,255,255,0.05); border-radius:6px; overflow:hidden;
    border:1px solid rgba(255,61,139,0.25);
  }
  .countdown-fill{
    height:100%; width:100%;
    background:linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta));
    transition:width 1s linear;
    box-shadow:0 0 12px rgba(255,61,139,0.6);
  }
  .countdown-num{
    font-family:'Orbitron',sans-serif; font-weight:700; font-size:18px; color:var(--magenta);
    min-width:44px; text-align:right; text-shadow:0 0 12px rgba(255,61,139,0.7);
  }
  .countdown-num.urgent{animation:urgentFlash .5s steps(2) infinite;}
  @keyframes urgentFlash{ 50%{color:#fff;} }

  /* prompt */
  .prompt{
    font-size:23px; line-height:1.6; font-weight:500; color:#fff;
    margin:4px 0 24px; min-height:60px;
    animation:typeIn .5s ease both;
  }
  @keyframes typeIn{ from{opacity:0; transform:translateX(-12px); filter:blur(4px);} to{opacity:1; transform:none; filter:none;} }
  .prompt.ar{
    font-family:'Noto Kufi Arabic', sans-serif; direction:rtl; text-align:right; font-size:25px;
  }

  textarea{
    width:100%; min-height:96px; resize:vertical;
    font-family:'Space Grotesk',sans-serif; font-size:16px; line-height:1.55;
    padding:15px 17px; border-radius:10px; outline:none;
    background:rgba(4,10,20,0.75); color:var(--text);
    border:1px solid rgba(56,240,255,0.2);
    transition:border-color .25s, box-shadow .25s;
    caret-color:var(--cyan);
  }
  textarea.ar-input{font-family:'Noto Kufi Arabic',sans-serif; direction:rtl; text-align:right; font-size:17px;}
  textarea:focus{
    border-color:var(--cyan);
    box-shadow:0 0 0 1px var(--cyan), 0 0 24px rgba(56,240,255,0.2);
  }
  textarea::placeholder{color:var(--text-dim); opacity:.7;}
  textarea:disabled{opacity:.55;}

  /* ==== voice mode ==== */
  .voice-row{
    display:flex; align-items:center; gap:16px; margin-top:16px;
    background:rgba(4,10,20,0.6); border:1px solid rgba(56,240,255,0.14);
    border-radius:12px; padding:14px 16px;
  }
  .mic-btn{
    width:58px; height:58px; flex:none; border-radius:50%;
    border:2px solid var(--cyan); background:rgba(56,240,255,0.08);
    cursor:pointer; font-size:24px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    color:var(--cyan); transition:all .25s; position:relative;
  }
  .mic-btn:hover{background:rgba(56,240,255,0.18); box-shadow:0 0 22px rgba(56,240,255,0.4);}
  .mic-btn.listening{
    border-color:var(--magenta); color:var(--magenta);
    background:rgba(255,61,139,0.1);
    animation:micPulse 1.4s ease-in-out infinite;
  }
  @keyframes micPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(255,61,139,0.5);}
    50%{box-shadow:0 0 0 14px rgba(255,61,139,0);}
  }
  .mic-btn:disabled{opacity:.4; cursor:not-allowed; animation:none;}
  .voice-status{min-width:0;}
  .vs-line{font-family:var(--mono); font-size:12px; letter-spacing:1px; color:var(--text); text-transform:uppercase;}
  .vs-line.rec{color:var(--magenta); text-shadow:0 0 10px rgba(255,61,139,0.6);}
  .vs-sub{font-size:12.5px; color:var(--text-dim); margin-top:4px; line-height:1.4;}

  /* consecutive: hidden-sentence audio state */
  .prompt.audio-hidden{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; min-height:90px; text-align:center;
    font-family:var(--mono); font-size:14px; letter-spacing:2px; text-transform:uppercase;
    color:var(--cyan);
  }
  .audio-wave{display:flex; gap:5px; align-items:flex-end; height:34px;}
  .audio-wave span{
    width:5px; background:var(--cyan); border-radius:3px;
    animation:waveBounce 1s ease-in-out infinite;
    box-shadow:0 0 8px rgba(56,240,255,0.6);
  }
  .audio-wave span:nth-child(1){animation-delay:0s;}
  .audio-wave span:nth-child(2){animation-delay:.15s;}
  .audio-wave span:nth-child(3){animation-delay:.3s;}
  .audio-wave span:nth-child(4){animation-delay:.45s;}
  .audio-wave span:nth-child(5){animation-delay:.6s;}
  .audio-wave span:nth-child(6){animation-delay:.75s;}
  .audio-wave.idle span{animation:none; height:8px !important; opacity:.35;}
  @keyframes waveBounce{ 0%,100%{height:8px;} 50%{height:32px;} }
  .replay-btn{
    background:none; border:1px solid var(--panel-edge); border-radius:8px;
    color:var(--text-dim); font-family:var(--mono); font-size:10.5px; letter-spacing:1.5px;
    text-transform:uppercase; padding:7px 14px; cursor:pointer; transition:all .2s;
  }
  .replay-btn:hover{color:var(--cyan); border-color:var(--cyan);}
  .replay-btn:disabled{opacity:.35; cursor:not-allowed;}
  .voice-pickers{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    background:var(--panel); backdrop-filter:blur(12px);
    border:1px solid var(--panel-edge); border-radius:10px; padding:6px 12px;
  }
  .voice-pickers label{
    font-family:var(--mono); font-size:10.5px; letter-spacing:1px; color:var(--text-dim);
    text-transform:uppercase; display:flex; align-items:center; gap:6px;
  }
  .voice-pickers select{
    background:rgba(4,10,20,0.85); color:var(--text);
    border:1px solid rgba(56,240,255,0.2); border-radius:7px;
    font-family:var(--mono); font-size:11px; padding:6px 8px; outline:none;
    max-width:190px; cursor:pointer;
  }
  .voice-pickers select:focus{border-color:var(--cyan);}

  .actions{display:flex; gap:12px; margin-top:18px; align-items:center; flex-wrap:wrap;}
  button.primary{
    font-family:'Orbitron',sans-serif; font-weight:700; font-size:12px; letter-spacing:2px;
    text-transform:uppercase; color:var(--void);
    background:linear-gradient(135deg, var(--cyan), #7ef5ff);
    border:none; padding:13px 26px; border-radius:8px; cursor:pointer;
    position:relative; overflow:hidden;
    box-shadow:0 0 20px rgba(56,240,255,0.4);
    transition:transform .15s, box-shadow .25s;
  }
  button.primary:hover{transform:translateY(-2px); box-shadow:0 0 32px rgba(56,240,255,0.65);}
  button.primary:active{transform:translateY(0);}
  button.primary::after{
    content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
    animation:sheen 3.2s ease-in-out infinite;
  }
  @keyframes sheen{ 0%,60%{left:-80%;} 100%{left:130%;} }
  button.ghost{
    background:transparent; border:1px solid rgba(56,240,255,0.3); color:var(--text-dim);
    font-family:var(--mono); font-weight:600; font-size:11.5px; letter-spacing:1.2px;
    text-transform:uppercase; padding:12px 20px; border-radius:8px; cursor:pointer;
    transition:all .2s;
  }
  button.ghost:hover{color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 14px rgba(56,240,255,0.2);}
  button:disabled{opacity:.35; cursor:not-allowed;}

  /* ==== founder ==== */
  .founder-card{position:relative; text-align:center; border:1px solid transparent; background:
    linear-gradient(var(--panel, #0f1523), var(--panel, #0f1523)) padding-box,
    linear-gradient(120deg, #ff2e92, #00f5d4, #ffb454) border-box;
    overflow:hidden;}
  .founder-card::after{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at top, rgba(255,46,146,.08), transparent 60%); pointer-events:none;}
  .fc-mark{font-size:26px; color:var(--cyan, #00f5d4); text-shadow:0 0 18px rgba(0,245,212,.5); margin-bottom:6px;}
  .fc-title{font-size:11px; letter-spacing:4px; color:#ff2e92; font-weight:800; text-shadow:0 0 10px rgba(255,46,146,.5);}
  .fc-name{font-size:22px; font-weight:800; letter-spacing:3px; margin:6px 0 4px;}
  .fc-sub{font-size:12px; color:var(--text-dim); letter-spacing:.5px; line-height:1.7;}
  .rank-badge.founder{border-color:#ff2e92; color:#ff2e92; text-shadow:0 0 8px rgba(255,46,146,.4);}
  /* ==== layout redesign ==== */
  .quick-strip{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08);}
  .qs-cell{flex:1; min-width:110px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.09); border-radius:8px; padding:10px 12px; text-align:center;}
  .qs-cell .v{font-size:20px; font-weight:700; color:var(--cyan, #00f5d4); font-family:var(--mono, monospace);}
  .qs-cell .k{font-size:9.5px; letter-spacing:1.5px; color:var(--text-dim); margin-top:3px;}
  .acct-box{margin-top:14px;}
  .acct-box summary{cursor:pointer; font-size:12px; letter-spacing:2px; color:var(--text-dim); list-style:none; user-select:none;}
  .acct-box summary::-webkit-details-marker{display:none;}
  .acct-box summary::before{content:'▸ '; color:var(--cyan, #00f5d4);}
  .acct-box[open] summary::before{content:'▾ ';}
  .acct-inner{margin-top:14px;}
  .danger-zone{margin-top:18px; border:1px dashed rgba(255,77,94,.4); border-radius:8px; padding:12px 14px;}
  .danger-zone .dz-label{font-size:10px; letter-spacing:2.5px; color:#ff4d5e; margin-bottom:10px;}
  .home-rank-strip{display:flex; align-items:center; gap:14px; background:linear-gradient(90deg, rgba(0,245,212,.06), transparent); border:1px solid rgba(0,245,212,.2); border-radius:10px; padding:10px 16px; margin-bottom:16px; font-size:12.5px; letter-spacing:.5px;}
  .home-rank-strip .hrs-badge{font-weight:700; color:var(--cyan, #00f5d4); white-space:nowrap;}
  .home-rank-strip .hrs-bar{flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden;}
  .home-rank-strip .hrs-fill{height:100%; background:var(--cyan, #00f5d4); border-radius:3px; transition:width .6s ease;}
  .home-rank-strip .hrs-next{color:var(--text-dim); font-size:11px; white-space:nowrap;}
  .hdr-rank{display:none; align-items:center; gap:8px; font-size:11.5px; letter-spacing:1px; color:var(--cyan, #00f5d4); border:1px solid rgba(0,245,212,.3); border-radius:16px; padding:5px 13px; white-space:nowrap;}
  .hdr-rank b{font-family:var(--mono, monospace);}
  body:not(.in-round) .stats .stat{display:none;}
  body:not(.in-round) .hdr-rank{display:inline-flex !important;}
  .pub-compare{margin:8px 0 4px; font-size:12px; letter-spacing:.5px; color:var(--text-dim); border:1px dashed rgba(255,255,255,.15); border-radius:6px; padding:7px 12px; display:inline-block;}
  .pub-compare b.up{color:var(--lime, #9fef00);} .pub-compare b.down{color:#ff4d5e;} .pub-compare b.even{color:var(--amber, #ffb454);}
  .thread.unread{background:rgba(0,245,212,.06); border-left:3px solid var(--cyan, #00f5d4);}
  .thread.unread .t-name{font-weight:800; color:var(--text, #e9edf5);}
  .thread.sys-pin{order:-1;}
  .stats-head .stats-back{order:-1;}
  .stats-head{justify-content:flex-start !important;}

  /* ==== word scramble ==== */
  .scr-stage-chip{display:inline-flex; align-items:center; gap:8px; margin:0 auto 14px; padding:4px 14px; border:1px solid rgba(0,245,212,.35); border-radius:20px; font-size:10.5px; letter-spacing:2.5px; color:var(--cyan, #00f5d4); background:rgba(0,245,212,.05);}
  .scr-stage-chip .dot{width:6px; height:6px; border-radius:50%; background:var(--cyan, #00f5d4); box-shadow:0 0 8px var(--cyan, #00f5d4);}
  .scr-stage-chip.s2{border-color:rgba(255,180,84,.4); color:var(--amber, #ffb454); background:rgba(255,180,84,.06);}
  .scr-stage-chip.s2 .dot{background:var(--amber, #ffb454); box-shadow:0 0 8px var(--amber, #ffb454);}
  .scr-wrap{text-align:center;}
  .scr-letters{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:6px 0 4px;}
  .scr-letter{display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:48px; padding:0 4px; background:linear-gradient(180deg, rgba(0,245,212,.10), rgba(0,245,212,.03)); border:1px solid rgba(0,245,212,.4); border-bottom-width:2.5px; border-radius:7px; font-family:var(--mono, monospace); font-size:22px; font-weight:700; color:var(--text, #e9edf5); text-transform:uppercase; animation:scrTileIn .28s cubic-bezier(.2,1.4,.4,1) both;}
  .scr-letter:nth-child(2){animation-delay:.03s} .scr-letter:nth-child(3){animation-delay:.06s}
  .scr-letter:nth-child(4){animation-delay:.09s} .scr-letter:nth-child(5){animation-delay:.12s}
  .scr-letter:nth-child(6){animation-delay:.15s} .scr-letter:nth-child(7){animation-delay:.18s}
  .scr-letter:nth-child(8){animation-delay:.21s} .scr-letter:nth-child(9){animation-delay:.24s}
  .scr-letter:nth-child(10){animation-delay:.27s} .scr-letter:nth-child(11){animation-delay:.30s}
  @keyframes scrTileIn{from{opacity:0; transform:translateY(-10px) rotate(-4deg);} to{opacity:1; transform:none;}}
  .scr-letter.revealed{background:linear-gradient(180deg, rgba(255,180,84,.16), rgba(255,180,84,.05)); border-color:var(--amber, #ffb454); color:var(--amber, #ffb454);}
  .scr-solved{font-family:var(--mono, monospace); font-size:24px; font-weight:700; letter-spacing:4px; color:var(--cyan, #00f5d4); text-shadow:0 0 14px rgba(0,245,212,.4); margin:6px 0 2px; text-transform:uppercase;}
  .scr-meta{display:flex; justify-content:center; align-items:center; gap:22px; margin-top:12px; font-size:11px; letter-spacing:1.5px; color:var(--text-dim);}
  .scr-meta b{color:var(--text, #e9edf5); font-weight:700;}
  .scr-vote{display:inline-flex; gap:6px; align-items:center;}
  .scr-vote .sv-label{font-size:9.5px; letter-spacing:1px; opacity:.8;}
  .mv-mini{background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:6px; padding:3px 9px; font-size:13px; cursor:pointer; transition:all .15s; line-height:1;}
  .mv-mini:hover{border-color:rgba(255,255,255,.4);}
  .mv-mini.keep.sel{border-color:var(--lime, #9fef00); background:rgba(159,239,0,.12);}
  .mv-mini.remove.sel{border-color:#ff4d5e; background:rgba(255,77,94,.12);}
  .scr-hint-btn{display:inline-flex; align-items:center; gap:6px; margin-top:12px; background:transparent; border:1px solid rgba(255,180,84,.45); color:var(--amber, #ffb454); border-radius:6px; padding:6px 16px; font-family:inherit; font-size:11.5px; cursor:pointer; letter-spacing:.8px; transition:background .15s;}
  .scr-hint-btn:hover{background:rgba(255,180,84,.1);}
  .scr-hint-btn:disabled{opacity:.3; cursor:default;}
  /* mode vote */
  .mode-vote{margin-top:16px; border-top:1px dashed rgba(255,255,255,.12); padding-top:14px; text-align:center;}
  .mode-vote .mv-q{font-size:12px; letter-spacing:1px; color:var(--text-dim); margin-bottom:10px;}
  .mv-btns{display:flex; gap:12px; justify-content:center;}
  .mv-btn{background:transparent; border:1px solid rgba(255,255,255,.2); color:var(--text, #e9edf5); border-radius:8px; padding:8px 22px; font-family:inherit; font-size:13px; cursor:pointer; letter-spacing:.5px; transition:all .15s;}
  .mv-btn:hover{border-color:rgba(255,255,255,.45);}
  .mv-btn.keep.sel{border-color:var(--lime, #9fef00); color:var(--lime, #9fef00); background:rgba(159,239,0,.08);}
  .mv-btn.remove.sel{border-color:#ff4d5e; color:#ff4d5e; background:rgba(255,77,94,.08);}
  .mv-note{font-size:11.5px; color:var(--text-dim); margin-top:8px; min-height:16px;}
  /* admin votes tab */
  .vote-row{display:flex; align-items:center; gap:14px; margin-bottom:12px;}
  .vote-row .vr-mode{width:150px; font-weight:700; letter-spacing:.5px;}
  .vote-bar{flex:1; height:10px; border-radius:5px; background:rgba(255,77,94,.25); overflow:hidden; position:relative;}
  .vote-bar .vb-up{position:absolute; left:0; top:0; bottom:0; background:var(--lime, #9fef00); border-radius:5px 0 0 5px;}
  .vote-nums{width:170px; font-size:12px; color:var(--text-dim); text-align:right;}

  /* ==== objections ==== */
  .objection-area{margin-top:14px; border-top:1px dashed rgba(255,255,255,.12); padding-top:12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
  .objection-link{background:none; border:none; color:#ff4d5e; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; letter-spacing:.5px; padding:0; text-shadow:0 0 8px rgba(255,77,94,.45);}
  .objection-link:hover{color:#ff6b7a; text-decoration:underline;}
  .objection-hint{font-size:11.5px; color:var(--text-dim); letter-spacing:.3px;}
  .objection-form{display:none; margin-top:10px; flex-basis:100%;}
  .objection-form.open{display:block;}
  .objection-ctx{background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:8px 10px; margin-bottom:8px; font-size:12px; line-height:1.7;}
  .objection-ctx .oc-label{color:#ff4d5e; font-weight:700; letter-spacing:.4px; margin-right:4px;}
  .objection-form textarea{width:100%; min-height:64px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); border-radius:6px; color:inherit; font-family:inherit; font-size:13px; padding:8px; resize:vertical;}
  .objection-actions{margin-top:8px; display:flex; gap:10px; align-items:center;}
  .objection-submit{background:transparent; border:1px solid #ff4d5e; color:#ff4d5e; border-radius:6px; padding:5px 14px; font-family:inherit; font-size:12px; cursor:pointer; letter-spacing:1px;}
  .objection-submit:hover{background:rgba(255,77,94,.12);}
  .objection-note{font-size:12px; color:var(--text-dim); margin-top:8px;}
  .objection-note.ok{color:var(--lime, #9fef00);}
  .obj-card{margin-bottom:14px;}
  .obj-meta{font-size:11px; color:var(--text-dim); letter-spacing:.5px; margin-bottom:8px;}
  .obj-row{font-size:13px; margin:4px 0; line-height:1.6;}
  .obj-row b{color:#ff4d5e; font-weight:700;}
  .obj-add{width:100%; margin-top:8px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); border-radius:6px; color:inherit; font-family:inherit; font-size:12.5px; padding:7px;}
  .obj-comment{width:100%; margin-top:8px; min-height:54px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); border-radius:6px; color:inherit; font-family:inherit; font-size:12.5px; padding:7px; resize:vertical;}
  .obj-actions{margin-top:10px; display:flex; gap:10px;}

  /* ==== verdict ==== */
  .verdict{
    margin-top:26px; padding-top:22px;
    border-top:1px dashed rgba(56,240,255,0.2);
    display:none;
  }
  .verdict.show{display:block; animation:verdictBoot .5s ease both;}
  @keyframes verdictBoot{
    0%{opacity:0; transform:translateY(14px); filter:blur(6px);}
    100%{opacity:1; transform:none; filter:none;}
  }
  .verdict-head{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
  .badge{
    font-family:'Orbitron',sans-serif; font-weight:700; font-size:12px; letter-spacing:2px;
    text-transform:uppercase; padding:6px 16px; border-radius:20px;
  }
  .badge.correct{
    color:var(--lime); border:1px solid var(--lime);
    box-shadow:0 0 18px rgba(93,255,168,0.3), inset 0 0 12px rgba(93,255,168,0.08);
    text-shadow:0 0 10px rgba(93,255,168,0.8);
    animation:badgePop .45s cubic-bezier(.2,1.4,.4,1) both;
  }
  .badge.wrong{
    color:var(--magenta); border:1px solid var(--magenta);
    box-shadow:0 0 18px rgba(255,61,139,0.3), inset 0 0 12px rgba(255,61,139,0.08);
    text-shadow:0 0 10px rgba(255,61,139,0.8);
    animation:badgeGlitch .5s steps(3) both;
  }
  @keyframes badgePop{ 0%{transform:scale(.5); opacity:0;} 70%{transform:scale(1.12);} 100%{transform:scale(1); opacity:1;} }
  @keyframes badgeGlitch{
    0%{transform:translateX(0); opacity:0;}
    30%{transform:translateX(-4px); opacity:1;}
    60%{transform:translateX(4px);}
    100%{transform:translateX(0);}
  }

  .model-answer{
    font-size:15.5px; color:var(--text); margin-bottom:16px; line-height:1.55;
  }
  .model-answer .mk{font-family:var(--mono); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--lime); display:block; margin-bottom:5px;}
  .model-answer em{color:#fff; font-style:normal; font-weight:600;}
  .model-answer .ar{font-family:'Noto Kufi Arabic',sans-serif; direction:rtl; display:block; font-size:17px; color:#fff; font-weight:600; margin-top:3px;}

  .analysis-block{
    background:rgba(255,61,139,0.06);
    border:1px solid rgba(255,61,139,0.25);
    border-left:3px solid var(--magenta);
    padding:16px 18px; border-radius:0 10px 10px 0; margin-bottom:12px;
    position:relative; overflow:hidden;
  }
  .analysis-block::before{
    content:""; position:absolute; top:0; left:0; width:100%; height:100%;
    background:linear-gradient(180deg, rgba(255,61,139,0.06), transparent 30%);
    pointer-events:none;
  }
  .analysis-block .label{
    font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:2.5px;
    color:var(--magenta); font-weight:600; margin-bottom:8px;
    display:flex; align-items:center; gap:7px;
  }
  .analysis-block .label::before{content:"◈";}
  .analysis-block p{margin:0 0 10px; font-size:14.5px; line-height:1.6; color:var(--text);}
  .analysis-block p:last-child{margin-bottom:0;}

  .term-chip{
    display:inline-block; background:rgba(56,240,255,0.08);
    border:1px solid rgba(56,240,255,0.35); border-radius:6px;
    padding:2px 9px; font-family:var(--mono); font-size:12.5px; font-weight:600;
    color:var(--cyan); margin:2px 3px;
  }

  .nuance{
    background:rgba(93,255,168,0.05); border:1px solid rgba(93,255,168,0.25);
    border-left:3px solid var(--lime);
    padding:14px 18px; border-radius:0 10px 10px 0;
    font-size:14px; color:var(--text); line-height:1.6;
  }

  /* ==== engine 598: vocabulary context note ==== */
  .ctx-note{margin-top:14px;}
  .ctx-note-h{
    font-family:var(--mono); font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
    color:var(--lime); display:block; margin-bottom:7px;
  }
  .ctx-note-b{font-size:14px; line-height:1.75;}
  .ctx-note-b.ar{
    direction:rtl; text-align:right;
    font-family:'Noto Kufi Arabic',sans-serif; font-size:15px; line-height:1.95;
  }

  /* ==== log ==== */
  .log-panel{
    margin-top:18px; background:var(--panel); backdrop-filter:blur(14px);
    border:1px solid var(--panel-edge); border-radius:14px; padding:20px 26px;
    animation:dropIn .7s .32s cubic-bezier(.2,.9,.3,1.2) both;
  }
  .log-toggle{
    background:none; border:none; color:var(--text-dim);
    font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:1.5px;
    text-transform:uppercase; cursor:pointer; padding:0;
    display:flex; align-items:center; gap:8px; transition:color .2s;
  }
  .log-toggle:hover{color:var(--cyan);}
  .log-list{display:none; margin-top:14px;}
  .log-list.open{display:block; animation:fadeSlide .35s ease both;}
  @keyframes fadeSlide{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }
  .log-item{
    padding:11px 0; border-bottom:1px solid rgba(56,240,255,0.08);
    font-size:13px; color:var(--text-dim); display:flex; justify-content:space-between; gap:14px;
  }
  .log-item .lp{color:var(--text); font-weight:500;}
  .log-item .tag{
    font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:1.5px;
    color:var(--magenta); white-space:nowrap; align-self:center;
  }
  .empty-log{color:var(--text-dim); font-size:13px; padding:8px 0; font-family:var(--mono);}
  .empty-log::before{content:"// ";}

  footer{
    text-align:center; margin-top:28px; color:var(--text-dim);
    font-family:var(--mono); font-size:10px; letter-spacing:2px; text-transform:uppercase;
    opacity:.7;
  }

  /* ==== home page / mode select ==== */
  /* ==== landing screen ==== */
  .landing{
    min-height:calc(100vh - 160px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; position:relative; padding:20px 0 40px;
  }
  .landing-mark{
    position:relative; margin-bottom:6px;
    font-family:'Noto Kufi Arabic',sans-serif; font-weight:700;
    font-size:clamp(84px,20vw,168px); line-height:1; color:transparent;
    -webkit-text-stroke:1px rgba(56,240,255,0.22);
    user-select:none; pointer-events:none;
    animation:markBreathe 6s ease-in-out infinite;
  }
  @keyframes markBreathe{ 0%,100%{opacity:.7; filter:drop-shadow(0 0 18px rgba(56,240,255,.10));} 50%{opacity:1; filter:drop-shadow(0 0 34px rgba(56,240,255,.22));} }
  .landing-word{
    font-family:'Orbitron',sans-serif; font-weight:900;
    font-size:clamp(44px,9vw,84px); letter-spacing:.14em; line-height:1;
    margin:-0.62em 0 10px; position:relative;
    background:linear-gradient(180deg,#eaf7ff 30%, var(--cyan) 85%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 4px 26px rgba(56,240,255,.28));
  }
  .landing-word em{font-style:normal; color:var(--magenta); -webkit-text-fill-color:var(--magenta); background:none;}
  .landing-sub{
    font-family:var(--mono); font-size:12px; letter-spacing:.32em; text-transform:uppercase;
    color:var(--text-dim); margin-bottom:34px;
  }
  .landing-intro{
    width:min(560px,92vw); margin:0 auto 26px;
    font-size:15px; line-height:1.7; color:var(--text);
  }
  .landing-intro .li-ar{
    display:block; margin-top:10px; font-family:'Noto Kufi Arabic',sans-serif;
    font-size:13.5px; color:var(--text-dim); direction:rtl;
  }
  .boot-log{
    width:min(520px,92vw); text-align:left;
    font-family:var(--mono); font-size:12.5px; line-height:1.9;
    color:var(--cyan-dim); min-height:96px; margin-bottom:30px;
    border-left:2px solid rgba(56,240,255,.25); padding-left:16px;
  }
  .boot-log .bl-ok{color:var(--lime);}
  .boot-log .bl-dim{color:var(--text-dim);}
  .boot-log .caret{display:inline-block; width:8px; height:14px; background:var(--cyan); vertical-align:-2px; animation:caretBlink 1s steps(1) infinite;}
  @keyframes caretBlink{50%{opacity:0;}}
  .enter-btn{
    opacity:0; pointer-events:none; transform:translateY(10px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.2,.9,.3,1.2);
    font-family:'Orbitron',sans-serif; font-weight:700; font-size:15px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--void); cursor:pointer;
    background:linear-gradient(135deg, var(--cyan), #7ef5ff);
    border:none; padding:16px 44px; clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
    box-shadow:0 0 32px rgba(56,240,255,.35);
  }
  .enter-btn.ready{opacity:1; pointer-events:auto; transform:none; animation:enterPulse 2.4s ease-in-out infinite;}
  @keyframes enterPulse{0%,100%{box-shadow:0 0 26px rgba(56,240,255,.30);}50%{box-shadow:0 0 46px rgba(56,240,255,.55);}}
  .enter-btn:active{transform:scale(.97);}
  .landing-chips{
    display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:38px;
  }
  .landing-chips span{
    font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--text-dim);
    border:1px solid var(--panel-edge); padding:6px 14px; border-radius:2px;
    background:rgba(10,18,32,.5);
  }
  @media (prefers-reduced-motion: reduce){
    .landing-mark,.enter-btn.ready{animation:none;}
  }

  /* ==== auth card ==== */
  .auth-card{
    width:min(400px,92vw); margin:0 auto 26px; text-align:left;
    background:var(--panel); border:1px solid var(--panel-edge);
    padding:26px 24px; position:relative;
    opacity:0; transform:translateY(10px); transition:opacity .5s, transform .5s;
    display:none;
  }
  .auth-card.ready{opacity:1; transform:none; display:block;}
  .auth-card h3{
    margin:0 0 4px; font-family:'Orbitron',sans-serif; font-size:14px;
    letter-spacing:.2em; color:var(--cyan); text-transform:uppercase;
  }
  .auth-sub{font-family:var(--mono); font-size:11px; color:var(--text-dim); margin-bottom:18px;}
  .auth-card label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); margin:12px 0 5px;}
  .auth-card input, .auth-card select{
    width:100%; background:rgba(4,10,20,.7); border:1px solid var(--panel-edge);
    color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:14px;
    padding:10px 12px; outline:none; border-radius:2px;
  }
  .auth-card input:focus, .auth-card select:focus{border-color:var(--cyan-dim); box-shadow:0 0 12px rgba(56,240,255,.12);}
  /* 609: country picker + local number on one row */
  .phone-row{display:flex; gap:8px; align-items:stretch;}
  .phone-row select{flex:0 1 44%; min-width:0; padding-right:8px; text-overflow:ellipsis;}
  .phone-field{flex:1 1 auto; min-width:0; position:relative; display:flex; align-items:center;
    background:rgba(4,10,20,.7); border:1px solid var(--panel-edge); border-radius:2px;}
  .phone-field:focus-within{border-color:var(--cyan-dim); box-shadow:0 0 12px rgba(56,240,255,.12);}
  .phone-field input{border:0; background:transparent; box-shadow:none !important; padding-left:6px;}
  .phone-cc{flex:0 0 auto; padding-left:12px; font-family:var(--mono); font-size:13px; color:var(--cyan); letter-spacing:.04em; user-select:none;}
  .phone-field.other .phone-cc{color:var(--text-dim);}
  .auth-btn{
    width:100%; margin-top:18px; cursor:pointer;
    font-family:'Orbitron',sans-serif; font-weight:700; font-size:13px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--void);
    background:linear-gradient(135deg, var(--cyan), #7ef5ff);
    border:none; padding:13px;
  }
  .auth-btn:disabled{opacity:.5; cursor:wait;}
  .auth-switch{
    margin-top:14px; text-align:center; font-family:var(--mono); font-size:11.5px; color:var(--text-dim);
  }
  .auth-switch a{color:var(--cyan); cursor:pointer; text-decoration:none;}
  .auth-err{
    display:none; margin-top:12px; font-family:var(--mono); font-size:11.5px;
    color:var(--magenta); border-left:2px solid var(--magenta); padding-left:10px;
  }
  .auth-err.show{display:block;}
  .operator-line{font-family:var(--mono); font-size:12px; color:var(--lime); margin-bottom:16px; display:none;}
  .operator-line.show{display:block;}
  .logout-link{color:var(--text-dim); cursor:pointer; margin-left:10px;}
  .logout-link:hover{color:var(--magenta);}

  .choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px;}
  @media (max-width:520px){ .choice-grid{grid-template-columns:1fr;} }
  .choice-btn{
    font-family:'Noto Kufi Arabic',sans-serif; font-size:19px; font-weight:600;
    color:var(--text); background:rgba(4,10,20,.7); border:1px solid var(--panel-edge);
    padding:20px 14px; cursor:pointer; border-radius:4px; direction:rtl;
    transition:border-color .2s, box-shadow .2s, transform .15s;
  }
  .choice-btn:hover{border-color:var(--cyan-dim); box-shadow:0 0 14px rgba(56,240,255,.15); transform:translateY(-2px);}
  .om-sent{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 6px;line-height:1.6;}
  .om-sent.ar{direction:rtl;font-family:'Noto Kufi Arabic',sans-serif;}
  .om-w{font-size:20px;font-weight:600;color:var(--text);background:rgba(4,10,20,.6);border:1px solid var(--panel-edge);
    border-radius:8px;padding:8px 14px;cursor:pointer;transition:.15s;user-select:none;}
  html.light .om-w{background:rgba(255,255,255,.7);}
  .om-w:hover{border-color:var(--cyan-dim);}
  .om-w.cut{text-decoration:line-through;color:var(--text-dim);opacity:.55;border-style:dashed;}
  .om-w.hit{border-color:var(--lime);color:var(--lime);text-decoration:line-through;box-shadow:0 0 14px rgba(93,255,168,.3);}
  .om-w.miss{border-color:var(--magenta);color:var(--magenta);box-shadow:0 0 14px rgba(255,61,139,.35);animation:omShake .4s;}
  .om-w.should{border-color:var(--amber);color:var(--amber);border-style:dashed;}
  .om-w.dis{cursor:default;}
  @keyframes omShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
  .om-hint{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--text-dim);text-align:center;margin-bottom:10px;}
  .om-clean{font-size:18px;margin-top:6px;color:var(--lime);}
  .om-clean.ar{direction:rtl;font-family:'Noto Kufi Arabic',sans-serif;}
  .om-tr{font-size:16px;margin-top:4px;color:var(--text);opacity:.85;}
  .om-tr.ar{direction:rtl;font-family:'Noto Kufi Arabic',sans-serif;}
  .choice-btn.hit{border-color:var(--lime); color:var(--lime); box-shadow:0 0 18px rgba(93,255,168,.3);}
  .choice-btn.miss{border-color:var(--magenta); color:var(--magenta); box-shadow:0 0 18px rgba(255,61,139,.3);}
  .choice-btn:disabled{cursor:default; opacity:.85; transform:none;}
  .speed-tally{
    font-family:var(--mono); font-size:13px; letter-spacing:.2em; color:var(--cyan);
    margin-top:10px;
  }
  .mode-tabs{
    display:flex; flex-wrap:wrap; gap:0; margin-bottom:18px;
    border:1px solid var(--panel-edge); background:rgba(10,18,32,.5);
  }
  .mode-tabs button{
    flex:1; min-width:120px; cursor:pointer; background:transparent; border:none;
    border-right:1px solid var(--panel-edge);
    font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--text-dim); padding:13px 10px; transition:color .2s, background .2s;
  }
  .mode-tabs button:last-child{border-right:none;}
  .mode-tabs button:hover:not(.active){color:var(--text); background:rgba(56,240,255,.05);}
  .mode-tabs button.active{
    color:var(--void); background:var(--cyan); font-weight:700;
  }
  .mode-card{display:none;}
  .mode-card.tab-visible{display:block; animation:fadeSlide .3s ease both;}
  .review-strip{
    display:flex; align-items:center; gap:14px; width:100%; text-align:left;
    cursor:pointer; margin-bottom:16px; padding:15px 20px;
    background:rgba(255,194,75,.05); border:1px solid rgba(255,194,75,.3);
    color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:13.5px;
    transition:box-shadow .2s, border-color .2s;
  }
  .review-strip:hover{border-color:var(--amber); box-shadow:0 0 18px rgba(255,194,75,.15);}
  .review-strip .rs-icon{font-size:20px; color:var(--amber);}
  .review-strip .rs-text{flex:1;}
  .review-strip .rs-text strong{font-family:'Orbitron',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber);}
  .setup-panel{
    background:var(--panel); backdrop-filter:blur(16px);
    border:1px solid var(--panel-edge); padding:44px 30px 40px;
    text-align:center; position:relative;
    animation:fadeSlide .35s ease both;
  }
  .sp-eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:.34em; color:var(--cyan-dim); margin-bottom:14px;}
  .sp-title{
    margin:0 0 12px; font-family:'Orbitron',sans-serif; font-weight:900;
    font-size:clamp(26px,5vw,40px); letter-spacing:.08em; text-transform:uppercase; color:#fff;
    text-shadow:0 0 30px rgba(56,240,255,.35);
  }
  .sp-desc{margin:0 auto 22px; max-width:520px; font-size:14.5px; line-height:1.7; color:var(--text);}
  .sp-hint{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); margin-bottom:28px;}
  .start-btn{
    cursor:pointer; font-family:'Orbitron',sans-serif; font-weight:700; font-size:16px; letter-spacing:.26em;
    text-transform:uppercase; color:var(--void);
    background:linear-gradient(135deg, var(--cyan), #7ef5ff);
    border:none; padding:17px 58px; clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
    box-shadow:0 0 32px rgba(56,240,255,.35);
    animation:enterPulse 2.4s ease-in-out infinite;
    transition:transform .15s;
  }
  .start-btn:hover{transform:translateY(-2px);}
  .start-btn:active{transform:scale(.97);}
  .review-pill{
    display:inline-block; min-width:22px; text-align:center;
    font-family:var(--mono); font-size:11px; padding:2px 7px; margin-left:6px;
    color:var(--void); background:var(--amber); border-radius:10px; vertical-align:middle;
  }
  .stats-open{
    display:block; margin:26px auto 0; cursor:pointer;
    font-family:'Orbitron',sans-serif; font-weight:700; font-size:12px; letter-spacing:.24em;
    color:var(--cyan); background:transparent; border:1px solid var(--cyan-dim);
    padding:13px 34px; text-transform:uppercase;
    transition:background .2s, box-shadow .2s;
  }
  .stats-open:hover{background:rgba(56,240,255,.08); box-shadow:0 0 18px rgba(56,240,255,.2);}
  .stats-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:14px;}
  .stats-back{
    cursor:pointer; font-family:var(--mono); font-size:12px; letter-spacing:.2em;
    color:var(--text-dim); background:transparent; border:1px solid var(--panel-edge); padding:9px 18px;
  }
  .stats-back:hover{color:var(--cyan); border-color:var(--cyan-dim);}
  .stats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:22px;}
  .stats-big{
    background:var(--panel); border:1px solid var(--panel-edge); padding:18px; text-align:center;
  }
  .stats-big .v{font-family:'Orbitron',sans-serif; font-weight:900; font-size:26px; color:var(--cyan);}
  .stats-big .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim); margin-top:6px;}
  .stats-panel{background:var(--panel); border:1px solid var(--panel-edge); padding:22px; margin-bottom:18px;}
  .stats-panel h3{margin:0 0 16px; font-family:'Orbitron',sans-serif; font-size:12px; letter-spacing:.24em; color:var(--cyan); text-transform:uppercase;}
  .bar-row{display:grid; grid-template-columns:150px 1fr 64px; gap:12px; align-items:center; margin-bottom:10px;}
  .bar-row .bl{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--text); text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .bar-track{height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden;}
  .bar-fill{height:100%; border-radius:4px; background:linear-gradient(90deg, var(--cyan), var(--lime)); transition:width .8s ease;}
  .bar-fill.low{background:var(--magenta);}
  .bar-fill.mid{background:var(--amber);}
  .bar-row .bv{font-family:var(--mono); font-size:11px; color:var(--text-dim); text-align:right;}
  .day-chart{display:flex; gap:5px; align-items:flex-end; height:90px;}
  .day-col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; height:100%;}
  .day-bar{width:100%; background:linear-gradient(180deg, var(--cyan), rgba(56,240,255,.25)); border-radius:2px 2px 0 0; min-height:2px; max-height:calc(100% - 16px);}
  .day-lbl{font-family:var(--mono); font-size:8px; color:var(--text-dim);}
  .stats-callout{
    border-left:2px solid var(--amber); padding:10px 14px; margin-top:6px;
    font-size:13.5px; color:var(--text); background:rgba(255,194,75,.05);
  }
  @media (max-width:640px){ .bar-row{grid-template-columns:110px 1fr 52px;} }
  .home-page{animation:dropIn .7s .15s cubic-bezier(.2,.9,.3,1.2) both;}
  .home-title{
    font-family:var(--mono); font-size:12px; letter-spacing:3px; text-transform:uppercase;
    color:var(--text-dim); margin:6px 0 18px; text-align:center;
  }
  .home-title::before{content:"// ";color:var(--cyan);}
  .mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media (max-width:640px){ .mode-grid{grid-template-columns:1fr;} }
  .mode-card{
    background:var(--panel); backdrop-filter:blur(16px);
    border:1px solid var(--panel-edge); border-radius:16px;
    padding:30px 26px; cursor:pointer; text-align:left;
    position:relative; overflow:hidden;
    transition:transform .2s, box-shadow .3s, border-color .3s;
    font-family:'Space Grotesk',sans-serif; color:var(--text);
  }
  .mode-card:hover{
    transform:translateY(-4px);
    border-color:var(--cyan);
    box-shadow:0 16px 40px rgba(0,0,0,0.5), 0 0 30px rgba(56,240,255,0.15);
  }
  .mode-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity:0; transition:opacity .3s;
  }
  .mode-card:hover::before{opacity:1;}
  .mode-card .mc-icon{font-size:30px; margin-bottom:12px;}
  .mode-card h2{
    font-family:'Orbitron',sans-serif; font-weight:700; font-size:17px; letter-spacing:2px;
    margin:0 0 8px; color:#fff; text-transform:uppercase;
  }
  .mode-card p{margin:0; font-size:13.5px; line-height:1.55; color:var(--text-dim);}
  .mode-card .mc-ar{
    font-family:'Noto Kufi Arabic',sans-serif; color:var(--cyan); font-size:13px;
    display:block; margin-top:10px; direction:rtl; text-align:right; opacity:.85;
  }
  .home-btn{
    background:transparent; border:1px solid rgba(56,240,255,0.25); border-radius:8px;
    color:var(--text-dim); font-family:var(--mono); font-size:10.5px; font-weight:600;
    letter-spacing:1.5px; text-transform:uppercase; padding:8px 14px; cursor:pointer;
    transition:all .2s; align-self:center;
  }
  .home-btn:hover{color:var(--cyan); border-color:var(--cyan);}

  /* ==== derivation chips ==== */
  .chip-group{margin-bottom:14px;}
  .chip-group .cg-label{
    font-family:var(--mono); font-size:10px; letter-spacing:2px; text-transform:uppercase;
    margin-bottom:8px; font-weight:600; display:flex; align-items:center; gap:6px;
  }
  .chip-group.ok .cg-label{color:var(--lime);}
  .chip-group.miss .cg-label{color:var(--amber);}
  .chip-group.bad .cg-label{color:var(--magenta);}
  .chips{display:flex; flex-wrap:wrap; gap:8px;}
  .chip{
    border-radius:8px; padding:6px 12px; font-size:13.5px;
    display:inline-flex; align-items:center; gap:8px;
    animation:chipIn .35s cubic-bezier(.2,1.2,.4,1) both;
  }
  .chip:nth-child(2){animation-delay:.05s;} .chip:nth-child(3){animation-delay:.1s;}
  .chip:nth-child(4){animation-delay:.15s;} .chip:nth-child(5){animation-delay:.2s;}
  .chip:nth-child(6){animation-delay:.25s;} .chip:nth-child(7){animation-delay:.3s;}
  @keyframes chipIn{from{opacity:0; transform:scale(.7);} to{opacity:1; transform:scale(1);}}
  .chip .cf{font-weight:600; color:#fff;}
  .chip .cp{font-family:var(--mono); font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px;}
  .chip .ca{font-family:'Noto Kufi Arabic',sans-serif; font-size:13px; direction:rtl;}
  .chip.ok{background:rgba(93,255,168,0.08); border:1px solid rgba(93,255,168,0.4);}
  .chip.ok .ca{color:var(--lime);}
  .chip.miss{background:rgba(255,194,75,0.08); border:1px solid rgba(255,194,75,0.45);}
  .chip.miss .ca{color:var(--amber);}
  .chip.bad{background:rgba(255,61,139,0.08); border:1px solid rgba(255,61,139,0.4);}
  .chip.bad .cf{color:var(--magenta); text-decoration:line-through;}

  .deriv-word{
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  }
  .deriv-word .dw-en{font-family:'Orbitron',sans-serif; font-weight:700; font-size:30px; color:#fff; letter-spacing:1px; text-shadow:0 0 18px rgba(56,240,255,0.4);}
  .deriv-word .dw-ar{font-family:'Noto Kufi Arabic',sans-serif; font-size:20px; color:var(--cyan);}

  @media (max-width:640px){
    .console{padding:26px 20px 24px;}
    .prompt{font-size:19px;} .prompt.ar{font-size:21px;}
    .brand h1{font-size:20px; letter-spacing:2px;}
    .stats{width:100%; justify-content:space-between;}
    .stat{flex:1;}
  }

  @keyframes inputNudge{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} }
  .nudge{ animation: inputNudge .35s ease; border-color: var(--amber) !important; }

  /* ==== daily challenge ==== */
  .daily-strip{
    display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
    margin-bottom:16px;padding:15px 20px;
    background:linear-gradient(90deg,rgba(160,107,255,.10),rgba(56,240,255,.06));
    border:1px solid rgba(160,107,255,.45);color:var(--text);
    font-family:'Space Grotesk',sans-serif;font-size:13.5px;position:relative;overflow:hidden;transition:box-shadow .2s;
  }
  .daily-strip::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--violet),transparent);}
  .daily-strip:hover{box-shadow:0 0 22px rgba(160,107,255,.25);}
  .ds-icon{font-size:20px;filter:drop-shadow(0 0 8px var(--violet));}
  .ds-text strong{color:var(--violet);letter-spacing:.5px;}
  .ds-meta{margin-left:auto;text-align:right;font-family:var(--mono);font-size:10px;color:var(--text-dim);letter-spacing:1px;line-height:1.7;flex:none;}
  .ds-meta b{color:var(--cyan);}
  .ds-meta .done{color:var(--lime);}
  html.light .daily-strip{background:linear-gradient(90deg,rgba(109,63,214,.08),rgba(8,122,150,.05));}
  .acc-ring{width:104px;height:104px;border-radius:50%;flex:none;position:relative;display:flex;align-items:center;justify-content:center;}
  .acc-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--void);}
  .acc-ring span{position:relative;font-family:'Orbitron',sans-serif;font-size:23px;font-weight:700;color:var(--lime);}
  html.light .acc-ring::before{background:#fff;}
  .ch-result{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:14px;}
  .ch-info h3{margin:0 0 6px;font-family:'Orbitron',sans-serif;font-size:16px;letter-spacing:2px;color:var(--text);}
  .ch-info p{margin:0;font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:.5px;line-height:1.9;}
  .ch-info b{color:var(--cyan);}
  .lb-title{font-family:var(--mono);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan);margin:16px 0 12px;}
  .lb-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;margin-bottom:7px;
    background:rgba(4,7,13,.45);border:1px solid rgba(56,240,255,.08);cursor:default;user-select:none;position:relative;overflow:hidden;}
  html.light .lb-row{background:rgba(255,255,255,.6);}
  .lb-row.me{border-color:var(--cyan-dim);background:rgba(56,240,255,.07);}
  .lb-rank{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;width:34px;text-align:center;color:var(--text-dim);flex:none;}
  .lb-row.r1 .lb-rank{color:#ffd700;text-shadow:0 0 10px rgba(255,215,0,.6);}
  .lb-row.r2 .lb-rank{color:#c8d6e5;}
  .lb-row.r3 .lb-rank{color:#cd9a62;}
  html.light .lb-row.r1 .lb-rank{text-shadow:none;color:#a8860b;}
  .lb-ava{width:38px;height:38px;position:relative;flex:none;}
  .lb-ava .hexf{position:absolute;inset:0;border:1.5px solid var(--cyan);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
  .lb-row.r1 .lb-ava .hexf{border-color:#ffd700;} .lb-row.r2 .lb-ava .hexf{border-color:#c8d6e5;} .lb-row.r3 .lb-ava .hexf{border-color:#cd9a62;}
  .lb-ava img,.lb-ava .fb{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:cover;
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
  .lb-ava .fb{display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;color:var(--cyan);
    background:linear-gradient(135deg,rgba(56,240,255,.18),rgba(160,107,255,.18));}
  .lb-name{flex:1;font-size:13.5px;font-weight:600;letter-spacing:.4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lb-name .you{font-family:var(--mono);font-size:8.5px;color:var(--cyan);letter-spacing:1.5px;margin-left:7px;}
  .lb-acc{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:700;color:var(--lime);flex:none;}
  .lb-row.r1 .lb-acc{color:#ffd700;} html.light .lb-row.r1 .lb-acc{color:#a8860b;}
  .lb-bar{position:absolute;left:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));opacity:.5;}
  .lb-empty{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);letter-spacing:1px;padding:8px 0;}

  .ch-board-panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;padding:18px;backdrop-filter:blur(12px);margin-top:16px;position:relative;overflow:hidden;}
  .ch-board-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--violet),transparent);}
  .cat-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;}
  .cat-chip.mode{opacity:.75;font-size:9px;}
  .lb-note{font-family:var(--mono);font-size:9.5px;color:var(--text-dim);letter-spacing:1px;margin:-4px 0 10px;}
  .drg-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:10px;}
  .drg-box .k{font-family:var(--mono);font-size:8.5px;letter-spacing:1.5px;color:var(--text-dim);text-transform:uppercase;}
  .drg-box .v{font-family:'Orbitron',sans-serif;font-size:16px;color:var(--cyan);}
  .drg-total{font-family:'Orbitron',sans-serif;font-size:26px;color:var(--amber);text-shadow:0 0 14px rgba(255,194,75,.4);}
  .cat-chip{
    font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;
    background:rgba(4,7,13,.45);border:1px solid var(--panel-edge);border-radius:6px;color:var(--text-dim);padding:5px 9px;transition:.15s;
  }
  html.light .cat-chip{background:rgba(255,255,255,.6);}
  .cat-chip:hover{color:var(--text);border-color:var(--cyan-dim);}
  .cat-chip.active{background:var(--cyan);color:var(--void);font-weight:600;border-color:var(--cyan);}
  html.light .cat-chip.active{color:#fff;}
  .lb-sub{font-family:var(--mono);font-size:8.5px;color:var(--text-dim);letter-spacing:1px;flex:none;margin-right:8px;}

  /* leaderboard field/mode picker — one native dropdown replaces the two
     chip rows (was a wall of 30+ small buttons; tap-to-select is both
     tidier and better on mobile, where this renders the OS's own picker) */
  .lb-select-wrap{margin:0 0 12px;}
  .lb-select{
    width:100%;font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
    background:rgba(4,7,13,.55);color:var(--text);border:1px solid var(--panel-edge);border-radius:8px;
    padding:10px 30px 10px 12px;cursor:pointer;outline:none;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2338f0ff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px;
    transition:.15s;
  }
  html.light .lb-select{
    background-color:rgba(255,255,255,.7);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23087a96' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px;
  }
  .lb-select:hover{border-color:var(--cyan-dim);}
  .lb-select:focus{border-color:var(--cyan);box-shadow:0 0 12px rgba(56,240,255,.12);}
  .lb-select optgroup, .lb-select option{background:var(--void);color:var(--text);font-family:var(--mono);}

  /* ==== transition smoothing ==== */
  #homePage, #trainerPage, #statsPage{ animation: pageIn .25s ease both; }
  @keyframes pageIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
  .mode-card{ transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .mode-card:active{ transform: scale(.975); }
  .ghost-btn:active, .stats-open:active, .home-btn:active, .stats-back:active,
  .submit-btn:active, .next-btn:active, .skip-btn:active, .choice-btn:active{ transform: scale(.96); }

  /* ==== operator profile ==== */

  /* ---- bio / interp type / public profiles / inbox ---- */
  .bio-row{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
  .bio-row textarea{width:100%;box-sizing:border-box;min-height:64px;resize:vertical;background:rgba(0,0,0,.25);
    border:1px solid var(--panel-edge);border-radius:8px;color:var(--text);font-family:inherit;font-size:13px;padding:8px 10px;}
  html.light .bio-row textarea{background:rgba(255,255,255,.7);}
  .bio-row .bio-count{font-family:var(--mono);font-size:9px;color:var(--text-dim);letter-spacing:1px;text-align:right;}
  .type-seg{display:inline-flex;background:rgba(0,0,0,.25);border:1px solid var(--panel-edge);border-radius:8px;overflow:hidden;}
  html.light .type-seg{background:rgba(255,255,255,.6);}
  .type-seg button{background:none;border:none;color:var(--text-dim);font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
    padding:7px 12px;cursor:pointer;transition:.2s;}
  .type-seg button.active{background:rgba(56,240,255,.15);color:var(--cyan);}
  .bio-label{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;}
  .bio-save-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
  .bio-saved{font-family:var(--mono);font-size:9.5px;color:var(--lime);letter-spacing:1px;opacity:0;transition:.3s;}
  .bio-saved.show{opacity:1;}
  .lb-row.tap{cursor:pointer;} .lb-row.tap:hover{border-color:var(--cyan-dim);background:rgba(56,240,255,.05);}
  .pp-bio{margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word;}
  .pp-bio.empty{color:var(--text-dim);font-style:italic;}
  /* inline name edit — sits beside the operator name on the profile page */
  .jb-namerow{display:flex;align-items:center;gap:10px;}
  .name-edit-btn{background:none;border:1px solid rgba(120,200,255,.25);color:var(--text-dim);
    font-family:var(--mono);font-size:11px;line-height:1;padding:5px 8px;border-radius:4px;cursor:pointer;
    transition:.2s;flex:none;}
  .name-edit-btn:hover{color:#7fd4ff;border-color:rgba(120,200,255,.6);}
  html.light .name-edit-btn{border-color:rgba(0,60,120,.25);}
  .name-edit-row{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap;}
  .name-edit-err{flex-basis:100%;order:9;font-family:var(--mono);font-size:11.5px;color:var(--magenta);border-left:2px solid var(--magenta);padding-left:10px;margin-top:2px;}
  .name-edit-err[hidden]{display:none;}
  .name-edit-row input{background:rgba(0,0,0,.25);border:1px solid rgba(120,200,255,.35);color:#fff;
    font-family:'Orbitron',sans-serif;font-size:15px;letter-spacing:1px;padding:7px 10px;border-radius:4px;
    min-width:0;width:220px;max-width:60vw;}
  html.light .name-edit-row input{background:rgba(255,255,255,.7);color:#0d1520;}
  .name-edit-row .ghost-btn{padding:6px 10px;font-size:9.5px;}
  .jb-bio{margin-top:6px;max-width:520px;font-size:12.5px;}
  .pp-type{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:2px;color:var(--cyan);
    border:1px solid var(--cyan-dim);border-radius:5px;padding:3px 8px;}
  /* inbox button */
  .inbox-btn{width:40px;height:40px;flex:none;position:relative;cursor:pointer;background:var(--panel);
    border:1px solid var(--panel-edge);border-radius:10px;color:var(--cyan);font-size:17px;display:none;transition:.2s;}
  .inbox-btn.show{display:inline-block;} .inbox-btn:hover{border-color:var(--cyan);}
  .inbox-btn .badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;border-radius:8px;background:var(--magenta);
    color:#fff;font-family:var(--mono);font-size:9px;font-weight:700;line-height:16px;text-align:center;padding:0 4px;display:none;
    box-shadow:0 0 8px rgba(255,61,139,.7);}
  .inbox-btn .badge.show{display:block;}
  /* inbox page */
  .thread-list{display:flex;flex-direction:column;gap:8px;}
  .thread{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;
    background:rgba(0,0,0,.2);border:1px solid var(--panel-edge);transition:.2s;}
  html.light .thread{background:rgba(255,255,255,.6);}
  .thread:hover{border-color:var(--cyan-dim);}
  .thread.unread{border-color:var(--cyan-dim);background:rgba(56,240,255,.07);}
  .thread .lb-ava{width:36px;height:36px;position:relative;flex:none;}
  .thread .t-main{flex:1;min-width:0;}
  .thread .t-name{font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:1.5px;color:var(--text);display:flex;gap:8px;align-items:center;}
  .thread .t-name .sys{font-family:var(--mono);font-size:8.5px;letter-spacing:1.5px;color:var(--void);background:var(--amber);border-radius:4px;padding:1px 5px;font-weight:700;}
  .thread .t-prev{font-size:12px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;}
  .thread .t-time{font-family:var(--mono);font-size:9px;color:var(--text-dim);flex:none;}
  .thread .t-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex:none;display:none;}
  .thread.unread .t-dot{display:block;}
  .inbox-empty{font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:1px;padding:20px;text-align:center;}
  .msg-stream{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto;padding:6px 2px;}
  .msg{max-width:82%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
    border:1px solid var(--panel-edge);background:rgba(0,0,0,.22);color:var(--text);}
  html.light .msg{background:rgba(255,255,255,.7);}
  .msg.mine{align-self:flex-end;background:rgba(56,240,255,.1);border-color:var(--cyan-dim);}
  .msg.sys{border-color:rgba(255,194,75,.45);background:rgba(255,194,75,.07);}
  .msg .m-time{display:block;font-family:var(--mono);font-size:8.5px;color:var(--text-dim);letter-spacing:1px;margin-top:5px;}
  .compose{display:flex;gap:8px;margin-top:12px;align-items:flex-end;}
  .compose textarea{flex:1;min-height:44px;max-height:140px;resize:vertical;background:rgba(0,0,0,.25);border:1px solid var(--panel-edge);
    border-radius:8px;color:var(--text);font-family:inherit;font-size:13.5px;padding:9px 11px;box-sizing:border-box;}
  html.light .compose textarea{background:rgba(255,255,255,.7);}
  .compose-note{font-family:var(--mono);font-size:9.5px;color:var(--text-dim);letter-spacing:1px;margin-top:10px;}
  .ro-note{font-family:var(--mono);font-size:10px;color:var(--amber);letter-spacing:1px;margin-top:12px;padding:9px 12px;
    border:1px dashed rgba(255,194,75,.4);border-radius:8px;}
  .msg-err{font-family:var(--mono);font-size:10px;color:var(--magenta);letter-spacing:1px;margin-top:6px;display:none;}
  .msg-err.show{display:block;}
  .admin-btn{height:40px;flex:none;cursor:pointer;background:linear-gradient(90deg,rgba(255,194,75,.15),rgba(255,61,139,.15));
    border:1px solid rgba(255,194,75,.5);border-radius:10px;color:var(--amber);font-family:var(--mono);font-size:10px;letter-spacing:2px;
    padding:0 12px;display:none;transition:.2s;}
  .admin-btn.show{display:inline-block;} .admin-btn:hover{box-shadow:0 0 12px rgba(255,194,75,.4);}
  .adm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
  .adm-tabs button{background:rgba(0,0,0,.25);border:1px solid var(--panel-edge);border-radius:8px;color:var(--text-dim);
    font-family:var(--mono);font-size:10px;letter-spacing:1.5px;padding:8px 12px;cursor:pointer;transition:.2s;}
  html.light .adm-tabs button{background:rgba(255,255,255,.6);}
  .adm-tabs button.active{color:var(--amber);border-color:rgba(255,194,75,.5);background:rgba(255,194,75,.08);}
  .adm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px;}
  .adm-kpi{background:rgba(0,0,0,.22);border:1px solid var(--panel-edge);border-radius:10px;padding:12px;}
  html.light .adm-kpi{background:rgba(255,255,255,.6);}
  .adm-kpi .v{font-family:'Orbitron',sans-serif;font-size:22px;color:var(--amber);}
  .adm-kpi .k{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;margin-top:4px;}
  .adm-table{width:100%;border-collapse:collapse;font-size:12px;}
  .adm-table th{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;color:var(--text-dim);text-align:left;padding:6px 8px;
    border-bottom:1px solid var(--panel-edge);text-transform:uppercase;cursor:pointer;white-space:nowrap;}
  .adm-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04);white-space:nowrap;vertical-align:middle;}
  .adm-table tr.tap{cursor:pointer;} .adm-table tr.tap:hover td{background:rgba(56,240,255,.05);}
  .adm-table .mono{font-family:var(--mono);font-size:11px;}
  .adm-table .adm-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:1.5px;color:var(--void);background:var(--amber);border-radius:4px;padding:1px 5px;font-weight:700;}
  .adm-scroll{overflow-x:auto;}
  .adm-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px;}
  .adm-row input[type=number],.adm-row select{background:rgba(0,0,0,.25);border:1px solid var(--panel-edge);border-radius:8px;color:var(--text);
    font-family:var(--mono);font-size:12px;padding:8px 10px;}
  html.light .adm-row input,html.light .adm-row select{background:rgba(255,255,255,.7);}
  .adm-codes{font-family:var(--mono);font-size:12px;color:var(--lime);white-space:pre-wrap;background:rgba(0,0,0,.25);border:1px dashed rgba(93,255,168,.4);
    border-radius:8px;padding:10px;margin-top:8px;display:none;}
  .adm-codes.show{display:block;}
  .adm-note{font-family:var(--mono);font-size:9.5px;color:var(--text-dim);letter-spacing:1px;margin-top:8px;line-height:1.6;}
  .adm-ok{font-family:var(--mono);font-size:10px;color:var(--lime);letter-spacing:1px;margin-left:8px;}
  .adm-err{font-family:var(--mono);font-size:10px;color:var(--magenta);letter-spacing:1px;margin-left:8px;}
  .ghost-btn.warn{color:var(--amber);border-color:rgba(255,194,75,.45);background:rgba(255,194,75,.06);}
  .adm-table tr.banned td{opacity:.5;}
  .ban-pill{font-family:var(--mono);font-size:8.5px;letter-spacing:1.5px;color:#fff;background:var(--magenta);border-radius:4px;padding:1px 6px;}
  .mini-btn{font-family:var(--mono);font-size:9px;letter-spacing:1px;padding:4px 8px;border-radius:6px;cursor:pointer;border:1px solid;background:none;}
  .mini-btn.ban{color:var(--magenta);border-color:rgba(255,61,139,.4);}
  .mini-btn.unban{color:var(--lime);border-color:rgba(93,255,168,.4);}
  #countdownNum.bump-up{animation:bumpUp .45s ease-out;} #countdownNum.bump-down{animation:bumpDown .45s ease-out;}
  @keyframes bumpUp{0%{color:var(--lime);transform:scale(1.35);}100%{transform:scale(1);}}
  @keyframes bumpDown{0%{color:var(--magenta);transform:scale(.8);}100%{transform:scale(1);}}
  .page-head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
  .profile-btn{
    width:52px;height:52px;flex:none;position:relative;cursor:pointer;background:none;border:none;padding:0;
    transition:transform .2s; display:none;
  }
  .profile-btn.show{display:block;}
  .profile-btn:hover{transform:scale(1.08);}
  .profile-btn .hexf{position:absolute;inset:0;border:1.5px solid var(--cyan);
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
  .profile-btn .hexf.r2{border-color:var(--violet);opacity:.55;animation:hexSpin 6s linear infinite;}
  .profile-btn img,.profile-btn .avatar-fb{
    position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:cover;
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
  .avatar-fb{display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, rgba(56,240,255,.18), rgba(160,107,255,.18));
    font-family:'Orbitron',sans-serif;font-weight:700;color:var(--cyan);font-size:18px;}
  .profile-btn .rank-pip{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
    font-family:var(--mono);font-size:7.5px;letter-spacing:1px;color:var(--void);
    background:var(--cyan);border-radius:4px;padding:1px 5px;white-space:nowrap;font-weight:600;}
  .identity{display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
  .big-avatar{width:110px;height:110px;position:relative;flex:none;}
  .big-avatar .hexf{position:absolute;inset:0;border:2px solid var(--cyan);
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
  .big-avatar .hexf.r2{border-color:var(--violet);opacity:.55;animation:hexSpin 8s linear infinite;}
  .big-avatar img,.big-avatar .avatar-fb{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);
    object-fit:cover;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);font-size:38px;}
  .id-info{flex:1;min-width:220px;}
  .op-name{font-family:'Orbitron',sans-serif;font-size:24px;font-weight:700;color:#fff;letter-spacing:2px;
    text-shadow:0 0 14px rgba(56,240,255,.4);}
  .op-meta{font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:1px;margin-top:6px;line-height:1.9;}
  .op-meta b{color:var(--text);}
  .rank-badge{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
    font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--void);
    background:linear-gradient(90deg,var(--cyan),var(--violet));border-radius:6px;padding:4px 10px;font-weight:600;}
  .avatar-actions{display:flex;flex-direction:column;gap:8px;}
  .ghost-btn{background:rgba(56,240,255,.08);border:1px solid var(--cyan-dim);border-radius:8px;color:var(--cyan);
    font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;padding:9px 14px;cursor:pointer;transition:.2s;white-space:nowrap;}
  .ghost-btn:hover{background:rgba(56,240,255,.18);}
  .ghost-btn.danger{color:var(--magenta);border-color:rgba(255,61,139,.4);background:rgba(255,61,139,.06);}
  .avatar-hint{font-family:var(--mono);font-size:9px;color:var(--text-dim);max-width:160px;line-height:1.5;}
  .ladder{display:flex;align-items:flex-start;gap:0;margin-top:6px;}
  .ladder-step{flex:1;text-align:center;position:relative;padding-top:18px;}
  .ladder-step::before{content:"";position:absolute;top:5px;left:0;right:0;height:3px;background:rgba(111,130,153,.25);}
  .ladder-step.done::before{background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 8px rgba(56,240,255,.5);}
  .ladder-step.current::before{background:linear-gradient(90deg,var(--cyan),rgba(111,130,153,.25));}
  .ladder-step .dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:13px;height:13px;
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:rgba(111,130,153,.4);}
  .ladder-step.done .dot,.ladder-step.current .dot{background:var(--cyan);box-shadow:0 0 10px var(--cyan);}
  .ladder-step .rl{font-family:var(--mono);font-size:8px;letter-spacing:1.2px;color:var(--text-dim);text-transform:uppercase;}
  .ladder-step.current .rl{color:var(--cyan);}
  .next-rank{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);margin-top:14px;letter-spacing:.5px;}
  .next-rank b{color:var(--amber);}
  .xp-track{height:7px;border-radius:4px;background:rgba(111,130,153,.2);margin-top:8px;overflow:hidden;}
  .xp-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--violet));
    box-shadow:0 0 10px rgba(56,240,255,.6);transition:width 1s ease;}
  @media(max-width:560px){
    .identity{flex-direction:column;text-align:center;}
    .avatar-actions{flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:center;}
    .ladder-step .rl{font-size:6.5px;}
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
    .scanline, .grid-bg{display:none;}
  }



/* ---- landing hero background ---- */
.landing{position:relative; isolation:isolate;}
.landing::before{
  content:""; position:absolute; inset:-28px -16px; z-index:-2;
  background:
    radial-gradient(ellipse 90% 75% at 50% 30%, rgba(56,240,255,0.06) 0%, transparent 60%),
    linear-gradient(160deg, #0a1018 0%, #04070d 60%, #050810 100%);
}
.landing::after{
  content:""; position:absolute; inset:-28px -16px; z-index:-1;
  background:
    radial-gradient(ellipse 90% 75% at 50% 42%, rgba(4,7,13,0.30) 0%, rgba(4,7,13,0.86) 62%, #04070d 96%),
    linear-gradient(180deg, rgba(4,7,13,.75), rgba(4,7,13,.25) 35%, rgba(4,7,13,.85) 90%),
    linear-gradient(120deg, rgba(56,240,255,0.10), rgba(160,107,255,0.08));
}
.landing-mark{-webkit-text-stroke-color:rgba(56,240,255,0.30);}
.landing-intro{text-shadow:0 2px 12px rgba(4,7,13,.9);}

/* ---- mode-select cinematic banner ---- */
.home-banner{
  position:relative; height:190px; margin:2px 0 22px; overflow:hidden;
  border:1px solid var(--panel-edge); border-radius:4px;
}
.home-banner img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%;
  filter:grayscale(1) contrast(1.06);
  animation:bannerPan 30s ease-in-out infinite alternate;
}
@keyframes bannerPan{from{transform:scale(1.02);}to{transform:scale(1.12) translateX(-2%);}}
.home-banner::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, #04070d 0%, transparent 22%, transparent 78%, #04070d 100%),
    linear-gradient(180deg, rgba(4,7,13,.35), transparent 40%, rgba(4,7,13,.85)),
    linear-gradient(120deg, rgba(56,240,255,0.12), rgba(160,107,255,0.10));
}
.home-banner .hb-caption{
  position:absolute; left:16px; bottom:10px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cyan-dim);
}
.home-banner::before{
  content:""; position:absolute; left:0; right:0; height:2px; z-index:2; top:0;
  background:linear-gradient(90deg, transparent, rgba(56,240,255,0.5), transparent);
  animation:bannerScan 5s linear infinite;
}
@keyframes bannerScan{from{top:0;}to{top:100%;}}
@media (max-width:640px){.home-banner{height:130px;}}
.home-banner.no-photo{
  background:
    radial-gradient(circle at 22% 28%, rgba(56,240,255,0.10), transparent 55%),
    radial-gradient(circle at 78% 72%, rgba(160,107,255,0.10), transparent 55%),
    repeating-linear-gradient(45deg, rgba(56,240,255,0.035) 0px, rgba(56,240,255,0.035) 1px, transparent 1px, transparent 13px),
    #060b14;
}
.home-banner.no-photo img{display:none;}

/* ---- trainer backdrop ---- */
.trainer-page{position:relative; isolation:isolate;}
#trainerPage::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(160deg, #0a1018 0%, #04070d 60%, #050810 100%);
}
#trainerPage::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 30%, transparent 0%, rgba(4,7,13,0.75) 70%, #04070d 100%);
}



/* ===== ambient orbiting glows on clickable surfaces ===== */
@property --orb { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes orbSpin{ to{ --orb:360deg; } }
@keyframes tabOrbit{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* ---- category tab bar: multicolor sweep cycling all four category hues ---- */
.mode-tabs, .seg{ position:relative; overflow:hidden; z-index:0; }
.mode-tabs::before, .seg::before{
  content:""; position:absolute; z-index:-2; left:50%; top:50%;
  width:280%; padding-top:280%; transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,
    transparent 0deg,
    rgba(56,240,255,.75) 40deg, transparent 80deg,
    rgba(160,107,255,.65) 130deg, transparent 170deg,
    rgba(255,194,75,.6) 220deg, transparent 260deg,
    rgba(255,61,139,.7) 310deg, transparent 350deg);
  animation:tabOrbit 9s linear infinite;
  border-radius:50%;
}
.seg::before{ animation-duration:8s; animation-delay:2s; }
.mode-tabs::after, .seg::after{
  content:""; position:absolute; z-index:-1; inset:1px;
  background:rgba(10,18,32,.92);
}
.seg::after{ border-radius:9px; }
.mode-tabs button, .seg button{ position:relative; z-index:1; }

/* ---- mode cards: orbiting ring in each category's own color ---- */
.mode-card{ --oc:var(--cyan); }
.mode-card[data-group="core"]{   --oc:#38f0ff; }
.mode-card[data-group="vocab"]{  --oc:#a06bff; }
.mode-card[data-group="drills"]{ --oc:#ffc24b; }
.mode-card[data-group="arcade"]{ --oc:#ff3d8b; }
.mode-card::after{
  content:""; position:absolute; inset:0; border-radius:16px; padding:1.5px;
  background:conic-gradient(from var(--orb),
    transparent 0deg, transparent 258deg, var(--oc) 310deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:orbSpin 7s linear infinite;
  pointer-events:none; opacity:.9;
}
/* desync neighbours so the glows wander independently */
.mode-card:nth-child(2n)::after{ animation-duration:8.5s; animation-delay:-3s; }
.mode-card:nth-child(3n)::after{ animation-duration:6s;   animation-delay:-1.5s; }
.mode-card:nth-child(5n)::after{ animation-duration:9.5s; animation-delay:-5s; }

/* ---- clickable strips: their own accent orbits ---- */
.review-strip{ position:relative; overflow:hidden; }
.review-strip::after, .daily-strip::after{
  content:""; position:absolute; inset:0; padding:1.5px; border-radius:inherit;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:orbSpin 10s linear infinite;
  pointer-events:none; opacity:.85;
}
.review-strip::after{
  background:conic-gradient(from var(--orb),
    transparent 0deg, transparent 262deg, var(--amber) 312deg, transparent 360deg);
}
.daily-strip::after{
  background:conic-gradient(from var(--orb),
    transparent 0deg, transparent 262deg, var(--violet) 312deg, transparent 360deg);
  animation-delay:-4s;
}

/* ---- light mode: darker sweeps, light covers ---- */
html.light .mode-tabs::before, html.light .seg::before{
  background:conic-gradient(from 0deg,
    transparent 0deg,
    rgba(8,122,150,.5) 40deg, transparent 80deg,
    rgba(109,63,214,.4) 130deg, transparent 170deg,
    rgba(163,98,10,.4) 220deg, transparent 260deg,
    rgba(200,30,107,.45) 310deg, transparent 350deg);
}
html.light .mode-tabs::after, html.light .seg::after{ background:rgba(255,255,255,.94); }
html.light .mode-card[data-group="core"]{   --oc:#087a96; }
html.light .mode-card[data-group="vocab"]{  --oc:#6d3fd6; }
html.light .mode-card[data-group="drills"]{ --oc:#a3620a; }
html.light .mode-card[data-group="arcade"]{ --oc:#c81e6b; }
html.light .mode-card::after,
html.light .review-strip::after,
html.light .daily-strip::after{ opacity:.7; }

/* ===== 5. hover power-up: ring brightens, thickens, doubles its arc ===== */
.mode-card:hover::after{
  padding:2.5px; opacity:1; filter:brightness(1.35) drop-shadow(0 0 6px var(--oc));
  background:conic-gradient(from var(--orb),
    transparent 0deg, transparent 78deg, var(--oc) 130deg, transparent 180deg,
    transparent 258deg, var(--oc) 310deg, transparent 360deg);
}

/* ===== 8. Daily Challenge: flagship two-color orbit (violet + gold) ===== */
.daily-strip::after{
  background:conic-gradient(from var(--orb),
    transparent 0deg, transparent 60deg, #ffd700 110deg, transparent 160deg,
    transparent 240deg, var(--violet) 292deg, transparent 342deg) !important;
  opacity:.95;
}

/* ===== 7. corner bracket CRT flicker ===== */
@keyframes cornerFlick{
  0%, 96.4%, 97.4%, 100%{ opacity:1; }
  96.8%{ opacity:.15; }
  97.0%{ opacity:.85; }
  97.2%{ opacity:.3; }
}
.console .corner{ animation:cornerFlick 7s linear infinite; }
.console .corner.tr{ animation-delay:1.7s; }
.console .corner.bl{ animation-delay:3.4s; }
.console .corner.br{ animation-delay:5.1s; }

/* ===== 2. streak heat: the console warms as the streak climbs ===== */
body[data-heat="1"] .console{ border-color:rgba(160,107,255,.35); }
body[data-heat="1"] #statStreak{ color:var(--violet); text-shadow:0 0 12px rgba(160,107,255,.6); }
body[data-heat="2"] .console{ border-color:rgba(255,194,75,.4); box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 44px rgba(255,194,75,.10); }
body[data-heat="2"] #statStreak{ color:var(--amber); text-shadow:0 0 12px rgba(255,194,75,.7); }
body[data-heat="3"] .console{ border-color:rgba(255,61,139,.5); box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 54px rgba(255,61,139,.16); }
body[data-heat="3"] #statStreak{ color:var(--magenta); text-shadow:0 0 14px rgba(255,61,139,.8); animation:heatThrob 1.6s ease-in-out infinite; }
@keyframes heatThrob{ 50%{ text-shadow:0 0 24px rgba(255,61,139,1); } }
html.light body[data-heat] .console{ box-shadow:none; }
html.light body[data-heat="1"] #statStreak{ color:#6d3fd6; text-shadow:none; }
html.light body[data-heat="2"] #statStreak{ color:#a3620a; text-shadow:none; }
html.light body[data-heat="3"] #statStreak{ color:#c81e6b; text-shadow:none; animation:none; }

/* ===== 3. verdict flashes on the console frame ===== */
@keyframes fxOk{
  0%{ border-color:var(--lime); box-shadow:0 0 0 0 rgba(93,255,168,.55), 0 24px 60px rgba(0,0,0,.55); }
  60%{ border-color:var(--lime); box-shadow:0 0 46px 4px rgba(93,255,168,.35), 0 24px 60px rgba(0,0,0,.55); }
  100%{ box-shadow:0 0 0 0 rgba(93,255,168,0), 0 24px 60px rgba(0,0,0,.55); }
}
@keyframes fxBad{
  0%,40%,80%{ border-color:rgba(255,77,94,.9); box-shadow:0 0 30px rgba(255,77,94,.35), 0 24px 60px rgba(0,0,0,.55); }
  20%,60%{ border-color:rgba(255,194,75,.7); box-shadow:0 0 14px rgba(255,77,94,.15), 0 24px 60px rgba(0,0,0,.55); }
  100%{ box-shadow:0 24px 60px rgba(0,0,0,.55); }
}
.console.fx-ok{ animation:fxOk .7s ease both; }
.console.fx-bad{ animation:fxBad .65s ease both; }

/* ===== 6. countdown urgency bleeds into the console frame ===== */
@keyframes bleedPulse{
  0%,100%{ border-color:rgba(255,61,139,.45); box-shadow:0 0 22px rgba(255,61,139,.15), 0 24px 60px rgba(0,0,0,.55); }
  50%{ border-color:rgba(255,61,139,.85); box-shadow:0 0 44px rgba(255,61,139,.35), 0 24px 60px rgba(0,0,0,.55); }
}
.console.urgent-bleed{ animation:bleedPulse 1.1s ease-in-out infinite; }
.console.urgent-bleed.urgent-hi{ animation-duration:.5s; }

/* ===== 1. rank-tinted identity: profile hex + rank pip carry your tier ===== */
body[data-rank="translator"] .profile-btn .hexf{ border-color:var(--cyan); }
body[data-rank="pro-translator"] .profile-btn .hexf{ border-color:var(--violet); }
body[data-rank="pro-translator"] .rank-pip{ color:var(--violet); border-color:var(--violet); }
body[data-rank="interpreter"] .profile-btn .hexf{ border-color:var(--lime); }
body[data-rank="interpreter"] .rank-pip{ color:var(--lime); border-color:var(--lime); }
body[data-rank="pro-interpreter"] .profile-btn .hexf{ border-color:var(--amber); }
body[data-rank="pro-interpreter"] .rank-pip{ color:var(--amber); border-color:var(--amber); }
body[data-rank="dragoman"] .profile-btn .hexf{ border-color:var(--magenta); box-shadow:0 0 14px rgba(255,61,139,.5); }
body[data-rank="dragoman"] .profile-btn .hexf.r2{ border-color:#ffd700; opacity:.8; }
body[data-rank="dragoman"] .rank-pip{
  color:#ffd700; border-color:var(--magenta);
  text-shadow:0 0 8px rgba(255,215,0,.6); animation:heatThrob 2.2s ease-in-out infinite;
}
html.light body[data-rank="dragoman"] .rank-pip{ text-shadow:none; animation:none; color:#a8860b; }

/* ===== 4. prompt decrypt shimmer ===== */
.prompt.decrypting{ opacity:.96; }
.prompt .dz{ color:var(--cyan-dim); }
.prompt.ar .dz{ color:var(--cyan-dim); }

@media (prefers-reduced-motion:reduce){
  .mode-tabs::before, .seg::before{ animation:none; opacity:.35; }
  .mode-card::after, .review-strip::after, .daily-strip::after{ animation:none; opacity:.4; }
  .console .corner, .console.urgent-bleed, body[data-heat="3"] #statStreak{ animation:none; }
}



/* ================= MOBILE LAYER (auto below 640px) ================= */
@media (max-width: 640px){

  body{ padding:14px 10px 40px; }

  /* ---- header: compact bar ---- */
  header{ margin-bottom:14px; }
  header h1{ font-size:20px; letter-spacing:.14em; }
  .mark{ width:34px; height:34px; font-size:15px; }
  #homeBtn{ padding:8px 14px; font-size:10px; }

  /* ---- landing ---- */
  .landing{ min-height:calc(100vh - 90px); padding-top:6px; }
  .landing-mark{ font-size:clamp(90px,34vw,140px); }
  .landing-word{ font-size:clamp(40px,13vw,64px); }
  .landing-sub{ font-size:10px; letter-spacing:.22em; margin-bottom:20px; }
  .landing-intro{ font-size:13.5px; line-height:1.65; margin-bottom:18px; }
  .landing-intro .li-ar{ font-size:12px; }
  .boot-log{ font-size:11px; min-height:70px; margin-bottom:20px; }
  .landing-chips{ gap:8px; margin-top:24px; }
  .landing-chips span{ font-size:9.5px; padding:6px 12px; }
  .enter-btn{ width:100%; max-width:340px; padding:16px 20px; font-size:14px; }
  .auth-card{ padding:22px 18px; }
  .auth-card input, .auth-card select{ font-size:16px; padding:12px; } /* 16px stops iOS zoom */
  .lb-select{ font-size:16px; padding:12px 32px 12px 14px; } /* 16px stops iOS zoom */

  /* ---- home / mode select ---- */
  .home-title{ font-size:clamp(26px,7.5vw,34px); }
  .home-banner{ height:110px; margin-bottom:16px; }
  .review-strip{ padding:13px 14px; gap:10px; font-size:12.5px; }
  .review-strip .rs-text strong{ font-size:10.5px; }
  .mode-tabs{ position:sticky; top:0; z-index:30; background:rgba(4,10,18,.94); backdrop-filter:blur(10px); }
  .mode-tabs button{ min-width:0; flex:1 1 50%; font-size:10px; padding:12px 4px; letter-spacing:.08em; }
  .mode-card{ padding:18px 16px; }
  .mode-card h2{ font-size:17px; }
  .mode-card p{ font-size:12.5px; line-height:1.55; }
  .mode-card .mc-ar{ font-size:11px; }
  .stats-open{ width:100%; padding:15px; }

  /* ---- trainer: controls become a collapsible drawer ---- */
  .controls{ gap:8px; }
  .seg{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .seg::-webkit-scrollbar{ display:none; }
  .seg button{ padding:11px 13px; font-size:10.5px; white-space:nowrap; flex-shrink:0; }
  #catSeg{ flex-wrap:nowrap; justify-content:flex-start; }
  .voice-pickers{ flex-direction:column; align-items:stretch; }
  .voice-pickers select{ font-size:16px; }

  /* setup / briefing */
  .setup-panel{ padding:30px 18px 28px; }
  .sp-title{ font-size:24px; }
  .sp-desc{ font-size:13.5px; }
  .start-btn{ width:100%; padding:17px; font-size:15px; }

  /* console */
  .console{ padding:20px 14px; }
  .prompt{ font-size:19px; line-height:1.55; }
  .prompt.ar{ font-size:21px; }
  textarea{ font-size:16px; min-height:96px; } /* 16px stops iOS zoom */
  .eyebrow{ font-size:9px; letter-spacing:.2em; }
  .btn-row{ flex-direction:column; align-items:stretch; gap:10px; }
  .btn-row button{ width:100%; padding:15px; font-size:13px; }
  .stat-row{ gap:8px; }
  .stat{ padding:10px 6px; }
  .stat .n{ font-size:18px; }
  .stat .l{ font-size:8px; }
  .choice-btn{ font-size:17px; padding:17px 12px; }
  .verdict{ padding:16px 12px; }
  .chip{ font-size:12px; }
  .countdown{ font-size:22px; }

  /* stats page */
  .stats-grid{ grid-template-columns:1fr 1fr; gap:9px; }
  .stats-big{ padding:13px 8px; }
  .stats-big .v{ font-size:19px; }
  .stats-panel{ padding:16px 12px; }
  .bar-row{ grid-template-columns:92px 1fr 48px; gap:8px; }
  .bar-row .bl{ font-size:9.5px; }
  .day-chart{ height:64px; }

  /* mistake log */
  .log-panel{ padding:14px 10px; }

  /* decorative restraint on small screens */
  .glow-orb{ opacity:.5; filter:blur(70px); }
  #trainerPage::before{ opacity:0.07; }
}

/* very small phones */
@media (max-width: 380px){
  .landing-word{ font-size:38px; }
  .mode-tabs button{ font-size:9px; }
  .bar-row{ grid-template-columns:80px 1fr 42px; }
}

/* landscape phones: keep landing usable */
@media (max-height: 480px) and (orientation: landscape){
  .landing{ min-height:auto; padding:16px 0 30px; }
  .landing-mark{ font-size:80px; }
  .landing-word{ font-size:36px; margin-top:-0.5em; }
  .boot-log{ min-height:auto; }
}



/* ===== v57: scored verdict ===== */
.verdict-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.score-ring{--sc:0;position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:conic-gradient(var(--ring-c,var(--cyan)) calc(var(--sc)*1%), rgba(255,255,255,.08) 0);}
.score-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--void,#04070d)}
.score-ring .sr-n{position:relative;font-family:var(--mono,'JetBrains Mono',monospace);font-weight:700;font-size:20px;line-height:1;color:var(--ring-c,var(--cyan))}
.score-ring .sr-k{position:relative;font-size:9px;opacity:.6;letter-spacing:.1em}
.score-ring.hi{--ring-c:var(--cyan)} .score-ring.ok{--ring-c:#7CFF9B} .score-ring.mid{--ring-c:#FFB547} .score-ring.lo{--ring-c:#ff4d5e}
.findings{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.finding{border:1px solid rgba(255,255,255,.1);border-left-width:3px;border-radius:8px;padding:8px 10px;font-size:13px;line-height:1.45}
.finding.critical{border-left-color:#ff4d5e} .finding.major{border-left-color:#FFB547} .finding.minor{border-left-color:var(--cyan)} .finding.none{border-left-color:#7CFF9B}
.finding.none .f-sev{background:rgba(124,255,155,.14);color:#7CFF9B}
.finding .f-sev{display:inline-block;font-family:var(--mono,monospace);font-size:9.5px;letter-spacing:.14em;padding:2px 6px;border-radius:4px;margin-right:8px;vertical-align:middle}
.finding.critical .f-sev{background:rgba(255,77,94,.18);color:#ff4d5e} .finding.major .f-sev{background:rgba(255,181,71,.16);color:#FFB547} .finding.minor .f-sev{background:rgba(56,240,255,.12);color:var(--cyan)}
.finding .f-pts{float:right;font-family:var(--mono,monospace);font-size:11px;opacity:.7}
.finding .f-note{margin-top:4px;opacity:.85}
.finding .f-missing{margin-top:6px;font-size:12px;opacity:.9}
.pass-findings .f-inline{display:inline-block;margin:2px 4px 2px 0;padding:2px 7px;border-radius:4px;font-size:11.5px;background:rgba(255,255,255,.06)}
.pass-findings .f-inline.major{color:#FFB547} .pass-findings .f-inline.minor{color:var(--cyan)}
/* ===== v57: accessibility baseline ===== */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
.mode-card:focus-visible,.seg button:focus-visible,.choice-grid button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.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}
@media (prefers-contrast: more){ .finding{border-color:currentColor} .badge{border:1px solid currentColor} }



/* ════════════════ COMMUNITY ════════════════ */
:root{ --cm-ink:var(--cyan); --cm-ren:var(--violet); --cm-glass:rgba(12,20,34,.62); --cm-edge:rgba(120,170,200,.14); --cm-edge2:rgba(56,240,255,.28); }
.cm, .cm-sheet, .st-viewer, .cm-menu, .cm-toast, .rx-bar{ --ink:var(--cm-ink); --ren:var(--cm-ren); --glass:var(--cm-glass); --edge:var(--cm-edge); --edge2:var(--cm-edge2); }
/* the hidden attribute must always win over component display rules */
#community[hidden], .cm-view[hidden], .st-viewer[hidden], .cm-sheet[hidden], .cm-sheet-back[hidden], .cm-attach[hidden], .cm-media-prev[hidden], .cm-menu[hidden]{ display:none !important; }

.mode-tabs button{ flex:1 1 20%; }
@media (max-width:640px){ .mode-tabs button{ flex:1 1 33.33%; } }
.cm{ --ink:var(--cyan); --ren:var(--violet); --glass:rgba(12,20,34,.62); --edge:rgba(120,170,200,.14); --edge2:rgba(56,240,255,.28);
     margin-top:8px; }
.cm-topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }

/* segmented control with a sliding ink */
.cm-seg,.cm-vis{ position:relative; display:inline-flex; padding:3px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--edge); isolation:isolate; }
.cm-seg button,.cm-vis button{ position:relative; z-index:1; background:none; border:none; color:var(--text-dim); font:inherit; font-size:13px; font-weight:600; padding:8px 16px; border-radius:9px; cursor:pointer; transition:color .25s; white-space:nowrap; }
.cm-seg button.on,.cm-vis button.on{ color:var(--void); }
.cm-seg-ink,.cm-vis-ink{ position:absolute; top:3px; bottom:3px; left:3px; width:60px; border-radius:9px; background:var(--ink); z-index:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1); box-shadow:0 4px 18px rgba(56,240,255,.35); }
.cm-vis{ padding:2px; border-radius:10px; }
.cm-vis button{ font-size:11.5px; padding:6px 10px; font-weight:600; }
.cm-vis-ink{ top:2px; bottom:2px; left:2px; border-radius:8px; }
.cm-you{ display:flex; gap:6px; }
.cm-you-btn{ background:none; border:none; color:var(--text-dim); font:inherit; font-size:12px; cursor:pointer; display:flex; flex-direction:column; align-items:center; line-height:1.1; padding:4px 10px; border-radius:10px; }
.cm-you-btn b{ font-family:var(--mono); font-size:17px; color:var(--text); }
.cm-you-btn:hover{ background:rgba(255,255,255,.04); }

/* avatars — the operator hex, exactly as on the leaderboard and profile */
.cm-av{ position:relative; width:40px; height:40px; flex-shrink:0; }
.cm-av .hexf{ position:absolute; inset:0; border:1.5px solid var(--cyan); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.cm-av img, .cm-av .fb{ position:absolute; z-index:2; inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); object-fit:cover; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.cm-av .fb{ display:flex; align-items:center; justify-content:center; font-family:'Orbitron',sans-serif; font-weight:700; font-size:14px; color:var(--cyan); background:rgba(56,240,255,.08); }
.cm-av.lg{ width:46px; height:46px; } .cm-av.xl{ width:72px; height:72px; } .cm-av.xl .fb{ font-size:24px; } .cm-av.sm{ width:26px; height:26px; } .cm-av.sm .fb{ font-size:10px; }
.cm-av.ring .hexf{ border-color:var(--violet); border-width:2px; box-shadow:0 0 12px rgba(160,107,255,.55); }
/* top three on the board — the leaderboard's gold / silver / bronze frames, carried into the room */
.cm-av.r1 .hexf{ border-color:#ffd700; box-shadow:0 0 14px rgba(255,215,0,.45); } .cm-av.r2 .hexf{ border-color:#c8d6e5; box-shadow:0 0 12px rgba(200,214,229,.4); } .cm-av.r3 .hexf{ border-color:#cd9a62; box-shadow:0 0 12px rgba(205,154,98,.4); }
.cm-av.r1 .fb{ color:#ffd700; } .cm-av.r2 .fb{ color:#c8d6e5; } .cm-av.r3 .fb{ color:#cd9a62; }
.cm-av .medal{ position:absolute; right:-6px; bottom:-6px; width:18px; height:18px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); display:grid; place-items:center; font:800 10px/1 'Orbitron',sans-serif; font-style:normal; color:#1a1200; z-index:3; overflow:hidden; }
.cm-av.xl .medal{ width:24px; height:24px; font-size:12px; right:-4px; bottom:-4px; } .cm-av.sm .medal{ width:12px; height:12px; font-size:7px; right:-4px; bottom:-4px; }
.cm-av.r1 .medal{ background:linear-gradient(135deg,#fff3a3,#ffd700 45%,#b8860b); } .cm-av.r2 .medal{ background:linear-gradient(135deg,#ffffff,#c8d6e5 45%,#8a9bb0); color:#1c2430; } .cm-av.r3 .medal{ background:linear-gradient(135deg,#f3d0a8,#cd9a62 45%,#8b5a2b); color:#2a1606; }
.cm-av .medal::after{ content:""; position:absolute; top:-40%; left:-60%; width:40%; height:180%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); transform:skewX(-25deg); animation:medalShine 6s ease-in-out infinite; }
@keyframes medalShine{ 0%,80%{ left:-60%; } 100%{ left:140%; } }
.cm-av.r2 .medal::after{ animation-delay:2s; } .cm-av.r3 .medal::after{ animation-delay:4s; }

/* motion — the hex is alive: draws in, breathes when it has a story, pops on touch, spins on follow */
.cm-av{ transform-origin:50% 50%; transition:transform .25s cubic-bezier(.2,1.4,.4,1); }
.cm-av:hover{ transform:translateY(-2px) rotate(-3deg) scale(1.05); }
.cm-av.pop{ animation:hexPop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes hexPop{ 0%{ transform:scale(.86) rotate(6deg); } 60%{ transform:scale(1.12) rotate(-4deg); } 100%{ transform:none; } }
.cm-av.spin .hexf{ animation:hexSpin .7s cubic-bezier(.2,.8,.2,1); }
@keyframes hexSpin{ from{ transform:rotate(0) scale(1); } 50%{ transform:rotate(180deg) scale(1.15); } to{ transform:rotate(360deg) scale(1); } }
.cm-post-card.enter .cm-av, .cm-post-card.fresh .cm-av{ animation:hexDraw .6s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--d,0ms) + 120ms); }
@keyframes hexDraw{ from{ transform:scale(.5) rotate(-30deg); opacity:0; clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%); } 60%{ opacity:1; } to{ transform:none; clip-path:polygon(50% -10%,110% 25%,110% 75%,50% 110%,-10% 75%,-10% 25%); } }
/* stories row: unseen rings carry a slow travelling light; every hex floats on its own beat */
.cm-stories .cm-sg{ animation:hexFloat 5.5s ease-in-out infinite; }
.cm-stories .cm-sg:nth-child(2n){ animation-delay:-1.4s; } .cm-stories .cm-sg:nth-child(3n){ animation-delay:-2.7s; } .cm-stories .cm-sg:nth-child(4n){ animation-delay:-3.9s; }
@keyframes hexFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.cm-av.ring:not(.seen)::before{ content:""; position:absolute; inset:-3px; z-index:0; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:conic-gradient(from var(--a,0deg), transparent 0 55%, var(--violet) 70%, var(--cyan) 82%, transparent 92%); animation:cmSpin 3.2s linear infinite; }
.cm-av.ring:not(.seen) .hexf{ z-index:1; }
.cm-stories .cm-sg:active .cm-av{ transform:scale(.92); }

.cm-av.ring.seen .hexf{ border-color:rgba(255,255,255,.22); box-shadow:none; }
.cm-av.ring.live::after{ content:""; position:absolute; inset:-3px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); border:2px solid var(--violet); opacity:0; animation:cmPulse 2.4s ease-out infinite; }
@keyframes cmPulse{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.35);opacity:0} }

/* suggested operators: horizontal orbit */
.cm-orbit{ display:flex; gap:18px; overflow-x:auto; padding:6px 4px 18px; scrollbar-width:none; -webkit-mask:linear-gradient(90deg,#000 88%,transparent); mask:linear-gradient(90deg,#000 88%,transparent); }
.cm-orbit::-webkit-scrollbar{ display:none; }
.cm-sg{ flex:0 0 auto; width:80px; text-align:center; background:none; border:none; color:var(--text); cursor:pointer; font:inherit; }
.cm-sg .cm-av{ margin:0 auto 8px; width:58px; height:58px; } .cm-sg .cm-av span{ font-size:21px; }
.cm-sg small{ display:block; font-size:11.5px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-sg .cm-follow{ margin-top:6px; padding:4px 10px; font-size:10.5px; min-width:0; }

/* follow button: morphs */
.cm-follow{ position:relative; overflow:hidden; background:var(--ink); border:1px solid var(--ink); color:var(--void); font:inherit; font-size:12px; font-weight:700; padding:6px 14px; border-radius:9px; cursor:pointer; min-width:84px;
  transition:background .3s, color .3s, border-color .3s, transform .12s; }
.cm-follow:active{ transform:scale(.96); }
.cm-follow.on{ background:transparent; color:var(--text-dim); border-color:var(--edge); }
.cm-follow.on::before{ content:"✓ "; color:#7CFF9B; }

/* composer */
.cm-compose{ display:flex; gap:12px; padding:14px 16px; border-radius:18px; background:var(--glass); border:1px solid var(--edge); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); margin-bottom:20px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(0,0,0,.8); transition:border-color .3s, box-shadow .3s; }
.cm-compose:focus-within{ border-color:var(--edge2); box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 0 0 4px rgba(56,240,255,.08), 0 20px 50px -30px rgba(0,0,0,.8); }
.cm-compose-body{ flex:1; min-width:0; }
.cm-compose textarea, .cm-sheet textarea{ width:100%; background:transparent; border:none; color:var(--text); font:inherit; font-size:15.5px; line-height:1.5; resize:none; outline:none; padding:9px 0 4px; max-height:180px; }
.cm-compose-row{ display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; }
.cm-chipbtn{ background:rgba(160,107,255,.10); border:1px solid rgba(160,107,255,.3); color:#c9b1ff; font:inherit; font-size:12px; font-weight:600; padding:7px 11px; border-radius:9px; cursor:pointer; display:flex; gap:6px; align-items:center; transition:background .2s; }
.cm-chipbtn:hover{ background:rgba(160,107,255,.18); }
.cm-chipbtn i{ font-style:normal; }
.cm-post{ margin-left:auto; position:relative; overflow:hidden; background:linear-gradient(120deg, #38f0ff, #7ad8ff); color:#04070d; border:none; font:inherit; font-weight:800; font-size:13px; padding:9px 20px; border-radius:10px; cursor:pointer; letter-spacing:.02em;
  box-shadow:0 8px 24px -10px rgba(56,240,255,.7); transition:transform .12s, opacity .25s, box-shadow .25s; }
.cm-post:active{ transform:scale(.96); }
.cm-post:disabled{ opacity:.3; box-shadow:none; cursor:default; }
.cm-post::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-20deg); }
.cm-post.sent::after{ animation:cmSweep .7s ease-out; }
@keyframes cmSweep{ to{ left:130%; } }

/* rendering block — the DRAGOMAN object */
.cm-attach, .cm-render{ position:relative; margin:10px 0 4px; padding:12px 14px 12px 16px; border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg, rgba(160,107,255,.10), rgba(160,107,255,.03)); border:1px solid rgba(160,107,255,.22); }
.cm-attach::before, .cm-render::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--ren), var(--cyan)); }
.cm-src{ font-family:'Noto Kufi Arabic',sans-serif; font-size:16px; line-height:1.9; color:var(--text); direction:rtl; text-align:right; }
.cm-ren{ font-size:15px; line-height:1.55; margin-top:6px; color:var(--text); }
.cm-seal{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:5px 10px 5px 6px; border-radius:999px; background:rgba(4,7,13,.55); border:1px solid rgba(255,255,255,.08); font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--text-dim); }
.cm-seal b{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font-size:11px; color:var(--void); background:var(--cyan); font-weight:700; }
.cm-seal.ok b{ background:#7CFF9B; } .cm-seal.mid b{ background:#FFB547; } .cm-seal.lo b{ background:#ff4d5e; color:#fff; }
.cm-seal.ok{ color:#9df5b6; } .cm-seal.mid{ color:#ffd18f; } .cm-seal.lo{ color:#ff9aa6; }
.cm-attach .cm-x{ position:absolute; top:8px; right:8px; background:rgba(255,255,255,.06); border:none; color:var(--text-dim); width:26px; height:26px; border-radius:50%; cursor:pointer; }
.cm-render.reveal::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(56,240,255,.18), transparent); transform:translateY(-100%); animation:cmScan .9s ease-out .15s forwards; pointer-events:none; }
@keyframes cmScan{ to{ transform:translateY(100%); } }

/* post cards */
.cm-feed{ display:flex; flex-direction:column; gap:14px; }
.cm-post-card{ position:relative; border-radius:18px; background:var(--glass); border:1px solid var(--edge); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:16px 16px 12px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -36px rgba(0,0,0,.9); transition:border-color .3s, transform .3s; }
.cm-post-card.enter{ animation:cmIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--d,0ms); }
@keyframes cmIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }
.cm-post-card.fresh{ animation:cmLand .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cmLand{ 0%{ opacity:0; transform:translateY(-18px) scale(.98); box-shadow:0 0 0 0 rgba(56,240,255,.0);} 60%{ box-shadow:0 0 0 6px rgba(56,240,255,.14);} 100%{ opacity:1; transform:none; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -36px rgba(0,0,0,.9);} }
.cm-post-card.leave{ animation:cmOut .35s ease-in forwards; }
@keyframes cmOut{ to{ opacity:0; transform:translateX(24px) scale(.97); height:0; margin:0; padding:0; } }
.cm-post-card.pinned{ border-color:transparent; background-clip:padding-box; }
.cm-post-card.pinned::before{ content:""; position:absolute; inset:-1px; border-radius:19px; padding:1px; z-index:-1;
  background:conic-gradient(from var(--a,0deg), var(--cyan), var(--violet), #ff3d8b, var(--cyan)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:cmSpin 6s linear infinite; }
@property --a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes cmSpin{ to{ --a:360deg; } }
.cm-pin{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--cyan); margin-bottom:10px; }
.cm-top{ display:flex; align-items:center; gap:11px; }
.cm-name{ font-weight:650; font-size:14.5px; display:flex; align-items:center; gap:8px; }
.cm-rank{ font-family:var(--mono); font-size:10px; color:var(--cyan); letter-spacing:.1em; opacity:.9; }
.cm-meta{ font-size:11.5px; color:var(--text-dim); display:flex; gap:6px; align-items:center; }
.cm-lock{ font-size:10px; color:#c9b1ff; border:1px solid rgba(160,107,255,.35); padding:1px 6px; border-radius:6px; }
.cm-top .cm-follow{ margin-left:auto; }
.cm-more{ background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer; padding:2px 6px; border-radius:8px; margin-left:4px; }
.cm-more:hover{ background:rgba(255,255,255,.05); }
.cm-menu{ position:absolute; right:14px; top:52px; background:#0b1322; border:1px solid var(--edge2); border-radius:12px; padding:6px; z-index:5; min-width:170px; box-shadow:0 20px 40px -20px rgba(0,0,0,.9); animation:cmIn .2s ease-out; }
.cm-menu button{ display:block; width:100%; text-align:left; background:none; border:none; color:var(--text); font:inherit; font-size:13px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.cm-menu button:hover{ background:rgba(56,240,255,.08); }
.cm-menu button.danger{ color:#ff6b7d; }
.cm-body{ margin:12px 0 4px; font-size:15.5px; line-height:1.6; white-space:pre-wrap; }
.cm-body[lang="ar"]{ font-family:'Noto Kufi Arabic',sans-serif; direction:rtl; text-align:right; line-height:1.95; }
.cm-actions{ display:flex; gap:22px; margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); }
.cm-actions button{ position:relative; background:none; border:none; color:var(--text-dim); font:inherit; font-size:13.5px; cursor:pointer; display:flex; align-items:center; gap:7px; padding:6px 0; }
.cm-actions button b{ font-family:var(--mono); font-weight:500; min-width:1.2em; text-align:left; }
.cm-heart{ display:inline-block; font-size:17px; transition:transform .25s cubic-bezier(.2,1.6,.4,1), color .2s; }
.cm-actions button.on .cm-heart{ color:#ff3d8b; }
.cm-actions button.pop .cm-heart{ animation:cmPop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes cmPop{ 0%{transform:scale(.6)} 60%{transform:scale(1.5)} 100%{transform:scale(1)} }
.cm-burst{ position:absolute; left:8px; top:14px; width:4px; height:4px; pointer-events:none; }
.cm-burst i{ position:absolute; width:4px; height:4px; border-radius:50%; background:#ff3d8b; animation:cmBurst .6s ease-out forwards; }
@keyframes cmBurst{ to{ transform:translate(var(--x), var(--y)) scale(0); opacity:0; } }
.cm-comments{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1); }
.cm-comments.open{ grid-template-rows:1fr; }
.cm-comments > div{ overflow:hidden; }
.cm-cwrap{ margin-top:8px; padding-left:14px; border-left:2px solid rgba(160,107,255,.25); }
.cm-c{ display:flex; gap:9px; margin:10px 0; font-size:13.5px; line-height:1.55; animation:cmIn .3s ease-out both; }
.cm-c .cm-cname{ font-weight:650; margin-right:6px; }
.cm-c .cm-render{ margin:6px 0 0; padding:8px 12px 8px 14px; }
.cm-reply{ display:flex; gap:8px; margin:10px 0 6px; }
.cm-reply input{ flex:1; background:rgba(255,255,255,.04); border:1px solid var(--edge); border-radius:10px; color:var(--text); font:inherit; font-size:13.5px; padding:9px 12px; outline:none; transition:border-color .2s; }
.cm-reply input:focus{ border-color:var(--edge2); }
.cm-reply button{ background:var(--cyan); color:var(--void); border:none; font:inherit; font-weight:700; font-size:12px; padding:0 14px; border-radius:10px; cursor:pointer; }

/* operators */
.cm-search{ display:flex; align-items:center; gap:10px; background:var(--glass); border:1px solid var(--edge); border-radius:14px; padding:0 14px; margin-bottom:16px; backdrop-filter:blur(14px); }
.cm-search span{ color:var(--text-dim); font-size:18px; }
.cm-search input{ flex:1; background:none; border:none; color:var(--text); font:inherit; font-size:14.5px; padding:13px 0; outline:none; }
.cm-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px; }
.cm-op{ position:relative; border-radius:18px; background:var(--glass); border:1px solid var(--edge); padding:22px 14px 16px; text-align:center; backdrop-filter:blur(14px); overflow:hidden; transition:transform .3s, border-color .3s; }
.cm-op::before{ content:""; position:absolute; inset:0 0 auto; height:70px; background:radial-gradient(60% 80% at 50% 0%, hsl(var(--h) 90% 60% / .22), transparent); }
.cm-op:hover{ transform:translateY(-3px); border-color:var(--edge2); }
.cm-op .cm-av{ margin:0 auto 10px; }
.cm-op .cm-name{ justify-content:center; }
.cm-op .cm-field{ font-size:12.5px; color:var(--text-dim); margin:4px 0 12px; }
.cm-op .cm-counts{ display:flex; justify-content:center; gap:18px; font-size:11.5px; color:var(--text-dim); margin-bottom:12px; }
.cm-op .cm-counts b{ display:block; color:var(--text); font-family:var(--mono); font-size:15px; }
.cm-empty{ text-align:center; color:var(--text-dim); padding:40px 12px; font-size:14px; line-height:1.6; }
.cm-empty b{ color:var(--text); display:block; margin-bottom:4px; font-size:15px; }

/* share sheet */
.cm-sheet-back{ position:fixed; inset:0; background:rgba(4,7,13,.6); backdrop-filter:blur(6px); z-index:900; animation:cmFade .25s ease-out; }
@keyframes cmFade{ from{opacity:0} }
.cm-sheet{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px, calc(100% - 24px)); max-height:calc(100dvh - 40px); overflow:auto; background:#0b1322; color:#d6e6f2; border:1px solid rgba(56,240,255,.35); border-radius:22px; padding:16px 18px 18px; z-index:2001; box-shadow:0 30px 90px -30px rgba(56,240,255,.35), 0 40px 80px -40px rgba(0,0,0,.9); animation:cmUp .32s cubic-bezier(.2,.8,.2,1); -webkit-overflow-scrolling:touch; font-family:'Space Grotesk',sans-serif; }
.cm-sheet-back{ z-index:2000; }
.cm-sheet::after{ content:"✕"; position:absolute; top:12px; right:14px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08); color:#d6e6f2; display:grid; place-items:center; font-size:14px; pointer-events:none; }
@keyframes cmUp{ from{ transform:translate(-50%, -46%) scale(.96); opacity:0; } }
.cm-sheet-grip{ display:none; }
.cm-sheet h3{ padding-right:40px; color:#fff; }
.cm-sheet-grip{ width:44px; height:4px; border-radius:2px; background:rgba(255,255,255,.18); margin:0 auto 14px; }
.cm-sheet h3{ font-size:17px; font-weight:650; margin-bottom:4px; }
.cm-sheet-row{ display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.cm-sheet .cm-post{ flex:1; padding:13px 20px; font-size:14px; }
.cm-sheet-close{ display:block; width:100%; margin-top:12px; background:rgba(255,255,255,.05); border:1px solid rgba(120,170,200,.2); border-radius:10px; color:#8ea3b8; font:inherit; font-size:13px; padding:10px; cursor:pointer; }

/* the coloured share tap on the verdict */
.share-feed{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:10px 16px; border-radius:12px; border:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:700; color:#fff;
  background:linear-gradient(120deg, #ff3d8b, var(--violet) 60%, var(--cyan)); background-size:200% 100%; box-shadow:0 10px 30px -12px rgba(255,61,139,.7); position:relative; animation:cmShimmer 3s ease-in-out infinite; }
.share-feed::before{ content:""; position:absolute; inset:-3px; border-radius:14px; border:2px solid rgba(255,61,139,.6); animation:cmPulse 1.8s ease-out 2; pointer-events:none; }
@keyframes cmShimmer{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.share-feed:active{ transform:scale(.97); }
.cm-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:#0b1322; border:1px solid rgba(56,240,255,.35); color:#d6e6f2; padding:11px 16px; border-radius:12px; font-size:13.5px; z-index:2200; box-shadow:0 20px 40px -20px rgba(0,0,0,.9); animation:cmUp .35s ease-out; }
.cm-toast b{ color:var(--cyan); }


/* ── stories ── */
.cm-stories .cm-sg .cm-av{ width:64px; height:64px; }
.cm-sg.mine.has .cm-av::after{ content:"↻"; font-size:12px; }
.cm-sg.mine .cm-av::after{ content:"+"; position:absolute; right:-4px; bottom:-4px; width:22px; height:22px; border-radius:50%; background:var(--cyan); color:var(--void); font-weight:800; font-size:16px; line-height:22px; text-align:center; border:2px solid var(--void); z-index:2; }
.st-viewer{ position:fixed; inset:0; background:#000; z-index:2100; flex-direction:column; animation:cmFade .2s ease-out; }
.st-viewer:not([hidden]){ display:flex; }
.st-bars{ position:absolute; top:calc(10px + env(safe-area-inset-top)); left:10px; right:10px; display:flex; gap:4px; z-index:3; }
.st-bars i{ flex:1; height:3px; background:rgba(255,255,255,.28); border-radius:2px; overflow:hidden; }
.st-bars i b{ display:block; height:100%; width:0; background:#fff; }
.st-bars i.done b{ width:100%; } .st-bars i.run b{ animation:stRun var(--dur,5s) linear forwards; }
.st-viewer.paused .st-bars i.run b{ animation-play-state:paused; }
@keyframes stRun{ to{ width:100%; } }
.st-head{ position:absolute; top:calc(24px + env(safe-area-inset-top)); left:14px; right:54px; display:flex; align-items:center; gap:10px; z-index:3; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.st-head .cm-av{ width:34px; height:34px; } .st-head b{ font-size:14px; } .st-head small{ font-size:12px; opacity:.75; margin-left:6px; }
.st-stage{ flex:1; display:grid; place-items:center; position:relative; overflow:hidden; }
.st-card{ width:100%; height:100%; display:grid; place-items:center; padding:60px 28px 90px; text-align:center; animation:stIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes stIn{ from{ opacity:0; transform:scale(1.04); } }
.st-card.text{ color:#fff; font-weight:650; font-size:clamp(24px, 5.6vw, 34px); line-height:1.35; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.st-card.text[lang="ar"]{ font-family:'Noto Kufi Arabic',sans-serif; direction:rtl; line-height:1.7; }
.st-card.media{ padding:0; } .st-card.media img, .st-card.media video{ width:100%; height:100%; object-fit:contain; background:#000; }
.st-card.render{ padding:70px 22px 100px; } .st-card.render .cm-render{ width:100%; max-width:520px; background:rgba(12,20,34,.85); border-color:rgba(160,107,255,.4); }
.st-card.render .cm-src{ font-size:20px; } .st-card.render .cm-ren{ font-size:17px; }
.st-caption{ position:absolute; bottom:96px; left:0; right:0; text-align:center; color:#fff; padding:0 24px; font-size:15px; text-shadow:0 1px 8px rgba(0,0,0,.7); }
.st-zone{ position:absolute; top:0; bottom:80px; width:35%; background:none; border:none; cursor:pointer; z-index:2; }
.st-prev{ left:0; } .st-next{ right:0; width:65%; }
.st-close{ position:absolute; top:calc(20px + env(safe-area-inset-top)); right:12px; z-index:4; background:rgba(0,0,0,.35); border:none; color:#fff; width:36px; height:36px; border-radius:50%; font-size:16px; cursor:pointer; }
.st-reply{ position:absolute; left:14px; right:14px; bottom:calc(16px + env(safe-area-inset-bottom)); display:flex; gap:8px; z-index:3; }
.st-reply input{ flex:1; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); border-radius:999px; color:#fff; font:inherit; font-size:14px; padding:11px 16px; outline:none; backdrop-filter:blur(10px); }
.st-reply input::placeholder{ color:rgba(255,255,255,.7); }
.st-reply button{ width:44px; border-radius:50%; border:none; background:#fff; color:#000; font-size:18px; cursor:pointer; }
.cm-sheet-sub{ font-size:13px; color:#8ea3b8; margin-bottom:12px; }
.st-types{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.st-type{ background:rgba(255,255,255,.05); border:1px solid rgba(120,170,200,.22); color:#d6e6f2; font:inherit; font-size:12px; padding:12px 6px; border-radius:12px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; transition:border-color .2s, background .2s; }
.st-type i{ font-style:normal; font-weight:800; font-size:18px; color:#38f0ff; }
.st-type.on{ border-color:#38f0ff; background:rgba(56,240,255,.10); }
.st-canvas{ position:relative; aspect-ratio:9/12; max-height:260px; width:100%; border-radius:16px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(160deg, #1b2f5c, #6d3fd6 60%, #ff3d8b); }
.st-canvas textarea{ width:100%; height:100%; background:transparent; border:none; color:#fff; font:inherit; font-weight:650; font-size:24px; text-align:center; padding:28px; resize:none; outline:none; }
.st-canvas textarea::placeholder{ color:rgba(255,255,255,.6); }
.st-canvas img, .st-canvas video{ width:100%; height:100%; object-fit:cover; }
.st-canvas .cm-render{ margin:16px; }
.st-dur{ position:absolute; bottom:10px; right:10px; font-family:var(--mono); font-size:11px; background:rgba(0,0,0,.55); color:#fff; padding:3px 8px; border-radius:8px; }
.st-dur.bad{ background:#ff4d5e; }

/* ── media in posts ── */
.cm-media-btn{ cursor:pointer; }
.cm-media-prev{ position:relative; margin:10px 0 4px; border-radius:14px; overflow:hidden; max-height:280px; background:#000; }
.cm-media-prev img, .cm-media-prev video{ width:100%; max-height:280px; object-fit:contain; display:block; }
.cm-media-prev .cm-x{ position:absolute; top:8px; right:8px; background:rgba(0,0,0,.5); color:#fff; border:none; width:28px; height:28px; border-radius:50%; cursor:pointer; }
.cm-pm{ position:relative; margin:12px 0 4px; border-radius:14px; overflow:hidden; background:#06101c; border:1px solid var(--edge); }
.cm-pm img, .cm-pm video{ width:100%; max-height:420px; object-fit:cover; display:block; }
.cm-pm .cm-badge{ position:absolute; top:10px; left:10px; font-family:var(--mono); font-size:10.5px; background:rgba(0,0,0,.55); color:#fff; padding:3px 8px; border-radius:8px; letter-spacing:.06em; }
.cm-pm .cm-play{ position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(circle, rgba(0,0,0,.05), rgba(0,0,0,.35)); color:#fff; font-size:44px; border:none; cursor:pointer; }
.cm-pm video::-webkit-media-controls-fullscreen-button{ display:none; }
.cm-pm .cm-play span{ width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.18); backdrop-filter:blur(8px); display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); padding-left:6px; }

/* ── message reactions ── */
.msg{ position:relative; }
.msg .rx{ display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
.msg.mine .rx{ justify-content:flex-end; }
.rx-chip{ display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:2px 8px 2px 6px; font-size:12px; cursor:pointer; color:var(--text); animation:cmPop .35s cubic-bezier(.2,1.6,.4,1); }
.rx-chip.mine{ border-color:var(--edge2); background:rgba(56,240,255,.12); }
.rx-chip b{ font-family:var(--mono); font-weight:500; font-size:11px; }
.rx-bar{ position:absolute; z-index:20; display:flex; gap:2px; background:#0b1322; border:1px solid var(--edge2); border-radius:999px; padding:5px; box-shadow:0 16px 40px -14px rgba(0,0,0,.9); animation:rxIn .22s cubic-bezier(.2,.8,.2,1); }
@keyframes rxIn{ from{ opacity:0; transform:translateY(8px) scale(.9); } }
.rx-bar button{ background:none; border:none; font-size:22px; width:38px; height:38px; border-radius:50%; cursor:pointer; transition:transform .15s; }
.rx-bar button:hover, .rx-bar button:focus-visible{ transform:scale(1.35) translateY(-3px); background:rgba(255,255,255,.06); }
.rx-hint{ font-size:11px; color:var(--text-dim); text-align:center; margin:6px 0; }
html.light .rx-bar{ background:#fff; }
/* ── reports ── */
.rp-reasons{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.rp-reason{ text-align:left; background:rgba(255,255,255,.04); border:1px solid var(--edge); color:var(--text); font:inherit; font-size:14px; padding:12px 14px; border-radius:12px; cursor:pointer; transition:border-color .2s, background .2s; }
.rp-reason.on{ border-color:var(--edge2); background:rgba(56,240,255,.08); }
.rp-card{ border:1px solid var(--edge); border-radius:14px; background:var(--glass); padding:14px; margin-bottom:12px; }
.rp-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rp-reason-tag{ margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:#FFB547; background:rgba(255,181,71,.12); border:1px solid rgba(255,181,71,.3); padding:3px 8px; border-radius:8px; }
.rp-quote{ margin:10px 0; padding:10px 12px; border-left:3px solid #ff4d5e; background:rgba(255,77,94,.06); border-radius:0 10px 10px 0; font-size:14.5px; line-height:1.55; white-space:pre-wrap; }
.rp-quote[lang="ar"]{ font-family:'Noto Kufi Arabic',sans-serif; direction:rtl; text-align:right; }
.rp-acts{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.rp-btn{ background:rgba(255,255,255,.05); border:1px solid var(--edge); color:var(--text); font:inherit; font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:9px; cursor:pointer; }
.rp-btn.danger{ border-color:rgba(255,77,94,.5); color:#ff6b7d; }
.rp-done{ text-align:center; font-family:var(--mono); font-size:11px; color:var(--text-dim); margin-top:8px; letter-spacing:.08em; }
.adm-badge{ display:inline-block; margin-left:6px; background:#ff4d5e; color:#fff; font-size:10px; font-family:var(--mono); padding:1px 6px; border-radius:8px; vertical-align:middle; }
.adm-badge[hidden]{ display:none; }
.cm-admin-only{ border:1px solid var(--edge2); }
html.light .cm{ --glass:rgba(255,255,255,.76); --edge:rgba(0,40,70,.10); --edge2:rgba(8,122,150,.4); }
html.light .cm-menu, html.light .cm-sheet, html.light .cm-toast{ background:#fff; }
html.light .cm-actions{ border-top-color:rgba(0,0,0,.06); }
@media (prefers-reduced-motion:reduce){ .cm *, .share-feed{ animation:none !important; transition:none !important; } }
.cm-follow.req{ background:transparent; color:#c9b1ff; border-color:rgba(160,107,255,.5); }
.cm-follow.req::before{ content:"◔ "; }
.cm-you-btn{ position:relative; }
.fr-badge{ position:absolute; top:-2px; right:-2px; background:#ff3d8b; color:#fff; font:700 10px/1 var(--mono); padding:3px 6px; border-radius:8px; font-style:normal; animation:cmPop .4s cubic-bezier(.2,1.6,.4,1); }
.fr-badge[hidden]{ display:none; }
.fr-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--edge); animation:cmIn .3s ease-out both; }
.fr-row.leave{ animation:cmOut .3s ease-in forwards; }
.fr-who{ flex:1; min-width:0; } .fr-who b{ font-size:14.5px; }
.fr-acts{ display:flex; gap:6px; } .fr-acts .cm-follow{ min-width:0; padding:6px 12px; }
/* 2026-10-25: user search bar at the top of the Community tab (js/community.js renderUserSearch) */
.cm-usearch{ margin-bottom:14px; }
.cm-usearch input{ min-width:0; }
.cm-usearch-x{ background:none; border:none; color:var(--text-dim); font:inherit; font-size:14px; padding:8px; margin-right:-8px; cursor:pointer; border-radius:8px; }
.cm-usearch-x:hover{ color:var(--text); }
.cm-uresults{ margin-bottom:18px; }
.cm-uhead{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--text-dim); margin:0 2px 6px; }
.cm-urow{ cursor:pointer; padding:10px 8px; border-radius:12px; transition:background .2s; }
.cm-urow:hover, .cm-urow:focus-visible{ background:rgba(255,255,255,.04); outline:none; }
html.light .cm-urow:hover, html.light .cm-urow:focus-visible{ background:rgba(0,40,70,.05); }
.cm-urow .fr-who b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:plaintext; }
@media (max-width: 640px){ .cm-usearch input{ font-size:16px; } } /* 16px stops iOS zoom */
.cm-story-btn{ background:linear-gradient(120deg, rgba(255,61,139,.14), rgba(160,107,255,.14)); border-color:rgba(255,61,139,.4); color:#ffb3d1; }
.cm-story-btn i{ display:inline-block; animation:cmSpin 6s linear infinite; }
.cm-story-btn:hover{ background:linear-gradient(120deg, rgba(255,61,139,.24), rgba(160,107,255,.24)); }

/* ── social layer v2 ── */
.cm-feedbar{ display:flex; align-items:center; gap:10px; margin:0 0 12px; flex-wrap:wrap; }
.cm-feedwhy{ font-size:12px; color:var(--text-dim); }
.cm-kinds{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 6px; }
.cm-kinds button{ background:rgba(255,255,255,.04); border:1px solid var(--edge); color:var(--text-dim); font:inherit; font-size:12px; font-weight:600; padding:6px 10px; border-radius:999px; cursor:pointer; transition:all .2s; }
.cm-kinds button.on{ background:rgba(160,107,255,.16); border-color:rgba(160,107,255,.5); color:#d9c8ff; }
.cm-kind-fields{ display:flex; flex-direction:column; gap:8px; margin:4px 0 8px; }
.cm-kind-fields input, .cm-kind-fields textarea{ width:100%; background:rgba(255,255,255,.04); border:1px solid var(--edge); border-radius:10px; color:var(--text); font:inherit; font-size:15px; padding:10px 12px; outline:none; resize:none; }
.cm-kind-fields input:focus, .cm-kind-fields textarea:focus{ border-color:var(--edge2); }
.cm-kind-fields .ar{ font-family:'Noto Kufi Arabic',sans-serif; direction:rtl; }
.cm-kind-fields small{ font-size:11.5px; color:var(--text-dim); }
.cm-field-sel{ background:rgba(255,255,255,.04); border:1px solid var(--edge); color:var(--text-dim); font:inherit; font-size:12px; padding:7px 10px; border-radius:9px; }
.cm-kindtag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#d9c8ff; background:rgba(160,107,255,.14); border:1px solid rgba(160,107,255,.35); padding:3px 8px; border-radius:7px; margin:10px 8px 0 0; }
.cm-kindtag.term{ color:#9df5b6; background:rgba(124,255,155,.10); border-color:rgba(124,255,155,.35); }
.cm-kindtag.tip{ color:#ffd18f; background:rgba(255,181,71,.12); border-color:rgba(255,181,71,.35); }
.cm-kindtag.question{ color:var(--cyan); background:rgba(56,240,255,.10); border-color:rgba(56,240,255,.35); }
.cm-fieldtag{ display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); border:1px solid var(--edge); padding:3px 8px; border-radius:7px; margin-top:10px; cursor:pointer; }
.cm-fieldtag:hover{ border-color:var(--edge2); color:var(--text); }
.cm-interp{ margin:12px 0 4px; padding:14px; border-radius:14px; background:linear-gradient(160deg, rgba(56,240,255,.08), rgba(160,107,255,.06)); border:1px solid rgba(56,240,255,.25); }
.cm-interp .cm-src{ font-size:19px; }
.cm-interp .cm-interp-q{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--cyan); margin-bottom:8px; }
.cm-interp .cm-reveal{ margin-top:10px; padding:10px 12px; border-left:3px solid #7CFF9B; background:rgba(124,255,155,.06); border-radius:0 10px 10px 0; }
.cm-interp .cm-reveal small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:#7CFF9B; margin-bottom:4px; }
.cm-interp .cm-hidden{ margin-top:10px; font-size:12.5px; color:var(--text-dim); display:flex; align-items:center; gap:8px; }
.cm-term{ margin:12px 0 4px; padding:12px 14px; border-radius:14px; border:1px solid rgba(124,255,155,.25); background:rgba(124,255,155,.05); }
.cm-term .t{ font-size:20px; font-weight:650; } .cm-term .t[lang="ar"]{ font-family:'Noto Kufi Arabic',sans-serif; direction:rtl; text-align:right; }
.cm-term .r{ font-size:16px; color:#9df5b6; margin-top:4px; } .cm-term .r[lang="ar"]{ font-family:'Noto Kufi Arabic',sans-serif; direction:rtl; text-align:right; }
.cm-term .n{ font-size:13.5px; color:var(--text-dim); margin-top:6px; line-height:1.5; }
.cm-why{ font-size:11px; color:var(--text-dim); margin:8px 0 0; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.cm-why span{ border:1px dashed var(--edge); padding:2px 7px; border-radius:6px; }
.cm-actions button.saved .cm-heart{ color:#FFB547; }
.cm-actions .spacer{ flex:1; }
.cm-c-reply{ margin-left:34px; }
.cm-c .cm-useful{ display:inline-flex; align-items:center; gap:5px; margin-left:8px; background:none; border:1px solid var(--edge); color:var(--text-dim); font:inherit; font-size:11px; padding:2px 8px; border-radius:999px; cursor:pointer; vertical-align:middle; }
.cm-c .cm-useful.on{ border-color:#7CFF9B; color:#7CFF9B; background:rgba(124,255,155,.08); }
.cm-c .cm-replyto{ margin-left:8px; background:none; border:none; color:var(--text-dim); font:inherit; font-size:11px; cursor:pointer; }
.cm-c.best{ position:relative; } .cm-c.best::before{ content:"MOST USEFUL"; position:absolute; right:0; top:-6px; font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:#7CFF9B; }
.cm-dsec{ margin-bottom:22px; }
.cm-dhead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cm-dhead b{ font-size:15px; } .cm-dhead span{ font-size:11.5px; color:var(--text-dim); text-align:right; }
.cm-fields{ display:flex; gap:8px; flex-wrap:wrap; }
.cm-fields button{ background:rgba(255,255,255,.04); border:1px solid var(--edge); color:var(--text-dim); font:inherit; font-size:12.5px; padding:7px 12px; border-radius:999px; cursor:pointer; transition:all .2s; }
.cm-fields button.on{ background:rgba(56,240,255,.10); border-color:var(--edge2); color:var(--text); }
.cm-fields button b{ font-family:var(--mono); font-weight:500; opacity:.7; margin-left:5px; font-size:11px; }
.cm-suggest-row .cm-sg{ width:88px; } .cm-suggest-row .cm-sg em{ display:block; font-style:normal; font-size:10px; color:var(--cyan); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-more-btn{ display:block; margin:14px auto 0; background:rgba(255,255,255,.05); border:1px solid var(--edge); color:var(--text); font:inherit; font-size:13px; font-weight:600; padding:10px 22px; border-radius:999px; cursor:pointer; }
.sd-list{ max-height:40vh; overflow:auto; }
.sd-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--edge); background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left; color:var(--text); font:inherit; cursor:pointer; }
.sd-row b{ font-size:14.5px; } .sd-row small{ display:block; font-size:11.5px; color:var(--text-dim); }
.nf-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--edge); cursor:pointer; }
.nf-row.unread{ background:linear-gradient(90deg, rgba(56,240,255,.06), transparent); margin:0 -8px; padding:11px 8px; border-radius:10px; }
.nf-row .nf-txt{ flex:1; font-size:14px; line-height:1.4; } .nf-row .nf-txt b{ font-weight:650; } .nf-row .nf-time{ font-size:11px; color:var(--text-dim); white-space:nowrap; }
.nf-row .nf-avs{ display:flex; } .nf-row .nf-avs .cm-av{ margin-right:-10px; }
.msg .post-ref{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:8px 12px; border-radius:10px; background:rgba(56,240,255,.10); border:1px solid rgba(56,240,255,.35); color:var(--cyan); font-size:13px; font-weight:600; cursor:pointer; }
.cm-searchhit{ margin-bottom:18px; }
.cm-searchhit h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--text-dim); margin:0 0 8px; }
.st-del{ position:absolute; top:calc(70px + env(safe-area-inset-top)); right:12px; z-index:4; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.3); color:#fff; font:inherit; font-size:12px; padding:6px 10px; border-radius:999px; cursor:pointer; }



/* ============ OPERATOR PROFILE — COMMAND CENTER ============ */
#statsPage{ max-width:1180px; margin:0 auto; position:relative;
  --jb:#59c8ff; --jbd:rgba(89,200,255,.75); --jb2:#9be4ff; --jbdim:#3d6e8a; --jbfaint:rgba(89,200,255,.14);
  --jbwarn:#ffcf7d; --jbalert:#b9a5ff; color:#bfe6f7; }

/* atmosphere: polar grid + drifting light */
#statsPage::before{ content:""; position:absolute; inset:-40px -20px; z-index:-2; pointer-events:none;
  background:radial-gradient(720px 480px at 50% 240px, rgba(89,200,255,.07), transparent 70%),
             radial-gradient(600px 420px at 85% 75%, rgba(120,110,255,.05), transparent 70%); }
#statsPage::after{ content:""; position:absolute; inset:-40px -20px; z-index:-2; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(89,200,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(89,200,255,.045) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(75% 65% at 50% 32%, #000 30%, transparent); }
#statsPage .jv-amb{ display:none; }

/* ---- top command bar ---- */
#statsPage .ops-head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:10px 14px; margin-bottom:18px; border:1px solid var(--jbfaint); border-radius:2px;
  background:linear-gradient(180deg, rgba(10,20,32,.75), rgba(6,12,22,.85));
  position:relative; }
#statsPage .ops-head::before{ content:""; position:absolute; left:-1px; top:-1px; width:22px; height:22px;
  border-top:1px solid var(--jbd); border-left:1px solid var(--jbd); }
#statsPage .ops-head::after{ content:""; position:absolute; right:-1px; bottom:-1px; width:22px; height:22px;
  border-bottom:1px solid var(--jbd); border-right:1px solid var(--jbd); }
#statsPage .ops-crumb{ display:flex; align-items:baseline; gap:10px; }
#statsPage .ops-crumb span{ font-family:var(--mono); font-size:8.5px; letter-spacing:3px; color:var(--jbdim); }
#statsPage .ops-crumb em{ font-style:normal; color:#254456; }
#statsPage .ops-crumb .home-title{ margin:0; font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.34em; color:var(--jb2); text-transform:uppercase; text-align:left;
  text-shadow:0 0 14px rgba(89,200,255,.5); }
#statsPage .ops-crumb .home-title::before{ content:none; }
#statsPage .ops-head-r{ display:flex; align-items:center; gap:18px; }
#statsPage .ops-live{ display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:2.5px; color:var(--jb); }
#statsPage .ops-live i{ width:5px; height:5px; border-radius:50%; background:var(--jb);
  box-shadow:0 0 8px var(--jb); animation:jbPulse 2.2s infinite; }
@keyframes jbPulse{ 50%{ opacity:.2; } }
#statsPage .ops-clock{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--jb2);
  font-variant-numeric:tabular-nums; }
#statsPage .stats-back{ border-color:var(--jbfaint); color:var(--jbdim); }

/* ---- the bridge grid ---- */
#statsPage .jb-grid{ display:grid; grid-template-columns:270px 1fr 290px; gap:16px; align-items:start; margin-bottom:16px; }
@media(max-width:960px){ #statsPage .jb-grid{ grid-template-columns:1fr; }
  #statsPage .jb-center{ order:-1; } }

/* holo frame (Arwes-style corner cuts + draw-in) */
#statsPage .jbf{ position:relative; padding:14px 15px; border:1px solid var(--jbfaint); border-radius:2px;
  background:linear-gradient(180deg, rgba(10,22,34,.6), rgba(5,12,20,.82));
  animation:jbIn .55s cubic-bezier(.16,.84,.28,1) both; animation-delay:calc(var(--i,0)*100ms); }
@keyframes jbIn{ from{ opacity:0; transform:translateY(12px); } }
#statsPage .jbf::before, #statsPage .jbf::after{ content:""; position:absolute; width:16px; height:16px; pointer-events:none; }
#statsPage .jbf::before{ top:-1px; left:-1px; border-top:1px solid var(--jbd); border-left:1px solid var(--jbd); }
#statsPage .jbf::after{ bottom:-1px; right:-1px; border-bottom:1px solid var(--jbd); border-right:1px solid var(--jbd); }
#statsPage .jbf h5{ margin:0 0 12px; display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:2.5px; color:var(--jbdim); }
#statsPage .jbf h5 em{ font-style:normal; font-size:7.5px; letter-spacing:1.5px; color:#254456; }
#statsPage .jbf + .jbf{ margin-top:14px; }
#statsPage .jbf:hover{ border-color:rgba(89,200,255,.3); }

/* ---- left stack: system bars + mini gauges ---- */
#statsPage .jb-sys{ margin-bottom:11px; }
#statsPage .jb-sys .nm{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:9px; letter-spacing:1.2px; color:#8fc4dd; margin-bottom:4px; }
#statsPage .jb-sys .nm b{ color:var(--jb2); font-weight:600; }
#statsPage .jb-sys .nm b.lo{ color:var(--jbwarn); }
#statsPage .jb-seg{ display:flex; gap:2px; height:8px; }
#statsPage .jb-seg i{ flex:1; background:rgba(89,200,255,.08); }
#statsPage .jb-seg i.on{ background:var(--jb); box-shadow:0 0 6px rgba(89,200,255,.55); }
#statsPage .jb-seg i.on.lo{ background:var(--jbwarn); box-shadow:0 0 6px rgba(255,207,125,.45); }
#statsPage .jb-gauges{ display:flex; justify-content:space-between; gap:8px; margin-top:4px; }
#statsPage .jb-g{ text-align:center; flex:1; }
#statsPage .jb-g .ring{ width:56px; height:56px; margin:0 auto; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(closest-side, rgba(5,12,20,.95) 72%, transparent 73%); }
#statsPage .jb-g .ring::before{ content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--jb) calc(var(--p)*1%), rgba(89,200,255,.1) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
#statsPage .jb-g .ring b{ font-family:var(--mono); font-size:11px; color:var(--jb2); }
#statsPage .jb-g .k{ font-family:var(--mono); font-size:6.5px; letter-spacing:1.5px; color:var(--jbdim); margin-top:5px; }

/* ---- center: reticle identity ---- */
#statsPage .jb-center{ text-align:center; position:relative; animation:jbIn .6s .1s both; }
#statsPage .jb-ret{ position:relative; width:min(290px, 78vw); aspect-ratio:1; margin:0 auto 2px; }
#statsPage .jb-ret svg.rings{ position:absolute; inset:0; overflow:visible; }
#statsPage .jb-ret .r-slow{ animation:jbSpin 40s linear infinite; transform-origin:50% 50%; }
#statsPage .jb-ret .r-mid{ animation:jbSpin 22s linear infinite reverse; transform-origin:50% 50%; }
#statsPage .jb-ret .r-fast{ animation:jbSpin 12s linear infinite; transform-origin:50% 50%; }
@keyframes jbSpin{ to{ transform:rotate(360deg); } }
#statsPage .jb-ret .big-avatar{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; }
#statsPage .jb-ret .jv-scan{ position:absolute; left:18%; right:18%; height:1px;
  background:linear-gradient(90deg, transparent, var(--jbd), transparent);
  animation:jbScanY 5s ease-in-out infinite; pointer-events:none; }
@keyframes jbScanY{ 0%,100%{ top:22%; opacity:0; } 12%{ opacity:.9; } 50%{ top:78%; } 64%{ opacity:.9; } 78%{ opacity:0; } }
#statsPage .jb-name{ font-family:var(--mono); font-weight:700; font-size:21px; letter-spacing:.3em;
  color:#eaf9ff; text-shadow:0 0 22px rgba(89,200,255,.55); margin-top:2px;
  animation:jbName 1s .3s cubic-bezier(.16,.84,.28,1) both; }
@keyframes jbName{ from{ opacity:0; letter-spacing:.6em; } to{ opacity:1; letter-spacing:.3em; } }
#statsPage .jb-role{ margin-top:6px; font-family:var(--mono); font-size:9px; letter-spacing:3px; color:var(--jb);
  animation:jbIn .6s .55s both; }
#statsPage .jv-dots{ display:flex; justify-content:center; gap:20px; margin-top:12px; flex-wrap:wrap; }
#statsPage .jv-dots .ops-dot{ animation:jbIn .5s both; }
#statsPage .jv-dots .ops-dot:nth-child(1){ animation-delay:.7s; }
#statsPage .jv-dots .ops-dot:nth-child(2){ animation-delay:.82s; }
#statsPage .jv-dots .ops-dot:nth-child(3){ animation-delay:.94s; }
#statsPage .ops-dot{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:8.5px; letter-spacing:2px; }
#statsPage .ops-dot i{ width:5px; height:5px; border-radius:50%; }
#statsPage .ops-dot.g{ color:var(--jb); } #statsPage .ops-dot.g i{ background:var(--jb); box-shadow:0 0 7px var(--jb); animation:jbPulse 2.2s infinite; }
#statsPage .ops-dot.a{ color:var(--jbwarn); } #statsPage .ops-dot.a i{ background:var(--jbwarn); }
#statsPage .ops-dot.c{ color:var(--jb2); } #statsPage .ops-dot.c i{ background:var(--jb2); }
#statsPage .ops-dot.v{ color:var(--jbalert); } #statsPage .ops-dot.v i{ background:var(--jbalert); }
#statsPage .jb-center .op-meta{ margin-top:11px; font-family:var(--mono); font-size:9px; line-height:2; color:var(--jbdim);
  animation:jbIn .6s 1.02s both; }
#statsPage .jb-center .op-meta b{ color:#a6d8ee; font-weight:600; }
#statsPage .jb-center .rank-badge{ margin-top:10px; display:inline-block; border-radius:2px;
  border:1px solid rgba(89,200,255,.4); color:var(--jb2); background:rgba(89,200,255,.06);
  font-family:var(--mono); letter-spacing:2.5px; animation:jbIn .6s 1.12s both; }
#statsPage .jb-center .rank-badge.founder{ border-color:rgba(255,215,120,.5); color:#ffe3a1; background:rgba(255,215,120,.05); }
#statsPage .quick-strip{ display:none; }
/* readout under center */
#statsPage .jb-readout{ margin-top:14px; text-align:left; }

/* status rows */
#statsPage .ops-sr{ display:flex; justify-content:space-between; align-items:center; padding:7px 0;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.8px; color:#8fc4dd; }
#statsPage .ops-sr + .ops-sr{ border-top:1px dashed rgba(89,200,255,.1); }
#statsPage .ops-sr b{ color:var(--jb2); font-weight:600; }

/* ---- right stack: radar + waveform ---- */
#statsPage .jb-radar{ position:relative; width:100%; aspect-ratio:1; max-width:330px; margin:0 auto; }
#statsPage .jb-radar svg{ position:absolute; inset:0; overflow:visible; }
#statsPage .jb-radar .sweep{ animation:jbSpin 6s linear infinite; transform-origin:50% 50%; }
#statsPage .jb-threats{ margin-top:12px; }
#statsPage .jb-threats .ops-sr b.lo{ color:var(--jbwarn); }
#statsPage .jb-wave{ display:block; width:100%; height:74px; }
#statsPage .jb-wave polyline{ stroke-dasharray:800; stroke-dashoffset:800; animation:jbDraw 1.6s .5s ease forwards; }
@keyframes jbDraw{ to{ stroke-dashoffset:0; } }
#statsPage .ops-areameta{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:8px; letter-spacing:1.2px; color:var(--jbdim); margin-top:6px; }
#statsPage .lastdot{ animation:jbPing 2.6s 1.8s ease-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes jbPing{ 0%{ opacity:.9; transform:scale(1); } 45%{ opacity:0; transform:scale(3); } 100%{ opacity:0; } }

/* ---- ops log ---- */
#statsPage .ops-log{ position:relative; padding-left:16px; text-align:left; }
#statsPage .ops-log::before{ content:""; position:absolute; left:3px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, var(--jbd), transparent); transform-origin:top;
  animation:jbLine 1s .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes jbLine{ from{ transform:scaleY(0); } }
#statsPage .ops-ev{ position:relative; padding:6px 0 6px 6px; animation:jbIn .5s both; animation-delay:calc(.55s + var(--j,0)*100ms); }
#statsPage .ops-ev::before{ content:""; position:absolute; left:-16px; top:12px; width:6px; height:6px;
  border-radius:50%; background:#05101a; border:1px solid var(--jb); box-shadow:0 0 7px rgba(89,200,255,.5); }
#statsPage .ops-ev.hot::before{ border-color:var(--jbalert); box-shadow:0 0 7px rgba(185,165,255,.5); }
#statsPage .ops-ev .ts{ font-family:var(--mono); font-size:7.5px; letter-spacing:1.8px; color:#254456; }
#statsPage .ops-ev .tx{ font-size:11.5px; color:#a6d8ee; margin-top:2px; }
#statsPage .ops-ev .tx b{ color:#eaf9ff; }

/* ---- comms ---- */
#statsPage .ops-msg{ display:flex; align-items:center; gap:10px; padding:8px 2px; cursor:pointer; text-align:left;
  border-bottom:1px dashed rgba(89,200,255,.1); transition:background .2s, padding-left .2s;
  animation:jbIn .5s both; animation-delay:calc(.4s + var(--j,0)*90ms); }
#statsPage .ops-msg:hover{ background:rgba(89,200,255,.06); padding-left:8px; }
#statsPage .ops-msg:last-of-type{ border-bottom:none; }
#statsPage .ops-msg .who{ font-family:var(--mono); font-size:9px; letter-spacing:1px; color:#8fc4dd; min-width:84px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#statsPage .ops-msg .prev{ flex:1; font-size:11px; color:#4d7d97; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#statsPage .ops-msg .nb{ font-family:var(--mono); font-size:7.5px; color:var(--jbalert);
  border:1px solid rgba(185,165,255,.45); padding:2px 7px; letter-spacing:1.2px; }
#statsPage .ops-comms-btn{ margin-top:10px; width:100%; cursor:pointer; border-radius:2px;
  background:rgba(89,200,255,.07); border:1px solid rgba(89,200,255,.35); color:var(--jb2);
  font-family:var(--mono); font-size:9px; letter-spacing:2.5px; padding:10px;
  transition:box-shadow .25s, background .25s; position:relative; overflow:hidden; }
#statsPage .ops-comms-btn:hover{ background:rgba(89,200,255,.13); box-shadow:0 0 22px rgba(89,200,255,.2); }

/* ---- bottom uplink band ---- */
#statsPage .jb-uplink{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 15px; border:1px solid var(--jbfaint); border-radius:2px; margin-bottom:16px;
  background:linear-gradient(180deg, rgba(10,22,34,.6), rgba(5,12,20,.82));
  animation:jbIn .6s .3s both; }
#statsPage .jb-uplink .lbl{ font-family:var(--mono); font-size:8.5px; letter-spacing:2.5px; color:var(--jbdim); white-space:nowrap; }
#statsPage .jb-uplink .lbl b{ color:var(--jb2); }
#statsPage .jb-charge{ flex:1; min-width:160px; display:flex; gap:3px; height:10px; }
#statsPage .jb-charge i{ flex:1; background:rgba(89,200,255,.08); transform:skewX(-14deg); }
#statsPage .jb-charge i.on{ background:var(--jb); box-shadow:0 0 8px rgba(89,200,255,.5); }

/* secondary panels harmonized */
#statsPage .ops-panel, #statsPage .stats-panel{ border-radius:2px; border-color:var(--jbfaint);
  background:linear-gradient(180deg, rgba(10,22,34,.55), rgba(5,12,20,.8)); box-shadow:none; }
#statsPage .stats-panel h3{ display:none; }
#statsPage #rankPanel{ display:none !important; }
#statsPage .ops-ph span{ color:var(--jbdim); } #statsPage .ops-ph em{ color:#254456; }
#statsPage .acct-box{ border-style:dashed; }
#statsPage .ops-empty{ font-family:var(--mono); font-size:10px; letter-spacing:.8px; color:#3d6e8a; padding:12px 0 4px; line-height:1.9; text-align:left; }
#statsPage .ops-empty b{ color:#8fc4dd; }

/* ---- LEVEL PROGRESSION band ---- */
#statsPage .jb-level{ padding:16px 18px; border:1px solid var(--jbfaint); border-radius:2px; margin-bottom:16px;
  background:linear-gradient(180deg, rgba(10,22,34,.6), rgba(5,12,20,.82)); position:relative;
  animation:jbIn .6s .3s both; }
#statsPage .jb-level::before{ content:""; position:absolute; top:-1px; left:-1px; width:16px; height:16px;
  border-top:1px solid var(--jbd); border-left:1px solid var(--jbd); }
#statsPage .jb-level::after{ content:""; position:absolute; bottom:-1px; right:-1px; width:16px; height:16px;
  border-bottom:1px solid var(--jbd); border-right:1px solid var(--jbd); }
#statsPage .jb-lvrow{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
#statsPage .jb-lvbadge{ text-align:center; flex:none; }
#statsPage .jb-lvbadge .lv{ font-family:var(--mono); font-weight:700; font-size:30px; letter-spacing:2px;
  color:var(--jb2); text-shadow:0 0 18px rgba(89,200,255,.55); }
#statsPage .jb-lvbadge .rn{ font-family:var(--mono); font-size:8px; letter-spacing:2.5px; color:var(--jbdim); margin-top:2px; }
#statsPage .jb-track{ flex:1; min-width:240px; display:flex; align-items:center; }
#statsPage .jb-node{ position:relative; width:14px; height:14px; flex:none; border-radius:50%;
  border:1px solid rgba(89,200,255,.4); background:#05101a; }
#statsPage .jb-node.done{ background:var(--jb); box-shadow:0 0 10px rgba(89,200,255,.6); border-color:var(--jb); }
#statsPage .jb-node.cur{ border-color:var(--jb2); box-shadow:0 0 12px rgba(155,228,255,.7); }
#statsPage .jb-node.cur::after{ content:""; position:absolute; inset:2px; border-radius:50%; background:var(--jb2);
  animation:jbPulse 1.8s infinite; }
#statsPage .jb-node .nl{ position:absolute; top:18px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:6.5px; letter-spacing:1px; color:var(--jbdim); white-space:nowrap; }
#statsPage .jb-node.cur .nl{ color:var(--jb2); }
#statsPage .jb-conn{ flex:1; height:1px; background:rgba(89,200,255,.15); position:relative; }
#statsPage .jb-conn i{ position:absolute; inset:0; background:var(--jb); transform-origin:left;
  box-shadow:0 0 6px rgba(89,200,255,.5); }
#statsPage .jb-reqs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 22px; margin-top:26px; }
@media(max-width:760px){ #statsPage .jb-reqs{ grid-template-columns:1fr; } }
#statsPage .jb-req .nm{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:8.5px; letter-spacing:1.2px; color:#8fc4dd; margin-bottom:4px; }
#statsPage .jb-req .nm b{ color:var(--jb2); }
#statsPage .jb-req .tr{ height:4px; background:rgba(89,200,255,.08); position:relative; }
#statsPage .jb-req .tr i{ position:absolute; left:0; top:0; bottom:0; background:var(--jb);
  box-shadow:0 0 6px rgba(89,200,255,.45); transition:width .9s cubic-bezier(.2,.8,.2,1); }
#statsPage .jb-req .tr i.full{ background:#7fe0b2; box-shadow:0 0 6px rgba(127,224,178,.5); }

/* tier chip on discipline rows */
#statsPage .jb-tier{ font-family:var(--mono); font-size:7px; letter-spacing:1px; padding:1px 5px;
  border:1px solid rgba(89,200,255,.35); color:var(--jb); margin-right:6px; }
#statsPage .jb-tier.t5{ color:#7fe0b2; border-color:rgba(127,224,178,.5); }
#statsPage .jb-tier.lo{ color:var(--jbwarn); border-color:rgba(255,207,125,.45); }

/* load distribution stacked bar */
#statsPage .jb-dist{ display:flex; height:10px; overflow:hidden; margin-bottom:10px; }
#statsPage .jb-dist i{ height:100%; }
#statsPage .jb-dleg{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:8px; letter-spacing:.8px; color:var(--jbdim); padding:3px 0; }
#statsPage .jb-dleg b{ color:#8fc4dd; font-weight:600; }
#statsPage .jb-dleg .sw{ display:inline-block; width:7px; height:7px; margin-right:6px; vertical-align:-1px; }

/* accuracy trend */
#statsPage .jb-trend{ display:block; width:100%; height:80px; }
#statsPage .jb-trend polyline{ stroke-dasharray:700; stroke-dashoffset:700; animation:jbDraw 1.4s .6s ease forwards; }

/* DRG composition */
#statsPage .jb-drgc .nm{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:8.5px; letter-spacing:1.2px; color:#8fc4dd; margin-bottom:4px; }
#statsPage .jb-drgc .nm b{ color:var(--jb2); }
#statsPage .jb-drgc .tr{ height:4px; background:rgba(89,200,255,.08); position:relative; margin-bottom:11px; }
#statsPage .jb-drgc .tr i{ position:absolute; left:0; top:0; bottom:0; background:var(--jb); box-shadow:0 0 6px rgba(89,200,255,.45); }
#statsPage .jb-drgtotal{ font-family:var(--mono); font-size:20px; font-weight:700; color:var(--jb2);
  letter-spacing:2px; text-shadow:0 0 14px rgba(89,200,255,.5); margin-bottom:10px; }
#statsPage .jb-drgtotal small{ font-size:9px; color:var(--jbdim); letter-spacing:2px; }

/* ---- data ticker strip ---- */
#statsPage .jb-ticker{ overflow:hidden; border:1px solid var(--jbfaint); border-radius:2px; margin-bottom:16px;
  background:rgba(5,12,20,.7); padding:7px 0; position:relative; }
#statsPage .jb-ticker::before, #statsPage .jb-ticker::after{ content:""; position:absolute; top:0; bottom:0; width:50px; z-index:1; }
#statsPage .jb-ticker::before{ left:0; background:linear-gradient(90deg, #060d16, transparent); }
#statsPage .jb-ticker::after{ right:0; background:linear-gradient(-90deg, #060d16, transparent); }
#statsPage .jb-ticker .tk{ display:inline-block; white-space:nowrap; font-family:var(--mono); font-size:9px;
  letter-spacing:2px; color:var(--jbdim); animation:jbTick 26s linear infinite; padding-left:100%; }
#statsPage .jb-ticker .tk b{ color:var(--jb2); }
#statsPage .jb-ticker .tk em{ font-style:normal; color:#254456; margin:0 14px; }
@keyframes jbTick{ to{ transform:translateX(-100%); } }

/* ---- 28-day heat calendar ---- */
#statsPage .jb-heat{ display:grid; grid-template-columns:repeat(14,1fr); gap:4px; }
#statsPage .jb-heat i{ aspect-ratio:1; border-radius:1px; background:rgba(89,200,255,.07); position:relative; }
#statsPage .jb-heat i[data-l="1"]{ background:rgba(89,200,255,.25); }
#statsPage .jb-heat i[data-l="2"]{ background:rgba(89,200,255,.5); box-shadow:0 0 5px rgba(89,200,255,.3); }
#statsPage .jb-heat i[data-l="3"]{ background:rgba(89,200,255,.8); box-shadow:0 0 8px rgba(89,200,255,.5); }
#statsPage .jb-heat i[data-l="4"]{ background:#9be4ff; box-shadow:0 0 10px rgba(155,228,255,.7); }
#statsPage .jb-heatleg{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:7.5px; letter-spacing:1.2px; color:var(--jbdim); margin-top:7px; }

/* ---- spider / radial polygon ---- */
#statsPage .jb-spider{ display:block; margin:0 auto; max-width:230px; width:100%; }
#statsPage .jb-spider polygon.val{ animation:jbSpiderIn 1s .5s cubic-bezier(.2,.8,.2,1) both; transform-origin:center; transform-box:fill-box; }
@keyframes jbSpiderIn{ from{ transform:scale(.2); opacity:0; } }

/* ---- gauge cluster: semicircle + thermometer + EQ ---- */
#statsPage .jb-cluster{ display:flex; gap:20px; align-items:flex-end; justify-content:space-around; flex-wrap:wrap; }
#statsPage .jb-semi{ text-align:center; }
#statsPage .jb-semi svg{ display:block; }
#statsPage .jb-semi .k{ font-family:var(--mono); font-size:7px; letter-spacing:1.5px; color:var(--jbdim); margin-top:4px; }
#statsPage .jb-therm{ text-align:center; }
#statsPage .jb-therm .tube{ position:relative; width:12px; height:86px; margin:0 auto; border:1px solid rgba(89,200,255,.3);
  border-radius:7px; overflow:hidden; background:rgba(89,200,255,.05); }
#statsPage .jb-therm .tube i{ position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, #9be4ff, #59c8ff); box-shadow:0 0 10px rgba(89,200,255,.6);
  transition:height 1s cubic-bezier(.2,.8,.2,1); }
#statsPage .jb-therm b{ display:block; font-family:var(--mono); font-size:12px; color:var(--jb2); margin-top:5px; }
#statsPage .jb-therm .k{ font-family:var(--mono); font-size:7px; letter-spacing:1.5px; color:var(--jbdim); margin-top:2px; }
#statsPage .jb-eq{ text-align:center; }
#statsPage .jb-eq .cols{ display:flex; align-items:flex-end; gap:5px; height:86px; }
#statsPage .jb-eq .cols i{ width:12px; background:linear-gradient(180deg, #9be4ff, rgba(89,200,255,.25));
  box-shadow:0 0 8px rgba(89,200,255,.35); animation:jbEq 3.2s ease-in-out infinite; transform-origin:bottom; }
#statsPage .jb-eq .cols i:nth-child(2){ animation-delay:.5s; } #statsPage .jb-eq .cols i:nth-child(3){ animation-delay:1.1s; }
@keyframes jbEq{ 50%{ transform:scaleY(.88); } }
#statsPage .jb-eq .k{ font-family:var(--mono); font-size:7px; letter-spacing:1.5px; color:var(--jbdim); margin-top:5px; }
#statsPage .jb-eq .lbls{ display:flex; gap:5px; justify-content:center; margin-top:4px; }
#statsPage .jb-eq .lbls span{ width:12px; font-family:var(--mono); font-size:6px; color:var(--jbdim); }

/* ---- target lock ---- */
#statsPage .jb-lock{ position:relative; display:inline-block; padding:10px 18px; margin-top:4px; }
#statsPage .jb-lock .tgt{ font-family:var(--mono); font-size:12px; letter-spacing:2.5px; color:var(--jbwarn); }
#statsPage .jb-lock .pct{ font-family:var(--mono); font-size:8px; letter-spacing:1.5px; color:var(--jbdim); margin-top:3px; }
#statsPage .jb-lock::before, #statsPage .jb-lock::after,
#statsPage .jb-lock .c3, #statsPage .jb-lock .c4{ content:""; position:absolute; width:11px; height:11px;
  border:0 solid var(--jbwarn); animation:jbLock 2s ease-in-out infinite; }
#statsPage .jb-lock::before{ top:0; left:0; border-top-width:1.5px; border-left-width:1.5px; }
#statsPage .jb-lock::after{ top:0; right:0; border-top-width:1.5px; border-right-width:1.5px; }
#statsPage .jb-lock .c3{ bottom:0; left:0; border-bottom-width:1.5px; border-left-width:1.5px; }
#statsPage .jb-lock .c4{ bottom:0; right:0; border-bottom-width:1.5px; border-right-width:1.5px; }
@keyframes jbLock{ 50%{ transform:scale(1.18); opacity:.55; } }

/* ---- expanded gauge cluster ---- */
#statsPage .jb-cluster{ display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));
  gap:20px 14px; align-items:end; justify-items:center; }
#statsPage .jb-band{ display:grid; grid-template-columns:290px 1fr 290px; gap:14px; align-items:start; margin-bottom:14px; }
@media(max-width:1020px){ #statsPage .jb-band{ grid-template-columns:1fr; } #statsPage .jb-band .jb-cluster-wide{ order:-1; } }
#statsPage .jb-band .jbf{ margin:0; }
#statsPage .jb-sq .jb-spider{ max-width:186px; }
#statsPage .jb-sq .jb-lock{ padding:7px 13px; margin-top:0; }
#statsPage .jb-sq .jb-lock .tgt{ font-size:10px; letter-spacing:1.8px; }
#statsPage .jb-sq .jb-lock .pct{ font-size:7px; }
#statsPage .jb-sq.jb-drgc .tr{ margin-bottom:8px; }
#statsPage .jb-sq .jb-drgtotal{ font-size:16px; margin-bottom:8px; }
#statsPage .jb-cluster-wide{ margin:0; text-align:center; }
#statsPage .jb-cluster-wide h5{ text-align:left; }
/* elevation (points altitude) */
#statsPage .jb-elev{ text-align:center; }
#statsPage .jb-elev .col{ position:relative; width:34px; height:96px; margin:0 auto;
  border-left:1px solid rgba(89,200,255,.3); border-right:1px solid rgba(89,200,255,.12); }
#statsPage .jb-elev .col .tk{ position:absolute; left:-5px; width:9px; height:1px; background:rgba(89,200,255,.35); }
#statsPage .jb-elev .col .tkl{ position:absolute; left:-40px; width:32px; text-align:right;
  font-family:var(--mono); font-size:6px; color:#254456; transform:translateY(-50%); }
#statsPage .jb-elev .col .marker{ position:absolute; left:2px; right:4px; display:flex; align-items:center; gap:3px;
  transform:translateY(50%); transition:bottom 1.4s cubic-bezier(.2,.8,.2,1); }
#statsPage .jb-elev .col .marker i{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
  border-bottom:7px solid #7fe0b2; filter:drop-shadow(0 0 5px rgba(127,224,178,.7)); animation:jbHover 2.6s ease-in-out infinite; }
@keyframes jbHover{ 50%{ transform:translateY(-3px); } }
#statsPage .jb-elev .col .trail{ position:absolute; left:12px; width:1px; bottom:0;
  background:linear-gradient(180deg, rgba(127,224,178,.6), transparent); }
#statsPage .jb-elev b{ display:block; font-family:var(--mono); font-size:11px; color:#7fe0b2; margin-top:5px; }
#statsPage .jb-elev .k, #statsPage .jb-chain .k{ font-family:var(--mono); font-size:7px; letter-spacing:1.5px; color:var(--jbdim); margin-top:3px; }
/* day chain */
#statsPage .jb-chain{ text-align:center; }
#statsPage .jb-chain .links{ display:flex; gap:4px; align-items:flex-end; height:96px; padding-bottom:4px; }
#statsPage .jb-chain .links i{ width:10px; border-radius:2px; background:rgba(89,200,255,.1); height:22%; }
#statsPage .jb-chain .links i.on{ background:linear-gradient(180deg,#9be4ff,#59c8ff);
  box-shadow:0 0 8px rgba(89,200,255,.55); animation:jbChainUp .5s cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes jbChainUp{ from{ transform:scaleY(.2); opacity:0; } }
#statsPage .jb-chain b{ display:block; font-family:var(--mono); font-size:12px; color:var(--jb2); margin-top:4px; }
#statsPage .jb-needle{ animation:jbNeedle 1.3s .4s cubic-bezier(.2,.85,.3,1.15) both; }
@keyframes jbNeedle{ from{ transform:rotate(-84deg); } to{ transform:rotate(0deg); } }
#statsPage .jb-dial{ text-align:center; }
#statsPage .jb-dial .k, #statsPage .jb-semi .k{ font-family:var(--mono); font-size:7px; letter-spacing:1.5px; color:var(--jbdim); margin-top:4px; }
#statsPage .jb-dial b{ font-family:var(--mono); font-size:11px; color:var(--jb2); }
#statsPage .jb-drift{ text-align:center; }
#statsPage .jb-drift .nd{ animation:jbWobble 4s 1.6s ease-in-out infinite; }
@keyframes jbWobble{ 0%,100%{ transform:rotate(0deg); } 30%{ transform:rotate(2.5deg); } 70%{ transform:rotate(-2.5deg); } }
#statsPage .jb-core{ text-align:center; }
#statsPage .jb-core svg .spin{ animation:jbSpin 24s linear infinite; transform-origin:50% 50%; }
#statsPage .jb-scope{ text-align:center; }
#statsPage .jb-scope .win{ width:104px; height:56px; border:1px solid rgba(89,200,255,.25); overflow:hidden; position:relative;
  background:rgba(89,200,255,.03); }
#statsPage .jb-scope .win svg{ position:absolute; top:0; left:0; height:100%; width:200%;
  animation:jbScope 3.5s linear infinite; }
@keyframes jbScope{ to{ transform:translateX(-50%); } }

/* ---- written analysis block ---- */
#statsPage .jb-analysis{ margin-top:14px; padding:12px 14px; border:1px dashed rgba(89,200,255,.22);
  background:rgba(89,200,255,.03); text-align:left; animation:jbIn .6s .3s both; }
#statsPage .jb-analysis .ah{ font-family:var(--mono); font-size:8px; letter-spacing:2.5px; color:var(--jbdim); margin-bottom:8px; }
#statsPage .jb-analysis p{ margin:0; font-size:12px; line-height:1.8; color:#a6d8ee; }
#statsPage .jb-analysis p b{ color:#eaf9ff; }
#statsPage .jb-analysis p .gd{ color:#7fe0b2; }
#statsPage .jb-analysis p .wk{ color:var(--jbwarn); }

/* reticle parallax */
#statsPage .jb-ret{ transition:transform .25s ease-out; will-change:transform; }

@media(max-width:640px){ #statsPage .jb-name{ font-size:19px; } }
@media (prefers-reduced-motion:reduce){
  #statsPage .jbf, #statsPage .jb-center, #statsPage .jb-uplink, #statsPage .ops-ev, #statsPage .ops-msg,
  #statsPage .jb-name, #statsPage .jb-role, #statsPage .jv-dots .ops-dot, #statsPage .jb-center .op-meta,
  #statsPage .jb-center .rank-badge{ animation:none; }
  #statsPage .jb-ret .r-slow, #statsPage .jb-ret .r-mid, #statsPage .jb-ret .r-fast,
  #statsPage .jb-radar .sweep{ animation:none; }
  #statsPage .jv-scan{ display:none; }
  #statsPage .jb-wave polyline{ animation:none; stroke-dashoffset:0; }
  #statsPage .lastdot{ animation:none; opacity:0; }
  #statsPage .ops-log::before{ animation:none; }
  #statsPage .ops-live i, #statsPage .ops-dot.g i{ animation:none; }
  #statsPage .jb-level, #statsPage .jb-node.cur::after{ animation:none; }
  #statsPage .jb-ticker .tk, #statsPage .jb-eq .cols i, #statsPage .jb-lock::before, #statsPage .jb-lock::after,
  #statsPage .jb-lock .c3, #statsPage .jb-lock .c4, #statsPage .jb-spider polygon.val{ animation:none; }
  #statsPage .jb-ret{ transition:none; }
  #statsPage .jb-elev .col .marker i, #statsPage .jb-chain .links i.on{ animation:none; }
  #statsPage .jb-elev .col .marker{ transition:none; }
  #statsPage .jb-needle, #statsPage .jb-drift .nd, #statsPage .jb-core svg .spin,
  #statsPage .jb-scope .win svg, #statsPage .jb-analysis{ animation:none; }
  #statsPage .jb-trend polyline{ animation:none; stroke-dashoffset:0; }
}

/* ---- SHORT-PAGE LAYOUT ---- */
#statsPage .jb-hero-strip{ display:grid; grid-template-columns:225px 1fr 330px; gap:16px; align-items:center;
  margin-bottom:12px; }
@media(max-width:1000px){ #statsPage .jb-hero-strip{ grid-template-columns:1fr; justify-items:center; }
  #statsPage .jb-idcol{ text-align:center; } #statsPage .jb-idcol .jv-dots{ justify-content:center; } }
#statsPage .jb-hero-strip .jb-ret{ width:210px; margin:0; }
#statsPage .jb-idcol{ text-align:left; }
#statsPage .jb-idcol .jv-dots{ justify-content:flex-start; gap:14px; margin-top:8px; }
#statsPage .jb-idcol .op-meta{ margin-top:7px; line-height:1.8; }
#statsPage .jb-idcol .rank-badge{ margin-top:8px; }
#statsPage .jb-ro-strip{ align-self:stretch; overflow:auto; }
#statsPage .jb-ro-strip .ops-sr{ padding:5px 0; font-size:9px; }
#statsPage .jb-cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; align-items:start; margin-bottom:12px; }
@media(max-width:1000px){ #statsPage .jb-cols{ grid-template-columns:1fr; } }
#statsPage .jb-cols .jbf{ margin:0 0 12px; }
#statsPage .jb-cols .jbf:last-child{ margin-bottom:0; }
/* compression pass */
#statsPage .jbf{ padding:12px 13px; }
#statsPage .jb-sys{ margin-bottom:7px; }
#statsPage .jb-seg{ height:6px; }
#statsPage .jb-sys .nm{ font-size:8.5px; margin-bottom:3px; }
#statsPage .jb-radar{ max-width:262px; }
#statsPage .jb-sq .jb-spider{ max-width:168px; }
#statsPage .jb-wave{ height:60px; }
#statsPage .jb-trend{ height:64px; }
#statsPage .jb-dleg{ padding:2px 0; font-size:7.5px; }
#statsPage .jb-level{ padding:12px 15px; margin-bottom:12px; animation-delay:.15s; }
#statsPage .jb-reqs{ margin-top:20px; gap:8px 18px; }
#statsPage .jb-lvbadge .lv{ font-size:24px; }
#statsPage .jb-cluster{ grid-template-columns:repeat(auto-fit, minmax(102px, 1fr)); gap:14px 8px; }
#statsPage .jb-analysis{ margin-top:0; margin-bottom:12px; }
#statsPage .ops-head{ margin-bottom:12px; padding:8px 12px; }
#statsPage .jb-ticker{ margin-bottom:12px; padding:5px 0; }
#statsPage .jb-drgc.jb-sq .tr{ margin-bottom:7px; }

/* ---- ambient color layer: moving sweeps + hue identities ---- */
#statsPage .jb-glow{ position:absolute; top:0; left:0; width:30%; height:2px; pointer-events:none; z-index:2;
  background:linear-gradient(90deg, transparent, var(--gc,#59c8ff), transparent);
  animation:jbSweepX 3.6s linear infinite; animation-delay:var(--gd,0s); }
@keyframes jbSweepX{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(440%); } }
#statsPage .jbf{ overflow:hidden; }
#statsPage .jbf.hue0{ --gc:#59c8ff; border-color:rgba(89,200,255,.22); }
#statsPage .jbf.hue0 h5 span{ color:#6fb6d8; }
#statsPage .jbf.hue1{ --gc:#b9a5ff; border-color:rgba(185,165,255,.24); }
#statsPage .jbf.hue1 h5 span{ color:#a795e0; }
#statsPage .jbf.hue2{ --gc:#7fe0b2; border-color:rgba(127,224,178,.22); }
#statsPage .jbf.hue2 h5 span{ color:#79c3a2; }
#statsPage .jbf.hue3{ --gc:#ffcf7d; border-color:rgba(255,207,125,.22); }
#statsPage .jbf.hue3 h5 span{ color:#d8b579; }
#statsPage .jbf.hue4{ --gc:#ff9ecb; border-color:rgba(255,158,203,.22); }
#statsPage .jbf.hue4 h5 span{ color:#d98fb4; }
/* gauge tiles: ambient underlines cycling hues */
#statsPage .jb-cluster > div{ position:relative; padding-bottom:6px; }
#statsPage .jb-cluster > div::after{ content:""; position:absolute; left:12%; right:12%; bottom:0; height:1.5px;
  background:linear-gradient(90deg, transparent, var(--gc,#59c8ff), transparent);
  opacity:.7; animation:jbBreathe2 3.2s ease-in-out infinite; animation-delay:var(--gd,0s); }
@keyframes jbBreathe2{ 50%{ opacity:.2; } }
#statsPage .jb-cluster > div:nth-child(5n+1){ --gc:#59c8ff; --gd:0s; }
#statsPage .jb-cluster > div:nth-child(5n+2){ --gc:#b9a5ff; --gd:.6s; }
#statsPage .jb-cluster > div:nth-child(5n+3){ --gc:#7fe0b2; --gd:1.2s; }
#statsPage .jb-cluster > div:nth-child(5n+4){ --gc:#ffcf7d; --gd:1.8s; }
#statsPage .jb-cluster > div:nth-child(5n+5){ --gc:#ff9ecb; --gd:2.4s; }
/* list rows: soft hue ticks cycling */
#statsPage .jb-sys{ position:relative; padding-left:8px; }
#statsPage .jb-sys::before{ content:""; position:absolute; left:0; top:3px; bottom:5px; width:2px; border-radius:1px;
  background:var(--gc,#59c8ff); opacity:.55; }
#statsPage .jb-sys:nth-child(5n+1){ --gc:#59c8ff; } #statsPage .jb-sys:nth-child(5n+2){ --gc:#b9a5ff; }
#statsPage .jb-sys:nth-child(5n+3){ --gc:#7fe0b2; } #statsPage .jb-sys:nth-child(5n+4){ --gc:#ffcf7d; }
#statsPage .jb-sys:nth-child(5n+5){ --gc:#ff9ecb; }
#statsPage .ops-sr{ position:relative; padding-left:8px; }
#statsPage .ops-sr::before{ content:""; position:absolute; left:0; top:50%; width:3px; height:3px; border-radius:50%;
  transform:translateY(-50%); background:var(--gc,#59c8ff); opacity:.6; }
#statsPage .ops-sr:nth-child(5n+1){ --gc:#59c8ff; } #statsPage .ops-sr:nth-child(5n+2){ --gc:#b9a5ff; }
#statsPage .ops-sr:nth-child(5n+3){ --gc:#7fe0b2; } #statsPage .ops-sr:nth-child(5n+4){ --gc:#ffcf7d; }
#statsPage .ops-sr:nth-child(5n+5){ --gc:#ff9ecb; }
#statsPage .jb-dleg{ position:relative; }
@media (prefers-reduced-motion:reduce){
  #statsPage .jb-glow{ animation:none; opacity:.35; }
  #statsPage .jb-cluster > div::after{ animation:none; opacity:.4; }
}

/* ===== home banner (restored 2026-09-05) ===== */
.home-banner{position:relative;margin:10px 0 14px;border-radius:14px;overflow:hidden;border:1px solid var(--panel-edge,rgba(56,240,255,.16));aspect-ratio:16/7;background:#060b14;box-shadow:0 0 30px rgba(56,240,255,.06);}
.home-banner img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.2) contrast(1.05);opacity:.9;}
.home-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,13,.05) 40%,rgba(4,7,13,.75) 100%);pointer-events:none;}
.home-banner .hb-caption{position:absolute;left:14px;bottom:10px;font-size:10px;letter-spacing:2px;color:var(--cyan,#38f0ff);text-shadow:0 0 12px rgba(56,240,255,.5);z-index:1;}
@media(max-width:640px){.home-banner{aspect-ratio:16/8;margin:8px 0 12px;}}

/* ===== engine 586 — voice speed: wrong answer shakes the word red, word stays ===== */
@keyframes vsShake{0%,100%{transform:translateX(0)}12%{transform:translateX(-9px)}25%{transform:translateX(8px)}37%{transform:translateX(-7px)}50%{transform:translateX(6px)}62%{transform:translateX(-4px)}75%{transform:translateX(3px)}87%{transform:translateX(-1px)}}
.prompt.vs-wrong{animation:vsShake .55s cubic-bezier(.36,.07,.19,.97) both;color:var(--magenta,#ff3d8b)!important;text-shadow:0 0 18px rgba(255,61,139,.55);}
.prompt.vs-wrong .speed-tally{color:var(--magenta,#ff3d8b);}

/* ===== engine 586 — arcade round review (all answers, correct and wrong) ===== */
.nuance.rr{padding:12px 12px 6px;}
.nuance.rr>strong{display:block;margin-bottom:8px;letter-spacing:1px;}
.rr-head,.rr-row{display:grid;grid-template-columns:18px 1.2fr 1fr 1fr;gap:8px;align-items:center;}
.rr-head{font-size:8.5px;letter-spacing:1.5px;color:var(--text-dim,#6f8299);text-transform:uppercase;padding:0 0 6px;border-bottom:1px solid rgba(56,240,255,.12);}
.rr-list{max-height:260px;overflow-y:auto;}
.rr-row{padding:7px 0;border-bottom:1px solid rgba(56,240,255,.06);font-size:12px;line-height:1.45;}
.rr-row:last-child{border-bottom:none;}
.rr-mark{font-weight:800;text-align:center;}
.rr-row.ok .rr-mark{color:var(--lime,#5dffa8);}
.rr-row.miss .rr-mark{color:var(--magenta,#ff3d8b);}
.rr-row.rec .rr-mark{color:var(--amber,#ffc24b);}
.rr-q{color:var(--text,#d6e6f2);font-weight:600;word-break:break-word;}
.rr-you{color:var(--text-dim,#6f8299);word-break:break-word;}
.rr-row.miss .rr-you{color:var(--magenta,#ff3d8b);opacity:.9;}
.rr-row.rec .rr-you{color:var(--amber,#ffc24b);}
.rr-a{color:var(--lime,#5dffa8);word-break:break-word;}
.rr-tries{display:inline-block;margin-left:6px;font-size:8.5px;letter-spacing:1px;padding:1px 6px;border-radius:8px;border:1px solid rgba(255,194,75,.4);color:var(--amber,#ffc24b);vertical-align:middle;}
@media(max-width:640px){.rr-head{display:none;}.rr-row{grid-template-columns:16px 1fr;grid-template-areas:"m q" "m y" "m a";}.rr-mark{grid-area:m;align-self:start;padding-top:2px;}.rr-q{grid-area:q;}.rr-you{grid-area:y;font-size:11px;}.rr-a{grid-area:a;font-size:11px;}}

/* ===== 587 — community personal profile ("Me") ===== */
.cm-me{margin:10px 0 12px;}
.cm-me-card{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--panel,rgba(10,18,32,.72));border:1px solid var(--panel-edge,rgba(56,240,255,.16));border-radius:14px;padding:16px;}
.cm-me-who .cm-name{font-size:16px;font-weight:800;}
.cm-me-who .cm-field{margin-top:4px;color:var(--text-dim,#6f8299);font-size:11px;}
.cm-me-bio{margin-top:6px;font-size:12px;line-height:1.55;color:var(--text,#d6e6f2);opacity:.9;}
.cm-me-counts{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px;border-top:1px solid rgba(56,240,255,.1);padding-top:12px;}
.cm-me-count{background:rgba(4,7,13,.5);border:1px solid rgba(56,240,255,.12);border-radius:10px;padding:9px 6px;text-align:center;color:var(--text,#d6e6f2);font-family:inherit;cursor:pointer;}
.cm-me-count:disabled{cursor:default;opacity:.85;}
.cm-me-count b{display:block;font-size:17px;font-weight:800;color:var(--cyan,#38f0ff);}
.cm-me-count span{font-size:9px;letter-spacing:1px;color:var(--text-dim,#6f8299);text-transform:uppercase;}
@media(max-width:640px){.cm-me-card{grid-template-columns:auto 1fr;padding:13px;}.cm-me-counts{gap:6px;}.cm-me-count b{font-size:15px;}}

/* ===== 587 — multi-field selection: chosen fields glow, "All" only when none chosen ===== */
#catSeg button.active{position:relative;}
#catSeg button.active:not([data-val="mixed"])::after{content:"✓";position:absolute;top:-5px;right:-3px;font-size:8px;color:var(--lime,#5dffa8);}

/* ===== 588 — home hero: booth banner + Word from Walking Dreams ===== */
.home-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;margin:10px 0 14px;align-items:stretch;}
.home-hero .home-banner{margin:0;}
.wd-note{position:relative;display:flex;flex-direction:column;justify-content:space-between;background:var(--panel,rgba(10,18,32,.72));border:1px solid rgba(255,194,75,.35);border-radius:14px;padding:16px 18px;box-shadow:0 0 30px rgba(255,194,75,.06), inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;}
.wd-note::before{content:"\201C";position:absolute;right:14px;top:-18px;font-size:110px;line-height:1;color:rgba(255,194,75,.08);font-family:Georgia,serif;pointer-events:none;}
.wd-head{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.wd-kicker{font-size:10px;letter-spacing:2px;color:var(--cyan,#38f0ff);text-transform:uppercase;}
.wd-tag{font-size:8px;letter-spacing:1.5px;color:var(--amber,#ffc24b);border:1px solid rgba(255,194,75,.5);background:rgba(255,194,75,.1);padding:3px 8px;border-radius:10px;white-space:nowrap;}
.wd-body{margin:14px 0;font-size:15px;line-height:1.7;color:var(--text,#d6e6f2);font-weight:500;font-style:italic;border-left:2px solid rgba(255,194,75,.45);padding-left:14px;}
.wd-body[lang="ar"]{font-style:normal;direction:rtl;text-align:right;border-left:none;border-right:2px solid rgba(255,194,75,.45);padding:0 14px 0 0;}
.wd-foot{display:flex;justify-content:space-between;font-size:10px;color:var(--text-dim,#6f8299);letter-spacing:1px;}
.wd-when{color:var(--amber,#ffc24b);opacity:.8;}
@media(max-width:760px){.home-hero{grid-template-columns:1fr;gap:10px;margin:8px 0 12px;}.wd-body{font-size:14px;margin:10px 0;}}


/* ═════════ 589 — NEON HOME: watermarks, cubes, ambience, rank tint, streak heat, sound ═════════ */

/* ===== 589 — mode-card watermarks: a large faded icon per activity ===== */
/* IDLE — the version you approved: coloured tube, soft glow, slow breath */
.mode-card .mc-bg{position:absolute;right:-22px;top:-18px;width:163px;height:163px;pointer-events:none;
  background:var(--oc);opacity:.32;
  -webkit-mask:var(--mbg) center/contain no-repeat;mask:var(--mbg) center/contain no-repeat;
  transform:rotate(-8deg) scale(1);
  filter:drop-shadow(0 0 3px var(--oc)) drop-shadow(0 0 12px var(--oc)) drop-shadow(0 0 28px color-mix(in srgb, var(--oc) 55%, transparent));
  animation:neonBreath 4.2s ease-in-out infinite;
  transition:background .7s cubic-bezier(.22,1,.36,1), opacity .7s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), filter .7s cubic-bezier(.22,1,.36,1);}
.mode-card:nth-child(2n) .mc-bg{animation-delay:-1.4s;} .mode-card:nth-child(3n) .mc-bg{animation-delay:-2.6s;}
@keyframes neonBreath{0%,100%{opacity:.30;filter:drop-shadow(0 0 3px var(--oc)) drop-shadow(0 0 12px var(--oc)) drop-shadow(0 0 28px color-mix(in srgb, var(--oc) 50%, transparent));}50%{opacity:.42;filter:drop-shadow(0 0 4px var(--oc)) drop-shadow(0 0 18px var(--oc)) drop-shadow(0 0 40px color-mix(in srgb, var(--oc) 70%, transparent));}}

/* HOVER — IGNITION: the tube goes white-hot, the gas blooms, then it holds a vivid pulse */
.mode-card:hover .mc-bg{
  background:color-mix(in srgb, #ffffff 80%, var(--oc));opacity:1;
  transform:rotate(-2deg) scale(1.08);
  filter:drop-shadow(0 0 2px var(--oc)) drop-shadow(0 0 20px var(--oc)) drop-shadow(0 0 58px var(--oc));
  animation:neonIgnite 1.6s cubic-bezier(.22,1,.36,1) forwards, neonVivid 2.2s ease-in-out 1.6s infinite;}
/* strike → two quick flickers → full light, like a real tube catching */
@keyframes neonIgnite{0%{opacity:.35;}8%{opacity:.95;}14%{opacity:.5;}22%{opacity:1;}28%{opacity:.7;}40%,100%{opacity:1;}}
@keyframes neonVivid{0%,100%{filter:drop-shadow(0 0 3px var(--oc)) drop-shadow(0 0 22px var(--oc)) drop-shadow(0 0 60px var(--oc));}50%{filter:drop-shadow(0 0 5px var(--oc)) drop-shadow(0 0 30px var(--oc)) drop-shadow(0 0 80px var(--oc));}}

/* SCAN — a bright band sweeps through the tube once on ignition (masked to the icon shape) */
.mode-card .mc-scan{position:absolute;right:-22px;top:-18px;width:163px;height:163px;pointer-events:none;opacity:0;transform:rotate(-8deg);
  -webkit-mask:var(--mbg) center/contain no-repeat;mask:var(--mbg) center/contain no-repeat;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%);background-size:320% 320%;background-position:110% 110%;}
.mode-card:hover .mc-scan{opacity:1;transform:rotate(-2deg) scale(1.08);animation:neonScan 1.3s cubic-bezier(.65,0,.35,1) .15s forwards;}
@keyframes neonScan{0%{background-position:110% 110%;opacity:1;}85%{opacity:1;}100%{background-position:-10% -10%;opacity:0;}}

/* SPILL — the light lands on the card: a coloured radial wash from the top-right corner */
.mode-card .mc-spill{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--oc) 32%, transparent) 0%, color-mix(in srgb, var(--oc) 10%, transparent) 30%, transparent 62%);
  transition:opacity .8s cubic-bezier(.22,1,.36,1);}
.mode-card:hover .mc-spill{opacity:1;}
/* the frame catches the colour too */
.mode-card:hover{border-color:color-mix(in srgb, var(--oc) 70%, transparent);box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 34px color-mix(in srgb, var(--oc) 28%, transparent);}

.mode-card h2,.mode-card p,.mode-card .mc-ar,.mode-card .mc-icon{position:relative;z-index:1;}
.mode-card:hover h2{text-shadow:0 1px 10px rgba(4,7,13,.95), 0 0 2px rgba(4,7,13,.9);}
.mode-card:hover p{text-shadow:0 1px 8px rgba(4,7,13,.95);}
html.light .mode-card .mc-bg{opacity:.18;filter:drop-shadow(0 0 3px var(--oc)) drop-shadow(0 0 10px var(--oc));animation:none;}
html.light .mode-card:hover .mc-bg{background:var(--oc);opacity:.6;}
@media(prefers-reduced-motion:reduce){.mode-card .mc-bg,.mode-card:hover .mc-bg,.mode-card .mc-scan{animation:none;}}
@media(max-width:640px){.mode-card .mc-bg,.mode-card .mc-scan{width:124px;height:124px;right:-18px;top:-12px;}}
.mode-card[data-mode="translation"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h13l-3-3M21 16H8l3 3'/%3E%3C/svg%3E");}
.mode-card[data-mode="voice"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6'/%3E%3C/svg%3E");}
.mode-card[data-mode="consecutive"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13a8 8 0 0 1 16 0'/%3E%3Crect x='3' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='6' rx='1.5'/%3E%3C/svg%3E");}
.mode-card[data-mode="derivations"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Cpath d='M12 6v4M12 10 5 15M12 10v6M12 10l7 5'/%3E%3Ccircle cx='5' cy='17' r='2'/%3E%3Ccircle cx='12' cy='18' r='2'/%3E%3Ccircle cx='19' cy='17' r='2'/%3E%3C/svg%3E");}
.mode-card[data-mode="collocations"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='8' height='8' rx='2'/%3E%3Crect x='13' y='8' width='8' height='8' rx='2'/%3E%3Cpath d='M9 12h6'/%3E%3C/svg%3E");}
.mode-card[data-mode="synonyms"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='6'/%3E%3Ccircle cx='15' cy='12' r='6'/%3E%3C/svg%3E");}
.mode-card[data-mode="antonyms"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6 4 12l6 6M14 6l6 6-6 6M4 12h6M14 12h6'/%3E%3C/svg%3E");}
.mode-card[data-mode="abbreviations"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4H4v16h3M17 4h3v16h-3'/%3E%3Ccircle cx='9.5' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='14.5' cy='12' r='1'/%3E%3C/svg%3E");}
.mode-card[data-mode="paraphrase"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10-10-4-4L4 16v4zM13 7l4 4M3 22h18'/%3E%3C/svg%3E");}
.mode-card[data-mode="restructure"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='12' height='4' rx='1'/%3E%3Crect x='9' y='10' width='12' height='4' rx='1'/%3E%3Crect x='3' y='16' width='12' height='4' rx='1'/%3E%3Cpath d='M18 4v3M18 17v3'/%3E%3C/svg%3E");}
.mode-card[data-mode="decay"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h2M7 6v12M11 8v8M15 10v4M19 11v2M22 12h.5'/%3E%3C/svg%3E");}
.mode-card[data-mode="speed"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");}
.mode-card[data-mode="voicespeed"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='6' height='10' rx='3'/%3E%3Cpath d='M4 10a6 6 0 0 0 12 0M10 16v3M7 19h6'/%3E%3Cpath d='M19 2l-3 6h3l-2 5'/%3E%3C/svg%3E");}
.mode-card[data-mode="oddone"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3Ccircle cx='17' cy='7' r='3'/%3E%3Ccircle cx='7' cy='17' r='3'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E");}
.mode-card[data-mode="omission"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M8.5 8 20 19M8.5 16 20 5M12 12l2 0'/%3E%3C/svg%3E");}
.mode-card[data-mode="scramble"]{--mbg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='0.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h4l10 10h4M3 17h4l3-3M14 7h7M18 4l3 3-3 3M18 14l3 3-3 3'/%3E%3C/svg%3E");}

/* ===== 589 — NEON CUBE CARDS: front frame, recessed back frame, four corner edges ===== */
.mode-card{border-radius:6px;border-color:transparent;background:
  linear-gradient(100deg, color-mix(in srgb, var(--oc) 10%, transparent), transparent 45%, color-mix(in srgb, var(--oc2) 9%, transparent)),
  var(--panel);overflow:visible;}
.mode-card::before,.mode-card::after{display:none;}           /* the cube replaces the old orbit border */
.mode-card:hover{border-color:transparent;transform:translateY(-4px);}
/* companion hue per group: the gradient runs --oc → --oc2 left to right, like pink → violet in the reference */
.mode-card[data-group="core"]{   --oc:#38f0ff; --oc2:#a06bff; }
.mode-card[data-group="vocab"]{  --oc:#a06bff; --oc2:#ff3d8b; }
.mode-card[data-group="drills"]{ --oc:#ffc24b; --oc2:#ff3d8b; }
.mode-card[data-group="arcade"]{ --oc:#ff3d8b; --oc2:#7b5cff; }

.mc-cube{position:absolute;inset:0;pointer-events:none;z-index:0;transition:filter .7s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 0 4px color-mix(in srgb, var(--oc) 70%, transparent)) drop-shadow(0 0 16px color-mix(in srgb, var(--oc2) 45%, transparent));}
/* front face */
.mc-cube .cf{position:absolute;inset:0;border:1.5px solid transparent;border-radius:6px;
  background:linear-gradient(90deg, var(--oc), var(--oc2)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
/* back face — recessed */
.mc-cube .cb{position:absolute;inset:var(--depth,14px) var(--depth,14px);border:1px solid transparent;border-radius:4px;opacity:.75;
  background:linear-gradient(90deg, var(--oc), var(--oc2)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:inset .7s cubic-bezier(.22,1,.36,1), opacity .7s;}
/* four corner edges joining the faces */
.mc-cube .ce{position:absolute;width:var(--depth,14px);height:var(--depth,14px);opacity:.85;transition:all .7s cubic-bezier(.22,1,.36,1);}
.mc-cube .ce.tl{left:0;top:0;background:linear-gradient(135deg, transparent calc(50% - .8px), var(--oc) calc(50% - .8px), var(--oc) calc(50% + .8px), transparent calc(50% + .8px));}
.mc-cube .ce.tr{right:0;top:0;background:linear-gradient(225deg, transparent calc(50% - .8px), var(--oc2) calc(50% - .8px), var(--oc2) calc(50% + .8px), transparent calc(50% + .8px));}
.mc-cube .ce.bl{left:0;bottom:0;background:linear-gradient(45deg, transparent calc(50% - .8px), var(--oc) calc(50% - .8px), var(--oc) calc(50% + .8px), transparent calc(50% + .8px));}
.mc-cube .ce.br{right:0;bottom:0;background:linear-gradient(315deg, transparent calc(50% - .8px), var(--oc2) calc(50% - .8px), var(--oc2) calc(50% + .8px), transparent calc(50% + .8px));}
/* the interior wash — light landing on the back wall like the reference */
.mc-cube .cw{position:absolute;inset:var(--depth,14px);border-radius:4px;
  background:radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--oc2) 14%, transparent), transparent 70%),
             linear-gradient(90deg, color-mix(in srgb, var(--oc) 12%, transparent), transparent 50%, color-mix(in srgb, var(--oc2) 12%, transparent));
  opacity:.9;transition:inset .7s cubic-bezier(.22,1,.36,1), opacity .7s;}

/* HOVER — the cube deepens and the tubes go white-hot with a wider glow */
.mode-card:hover .mc-cube{--depth:22px;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--oc) 90%, transparent)) drop-shadow(0 0 26px color-mix(in srgb, var(--oc2) 70%, transparent)) drop-shadow(0 0 60px color-mix(in srgb, var(--oc) 35%, transparent));}
.mode-card:hover .mc-cube .cf{background:linear-gradient(90deg, color-mix(in srgb,#fff 55%, var(--oc)), color-mix(in srgb,#fff 45%, var(--oc2))) border-box;}
.mode-card:hover .mc-cube .cb{opacity:1;}
.mode-card:hover .mc-cube .ce{opacity:1;}
.mode-card:hover .mc-cube .cw{opacity:1;}
/* glow cast onto the page around the card */
.mode-card{box-shadow:0 0 24px color-mix(in srgb, var(--oc) 10%, transparent), 0 0 24px color-mix(in srgb, var(--oc2) 10%, transparent);}
.mode-card:hover{box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 48px color-mix(in srgb, var(--oc) 24%, transparent), 0 0 48px color-mix(in srgb, var(--oc2) 24%, transparent);}

/* content sits inside the back face */
.mode-card{padding:34px 34px 30px;}
.mode-card h2,.mode-card p,.mode-card .mc-ar,.mode-card .mc-icon{position:relative;z-index:1;}
.mode-card .mc-bg,.mode-card .mc-scan{right:-6px;top:-2px;}
.mode-card .mc-spill{inset:14px;border-radius:4px;}
html.light .mode-card{background:linear-gradient(100deg, color-mix(in srgb, var(--oc) 8%, transparent), transparent 45%, color-mix(in srgb, var(--oc2) 8%, transparent)), var(--panel);}
@media(max-width:640px){.mode-card{padding:26px 24px 22px;} .mc-cube .cb,.mc-cube .cw{inset:10px;} .mc-cube .ce{width:10px;height:10px;} .mode-card:hover .mc-cube{--depth:14px;}}

/* ===== 589 EXTRAS ===== */
/* 1. cursor light-follow inside the cube */
.mc-cube .cw{background:radial-gradient(120% 90% at var(--mx,50%) var(--my,100%), color-mix(in srgb, var(--oc2) 22%, transparent), transparent 62%),
  linear-gradient(90deg, color-mix(in srgb, var(--oc) 12%, transparent), transparent 50%, color-mix(in srgb, var(--oc2) 12%, transparent));transition:inset .7s cubic-bezier(.22,1,.36,1), opacity .7s;}
.mode-card .mc-spill{background:radial-gradient(circle at var(--mx,82%) var(--my,18%), color-mix(in srgb, var(--oc) 34%, transparent) 0%, color-mix(in srgb, var(--oc) 10%, transparent) 28%, transparent 60%);}

/* 2. group ambience — the page tints toward the group you switched to, then settles */
.ambience{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;background:radial-gradient(70% 50% at 50% 0%, var(--amb,transparent), transparent 70%);transition:opacity .5s ease;}
.ambience.on{opacity:.55;animation:ambSettle 2.4s ease-out forwards;}
@keyframes ambSettle{0%{opacity:.6;}100%{opacity:.14;}}
.mode-tabs button.active{box-shadow:0 0 18px color-mix(in srgb, var(--tab,var(--cyan)) 55%, transparent);background:var(--tab,var(--cyan));}
.mode-tabs button[data-group="core"]{--tab:#38f0ff;} .mode-tabs button[data-group="vocab"]{--tab:#a06bff;} .mode-tabs button[data-group="drills"]{--tab:#ffc24b;} .mode-tabs button[data-group="arcade"]{--tab:#ff3d8b;}

/* 3. Word from Walking Dreams — its own gold cube, breathing */
.wd-note{--oc:#ffc24b;--oc2:#ff8a3d;border-color:transparent;border-radius:6px;overflow:visible;background:linear-gradient(100deg, color-mix(in srgb,#ffc24b 12%,transparent), transparent 45%, color-mix(in srgb,#ff8a3d 10%,transparent)), var(--panel);box-shadow:0 0 30px rgba(255,194,75,.14);}
.wd-note::before{display:none;}
.wd-note .mc-cube{animation:goldBreath 4.6s ease-in-out infinite;}
@keyframes goldBreath{0%,100%{filter:drop-shadow(0 0 4px rgba(255,194,75,.7)) drop-shadow(0 0 16px rgba(255,138,61,.45));}50%{filter:drop-shadow(0 0 7px rgba(255,194,75,1)) drop-shadow(0 0 30px rgba(255,138,61,.7)) drop-shadow(0 0 60px rgba(255,194,75,.3));}}
.wd-note .wd-head,.wd-note .wd-body,.wd-note .wd-foot{position:relative;z-index:1;}
.wd-note{padding:24px 28px;}

/* 4. rank tint — a faint undertone on every cube that shifts with the operator's tier */
html[data-rank="learner"]         .mode-card{--rk:#6f8299;}
html[data-rank="translator"]      .mode-card{--rk:#38f0ff;}
html[data-rank="pro-translator"]  .mode-card{--rk:#5dffa8;}
html[data-rank="interpreter"]     .mode-card{--rk:#a06bff;}
html[data-rank="pro-interpreter"] .mode-card{--rk:#ffc24b;}
html[data-rank="dragoman"]        .mode-card{--rk:#ff3d8b;}
html[data-rank] .mode-card .mc-cube .cw{background:radial-gradient(120% 90% at var(--mx,50%) var(--my,100%), color-mix(in srgb, var(--oc2) 22%, transparent), transparent 62%),
  linear-gradient(90deg, color-mix(in srgb, var(--oc) 12%, transparent), transparent 50%, color-mix(in srgb, var(--oc2) 12%, transparent)),
  linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--rk) 34%, transparent));}
html[data-rank] .mode-card .mc-cube .cb{border-image:none;}
html[data-rank] .mode-card .mc-cube .ce.bl,html[data-rank] .mode-card .mc-cube .ce.br{filter:drop-shadow(0 0 8px var(--rk));}
html[data-rank] .mode-card .mc-cube .cf{box-shadow:inset 0 -18px 30px -20px var(--rk);}

/* 5. streak heat — the whole grid burns brighter and hums faster as the streak climbs */
.mode-grid{--heat:0;}
.mode-card .mc-cube{filter:drop-shadow(0 0 calc(4px + var(--heat)*6px) color-mix(in srgb, var(--oc) calc(70% + var(--heat)*30%), transparent)) drop-shadow(0 0 calc(16px + var(--heat)*24px) color-mix(in srgb, var(--oc2) calc(45% + var(--heat)*40%), transparent));}
.mode-card .mc-bg{animation-duration:calc(4.2s - var(--heat)*2.6s);}
.heat-bar{position:fixed;left:0;right:0;top:0;height:3px;z-index:20;background:linear-gradient(90deg,#38f0ff,#a06bff,#ff3d8b,#ffc24b);transform-origin:left;transform:scaleX(var(--heat));opacity:.9;transition:transform .5s ease;filter:drop-shadow(0 0 8px rgba(255,194,75,.8));}


/* sound toggle in the header */
.snd-btn{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;padding:6px 10px;border-radius:8px;border:1px solid var(--panel-edge);background:rgba(10,18,32,.6);color:var(--text-dim);cursor:pointer;transition:all .2s;}
.snd-btn.on{border-color:var(--lime);color:var(--lime);background:rgba(93,255,168,.1);box-shadow:0 0 12px rgba(93,255,168,.25);}
/* production grid spacing for the outer glow */
.mode-grid{gap:26px;padding:6px;}
@media(max-width:640px){.mode-grid{gap:18px;}}

/* ═════════ 590 — NEON EVERYWHERE: the cube language carried to every section ═════════
   Shared technique: a two-hue gradient frame (padding-box/border-box trick — no masks needed),
   a dark near-opaque body so the frame reads as a lit edge, a soft two-hue glow,
   and a brighter frame on hover. Each section has its own hue pair. */
:root{ --nf-body:rgba(9,15,27,.92); --nf-body-2:rgba(6,11,20,.96); }
.nf{ position:relative; border:1.5px solid transparent !important; border-radius:6px !important;
  background:linear-gradient(var(--nf-body),var(--nf-body)) padding-box,
             linear-gradient(90deg, var(--n1), var(--n2)) border-box !important;
  box-shadow:0 0 22px color-mix(in srgb, var(--n1) 12%, transparent), 0 0 22px color-mix(in srgb, var(--n2) 12%, transparent) !important;
  transition:box-shadow .5s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); }
.nf::after{ content:""; position:absolute; inset:0; border-radius:5px; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 110%, color-mix(in srgb, var(--n2) 10%, transparent), transparent 62%),
             linear-gradient(90deg, color-mix(in srgb, var(--n1) 7%, transparent), transparent 50%, color-mix(in srgb, var(--n2) 7%, transparent)); }
.nf > *{ position:relative; z-index:1; }
.nf:hover{ box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 40px color-mix(in srgb, var(--n1) 26%, transparent), 0 0 40px color-mix(in srgb, var(--n2) 26%, transparent) !important; }
.nf.nf-lift:hover{ transform:translateY(-3px); }
/* section hue pairs */
.nf-board  { --n1:#ffc24b; --n2:#38f0ff; }      /* rank boards: gold → cyan */
.nf-cm     { --n1:#a06bff; --n2:#ff3d8b; }      /* community: violet → magenta */
.nf-train  { --n1:#38f0ff; --n2:#a06bff; }      /* trainer console: cyan → violet */
.nf-panel  { --n1:#38f0ff; --n2:#5dffa8; }      /* stats / profile / inbox / admin: cyan → lime */
.nf-tester { --n1:#5dffa8; --n2:#38f0ff; }      /* tester console: lime → cyan */
.nf-gold   { --n1:#ffc24b; --n2:#ff8a3d; }      /* founder / landing: amber → orange */

/* ---- RANK BOARDS ---- */
.lb-row{ position:relative; border:1px solid transparent !important; border-radius:6px !important; margin-bottom:8px;
  background:linear-gradient(var(--nf-body-2),var(--nf-body-2)) padding-box, linear-gradient(90deg, color-mix(in srgb,#ffc24b 55%,transparent), color-mix(in srgb,#38f0ff 35%,transparent)) border-box !important;
  transition:box-shadow .4s, transform .3s; }
.lb-row:hover{ transform:translateX(3px); box-shadow:0 0 14px rgba(255,194,75,.10); }
.lb-row .lb-rank{ text-shadow:0 0 10px currentColor; }
.lb-row.r1{ background:linear-gradient(var(--nf-body-2),var(--nf-body-2)) padding-box, linear-gradient(90deg,#ffd76a,#ffb020) border-box !important; box-shadow:0 0 26px rgba(255,194,75,.28) !important; }
.lb-row.r1 .lb-rank{ color:#ffd76a; }
.lb-row.r2{ background:linear-gradient(var(--nf-body-2),var(--nf-body-2)) padding-box, linear-gradient(90deg,#e6f0ff,#8fa9c8) border-box !important; box-shadow:0 0 20px rgba(214,230,242,.18) !important; }
.lb-row.r2 .lb-rank{ color:#e6f0ff; }
.lb-row.r3{ background:linear-gradient(var(--nf-body-2),var(--nf-body-2)) padding-box, linear-gradient(90deg,#ff9a5c,#c8642a) border-box !important; box-shadow:0 0 20px rgba(255,138,61,.2) !important; }
.lb-row.r3 .lb-rank{ color:#ff9a5c; }
.lb-row.me{ background:linear-gradient(var(--nf-body-2),var(--nf-body-2)) padding-box, linear-gradient(90deg,#38f0ff,#5dffa8) border-box !important; box-shadow:0 0 14px rgba(56,240,255,.14) !important; }
.lb-row.me:hover{ box-shadow:0 0 18px rgba(56,240,255,.18) !important; }
.lb-row.me .lb-name{ color:var(--cyan,#38f0ff); text-shadow:0 0 6px rgba(4,7,13,.9); }
.lb-row .lb-bar{ opacity:.35; box-shadow:none; }
.lb-row:hover .lb-bar{ opacity:.45; }
.lb-row .lb-name, .lb-row .lb-acc, .lb-row .lb-rank{ position:relative; z-index:2; text-shadow:0 1px 6px rgba(4,7,13,.95); }
.lb-row .lb-name{ position:relative; z-index:1; }
.lb-title{ letter-spacing:3px; text-shadow:0 0 14px rgba(255,194,75,.5); }

/* ---- COMMUNITY ---- */
.cm-post-card{ border:1.5px solid transparent !important; border-radius:6px !important;
  background:linear-gradient(var(--nf-body),var(--nf-body)) padding-box, linear-gradient(90deg, rgba(160,107,255,.75), rgba(255,61,139,.65)) border-box !important;
  box-shadow:0 0 18px rgba(160,107,255,.08), 0 0 18px rgba(255,61,139,.08); transition:box-shadow .5s, transform .4s; }
.cm-post-card:hover{ box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 34px rgba(160,107,255,.22), 0 0 34px rgba(255,61,139,.2); }
.cm-post-card.pinned{ background:linear-gradient(var(--nf-body),var(--nf-body)) padding-box, linear-gradient(90deg,#ffc24b,#ff8a3d) border-box !important; box-shadow:0 0 26px rgba(255,194,75,.22); }
.cm-op, .cm-me-card, .cm-compose, .cm-dsec, .cm-searchhit{ border:1.5px solid transparent !important; border-radius:6px !important;
  background:linear-gradient(var(--nf-body),var(--nf-body)) padding-box, linear-gradient(90deg, rgba(160,107,255,.6), rgba(255,61,139,.5)) border-box !important; }
.cm-op:hover{ box-shadow:0 0 30px rgba(160,107,255,.25); transform:translateY(-3px); }
.cm-sheet{ border:1.5px solid transparent !important; border-radius:14px 14px 0 0 !important;
  background:linear-gradient(#0a1220,#0a1220) padding-box, linear-gradient(90deg,#a06bff,#ff3d8b) border-box !important; box-shadow:0 -10px 50px rgba(160,107,255,.2) !important; }
.cm-seg button.on, .cm-vis button.on{ text-shadow:0 0 10px currentColor; }
.cm-seg-ink{ box-shadow:0 0 14px rgba(160,107,255,.6); }
.cm-name{ text-shadow:0 0 8px rgba(214,230,242,.15); }

/* ---- TRAINER CONSOLE ---- */
.console{ border:1.5px solid transparent !important; border-radius:6px !important;
  background:linear-gradient(var(--nf-body),var(--nf-body)) padding-box, linear-gradient(90deg,#38f0ff,#a06bff) border-box !important;
  box-shadow:0 0 30px rgba(56,240,255,.12), 0 0 30px rgba(160,107,255,.1) !important; }
.console .corner{ filter:drop-shadow(0 0 6px var(--cyan,#38f0ff)); }
.verdict{ border:1.5px solid transparent !important; border-radius:6px !important;
  background:linear-gradient(var(--nf-body-2),var(--nf-body-2)) padding-box, linear-gradient(90deg, rgba(56,240,255,.5), rgba(93,255,168,.5)) border-box !important; }
.verdict .badge.correct{ text-shadow:0 0 12px var(--lime,#5dffa8); box-shadow:0 0 16px rgba(93,255,168,.35); }
.verdict .badge.wrong{ text-shadow:0 0 12px var(--magenta,#ff3d8b); box-shadow:0 0 16px rgba(255,61,139,.35); }
.log-panel, .setup-panel, .choice-grid button{ border:1px solid transparent !important; border-radius:6px !important;
  background:linear-gradient(var(--nf-body-2),var(--nf-body-2)) padding-box, linear-gradient(90deg, rgba(56,240,255,.35), rgba(160,107,255,.3)) border-box !important; }
.choice-grid button:hover{ box-shadow:0 0 18px rgba(56,240,255,.25); }
.seg button.active, .mode-tabs button.active{ box-shadow:0 0 16px color-mix(in srgb, var(--tab,var(--cyan,#38f0ff)) 55%, transparent); }
.countdown-fill{ box-shadow:0 0 12px var(--cyan,#38f0ff); }
.countdown-num.urgent{ text-shadow:0 0 14px var(--magenta,#ff3d8b); }

/* ---- STATS · PROFILE · INBOX · ADMIN ---- */
.stats-panel{ border:1.5px solid transparent !important; border-radius:6px !important;
  background:linear-gradient(var(--nf-body),var(--nf-body)) padding-box, linear-gradient(90deg, rgba(56,240,255,.6), rgba(93,255,168,.5)) border-box !important;
  box-shadow:0 0 18px rgba(56,240,255,.08) !important; transition:box-shadow .5s; }
.stats-panel:hover{ box-shadow:0 0 30px rgba(56,240,255,.18), 0 0 30px rgba(93,255,168,.12) !important; }
.thread{ border:1px solid transparent !important; border-radius:6px !important;
  background:linear-gradient(var(--nf-body-2),var(--nf-body-2)) padding-box, linear-gradient(90deg, rgba(56,240,255,.4), rgba(93,255,168,.3)) border-box !important; }
.thread:hover{ box-shadow:0 0 18px rgba(56,240,255,.18); }
.rank-badge, .jb-lvbadge{ text-shadow:0 0 10px currentColor; box-shadow:0 0 14px color-mix(in srgb, currentColor 35%, transparent); }
.adm-tabs button.active, #admTabs button.active{ box-shadow:0 0 16px rgba(56,240,255,.5); }
.obj-card, .rp-card{ border:1.5px solid transparent !important; border-radius:6px !important;
  background:linear-gradient(var(--nf-body-2),var(--nf-body-2)) padding-box, linear-gradient(90deg, rgba(255,194,75,.6), rgba(255,61,139,.5)) border-box !important; }

/* ---- TESTER CONSOLE ---- */
.tt-panel, .tt-rep, .tt-stat{ border:1.5px solid transparent !important; border-radius:6px !important;
  background:linear-gradient(var(--nf-body),var(--nf-body)) padding-box, linear-gradient(90deg, rgba(93,255,168,.6), rgba(56,240,255,.5)) border-box !important;
  box-shadow:0 0 16px rgba(93,255,168,.07) !important; }
.tt-rep:hover, .tt-stat:hover{ box-shadow:0 0 26px rgba(93,255,168,.18) !important; }
.tt-tabs button.on, #admTabs #ttAdmTab.active{ box-shadow:0 0 14px rgba(56,240,255,.5); }

/* ---- LANDING · STRIPS ---- */
.auth-card{ border:1.5px solid transparent !important; border-radius:6px !important;
  background:linear-gradient(var(--nf-body),var(--nf-body)) padding-box, linear-gradient(90deg,#ffc24b,#38f0ff) border-box !important;
  box-shadow:0 0 40px rgba(255,194,75,.14), 0 0 40px rgba(56,240,255,.12) !important; }
.review-strip, .daily-strip, .tt-strip{ border:1.5px solid transparent !important; border-radius:6px !important;
  background:linear-gradient(var(--nf-body-2),var(--nf-body-2)) padding-box, linear-gradient(90deg, var(--s1,#38f0ff), var(--s2,#a06bff)) border-box !important; }
.review-strip{ --s1:#a06bff; --s2:#38f0ff; } .daily-strip{ --s1:#ff3d8b; --s2:#a06bff; } .tt-strip{ --s1:#5dffa8; --s2:#38f0ff; }
.review-strip:hover, .daily-strip:hover, .tt-strip:hover{ box-shadow:0 0 26px color-mix(in srgb, var(--s1) 30%, transparent); }

/* light theme: frames stay, glow softens */
html.light :is(.console,.verdict,.stats-panel,.cm-post-card,.cm-op,.cm-me-card,.cm-compose,.cm-dsec,.tt-panel,.tt-rep,.tt-stat,.auth-card,.lb-row,.thread,.review-strip,.daily-strip){ --nf-body:rgba(255,255,255,.94); --nf-body-2:rgba(250,252,255,.96); box-shadow:none !important; }
html.light :is(.console,.stats-panel,.cm-post-card){ background:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)) padding-box, linear-gradient(90deg, rgba(8,122,150,.6), rgba(109,63,214,.5)) border-box !important; }

/* ---- COMMUNITY ACTION ICONS — heart, speech bubble, bookmark, share; neon on hover/active ---- */
.cm-actions{ gap:18px; }
.cm-actions button{ background:none !important; border:none !important; box-shadow:none !important; padding:6px 2px; color:var(--text-dim); --ac:#38f0ff; transition:color .25s, transform .2s; }
.cm-actions button .cm-heart{ display:inline-flex; width:22px; height:22px; }
.cm-actions button svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:fill .25s, filter .3s, transform .2s; }
.cm-actions button b{ font-weight:600; font-size:12.5px; }
.cm-actions button.act-like{ --ac:#ff3d8b; } .cm-actions button.act-comment{ --ac:#38f0ff; } .cm-actions button.act-save{ --ac:#ffc24b; } .cm-actions button.act-share{ --ac:#a06bff; }
.cm-actions button:hover{ color:var(--ac); }
.cm-actions button:hover svg{ filter:drop-shadow(0 0 4px var(--ac)) drop-shadow(0 0 12px var(--ac)); transform:scale(1.12); }
.cm-actions button.on, .cm-actions button.saved{ color:var(--ac); }
.cm-actions button.on svg, .cm-actions button.saved svg{ fill:var(--ac); filter:drop-shadow(0 0 5px var(--ac)) drop-shadow(0 0 14px var(--ac)); }
.cm-actions button.pop svg{ animation:actPop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes actPop{ 0%{ transform:scale(.7); } 60%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
.cm-actions button:active svg{ transform:scale(.9); }

/* ═════════ DESKTOP LAYER (2026-09-18, local preview) — three columns at ≥1240px, nothing changes below ═════════ */
.home-rail{ display:none; }
/* body.dk-home is set by js/desktop.js only while #homePage is showing — every other page keeps the 880px wrap untouched */
@media (min-width:1240px){
  body.dk-home:not(.on-landing) .wrap{ max-width:1480px; padding:0 8px; }
  body.dk-home #homePage{ display:grid !important; grid-template-columns:288px minmax(0,1fr) 312px; gap:24px; align-items:start; }
  body.dk-home #homePage[style*="display:none"], body.dk-home #homePage[style*="display: none"]{ display:none !important; }
  body.dk-home .home-rail{ display:flex; flex-direction:column; gap:18px; position:sticky; top:14px; }
  .home-main{ min-width:0; }
}
@media (min-width:1600px){
  body.dk-home:not(.on-landing) .wrap{ max-width:1600px; }
  body.dk-home #homePage{ grid-template-columns:300px minmax(0,1fr) 330px; gap:28px; }
}
html.light .ring-bg{ display:none; }
.dk-panel{ padding:16px 16px 14px; }
.dk-kicker{ font-family:var(--mono,'JetBrains Mono',monospace); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan,#38f0ff); display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:12px; }
.dk-kicker em{ font-style:normal; color:var(--text-dim,#6f8299); letter-spacing:1px; text-transform:none; font-size:9.5px; text-align:right; }
.nf-board .dk-kicker{ color:#ffc24b; } .nf-cm .dk-kicker{ color:#c48bff; }
/* operator card */
.dk-id{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.dk-ava{ position:relative; width:56px; height:56px; flex:none; display:grid; place-items:center; }
.dk-ava .hexf{ position:absolute; inset:0; }
.dk-ava img, .dk-ava .fb{ width:46px; height:46px; border-radius:12px; object-fit:cover; display:grid; place-items:center; font-family:'Orbitron',sans-serif; font-weight:700; color:var(--cyan,#38f0ff); background:rgba(56,240,255,.08); border:1px solid rgba(56,240,255,.35); position:relative; z-index:1; }
.dk-name{ font-family:'Orbitron',sans-serif; font-size:15px; letter-spacing:2px; color:var(--text,#d6e6f2); text-shadow:0 0 14px rgba(56,240,255,.35); }
.dk-rank{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:1.5px; color:var(--cyan,#38f0ff); margin-top:4px; }
.dk-ladder{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin:6px 0 8px; }
.dk-ladder span{ font-family:var(--mono,monospace); font-size:10px; text-align:center; padding:5px 0; border-radius:4px; border:1px solid rgba(255,255,255,.08); color:var(--text-dim,#6f8299); }
.dk-ladder span.done{ color:#04070d; background:var(--cyan,#38f0ff); border-color:var(--cyan,#38f0ff); }
.dk-ladder span.cur{ color:var(--cyan,#38f0ff); border-color:var(--cyan,#38f0ff); box-shadow:0 0 12px rgba(56,240,255,.45), inset 0 0 8px rgba(56,240,255,.2); }
.dk-bar{ height:6px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.dk-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--cyan,#38f0ff),var(--lime,#5dffa8)); box-shadow:0 0 10px rgba(56,240,255,.6); }
.dk-next{ font-size:11px; color:var(--text-dim,#6f8299); line-height:1.5; margin:8px 0 12px; }
.dk-next b{ color:var(--lime,#5dffa8); }
.dk-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dk-tiles div{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:8px; padding:9px 10px; }
.dk-tiles b{ display:block; font-family:'Orbitron',sans-serif; font-size:17px; color:var(--text,#d6e6f2); }
.dk-tiles span{ font-family:var(--mono,monospace); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim,#6f8299); }
/* 14-day pulse */
.dk-bars{ display:grid; grid-template-columns:repeat(14,1fr); gap:4px; height:64px; align-items:end; }
.dk-bars i{ display:block; height:max(3px,var(--h)); border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--lime,#5dffa8),var(--cyan,#38f0ff)); opacity:calc(.35 + var(--a)/160); box-shadow:0 0 8px rgba(56,240,255,.35); }
.dk-axis{ display:flex; justify-content:space-between; font-family:var(--mono,monospace); font-size:9px; letter-spacing:1px; color:var(--text-dim,#6f8299); margin-top:6px; }
/* quick launch */
.dk-quick{ display:grid; grid-template-columns:1fr 70px 36px; gap:10px; align-items:center; width:100%; background:none; border:0; border-top:1px solid rgba(255,255,255,.05); padding:9px 2px; color:var(--text,#d6e6f2); font:inherit; font-size:12.5px; cursor:pointer; text-align:left; }
.dk-quick:first-of-type{ border-top:0; }
.dk-quick:hover .q-n{ color:var(--cyan,#38f0ff); }
.dk-quick .q-b{ height:4px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden; } .dk-quick .q-b i{ display:block; height:100%; background:var(--violet,#a06bff); }
.dk-quick .q-a{ font-family:var(--mono,monospace); font-size:10px; color:var(--text-dim,#6f8299); text-align:right; }
/* board */
.dk-row{ display:grid; grid-template-columns:22px 1fr auto; grid-template-areas:"r n p" "r s p"; column-gap:10px; align-items:center; padding:8px 8px; margin-bottom:6px; border-radius:6px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); }
.dk-row .dk-r{ grid-area:r; font-family:'Orbitron',sans-serif; font-size:13px; color:var(--text-dim,#6f8299); text-shadow:0 0 10px currentColor; }
.dk-row.r1 .dk-r{ color:#ffd76a; } .dk-row.r2 .dk-r{ color:#e6f0ff; } .dk-row.r3 .dk-r{ color:#ff9a5c; }
.dk-row.r1{ border-color:rgba(255,194,75,.45); box-shadow:0 0 16px rgba(255,194,75,.14); }
.dk-row.me{ border-color:rgba(56,240,255,.45); }
.dk-row .dk-n{ grid-area:n; font-size:12px; letter-spacing:1px; color:var(--text,#d6e6f2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dk-row .you{ color:var(--cyan,#38f0ff); font-size:9px; margin-left:6px; }
.dk-row .dk-s{ grid-area:s; font-family:var(--mono,monospace); font-size:9px; letter-spacing:1px; color:var(--text-dim,#6f8299); }
.dk-row .dk-p{ grid-area:p; font-family:'Orbitron',sans-serif; font-size:13px; color:#ffc24b; }
.dk-more{ width:100%; margin-top:6px; background:none; border:1px dashed rgba(255,255,255,.14); border-radius:6px; padding:8px; color:var(--text-dim,#6f8299); font-family:var(--mono,monospace); font-size:10px; letter-spacing:1.5px; cursor:pointer; transition:.2s; }
.dk-more:hover{ color:var(--cyan,#38f0ff); border-color:rgba(56,240,255,.5); }
/* room */
.dk-post{ display:block; width:100%; text-align:left; background:rgba(255,255,255,.025); border:1px solid rgba(160,107,255,.18); border-radius:8px; padding:10px 11px; margin-bottom:8px; color:var(--text,#d6e6f2); font:inherit; cursor:pointer; transition:.2s; }
.dk-post:hover{ border-color:rgba(255,61,139,.5); transform:translateX(2px); }
.dk-post-top{ display:flex; justify-content:space-between; font-family:var(--mono,monospace); font-size:10px; letter-spacing:1px; margin-bottom:5px; }
.dk-post-top b{ color:#c48bff; font-weight:600; } .dk-post-top i{ font-style:normal; color:var(--text-dim,#6f8299); }
.dk-post-body{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; line-height:1.5; color:var(--text,#d6e6f2); }
.dk-post-body[dir="auto"]:lang(ar){ font-family:'Noto Kufi Arabic',sans-serif; }
html.light .dk-tiles div, html.light .dk-row, html.light .dk-post{ background:rgba(255,255,255,.55); }
.dk-empty{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:1px; color:var(--text-dim,#6f8299); padding:10px 4px; }

/* ===== PWA (2026-09-25) — installed-app chrome + install hint. Nothing here applies in a normal browser tab. ===== */
@media (display-mode: standalone){
  body:not(.on-landing){ padding-top:calc(28px + env(safe-area-inset-top)); padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  .orb-nav{ padding-top:calc(26px + env(safe-area-inset-top)); }
  .cm-toast, .pwa-hint{ bottom:calc(26px + env(safe-area-inset-bottom)); }
}
@media (display-mode: standalone) and (max-width:640px){
  body:not(.on-landing){ padding-top:calc(14px + env(safe-area-inset-top)); padding-bottom:calc(40px + env(safe-area-inset-bottom)); }
}
html.pwa-standalone body{ overscroll-behavior-y:none; -webkit-user-select:none; user-select:none; }
html.pwa-standalone input, html.pwa-standalone textarea, html.pwa-standalone [contenteditable]{ -webkit-user-select:text; user-select:text; }
.pwa-hint{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); width:min(520px, calc(100% - 24px)); z-index:2150;
  display:flex; align-items:center; gap:12px; padding:11px 12px 11px 11px; border-radius:16px;
  background:#0b1322; color:#d6e6f2; border:1px solid rgba(56,240,255,.35);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(56,240,255,.08) inset; animation:cmUp .35s ease-out; font-family:'Space Grotesk',sans-serif; }
.pwa-hint-ic{ width:44px; height:44px; border-radius:11px; flex:none; }
.pwa-hint-txt{ flex:1 1 auto; min-width:0; }
.pwa-hint-t{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:12px; letter-spacing:.14em; color:#fff; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.pwa-hint-t .ar{ font-family:'Noto Kufi Arabic',sans-serif; font-weight:600; letter-spacing:0; font-size:12px; color:var(--cyan); direction:rtl; }
.pwa-hint-s{ font-size:12.5px; line-height:1.45; color:#b9cad8; margin-top:3px; }
.pwa-hint-s b{ color:#fff; font-weight:600; }
.pwa-share{ display:inline-block; color:var(--cyan); font-size:14px; line-height:1; vertical-align:-1px; }
.pwa-hint-btn{ flex:none; font:inherit; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#04070d;
  background:var(--cyan); border:none; border-radius:999px; padding:10px 16px; cursor:pointer; box-shadow:0 0 18px rgba(56,240,255,.35); }
.pwa-hint-x{ flex:none; width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:transparent; color:#b9cad8; font-size:18px; line-height:1; cursor:pointer; }
html.light .pwa-hint{ background:#fff; color:#17222e; }
html.light .pwa-hint-t{ color:#0d1520; } html.light .pwa-hint-s{ color:#3b4b5c; } html.light .pwa-hint-s b{ color:#0d1520; }
@media (max-width:640px){ .pwa-hint{ bottom:14px; } .pwa-hint-btn{ padding:10px 13px; } }
/* PWA install guide sheet (2026-09-26) — opened by the landing "Install on your phone" button on iPhone / browsers without a prompt */
.pwa-sheet-back{ position:fixed; inset:0; z-index:2300; background:rgba(4,7,13,.72); backdrop-filter:blur(6px); animation:cmFade .25s ease-out; }
.pwa-sheet{ position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(520px, calc(100% - 24px)); z-index:2301;
  background:#0b1322; color:#d6e6f2; border:1px solid rgba(56,240,255,.35); border-radius:20px; padding:18px 18px 16px; font-family:'Space Grotesk',sans-serif;
  box-shadow:0 30px 90px -30px rgba(56,240,255,.35), 0 40px 80px -40px rgba(0,0,0,.9); animation:cmUp .32s cubic-bezier(.2,.8,.2,1); }
.pwa-sheet h4{ margin:0 0 4px; font-family:'Orbitron',sans-serif; font-weight:700; font-size:13px; letter-spacing:.16em; color:#fff; display:flex; align-items:center; gap:12px; }
.pwa-sheet h4 img{ width:34px; height:34px; border-radius:9px; }
.pwa-sheet .ar{ font-family:'Noto Kufi Arabic',sans-serif; direction:rtl; text-align:right; color:#9fb7c9; font-size:13px; margin-top:10px; line-height:1.7; }
.pwa-sheet ol{ margin:12px 0 0; padding-left:22px; font-size:14.5px; line-height:1.6; }
.pwa-sheet ol li{ margin:6px 0; } .pwa-sheet b{ color:#fff; font-weight:600; }
.pwa-sheet .ic{ display:inline-block; color:var(--cyan); font-size:16px; line-height:1; vertical-align:-2px; }
.pwa-sheet .row{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.pwa-sheet button{ font:inherit; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; border-radius:999px; padding:10px 18px; cursor:pointer; }
.pwa-sheet .ok{ background:var(--cyan); color:#04070d; border:none; box-shadow:0 0 18px rgba(56,240,255,.35); }
.pwa-sheet .ghost{ background:transparent; color:#b9cad8; border:1px solid rgba(255,255,255,.2); }
html.light .pwa-sheet{ background:#fff; color:#17222e; } html.light .pwa-sheet h4{ color:#0d1520; } html.light .pwa-sheet b{ color:#0d1520; } html.light .pwa-sheet .ar{ color:#3b4b5c; }
/* Installed-app safe areas for the FIXED full-screen overlays (2026-09-26, tester report: the SI booth's CLOSE sat under the
   iPhone status bar). html.pwa-standalone is set by js/pwa.js when running installed or inside the native shell; the
   html-class selector out-specifies the overlays' own #id rules that si.js/tester.js inject at runtime. */
html.pwa-standalone #siPage{ padding-top:calc(18px + env(safe-area-inset-top)); padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
html.pwa-standalone #siPage .explain{ top:calc(76px + env(safe-area-inset-top)); }
html.pwa-standalone .tt-page{ padding-top:calc(16px + env(safe-area-inset-top)); padding-bottom:calc(40px + env(safe-area-inset-bottom)); }
html.pwa-standalone .orb-drawer .panel{ padding-top:calc(70px + env(safe-area-inset-top)); }
html.pwa-standalone .orb-drawer .close{ top:calc(22px + env(safe-area-inset-top)); }
html.pwa-standalone .cm-sheet{ max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }

/* ═══════════ DRAGOMAN SEAL — the loading system (2026-10-21) ═══════════
   One family, drawn from the brand mark (double hexagon + ت): the SEAL (comet running the outer hexagon, inner
   hexagon counter-turning, ت breathing), the TRIO (three hexagons in a wave, for inline waits), the SCAN (a light
   sweeping a hairline, for wide panels) and the BUSY button (a hexagon before the label while the button is disabled).
   Colours come from the theme tokens, so light mode needs no overrides. Markup comes from js/loader.js (DRGLoad). */
:root{
  --drg-hex-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='32,5 55.4,18.5 55.4,45.5 32,59 8.6,45.5 8.6,18.5' fill='none' stroke='%23000' stroke-width='4.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  --drg-hex-in:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='32,5 55.4,18.5 55.4,45.5 32,59 8.6,45.5 8.6,18.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.drg-seal{ --s:48px; position:relative; display:inline-block; flex:none; width:var(--s); height:var(--s); vertical-align:middle;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--cyan) 55%, transparent)); }
.drg-seal.xs{ --s:16px; } .drg-seal.sm{ --s:28px; } .drg-seal.lg{ --s:88px; }
.drg-seal > i{ position:absolute; inset:0; overflow:hidden; background:color-mix(in srgb, var(--cyan) 16%, transparent);
  -webkit-mask:var(--drg-hex-out) center/100% 100% no-repeat; mask:var(--drg-hex-out) center/100% 100% no-repeat; }
.drg-seal > i::before{ content:''; position:absolute; inset:-30%;
  background:conic-gradient(from 0deg, transparent 0 44%, color-mix(in srgb, var(--violet) 55%, transparent) 60%, var(--violet) 78%, var(--cyan) 97%, #fff 100%);
  animation:drgOrbit 1.5s linear infinite; }
.drg-seal::before{ content:''; position:absolute; inset:18%;
  background:conic-gradient(from 0deg, color-mix(in srgb, var(--magenta) 70%, transparent) 0 22%, transparent 22% 48%, color-mix(in srgb, var(--violet) 75%, transparent) 48% 74%, transparent 74% 100%);
  -webkit-mask:var(--drg-hex-in) center/100% 100% no-repeat; mask:var(--drg-hex-in) center/100% 100% no-repeat;
  animation:drgOrbit 3.4s linear infinite reverse; }
.drg-seal::after{ content:'ت'; position:absolute; inset:0; display:grid; place-items:center; padding-bottom:calc(var(--s) * .09);
  font:700 calc(var(--s) * .38)/1 'Noto Kufi Arabic','Segoe UI',sans-serif; color:var(--text);
  text-shadow:0 0 10px color-mix(in srgb, var(--cyan) 60%, transparent); animation:drgBreath 1.8s ease-in-out infinite; }
.drg-seal.xs::before, .drg-seal.xs::after{ display:none; }
.drg-seal.lg > i::before{ animation-duration:1.9s; }
@keyframes drgOrbit{ to{ transform:rotate(360deg); } }
@keyframes drgBreath{ 0%,100%{ opacity:.55; transform:scale(.92); } 50%{ opacity:1; transform:scale(1.04); } }
html.light .drg-seal{ filter:none; }
html.light .drg-seal::after{ text-shadow:none; }
html.light .drg-seal > i::before{ background:conic-gradient(from 0deg, transparent 0 44%, color-mix(in srgb, var(--violet) 55%, transparent) 60%, var(--violet) 78%, var(--cyan) 100%); }

/* TRIO — three hexagons in a wave, sits inline with text */
.drg-trio{ display:inline-flex; align-items:center; gap:.28em; vertical-align:middle; margin-inline-start:.5em; }
.drg-trio i{ width:.62em; height:.7em; background:var(--cyan); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); opacity:.35; animation:drgWave 1.2s ease-in-out infinite; }
.drg-trio i:nth-child(2){ background:var(--violet); animation-delay:.15s; }
.drg-trio i:nth-child(3){ background:var(--magenta); animation-delay:.3s; }
@keyframes drgWave{ 0%,100%{ opacity:.3; transform:scale(.6); } 40%{ opacity:1; transform:scale(1.1); } }

/* SCAN — a light sweeping a hairline, for wide panels */
.drg-scan{ display:block; position:relative; width:100%; max-width:260px; height:2px; overflow:hidden; border-radius:2px; background:color-mix(in srgb, var(--cyan) 14%, transparent); }
.drg-scan::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:34%; background:linear-gradient(90deg, transparent, var(--cyan), var(--violet), var(--magenta), transparent); animation:drgScan 1.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes drgScan{ from{ transform:translateX(-100%); } to{ transform:translateX(300%); } }

/* LOAD LINE — seal + words (+ optional scan), the drop-in for every old "loading…" line */
.drg-load{ display:flex; align-items:center; justify-content:center; gap:12px; padding:10px 6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--text-dim); text-align:center; }
.drg-load.stack{ flex-direction:column; gap:14px; padding:26px 8px; }
.drg-load.left{ justify-content:flex-start; padding-inline:0; }
.drg-load-t{ display:inline-flex; flex-direction:column; align-items:center; gap:8px; }
.drg-load.left .drg-load-t{ align-items:flex-start; }
.drg-load-t b{ font-weight:inherit; }
.drg-load-t b::after{ content:'...'; display:inline-block; width:1.4em; text-align:left; animation:drgEll 1.4s steps(1) infinite; }
.drg-load-t em{ font-style:normal; font-family:'Noto Kufi Arabic','Segoe UI',sans-serif; letter-spacing:0; font-size:12px; direction:rtl; }
@keyframes drgEll{ 0%{ content:'.'; } 33%{ content:'..'; } 66%{ content:'...'; } }

/* BUSY BUTTON — a hexagon before the label for as long as the button is disabled (js/loader.js adds/removes the class) */
.drg-busy::before{ content:''; display:inline-block; width:1.05em; height:1.05em; margin-inline-end:.6em; vertical-align:-.17em;
  background:conic-gradient(from 0deg, transparent 0 20%, currentColor 100%);
  -webkit-mask:var(--drg-hex-out) center/100% 100% no-repeat; mask:var(--drg-hex-out) center/100% 100% no-repeat; animation:drgOrbit .9s linear infinite; }
.drg-busy:not(:disabled)::before{ display:none; }

@media (prefers-reduced-motion:reduce){
  .drg-seal > i::before{ animation:none; transform:rotate(230deg); }
  .drg-seal::before, .drg-busy::before, .drg-scan::before{ animation:none; }
  .drg-trio i{ animation:none; opacity:.85; transform:none; }
  .drg-load-t b::after{ animation:none; }
  .drg-seal::after{ animation-duration:3.6s; }
}

/* ═══════════════ BILLING — DRAGOMAN PRO (2026-10-13; js/billing.js) ═══════════════ */
.hdr-access{display:none;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;font-weight:700;border-radius:16px;padding:5px 12px;white-space:nowrap;cursor:pointer;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:var(--text);transition:box-shadow .2s,transform .2s;}
.hdr-access:hover{transform:translateY(-1px);box-shadow:0 8px 24px -12px rgba(56,240,255,.6);}
body:not(.in-round) .hdr-access{display:inline-flex;}
.hdr-access.trial{color:var(--amber);border-color:rgba(255,196,61,.45);background:rgba(255,196,61,.07);}
.hdr-access.pro{color:var(--cyan);border-color:rgba(56,240,255,.45);background:rgba(56,240,255,.07);}
.hdr-access.founding{color:#ffd66b;border-color:rgba(255,214,107,.5);background:linear-gradient(120deg,rgba(255,214,107,.12),rgba(56,240,255,.08));text-shadow:0 0 12px rgba(255,214,107,.5);}
.hdr-access.locked{color:#fff;border-color:transparent;background:linear-gradient(120deg,#ff3d8b,var(--violet) 60%,var(--cyan));background-size:200% 100%;animation:cmShimmer 3s ease-in-out infinite;box-shadow:0 10px 30px -14px rgba(255,61,139,.8);}
.bp-tier{display:inline-block;margin-left:10px;font-family:var(--mono);font-size:9px;letter-spacing:2px;font-weight:700;padding:3px 9px;border-radius:6px;vertical-align:middle;}
.bp-tier.founding{color:#ffd66b;border:1px solid rgba(255,214,107,.5);background:rgba(255,214,107,.08);text-shadow:0 0 10px rgba(255,214,107,.5);}
.bp-tier.pro{color:var(--cyan);border:1px solid rgba(56,240,255,.45);background:rgba(56,240,255,.08);}

/* ── the sheet is a HUD panel: chamfered double frame drawn in SVG by billing.js (same geometry as the registration drawer card,
      js/authfx.js), "DRAGOMAN PRO" as the notched tab, glass fill, hatch band, scanlines. The .cm-sheet skin is overridden. ── */
.bp-sheet{width:min(620px,calc(100% - 20px));max-height:calc(100dvh - 32px);padding:0 !important;overflow:visible !important;display:flex;flex-direction:column;z-index:3001;isolation:isolate;
  background:none !important;border:0 !important;border-radius:0 !important;box-shadow:0 40px 90px -40px rgba(0,0,0,.9) !important;}
.bp-sheet[hidden]{display:none;}
#bpBack{z-index:3000;background:rgba(4,7,13,.72);}
.bp-svg{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none;}
.bp-fill{fill:rgba(6,14,32,.93);}
.bp-glow{fill:none;stroke:#38f0ff;stroke-width:7;opacity:.14;}
.bp-line{fill:none;stroke:#7ff6ff;stroke-width:1.6;stroke-dashoffset:var(--bp-len,0);}
.bp-inner{fill:none;stroke:rgba(56,240,255,.34);stroke-width:1;}
.bp-sheet.bp-on .bp-line{stroke-dashoffset:0;}
.bp-tab{position:absolute;z-index:3;top:3px;left:24px;height:26px;display:flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid rgba(127,246,255,.7);background:rgba(8,24,44,.96);
  box-shadow:0 0 14px rgba(56,240,255,.35),inset 0 0 10px rgba(56,240,255,.15);font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.2em;color:#bff9ff;text-shadow:0 0 8px rgba(56,240,255,.8);white-space:nowrap;}
.bp-x{position:absolute;z-index:3;top:24px;right:14px;width:36px;height:36px;display:grid;place-items:center;font:inherit;font-size:15px;color:#bff9ff;cursor:pointer;border:1px solid rgba(127,246,255,.5);background:rgba(6,14,32,.9);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:background .2s,color .2s;}
.bp-x:hover{color:#fff;background:rgba(56,240,255,.18);}
.bp-scroll{position:relative;z-index:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:34px 0 22px;max-height:calc(100dvh - 32px);
  background:repeating-linear-gradient(0deg,rgba(180,240,255,.03) 0 1px,transparent 1px 3px);}
.bp-hatch{position:absolute;z-index:2;height:12px;border-top:1px solid rgba(56,240,255,.3);pointer-events:none;background:repeating-linear-gradient(135deg,rgba(56,240,255,.22) 0 2px,transparent 2px 9px);}
.bp-sheet .bp-head{background:radial-gradient(120% 90% at 10% 0%,rgba(139,92,246,.28),transparent 55%),radial-gradient(90% 80% at 100% 0%,rgba(56,240,255,.2),transparent 55%);border-bottom:1px solid rgba(120,170,200,.14);padding:18px 24px 14px;}
.bp-sheet .bp-plan{border-radius:0;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);}
.bp-sheet .bp-plan .tag{top:8px;right:14px;}
.bp-sheet .bp-plan .n .ar{font-size:11px;margin-top:2px;}
.bp-sheet .bp-primary,.bp-sheet .cm-sheet-close{border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);}
.bp-sheet .bp-acct>div,.bp-sheet .bp-pending{border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
.bp-sheet .bp-ref{border-radius:0;}
.bp-paytitle{margin:16px 24px 0;font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.3em;color:#7ff6ff;text-shadow:0 0 10px rgba(56,240,255,.6);}
.bp-step .code{font-family:var(--mono);letter-spacing:2px;color:#ffe5a3;font-weight:800;}
.bp-step .handle{font-family:var(--mono);color:var(--cyan);font-weight:700;letter-spacing:.5px;}
.bp-status b{color:#fff;}
@media(prefers-reduced-motion:no-preference){
  .bp-sheet.bp-on .bp-line{animation:bpDraw .9s cubic-bezier(.6,.05,.3,1) both;}
  @keyframes bpDraw{from{stroke-dashoffset:var(--bp-len,0);}to{stroke-dashoffset:0;}}
  .bp-sheet.bp-on .bp-glow{animation:afGlow 4.5s ease-in-out .9s infinite;}
  .bp-sheet.bp-on .bp-tab{animation:afFlicker .8s steps(1,end) .3s both;}
}
.bp-sheet .ar{display:block;direction:rtl;font-family:'Noto Kufi Arabic','Space Grotesk',sans-serif;font-size:.92em;color:#9fb3c8;margin-top:3px;line-height:1.7;}
.bp-head{padding:22px 22px 14px;background:radial-gradient(120% 90% at 10% 0%,rgba(139,92,246,.35),transparent 55%),radial-gradient(90% 80% at 100% 0%,rgba(56,240,255,.25),transparent 55%);border-bottom:1px solid rgba(120,170,200,.14);}
.bp-kicker{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.4em;color:#9fb3c8;}
.bp-head h3{font-family:'Orbitron',sans-serif;font-size:34px;letter-spacing:.14em;margin:2px 0 10px;color:#fff;text-shadow:0 0 24px rgba(56,240,255,.55);}
.bp-status{font-size:13.5px;padding:10px 12px;border-radius:10px;border:1px solid rgba(120,170,200,.2);background:rgba(255,255,255,.04);}
.bp-status.trial{border-color:rgba(255,196,61,.4);color:#ffd98a;}
.bp-status.locked{border-color:rgba(255,61,139,.45);color:#ffb3d1;}
.bp-status.pro{border-color:rgba(56,240,255,.4);color:#bdf3ff;}
.bp-status.founding{border-color:rgba(255,214,107,.5);color:#ffe5a3;background:rgba(255,214,107,.06);}
.bp-perks{list-style:none;margin:16px 22px 6px;padding:0;display:grid;gap:9px;}
.bp-perks li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.45;color:#d6e6f2;}
.bp-perks li::before{content:"◆";position:absolute;left:0;top:1px;color:var(--cyan);font-size:11px;}
.bp-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 22px 0;}
.bp-plan{position:relative;text-align:left;font:inherit;color:#d6e6f2;cursor:pointer;border-radius:16px;padding:16px 14px 14px;border:1px solid rgba(120,170,200,.22);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));display:grid;gap:4px;transition:transform .2s,box-shadow .2s,border-color .2s;}
.bp-plan:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(56,240,255,.6);box-shadow:0 18px 40px -22px rgba(56,240,255,.7);}
.bp-plan:disabled{opacity:.55;cursor:default;}
.bp-plan.best{border-color:rgba(139,92,246,.6);background:linear-gradient(180deg,rgba(139,92,246,.18),rgba(56,240,255,.06));}
.bp-plan .tag{position:absolute;top:-9px;right:12px;font-family:var(--mono);font-size:8.5px;letter-spacing:1.6px;font-weight:700;color:var(--void);background:var(--amber);border-radius:5px;padding:2px 7px;}
.bp-plan .k{font-family:var(--mono);font-size:9.5px;letter-spacing:2px;color:#9fb3c8;}
.bp-plan .p{font-family:'Orbitron',sans-serif;font-size:26px;color:#fff;letter-spacing:.04em;}
.bp-plan .p i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--cyan);margin-left:6px;vertical-align:middle;}
.bp-plan .s{font-family:var(--mono);font-size:11px;color:var(--cyan);min-height:14px;}
.bp-plan .n{font-size:11.5px;color:#9fb3c8;}
.bp-note,.bp-foot,.bp-hint{font-size:12px;color:#9fb3c8;line-height:1.5;}
.bp-note{margin:12px 22px 0;}
.bp-foot{margin:14px 22px 0;padding-top:12px;border-top:1px dashed rgba(120,170,200,.2);}
.bp-steps{display:grid;gap:14px;margin:16px 22px 0;}
.bp-step{display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:13.5px;line-height:1.45;}
.bp-step .num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:700;color:var(--void);background:var(--cyan);box-shadow:0 0 16px rgba(56,240,255,.5);}
.bp-acct{margin-top:10px;display:grid;gap:8px;}
.bp-acct>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(120,170,200,.18);}
.bp-acct small{font-family:var(--mono);font-size:8.5px;letter-spacing:1.8px;color:#9fb3c8;min-width:120px;}
.bp-acct span{font-size:15px;color:#fff;font-weight:600;}
.bp-acct span.mono{font-family:var(--mono);letter-spacing:2px;font-size:17px;}
.bp-copy{margin-left:auto;font:inherit;font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;color:var(--cyan);background:rgba(56,240,255,.08);border:1px solid rgba(56,240,255,.35);border-radius:7px;padding:5px 9px;cursor:pointer;}
.bp-ref{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;border:2px solid var(--amber);background:rgba(255,196,61,.1);box-shadow:0 0 24px -8px rgba(255,196,61,.7);}
.bp-ref .code{font-family:var(--mono);font-size:22px;letter-spacing:3px;font-weight:800;color:#fff;text-shadow:0 0 14px rgba(255,196,61,.8);}
.bp-ref .sep{color:#9fb3c8;}
.bp-ref .who{font-size:15px;color:#ffe5a3;font-weight:600;}
.bp-hint{margin-top:8px;}
.bp-primary{width:100%;justify-content:center;font-family:'Orbitron',sans-serif;letter-spacing:.12em;font-size:12.5px;padding:14px 18px;border-radius:12px;border:none;cursor:pointer;color:#fff;background:linear-gradient(120deg,#ff3d8b,var(--violet) 60%,var(--cyan));background-size:200% 100%;animation:cmShimmer 3s ease-in-out infinite;box-shadow:0 14px 34px -14px rgba(255,61,139,.8);}
.bp-sheet .cm-sheet-row{margin:16px 22px 0;}
.bp-links{margin:12px 22px 0;font-size:12px;color:#9fb3c8;text-align:center;}
.bp-links a{color:var(--cyan);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.bp-sheet .cm-sheet-close{width:calc(100% - 44px);margin:14px 22px 0;}
.bp-pending{margin:18px 22px 0;text-align:center;padding:18px 14px;border-radius:14px;border:1px solid rgba(255,196,61,.35);background:rgba(255,196,61,.06);}
.bp-pending b{display:block;font-family:'Orbitron',sans-serif;letter-spacing:.14em;font-size:14px;color:#ffe5a3;}
.bp-pending p{margin:10px 0 0;font-size:13px;line-height:1.55;color:#d6e6f2;}
.bp-pending .code{font-family:var(--mono);color:#fff;letter-spacing:2px;}
.bp-pending .spin{width:34px;height:34px;margin:0 auto 10px;border-radius:50%;border:3px solid rgba(255,196,61,.2);border-top-color:var(--amber);animation:bpSpin 1.1s linear infinite;}
@keyframes bpSpin{to{transform:rotate(360deg);}}
/* final-qa 2026-10-24 (audit D-16): with the access chip present the header .stats row (nowrap) ran past a 390 px phone and the whole console laid out at ~698 px. On phones the chip takes its own full-width line above the pills; without a chip nothing changes.
   2026-10-24 evening: the html{overflow-x:clip} that shipped with this rule is GONE — it made <body> (overflow-x:hidden) its own scroll container instead of the viewport, and on Android Chrome / WebView one-finger drags then stopped scrolling the page (operators needed two fingers, "like zooming"). iPhones were unaffected. body already clips horizontal overflow via the viewport, as it did for weeks before. Never put overflow on html. */
@media (max-width:640px){ .stats{flex-wrap:wrap;} body:not(.in-round) .hdr-access{flex:1 1 100%; justify-content:center; order:-1; margin-bottom:2px;} }
@media (max-width:520px){ .bp-plans{grid-template-columns:1fr;} .bp-head h3{font-size:28px;} .bp-ref .code{font-size:19px;} .hdr-access{font-size:8.5px;padding:4px 9px;letter-spacing:1.2px;} }
/* admin tab */
.bp-adm .bp-switchrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0;}
.bp-pill{font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;font-weight:700;padding:5px 10px;border-radius:7px;border:1px solid;}
.bp-pill.on{color:var(--lime);border-color:rgba(190,255,80,.45);background:rgba(190,255,80,.08);}
.bp-pill.off{color:var(--amber);border-color:rgba(255,196,61,.45);background:rgba(255,196,61,.08);}
.bp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 14px;}
.bp-field{display:grid;gap:4px;font-size:11px;color:var(--text-dim);}
.bp-field span{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;}
.bp-field input{font:inherit;font-size:13.5px;padding:8px 10px;border-radius:8px;border:1px solid rgba(120,170,200,.25);background:rgba(255,255,255,.04);color:var(--text);}
.bp-field.check{grid-template-columns:auto 1fr;align-items:center;grid-column:1/-1;}
.bp-field.check span{font-family:inherit;font-size:12px;letter-spacing:0;}
.bp-actions{white-space:nowrap;}
.bp-actions .ghost-btn{margin-right:6px;}
.ghost-btn.ok{color:var(--lime);border-color:rgba(190,255,80,.45);background:rgba(190,255,80,.06);}
.bp-refcell{font-weight:700;letter-spacing:2px;color:#ffe5a3;}
.bp-adm a[data-adm]{color:var(--cyan);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
/* ── launch revision 2026-10-21: PRO lock badges (trial: paid modes; locked: everything), admin info rows, chamfered chip ── */
.hdr-access{border-radius:0;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);}
.bp-locked{filter:saturate(.55);}
.mode-card.bp-locked h2,.mode-card.bp-locked p,.mode-card.bp-locked .mc-ar,.bp-locked .rs-text,.bp-locked .ds-text{opacity:.78;}
.bp-lock{position:absolute;z-index:3;top:10px;right:10px;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:8.5px;letter-spacing:1.8px;font-weight:700;color:#ffd1e3;
  background:rgba(10,8,20,.84);border:1px solid rgba(255,61,139,.65);padding:4px 8px 4px 7px;pointer-events:none;box-shadow:0 0 14px -4px rgba(255,61,139,.7);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);}
.bp-lock svg{width:10px;height:11px;fill:none;stroke:#ff7fb5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.bp-lock i{font-style:normal;}
#siModeCard .bp-lock{top:12px;left:12px;right:auto;}   /* the SI card keeps its BETA tag on the right */
#reviewStrip .bp-lock,#dailyStrip .bp-lock{position:static;flex:none;margin-left:10px;}   /* strips are flex rows: the badge sits after the pill / meta */
.mode-tabs .bp-lock{position:static;margin-left:7px;padding:2px 5px 2px 4px;font-size:7.5px;letter-spacing:1.2px;vertical-align:middle;}
.bp-info{margin-top:12px;display:grid;gap:8px;}
.bp-info>div{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:8px 12px;border:1px solid rgba(120,170,200,.18);background:rgba(255,255,255,.03);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);}
.bp-info small{font-family:var(--mono);font-size:8.5px;letter-spacing:1.8px;color:#9fb3c8;min-width:150px;}
.bp-info span{font-size:13px;color:var(--text);}
.bp-info .adm-note{padding:0 2px;}
@media (max-width:520px){
  .bp-sheet .bp-head{padding:16px 18px 12px;}
  .bp-perks,.bp-plans,.bp-steps,.bp-note,.bp-foot,.bp-paytitle,.bp-pending,.bp-links,.bp-sheet .cm-sheet-row{margin-left:18px;margin-right:18px;}
  .bp-sheet .cm-sheet-close{width:calc(100% - 36px);margin-left:18px;margin-right:18px;}
  .bp-tab{left:18px;font-size:10px;letter-spacing:.16em;}
  .bp-x{top:22px;right:10px;width:32px;height:32px;}
  .bp-lock{top:8px;right:8px;font-size:8px;padding:3px 6px 3px 5px;}
  #reviewStrip .bp-lock,#dailyStrip .bp-lock{position:absolute;top:0;right:0;margin:0;}   /* corner tag: the strip text keeps its width */
}

/* ═══════════ PHONE HOME ORDER (2026-10-24, test/diagnostics-2026-10-24-navigation.md) ═══════════
   On a phone the hero photo + founder note + two strips pushed the category tabs to y≈817 and the first
   mode card to y≈928 on an 812 px screen — operators saw no training mode without scrolling and reported
   "I can't tap all the modes". Below 760 px the tabs now follow the title and the strips/hero move under
   the grid. Categories are unchanged (Walker: keep modes in their categories). js/desktop.js re-parents
   the home children into .home-main, so both parents are addressed. Desktop (≥761 px) is untouched. */
@media (max-width:760px){
  .home-main, .home-page{ display:flex; flex-direction:column; }
  .home-main > .home-rank-strip, .home-page > .home-rank-strip{ order:0; }
  .home-main > .home-title,      .home-page > .home-title{      order:1; }
  .home-main > #modeTabs,        .home-page > #modeTabs{        order:2; }
  .home-main > .mode-grid,       .home-page > .mode-grid{       order:3; }
  .home-main > #community,       .home-page > #community{       order:3; }
  .home-main > #reviewStrip,     .home-page > #reviewStrip{     order:4; margin-top:16px; }
  .home-main > #dailyStrip,      .home-page > #dailyStrip{      order:5; }
  .home-main > .home-hero,       .home-page > .home-hero{       order:6; margin-top:18px; }
  .home-main > #homeBoards,      .home-page > #homeBoards{      order:7; }
  .home-main > #statsOpenBtn,    .home-page > #statsOpenBtn{    order:8; }
  /* the five tabs are the bottom bar on a phone — see PHONE BOTTOM TAB BAR at the end of this file */
  .mode-grid{ gap:12px; }
  .mode-card{ padding:22px 20px; }
}
/* Touch devices: the per-frame repaints behind the lag (conic ring on every card and strip, the tab-bar sweep,
   the banner scan line / pan) are desktop flourishes — stop them where there is no hover. The ring stays as a
   static accent; the light-follow pointermove handler in js/ui.js is gated the same way. */
@media (hover:none), (pointer:coarse){
  .mode-card::after, .review-strip::after, .daily-strip::after, .mode-tabs::before, .seg::before{ animation:none !important; }
  .home-banner::before, .home-banner img{ animation:none !important; }
}

/* ═══════════ TOUCH: NO ENTRANCE ANIMATIONS (2026-10-24, operator video) ═══════════
   display:none → block restarts a CSS animation, so every return to the home page (Back from Inbox, Home
   button) replayed dropIn (.7 s + .15 s delay, fill both = the whole page invisible for the delay) and pageIn,
   and every category tab tap replayed fadeSlide on each card — on a mid-range Android that read as a blank
   screen for about a second and an empty grid after a tab tap. Desktop keeps all of it. */
@media (hover:none), (pointer:coarse){
  .home-page, #homePage, #trainerPage, #statsPage{ animation:none !important; }
  .mode-card.tab-visible{ animation:none !important; }
}

/* ═══════════ NEON TUBE ICONS (2026-10-24, Walker-approved: test/icon-preview-2026-10-24.html) ═══════════
   Stroke icons from the symbol sheet at the top of <body>, drawn as glowing tubes in two palette colours.
   --c1/--c2 are set per hue class and inherited into the <use> shadow tree (document selectors cannot reach it).
   .nb = tube button · .on = lit (white core + colour halo) · .off = dimmed with a slash · .ring = orbit ring (home, mic)
   · .dn = day/night pill (theme). Light mode: lit tubes go dark with a coloured halo. */
.nt{width:22px;height:22px;flex:none;overflow:visible;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 2px rgba(56,240,255,.55)) drop-shadow(0 0 7px rgba(160,107,255,.45))}
html.light .nt{filter:drop-shadow(0 0 1px rgba(8,122,150,.35))}
.nb{--c1:var(--cyan);--c2:var(--magenta);--halo:var(--cyan);--slash:none}
.hue-cm{--c1:#38f0ff;--c2:#a06bff;--halo:#38f0ff}
.hue-mg{--c1:#ff3d8b;--c2:#ff7a59;--halo:#ff3d8b}
.hue-am{--c1:#ffc24b;--c2:#ff3d8b;--halo:#ffc24b}
.hue-lm{--c1:#5dffa8;--c2:#38f0ff;--halo:#5dffa8}
.hue-vi{--c1:#a06bff;--c2:#38f0ff;--halo:#a06bff}
html.light .hue-cm{--c1:#087a96;--c2:#6a3fd6} html.light .hue-mg{--c1:#d81b6a;--c2:#e0553a} html.light .hue-am{--c1:#b57b00;--c2:#d81b6a}
html.light .hue-lm{--c1:#1b9a56;--c2:#087a96} html.light .hue-vi{--c1:#6a3fd6;--c2:#087a96}
.nb{display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,border-color .25s,box-shadow .25s}
.nb:hover .nt{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--halo)) drop-shadow(0 0 16px var(--c2))}
.nb.on .nt{--c1:#fff;--c2:#fff;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--halo)) drop-shadow(0 0 14px var(--c2))}
html.light .nb.on .nt{--c1:#0d1520;--c2:#0d1520;filter:drop-shadow(0 0 4px var(--halo))}
.nb.on{border-color:var(--halo);box-shadow:0 0 16px color-mix(in srgb,var(--halo) 35%,transparent),inset 0 0 14px color-mix(in srgb,var(--halo) 12%,transparent)}
.nb.off .nt{filter:none;opacity:.55}
.nb.off{--slash:block}
.nb.wide{width:auto;padding:0 14px 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
/* header: inbox, admin, sound, theme */
.inbox-btn{font-size:0;color:var(--text)} .inbox-btn.show{display:inline-flex}
.admin-btn.nb{color:var(--amber);gap:8px}
.admin-btn.nb:not(.show){display:none}   /* 2026-10-24 evening: .nb (display:inline-flex, later in the sheet) was beating .admin-btn{display:none} — every operator saw an ADMIN button after the neon-icon release */
.snd-btn.nb{height:40px;padding:0 12px 0 9px;color:var(--text-dim);border-radius:10px;letter-spacing:1px;font-size:10px}
.snd-btn.nb.on{color:var(--lime);border-color:var(--lime);background:rgba(93,255,168,.1);box-shadow:0 0 12px rgba(93,255,168,.25)}
.snd-btn.nb.off{color:var(--text-dim)}
/* day / night pill (theme-btn) */
.theme-btn.dn{--w:72px;--h:36px;position:relative;width:var(--w);height:var(--h);border-radius:999px;border:1px solid rgba(255,255,255,.14);overflow:hidden;background:#101a3a;font-size:0;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 0 16px rgba(56,240,255,.12);transition:background .45s,transform .15s}
.theme-btn.dn:hover{transform:none;border-color:rgba(56,240,255,.5)}
.theme-btn.dn .sky{position:absolute;inset:0;transition:opacity .45s}
.theme-btn.dn .sky.night{background:linear-gradient(180deg,#0b1030,#1a1f55)}
.theme-btn.dn .sky.day{background:linear-gradient(180deg,#7cc3ff,#cfe9ff);opacity:0}
.theme-btn.dn .stars{position:absolute;inset:0;background-image:radial-gradient(1.2px 1.2px at 20% 35%,#fff 99%,transparent),radial-gradient(1px 1px at 38% 70%,#fff 99%,transparent),radial-gradient(1.4px 1.4px at 62% 30%,#fff 99%,transparent),radial-gradient(1px 1px at 76% 62%,#fff 99%,transparent),radial-gradient(1px 1px at 88% 28%,#fff 99%,transparent);transition:opacity .45s}
.theme-btn.dn .cloud{position:absolute;left:46%;bottom:5px;width:26px;height:9px;border-radius:9px;background:#fff;opacity:0;transition:opacity .45s,transform .45s;transform:translateX(10px)}
.theme-btn.dn .cloud::before{content:"";position:absolute;left:7px;top:-5px;width:12px;height:12px;border-radius:50%;background:#fff}
.theme-btn.dn .cloud::after{content:"";position:absolute;left:15px;top:-3px;width:9px;height:9px;border-radius:50%;background:#fff}
.theme-btn.dn .knob{position:absolute;top:4px;left:4px;width:calc(var(--h) - 10px);height:calc(var(--h) - 10px);border-radius:50%;background:#e9eefb;
  box-shadow:0 0 10px rgba(255,255,255,.7),inset -5px -4px 0 #c5cbe8;transition:left .45s cubic-bezier(.2,.9,.3,1.2),background .45s,box-shadow .45s}
.theme-btn.dn .knob::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,transparent 60%)}
.theme-btn.dn.day{background:#8fd0ff}
.theme-btn.dn.day .sky.day{opacity:1}
.theme-btn.dn.day .sky.night,.theme-btn.dn.day .stars{opacity:0}
.theme-btn.dn.day .cloud{opacity:1;transform:translateX(0)}
.theme-btn.dn.day .knob{left:calc(var(--w) - var(--h) + 5px);background:#ffd84d;box-shadow:0 0 14px #ffc24b,0 0 28px rgba(255,194,75,.6)}
/* rings: home + mic */
@property --orb2{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes orb2{to{--orb2:360deg}}
.ring{--c1:var(--cyan);--c2:var(--magenta);position:relative;isolation:isolate;border:none;background:rgba(6,12,24,.85);color:var(--text)}
.ring::before{content:"";position:absolute;inset:-3px;border-radius:inherit;padding:3px;
  background:conic-gradient(from var(--orb2),transparent 0 40%,var(--c1) 55%,#fff 62%,var(--c2) 72%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:orb2 4s linear infinite;filter:drop-shadow(0 0 6px var(--c1));pointer-events:none}
.ring .nt{--c1:#fff;--c2:#fff;width:24px;height:24px;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--c1))}
html.light .ring{background:rgba(255,255,255,.9)} html.light .ring .nt{--c1:#0d1520;--c2:#0d1520;filter:none}
.home-btn.ring{border-radius:999px;height:44px;padding:0 16px 0 4px;display:inline-flex;align-items:center;gap:10px;color:var(--text);border:none;background:rgba(6,12,24,.85)}
.home-btn.ring .core{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.home-btn.ring:hover{color:#fff;border-color:transparent}
.mic-btn{border:none;background:rgba(6,12,24,.85);--c1:#5dffa8;--c2:#38f0ff}
.mic-btn::before{content:"";position:absolute;inset:-3px;border-radius:50%;padding:3px;
  background:conic-gradient(from var(--orb2),transparent 0 40%,var(--c1) 55%,#fff 62%,var(--c2) 72%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:orb2 4s linear infinite;filter:drop-shadow(0 0 6px var(--c1));pointer-events:none}
.mic-btn .nt{--c1:#fff;--c2:#fff;width:26px;height:26px;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--c1))}
.mic-btn:hover{background:rgba(6,12,24,.95)}
.mic-btn.listening{--c1:#38f0ff;--c2:#a06bff;border-color:transparent;background:rgba(6,12,24,.85);animation:none;box-shadow:0 0 0 6px rgba(56,240,255,.18),0 0 30px rgba(56,240,255,.35)}
.mic-btn.listening::before{animation-duration:1.2s}
html.light .mic-btn{background:rgba(255,255,255,.9)} html.light .mic-btn .nt{--c1:#0d1520;--c2:#0d1520;filter:none}
@media (hover:none){.ring::before,.mic-btn::before{animation-duration:8s}}
/* community: post actions + top bar */
.cm-actions button{--c1:var(--cyan);--c2:var(--violet);--halo:var(--cyan)}
.cm-actions button .cm-heart{display:inline-flex;align-items:center}
.cm-actions button .nt{width:21px;height:21px}
.cm-actions button:hover .nt{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--halo))}
.cm-actions button.on .nt,.cm-actions button.saved .nt{--c1:#fff;--c2:#fff;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--halo)) drop-shadow(0 0 14px var(--c2))}
.cm-actions button.on .cm-heart,.cm-actions button.saved .cm-heart{color:inherit}
.cm-actions button.on b,.cm-actions button.saved b{color:var(--halo)}
html.light .cm-actions button.on .nt,html.light .cm-actions button.saved .nt{--c1:#0d1520;--c2:#0d1520;filter:drop-shadow(0 0 4px var(--halo))}
.cm-you-btn{--c1:var(--cyan);--c2:var(--violet);--halo:var(--cyan)}
.cm-you-btn b.nt-b{display:inline-flex;align-items:center;gap:6px;font-size:15px}
.cm-you-btn b.nt-b em{font-style:normal}
.cm-you-btn .nt{width:20px;height:20px}
.cm-you-btn:hover .nt{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--halo))}
/* console small set: back, close, edit, cancel */
.stats-back.nb,.name-edit-btn.nb{gap:7px}
.stats-back .nt,.name-edit-btn .nt,.ghost-btn .nt{width:18px;height:18px}
.ghost-btn{display:inline-flex;align-items:center;gap:7px;--c1:#ff3d8b;--c2:#ff7a59;--halo:#ff3d8b}
.st-close.nb{font-size:0}
html.light .snd-btn.nb{background:rgba(255,255,255,.9);color:var(--text-dim);border-color:var(--panel-edge)}
html.light .snd-btn.nb.on{color:var(--lime);border-color:var(--lime);background:rgba(27,154,86,.08)}
html.light .inbox-btn.nb,html.light .st-close.nb,html.light .stats-back.nb,html.light .name-edit-btn.nb{background:rgba(255,255,255,.9)}

/* ═══════════ REPORT A PROBLEM (2026-10-24, js/problems.js, _supabase/21-problem-reports.sql) ═══════════ */
.pr-card .pr-lead{font-size:13.5px;color:var(--text-dim);margin:0 0 14px;line-height:1.6}
.pr-card .pr-lead .ar{display:block;margin-top:6px;font-family:'Noto Kufi Arabic',sans-serif}
.pr-open.nb{height:44px;padding:0 18px 0 12px;color:var(--text);border-color:rgba(255,61,139,.45);background:rgba(255,61,139,.06)}
.pr-open.nb:hover{border-color:var(--magenta);box-shadow:0 0 18px rgba(255,61,139,.25)}
.pr-list{margin-top:16px}
.pr-list-k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--text-dim);margin:0 0 8px}
.pr-empty{font-size:13px;color:var(--text-dim)}
.pr-item{border:1px solid var(--panel-edge);border-left:3px solid var(--cyan);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:rgba(10,18,32,.5)}
.pr-item-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.pr-st{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--cyan);font-weight:700}
.pr-when{font-family:var(--mono);font-size:10px;color:var(--text-dim)}
.pr-item-text{font-size:13.5px;white-space:pre-wrap;line-height:1.55}
.pr-note{margin-top:8px;padding:8px 10px;border-radius:8px;background:rgba(255,194,75,.08);border:1px solid rgba(255,194,75,.3);font-size:13px;line-height:1.5}
.pr-tip{margin-top:6px;font-size:12px;color:var(--lime)}
.pr-item.st-fixed,.pr-adm.st-fixed{border-left-color:var(--lime)} .pr-item.st-fixed .pr-st{color:var(--lime)}
.pr-item.st-nofix,.pr-adm.st-nofix{border-left-color:var(--magenta)} .pr-item.st-nofix .pr-st{color:var(--magenta)}
.pr-item.st-info,.pr-adm.st-info{border-left-color:var(--amber)} .pr-item.st-info .pr-st,.pr-adm.st-info .pr-st{color:var(--amber)}
.pr-item.st-seen,.pr-adm.st-seen{border-left-color:var(--violet)} .pr-item.st-seen .pr-st{color:var(--violet)}
/* sheet */
.pr-back{position:fixed;inset:0;z-index:2300;background:rgba(4,7,13,.72);backdrop-filter:blur(6px)}
.pr-sheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;z-index:2301;background:var(--panel);border:1px solid var(--panel-edge);border-radius:16px;padding:18px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 30px rgba(255,61,139,.12)}
.pr-sh-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pr-sh-k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--magenta)}
.pr-x.nb{width:36px;height:36px}
.pr-f{display:block;margin-bottom:12px}
.pr-f span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--text-dim);margin-bottom:6px}
.pr-f select,.pr-f textarea{width:100%;background:rgba(4,7,13,.6);border:1px solid var(--panel-edge);border-radius:10px;color:var(--text);font:inherit;font-size:16px;padding:10px 12px}
.pr-f textarea{resize:vertical;min-height:120px;line-height:1.5}
.pr-f select:focus,.pr-f textarea:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(255,61,139,.15)}
.pr-meta{font-family:var(--mono);font-size:10px;color:var(--text-dim);margin:0 0 14px;word-break:break-all}
.pr-actions{display:flex;justify-content:flex-end;gap:10px}
.pr-send{background:var(--magenta);color:#fff;border:none;border-radius:10px;padding:12px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;cursor:pointer;box-shadow:0 0 18px rgba(255,61,139,.35)}
.pr-send:disabled{opacity:.6}
/* admin tab */
.pr-adm-seg{display:flex;gap:6px;margin:0 0 12px}
.pr-adm-seg button{background:transparent;border:1px solid var(--panel-edge);color:var(--text-dim);font-family:var(--mono);font-size:10px;letter-spacing:.16em;padding:8px 14px;border-radius:8px;cursor:pointer}
.pr-adm-seg button.on{color:var(--void);background:var(--cyan);border-color:var(--cyan)}
.pr-adm{border-left:3px solid var(--cyan)}
.pr-adm-who{font-size:13px;margin:4px 0 6px} .pr-adm-who span{color:var(--text-dim);font-family:var(--mono);font-size:11px}
.pr-dev{font-family:var(--mono);font-size:10px;color:var(--text-dim);margin-top:6px;word-break:break-all}
.pr-adm-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.pr-adm-act input{flex:1 1 220px;background:rgba(4,7,13,.6);border:1px solid var(--panel-edge);border-radius:8px;color:var(--text);font:inherit;font-size:13px;padding:9px 10px}
.pr-adm-act button{background:transparent;border:1px solid var(--panel-edge);color:var(--text);font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:9px 12px;border-radius:8px;cursor:pointer}
.pr-adm-act button[data-s="fixed"]{border-color:var(--lime);color:var(--lime)}
.pr-adm-act button[data-s="not_fixed"]{border-color:var(--magenta);color:var(--magenta)}
.pr-adm-act button[data-s="needs_info"]{border-color:var(--amber);color:var(--amber)}
html.light .pr-item,html.light .pr-sheet{background:rgba(255,255,255,.9)}
html.light .pr-f select,html.light .pr-f textarea,html.light .pr-adm-act input{background:#fff}
.pr-card .ops-ph em{margin-left:10px}

/* ═══════════ TOUCH: AMBIENT ANIMATIONS OFF (2026-10-24 evening, Walker: "should be light") ═══════════
   Measured on the live home page in a Pixel-class emulation with 4× CPU throttling: nine animations still ran
   continuously on a phone — the drifting grid backdrop (a full-screen masked repaint every frame), the scan line
   (animates `top` → layout every frame), the two blurred glow orbs (90 px blur, transformed every frame), the
   header mark's spin, the profile hex ring and the rotating glyph behind every visible card. None of them answers
   a touch; they are desktop ambience. On touch devices they now hold their first frame (the grid, orbs and glyphs
   stay as static decoration). Desktop is untouched; prefers-reduced-motion keeps hiding the grid/scan line. */
@media (hover:none), (pointer:coarse){
  .grid-bg, .scanline, .glow-orb, .mark::after, .profile-btn .hexf.r2, .big-avatar .hexf.r2,
  .mode-card .mc-bg, .mode-card .mc-scan, .cm-stories .cm-sg{ animation:none !important; }
  .scanline{ display:none; }
}

/* ── first-entry welcome card (js/welcome.js, 2026-10-24) ── */
.wl-back{ position:fixed; inset:0; z-index:2300; background:rgba(4,7,13,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:16px; animation:cmIn .25s ease-out; }
.wl-back.out{ opacity:0; transition:opacity .25s ease; }
.wl-card{ width:min(540px, 100%); max-height:calc(100dvh - 32px); overflow:auto; -webkit-overflow-scrolling:touch; background:#0b1322; color:#d6e6f2; border:1px solid rgba(56,240,255,.4); border-radius:22px; padding:20px 22px 22px; box-shadow:0 0 0 1px rgba(255,61,139,.12), 0 30px 90px -30px rgba(56,240,255,.45), 0 40px 80px -40px rgba(0,0,0,.95); animation:cmUp .32s cubic-bezier(.2,.8,.2,1); font-family:'Space Grotesk',sans-serif; font-size:14.5px; line-height:1.55; }
.wl-kick{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; color:var(--cyan); margin-bottom:8px; }
.wl-card h3{ font-family:'Orbitron',sans-serif; font-size:21px; font-weight:800; color:#fff; margin:0 0 8px; letter-spacing:.02em; }
.wl-card p{ margin:0 0 10px; }
.wl-card b{ color:#fff; font-weight:650; }
.wl-ar{ font-family:'Noto Kufi Arabic',sans-serif; color:var(--cyan); font-size:14px; }
.wl-list{ margin:4px 0 12px; padding:0 0 0 18px; }
.wl-list li{ margin:0 0 6px; }
.wl-tip{ border-left:3px solid var(--magenta); padding:6px 10px; background:rgba(255,61,139,.07); border-radius:0 10px 10px 0; color:#e9f2fa; }
.wl-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; }
.wl-go{ flex:1; min-width:180px; padding:13px 20px; border:none; border-radius:12px; cursor:pointer; font-family:'Orbitron',sans-serif; font-weight:700; font-size:14px; letter-spacing:.08em; color:#04070d; background:linear-gradient(90deg,var(--cyan),#5dffa8); box-shadow:0 10px 30px -12px rgba(56,240,255,.8); }
.wl-go:hover{ filter:brightness(1.08); }
.wl-ig{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--magenta); text-decoration:none; }
.wl-ig:hover{ text-decoration:underline; }
html.light .wl-card{ background:#fff; color:#1b2733; }
html.light .wl-card h3, html.light .wl-card b{ color:#0d1520; }
html.light .wl-tip{ color:#1b2733; }

/* ═══════════ NOTIFICATIONS (2026-10-25, js/push.js, _supabase/22-web-push.sql) ═══════════ */
.pn-card .pn-lead{font-size:13.5px;color:var(--text-dim);margin:0 0 14px;line-height:1.6}
.pn-card .pn-lead .ar{display:block;margin-top:6px;font-family:'Noto Kufi Arabic',sans-serif}
.pn-btn.nb{height:44px;padding:0 18px 0 12px;color:var(--text);border-color:rgba(56,240,255,.45);background:rgba(56,240,255,.06)}
.pn-btn.nb:hover{border-color:var(--cyan);box-shadow:0 0 18px rgba(56,240,255,.25)}
.pn-btn.nb[data-state="on"]{border-color:rgba(173,255,47,.55);background:rgba(93,255,168,.07)}
.pn-btn.nb:disabled{opacity:.55;cursor:default;box-shadow:none}
.pn-hint{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--text-dim)}
.pn-hint:empty{display:none}
.pn-card .ops-ph em{margin-left:10px}
.pn-ask-back{position:fixed;inset:0;z-index:2290;background:rgba(4,7,13,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:1;transition:opacity .25s ease}
.pn-ask-back.out{opacity:0}
.pn-ask{width:min(480px,100%);background:#0b1322;color:#d6e6f2;border:1px solid rgba(56,240,255,.4);border-radius:14px;padding:22px 22px 18px;box-shadow:0 0 40px rgba(56,240,255,.18);font-family:'Space Grotesk',sans-serif;font-size:14.5px;line-height:1.6}
.pn-ask-k{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:#7ff6ff;margin-bottom:8px;--c1:#38f0ff;--c2:#7ff6ff}
.pn-ask-k .nt{width:18px;height:18px}
.pn-ask h3{font-family:'Orbitron',sans-serif;font-size:19px;font-weight:800;color:#fff;margin:0 0 8px}
.pn-ask p{margin:0 0 10px}
.pn-ask p.ar{font-family:'Noto Kufi Arabic',sans-serif;color:#b9cbd9}
.pn-ask-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;flex-wrap:wrap}
.pn-ask-go{background:var(--cyan);color:#04070d;border:none;border-radius:10px;padding:12px 20px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.16em;cursor:pointer;box-shadow:0 0 18px rgba(56,240,255,.35)}
.pn-ask-go:disabled{opacity:.6;cursor:default}
html.light .pn-ask{background:#fff;color:#1b2a3a;border-color:rgba(0,150,180,.4)} html.light .pn-ask h3{color:#0b1322} html.light .pn-ask p.ar{color:#3b4f63}

/* ═══ CHAT: "Seen" receipt + View-post chip + opened-post ring — 2026-10-25 ═══ */
.msg .m-seen{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:1px;color:var(--cyan);opacity:.75;margin-top:3px;text-align:end;}
.msg .m-seen::before{content:"✓✓ ";letter-spacing:0;}
.msg .m-seen-t{display:none;}
@media (hover:hover){ .msg:hover .m-seen-t{display:inline;} }
@media (min-width:900px){ .msg .m-seen-t{display:inline;} }
.msg .post-ref{display:flex;width:max-content;max-width:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;z-index:1;margin-bottom:2px;}
.msg .post-ref:active{transform:scale(.97);}
.cm-post-card.spot{outline:2px solid rgba(56,240,255,.85);outline-offset:4px;box-shadow:0 0 28px rgba(56,240,255,.35);transition:outline-color .6s ease,box-shadow .6s ease;}
html.light .msg .m-seen{color:#0a7f94;opacity:.9;}

/* ═══ BILLING: CONFIRM step (2026-10-25) ═══ */
.bp-confirm{margin:16px 22px 0;padding:14px 16px 16px;border:2px solid var(--lime,#adff2f);background:rgba(93,255,168,.07);box-shadow:0 0 24px rgba(93,255,168,.18);display:grid;gap:9px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);}
.bp-confirm .k{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.25em;color:var(--lime,#adff2f);}
.bp-confirm b{font-size:15px;line-height:1.4;color:#fff;}
.bp-confirm .ar{margin-top:0;color:#c8f5dc;font-size:13px;}
.bp-confirm small{font-size:11.5px;line-height:1.5;color:#c9d6e2;}
.bp-confirm-btn{height:58px;border:none;background:var(--lime,#adff2f);color:var(--void,#04070d);font-family:'Orbitron',sans-serif;font-size:15px;font-weight:800;letter-spacing:.28em;cursor:pointer;box-shadow:0 0 30px rgba(93,255,168,.45);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:transform .12s;}
.bp-confirm-btn:hover{transform:translateY(-1px);box-shadow:0 0 40px rgba(93,255,168,.6);}
.bp-confirm-btn:active{transform:scale(.98);}
.bp-confirm-btn:disabled{opacity:.6;cursor:default;}
.bp-notyet{margin:12px 22px 0;}
html.light .bp-confirm{background:rgba(120,190,0,.08);border-color:#6aa400;box-shadow:none;}
html.light .bp-confirm .k{color:#4d7f00;} html.light .bp-confirm b{color:#1b2a3a;} html.light .bp-confirm .ar{color:#3b5a1a;} html.light .bp-confirm small{color:#3b4f63;}
html.light .bp-confirm-btn{background:#6aa400;color:#fff;box-shadow:none;}

/* ===== admin CLAUDE tab (2026-10-30, js/claude.js) ===== */
.cc-f textarea{min-height:96px}
.cc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}
.cc-last b{color:var(--text)}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cc-head h3{margin:0}
.cc-item{border:1px solid var(--panel-edge);border-left-width:3px;border-radius:12px;padding:12px 14px;margin:10px 0;background:rgba(4,7,13,.35)}
.cc-item.cc-new{border-left-color:var(--amber)}
.cc-item.cc-seen{border-left-color:var(--cyan)}
.cc-item.cc-done{border-left-color:var(--lime)}
.cc-item.cc-blocked{border-left-color:var(--magenta)}
.cc-item.cc-cancelled{opacity:.55}
.cc-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--text-dim);margin-bottom:6px}
.cc-meta a{color:var(--text-dim);cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin-left:auto}
.cc-pill{border-color:rgba(255,255,255,.18);color:var(--text-dim)}
.cc-new .cc-pill{color:var(--amber);border-color:rgba(255,196,61,.45)}
.cc-seen .cc-pill{color:var(--cyan);border-color:rgba(56,240,255,.45)}
.cc-done .cc-pill{color:var(--lime);border-color:rgba(190,255,80,.45)}
.cc-blocked .cc-pill{color:var(--magenta);border-color:rgba(255,61,139,.5)}
.cc-body{white-space:pre-wrap;line-height:1.5;font-size:15px}
.cc-body[dir=auto]:lang(ar),.cc-reply[dir=auto]:lang(ar){font-family:'Noto Kufi Arabic',sans-serif}
.cc-reply{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(56,240,255,.06);border:1px dashed rgba(56,240,255,.3);white-space:pre-wrap;line-height:1.55;font-size:14px}
.cc-who{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;color:var(--cyan);margin-bottom:6px}
html.light .cc-item{background:rgba(255,255,255,.5)}
html.light .cc-reply{background:rgba(0,150,180,.06)}

/* ===== PROFILE EXTRAS (2026-11-11): daily-challenge record + MY GRADES search ===== */
#statsPage .chrec{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
#statsPage .chrec .ops-empty{ grid-column:1 / -1; }
#statsPage .chrec-c{ border:1px solid var(--jbfaint); border-radius:2px; padding:12px 8px; text-align:center; min-width:0; }
#statsPage .chrec-c b{ display:block; font-family:var(--mono); font-size:22px; color:var(--jb2); font-weight:700; }
#statsPage .chrec-c span{ display:block; margin-top:6px; font-family:var(--mono); font-size:9px; letter-spacing:1.2px; color:#6f95ab; }
#statsPage .gr-bar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
#statsPage .gr-bar input{ flex:1 1 220px; min-width:0; background:rgba(4,7,13,.6); border:1px solid var(--jbfaint); border-radius:2px;
  color:var(--text); font-family:var(--mono); font-size:13px; padding:10px 12px; outline:none; }
#statsPage .gr-bar input:focus{ border-color:var(--cyan); }
html.light #statsPage .gr-bar input{ background:#fff; }
#statsPage .gr-bar .lb-select{ flex:0 1 190px; width:auto; }
#statsPage .gr-bar .ghost-btn{ flex:0 0 auto; margin:0; }
#statsPage .gr-row{ border-left:2px solid var(--jbwarn); padding:9px 0 9px 12px; }
#statsPage .gr-row.ok{ border-left-color:#7fe0b2; }
#statsPage .gr-row + .gr-row{ margin-top:8px; }
#statsPage .gr-top{ display:flex; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:10px; letter-spacing:1px; color:#8fc4dd; }
#statsPage .gr-sc{ font-weight:700; color:var(--jbwarn); white-space:nowrap; }
#statsPage .gr-row.ok .gr-sc{ color:#7fe0b2; }
#statsPage .gr-src{ margin-top:6px; font-size:12.5px; color:#6f95ab; line-height:1.6; overflow-wrap:anywhere; }
#statsPage .gr-ans{ margin-top:4px; font-size:13.5px; color:var(--text); line-height:1.6; overflow-wrap:anywhere; }
#statsPage .gr-when{ margin-top:5px; font-family:var(--mono); font-size:9px; letter-spacing:.6px; color:#4f7286; }
#statsPage #grMore{ margin-top:12px; }
/* 2026-11-14: one-day filter beside the mode filter */
#statsPage .gr-date{ flex:0 1 190px; display:flex; align-items:center; gap:8px; border:1px solid var(--jbfaint); border-radius:2px; padding:0 10px; background:rgba(4,7,13,.6); font-family:var(--mono); font-size:10px; letter-spacing:1.4px; color:#8fc4dd; }
#statsPage .gr-date input{ flex:1 1 auto; min-width:0; border:0; background:transparent; color:var(--text); font-family:var(--mono); font-size:12px; padding:9px 0; color-scheme:dark; outline:none; }
#statsPage .gr-date:focus-within{ border-color:var(--cyan); }
html.light #statsPage .gr-date{ background:#fff; color:#41525f; } html.light #statsPage .gr-date input{ color-scheme:light; }
@media(max-width:640px){
  #statsPage .chrec{ grid-template-columns:1fr 1fr; }
  #statsPage .gr-bar input{ font-size:16px; flex-basis:100%; }   /* 16px stops iOS zoom */
  #statsPage .gr-bar .lb-select{ flex:1 1 0; }
  #statsPage .gr-date{ flex:1 1 0; } #statsPage .gr-date input{ font-size:16px; flex-basis:auto; padding:7px 0; }
}
/* ═══════════ PHONE BOTTOM TAB BAR (2026-11-14, tester suggestion b92ff17b, preview-tabbar-2026-11-14.html) ═══════════
   Below 761 px the five category tabs are a bar fixed to the bottom of the home screen, like a phone app: icon on
   top, a short word under it (.tb-s; the full name .tb-f stays for desktop). Same #modeTabs, same buttons, same
   click handlers — only place and look change; the categories are unchanged. The bar lives inside the home page,
   so it is gone inside a mode. Desktop (>= 761 px) is untouched. No overflow rule on html (2026-10-24 Android bug).
   Guard: node test/tabbar-local.js */
.mode-tabs .tb-s{ display:none; }
@media (max-width:760px){
  /* a transform on the home page would make it the bar's anchor while it animates in — fade only on a phone */
  .home-page{ animation-name:homeFadeIn; }
  #modeTabs{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:60; margin:0;
    display:flex; flex-wrap:nowrap; overflow:visible;
    border:0; border-top:1px solid var(--panel-edge);
    background:rgba(4,10,18,.97); backdrop-filter:none;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  #modeTabs::before, #modeTabs::after{ display:none; }
  #modeTabs button{
    flex:1 1 20%; min-width:0; height:60px; padding:7px 2px 6px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    border:0; background:transparent; box-shadow:none;
    font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    color:var(--text-dim); position:relative; -webkit-tap-highlight-color:transparent;
  }
  #modeTabs .tb-f{ display:none; }
  #modeTabs .tb-s{ display:block; line-height:1; white-space:nowrap; }
  #modeTabs .tb-i{ font-size:20px; line-height:1; transition:transform .18s ease; }
  #modeTabs button.active{ color:var(--tab, var(--cyan)); background:transparent; box-shadow:none; }
  #modeTabs button.active .tb-i{ transform:translateY(-1px) scale(1.12); text-shadow:0 0 14px var(--tab, var(--cyan)); }
  #modeTabs button.active::before{
    content:""; position:absolute; top:-1px; left:22%; right:22%; height:2px;
    background:var(--tab, var(--cyan)); box-shadow:0 0 10px var(--tab, var(--cyan));
  }
  #modeTabs button[data-group="community"]{ --tab:#5dffa8; }
  #modeTabs .bp-lock{ position:absolute; top:4px; right:6%; margin:0; }
  /* typing (community search, a post, a comment): the keyboard would lift the bar over the text — hide it meanwhile */
  body:has(input:focus, textarea:focus, [contenteditable="true"]:focus) #modeTabs{ display:none; }
  /* room for the bar under the last thing on the page */
  .home-main, .home-page{ padding-bottom:20px; }
  footer{ padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }   /* the footer is the last thing on the page — it carries the clearance (privacy / support links stay tappable) */
  /* the Install card and the toasts sit above the bar, not on it */
  .pwa-hint, .cm-toast{ bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }

  html.light #modeTabs{ background:rgba(255,255,255,.97); border-top-color:rgba(8,122,150,.25); }
  html.light #modeTabs button{ color:#5a6b78; background:transparent; }
  html.light #modeTabs button.active{ color:#0b1a26; background:transparent; }
  html.light #modeTabs button.active .tb-i{ color:color-mix(in srgb, var(--tab, var(--cyan)) 70%, #0b1a26); text-shadow:none; }
}
@keyframes homeFadeIn{ from{opacity:0;} to{opacity:1;} }