/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * Sinao-inspired application · white modules, dashed dividers, compact widgets.
 * Fresh layout system. Previous notebook/workspace styles are not loaded. */
@import url('/tokens.css');
.sin-kana-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:32px 16px 40px}.sin-kana-intro h1{font-size:clamp(32px,3.5vw,48px);line-height:1.22;max-width:13ch;margin:20px 0;letter-spacing:-.04em}.sin-kana-intro>p{font-size:15px;line-height:1.8;color:var(--color-muted);max-width:44ch}.sin-kana-method{display:flex;gap:20px;flex-wrap:wrap;margin-top:24px;font-size:12px;color:var(--color-muted)}.sin-kana-method span{display:flex;align-items:center;gap:8px}.sin-kana-method svg{width:17px;height:17px}.sin-kana-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}.sin-kana-path{display:flex;align-items:center;gap:12px;border:1px solid var(--color-rule);border-radius:16px;padding:16px;background:var(--color-surface)}.sin-kana-path>span{font:400 30px var(--font-japanese);flex-shrink:0}.sin-kana-path div{min-width:0}.sin-kana-path strong{font-size:13px;font-weight:500;overflow-wrap:anywhere}.sin-kana-path small{display:block;font-size:11px;margin-top:3px}.sin-kana-path>svg{margin-left:auto;width:16px}.sin-kana-path:hover{border-color:var(--color-accent)}.sin-kana-lab{padding:28px;background:var(--color-surface);border-radius:28px;max-width:580px;width:100%;justify-self:end}.sin-kana-lab>header{display:flex;align-items:center;justify-content:space-between;gap:16px}.sin-kana-lab h2{font-size:16px}.sin-script-picker{display:flex;gap:4px;padding:4px;background:var(--color-accent-soft);border-radius:50px}.sin-script-picker button{min-height:38px;border:0;border-radius:50px;background:none;padding:8px 16px;font-size:12px;white-space:nowrap}.sin-script-picker button[aria-pressed=true]{background:var(--color-accent);color:var(--color-accent-ink)}.sin-kana-display{display:flex;align-items:center;justify-content:center;gap:32px;min-height:190px;margin:16px 0}.sin-kana-display>#active-kana{font:400 120px/1.4 var(--font-japanese)}.sin-kana-display .kana-sound{display:grid;justify-items:center;gap:10px}.sin-kana-display #active-reading{font-size:20px;font-weight:400}.sin-kana-display .icon-button{background:var(--color-accent-soft);color:var(--color-accent)}.sin-kana-lab .kana-selector{margin:0 0 24px;gap:10px}.sin-kana-lab .kana-selector button{min-height:62px;border-radius:16px;background:var(--color-paper)}.sin-kana-lab .kana-selector button[aria-pressed=true]{background:var(--color-accent);color:var(--color-accent-ink)}.sin-kana-lab>footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px dashed var(--color-rule);padding-top:20px}.sin-kana-lab footer p{font-size:12px;color:var(--color-muted);max-width:24ch}.sin-compact-packages{padding:24px 16px 0;border-top:1px solid var(--color-rule)}.sin-compact-packages-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.sin-compact-packages-head h2{font-size:18px}.sin-compact-packages-head p{font-size:12px;color:var(--color-muted);margin-top:4px}.sin-compact-package-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.sin-compact-package-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:12px;padding:14px 16px;min-height:48px;background:var(--color-surface)}.sin-compact-package-links strong{font-size:13px;font-weight:400;min-width:0;overflow-wrap:anywhere}.sin-compact-package-links svg{width:16px;color:var(--color-muted)}.sin-compact-package-links a:hover{color:var(--color-accent)}.sin-collapsed-brand{display:none}.member-header .sin-nav-toggle{display:inline-flex;flex-shrink:0;border:1px solid var(--color-rule);width:44px;height:44px;border-radius:12px;background:var(--color-surface)}.sin-nav-toggle:hover{background:var(--color-paper-2)}body[data-member=true][data-sidebar-collapsed=true]{--sidebar-width:76px}body[data-member=true][data-sidebar-collapsed=true] .sin-expanded-brand,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-label{display:none}body[data-member=true][data-sidebar-collapsed=true] .sin-collapsed-brand{display:block}body[data-member=true][data-sidebar-collapsed=true] .sidebar-brand{padding:0 0 28px;justify-content:center}body[data-member=true][data-sidebar-collapsed=true] .member-sidebar .nav-link{justify-content:center;padding:10px;gap:0}body[data-member=true][data-sidebar-collapsed=true] .member-sidebar .nav-link span,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-account strong,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-account span{display:none}body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-account{padding:20px 0 0}body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-account .text-button{min-width:44px;justify-content:center}body[data-menu-open=true]{overflow:hidden}.mobile-drawer{position:fixed;inset:0 auto 0 0;margin:0;width:min(336px,calc(100vw - 24px));height:100dvh;max-height:100dvh;border-radius:0 24px 24px 0;overflow-y:auto;padding:24px}.drawer-head .brand-icon{width:36px;height:36px}.drawer-head h2{font-size:20px}
input[type=file]::file-selector-button{border:0;border-radius:8px;background:var(--color-paper-2);color:var(--color-ink);padding:8px 12px;margin-right:12px;font:400 12px var(--font-body);cursor:pointer}.selection-speech .sin-audio-head{grid-row:1;grid-column:1}.selection-speech .selection-speech-copy{grid-row:2;grid-column:1}.selection-speech .selection-speech-play{grid-row:3;grid-column:1}
.selection-speech{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:360px;padding:18px}.sin-audio-head{display:flex;align-items:center;gap:10px;border-bottom:1px dashed var(--color-rule);padding-bottom:10px}.sin-audio-head strong{font-size:13px;font-weight:500}.sin-audio-head .icon-button{margin-left:auto;width:32px;min-height:32px;padding:6px}.sin-audio-mark{display:grid;place-items:center;width:32px;height:32px;background:var(--color-accent-soft);border-radius:10px;color:var(--color-accent)}.sin-audio-mark svg{width:16px;height:16px}.selection-speech .sin-audio-copy{padding:0}.selection-speech .selection-speech-play{width:100%;border-radius:var(--radius-control)}
.sin-learn-table h3{font-size:13px;font-weight:500}.sin-learn-table .sin-table-name{min-width:0}.sin-cell-label{display:none}.sin-learn-table .package-actions{white-space:nowrap;flex-wrap:nowrap;align-items:center}.sin-learn-table .dashboard-package-link{min-width:36px;min-height:36px}.sin-learn-table td{vertical-align:middle}.sin-learn-table .sin-table-glyph{width:36px;height:36px}.sin-learn-actions .package-actions{margin-top:0}
.sin-micro-chart{display:block;width:100%;height:48px;stroke:none}.sin-micro-bar{fill:var(--color-paper-2);rx:5px}.sin-micro-bar.is-active{fill:var(--color-accent)}form.editor.sin-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}form.editor.sin-editor>label{margin:0}form.editor.sin-editor>:is(.article-compose,.quiz-builder-questions,.cms-card-fields,details,.inline-actions,.cms-help,.cms-upload-status,noscript,.notice){grid-column:1/-1}form.editor.sin-editor>.lesson-thumbnail-field{grid-column:2;grid-row:1/3;padding:20px;background:var(--color-paper);border-radius:var(--radius-control)}form.editor.sin-editor>label:has(textarea[name=summary]){grid-column:1/-1}form.editor.sin-editor>.check-label{grid-column:1/-1;padding-top:16px;border-top:1px dashed var(--color-rule)}.cms-card-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.article-compose{border-radius:var(--radius-control);overflow:clip}.article-modes button{border:0;border-radius:50px;padding:8px 14px;background:none;font-size:12px}.article-modes button[aria-pressed=true]{background:var(--color-accent);color:var(--color-accent-ink)}.article-toolbar{background:var(--color-paper);gap:8px}.article-toolbar button{border:0;border-radius:8px;padding:8px 10px;background:var(--color-surface);font-size:12px}.article-document{min-height:320px}.quiz-builder-question{border:0;border-radius:var(--radius-surface);padding:22px;background:var(--color-paper);margin-top:16px}.quiz-question-head{padding-bottom:16px;border-bottom:1px dashed var(--color-rule);margin-bottom:16px}.lesson-editor-settings{background:var(--color-paper);padding:12px 18px;border-radius:var(--radius-control)}
.writing-modal{border-radius:24px}.stroke-all{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;margin-top:12px;border:1px solid var(--color-rule);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-ink);font-size:12px}.sin-metric-foot .sin-goal-link{white-space:normal}.sin-guide[open]>p{padding-top:12px;border-top:1px dashed var(--color-rule)}
.sin-content-switch{justify-content:flex-start;gap:6px}.sin-content-switch .chip{gap:8px}.sin-content-switch .chip svg{width:17px;height:17px}.lesson-body{max-width:80ch}.sin-home-grid .sin-quick-practice{position:sticky;top:20px}.sin-audio-copy{padding-left:8px}.sin-record-panel th{background:var(--color-paper);border-radius:0}.sin-course-table tbody tr:last-child td{border-bottom:0}
.writing-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.writing-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.writing-layout h3{font-size:14px;font-weight:500;margin-bottom:12px}.writing-stage{position:relative;aspect-ratio:1;overflow:clip}.writing-stage #writing-pad{position:relative;display:block;width:100%;height:100%;background:var(--color-transparent);touch-action:none;user-select:none}.writing-stage #writing-guide{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;user-select:none;color:var(--color-paper-3);font:400 200px var(--font-japanese)}.writing-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;margin-top:12px}.writing-tools .btn{padding-inline:12px;font-size:11px}.writing-tabs{display:none}.stroke-step[aria-pressed=true]{border-radius:50%;background:var(--color-accent);border-color:var(--color-accent)}.stroke-controls .btn{border-radius:var(--radius-control)}.user-directory{padding:24px;background:var(--color-surface);border-radius:var(--radius-surface);margin-top:20px}.user-table-scroll,.email-table-wrap{border:0;border-radius:var(--radius-control);overflow-x:auto}.user-directory h3{margin-bottom:16px}.user-create-modes{display:flex;gap:6px}.user-create-modes a{border-radius:50px;padding:8px 16px;font-size:12px}.email-settings h3{margin-bottom:12px}.cms-editor-toolbar{border-bottom:1px dashed var(--color-rule)}.sin-modal-footer{padding-top:16px;margin-top:20px;border-top:1px dashed var(--color-rule)}
.member-layout>main{grid-column:2}.sin-quick-practice{align-self:start}.sin-welcome .mascot{display:block}.sin-search input[type=search][name]{border:0;background:var(--color-transparent);padding-inline:0}.sin-admin-overview{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px}.sin-table-scroll{overflow-x:auto;max-width:100%}.sin-table-name{display:flex;align-items:center;gap:12px;min-width:200px}.sin-table-name strong{font-weight:500;font-size:13px}.sin-table-name small{display:block;max-width:36ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;margin-top:3px}.sin-table-glyph{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--color-paper-2);font:400 22px var(--font-japanese);flex-shrink:0}.sin-table-actions{display:flex;align-items:center;gap:14px;white-space:nowrap;font-size:11px}.sin-record-title{font-size:13px;font-weight:500}.sin-admin-shortcuts{align-self:start}.sin-admin-shortcuts>p{font-size:12px;color:var(--color-muted);margin-top:4px}.sin-admin-shortcuts nav{display:grid;margin-top:20px}.sin-admin-shortcuts nav a{display:grid;grid-template-columns:20px minmax(0,1fr) 16px;align-items:center;gap:12px;padding:16px 0;font-size:12px;border-top:1px dashed var(--color-rule)}.sin-admin-shortcuts nav a>svg:last-child{width:16px}.sin-guide{margin-top:20px;font-size:12px}.sin-guide summary{font-size:13px}.sin-account-avatar{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent);font-size:22px}.sin-settings-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px}.sin-settings-grid>.learning-panel{align-self:start}.sin-record-panel{padding-top:8px}.sin-course-visual{height:90px}.sin-course-visual>svg{width:32px;height:32px}
.sin-public-nav{display:flex;align-items:center;gap:4px}.sin-header-context{font-size:16px;white-space:nowrap}.sin-header-search{margin-left:auto}.sin-header-search+ .member-header-actions{margin-left:0}.sin-welcome h2{font-size:30px;line-height:1.35;letter-spacing:-.03em;max-width:24ch}.activity-bar:not(.is-empty){fill:url(#sin-bar-stripe)}
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}html{scroll-padding-top:calc(var(--sticky-top) + 16px)}body{background:var(--color-frame);color:var(--color-ink);font:400 14px/1.6 var(--font-body);min-height:100dvh;padding:24px}body[data-member=true]{padding:24px}
img,video,canvas{max-width:100%;height:auto}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}svg.icon-defs{position:absolute;width:0;height:0;overflow:hidden}svg.mascot-rig{stroke:none}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}h1,h2,h3,h4,p,figure,dl{margin:0}h1,h2,h3,h4{font-family:var(--font-display);font-style:normal;font-weight:500;overflow-wrap:anywhere;line-height:1.4}h1{font-size:30px;letter-spacing:-.03em}h2{font-size:20px;letter-spacing:-.02em}h3{font-size:16px}h4{font-size:14px}p+p{margin-top:12px}small{font-size:12px;color:var(--color-muted)}
:is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}:is(button,.btn):active{transform:translateY(1px)}input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;min-width:0;min-height:46px;border:1px solid var(--color-rule);border-radius:var(--radius-control);padding:11px 14px;background:var(--color-surface)}textarea{resize:vertical;min-height:100px}input:read-only{background:var(--color-paper-2)}input[type=checkbox],input[type=radio]{accent-color:var(--color-accent);width:18px;height:18px;flex-shrink:0}label{display:grid;gap:8px;font-size:13px}form>label{margin-block:18px}
/* A label placed before its field sits as close to it as a wrapping label. */
form>label:has(+ :is(input:not([type=checkbox]):not([type=radio]),select,textarea)){margin-bottom:8px}
.profile-form>label:has(+ :is(input:not([type=checkbox]):not([type=radio]),select,textarea)){margin:16px 0 0}fieldset{min-width:0;border:1px dashed var(--color-rule);border-radius:var(--radius-control);padding:20px;margin:20px 0}legend{font-weight:500;padding:0 8px}summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}summary::-webkit-details-marker{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:fixed;top:8px;left:8px;z-index:100;transform:translateY(-200%);background:var(--color-ink);color:var(--color-surface);padding:12px}.skip-link:focus{transform:none}
.btn,.text-button,.icon-button,.menu-toggle,.text-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;white-space:nowrap}.btn{padding:11px 20px;background:var(--color-accent);color:var(--color-accent-ink);border-radius:var(--radius-control);font-size:13px;font-weight:500}.btn:hover{background:var(--color-accent-hover)}.btn.secondary{padding:10px 19px;background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-rule)}.btn.secondary:hover{background:var(--color-paper-2)}.btn.small{min-height:40px;padding:8px 14px}.btn.full{width:100%}.btn.danger{background:var(--color-error)}.btn.success{background:var(--color-success)}.text-button,.text-link{background:none;padding:6px 0;color:var(--color-accent);font-size:13px}.icon-button,.menu-toggle{width:44px;padding:10px;border-radius:50%;background:var(--color-surface);color:var(--color-ink)}.icon-button:hover,.menu-toggle:hover{background:var(--color-paper-2)}.inline-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.check-label{display:flex;align-items:center;gap:10px}.full{width:100%}
.topbar,.member-header{background:var(--color-paper);min-width:0}.topbar{border-radius:28px 28px 0 0;padding:18px 28px 0}.topbar-inner{display:flex;gap:32px;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:12px;min-width:0}.brand-logo{width:158px;height:52px;object-fit:contain}.header-actions,.member-header-actions{display:flex;align-items:center;gap:16px}.header-actions select,.member-header-actions select{width:110px;background:var(--color-transparent);border:0;font-size:12px}.login-link{display:inline-flex;align-items:center;gap:8px}.avatar,.member-profile{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent)}.member-profile span{font-weight:500}.desktop-navigation{display:flex;align-items:center;justify-content:space-between;padding-block:14px;border-bottom:1px solid var(--color-rule);gap:20px}.desktop-navigation nav{display:flex;gap:8px;align-items:center}.nav-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 14px;font-size:13px;white-space:nowrap;border-radius:var(--radius-control);color:var(--color-muted)}.nav-link.selected{color:var(--color-ink);background:var(--color-paper-2);font-weight:500}.nav-link:hover{color:var(--color-ink);background:var(--color-paper-2)}.nav-caption{font-size:11px;color:var(--color-muted)}.nav-divider{width:1px;height:20px;background:var(--color-rule);margin-inline:8px}.topbar .menu-toggle{display:none}
.app-layout{background:var(--color-paper);border-radius:0 0 28px 28px;min-height:calc(100dvh - 154px)}main{min-width:0;width:100%;padding:28px;outline:0}.member-header{margin-left:var(--sidebar-width);border-radius:0 28px 0 0;display:flex;align-items:center;gap:24px;padding:24px 32px 12px;min-height:88px}.member-header>.brand{display:none}.member-header-actions{margin-left:auto}.member-header .menu-toggle{display:none}.member-layout{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);min-height:calc(100dvh - 112px)}.member-sidebar{position:fixed;inset:24px auto 24px 24px;width:var(--sidebar-width);display:flex;flex-direction:column;padding:24px 16px;background:var(--color-paper);border-right:1px solid var(--color-rule);border-radius:28px 0 0 28px;z-index:10;overflow-y:auto}.sidebar-brand{padding:0 8px 28px}.member-sidebar-label{font-size:10px;letter-spacing:.08em;color:var(--color-muted);padding:0 14px;margin-bottom:12px}.member-sidebar nav{display:grid;gap:6px}.member-sidebar-account{margin-top:auto;padding:24px 12px 0;font-size:12px}.member-sidebar-account strong,.member-sidebar-account span{display:block;overflow-wrap:anywhere}.member-sidebar-account span{color:var(--color-muted);font-size:11px;margin-block:4px 12px}.member-layout main{padding:20px 32px 40px}.bottom-nav,.member-bottom{display:none}
.sin-page-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}.sin-page-bar p{font-size:13px;color:var(--color-muted);margin-top:4px}.sin-search{display:flex;align-items:center;gap:12px;width:min(380px,100%);background:var(--color-surface);border-radius:var(--radius-control);padding:4px 14px}.sin-search input{background:var(--color-transparent);border:0;padding:10px 0}.sin-search button{background:none;border:0}.sin-page-bar h1{font-size:28px}.sin-panel{background:var(--color-surface);border-radius:var(--radius-surface);padding:24px;min-width:0}.sin-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.sin-panel-head p{color:var(--color-muted);font-size:12px;margin-top:4px}.sin-grid{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}.sin-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.sin-metric{background:var(--color-surface);border-radius:var(--radius-surface);padding:22px;min-width:0}.sin-metric h2{font-size:14px;font-weight:400}.sin-number{display:block;font-size:30px;font-weight:500;line-height:1.4;margin:4px 0 18px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.sin-number small{font-size:13px;margin-left:6px}.sin-metric-foot{border-top:1px dashed var(--color-rule);padding-top:16px;font-size:12px;color:var(--color-muted);display:grid;gap:10px}.sin-meter{display:block;width:100%;height:12px;border:0;border-radius:20px;overflow:hidden;background:var(--color-paper-2)}progress{accent-color:var(--color-accent)}progress::-webkit-progress-bar{background:var(--color-paper-2);border-radius:20px}progress::-webkit-progress-value{background:repeating-linear-gradient(135deg,var(--color-transparent) 0 8px,var(--color-stripe) 8px 10px),var(--color-accent);border-radius:20px}progress::-moz-progress-bar{background:var(--color-accent);border-radius:20px}.sin-micro-bars{display:flex;align-items:flex-end;height:48px;gap:3px}.sin-micro-bars span{flex:1;background:var(--color-paper-2);border-radius:5px;min-height:3px}.sin-micro-bars span.is-active{background:var(--color-accent)}
.dashboard-shell,.dashboard-content{min-width:0}.dashboard-heading,.page-heading,.learning-heading,.section-heading,.section-head,.package-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.dashboard-heading p,.page-heading p,.learning-heading p,.section-heading p,.section-head p,.package-heading p{color:var(--color-muted);font-size:13px;margin-top:6px}.dashboard-text-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--color-accent);white-space:nowrap;min-height:44px}.dashboard-package-link{display:grid;place-items:center;min-width:40px;min-height:40px;border-radius:50%;color:var(--color-muted);background:var(--color-paper)}.dashboard-package-link:hover{color:var(--color-accent)}.dashboard-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.dashboard-section-heading h2{font-size:18px}.dashboard-learning,.dashboard-history{margin-block:20px;background:var(--color-surface);border-radius:var(--radius-surface);padding:24px}.dashboard-package-tools{display:flex;gap:12px;margin-bottom:20px}.dashboard-search{flex:1}.dashboard-filter{width:180px}.dashboard-package{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--color-rule)}.dashboard-package:last-child{border-bottom:0}.dashboard-package h3{font-size:14px;font-weight:500}.study-package-records,.package-actions{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--color-muted);margin-top:6px}.package-actions a{min-height:36px;display:inline-flex;align-items:center;gap:6px}.study-access-note{color:var(--color-muted);font-size:12px}.dashboard-result{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--color-rule);padding:16px 0}.dashboard-result h3{font-size:14px}.dashboard-result-score{text-align:right}.study-empty,.empty,.dashboard-empty,.chart-no-data{padding:32px;text-align:center;background:var(--color-surface);border-radius:var(--radius-surface);color:var(--color-muted)}.study-empty h3,.empty h2,.dashboard-empty h2{color:var(--color-ink);margin-bottom:8px}.study-empty .btn,.empty .btn{margin-top:16px}.study-empty>svg{width:36px;height:36px;margin-bottom:12px}.learning-note{color:var(--color-muted);font-size:11px;margin-top:8px}.sin-resume{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;margin-bottom:20px;background:var(--color-surface);border-radius:var(--radius-surface)}.sin-resume h2{font-size:16px}.sin-resume p{color:var(--color-muted);font-size:12px}.sin-chart-panel{background:var(--color-surface);border-radius:var(--radius-surface);padding:24px}.sin-chart-panel>summary{font-size:18px;display:none}.study-detail-content{padding-top:0}/* Same segmented control as the learning path view switch. */
.analytics-range{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--color-paper-2)}.analytics-range a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 14px;border-radius:10px;font-size:12px;color:var(--color-muted);text-decoration:none;white-space:nowrap}.analytics-range a:hover{color:var(--color-ink)}.analytics-range a[aria-current]{background:var(--color-surface);color:var(--color-ink);font-weight:500;box-shadow:0 1px 3px var(--color-shadow)}.analytics-summary{display:none}.learning-chart-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px}.learning-chart{min-width:0;padding:0}.learning-chart figcaption{margin-bottom:16px}.learning-chart h3{font-size:15px}.learning-chart figcaption p{color:var(--color-muted);font-size:11px;margin-top:4px}.activity-chart{width:100%;height:170px;overflow:visible;stroke:none}.activity-hit{fill:var(--color-transparent)}.activity-bar{fill:var(--color-accent);rx:5px}.activity-bar.is-empty{fill:var(--color-paper-3)}.activity-column{cursor:pointer}.activity-column[aria-pressed=true] .activity-bar{fill:var(--color-chart-secondary)}.chart-axis{display:flex;justify-content:space-between;color:var(--color-muted);font-size:11px;margin-block:12px}.chart-day-picker{display:none!important}.chart-selection{font-size:11px;color:var(--color-muted);min-height:24px;margin:8px 0}.chart-data summary{font-size:11px;color:var(--color-muted);justify-content:flex-start}.chart-frame{display:flex;height:170px;gap:10px}.chart-scale{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--color-muted)}.accuracy-chart{width:100%;height:170px}.chart-rules{stroke:var(--color-rule);stroke-dasharray:3 8}.chart-line{stroke:var(--color-accent);fill:none;stroke-width:2}.chart-dot{fill:var(--color-surface);stroke:var(--color-accent);stroke-width:2}.chart-table-wrap{overflow:auto}.learning-analytics>.learning-note{margin-top:12px}.analytics-comparison{font-size:12px;color:var(--color-chart-secondary)}
.sin-home-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px}.sin-welcome{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;background:var(--color-surface);border-radius:var(--radius-surface);margin-bottom:20px}.sin-welcome h1{font-size:30px;white-space:normal;max-width:24ch}.sin-welcome p{font-size:13px;color:var(--color-muted);max-width:58ch;margin-block:10px 18px}.sin-welcome .mascot{width:150px;height:150px;flex-shrink:0}.sin-welcome .mochi-button{padding:0;background:none;border:0}.sin-welcome .mochi-scene{position:relative;flex-shrink:0}.sin-welcome .mochi-message,.mochi-signature{display:none}.sin-welcome .mascot-toggle{bottom:0;right:0}.sin-course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.sin-course{display:flex;flex-direction:column;gap:16px;background:var(--color-surface);border-radius:var(--radius-surface);padding:22px}.sin-course-visual{height:100px;display:grid;place-items:center;background:var(--color-paper-2);border-radius:var(--radius-control);color:var(--color-ink);font:400 42px var(--font-japanese)}.sin-course h3{font-size:16px}.sin-course small{font-size:12px}.sin-course-footer{border-top:1px dashed var(--color-rule);padding-top:14px;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}.sin-quick-practice .kana-stage{display:grid;place-items:center;padding:20px}.kana-stage>#active-kana{font:400 86px var(--font-japanese)}.kana-sound{display:flex;align-items:center;gap:8px}.kana-selector{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-block:16px}.kana-selector button{border:0;border-radius:24px;background:var(--color-paper-2);padding:8px 0;display:grid;place-items:center;gap:2px}.kana-selector button span{font-size:20px}.kana-selector button[aria-pressed=true]{background:var(--color-accent);color:var(--color-accent-ink)}.kana-selector button[aria-pressed=true] small{color:inherit}.sin-quick-practice .board-lesson{border-top:1px dashed var(--color-rule);padding-top:16px}.sin-quick-practice .board-lesson h3{font-size:13px;margin-bottom:6px}.sin-quick-practice .inline-actions{margin-top:16px}.sin-package-index{background:var(--color-surface);border-radius:var(--radius-surface);padding:24px;margin-bottom:20px}.sin-package-index-head{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-bottom:20px}
.search{display:flex;align-items:center;gap:10px;background:var(--color-surface);border-radius:var(--radius-control);padding:4px 12px;max-width:440px}.search input{border:0;padding-inline:0}.package-tabs{display:flex;align-items:center;gap:6px;overflow-x:auto;scroll-padding:12px;padding:8px;background:var(--color-surface);border-radius:var(--radius-surface);margin:20px 0}.section-tab{display:flex;align-items:center;gap:8px;border-radius:var(--radius-control);padding:12px 18px;flex-shrink:0;color:var(--color-muted);font-size:13px;white-space:nowrap}.section-tab.is-selected{background:var(--color-paper-2);color:var(--color-ink)}.section-tab small{font-size:10px}.chips,.package-content-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 24px}.chip{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:8px 18px;border-radius:50px;color:var(--color-muted);background:var(--color-surface);font-size:12px;white-space:nowrap}.chip.active{background:var(--color-accent);color:var(--color-accent-ink)}.section-heading{padding:24px;background:var(--color-surface);border-radius:var(--radius-surface)}.badge,.dashboard-status{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:4px 9px;border-radius:30px;background:var(--color-success-soft);color:var(--color-success);white-space:nowrap}.badge.muted{background:var(--color-paper-2);color:var(--color-muted)}.lesson-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.lesson-row{display:grid;grid-template-columns:60px minmax(0,1fr);gap:16px;background:var(--color-surface);border-radius:var(--radius-surface);padding:22px;min-width:0}.lesson-symbol{display:grid;place-items:center;width:60px;height:60px;border-radius:16px;background:var(--color-paper-2);font:400 28px var(--font-japanese)}.lesson-thumbnail{width:60px;height:60px;border-radius:16px;object-fit:cover}.lesson-row-copy{min-width:0}.lesson-row h2{font-size:16px;margin-top:5px}.lesson-row p{font-size:12px;color:var(--color-muted);margin-block:8px}.lesson-row>.btn,.lesson-row>form{grid-column:1/-1;justify-self:end}.lesson-row-copy small{font-size:11px}.lesson-row :is(.symbol-long,.symbol-combination){font-size:16px}.package-quiz{display:flex;align-items:center;gap:20px;background:var(--color-surface);padding:22px;border-radius:var(--radius-surface);margin-bottom:16px}.package-quiz-copy{flex:1}.package-quiz-copy p{font-size:12px;color:var(--color-muted);margin-top:4px}.breadcrumb{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--color-muted);margin-bottom:24px;flex-wrap:wrap}.lesson-body{background:var(--color-surface);border-radius:var(--radius-surface);padding:32px;line-height:1.9;margin-block:20px;min-width:0;max-width:100%;overflow-wrap:anywhere}.prose{white-space:pre-wrap}.lesson-image{border-radius:var(--radius-surface);max-height:420px;width:auto}.lesson-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 0}.selection-hint,.source-note{font-size:11px;color:var(--color-muted)}.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:20px}.character{background:var(--color-surface);border-radius:var(--radius-surface);padding:20px}.character-top{display:flex;align-items:center;justify-content:space-between}.character-top>span{font:400 36px var(--font-japanese)}.character-write{margin-top:16px}.locked-panel{padding:40px;background:var(--color-surface);border-radius:var(--radius-surface);text-align:center}.locked-panel>svg{width:40px;height:40px;margin-bottom:16px}.locked-panel .btn{margin-top:20px}
.plan-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.plan{padding:28px;background:var(--color-surface);border-radius:var(--radius-surface);display:flex;flex-direction:column;gap:16px}.plan .price{font-size:32px;font-weight:500;border-block:1px dashed var(--color-rule);padding:20px 0}.plan .price small{font-size:12px}.plan form,.plan>.btn{margin-top:auto}.notice,.alert,.auth-error{padding:16px 20px;border-radius:var(--radius-control);margin-bottom:20px;font-size:13px}.notice{background:var(--color-success-soft);color:var(--color-success)}.alert,.auth-error{background:var(--color-rose-paper);color:var(--color-error)}.danger-link{color:var(--color-error)}.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:32px 0 0;margin-top:40px;color:var(--color-muted);font-size:12px}.footer nav{display:flex;gap:24px}.footer-signoff>span{font-size:16px;color:var(--color-ink)}.footer-signoff small{display:none}
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.learning-panel{padding:28px;background:var(--color-surface);border-radius:var(--radius-surface);min-width:0}.learning-panel h2{padding-bottom:18px;margin-bottom:18px;border-bottom:1px dashed var(--color-rule);font-size:18px}.profile-form{display:grid;gap:8px}.profile-form label{margin-top:12px}.profile-form small{margin-bottom:8px}.profile-form .btn{justify-self:start;margin-top:16px}.learning-panel>p{color:var(--color-muted);font-size:12px}.history-filters{display:flex;align-items:flex-end;gap:16px;padding:20px;background:var(--color-surface);border-radius:var(--radius-surface);margin-bottom:20px}.history-filters label{flex:1}.learning-timeline{display:grid;gap:12px;margin-top:20px}.learning-event{display:grid;grid-template-columns:36px minmax(0,1fr) 44px;align-items:center;gap:16px;padding:20px 24px;background:var(--color-surface);border-radius:var(--radius-control)}.learning-event h2{font-size:15px}.history-pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:24px;font-size:12px}
body[data-page=auth] .desktop-navigation,body[data-page=auth] .bottom-nav{display:none}
.admin-workspace>.dashboard-content>section,.admin-workspace>.dashboard-content>.admin-records{min-width:0}.admin-overview-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px}.dashboard-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.dashboard-progress,.dashboard-next,.dashboard-review,.dashboard-membership{padding:24px;background:var(--color-surface);border-radius:var(--radius-surface);min-width:0}.dashboard-progress-heading{display:flex;align-items:center;justify-content:space-between}.dashboard-progress-heading h2{font-size:14px}.dashboard-percentage{font-size:36px;line-height:1.3;margin-block:10px}.dashboard-progress p,.dashboard-next p,.dashboard-review p{color:var(--color-muted);font-size:12px}.admin-pending-link{display:flex;align-items:center;justify-content:space-between;padding-top:16px;margin-top:16px;border-top:1px dashed var(--color-rule);font-size:12px}.dashboard-next .btn{margin-top:20px}.dashboard-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.dashboard-stats>div{padding:20px;background:var(--color-surface);border-radius:var(--radius-surface)}.dashboard-stats dt{font-size:13px}.dashboard-stats dd{margin:4px 0;font-size:30px;display:flex;align-items:center;justify-content:space-between}.dashboard-stats .dashboard-stat-note{font-size:11px;color:var(--color-muted)}.dashboard-stats dd svg{color:var(--color-muted)}.dashboard-columns{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px}.dashboard-aside{display:grid;align-content:start;gap:20px}.dashboard-review nav{display:grid;margin-top:16px}.dashboard-review nav a{border-top:1px dashed var(--color-rule);justify-content:space-between}.dashboard-membership .dashboard-text-link{display:flex;justify-content:space-between}.dashboard-member{display:flex;gap:12px;align-items:center;margin-block:16px}.dashboard-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--color-paper-2)}.dashboard-member strong{font-size:13px}.dashboard-member p{font-size:11px;color:var(--color-muted);overflow-wrap:anywhere}.dashboard-plan{display:flex;justify-content:space-between;padding-block:16px;border-top:1px dashed var(--color-rule);font-size:12px}.admin-guide{margin-top:20px;padding:16px 24px;background:var(--color-surface);border-radius:var(--radius-surface);font-size:12px}.package-toolbar{display:flex;align-items:center;justify-content:space-between}.eyebrow{color:var(--color-muted);font-size:11px}.package-heading{padding:24px;background:var(--color-surface);border-radius:var(--radius-surface)}.admin-records{display:grid;gap:10px}.admin-records>article{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--color-surface);border-radius:var(--radius-control);padding:18px 24px}.admin-records h3{font-size:14px}.admin-records p{font-size:11px;color:var(--color-muted)}.admin-records .inline-actions{gap:10px}.admin-records .text-link{font-size:11px}.editor{max-width:1040px;background:var(--color-surface);border-radius:var(--radius-surface);padding:28px;margin-top:20px}.editor label{margin-block:16px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.panel{background:var(--color-surface);border-radius:var(--radius-surface);padding:24px;margin-top:20px}.editor-related .inline-actions{margin-top:16px}.cms-help{font-size:12px;color:var(--color-muted)}.email-settings,.email-accounts,.email-outbox,.user-create,.user-access-panel,.transfer-export,.transfer-import{background:var(--color-surface);border:0!important;border-radius:var(--radius-surface);padding:24px;margin-top:20px}.user-create-modes a[aria-current],.user-create-modes .active{background:var(--color-accent-soft);color:var(--color-accent)}.table-wrap,.user-table-wrap{overflow-x:auto;border-radius:var(--radius-surface);background:var(--color-surface)}table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}th{font-weight:400;color:var(--color-muted);white-space:nowrap}td,th{text-align:left;padding:15px 18px;border-bottom:1px solid var(--color-rule)}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:var(--color-paper)}.admin-nav-count{margin-left:auto;background:var(--color-accent);color:var(--color-accent-ink);font-size:10px;border-radius:20px;padding:1px 7px}.admin-member-link{margin-top:18px;border-top:1px dashed var(--color-rule)}
dialog{padding:0;border:0;background:var(--color-surface);color:var(--color-ink);border-radius:24px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 48px);box-shadow:0 24px 80px var(--color-overlay)}dialog::backdrop{background:var(--color-overlay);backdrop-filter:blur(4px)}.sin-dialog-title{display:flex;align-items:center;gap:14px}.sin-dialog-title>svg{width:22px;height:22px;color:var(--color-accent)}.sin-dialog-title p{font-size:12px;color:var(--color-muted);margin-top:2px}.mobile-drawer{width:360px;margin:24px auto;max-height:calc(100dvh - 48px);padding:24px}.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.drawer-head h2{font-size:20px}.mobile-drawer nav{display:grid;gap:8px}.drawer-auth{display:grid;gap:10px;border-top:1px dashed var(--color-rule);padding-top:20px;margin-top:20px}.writing-modal{width:760px}.writing-modal-head{background:var(--color-surface);padding:20px 24px;border-bottom:1px dashed var(--color-rule)}.writing-heading #writing-symbol{background:var(--color-accent-soft);border-radius:16px;width:54px;height:54px;display:grid;place-items:center;font-size:30px}.writing-heading h2{font-size:20px}.writing-body{background:var(--color-paper);padding:24px}.writing-tabs{background:var(--color-surface);border:0;border-radius:50px;padding:5px;display:flex;gap:5px}.writing-tabs button{flex:1;border:0;border-radius:50px;padding:10px 16px;color:var(--color-muted);background:none}.writing-tabs button[aria-selected=true]{background:var(--color-accent);color:var(--color-accent-ink)}.stroke-order,.writing-practice{background:var(--color-surface);border-radius:var(--radius-surface);padding:20px}.writing-stage,.stroke-demo{border-radius:var(--radius-control)}.stroke-controls{background:var(--color-surface);border-top:1px dashed var(--color-rule);padding:16px 24px}.quiz-title-dialog{width:480px;padding:24px}.quiz-title-dialog .editor{padding:0;margin:20px 0 0;border:0;border-radius:0}.quiz-title-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px dashed var(--color-rule)}.quiz-title-heading h2{font-size:20px}.learning-fullscreen-gate{width:460px;padding:28px}.learning-fullscreen-gate>h2{font-size:22px;margin-bottom:12px}.learning-fullscreen-gate>p{color:var(--color-muted);font-size:13px}.learning-fullscreen-gate .inline-actions{margin-top:24px;padding-top:20px;border-top:1px dashed var(--color-rule)}.selection-speech{border:0;border-radius:20px;box-shadow:var(--shadow-soft);background:var(--color-surface)}.audio-status{position:fixed;right:24px;bottom:24px;padding:12px 20px;border-radius:var(--radius-control);background:var(--color-ink);color:var(--color-surface);z-index:100}.audio-status:empty{display:none}.question-choice{border:1px solid var(--color-rule);border-radius:var(--radius-control);padding:16px;background:var(--color-surface);margin:8px 0}.question-choice:has(input:checked){background:var(--color-accent-soft);border-color:var(--color-accent)}.learning-fullscreen-gate .sin-dialog-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--color-accent-soft);color:var(--color-accent);margin-bottom:16px}
@media(max-width:1199px){.sin-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.sin-home-grid{grid-template-columns:minmax(0,1fr) 300px}.member-layout main{padding-inline:24px}.member-header{padding-inline:24px}.header-actions{gap:8px}.nav-caption{display:none}.dashboard-columns{grid-template-columns:minmax(0,1fr)}.dashboard-aside{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1023px){body,body[data-member=true]{padding:12px}.member-header{margin:0;border-radius:24px 24px 0 0;padding:16px 20px}.member-header>.brand{display:flex}.member-header .menu-toggle,.topbar .menu-toggle{display:inline-flex}.member-sidebar{display:none}.member-layout{display:block}.member-layout main{padding:20px 20px 100px}.topbar{padding:16px 20px 0}.desktop-navigation{display:none}.topbar-inner{gap:16px}.app-layout{border-radius:0 0 24px 24px}main{padding:24px 20px 100px}.bottom-nav,.member-bottom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;z-index:20;inset:auto 12px 12px;background:var(--color-surface);border-radius:20px;padding:8px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:var(--shadow-soft)}.bottom-nav a,.member-bottom a,.member-bottom button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;min-height:48px;white-space:nowrap;background:none;border:0;color:var(--color-muted)}.bottom-nav [aria-current],.member-bottom [aria-current]{color:var(--color-accent)}.sin-home-grid{grid-template-columns:minmax(0,1fr)}.sin-quick-practice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}.sin-quick-practice>.sin-panel-head{grid-column:1/-1}.sin-quick-practice .board-lesson{border:0}.character-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sin-page-bar{align-items:flex-start}.sin-search{max-width:320px}.sin-welcome h1{font-size:26px}}
@media(max-width:767px){.sin-page-bar{flex-direction:column;gap:16px}.sin-search{width:100%;max-width:none}.sin-welcome{padding:24px}.sin-welcome h1{font-size:25px}.sin-welcome .mascot{width:110px;height:110px}.sin-metrics{gap:12px}.sin-metric{padding:18px}.sin-number{font-size:26px}.sin-grid,.learning-chart-grid,.profile-grid{grid-template-columns:minmax(0,1fr)}.sin-course-grid{gap:12px}.sin-course{padding:18px}.lesson-list{grid-template-columns:minmax(0,1fr)}.dashboard-heading,.page-heading,.learning-heading,.section-head,.package-heading{align-items:flex-start;flex-direction:column;gap:12px}.section-heading{align-items:flex-start}.search{width:100%;max-width:none}.plan-list{grid-template-columns:minmax(0,1fr)}.history-filters{flex-wrap:wrap}.history-filters label{flex:1 1 40%}.history-filters>.btn{width:100%}.dashboard-overview{grid-template-columns:minmax(0,1fr)}.dashboard-stats{gap:10px}.dashboard-stats>div{padding:16px}.dashboard-stats dd{font-size:26px}.dashboard-stats dd svg{display:none}.dashboard-stats .dashboard-stat-note{font-size:10px}.dashboard-aside{grid-template-columns:minmax(0,1fr)}.admin-records>article{flex-direction:column;align-items:flex-start;padding:20px}.editor{padding:20px}.form-grid{grid-template-columns:minmax(0,1fr)}.package-quiz{flex-wrap:wrap}.package-quiz form{margin-left:auto}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer{flex-direction:column;align-items:flex-start;gap:12px}.header-actions>.btn,.header-actions .login-link{display:none}.sin-resume{align-items:flex-start;flex-direction:column}.lesson-body{padding:24px}.sin-panel,.dashboard-learning,.dashboard-history,.sin-chart-panel{padding:20px}}
@media(max-width:479px){body,body[data-member=true]{padding:8px}.topbar{padding:12px 14px 0}.member-header{padding:12px 14px;gap:8px}.brand-logo{width:130px;height:44px}.header-actions,.member-header-actions{gap:2px}.header-actions select,.member-header-actions select{width:78px;padding:8px 3px;font-size:11px}.member-profile{width:30px;height:30px}.member-header .menu-toggle,.header-actions .menu-toggle{width:36px}.member-layout main,main{padding-inline:14px}.sin-welcome{padding:20px;gap:12px}.sin-welcome .mochi-scene{display:none}.sin-welcome h1{font-size:24px}.sin-course-grid{grid-template-columns:minmax(0,1fr)}.sin-quick-practice{display:block}.sin-quick-practice .board-lesson{border-top:1px dashed var(--color-rule)}.sin-metric h2{font-size:12px}.sin-number{font-size:25px}.sin-metric-foot{font-size:11px}.sin-metrics{gap:10px}.sin-metric{padding:16px}.dashboard-package-tools{flex-direction:column}.dashboard-filter{width:100%}.dashboard-stats{grid-template-columns:minmax(0,1fr)}.dashboard-stats>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px}.dashboard-stats .dashboard-stat-note{grid-column:1/-1}.dashboard-stats dd{margin:0}.bottom-nav,.member-bottom{inset:auto 8px 8px}.sin-panel-head{flex-direction:column;gap:12px}.character-grid{grid-template-columns:minmax(0,1fr)}.quiz-title-dialog{padding:20px}.learning-fullscreen-gate{padding:24px}.writing-modal-head,.writing-body{padding:16px}.writing-modal{max-height:calc(100dvh - 24px);max-width:calc(100vw - 16px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}:is(button,.btn):active{transform:none}}
@media(max-width:1199px){.sin-public-nav .nav-link{padding:8px 10px;font-size:12px}.sin-public-nav .nav-divider{display:none}}
/* The page search on materials repeats the header search, so it only shows while the header search is hidden. */@media(min-width:1024px){.sin-page-search{display:none}.sin-page-bar:has(>.sin-page-search):not(:has(.path-back)){margin-bottom:0}}@media(max-width:1023px){.sin-public-nav,.sin-header-context,.sin-header-search{display:none}.sin-welcome h2{font-size:26px}}
@media(max-width:1199px){.sin-admin-overview{grid-template-columns:minmax(0,1fr)}.sin-admin-shortcuts nav{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}}
@media(max-width:767px){.sin-settings-grid{grid-template-columns:minmax(0,1fr)}.sin-admin-shortcuts nav{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.writing-layout{display:block}.writing-tabs{display:flex}.writing-stage #writing-guide{font-size:180px}.writing-modal .writing-practice,.writing-modal .stroke-order{padding:16px}}
@media(max-width:767px){.sin-home-grid .sin-quick-practice{position:static}.sin-content-switch .chip{padding:8px 12px}}
@media(max-width:479px){.sin-goal-link>span{display:none}.sin-goal-link{justify-self:end;min-width:44px;min-height:44px}}
@media(min-width:701px){.writing-modal .writing-tabs{display:none}}
@media(max-width:700px){.writing-modal .writing-tabs{display:flex}}
@media(max-width:767px){form.editor.sin-editor{grid-template-columns:minmax(0,1fr)}form.editor.sin-editor>.lesson-thumbnail-field{grid-column:1;grid-row:auto}.cms-card-fields{grid-template-columns:minmax(0,1fr)}}
@media(max-width:767px){.sin-learn-table thead{display:none}.sin-learn-table tbody,.sin-learn-table{display:block}.sin-learn-table tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:16px 0;border-bottom:1px solid var(--color-rule);gap:12px}.sin-learn-table td{display:block;padding:0;border:0;font-size:16px}.sin-learn-title,.sin-learn-actions{grid-column:1/-1}.sin-cell-label{display:block;font-size:10px;color:var(--color-muted);margin-bottom:4px}.sin-learn-actions .package-actions{justify-content:flex-end;gap:16px}.sin-learn-table .sin-table-name{gap:10px}.sin-learn-table .study-package-title{white-space:normal;overflow-wrap:anywhere}}
@media(max-width:1023px){.member-header .sin-nav-toggle{order:3}.member-header .brand{order:0}.member-header-actions{order:2}.sin-kana-home{gap:28px;padding-inline:4px}.sin-kana-lab{padding:24px}.sin-kana-lab>header{flex-direction:column;align-items:flex-start}.sin-compact-package-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){.sin-kana-home{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:20px;padding-bottom:28px}.sin-kana-intro h1{font-size:34px;max-width:20ch;margin-block:16px}.sin-kana-intro>p{font-size:14px}.sin-kana-lab{justify-self:stretch;max-width:none}.sin-kana-lab>header{flex-direction:row;align-items:center}.sin-kana-display{min-height:150px;margin:8px 0}.sin-kana-display>#active-kana{font-size:100px}.sin-kana-method{margin-top:16px}.sin-kana-paths{margin-top:20px}.sin-compact-packages{padding-inline:4px}.sin-compact-packages-head{flex-direction:column;align-items:flex-start;gap:8px}.sin-compact-package-links{grid-template-columns:repeat(2,minmax(0,1fr))}.sin-kana-lab>footer{flex-direction:column;align-items:stretch;gap:12px}.sin-kana-lab footer p{max-width:none;text-align:center}.sin-kana-lab footer .btn{width:100%}.sin-kana-lab .kana-selector{margin-bottom:16px}}
@media(max-width:479px){.member-header .sin-nav-toggle{width:36px;height:40px;min-height:40px}.sin-kana-home{padding-inline:0}.sin-kana-intro h1{font-size:31px}.sin-kana-lab{padding:20px}.sin-kana-lab>header{align-items:flex-start;flex-direction:column;gap:12px}.sin-script-picker{width:100%}.sin-script-picker button{flex:1}.sin-kana-path{padding:12px;gap:8px}.sin-kana-path strong{font-size:12px}.sin-kana-path>span{font-size:24px}.sin-kana-path>svg{display:none}.sin-compact-package-links a{padding:12px}.sin-kana-lab .kana-selector{gap:6px}}
@media(max-width:359px){.member-header .brand-logo{width:110px}.member-header-actions select{width:72px}}
.member-header .sin-nav-toggle{display:inline-flex}.mobile-drawer{position:fixed;inset:0 auto 0 0;margin:0;width:min(336px,calc(100vw - 24px));height:100dvh;max-height:100dvh;border-radius:0 24px 24px 0;overflow-y:auto;padding:24px}
@media(max-width:479px){.sin-kana-method{display:none}.sin-kana-paths{margin-top:16px}.sin-kana-lab h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.sin-kana-display{min-height:120px;margin-block:6px}.sin-kana-display>#active-kana{font-size:90px}.sin-kana-lab .kana-selector button{min-height:50px;padding:6px 0}.sin-kana-lab footer p{display:none}.sin-kana-lab>footer{padding-top:16px}.sin-kana-home{gap:20px}.sin-kana-intro>p{font-size:13px}.sin-kana-intro h1{font-size:30px}}
.sin-kana-intro{display:grid;grid-template-columns:minmax(0,1fr) 180px;column-gap:20px;align-items:start}.sin-kana-intro h1{grid-column:1;grid-row:1;max-width:none;align-self:center;margin:0}.sin-kana-intro>p{margin-top:16px}.sin-kana-intro>p,.sin-kana-intro>.sin-kana-method,.sin-kana-intro>.sin-kana-paths{grid-column:1/-1}.sin-kana-coach{position:relative;grid-column:2;grid-row:1;align-self:center;display:grid;gap:10px;width:180px;isolation:isolate}.sin-kana-coach .mochi-button{display:block;width:100%;height:180px;border:0;padding:0;background:var(--color-transparent)}.sin-kana-coach .mascot{display:block;width:100%;height:100%}.sin-kana-coach .mochi-message{position:static;width:100%;padding:8px 12px;border-radius:16px;background:var(--color-surface);box-shadow:var(--shadow-soft);text-align:center;font-size:12px;pointer-events:none}.sin-kana-coach .mochi-message small{display:block;font-size:10px}.sin-kana-coach .mascot-toggle{right:0;bottom:0;width:44px;height:44px}
@media(min-width:768px) and (max-width:1199px){.sin-kana-intro{grid-template-columns:minmax(0,1fr) 130px}.sin-kana-coach{width:130px}.sin-kana-coach .mochi-button{height:130px}.sin-kana-coach .mochi-message{font-size:11px}.sin-kana-intro h1{font-size:34px}.sin-kana-intro>p{font-size:13px}}
@media(max-width:767px){.sin-kana-intro{grid-template-columns:minmax(0,1fr) 110px;column-gap:16px}.sin-kana-coach{width:110px;gap:8px}.sin-kana-coach .mochi-button{height:110px}.sin-kana-coach .mochi-message{font-size:11px;padding:6px 8px}.sin-kana-coach .mascot-toggle svg{width:16px;height:16px}}

/* Pagination: numbered pages with first/last and previous/next steps.
   Phones get a compact "3 / 20" between the steps instead of numbers. */
.list-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:24px 0}
.list-pagination-count{margin:0;font-size:13px;color:var(--color-muted);font-variant-numeric:tabular-nums}
.pager{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.pager li{display:flex;margin:0}
.pager-page,.pager-step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:40px;padding:0 8px;border:1px solid var(--color-rule);border-radius:10px;background:var(--color-surface);color:var(--color-ink);font-size:14px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap;transition:border-color .15s,background-color .15s,color .15s}
.pager-step.is-labelled{padding:0 14px 0 10px}
.pager li:nth-last-child(2)>.pager-step{padding:0 10px 0 14px}
.pager-step svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
a.pager-page:hover,a.pager-step:hover{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent);text-decoration:none}
a.pager-page:active,a.pager-step:active{transform:translateY(1px)}
.pager-page[aria-current=page]{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-accent-ink);cursor:default}
.pager-step[aria-disabled=true]{opacity:.4;cursor:not-allowed}
.pager-gap{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:40px;color:var(--color-muted);letter-spacing:.1em}
.pager .pager-compact{display:none}
@media(max-width:1023px){
 .pager-step.is-labelled{padding:0 8px}
 .pager-step.is-labelled>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(max-width:639px){
 .list-pagination{flex-direction:column;align-items:stretch;gap:12px}
 .list-pagination-count{text-align:center}
 .pager{justify-content:center}
 .pager .pager-number{display:none}
 .pager .pager-compact{display:flex;flex:1;justify-content:center}
 .pager-compact .pager-page{width:100%;max-width:160px;background:var(--color-paper);border-color:var(--color-rule);color:var(--color-ink)}
 .pager-page,.pager-step{min-width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.pager-page,.pager-step{transition:none}a.pager-page:active,a.pager-step:active{transform:none}}

/* Community unread badges in the member navigation and the mobile menu button. */
.nav-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:auto;padding:0 6px;border-radius:99px;background:var(--color-accent);color:var(--color-accent-ink);font:600 11px/1 var(--font-body);font-style:normal}
body[data-member=true][data-sidebar-collapsed=true] .member-sidebar .nav-link{position:relative}
body[data-member=true][data-sidebar-collapsed=true] .member-sidebar .nav-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:9px}
.member-bottom button{position:relative}
.nav-dot{position:absolute;top:8px;right:calc(50% - 18px);width:9px;height:9px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 2px var(--color-surface)}
/* Public header: the learning path adds a sixth destination; keep the logo whole. */
.topbar .brand{flex-shrink:0}
.nav-short{display:none}
/* Public desktop nav: text links at every width, so the bar looks the same
 * before and after a breakpoint; short labels where the full ones do not fit. */
