:root{
  --bg:#f3faff;--surface:#ffffff;--surface-2:#eaf6ff;--surface-3:#f7fcff;--text:#183047;--muted:#6d8293;--border:#d5e8f4;
  --accent:#2f80ed;--accent-hover:#236fd1;--accent-soft:#dcecff;--green:#39a9bf;--green-soft:#dff6fa;--yellow:#b7841e;--yellow-soft:#fff1c9;
  --blue:#4aaee8;--blue-soft:#dff4ff;--danger:#b73a42;--shadow:0 18px 48px rgba(42,115,164,.10);--shadow-sm:0 8px 24px rgba(42,115,164,.08);
}
body.dark{--bg:#0f1b27;--surface:#162637;--surface-2:#1d3449;--surface-3:#142333;--text:#eff9ff;--muted:#a7bfd0;--border:#29465d;--accent:#68c9ff;--accent-hover:#8bd8ff;--accent-soft:#173c58;--green:#58c7d7;--green-soft:#163a43;--yellow:#e1b960;--yellow-soft:#443b26;--blue:#7bd6ff;--blue-soft:#17394e;--shadow:0 18px 48px rgba(0,0,0,.24);--shadow-sm:0 8px 24px rgba(0,0,0,.18)}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;transition:background .2s,color .2s}.hidden{display:none!important}
button,input,select,textarea{font:inherit}button{color:inherit;-webkit-tap-highlight-color:transparent}a{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:2px}
.app-shell{max-width:1220px;margin:0 auto;min-height:100vh;padding-bottom:58px}.topbar{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 20px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(16px)}
.brand{display:flex;gap:11px;align-items:center;border:0;background:transparent;cursor:pointer;text-align:left;justify-self:start}.brand-mark{width:44px;height:44px;border-radius:14px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:"Noto Sans JP",sans-serif;font-weight:700;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 25%,transparent)}.brand strong{display:block;letter-spacing:.08em;font-size:15px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.desktop-nav{display:flex;gap:4px;padding:5px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm)}.desktop-nav button{border:0;background:transparent;padding:9px 12px;border-radius:11px;cursor:pointer;color:var(--muted);font-size:12px;font-weight:750}.desktop-nav button:hover,.desktop-nav button.active{background:var(--surface-2);color:var(--text)}.desktop-nav button.active{color:var(--accent)}.top-actions{display:flex;gap:9px;justify-self:end}.icon-btn,.profile-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:grid;place-items:center;overflow:hidden}.icon-btn:hover{border-color:var(--accent);color:var(--accent)}.profile-btn{background:var(--green);color:#fff;border:0;font-weight:800;font-size:12px;padding:0;line-height:0;overflow:hidden}.profile-btn #headerAvatar{width:100%;height:100%;display:block;border-radius:inherit;overflow:hidden;line-height:0}.profile-btn img,.profile-btn #headerAvatar img{width:100%;height:100%;display:block;object-fit:cover;object-position:center center;border-radius:inherit;max-width:none;max-height:none}.profile-btn #headerAvatar>.avatar-fallback{width:100%;height:100%;display:grid;place-items:center;line-height:1;color:#fff;font-size:14px;font-weight:800;letter-spacing:0;text-transform:uppercase}
main{padding:12px 20px 56px}.hero{background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:30px;padding:34px;display:grid;grid-template-columns:1.35fr .65fr;gap:24px;box-shadow:var(--shadow)}.eyebrow{color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:11px}.hero h1{font-size:clamp(36px,6vw,66px);line-height:1;margin:12px 0 16px;letter-spacing:-.045em}.hero p{color:var(--muted);line-height:1.72;max-width:680px}.hero p strong{color:var(--text)}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.hero-book{display:grid;place-items:center;min-height:220px}.book-card{width:175px;aspect-ratio:.72;border-radius:12px 18px 18px 12px;background:var(--accent);color:#fff;padding:22px;box-shadow:14px 16px 0 color-mix(in srgb,var(--green) 60%,transparent);transform:rotate(4deg);display:flex;flex-direction:column;justify-content:space-between}.book-card span{font-family:"Noto Sans JP";font-size:44px}.book-card strong{font-size:20px;letter-spacing:.08em}.book-card small{opacity:.9}
.primary,.secondary,.ghost,.danger-btn,.pill-btn{border:0;border-radius:14px;padding:12px 16px;font-weight:750;cursor:pointer;transition:.18s transform,.18s background,.18s border-color}.primary:hover,.secondary:hover,.ghost:hover,.danger-btn:hover,.pill-btn:hover{transform:translateY(-1px)}.primary{background:var(--accent);color:white}.primary:hover{background:var(--accent-hover)}.secondary{background:var(--green);color:white}.ghost{background:var(--surface-2);border:1px solid var(--border)}.ghost:hover{border-color:var(--accent)}.danger-btn{background:color-mix(in srgb,var(--danger) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 30%,var(--border));color:var(--danger)}.full{width:100%}.big-button{padding:15px 20px;font-size:15px}.link-btn{border:0;background:transparent;color:var(--accent);font-weight:750;cursor:pointer;padding:6px 0}.plain-btn{border:0;background:none;padding:0;cursor:pointer;color:inherit}.muted{color:var(--muted)}
.section{margin-top:28px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:14px}.section-head h2{margin:0;font-size:23px;letter-spacing:-.02em}.section-head p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.panel,.stat-card,.grammar-card,.level-card,.quiz-card,.profile-card,.flashcard,.mistake-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-sm)}
.dashboard-strip{display:grid;grid-template-columns:1.5fr .65fr .65fr;gap:14px}.daily-goal-card,.streak-card,.xp-card{border:1px solid var(--border);background:var(--surface);border-radius:20px;padding:18px;box-shadow:var(--shadow-sm)}.daily-goal-card{display:flex;gap:16px;align-items:center}.daily-goal-card h3{margin:5px 0 4px;font-size:17px}.daily-goal-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.goal-ring{width:72px;height:72px;flex:0 0 auto;border-radius:50%;background:conic-gradient(var(--green) var(--pct),var(--surface-2) 0);display:grid;place-items:center;position:relative}.goal-ring:after{content:"";position:absolute;width:56px;height:56px;background:var(--surface);border-radius:50%}.goal-ring>div{z-index:1;display:flex;align-items:baseline}.goal-ring strong{font-size:22px}.goal-ring small{color:var(--muted)}.streak-card,.xp-card{display:flex;align-items:center;justify-content:center;gap:12px}.streak-icon,.xp-icon{font-size:34px}.streak-card strong,.xp-card strong{display:block;font-size:23px}.streak-card span:last-child,.xp-card span:last-child{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.stats-grid,.grammar-grid,.level-grid,.achievement-grid,.feature-grid{display:grid;gap:14px}.stats-grid{grid-template-columns:repeat(4,1fr)}.stat-card{padding:18px}.stat-card strong{display:block;font-size:24px;margin-bottom:5px}.stat-card span{font-size:12px;color:var(--muted)}.feature-grid{grid-template-columns:repeat(3,1fr)}.feature-card{padding:18px;border-radius:20px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer}.feature-card:hover{border-color:var(--accent)}.feature-card .feature-icon{font-size:25px;margin-bottom:10px}.feature-card h3{margin:0 0 5px;font-size:16px}.feature-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.grammar-grid{grid-template-columns:repeat(3,1fr)}.grammar-card{padding:17px;cursor:pointer;min-height:196px;display:flex;flex-direction:column}.grammar-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));transition:.18s}.card-top{display:flex;justify-content:space-between;gap:10px}.badge-row{display:flex;gap:6px;flex-wrap:wrap}.level-badge,.topic-badge,.status-badge{font-size:10px;font-weight:800;border-radius:999px;padding:5px 8px;background:var(--surface-2);color:var(--muted)}.level-badge.n5{background:#ece6d7}.level-badge.n4{background:var(--green-soft);color:var(--green)}.level-badge.n3{background:var(--blue-soft);color:var(--blue)}.level-badge.n2{background:var(--yellow-soft);color:#8b6616}.level-badge.n1{background:var(--accent-soft);color:var(--accent)}.fav-btn{border:0;background:transparent;cursor:pointer;font-size:20px;color:var(--muted)}.fav-btn.is-fav{color:var(--accent)}.grammar-card h3{font-family:"Noto Sans JP",sans-serif;margin:20px 0 6px;font-size:23px;line-height:1.5}.grammar-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;flex:1}.progress-bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:16px}.progress-fill{height:100%;background:var(--green);border-radius:inherit}.card-footer{display:flex;justify-content:space-between;gap:8px;margin-top:9px;font-size:10px;color:var(--muted)}
ruby{font-family:"Noto Sans JP",sans-serif;ruby-position:over;ruby-align:space-around}rt{font-family:"Noto Sans JP",sans-serif;font-size:.48em;color:var(--accent);font-weight:500;letter-spacing:.02em}.jp-large{font-size:clamp(34px,5vw,54px);line-height:1.8}.jp-example{font-size:21px;line-height:2.05}.jp-card{line-height:1.9}.romaji{color:var(--muted);font-size:12px;font-style:italic;margin-top:5px}.translation{font-size:14px;line-height:1.65;margin-top:7px}
.toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px;margin-bottom:13px}.search-box{position:relative}.search-box input{width:100%;border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:13px 42px 13px 15px;color:var(--text)}.search-box span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted)}select,input,textarea{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:12px}.filter-pills{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 15px}.pill-btn{padding:8px 11px;font-size:11px;background:var(--surface);border:1px solid var(--border);color:var(--muted)}.pill-btn.active{background:var(--accent);color:white;border-color:var(--accent)}.result-line{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin:10px 2px}.empty{border:1px dashed var(--border);border-radius:20px;padding:34px;text-align:center;color:var(--muted)}
.detail-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start}.back-btn{border:0;background:transparent;color:var(--muted);font-weight:700;cursor:pointer;margin-bottom:12px}.detail-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.detail-title h1{margin:8px 0 4px;font-family:"Noto Sans JP"}.meaning-title{font-size:20px;color:var(--muted);font-weight:600}.detail-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:16px;margin-top:18px}.detail-main,.detail-side{display:grid;gap:14px;align-content:start}.content-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:var(--shadow-sm)}.content-card h3{margin:0 0 13px;font-size:15px}.pattern-box{background:var(--surface-2);border-radius:14px;padding:14px;line-height:1.7;font-family:"Noto Sans JP"}.content-card p{line-height:1.72;color:var(--muted);font-size:13px}.example-card{padding:16px;border-radius:16px;background:var(--surface-3);border:1px solid var(--border);margin-top:10px}.example-toolbar{display:flex;justify-content:flex-end}.audio-btn{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:7px 10px;cursor:pointer;font-size:11px}.audio-btn:hover{border-color:var(--accent);color:var(--accent)}.note-area{width:100%;min-height:120px;resize:vertical;line-height:1.6}.related-list{display:grid;gap:8px}.related-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:12px;background:var(--surface-3);cursor:pointer}.related-row:hover{background:var(--surface-2)}
.practice-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}.practice-tabs button{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:9px 13px;cursor:pointer;font-weight:700;font-size:12px}.practice-tabs button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.practice-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:16px}.practice-config{padding:18px}.practice-config label{display:block;font-size:11px;color:var(--muted);font-weight:700;margin:14px 0 6px}.practice-config select{width:100%}.quiz-card{padding:24px}.quiz-top{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.quiz-card h2{font-family:"Noto Sans JP";font-size:24px;line-height:1.6;margin:18px 0}.quiz-options{display:grid;gap:9px}.quiz-option,.quiz-options>button{border:1px solid var(--border);background:var(--surface-3);color:var(--text);border-radius:14px;padding:13px 14px;text-align:left;cursor:pointer}.quiz-option:hover,.quiz-options>button:hover{border-color:var(--accent)}.quiz-option.correct{background:var(--green-soft);border-color:var(--green)}.quiz-option.wrong{background:var(--accent-soft);border-color:var(--accent)}.quiz-option:disabled{cursor:default}.quiz-exp{margin-top:15px;padding:14px;border-radius:14px;background:var(--surface-2);font-size:13px;line-height:1.65}.score-circle{width:124px;height:124px;border-radius:50%;display:grid;place-items:center;margin:12px auto;background:conic-gradient(var(--green) var(--score),var(--surface-2) 0);position:relative}.score-circle:after{content:"";position:absolute;width:96px;height:96px;border-radius:50%;background:var(--surface)}.score-circle strong{z-index:1;font-size:26px}.center{text-align:center}
.flashcard{min-height:360px;padding:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer}.flashcard .jp-large{margin:6px 0}.flash-meaning{font-size:22px;font-weight:750;margin:8px 0}.flash-hint{color:var(--muted);font-size:12px}.rating-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.rating-row button{border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:10px;cursor:pointer}.rating-row button:hover{border-color:var(--accent)}.due-badge{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);padding:7px 10px;border-radius:999px;font-size:11px;color:var(--muted)}
.mistake-list{display:grid;gap:10px}.mistake-card{padding:16px;display:grid;grid-template-columns:1fr auto;gap:12px}.mistake-card h3{margin:0 0 5px;font-family:"Noto Sans JP"}.mistake-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.level-grid{grid-template-columns:repeat(5,1fr)}.level-card{padding:18px}.level-card strong{font-size:22px}.level-card p{font-size:11px;color:var(--muted);margin:5px 0 12px}.achievement-grid{grid-template-columns:repeat(4,1fr)}.achievement{padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--surface);opacity:.55}.achievement.unlocked{opacity:1;box-shadow:var(--shadow-sm)}.achievement span{font-size:26px}.achievement strong{display:block;margin:8px 0 3px;font-size:13px}.achievement small{color:var(--muted);font-size:10px}.activity-list{display:grid;gap:8px}.activity-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:11px;border-radius:12px;background:var(--surface-3);font-size:12px}.activity-row time{color:var(--muted);font-size:10px}
.profile-hero{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:24px}.avatar-wrap{position:relative}.avatar-large{width:112px;height:112px;border-radius:50%;overflow:hidden;background:var(--green);color:#fff;display:grid;place-items:center;font-size:30px;font-weight:800;border:4px solid var(--surface);box-shadow:0 0 0 1px var(--border)}.avatar-large img{width:100%;height:100%;object-fit:cover}.camera-btn{position:absolute;right:0;bottom:0;width:36px;height:36px;border-radius:50%;border:2px solid var(--surface);background:var(--accent);color:#fff;cursor:pointer}.profile-hero h1{margin:0 0 4px;font-size:28px}.profile-hero p{margin:0;color:var(--muted)}.profile-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.profile-meta span{font-size:10px;background:var(--surface-2);border-radius:999px;padding:6px 9px;color:var(--muted)}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-card{padding:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:6px}.field input,.field select,.field textarea{width:100%}.field.full-span{grid-column:1/-1}.switch-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border)}.switch-row:last-child{border:0}.switch-row strong{display:block;font-size:13px}.switch-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.switch{position:relative;width:46px;height:26px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;cursor:pointer}.slider:before{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;background:var(--muted);border-radius:50%;transition:.2s}.switch input:checked+.slider{background:var(--green-soft);border-color:var(--green)}.switch input:checked+.slider:before{transform:translateX(20px);background:var(--green)}.profile-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.sync-status{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:11px;color:var(--muted)}.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.auth-gate{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;grid-template-columns:1.15fr .85fr;overflow:auto}.auth-visual{padding:clamp(36px,7vw,90px);background:linear-gradient(145deg,var(--accent),#2b73d2);color:#fff;display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center}.auth-visual .eyebrow{color:#fff;opacity:.72}.auth-visual h1{font-size:clamp(34px,5vw,60px);line-height:1.03;margin:12px 0 16px;letter-spacing:-.04em}.auth-visual>div>p{line-height:1.7;opacity:.82;max-width:540px}.auth-book{width:190px;aspect-ratio:.72;background:#fff;color:var(--accent);border-radius:12px 18px 18px 12px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:16px 18px 0 rgba(255,255,255,.18);transform:rotate(-4deg)}.auth-book span{font-size:46px;font-family:"Noto Sans JP"}.auth-book strong{font-size:22px;letter-spacing:.07em}.auth-book small{font-size:11px}.auth-feature-row{display:grid;grid-template-columns:34px auto 1fr;gap:9px;align-items:center;margin-top:12px}.auth-feature-row span{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-family:"Noto Sans JP"}.auth-feature-row b{font-size:12px}.auth-feature-row small{opacity:.68;font-size:11px}.auth-panel{padding:clamp(30px,6vw,70px);display:flex;flex-direction:column;justify-content:center;max-width:560px;width:100%;margin:auto;position:relative}.auth-close{position:absolute;top:22px;right:22px;border:1px solid var(--border);background:var(--surface);width:38px;height:38px;border-radius:50%;font-size:22px;cursor:pointer}.auth-logo{display:flex;gap:10px;align-items:center;margin-bottom:26px}.auth-logo strong{display:block;letter-spacing:.08em}.auth-logo small{display:block;color:var(--muted);margin-top:2px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;background:var(--surface-2);border-radius:14px;margin-bottom:18px}.auth-tabs button{border:0;background:transparent;border-radius:10px;padding:10px;font-weight:700;cursor:pointer}.auth-tabs button.active{background:var(--surface);box-shadow:var(--shadow-sm);color:var(--accent)}.auth-form{display:grid;gap:13px}.auth-form label{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-bottom:6px}.auth-form input{width:100%}.form-message{min-height:20px;font-size:12px;color:var(--accent);line-height:1.5}.auth-note{font-size:10px;color:var(--muted);line-height:1.5;margin-top:16px}
.toast{position:fixed;z-index:130;left:50%;bottom:86px;transform:translate(-50%,20px);background:#20231f;color:#fff;border-radius:999px;padding:11px 16px;font-size:12px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.bottom-nav{display:none}.section-note{padding:12px 14px;border-radius:14px;background:var(--yellow-soft);color:color-mix(in srgb,var(--text) 82%,var(--yellow));font-size:11px;line-height:1.6;border:1px solid color-mix(in srgb,var(--yellow) 25%,var(--border))}.kbd{font-family:ui-monospace,monospace;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 5px;font-size:10px}.quick-actions{display:flex;gap:8px;flex-wrap:wrap}.sync-cloud{color:var(--green)}.sync-local{color:var(--yellow)}
@media(max-width:1000px){.dashboard-strip{grid-template-columns:1.2fr .8fr}.xp-card{grid-column:1/-1}.grammar-grid{grid-template-columns:repeat(2,1fr)}.level-grid{grid-template-columns:repeat(3,1fr)}.achievement-grid{grid-template-columns:repeat(3,1fr)}.auth-gate{grid-template-columns:1fr}.auth-visual{display:none}.detail-grid,.profile-grid{grid-template-columns:1fr}.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-shell{padding-bottom:88px}.topbar{grid-template-columns:1fr auto;padding:12px 14px}.desktop-nav{display:none}.desktop-only{display:none}.brand-mark{width:40px;height:40px}.brand strong{font-size:13px}.brand small{font-size:9px}.top-actions{grid-column:2}.icon-btn,.profile-btn{width:39px;height:39px}main{padding:8px 14px 34px}.hero{grid-template-columns:1fr;padding:24px;border-radius:24px}.hero h1{font-size:42px}.hero-book{display:none}.dashboard-strip{grid-template-columns:1fr 1fr}.daily-goal-card{grid-column:1/-1}.stats-grid{grid-template-columns:repeat(2,1fr)}.grammar-grid{grid-template-columns:1fr}.level-grid{grid-template-columns:repeat(2,1fr)}.achievement-grid{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr 1fr}.toolbar .search-box{grid-column:1/-1}.detail-head{grid-template-columns:1fr}.detail-actions{justify-content:flex-start}.practice-layout{grid-template-columns:1fr}.profile-hero{grid-template-columns:auto 1fr}.profile-hero>.profile-actions{grid-column:1/-1}.form-grid{grid-template-columns:1fr}.field.full-span{grid-column:auto}.bottom-nav{position:fixed;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 22px),560px);padding:6px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(16px);border-radius:20px;box-shadow:0 15px 36px rgba(0,0,0,.16)}.nav-item{border:0;background:transparent;border-radius:14px;padding:8px 3px;color:var(--muted);cursor:pointer}.nav-item span{display:block;font-size:17px;height:20px}.nav-item small{display:block;font-size:8px;margin-top:2px}.nav-item.active{background:var(--surface-2);color:var(--accent)}.jp-example{font-size:18px}.rating-row{grid-template-columns:repeat(2,1fr)}.auth-panel{padding:28px 20px}.auth-gate{background:var(--surface)}.toast{bottom:96px}}
@media(max-width:430px){.hero h1{font-size:36px}.stats-grid,.dashboard-strip{grid-template-columns:1fr}.streak-card,.xp-card{grid-column:auto}.level-grid{grid-template-columns:1fr}.achievement-grid{grid-template-columns:1fr 1fr}.profile-hero{grid-template-columns:1fr;text-align:center}.avatar-wrap{margin:auto}.profile-meta{justify-content:center}.profile-actions{justify-content:center}.toolbar{grid-template-columns:1fr}.toolbar .search-box{grid-column:auto}.section-head{align-items:start}.section-head .link-btn{white-space:nowrap}.grammar-card{min-height:175px}}

