:root{
    --bg: #0a0a0c;
    --bg-2: #0d0d10;
    --surface: #131316;
    --surface-2: #1a1a1e;
    --surface-3: #212126;
    --border: #2b2b31;
    --border-soft: #1c1c20;
    --text: #f5f5f7;
    --muted: #9a9aa2;
    --muted-dim: #6e6e78;
    --amber: #eceef2;
    --amber-soft: rgba(236,238,242,0.08);
    --mint: #74d8c1;
    --mint-soft: rgba(116,216,193,0.12);
    --rose: #e8637d;
    --rose-soft: rgba(232,99,125,0.12);
    --violet: #b7b8c4;
    --flame-1: #ff9d54;
    --flame-2: #ff5f6d;
    --flame-soft: rgba(255,143,84,0.14);
    --gold: #e3b559;
    --gold-soft: rgba(227,181,89,0.14);
    --badge-epic: #a68cf0;
    --badge-epic-soft: rgba(166,140,240,0.14);
    --font-display: 'JetBrains Mono', monospace;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-arabic: 'Noto Sans Arabic', sans-serif;
    --gutter-w: 46px;
    --radius: 14px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:
      radial-gradient(1100px 560px at 82% -8%, rgba(255,255,255,0.10), transparent 60%),
      radial-gradient(900px 500px at -5% 12%, rgba(255,255,255,0.07), transparent 55%),
      radial-gradient(800px 460px at 60% 55%, rgba(255,255,255,0.05), transparent 60%),
      radial-gradient(700px 500px at 15% 85%, rgba(255,255,255,0.04), transparent 55%),
      var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    min-height:100vh;
    padding-left:var(--gutter-w);
    position:relative;
    overflow-x:hidden;
  }

  /* floating ambient light orbs */
  .glow-orb{
    position:fixed;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    filter:blur(40px);
    opacity:0.28;
    animation:orbFloat 16s ease-in-out infinite;
  }
  .glow-orb.o1{
    width:420px; height:420px; top:-140px; right:-100px;
    background:radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
    animation-duration:18s;
  }
  .glow-orb.o2{
    width:360px; height:360px; top:40%; left:-120px;
    background:radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
    animation-duration:22s; animation-delay:-4s;
  }
  .glow-orb.o3{
    width:320px; height:320px; bottom:-100px; right:10%;
    background:radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
    animation-duration:20s; animation-delay:-9s;
  }
  @keyframes orbFloat{
    0%, 100%{ transform:translate(0,0) scale(1); }
    33%{ transform:translate(30px,-25px) scale(1.08); }
    66%{ transform:translate(-25px,20px) scale(0.94); }
  }
  @media (prefers-reduced-motion: reduce){
    .glow-orb{animation:none;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }
  ::selection{background:var(--amber); color:#1a1305;}
  :focus-visible{outline:2px solid var(--mint); outline-offset:2px;}

  /* decorative editor gutter */
  .gutter{
    position:fixed; top:0; left:0; bottom:0; width:var(--gutter-w);
    background:var(--bg-2);
    border-right:1px solid var(--border-soft);
    padding:0 8px 0 0;
    font-family:var(--font-display);
    font-size:11px;
    color:#3a3a42;
    z-index:50;
    overflow:hidden;
  }
  .gutter-inner{
    display:flex; flex-direction:column; align-items:flex-end;
    padding-top:12px;
    will-change:transform;
  }
  .gutter span{line-height:26px;}

  /* topbar */
  .topbar{
    display:flex; align-items:center; justify-content:flex-end;
    padding:16px 32px;
    border-bottom:1px solid var(--border-soft);
    position:sticky; top:0; z-index:40;
 background:transparent;
    backdrop-filter: blur(6px);
  }
  .topbar-account{ display:flex; align-items:center; gap:8px; }
  .navlinks{
    display:flex; gap:2px; font-size:13.5px; color:var(--muted); align-items:center;
    position:absolute; left:50%; transform:translateX(-50%);
  }
  .navlinks a, .navlinks .btn-start-test{
    color:var(--muted); text-decoration:none; cursor:pointer; transition:all .2s;
    padding:8px 16px; border-radius:999px;
  }
.navlinks{
    ...
    background:#111827;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    padding:6px;
}
.navlinks a,
.navlinks .btn-start-test{
    color:var(--muted);
    text-decoration:none;
    padding:10px 22px;
    border-radius:999px;
    transition:.25s;
    position:relative;
}

.navlinks a:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:25%;
    width:1px;
    height:50%;
    background:rgba(255,255,255,.08);
}

.navlinks a:hover{
    color:var(--text);
}

.navlinks a.active{
    background:rgba(255,255,255,.06);
    color:var(--text);
    font-weight:600;
}
  .hidden{display:none !important;}

  /* view fade-in */
  .fade-in{animation:fadeIn .45s ease both;}
  @keyframes fadeIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

  /* scroll reveal */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 1.3s cubic-bezier(.2,.7,.2,1), transform 1.3s cubic-bezier(.2,.7,.2,1);
    will-change:opacity, transform;
  }
  .reveal.in-view{
    opacity:1;
    transform:translateY(0);
  }
  .reveal.r-delay-1{transition-delay:.08s;}
  .reveal.r-delay-2{transition-delay:.16s;}
  .reveal.r-delay-3{transition-delay:.24s;}
  .reveal.r-delay-4{transition-delay:.32s;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
  }

  /* HERO */
  .hero{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap:48px;
    align-items:center;
    padding:76px 40px 96px 40px;
    max-width:1240px;
    margin:0 auto;
  }
  .eyebrow{
    font-family:var(--font-display); font-size:12.5px; color:var(--amber);
    margin-bottom:20px; letter-spacing:0.04em;
    display:inline-flex; align-items:center; gap:8px;
    background:var(--amber-soft); border:1px solid rgba(255,255,255,0.16);
    padding:6px 12px; border-radius:20px;
    box-shadow:0 0 8px rgba(255,255,255,0.06);
  }
  .logo{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(2.5rem, 5.6vw, 4.4rem);
    line-height:1.05;
    color:var(--text);
    white-space:nowrap;
    min-height:1.2em;
  }
  .logo .cursor{
    display:inline-block; width:0.48ch; background:var(--amber);
    margin-left:4px; animation:blink 1s steps(1) infinite;
  }
  @keyframes blink{0%,49%{opacity:1;} 50%,100%{opacity:0;}}
  .logo .accent{
    background:linear-gradient(120deg, var(--mint), var(--violet));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 6px rgba(255,255,255,0.15));
  }

  .tagline{
    margin-top:22px; font-size:16.5px; line-height:1.65; color:var(--muted); max-width:480px;
  }
  .stats-row{
    display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;
  }
  .stats-row div{
    font-family:var(--font-display); font-size:12px; color:var(--text);
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    padding:9px 14px; transition:border-color .2s;
  }
  .stats-row div:hover{border-color:var(--amber);}
  .stats-row div b{color:var(--amber); font-weight:700;}

  .hero-btn-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .hero-btn-row .btn-ghost{ margin-top:34px; }

  .btn-primary{
    margin-top:34px;
    font-family:var(--font-display); font-weight:700; font-size:14.5px;
    background:var(--amber); color:#0a0a0c;
    border:none; border-radius:9px; padding:15px 28px;
    cursor:pointer; letter-spacing:0.02em;
    transition:transform .15s ease, box-shadow .25s ease, background .2s;
    display:inline-flex; align-items:center; gap:10px;
    box-shadow:0 0 8px rgba(255,255,255,0.08), 0 10px 24px -12px rgba(0,0,0,0.5);
  }
  .btn-primary::after{content:'→'; transition:transform .2s;}
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 12px rgba(255,255,255,0.15), 0 14px 28px -10px rgba(0,0,0,0.6); background:#ffffff;}
  .btn-primary:hover::after{transform:translateX(3px);}
  .btn-primary:active{transform:translateY(0);}

  .btn-ghost{
    font-family:var(--font-display); font-weight:600; font-size:13.5px;
    background:var(--surface); color:var(--muted);
    border:1px solid var(--border); border-radius:9px; padding:12px 22px;
    cursor:pointer; transition:all .2s;
  }
  .btn-ghost:hover{color:var(--text); border-color:var(--muted-dim); background:var(--surface-2);}

  /* translate pill button */
  .btn-translate{
    font-family:var(--font-display); font-weight:600; font-size:12px;
    background:var(--surface-2); color:var(--muted);
    border:1px solid var(--border); border-radius:20px; padding:8px 14px 8px 12px;
    cursor:pointer; display:inline-flex; align-items:center; gap:7px;
    transition:all .2s;
  }
  .btn-translate .globe{display:inline-flex; width:13px; height:13px;}
  .btn-translate .globe svg{width:100%; height:100%;}
  .verdict-icon{display:inline-flex; width:12px; height:12px; vertical-align:-1px; margin-right:2px;}
  .verdict-icon svg{width:100%; height:100%;}
  .btn-translate:hover{color:var(--text); border-color:var(--violet);}
  .btn-translate.active{color:var(--bg); background:var(--mint); border-color:var(--mint);}

  /* terminal mock */
  .terminal{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; box-shadow:0 40px 70px -35px rgba(0,0,0,0.7), 0 0 24px -10px rgba(255,255,255,0.06);
    position:relative;
  }
  .terminal::before{
    content:''; position:absolute; inset:0; border-radius:var(--radius); padding:1px;
    background:linear-gradient(140deg, rgba(255,255,255,0.22), transparent 40%, rgba(255,255,255,0.08));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
  }
  .terminal-head{
    display:flex; align-items:center; gap:8px; padding:13px 16px;
    background:var(--surface-2); border-bottom:1px solid var(--border);
  }
  .terminal-head span{width:10.5px; height:10.5px; border-radius:50%; display:inline-block;}
  .terminal-head .r{background:#4a4a52;} .terminal-head .y{background:#7a7a84;} .terminal-head .g{background:#eceef2; box-shadow:0 0 4px rgba(255,255,255,0.2);}
  .terminal-head .fname{margin-left:10px; font-family:var(--font-display); font-size:12px; color:var(--muted);}
  .terminal-body{
    padding:24px 24px 28px 24px; font-family:var(--font-display); font-size:13.5px; line-height:1.95;
    color:#c7c9db; min-height:230px;
  }
  .terminal-body .ln{color:#37405f; user-select:none; margin-right:14px;}
  .terminal-body .kw{color:#e8637d;} .terminal-body .str{color:#74d8c1;} .terminal-body .com{color:#676f8f;} .terminal-body .fn{color:#e8a33d;}
  .terminal-body #typedQ{color:var(--text);}
  .terminal-body .caret{display:inline-block; width:8px; background:var(--amber); animation:blink 1s steps(1) infinite;}

  /* QUIZ SECTION */
  .quiz-section{ max-width:840px; margin:0 auto; padding:60px 32px 100px; }
  .setup-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:38px; text-align:left; box-shadow:0 30px 60px -35px rgba(0,0,0,0.6), 0 0 20px -12px rgba(255,255,255,0.06);
  }
  .setup-card h2{font-family:var(--font-display); font-size:21px; margin-bottom:8px;}
  .setup-card p.sub{color:var(--muted); font-size:14px; margin-bottom:28px;}
  .field{margin-bottom:20px;}
  .field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:8px; font-family:var(--font-display); letter-spacing:0.02em;}
  .field select{
    width:100%; padding:13px 14px; background:var(--surface-2); color:var(--text);
    border:1px solid var(--border); border-radius:9px; font-size:14.5px; font-family:var(--font-body);
    appearance:none; cursor:pointer; transition:border-color .2s;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238f96b3' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat; background-position:right 14px center;
  }
  .field select:hover{border-color:var(--muted-dim);}
  .field select:focus-visible{outline:2px solid var(--mint);}

  .progress-wrap{display:flex; align-items:center; gap:14px; margin-bottom:28px;}
  .progress-track{flex:1; height:6px; background:var(--surface-2); border-radius:6px; overflow:hidden;}
  .progress-fill{height:100%; background:linear-gradient(90deg, var(--amber), var(--mint)); width:0%; transition:width .4s ease;}
  .progress-label{font-family:var(--font-display); font-size:12px; color:var(--muted); white-space:nowrap;}

  .q-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:34px;
    box-shadow:0 30px 60px -35px rgba(0,0,0,0.6), 0 0 22px -12px rgba(255,255,255,0.05);
  }
  .q-top{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap;}
  .q-cat{
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--font-display); font-size:11.5px; color:var(--mint);
    border:1px solid rgba(116,216,193,0.35); background:var(--mint-soft); border-radius:20px; padding:5px 13px;
    box-shadow:0 0 8px rgba(116,216,193,0.1);
  }
  .q-ar{
    direction:rtl; font-family:var(--font-arabic); color:var(--muted); font-size:15px;
    line-height:1.85; margin:0 0 14px; border-right:2px solid var(--violet); padding-right:14px;
    max-height:0; opacity:0; overflow:hidden; transition:max-height .35s ease, opacity .3s ease, margin .35s ease;
  }
  .q-ar.show{max-height:200px; opacity:1;}
  .q-en{ font-size:19px; font-weight:600; line-height:1.5; margin:2px 0 24px; color:var(--text);}
  .options{display:flex; flex-direction:column; gap:12px;}
  .opt{
    text-align:left; padding:16px 18px; background:var(--surface-3); border:1.5px solid rgba(255,255,255,0.09);
    border-radius:11px; color:var(--text); font-size:15.5px; cursor:pointer; transition:all .15s; font-family:var(--font-body);
    display:flex; gap:14px; align-items:flex-start; width:100%;
    box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 14px -10px rgba(0,0,0,0.5);
  }
  .opt .badge{
    font-family:var(--font-display); font-weight:700; color:var(--muted); font-size:13px;
    flex-shrink:0; width:26px; height:26px; border-radius:7px; background:var(--surface-2);
    border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center;
    transition:all .15s;
  }
  .opt .opt-content{display:flex; flex-direction:column; gap:7px; flex:1; min-width:0;}
  .opt .opt-en{display:block; font-weight:500; color:var(--text); line-height:1.5;}
  .opt .opt-ar{
    display:block; direction:rtl; font-family:var(--font-arabic); color:var(--violet); font-size:13px; font-weight:500;
    line-height:1.7; padding-top:7px; border-top:1px dashed rgba(255,255,255,0.1);
    max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .25s ease, padding .3s ease;
  }
  .opt .opt-ar.show{max-height:80px; opacity:1;}
  .opt:hover:not([disabled]){border-color:var(--amber); background:var(--surface-3); transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 16px -12px rgba(255,255,255,0.1);}
  .opt:hover:not([disabled]) .badge{color:var(--amber); border-color:rgba(255,255,255,0.3);}
  .opt:focus-visible{outline:2px solid var(--mint);}
  .opt.correct{border-color:var(--mint); background:var(--mint-soft);}
  .opt.correct .badge{color:var(--mint); border-color:rgba(116,216,193,0.5); background:rgba(116,216,193,0.14);}
  .opt.wrong{border-color:var(--rose); background:var(--rose-soft);}
  .opt.wrong .badge{color:var(--rose); border-color:rgba(232,99,125,0.5); background:rgba(232,99,125,0.14);}
  .opt[disabled]{cursor:default;}
  .opt[disabled]:hover{background:var(--surface-3); transform:none; box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 14px -10px rgba(0,0,0,0.5);}
  .opt.correct[disabled]:hover{background:var(--mint-soft);}
  .opt.wrong[disabled]:hover{background:var(--rose-soft);}

  .q-actions{display:flex; justify-content:flex-end; margin-top:26px;}
  #nextBtn[disabled]{opacity:0.35; cursor:not-allowed; transform:none; box-shadow:none;}

  /* RESULTS */
  .results-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:42px; text-align:center; box-shadow:0 30px 60px -35px rgba(0,0,0,0.6), 0 0 24px -12px rgba(255,255,255,0.06);}
  .score-ring{
    width:120px; height:120px; margin:0 auto 18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:conic-gradient(var(--amber) calc(var(--pct,0) * 1%), var(--surface-2) 0);
    filter:drop-shadow(0 0 22px rgba(255,255,255,0.2));
  }
  .score-ring-inner{
    width:96px; height:96px; border-radius:50%; background:var(--surface);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .score-big{font-family:var(--font-display); font-size:26px; font-weight:800; color:var(--amber);}
  .score-pct{font-family:var(--font-display); font-size:11px; color:var(--muted); margin-top:2px;}
  .score-sub{color:var(--muted); margin-top:6px; font-size:14.5px;}

  .results-stats{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px;}
  .stat-box{
    background:var(--surface-2); border:1px solid var(--border); border-radius:11px;
    padding:14px 24px; min-width:150px;
  }
  .stat-label{font-family:var(--font-display); font-size:11px; color:var(--muted); letter-spacing:0.02em; margin-bottom:7px;}
  .stat-value{font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--amber); display:flex; align-items:center; gap:8px; justify-content:center;}
  .new-best-badge{
    font-family:var(--font-display); font-size:10px; font-weight:700; color:var(--bg);
    background:var(--mint); border-radius:20px; padding:3px 9px; letter-spacing:0.02em;
  }

  .category-breakdown{ text-align:left; margin-top:32px; }
  .category-breakdown h3{
    font-family:var(--font-display); font-size:13.5px; color:var(--text); margin-bottom:16px;
    letter-spacing:0.02em;
  }
  .cat-row{margin-bottom:14px;}
  .cat-row-top{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--muted); margin-bottom:7px; gap:10px;}
  .cat-row-top .cat-name{color:var(--text); font-weight:600;}
  .cat-row-top .cat-frac{font-family:var(--font-display); font-size:12px; flex-shrink:0;}
  .cat-bar-track{height:7px; background:var(--surface-2); border-radius:6px; overflow:hidden;}
  .cat-bar-fill{height:100%; background:linear-gradient(90deg, var(--amber), var(--mint)); border-radius:6px; transition:width .5s ease;}
  .review-list{ text-align:left; margin-top:34px; display:flex; flex-direction:column; gap:12px;}
  .review-item{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:16px 18px; border-left:3px solid var(--border);}
  .review-item.ok{border-left-color:var(--mint);}
  .review-item.bad{border-left-color:var(--rose);}
  .review-item .q-en{font-size:14.5px; font-weight:600; margin:0 0 6px; color:var(--text);}
  .review-item .verdict{font-family:var(--font-display); font-size:12px;}
  .verdict.ok{color:var(--mint);} .verdict.bad{color:var(--rose);}
  .results-actions{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap;}

  /* GLOSSARY SECTION */
  .glossary-section{ max-width:1180px; margin:0 auto; padding:60px 32px 100px; }
  .glossary-head{ margin-bottom:28px; }
  .glossary-head h2{ font-family:var(--font-display); font-size:23px; margin-bottom:8px; }
  .glossary-head p.sub{ color:var(--muted); font-size:14px; max-width:620px; line-height:1.6; }

  .glossary-controls{
    display:flex; gap:12px; flex-wrap:wrap; align-items:center;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px 18px; margin:24px 0 28px;
  }
  .glossary-controls .search-wrap{
    position:relative; flex:1 1 240px; min-width:200px;
  }
  .glossary-controls .search-wrap svg{
    position:absolute; left:13px; top:50%; transform:translateY(-50%);
    width:15px; height:15px; color:var(--muted-dim); pointer-events:none;
  }
  .glossary-controls input[type="text"]{
    width:100%; padding:11px 14px 11px 38px; background:var(--surface-2); color:var(--text);
    border:1px solid var(--border); border-radius:9px; font-size:14px; font-family:var(--font-body);
    transition:border-color .2s;
  }
  .glossary-controls input[type="text"]:hover{border-color:var(--muted-dim);}
  .glossary-controls input[type="text"]:focus-visible{outline:2px solid var(--mint);}
  .glossary-controls select{
    padding:11px 34px 11px 14px; background:var(--surface-2); color:var(--text);
    border:1px solid var(--border); border-radius:9px; font-size:14px; font-family:var(--font-body);
    appearance:none; cursor:pointer; transition:border-color .2s; flex:0 0 auto;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238f96b3' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center;
  }
  .glossary-controls select:hover{border-color:var(--muted-dim);}

  .glossary-count{
    font-family:var(--font-display); font-size:12px; color:var(--muted); margin-bottom:18px;
  }
  .glossary-count b{color:var(--amber);}

  .glossary-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px;
  }
  .term-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:20px; display:flex; flex-direction:column; gap:13px;
    box-shadow:0 20px 40px -30px rgba(0,0,0,0.6); transition:border-color .2s, transform .15s, box-shadow .2s;
  }
  .term-card:hover{ border-color:rgba(255,255,255,0.25); transform:translateY(-2px); box-shadow:0 20px 40px -30px rgba(0,0,0,0.6), 0 0 14px -8px rgba(255,255,255,0.08); }
  .term-cat{
    align-self:flex-start;
    font-family:var(--font-display); font-size:10.5px; color:var(--mint);
    border:1px solid rgba(116,216,193,0.35); background:var(--mint-soft); border-radius:20px; padding:4px 11px;
    box-shadow:0 0 6px rgba(116,216,193,0.1);
  }
  .term-code{
    font-family:var(--font-display); font-size:13.5px; line-height:1.6; color:var(--amber);
    background:var(--bg-2); border:1px solid var(--border); border-radius:9px;
    padding:12px 14px; overflow-x:auto; white-space:pre; direction:ltr; text-align:left;
  }
  .term-en{ font-size:14.5px; line-height:1.6; color:var(--text); }
  .term-ar{
    direction:rtl; font-family:var(--font-arabic); color:var(--violet); font-size:13px; font-weight:500;
    line-height:1.75; padding-top:11px; border-top:1px dashed rgba(255,255,255,0.1);
    max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .25s ease, padding .3s ease;
  }
  .term-ar.show{ max-height:200px; opacity:1; padding-top:11px; }
  .glossary-empty{
    text-align:center; padding:60px 20px; color:var(--muted); font-size:14.5px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  }

  /* FAQ SECTION */
  .faq-section{ max-width:840px; margin:0 auto; padding:20px 32px 96px; }
  .faq-head{ margin-bottom:28px; text-align:center; }
  .faq-head .eyebrow{ margin-bottom:16px; }
  .faq-head h2{ font-family:var(--font-display); font-size:23px; margin-bottom:10px; }
  .faq-head p.sub{ color:var(--muted); font-size:14px; max-width:520px; margin:0 auto; line-height:1.6; }

  .faq-list{ display:flex; flex-direction:column; gap:12px; }

  .faq-item{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 20px 40px -32px rgba(0,0,0,0.6);
    backdrop-filter:blur(3px);
    transition:border-color .2s, box-shadow .2s;
  }
  .faq-item:hover{ border-color:rgba(255,255,255,0.22); }
  .faq-item.open{ border-color:rgba(116,216,193,0.4); box-shadow:0 18px 36px -30px rgba(116,216,193,0.1); }

  .faq-item h3{ margin:0; }

  .faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background:transparent;
    border:none;
    color:var(--text);
    font-family:var(--font-body);
    font-size:15.5px;
    font-weight:600;
    text-align:left;
    padding:20px 22px;
    cursor:pointer;
    transition:background .2s;
  }
  .faq-question:hover{ background:var(--surface-2); }
  .faq-question:focus-visible{ outline:2px solid var(--mint); outline-offset:-2px; }

  .faq-icon{
    flex-shrink:0;
    width:28px; height:28px;
    border-radius:8px;
    background:var(--surface-2);
    border:1px solid rgba(255,255,255,0.08);
    position:relative;
    transition:background .2s, border-color .2s, transform .3s ease;
  }
  .faq-icon::before, .faq-icon::after{
    content:'';
    position:absolute;
    top:50%; left:50%;
    background:var(--amber);
    transition:transform .3s ease, background .2s;
  }
  .faq-icon::before{ width:12px; height:2px; transform:translate(-50%,-50%); }
  .faq-icon::after{ width:2px; height:12px; transform:translate(-50%,-50%); }
  .faq-item.open .faq-icon{ background:var(--mint-soft); border-color:rgba(116,216,193,0.5); transform:rotate(180deg); }
  .faq-item.open .faq-icon::before, .faq-item.open .faq-icon::after{ background:var(--mint); }
  .faq-item.open .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
  .faq-item.open .faq-icon::before{ transform:translate(-50%,-50%) rotate(180deg); }

  .faq-answer{
    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  }
  .faq-item.open .faq-answer{ opacity:1; }
  .faq-answer-inner{
    padding:0 22px 20px 22px;
    color:var(--muted);
    font-size:14.5px;
    line-height:1.7;
    border-top:1px dashed rgba(255,255,255,0.08);
    padding-top:14px;
    margin:0 22px;
    padding-left:0; padding-right:0;
  }
  .faq-answer .faq-answer-inner{ margin:0; padding:14px 22px 20px 22px; }

  /* Start Test button — one segment among the others in the segmented control */
  .btn-start-test{
    margin:0; font-size:13.5px; font-weight:400;
    font-family:inherit; letter-spacing:normal;
    background:none; color:var(--muted);
    border:none; box-shadow:none;
  }
  .btn-start-test::after{ content:''; margin:0; }
  .btn-start-test:hover{
    background:var(--surface-2); color:var(--text);
    border:none; box-shadow:none; transform:none;
  }
  .btn-start-test.active{ background:var(--surface-2); color:var(--text); font-weight:600; }

  /* Create Account button (top-left of the nav links) */
  .btn-create-account{
    font-family:var(--font-display); font-weight:600; font-size:11.5px;
    background:var(--surface-2); color:var(--text);
    border:1px solid var(--border); border-radius:20px; padding:6px 12px;
    cursor:pointer; transition:all .2s; letter-spacing:0.01em; margin-left:6px;
  }
  .btn-create-account:hover{ border-color:var(--mint); color:var(--mint); }

  /* Account dropdown (replaces the old inline account-status bar) */
  .account-dropdown{ position:relative; margin-left:6px; display:flex; align-items:center; gap:8px; }
  .account-trigger{
    display:flex; align-items:center; gap:8px;
    font-family:var(--font-display); font-size:12.5px; color:var(--text);
    background:var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:6px 8px 6px 6px; cursor:pointer; transition:all .2s;
  }
  .account-trigger:hover{ border-color:var(--muted-dim); }
  .account-avatar{
    width:22px; height:22px; border-radius:50%; background:var(--surface-2);
    border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
    color:var(--muted); flex-shrink:0;
  }
  .account-avatar svg{ width:14px; height:14px; }
  .account-caret{ font-size:10px; color:var(--muted); transition:transform .2s; }
  .account-dropdown.open .account-caret{ transform:rotate(180deg); }

  .account-menu{
    position:absolute; top:calc(100% + 8px); right:0; min-width:150px;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:6px; box-shadow:0 20px 40px -20px rgba(0,0,0,0.6); z-index:60;
  }
  .menu-signout{
    width:100%; text-align:left; font-family:var(--font-display); font-size:12.5px; font-weight:600;
    color:var(--rose); background:transparent; border:none; border-radius:7px; padding:10px 12px;
    cursor:pointer; transition:background .2s;
  }
  .menu-signout:hover{ background:var(--rose-soft); }
  .menu-link{
    width:100%; text-align:left; font-family:var(--font-display); font-size:12.5px; font-weight:600;
    color:var(--text); background:transparent; border:none; border-radius:7px; padding:10px 12px;
    cursor:pointer; transition:background .2s; margin-top:2px;
  }
  .menu-link:hover{ background:var(--surface-2); }

  /* AUTH MODAL */
  .modal-overlay{
    position:fixed; inset:0; z-index:100; background:rgba(6,6,8,0.72); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .modal-box{
    position:relative; width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:32px 28px 28px; box-shadow:0 40px 80px -30px rgba(0,0,0,0.7), 0 0 22px -12px rgba(255,255,255,0.06);
  }
  .modal-close{
    position:absolute; top:14px; right:14px; background:var(--surface-2); border:1px solid var(--border);
    color:var(--muted); width:28px; height:28px; border-radius:8px; font-size:18px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:all .2s;
  }
  .modal-close:hover{ color:var(--text); border-color:var(--muted-dim); }
  .modal-tabs{ display:flex; gap:8px; margin-bottom:22px; }
  .modal-tab{
    flex:1; font-family:var(--font-display); font-size:12.5px; font-weight:600; color:var(--muted);
    background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:10px 8px; cursor:pointer; transition:all .2s;
  }
  .modal-tab.active{ color:var(--bg); background:var(--mint); border-color:var(--mint); }
  .auth-form .field input{
    width:100%; padding:12px 14px; background:var(--surface-2); color:var(--text);
    border:1px solid var(--border); border-radius:9px; font-size:14px; font-family:var(--font-body);
    transition:border-color .2s;
  }
  .auth-form .field input:focus-visible{ outline:2px solid var(--mint); }
  .auth-error{
    font-size:12.5px; color:var(--rose); background:var(--rose-soft); border:1px solid rgba(232,99,125,0.3);
    border-radius:8px; padding:9px 12px; margin-bottom:6px;
  }

  footer{
    text-align:center; padding:32px; color:var(--muted-dim); font-size:12px; font-family:var(--font-display);
    border-top:1px solid var(--border-soft);
  }

  @media (max-width: 860px){
    .hero{grid-template-columns:1fr; padding:44px 20px 60px;}
    .terminal{margin-top:10px;}
    :root{--gutter-w:26px;}
    .topbar{flex-direction:column; align-items:stretch; gap:10px; padding:14px 16px;}
    .navlinks{position:static; transform:none; display:flex; flex-wrap:wrap; justify-content:center; gap:2px;}
    .navlinks a, .navlinks .btn-start-test{padding:7px 10px; font-size:12.5px;}
    .topbar-account{justify-content:center;}
    .btn-create-account{margin-left:0;}
    .account-dropdown{margin-left:0;}
    .q-top{align-items:flex-start;}
    .glossary-grid{grid-template-columns:1fr;}
    .glossary-controls{flex-direction:column; align-items:stretch;}
    .glossary-controls select{width:100%;}
    .faq-section{padding:16px 18px 72px;}
    .faq-question{padding:17px 16px; font-size:14.5px; gap:12px;}
    .faq-answer-inner{padding:12px 16px 18px 16px; margin:0;}
  }

/* LANGUAGES MARQUEE STRIP */
.lang-strip{
  overflow:hidden; position:relative; padding:22px 0; margin:10px 0 6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.lang-track{ display:flex; gap:14px; width:max-content; animation:langScroll 28s linear infinite; }
.lang-strip:hover .lang-track{ animation-play-state:paused; }
.lang-chip{
  display:flex; align-items:center; gap:8px; padding:9px 16px;
  border:1px solid var(--border); border-radius:999px;
  font-family:var(--font-display); font-size:13px; font-weight:600;
  color:var(--muted); background:var(--surface); filter:grayscale(1); white-space:nowrap;
  transition:color .3s ease, border-color .3s ease, filter .3s ease, transform .3s ease, box-shadow .3s ease;
}
.lang-chip:hover{
  filter:grayscale(0); color:var(--brand); border-color:var(--brand);
  transform:translateY(-2px); box-shadow:0 0 8px -4px var(--brand);
}
.lang-ico{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 4px; border-radius:6px;
  background:var(--surface-2); font-size:11px;
}
@keyframes langScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .lang-track{ animation:none; } }
@media (max-width: 860px){
  .lang-chip{ padding:8px 13px; font-size:12px; }
}

/* GOOGLE SIGN-IN BUTTON */
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:11px 16px; margin-top:16px;
  background:var(--surface-2); color:var(--text); border:1px solid var(--border);
  border-radius:9px; font-family:var(--font-body); font-weight:600; font-size:13.5px;
  cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.btn-google:hover{ background:var(--surface-3); border-color:var(--muted-dim); }
.btn-google:active{ transform:scale(0.98); }
.btn-google:disabled{ opacity:0.6; cursor:not-allowed; }
.auth-divider{
  display:flex; align-items:center; gap:12px; margin:18px 0 14px;
  color:var(--muted-dim); font-size:11.5px; font-family:var(--font-display); text-transform:uppercase;
}
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--border-soft); }

