: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-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; }
.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; }
/* "Locked out? Re-register" door on the sign-in card (2026-09-26) */
.auth-switch .auth-reclaim{ display:inline-block; margin-bottom:8px; color:var(--cyan); font-weight:600; text-decoration:none; border-bottom:1px dashed rgba(56,240,255,.5); padding-bottom:1px; cursor:pointer; }
.auth-switch .auth-reclaim:hover{ border-bottom-style:solid; }
/* 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)); }