/* ============================================================
   SAKUPOU FINAL — animation, roadmap, search, focus, mock, analytics
   ============================================================ */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ring:#7acff5}
button:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
.center{text-align:center}.compact{padding:18px!important}.stat-card small{display:block;color:var(--muted);font-size:10px;margin-top:6px}.jp-ruby-line{font-family:"Noto Sans JP",sans-serif}.kanji-ruby{display:inline-ruby;margin:0 .015em}rt{line-height:1.1}

/* Animated home */
.hero-final{position:relative;overflow:hidden;min-height:430px;align-items:center;background:
  radial-gradient(circle at 82% 24%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 34%),
  radial-gradient(circle at 15% 90%,color-mix(in srgb,var(--green) 11%,transparent),transparent 34%),
  linear-gradient(135deg,var(--surface),var(--surface-2));isolation:isolate}
.hero-final:after{content:"";position:absolute;inset:auto -20% -55% 30%;height:360px;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 8%,transparent),transparent 66%);pointer-events:none;z-index:-1}
.hero-copy,.hero-book-stage{position:relative;z-index:3;transition:transform .35s var(--ease-out)}
.hero-final h1 em{font-style:normal;color:var(--accent);position:relative}.hero-final h1 em:after{content:"";position:absolute;left:0;right:8%;bottom:-5px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--accent) 20%,transparent);transform:rotate(-1deg)}
.hero-cta{display:flex;align-items:center;gap:10px}.hero-cta span{transition:transform .2s}.hero-cta:hover span{transform:translateX(4px)}
.hero-mini-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.hero-mini-stats span{display:inline-flex;gap:5px;align-items:center;padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--border);font-size:10px;color:var(--muted);backdrop-filter:blur(8px)}.hero-mini-stats b{color:var(--text);font-size:11px}
.hero-book-stage{min-height:300px;display:grid;place-items:center;perspective:1000px}.book-shadow{position:absolute;width:220px;height:52px;border-radius:50%;background:rgba(0,0,0,.16);filter:blur(20px);bottom:28px;transform:rotate(-3deg);animation:shadowPulse 4.2s ease-in-out infinite}
.final-book{width:205px;aspect-ratio:.72;border-radius:10px 22px 22px 10px;background:linear-gradient(135deg,#9de9ff 0%,var(--accent) 55%,#2f80ed 100%);color:#fff;padding:25px 22px 22px 31px;display:flex;flex-direction:column;justify-content:space-between;position:relative;box-shadow:16px 20px 0 color-mix(in srgb,var(--green) 52%,transparent),0 35px 65px rgba(32,105,183,.20);transform:rotate(3deg);animation:bookFloat 4.2s ease-in-out infinite;transform-style:preserve-3d;overflow:hidden}
.book-spine{position:absolute;left:0;top:0;bottom:0;width:17px;background:linear-gradient(90deg,rgba(0,0,0,.20),rgba(255,255,255,.05));border-right:1px solid rgba(255,255,255,.18)}.book-shine{position:absolute;width:110px;height:300px;top:-70px;left:-150px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:rotate(20deg);animation:bookShine 5.5s ease-in-out infinite}.book-kanji{font-family:"Noto Sans JP";font-size:49px;letter-spacing:.02em}.final-book strong{font-size:24px;letter-spacing:.10em}.final-book small{font-size:11px;opacity:.9}.book-seal{position:absolute;right:18px;bottom:18px;width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.42);display:grid;place-items:center;font-family:"Noto Sans JP";font-weight:700}.book-caption{position:absolute;bottom:6px;right:10px;font-size:10px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase}
.hero-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}.kana-float{position:absolute;font-family:"Noto Sans JP";color:color-mix(in srgb,var(--accent) 33%,transparent);font-weight:700;animation:kanaDrift 10s ease-in-out infinite;filter:blur(.05px)}.k1{left:4%;top:10%;font-size:23px}.k2{left:46%;top:9%;font-size:18px;animation-delay:-2s}.k3{left:59%;top:69%;font-size:27px;animation-delay:-5s}.k4{left:8%;top:73%;font-size:16px;animation-delay:-3s}.k5{right:5%;top:13%;font-size:21px;animation-delay:-6s}.k6{right:31%;top:42%;font-size:15px;animation-delay:-8s}.k7{left:31%;top:78%;font-size:13px;animation-delay:-1s}.k8{right:19%;bottom:8%;font-size:17px;animation-delay:-4s}.k9{left:55%;top:22%;font-size:12px;animation-delay:-7s}.k10{right:3%;top:58%;font-size:28px;animation-delay:-9s}.orb{position:absolute;border-radius:50%;filter:blur(1px);opacity:.5;animation:orbFloat 9s ease-in-out infinite}.orb-a{width:95px;height:95px;right:31%;top:12%;background:color-mix(in srgb,var(--yellow) 15%,transparent)}.orb-b{width:130px;height:130px;left:-25px;bottom:-30px;background:color-mix(in srgb,var(--green) 15%,transparent);animation-delay:-3s}.orb-c{width:60px;height:60px;right:6%;bottom:14%;background:color-mix(in srgb,var(--blue) 15%,transparent);animation-delay:-6s}
@keyframes bookFloat{0%,100%{transform:translateY(0) rotate(3deg) rotateY(-3deg)}50%{transform:translateY(-12px) rotate(1.5deg) rotateY(3deg)}}@keyframes shadowPulse{0%,100%{transform:scale(1) rotate(-3deg);opacity:.7}50%{transform:scale(.86) rotate(-2deg);opacity:.45}}@keyframes bookShine{0%,60%{left:-160px}85%,100%{left:260px}}@keyframes kanaDrift{0%,100%{transform:translate3d(0,0,0) rotate(-6deg);opacity:.25}50%{transform:translate3d(12px,-18px,0) rotate(6deg);opacity:.62}}@keyframes orbFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-14px)}}