/* CODE PLAYGROUND */
.playground-section{ max-width:1080px; margin:0 auto; padding:40px 32px 96px; }
.playground-head h2{ font-family:var(--font-display); font-size:26px; margin-bottom:6px; }
.playground-head .sub{ color:var(--muted); font-size:14px; margin-bottom:24px; }

.playground-box{
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:var(--surface); box-shadow:0 20px 50px -30px rgba(0,0,0,0.6);
}
.playground-tabs{
  display:flex; align-items:center; gap:4px; padding:8px; background:var(--surface-2);
  border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.pg-tabs-list{
  display:flex; align-items:center; gap:4px; overflow-x:auto; max-width:100%;
  scrollbar-width:thin;
}
.pg-tabs-list::-webkit-scrollbar{ height:5px; }
.pg-tabs-list::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
.pg-tab{
  display:flex; align-items:center; gap:7px; flex-shrink:0;
  font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--muted);
  background:transparent; border:none; border-radius:7px; padding:6px 10px 6px 8px; cursor:pointer;
  transition:background .2s, color .2s; white-space:nowrap;
}
.pg-tab:hover{ color:var(--text); background:var(--surface-3); }
.pg-tab.active{ color:var(--text); background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.pg-tab-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  min-width:20px; height:18px; padding:0 4px; border-radius:5px;
  font-family:var(--font-display); font-size:9px; font-weight:800; letter-spacing:0;
  color:#fff; line-height:1; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);
}
.pg-tab-name{ max-width:160px; overflow:hidden; text-overflow:ellipsis; }
.pg-tab-close{
  display:flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:5px; font-size:13px; line-height:1; color:var(--muted-dim);
  opacity:0; transition:opacity .15s, background .15s, color .15s; flex-shrink:0;
}
.pg-tab:hover .pg-tab-close{ opacity:1; }
.pg-tab-close:hover{ background:rgba(255,90,90,0.18); color:#ff6b6b; }
@media (hover: none){
  .pg-tab-close{ opacity:0.55; }
}
.pg-tabs-spacer{ flex:1; }
.pg-action{
  font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.02em;
  border:1px solid var(--border); border-radius:8px; padding:8px 14px; cursor:pointer;
  background:var(--surface-2); color:var(--text); transition:background .2s, border-color .2s;
}
.pg-action:hover{ background:var(--surface-3); }
.pg-run{ background:var(--amber); color:#0a0a0c; border:none; }
.pg-run:hover{ filter:brightness(1.05); }

.playground-panes{ position:relative; background:#0a0a0c; }
.pg-pane{ display:none; height:260px; }
.pg-pane.active{ display:flex; }

/* CodeMirror host — themed to blend with the site instead of the canned theme bg */
.pg-cm-host{ flex:1; min-width:0; height:100%; }
.pg-cm-host .CodeMirror{
  height:100%; background:transparent !important;
  font-family:'JetBrains Mono', monospace; font-size:13px; line-height:1.6;
}
.pg-cm-host .CodeMirror-gutters{
  background:rgba(255,255,255,0.02) !important;
  border-right:1px solid var(--border) !important;
}
.pg-cm-host .CodeMirror-linenumber{ color:var(--muted-dim); }
.pg-cm-host .CodeMirror-cursor{ border-left-color:var(--text); }
.pg-cm-host .CodeMirror-selected{ background:rgba(255,255,255,0.1) !important; }
.pg-cm-host .CodeMirror-matchingbracket{ color:var(--amber) !important; }

/* plain-textarea fallback, used only if CodeMirror fails to load */
.pg-editor{
  display:block; flex:1; min-width:0; width:100%; height:100%;
  background:transparent; color:var(--text); border:none; outline:none;
  font-family:'JetBrains Mono', monospace; font-size:13px; line-height:1.6;
  padding:18px 20px; tab-size:2; resize:none;
}

.playground-output{ border-top:1px solid var(--border); }
.pg-output-bar{
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); padding:8px 16px; background:var(--surface-2);
}
#pgFrame{ width:100%; height:320px; border:none; background:#fff; display:block; }

@media (max-width: 720px){
  .playground-section{ padding:28px 18px 72px; }
  .pg-pane{ height:200px; }
  #pgFrame{ height:240px; }
}

/* AI CHAT SECTION */
.aichat-section{ max-width:900px; margin:0 auto; padding:40px 32px 96px; }
.aichat-box{
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:var(--surface); box-shadow:0 20px 50px -30px rgba(0,0,0,0.6);
  display:flex; flex-direction:column; height:560px;
}
.aichat-messages{
  flex:1; overflow-y:auto; padding:22px 22px 10px; display:flex; flex-direction:column; gap:14px;
  scrollbar-width:thin;
}
.aichat-messages::-webkit-scrollbar{ width:6px; }
.aichat-messages::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
.aichat-msg{ display:flex; }
.aichat-msg-user{ justify-content:flex-end; }
.aichat-msg-bot{ justify-content:flex-start; }
.aichat-bubble{
  max-width:78%; padding:11px 15px; border-radius:12px; font-size:14px; line-height:1.65;
  white-space:pre-wrap; word-break:break-word;
}
.aichat-msg-bot .aichat-bubble{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-bottom-left-radius:4px;
}
.aichat-msg-user .aichat-bubble{
  background:var(--amber); color:#0a0a0c; font-weight:500;
  border-bottom-right-radius:4px;
}
.aichat-bubble pre{
  background:#0a0a0c; border:1px solid var(--border-soft); border-radius:8px;
  padding:12px 14px; margin:8px 0; overflow-x:auto; direction:ltr; text-align:left;
}
.aichat-bubble code{
  font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--text);
}
.aichat-msg-user .aichat-bubble pre{ background:#141308; border-color:rgba(0,0,0,0.15); }
.aichat-bubble :not(pre) > code{
  background:rgba(255,255,255,0.08); padding:1px 5px; border-radius:4px; font-size:12.5px;
}
.aichat-typing{ display:flex; gap:4px; align-items:center; padding:4px 2px; }
.aichat-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--muted);
  animation:aichatBlink 1.2s ease-in-out infinite;
}
.aichat-typing span:nth-child(2){ animation-delay:.2s; }
.aichat-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes aichatBlink{ 0%,80%,100%{opacity:.25; transform:translateY(0);} 40%{opacity:1; transform:translateY(-2px);} }
.aichat-inputbar{
  display:flex; align-items:flex-end; gap:10px; padding:14px 16px;
  border-top:1px solid var(--border); background:var(--surface-2);
}
.aichat-inputbar textarea{
  flex:1; resize:none; max-height:120px; background:var(--surface-3); color:var(--text);
  border:1px solid var(--border); border-radius:9px; padding:10px 13px; font-size:14px;
  font-family:var(--font-body); line-height:1.5; outline:none; transition:border-color .2s;
}
.aichat-inputbar textarea:focus{ border-color:var(--amber); }
.aichat-inputbar button{ flex-shrink:0; }
.aichat-inputbar button:disabled{ opacity:0.5; cursor:not-allowed; }
.aichat-hint{
  text-align:center; font-size:11.5px; color:var(--muted-dim); padding:8px 12px 14px;
  font-family:var(--font-display);
}
.aichat-error{ color:var(--rose); }
@media (max-width: 720px){
  .aichat-section{ padding:28px 18px 72px; }
  .aichat-box{ height:70vh; }
  .aichat-bubble{ max-width:88%; }
}

