@import url('/assets/ui/app-tokens.css?v=20261010-states');
/* The selected HanziHero treatment. app.css owns responsive layout. */
body{font-size:15px}button,input,select{border-radius:var(--button-radius);border-width:1px;border-color:var(--line)}
button,a{-webkit-tap-highlight-color:transparent}button:disabled{background:var(--surface-alt);color:var(--muted);border-color:var(--line);box-shadow:none}
button:active:not(:disabled),a.primary-button:active{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline-color:var(--blue-dark)}
h1{font-weight:750;line-height:1.8}.ui-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
.utility-button{border:1px solid var(--line);font-size:12px}.utility-button,.back-button,.icon-button{min-height:44px}.icon-only{width:44px;min-width:44px}
.primary-button{background:var(--primary-gradient);border:0;border-radius:var(--button-radius);color:var(--white);font-size:19px;font-weight:700;min-height:58px;box-shadow:var(--shadow)}
.primary-button:active:not(:disabled),a.primary-button:active{background:var(--primary-gradient);color:var(--white)}.primary-button:disabled{background:var(--surface-alt);color:var(--muted)}
.app-header{border-bottom:0;min-height:72px}.brand img{width:30px;height:30px}.brand{font-weight:750}
.app-header #home-back.close-button{margin-left:auto;margin-right:0;order:2}.app-header:has(.close-button) #options-button{order:1;margin-left:0;margin-right:auto}
.app-nav{border-top:1px solid var(--line)}.app-nav-item{position:relative;border-radius:0;min-height:74px;font-size:11px;font-weight:500;color:var(--muted)}
.app-nav-item[aria-current=page]{background:var(--surface);color:var(--ink);font-weight:700}.app-nav-item[aria-current=page]::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary-gradient)}
.home-intro{padding:0;margin-bottom:16px}.home-intro p,.home-card-description{color:var(--muted);font-weight:400}.home-intro p{margin-top:4px}.home-cards{gap:12px}
main:has(.home-menu),main:has(.goal-settings){padding-top:16px}
/* HanziHero's observed dropdown: rounded-lg, bg-white, shadow,
   Inter 16/24 and hover:text-cerise-500. See dropdown-reference.json. */