/* Missions and home cards */
.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.mission-card{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:18px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm);transition:.2s var(--ease-out)}.mission-card:hover{transform:translateY(-2px)}.mission-card.done{border-color:color-mix(in srgb,var(--green) 48%,var(--border));background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--green-soft) 55%,var(--surface)))}.mission-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);font-family:"Noto Sans JP";font-weight:800}.mission-card.done .mission-icon{background:var(--green);color:#fff}.mission-card strong{font-size:14px}.mission-card p{font-size:11px;color:var(--muted);line-height:1.5;margin:4px 0 0}.mission-card small{display:block;color:var(--muted);font-size:9px;margin-top:6px}.home-duo{display:grid;grid-template-columns:1.4fr .6fr;gap:14px}.daily-feature,.focus-feature{padding:22px}.focus-feature{position:relative;overflow:hidden}.focus-feature:before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-65px;top:-60px;background:color-mix(in srgb,var(--green) 10%,transparent)}.focus-illustration{width:90px;height:90px;margin:18px auto;border-radius:50%;border:7px solid var(--green-soft);box-shadow:inset 0 0 0 1px var(--border);display:flex;align-items:baseline;justify-content:center;padding-top:24px;position:relative}.focus-illustration:before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--green);top:5px;left:50%;transform:translateX(-50%)}.focus-illustration span{font-size:30px;font-weight:800}.focus-illustration small{font-size:10px;color:var(--muted);margin-left:2px}.final-features{grid-template-columns:repeat(4,1fr)}

/* Roadmap */
.roadmap-hero{padding:28px;border:1px solid var(--border);border-radius:26px;background:linear-gradient(135deg,var(--surface),var(--surface-2));display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;box-shadow:var(--shadow)}.roadmap-hero h1{font-size:clamp(32px,5vw,52px);letter-spacing:-.04em;line-height:1.04;margin:10px 0 12px}.roadmap-hero p{max-width:720px;color:var(--muted);line-height:1.65}.roadmap-ring,.score-circle{width:126px;height:126px;border-radius:50%;background:conic-gradient(var(--accent) var(--score),var(--surface-2) 0);display:grid;place-items:center;position:relative;flex:0 0 auto}.roadmap-ring:after,.score-circle:after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--surface)}.roadmap-ring>div,.score-circle strong{z-index:1}.roadmap-ring strong{display:block;font-size:28px}.roadmap-ring small{display:block;text-align:center;color:var(--muted);font-weight:800}.next-unit-card{margin-top:16px;padding:20px 22px;border-radius:20px;background:linear-gradient(120deg,var(--accent),#2c76d7);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 18px 38px color-mix(in srgb,var(--accent) 20%,transparent)}.next-unit-card .eyebrow{color:#fff;opacity:.72}.next-unit-card h2{margin:4px 0}.next-unit-card p{margin:0;opacity:.78;font-size:12px}.next-unit-card .primary{background:#fff;color:var(--accent)}.roadmap-track{position:relative;margin-top:24px;padding-left:28px}.roadmap-track:before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:linear-gradient(var(--accent),var(--green),var(--border))}.roadmap-unit{position:relative;display:grid;grid-template-columns:42px 1fr;gap:14px;margin-bottom:14px}.roadmap-node{z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-top:22px;background:var(--surface);border:2px solid var(--accent);font-size:11px;font-weight:800;box-shadow:0 0 0 5px var(--bg)}.roadmap-unit.complete .roadmap-node{background:var(--green);border-color:var(--green);color:white}.roadmap-unit-body{padding:18px 20px;border-radius:19px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm)}.unit-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.unit-top h3{margin:3px 0;font-size:18px}.unit-top>strong{font-size:20px}.roadmap-unit-body>p{margin:4px 0;color:var(--muted);font-size:11px;line-height:1.5}.unit-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}

/* Search palette */
.overlay-modal{position:fixed;inset:0;z-index:120;background:rgba(22,22,19,.48);backdrop-filter:blur(8px);display:grid;place-items:start center;padding:10vh 18px 18px}.palette-card{width:min(720px,100%);border-radius:22px;background:var(--surface);border:1px solid var(--border);box-shadow:0 35px 90px rgba(0,0,0,.28);overflow:hidden;animation:modalIn .18s var(--ease-out)}.palette-search{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}.palette-search input{border:0!important;background:transparent!important;padding:8px!important;font-size:16px;outline:0!important;box-shadow:none!important}.palette-search>span{font-size:22px;color:var(--muted)}.palette-search kbd,.palette-result kbd{font-family:ui-monospace,monospace;padding:4px 6px;border-radius:7px;background:var(--surface-2);border:1px solid var(--border);font-size:9px;color:var(--muted)}.palette-results{padding:7px;max-height:440px;overflow:auto}.palette-result{width:100%;border:0;background:transparent;border-radius:13px;padding:10px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-align:left;cursor:pointer}.palette-result:hover,.palette-result.active{background:var(--surface-2)}.palette-result strong{display:block;font-family:"Noto Sans JP";font-size:15px}.palette-result small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.palette-footer{display:flex;gap:14px;justify-content:flex-end;padding:9px 14px;border-top:1px solid var(--border);font-size:9px;color:var(--muted)}

/* Focus modal */
.focus-modal-card{position:relative;width:min(460px,100%);padding:30px;border-radius:26px;background:var(--surface);border:1px solid var(--border);box-shadow:0 35px 90px rgba(0,0,0,.28);text-align:center;animation:modalIn .18s var(--ease-out)}.focus-modal-card h2{font-size:27px;margin:7px 0 18px}.modal-close{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface-2);font-size:20px;cursor:pointer}.focus-clock{font-variant-numeric:tabular-nums;font-size:clamp(68px,16vw,96px);font-weight:800;letter-spacing:-.06em;line-height:1;margin:24px 0;color:var(--text)}.focus-presets{display:flex;gap:7px;justify-content:center}.focus-presets button{border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:8px 11px;font-size:10px;cursor:pointer}.focus-presets button.active{background:var(--green);color:#fff;border-color:var(--green)}
@keyframes modalIn{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}

/* Auth Google */
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:10px;margin:14px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:var(--border)}.google-btn{width:100%;padding:12px 14px;border-radius:13px;border:1px solid var(--border);background:var(--surface);font-weight:700;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:9px}.google-btn:hover{border-color:var(--accent)}.google-dot{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-weight:800;color:var(--accent)}

/* Mock test */
.mock-intro{display:flex;flex-direction:column;justify-content:center}.mock-rules{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.mock-rules span{font-size:10px;border-radius:999px;padding:7px 9px;background:var(--surface-2);color:var(--muted)}.mock-bar{display:flex;justify-content:space-between;align-items:center;padding-bottom:13px;border-bottom:1px solid var(--border);font-size:11px;color:var(--muted)}.mock-bar strong{font-variant-numeric:tabular-nums;color:var(--accent);font-size:16px}.mock-progress-dots{display:flex;gap:5px;flex-wrap:wrap;margin:14px 0}.mock-progress-dots button{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);font-size:9px;cursor:pointer}.mock-progress-dots button.filled{background:var(--green-soft);border-color:var(--green);color:var(--green)}.mock-progress-dots button.current{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 36%,transparent);border-color:var(--accent)}.quiz-options button.selected{border-color:var(--accent);background:var(--accent-soft)}.mock-result-head{display:flex;gap:22px;align-items:center;margin-bottom:22px}.mock-review{display:grid;gap:8px;max-height:520px;overflow:auto;padding-right:4px}.review-row{display:grid;grid-template-columns:auto 1fr auto;gap:11px;padding:12px;border-radius:13px;border:1px solid var(--border);align-items:start}.review-row>span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800}.review-row.ok>span{background:var(--green-soft);color:var(--green)}.review-row.bad>span{background:var(--accent-soft);color:var(--accent)}.review-row strong{font-size:11px}.review-row p{margin:4px 0;font-size:11px}.review-row small{color:var(--muted);font-size:9px;line-height:1.4}

