/* VOKKEM — capture, learn, keep. Brand layer; learning and data flows unchanged. */
:root{--primary:#315cf5;--background:#f5f7ff;--surface:#fff;--text:#10182b;--secondary-text:#68738b;--border:#e2e7f3;--tint:#edf1ff;--success:#237a48;--error:#ba3945;--radius-card:22px;--radius-button:16px;--brand-gradient:linear-gradient(135deg,#168bff,#405dff 65%,#7150ed)}
html,body{background:#f5f7ff;color:var(--text)}
body{background:linear-gradient(155deg,#f9fbff,#f5f6fe 70%,#f1efff)}
body:has(#home:not([hidden])){background:radial-gradient(ellipse at 90% 15%,#eaf1ff,transparent 55%),#f7f8ff}
.app-header,body:has(#home:not([hidden])) .app-header{padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:18px}
.app-header .brand,body:has(#home:not([hidden])) .brand{color:var(--text);-webkit-text-fill-color:initial;gap:10px}
.brand>img:first-child{width:42px;height:42px;border-radius:12px}.brand .brand-wordmark{width:142px;height:auto;border-radius:0}
body:has(#home:not([hidden])) .brand img.brand-wordmark,.app-header .brand img.brand-wordmark{width:190px;height:auto;border-radius:0}
body:has(#home:not([hidden])) .brand>img:first-child,.app-header .brand>img:first-child{width:54px;height:54px;flex-shrink:0}
.brand-note{font-size:.66rem;letter-spacing:.13em;color:#76819a}
.brand-splash{background:radial-gradient(ellipse at 50% 38%,#e3edff,transparent 62%),#f5f7ff;color:var(--text)}
.brand-splash-content>img{width:132px;height:132px;border-radius:30px;box-shadow:0 16px 45px #4967c21b;margin-bottom:24px}
.brand-splash-name img{width:246px;height:50px;border-radius:0;margin:0 auto}.brand-splash-tagline{font-size:.72rem;color:#707b96;letter-spacing:.2em}
#home .home-hero{padding:12px 0 26px}.hero-story{grid-template-columns:minmax(0,1fr) 38%;gap:4px;margin-bottom:24px;min-height:205px}
.hero-illustration{max-height:230px;filter:none}
#home .hero-copy>.eyebrow{background:#e9efff;color:#4d63a6;border:1px solid #dce5ff;font-size:.75rem;padding:6px 10px;line-height:1.6}
#home .home-hero h1{color:#10182b;font-size:clamp(1.7rem,4.5vw,2.7rem);letter-spacing:-.05em;line-height:1.35;white-space:pre-line;text-wrap:balance;margin:12px 0}
#home .home-hero .sub{font-size:.84rem;line-height:1.7;color:var(--secondary-text)}
#intro-title{direction:inherit;unicode-bidi:plaintext}
.primary{background:#315cf5;color:#fff;box-shadow:0 3px 8px #315cf516}.primary:hover{background:#244edb}
.secondary,.quiet,.text-button{color:#3153c4}.secondary{border-color:#dfe5f6}.secondary:hover,.quiet:hover{background:#edf1ff}
#home-capture,#camera{background:var(--brand-gradient);border:1px solid #416af2;border-bottom:5px solid #2944c9;box-shadow:inset 0 1px 0 #ffffff55,0 6px 14px #3e63dc26;border-radius:18px;color:#fff}
#home .hero-action{max-width:360px;width:calc(100% - 20px);min-height:60px;font-size:.98rem}
#home-capture:active,#camera:active{transform:translateY(4px) scale(.985);box-shadow:inset 0 2px 4px #172b8f30,0 1px 2px #25339920;border-bottom-color:#2944c9}
.app-card,.deck-card,.review-row,dialog{border-color:var(--border);background:#fff;box-shadow:0 4px 16px #213a7605}
#home .review-summary{background:#fff;border-color:#e2e7f3;padding:20px;border-radius:24px}
#home .review-summary .eyebrow{color:#627095}.study-chart-icon{fill:#4663df}
#home-due .review-count{color:#315cf5}#home .review-summary h2{color:#10182b}
.learning-progress{background:#f0f3ff;border-radius:18px}.learning-progress strong{color:#172849}
.learning-ring{background:conic-gradient(#5371ff var(--progress),#e1e6f8 0)}.learning-ring>span{background:#f4f6ff;color:#546bde}
#home-review{background:#edf1ff;color:#3b59c9;border:1px solid #e6ebfb}#home-review::before{content:none}
#home .section-title{margin:26px 0 14px}#home .section-title h2{color:#152139;font-size:1.25rem}
#home-decks{scrollbar-color:#c5cff1 transparent;scroll-snap-type:none}
#home-decks .deck-card:nth-child(n){background:#fff;border-color:#e2e7f3;box-shadow:none}
#home-decks .deck-symbol{background:#eef3ff}#home-decks .deck-symbol::before{background:linear-gradient(90deg,#3864d4 10%,#a5bbff 12%,#6f8def);border-color:#8fa5ea;border-bottom-color:#d8def1;box-shadow:2px 3px 3px #30487816}
#home-decks .deck-symbol::after{background:#f0f3ff}
#home-decks .deck-card:nth-child(even) .deck-symbol{background:#f2eeff}#home-decks .deck-card:nth-child(even) .deck-symbol::before{background:linear-gradient(90deg,#735ac6 10%,#c2b0f2 12%,#9b82df);border-color:#b49fe5}
#home-decks .deck-rename{background:#f3f5fb;color:#72809a}
.deck-open .deck-symbol{background:#edf1ff;color:#4165df}.deck-progress progress{accent-color:#637af0}
.bottom-nav{background:#fff;border-top:1px solid #e5e9f5;box-shadow:0 -5px 22px #24387704}
.bottom-nav button{color:#79839a;-webkit-tap-highlight-color:transparent}
.bottom-nav button.active:not(.capture-tab){background:#edf1ff;color:#315cf5}
.bottom-nav .capture-tab,.bottom-nav .capture-tab.active{color:#3d5fdf;background:transparent}
.bottom-nav .capture-tab>span:last-child{color:#3d5fdf}
.bottom-nav .capture-tab [data-icon]{background:var(--brand-gradient);border-color:#4964e3;box-shadow:inset 0 2px 1px #ffffff45,inset 0 -5px 0 #3045c6,0 7px 14px #445ad82e;color:#fff}
.bottom-nav .capture-tab:active [data-icon]{transform:translateY(5px) scale(.96);box-shadow:inset 0 2px 3px #23318c45,inset 0 -1px 0 #3045c6,0 1px 2px #34458c25}
.focus-frame{background:#eff4ff;border-color:#8fb5ff;color:#3978fa;border-radius:24px;position:relative}
.focus-frame::after{content:'✦';position:absolute;right:-8px;top:-12px;font-size:28px;color:#ffbd28;text-shadow:0 2px 0 #fff}
.capture-card h2{color:#17223d}.capture-card{background:linear-gradient(155deg,#fff,#f5f8ff);border-color:#dfe7f9}
.photo-preview-frame{background:#edf1fc}.scan-pulse{border-color:#e4e9fb;border-top-color:#4270ff}
.mode{background:#fff;border-color:#e4e8f5}.mode:hover,.mode:active{background:#eff3ff;border-color:#a5b8fb}.mode strong{color:#192848}.mode small{color:#727e98}
.study-modes .mode:nth-of-type(2){background:#f2f6ff}.study-modes .mode:nth-of-type(3){background:#f7f3ff}.study-modes .mode:nth-of-type(4){background:#f1f7fc}
.flashcard{background:linear-gradient(160deg,#fff,#fbfaff);border:1px solid #e1ddf7;border-radius:26px;box-shadow:0 12px 28px #6952bb0e}
.flashcard .prompt,.question .prompt{color:#101a31}.quiz-panel{border-color:#e3e7f5}.quiz-top progress,progress{accent-color:#6176ef}
.answer{border-color:#dfe5f7;background:#fff}.answer:hover{background:#f1f4ff}.letter-tile{border-color:#d9e0f5;color:#294aa7;background:#fff}.chosen-letter{background:#eef2ff;border-color:#aabbfa}
.letter-answer{background:#f5f6ff;border-color:#d8dff3}.letter-tile.used{background:#f0f2fa}
.match-card{border-color:#e1e5f4;background:#fff}.match-card.selected{background:#edf1ff;border-color:#6883f7}
#words .recent-card{background:linear-gradient(125deg,#f0f5ff,#f6f1ff);border:1px solid #e4e6f9;box-shadow:none}#words .recent-card::before{color:#c8cef7}#words .recent-card h3{color:#4b61bd;background:#e6eaff}.recent-sentence{color:#253455}
.settings-brand{color:#10182b;letter-spacing:.08em}.settings-brand span{color:#78829a;font-size:.72rem;letter-spacing:.14em}
.launch-state{background:#eff3ff;color:#334881}.launch-spinner{border-top-color:#4969ed}
.count-badge{background:#edf1ff;color:#4362d4}.stats{background:#f0f3ff}.stats strong{color:#3a58c1}
button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:#768fff}
@media(min-width:641px){.hero-story{grid-template-columns:minmax(0,1fr) 270px;min-height:255px}#home .home-hero{padding-top:20px}#home .home-hero h1{white-space:pre-line}.hero-illustration{max-height:265px}}
@media(max-width:360px){.hero-story{grid-template-columns:minmax(0,1fr) 34%;min-height:205px}#home .home-hero h1{font-size:1.55rem}#home .hero-copy>.eyebrow{font-size:.67rem}.brand .brand-wordmark{width:132px}#home .review-summary{padding:16px}.learning-overview{gap:8px}}
@media(prefers-reduced-motion:reduce){.bottom-nav .capture-tab [data-icon]{transition:none}}
@media(max-width:640px){body:has(#home:not([hidden])) .brand img.brand-wordmark,.app-header .brand img.brand-wordmark{width:176px}.app-header,body:has(#home:not([hidden])) .app-header{padding-bottom:20px}}
@media(max-width:360px){body:has(#home:not([hidden])) .brand img.brand-wordmark,.app-header .brand img.brand-wordmark{width:164px}}

/* Header and content share one scroll surface; navigation stays within reach. */
.app-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
.app-scroll main#main{overflow:visible;min-height:0;flex:none}
.app-scroll .page{height:auto;overflow:visible;min-height:0}