@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Nunito+Sans:opsz,wght@6..12,300..1000&family=Lexend:wght@300..800&display=swap');

/* ============================================================
   FlashCards V4 — "Paper & Sticker"
   Index cards, washi tape, rubber stamps, chunky sticker buttons.
   All classes prefixed (no Bootstrap-reserved names).
   ============================================================ */

#fcapp{
  --teal:#00b09b; --teal-deep:#008875; --teal-ink:#00695f; --teal-wash:#e2f6f0;
  --gold:#ffc107; --gold-deep:#d99e00; --gold-wash:#fff4d6;
  --navy:#1b2a5c; --navy-soft:#3a4a80;
  --lime:#9fc131; --lime-deep:#7fa31c; --lime-wash:#f0f6dc;
  --coral:#fc5546; --coral-deep:#d43a2c; --coral-wash:#ffe9e6;
  --purple:#7c4dff; --purple-deep:#6236d9; --purple-wash:#efe9ff;
  --ink:#232c3d; --muted:#6a7383; --paper:#f7f4ec; --card:#fffdf7;
  --line:#e7e2d4; --line2:#d9d3c2; --rule:#dbe7f2; --redrule:#f3c3bd;
  --disp:"Bricolage Grotesque","Nunito Sans",system-ui,sans-serif;
  --sans:"Nunito Sans",system-ui,sans-serif;
  --hard:0 4px 0;
  --shadow:0 1px 2px rgba(27,42,92,.06),0 8px 22px rgba(27,42,92,.07);
  --shadow-lg:0 18px 44px rgba(27,42,92,.14);
  --tsz:1;
}
#fcapp,#fcapp *{box-sizing:border-box}
#fcapp{margin:0;font-family:var(--sans);color:var(--ink);background:
  radial-gradient(rgba(27,42,92,.055) 1px,transparent 1px) 0 0/22px 22px,
  var(--paper);
  line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
#fcapp:fullscreen,#fcapp:-webkit-full-screen{overflow:auto;background:var(--paper)}
#fcapp button{font-family:inherit;cursor:pointer;color:inherit}
#fcapp .fwrap{max-width:1080px;margin:0 auto;padding:0 22px;width:100%}
#fcapp.fc-lexend, #fcapp.fc-lexend button, #fcapp.fc-lexend input, #fcapp.fc-lexend select, #fcapp.fc-lexend textarea{font-family:"Lexend",var(--sans)!important;letter-spacing:.02em}
#fcapp.fc-t2{font-size:17.5px}
#fcapp.fc-t3{font-size:19.5px}
#fcapp.fc-nomotion *,#fcapp.fc-nomotion *::before,#fcapp.fc-nomotion *::after{animation:none!important;transition:none!important}

/* ---------- header ---------- */
#fcapp .ftop{background:var(--card);border-bottom:2px solid var(--navy);position:sticky;top:0;z-index:40}
#fcapp .ftopbar{display:flex;align-items:center;gap:16px;padding:11px 22px;max-width:1080px;margin:0 auto;flex-wrap:wrap}
#fcapp .flogo{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.4px;color:var(--navy)}
#fcapp .flogo .fmark{position:relative;width:38px;height:31px;flex:none}
#fcapp .flogo .fmark i{position:absolute;inset:0;border-radius:5px;background:#fff;border:2px solid var(--navy)}
#fcapp .flogo .fmark i:nth-child(1){transform:rotate(-9deg) translate(-3px,2px);background:var(--gold)}
#fcapp .flogo .fmark i:nth-child(2){transform:rotate(5deg) translate(3px,0);background:var(--lime)}
#fcapp .flogo .fmark i:nth-child(3){background:#fff}
#fcapp .flogo .fmark i:nth-child(3)::after{content:"";position:absolute;left:5px;right:5px;top:8px;height:2px;background:var(--redrule);box-shadow:0 6px 0 var(--rule)}
#fcapp .ftabs{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#fcapp .ftabs .ftab{border:2px solid var(--navy);background:#fff;border-radius:11px;padding:7px 15px;font-weight:800;font-size:14px;color:var(--navy);box-shadow:var(--hard) var(--navy);transition:transform .08s,box-shadow .08s}
#fcapp .ftabs .ftab:hover{background:var(--gold-wash)}
#fcapp .ftabs .ftab.on{background:var(--navy);color:#fff}
#fcapp .ftabs .ftab:active{transform:translateY(4px);box-shadow:0 0 0 var(--navy)}
#fcapp .ficon{border:2px solid var(--navy);background:#fff;border-radius:11px;width:38px;height:38px;font-size:16px;box-shadow:var(--hard) var(--navy);display:inline-flex;align-items:center;justify-content:center;transition:transform .08s,box-shadow .08s}
#fcapp .ficon:active{transform:translateY(4px);box-shadow:0 0 0 var(--navy)}
#fcapp .ficon.on{background:var(--teal-wash)}
#fcapp .fstreak{font-size:12.5px;font-family:var(--sans);font-weight:800;background:var(--gold-wash);border:1.5px solid var(--gold-deep);color:#8a6400;border-radius:999px;padding:3px 10px;display:none;transform:rotate(-2deg)}
#fcapp .fstreak.show{display:inline-block}