/* Analytics */
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.analytics-grid>.content-card{padding:20px}.heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.heat{aspect-ratio:1;border-radius:6px;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--border) 80%,transparent)}.heat.l1{background:color-mix(in srgb,var(--green) 22%,var(--surface))}.heat.l2{background:color-mix(in srgb,var(--green) 42%,var(--surface))}.heat.l3{background:color-mix(in srgb,var(--green) 66%,var(--surface))}.heat.l4{background:var(--green)}.heat-legend{display:flex;justify-content:space-between;color:var(--muted);font-size:8px;margin-top:8px}.analytics-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.analytics-numbers>div{padding:12px;border-radius:13px;background:var(--surface-2)}.analytics-numbers strong{display:block;font-size:20px}.analytics-numbers span{font-size:9px;color:var(--muted)}.spark-bars{height:72px;display:flex;align-items:end;gap:6px;margin-top:16px;padding-top:8px;border-top:1px solid var(--border)}.spark-bars i{flex:1;min-height:8px;max-height:100%;border-radius:5px 5px 2px 2px;background:var(--accent);opacity:.82}.weak-list{display:grid;gap:8px}.weak-list button{border:1px solid var(--border);background:var(--surface-2);border-radius:12px;padding:11px;display:flex;justify-content:space-between;gap:10px;cursor:pointer;text-align:left}.weak-list button span{font-size:11px}.weak-list button strong{font-size:10px;color:var(--accent)}.mock-history{display:grid;gap:7px}.mock-history>div{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;padding:9px;border-radius:12px;background:var(--surface-2)}.mock-history strong{font-size:14px}.mock-history small{text-align:right;color:var(--muted);font-size:9px}.profile-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}.profile-kpis>div{padding:13px;border-radius:13px;background:var(--surface-2)}.profile-kpis strong{display:block;font-size:22px}.profile-kpis span{font-size:9px;color:var(--muted)}