@media(min-width:1024px){.sin-public-nav .nav-link svg{display:none}}
@media(min-width:1024px) and (max-width:1439px){.sin-public-nav .nav-link{padding-inline:8px}.sin-public-nav .nav-full{display:none}.sin-public-nav .nav-short{display:inline}}
@media(min-width:1440px) and (max-width:1679px){[data-lang=fil] .sin-public-nav .nav-full{display:none}[data-lang=fil] .sin-public-nav .nav-short{display:inline}}
@media(min-width:1024px) and (max-width:1199px){.topbar-inner{gap:16px}.topbar .brand-logo{width:140px}.sin-public-nav{gap:0}.sin-public-nav .nav-link{padding:8px 6px}.header-actions{gap:10px}.login-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}



/* Sticky header. The public top bar and the learner header stay in view on
   every page. --sticky-top is where the page's own sticky parts start (the
   dictionary search bar, the path aside, the lesson rail): below the header
   (56px + its rule on phones and tablets, where mobile-app.css pins it), and
   on wide screens below the 24px frame gutter too. */
:root{--sticky-top:calc(57px + env(safe-area-inset-top))}
@media(min-width:1024px){
 :root{--sticky-top:88px}
 .topbar,.member-header{position:sticky;top:24px;z-index:var(--z-header)}
 /* Compact bars: 64px, set by the 44px nav links, menu button and search. */
 .topbar{padding-block:10px}
 .topbar .brand-logo{width:126px;height:42px}
 .member-header{min-height:0;padding-block:10px}
 .member-header .sin-search{padding-block:0;min-height:44px}
 .member-header .sin-search input[type=search][name]{min-height:40px;padding-block:8px}
 .header-actions select,.member-header-actions select{height:40px;min-height:40px}
 /* Frame-coloured copies of the header above it fill the gutter and the
    rounded corners, so scrolled content never shows around the header. */
 .topbar{box-shadow:0 1px 0 var(--color-rule),-24px -24px 0 var(--color-frame),24px -24px 0 var(--color-frame)}
 /* The learner header also covers the gutter above the fixed sidebar; the
    sidebar paints over the part of that copy that reaches below the gutter. */
 .member-header{box-shadow:0 1px 0 var(--color-rule),0 -24px 0 var(--color-frame),24px -24px 0 var(--color-frame),calc(-1 * var(--sidebar-width)) -24px 0 var(--color-frame)}
}
.sin-public-nav .nav-drawer-only{display:none}

