*{margin:0;padding:0;box-sizing:border-box}
:root{
--navy:#2B4C7E;--gold:#F5A623;--sky:#6B8AAD;--light-bg:#E8F0FE;
--red:#EF4444;--green:#10B981;--blue:#3B82F6;--white:#fff;
--dark:#1F2937;--purple:#8B5CF6;--orange:#F59E0B;
--shadow-sm:0 2px 8px rgba(0,0,0,.08);--shadow-md:0 4px 16px rgba(0,0,0,.12);
--shadow-lg:0 8px 32px rgba(0,0,0,.16);
}
html{width:100%;height:100%;height:100dvh;overflow:hidden;background:linear-gradient(135deg,var(--light-bg) 0%,#F0F4FF 100%);background-attachment:fixed}
body{width:100%;height:100%;height:100dvh;font-family:var(--font-body,Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);color:var(--dark);overflow:hidden;background:transparent;margin:0}
#app{width:100%;height:100%;position:relative}

/* Screens */
.screen{display:none;width:100%;height:100%;flex-direction:column;position:absolute;top:0;left:0}
.scroll-area{transform-origin:center top}
.screen.active{display:flex}

/* Scrollable content */
.scroll-area{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;padding-bottom:100px}

/* Top bar */
.top-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(43,76,126,.1);flex-shrink:0;z-index:100}
.top-bar h2{font-size:16px;font-weight:700;color:var(--navy)}
.back-btn{background:none;border:none;font-size:22px;cursor:pointer;color:var(--navy);padding:4px 8px;border-radius:8px;transition:.2s}
.back-btn:hover{background:rgba(43,76,126,.1)}
/* Home button — quick escape to the home screen from anywhere */
.home-btn{background:none;border:none;cursor:pointer;color:var(--navy);padding:4px 8px;border-radius:8px;transition:background .2s,color .2s,transform .2s;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:18px}
.home-btn:hover{background:rgba(43,76,126,.1);color:var(--navy2)}
.home-btn:active{transform:scale(.92)}
.home-btn svg{width:20px;height:20px}
.top-bar-right{display:flex;align-items:center;gap:10px;min-width:32px;justify-content:flex-end}
body.night-mode .home-btn{color:#E5E9F2}
body.night-mode .home-btn:hover{background:rgba(255,255,255,.06);color:#FFD86B}

/* Stats bar */
.stats-bar{display:flex;gap:12px;padding:8px 16px;background:rgba(255,255,255,.6);backdrop-filter:blur(8px);border-bottom:1px solid rgba(43,76,126,.06);min-height:44px;align-items:center;flex-shrink:0}
.stat-pill{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;background:rgba(43,76,126,.06)}
.stat-pill .val{color:var(--navy)}

/* Cards */
.card{background:var(--white);border-radius:16px;box-shadow:var(--shadow-sm);padding:20px;transition:transform .3s ease,box-shadow .3s ease}
.card:hover{box-shadow:var(--shadow-md)}
.card-glass{background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.4);border-radius:16px;padding:20px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:12px;border:none;font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s ease;text-decoration:none}
.btn-primary{background:var(--navy);color:var(--white)}
.btn-primary:hover{background:#1e3a62;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#E8941E);color:var(--white)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(245,166,35,.4)}
.btn-outline{background:transparent;border:2px solid var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--white)}
.btn-sm{padding:8px 16px;font-size:12px;border-radius:8px}
.btn-block{width:100%}
.btn:active{transform:scale(.97)}

/* Home screen */
.home-hero{text-align:center;padding:40px 20px 20px}
.home-hero h1{font-size:28px;font-weight:800;color:var(--navy);line-height:1.2;margin-bottom:8px}
.home-hero .subtitle{font-size:14px;color:var(--sky);font-weight:600}
.home-logo{width:104px;height:104px;margin:0 auto 14px;display:block;object-fit:contain}

/* Mode grid — Concept A "typographic rails" style (boxes flattened into a divider-separated list) */
.mode-grid{display:flex;flex-direction:column;gap:0;padding:0 16px;max-width:560px;margin:24px auto 0;border-top:1px solid rgba(43,76,126,.12)}
.mode-card{display:flex;align-items:center;gap:16px;padding:20px 14px;background:transparent;border:none;border-bottom:1px solid rgba(43,76,126,.12);border-radius:0;box-shadow:none;cursor:pointer;transition:background .25s ease,padding-left .25s ease;position:relative}
.mode-card:hover{transform:none;box-shadow:none;border-color:rgba(43,76,126,.12);background:rgba(255,255,255,.55);padding-left:22px}
.mode-card:active{transform:scale(.995)}
.mode-card::after{content:'→';position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--sky);transition:transform .3s ease,color .3s ease;font-weight:500}
.mode-card:hover::after{transform:translateY(-50%) translateX(6px);color:var(--navy)}
.mode-card.primary{background:linear-gradient(90deg,rgba(245,166,35,.07),transparent)}
.mode-card.primary::before{content:'';position:absolute;left:0;top:20px;bottom:20px;width:3px;background:var(--gold);border-radius:2px}
.start-badge{display:inline-block;margin-left:8px;font-size:9px;font-weight:800;color:var(--gold);background:rgba(245,166,35,.13);padding:2px 8px;border-radius:10px;letter-spacing:1.2px;vertical-align:middle;text-transform:uppercase}

/* === Mode switcher — floating deck button on study screens === */
.mode-switcher{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));right:calc(20px + env(safe-area-inset-right,0px));z-index:900;pointer-events:none}
.mode-switcher[hidden]{display:none !important}
.mode-switcher>*{pointer-events:auto}
.ms-trigger{width:54px;height:54px;border-radius:27px;background:linear-gradient(135deg,#1e3a62 0%,var(--navy) 100%);border:2px solid var(--gold);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(30,58,95,.35),0 2px 6px rgba(30,58,95,.2);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;padding:0}
.ms-trigger:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 10px 24px rgba(30,58,95,.4)}
.ms-trigger:active{transform:scale(.96)}
.ms-trigger[aria-expanded="true"]{transform:rotate(-6deg) scale(1.04)}
.ms-trigger svg{width:24px;height:24px}
.ms-fan{position:absolute;bottom:66px;right:0;display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:200px;max-width:240px}
.ms-fan[hidden]{display:none !important}
.ms-card{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-radius:14px;border:1.5px solid rgba(43,76,126,.12);box-shadow:0 4px 12px rgba(30,58,95,.08);cursor:pointer;font-weight:600;font-size:13px;color:var(--navy);transition:transform .2s,box-shadow .2s,border-color .2s;white-space:nowrap;opacity:0;transform:translateY(10px) scale(.94);animation:msCardIn .34s cubic-bezier(.22,1,.36,1) forwards}
.ms-card:nth-last-child(1){animation-delay:0ms}
.ms-card:nth-last-child(2){animation-delay:36ms}
.ms-card:nth-last-child(3){animation-delay:72ms}
.ms-card:nth-last-child(4){animation-delay:108ms}
.ms-card:nth-last-child(5){animation-delay:144ms}
.ms-card:nth-last-child(6){animation-delay:180ms}
@keyframes msCardIn{to{opacity:1;transform:translateY(0) scale(1)}}
.ms-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(30,58,95,.18);border-color:var(--gold)}
.ms-card.current{background:linear-gradient(90deg,rgba(245,166,35,.18),rgba(245,166,35,.05));border-color:var(--gold);cursor:default;position:relative}
.ms-card.current:hover{transform:none}
.ms-card.current::after{content:'';position:absolute;right:14px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--gold);transform:translateY(-50%);box-shadow:0 0 0 3px rgba(245,166,35,.25)}
.ms-card .ms-icon{font-size:17px;line-height:1;width:22px;text-align:center;flex-shrink:0}
.ms-card.ms-change{background:transparent;box-shadow:none;border:1px dashed rgba(43,76,126,.25);color:var(--sky);font-size:11px;font-weight:600;padding:8px 12px}
.ms-card.ms-change:hover{color:var(--navy);background:rgba(43,76,126,.04);border-color:var(--navy);box-shadow:none;transform:none}
.ms-backdrop{position:fixed;inset:0;z-index:899;background:transparent}
.ms-backdrop[hidden]{display:none}
/* Night mode */
body.night-mode .ms-trigger{background:linear-gradient(135deg,#172036 0%,#0B1220 100%);box-shadow:0 6px 18px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3)}
body.night-mode .ms-card{background:#172036;color:#E5E9F2;border-color:rgba(255,255,255,.1);box-shadow:0 4px 12px rgba(0,0,0,.35)}
body.night-mode .ms-card:hover{border-color:#FFD86B}
body.night-mode .ms-card.current{background:linear-gradient(90deg,rgba(255,216,107,.22),rgba(255,216,107,.05));border-color:#FFD86B;color:#FFEEB5}
body.night-mode .ms-card.current::after{background:#FFD86B;box-shadow:0 0 0 3px rgba(255,216,107,.25)}
body.night-mode .ms-card.ms-change{color:#8FA8C9;border-color:rgba(255,255,255,.18);background:transparent}
body.night-mode .ms-card.ms-change:hover{color:#FFD86B;background:rgba(255,255,255,.05);border-color:#FFD86B}
/* Hide switcher while printing */
@media print{.mode-switcher{display:none !important}}
.mode-icon{font-size:32px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:14px;flex-shrink:0}
.mode-card h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:2px}
.mode-card p{font-size:12px;color:var(--sky);line-height:1.3}

.home-progress{margin:24px 16px 0;max-width:500px;margin-left:auto;margin-right:auto}
.home-progress h4{font-size:13px;font-weight:600;color:var(--sky);margin-bottom:8px}
.progress-outer{height:12px;background:rgba(43,76,126,.08);border-radius:6px;overflow:hidden}
.progress-inner{height:100%;background:linear-gradient(90deg,var(--green),#34D399);border-radius:6px;transition:width .6s ease}

.home-time{text-align:center;padding:16px;font-size:12px;color:var(--sky);font-weight:600}

/* Student name input */
.name-input-wrap{max-width:340px;margin:16px auto 0;display:flex;gap:8px}
.name-input-wrap input{flex:1;padding:10px 14px;border:2px solid rgba(43,76,126,.15);border-radius:10px;font-family:'Poppins',sans-serif;font-size:14px;outline:none;transition:.2s}
.name-input-wrap input:focus{border-color:var(--gold)}

/* ========== CARD DECK SYSTEM ========== */
.deck-layout{display:flex;align-items:center;gap:8px;width:100%;max-width:600px;margin:0 auto;padding:0 4px}

/* Restart button — borderless, soft radial fade background */
.deck-restart-btn{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:54px;height:88px;border-radius:14px;border:none;color:var(--navy);font-family:'Poppins',sans-serif;font-weight:700;cursor:pointer;transition:transform .2s,background .25s,color .2s;background:radial-gradient(ellipse at center,rgba(43,76,126,.14) 0%,rgba(43,76,126,.06) 55%,rgba(43,76,126,0) 100%)}
.deck-restart-btn:hover{background:radial-gradient(ellipse at center,rgba(43,76,126,.32) 0%,rgba(43,76,126,.14) 55%,rgba(43,76,126,0) 100%);color:var(--navy);transform:translateY(-1px)}
.deck-restart-btn:active{transform:translateY(0) scale(.96)}
.deck-restart-btn .restart-icon{font-size:20px;line-height:1}
.deck-restart-btn .restart-label{font-size:9px;letter-spacing:1px;text-transform:uppercase;opacity:.75}
body.night-mode .deck-restart-btn{color:#E5E9F2;background:radial-gradient(ellipse at center,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 55%,rgba(255,255,255,0) 100%)}
body.night-mode .deck-restart-btn:hover{color:#FFD86B;background:radial-gradient(ellipse at center,rgba(255,216,107,.28) 0%,rgba(255,216,107,.1) 55%,rgba(255,216,107,0) 100%)}

/* Shuffle: slight gold tint to distinguish from Start/End */
.deck-shuffle-btn{color:#C87C0C;background:radial-gradient(ellipse at center,rgba(245,166,35,.18) 0%,rgba(245,166,35,.06) 55%,rgba(245,166,35,0) 100%)}
.deck-shuffle-btn:hover{color:var(--gold);background:radial-gradient(ellipse at center,rgba(245,166,35,.38) 0%,rgba(245,166,35,.14) 55%,rgba(245,166,35,0) 100%)}
body.night-mode .deck-shuffle-btn{color:#FFD86B}
body.night-mode .deck-shuffle-btn:hover{color:#FFD86B;background:radial-gradient(ellipse at center,rgba(255,216,107,.42) 0%,rgba(255,216,107,.18) 55%,rgba(255,216,107,0) 100%)}

/* Piles (left = done, right = remaining)
   Container is sized to absorb the 3-card stack offset (max +6px) so neighbouring
   elements never get pushed sideways as the count changes. */
.pile{position:relative;width:64px;height:86px;flex-shrink:0;cursor:pointer;transition:transform .2s}
.pile:hover{transform:scale(1.04)}
.pile-cards{position:relative;width:56px;height:78px;margin:0 auto}
.pile-card{position:absolute;width:56px;height:78px;border-radius:10px;transition:all .3s ease}
/* Face-down card (remaining pile) */
.pile-card-down{background:linear-gradient(135deg,var(--navy),#1e3a62);border:1.5px solid rgba(255,255,255,.1);box-shadow:0 2px 8px rgba(43,76,126,.25)}
.pile-card-down::after{content:'S H';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;letter-spacing:2px;color:rgba(255,255,255,.15)}
/* Face-up card (done pile) */
.pile-card-up{background:var(--white);border:1.5px solid rgba(43,76,126,.1);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.pile-label{text-align:center;margin-top:6px;font-size:10px;font-weight:700;color:var(--sky);width:64px;line-height:1.2}
.pile-count{font-size:14px;font-weight:800;color:var(--navy);display:block;font-variant-numeric:tabular-nums;min-width:24px}

/* Active card area */
/* Portrait playing-card aspect (~5:7) — cap width so it doesn't go enormous on desktop */
.active-card-area{flex:1;min-width:0;perspective:1200px;max-width:340px;margin:0 auto}
.active-card{position:relative;width:100%;aspect-ratio:5/7;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d;cursor:pointer;touch-action:none}
.active-card.flipped{transform:rotateY(180deg)}
/* Slide animations */
.active-card.slide-in-right{animation:slideFromRight .32s cubic-bezier(.22,1,.36,1) both}
.active-card.slide-out-left{animation:slideToLeft .35s ease both}
@keyframes slideFromRight{0%{opacity:0;transform:translateX(36px)}100%{opacity:1;transform:translateX(0)}}
@keyframes slideToLeft{0%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(-80px) scale(.92)}}
.active-card.slide-in-left{animation:slideFromLeft .32s cubic-bezier(.22,1,.36,1) both}
@keyframes slideFromLeft{0%{opacity:0;transform:translateX(-36px)}100%{opacity:1;transform:translateX(0)}}

.card-face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 18px 36px;text-align:center;overflow:hidden}
.card-face-front{position:relative;background:linear-gradient(135deg,var(--navy) 0%,#1e3a62 60%,#2B4C7E 100%);color:var(--white);box-shadow:0 8px 32px rgba(43,76,126,.3);border:1px solid rgba(255,255,255,.08)}
.card-face-back{background:linear-gradient(135deg,#fff,#FAFBFF);color:var(--dark);transform:rotateY(180deg);box-shadow:0 8px 32px rgba(0,0,0,.1);border:2px solid var(--gold);pointer-events:none}
.active-card.flipped .card-face-back{pointer-events:auto}
/* Sheen */
.card-face::before{content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 45%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.18) 55%,transparent 60%);transform:translateX(-100%);transition:none;pointer-events:none;z-index:5}
.active-card.flipped .card-face::before{transform:translateX(500%);transition:transform .8s ease .1s}
/* Watermark — centred along the bottom of the card, fully inside the safe area */
.card-face::after{content:'STUDENT HUB · KERWIN SPRINGER';position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:7px;font-weight:800;letter-spacing:2px;text-transform:uppercase;opacity:.16;pointer-events:none;z-index:4;color:rgba(255,255,255,.85)}
.card-face-back::after{opacity:.18;color:var(--navy)}
.active-card.not-memorized .card-face-front{border:3px solid var(--gold)!important}
/* Tough indicator: gold section pill (uses real element, no ::before clash with sheen) */
.active-card.not-memorized .flashcard-section{background:var(--gold)!important;color:#fff!important}
.active-card.not-memorized .flashcard-section::before{content:'📌 ';margin-right:2px}
/* Typography */
.card-face-front h3{font-size:13px;font-weight:600;opacity:.7;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.formula-display{max-width:100%;overflow-x:auto;overflow-y:hidden}
.card-face-front .formula-display{font-size:20px}
.card-face-back h3{font-size:13px;font-weight:600;color:var(--gold);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.card-face-back .formula-display{font-size:20px;color:var(--navy)}
.flashcard-hint{font-size:12px;opacity:.5;margin-top:14px;font-weight:600}
.flashcard-section{position:absolute;top:10px;right:10px;font-size:10px;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.15);max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.card-face-back .flashcard-section{background:rgba(43,76,126,.06);color:var(--navy);position:absolute;top:10px;right:10px}
.card-index{position:absolute;top:10px;left:14px;font-size:10px;opacity:.45;font-weight:700;letter-spacing:1px;color:inherit}

/* Transpose buttons */
.trans-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.trans-btn{font-family:'Poppins',sans-serif;font-size:10px;font-weight:700;padding:4px 10px;border-radius:16px;border:1.5px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer;transition:all .2s;white-space:nowrap}
.trans-btn:hover,.trans-btn.active{background:var(--navy);color:var(--white)}
.trans-result{margin-top:8px;min-height:28px;transition:opacity .25s}
.card-face-front .trans-btn{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}
.card-face-front .trans-btn:hover,.card-face-front .trans-btn.active{background:rgba(255,255,255,.2);color:var(--white)}

/* Toggle switch */
.toggle-switch{position:relative;width:44px;height:24px;cursor:pointer;display:inline-block}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:#CBD5E1;border-radius:24px;transition:.3s}
.toggle-slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:var(--white);border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle-switch input:checked+.toggle-slider{background:var(--green)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px)}

/* Confidence row */
.card-counter{font-size:13px;font-weight:600;color:var(--sky)}
.related-section{margin:32px auto 0;width:100%;max-width:520px;display:none}
.related-section.has-cards{display:block}
.related-heading{font-size:11px;font-weight:800;color:var(--sky);text-align:center;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.related-cards-row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 12px 8px;width:100%;justify-content:flex-start;flex-wrap:wrap;justify-content:center}
.related-card-chip{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:18px;border:1.5px solid rgba(43,76,126,.2);background:rgba(255,255,255,.7);font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap;cursor:pointer;transition:.2s;backdrop-filter:blur(8px)}
.related-card-chip:hover{border-color:var(--gold);background:#fff;transform:translateY(-1px);box-shadow:0 2px 8px rgba(43,76,126,.15)}
.confidence-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.conf-btn{padding:8px 14px;border-radius:10px;border:2px solid;font-family:'Poppins',sans-serif;font-weight:600;font-size:12px;cursor:pointer;transition:.2s}
.conf-btn.again{border-color:var(--red);color:var(--red);background:rgba(239,68,68,.08)}
.conf-btn.hard{border-color:var(--orange);color:var(--orange);background:rgba(245,158,11,.08)}
.conf-btn.good{border-color:var(--green);color:var(--green);background:rgba(16,185,129,.08)}
.conf-btn.easy{border-color:var(--blue);color:var(--blue);background:rgba(59,130,246,.08)}
.conf-btn:hover{transform:translateY(-1px)}
.conf-btn.again:hover{background:var(--red);color:#fff}
.conf-btn.hard:hover{background:var(--orange);color:#fff}
.conf-btn.good:hover{background:var(--green);color:#fff}
.conf-btn.easy:hover{background:var(--blue);color:#fff}

/* Restart button */
.restart-strip{text-align:center;margin-top:10px}
.restart-strip button{background:none;border:none;font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;color:var(--sky);cursor:pointer;padding:6px 12px;border-radius:8px;transition:.2s}
.restart-strip button:hover{background:rgba(43,76,126,.06);color:var(--navy)}

/* Section selector */
.section-tabs{display:flex;gap:6px;padding:8px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.section-tabs::-webkit-scrollbar{display:none}
.section-tab{padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;border:none;cursor:pointer;transition:.2s;font-family:'Poppins',sans-serif;background:rgba(43,76,126,.06);color:var(--sky)}
.section-tab.active{background:var(--navy);color:var(--white)}

/* MCQ */
.mcq-card{background:var(--white);border-radius:16px;box-shadow:var(--shadow-sm);padding:24px;max-width:500px;margin:0 auto;width:100%}
.mcq-card h3{font-size:14px;font-weight:600;color:var(--sky);margin-bottom:8px}
.mcq-question{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:20px;line-height:1.5}
.mcq-option{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:8px;border-radius:12px;border:2px solid rgba(43,76,126,.1);cursor:pointer;transition:all .2s;font-size:14px;font-weight:500}
.mcq-option:hover{border-color:var(--navy);background:rgba(43,76,126,.03)}
.mcq-option.selected{border-color:var(--navy);background:rgba(43,76,126,.06)}
.mcq-option.correct{border-color:var(--green);background:rgba(16,185,129,.08);color:var(--green)}
.mcq-option.wrong{border-color:var(--red);background:rgba(239,68,68,.08);color:var(--red)}
.mcq-option .letter{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;background:rgba(43,76,126,.08);flex-shrink:0}
.mcq-option.correct .letter{background:var(--green);color:#fff}
.mcq-option.wrong .letter{background:var(--red);color:#fff}
.mcq-explanation{margin-top:16px;padding:16px;border-radius:12px;background:rgba(43,76,126,.04);font-size:13px;line-height:1.6;color:var(--dark)}
.mcq-explanation .step-row{display:flex;gap:8px;margin-bottom:6px;align-items:baseline}
.mcq-explanation .step-num{font-weight:700;color:var(--navy);font-size:12px;flex-shrink:0}

/* Repository */
.repo-search{padding:0 16px;margin-bottom:12px}
.repo-search input{width:100%;padding:12px 16px 12px 40px;border:2px solid rgba(43,76,126,.1);border-radius:12px;font-family:'Poppins',sans-serif;font-size:14px;outline:none;transition:.2s;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B8AAD' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center/18px}
.repo-search input:focus{border-color:var(--gold)}
.repo-grid{display:flex;flex-direction:column;gap:10px}
.repo-grid.visual{gap:18px}
.repo-viewseg{display:flex;gap:4px;background:rgba(43,76,126,.08);border-radius:999px;padding:3px;flex-shrink:0}
.repo-viewseg button{font-family:inherit;font-size:12px;font-weight:700;border:0;background:transparent;color:var(--sky);border-radius:999px;padding:6px 12px;cursor:pointer}
.repo-viewseg button.on{background:var(--navy);color:#fff}
.repo-search{display:flex;gap:10px;align-items:center}
.repo-search input{flex:1;min-width:0}
.viz-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:999px;background:rgba(14,165,164,.12);color:#0b7a76;margin-left:6px;vertical-align:middle}
.preview-card.has-viz{max-width:760px;text-align:left;padding:18px}
.preview-card.has-viz .fv-card{margin-bottom:14px}
.preview-card.has-viz .formula-display,.preview-card.has-viz #previewName,.preview-card.has-viz #previewSection{display:none}
@media(max-width:640px){.preview-overlay{padding:10px;align-items:flex-start;overflow:auto}.preview-card.has-viz{padding:12px}}
.repo-formula-card{background:var(--white);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:14px;transition:.2s;cursor:pointer}
.repo-formula-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.repo-formula-card:active{transform:scale(.98)}
.repo-formula-icon{font-size:24px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;flex-shrink:0}
.repo-formula-name{font-size:14px;font-weight:600;color:var(--navy)}
.repo-formula-eq{font-size:13px;color:var(--sky);margin-top:2px}
.repo-formula-section{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.5px}

/* Encouragement toast */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);padding:12px 24px;border-radius:14px;font-size:14px;font-weight:700;z-index:1000;transition:transform .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none;text-align:center;max-width:90%}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast-success{background:linear-gradient(135deg,var(--green),#059669);color:#fff;box-shadow:0 4px 20px rgba(16,185,129,.4)}
.toast-streak{background:linear-gradient(135deg,var(--gold),#D97706);color:#fff;box-shadow:0 4px 20px rgba(245,166,35,.4)}
.toast-info{background:linear-gradient(135deg,var(--navy),#1e3a62);color:#fff;box-shadow:0 4px 20px rgba(43,76,126,.4)}
.toast-encourage{background:linear-gradient(135deg,var(--purple),#7C3AED);color:#fff;box-shadow:0 4px 20px rgba(139,92,246,.4)}

/* Completion / results */
.results-card{text-align:center;max-width:420px;margin:0 auto;width:100%}
.results-card .big-emoji{font-size:64px;margin-bottom:16px}
.results-card h2{font-size:24px;font-weight:800;color:var(--navy);margin-bottom:4px}
.results-card .score-text{font-size:18px;font-weight:700;margin:8px 0}
.results-card .stats-row{display:flex;justify-content:center;gap:24px;margin:16px 0}
.results-card .stats-row div{text-align:center}
.results-card .stats-row .label{font-size:11px;color:var(--sky);font-weight:600}
.results-card .stats-row .value{font-size:22px;font-weight:800;color:var(--navy)}

/* Section progress on home */
.section-progress{margin:20px 16px 0;max-width:500px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;gap:8px}
/* === Concept A — Hero stacked deck === */
.hero-deck{position:relative;width:220px;height:300px;margin:12px auto 22px;cursor:pointer}
.hero-deck .hd-card{position:absolute;inset:0;border-radius:16px;box-shadow:0 18px 36px rgba(30,58,95,.14),0 4px 12px rgba(30,58,95,.08);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .4s;overflow:hidden}
.hero-deck .hd-back-left{background:#fff;border:1px solid rgba(43,76,126,.12);transform:rotate(-11deg) translate(-26px,10px) scale(.94)}
.hero-deck .hd-back-left::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--gold)}
.hero-deck .hd-back-right{background:#fff;border:1px solid rgba(43,76,126,.12);transform:rotate(11deg) translate(26px,10px) scale(.94)}
.hero-deck .hd-back-right::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--green)}
.hero-deck .hd-front{background:linear-gradient(135deg,var(--navy) 0%,#1e3a62 60%,var(--navy) 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;border:1px solid rgba(255,255,255,.08)}
.hero-deck .hd-front::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:#FFD86B}
.hero-deck .hd-front::after{content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 45%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.18) 55%,transparent 60%);transform:translateX(-100%);pointer-events:none}
.hero-deck:hover .hd-front::after{transform:translateX(350%);transition:transform .9s ease .1s}
.hero-deck .hd-section{font-size:10px;font-weight:700;color:#FFD86B;letter-spacing:2.4px;margin-bottom:20px;text-transform:uppercase}
.hero-deck .hd-formula{font-family:'Georgia','Times New Roman',serif;font-style:italic;font-size:42px;margin-bottom:10px;line-height:1}
.hero-deck .hd-name{font-size:11px;color:#BFDFFF;opacity:.85;font-weight:500}
.hero-deck .hd-wm{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:7px;font-weight:800;letter-spacing:2.4px;color:rgba(255,255,255,.2)}
.hero-deck:hover .hd-front{transform:translateY(-6px);box-shadow:0 28px 54px rgba(30,58,95,.26)}
.hero-deck:hover .hd-back-left{transform:rotate(-16deg) translate(-44px,14px) scale(.94)}
.hero-deck:hover .hd-back-right{transform:rotate(16deg) translate(44px,14px) scale(.94)}
.hero-deck-hint{text-align:center;font-size:11px;color:var(--sky);font-weight:600;margin-top:2px;margin-bottom:10px;opacity:0;transition:opacity .25s;letter-spacing:.2px;position:relative;z-index:1}
.hero-deck:hover ~ .hero-deck-hint,.hero-deck:active ~ .hero-deck-hint{opacity:1}

.section-toggle{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 10px;background:transparent;border:1px solid rgba(43,76,126,.18);border-radius:14px;font-size:11px;font-weight:600;color:var(--sky);cursor:pointer;transition:background .2s,color .2s,border-color .2s;font-family:inherit;letter-spacing:.2px}
.section-toggle:hover{background:rgba(43,76,126,.06);color:var(--navy);border-color:rgba(43,76,126,.35)}
.section-toggle-chev{display:inline-block;font-size:10px;transition:transform .3s ease}
.section-toggle[aria-expanded="true"] .section-toggle-chev{transform:rotate(180deg)}
.section-progress-collapsed{display:none !important}
.section-prog-row{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600}
.section-prog-row .sec-name{width:90px;color:var(--navy);text-align:right}
.section-prog-row .prog-bar{flex:1;height:8px;background:rgba(43,76,126,.08);border-radius:4px;overflow:hidden}
.section-prog-row .prog-fill{height:100%;border-radius:4px;transition:width .6s ease}
.section-prog-row .sec-pct{width:36px;color:var(--sky);font-size:11px}

/* Settings / reset */
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(43,76,126,.06)}
.settings-row:last-child{border:none}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:500;padding:20px}
.modal-overlay.show{display:flex}
.modal-box{background:var(--white);border-radius:20px;padding:32px;max-width:360px;width:100%;text-align:center;box-shadow:var(--shadow-lg)}
.modal-box h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:8px}
.modal-box p{font-size:13px;color:var(--sky);margin-bottom:20px;line-height:1.5}
.modal-btns{display:flex;gap:10px;justify-content:center}

/* Frequency badge */
.freq-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;letter-spacing:.3px;white-space:nowrap}
.freq-5{background:#FEE2E2;color:#DC2626}
.freq-4{background:#FEF3C7;color:#D97706}
.freq-3{background:#DBEAFE;color:#2563EB}
.freq-2{background:#EDE9FE;color:#7C3AED}
.freq-1{background:#F1F5F9;color:#64748B}
/* On dark card faces */
.card-face-front .freq-badge{background:rgba(255,255,255,.15);color:rgba(255,255,255,.9)}

/* Formula preview modal */
.preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:600;padding:20px}
.preview-overlay.show{display:flex}
.preview-card{background:var(--white);border-radius:24px;padding:32px 28px;max-width:400px;width:100%;text-align:center;box-shadow:var(--shadow-lg);position:relative;animation:springSlide .4s ease both}
.preview-card .close-preview{position:absolute;top:12px;right:12px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--sky);padding:4px 8px;border-radius:8px;transition:.2s}
.preview-card .close-preview:hover{background:rgba(43,76,126,.08)}
.preview-card .formula-display{font-size:22px;margin:16px 0}
.preview-card .preview-vars{font-size:12px;color:var(--sky);line-height:1.5;margin-top:12px}
.preview-card .preview-freq{margin-top:12px}
.preview-card .preview-unit{font-size:12px;color:var(--sky);margin-top:8px}

/* KaTeX overrides */
.katex{font-size:1.1em !important}
.formula-display .katex{font-size:1.3em !important}
.repo-formula-eq .katex{font-size:1em !important}
.mcq-option .katex{font-size:1em !important}

/* Animations */
@keyframes springSlide{0%{opacity:0;transform:translateY(20px) scale(.96)}60%{transform:translateY(-4px) scale(1.01)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.anim-spring{animation:springSlide .5s ease both}
.anim-fade{animation:fadeIn .3s ease both}

/* Zoom controls */
.zoom-reset-pill{display:inline-flex;gap:4px;align-items:center;border:none;cursor:pointer;font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;background:rgba(43,76,126,.12);color:var(--navy);transition:background .2s,transform .2s;animation:zoomPillIn .3s ease both}
.zoom-reset-pill:hover{background:rgba(43,76,126,.22)}
.zoom-reset-pill:active{transform:scale(.94)}
.zoom-reset-pill svg{width:13px;height:13px;flex-shrink:0}
body.night-mode .zoom-reset-pill{background:rgba(245,166,35,.18);color:#F5A623}
body.night-mode .zoom-reset-pill:hover{background:rgba(245,166,35,.3)}
@keyframes zoomPillIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.zoom-btn{width:36px;height:36px;border:none;border-radius:10px;background:transparent;font-size:18px;font-weight:700;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;font-family:'Poppins',sans-serif}
.zoom-btn:hover{background:rgba(43,76,126,.08)}
.zoom-btn:active{background:rgba(43,76,126,.15)}
.zoom-btn.reset{font-size:11px;font-weight:700;padding:0 6px;width:auto;min-width:44px}
.zoom-level{font-size:11px;font-weight:700;color:var(--sky);min-width:38px;text-align:center;user-select:none}
.zoom-divider{width:1px;height:20px;background:rgba(43,76,126,.12)}

/* Responsive */
@media(min-width:640px){
  .scroll-area{padding:24px;padding-bottom:100px}
  .card-face{min-height:440px}
  .home-hero h1{font-size:36px}
  .flashcard-face{min-height:280px;padding:32px}
}

/* Safe-area insets (notch + home-indicator) for PWA standalone mode */
.top-bar{padding-top:calc(12px + env(safe-area-inset-top, 0px))}
.scroll-area{padding-bottom:calc(100px + env(safe-area-inset-bottom, 0px))}
.kairu-egg{bottom:calc(12px + env(safe-area-inset-bottom, 0px));left:calc(12px + env(safe-area-inset-left, 0px))}
.kairu-tip{bottom:calc(76px + env(safe-area-inset-bottom, 0px));left:calc(14px + env(safe-area-inset-left, 0px))}

/* Bigger tap target on top-bar back button (Apple HIG: 44×44px) */
.back-btn{font-size:24px;padding:8px 14px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* Card faces — disable text selection so dragging never highlights formulas */
.card-face,.card-face *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* (Scribbler handle is now fixed-positioned and tracks --panel-w; see scribbler block below.) */

/* ============================================================
   MOBILE (≤ 768px) — phone & narrow tablet portrait layout
   Uses CSS GRID for the deck-row so the card sits on its own row
   and the four nav buttons line up evenly on the row below.
   `!important` is used where the desktop flex base styles would otherwise win.
   ============================================================ */
@media(max-width:768px){
  /* Tough-in-deck pill: its own line above the icon row */
  .stats-bar{flex-direction:column;align-items:stretch;gap:4px;padding:6px 10px;min-height:0}
  .stats-bar > div:first-child{justify-content:flex-start}
  .stats-bar > div:last-child{justify-content:flex-end}

  /* === DECK LAYOUT (mobile): two-row CSS Grid ===
     Row 1 spans all 4 columns and holds the card.
     Row 2 has 4 equal columns: Start | Prev | Next | End. */
  .deck-layout{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-template-rows:auto auto;
    grid-template-areas:
      "card card card card"
      "start prev next end";
    column-gap:6px;
    row-gap:14px;
    width:100%;
    max-width:none !important;
    padding:0 6px;
    align-items:center;
    justify-items:center;
  }
  .deck-layout > .active-card-area{
    grid-area:card !important;
    width:100% !important;
    max-width:340px !important;
    margin:0 auto !important;
    flex:none !important;
  }
  .active-card{aspect-ratio:5/7;max-width:340px;margin:0 auto;width:100%}

  /* The four nav buttons */
  .deck-layout > #restartBtn{grid-area:start !important}
  .deck-layout > #donePile  {grid-area:prev  !important}
  .deck-layout > #remainPile{grid-area:next  !important}
  .deck-layout > #endBtn    {grid-area:end   !important}

  /* Keep the visual pile-card stack — it gives the deck its physical feel.
     Just shrink it to fit the button cell. */
  .pile .pile-cards{
    display:block !important;
    position:relative !important;
    width:32px !important;
    height:44px !important;
    margin:0 auto 2px !important;
    flex-shrink:0;
  }
  .pile .pile-cards .pile-card{
    width:32px !important;
    height:44px !important;
    border-radius:6px !important;
  }

  /* Style ALL four nav children as identical button-cells */
  .deck-layout > #restartBtn,
  .deck-layout > #donePile,
  .deck-layout > #remainPile,
  .deck-layout > #endBtn{
    width:100% !important;
    height:64px !important;
    max-width:none !important;
    padding:8px 4px !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    border-radius:14px !important;
    border:none !important;
    background:rgba(43,76,126,.07) !important;
    color:var(--navy) !important;
    font-family:'Poppins',sans-serif !important;
    font-weight:700 !important;
    cursor:pointer !important;
    transition:background .2s ease,transform .15s ease !important;
  }
  .deck-layout > #restartBtn:active,
  .deck-layout > #donePile:active,
  .deck-layout > #remainPile:active,
  .deck-layout > #endBtn:active{
    transform:scale(.96) !important;
    background:rgba(43,76,126,.16) !important;
  }
  body.night-mode .deck-layout > #restartBtn,
  body.night-mode .deck-layout > #donePile,
  body.night-mode .deck-layout > #remainPile,
  body.night-mode .deck-layout > #endBtn{
    background:rgba(255,255,255,.06) !important;
    color:#E5E9F2 !important;
  }

  /* Start / End: keep their existing icon + label spans */
  .deck-layout > #restartBtn .restart-icon,
  .deck-layout > #endBtn .restart-icon{font-size:20px;line-height:1}
  .deck-layout > #restartBtn .restart-label,
  .deck-layout > #endBtn .restart-label{font-size:9px;letter-spacing:1px;text-transform:uppercase;opacity:.85}

  /* Pile labels sit directly under the mini pile-card stack */
  .pile-label{margin:2px 0 0 !important;text-align:center;font-size:9px;color:inherit;width:auto;letter-spacing:.5px;text-transform:uppercase;opacity:.85;line-height:1.2;font-weight:700}
  .pile-count{font-size:11px;font-weight:800;display:inline;min-width:0;margin-right:2px}

  /* Empty-pile placeholder (dashed outline) — scale to the shrunk mini-stack */
  .pile-cards .pile-card[style*="dashed"]{width:32px !important;height:44px !important;border-radius:6px !important}

  /* Card text — shrink long names, clamp variables */
  .card-face-front .formula-display,
  .card-face-back .formula-display{font-size:18px}
  .card-face-front h3,
  .card-face-back h3{font-size:11px}
  .flashcard-section{font-size:9px;padding:3px 8px;max-width:120px}
  .flashcard-hint{font-size:11px;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

  /* Related cards tighter on phone */
  .related-section{margin-top:20px}
  .related-heading{font-size:10px;margin-bottom:6px}
  .related-card-chip{padding:6px 10px;font-size:11px}

  .tough-row{margin-top:14px}
}

/* ============================================================
   DESKTOP (≥ 900px) — embellish & scale up, same layout
   ============================================================ */
@media(min-width:900px){
  /* Scale up the whole deck row */
  .deck-layout{max-width:820px;gap:14px}

  /* Bigger active card */
  .active-card-area{max-width:460px}
  .card-face{min-height:500px;padding:56px 28px 44px;border-radius:24px}
  .card-face-front h3,.card-face-back h3{font-size:15px;letter-spacing:1.5px}
  .card-face-front .formula-display,.card-face-back .formula-display{font-size:26px}
  .flashcard-hint{font-size:13px;margin-top:18px}
  .flashcard-section{font-size:11px;padding:5px 14px;top:14px;right:14px}
  .card-index{font-size:11px;top:14px;left:18px}
  .card-face::after{font-size:8px;bottom:14px;letter-spacing:2.5px}

  /* Bigger piles */
  .pile{width:82px;height:110px}
  .pile-cards{width:72px;height:100px}
  .pile-card{width:72px;height:100px;border-radius:13px}
  .pile-label{width:82px;font-size:11px;margin-top:8px}
  .pile-count{font-size:16px}

  /* Restart / End buttons */
  .deck-restart-btn{width:68px;height:110px;border-radius:16px}
  .deck-restart-btn .restart-icon{font-size:24px}
  .deck-restart-btn .restart-label{font-size:10px;letter-spacing:1.5px}

  /* Subtle ambient glow behind active card */
  .active-card-area::before{
    content:'';position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);
    width:540px;height:640px;
    background:radial-gradient(ellipse at center,rgba(43,76,126,.08) 0%,rgba(43,76,126,.03) 40%,transparent 70%);
    border-radius:50%;pointer-events:none;z-index:-1;
  }
  .active-card-area{position:relative}
  body.night-mode .active-card-area::before{
    background:radial-gradient(ellipse at center,rgba(191,223,255,.06) 0%,rgba(191,223,255,.02) 40%,transparent 70%);
  }

  /* Bigger tough button */
  .tough-btn{padding:10px 24px;font-size:13px;border-radius:24px}
  .tough-row{margin-top:22px}

  /* Related cards row — wider, bigger chips */
  .related-section{max-width:680px;margin-top:36px}
  .related-heading{font-size:12px;margin-bottom:12px}
  .related-card-chip{padding:10px 18px;font-size:13px;border-radius:20px}

  /* Confidence row — bigger buttons */
  .confidence-row{gap:10px;margin-top:18px}
  .conf-btn{padding:10px 18px;font-size:13px;border-radius:12px}

  /* Stats bar — slightly more breathing room */
  .stats-bar{padding:10px 20px}
  .stat-pill{font-size:13px;padding:5px 12px}

  /* Card counter */
  .card-counter{font-size:14px}

  /* Keyboard hints bar — desktop only */
  .kbd-hints{
    display:flex;gap:24px;justify-content:center;align-items:center;
    margin-top:32px;padding:12px 20px;
    border-radius:16px;
    background:rgba(255,255,255,.5);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(43,76,126,.06);
  }
  .kbd-hint{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sky);font-weight:600}
  .kbd-key{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:28px;height:26px;padding:0 8px;
    border-radius:6px;
    background:#F4F7FD;border:1.5px solid rgba(43,76,126,.15);
    font-size:11px;font-weight:700;color:var(--navy);
    font-family:'Poppins',sans-serif;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
  }
  body.night-mode .kbd-hints{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)}
  body.night-mode .kbd-key{background:#172036;border-color:rgba(255,255,255,.12);color:#E5E9F2}
  body.night-mode .kbd-hint{color:#8FA8C9}

  /* Transpose buttons — bigger on desktop */
  .trans-btn{font-size:11px;padding:5px 14px}
}

/* Hide keyboard hints on mobile/tablet */
@media(max-width:899px){
  .kbd-hints{display:none}
}

/* === Night mode === */
body.night-mode{background:transparent;color:#E5E9F2}
html.night-mode,html:has(body.night-mode){background:linear-gradient(135deg,#0B1220 0%,#13182A 100%);background-attachment:fixed}
body.night-mode .top-bar{background:rgba(15,21,40,.88);border-bottom-color:rgba(255,255,255,.06)}
body.night-mode .top-bar h2{color:#E5E9F2}
body.night-mode .back-btn{color:#E5E9F2}
body.night-mode .stats-bar{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.06)}
body.night-mode .stat-pill{background:rgba(255,255,255,.06);color:#E5E9F2}
body.night-mode .stat-pill .val{color:#FFD86B}
body.night-mode .home-hero h1{color:#E8EEFF}
body.night-mode .home-hero .subtitle{color:#8FA8C9}
body.night-mode .mode-grid{border-top-color:rgba(255,255,255,.1)}
body.night-mode .mode-card{background:transparent;color:#E5E9F2;border-bottom-color:rgba(255,255,255,.08)}
body.night-mode .mode-card h3{color:#E8EEFF}
body.night-mode .mode-card p{color:#8FA8C9}
body.night-mode .mode-card:hover{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.08)}
body.night-mode .mode-card::after{color:#8FA8C9}
body.night-mode .mode-card:hover::after{color:#FFD86B}
body.night-mode .mode-card.primary{background:linear-gradient(90deg,rgba(255,216,107,.08),transparent)}
body.night-mode .start-badge{background:rgba(255,216,107,.15);color:#FFD86B}
/* Concept A hero deck — night mode */
body.night-mode .hero-deck .hd-back-left,
body.night-mode .hero-deck .hd-back-right{background:#172036;border-color:rgba(255,255,255,.1)}
body.night-mode .hero-deck-hint{color:#8FA8C9}
body.night-mode .progress-outer{background:rgba(255,255,255,.08)}
body.night-mode .home-progress h4{color:#C8D4E8}
body.night-mode .section-prog-row .sec-name{color:#E5E9F2}
body.night-mode .section-prog-row .prog-bar{background:rgba(255,255,255,.08)}
body.night-mode .section-prog-row .sec-pct{color:#8FA8C9}
/* Section-breakdown toggle (home screen) */
body.night-mode .section-toggle{border-color:rgba(255,255,255,.18);color:#8FA8C9;background:rgba(255,255,255,.04)}
body.night-mode .section-toggle:hover{background:rgba(255,216,107,.08);color:#FFD86B;border-color:rgba(255,216,107,.4)}
/* Settings screen in night mode — make card heading text dark/readable on the white card,
   and darken the secondary blurb so it doesn't vanish on white. */
body.night-mode #settingsScreen .card{background:#172036;color:#E5E9F2;box-shadow:0 6px 20px rgba(0,0,0,.35)}
body.night-mode #settingsScreen .settings-row{border-bottom-color:rgba(255,255,255,.08)}
body.night-mode #settingsScreen .settings-row strong{color:#E8EEFF}
body.night-mode #settingsScreen .settings-row span{color:#8FA8C9}
body.night-mode #settingsScreen .settings-row span[style*="gold"]{color:#FFD86B !important}
body.night-mode #settingsScreen .copy-footer{color:#8FA8C9}
body.night-mode .home-time{color:#8FA8C9}
body.night-mode .card-face-back{background:linear-gradient(135deg,#1a2440,#222C4A);color:#E5E9F2;border-color:#F5A623}
body.night-mode .card-face-back .formula-display{color:#FFD86B}
body.night-mode .card-face-back h3{color:#FFD86B}
body.night-mode .card-face-back .flashcard-section{background:rgba(255,255,255,.1);color:#E5E9F2}
body.night-mode .repo-formula-card{background:#172036;color:#E5E9F2}
body.night-mode .repo-formula-name{color:#E8EEFF}
body.night-mode .repo-formula-eq{color:#8FA8C9}
body.night-mode .repo-search input{background:#172036;color:#E5E9F2;border-color:rgba(255,255,255,.08)}
body.night-mode .section-tab{background:rgba(255,255,255,.06);color:#8FA8C9}
body.night-mode .section-tab.active{background:#F5A623;color:#0B1220}
body.night-mode .mcq-card{background:#172036;color:#E5E9F2}
body.night-mode .mcq-question{color:#E8EEFF}
body.night-mode .mcq-option{background:#1a2440;color:#E5E9F2;border-color:rgba(255,255,255,.08)}
body.night-mode .mcq-option:hover{background:#202b4a}
body.night-mode .mcq-explanation{background:rgba(255,255,255,.04);color:#E5E9F2}
body.night-mode .related-card-chip{background:#172036;color:#E5E9F2;border-color:rgba(255,255,255,.1)}
body.night-mode .modal-box,body.night-mode .preview-card{background:#172036;color:#E5E9F2}
body.night-mode .preview-card .preview-vars,body.night-mode .preview-card .preview-unit{color:#8FA8C9}
body.night-mode .scribbler-panel{background:#172036;color:#E5E9F2;border-left-color:rgba(255,255,255,.1)}
body.night-mode .scribbler-toolbar{border-bottom-color:rgba(255,255,255,.08)}
body.night-mode .scribbler-btn{background:rgba(255,255,255,.08);color:#E5E9F2}

/* === Kairu easter egg ===
   A tiny hummingbird silhouette tucked into the bottom-left of the home hero.
   Subtle by day, glows in night mode. Click it to whisper a lore line. */
.kairu-egg{position:fixed;bottom:12px;left:12px;width:42px;height:42px;cursor:pointer;opacity:.42;transition:opacity .35s ease,filter .35s ease;z-index:80;pointer-events:auto;background:transparent;border:none;padding:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.12))}
.kairu-egg:hover{opacity:1;filter:drop-shadow(0 4px 10px rgba(43,76,126,.4))}
body.night-mode .kairu-egg{opacity:.55;filter:drop-shadow(0 0 6px rgba(107,166,255,.45))}
body.night-mode .kairu-egg:hover{opacity:1;filter:drop-shadow(0 0 14px rgba(107,166,255,.9))}
.kairu-svg{width:100%;height:100%;display:block;overflow:visible}

/* Orientation — default facing right. When turning around, flip horizontally. */
#kairuFace{transition:transform .5s cubic-bezier(.4,.2,.2,1)}
.kairu-egg.facing-left #kairuFace{transform:scaleX(-1)}

/* HOP — a double-bob-and-land with squash/stretch (slightly stronger, more charming) */
@keyframes kairuHopUp{
  0%{transform:translateY(0) scaleY(1) scaleX(1)}
  8%{transform:translateY(0) scaleY(.84) scaleX(1.12)}
  28%{transform:translateY(-11px) scaleY(1.1) scaleX(.94)}
  52%{transform:translateY(-14px) scaleY(1.04) scaleX(.98)}
  72%{transform:translateY(-3px) scaleY(.9) scaleX(1.08)}
  88%{transform:translateY(0) scaleY(1.02) scaleX(.98)}
  100%{transform:translateY(0) scaleY(1) scaleX(1)}
}
@keyframes kairuShadowHop{
  0%,100%{transform:scaleX(1);opacity:.18}
  30%,55%{transform:scaleX(.55);opacity:.08}
  72%{transform:scaleX(1.12);opacity:.22}
}

/* FLUTTER — wing-beats visible while body lifts and floats */
@keyframes kairuFlutter{
  0%  {transform:translateY(0) rotate(0deg)}
  20% {transform:translateY(-6px) rotate(-1.5deg)}
  40% {transform:translateY(-9px) rotate(1deg)}
  60% {transform:translateY(-8px) rotate(-.5deg)}
  80% {transform:translateY(-4px) rotate(.5deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
@keyframes kairuWingBeat{
  0%,100%{transform:rotate(0deg) scaleY(1)}
  25% {transform:rotate(-32deg) scaleY(.7)}
  50% {transform:rotate(10deg) scaleY(1.05)}
  75% {transform:rotate(-24deg) scaleY(.75)}
}
@keyframes kairuShadowFlutter{
  0%,100%{transform:scaleX(1);opacity:.18}
  40%,60%{transform:scaleX(.5);opacity:.06}
}

/* BLINK — tiny eye close every so often */
@keyframes kairuBlink{
  0%,92%,100%{transform:scaleY(1)}
  95%,99%{transform:scaleY(.08)}
}

#kairuBird{transform-origin:32px 50px;transform-box:fill-box}
#kairuWing{transform-origin:23px 34px;transform-box:fill-box}
#kairuEye{transform-origin:center;transform-box:fill-box}
#kairuShadow{transform-origin:32px 56px;transform-box:fill-box}

.kairu-egg.hop #kairuBird{animation:kairuHopUp 780ms cubic-bezier(.22,1,.36,1)}
.kairu-egg.hop #kairuShadow{animation:kairuShadowHop 780ms ease-in-out}
.kairu-egg.flutter #kairuBird{animation:kairuFlutter 1200ms cubic-bezier(.45,.05,.55,.95)}
.kairu-egg.flutter #kairuWing{animation:kairuWingBeat 170ms linear 7}
.kairu-egg.flutter #kairuShadow{animation:kairuShadowFlutter 1200ms ease-in-out}
/* blink animation lives on the face/eye independently and runs on a long cycle */
#kairuEye{animation:kairuBlink 5.5s ease-in-out infinite}

/* hover: small pick-me-up hop */
.kairu-egg:hover #kairuBird{animation:kairuHopUp 560ms ease-out}
.kairu-egg:hover #kairuShadow{animation:kairuShadowHop 560ms ease-in-out}
.kairu-tip{position:fixed;bottom:76px;left:14px;background:rgba(15,21,40,.94);color:#BFDFFF;padding:12px 16px;border-radius:14px;font-size:12px;font-weight:600;font-family:'Poppins',sans-serif;letter-spacing:.2px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;pointer-events:auto;z-index:81;max-width:300px;width:max-content;line-height:1.55;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;box-shadow:0 6px 20px rgba(0,0,0,.4);border:1px solid rgba(107,138,232,.35);font-style:italic;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.kairu-tip.show{opacity:1;transform:translateY(0)}
/* While hidden, the bubble must not catch the cursor or register hovers — otherwise
   it sits as an invisible hit-zone at its last position and the cursor "remembers"
   the old box when hovering nothing. */
.kairu-tip:not(.show){pointer-events:none;cursor:default}
.kairu-tip.dismissing{pointer-events:none}
.kairu-tip.grabbing{cursor:grabbing;transition:none;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.kairu-tip:active{cursor:grabbing}

/* === Kairu rebuke exit + return (triggered on 4 rapid taps) === */
@keyframes kairuRebukeExit{
  0%  {transform:translate(0,0) rotate(0);opacity:1}
  12% {transform:translate(-6px,-4px) rotate(-3deg)}
  28% {transform:translate(-18px,-2px) rotate(3deg)}
  44% {transform:translate(-34px,-6px) rotate(-5deg)}
  60% {transform:translate(-52px,-4px) rotate(5deg)}
  78% {transform:translate(-80px,-14px) rotate(-8deg);opacity:.75}
  100%{transform:translate(-200px,-60px) rotate(-18deg);opacity:0}
}
.kairu-egg.kairu-rebuke-exit{animation:kairuRebukeExit 1.4s ease-in forwards}

@keyframes kairuRebukeReturn{
  0%  {transform:translate(-180px,-50px) rotate(-12deg);opacity:0}
  30% {opacity:.6}
  65% {transform:translate(-18px,-4px) rotate(3deg);opacity:1}
  100%{transform:translate(0,0) rotate(0);opacity:1}
}
.kairu-egg.kairu-returning{animation:kairuRebukeReturn 1.1s cubic-bezier(.22,1,.36,1) forwards}

/* === Parchment overlay (Kairu lore easter egg) === */
.parchment-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:9800;padding:20px;animation:fadeIn .3s ease}
.parchment-overlay.show{display:flex}
.parchment{
  position:relative;
  background:#F4E9D2;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(138,111,62,.06) 0%, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(138,111,62,.08) 0%, transparent 35%),
    radial-gradient(circle at 50% 10%, rgba(138,111,62,.04) 0%, transparent 30%),
    radial-gradient(circle at 30% 90%, rgba(138,111,62,.05) 0%, transparent 40%);
  color:#3A2E1C;
  border-radius:6px;
  max-width:560px;width:100%;max-height:92vh;overflow-y:auto;
  padding:28px 32px 32px;
  font-family:Georgia,"Times New Roman",serif;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 2px #8A6F3E,
    0 0 0 4px #F4E9D2,
    0 0 0 5px #8A6F3E;
  transform-origin:top center;
  animation:parchmentOpen .7s cubic-bezier(.22,1,.36,1) both;
}
.parchment.closing{animation:parchmentClose .5s ease-in both}
@keyframes parchmentOpen{
  0%  {opacity:0;transform:perspective(900px) rotateX(-85deg) translateY(-40px)}
  40% {opacity:1}
  100%{opacity:1;transform:perspective(900px) rotateX(0) translateY(0)}
}
@keyframes parchmentClose{
  0%  {opacity:1;transform:perspective(900px) rotateX(0)}
  100%{opacity:0;transform:perspective(900px) rotateX(-85deg) translateY(-40px)}
}

/* Wax-seal close button */
.parchment-close{
  position:absolute;top:-14px;right:-14px;
  width:50px;height:50px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#D14335 0%,#9A1D13 55%,#6C110B 100%);
  border:2px solid #F4E9D2;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 2px 4px rgba(255,255,255,.25),inset 0 -3px 5px rgba(0,0,0,.25);
  color:#FFD86B;
  font-family:Georgia,serif;font-size:22px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  transition:transform .25s ease;
  letter-spacing:1px;
}
.parchment-close:hover{transform:scale(1.08) rotate(-6deg)}
.parchment-close:active{transform:scale(.95)}
.parchment-close::before{content:'K';text-shadow:0 1px 1px rgba(0,0,0,.3)}

.parchment-illustration{
  margin:0 auto 18px;
  max-width:420px;width:100%;
  border:2px solid #8A6F3E;
  border-radius:4px;
  overflow:hidden;
  aspect-ratio:11/7;
  background:#0B1220;
  box-shadow:inset 0 0 0 2px #F4E9D2;
}
.parchment-illustration svg{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}

.parchment-title{
  font-family:Georgia,serif;
  font-size:22px;font-weight:700;
  text-transform:uppercase;letter-spacing:3px;
  color:#3A2E1C;text-align:center;
  margin:12px 0 4px;
}
.parchment-subtitle{
  font-size:12px;font-style:italic;color:#7A6649;
  text-align:center;margin-bottom:18px;letter-spacing:.5px;
}
.parchment-body{font-size:15px;line-height:1.7;color:#3A2E1C}
.parchment-body p{margin:0 0 14px}
.parchment-body p:first-of-type::first-letter{
  font-size:46px;font-weight:700;
  float:left;line-height:.9;
  margin:4px 6px 0 0;
  color:#8A6F3E;
  font-family:Georgia,serif;
}
.parchment-body em{color:#5C4A2E;font-style:italic}
.parchment-body strong{color:#3A2E1C;font-weight:700}
.parchment-body .closing-line{text-align:center;font-style:italic;margin-top:20px;color:#5C4A2E;font-size:14px}
/* Student Hub logo seal below the final line of the Return story */
.parchment-body .sh-logo-seal{position:relative;text-align:center;margin-top:28px;padding:22px 12px 12px;border-top:1px solid rgba(90,70,40,.2)}
.parchment-body .sh-logo-halo{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:220px;height:120px;background:radial-gradient(ellipse at 50% 50%, rgba(255,215,0,.35) 0%, rgba(255,215,0,.15) 35%, rgba(255,215,0,0) 70%);filter:blur(6px);pointer-events:none;animation:shLogoGlow 3.2s ease-in-out infinite}
.parchment-body .sh-logo-img{position:relative;width:170px;max-width:70%;height:auto;display:inline-block;opacity:.95;filter:drop-shadow(0 2px 8px rgba(255,215,0,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.parchment-body .sh-logo-caption{position:relative;margin-top:8px;font-family:Georgia,'Times New Roman',serif;font-style:italic;color:#5C4A2E;font-size:13px}
@keyframes shLogoGlow{0%,100%{opacity:.55}50%{opacity:1}}

/* Memory scroll buttons on home footer */
.sh-memory-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:18px;
  background:rgba(138,111,62,.1);
  border:1.5px dashed rgba(138,111,62,.35);
  color:#8A6F3E;
  font-family:Georgia,serif;font-size:11px;font-weight:700;font-style:italic;
  letter-spacing:.5px;cursor:pointer;
  transition:all .2s ease;
  margin:3px 4px;
}
.sh-memory-btn:hover{background:rgba(138,111,62,.2);border-color:#8A6F3E;transform:translateY(-1px)}
body.night-mode .sh-memory-btn{background:rgba(255,216,107,.08);border-color:rgba(255,216,107,.3);color:#FFD86B}
body.night-mode .sh-memory-btn:hover{background:rgba(255,216,107,.18)}

/* Terms of Use — editorial layout */
.terms-doc{max-width:680px;margin:8px auto 24px;padding:0 8px;line-height:1.65;font-size:14px;color:var(--dark)}
body.night-mode .terms-doc{color:#E5E9F2}
.terms-header{display:flex;align-items:center;gap:16px;padding:22px 24px;background:linear-gradient(135deg,var(--navy),#1e3a62);border-radius:18px;color:#fff;margin-bottom:20px;box-shadow:0 6px 24px rgba(43,76,126,.25)}
.terms-logo{width:60px;height:60px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.terms-brand{font-size:20px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.terms-sub{font-size:12px;opacity:.85;font-weight:600}
.terms-section{display:flex;gap:16px;margin:18px 0;padding:16px 18px;background:rgba(255,255,255,.6);border-radius:14px;border-left:4px solid var(--gold);backdrop-filter:blur(6px)}
body.night-mode .terms-section{background:rgba(255,255,255,.04);border-left-color:#FFD86B}
.terms-num{font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;color:var(--gold);letter-spacing:1px;min-width:40px;line-height:1}
body.night-mode .terms-num{color:#FFD86B}
.terms-section h4{color:var(--navy);font-size:14px;font-weight:700;margin-bottom:6px;letter-spacing:.3px}
body.night-mode .terms-section h4{color:#E8EEFF}
.terms-agree{margin:24px auto 16px;padding:14px 18px;text-align:center;font-size:12px;color:var(--sky);font-style:italic;background:rgba(43,76,126,.05);border-radius:10px}
body.night-mode .terms-agree{background:rgba(255,255,255,.05);color:#8FA8C9}
.terms-footer{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px 0 8px;text-align:left;font-size:11px;color:var(--sky);opacity:.85}
.terms-footer-logo{width:28px;height:28px;object-fit:contain;opacity:.7}
body.night-mode .terms-footer{color:#8FA8C9}

/* Copyright footer */
.copy-footer{padding:16px 20px 24px;text-align:center;font-size:10px;font-weight:600;color:var(--sky);letter-spacing:.5px;opacity:.85;line-height:1.7}
.copy-footer .brand{color:var(--navy);font-weight:800}
.sh-link{color:var(--navy);text-decoration:none;font-weight:700;border-bottom:1px dotted rgba(43,76,126,.4)}
.sh-link:hover{color:var(--gold);border-bottom-color:var(--gold)}
body.night-mode .sh-link{color:#FFD86B;border-bottom-color:rgba(255,216,107,.4)}
body.night-mode .copy-footer{color:#5C7090}
body.night-mode .copy-footer .brand{color:#FFD86B}

/* Night-mode toggle in settings */
.night-icon{font-size:18px}

/* Home-screen "Study My Tough Cards" button — periodic gold sheen to catch the eye */
.tough-cards-btn{position:relative;overflow:hidden;border-color:var(--gold);color:var(--gold);background:rgba(245,166,35,.08)}
.tough-cards-btn:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.tough-cards-btn::after{content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-100%);pointer-events:none;animation:toughSheen 5.5s ease-in-out infinite;animation-delay:2s}
@keyframes toughSheen{
  0%,70%{transform:translateX(-120%)}
  85%,100%{transform:translateX(420%)}
}
body.night-mode .tough-cards-btn{background:rgba(255,216,107,.1);color:#FFD86B;border-color:#FFD86B}
body.night-mode .tough-cards-btn:hover{background:#FFD86B;color:#0B1220}

/* Tough-mark button under the card */
.tough-row{display:flex;justify-content:center;margin-top:18px}
.tough-btn{padding:8px 18px;border-radius:22px;border:1.5px solid rgba(43,76,126,.18);background:rgba(255,255,255,.7);color:var(--navy);font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;letter-spacing:.3px;cursor:pointer;transition:all .2s;backdrop-filter:blur(8px)}
.tough-btn:hover{border-color:var(--gold);background:#fff}
.tough-btn.is-tough{background:var(--gold);color:#fff;border-color:var(--gold);box-shadow:0 2px 10px rgba(245,166,35,.35)}
body.night-mode .tough-btn{background:rgba(255,255,255,.06);color:#E5E9F2;border-color:rgba(255,255,255,.14)}
body.night-mode .tough-btn.is-tough{background:#FFD86B;color:#0B1220;border-color:#FFD86B}

/* Focus ring (accessible keyboard nav) */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
body.night-mode :focus-visible{outline-color:#FFD86B}

/* Confetti flourish */
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:10000;overflow:hidden}
.confetti-piece{position:absolute;top:-20px;width:10px;height:14px;opacity:.95;will-change:transform}
@keyframes confettiFall{
  0%{transform:translate3d(0,-10vh,0) rotate(0deg)}
  100%{transform:translate3d(var(--cx,0px),110vh,0) rotate(var(--cr,720deg))}
}

/* Scribbler widget */
/* Scribbler — slide-out panel + always-visible gold handle on the right edge.
   Uses --panel-w on :root to drive both the panel's width and the handle's right offset
   so they animate together with no clipping. */
:root{--panel-w:0px}
#scribblerRoot{position:fixed;right:0;top:0;height:100vh;z-index:9500;pointer-events:none}
.scribbler-panel{position:absolute;right:0;top:0;height:100vh;width:var(--panel-w);background:#fff;border-left:2px solid rgba(43,76,126,.15);box-shadow:-2px 0 12px rgba(0,0,0,.18);pointer-events:auto;transition:width .45s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;overflow:hidden}
@media(max-width:600px){.scribbler-panel.open{width:92vw}}

/* Handle — fixed to the viewport, right-offset tracks the panel width via --panel-w.
   Gold accent + soft pulse so students actually notice it. */
.scribbler-handle{
  position:fixed;
  right:calc(var(--panel-w) + env(safe-area-inset-right, 0px));
  top:50%;margin-top:-48px;
  width:42px;height:96px;
  background:linear-gradient(135deg,var(--navy) 0%,#1e3a62 100%);
  color:#FFD86B;
  border:2px solid #FFD86B;border-right:none;
  border-radius:14px 0 0 14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;cursor:grab;
  z-index:9501;
  pointer-events:auto;
  box-shadow:-4px 4px 14px rgba(0,0,0,.22),inset 1px 0 0 rgba(255,255,255,.08);
  transition:right .45s cubic-bezier(.34,1.56,.64,1),transform .25s ease,box-shadow .35s ease;
  animation:scribblerPulse 4.5s ease-in-out infinite
}
.scribbler-handle:hover{transform:translateX(-2px) scale(1.05);box-shadow:-6px 4px 18px rgba(245,166,35,.45)}
.scribbler-handle:active{cursor:grabbing;transform:translateX(-1px) scale(.98)}
@keyframes scribblerPulse{
  0%,100%{box-shadow:-4px 4px 14px rgba(0,0,0,.22),inset 1px 0 0 rgba(255,255,255,.08)}
  50%   {box-shadow:-4px 4px 18px rgba(245,166,35,.55),inset 1px 0 0 rgba(255,255,255,.08)}
}
body.night-mode .scribbler-handle{background:linear-gradient(135deg,#172036 0%,#0B1220 100%)}
.scribbler-toolbar{display:flex;gap:8px;padding:12px;border-bottom:1px solid rgba(43,76,126,.1);flex-shrink:0}
.scribbler-btn{width:36px;height:36px;border:none;border-radius:8px;background:rgba(43,76,126,.08);color:var(--navy);cursor:pointer;font-size:16px;transition:.2s}
.scribbler-btn:hover{background:rgba(43,76,126,.15)}
.scribbler-btn.active{background:var(--navy);color:#fff}
#scribblerCanvas{flex:1;width:100%;background:#fff;cursor:crosshair;display:block}

/* Print styles */
#printRoot{display:none}
/* Print sheets — US Letter portrait. 6 cards (2 cols × 3 rows), front-only.
   Cards are meant to be printed, cut along the dashed outlines, and used as
   physical flashcards while the app provides the answers. */
.print-sheet-intro{
  margin:6mm 8mm 4mm;padding:3mm 4mm;
  border-left:3px solid #F5A623;
  font-family:Arial,sans-serif;font-size:9pt;color:#333;line-height:1.4;
  background:#FFFBEF;
}
.print-sheet-intro strong{color:#2B4C7E}
.print-page{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr 1fr;
  gap:5mm;
  padding:8mm;
  background:#fff;
  box-sizing:border-box;
  /* Sized via @page rules during print; flexible on screen */
  width:100%;
  min-height:calc(279.4mm - 16mm);
  page-break-after:always !important;
  break-after:page !important;
  break-inside:avoid;
  page-break-inside:avoid;
}
.print-page + .print-page{
  break-before:page !important;
  page-break-before:always !important;
}
.print-card{
  position:relative;
  border:1.5px dashed #2B4C7E;border-radius:5px;  /* dashed so it reads as "cut here" */
  padding:8mm 7mm 11mm;
  box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.5mm;
  font-family:Arial,sans-serif;
  background:#fff;
  overflow:hidden;
  break-inside:avoid;page-break-inside:avoid;
  min-height:0;
}
.print-card .pc-section{font-size:8.5pt;font-weight:700;color:#6B8AAD;text-transform:uppercase;letter-spacing:1.2px;text-align:center}
.print-card .pc-name{font-size:14pt;font-weight:800;color:#2B4C7E;text-align:center;line-height:1.2;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.print-card .pc-hint{font-size:8pt;color:#6B8AAD;font-style:italic;margin-top:1mm}
.print-card .pc-idx{position:absolute;top:4mm;left:5mm;font-size:8.5pt;font-weight:800;color:#bbb;letter-spacing:1px}
.print-card .pc-wm{position:absolute;bottom:3mm;left:0;right:0;text-align:center;font-size:6.5pt;font-weight:800;color:#bbb;letter-spacing:1.5px}
@media print{
  html,body{background:#fff !important;margin:0 !important;padding:0 !important}
  #app, #scribblerRoot, .confetti-layer, .kairu-egg, .kairu-tip{display:none !important}
  #printRoot{display:block !important;width:215.9mm}
  .print-page{width:215.9mm !important;min-height:auto !important;height:auto !important}
  .print-page:last-of-type{break-after:auto !important;page-break-after:auto !important}
  .print-sheet-intro{break-after:avoid;page-break-after:avoid}
  @page{size:letter portrait;margin:0}
}

/* Print-picker modal */
.print-picker{padding:22px 20px;max-width:360px;width:100%}
.print-picker h3{color:var(--navy);margin-bottom:6px}
.print-picker p{color:var(--sky);font-size:12px;margin-bottom:14px}
.print-picker .pp-options{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.print-picker .pp-option{padding:8px 14px;border-radius:18px;border:1.5px solid rgba(43,76,126,.2);background:#fff;font-size:12px;font-weight:600;color:var(--navy);cursor:pointer;transition:.2s}
.print-picker .pp-option.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.print-picker .pp-check{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:13px;color:var(--dark)}
.print-picker .pp-actions{display:flex;gap:8px;justify-content:flex-end}