:root{--red: #E63946;--red-hover: #CC2936;--red-soft: #FFF0F3;--dark: #1A1A2E;--mid: #555577;--light: #F7F4F0;--white: #FFFFFF;--pink: #FFE4EC;--green: #22C55E;--orange: #F97316;--blue: #3B82F6;--border: #E8E4E0;--radius: 16px;--radius-sm: 10px;--shadow: 0 8px 28px rgba(26,26,46,.07);--shadow-hover: 0 12px 32px rgba(26,26,46,.12);--focus: #2563EB;--nav-h: 60px;--mobile-nav-h: 70px}[data-theme=dark]{--dark: #E8E8F0;--mid: #8888AA;--light: #1A1A2A;--white: #252535;--pink: #3A1525;--border: #35355A;--shadow: 0 4px 20px rgba(0,0,0,.4)}[data-theme=dark] body{background:#12121e;color:#e8e8f0}[data-theme=dark] .input{background:#252535;color:#e8e8f0}[data-theme=dark] nav{background:#1a1a2af2!important}[data-theme=dark] .btn-gray{background:#2a2a3e;border-color:#35355a;color:#e8e8f0}[data-theme=dark] .btn-gray:hover{background:#35355a}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{overflow-x:clip}body{font-family:Inter,system-ui,sans-serif;color:var(--dark);background:var(--light);min-height:100vh;line-height:1.55;-webkit-font-smoothing:antialiased}input,button,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}h1,h2,h3{line-height:1.25;overflow-wrap:anywhere}p{overflow-wrap:anywhere}.page{padding:calc(var(--nav-h) + var(--top-banner-h, 0px) + 32px) 24px 72px;max-width:900px;margin:0 auto;width:100%}.card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow)}.input{width:100%;min-height:46px;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;outline:none;background:var(--white);transition:border-color .15s,box-shadow .15s;color:var(--dark)}.input:focus{border-color:var(--red);box-shadow:0 0 0 3px #e639461f}.btn{min-height:42px;border:none;border-radius:var(--radius-sm);padding:10px 18px;font-size:.92rem;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s,background-color .15s,border-color .15s}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn:active:not(:disabled){transform:translateY(1px);box-shadow:none}.btn-red{background:var(--red);color:#fff}.btn-gray{background:var(--light);color:var(--dark);border:1.5px solid var(--border)}.btn-red:hover{background:var(--red-hover);transform:translateY(-1px);box-shadow:0 4px 16px #e639464d}.btn-gray:hover{background:var(--border)}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.mobile-learning-nav{display:none}.dashboard-primary{border:1.5px solid rgba(230,57,70,.28)!important;box-shadow:0 12px 34px #e639461a!important}.dashboard-stats,.progress-summary{min-width:0}.course-step-nav{position:sticky;top:calc(var(--nav-h) + 8px);z-index:20;display:flex;gap:6px;overflow-x:auto;padding:8px;margin:14px 0 18px;background:color-mix(in srgb,var(--white) 94%,transparent);border:1px solid var(--border);border-radius:14px;box-shadow:0 6px 20px #1a1a2e14;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);scrollbar-width:none}.course-step-nav::-webkit-scrollbar{display:none}.course-step-nav a{flex:0 0 auto;min-width:38px;padding:7px 10px;border-radius:8px;color:var(--mid);text-decoration:none;text-align:center;font-size:.78rem;font-weight:800}.course-step-nav a:hover{color:var(--red);background:var(--red-soft)}.lesson-section{scroll-margin-top:calc(var(--nav-h) + 70px)}.lesson-section>h2{font-size:1.08rem;margin-bottom:14px}.course-choice{text-align:left;line-height:1.45}.course-choice[aria-pressed=true]{font-weight:800}.chat-history{scrollbar-color:var(--border) transparent}.chat-composer{border-top:1px solid var(--border);box-shadow:0 -8px 22px #1a1a2e0d}.report-card h2{margin-bottom:10px}@media (hover: hover) and (pointer: fine){.card{transition:box-shadow .18s,border-color .18s}button.card:hover{box-shadow:var(--shadow-hover);border-color:#e6394640!important}}@media (max-width: 680px){:root{--nav-h: 56px}.page{padding:calc(var(--nav-h) + var(--top-banner-h, 0px) + 20px) 14px calc(var(--mobile-nav-h) + 28px)}.card{border-radius:14px;box-shadow:0 4px 18px #1a1a2e0f}.btn{min-height:44px;padding:10px 14px}.mobile-learning-nav{position:fixed;z-index:110;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));height:var(--mobile-nav-h);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;padding:6px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--white) 94%,transparent);box-shadow:0 12px 30px #1a1a2e2e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.mobile-learning-nav a{min-width:0;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;color:var(--mid);text-decoration:none;font-size:.65rem;font-weight:700;white-space:nowrap}.mobile-learning-nav a.active{color:var(--red);background:var(--red-soft)}.mobile-learning-nav svg{width:19px;height:19px}.dashboard-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}.dashboard-stats .card{padding:14px 8px!important}.dashboard-stats .card>div:nth-child(2){font-size:1.35rem!important}.progress-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}.grammar-level-overview{overflow:visible!important;border:0;background:transparent;box-shadow:none}.grammar-level-table{min-width:0!important;display:grid;gap:10px}.grammar-level-header{display:none!important}.grammar-level-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;padding:16px!important;border:1px solid var(--border)!important;border-radius:14px;box-shadow:0 4px 18px #1a1a2e0f}.grammar-level-row>:first-child{grid-column:1 / -1;font-size:1rem}.grammar-level-row>span{font-size:.82rem;font-weight:700}.grammar-level-row>span:before{content:attr(data-label);display:block;margin-bottom:3px;color:var(--mid);font-size:.65rem;font-weight:500}.grammar-quiz-controls{width:100%;margin-left:0!important}.grammar-quiz-controls .btn{flex:1 1 110px}.course-step-nav{top:calc(var(--nav-h) + 6px);margin-inline:-4px}.lesson-section{padding:18px 16px!important;scroll-margin-top:calc(var(--nav-h) + 66px)}.lesson-section>h2{font-size:1rem}.chat-history{height:min(52vh,480px)!important;min-height:320px!important;padding:12px!important}.chat-bubble{max-width:84%!important}.chat-composer{bottom:calc(var(--mobile-nav-h) + 12px)!important;margin-inline:-14px;padding-inline:14px}}@media (max-width: 380px){.page{padding-inline:10px}.mobile-learning-nav{left:5px;right:5px}.mobile-learning-nav a{font-size:.6rem}.grade-btns{grid-template-columns:1fr 1fr}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.error{color:var(--red);font-size:.85rem;margin-top:2px}.noto{font-family:Noto Sans JP,sans-serif}.grade-btns{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}.grade-btn{padding:12px 8px;border-radius:10px;border:none;font-size:.85rem;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s}.grade-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.grade-forgot{background:#fee2e2;color:#991b1b}.grade-hard{background:#fef3c7;color:#92400e}.grade-good{background:#dbeafe;color:#1e40af}.grade-easy{background:#dcfce7;color:#166534}.kana-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.kana-cell{aspect-ratio:1;border-radius:10px;border:1.5px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;background:var(--white);gap:2px}.kana-cell:hover{border-color:var(--red);transform:scale(1.04)}.kana-cell.mastered{background:#dcfce7;border-color:#86efac}.kana-cell.attempted{background:#fef9c3;border-color:#fde047}.kana-cell .char{font-size:1.3rem;font-family:Noto Sans JP}.kana-cell .rom{font-size:.65rem;color:var(--mid)}