/* Guest shell (24 October 2026). Guests get the learner header, sidebar and
   dock. Their home takes the Progres kamu place, the account block offers
   sign-up and sign-in, and destinations that need an account carry a small
   lock and open the sign-in dialog (login-gate.js). */
.member-login{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:var(--radius-control);color:var(--color-ink);font-size:13px;font-weight:500;white-space:nowrap}
.member-login:hover{background:var(--color-paper-2)}
.member-login svg{width:18px;height:18px}
.member-register{white-space:nowrap}
.nav-link .nav-gate{width:14px;height:14px;margin-left:auto;color:var(--color-muted);opacity:.75}
body[data-sidebar-collapsed=true] .member-sidebar .nav-gate{display:none}
.member-sidebar-guest{display:grid;gap:8px;padding:24px 0 0}
.member-sidebar-guest .btn{min-height:44px}
.member-sidebar-guest .btn svg{width:18px;height:18px}
.member-sidebar-guest .btn span{display:inline;margin:0;color:inherit;font-size:inherit}
.login-gate{box-sizing:border-box;width:min(420px,calc(100% - 32px));max-width:none;margin:auto;padding:0 0 22px;overflow:auto;overscroll-behavior:contain}
.login-gate-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 14px}
.login-gate-head h2{margin:0;font-size:18px;font-weight:500}
.login-gate-close{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border:0;border-radius:12px;background:var(--color-paper-2);color:var(--color-ink);cursor:pointer}
.login-gate-close svg{width:18px;height:18px}
.login-gate-form{padding:0 22px}
.login-gate-form .btn{margin-top:4px}
.login-gate-foot{padding:12px 22px 0}
.login-gate-foot .text-link{min-height:40px}