/* ICON-ONLY PLAYGROUND ACTION BUTTON */
.pg-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0;
}
.pg-icon-btn svg{ display:block; }

/* =========================================================
   STREAK BADGE (topbar) + STREAK MODAL + STREAK TOAST
   ========================================================= */
.streak-badge{
  display:flex; align-items:center; gap:5px; flex-shrink:0; white-space:nowrap;
  font-family:var(--font-display); font-weight:700; font-size:11.5px; color:var(--flame-1);
  background:var(--flame-soft); border:1px solid rgba(255,143,84,0.35); border-radius:20px;
  padding:4px 9px; cursor:pointer; transition:all .2s;
}
.streak-badge:hover{ border-color:var(--flame-1); transform:translateY(-1px); }
.streak-badge-icon{ width:14px; height:14px; display:flex; flex-shrink:0; }
.streak-badge-icon svg{ width:14px; height:14px; display:block; }
.streak-badge-sep{ color:var(--muted-dim); font-weight:400; }
.streak-badge-total{ color:var(--muted); font-weight:600; }

.streak-modal{ max-width:460px; }
.streak-modal-head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.streak-flame-lg{ width:38px; height:38px; flex-shrink:0; color:var(--flame-1); }
.streak-flame-lg svg{ width:38px; height:38px; display:block; }
.streak-modal-head h2{ font-family:var(--font-display); font-size:19px; margin-bottom:3px; }
.streak-modal-head .sub{ color:var(--muted); font-size:13px; }

