:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",Arial,sans-serif;color:#26324c;background:#f8f9fd;font-synthesis:none;--ink:#26324c;--muted:#8991a7;--border:#e9ecf4;--violet:#705be4;--pale:#f1efff;--surface:#fff;--shadow:0 11px 35px rgba(35,43,86,.045)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #b5a9ff;outline-offset:3px}a{text-decoration:none;color:inherit}h1,h2,h3,p{margin-top:0}.app-shell{display:grid;grid-template-columns:258px minmax(0,1fr);min-height:100vh}.sidebar{background:#fff;border-right:1px solid var(--border);min-height:100vh;padding:32px 20px 24px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;padding:0 8px;margin-bottom:61px}.brand-symbol,.mobile-brand{background:#705be4;color:#fff;font-weight:800;font-size:26px;display:grid;place-items:center;border-radius:13px;width:45px;height:45px;box-shadow:0 7px 18px #705be437}.brand strong{display:block;font-weight:850;font-size:23px;letter-spacing:-.9px;color:#252647}.brand-em{color:#7761e8}.brand small{display:block;color:#a0a4b5;font-weight:650;font-size:10px;letter-spacing:1.7px;margin-top:1px}.side-group-label{color:#acb1c0;letter-spacing:1.8px;font-size:10px;font-weight:850;padding:0 14px;margin-bottom:17px}.side-nav{display:grid;gap:6px}.nav-item{display:flex;align-items:center;width:100%;background:transparent;border:0;text-align:left;color:#7c849a;border-radius:12px;min-height:52px;padding:7px 13px;font-size:13px;font-weight:750;gap:13px;transition:background .2s,color .2s}.nav-icon{font-weight:750;font-size:19px;display:grid;place-items:center;width:28px;height:28px;color:inherit}.nav-arrow{margin-left:auto;color:#bfc4d0;font-size:20px}.nav-item:hover{background:#f7f6ff}.nav-item.active{background:#f1efff;color:#6e58e4}.nav-item.active .nav-arrow{color:#7864ef}.tools-label{margin-top:44px}.sidebar-bottom{margin-top:auto;border-radius:16px;background:#f5f3ff;padding:23px 19px;color:#6658c5;position:relative;overflow:hidden}.side-bottom-icon{font-size:23px;display:block;margin-bottom:13px}.sidebar-bottom strong{font-size:13px;display:block}.sidebar-bottom p{font-size:12px;line-height:1.65;color:#8983ba;margin:8px 0 0}.main{min-width:0}.topbar{height:88px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4.5vw,62px);gap:12px}.breadcrumb{font-size:10px;font-weight:850;letter-spacing:1.55px;color:#a3aabc}.breadcrumb b{color:#5f6682}.breadcrumb-dot{color:#d4d6df;margin:0 10px}.topbar-right{display:flex;align-items:center;gap:17px}.connection-pill{display:flex;align-items:center;gap:8px;font-size:11px;color:#7c879f;font-weight:700}.online-dot{background:#45bd97;width:7px;height:7px;border-radius:100%}.top-import{border:0;color:#fff;background:#705be4;padding:13px 17px;border-radius:11px;font-size:12px;font-weight:780;box-shadow:0 6px 13px #705be421}.top-import:hover,.button-primary:hover{background:#6049d0}.mobile-brand{display:none}.content{max-width:1280px;margin:auto;padding:35px clamp(24px,4.5vw,62px) 0}.hero{min-height:260px;background:linear-gradient(115deg,#332d68 0%,#5e50b5 70%,#7768cf 100%);border-radius:21px;display:flex;align-items:center;position:relative;overflow:hidden;padding:35px clamp(28px,4vw,53px);color:white}.hero-copy{z-index:1;max-width:610px}.hero-kicker{color:#cec8ff;font-size:10px;font-weight:850;letter-spacing:2.05px;margin-bottom:19px}.hero h1{font-size:clamp(33px,4vw,53px);font-weight:800;letter-spacing:1px;line-height:1.24;margin:0 0 15px}.hero h1 span{color:#f4eafa}.hero p{font-size:12px;color:#dfd9ff;line-height:1.7;max-width:440px;margin:0}.hero-art{height:100%;position:absolute;right:6%;top:0;width:290px;display:grid;place-items:center}.hero-kanji{color:#ffffffea;font-size:160px;font-weight:500;z-index:2;transform:rotate(-9deg);text-shadow:0 15px 40px #241b633d}.hero-mini{position:absolute;bottom:42px;right:25px;color:#e8e0ff;font-size:19px;letter-spacing:9px;z-index:2;transform:rotate(10deg)}.hero-sparkle{position:absolute;top:40px;left:0;font-size:36px;color:#ebcfff}.art-circle{position:absolute;border-radius:50%;border:1px solid #ffffff3b}.art-circle-one{width:265px;height:265px;background:#ffffff10}.art-circle-two{width:365px;height:365px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:24px}.metric{display:flex;align-items:center;gap:15px;border:1px solid var(--border);border-radius:15px;background:var(--surface);padding:19px 18px;box-shadow:var(--shadow);min-width:0}.metric-icon{flex:0 0 42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:23px;background:#f0edff;color:#795fe6}.metric:nth-child(2) .metric-icon{background:#eaf8f4;color:#34ad82}.metric:nth-child(3) .metric-icon{background:#fff4e7;color:#ecac59}.metric:nth-child(4) .metric-icon{background:#e8f3fd;color:#5d94df}.metric-body{min-width:0}.metric-body strong{display:block;font-size:23px;font-weight:840;line-height:1.2;color:#2d3352}.metric-body small{font-size:10px;color:#999fb0;font-weight:650;white-space:nowrap}.work-area{padding-top:42px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.eyebrow{color:#9c8cf5;letter-spacing:2px;font-size:10px;font-weight:850;margin-bottom:8px}.section-heading h2{font-size:25px;letter-spacing:-.7px;color:#292e4c;margin:0 0 7px}.section-heading p{font-size:12px;color:#969eb0;margin-bottom:0}.section-count{color:#8077c9;background:#f0eeff;padding:9px 13px;border-radius:9px;font-size:11px;font-weight:800;white-space:nowrap}.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}.toolbar.hidden{display:none}.search-box{flex:1;display:flex;align-items:center;background:white;border:1px solid var(--border);height:46px;border-radius:11px;padding:0 12px;gap:10px;min-width:0}.search-box:focus-within{border-color:#b6a8fb}.search-icon{font-size:23px;color:#a9adba;line-height:1}.search-box input{border:0;outline:0;min-width:0;flex:1;background:transparent;font-size:12px;color:#333a58}.search-box input::placeholder{color:#abb0c1}.search-box kbd{font:inherit;color:#bec4d1;border:1px solid #edf0f4;border-radius:5px;padding:3px 6px;font-size:10px}.select-wrap{background:white;border:1px solid var(--border);border-radius:11px;display:flex;align-items:center;gap:10px;padding:0 12px;height:46px;min-width:215px}.select-wrap span{white-space:nowrap;font-size:10px;color:#a0a6b7;font-weight:800}.select-wrap select{min-width:0;width:100%;border:0;background:transparent;color:#3b4160;font-size:11px;font-weight:760;outline:0}.word-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.word-card,.grammar-card,.kanji-card,.empty-panel,.import-panel,.study-panel{background:#fff;border:1px solid var(--border);border-radius:15px;box-shadow:var(--shadow)}.word-card{padding:21px 23px;display:flex;flex-direction:column;gap:12px}.word-top{display:flex;justify-content:space-between;align-items:start;gap:10px}.jp-main{font-size:27px;line-height:1.3;color:#282e49;font-weight:700;word-break:break-word}.jp-read{font-size:12px;color:#9a8dcb;margin-top:3px}.audio-btn{border:0;border-radius:11px;background:#f4f2ff;color:#715de0;width:40px;height:40px;font-size:19px;flex:0 0 40px}.audio-btn:hover{background:#e6e0ff}.word-meaning{font-size:13px;color:#49516e;font-weight:750}.word-example{border-top:1px solid #f0f1f5;padding-top:11px;margin-top:auto;font-size:11px;line-height:1.7;color:#8790a4}.word-example .ja{display:block;color:#565c78}.lesson-tag{font-size:10px;font-weight:750;color:#8d7de0;display:inline-flex;gap:4px;align-items:center}.grammar-list{display:grid;gap:13px}.grammar-card{padding:21px 24px}.grammar-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.grammar-title{font-size:17px;font-weight:800;color:#343454;margin:0 0 6px}.grammar-pattern{display:inline-block;border-radius:7px;padding:8px 11px;background:#f3f0ff;color:#624dd0;font-weight:770;font-size:14px;margin:9px 0}.grammar-explanation{font-size:12px;color:#737d94;line-height:1.8;margin-bottom:14px}.grammar-example{background:#f8f9fc;padding:11px 13px;border-radius:9px;margin:6px 0;font-size:12px;color:#6d748c;line-height:1.7}.grammar-example strong{display:block;color:#363d5c;font-size:14px}.kanji-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.kanji-card{padding:18px;text-align:center}.kanji-character{display:block;font-size:65px;line-height:1.3;font-weight:500;color:#282b4b}.kanji-meaning{font-size:13px;font-weight:800;color:#505471;margin:6px 0}.kanji-readings{font-size:11px;color:#9b91bf;line-height:1.7;word-break:break-word}.kanji-words{border-top:1px solid #f0eff6;margin-top:13px;padding-top:10px;font-size:11px;color:#778098;line-height:1.6}.kanji-words strong{color:#3a415b}.kanji-card .lesson-tag{margin-top:11px}.empty-panel{padding:55px 25px;text-align:center;color:#848a9f}.empty-symbol{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 14px;border-radius:20px;background:#f1efff;color:#725de4;font-size:37px}.empty-panel h3{color:#353955;margin:0 0 10px}.empty-panel p{font-size:12px;max-width:410px;margin:0 auto 18px;line-height:1.8}.button-primary,.button-secondary,.button-danger,.button-subtle{border:0;padding:12px 17px;border-radius:10px;font-size:12px;font-weight:800;min-height:42px}.button-primary{background:#705be4;color:white}.button-secondary{background:#efeaff;color:#705be4}.button-secondary:hover{background:#e4dbff}.button-danger{color:#d04c6b;background:#fff0f3}.button-subtle{color:#797e96;background:#f2f3f9}.study-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:16px}.study-panel{padding:25px;min-width:0}.study-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.study-controls label{display:flex;flex-direction:column;gap:7px;font-size:10px;font-weight:850;color:#969caf;flex:1;min-width:145px}.study-controls select{border:1px solid var(--border);padding:10px 12px;background:#fff;border-radius:8px;color:#3a3e5b;max-width:100%;font-weight:700}.study-progress-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:11px;font-weight:800;color:#70768f}.study-progress-bar{height:6px;border-radius:6px;background:#eeeefa;overflow:hidden;margin-bottom:20px}.study-progress-fill{height:100%;background:linear-gradient(90deg,#705be4,#a89cf4);transition:width .25s}.flashcard{width:100%;min-height:270px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;padding:28px 20px;border:2px solid #e7e2ff;border-radius:17px;background:radial-gradient(circle at 85% 10%,#ebe6ff 0,transparent 40%),linear-gradient(135deg,#fff,#faf9ff);position:relative;text-align:center;color:var(--ink);transition:transform .15s}.flashcard:hover{border-color:#b9aafd;transform:translateY(-1px)}.flashcard .flash-label{font-size:10px;font-weight:850;letter-spacing:1.6px;color:#a39abf}.flashcard .flash-jp{font-size:clamp(32px,5vw,54px);line-height:1.35;font-weight:750;word-break:break-word}.flashcard .flash-meaning{font-size:clamp(24px,3vw,31px);line-height:1.4;font-weight:780}.flashcard .flash-reading{color:#9489c7;font-size:14px}.flashcard .flash-hint{color:#a6a0bb;font-size:11px;position:absolute;bottom:18px}.flashcard .flash-extra{font-size:12px;color:#77809a;max-width:480px;line-height:1.65}.flash-actions{display:flex;gap:10px;margin-top:16px}.flash-actions button{flex:1}.flash-nav{display:flex;align-items:center;justify-content:space-between;margin-top:15px;gap:10px}.flash-nav button{background:transparent;color:#757a9a;border:1px solid #e9e6f4;border-radius:9px;padding:9px 14px;font-size:12px;font-weight:800}.flash-nav span{font-size:11px;color:#a0a4bb}.study-side{display:flex;flex-direction:column;gap:14px}.study-aside-box{border-radius:15px;background:#f1effe;border:1px solid #e9e5ff;padding:20px}.study-aside-box h3{font-size:14px;margin-bottom:10px;color:#423a82}.study-aside-box p{color:#8b80ba;line-height:1.7;font-size:12px;margin-bottom:0}.study-aside-box .big-number{font-size:31px;font-weight:850;color:#6e5cdc;margin-bottom:9px}.study-tip{background:#fff9ed;border-color:#faecd0}.study-tip h3{color:#936d38}.study-tip p{color:#a48b6b}.import-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr);gap:16px}.import-panel{padding:23px;min-width:0}.import-panel h3{font-size:15px;margin:0 0 8px;color:#30364e}.import-panel p,.import-panel li{font-size:12px;color:#8e96aa;line-height:1.8}.upload-zone{border:2px dashed #d7d0fa;border-radius:13px;background:#fbfaff;padding:30px 18px;text-align:center;cursor:pointer;transition:border-color .2s}.upload-zone.dragging,.upload-zone:hover{border-color:#7458e2;background:#f3efff}.upload-icon{display:block;font-size:38px;color:#7963e6;margin-bottom:10px}.upload-zone strong{font-size:13px;display:block;margin-bottom:7px;color:#5c557e}.upload-zone small{font-size:11px;color:#a0a0b9}.upload-zone input{display:none}.textarea-label{display:block;font-size:11px;color:#656b84;font-weight:800;margin-top:20px;margin-bottom:10px}textarea{width:100%;height:134px;border:1px solid var(--border);border-radius:11px;padding:14px;font-size:12px;resize:vertical;background:#fcfcff;color:#41485f;line-height:1.6}.button-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}.import-guide{background:#f7f6ff;border:1px solid #ece9ff;padding:14px;border-radius:11px;margin:16px 0}.import-guide strong{color:#6454c8;font-size:12px}.import-guide p{margin:6px 0 0}.imported-list{display:grid;gap:8px;margin-top:16px}.imported-item{background:#fafbff;border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.imported-item strong{font-size:12px;display:block}.imported-item small{color:#9a9fad;font-size:10px;display:block;margin-top:4px}.imported-item button{border:0;background:#fff0f2;color:#c95670;padding:8px 11px;border-radius:8px;font-weight:800;font-size:11px;flex-shrink:0}.help-note{font-size:11px;color:#8a92a8;line-height:1.7;margin-top:14px}.notice{padding:13px 15px;background:#fff8e8;border:1px solid #f7e6c4;color:#9b7837;font-size:11px;line-height:1.7;border-radius:11px;margin-bottom:14px}.footer{text-align:center;font-size:10px;color:#a6acbc;padding:50px 10px 29px}.footer span{color:#705be4;margin:0 6px}.toast{position:fixed;top:24px;right:25px;bottom:auto;left:auto;z-index:99999;padding:14px 18px;background:#333356;color:white;font-size:12px;font-weight:650;box-shadow:0 9px 30px #16144330;border-radius:12px;max-width:min(440px,calc(100vw - 30px));opacity:0;pointer-events:none;transform:translateY(-15px);transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:none}.mobile-nav{display:none}.mobile-nav button{border:0}.loading{padding:55px;text-align:center;color:#9296ae;font-size:13px}
@media(max-width:1180px){.app-shell{grid-template-columns:220px minmax(0,1fr)}.sidebar{padding-left:12px;padding-right:12px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-art{right:1%;opacity:.5}.kanji-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.app-shell{display:block}.sidebar{display:none}.topbar{height:67px;padding:0 22px}.mobile-brand{display:grid;width:34px;height:34px;border-radius:10px;font-size:22px}.topbar-left{display:flex;gap:11px;align-items:center}.breadcrumb{letter-spacing:.75px;font-size:9px}.content{padding:21px 20px 0}.hero{min-height:232px}.hero-art{right:0}.mobile-nav{position:fixed;z-index:30;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:calc(68px + env(safe-area-inset-bottom));padding:6px 2px calc(6px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--border);box-shadow:0 -7px 22px #1f225609}.mobile-nav button{background:transparent;color:#959ab0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:9px;font-weight:800;padding:4px 1px;min-width:0}.mobile-nav button.active{color:#705be4;background:#f5f2ff}.mobile-nav-icon{font-size:18px;line-height:1}.mobile-nav small{font-size:9px;white-space:nowrap;letter-spacing:-.3px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.footer{padding-bottom:108px}.toast{top:calc(16px + env(safe-area-inset-top));right:16px;bottom:auto;left:auto}.study-layout{grid-template-columns:1fr}.study-side{flex-direction:row}.study-side>*{flex:1}.import-layout{grid-template-columns:1fr}}
@media(max-width:570px){.connection-pill{display:none}.topbar{padding:0 17px}.top-import{padding:11px 12px}.top-import span{display:none}.content{padding:16px 13px 0}.hero{min-height:208px;padding:23px 22px;border-radius:16px}.hero h1{font-size:35px}.hero-kicker{font-size:8px;letter-spacing:1.5px;margin-bottom:14px}.hero p{max-width:280px;font-size:11px}.hero-art{right:-95px;width:250px;opacity:.32}.hero-kanji{font-size:155px}.metrics{gap:9px;margin-top:12px}.metric{padding:13px 11px;border-radius:12px;gap:10px}.metric-icon{flex-basis:35px;height:35px;font-size:19px;border-radius:9px}.metric-body strong{font-size:20px}.metric-body small{font-size:9px;white-space:normal}.work-area{padding-top:30px}.section-heading h2{font-size:22px}.section-heading p{font-size:11px;line-height:1.6}.section-count{font-size:10px;padding:8px}.toolbar{flex-direction:column;align-items:stretch}.search-box{flex:auto}.search-box kbd{display:none}.select-wrap{min-width:0}.word-list,.kanji-grid{grid-template-columns:1fr}.word-card{padding:18px}.kanji-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grammar-card{padding:18px}.study-panel{padding:15px}.flashcard{min-height:255px}.flash-actions{gap:6px}.flash-actions button{padding:9px 8px;font-size:11px}.study-side{flex-direction:column}.study-aside-box{padding:15px}.import-panel{padding:16px}.import-guide{padding:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Ruby & Furigana styling */
ruby{ruby-position:over;display:inline-flex;flex-direction:column-reverse;vertical-align:bottom;align-items:center;text-align:center;line-height:1}
rt{display:block;font-size:.52em;line-height:1.15;color:#705be4;font-weight:700;letter-spacing:0;user-select:none}
.word-example ruby rt,.grammar-example ruby rt{font-size:.6em;color:#8c7ee2}
.flashcard ruby rt{font-size:.44em;color:#705be4}

/* Flashcard shuffle & reverse controls */
.study-quick-btns{display:flex;gap:8px;align-items:flex-end}
.btn-study-tool{border:1px solid var(--border);background:#fff;border-radius:8px;padding:10px 14px;font-size:11px;font-weight:750;color:#535974;display:inline-flex;align-items:center;gap:6px;transition:all .2s;height:42px}
.btn-study-tool:hover{background:#f7f6ff;border-color:#b5a9ff;color:#6e58e4}
.btn-study-tool.active{background:#f0edff;border-color:#705be4;color:#6e58e4}

/* User pill in topbar */
.user-pill{display:flex;align-items:center;gap:8px;background:#f5f3ff;border:1px solid #e7e2ff;border-radius:30px;padding:4px 6px 4px 10px;font-size:11px}
.user-badge-role{background:#705be4;color:#fff;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 7px;border-radius:10px}
.user-badge-role.role-user{background:#34ad82}
.user-name{font-weight:750;color:#3b3f5c;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-logout{border:0;background:#fff;color:#d04c6b;border-radius:20px;padding:5px 10px;font-size:10px;font-weight:800;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.btn-logout:hover{background:#fff0f3}

/* Login Overlay & Modal */
.login-overlay{position:fixed;inset:0;background:rgba(30,26,61,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px}
.login-card{background:#fff;border-radius:22px;padding:36px 32px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(18,16,48,.28);border:1px solid rgba(255,255,255,.6)}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.login-brand h2{font-size:24px;letter-spacing:-.8px;color:#252647;margin:0}
.login-brand small{color:#928cb5;font-weight:800;letter-spacing:1.5px;font-size:9px;display:block}
.login-desc{font-size:12px;color:#7b8398;line-height:1.6;margin-bottom:24px}
.login-form{display:flex;flex-direction:column;gap:16px}
.login-field{display:flex;flex-direction:column;gap:6px}
.login-field span{font-size:10px;font-weight:850;letter-spacing:1.2px;color:#7b8196}
.login-field input{height:46px;border:1px solid var(--border);border-radius:11px;padding:0 14px;font-size:13px;color:#2a304a;background:#fbfbfe;transition:border-color .2s}
.login-field input:focus{border-color:#705be4;outline:none;background:#fff}
.login-error{background:#fff0f3;color:#c94364;border:1px solid #ffd0d9;border-radius:9px;padding:10px 12px;font-size:11px;font-weight:650;line-height:1.5}
.login-submit-btn{height:48px;font-size:13px;margin-top:4px}
.login-meta{margin-top:22px;padding-top:18px;border-top:1px dashed #e8e6f4;font-size:11px;color:#8c93a8;line-height:1.6}
.login-meta strong{color:#554992;font-size:11px;display:block;margin-bottom:4px}
.login-meta code{background:#f0edff;color:#644ec8;padding:2px 5px;border-radius:5px;font-weight:700}
.login-meta small{display:block;font-size:10px;color:#9ea5b8;margin-top:6px}

/* User Management Tab */
.users-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:18px}
.user-form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.user-field{display:flex;flex-direction:column;gap:6px}
.user-field span{font-size:10px;font-weight:850;letter-spacing:1.2px;color:#7b8196}
.user-field input,.user-field select{height:42px;border:1px solid var(--border);border-radius:10px;padding:0 12px;font-size:12px;color:#2e344e;background:#fcfcff}
.user-field select{font-weight:700}
.user-list{display:grid;gap:10px;margin-top:14px}
.user-card-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.user-card-main{display:flex;align-items:center;gap:12px}
.user-avatar-circle{width:38px;height:38px;border-radius:10px;background:#f0edff;color:#705be4;display:grid;place-items:center;font-weight:800;font-size:16px}
.user-avatar-circle.role-user{background:#eaf8f4;color:#34ad82}
.user-card-details strong{font-size:13px;color:#2b314d;display:block}
.user-card-details small{font-size:10px;color:#8c93a8;display:block;margin-top:2px}
.user-card-actions{display:flex;align-items:center;gap:8px}

@media(max-width:850px){.users-layout{grid-template-columns:1fr}}

/* AI Prompt & Schema Guide styling */
.ai-guide-box{background:linear-gradient(135deg,#fbfaff 0%,#f4f0ff 100%);border:1px solid #ddd6fe;border-radius:15px;padding:20px;margin-bottom:20px}
.ai-guide-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ai-guide-title{display:flex;align-items:center;gap:8px;color:#4f3db5;font-size:14px;font-weight:800}
.ai-guide-box p{font-size:12px;color:#675e96;line-height:1.65;margin-bottom:12px}
.prompt-preview-box{background:#232238;color:#eae8fa;border-radius:10px;padding:14px 16px;font-family:Consolas,Monaco,"Courier New",monospace;font-size:11px;line-height:1.55;max-height:180px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;border:1px solid #3c395c}
.ai-guide-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.schema-pill{display:inline-block;background:#e9e4ff;color:#634fd0;font-size:10px;font-weight:850;padding:3px 8px;border-radius:6px;margin:2px 4px 2px 0}

/* Lesson Management & Search UI */
.lesson-search-bar{display:flex;align-items:center;background:#fff;border:1px solid var(--border);border-radius:12px;padding:0 14px;height:46px;gap:10px;margin-bottom:12px;transition:border-color .2s}
.lesson-search-bar:focus-within{border-color:#705be4;box-shadow:0 0 0 3px rgba(112,91,228,.12)}
.lesson-search-bar input{border:0;outline:0;flex:1;font-size:13px;color:#2c324e;background:transparent}
.btn-clear-search{background:transparent;border:0;color:#9b9fb2;font-size:14px;padding:4px 6px;border-radius:50%}
.btn-clear-search:hover{color:#555a73}

.lesson-filter-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.lesson-filter-btn{border:1px solid var(--border);background:#fff;color:#686f87;border-radius:9px;padding:8px 14px;font-size:11px;font-weight:750;transition:all .18s}
.lesson-filter-btn:hover{background:#f8f7ff;color:#705be4}
.lesson-filter-btn.active{background:#705be4;color:#fff;border-color:#705be4;box-shadow:0 4px 12px rgba(112,91,228,.25)}

.lesson-card-list{display:grid;gap:12px;margin-top:12px}
.lesson-card-item{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);transition:border-color .2s}
.lesson-card-item:hover{border-color:#cfc6fc}
.lesson-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.lesson-card-title-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lesson-card-title-group strong{font-size:15px;color:#282d47}
.lesson-badge-level{background:#f1efff;color:#6952e4;font-size:10px;font-weight:850;padding:3px 8px;border-radius:6px;border:1px solid #ddd6fe}
.lesson-badge-mine{background:#eafaf4;color:#239c71;font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px;border:1px solid #b7ecd7}
.lesson-card-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:11px;color:#858d9f;font-weight:650}
.lesson-card-meta span{display:inline-flex;align-items:center;gap:4px}
.lesson-card-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:10px;border-top:1px solid #f2f3f8}
.btn-sm{padding:7px 12px;font-size:11px;min-height:34px;border-radius:8px;font-weight:750}

.upload-zone-button{margin-top:12px}

/* Compact account controls and accessible forms on small screens. */
.mobile-admin{display:none;border:0;background:#efeaff;color:#6049d0;border-radius:10px;min-height:42px;padding:8px 11px;font-weight:800;font-size:12px}
.login-overlay{overflow-y:auto;align-items:safe center}
.login-card{margin:auto}
@media(max-width:850px){
  .mobile-admin:not([style*="display: none"]){display:inline-flex;align-items:center;gap:5px}
  .topbar-right{gap:8px;min-width:0}
  .user-name{max-width:80px}
}
@media(max-width:570px){
  .topbar{height:auto;min-height:67px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .topbar-right{flex-wrap:wrap;justify-content:flex-end}
  .mobile-admin span{display:none}
  .user-name{max-width:64px}
  .user-pill{padding-left:6px;gap:4px}
  .user-badge-role{font-size:8px;padding:3px 5px}
  .btn-logout{min-height:36px;padding:5px 7px}
  .login-card{padding:26px 22px}
  .login-field input,.user-field input,.user-field select,.search-box input,.lesson-search-bar input,textarea,.study-controls select{font-size:16px}
  .user-card-item{flex-wrap:wrap}
  .user-card-actions{flex-wrap:wrap}
  .lesson-search-bar input{min-width:0}
}

/* Phone navigation and study controls */
body{min-width:0}
@media(max-width:850px){
  .mobile-nav{grid-template-columns:repeat(7,minmax(0,1fr));height:calc(70px + env(safe-area-inset-bottom));padding-inline:2px}
  .mobile-nav button{min-width:0;min-height:46px;gap:2px;padding:3px 1px}
  .mobile-nav small{font-size:8.5px;letter-spacing:-.4px;white-space:nowrap}
  .top-import{display:none}
  .footer{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .toast{top:calc(16px + env(safe-area-inset-top));right:12px;left:12px;bottom:auto;max-width:none}
  .flashcard{touch-action:pan-y}
  .flash-nav button,.audio-btn,.lesson-card-actions button,.lesson-filter-btn,.btn-study-tool{min-height:44px}
  .audio-btn{width:44px;flex-basis:44px}
}

.reading-list{display:grid;gap:16px}
.reading-card{background:#fff;border:1px solid var(--border);border-radius:15px;padding:24px;box-shadow:var(--shadow);min-width:0}
.reading-header h3{font-size:19px;color:#30364e;margin:8px 0 18px}
.reading-text{font-size:20px;line-height:2.2;color:#282e49;white-space:pre-wrap;overflow-wrap:anywhere}
.reading-text ruby rt{font-size:.5em;color:#705be4}
.reading-translation{margin-top:20px;border-radius:10px;background:#f7f6ff;padding:13px 15px;color:#514b78;line-height:1.7}
.reading-translation summary{cursor:pointer;font-weight:750}
.reading-translation p{white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0 0}
.reading-actions{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-top:20px}
.reading-actions label{display:flex;flex-direction:column;gap:5px;color:#737a91;font-size:12px;font-weight:700}
.reading-actions select{min-height:44px;border:1px solid var(--border);border-radius:9px;padding:8px;background:white;font-size:16px}
.reading-note{font-size:11px;color:#7b8398;line-height:1.6;margin:12px 0 0}
@media(max-width:570px){.reading-card{padding:18px}.reading-text{font-size:18px}.reading-actions button{flex:1 1 125px;min-height:44px}.mobile-nav small{font-size:9px}}
@media(max-width:570px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px 13px}
  .topbar-left{min-width:0}
  .breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-right{flex-wrap:nowrap;gap:6px}
  .user-pill{min-width:0}
  .user-name{max-width:54px}
  .mobile-admin{min-width:44px;justify-content:center}
  .hero{min-height:165px;padding:20px}
  .hero h1{font-size:29px;margin-bottom:10px}
  .hero-kicker{margin-bottom:9px}
  .hero p{max-width:230px}
  .metrics{gap:8px}
  .metric{min-height:68px}
  .section-heading{align-items:flex-start}
  .section-heading>div:first-child{min-width:0}
  .section-count{white-space:normal;text-align:center;flex-shrink:0}
  .select-wrap select{font-size:16px}
  .study-controls label{min-width:0;flex:1 1 130px}
  .study-quick-btns{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .study-quick-btns button{flex:1 1 130px}
  .flashcard{min-height:230px;padding:28px 16px 45px}
  .flash-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .flash-actions button{min-width:0;min-height:48px;line-height:1.3}
  .flash-nav{flex-wrap:wrap}
  .flash-nav span{flex:1;min-width:0;overflow-wrap:anywhere}
  .lesson-card-actions button{flex:1 1 120px}
  .login-overlay{padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  .user-badge-role{display:none}
  .breadcrumb{font-size:8px}
  .mobile-nav small{font-size:9px}
  .flash-actions button{font-size:10px}
}




/* ==================== KANJI CANVAS & PRACTICE STYLING ==================== */
.kanji-subnav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.kanji-subtab-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: #686f87;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 750;
  transition: all .2s;
}
.kanji-subtab-btn:hover {
  background: #f8f7ff;
  color: #705be4;
}
.kanji-subtab-btn.active {
  background: #705be4;
  color: #fff;
  border-color: #705be4;
  box-shadow: 0 4px 12px rgba(112, 91, 228, 0.25);
}

.kanji-practice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
  gap: 20px;
}
.kanji-canvas-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kanji-write-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f2f3f8;
}
.kanji-info-badge {
  display: flex;
  align-items: center;
  gap: 12px;
}
.badge-char {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f1efff;
  color: #705be4;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 700;
  transition: all 0.2s ease;
}
.badge-char.badge-char-hidden {
  background: #f4f5f9;
  color: #94a3b8;
  font-size: 24px;
  border: 2px dashed #cbd5e1;
  cursor: pointer;
  user-select: none;
}
.badge-char.badge-char-hidden:hover {
  background: #edeef6;
  color: #6366f1;
  border-color: #a5b4fc;
}
.kanji-info-badge strong {
  display: block;
  font-size: 15px;
  color: #2b314d;
}
.kanji-info-badge small {
  color: #8c93a8;
  font-size: 11px;
}
.kanji-mode-toggle {
  display: flex;
  gap: 6px;
  background: #f5f4fa;
  padding: 4px;
  border-radius: 10px;
}
.btn-mode {
  border: 0;
  background: transparent;
  color: #777d94;
  font-size: 11px;
  font-weight: 750;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all .18s;
}
.btn-mode.active {
  background: #fff;
  color: #705be4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.canvas-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid #cfc6fc;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.03);
  touch-action: none;
}
.canvas-crosshair {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.canvas-crosshair::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px dashed #dcd8f5;
}
.canvas-crosshair::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  border-left: 1px dashed #dcd8f5;
}
#kanjiCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  z-index: 2;
}
.kanji-hint-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.kanji-hint-overlay svg {
  width: 100%;
  height: 100%;
}

/* ==================== FLASHCARD COMPLETION CARD ==================== */
.flash-complete-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 24px;
  text-align: center;
  box-shadow: var(--shadow);
  animation: fadeIn 0.3s ease;
  max-width: 600px;
  margin: 0 auto;
}
.complete-badge-icon {
  font-size: 54px;
  margin-bottom: 12px;
  line-height: 1;
}
.flash-complete-card h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}
.complete-subtitle {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 18px;
}
.complete-stats-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
  padding: 14px 18px;
  background: #f8f9fd;
  border-radius: 14px;
  border: 1px solid #edf0f7;
}
.stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 80px;
}
.stat-num {
  font-size: 22px;
  font-weight: 850;
  color: var(--ink);
}
.stat-num.text-success {
  color: #10b981;
}
.stat-num.text-warning {
  color: #f59e0b;
}
.stat-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.complete-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  margin: 0 auto;
}
.complete-actions button {
  width: 100%;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 750;
  border-radius: 10px;
}

.kanji-canvas-toolbar {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.kanji-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #f2f3f8;
}
.kanji-nav-status {
  font-size: 12px;
  color: #8c93a8;
  font-weight: 650;
}

.kanji-feedback-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.grade-card {
  border-radius: 16px;
  padding: 20px;
  border: 1px solid;
  transition: all .2s;
}
.grade-pass {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.grade-fail {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}
.grade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.grade-score {
  font-size: 32px;
  font-weight: 850;
}
.grade-score small {
  font-size: 15px;
  opacity: 0.7;
}
.grade-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}
.grade-feedback {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.stroke-warning {
  margin: 8px 0 0;
  font-size: 11px;
  opacity: 0.85;
}
.override-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}
.override-box small {
  display: block;
  font-size: 10px;
  margin-bottom: 8px;
}
.override-btns {
  display: flex;
  gap: 8px;
}
.btn-override {
  flex: 1;
  border: 1px solid var(--border);
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.btn-override.pass:hover, .btn-override.pass.active {
  background: #22c55e;
  color: #fff;
  border-color: #22c55e;
}
.btn-override.fail:hover, .btn-override.fail.active {
  background: #f97316;
  color: #fff;
  border-color: #f97316;
}

.grade-placeholder {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  color: #7b8398;
}
.grade-placeholder strong {
  display: block;
  font-size: 13px;
  color: #383e58;
  margin-bottom: 8px;
}
.grade-placeholder p {
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
}

.kanjivg-reference-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.ref-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ref-header strong {
  font-size: 13px;
  color: #2c324e;
}
.ref-badge {
  font-size: 10px;
  font-weight: 800;
  background: #eef2ff;
  color: #4f46e5;
  padding: 2px 7px;
  border-radius: 6px;
}
.kanjivg-preview-container {
  height: 180px;
  display: grid;
  place-items: center;
  background: #fbfbfe;
  border-radius: 12px;
  border: 1px dashed #e2e4ef;
  overflow: hidden;
}
.kanjivg-preview-container svg {
  max-width: 160px;
  max-height: 160px;
}
.sample-char-text {
  font-size: 90px;
  font-weight: 500;
  color: #2b304c;
}
.license-attribution {
  font-size: 10px;
  color: #9aa1b3;
  margin-top: 10px;
  line-height: 1.5;
}

/* ==================== QUIZ & REVIEW STYLING ==================== */
.quiz-setup-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow);
  max-width: 720px;
  margin: 0 auto;
}
.quiz-badge {
  display: inline-block;
  background: #f3f0ff;
  color: #705be4;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.quiz-setup-header h3 {
  font-size: 22px;
  color: #282d49;
  margin-bottom: 8px;
}
.quiz-setup-header p {
  font-size: 12px;
  color: #7b8398;
  line-height: 1.65;
  margin-bottom: 24px;
}
.quiz-setup-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quiz-config-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quiz-config-field label {
  font-size: 11px;
  font-weight: 800;
  color: #6d748c;
}
.quiz-config-field select {
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 14px;
  background: #fcfcff;
  font-size: 13px;
  color: #2b314d;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #49506b;
  cursor: pointer;
  margin-top: 6px;
}
.checkbox-label input {
  width: 18px;
  height: 18px;
}
.quiz-rules-box {
  background: #f7f6ff;
  border: 1px solid #e7e3fc;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 20px;
}
.quiz-rules-box strong {
  display: block;
  font-size: 11px;
  color: #6453c9;
  margin-bottom: 4px;
}
.quiz-rules-box p {
  font-size: 11px;
  color: #7971a8;
  margin: 0;
  line-height: 1.6;
}

.quiz-active-layout {
  max-width: 720px;
  margin: 0 auto;
}
.quiz-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 850;
  color: #7c839a;
  margin-bottom: 8px;
}
.quiz-question-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
  margin-bottom: 20px;
}
.quiz-question-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  text-align: left;
}
.quiz-question-type {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.2px;
  color: #9c93be;
  display: block;
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}
.quiz-question-head .audio-btn {
  flex-shrink: 0;
  position: static !important;
  margin: 0;
}
.quiz-prompt-text {
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 750;
  color: #272c47;
  line-height: 1.35;
}
.quiz-prompt-reading {
  font-size: 15px;
  color: #8c7ee2;
  margin-top: 6px;
}
.quiz-question-box .audio-btn {
  /* Fallback if placed outside head */
  flex-shrink: 0;
}

.quiz-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.quiz-option-btn {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: all .18s;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
}
.quiz-option-btn:hover:not(:disabled) {
  border-color: #b5a9ff;
  background: #fbfaff;
  transform: translateY(-1px);
}
.opt-index {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1effe;
  color: #705be4;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 850;
  flex-shrink: 0;
}
.opt-text {
  font-size: 14px;
  font-weight: 700;
  color: #343956;
  line-height: 1.4;
  word-break: break-word;
}
.quiz-option-btn.option-correct {
  background: #dcfce7 !important;
  border-color: #22c55e !important;
  color: #15803d !important;
}
.quiz-option-btn.option-incorrect {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
}

.quiz-feedback-bar {
  margin-top: 20px;
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.feedback-correct {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.feedback-incorrect {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.feedback-text strong {
  display: block;
  font-size: 14px;
}
.feedback-text span {
  font-size: 12px;
}

.quiz-limit-input-wrap {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 170px;
}
.quiz-limit-input-wrap input {
  width: 100%;
  padding: 10px 42px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 750;
  color: var(--ink);
  outline: none;
}
.quiz-limit-input-wrap input:focus {
  border-color: #705be4;
  box-shadow: 0 0 0 3px rgba(112, 91, 228, 0.15);
}
.quiz-limit-suffix {
  position: absolute;
  right: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
}
.quiz-preset-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.preset-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.btn-preset-chip {
  background: #f1efff;
  color: #705be4;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 750;
  transition: all 0.2s;
}
.btn-preset-chip:hover {
  background: #e4e0ff;
}
.btn-preset-chip.active {
  background: #705be4;
  color: #fff;
}

.quiz-summary-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 24px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: var(--shadow);
}
.quiz-summary-icon {
  font-size: 54px;
  margin-bottom: 12px;
}
.quiz-summary-card h2 {
  font-size: 24px;
  color: #292e4c;
  margin-bottom: 10px;
}
.quiz-score-big {
  font-size: 44px;
  font-weight: 850;
  color: #705be4;
  margin-bottom: 12px;
}
.quiz-score-big small {
  font-size: 20px;
  color: #8c93a8;
}
.quiz-summary-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
  text-align: left;
}
.quiz-stat-box {
  background: #f8f9fd;
  border: 1px solid #edf0f7;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.quiz-stat-icon {
  font-size: 24px;
  line-height: 1;
}
.quiz-stat-val {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.quiz-stat-lbl {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
@media (max-width: 570px) {
  .quiz-summary-stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.quiz-summary-card p {
  font-size: 13px;
  color: #727a92;
  line-height: 1.65;
  margin-bottom: 24px;
}
.quiz-summary-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ==================== MODAL OVERLAYS & CARD STYLING ==================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 20, 46, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow-y: auto;
}
.modal-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 50px rgba(18, 16, 48, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.7);
  position: relative;
  margin: auto;
}
.modal-card.modal-large {
  max-width: 880px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.modal-header h3 {
  font-size: 18px;
  color: #272c47;
  margin: 0;
}
.btn-close-modal {
  border: 0;
  background: #f1f2f8;
  color: #787e94;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.btn-close-modal:hover {
  background: #e4e6f0;
  color: #3b4056;
}
.modal-desc {
  font-size: 12px;
  color: #727a90;
  line-height: 1.65;
  margin-bottom: 16px;
}

.temp-pwd-box {
  background: #232238;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.temp-pwd-box code {
  font-family: Consolas, Monaco, monospace;
  font-size: 16px;
  font-weight: 700;
  color: #79ddad;
  letter-spacing: 1px;
}

/* ==================== LESSON EDITOR STYLING ==================== */
.editor-body {
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}
.editor-header-fields {
  background: #f8f9fd;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
.field-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.field-row label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  font-weight: 850;
  color: #7f869e;
  flex: 1;
}
.field-row input {
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
  background: #fff;
}

.editor-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #eef0f6;
  margin-bottom: 16px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.editor-tab-btn {
  border: 0;
  background: transparent;
  color: #7d849b;
  font-size: 12px;
  font-weight: 750;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all .18s;
}
.editor-tab-btn:hover {
  background: #f2f0ff;
  color: #705be4;
}
.editor-tab-btn.active {
  background: #705be4;
  color: #fff;
}

.items-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.items-list-head strong {
  font-size: 13px;
  color: #2b314d;
}
.editor-item-row {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.item-fields-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.item-fields-grid input, .item-fields-grid textarea {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12px;
  color: #2b304c;
}
.item-input-id {
  font-family: Consolas, monospace;
  font-weight: bold;
  color: #705be4;
}
.btn-delete-item {
  border: 0;
  background: #fee2e2;
  color: #ef4444;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.btn-delete-item:hover {
  background: #fecaca;
}

.editor-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f2f3f8;
}

.btn-change-pwd {
  border: 0;
  background: #efeaff;
  color: #6049d0;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.btn-change-pwd:hover {
  background: #e4dcff;
}

.lesson-badge-other {
  background: #f1f3f9;
  color: #676e84;
  font-size: 10px;
  font-weight: 750;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #d9dde8;
}

.delete-warning-box p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.admin-delete-notice {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
}
.admin-delete-notice strong {
  display: block;
  font-size: 11px;
  color: #be123c;
  margin-bottom: 6px;
}
.admin-delete-notice p {
  font-size: 12px;
  color: #9f1239;
  margin-bottom: 8px;
}

@media(max-width: 850px) {
  .kanji-practice-layout {
    grid-template-columns: 1fr;
  }
  .quiz-options-grid {
    grid-template-columns: 1fr;
  }
  .item-fields-grid {
    grid-template-columns: 1fr;
  }
  .content {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
  .footer {
    padding-bottom: calc(115px + env(safe-area-inset-bottom)) !important;
  }
}

/* ==================== SPACED REPETITION REMINDER & SUGGESTION ==================== */
.spaced-reminder-banner {
  background: linear-gradient(135deg, #ffffff 0%, #f7f5ff 100%);
  border: 1.5px solid #dfd8fd;
  border-radius: 18px;
  padding: 22px 26px;
  margin: 22px 0 26px;
  box-shadow: 0 8px 24px rgba(112, 91, 228, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.spaced-reminder-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #705be4, #9f8cf7);
}
.banner-done {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border-color: #bbf7d0;
}
.banner-done::before {
  background: #22c55e;
}
.reminder-left {
  flex: 1;
  min-width: 0;
}
.reminder-badge-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.reminder-badge-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dcfce7;
  color: #15803d;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.reminder-left h3 {
  font-size: 18px;
  font-weight: 800;
  color: #272c47;
  margin: 0 0 6px;
  line-height: 1.35;
}
.reminder-left h3 strong {
  color: #705be4;
}
.banner-done .reminder-left h3 strong {
  color: #16a34a;
}
.reminder-left p {
  font-size: 12.5px;
  color: #676f87;
  line-height: 1.6;
  margin: 0;
}
.reminder-actions-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.reminder-actions-row button {
  min-height: 42px;
  white-space: nowrap;
}

/* Modal Lộ trình Ebbinghaus & Spaced Repetition */
.spaced-modal-body {
  padding: 20px 24px 28px;
  max-height: calc(85vh - 90px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ebbinghaus-guide-box {
  background: #f8f7ff;
  border: 1px solid #e7e2fd;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.ebbinghaus-guide-box h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #5544be;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ebbinghaus-guide-box p {
  font-size: 12px;
  color: #636b85;
  line-height: 1.65;
  margin: 0;
}
.ebbinghaus-stages-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 24px;
}
.stage-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stage-card-num {
  font-size: 11px;
  font-weight: 850;
  display: block;
  margin-bottom: 4px;
}
.stage-card-interval {
  font-size: 14px;
  font-weight: 800;
  color: #272c47;
  display: block;
}
.stage-card-desc {
  font-size: 10px;
  color: #8b92a7;
  margin-top: 6px;
  line-height: 1.4;
}

.due-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #323854;
  margin: 20px 0 12px;
}
.due-items-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 20px;
}
.due-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  transition: all .15s;
}
.due-item-row:hover {
  border-color: #c7beff;
  background: #fdfcff;
}
.due-item-info strong {
  font-size: 15px;
  color: #20253e;
  display: block;
}
.due-item-info small {
  font-size: 12px;
  color: #6a718c;
}
.stage-pill {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  white-space: nowrap;
}

/* ==================== TỐI ƯU TOÀN DIỆN CHO ĐIỆN THOẠI ==================== */
@media(max-width: 600px) {
  .spaced-reminder-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 14px;
    margin: 14px 0 18px;
    gap: 14px;
  }
  .reminder-left h3 {
    font-size: 16px;
  }
  .reminder-actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .reminder-actions-row button {
    width: 100%;
    min-height: 46px;
    font-size: 12.5px;
  }
  .ebbinghaus-stages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .spaced-modal-body {
    padding: 14px;
  }
  .due-item-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 12px;
  }
  .due-item-row .button-secondary {
    width: 100%;
    min-height: 44px;
    text-align: center;
  }

  /* Kanji Canvas responsive mobile */
  .canvas-wrapper {
    width: min(290px, calc(100vw - 44px)) !important;
    height: min(290px, calc(100vw - 44px)) !important;
    margin: 0 auto;
  }
  .kanji-canvas-panel {
    padding: 16px 12px !important;
  }
  .kanji-canvas-toolbar button {
    min-height: 46px;
    flex: 1 1 45%;
  }

  /* Quiz on mobile */
  .quiz-setup-card {
    padding: 20px 14px !important;
    border-radius: 16px !important;
  }
  .quiz-question-box {
    padding: 24px 14px !important;
    border-radius: 16px !important;
  }
  .quiz-prompt-text {
    font-size: clamp(24px, 5.5vw, 32px) !important;
  }
  .quiz-options-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .quiz-option-btn {
    padding: 14px 12px !important;
    min-height: 48px !important;
  }
  .quiz-feedback-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .quiz-feedback-bar button {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Flashcard touch targets */
  .flash-actions button {
    min-height: 48px !important;
    font-size: 12px !important;
  }
  .flash-nav button {
    min-height: 46px !important;
  }

  /* Modal cards */
  .modal-card {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 40px) !important;
    border-radius: 16px !important;
    padding: 18px 14px !important;
  }
}

/* ==================== HIDE NETLIFY INJECTED BADGE & SAFE BOTTOM NAV ==================== */
[data-netlify-drawer],
#netlify-badge,
.netlify-badge,
[class*="netlify-badge"],
[id*="netlify-badge"],
[class*="netlify-drawer"],
a[href*="netlify.com"],
iframe[src*="netlify"],
iframe[title*="Netlify"],
div:has(> a[href*="netlify.com"]),
div[style*="fixed"][style*="bottom"]:has(a[href*="netlify.com"]) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -999999 !important;
  position: absolute !important;
  left: -99999px !important;
  bottom: -99999px !important;
  width: 0 !important;
  height: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
}

.mobile-nav {
  position: fixed !important;
  z-index: 999999 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Clickable Stat Metrics */
.metric.clickable {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  user-select: none;
  position: relative;
}
.metric.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(112, 91, 228, 0.14);
  border-color: #b9acff;
  background: #faf9ff;
}
.metric.clickable:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(112, 91, 228, 0.08);
}
.metric.clickable:focus-visible {
  outline: 3px solid #b5a9ff;
  outline-offset: 3px;
}