/* Sign-in pages (24 October 2026). /login, /register and the account
   security forms are one surface in the learner shell, built like the
   sign-in dialog: a Masuk | Daftar switch in place of a page title, the
   fields, one full-width button, then the secondary links. */
.auth-card{width:100%;max-width:440px;margin:clamp(0px,4vh,40px) auto 0;padding:24px;border-radius:var(--radius-surface);background:var(--color-surface)}
.auth-tabs{display:flex;gap:4px;margin:0 0 24px;padding:4px;border-radius:14px;background:var(--color-paper-2)}
.auth-tabs a{display:inline-flex;flex:1;align-items:center;justify-content:center;min-height:40px;padding:8px 12px;border-radius:10px;font-size:13px;color:var(--color-muted);text-align:center}
.auth-tabs a:hover{color:var(--color-ink)}
.auth-tabs a[aria-current=page]{background:var(--color-surface);color:var(--color-ink);font-weight:500;box-shadow:0 1px 3px var(--color-shadow)}
.auth-fields{display:grid;gap:16px}
.auth-field,.account-security .auth-fields>label{display:grid;gap:8px;min-width:0;margin:0;font-size:13px}
.auth-field>label{margin:0;font-size:13px}
.auth-password{position:relative}
.auth-password:has(.auth-password-toggle:not([hidden])) input{padding-right:52px}
.auth-password-toggle{position:absolute;top:50%;right:4px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:10px;background:none;color:var(--color-muted);transform:translateY(-50%)}
.auth-password-toggle:hover{background:var(--color-paper-2);color:var(--color-ink)}
.auth-password-toggle svg{width:20px;height:20px}
.auth-password-toggle[hidden],.auth-caps[hidden]{display:none}
.auth-password-toggle[aria-pressed=false] .auth-eye-slash{display:none}
.auth-caps{font-size:12px;font-weight:500;color:var(--color-accent)}
.auth-submit{margin-top:4px}
.auth-card .auth-error{display:flex;align-items:flex-start;gap:10px;margin:0}
.auth-card .auth-error svg{width:18px;height:18px;margin-top:1px}
.account-security>p{margin:0 0 20px;font-size:13px;color:var(--color-muted);overflow-wrap:anywhere}
.account-security>.auth-error{margin-bottom:20px}
.account-security>.text-link{margin-top:8px}
.auth-links,.login-gate-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;font-size:13px;color:var(--color-muted)}
.auth-links{margin:12px 0 0}
.auth-links .text-link{min-height:36px;font-size:13px}
@media(max-width:1023px){.auth-card{margin-top:0;padding:20px}}
.auth-card:has(>.auth-links:last-child){padding-bottom:12px}
/* Sign-in card (25 October 2026). /login, /register and the members-only
   guest wall (guest-wall.css) show the same card and nothing else: the
   Masuk | Daftar switch, the fields with one show-password button, the
   links, then Google and Apple side by side (a mockup for now). No title,
   description, band or ornament. */