/* ---------- sticker buttons ---------- */
#fcapp .fbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--navy);border-radius:13px;padding:11px 20px;font-weight:900;font-size:15px;font-family:var(--sans);background:#fff;color:var(--navy);box-shadow:var(--hard) var(--navy);transition:transform .08s,box-shadow .08s,background .15s;text-decoration:none}
#fcapp .fbtn:active{transform:translateY(4px);box-shadow:0 0 0 var(--navy)}
#fcapp .fbtn:disabled{opacity:.55;cursor:default}
#fcapp .fbtn-teal{background:var(--teal);border-color:var(--teal-ink);color:#fff;box-shadow:var(--hard) var(--teal-ink)}
#fcapp .fbtn-teal:active{box-shadow:0 0 0 var(--teal-ink)}
#fcapp .fbtn-gold{background:var(--gold);border-color:#a97b00;color:#4a3600;box-shadow:var(--hard) #a97b00}
#fcapp .fbtn-gold:active{box-shadow:0 0 0 #a97b00}
#fcapp .fbtn-coral{background:var(--coral);border-color:#a02518;color:#fff;box-shadow:var(--hard) #a02518}
#fcapp .fbtn-coral:active{box-shadow:0 0 0 #a02518}
#fcapp .fbtn-ghostie{background:#fff}
#fcapp .fbtn-small{padding:7px 14px;font-size:13.5px;border-radius:11px}
#fcapp .fquiet{background:none;border:none;color:var(--muted);font-size:13px;font-weight:700;padding:6px}
#fcapp .fquiet:hover{color:var(--coral)}

/* ---------- hero ---------- */
#fcapp .fhero{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;padding:44px 0 26px}
#fcapp .fhero h1{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.4vw,46px);line-height:1.06;letter-spacing:-1px;color:var(--navy);margin:0 0 12px}
#fcapp .fhero h1 .hl{position:relative;z-index:0;white-space:nowrap}
#fcapp .fhero h1 .hl::after{content:"";position:absolute;left:-2%;right:-3%;bottom:2px;height:.38em;background:var(--lime);opacity:.5;z-index:-1;transform:rotate(-1deg);border-radius:3px}
#fcapp .fhero p{font-size:16.5px;color:var(--muted);margin:0 0 20px;max-width:46ch}
#fcapp .fhero .fctarow{display:flex;gap:12px;flex-wrap:wrap}
#fcapp .ffan{position:relative;height:280px;perspective:900px}
#fcapp .ffan .fdemo{position:absolute;width:230px;height:150px;left:50%;top:50%;border-radius:14px;background:var(--card);border:2px solid var(--navy);box-shadow:var(--shadow);padding:14px 16px;font-weight:800}
#fcapp .ffan .fdemo small{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:6px}
#fcapp .ffan .fdemo .ruled{position:absolute;left:12px;right:12px;top:52px;bottom:12px;background:repeating-linear-gradient(transparent 0 22px,var(--rule) 22px 24px)}
#fcapp .ffan .fdemo .word{position:relative;z-index:1;font-family:var(--disp);font-size:21px;color:var(--navy)}
#fcapp .ffan .fdemo:nth-of-type(1){transform:translate(-78%,-74%) rotate(-8deg);background:var(--teal-wash)}
#fcapp .ffan .fdemo:nth-of-type(2){transform:translate(-22%,-46%) rotate(4deg);background:var(--gold-wash)}
#fcapp .ffan .fdemo:nth-of-type(3){transform:translate(-56%,-22%) rotate(-2deg)}
#fcapp .ffan .ftape{position:absolute;width:74px;height:22px;background:var(--coral);opacity:.75;border-radius:3px;transform:rotate(-40deg);left:16%;top:6%}
#fcapp .ffan .ftape.t2{background:var(--purple);left:auto;right:8%;top:60%;transform:rotate(35deg)}

/* ---------- toolbar / chips ---------- */
#fcapp .ftoolbar{display:flex;gap:14px;align-items:center;margin:6px 0 20px;flex-wrap:wrap}
#fcapp .fsearchbox{position:relative;flex:1;min-width:230px}
#fcapp .fsearchbox svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
#fcapp input.fsearch{border:2px solid var(--navy);border-radius:12px;padding:11px 14px 11px 40px;font-size:14.5px;width:100%;background:#fff;font-family:inherit;box-shadow:var(--hard) rgba(27,42,92,.15)}
#fcapp input.fsearch:focus{outline:3px solid var(--gold)}
#fcapp .fchips{display:flex;gap:7px;flex-wrap:wrap}
#fcapp .fchips button{border:1.5px solid var(--line2);border-radius:999px;background:#fff;padding:6px 13px;font-size:12.5px;font-weight:800;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
#fcapp .fchips button .dot{width:8px;height:8px;border-radius:99px;display:inline-block}
#fcapp .fchips button.on{border-color:var(--navy);color:var(--navy);background:var(--gold-wash)}
#fcapp .fcode-chip{border:2px dashed var(--teal-deep);color:var(--teal-ink);border-radius:999px;background:var(--teal-wash);padding:6px 14px;font-size:12.5px;font-weight:900}

