:root{color-scheme:light;font-family:Noto Sans TC,Noto Sans JP,Yu Gothic UI,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg: #f4f7fb;--surface: #ffffff;--surface-soft: #f7f9fc;--paper: #fffaf0;--paper-strong: #fff2d1;--ink: #182132;--ink-soft: #2f3d52;--muted: #627083;--faint: #8893a2;--line: #dbe3ee;--line-strong: #bac8d8;--indigo: #243b6b;--indigo-strong: #16264a;--indigo-soft: #e8eefb;--matcha: #276c5e;--matcha-strong: #174f45;--matcha-soft: #e5f3ee;--vermillion: #d84a32;--vermillion-soft: #fde9e3;--amber: #d99f34;--shadow: 0 18px 42px rgba(28, 42, 68, .1);--shadow-soft: 0 10px 24px rgba(28, 42, 68, .08);--radius: 8px;--radius-sm: 6px}*{box-sizing:border-box}html{background:var(--bg)}body{min-width:320px;min-height:100dvh;margin:0;color:var(--ink);overflow-x:hidden;background:linear-gradient(90deg,rgba(36,59,107,.035) 1px,transparent 1px) 0 0 / 44px 44px,linear-gradient(180deg,#f8fbff 0%,var(--bg) 42%,#eef4f0 100%)}button,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.56}.app-shell{display:grid;grid-template-columns:286px minmax(0,1fr);min-height:100dvh}.sidebar{position:sticky;top:0;align-self:start;display:flex;flex-direction:column;gap:24px;height:100dvh;padding:24px 18px;color:#f6f8fb;background:linear-gradient(180deg,#16264af5,#182132fa),var(--indigo-strong);border-right:1px solid rgba(255,255,255,.12)}.brand{display:flex;align-items:center;gap:12px;padding:4px 6px 12px}.brand-mark,.view-icon{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:var(--radius)}.brand-mark{color:#fff7dd;border:1px solid rgba(255,255,255,.22);background:#d84a323d}.brand-title,.brand-subtitle,.section-kicker,.topbar span,.category-tag,.library-heading span{margin:0;font-size:.78rem;font-weight:800;letter-spacing:.02em}.brand-title{color:#fff;font-size:1.02rem}.brand-subtitle{margin-top:2px;color:#ffffffa3}.nav-list{display:grid;gap:7px}.nav-item{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:center;width:100%;min-height:56px;padding:12px;color:#ffffffad;text-align:left;border:1px solid transparent;border-radius:var(--radius);background:transparent;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.nav-item strong,.nav-item small{display:block}.nav-item strong{color:#fff;font-size:.94rem}.nav-item small{margin-top:2px;color:#ffffff85;font-size:.74rem}.nav-item:hover,.nav-item.active{color:#fff;border-color:#ffffff38;background:#ffffff1a}.sidebar-progress{margin-top:auto;padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);background:#ffffff14}.progress-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem;font-weight:800}.progress-track{height:8px;margin:12px 0;overflow:hidden;border-radius:999px;background:#ffffff29}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffd36d,#7fd9bd)}.sidebar-progress p{margin:0;color:#ffffffa8;font-size:.78rem;line-height:1.55}.app-main{min-width:0;padding:22px 28px 40px}.topbar{display:flex;align-items:stretch;justify-content:space-between;gap:18px;min-height:88px;margin-bottom:20px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:#ffffffd1;box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.topbar-copy{display:grid;align-content:center;gap:4px;min-width:0}.topbar-copy span,.section-kicker,.category-tag,.library-heading span{color:var(--vermillion)}.topbar-copy strong{display:block;color:var(--ink);font-size:1.28rem;line-height:1.25}.topbar-copy p{margin:0;color:var(--muted);font-size:.86rem}.topbar-metrics{display:grid;grid-template-columns:repeat(3,minmax(88px,1fr));gap:10px;flex:0 1 360px}.topbar-metrics div{display:grid;align-content:center;gap:3px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-soft)}.topbar-metrics span{color:var(--muted);font-size:.72rem}.topbar-metrics strong{color:var(--indigo);font-size:1.08rem}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.86fr);gap:18px;align-items:start}.panel{border:1px solid var(--line);border-radius:var(--radius);background:#fffffff0;box-shadow:var(--shadow)}.main-panel,.phrase-panel,.kana-panel,.notes-panel,.settings-panel,.grammar-card,.vocab-card,.review-card,.review-panel{padding:22px}.main-panel,.phrase-panel,.kana-panel{grid-column:1}.side-stack{display:grid;grid-column:2;grid-row:1 / span 3;gap:18px}.section-heading,.panel-title-row,.view-header,.library-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.section-heading h1,.view-header h1{margin:6px 0 8px;color:var(--ink);font-size:2rem;line-height:1.16;letter-spacing:0}.section-heading p,.view-header p,.panel p,.grammar-card p,.vocab-card p{color:var(--muted);line-height:1.65}.section-heading p,.view-header p{margin:0;max-width:66ch}.complete-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:9px 13px;color:var(--ink);font-size:.88rem;font-weight:850;white-space:nowrap;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .12s ease}.complete-button:hover,.icon-button:hover{border-color:var(--matcha);color:var(--matcha-strong);box-shadow:0 8px 16px #276c5e1f}.complete-button:active,.icon-button:active,.nav-item:active,.kana-tile:active,.kana-card:active,.lesson-step:active,.phrase-choice:active,.review-item:active{transform:translateY(1px)}.complete-button.done,.complete-button:hover.done,.icon-button.primary{color:#fff;border-color:var(--matcha);background:var(--matcha)}.icon-button.ghost{width:40px;padding:0}.icon-button.danger{color:var(--vermillion);border-color:#d84a3259;background:var(--vermillion-soft)}.lesson-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:22px 0 16px}.lesson-step{display:grid;gap:7px;min-height:120px;padding:14px;color:var(--muted);text-align:left;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-soft);transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .12s ease}.lesson-step span{color:var(--faint);font-size:.78rem;font-weight:850}.lesson-step strong{color:var(--ink);line-height:1.35}.lesson-step .step-status{color:var(--matcha)}.lesson-step:hover,.lesson-step.active{border-color:var(--indigo);background:var(--indigo-soft)}.lesson-step.done{border-color:#276c5e59;background:var(--matcha-soft)}.lesson-focus{display:flex;flex-wrap:wrap;gap:8px}.lesson-focus span,.category-tag{display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border:1px solid rgba(216,74,50,.22);border-radius:var(--radius-sm);background:var(--vermillion-soft)}.teacher-note{margin-top:18px;padding:14px 16px;border-left:4px solid var(--amber);border-radius:var(--radius-sm);background:var(--paper)}.teacher-note strong{display:block;margin-bottom:5px}.teacher-note p{margin:0}.teacher-note.compact{margin-top:14px}.panel-title-row h2,.panel h2,.library-heading h2{margin:4px 0 0;font-size:1.18rem;line-height:1.3}.phrase-display{margin:18px 0;padding:22px;border:1px solid var(--line-strong);border-radius:var(--radius);background:linear-gradient(135deg,#fffaf0f5,#e8eefbb3),var(--paper)}.phrase-display.practiced{border-color:#276c5e80;background:linear-gradient(135deg,#e5f3eef5,#fffaf0cc),var(--matcha-soft)}.reading-stack{display:grid;gap:4px;min-width:0}.reading-stack p{margin:0}.jp-line{color:var(--ink);overflow-wrap:anywhere;font-family:"Noto Serif JP",Yu Mincho,Noto Sans JP,serif;font-size:2.2rem;font-weight:850;line-height:1.28;letter-spacing:0}.reading-stack--hero .jp-line{font-size:2.65rem}.reading-stack--compact .jp-line,.reading-stack--inline .jp-line{font-family:Noto Sans JP,Yu Gothic UI,sans-serif;font-size:1.08rem;font-weight:850}.kana-line{color:var(--matcha-strong);overflow-wrap:anywhere;font-size:1rem;font-weight:800}.romaji-line{color:var(--indigo);overflow-wrap:anywhere;font-size:.88rem;font-weight:750}.zh-line{color:var(--muted);overflow-wrap:anywhere;font-size:1rem}.audio-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.warning-text{margin:12px 0 0;padding:10px 12px;color:#8d2a1a;font-size:.88rem;line-height:1.55;border:1px solid rgba(216,74,50,.24);border-radius:var(--radius-sm);background:var(--vermillion-soft)}.phrase-options,.review-list{display:grid;gap:8px;margin-top:16px}.phrase-choice,.review-item{width:100%;padding:12px;text-align:left;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-soft);transition:background-color .16s ease,border-color .16s ease,transform .12s ease}.phrase-choice:hover,.review-item:hover{border-color:var(--indigo);background:var(--indigo-soft)}.review-item span,.review-item strong,.review-item small{display:block}.review-item span{color:var(--vermillion);font-size:.76rem;font-weight:850}.review-item strong{margin-top:5px;color:var(--ink)}.review-item .reading-stack{margin-top:8px}.review-item small{margin-top:8px;color:var(--muted);line-height:1.45}.phrase-choice.active,.review-item.done,.review-card.done{border-color:#276c5e7a;background:var(--matcha-soft)}.kana-grid{display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));gap:8px;margin-top:16px}.kana-tile,.kana-card{min-height:60px;color:var(--ink);font-family:Noto Sans JP,Yu Gothic UI,sans-serif;font-size:1.55rem;font-weight:850;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-strong);transition:background-color .16s ease,border-color .16s ease,transform .12s ease,box-shadow .16s ease}.kana-tile:hover,.kana-card:hover,.kana-tile.practiced,.kana-card.practiced{border-color:var(--matcha);background:var(--matcha-soft);box-shadow:0 8px 16px #276c5e1a}.notes-panel textarea{width:100%;min-height:168px;margin-top:12px;padding:12px;color:var(--ink);line-height:1.55;resize:vertical;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--paper)}.notes-panel textarea:focus,select:focus,button:focus-visible,details:focus-within{outline:3px solid rgba(36,59,107,.22);outline-offset:2px}.view-shell{display:grid;gap:18px}.view-header{justify-content:flex-start;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,#fffffff5,#e8eefbd1),var(--surface);box-shadow:var(--shadow)}.view-icon{color:var(--indigo);border:1px solid var(--line-strong);background:var(--indigo-soft)}.kana-section-list,.phrase-library,.grammar-list,.review-board{display:grid;gap:18px}.kana-section-list .panel,.phrase-library .panel{padding:22px}.kana-table{display:grid;gap:14px;margin-top:18px}.kana-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center}.kana-row strong{color:var(--matcha-strong)}.kana-row-items{display:grid;grid-template-columns:repeat(5,minmax(56px,1fr));gap:8px}.kana-card{display:grid;gap:2px;place-items:center;min-height:74px}.kana-card small{color:var(--muted);font-size:.78rem;font-family:inherit}.phrase-library-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.library-phrase{display:grid;gap:12px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-soft)}.library-phrase.active{border-color:#276c5e7a;background:var(--matcha-soft)}.library-phrase>button{padding:0;text-align:left;border:0;background:transparent}.vocab-grid,.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.vocab-card{display:grid;gap:14px}.vocab-card .reading-stack--display{margin-top:12px}.example-block{display:grid;gap:4px;padding:12px;border-left:3px solid var(--indigo);border-radius:var(--radius-sm);background:var(--surface-soft)}.grammar-card{display:grid;gap:14px}.grammar-pattern{width:fit-content;max-width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--indigo-soft)}.grammar-card h2,.grammar-card p{margin:0}.grammar-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grammar-example{display:grid;gap:10px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-soft)}.review-board{grid-template-columns:repeat(3,minmax(0,1fr))}.review-card{display:grid;gap:14px;align-content:start}.review-card h2{margin:0;font-size:1.16rem;line-height:1.45}details{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-soft)}summary{color:var(--indigo);font-weight:850;cursor:pointer}details .reading-stack{margin-top:10px}.settings-panel{display:grid;gap:14px;align-content:start}.field-label{display:block;color:var(--muted);font-size:.82rem;font-weight:850}select{width:100%;min-height:42px;padding:8px 10px;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff}.data-status{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-soft)}.data-status strong,.data-status span{display:block}.data-status span{margin-top:3px;color:var(--muted)}.settings-actions{display:flex;flex-wrap:wrap;gap:10px}@media(max-width:1180px){.app-shell{grid-template-columns:246px minmax(0,1fr)}.dashboard-grid,.vocab-grid,.settings-grid{grid-template-columns:1fr}.side-stack{grid-column:1;grid-row:auto}.phrase-library-list,.grammar-examples,.review-board{grid-template-columns:1fr}}@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;padding:14px;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}.brand{padding-bottom:2px}.nav-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:none}.nav-list::-webkit-scrollbar{display:none}.nav-item{grid-template-columns:20px 1fr;flex:0 0 144px;min-height:58px;padding:10px;scroll-snap-align:start}.nav-item small,.sidebar-progress{display:none}.app-main{padding:16px}.topbar,.section-heading,.panel-title-row{align-items:flex-start;flex-direction:column}.topbar-metrics{width:100%;flex:none}.lesson-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.kana-row{grid-template-columns:1fr}}@media(max-width:560px){.topbar-metrics,.lesson-steps,.kana-row-items,.kana-grid{grid-template-columns:1fr}.main-panel,.phrase-panel,.kana-panel,.notes-panel,.settings-panel,.grammar-card,.vocab-card,.review-card,.review-panel,.view-header,.kana-section-list .panel,.phrase-library .panel{padding:16px}.section-heading h1,.view-header h1{font-size:1.6rem}.reading-stack--hero .jp-line,.jp-line{font-size:1.8rem}.complete-button,.icon-button,.icon-button.ghost{width:100%}.app-shell,.app-main,.sidebar,.dashboard-grid,.panel,.side-stack{min-width:0;max-width:100vw}.sidebar{overflow:hidden}.nav-list{width:100%;max-width:100%;min-width:0}.nav-item{max-width:144px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}