.auth-card.auth-signin{max-width:420px;box-shadow:0 24px 60px -24px var(--color-shadow),0 0 0 1px var(--color-rule)}
.auth-password input::-ms-reveal,.auth-password input::-ms-clear{display:none}
.auth-social{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.auth-social-btn svg{width:18px;height:18px;stroke:none}
.auth-social-btn .auth-apple{fill:currentColor}
.auth-social-note{grid-column:1/-1;margin:0;font-size:12px;line-height:1.6;color:var(--color-muted)}
.auth-social-note:empty{display:none}
.auth-or{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:12px;color:var(--color-muted)}
.auth-or::before,.auth-or::after{content:"";flex:1;border-top:1px solid var(--color-rule)}
.auth-fields+.auth-or{margin-top:24px}

/* Profile (24 October 2026). An account header (avatar, name, email and the
   current plan) over two cards built like the progress report's: a plain
   16px heading, fields grouped with their label and help, and the form's
   button below them. */
.profile-page{display:grid;gap:20px;min-width:0}
.profile-card{min-width:0;padding:24px;border-radius:var(--radius-surface);background:var(--color-surface)}
.profile-card>h2{margin:0 0 20px;font-size:16px;font-weight:500;line-height:1.3}
.profile-card-note{margin:-12px 0 20px;font-size:13px;color:var(--color-muted)}
.profile-head{display:flex;align-items:center;gap:20px 32px;flex-wrap:wrap}
.profile-identity{display:flex;align-items:center;gap:16px;flex:1 1 280px;min-width:0}
.profile-identity strong{display:block;font-size:16px;font-weight:600;overflow-wrap:anywhere}
.profile-identity p{margin:2px 0 0;font-size:13px;color:var(--color-muted);overflow-wrap:anywhere}
.profile-head .sin-account-avatar{flex-shrink:0;width:56px;height:56px;font-size:22px;font-weight:500}
.profile-plan{flex:1 1 360px;max-width:520px;min-width:0;padding-left:32px;border-left:1px solid var(--color-rule);scroll-margin-top:calc(var(--sticky-top) + 20px)}
.profile-plan h2{margin:0 0 2px;font-size:12px;font-weight:400;color:var(--color-muted)}
.profile-plan-row{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.profile-plan-current{display:grid;gap:2px;min-width:0}
.profile-plan-current strong{font-size:15px;font-weight:600}
.profile-plan-current :is(span,p){margin:0;font-size:13px;color:var(--color-muted)}
.profile-plan-actions{display:flex;gap:8px;flex-wrap:wrap}
.profile-plan-actions .btn{margin:0}
.profile-plan-pending{display:grid;gap:2px;margin-top:16px;padding:14px 16px;border-radius:var(--radius-control);background:var(--color-paper-2);font-size:13px}
.profile-plan-pending p{margin:0;color:var(--color-ink)}
.profile-plan-pending small{font-size:12px;color:var(--color-muted)}
.profile-columns{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.profile-page .profile-form{display:block}
.profile-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.profile-fields.is-single{grid-template-columns:minmax(0,1fr)}
.profile-field{display:grid;align-content:start;gap:8px;min-width:0}
.profile-field.is-wide{grid-column:1/-1}
.profile-page .profile-form .profile-field>label{margin:0;font-size:13px;font-weight:500;color:var(--color-ink)}
.profile-page .profile-form .profile-field>small{margin:0;font-size:12px;line-height:1.5;color:var(--color-muted)}
.profile-voice{display:flex;gap:8px}
.profile-voice select{flex:1;min-width:0}
.profile-actions{display:flex;gap:8px;margin-top:24px}
.profile-page .profile-form :is(.profile-voice,.profile-actions) .btn{flex-shrink:0;width:auto;margin:0}
@media(max-width:1023px){.profile-columns{grid-template-columns:minmax(0,1fr)}}
@media(max-width:767px){
 .profile-page,.profile-columns{gap:12px}
 .profile-card{padding:16px}
 .profile-card>h2{margin-bottom:16px}
 .profile-card-note{margin:-8px 0 16px}
 .profile-plan{flex-basis:100%;max-width:none;padding:16px 0 0;border-left:0;border-top:1px solid var(--color-rule)}
 .profile-plan-actions{width:100%}
 .profile-plan-actions .btn{flex:1;justify-content:center}
 .profile-fields{grid-template-columns:minmax(0,1fr);gap:16px}
 .profile-voice{flex-direction:column}
 .profile-actions{margin-top:20px}
 .profile-page .profile-form :is(.profile-voice,.profile-actions) .btn{width:100%;justify-content:center}
}
@media(max-width:1023px){.member-header .member-register{display:none}}

/* Sidebar open/closed (24 October 2026). The server renders the saved state
   (nr_sidebar cookie, see navigation.js), so nothing moves on load.
   Every control in the sidebar keeps its size and place in both states: the
   menu button, nav links, account and sign-in buttons start at the rail's
   16px padding with their icon 12px in, which centres them in the 76px rail.
   Toggling only animates the width while labels, the logo and the account
   text fade; the button's lines turn into an X while the sidebar is open.
   The logo moves to the top bar while the sidebar is closed. */
@property --sidebar-width{syntax:'<length>';inherits:true;initial-value:220px}
@media(min-width:1024px){
 body[data-member=true]{transition:--sidebar-width var(--dur-short) var(--ease-out)}
 .member-sidebar{overflow-x:hidden}
 /* Fading parts */
 .member-sidebar :is(.sidebar-brand,.member-sidebar-label,.nav-link>span,.nav-gate,.member-sidebar-account>strong,.member-sidebar-account>span,.member-sidebar-account .btn span,.member-sidebar-account .text-button span){transition:opacity var(--dur-micro) var(--ease-out)}
 body[data-member=true][data-sidebar-collapsed=true] .member-sidebar :is(.sidebar-brand,.member-sidebar-label,.nav-link>span,.nav-gate,.member-sidebar-account>strong,.member-sidebar-account>span,.member-sidebar-account .btn span,.member-sidebar-account .text-button span){opacity:0;pointer-events:none}
 /* The older collapsed rules hid these with display:none; keep them laid out so nothing shifts. */
 body[data-member=true][data-sidebar-collapsed=true] .member-sidebar .nav-link>span,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-account .text-button span,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-account .btn span{display:inline}
 body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-account>strong,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-account>span,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar .nav-gate{display:block}
 body[data-member=true][data-sidebar-collapsed=true] .member-sidebar .sidebar-brand{visibility:hidden;transition:opacity var(--dur-micro) var(--ease-out),visibility 0s linear var(--dur-micro)}
 /* Head: menu button first, logo after it */
 .sidebar-top,body[data-member=true][data-sidebar-collapsed=true] .sidebar-top{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:44px;margin-bottom:28px}
 .member-sidebar .sidebar-top .sidebar-brand,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar .sidebar-top .sidebar-brand{display:flex;flex:none;min-width:0;padding:0;justify-content:flex-start}
 .sidebar-top .brand-logo{width:126px;height:42px;max-width:none}
 .member-sidebar .sin-nav-toggle{display:inline-flex;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--color-rule);border-radius:12px;background:var(--color-surface);color:var(--color-ink)}
 .sin-burger,.sin-burger::before,.sin-burger::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform var(--dur-short) var(--ease-out),background-color var(--dur-micro) linear}
 .sin-burger{position:relative}
 .sin-burger::before,.sin-burger::after{content:'';position:absolute;left:0;top:0}
 .sin-burger::before{transform:translateY(-6px)}
 .sin-burger::after{transform:translateY(6px)}
 body:not([data-sidebar-collapsed=true]) .member-sidebar .sin-burger{background-color:transparent}
 body:not([data-sidebar-collapsed=true]) .member-sidebar .sin-burger::before{transform:rotate(45deg)}
 body:not([data-sidebar-collapsed=true]) .member-sidebar .sin-burger::after{transform:rotate(-45deg)}
 .member-sidebar-label,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-label{display:block;white-space:nowrap;overflow:hidden}
 /* Nav links */
 .member-sidebar .nav-link,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar .nav-link{justify-content:flex-start;gap:12px;padding:10px 12px;overflow:hidden}
 .member-sidebar .nav-link>span{white-space:nowrap}
 /* Account (members) and sign-in (guests) */
 .member-sidebar-account,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-account{padding:24px 0 0}
 .member-sidebar-account>strong,.member-sidebar-account>span{padding-inline:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .member-sidebar-account .text-button,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-account .text-button{display:flex;width:100%;min-width:0;min-height:44px;justify-content:flex-start;gap:12px;padding:10px 12px;border-radius:var(--radius-control);color:var(--color-muted);white-space:nowrap;overflow:hidden}
 .member-sidebar-account .text-button:hover{background:var(--color-paper-2);color:var(--color-ink)}
 .member-sidebar-account .text-button span{display:inline;margin:0;padding:0;font-size:13px;color:inherit}
 .member-sidebar-guest .btn{justify-content:flex-start;gap:12px;padding:10px 12px;white-space:nowrap;overflow:hidden}
 .member-sidebar-guest .btn.secondary{padding:9px 11px}
 .member-sidebar-guest .btn svg{width:20px;height:20px}
 /* Top bar logo while the sidebar is closed */
 .member-header>.brand{display:flex;flex:none;max-width:0;margin-right:-24px;overflow:hidden;opacity:0;visibility:hidden;transition:max-width var(--dur-short) var(--ease-out),margin var(--dur-short) var(--ease-out),opacity var(--dur-micro) var(--ease-out),visibility 0s linear var(--dur-short)}
 .member-header>.brand .brand-logo{width:126px;height:42px;max-width:none}
 body[data-sidebar-collapsed=true] .member-header>.brand{max-width:140px;margin-right:0;opacity:1;visibility:visible;transition:max-width var(--dur-short) var(--ease-out),margin var(--dur-short) var(--ease-out),opacity var(--dur-short) var(--ease-out) 60ms,visibility 0s}
}

/* No visible scrollbars (24 October 2026, user request). Pages, the sidebar
   and the menu still scroll by wheel, touch and keyboard. A classic
   scrollbar also took ~15px from the 76px rail and cut its icons. Admin
   tables keep theirs because they scroll sideways. */
html,.member-sidebar,body:not([data-page=admin]) *{scrollbar-width:none}
html::-webkit-scrollbar,.member-sidebar::-webkit-scrollbar,body:not([data-page=admin]) ::-webkit-scrollbar{display:none}
/* Short screens: tighter sidebar rhythm so the rail's icons fit without
   scrolling. Same in both states, so nothing moves when it opens or closes. */
@media(min-width:1024px) and (max-height:820px){
 .member-sidebar{padding-block:16px}
 .sidebar-top,body[data-member=true][data-sidebar-collapsed=true] .sidebar-top{margin-bottom:16px}
 .member-sidebar nav{gap:2px}
 .member-sidebar .nav-link,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar .nav-link{min-height:40px;padding-block:8px}
 .member-sidebar-account,body[data-member=true][data-sidebar-collapsed=true] .member-sidebar-account{padding-top:12px}
 .member-sidebar-account .text-button,.member-sidebar-guest .btn{min-height:40px}
}

/* Account menu (24 October 2026, user request): the avatar in the top bar
   opens a small panel with the account and Keluar; the sidebar and the
   phone menu no longer show the name, email or logout. */
.account-menu{position:relative}
.account-menu>summary{list-style:none;cursor:pointer}
.account-menu>summary.member-profile{display:flex;align-items:center;justify-content:center;padding:0;text-align:center}
.account-menu>summary::-webkit-details-marker{display:none}
.account-menu[open]>summary{box-shadow:0 0 0 3px var(--color-accent-soft)}
.account-menu-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:30;width:max-content;min-width:220px;max-width:min(300px,calc(100vw - 32px));padding:8px;border:1px solid var(--color-rule);border-radius:16px;background:var(--color-surface);box-shadow:0 12px 32px -10px oklch(29% .05 266 / .24),0 2px 6px oklch(29% .05 266 / .06)}
.account-menu[open] .account-menu-panel{animation:nr-menu-in var(--dur-micro) var(--ease-out)}
@keyframes nr-menu-in{from{opacity:0;transform:translateY(-4px)}}
.account-menu-who{display:grid;gap:2px;min-width:0;padding:8px 10px 10px;margin-bottom:6px;border-bottom:1px solid var(--color-rule)}
.account-menu-who strong{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-who span{font-size:12px;color:var(--color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:none;color:var(--color-ink);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.account-menu-item:hover,.account-menu-item:focus-visible{background:var(--color-paper-2)}
.account-menu-item svg{width:18px;height:18px;color:var(--color-muted)}
/* Avatar menu sections: Profil, Konfigurasi, Keamanan, then Keluar. */
.account-menu-links{display:grid;gap:2px}
.account-menu-item[aria-current=page]{background:var(--color-accent-soft);color:var(--color-accent);font-weight:500}
.account-menu-item[aria-current=page] svg{color:var(--color-accent)}
.account-menu-out{margin-top:6px;padding-top:6px;border-top:1px solid var(--color-rule)}
.profile-tabs{width:max-content;max-width:100%}
.profile-page .profile-card-note.is-first{margin-top:0}
/* Email on the Profil page: read-only field with its change button. */
.profile-email{display:flex;gap:12px;align-items:center}
.profile-email input{flex:1;min-width:0}
.profile-page .profile-actions{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:767px){.profile-email{flex-wrap:wrap}.profile-email .btn{width:100%}}
/* Profile photo (24 October 2026). The avatar shows the stored photo or the
   initial; on the Profil page it is also the file picker, with a pen badge,
   and avatar-upload.js shrinks the photo before it is sent. */
.member-profile.has-photo,.sin-account-avatar.has-photo{padding:0;overflow:hidden;background:var(--color-paper-2)}
.member-profile img,.sin-account-avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.profile-avatar{position:relative;flex:none}
.profile-avatar-pick{position:relative;display:block;cursor:pointer;border-radius:50%}
.profile-avatar-pick:focus-within{outline:2px solid var(--color-accent);outline-offset:3px}
.profile-avatar .sin-account-avatar{overflow:hidden}
.profile-avatar-badge{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--color-surface);border-radius:50%;background:var(--color-accent);color:var(--color-accent-ink)}
.profile-avatar-badge svg{width:12px;height:12px;stroke-width:2}
.profile-avatar[data-busy] .sin-account-avatar{opacity:.5}
.profile-avatar-actions{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px}
.profile-avatar-actions .text-link{min-height:32px;padding:0;font-size:12px;cursor:pointer}
/* Furigana switch (24 October 2026). The same toggle as the flashcard
   options (flashcards.css), on a row whose label turns it too.
   html[data-furigana=off] hides the readings over kanji on every page. */
html[data-furigana=off] :is(rt,rp){display:none}
.furigana-setting{display:flex;align-items:center;justify-content:space-between;gap:24px}
.furigana-copy{display:block;flex:1;min-width:0;cursor:pointer}
.furigana-copy strong{display:block;font-size:16px;font-weight:500;line-height:1.3;color:var(--color-ink)}
.furigana-copy small{display:block;margin-top:6px;font-size:13px;line-height:1.6;color:var(--color-muted)}
.furigana-control{display:flex;flex-shrink:0}
.toggle-switch{display:block;width:44px;height:26px;min-height:0;padding:4px;border:0;border-radius:20px;background:var(--color-rule);flex-shrink:0;cursor:pointer}
.toggle-switch::before{content:'';display:block;width:18px;height:18px;border-radius:50%;background:var(--color-surface)}
.toggle-switch[aria-checked=true]{background:var(--color-accent)}
.toggle-switch[aria-checked=true]::before{transform:translateX(18px)}
.toggle-switch:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
.toggle-switch:active{background:var(--color-muted);transform:none}
@media(hover:hover){.furigana-copy:hover strong{color:var(--color-accent)}}
@media(max-width:767px){.furigana-setting{gap:16px}}
/* Night mode switch in the top bar: a moon in day mode, a sun at night. */
.theme-toggle{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--color-transparent);color:var(--color-muted);transition:background var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.theme-toggle:hover{background:var(--color-paper-2);color:var(--color-ink)}
.theme-toggle:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .theme-icon-moon{display:var(--show-light,block)}
.theme-toggle .theme-icon-sun{display:var(--show-dark,block)}
/* Native progress tracks stay light at night; draw them from the tokens. */
:where(:root[data-theme=dark]) progress{appearance:none;border:0;border-radius:99px;background-color:var(--color-paper-2)}

/* Site footer: every page except the path map and the staff area. */
.site-footer{grid-column:2;min-width:0;width:100%;max-width:1440px;margin:0 auto;padding:40px 32px 32px;color:var(--color-muted);font-size:var(--text-sm)}
.site-footer-main{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) auto;gap:40px;padding-top:32px;border-top:1px solid var(--color-rule)}
.site-footer h2{margin:0 0 14px;font-size:var(--text-sm);font-weight:700;color:var(--color-ink);letter-spacing:0}
.site-footer-brand .brand{display:inline-flex}
.site-footer-brand .brand-logo{width:150px;height:50px}
.site-footer-brand p{margin:12px 0 16px;max-width:34ch;line-height:1.6}
.site-footer-mail{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--color-ink);font-weight:600;overflow-wrap:anywhere}
.site-footer-mail svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--color-accent)}
.site-footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.site-footer-links ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.site-footer-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--color-muted)}
.site-footer :is(.site-footer-links a,.site-footer-mail):hover{color:var(--color-accent)}
.site-footer-stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:max-content;max-width:100%}
.store-badge{display:inline-flex;align-items:center;gap:12px;min-height:56px;min-width:0;padding:8px 20px 8px 16px;border:0;border-radius:14px;background:var(--color-surface);color:var(--color-ink);box-shadow:0 1px 2px var(--color-shadow),0 6px 18px var(--color-shadow);font:600 18px/1.1 var(--font-display);letter-spacing:-.01em;text-align:left;cursor:pointer;transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
:root[data-theme="dark"] .store-badge{box-shadow:inset 0 0 0 1px var(--color-rule),0 6px 18px var(--color-shadow)}
.store-badge:active{transform:translateY(1px)}
.store-badge:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.store-badge svg{width:28px;height:28px;flex:none;stroke:none}
.store-badge .store-apple{fill:currentColor}
.store-badge span{display:grid;gap:2px}
.store-badge small{font-size:11px;font-weight:500;letter-spacing:0;color:inherit}
@media(hover:hover){.store-badge:hover{transform:translateY(-1px)}}
.site-footer-note{margin:10px 0 0;font-size:var(--text-xs);line-height:1.6;color:var(--color-accent)}
.site-footer-note:empty{display:none}
body[data-learning-active="true"] .site-footer{display:none}
@media(min-width:1024px){.member-layout:has(>.site-footer){grid-template-rows:1fr auto}}
@media(max-width:1199px){.site-footer-main{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer-apps{grid-column:1/-1}}
@media(max-width:1023px){
 .member-layout:has(>.site-footer){display:flex;flex-direction:column}
 .member-layout:has(>.site-footer)>main{flex:1 0 auto;padding-bottom:24px}
 .site-footer{padding:16px 20px calc(var(--mobile-nav-height) + 24px + env(safe-area-inset-bottom))}
}
@media(max-width:639px){
 .site-footer{padding-inline:14px}
 .site-footer-main{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:24px}
 .site-footer-stores{width:auto;gap:10px}
 .site-footer-stores .store-badge{gap:10px;padding-inline:12px;font-size:15px}
 .site-footer-stores .store-badge svg{width:24px;height:24px}
 }

/* Sign-up consent line under the submit button (User Agreement and
   Privacy Policy). */
.auth-legal{margin:2px 0 0;font-size:12px;line-height:1.55;color:var(--color-muted);text-align:center;text-wrap:pretty}
.auth-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.auth-legal a:hover{color:var(--color-ink)}

/* Affiliate submenu (26 October 2026, user request): members see Affiliate
   saya right under Affiliate instead of in the avatar menu. The sub link's
   guide line sits under the parent icon and its label lines up with the
   parent label. While the sidebar rail is closed it folds away and the
   parent carries the highlight. */
.nav-sub{display:grid;grid-template-rows:1fr;margin-top:-6px;visibility:visible;transition:grid-template-rows var(--dur-short) var(--ease-out),visibility 0s}
.nav-sub>div{min-height:0;overflow:hidden}
.nav-sublink{position:relative;display:flex;align-items:center;min-height:38px;margin:2px 0 0 22px;padding:6px 12px 6px 22px;border-radius:var(--radius-control);font-size:13px;white-space:nowrap;color:var(--color-muted)}
.nav-sublink::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--color-rule)}
.nav-sublink:hover{color:var(--color-ink);background:var(--color-paper-2)}
.nav-sublink.selected{color:var(--color-ink);background:var(--color-paper-2);font-weight:500}
.nav-sublink.selected::before{width:2px;background:var(--color-accent)}
.nav-link.nav-parent-current{color:var(--color-ink)}
.nav-sublink>svg{display:none}
/* The phone menu is a grid of tiles: Affiliate saya becomes the tile right
   after Affiliate, with its own icon. */
