:root{
    --bg:#0a0913; --bg2:#0e0c1a; --panel:#16121f; --panel2:#1d1828;
    --line:#2a2440; --line2:#3a3258; --txt:#efeaf7; --muted:#9a90b8; --dim:#6a6088;
    --fuchsia:#c46bff; --blue:#5b8cff; --amber:#ffb454; --mint:#3ee6a0; --coral:#ff5e7a;
    --good:#16332a; --good-b:#3ee6a0; --bad:#341922; --bad-b:#ff5e7a;
    --grad:linear-gradient(135deg,#c46bff,#5b8cff);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(900px 500px at 85% -8%, rgba(196,107,255,.13), transparent 60%),
      radial-gradient(800px 520px at -5% 105%, rgba(91,140,255,.11), transparent 55%),
      var(--bg);
    color:var(--txt);font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
    background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);background-size:22px 22px;
    mask-image:radial-gradient(circle at 50% 25%,#000,transparent 78%);}
  .wrap{position:relative;z-index:1;max-width:580px;margin:0 auto;padding:20px 16px 46px;min-height:100dvh;display:flex;flex-direction:column;}
  .ic-svg{display:block;}

  .top{display:flex;align-items:center;gap:11px;margin-bottom:18px;}
  .logo{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;
    background:linear-gradient(150deg,#1d1430,#120c1f);border:1px solid var(--line2);
    box-shadow:0 0 22px rgba(196,107,255,.22),inset 0 0 0 1px rgba(196,107,255,.08);}
  .logo svg{width:25px;height:25px;}
  .brand h1{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;letter-spacing:-.01em;margin:0;line-height:1;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .brand p{margin:3px 0 0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-family:'Space Mono',monospace;}
  .topbtns{margin-left:auto;display:flex;align-items:center;gap:8px;}
  .xp{display:flex;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;
    background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:6px 12px;color:var(--amber);}
  .xp .s{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);}
  .iconbtn{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:.15s;}
  .iconbtn:hover{border-color:var(--line2);color:var(--txt);}

  .panel{background:linear-gradient(165deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:20px;padding:18px;}
  .screen{animation:fade .4s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  @keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:scale(1)}}

  .intro{font-size:13.5px;line-height:1.62;color:var(--muted);margin:0 0 16px;}
  .intro b{color:var(--txt);font-weight:700;}
  .lbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:18px 2px 11px;display:flex;align-items:center;gap:9px;}
  .lbl::after{content:"";flex:1;height:1px;background:var(--line);}
  .lbl:first-child{margin-top:0;}

  /* engine segment */
  .seg{display:flex;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:5px;}
  .segbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;border:none;background:transparent;
    color:var(--muted);font-family:'Plus Jakarta Sans';font-size:12.5px;font-weight:700;border-radius:10px;padding:11px 8px;transition:.18s;}
  .segbtn svg{width:16px;height:16px;}
  .segbtn.on{color:var(--txt);background:linear-gradient(150deg,#241b38,#1a1428);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 0 1px var(--line2);}
  #seg-local.on{color:var(--mint);} #seg-ai.on{color:var(--fuchsia);}
  .enginfo{font-size:11.5px;line-height:1.55;color:var(--dim);margin:10px 4px 0;display:flex;gap:8px;}
  .enginfo svg{width:15px;height:15px;flex:none;margin-top:1px;}
  .enginfo b{color:var(--muted);}

  /* drop zone */
  .drop{position:relative;border:1.5px dashed var(--line2);border-radius:16px;padding:24px 18px;text-align:center;cursor:pointer;transition:.2s;background:rgba(196,107,255,.03);}
  .drop:hover,.drop.over{border-color:var(--fuchsia);background:rgba(196,107,255,.08);box-shadow:0 0 0 4px rgba(196,107,255,.07);}
  .drop .di{width:52px;height:52px;border-radius:15px;margin:0 auto 12px;display:grid;place-items:center;background:var(--grad);box-shadow:0 10px 26px rgba(196,107,255,.3);}
  .drop .di svg{width:26px;height:26px;}
  .drop h3{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;margin:0 0 5px;}
  .drop p{margin:0;font-size:12px;color:var(--dim);line-height:1.5;}
  .drop .types{margin-top:11px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
  .drop .types span{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.06em;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px;padding:3px 7px;}

  .ta{width:100%;min-height:96px;resize:vertical;background:var(--panel2);border:1px solid var(--line);border-radius:13px;color:var(--txt);font-family:inherit;font-size:14px;line-height:1.5;padding:13px 14px;outline:none;transition:.2s;}
  .ta:focus{border-color:var(--fuchsia);box-shadow:0 0 0 3px rgba(196,107,255,.08);}
  .ta::placeholder{color:var(--dim);}

  .srcs{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
  .src{display:flex;align-items:center;gap:11px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;animation:pop .3s ease;}
  .src .ti{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--blue);}
  .src .ti svg{width:18px;height:18px;}
  .src .info{flex:1;min-width:0;}
  .src .info .n{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .src .info .m{font-size:10.5px;color:var(--dim);font-family:'Space Mono',monospace;margin-top:2px;}
  .src .rm{flex:none;background:none;border:none;color:var(--dim);cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center;}
  .src .rm svg{width:15px;height:15px;}
  .src .rm:hover{color:var(--coral);background:rgba(255,94,122,.08);}

  .btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;cursor:pointer;border:none;font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:700;letter-spacing:.01em;border-radius:14px;padding:15px;color:#160a22;background:var(--grad);box-shadow:0 10px 28px rgba(196,107,255,.26);transition:.15s;margin-top:16px;}
  .btn svg{width:18px;height:18px;}
  .btn:active{transform:scale(.985);}
  .btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);box-shadow:none;}
  .btn.ghost:hover{border-color:var(--line2);color:var(--txt);}
  .btn[disabled]{opacity:.4;pointer-events:none;}
  .btn.sm{padding:12px;font-size:14px;}
  .row2{display:flex;gap:10px;}
  .row2 .btn{flex:1;}

  .hint{font-size:11px;color:var(--dim);text-align:center;margin-top:14px;letter-spacing:.01em;line-height:1.55;}
  .hint b{color:var(--muted);}

  /* analyzing */
  .ana{text-align:center;padding:14px 6px;}
  .orb{width:96px;height:96px;margin:6px auto 18px;border-radius:50%;position:relative;background:conic-gradient(from 0deg,#c46bff,#5b8cff,#3ee6a0,#ffb454,#c46bff);animation:spin 1.4s linear infinite;}
  .orb::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--bg2);}
  .orb .core{position:absolute;inset:0;display:grid;place-items:center;color:#fff;}
  .orb .core svg{width:34px;height:34px;}
  @keyframes spin{to{transform:rotate(360deg)}}
  .ana h2{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;margin:0 0 6px;}
  .ana .step{font-size:13px;color:var(--muted);min-height:20px;font-family:'Space Mono',monospace;letter-spacing:.02em;}
  .pbar{height:7px;border-radius:7px;background:var(--panel2);overflow:hidden;margin:18px 0 0;border:1px solid var(--line);}
  .pbar i{display:block;height:100%;background:var(--grad);border-radius:7px;transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(196,107,255,.5);width:0;}

  /* hub */
  .hubhead .t{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;line-height:1.2;margin:0;letter-spacing:-.01em;}
  .hubhead .s{font-family:'Space Mono',monospace;font-size:11px;color:var(--dim);margin-top:6px;letter-spacing:.04em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .badge{display:inline-flex;align-items:center;gap:5px;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:3px 8px;}
  .badge svg{width:12px;height:12px;}
  .badge.local{color:var(--mint);background:rgba(62,230,160,.1);border:1px solid rgba(62,230,160,.25);}
  .badge.ai{color:var(--fuchsia);background:rgba(196,107,255,.1);border:1px solid rgba(196,107,255,.25);}
  .mastery{margin:16px 0;background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:13px 15px;}
  .mastery .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
  .mastery .row .l{font-size:12px;color:var(--muted);font-weight:600;}
  .mastery .row .v{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;color:var(--mint);}
  .mtrack{height:8px;border-radius:8px;background:#221c33;overflow:hidden;}
  .mtrack i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--blue));border-radius:8px;transition:width .6s ease;}

  .modes{display:flex;flex-direction:column;gap:11px;}
  .mode{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;position:relative;overflow:hidden;background:linear-gradient(150deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:15px 16px;color:var(--txt);font-family:inherit;transition:.15s;}
  .mode::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--fuchsia));}
  .mode:active{transform:scale(.985);}
  .mode:hover{border-color:var(--line2);box-shadow:0 10px 28px rgba(0,0,0,.35);}
  .mode .mi{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--c,var(--fuchsia));}
  .mode .mi svg{width:23px;height:23px;}
  .mode .mc{flex:1;min-width:0;}
  .mode .mc .mt{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15.5px;}
  .mode .mc .md{font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.4;}
  .mode .arr{color:var(--dim);flex:none;}

  .backbtn{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 13px;color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:16px;transition:.15s;}
  .backbtn svg{width:15px;height:15px;}
  .backbtn:hover{border-color:var(--line2);color:var(--txt);}

  /* key points */
  .keys{display:flex;flex-direction:column;gap:9px;}
  .key{display:flex;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px 14px;animation:fade .35s ease both;}
  .key .num{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;background:var(--grad);color:#160a22;}
  .key .tx{flex:1;font-size:13.5px;line-height:1.55;}

  /* flashcard */
  .fcwrap{perspective:1400px;margin:6px 0 4px;}
  .fcard{position:relative;width:100%;min-height:230px;cursor:pointer;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1);}
  .fcard.flip{transform:rotateY(180deg);}
  .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;padding:24px 22px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line2);}
  .face .tag{position:absolute;top:14px;left:18px;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);}
  .front{background:linear-gradient(160deg,#1d1828,#15111f);}
  .front .q{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;line-height:1.4;text-align:center;}
  .back{background:linear-gradient(160deg,#1a2330,#141c27);transform:rotateY(180deg);border-color:#2a3a52;}
  .back .r{font-size:15px;line-height:1.6;text-align:center;color:#dceaf7;}
  .face .hintflip{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--dim);font-family:'Space Mono',monospace;}
  .rate{display:flex;gap:10px;margin-top:14px;}
  .rate button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;border:1px solid var(--line);border-radius:13px;padding:14px;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;transition:.15s;background:var(--panel2);}
  .rate button svg{width:16px;height:16px;}
  .rate .no{color:var(--coral);} .rate .no:hover{background:var(--bad);border-color:var(--bad-b);}
  .rate .yes{color:var(--mint);} .rate .yes:hover{background:var(--good);border-color:var(--good-b);}
  .rate button:active{transform:scale(.97);}

  /* quiz / blitz */
  .qtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;gap:12px;}
  .qctr{font-family:'Space Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.06em;}
  .qctr b{color:var(--fuchsia);}
  .sc{display:flex;align-items:center;gap:6px;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:6px 12px;color:var(--mint);}
  .sc .d{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);}
  .sc.combo{color:var(--amber);} .sc.combo .d{background:var(--amber);box-shadow:0 0 8px var(--amber);}
  .prog{height:6px;border-radius:6px;background:var(--panel2);overflow:hidden;margin-bottom:17px;border:1px solid var(--line);}
  .prog i{display:block;height:100%;background:var(--grad);border-radius:6px;transition:width .4s ease;box-shadow:0 0 10px rgba(196,107,255,.5);}
  .tbar{height:6px;border-radius:6px;background:var(--panel2);overflow:hidden;margin-bottom:17px;border:1px solid var(--line);}
  .tbar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--coral));border-radius:6px;transition:width .12s linear;width:100%;}
  .qtxt{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;line-height:1.42;font-weight:700;margin:0 0 18px;}
  .opts{display:flex;flex-direction:column;gap:10px;}
  .opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:14px 15px;color:var(--txt);font-family:inherit;font-size:14px;line-height:1.35;transition:.15s;}
  .opt:active{transform:scale(.99);}
  .opt:not(:disabled):hover{border-color:var(--line2);}
  .opt .k{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);}
  .opt .t{flex:1;}
  .opt .mk{flex:none;opacity:0;display:grid;place-items:center;}
  .opt .mk svg{width:18px;height:18px;}
  .opt:disabled{cursor:default;}
  .opt.correct{background:var(--good);border-color:var(--good-b);}
  .opt.correct .k{background:var(--mint);color:#06231a;border-color:var(--mint);}.opt.correct .mk{opacity:1;color:var(--mint);}
  .opt.wrong{background:var(--bad);border-color:var(--bad-b);}
  .opt.wrong .k{background:var(--coral);color:#2a0c12;border-color:var(--coral);}.opt.wrong .mk{opacity:1;color:var(--coral);}
  .opt.dim{opacity:.42;}
  .exp{margin-top:14px;padding:13px 15px;border-radius:13px;background:rgba(91,140,255,.06);border:1px solid var(--line2);font-size:13px;line-height:1.6;color:var(--muted);display:none;animation:fade .3s ease;}
  .exp.show{display:block;} .exp .h{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:5px;}

  /* feynman */
  .concept{background:linear-gradient(160deg,#1d1828,#15111f);border:1px solid var(--line2);border-radius:16px;padding:18px;margin-bottom:14px;}
  .concept .tag{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fuchsia);}
  .concept .c{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;line-height:1.4;margin-top:8px;}
  .fbsec{margin-top:12px;}
  .fbsec .h{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px;display:flex;align-items:center;gap:7px;}
  .fbsec .h svg{width:14px;height:14px;}
  .fbsec ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
  .fbsec li{font-size:13px;line-height:1.5;padding:9px 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);}
  .fbsec.ok .h{color:var(--mint);} .fbsec.miss .h{color:var(--amber);}
  .fbsec.corr .box{font-size:13px;line-height:1.6;padding:13px 14px;border-radius:11px;background:rgba(91,140,255,.06);border:1px solid var(--line2);color:var(--muted);}

  /* rings + results */
  .ring{width:150px;height:150px;margin:6px auto 4px;position:relative;}
  .ring.sm2{width:110px;height:110px;}
  .ring svg{transform:rotate(-90deg);}
  .ring .p{position:absolute;inset:0;display:grid;place-items:center;text-align:center;}
  .ring .p b{font-family:'Bricolage Grotesque',sans-serif;font-size:38px;line-height:1;}
  .ring.sm2 .p b{font-size:30px;}
  .ring .p span{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-top:4px;}
  .grade{text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700;margin:6px 0 4px;}
  .rmsg{text-align:center;font-size:13px;color:var(--muted);line-height:1.6;margin:0 auto 16px;max-width:400px;}
  .stats{display:flex;gap:10px;}
  .stat{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:13px;text-align:center;}
  .stat b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:24px;line-height:1;}
  .stat span{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:6px;display:block;}
  .rev{margin-top:16px;}
  .revi{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--coral);border-radius:11px;padding:12px 14px;margin-bottom:8px;}
  .revi .q{font-size:13px;font-weight:700;line-height:1.4;margin-bottom:7px;}
  .revi .a{font-size:12px;line-height:1.5;color:var(--muted);}
  .revi .a .x{color:var(--coral);}.revi .a .o{color:var(--mint);}

  /* library / settings */
  .deck{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:13px 14px;margin-bottom:9px;}
  .deck .di2{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--fuchsia);}
  .deck .di2 svg{width:20px;height:20px;}
  .deck .dc{flex:1;min-width:0;cursor:pointer;}
  .deck .dc .dt{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .deck .dc .dm{font-size:10.5px;color:var(--dim);font-family:'Space Mono',monospace;margin-top:2px;}
  .deck .dd{background:none;border:none;color:var(--dim);cursor:pointer;padding:7px;border-radius:8px;display:grid;place-items:center;}
  .deck .dd svg{width:16px;height:16px;}
  .deck .dd:hover{color:var(--coral);background:rgba(255,94,122,.08);}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:7px;}
  .field input,.field select{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:11px;color:var(--txt);font-family:inherit;font-size:13.5px;padding:12px 13px;outline:none;}
  .field input:focus,.field select:focus{border-color:var(--fuchsia);}
  .note{font-size:12px;line-height:1.6;color:var(--dim);background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin-top:12px;}
  .note b{color:var(--muted);} .note .hl{color:var(--mint);font-weight:700;}
  .steps{counter-reset:s;list-style:none;padding:0;margin:8px 0 0;}
  .steps li{position:relative;padding:8px 0 8px 30px;font-size:12.5px;line-height:1.5;color:var(--muted);border-bottom:1px solid var(--line);}
  .steps li:last-child{border-bottom:none;}
  .steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:6px;background:var(--grad);color:#160a22;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;display:grid;place-items:center;}

  .spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.25);border-top-color:#160a22;border-radius:50%;animation:spin .7s linear infinite;}
  .err{background:var(--bad);border:1px solid var(--bad-b);border-radius:13px;padding:14px;font-size:13px;line-height:1.55;color:#ffd8df;margin-top:14px;}
  .err b{color:#fff;}
  .empty{text-align:center;color:var(--dim);font-size:13px;padding:24px 10px;line-height:1.6;}

  .foot{text-align:center;margin-top:auto;padding-top:24px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;color:#352f4a;}
  .foot b{color:var(--dim);}

  /* print */
  #printarea{display:none;}
  @media print{
    body{background:#fff !important;}
    body::before{display:none;}
    .wrap>.top,.wrap>#app,.wrap>.foot{display:none !important;}
    #printarea{display:block !important;color:#111;font-family:'Plus Jakarta Sans',sans-serif;}
    #printarea h1{font-family:'Bricolage Grotesque';font-size:22px;margin:0 0 4px;}
    #printarea .psub{font-size:12px;color:#666;margin-bottom:18px;}
    #printarea h2{font-size:15px;margin:22px 0 8px;border-bottom:2px solid #111;padding-bottom:4px;}
    #printarea .pk{font-size:12.5px;line-height:1.5;margin:0 0 6px;padding-left:18px;position:relative;}
    #printarea .pk::before{content:"•";position:absolute;left:4px;}
    #printarea .pc{border:1px solid #ccc;border-radius:8px;padding:10px 12px;margin-bottom:8px;break-inside:avoid;}
    #printarea .pc .pq{font-weight:700;font-size:13px;margin-bottom:4px;}
    #printarea .pc .pa{font-size:12.5px;color:#333;}
  }

/* ---- spaced repetition bar (hub) ---- */
.srsbar{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;background:linear-gradient(150deg,rgba(255,180,84,.12),rgba(196,107,255,.08));border:1px solid var(--line2);border-radius:16px;padding:14px 16px;color:var(--txt);font-family:inherit;margin:0 0 16px;transition:.15s;}
.srsbar:hover{border-color:var(--amber);box-shadow:0 8px 22px rgba(0,0,0,.3);}
.srsbar:active{transform:scale(.99);}
.srsbar .si{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;background:rgba(255,180,84,.14);border:1px solid rgba(255,180,84,.3);color:var(--amber);}
.srsbar .sc2{flex:1;min-width:0;}
.srsbar .st{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;}
.srsbar .sd{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4;}
.srsbar .arr{color:var(--dim);flex:none;}

/* ============================================================
   RESPONSIVE & ROBUSTESSE MOBILE
   ============================================================ */

/* Empêche tout texte long (phrases à trous, URLs, mots collés) de déborder */
.intro,.enginfo,.q,.r,.qtxt,.opt .t,.key .tx,.concept .c,.exp,.note,.rmsg,
.mode .mc .md,.srsbar .sd,.src .info .n,.deck .dc .dt,.fbsec li,.fbsec .box{
  overflow-wrap:anywhere; word-break:break-word; -webkit-hyphens:auto; hyphens:auto;
}
.src .info .n,.deck .dc .dt{ word-break:normal; }

/* En-tête : la marque ne doit jamais pousser l'engrenage hors écran */
.top{ flex-wrap:nowrap; }
.brand{ min-width:0; }
.brand h1,.brand p{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iconbtn{ flex:none; }
.logo{ flex:none; }

/* Les anneaux de score restent nets quelle que soit la largeur */
.ring svg,.ring.sm2 svg{ display:block; }

@media (max-width:480px){
  .wrap{
    padding:14px 12px calc(38px + env(safe-area-inset-bottom));
    padding-top:calc(14px + env(safe-area-inset-top));
  }
  .top{ margin-bottom:14px; gap:9px; }
  .logo{ width:40px; height:40px; border-radius:12px; }
  .logo svg{ width:23px; height:23px; }
  .brand h1{ font-size:18px; }
  .brand p{ font-size:9px; letter-spacing:.12em; }
  .xp{ padding:5px 10px; font-size:11px; }
  .iconbtn{ width:38px; height:38px; }

  .panel{ padding:15px; border-radius:18px; }
  .intro{ font-size:13px; line-height:1.6; }
  .lbl{ margin:16px 2px 10px; }

  .seg{ padding:4px; }
  .segbtn{ font-size:11.5px; padding:10px 6px; gap:6px; }
  .segbtn svg{ width:15px; height:15px; }
  .enginfo{ font-size:11px; }

  .drop{ padding:20px 14px; }
  .drop .di{ width:46px; height:46px; }
  .drop .di svg{ width:23px; height:23px; }
  .drop h3{ font-size:15px; }
  .ta{ font-size:14px; }

  /* Flashcards : carte qui s'adapte au texte, police réduite, scroll de secours */
  .fcard{ min-height:200px; }
  .face{ padding:34px 18px 30px; overflow-y:auto; }
  .front .q{ font-size:16.5px; line-height:1.42; }
  .back .r{ font-size:14px; }
  .rate button{ padding:13px; font-size:13.5px; }

  /* Quiz / blitz / mix */
  .qtxt{ font-size:16px; line-height:1.4; }
  .opt{ padding:12px 13px; font-size:13.5px; gap:11px; }
  .opt .k{ width:24px; height:24px; font-size:11px; }
  .exp{ font-size:12.5px; }

  /* Hub */
  .hubhead .t{ font-size:19px; }
  .hubhead .s{ font-size:10.5px; }
  .mastery{ padding:12px 14px; }
  .srsbar{ padding:12px 14px; gap:12px; }
  .srsbar .si{ width:40px; height:40px; }
  .mode{ padding:13px 14px; gap:12px; }
  .mode .mi{ width:40px; height:40px; }
  .mode .mi svg{ width:21px; height:21px; }
  .mode .mc .mt{ font-size:14.5px; }
  .mode .mc .md{ font-size:11px; }

  /* Points clés */
  .key{ padding:12px 13px; }
  .key .tx{ font-size:13px; }

  /* Résultats */
  .grade{ font-size:20px; }
  .rmsg{ font-size:12.5px; }
  .stat b{ font-size:21px; }
  .concept .c{ font-size:16px; }

  /* Réglages */
  .field input,.field select{ font-size:14px; } /* >=16px évite le zoom iOS ; 14 ok ici car zoom déjà bloqué */
  .steps li{ font-size:12px; }
}

/* Très petits écrans (< 360px) : on resserre encore */
@media (max-width:359px){
  .segbtn{ font-size:10.5px; }
  .brand h1{ font-size:17px; }
  .front .q{ font-size:15.5px; }
  .qtxt{ font-size:15px; }
}

/* ============================================================
   PROGRESSION (dashboard) + EXAMEN BLANC
   ============================================================ */
.streakbox{display:flex;align-items:center;gap:14px;background:linear-gradient(150deg,rgba(255,94,122,.13),rgba(255,180,84,.08));border:1px solid var(--line2);border-radius:16px;padding:15px 16px;}
.streakbox .flame{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;background:rgba(255,94,122,.14);border:1px solid rgba(255,94,122,.3);color:var(--coral);}
.streakbox .sc3{flex:1;min-width:0;}
.streakbox .big{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;line-height:1;}
.streakbox .sub{font-size:11.5px;color:var(--muted);margin-top:4px;}
.streakbox .xpbig{display:flex;align-items:center;gap:5px;font-family:'Space Mono',monospace;font-size:13px;font-weight:700;color:var(--amber);white-space:nowrap;flex:none;}

.activity{display:flex;align-items:flex-end;gap:5px;height:96px;padding:10px 6px 0;background:var(--panel2);border:1px solid var(--line);border-radius:13px;}
.abar{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end;min-width:0;}
.afill{width:100%;max-width:15px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--fuchsia),var(--blue));min-height:3px;transition:height .5s ease;}
.alab{font-family:'Space Mono',monospace;font-size:8px;color:var(--dim);}

/* examen : choix du nombre de questions */
.examopts{display:flex;gap:10px;}
.examn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;background:linear-gradient(150deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;padding:14px 8px;color:var(--txt);font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;transition:.15s;}
.examn span{font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:600;color:var(--dim);letter-spacing:.04em;}
.examn em{font-family:'Space Mono',monospace;font-style:normal;font-size:10px;color:var(--amber);margin-top:4px;}
.examn:hover{border-color:var(--amber);box-shadow:0 8px 22px rgba(0,0,0,.3);}
.examn:active{transform:scale(.98);}

/* examen : grille de navigation des questions */
.qgrid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.qg{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--dim);font-family:'Space Mono',monospace;font-size:11px;font-weight:700;cursor:pointer;transition:.12s;}
.qg.done{color:var(--txt);border-color:var(--line2);background:#241b38;}
.qg.cur{border-color:var(--fuchsia);color:var(--fuchsia);box-shadow:0 0 0 2px rgba(196,107,255,.16);}

/* option sélectionnée pendant l'examen (sans révéler la correction) */
.opt.sel{border-color:var(--fuchsia);background:rgba(196,107,255,.08);}
.opt.sel .k{background:var(--grad);color:#160a22;border-color:transparent;}

/* horloge d'examen en alerte */
.sc.warn,#exclockbox.warn{color:var(--coral);}
.sc.warn .d,#exclockbox.warn .d{background:var(--coral);box-shadow:0 0 8px var(--coral);}

@media (max-width:480px){
  .streakbox{padding:13px 14px;gap:12px;}
  .streakbox .flame{width:44px;height:44px;}
  .streakbox .big{font-size:20px;}
  .examn{font-size:20px;padding:13px 6px;}
  .qg{width:28px;height:28px;font-size:10px;}
  .activity{height:84px;}
}