/* Responsive final */
@media(max-width:1100px){.desktop-nav button{padding:9px 9px}.final-features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.mission-grid{grid-template-columns:1fr}.home-duo,.analytics-grid{grid-template-columns:1fr}.roadmap-hero{grid-template-columns:1fr}.roadmap-ring{width:104px;height:104px}.hero-final{grid-template-columns:1fr 300px}}
@media(max-width:760px){.hero-final{grid-template-columns:1fr;min-height:auto;padding:28px 22px 30px}.hero-book-stage{display:grid;min-height:220px;margin-top:6px}.final-book{width:150px}.book-kanji{font-size:36px}.final-book strong{font-size:18px}.book-shadow{width:160px;bottom:16px}.hero-mini-stats{gap:6px}.mission-grid{gap:10px}.roadmap-track{padding-left:10px}.roadmap-track:before{left:14px}.roadmap-unit{grid-template-columns:28px 1fr;gap:9px}.roadmap-node{width:26px;height:26px;margin-top:18px;box-shadow:0 0 0 4px var(--bg)}.roadmap-unit-body{padding:15px}.next-unit-card{align-items:flex-start;flex-direction:column}.mock-result-head{align-items:flex-start;flex-direction:column}.review-row{grid-template-columns:auto 1fr}.review-row .link-btn{grid-column:2}.overlay-modal{padding-top:7vh}.palette-footer{justify-content:flex-start;overflow:hidden}.final-stats{grid-template-columns:repeat(2,1fr)}.hero-final h1{font-size:40px}}
@media(max-width:500px){.hero-book-stage{min-height:190px}.final-book{width:132px;padding:19px 16px 17px 25px}.book-kanji{font-size:31px}.final-book strong{font-size:15px}.book-seal{width:28px;height:28px}.hero-mini-stats span{font-size:9px}.roadmap-levels{gap:5px}.roadmap-levels .pill-btn{flex:1}.unit-actions{align-items:flex-start;flex-direction:column}.final-features{grid-template-columns:1fr}.analytics-numbers{grid-template-columns:1fr 1fr}.mock-progress-dots button{width:25px;height:25px}.focus-clock{font-size:66px}.profile-kpis{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.hero-ambient{display:none}.final-book{transform:rotate(2deg)!important}.book-shadow{display:none}}
/* Final lesson detail */
.mastery-badge{font-size:10px;font-weight:800;border-radius:999px;padding:5px 8px;background:var(--green-soft);color:var(--green)}.lesson-meter{margin:14px 0 18px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--surface);display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}.lesson-meter>div:first-child{display:flex;align-items:baseline;gap:6px}.lesson-meter span{font-size:10px;color:var(--muted)}.lesson-meter strong{font-size:18px}.lesson-meter .progress-bar{margin:0}.lesson-meter small{font-size:9px;color:var(--muted);text-align:right}.pattern-jp{font-family:"Noto Sans JP",sans-serif;line-height:2.2}.pattern-ruby rt{font-size:.48em}.mini-copy{font-size:11px!important;line-height:1.6!important}.nuance-box{margin-top:14px;padding:14px;border-radius:14px;background:var(--yellow-soft);border:1px solid color-mix(in srgb,var(--yellow) 25%,var(--border))}.nuance-box strong{font-size:11px}.nuance-box p{font-size:11px;margin:5px 0 0!important}.example-toolbar{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:9px}.self-example-form{display:grid;gap:10px;margin-top:14px}.own-example-list{display:grid;gap:7px;margin-top:14px}.own-example{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:12px;background:var(--surface-2)}.own-example strong{font-family:"Noto Sans JP";font-size:13px;line-height:1.7}.own-example small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.own-example button{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer}.sticky-study-card{position:sticky;top:86px}.study-check{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.study-check:last-child{border-bottom:0}.study-check>span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:10px;font-weight:800}.study-check.done>span{background:var(--green);color:#fff}.study-check strong{display:block;font-size:11px}.study-check small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.related-row>span:first-child small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.related-row>span:first-child b{font-weight:700}
@media(max-width:760px){.lesson-meter{grid-template-columns:1fr}.lesson-meter small{text-align:left}.sticky-study-card{position:static}}
.magic-link-btn{width:100%;padding:10px 14px;margin-top:8px;border-radius:13px;border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer}.magic-link-btn:hover{color:var(--accent);background:var(--surface-2)}

/* =========================================================
   SAKUPOU ULTIMATE
   ========================================================= */
.brand-mark-image{overflow:hidden;padding:0;background:#2f80ed!important;box-shadow:0 8px 24px rgba(47,128,237,.24)}
.brand-mark-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:inherit}
.button-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box}
.big-card-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--surface-2);font-weight:800;font-size:20px}