@media(max-width:1023px){
 body:not([data-page=admin]) .mobile-drawer :is(.nav-sub,.nav-sub>div){display:contents}
 body:not([data-page=admin]) .mobile-drawer .nav-sublink{flex-direction:column;justify-content:center;gap:8px;min-width:0;min-height:84px;margin:0;padding:12px 6px;border:var(--rule-width) solid var(--color-rule);border-radius:16px;background:var(--color-paper);color:var(--color-ink);font-size:12px;line-height:1.25;text-align:center;white-space:normal;overflow-wrap:anywhere}
 body:not([data-page=admin]) .mobile-drawer .nav-sublink::before{display:none}
 body:not([data-page=admin]) .mobile-drawer .nav-sublink>svg{display:block;width:22px;height:22px;color:var(--color-accent)}
 body:not([data-page=admin]) .mobile-drawer .nav-sublink[aria-current=page]{border-color:var(--color-transparent);background:var(--color-accent-soft);color:var(--color-accent);font-weight:600}
}
@media(min-width:1024px){
 body[data-member=true][data-sidebar-collapsed=true] .member-sidebar .nav-sub{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--dur-short) var(--ease-out),visibility 0s linear var(--dur-short)}
 body[data-member=true][data-sidebar-collapsed=true] .member-sidebar .nav-link.nav-parent-current{background:var(--color-paper-2)}
}
@media(min-width:1024px) and (max-height:820px){.member-sidebar .nav-sub{margin-top:-2px}}