.level-picker{position:relative;margin-left:auto;flex-shrink:0;z-index:12}
.level-picker-trigger{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-width:82px;min-height:44px;padding:8px 12px;background:var(--white);border:1px solid var(--control-border);font:600 14px/1.5 Inter,Arial,sans-serif}.level-picker-trigger>.ui-icon{width:16px;height:16px;flex-basis:16px;color:var(--muted)}.level-picker-trigger[aria-expanded=true]>.ui-icon{transform:rotate(180deg)}
.level-menu{position:absolute;right:0;top:calc(100% + 8px);width:224px;padding:8px;border-radius:8px;background:var(--white);box-shadow:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1)}
.level-menu button{display:flex;align-items:center;width:100%;min-height:44px;gap:12px;border:0;border-radius:0;padding:8px 12px;background:var(--white);color:var(--ink);text-align:left;line-height:24px;font-weight:400}.level-menu .level-name{font:400 16px/24px Inter,Arial,sans-serif}.level-count{flex:1;font-size:12px;color:var(--muted);white-space:nowrap}.level-check{width:18px;color:var(--teal)}.level-check .ui-icon{width:18px;height:18px}.level-menu button[aria-checked=true] .level-name{color:var(--teal);font-weight:600}.level-menu button:focus-visible{outline-offset:-3px}.level-menu button:focus .level-name{color:var(--teal)}
@media(hover:hover){.level-menu button:hover .level-name{color:var(--teal)}}
.level-loading{display:none;position:absolute;inset:0;place-items:center}.level-picker-trigger .spinner{width:16px;height:16px}.level-picker-trigger.is-opening>.level-label,.level-picker-trigger.is-opening>.ui-icon{opacity:0}.level-picker-trigger.is-opening>.level-loading{display:grid}
.home-menu:not(:has(.level-grid)) .home-card-body{padding:16px}.home-menu:not(:has(.level-grid)) .home-card-description{margin-top:8px}.home-menu:not(:has(.level-grid)) .home-card-action{padding:10px 16px;min-height:52px;font-size:17px}
.home-card{--accent-gradient:var(--primary-gradient);border:1px solid var(--line);border-radius:var(--panel-radius);overflow:hidden;box-shadow:var(--shadow)}
.home-card.revision,.level-card.level-n4,.level-card.level-n2{--accent-gradient:var(--secondary-gradient)}
.home-card-symbol{background:var(--accent-gradient);color:var(--white);border-radius:var(--button-radius);box-shadow:var(--shadow);min-width:42px;height:42px}.home-card-symbol .ui-icon{width:24px;height:24px}
.home-card-action,.level-card.level-n3 .home-card-action,.level-card.level-n2 .home-card-action{background:var(--accent-gradient);color:var(--white);font-size:19px;font-weight:700;min-height:58px}
.home-card:active:not(:disabled),.home-card:disabled{background:var(--white);color:var(--ink);border-color:var(--line)}.home-card:active:not(:disabled) .home-card-action{background:var(--accent-gradient)}
.home-card.not-ready{border-color:var(--line)}.home-card.not-ready .home-card-symbol,.home-card.not-ready .home-card-action{background:var(--surface-alt);color:var(--muted);box-shadow:none}
.home-card.not-ready .home-card-action{font-size:13px;font-weight:500}.home-card-loading{font-size:14px}
.home-progress{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}.home-progress-label{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px;color:var(--muted);margin-bottom:10px}.home-progress-label strong{font:700 15px/1.5 Inter,Arial,sans-serif;color:var(--ink)}
.home-progress progress{appearance:none;display:block;width:100%;height:4px;border:0;border-radius:2px;overflow:hidden;background:var(--line)}.home-progress progress::-webkit-progress-bar{background:var(--line)}.home-progress progress::-webkit-progress-value{background:var(--secondary-gradient)}.home-progress progress::-moz-progress-bar{background:var(--secondary-gradient)}
.session-top{color:var(--muted);font-size:12px}.session-top .kind{font-weight:500}.session-top .position{font-size:15px;color:var(--ink)}
.session-progress{height:4px;border-radius:2px;overflow:hidden;background:var(--line)}.session-progress::-webkit-progress-bar{background:var(--line)}.session-progress::-webkit-progress-value{background:var(--primary-gradient)}.session-progress::-moz-progress-bar{background:var(--primary-gradient)}
.study-card{border:1px solid var(--line);border-radius:var(--panel-radius);overflow:hidden;box-shadow:var(--shadow)}
.card-title{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.3fr);align-items:center;gap:12px;padding:20px;background:var(--primary-gradient);color:var(--white)}
.card-title .character{min-height:0;padding:0;font-size:86px;line-height:1.15}.card-title .meaning{background:none;text-align:left;padding:0;font-size:23px;line-height:1.9}
.card-hero{display:block;min-height:0;padding:12px 18px 0}.mnemonic-art{width:100%;height:200px;max-height:none;object-fit:contain}
.memory{padding:20px}.section-label{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:10px}.story{font-size:15px;line-height:2.15}
.story-kanji{display:inline-block;font-weight:700;font-size:19px;line-height:1.3;padding:2px 4px;margin:0 .08em;vertical-align:baseline;color:var(--white);background:var(--secondary-gradient);border-radius:var(--tile-radius);box-shadow:var(--shadow)}
.components{justify-content:flex-start;align-items:flex-start;gap:12px;margin-bottom:17px;padding:0;border:0}.component .jp{font-size:28px;line-height:1.3;background:var(--secondary-gradient);color:var(--white);padding:3px 6px;border-radius:var(--tile-radius);box-shadow:var(--shadow)}.component small{font-size:11px;color:var(--muted);font-weight:400}.plus{font-size:16px;font-weight:400;margin-top:11px;color:var(--muted)}
.reference{border-top:1px solid var(--line)}.reference summary{font-size:12px;color:var(--muted);font-weight:500;min-height:58px}.readings{border-top:1px solid var(--line)}.readings>div+div{border-left:1px solid var(--line)}.readings b{background:none;border:0;padding:0;color:var(--muted);font-weight:500;font-size:12px}.readings .jp{font-size:19px}.word{border-top:1px solid var(--line);font-size:13px}.word small{color:var(--muted)}
.recall-card{min-height:350px}.recall-card .character{min-height:250px;font-size:145px}.question-hint{font-size:13px;font-weight:400;color:var(--muted)}
.study-controls{border-top:1px solid var(--line)}.study-controls.revision-controls .primary-button{background:var(--secondary-gradient)}.answer-hint{font-weight:400;color:var(--muted)}
.nav-row,.menu-list .nav-row{border-bottom:1px solid var(--line);font-size:14px;font-weight:500}.nav-row .ui-icon{color:var(--muted)}
.menu-list{border:1px solid var(--line);border-radius:var(--panel-radius);overflow:hidden;box-shadow:var(--shadow)}.other-menu,.catalog-link{border:1px solid var(--line);border-radius:var(--panel-radius)}
.catalog-levels{border:1px solid var(--line);border-radius:var(--button-radius);overflow:hidden}.catalog-levels button{border-radius:0;border-right:1px solid var(--line);font-size:15px;font-weight:600;color:var(--muted)}.catalog-levels button[aria-pressed=true]{background:var(--primary-gradient);color:var(--ink);font-weight:750}
.catalog-summary{font-size:13px}.catalog-legend{color:var(--muted);font-size:11px}.catalog-legend i{width:12px;height:12px;border:1px solid var(--line);border-radius:var(--tile-radius);background:var(--surface-alt)}.catalog-legend i.legend-learned{background:var(--secondary-gradient);border-color:var(--blue)}
.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.catalog-tile{justify-content:space-between;min-height:115px;padding:15px 0 0;border:1px solid var(--line);background:var(--surface-alt);overflow:hidden;border-radius:var(--button-radius)}
.catalog-tile.learned{background:var(--secondary-gradient);border-color:var(--blue);color:var(--white);box-shadow:var(--shadow)}.catalog-meaning{font-size:11px;min-height:40px;padding:0 5px 7px}.catalog-tile.learned .catalog-meaning{background:var(--white);color:var(--ink);padding:5px 5px 7px}.tile-status .ui-icon{width:14px;height:14px}.catalog-hint,.catalog-card-status{font-size:12px;color:var(--muted)}
.library-card,.library-card:nth-child(n){border:1px solid var(--line);border-radius:var(--panel-radius);box-shadow:var(--shadow)}.library-card small{font-weight:400}
.intro,.settings-note{color:var(--muted)}.settings-block{border-top:1px solid var(--line)}.presets button[aria-pressed=true]{background:var(--surface-alt);color:var(--ink);border-color:var(--blue-dark);box-shadow:inset 0 0 0 1px var(--blue-dark)}
.lesson-preview .preview-tile{background:var(--secondary-gradient);color:var(--white);border:1px solid var(--blue);border-radius:var(--button-radius);box-shadow:var(--shadow)}.preview-level{color:var(--muted);font-size:12px}.lesson-preview>p:not(.preview-level){color:var(--muted);font-size:14px}
.trial-complete{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}.next-lesson>p{color:var(--muted)}
.teaser-card{border:1px solid var(--line);border-radius:var(--panel-radius);box-shadow:var(--card-shadow);overflow:hidden;padding:0 0 14px}.teaser-card:nth-child(2),.teaser-card:nth-child(3){border-color:var(--line)}.teaser-card img{padding:4px}.card-corner{padding:8px;background:var(--primary-gradient);color:var(--ink);font-weight:600}
.unlock-summary{padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.unlock-levels{font-size:22px}.offer-price{background:var(--surface);border:1px solid var(--line);border-radius:var(--panel-radius)}.offer-price>span,.offer-status,.offer-description{color:var(--muted);font-weight:400}.trial-offer .actions [data-checkout]{font-size:19px}.free-review{border:0;font-size:13px;color:var(--muted);font-weight:500}
.end{padding-top:18px}.end-symbol{width:54px;height:54px;display:grid;place-items:center;border-radius:var(--panel-radius);background:var(--primary-gradient);color:var(--white);box-shadow:var(--shadow);margin-bottom:20px}.end-symbol .ui-icon{width:29px;height:29px}.end p{font-size:14px;color:var(--muted)}.entry p,.loading,.page-loading{color:var(--muted)}
@media(min-width:700px){body{background:var(--surface)}.app-shell,.app-nav{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
@media(max-width:440px){.app-header{min-height:66px}.card-title{padding:20px 16px}.card-title .character{font-size:76px}.card-title .meaning{font-size:20px}.mnemonic-art{height:180px;max-height:none}.memory{padding:20px 18px}.catalog-tile{min-height:100px}.catalog-meaning{font-size:10px}}
@media(max-width:350px){.memory{padding:20px 15px}.card-title{gap:9px}.card-title .character{font-size:68px}.card-title .meaning{font-size:18px}.catalog-tile{min-height:90px}.app-nav-item{font-size:10px}.session-top .position{font-size:14px}}

/* Authenticated HanziHero panels and locked texture: exact values and source
   asset are recorded in design/hanzihero-app/reference.json. */
body,.app-shell{background:var(--canvas)}
.app-nav,.app-nav-item,.study-controls{background:var(--surface)}
.app-nav-item[aria-current=page]{background:var(--canvas)}
.app-header{background:var(--canvas)}
.app-nav,.study-controls{border-top-color:var(--panel-line)}
.app-header .utility-button{background:var(--surface);border-color:var(--control-border)}
.home-card,.study-card,.menu-list,.library-card,.library-card:nth-child(n),.preview-tile,.teaser-card,.teaser-card:nth-child(n){border-color:var(--panel-line)}
.home-card:active:not(:disabled),.home-card:disabled{border-color:var(--panel-line)}
.home-card-description,.story,.prose,.menu-list .nav-row,.settings-note,.offer-description,.offer-status{color:var(--slate-text)}
h2,h3,.section-label{color:var(--slate-text)}
.menu-list .nav-row{border-bottom-color:var(--panel-line)}
.reference{background:var(--canvas);border-top-color:var(--panel-line)}
.reference summary{color:var(--slate-text)}
.readings,.readings>div+div,.word{border-color:var(--panel-line)}
.home-progress,.trial-complete,.unlock-summary{border-color:var(--panel-line)}
.offer-price{background:var(--white);border-color:var(--panel-line)}
.teaser-card .card-corner{display:flex;align-items:center;min-height:44px}

/* Use the reference texture only for a session with nothing ready to study.
   Upgrade actions remain fully active; catalog colors show learning progress. */
.home-card-action{position:relative}
.home-card.not-ready .home-card-action::before{content:'';position:absolute;inset:-1px;background-image:url('/assets/ui/locked-stripes.webp');background-repeat:repeat;pointer-events:none;z-index:0}
.home-card-action>span,.home-card-action>.ui-icon{position:relative;z-index:1}
.home-card.not-ready .home-card-action{background:var(--control-border);color:var(--slate-text)}
.catalog-tile{border-color:var(--panel-line)}
.catalog-tile .catalog-meaning{background:var(--white);color:var(--ink);padding:5px 5px 7px}
.catalog-legend i.legend-unseen{background:var(--surface-alt);border-color:var(--control-border)}
@media(min-width:700px){body{background:var(--canvas)}.app-shell,.app-nav{border-left-color:var(--panel-line);border-right-color:var(--panel-line)}}

.entry.state-panel{margin-top:0}.entry-logo{width:40px;height:40px;margin-bottom:20px}
.learning-note{font-size:13px;line-height:2.1;color:var(--slate-text);background:var(--surface);border:1px solid var(--panel-line);border-radius:var(--panel-radius);padding:14px 16px;margin:18px 0}
.daily-goal{display:block;width:100%;margin-top:16px;padding:12px 16px 0;text-align:left;background:var(--white);border:1px solid var(--control-border);border-radius:var(--panel-radius);font-weight:400;color:var(--slate-text)}.goal-today{display:block;font-size:15px;color:var(--ink)}.goal-target{display:block;font-size:14px;color:var(--muted);margin-top:2px}.daily-goal strong{color:var(--ink);font-weight:700}.goal-edit{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--panel-line);margin-top:10px;padding:8px 0;min-height:44px;font-size:13px;font-weight:600;color:var(--blue-dark)}.goal-edit .ui-icon{width:18px;height:18px;flex-basis:18px}
.coverage{margin-top:20px}.coverage>h2{font-size:16px;font-weight:600;line-height:1.9;color:var(--slate-text);margin-bottom:12px}.coverage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.coverage-card{background:var(--white);padding:12px;border-radius:0;box-shadow:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1)}.coverage-card h3{text-align:center;color:#94a3b8;font:600 15px/1.5 Inter,Arial,sans-serif;margin-bottom:8px}.coverage-values{display:flex;align-items:center;justify-content:center;gap:12px}.coverage-fraction{display:flex;flex-direction:column;text-align:center;color:var(--muted);font:500 22px/1.25 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.coverage-fraction>span:first-child{border-bottom:1px solid #94a3b8;padding-bottom:3px}.coverage-fraction>span:last-child{padding-top:3px}.coverage-ring{position:relative;width:76px;height:76px;flex-shrink:0}.coverage-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}.coverage-ring circle{fill:none;stroke-width:10}.coverage-track{stroke:var(--surface-alt)}.coverage-arc{stroke:#ff6f9a;stroke-linecap:round}.coverage-ring>span{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font:500 15px/1.5 Inter,Arial,sans-serif}
@media(max-width:350px){.coverage-grid{gap:10px}.coverage-card{padding:10px}.coverage-values{gap:8px}.coverage-ring{width:64px;height:64px}.coverage-fraction{font-size:20px}.coverage-ring>span{font-size:13px}.goal-today{font-size:14px}.goal-edit{font-size:12px}}
.next-practice{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0}.next-practice .upcoming{margin:0;flex:1;min-width:200px}.next-practice .utility-button{font-size:12px;padding:5px 12px}
.goal-settings .intro{margin:6px 0 16px}.goal-options{display:grid;gap:8px;margin:0 0 16px}.goal-option{display:flex;gap:12px;align-items:center;margin:0;background:var(--white);border:1px solid var(--control-border);border-radius:var(--panel-radius);padding:12px 14px;cursor:pointer}.goal-option:has(input:checked){border-color:var(--blue-dark);box-shadow:0 0 0 1px var(--blue-dark)}.goal-option input{accent-color:var(--blue-dark);width:20px;height:20px;flex-shrink:0;margin:0}.goal-option strong,.goal-option small{display:block}.goal-option strong{font-size:18px;line-height:1.6}.goal-option small{font-size:12px;line-height:1.9;color:var(--muted)}.goal-settings .settings-note{margin-top:12px}.goal-settings .actions{margin-top:16px}
.entry .primary-button{display:flex;width:100%;justify-content:space-between;font-size:16px}
.entry .back-button{width:100%;border:1px solid var(--control-border);border-radius:var(--button-radius);background:var(--surface)}
.access-prompt .memory>p{color:var(--slate-text);font-size:14px}
.access-prompt .actions .primary-button{font-size:17px}
.checkout-loading{display:none;align-items:center;justify-content:center;gap:10px}
/* Grammar reuses the learner app's panels, colors and controls. */
.app-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.grammar-enabled .app-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
.grammar-entry{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;margin-top:14px;background:var(--white);border:1px solid var(--panel-line);border-radius:var(--panel-radius);text-align:left;box-shadow:var(--shadow)}
.grammar-entry>span:nth-child(2){flex:1;min-width:0}.grammar-entry strong{display:block;font:700 17px/1.5 Inter,Arial,sans-serif;color:var(--ink)}.grammar-entry small{display:block;font-size:12px;line-height:1.9;color:var(--muted);font-weight:400;margin-top:3px}.grammar-entry>.ui-icon{width:18px;flex-shrink:0}.grammar-entry .home-card-symbol{width:40px;height:40px;min-width:40px;background:var(--secondary-gradient)}
.grammar-home>.intro{margin:6px 0 16px}.grammar-level{font:700 13px/1.5 Inter,Arial,sans-serif;background:var(--secondary-gradient);color:var(--white);padding:5px 10px;border-radius:var(--button-radius)}
.grammar-overview{padding:14px 16px;background:var(--white);border:1px solid var(--panel-line);border-radius:var(--panel-radius);margin:0 0 14px}.grammar-overview>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}.grammar-overview strong{font-size:19px;line-height:1.7;color:var(--ink)}.grammar-overview span{font-size:12px;color:var(--muted)}.grammar-overview progress{width:100%;height:6px;margin-top:12px;accent-color:var(--blue-dark);border:0;border-radius:6px;overflow:hidden}.grammar-overview progress::-webkit-progress-bar{background:var(--surface-alt)}.grammar-overview progress::-webkit-progress-value{background:var(--secondary-gradient)}
.grammar-resume,.grammar-review-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px;padding:14px 16px;background:var(--white);border:1px solid var(--panel-line);border-radius:var(--panel-radius)}.grammar-resume>span,.grammar-review-row>span{flex:1;min-width:160px;font-size:13px;line-height:1.9;color:var(--slate-text)}.grammar-resume button{font-size:14px;min-height:44px}.grammar-review-row button{font-size:12px;min-height:44px;flex-shrink:0}
.grammar-unit{margin:22px 0}.grammar-unit h2{display:flex;align-items:center;gap:10px;margin:0 0 9px;font-size:14px;font-weight:650;line-height:1.8;color:var(--slate-text)}.grammar-unit-number{font:600 12px/1.5 Inter,Arial,sans-serif;color:var(--muted)}.grammar-row{gap:12px;text-align:left;align-items:center}.grammar-row>span:first-child{min-width:0;flex:1}.grammar-pattern{display:block;font-family:'Noto Sans JP','Hiragino Sans',sans-serif;font-size:15px;line-height:1.65;color:var(--ink);overflow-wrap:anywhere}.grammar-row-title{display:block;font-size:12px;font-weight:400;line-height:1.9;margin-top:3px;color:var(--muted)}.grammar-status{font:600 10px/1.7 Inter,'Noto Sans Myanmar',sans-serif;color:var(--muted);flex-shrink:0}.grammar-status.is-complete{font-size:19px;color:var(--blue-dark)}.grammar-row small{font-size:11px;color:var(--muted);font-weight:400}.grammar-footnote{font-size:12px;line-height:2;color:var(--muted);margin:16px 0}
.grammar-lesson h1,.grammar-offer h1{font-size:24px;line-height:1.9;margin-bottom:16px}.grammar-explanation{padding:0;overflow:hidden;margin:16px 0}.grammar-pattern-banner{padding:20px 18px;background:var(--secondary-gradient);color:var(--white);font-family:'Noto Sans JP','Hiragino Sans',sans-serif;font-size:23px;line-height:1.8;font-weight:600;overflow-wrap:anywhere}.grammar-explanation .memory{padding:18px}.grammar-explanation .memory>p,.grammar-note p{font-size:14px;line-height:2.2;margin:0;color:var(--slate-text)}.grammar-note{margin-top:16px;border-top:1px solid var(--panel-line);padding-top:12px}.grammar-note summary{cursor:pointer;font-size:12px;line-height:2;color:var(--blue-dark);font-weight:600}.grammar-note p{padding-top:8px;font-size:12px}.grammar-examples{margin-top:22px}.grammar-examples h2{font-size:15px;margin-bottom:10px}.grammar-example{padding:16px 18px;border:1px solid var(--panel-line);border-radius:var(--panel-radius);background:var(--white);margin:10px 0}.grammar-example>.jp{font-size:20px;line-height:1.8;margin:0;overflow-wrap:anywhere;color:var(--ink)}.grammar-reading{display:block;font-family:'Noto Sans JP','Hiragino Sans',sans-serif;font-size:12px;line-height:1.8;color:var(--muted);margin-top:4px}.grammar-example .grammar-translation{font-size:13px;line-height:2;margin:8px 0 0;color:var(--slate-text)}.grammar-practice-intro{margin:20px 0}.grammar-practice-intro>span{display:block;font-size:12px;line-height:2;color:var(--muted);margin-bottom:12px}.grammar-practice-intro button{width:100%;font-size:17px}
.grammar-question-label{font-size:12px;color:var(--muted);line-height:2;margin:18px 0 6px}.grammar-question-prompt{font-size:19px;line-height:2;margin-bottom:16px}.grammar-question{padding:20px 18px;margin:12px 0 18px}.grammar-question>p{font-size:25px;line-height:1.9;margin:0;color:var(--ink);overflow-wrap:anywhere}.grammar-options{display:grid;gap:10px}.grammar-option{display:flex;align-items:center;gap:12px;min-height:62px;padding:12px 16px;background:var(--white);border:1px solid var(--control-border);border-radius:var(--button-radius);text-align:left;color:var(--ink)}.grammar-option-letter{display:grid;place-items:center;font:600 12px/1.5 Inter,Arial,sans-serif;width:26px;height:26px;border-radius:4px;background:var(--surface-alt);color:var(--muted);flex-shrink:0}.grammar-option>.jp{font-size:20px;line-height:1.6;flex:1;overflow-wrap:anywhere}.grammar-option.correct:disabled{border:2px solid var(--ink);background:var(--white);color:var(--ink);padding:11px 15px}.grammar-option.incorrect:disabled{border-color:var(--pink-dark);background:var(--surface);color:var(--ink)}.grammar-option-mark{font-size:20px;color:var(--ink)}.grammar-option.incorrect .grammar-option-mark{color:var(--pink-dark)}.grammar-feedback{padding:16px 0;background:none;border:0;border-top:1px solid var(--panel-line);border-radius:0;margin:18px 0 14px}.grammar-feedback strong{display:block;font-size:15px;line-height:2;color:var(--ink)}.grammar-feedback p{font-size:13px;line-height:2.1;margin:6px 0 0;color:var(--slate-text)}.grammar-feedback small{display:block;color:var(--muted);font-size:11px;line-height:2;margin-top:8px}.grammar-practice>.primary-button{width:100%;font-size:17px}.grammar-score{display:flex;flex-direction:column;align-items:center;padding:24px;background:var(--white);border:1px solid var(--panel-line);border-radius:var(--panel-radius);margin:20px 0}.grammar-score strong{font-size:36px;line-height:1.7;color:var(--ink)}.grammar-score span{font-size:12px;color:var(--muted);line-height:2}.grammar-result>p{font-size:14px;line-height:2;color:var(--slate-text)}.grammar-offer .grammar-pattern-banner{border-radius:var(--panel-radius);margin:20px 0}.grammar-offer h2{font-size:18px;line-height:2}.grammar-offer>p{font-size:14px;line-height:2.1;color:var(--slate-text)}
@media(max-width:350px){.grammar-pattern{font-size:13px}.grammar-row{padding:13px;gap:8px}.grammar-pattern-banner{font-size:20px}.grammar-question>p{font-size:22px}.grammar-question-prompt{font-size:17px}.grammar-option{padding:12px}.grammar-option.correct:disabled{padding:11px}.grammar-row-title{font-size:11px}.app-nav-item{font-size:9px}}
[data-checkout].is-loading>.checkout-label,[data-checkout].is-loading>.ui-icon{display:none}
[data-checkout].is-loading>.checkout-loading{display:flex}
[data-checkout].nav-row.is-loading:disabled{background:var(--white);color:var(--slate-text);border-bottom:1px solid var(--panel-line)}
[data-checkout].nav-row.is-loading .spinner{border-color:var(--control-border);border-top-color:var(--blue-dark)}