/* ---------- library grid: index cards ---------- */
#fcapp .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;padding-bottom:56px}
#fcapp .fset{position:relative;background:var(--card);border:2px solid var(--navy);border-radius:16px;box-shadow:var(--shadow);padding:20px 20px 16px;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
#fcapp .fgrid .fset:nth-child(3n+1){transform:rotate(-.5deg)}
#fcapp .fgrid .fset:nth-child(3n+2){transform:rotate(.4deg)}
#fcapp .fset:hover{transform:rotate(0) translateY(-4px);box-shadow:var(--shadow-lg);z-index:2}
#fcapp .fset .ftape-top{position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);width:92px;height:20px;border-radius:3px;opacity:.8}
#fcapp .fset .fsub{font-size:11px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}
#fcapp .fset h3{font-family:var(--disp);font-weight:700;margin:3px 0 7px;font-size:20px;line-height:1.15;color:var(--navy)}
#fcapp .fset .fpeek{font-size:13px;color:var(--muted);border-top:1.5px dashed var(--line2);border-bottom:1.5px dashed var(--line2);padding:7px 0;margin-bottom:9px;min-height:36px}
#fcapp .fset .fmeta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:11px}
#fcapp .fset .fbest{font-weight:800;color:var(--teal-ink);white-space:nowrap}
#fcapp .fring{width:40px;height:40px;flex:none;position:relative}
#fcapp .fring svg{transform:rotate(-90deg)}
#fcapp .fring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9.5px;color:var(--navy)}
#fcapp .fset .facts{display:flex;gap:9px;align-items:center;margin-top:auto}
#fcapp .fnew{border:2.5px dashed var(--navy-soft);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--navy);font-weight:900;min-height:200px;cursor:pointer;background:rgba(255,255,255,.55);font-size:15.5px}
#fcapp .fnew:hover{background:var(--gold-wash)}
#fcapp .fnew .plus{font-size:30px;line-height:1;background:var(--gold);border:2px solid var(--navy);width:46px;height:46px;border-radius:99px;display:flex;align-items:center;justify-content:center;box-shadow:var(--hard) var(--navy)}
#fcapp .fnew small{color:var(--muted);font-weight:700}
#fcapp .fnew.fgen{border-color:#00b09b;background:#e8f8f4}
#fcapp .fnew.fgen:hover{background:#dbf4ee}
#fcapp .fnew.fgen .plus{background:#00b09b;color:#fff;border-color:#00b09b}
#fcapp .fempty{grid-column:1/-1;text-align:center;color:var(--muted);padding:50px 0;font-size:15px}
/* kebab menu */
#fcapp .fkebab{margin-left:auto;width:34px;height:34px;border:2px solid var(--navy);border-radius:10px;background:#fff;font-weight:900;box-shadow:var(--hard) var(--navy)}
#fcapp .fkebab:active{transform:translateY(3px);box-shadow:0 0 0 var(--navy)}
#fcapp .fmenu{position:absolute;right:12px;bottom:54px;background:#fff;border:2px solid var(--navy);border-radius:13px;box-shadow:var(--shadow-lg);z-index:20;min-width:170px;overflow:hidden}
#fcapp .fmenu button{display:block;width:100%;text-align:left;background:none;border:none;padding:10px 15px;font-size:13.5px;font-weight:800;color:var(--ink)}
#fcapp .fmenu button:hover{background:var(--teal-wash)}
#fcapp .fmenu button.danger{color:var(--coral-deep)}
#fcapp .fmenu button.danger:hover{background:var(--coral-wash)}

/* ---------- views ---------- */
#fcapp .fview{display:none}
#fcapp .fview.active{display:block;animation:fviewin .28s ease}
@keyframes fviewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- study top ---------- */
#fcapp .fstudytop{display:flex;align-items:center;gap:14px;margin:24px 0 4px;flex-wrap:wrap}
#fcapp .fback{border:2px solid var(--navy);background:#fff;border-radius:11px;padding:7px 13px;font-weight:900;font-size:13.5px;box-shadow:var(--hard) var(--navy)}
#fcapp .fback:active{transform:translateY(4px);box-shadow:0 0 0 var(--navy)}
#fcapp .fstudytop h2{font-family:var(--disp);font-weight:800;font-size:24px;margin:0;color:var(--navy);letter-spacing:-.4px}
#fcapp .fstudytop .fby{font-size:12.5px;color:var(--muted);font-weight:700}
#fcapp .fstudytop .frt{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- mode tabs: folder tabs ---------- */
#fcapp .fmodes{display:flex;gap:6px;margin:18px 0 0;flex-wrap:wrap;position:relative;z-index:2}
#fcapp .fmodes button{border:2px solid var(--navy);border-bottom:none;background:#efeadf;border-radius:13px 13px 0 0;padding:10px 18px 13px;font-weight:900;font-size:14.5px;color:var(--navy-soft);position:relative;top:2px}
#fcapp .fmodes button.on{background:var(--card);color:var(--navy);top:0;padding-bottom:15px}
#fcapp .fstage{background:var(--card);border:2px solid var(--navy);border-radius:0 16px 16px 16px;box-shadow:var(--shadow);padding:26px 24px 30px;position:relative;margin-bottom:34px}