.streak-ring-wrap{ display:flex; flex-direction:column; align-items:center; margin:6px 0 22px; }
.streak-ring{
  --pct:0; position:relative; width:150px; height:150px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--surface) 62%, transparent 63%),
    conic-gradient(var(--flame-1) calc(var(--pct)*1%), var(--border) 0);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 30px -8px rgba(255,143,84,0.35);
}
.streak-ring-flame{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:26px; height:26px; color:var(--flame-1);
  filter:drop-shadow(0 0 6px rgba(255,143,84,0.6));
}
.streak-ring-flame svg{ width:26px; height:26px; display:block; }
.streak-ring-inner{ text-align:center; }
.streak-ring-num{ font-family:var(--font-display); font-size:34px; font-weight:800; color:var(--text); line-height:1; }
.streak-ring-label{ font-family:var(--font-display); font-size:12px; color:var(--muted); margin-top:4px; }
.streak-ring-caption{ text-align:center; margin-top:14px; }
.streak-ring-caption b{ display:block; font-family:var(--font-display); font-size:13.5px; margin-bottom:3px; }
.streak-ring-caption span{ color:var(--muted); font-size:12.5px; }

.streak-week-card{
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:16px 14px; margin-bottom:16px;
}
.streak-week-title{ font-family:var(--font-display); font-size:11.5px; color:var(--muted); letter-spacing:0.03em; margin-bottom:12px; }
.streak-week{ display:flex; justify-content:space-between; gap:6px; }
.streak-day{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.streak-day-label{ font-family:var(--font-display); font-size:10.5px; color:var(--muted); }
.streak-day-dot{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); color:var(--muted-dim); flex-shrink:0;
}
.streak-day-dot svg{ width:13px; height:13px; }
.streak-day.active .streak-day-dot{ background:var(--flame-1); border-color:var(--flame-1); color:var(--bg); }
.streak-day.today .streak-day-dot{ box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--flame-1); }
.streak-day.future .streak-day-dot{ opacity:0.5; }