.grammar-question .jp{font-size:inherit;line-height:inherit}.grammar-practice ruby{ruby-align:center}.grammar-practice rt{font-size:10px;font-weight:400;line-height:1.5;color:var(--muted)}

/* Practice uses the existing neutral text/borders and pink action palette. */
body[data-screen="grammar-practice"] :is(button,summary):focus-visible{outline-color:var(--ink)}
.grammar-practice .grammar-note summary{color:var(--slate-text)}

/* HanziHero dashboard hierarchy: counted study actions, plain section
   headings and square character tiles. Gradients/type come from the app. */
.home-dashboard .home-intro{margin-bottom:16px}
.home-dashboard .home-title-row{align-items:center}
.home-dashboard .home-title-row h1{font-size:24px;line-height:1.8}
.home-dashboard .level-picker-trigger{min-width:96px;gap:8px}
.home-dashboard .home-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.home-study-choice{min-width:0}
.home-dashboard .home-study{--accent-gradient:var(--secondary-gradient);display:flex;flex-direction:column;gap:12px;min-height:148px;padding:14px 16px;border:0;border-radius:var(--panel-radius);background:var(--accent-gradient);color:var(--white);box-shadow:var(--card-shadow)}
.home-dashboard .home-study.revision{--accent-gradient:linear-gradient(to bottom,#fd2f68,#f51b57)}
.home-dashboard .home-study.is-empty{position:relative}
.home-study.is-empty::before{content:'';position:absolute;inset:0;background-image:url('/assets/ui/locked-stripes.webp');background-repeat:repeat;pointer-events:none}
.home-study.is-empty>*{position:relative;z-index:1}
.home-study-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.home-study-top>.ui-icon{width:28px;height:28px;flex-basis:28px}
.home-card-count{display:flex;align-items:baseline;gap:5px;font-size:11px;font-weight:500;line-height:1.5}
.home-card-count>[lang=en]{font-size:27px;font-weight:500}
.home-dashboard .home-study .home-card-title{font-size:20px;line-height:1.35;font-weight:600;margin-top:auto;color:var(--white)}
.home-dashboard .home-study .home-card-title [lang=en]{font-weight:600;letter-spacing:-.45px}
.home-dashboard .home-study .home-card-action{width:100%;min-height:0;padding:0;background:transparent;color:var(--white);font-size:13px;font-weight:500;line-height:1.9;gap:6px}
.home-dashboard .home-study .home-arrow{width:17px;height:17px;flex-basis:17px;margin-left:auto}
.home-dashboard .home-study .home-card-loading{font-size:12px;gap:6px}
.home-study .spinner{width:14px;height:14px;border-color:rgb(255 255 255 / .4);border-top-color:var(--white)}
.home-dashboard .home-study:active:not(:disabled),.home-dashboard .home-study:disabled{background:var(--accent-gradient);color:var(--white);border:0}
.home-dashboard .home-study:active:not(:disabled){box-shadow:var(--shadow);transform:translateY(1px)}
.home-dashboard .home-study:disabled{opacity:.75}
.home-dashboard .home-study:active:not(:disabled) .home-card-action{background:transparent}
.home-study-status{font-size:12px;line-height:1.9;font-weight:400;color:var(--muted);padding:8px 2px 0}
.home-dashboard .home-row{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:14px 0 0;min-height:76px;background:var(--white);border:1px solid var(--panel-line);border-radius:var(--panel-radius);box-shadow:var(--shadow)}
.home-dashboard .home-row .home-card-symbol{width:36px;min-width:36px;height:36px;flex-shrink:0;background:var(--secondary-gradient)}
.home-dashboard .home-row-copy{display:block;min-width:0;flex:1}
.home-dashboard .home-row .home-card-title{font-size:17px;line-height:1.7;color:var(--ink);letter-spacing:0}
.home-dashboard .home-row .home-card-description{font-size:12px;line-height:1.9;margin-top:2px;color:var(--slate-text)}
.home-dashboard .home-row .home-card-action{display:none}
.home-dashboard .home-row>.home-arrow{width:18px;height:18px;flex-basis:18px;color:var(--muted)}
.home-dashboard .home-row:active:not(:disabled){background:var(--surface)}
.home-section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.home-section-heading h2,.home-dashboard .coverage>h2{font-size:16px;font-weight:600;line-height:1.9;color:var(--slate-text)}
.home-section-link{display:flex;align-items:center;gap:3px;padding:0 0 0 8px;min-height:44px;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:500;white-space:nowrap}
.home-section-link .ui-icon{width:15px;height:15px;flex-basis:15px}
.home-section-link:active:not(:disabled){background:transparent;color:var(--ink)}
.upcoming-kanji{margin-top:20px;padding-top:12px;border-top:1px solid var(--panel-line)}
.upcoming-kanji-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.upcoming-kanji-tile{display:grid;place-items:center;aspect-ratio:1;background:var(--secondary-gradient);color:var(--white);border-radius:var(--tile-radius);box-shadow:var(--card-shadow);font-size:clamp(25px,7vw,42px);line-height:1}
.home-dashboard .coverage{margin-top:24px;padding-top:18px;border-top:1px solid var(--panel-line)}
.home-dashboard .daily-goal{margin-top:20px}
@media(max-width:350px){.home-dashboard .home-title-row h1{font-size:21px}.home-dashboard .level-picker-trigger{min-width:88px;font-size:13px;padding:8px 10px}.home-dashboard .home-cards{gap:10px}.home-dashboard .home-study{padding:12px;min-height:140px;gap:10px}.home-dashboard .home-study .home-card-title{font-size:16px;letter-spacing:-.4px}.home-dashboard .home-study .home-card-action{font-size:12px}.home-card-count>[lang=en]{font-size:24px}.home-dashboard .home-row{padding:12px;gap:10px}.home-dashboard .home-row .home-card-title{font-size:16px}.upcoming-kanji-grid{gap:6px}.upcoming-kanji-tile{font-size:24px}}

/* Owner usage reuses the settings/menu rows and shared app type and borders. */
.usage-page h2{margin-top:24px;font-size:20px}.usage-page h3{font-size:16px;line-height:1.8}
.usage-page .settings-note{font-size:12px;line-height:2;margin-top:8px}
.usage-page .menu-list{margin-top:12px}.usage-page .nav-row{min-height:54px;padding:12px 16px;align-items:flex-start}
.usage-page .nav-row strong{flex-shrink:0}.usage-page small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.usage-source{margin-top:18px;padding-top:14px;border-top:1px solid var(--panel-line)}
.usage-link{display:block;font-size:12px;color:var(--muted);margin:12px 0 8px}.usage-link input{display:block;width:100%;padding:8px;border:1px solid var(--control-border);background:var(--white);font:400 12px/1.8 Inter,Arial,sans-serif}

/* Two explicit faces; only the back's content can scroll, never its actions. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
body.swipe-study { overflow:hidden; }
body.swipe-study .app-shell { height:calc(100dvh - var(--app-top-inset)); min-height:0; display:flex; flex-direction:column; overflow:clip; }
body.swipe-study .app-header { flex-shrink:0; position:relative; }
body.swipe-study #content { flex:1; min-height:0; display:flex; flex-direction:column; padding:4px 0 calc(14px + var(--app-bottom-inset)); }
body.swipe-study .session-top { flex-shrink:0; margin-bottom:6px; min-height:24px; }
body.swipe-study .session-progress { flex-shrink:0; height:4px; margin:0 0 14px; }
.swipe-deck { position:relative; isolation:isolate; flex:1; min-height:0; margin:0 5px 8px; }
.swipe-underlay { position:absolute; inset:0; display:flex; flex-direction:column; pointer-events:none; border:1px solid var(--panel-line); background:var(--white); border-radius:var(--panel-radius); box-shadow:var(--card-shadow); overflow:hidden; transition:transform 180ms ease-out; }
.swipe-underlay-next { z-index:-1; transform:translateY(7px) scale(.98); }
.swipe-underlay-far { z-index:-2; transform:translateY(14px) scale(.96); }
.swipe-underlay>.flip-tap-hint { flex-shrink:0; padding:12px 0 18px; }
.swipe-deck.is-advancing .swipe-underlay-next { transform:translateY(0) scale(1); }
.swipe-card { position:relative; height:100%; touch-action:pan-y pinch-zoom; transform-origin:50% 80%; outline-offset:4px; cursor:pointer; }
.swipe-card[data-face="back"] { cursor:grab; }
.swipe-card.is-dragging { cursor:grabbing; user-select:none; }
.swipe-card img { -webkit-user-drag:none; user-select:none; }
.flip-card { width:100%; height:100%; perspective:1200px; }
.flip-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 280ms cubic-bezier(.2,.7,.2,1); }
.flip-card.is-flipped .flip-inner { transform:rotateY(180deg); }
.flip-face { position:absolute; inset:0; display:flex; flex-direction:column; border:1px solid var(--panel-line); border-radius:var(--panel-radius); background:var(--white); box-shadow:var(--card-shadow); backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; }
.flip-back { transform:rotateY(180deg); }
.flip-front-center { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:24px; }
.flip-kanji-box { display:grid; place-items:center; flex:none; width:clamp(150px,42vw,210px); height:clamp(150px,42vw,210px); background:var(--secondary-gradient); color:var(--white); font-size:clamp(96px,28vw,150px); line-height:1; border-radius:var(--button-radius); box-shadow:var(--shadow); }
.flip-tap-hint { color:var(--muted); font-size:12px; line-height:1.8; font-weight:400; text-align:center; padding:0 12px; }
.flip-front>.flip-tap-hint { flex-shrink:0; padding:12px 0 18px; }
.flip-heading { flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px 18px; background:var(--primary-gradient); color:var(--white); }
.flip-heading-kanji { display:block; font-size:46px; line-height:1.2; }
.flip-heading h2 { color:inherit; font-size:18px; line-height:1.8; margin-top:3px; font-weight:650; }
.flip-content { touch-action:pan-y pinch-zoom; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:10px 18px 14px; cursor:default; }
.flip-art { display:block; width:100%; height:clamp(84px,18dvh,150px); object-fit:contain; margin:0 auto 8px; }
.flip-components { margin:8px 0; padding:0; gap:10px; align-items:center; }
.flip-components .component { flex-direction:row; align-items:center; gap:6px; }
.flip-components .component .jp { font-size:21px; }
.flip-components .component small { font-size:11px; }
.flip-components .plus { margin:0; }
.flip-content .story { font-size:14px; line-height:1.9; }
.flip-content .story-kanji { font-size:17px; padding:1px 3px; }
.flip-content .reference { border-top:1px solid var(--panel-line); background:var(--white); margin-top:12px; }
.flip-content .reference summary { display:none; }
.flip-content .readings { margin:0; border:0; }
.flip-content .readings>div { padding:10px 4px; }
.flip-content .readings .jp { font-size:17px; }
.flip-content .readings b { margin-bottom:4px; font-size:11px; }
.flip-content .words { padding:0; }
.vocabulary-label { padding:12px 20px 0; }
.flip-content .vocabulary-label { padding:0; margin:12px 0 4px; font-size:12px; }
.flip-content .word { padding:8px 0; font-size:12px; line-height:1.8; }
.flip-content .word .jp { font-size:17px; }
.flip-content .word small { font-size:12px; }
.flip-actions { flex-shrink:0; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; margin:0 16px; padding:5px 0; border-top:1px solid var(--panel-line); }
.flip-actions button { border:0; background:transparent; min-height:44px; min-width:44px; padding:10px; display:grid; place-items:center; }
.flip-actions button:first-child { color:var(--teal); }
.flip-actions button:last-child { color:var(--blue-dark); }
.flip-actions button:active:not(:disabled) { background:var(--surface-alt); color:inherit; }
.swipe-stamp { position:absolute; top:18px; z-index:3; pointer-events:none; width:52px; height:52px; display:grid; place-items:center; border-radius:var(--button-radius); background:var(--white); box-shadow:var(--shadow); opacity:0; }
.swipe-stamp .ui-icon { width:32px; height:32px; }
.swipe-stamp-left { left:16px; color:var(--teal); }
.swipe-stamp-right { right:16px; color:var(--blue-dark); }
.swipe-hand { position:absolute; width:42px; height:50px; left:calc(50% - 21px); bottom:66px; pointer-events:none; color:var(--ink); filter:drop-shadow(0 2px 2px rgb(0 0 0 / .12)); }
.swipe-hand svg { width:100%; height:100%; }
.flip-card.is-compact .flip-heading { padding:7px 12px; }
.flip-card.is-compact .flip-heading-kanji { font-size:38px; }
.flip-card.is-compact .flip-heading h2 { font-size:16px; margin-top:0; }
.flip-card.is-compact .flip-art { height:84px; }
.flip-card.is-compact .flip-content { padding:8px 12px 10px; }
@media(max-height:600px) { body.swipe-study .app-header { min-height:54px; padding:6px 0; } body.swipe-study .session-progress { margin-bottom:9px; } }
@media(prefers-reduced-motion:reduce) { .flip-inner,.swipe-underlay { transition:none; } }