/* crop avatar */
.crop-modal-card{width:min(520px,calc(100vw - 28px));background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:26px;box-shadow:0 26px 80px rgba(0,0,0,.28);position:relative}
.crop-modal-card h2{margin:8px 0 6px;font-size:27px}.crop-modal-card>p{margin:0 0 18px;line-height:1.6}
.crop-stage{width:min(360px,78vw);aspect-ratio:1;margin:0 auto;position:relative;border-radius:24px;overflow:hidden;background:#101820;touch-action:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#cropCanvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}#cropCanvas:active{cursor:grabbing}
.crop-circle{position:absolute;inset:9%;border:2px solid rgba(255,255,255,.95);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.32);pointer-events:none}
.crop-circle:before,.crop-circle:after{content:"";position:absolute;background:rgba(255,255,255,.34)}
.crop-circle:before{left:33.333%;top:0;bottom:0;width:1px;box-shadow:calc(33.333% * 1) 0 0 rgba(255,255,255,.34)}
.crop-circle:after{top:33.333%;left:0;right:0;height:1px;box-shadow:0 calc(33.333% * 1) 0 rgba(255,255,255,.34)}
.crop-zoom{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;margin:18px 4px 6px;font-size:12px;font-weight:700}.crop-zoom input{width:100%}
.crop-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}

/* quick cards */
.ultimate-quick-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr);gap:16px}
.book-spotlight,.help-spotlight{border:1px solid var(--border);background:var(--surface);border-radius:24px;padding:24px;box-shadow:var(--shadow-sm)}
.book-spotlight{background:linear-gradient(135deg,var(--surface),var(--surface-3));position:relative;overflow:hidden}
.book-spotlight:after{content:'50';position:absolute;right:22px;top:4px;font-size:120px;font-weight:900;line-height:1;color:var(--accent-soft);opacity:.55;pointer-events:none}
.book-spotlight>*{position:relative;z-index:1}.book-spotlight h2{margin:6px 0 8px;font-size:26px}.book-spotlight p{max-width:680px;color:var(--muted);line-height:1.65}
.help-spotlight{display:flex;gap:15px;align-items:center}.help-spotlight>span{flex:0 0 54px;height:54px;border-radius:18px;display:grid;place-items:center;background:var(--green-soft);font-size:25px;font-weight:800}.help-spotlight strong{font-size:17px}.help-spotlight p{font-size:12px;color:var(--muted);line-height:1.5;margin:5px 0}

/* 50 chapter roadmap */
.roadmap-mode-tabs{display:inline-flex;gap:6px;background:var(--surface-2);padding:5px;border-radius:14px;margin-top:16px}
.roadmap-mode-tabs button{border:0;background:transparent;color:var(--muted);font-weight:750;font-size:12px;padding:10px 13px;border-radius:10px;cursor:pointer}.roadmap-mode-tabs button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.book-roadmap-hero{align-items:center}.book-count{min-width:180px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:26px;box-shadow:var(--shadow-sm)}
.book-count strong{font-size:44px;line-height:1}.book-count small{font-size:18px;color:var(--muted);font-weight:700}.book-count span{margin-top:8px;color:var(--muted);font-size:12px}
.book-chapter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.chapter-card{display:grid;grid-template-columns:58px 1fr;gap:15px;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:17px;box-shadow:var(--shadow-sm);transition:.18s ease}.chapter-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}.chapter-card.complete{background:linear-gradient(135deg,var(--surface),var(--green-soft))}
.chapter-number{width:50px;height:50px;border-radius:16px;background:var(--surface-2);display:grid;place-items:center;font-weight:850;font-size:16px;color:var(--accent)}.chapter-card.complete .chapter-number{background:var(--green);color:white}
.chapter-body h3{font-size:17px;margin:7px 0 6px}.chapter-body>p{font-size:12px;color:var(--muted);line-height:1.55;margin:0 0 12px}.chapter-patterns{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 12px}.chapter-patterns button,.chapter-patterns span{border:1px solid var(--border);background:var(--surface-3);color:var(--text);border-radius:9px;padding:6px 8px;font-family:'Noto Sans JP',sans-serif;font-size:11px;cursor:pointer}.chapter-patterns span{color:var(--muted)}

/* support */
.support-head{align-items:flex-start}.support-head-actions{display:flex;gap:8px;flex-wrap:wrap}.support-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}.support-categories{position:sticky;top:92px;background:var(--surface);border:1px solid var(--border);padding:8px;border-radius:20px;box-shadow:var(--shadow-sm)}
.support-categories button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:0;background:transparent;color:var(--muted);font-weight:700;padding:12px;border-radius:13px;cursor:pointer}.support-categories button span{width:28px;height:28px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center}.support-categories button.active{background:var(--accent-soft);color:var(--accent)}
.support-main{display:grid;gap:14px}.support-issues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.support-issues button{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--border);background:var(--surface-3);color:var(--text);padding:12px 13px;border-radius:13px;text-align:left;font-size:12px;font-weight:700;cursor:pointer}.support-issues button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.support-answer{display:flex;gap:12px;margin-top:16px;padding:16px;border-radius:16px;background:linear-gradient(135deg,var(--green-soft),var(--surface-3));border:1px solid var(--border)}.support-agent{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:var(--green);color:white;font-weight:800;flex:0 0 auto}.support-answer strong{font-size:13px}.support-answer p{font-size:13px;line-height:1.7;margin:5px 0}.support-answer small{font-size:10px;color:var(--muted)}
.support-form{margin-top:14px}.ticket-note{font-size:11px;color:var(--muted);margin:12px 0 15px}.ticket-list{display:grid;gap:8px}.ticket-row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:var(--surface-3)}.ticket-row strong{display:block;font-size:12px}.ticket-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.ticket-row>span{font-size:10px;background:var(--yellow-soft);padding:6px 9px;border-radius:999px;font-weight:750}

/* downloads */
.download-hero{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:30px;align-items:center;border:1px solid var(--border);background:linear-gradient(135deg,var(--surface),var(--blue-soft));border-radius:30px;padding:34px;box-shadow:var(--shadow)}.download-hero h1{font-size:42px;line-height:1.05;margin:7px 0 12px}.download-hero p{color:var(--muted);line-height:1.7;max-width:720px}.download-logo{width:220px;max-width:100%;justify-self:center;border-radius:40px;box-shadow:0 20px 50px rgba(16,36,62,.24)}
.download-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.download-grid .content-card{display:flex;flex-direction:column}.download-grid p{color:var(--muted);font-size:12px;line-height:1.65;flex:1}.download-icon{font-size:30px}.install-steps{margin-top:16px}.release-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}.release-steps>div{display:flex;gap:10px;border:1px solid var(--border);background:var(--surface-3);padding:14px;border-radius:15px}.release-steps b{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:var(--accent);color:white;flex:0 0 auto}.release-steps strong,.release-steps small{display:block}.release-steps strong{font-size:12px}.release-steps small{font-size:10px;color:var(--muted);line-height:1.5;margin-top:3px}

@media(max-width:900px){
  .ultimate-quick-grid,.support-layout,.download-hero{grid-template-columns:1fr}.support-categories{position:static;display:flex;overflow:auto}.support-categories button{min-width:max-content;width:auto}.book-chapter-grid{grid-template-columns:1fr}.download-grid{grid-template-columns:1fr}.release-steps{grid-template-columns:1fr 1fr}.download-logo{width:170px}.book-count{min-width:0;width:160px;justify-self:start}.support-issues{grid-template-columns:1fr}
}
@media(max-width:560px){
  .ultimate-quick-grid{grid-template-columns:1fr}.book-spotlight:after{font-size:86px}.book-spotlight h2{font-size:22px}.chapter-card{grid-template-columns:44px 1fr;padding:13px}.chapter-number{width:40px;height:40px;border-radius:13px}.roadmap-mode-tabs{display:flex;overflow:auto}.roadmap-mode-tabs button{white-space:nowrap}.download-hero{padding:22px}.download-hero h1{font-size:31px}.release-steps{grid-template-columns:1fr}.crop-modal-card{padding:20px}.support-head-actions{width:100%}.support-head-actions>*{flex:1}.book-count{width:100%;box-sizing:border-box}
}
.auth-text-btn{border:0;background:transparent;color:var(--accent);font-weight:750;font-size:11px;cursor:pointer;padding:2px 0 0;justify-self:end}.auth-text-btn:hover{text-decoration:underline}.password-reset-card{max-width:440px}

/* Massive grammar collection: progressive loading keeps 1000+ cards responsive. */
.load-more-wrap{display:flex;justify-content:center;padding:18px 0 4px}.load-more-wrap .secondary{min-width:220px}.load-more-wrap small{opacity:.65;font-weight:600}
.reference-placeholder{border-style:dashed;background:var(--surface-2)}