.streak-motivation{
  display:flex; align-items:flex-start; gap:12px; background:var(--flame-soft);
  border:1px solid rgba(255,143,84,0.3); border-radius:12px; padding:14px 16px; margin-bottom:20px;
}
.streak-motivation-icon{ font-size:22px; line-height:1; }
.streak-motivation-title{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--flame-1); margin-bottom:4px; }
.streak-motivation p{ color:var(--muted); font-size:13px; line-height:1.5; }

.streak-stats-row{ display:flex; gap:8px; }
.streak-stats-row .stat-box{ flex:1; min-width:0; padding:12px 8px; }
.streak-stats-row .stat-label{ font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.streak-stats-row .stat-value{ font-size:16px; gap:5px; }

.streak-toast{
  position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-14px);
  display:flex; align-items:center; gap:12px; z-index:200;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:14px 18px; box-shadow:0 20px 50px -20px rgba(0,0,0,0.7); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; max-width:min(92vw, 360px);
}
.streak-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.streak-toast-icon{ width:28px; height:28px; flex-shrink:0; }
.streak-toast-icon svg{ width:28px; height:28px; display:block; }
.streak-toast-title{ font-family:var(--font-display); font-weight:700; font-size:13.5px; }
.streak-toast-sub{ color:var(--muted); font-size:12px; margin-top:2px; }
.streak-toast.is-renewed{ border-color:rgba(255,143,84,0.4); }
.streak-toast.is-renewed .streak-toast-icon{ color:var(--flame-1); }
.streak-toast.is-renewed .streak-toast-title{ color:var(--flame-1); }
.streak-toast.is-lost{ border-color:rgba(232,99,125,0.4); }
.streak-toast.is-lost .streak-toast-icon{ color:var(--rose); }
.streak-toast.is-lost .streak-toast-title{ color:var(--rose); }