/* ---------- flashcards deck ---------- */
#fcapp .fsegs{display:flex;gap:3px;margin:0 auto 16px;max-width:560px}
#fcapp .fsegs i{flex:1;height:6px;border-radius:4px;background:#e4ddca}
#fcapp .fsegs i.cur{background:var(--gold)}
#fcapp .fsegs i.know{background:var(--teal)}
#fcapp .fsegs i.learn{background:var(--coral)}
#fcapp .fdeckrow{display:flex;justify-content:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
#fcapp .fdeck{position:relative;max-width:620px;height:340px;margin:0 auto;perspective:1300px;touch-action:pan-y}
#fcapp .fghost{position:absolute;inset:0;background:var(--card);border:2px solid var(--navy);border-radius:18px}
#fcapp .fghost.g1{transform:translateY(9px) rotate(1deg)}
#fcapp .fghost.g2{transform:translateY(18px) rotate(-1.4deg)}
#fcapp .fdecktop{position:absolute;inset:0;transform-style:preserve-3d;cursor:grab;transition:transform .3s}
#fcapp .fdecktop.deal{animation:fdeal .3s ease}
@keyframes fdeal{from{transform:translateY(-26px) rotate(2deg);opacity:0}to{transform:none;opacity:1}}
#fcapp .fdecktop.flipped .finner{transform:rotateY(180deg)}
#fcapp .finner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.4,1.4,.6,1)}
#fcapp .fface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--card);border:2px solid var(--navy);border-radius:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 34px;text-align:center;overflow:hidden}
#fcapp .fface::before{content:"";position:absolute;left:22px;right:22px;top:64px;bottom:46px;background:repeating-linear-gradient(transparent 0 30px,var(--rule) 30px 32px);pointer-events:none}
#fcapp .fface .flbl{position:absolute;top:14px;left:18px;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:900;color:var(--muted)}
#fcapp .fface-back{transform:rotateY(180deg);background:var(--teal-wash)}
#fcapp .fface .ftxt{position:relative;z-index:1;font-family:var(--disp);font-weight:700;font-size:clamp(22px,3.6vw,34px);line-height:1.2;color:var(--navy);max-height:100%;overflow-wrap:anywhere}
#fcapp .fface-back .ftxt{font-family:var(--sans);font-weight:800;font-size:clamp(17px,2.6vw,23px);color:var(--teal-ink)}
#fcapp .fface #fcImgWrap{width:100%;text-align:center;position:relative;z-index:1}
#fcapp .fface img.fcimg{position:relative;z-index:1;max-height:120px;max-width:70%;width:auto;border-radius:10px;border:2px solid var(--navy);margin-top:12px;background:#fff;display:inline-block}
#fcapp .fface .fhint{position:absolute;bottom:12px;left:0;right:0;font-size:11.5px;color:var(--muted);font-weight:700}
/* Safari fix 2026-08-28: WebKit only culls a backface it considers 3D. The front
   face carried no transform of its own, so Safari never hid it and its term, its
   picture and its sticker buttons showed through the back of the card. Giving it
   rotateY(0deg) is enough. Verified in Safari against an unpatched control. */
#fcapp .fface-front{transform:rotateY(0deg)}
#fcapp .fspk,#fcapp .fstar{position:absolute;top:10px;border:2px solid var(--navy);background:#fff;border-radius:9px;width:32px;height:32px;font-size:14px;z-index:3;box-shadow:0 2.5px 0 var(--navy)}
#fcapp .fspk{right:50px}
#fcapp .fstar{right:10px;color:#c8c2b2}
#fcapp .fstar.on{color:var(--gold-deep);background:var(--gold-wash)}
/* rubber stamps */
#fcapp .fstamp{position:absolute;top:26px;padding:6px 14px;border:3.5px solid;border-radius:8px;font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:2px;text-transform:uppercase;opacity:0;pointer-events:none;z-index:4;background:rgba(255,255,255,.82)}
#fcapp .fstamp.know{right:22px;color:var(--teal-deep);border-color:var(--teal-deep);transform:rotate(9deg)}
#fcapp .fstamp.learn{left:22px;color:var(--coral-deep);border-color:var(--coral-deep);transform:rotate(-9deg)}
#fcapp .fcontrols{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0 6px}
#fcapp .fnavb{width:46px;height:46px;border-radius:99px;border:2px solid var(--navy);background:#fff;font-size:21px;font-weight:900;box-shadow:var(--hard) var(--navy)}
#fcapp .fnavb:active{transform:translateY(4px);box-shadow:0 0 0 var(--navy)}
#fcapp .fnavb:disabled{opacity:.4}
#fcapp .fcount{font-weight:900;font-size:15px;color:var(--navy);min-width:70px;text-align:center;font-family:var(--disp)}
#fcapp .fknowrow{display:flex;justify-content:center;gap:12px;margin-top:6px;flex-wrap:wrap}
#fcapp .fkbdtip{text-align:center;font-size:12px;color:var(--muted);margin-top:14px;font-weight:700}
#fcapp kbd{background:#fff;border:1.5px solid var(--line2);border-bottom-width:3px;border-radius:6px;padding:1px 6px;font-family:inherit;font-size:11px;font-weight:800;color:var(--muted)}

/* roundup */
#fcapp .fround{text-align:center;padding:30px 10px}
#fcapp .fround .big{font-family:var(--disp);font-weight:800;font-size:32px;color:var(--navy);margin-bottom:16px;letter-spacing:-.5px}
#fcapp .frstats{display:flex;justify-content:center;gap:16px;margin-bottom:20px}
#fcapp .frstats .s{border:2px solid var(--navy);border-radius:14px;padding:14px 26px;background:#fff;box-shadow:var(--hard) var(--navy)}
#fcapp .frstats .s b{display:block;font-family:var(--disp);font-size:32px;font-weight:800}
#fcapp .frstats .s span{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
#fcapp .frstats .s.k b{color:var(--teal-deep)}
#fcapp .frstats .s.l b{color:var(--coral-deep)}