/* ===== SAKUPOU Book Access Gate ===== */
body.book-access-locked{overflow:hidden;}
body.book-access-locked .app-shell{visibility:hidden;pointer-events:none;user-select:none;}
.access-gate{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,rgba(246,242,233,.98),rgba(238,231,218,.98));overflow:auto;}
body.dark .access-gate{background:linear-gradient(135deg,rgba(20,22,18,.99),rgba(28,31,25,.99));}
.access-gate.hidden{display:none;}
.access-card{width:min(540px,100%);background:var(--card,#fffdf8);border:1px solid var(--line,#ddd3c6);border-radius:28px;padding:30px;box-shadow:0 24px 80px rgba(31,38,32,.16);}
.access-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
.access-brand .brand-mark{width:48px;height:48px;border-radius:14px;overflow:hidden;display:block;}
.access-brand img{width:100%;height:100%;display:block;object-fit:cover;}
.access-brand strong,.access-brand small{display:block;}
.access-brand strong{font-size:17px;letter-spacing:.04em;}
.access-brand small{color:var(--muted,#68736c);font-size:11px;margin-top:2px;}
.access-card h1{font-size:clamp(28px,6vw,42px);line-height:1.05;margin:8px 0 12px;letter-spacing:-.035em;}
.access-copy{color:var(--muted,#68736c);line-height:1.7;margin:0 0 20px;}
.access-product{display:grid;gap:3px;padding:15px 16px;border:1px solid var(--line,#ddd3c6);border-radius:16px;background:var(--soft,#f2ece1);margin-bottom:20px;}
body.dark .access-product{background:rgba(255,255,255,.035);}
.access-product span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent,#2f80ed);font-weight:800;}
.access-product strong{font-size:14px;}
.access-product small{color:var(--muted,#68736c);font-size:11px;}
.access-form label{display:block;font-weight:700;font-size:12px;margin-bottom:8px;}
.access-code-row{display:flex;gap:10px;align-items:stretch;}
.access-code-row input{min-width:0;flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:14px 15px;border-radius:14px;border:1px solid var(--line,#ddd3c6);background:var(--card,#fffdf8);color:inherit;outline:none;}
.access-code-row input:focus{border-color:var(--accent,#2f80ed);box-shadow:0 0 0 3px rgba(47,128,237,.14);}
.access-code-row button{white-space:nowrap;border-radius:14px;}
.access-help{display:flex;gap:10px;align-items:flex-start;margin:18px 0 6px;padding:12px 13px;border-radius:14px;background:rgba(91,117,93,.09);color:var(--muted,#68736c);}
.access-help>span{width:25px;height:25px;display:grid;place-items:center;border-radius:999px;background:rgba(91,117,93,.14);font-weight:800;color:var(--green,#5b755d);flex:0 0 auto;}
.access-help p{margin:1px 0 0;font-size:11px;line-height:1.55;}
#accessLogoutBtn{margin-top:8px;width:100%;text-align:center;}
@media(max-width:560px){.access-gate{padding:14px}.access-card{padding:22px;border-radius:22px}.access-code-row{flex-direction:column}.access-code-row button{min-height:48px}}


/* =========================================================
   SAKUPOU SKY BLUE BRAND — 2026-09-27
   New identity: shaded white S + light-blue gradient
   ========================================================= */
:root{
  --brand-sky-1:#c9f2ff;
  --brand-sky-2:#63d1f5;
  --brand-sky-3:#2f80ed;
  --brand-gradient:linear-gradient(135deg,var(--brand-sky-1) 0%,var(--brand-sky-2) 46%,var(--brand-sky-3) 100%);
}
body{
  background:
    radial-gradient(circle at 8% 2%,rgba(160,229,255,.28),transparent 26%),
    radial-gradient(circle at 94% 12%,rgba(99,209,245,.18),transparent 24%),
    var(--bg);
}
.brand-mark,
.brand-mark-image{
  background:var(--brand-gradient)!important;
  box-shadow:0 8px 24px rgba(47,128,237,.24)!important;
}
.brand-mark-image img{object-fit:cover!important}

/* Main landing / hero */
.hero,.hero-final,.roadmap-hero{
  background:
    radial-gradient(circle at 74% 18%,rgba(201,242,255,.72),transparent 24%),
    linear-gradient(135deg,var(--surface) 0%,#f2fbff 48%,#e3f5ff 100%);
}
.hero-final:after{
  background:radial-gradient(ellipse,rgba(86,204,242,.18),transparent 68%);
}
.hero-final h1 em:after{
  background:linear-gradient(90deg,rgba(99,209,245,.34),rgba(47,128,237,.18));
}
.kana-float{color:rgba(47,128,237,.24)}

/* Books across home/login: blue gradient + shaded SAKUPOU watermark */
.book-card,.final-book,.auth-book{
  background:linear-gradient(145deg,#bff1ff 0%,#64d0f5 43%,#2f80ed 100%)!important;
  color:#fff!important;
  box-shadow:15px 18px 0 rgba(61,169,191,.24),0 30px 62px rgba(47,128,237,.22)!important;
  position:relative;
  isolation:isolate;
}
.book-card::before,.final-book::before,.auth-book::before{
  content:"";
  position:absolute;
  z-index:0;
  width:70%;
  aspect-ratio:1;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  background:url("sakupou-white-mark.png") center/contain no-repeat;
  opacity:.24;
  pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(16,86,163,.14));
}
.book-card>*,
.final-book>*,
.auth-book>*{position:relative;z-index:1}
.auth-book{color:#fff!important}
.auth-book small,.auth-book strong,.auth-book span{color:#fff!important}
.book-spine{background:linear-gradient(90deg,rgba(12,76,157,.24),rgba(255,255,255,.08))}

/* Login & high-emphasis callouts */
.auth-visual{
  background:
    radial-gradient(circle at 16% 12%,rgba(255,255,255,.26),transparent 25%),
    linear-gradient(145deg,#8be0fb 0%,#56ccf2 42%,#2f80ed 100%)!important;
}
.next-unit-card{
  background:linear-gradient(120deg,#62cff3 0%,#2f80ed 100%)!important;
}
.primary{
  background:linear-gradient(135deg,#57c9f1 0%,#2f80ed 100%);
  box-shadow:0 7px 18px rgba(47,128,237,.16);
}
.primary:hover{background:linear-gradient(135deg,#4abfe9 0%,#236fd1 100%)}
.secondary{background:linear-gradient(135deg,#57c8d7,#3198c8)}
.profile-btn{background:linear-gradient(135deg,#58c9df,#2f80ed)}
.goal-ring{background:conic-gradient(var(--accent) var(--pct),var(--surface-2) 0)}
.progress-fill{background:linear-gradient(90deg,#68d4f4,#2f80ed)}
.sync-dot{background:#56ccf2}
.book-spotlight:after{color:#d8efff}
.access-product{background:linear-gradient(135deg,#f5fcff,#e7f6ff)!important}
.access-code-row input:focus{box-shadow:0 0 0 3px rgba(47,128,237,.14)!important}

/* Dark mode keeps the blue identity without becoming neon */
body.dark{
  background:
    radial-gradient(circle at 8% 2%,rgba(47,128,237,.12),transparent 28%),
    radial-gradient(circle at 94% 12%,rgba(86,204,242,.08),transparent 24%),
    var(--bg);
}
body.dark .hero,
body.dark .hero-final,
body.dark .roadmap-hero{
  background:linear-gradient(135deg,#162637 0%,#183148 58%,#173c58 100%);
}
/* =========================================================
   SAKUPOU SKY BLUE — FINAL POLISH
   Logo header + hero book + navbar dark mode
   ========================================================= */

/* ---------- HEADER / LOGO ---------- */

/* Paksa header memakai logo biru baru meskipun HTML masih memanggil logo lama */
.brand-mark-image{
  width:44px!important;
  height:44px!important;
  border-radius:13px!important;

  background:
    url("sakupou-logo-blue-master.png")
    center/cover no-repeat!important;

  box-shadow:
    0 10px 26px rgba(47,128,237,.28)!important;

  border:1px solid rgba(255,255,255,.20)!important;
  overflow:hidden!important;
}

/* sembunyikan gambar logo merah lama di dalam container */
.brand-mark-image img{
  opacity:0!important;
  visibility:hidden!important;
}

/* ---------- TOP BAR ---------- */

.topbar{
  margin-top:8px!important;
  padding:10px 18px!important;

  background:
    color-mix(in srgb,var(--surface) 66%,transparent)!important;

  border:1px solid
    color-mix(in srgb,var(--border) 72%,transparent)!important;

  border-radius:22px!important;

  backdrop-filter:
    blur(20px)
    saturate(140%)!important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(140%)!important;

  box-shadow:
    0 12px 34px rgba(26,89,145,.08)!important;
}

/* ---------- NAVBAR ---------- */

.desktop-nav{
  display:flex!important;
  gap:4px!important;

  padding:5px!important;

  border-radius:999px!important;

  background:
    color-mix(in srgb,var(--surface-2) 68%,transparent)!important;

  border:1px solid
    color-mix(in srgb,var(--border) 75%,transparent)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 24px rgba(14,62,104,.08)!important;
}

.desktop-nav button{
  padding:9px 15px!important;

  border-radius:999px!important;

  border:0!important;

  background:transparent!important;

  color:var(--muted)!important;

  transition:
    background .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease!important;
}

.desktop-nav button:hover{
  color:var(--text)!important;

  background:
    color-mix(in srgb,var(--surface) 72%,transparent)!important;
}

.desktop-nav button.active{
  color:#fff!important;

  background:
    linear-gradient(
      135deg,
      #63d1f5 0%,
      #389ff4 52%,
      #2f80ed 100%
    )!important;

  box-shadow:
    0 7px 18px rgba(47,128,237,.24),
    inset 0 1px 0 rgba(255,255,255,.24)!important;
}

/* ---------- ICON BUTTONS ---------- */

.icon-btn{
  border:
    1px solid
    color-mix(in srgb,var(--border) 72%,transparent)!important;

  background:
    color-mix(in srgb,var(--surface) 72%,transparent)!important;

  backdrop-filter:blur(14px)!important;

  box-shadow:
    0 7px 20px rgba(29,94,150,.07)!important;
}

.icon-btn:hover{
  color:#2f80ed!important;

  border-color:
    rgba(86,204,242,.55)!important;

  background:
    color-mix(in srgb,#56ccf2 10%,var(--surface))!important;
}

.profile-btn{
  background:
    linear-gradient(
      145deg,
      #72dcfa,
      #43acf4 52%,
      #2f80ed
    )!important;

  box-shadow:
    0 8px 22px rgba(47,128,237,.26)!important;
}


/* =========================================================
   HERO
   ========================================================= */

.hero-final{
  background:
    radial-gradient(
      circle at 76% 15%,
      rgba(99,209,245,.18),
      transparent 27%
    ),
    radial-gradient(
      circle at 14% 88%,
      rgba(47,128,237,.10),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--surface) 0%,
      #f3fbff 55%,
      #e7f7ff 100%
    )!important;

  border:
    1px solid
    color-mix(in srgb,#63d1f5 26%,var(--border))!important;
}


/* =========================================================
   HERO BOOK — REBUILD
   ========================================================= */

.hero-book-stage{
  min-height:300px!important;
  display:grid!important;
  place-items:center!important;
  position:relative!important;
  perspective:1000px!important;
}

.book-shadow{
  width:205px!important;
  height:42px!important;

  bottom:25px!important;

  background:
    rgba(15,73,145,.22)!important;

  filter:blur(22px)!important;

  transform:
    rotate(-3deg)!important;
}

.final-book{
  width:205px!important;

  aspect-ratio:.72!important;

  position:relative!important;

  overflow:hidden!important;

  border-radius:
    13px 25px 24px 12px!important;

  padding:
    26px 23px 23px 30px!important;

  color:#fff!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.20),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #a9ebff 0%,
      #65cff5 35%,
      #41a9f4 65%,
      #2f80ed 100%
    )!important;

  border:
    1px solid rgba(255,255,255,.32)!important;

  box-shadow:
    15px 17px 0 rgba(64,174,213,.20),
    0 30px 60px rgba(20,99,186,.30),
    inset 0 1px 1px rgba(255,255,255,.35)!important;

  transform:
    rotate(3deg)!important;

  isolation:isolate!important;
}


/* logo SAKUPOU putih shading di cover */
.final-book::before{
  content:""!important;

  position:absolute!important;

  width:76px!important;
  height:76px!important;

  left:50%!important;
  top:21px!important;

  transform:
    translateX(-50%)!important;

  background:
    url("sakupou-white-mark.png")
    center/contain no-repeat!important;

  opacity:.90!important;

  filter:
    drop-shadow(
      0 4px 8px
      rgba(25,94,172,.20)
    )!important;

  pointer-events:none!important;

  z-index:2!important;
}


/* gelombang dekorasi bawah cover */
.final-book::after{
  content:""!important;

  position:absolute!important;

  left:-25%!important;
  right:-25%!important;
  bottom:-10%!important;

  height:42%!important;

  border-radius:50% 50% 0 0!important;

  transform:
    rotate(-7deg)!important;

  background:
    linear-gradient(
      160deg,
      rgba(255,255,255,.24),
      rgba(255,255,255,.02)
    )!important;

  pointer-events:none!important;

  z-index:0!important;
}


.book-spine{
  position:absolute!important;

  left:0!important;
  top:0!important;
  bottom:0!important;

  width:18px!important;

  background:
    linear-gradient(
      90deg,
      rgba(18,84,164,.26),
      rgba(255,255,255,.08)
    )!important;

  border-right:
    1px solid rgba(255,255,255,.20)!important;

  z-index:3!important;
}


.book-shine{
  width:110px!important;
  height:320px!important;

  top:-80px!important;
  left:-155px!important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.21),
      transparent
    )!important;

  z-index:5!important;
}


/* pindahkan tulisan supaya tidak tabrakan dengan logo */
.book-kanji{
  position:relative!important;
  z-index:3!important;

  margin-top:75px!important;

  font-size:48px!important;

  line-height:1!important;

  text-shadow:
    0 4px 14px
    rgba(22,92,170,.18)!important;
}

.final-book strong{
  position:relative!important;

  z-index:3!important;

  font-size:22px!important;

  letter-spacing:.09em!important;

  text-shadow:
    0 3px 12px
    rgba(22,92,170,.17)!important;
}

.final-book small{
  position:relative!important;

  z-index:3!important;

  opacity:.92!important;

  font-size:10px!important;
}

.book-seal{
  z-index:4!important;

  background:
    rgba(255,255,255,.11)!important;

  border:
    1px solid
    rgba(255,255,255,.42)!important;

  backdrop-filter:blur(7px)!important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.18)!important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

body.dark .topbar{
  background:
    rgba(12,30,48,.60)!important;

  border:
    1px solid
    rgba(105,190,244,.13)!important;

  box-shadow:
    0 15px 35px
    rgba(0,0,0,.12)!important;
}

body.dark .desktop-nav{
  background:
    rgba(17,45,70,.54)!important;

  border:
    1px solid
    rgba(111,198,255,.15)!important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04),
    0 9px 26px
    rgba(0,0,0,.12)!important;
}

body.dark .desktop-nav button{
  color:#a9c6da!important;
}

body.dark .desktop-nav button:hover{
  color:#fff!important;

  background:
    rgba(105,198,255,.08)!important;
}

body.dark .desktop-nav button.active{
  color:#fff!important;

  background:
    linear-gradient(
      135deg,
      #55c8f5,
      #318fe8
    )!important;
}

body.dark .icon-btn{
  color:#c9e2f3!important;

  background:
    rgba(17,44,69,.55)!important;

  border:
    1px solid
    rgba(111,198,255,.16)!important;
}

body.dark .hero-final{
  background:
    radial-gradient(
      circle at 76% 16%,
      rgba(72,181,243,.12),
      transparent 29%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(47,128,237,.08),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #17334c 0%,
      #142b40 50%,
      #102438 100%
    )!important;

  border:
    1px solid
    rgba(107,191,246,.16)!important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025),
    0 18px 44px
    rgba(0,0,0,.10)!important;
}


/* ---------- MOBILE ---------- */

@media(max-width:760px){

  .topbar{
    margin:
      6px 6px 0!important;

    border-radius:
      18px!important;
  }

  .final-book{
    width:
      155px!important;

    padding:
      21px 17px 18px 23px!important;
  }

  .final-book::before{
    width:
      58px!important;

    height:
      58px!important;

    top:
      16px!important;
  }

  .book-kanji{
    margin-top:
      56px!important;

    font-size:
      36px!important;
  }
}