@media (max-width: 860px){
  .streak-badge{ padding:4px 8px; font-size:10.5px; gap:4px; }
  .streak-ring{ width:130px; height:130px; }
  .streak-ring-num{ font-size:28px; }
  .streak-day-label{ font-size:9.5px; }
  .streak-day-dot{ width:26px; height:26px; }
}
@media (max-width: 420px){
  .streak-badge-sep, .streak-badge-total{ display:none; }
  .streak-badge{ padding:4px 7px; }
}

/* =========================================================
   BADGES PAGE (formerly Statistics)
   ========================================================= */
.badges-card{
  max-width:1080px; margin:0 auto; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px 26px 30px;
}
.badges-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.badges-head-left{ display:flex; align-items:center; gap:14px; }
.badges-shield-icon{
  width:44px; height:44px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--badge-epic-soft); color:var(--badge-epic);
}
.badges-shield-icon svg{ width:24px; height:24px; }
.badges-head-left h2{ font-family:var(--font-display); font-size:19px; margin-bottom:3px; }
.badges-head-left .sub{ color:var(--muted); font-size:13px; }
.badges-head-right{ display:flex; gap:10px; flex-wrap:wrap; }
.badges-mini-stat{
  display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:11px; padding:10px 16px;
}
.badges-mini-icon{ width:20px; height:20px; color:var(--gold); flex-shrink:0; }
.badges-mini-icon svg{ width:20px; height:20px; display:block; }
.badges-mini-stat b{ display:block; font-family:var(--font-display); font-size:17px; font-weight:800; line-height:1.1; }
.badges-mini-stat label{ font-size:10.5px; color:var(--muted); white-space:nowrap; }

