:root { --paper:#f7f3eb; --paper-2:#eee7dc; --ink:#202226; --muted:#756f69; --line:#e1d9ce; --orange:#f26448; --orange-deep:#ce4934; --yellow:#f5c84e; --green:#95bf78; --blue:#9bc7df; --pink:#efadb7; --lavender:#c8bce8; --shadow:0 18px 45px rgba(43,34,26,.09); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--paper); } button,input,select { font:inherit; } button { cursor:pointer; border:0; } button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(242,100,72,.42); outline-offset:2px; } .hidden { display:none !important; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr); }.sidebar { display:flex; flex-direction:column; padding:34px 23px 22px; border-right:1px solid var(--line); background:rgba(255,255,255,.22); }.brand,.mobile-brand { display:inline-flex; align-items:center; gap:8px; width:max-content; color:var(--ink); text-decoration:none; font-size:23px; font-weight:900; letter-spacing:-.075em; }.brand-mark { display:grid; width:29px; height:29px; place-items:center; border-radius:9px; background:var(--orange); color:white; font:900 15px Georgia,serif; transform:rotate(-8deg); }.brand-dot { color:var(--orange); }.sidebar-kicker,.eyebrow { font-size:10px; font-weight:850; letter-spacing:.14em; color:#938a80; }.sidebar-kicker { margin:70px 11px 18px; }.primary-nav { display:grid; gap:7px; }.nav-item { display:flex; align-items:center; gap:12px; padding:12px 13px; background:transparent; border-radius:12px; color:#77716e; font-size:13px; font-weight:760; text-align:left; }.nav-item:hover,.nav-item.active { color:var(--ink); background:#ebe5dc; }.nav-item.active { box-shadow:inset 3px 0 var(--orange); }.nav-icon { display:inline-grid; width:21px; place-items:center; font-weight:900; font-size:16px; }.brorik-sidebar { display:flex; gap:8px; align-items:center; margin:30px 2px 0; padding:12px 9px; border-radius:13px; background:#e9e2d9; }.brorik-sidebar img { width:38px; height:48px; object-fit:contain; object-position:top; }.brorik-sidebar p { margin:0; font-size:9px; line-height:1.45; color:var(--muted); }.brorik-sidebar strong { color:var(--orange-deep); letter-spacing:.07em; font-size:8px; }.sidebar-bottom { margin-top:auto; }.mini-profile { display:grid; grid-template-columns:31px 1fr; gap:9px; align-items:center; padding:21px 4px 0; border-top:1px solid var(--line); }.avatar { display:grid; width:33px; height:33px; place-items:center; border-radius:50%; background:var(--orange); color:white; font-size:12px; font-weight:850; }.mini-profile strong,.mini-profile span { display:block; }.mini-profile strong { font-size:11px; }.mini-profile span,.legal-note { color:#999188; font-size:9px; }.mini-profile span { margin-top:3px; }.legal-note { margin:22px 4px 0; line-height:1.55; }
.main-content { width:min(1430px,100%); margin:0 auto; padding:0 54px 35px; }.topbar { height:96px; display:flex; align-items:center; gap:10px; }.topbar-spacer { flex:1; }.mobile-brand { display:none; }.streak-pill,.xp-pill { display:flex; align-items:center; gap:6px; padding:9px 12px; border-radius:999px; font-size:11px; }.streak-pill { background:#f1e4c5; }.xp-pill { background:#ebe4f7; }.streak-pill strong,.xp-pill strong { font-size:12px; }.flame,.xp-pill span { color:var(--orange); font-weight:900; }
.hero-card { min-height:365px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); overflow:hidden; border-radius:24px; background:var(--orange); color:white; box-shadow:var(--shadow); }.hero-copy { position:relative; z-index:2; padding:48px; }.hero-copy .eyebrow { color:rgba(255,255,255,.67); }.hero-copy h1,.page-header h1 { margin:16px 0; letter-spacing:-.075em; line-height:.96; }.hero-copy h1 { max-width:620px; font-size:clamp(39px,4.2vw,62px); }.hero-copy h1 em,.page-header em { color:var(--yellow); font-style:normal; }.hero-copy>p:not(.eyebrow):not(.system-voice) { max-width:390px; color:rgba(255,255,255,.8); font-size:14px; line-height:1.55; }.hero-actions { display:flex; align-items:center; gap:16px; margin-top:23px; }.button { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 16px; border-radius:11px; font-size:12px; font-weight:850; transition:transform .18s,background .18s; }.button:hover { transform:translateY(-2px); }.button-dark { color:white; background:var(--ink); }.button-dark span { color:var(--orange); font-size:18px; }.text-button { padding:0; color:inherit; background:none; font-size:12px; font-weight:800; text-align:left; }.text-button span { margin-left:6px; color:var(--orange); font-size:17px; }.hero-card .text-button { color:white; }.system-voice { margin:23px 0 0; color:rgba(255,255,255,.7); font-size:10px; font-weight:700; letter-spacing:.03em; }.hero-art { position:relative; isolation:isolate; overflow:hidden; }.hero-art>img { position:absolute; z-index:2; right:13%; bottom:-20px; height:405px; width:auto; filter:drop-shadow(15px 16px 0 rgba(117,42,28,.23)); }.halo { position:absolute; width:285px; height:285px; right:10%; bottom:12px; border:1px solid rgba(255,255,255,.27); border-radius:50%; box-shadow:0 0 0 18px rgba(255,255,255,.06),0 0 0 42px rgba(255,255,255,.035); }.word-chip { position:absolute; z-index:4; padding:10px 13px; border:2px solid var(--ink); color:var(--ink); box-shadow:4px 5px 0 var(--ink); font-size:12px; font-weight:900; letter-spacing:-.04em; }.chip-one { left:9%; top:45px; background:var(--pink); border-radius:18px 18px 18px 3px; transform:rotate(-8deg); }.chip-two { right:7%; top:92px; background:var(--yellow); border-radius:18px 18px 3px 18px; transform:rotate(5deg); }.chip-three { right:22%; bottom:38px; background:var(--blue); border-radius:18px 3px 18px 18px; transform:rotate(-3deg); }.speech-bubble { position:absolute; z-index:5; left:7%; bottom:22px; max-width:195px; padding:11px 13px; border:2px solid var(--ink); border-radius:13px 13px 13px 3px; box-shadow:4px 5px 0 rgba(32,34,38,.85); color:var(--ink); background:var(--paper); font-size:10px; font-weight:650; line-height:1.4; transform:rotate(-2deg); }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin:18px 0 64px; }.stat-grid article { display:flex; align-items:center; gap:12px; padding:15px 17px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.25); }.stat-grid strong,.stat-grid small { display:block; }.stat-grid strong { font-size:17px; letter-spacing:-.05em; }.stat-grid small { color:var(--muted); font-size:10px; margin-top:2px; }.stat-icon { display:grid; width:33px; height:33px; place-items:center; border-radius:10px; background:#f5e0d5; color:var(--orange-deep); font-weight:900; }.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom:20px; }.section-heading.compact { margin:48px 0 17px; }.section-heading .eyebrow { margin:0 0 9px; }.section-heading h2 { margin:0; font-size:28px; line-height:1; letter-spacing:-.065em; }.section-heading h2 span { color:var(--orange); }
.module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }.module-card { display:grid; grid-template-columns:45px 1fr auto; gap:14px; align-items:start; min-height:156px; padding:19px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.3); text-align:left; transition:transform .18s,border-color .18s,box-shadow .18s; }.module-card:hover:not(:disabled) { transform:translateY(-2px); border-color:#e4a799; box-shadow:0 8px 0 #eee0d4; }.module-card:disabled { cursor:default; opacity:.63; }.module-number { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; background:#eee5da; color:#857b72; font-size:12px; font-weight:900; }.module-card.complete .module-number { background:#d9ebd0; color:#5e824d; }.module-card.active { background:#fffaf5; border-color:#efb7ac; }.module-card h3 { margin:3px 0 5px; font-size:16px; letter-spacing:-.04em; }.module-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }.module-state { color:var(--orange-deep); font-size:10px; font-weight:850; letter-spacing:.1em; }.module-meter { grid-column:2/4; height:4px; overflow:hidden; border-radius:4px; background:#e9e1d6; }.module-meter span { display:block; height:100%; background:var(--orange); border-radius:4px; }.module-card.complete .module-meter span { background:var(--green); }.home-lower { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:28px; }.case-card { min-height:176px; padding:24px; border-radius:17px; background:#e9e2d9; }.case-card .eyebrow { margin:0 0 18px; }.daily-term { display:flex; align-items:flex-start; gap:15px; }.daily-word { display:inline-grid; place-items:center; min-width:77px; padding:10px; border-radius:11px; background:var(--yellow); font-weight:950; letter-spacing:-.05em; }.daily-term h3 { margin:2px 0 5px; font-size:19px; letter-spacing:-.05em; }.daily-term p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }.parent-card { background:var(--ink); color:white; }.parent-card .eyebrow { color:#aaa; }.parent-card blockquote { margin:0; font-size:19px; line-height:1.15; letter-spacing:-.045em; }.teen-reply { display:inline-block; margin:17px 0 0; padding:6px 10px; border-radius:8px 8px 3px 8px; background:#383a3e; color:#ddd; font-size:11px; }
.page-header { padding:24px 0 32px; }.page-header .eyebrow { margin-bottom:16px; }.page-header h1 { font-size:clamp(41px,5vw,69px); }.page-header>p:last-child { max-width:560px; color:var(--muted); font-size:14px; line-height:1.55; }.guide-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) 180px 180px auto auto; gap:9px; margin-bottom:13px; }.search-box { display:flex; gap:8px; align-items:center; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:white; color:#8c8278; }.search-box input { width:100%; border:0; outline:0; background:transparent; padding:12px 0; color:var(--ink); font-size:12px; }.guide-toolbar select,.outline-button { min-height:42px; padding:0 11px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); font-size:11px; font-weight:730; }.outline-button:hover { border-color:var(--orange); background:#fff7f2; }.alphabet { display:flex; flex-wrap:wrap; gap:4px; margin:14px 0; }.alphabet button { width:28px; height:27px; border-radius:7px; background:transparent; color:var(--muted); font-size:10px; font-weight:850; }.alphabet button:hover,.alphabet button.active { background:#e8e1d7; color:var(--ink); }.guide-summary { color:var(--muted); font-size:11px; margin:18px 0 12px; }.term-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.term-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; width:100%; padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.3); text-align:left; }.term-row:hover { border-color:#e7b1a7; background:#fffaf6; }.term-row h3 { margin:0 0 4px; font-size:15px; letter-spacing:-.04em; }.term-row p { margin:0; color:var(--muted); font-size:11px; line-height:1.4; }.badge-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }.badge { display:inline-block; padding:4px 6px; border-radius:6px; background:#eae3da; color:#756c65; font-size:8px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }.badge.status-brainrot,.badge.status-karantene { background:#f2d8d4; color:#9f4a3a; }.badge.status-aktiv { background:#dcebd4; color:#547a47; }.badge.status-ironisk { background:#e5def4; color:#7765af; }.term-arrow { color:var(--orange); font-size:19px; }.empty-state { grid-column:1/-1; padding:45px; border:1px dashed #cfc6bb; border-radius:15px; color:var(--muted); text-align:center; font-size:12px; }
.progress-hero { display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center; padding:32px; border-radius:20px; color:white; background:var(--orange); }.progress-ring { display:grid; width:106px; height:106px; place-content:center; border:8px solid rgba(255,255,255,.28); border-right-color:var(--yellow); border-top-color:var(--yellow); border-radius:50%; text-align:center; transform:rotate(25deg); }.progress-ring strong,.progress-ring span { transform:rotate(-25deg); }.progress-ring strong { font-size:28px; }.progress-ring span { font-size:11px; }.progress-hero .eyebrow { color:rgba(255,255,255,.68); }.progress-hero h2 { margin:8px 0; font-size:28px; letter-spacing:-.06em; }.progress-hero p:not(.eyebrow) { margin:0; color:rgba(255,255,255,.76); font-size:12px; }.progress-summary { min-width:150px; padding-left:22px; border-left:1px solid rgba(255,255,255,.25); font-size:11px; line-height:1.8; }.progress-summary strong { display:block; color:var(--yellow); font-size:20px; }.achievement-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.achievement { display:flex; gap:11px; align-items:center; min-height:75px; padding:14px; border-radius:13px; background:#eae4da; opacity:.52; }.achievement.unlocked { background:#f5e7cc; opacity:1; }.achievement>span { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#fffaf2; color:var(--orange-deep); font-weight:900; }.achievement strong,.achievement small { display:block; }.achievement strong { font-size:11px; }.achievement small { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.35; }.missed-section { display:grid; grid-template-columns:1fr 1.2fr; gap:25px; align-items:start; margin-top:38px; padding:25px; border:1px solid var(--line); border-radius:17px; }.missed-section .eyebrow { margin:0 0 8px; }.missed-section h2 { margin:0; font-size:22px; letter-spacing:-.05em; }.missed-section p { color:var(--muted); font-size:11px; line-height:1.5; }.review-list { display:flex; flex-wrap:wrap; gap:7px; }.review-list button { padding:7px 9px; border-radius:8px; background:#eee5da; color:var(--ink); font-size:10px; font-weight:750; }.review-list button:hover { background:#f5d9d2; }.danger-button { margin-top:28px; padding:0; color:#aa5142; background:none; font-size:11px; font-weight:800; text-decoration:underline; }
.detail-modal,.lesson-modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; }.modal-backdrop { position:absolute; inset:0; background:rgba(28,29,31,.57); backdrop-filter:blur(5px); }.term-dialog,.lesson-dialog { position:relative; z-index:1; overflow:auto; width:min(680px,100%); max-height:min(760px,calc(100vh - 40px)); border-radius:23px; background:var(--paper); box-shadow:0 30px 90px rgba(0,0,0,.27); }.term-dialog { padding:35px; }.lesson-dialog { width:min(580px,100%); min-height:500px; padding:26px; }.close-modal { position:absolute; z-index:2; top:14px; right:18px; background:none; color:#80776f; font-size:30px; line-height:1; }.detail-heading { display:flex; gap:16px; align-items:start; padding-right:35px; }.term-token { display:inline-grid; min-width:86px; place-items:center; padding:12px; border:2px solid var(--ink); border-radius:12px; box-shadow:4px 4px 0 var(--ink); background:var(--yellow); font-size:18px; font-weight:950; letter-spacing:-.05em; }.detail-heading h2 { margin:0 0 4px; font-size:31px; letter-spacing:-.07em; }.detail-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }.risk-panel { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:22px 0; }.risk-panel div { padding:10px; border-radius:9px; background:#e9e2d9; }.risk-panel span,.risk-panel strong { display:block; }.risk-panel span { color:#91887f; font-size:8px; font-weight:900; letter-spacing:.09em; }.risk-panel strong { margin-top:3px; font-size:11px; text-transform:capitalize; }.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.detail-grid article { padding:14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.35); }.detail-grid article.wide { grid-column:1/-1; }.detail-grid h3 { margin:0 0 6px; color:var(--orange-deep); font-size:9px; letter-spacing:.1em; }.detail-grid p { margin:0; color:#5f5a56; font-size:12px; line-height:1.48; }.brorik-comment { display:flex; gap:10px; align-items:center; margin-top:18px; padding:11px; border-radius:11px; background:var(--ink); color:white; font-size:11px; line-height:1.4; }.brorik-comment img { width:35px; height:43px; object-fit:contain; object-position:top; }.brorik-comment strong { color:var(--yellow); font-size:9px; letter-spacing:.08em; }.related-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }.related-row button { padding:6px 8px; border-radius:7px; background:#ece4d9; color:var(--ink); font-size:10px; font-weight:750; }.lesson-header { padding-right:38px; }.lesson-header span,.lesson-header strong { display:block; }.lesson-header span { color:#978d83; font-size:9px; font-weight:850; letter-spacing:.1em; }.lesson-header strong { margin-top:4px; font-size:11px; }.lesson-progress { height:5px; margin-top:12px; overflow:hidden; border-radius:5px; background:#e6ded3; }.lesson-progress span { display:block; height:100%; border-radius:5px; background:var(--orange); transition:width .25s; }.question-wrap { padding:52px 12px 18px; text-align:center; }.question-label { color:var(--orange-deep); font-size:9px; font-weight:900; letter-spacing:.12em; }.question-token { display:inline-block; max-width:100%; margin:16px auto 5px; padding:13px 18px; border:2px solid var(--ink); border-radius:13px; box-shadow:4px 4px 0 var(--ink); background:var(--yellow); font-size:23px; font-weight:950; letter-spacing:-.055em; }.question-token.emoji { font-size:50px; padding:5px 21px; }.question-wrap h2 { margin:23px 0 7px; font-size:25px; letter-spacing:-.06em; line-height:1.03; }.question-wrap>p { margin:0; color:var(--muted); font-size:12px; }.answer-grid { display:grid; gap:8px; margin:25px auto 0; max-width:410px; }.answer-button { padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); font-size:12px; font-weight:720; text-align:left; }.answer-button:hover:not(:disabled) { border-color:var(--orange); background:#fff8f3; }.answer-button.correct { border-color:#83aa6f; background:#e4efde; color:#476d3b; }.answer-button.wrong { border-color:#e19b8d; background:#f7e0db; color:#9c4435; }.answer-button:disabled { cursor:default; }.rebuild-bank,.rebuild-answer { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; max-width:440px; margin:22px auto 0; }.rebuild-answer { min-height:44px; padding:8px; border:1px dashed #c7bdb2; border-radius:10px; margin-top:10px; }.token-button { padding:8px 10px; border-radius:8px; background:#e9e2d8; color:var(--ink); font-size:11px; font-weight:800; }.token-button.selected { opacity:.45; }.feedback-wrap { min-height:40px; margin-top:14px; }.feedback { margin:0; font-size:12px; font-weight:750; }.feedback.good { color:#557d46; }.feedback.bad { color:#a74738; }.lesson-brorik { display:flex; gap:9px; align-items:center; max-width:390px; margin:11px auto 0; padding:8px 10px; border-radius:9px; background:#eae3d9; color:#615b56; font-size:10px; line-height:1.4; text-align:left; }.lesson-brorik img { width:31px; height:38px; object-fit:contain; object-position:top; }.lesson-brorik strong { color:var(--orange-deep); font-size:8px; letter-spacing:.08em; }.lesson-next { margin-top:16px; }.lesson-result img { width:108px; height:132px; object-fit:contain; object-position:top; }.toast { position:fixed; z-index:40; right:20px; bottom:20px; max-width:330px; padding:12px 14px; border-radius:10px; background:var(--ink); color:white; font-size:11px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(10px); transition:.22s; }.toast.visible { opacity:1; transform:translateY(0); }
@media (max-width:1000px) { .app-shell { grid-template-columns:1fr; }.sidebar { display:none; }.main-content { padding:0 25px 28px; }.mobile-brand { display:inline-flex; }.topbar { height:75px; }.hero-card { grid-template-columns:1fr 42%; }.hero-copy { padding:35px 31px; }.hero-art>img { right:1%; }.speech-bubble { left:3%; }.guide-toolbar { grid-template-columns:minmax(200px,1fr) 170px 170px; }.guide-toolbar .outline-button { width:max-content; }.progress-hero { grid-template-columns:auto 1fr; }.progress-summary { grid-column:1/-1; padding:14px 0 0; border-top:1px solid rgba(255,255,255,.25); border-left:0; }.achievement-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:650px) { .main-content { padding:0 15px 25px; }.topbar { gap:7px; }.topbar-spacer { flex:1; }.xp-pill { display:none; }.hero-card { display:block; min-height:535px; }.hero-copy { padding:30px 23px; }.hero-copy h1 { font-size:45px; }.hero-art { position:absolute; inset:auto 0 0; height:220px; }.hero-art>img { right:23%; bottom:-10px; height:255px; }.halo { width:180px; height:180px; right:19%; bottom:8px; }.chip-one { top:11px; left:9%; }.chip-two { top:20px; right:8%; }.chip-three { display:none; }.speech-bubble { left:10px; bottom:14px; max-width:157px; padding:8px 9px; font-size:8px; }.stat-grid { grid-template-columns:1fr; gap:7px; margin-bottom:40px; }.stat-grid article { padding:11px 13px; }.section-heading { align-items:start; }.section-heading h2 { font-size:24px; }.module-grid,.home-lower,.term-list,.detail-grid { grid-template-columns:1fr; }.module-card { min-height:0; }.home-lower { margin-top:16px; }.case-card { min-height:145px; }.guide-toolbar { grid-template-columns:1fr 1fr; }.guide-toolbar .search-box { grid-column:1/-1; }.guide-toolbar .outline-button { width:100%; }.progress-hero { grid-template-columns:1fr; gap:18px; padding:24px; }.progress-ring { margin:auto; }.achievement-grid { grid-template-columns:1fr; }.missed-section { grid-template-columns:1fr; gap:12px; padding:20px; }.term-dialog { padding:28px 18px; }.risk-panel { grid-template-columns:1fr 1fr; }.detail-grid article.wide { grid-column:auto; }.lesson-dialog { min-height:490px; padding:20px 14px; }.question-wrap { padding:52px 4px 12px; }.question-wrap h2 { font-size:22px; }.question-token { font-size:20px; }.answer-button { font-size:11px; }.streak-pill span:last-child { display:none; } }

/* Production PWA and touch-first overrides. */
html { background:var(--paper); }
body { overflow-x:hidden; }
.privacy-note { max-width:620px; margin:22px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
.bookmark-button { min-height:42px; margin-top:16px; }
.mobile-nav { display:none; }
@media (max-width:650px) {
  body { padding-bottom:calc(73px + env(safe-area-inset-bottom)); }
  .main-content { padding:env(safe-area-inset-top) 15px calc(90px + env(safe-area-inset-bottom)); }
  .mobile-nav { position:fixed; z-index:30; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; min-height:calc(66px + env(safe-area-inset-bottom)); padding:7px 8px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(247,243,235,.96); backdrop-filter:blur(14px); }
  .mobile-nav button { min-height:48px; border-radius:10px; background:transparent; color:var(--muted); font-size:10px; font-weight:800; }
  .mobile-nav button span { display:block; margin-bottom:2px; font-size:16px; }
  .mobile-nav button.active { color:var(--ink); background:#e9e2d8; }
  .alphabet button,.token-button,.review-list button,.related-row button { min-width:48px; min-height:48px; }
  .answer-button,.outline-button,.danger-button { min-height:48px; }
  .detail-modal,.lesson-modal { padding:0; }
  .term-dialog { width:100%; max-height:100dvh; min-height:100dvh; border-radius:0; padding:calc(28px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); }
  .lesson-dialog { display:flex; flex-direction:column; width:100%; min-height:100dvh; max-height:100dvh; border-radius:0; padding:calc(20px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)); }
  .lesson-dialog #lesson-content { display:flex; flex:1; align-items:center; }
  .question-wrap { width:100%; }
  .close-modal { min-width:48px; min-height:48px; }
}