/* term list */
#fcapp .ftermsec{margin:0 0 60px}
#fcapp .ftermsec h3{font-family:var(--disp);font-weight:800;color:var(--navy);font-size:19px;margin:26px 0 12px}
#fcapp .ftrow{display:flex;align-items:center;gap:13px;background:var(--card);border:1.5px solid var(--line2);border-radius:13px;padding:11px 15px;margin-bottom:8px}
#fcapp .ftrow .t{font-weight:900;color:var(--navy);min-width:130px;max-width:220px}
#fcapp .ftrow .d{color:var(--ink);font-size:14.5px;flex:1}
#fcapp .ftrow img.fthumb{height:44px;border-radius:8px;border:1.5px solid var(--line2)}
#fcapp .ftrow .fspk2,#fcapp .ftrow .fstar2{border:none;background:none;font-size:15px;padding:4px}
#fcapp .ftrow .fstar2{color:#cfc9b8}
#fcapp .ftrow .fstar2.on{color:var(--gold-deep)}

/* ---------- learn ---------- */
#fcapp .flearn{max-width:640px;margin:0 auto}
#fcapp .flstatus{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800;color:var(--muted);margin-bottom:8px}
#fcapp .fflame{opacity:0;transition:opacity .2s;background:var(--gold-wash);border:1.5px solid var(--gold-deep);color:#8a6400;padding:2px 11px;border-radius:99px;transform:rotate(-2deg)}
#fcapp .fflame.show{opacity:1}
#fcapp .fflame.pop{animation:fpop .3s ease}
@keyframes fpop{50%{transform:rotate(-2deg) scale(1.22)}}
#fcapp .fprog{height:9px;background:#e9e3d2;border-radius:99px;overflow:hidden;margin-bottom:20px;border:1.5px solid var(--line2)}
#fcapp .fprog i{display:block;height:100%;background:var(--teal);transition:width .35s ease;border-radius:99px}
#fcapp .fprompt{background:#fff;border:2px solid var(--navy);border-radius:16px;padding:22px 24px;margin-bottom:16px;box-shadow:var(--shadow)}
#fcapp .fprompt .pl{font-size:11px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--teal-ink)}
#fcapp .fprompt .q{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--navy);margin-top:5px;line-height:1.25}
#fcapp .fprompt img.fcimg{max-height:110px;border-radius:10px;border:2px solid var(--navy);margin-top:10px}
#fcapp .fopts{display:grid;gap:10px}
@media(min-width:620px){#fcapp .fopts{grid-template-columns:1fr 1fr}}
#fcapp .fopt{border:2px solid var(--navy);border-radius:13px;background:#fff;padding:14px 16px;font-size:15px;font-weight:700;text-align:left;box-shadow:var(--hard) rgba(27,42,92,.22);transition:transform .08s,box-shadow .08s;position:relative;padding-left:44px}
#fcapp .fopt .key{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:1.5px solid var(--line2);border-radius:6px;font-size:11px;font-weight:900;color:var(--muted);display:flex;align-items:center;justify-content:center;background:#fff}
#fcapp .fopt:hover{background:var(--gold-wash)}
#fcapp .fopt:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(27,42,92,.22)}
#fcapp .fopt.correct{background:var(--teal-wash);border-color:var(--teal-deep);color:var(--teal-ink)}
#fcapp .fopt.wrong{background:var(--coral-wash);border-color:var(--coral-deep);animation:fshake .35s}
@keyframes fshake{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
#fcapp .fwrite input{width:100%;border:2px solid var(--navy);border-radius:13px;padding:13px 16px;font-size:16px;font-family:inherit;background:#fff}
#fcapp .fwrite input:focus{outline:3px solid var(--gold)}
#fcapp .fwrite .wrow{display:flex;gap:10px;margin-top:12px}
#fcapp .fanote{margin-top:10px;font-weight:800;font-size:14.5px;padding:10px 14px;border-radius:11px}
#fcapp .fanote.ok{background:var(--teal-wash);color:var(--teal-ink)}
#fcapp .fanote.close{background:var(--gold-wash);color:#7d5c00}
#fcapp .fanote.no{background:var(--coral-wash);color:var(--coral-deep)}
#fcapp .fdone{text-align:center;padding:26px 6px}
#fcapp .fscore{font-family:var(--disp);font-size:58px;font-weight:800;color:var(--teal-deep);letter-spacing:-2px}
#fcapp .fmissed{max-width:560px;margin:14px auto 0;text-align:left}

/* ---------- match ---------- */
#fcapp .fmbar{display:flex;align-items:center;gap:18px;font-weight:800;margin-bottom:16px;flex-wrap:wrap;font-size:14.5px}
#fcapp .fmbar .fbest{color:var(--teal-ink)}
#fcapp .fmgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:640px){#fcapp .fmgrid{grid-template-columns:repeat(3,1fr)}}
#fcapp .ftile{border:2px solid var(--navy);border-radius:13px;background:#fff;min-height:86px;padding:10px;font-size:14px;font-weight:800;color:var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:var(--hard) rgba(27,42,92,.2);transition:transform .12s,opacity .3s,background .15s;overflow-wrap:anywhere}
#fcapp .ftile img{max-height:64px;max-width:100%;border-radius:8px}
#fcapp .ftile:hover{transform:translateY(-2px)}
#fcapp .ftile.sel{background:var(--gold-wash);border-color:var(--gold-deep);transform:scale(.97)}
#fcapp .ftile.hit{background:var(--teal-wash);border-color:var(--teal-deep);color:var(--teal-ink)}
#fcapp .ftile.miss{background:var(--coral-wash);border-color:var(--coral-deep);animation:fshake .3s}
#fcapp .ftile.gone{opacity:0;transform:scale(.6) rotate(6deg);pointer-events:none}
#fcapp .fcount-ov{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:70;pointer-events:none}
#fcapp .fcount-ov b{font-family:var(--disp);font-size:110px;font-weight:800;color:var(--navy);text-shadow:0 6px 0 var(--gold);animation:fzoom .65s ease}
@keyframes fzoom{from{transform:scale(.4);opacity:0}30%{transform:scale(1.15);opacity:1}to{transform:scale(1)}}
#fcapp .fpenal{color:var(--coral-deep);font-weight:900;animation:fpop .3s}

/* ---------- blitz ---------- */
#fcapp .fblitz{max-width:600px;margin:0 auto;text-align:center}
#fcapp .fbz-head{display:flex;justify-content:space-between;align-items:center;font-weight:900;margin-bottom:8px;font-size:15px}
#fcapp .fbz-head .sc{font-family:var(--disp);font-size:34px;color:var(--navy)}
#fcapp .fbz-head .mult{background:var(--gold);border:2px solid #a97b00;border-radius:99px;padding:3px 13px;color:#4a3600}
#fcapp .fbz-timer{height:12px;border:2px solid var(--navy);border-radius:99px;overflow:hidden;margin-bottom:22px;background:#fff}
#fcapp .fbz-timer i{display:block;height:100%;background:var(--teal);transition:width .1s linear}
#fcapp .fbz-timer i.low{background:var(--coral)}
#fcapp .fbz-card{background:#fff;border:2px solid var(--navy);border-radius:18px;padding:28px 26px;box-shadow:var(--shadow);margin-bottom:18px;transition:background .12s,border-color .12s}
#fcapp .fbz-card.yes{background:var(--teal-wash);border-color:var(--teal-deep)}
#fcapp .fbz-card.no{background:var(--coral-wash);border-color:var(--coral-deep)}
#fcapp .fbz-card .bzt{font-family:var(--disp);font-weight:800;font-size:27px;color:var(--navy)}
#fcapp .fbz-card .eq{width:52px;height:3px;background:var(--line2);margin:14px auto;border-radius:2px}
#fcapp .fbz-card .bzd{font-size:17px;font-weight:700;color:var(--ink)}
#fcapp .fbz-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#fcapp .fbz-btns .fbtn{min-width:170px}
#fcapp .fbz-intro{padding:34px 10px;text-align:center}
#fcapp .fbz-intro h3{font-family:var(--disp);font-weight:800;font-size:28px;color:var(--navy);margin:0 0 8px}
#fcapp .fbz-intro p{color:var(--muted);max-width:44ch;margin:0 auto 20px;font-weight:600}

/* ---------- test ---------- */
#fcapp .ftsetup{max-width:560px;margin:0 auto;padding:6px 0 10px}
#fcapp .ftsetup .frow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){#fcapp .ftsetup .frow2{grid-template-columns:1fr}}
#fcapp .fseg{display:flex;border:2px solid var(--navy);border-radius:12px;overflow:hidden;background:#fff}
#fcapp .fseg button{flex:1;border:none;background:none;padding:9px 6px;font-weight:800;font-size:13.5px;color:var(--muted)}
#fcapp .fseg button.on{background:var(--navy);color:#fff}
#fcapp .fcheckrow{display:flex;gap:10px;flex-wrap:wrap}
#fcapp .fcheck{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--navy);border-radius:12px;background:#fff;padding:9px 14px;font-weight:800;font-size:13.5px;cursor:pointer}
#fcapp .fcheck.on{background:var(--teal-wash);border-color:var(--teal-deep);color:var(--teal-ink)}
#fcapp .ftq{background:#fff;border:2px solid var(--navy);border-radius:15px;padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow)}
#fcapp .ftq .qh{font-size:11px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
#fcapp .ftq .qt{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--navy);margin-bottom:12px}
#fcapp .ftq img.fcimg{max-height:100px;border-radius:10px;border:2px solid var(--navy);margin-bottom:10px}
#fcapp .ftq input.tin{width:100%;border:2px solid var(--line2);border-radius:11px;padding:11px 13px;font-size:15px;font-family:inherit}
#fcapp .ftq input.tin:focus{outline:3px solid var(--gold);border-color:var(--navy)}
#fcapp .ftopts{display:grid;gap:8px}
@media(min-width:620px){#fcapp .ftopts{grid-template-columns:1fr 1fr}}
#fcapp .ftopt{border:2px solid var(--line2);border-radius:11px;background:#fff;padding:11px 13px;font-size:14px;font-weight:700;text-align:left}
#fcapp .ftopt.pick{border-color:var(--navy);background:var(--gold-wash)}
#fcapp .ftq.graded.ok{border-color:var(--teal-deep)}
#fcapp .ftq.graded.no{border-color:var(--coral-deep)}
#fcapp .fgline{margin-top:10px;font-weight:800;font-size:14px}
#fcapp .fgline.ok{color:var(--teal-ink)}
#fcapp .fgline.no{color:var(--coral-deep)}
#fcapp .ftfrow{display:flex;gap:10px}
#fcapp .ftfrow .ftopt{flex:1;text-align:center}

/* ---------- editor ---------- */
#fcapp .fed{background:var(--card);border:2px solid var(--navy);border-radius:16px;box-shadow:var(--shadow);padding:24px;margin-bottom:60px}
#fcapp .fmeta-row{display:grid;grid-template-columns:2fr 1fr;gap:14px}
@media(max-width:640px){#fcapp .fmeta-row{grid-template-columns:1fr}}
#fcapp .ffield{margin-bottom:14px}
#fcapp .ffield label{display:block;font-size:12px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
#fcapp .ffld{width:100%;border:2px solid var(--navy);border-radius:12px;padding:11px 14px;font-size:15px;font-family:inherit;background:#fff}
#fcapp .ffld:focus{outline:3px solid var(--gold)}
#fcapp select.ffld{appearance:auto}
#fcapp .fpairs-head{display:grid;grid-template-columns:44px 1fr 1.4fr 66px 34px;gap:10px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:0 4px;margin:18px 0 8px}
#fcapp .fpair{display:grid;grid-template-columns:44px 1fr 1.4fr 66px 34px;gap:10px;align-items:center;margin-bottom:9px}
#fcapp .fpair.dragging{opacity:.45}
#fcapp .fpair .fnum{display:flex;align-items:center;gap:3px;font-weight:900;color:var(--muted);cursor:grab;font-size:13px}
#fcapp .fpair .fnum .grip{color:var(--line2);font-size:15px}
#fcapp .fpair input.fpf{border:2px solid var(--line2);border-radius:11px;padding:10px 12px;font-size:15px;font-family:inherit;width:100%;background:#fff}
#fcapp .fpair input.fpf:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--gold-wash)}
#fcapp .fimgbtn{position:relative;width:62px;height:44px;border:2px dashed var(--line2);border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--muted);cursor:pointer;overflow:hidden}
#fcapp .fimgbtn span:first-child{font-size:14px;line-height:1}
#fcapp .fimgbtn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#fcapp .fimgbtn .rm{display:none;position:absolute;top:0;right:0;background:var(--coral);color:#fff;width:17px;height:17px;font-size:11px;line-height:17px;text-align:center;border-radius:0 0 0 8px;font-weight:900}
#fcapp .fimgbtn.has .rm{display:block}
#fcapp .fpair .fdel{border:none;background:none;color:var(--muted);font-size:19px;font-weight:900}
#fcapp .fpair .fdel:hover{color:var(--coral)}
#fcapp .fed-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

/* ---------- paste import ---------- */
#fcapp .fpaste{background:var(--card);border:2px solid var(--navy);border-radius:16px;box-shadow:var(--shadow);padding:26px;max-width:760px;margin:0 auto 60px}
#fcapp .fpaste h2{font-family:var(--disp);font-weight:800;color:var(--navy);margin:0 0 6px;font-size:24px}
#fcapp .fpaste .plead{color:var(--muted);font-weight:600;margin:0 0 16px;font-size:14.5px}
#fcapp .fpaste textarea{width:100%;min-height:210px;border:2px solid var(--navy);border-radius:13px;padding:14px 16px;font-size:14px;font-family:ui-monospace,Menlo,monospace;background:#fff;resize:vertical}
#fcapp .fpaste textarea:focus{outline:3px solid var(--gold)}
#fcapp .fpaste .fpreview{margin-top:14px;font-weight:800;font-size:14px;color:var(--teal-ink)}
#fcapp .fpaste .fhowto{background:var(--purple-wash);border:1.5px solid var(--purple);border-radius:12px;padding:12px 16px;font-size:13px;margin:14px 0;color:var(--ink)}
#fcapp .fpaste .fhowto b{color:var(--purple-deep)}

/* ---------- sheets (modals) ---------- */
#fcapp .fsheet-bg{position:fixed;inset:0;background:rgba(27,42,92,.45);z-index:90;display:none}
#fcapp .fsheet-bg.show{display:block;animation:ffade .2s}
@keyframes ffade{from{opacity:0}}
#fcapp .fsheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--card);border:2.5px solid var(--navy);border-radius:20px;box-shadow:var(--shadow-lg);z-index:95;width:min(480px,92vw);max-height:86vh;overflow:auto;padding:26px;display:none}
#fcapp .fsheet.show{display:block;animation:fsheetin .25s cubic-bezier(.3,1.4,.6,1)}
@keyframes fsheetin{from{transform:translate(-50%,-46%) scale(.94);opacity:0}}
#fcapp .fsheet h3{font-family:var(--disp);font-weight:800;color:var(--navy);margin:0 0 14px;font-size:22px}
#fcapp .fsheet .fx{position:absolute;top:12px;right:12px;width:34px;height:34px;border:2px solid var(--navy);border-radius:10px;background:#fff;font-weight:900;font-size:15px;box-shadow:0 2.5px 0 var(--navy)}
#fcapp .fshare-code{font-family:var(--disp);font-weight:800;font-size:44px;letter-spacing:10px;text-align:center;color:var(--navy);background:var(--gold-wash);border:2px dashed var(--gold-deep);border-radius:14px;padding:12px 6px 12px 14px;margin:6px 0 14px}
#fcapp .fshare-link{display:flex;gap:8px;margin-bottom:14px}
#fcapp .fshare-link input{flex:1;border:2px solid var(--line2);border-radius:11px;padding:9px 12px;font-size:12.5px;font-family:ui-monospace,monospace;background:#fff;color:var(--muted)}
#fcapp .fqr{display:flex;justify-content:center;margin:8px 0 4px}
#fcapp .fqr canvas{border:2px solid var(--navy);border-radius:12px;padding:8px;background:#fff}
#fcapp .fsheet .fnote{font-size:12.5px;color:var(--muted);text-align:center;font-weight:600}
#fcapp .fa11y-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1.5px dashed var(--line2)}
#fcapp .fa11y-row:last-child{border-bottom:none}
#fcapp .fa11y-row .lb{font-weight:800;font-size:14.5px}
#fcapp .fa11y-row .lb small{display:block;color:var(--muted);font-weight:600;font-size:12px}
#fcapp .fswitch{width:52px;height:29px;border-radius:99px;border:2px solid var(--navy);background:#fff;position:relative;flex:none}
#fcapp .fswitch i{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:99px;background:var(--navy);transition:left .18s}
#fcapp .fswitch.on{background:var(--teal-wash)}
#fcapp .fswitch.on i{left:25px;background:var(--teal-deep)}
#fcapp .fimport-preview{border:2px solid var(--line2);border-radius:13px;padding:14px;margin:10px 0;max-height:200px;overflow:auto;background:#fff}
#fcapp .fimport-preview .r{font-size:13.5px;padding:3px 0;border-bottom:1px dashed var(--line)}
#fcapp .fimport-preview .r b{color:var(--navy)}

/* ---------- fx ---------- */
#fcapp .fpp{position:fixed;z-index:99;font-size:15px;pointer-events:none;animation:fpp .68s ease-out forwards}
@keyframes fpp{to{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}
#fcapp .ffloat{position:fixed;z-index:99;font-family:var(--disp);font-weight:800;font-size:22px;color:var(--teal-deep);pointer-events:none;animation:ffloat .85s ease-out forwards}
@keyframes ffloat{to{transform:translateY(-56px);opacity:0}}
#fcConfettiCv{position:fixed;inset:0;pointer-events:none;z-index:98;width:100vw;height:100vh}
#fcapp .ftoastbox{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;font-weight:800;font-size:14px;border-radius:12px;padding:11px 20px;opacity:0;transition:.25s;z-index:99;pointer-events:none;max-width:88vw;text-align:center}
#fcapp .ftoastbox.show{opacity:1;transform:translateX(-50%)}

/* ---------- footer ---------- */
#fcapp .ffoot{text-align:center;color:var(--muted);font-size:12.5px;padding:22px 0 34px;font-weight:700;margin-top:auto}

/* ---------- projector mode ---------- */
#fcapp.fc-proj .fface .ftxt{font-size:clamp(30px,5vw,52px)}
#fcapp.fc-proj .fface-back .ftxt{font-size:clamp(22px,3.6vw,34px)}
#fcapp.fc-proj .ftile{min-height:110px;font-size:19px}
#fcapp.fc-proj .fopt{font-size:19px;padding:18px 18px 18px 48px}
#fcapp.fc-proj .fprompt .q{font-size:32px}
#fcapp.fc-proj .fbz-card .bzt{font-size:36px}
#fcapp.fc-proj .fbz-card .bzd{font-size:22px}
#fcapp.fc-proj .fdeck{max-width:760px;height:420px}

/* ---------- responsive ---------- */
@media(max-width:760px){
  #fcapp .fhero{grid-template-columns:1fr;padding-top:26px}
  #fcapp .ffan{display:none}
  #fcapp .fdeck{height:300px}
  #fcapp .fpairs-head{display:none}
  #fcapp .fpair{grid-template-columns:30px 1fr 1fr 52px 26px;gap:6px}
  #fcapp .fstage{padding:18px 14px 22px}
  #fcapp .fstudytop .frt{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  #fcapp *,#fcapp *::before,#fcapp *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ============================================================
   Mediavine ad containers — appended 2026-07-18
   #mv-sidebar: sidebar ad container per Mediavine spec —
   at least 300px wide at viewports >= 992px, hidden below 992px.
   Hidden entirely for First Five Plus members (site is ad-free
   for them; snippet 139 removes the Mediavine wrapper anyway).
   The container itself is created by app.js (see matching
   append block at the end of app.js).
   ============================================================ */
#fcapp #mv-sidebar{display:none}
@media (min-width:992px){
  body:not(.is-user-plus) #fcapp main{display:flex;align-items:flex-start;gap:24px;padding:0 22px}
  body:not(.is-user-plus) #fcapp main>.fwrap{flex:1 1 auto;min-width:0}
  body:not(.is-user-plus) #fcapp #mv-sidebar{display:block;flex:0 0 300px;width:300px;min-width:300px;min-height:250px}
}