.badges-controls{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.badges-tabs{ display:flex; gap:6px; background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:4px; flex-wrap:wrap; }
.badges-tab{
  font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--muted);
  background:transparent; border:none; border-radius:8px; padding:8px 14px; cursor:pointer; transition:all .2s;
}
.badges-tab:hover{ color:var(--text); }
.badges-tab.active{ background:var(--badge-epic); color:var(--bg); }
#badgesRaritySelect{
  font-family:var(--font-display); font-size:12px; color:var(--text); background:var(--surface-2);
  border:1px solid var(--border); border-radius:9px; padding:9px 12px; cursor:pointer;
}

.badges-group-title{
  font-family:var(--font-display); font-size:13.5px; color:var(--text); margin:22px 0 14px; display:flex; align-items:center; gap:8px;
}
.badges-group-title:first-child{ margin-top:0; }
.badges-group-title span{ font-size:12px; color:var(--muted); font-weight:400; }
#badgesEarnedWrap .badges-group-title span{ color:var(--mint); }
#badgesLockedWrap .badges-group-title span{ color:var(--muted); }

.badges-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:14px; }
.badge-card{
  position:relative; background:var(--surface-2); border:1px solid var(--border); border-radius:13px;
  padding:18px 14px 16px; text-align:center; transition:transform .2s ease, border-color .2s ease;
}
.badge-card:hover{ transform:translateY(-2px); }
.badge-card.locked{ opacity:0.75; }
.badge-icon-wrap{
  width:64px; height:64px; margin:0 auto 12px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  position:relative;
}
.badge-icon-wrap svg{ width:30px; height:30px; }
.badge-card.earned .badge-icon-wrap{ background:var(--rarity-soft); color:var(--rarity-color); box-shadow:0 0 22px -6px var(--rarity-color); }
.badge-card.locked .badge-icon-wrap{ background:var(--surface-3); color:var(--muted-dim); }
.badge-lock-dot{
  position:absolute; top:-4px; right:-4px; width:20px; height:20px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted);
}
.badge-lock-dot svg{ width:10px; height:10px; }
.badge-name{ font-family:var(--font-display); font-weight:700; font-size:13.5px; margin-bottom:4px; }
.badge-desc{ color:var(--muted); font-size:11.5px; line-height:1.4; margin-bottom:10px; min-height:31px; }
.badge-meta{ display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); font-size:10.5px; }
.badge-meta .badge-date{ display:flex; align-items:center; gap:4px; color:var(--mint); }
.badge-meta .badge-date svg{ width:11px; height:11px; }
.badge-meta .badge-xp{ background:var(--gold-soft); color:var(--gold); border-radius:999px; padding:3px 8px; font-weight:700; }
.badge-progress-track{ height:5px; background:var(--surface-3); border-radius:999px; overflow:hidden; margin-bottom:6px; }
.badge-progress-fill{ height:100%; background:var(--rarity-color); border-radius:999px; transition:width .4s ease; }
.badge-progress-label{ font-family:var(--font-display); font-size:10.5px; color:var(--muted); }

.badges-empty-filter{ text-align:center; padding:40px 20px; color:var(--muted); font-size:13.5px; }

.badges-footer{
  display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px; padding-top:22px;
  border-top:1px solid var(--border-soft); flex-wrap:wrap;
}
.badges-footer-tip{ display:flex; align-items:flex-start; gap:12px; max-width:520px; }
.badges-tip-icon{ font-size:20px; line-height:1; }
.badges-footer-tip b{ font-family:var(--font-display); font-size:13px; display:block; margin-bottom:3px; }
.badges-footer-tip p{ color:var(--muted); font-size:12.5px; line-height:1.5; }
.badges-footer-actions{ display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width: 860px){
  .badges-card{ padding:22px 16px 24px; }
  .badges-head{ flex-direction:column; }
  .badges-head-right{ width:100%; }
  .badges-mini-stat{ flex:1; }
  .badges-controls{ flex-direction:column; align-items:stretch; }
  #badgesRaritySelect{ width:100%; }
  .badges-grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
  .badges-footer{ flex-direction:column; align-items:stretch; }
  .badges-footer-actions{ justify-content:flex-start; }
}