:root{color:#243042;background:linear-gradient(#fdf8ff 0%,#f3f8ff 100%);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer;border:none}input{background:#fff;border:1px solid #d8e1f2;border-radius:14px;width:100%;padding:12px 14px}.page-shell{max-width:1080px;margin:0 auto;padding:20px 16px 48px}.simple-shell{max-width:900px}.loading{place-items:center;min-height:100vh;font-size:18px;display:grid}.hero{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.compact-hero{margin-bottom:16px}.eyebrow{color:#7a7aff;margin:0 0 8px;font-size:13px;font-weight:700}.hero h1{margin:0;font-size:clamp(28px,5vw,42px)}.subtext{color:#60708a;max-width:720px;margin:10px 0 0}.hero-badge{white-space:nowrap;background:#fff;border-radius:999px;align-items:center;gap:8px;padding:10px 14px;display:inline-flex;box-shadow:0 10px 30px #5e69ff1f}.stats-grid,.subject-tabs,.month-pills,.translation-grid,.month-grid{gap:12px;display:grid}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}.compact-stats{margin-bottom:12px}.stat-card,.section-card,.info-block,.month-card{background:#fffffff0;border:1px solid #7e92ff1f;box-shadow:0 12px 30px #36487a14}.stat-card{border-radius:20px;align-items:center;gap:12px;padding:16px;display:flex}.stat-card p,.stat-card strong{margin:0}.stat-icon{color:#5b8def;background:#eef3ff;border-radius:14px;place-items:center;width:40px;height:40px;display:grid}.section-card{border-radius:24px;margin-top:14px;padding:18px}.section-title-row{justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:14px;display:flex}.section-title-row h2,.section-title-row span{margin:0}.section-title-row span,.helper-text,.swipe-tip{color:#7f8ca4;font-size:13px}.subject-tabs,.month-pills{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.month-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.subject-tab,.month-card{color:#42506a;background:#f5f7fc;border-radius:18px;padding:12px 18px;transition:all .2s}.subject-tab.active{background:var(--theme,#5b8def);color:#fff;box-shadow:0 8px 20px #5b8def33}.month-card{text-align:left;gap:6px;display:grid}.month-card.active{background:#eef4ff;border-color:#5b8def}.month-card strong{font-size:22px}.month-card span{color:#50607a}.month-card em{color:#7f8ca4;font-style:normal}.login-card{max-width:560px;margin:0 auto}.admin-form-grid,.edit-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px;display:grid}.edit-form-grid{grid-template-columns:1fr}.admin-form-grid label,.edit-form-grid label{color:#516076;gap:8px;font-size:14px;display:grid}.primary-btn,.ghost-btn,.icon-speak,.info-head button{border-radius:16px;justify-content:center;align-items:center;gap:8px;padding:12px 18px;display:inline-flex}.primary-btn{color:#fff;background:#5b8def;box-shadow:0 10px 24px #5b8def40}.ghost-btn{color:#37568d;background:#eef4ff}.learning-card{background:linear-gradient(#fff 0%,#f9fbff 100%);border:2px solid #5b8def}.learning-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.learning-main{margin:0;font-size:clamp(34px,7vw,56px);line-height:1.1}.icon-speak{color:#355ca8;background:#eef4ff;border-radius:16px;width:54px;height:54px;padding:0}.translation-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px}.info-block{border-radius:20px;padding:14px}.info-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex}.info-head span{color:#72809a;font-size:13px}.info-head button{color:#4062a8;background:#f2f6ff;border-radius:12px;padding:8px 12px}.info-block strong{margin-bottom:6px;font-size:22px;display:block}.info-block p{color:#7f8ca4;margin:0}.phonetic-box{background:#f6f8fc;border-radius:18px;margin-bottom:16px;padding:14px 16px}.phonetic-box strong,.phonetic-box p{margin:0}.phonetic-box p{color:#5f6f87;margin-top:6px}.progress-bar{background:#edf2fa;border-radius:999px;width:100%;height:10px;margin-bottom:16px;overflow:hidden}.progress-fill{border-radius:999px;height:100%}.learning-actions{justify-content:center;gap:12px;margin-bottom:10px;display:flex}.simple-toolbar{margin-top:12px}.checkin-card{text-align:center}.edit-card{margin-top:14px}.error-text{color:#c53b3b}.top-gap{margin-top:14px}@media (width<=900px){.stats-grid,.translation-grid,.admin-form-grid{grid-template-columns:1fr}.hero,.learning-header,.learning-actions{flex-direction:column;align-items:stretch}.learning-main{font-size:38px}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--purple:#7c3aed;--purple-dark:#6d28d9;--purple-light:#ede9fe;--blue:#4f46e5;--blue-light:#eef2ff;--gold:#f59e0b;--gold-light:#fef3c7;--green:#10b981;--green-light:#d1fae5;--red:#ef4444;--red-light:#fee2e2;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--radius:20px;--radius-lg:28px;--radius-sm:14px;--radius-xs:10px;font-size:16px}body{background:var(--gray-50);color:var(--gray-800);-webkit-font-smoothing:antialiased;min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;overflow-x:hidden}.app-root{background:var(--gray-50);flex-direction:column;min-height:100dvh;display:flex}.immersive-root{background:#fff}.loading-screen{background:linear-gradient(160deg,#f5f3ff 0%,#eff6ff 100%);place-items:center;min-height:100dvh;display:grid}.loading-dots{color:var(--purple);letter-spacing:.5px;font-size:18px;font-weight:600}.login-screen{background:linear-gradient(160deg,#f5f3ff 0%,#eff6ff 60%,#f0f9ff 100%);flex-direction:column;justify-content:center;align-items:center;gap:28px;min-height:100dvh;padding:24px 20px;display:flex}.login-hero{text-align:center}.login-icon{width:80px;height:80px;color:var(--purple);background:#fff;border-radius:28px;place-items:center;margin:0 auto 16px;display:grid;box-shadow:0 8px 32px #7c3aed2e}.login-hero h1{color:var(--gray-900);letter-spacing:-.5px;margin-bottom:6px;font-size:30px;font-weight:800}.login-hero p{color:var(--gray-500);font-size:15px}.login-card{border-radius:var(--radius-lg);background:#fff;flex-direction:column;gap:14px;width:100%;max-width:360px;padding:28px 24px;display:flex;box-shadow:0 4px 24px #00000012}.login-fields{flex-direction:column;gap:12px;display:flex}.login-input{border:2px solid var(--gray-200);border-radius:var(--radius-sm);outline:none;width:100%;height:52px;padding:0 16px;font-size:16px;transition:border-color .2s}.login-input:focus{border-color:var(--purple)}.login-error{color:var(--red);text-align:center;font-size:14px}.login-btn{background:var(--purple);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;width:100%;height:52px;font-size:17px;font-weight:700;transition:background .2s;display:flex}.login-btn:active{background:var(--purple-dark)}.login-hint{text-align:center;color:var(--gray-400);font-size:13px}.home-screen{flex-direction:column;gap:20px;min-height:100dvh;padding:20px 16px 100px;display:flex}.home-header{justify-content:space-between;align-items:flex-start;padding-top:8px;display:flex}.home-eyebrow{color:var(--gray-500);margin-bottom:2px;font-size:13px}.home-header h1{color:var(--gray-900);letter-spacing:-.3px;font-size:24px;font-weight:800}.home-wave{animation:1.5s ease-in-out infinite wave;display:inline-block}@keyframes wave{0%,to{transform:rotate(0)}25%{transform:rotate(12deg)}75%{transform:rotate(-8deg)}}.home-book-badge{border:1.5px solid var(--gray-200);color:var(--gray-600);background:#fff;border-radius:999px;align-items:center;gap:5px;margin-top:4px;padding:7px 12px;font-size:12px;display:inline-flex}.home-stats-row{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.home-stat-card{border-radius:var(--radius-sm);text-align:center;background:#fff;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;display:flex;box-shadow:0 2px 8px #0000000a}.home-stat-card strong{color:var(--gray-900);font-size:26px;font-weight:800;line-height:1}.home-stat-card p{color:var(--gray-500);font-size:11px}.home-checkin-section h2{color:var(--gray-600);letter-spacing:.3px;margin-bottom:8px;font-size:14px;font-weight:600}.home-checkin-list{flex-direction:column;gap:6px;display:flex}.home-checkin-item{border-radius:var(--radius-xs);background:#fff;align-items:center;gap:10px;padding:12px 14px;font-size:14px;display:flex;box-shadow:0 1px 4px #00000008}.home-checkin-date{color:var(--gray-800);flex:1;font-size:14px;font-weight:600}.home-checkin-meta{color:var(--gray-400);font-size:13px}.home-checkin-score{color:var(--green);text-align:right;min-width:36px;font-size:13px;font-weight:700}.checkin-check{color:var(--green)}.home-actions{flex-direction:column;gap:10px;display:flex}.home-study-btn{background:linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:10px;width:100%;height:60px;font-size:18px;font-weight:700;transition:transform .15s,box-shadow .2s;display:flex;box-shadow:0 8px 24px #7c3aed59}.home-study-btn:active{transform:scale(.98);box-shadow:0 4px 12px #7c3aed40}.home-book-btn{height:50px;color:var(--gray-700);border:2px solid var(--gray-200);border-radius:var(--radius-xs);cursor:pointer;background:#fff;width:100%;font-size:15px;font-weight:600;transition:background .2s}.home-book-btn:active{background:var(--gray-50)}.home-manage-link{text-align:center;color:var(--gray-400);cursor:pointer;background:0 0;border:none;width:100%;padding:8px;font-size:13px;text-decoration:underline;display:block}.book-screen{min-height:100dvh;padding:20px 16px}.screen-topbar{align-items:center;gap:12px;margin-bottom:20px;padding-top:4px;display:flex}.topbar-back{color:var(--gray-600);cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;gap:4px;padding:6px 0;font-size:15px;font-weight:500;display:flex}.screen-topbar h2{color:var(--gray-900);font-size:18px;font-weight:700}.book-grid{gap:12px;display:grid}.book-card{border:2px solid var(--gray-200);border-radius:var(--radius-sm);text-align:left;cursor:pointer;background:#fff;flex-direction:column;gap:6px;width:100%;padding:20px 16px;transition:border-color .2s,box-shadow .2s;display:flex}.book-card.active{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-light)}.book-card:active{transform:scale(.99)}.book-card strong{color:var(--gray-900);font-size:16px;font-weight:700}.book-card span{color:var(--gray-500);font-size:13px}.book-card em{color:var(--purple);font-size:12px;font-style:normal;font-weight:600}.learn-screen{background:var(--gray-50);flex-direction:column;min-height:100dvh;display:flex;position:relative}.learn-topbar{border-bottom:1px solid var(--gray-100);z-index:10;background:#fff;flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.learn-topbar-left{align-items:center;gap:10px;display:flex}.topbar-label{color:var(--gray-800);font-size:14px;font-weight:700}.topbar-sub{color:var(--gray-400);margin-top:1px;font-size:12px}.learn-topbar-right{gap:8px;display:flex}.icon-btn{background:var(--gray-100);border-radius:var(--radius-xs);cursor:pointer;width:42px;height:42px;color:var(--gray-600);border:none;flex-shrink:0;place-items:center;transition:background .2s;display:grid}.icon-btn:active{background:var(--gray-200)}.subject-pills{scrollbar-width:none;flex-shrink:0;gap:8px;padding:12px 16px;display:flex;overflow-x:auto}.subject-pills::-webkit-scrollbar{display:none}.subject-pill{border:2px solid var(--gray-200);color:var(--gray-600);cursor:pointer;white-space:nowrap;background:#fff;border-radius:999px;flex-shrink:0;padding:8px 18px;font-size:14px;font-weight:600;transition:all .2s}.subject-pill.active{background:var(--pill-color,var(--purple));border-color:var(--pill-color,var(--purple));color:#fff}.learn-card-area{border-radius:var(--radius);text-align:center;background:#fff;border:2px solid;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;min-height:260px;margin:12px 16px;padding:28px 20px;display:flex}.learn-word-main{color:var(--gray-900);word-break:break-word;font-size:clamp(44px,12vw,68px);font-weight:800;line-height:1.1}.speak-btn{background:linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%);color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;place-items:center;width:64px;height:64px;transition:transform .15s,box-shadow .2s;display:grid;box-shadow:0 6px 20px #7c3aed59}.speak-btn:active{transform:scale(.93);box-shadow:0 3px 10px #7c3aed40}.learn-extra-info{border-radius:999px;padding:4px 16px;font-size:18px;font-weight:500}.en-phonetic{color:#4f46e5;background:#eef2ff}.zh-pinyin{color:#ea580c;background:#fff7ed}.my-phonetic{color:#16a34a;background:#f0fdf4}.learn-word-image{border-radius:12px;justify-content:center;align-items:center;max-width:160px;max-height:120px;display:flex;overflow:hidden}.learn-word-image img{object-fit:cover;border-radius:12px;width:100%;height:100%}.learn-translations{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:4px;display:flex}.lang-tag{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}.lang-tag.en{color:#4f46e5;background:#eef2ff}.lang-tag.zh{color:#ea580c;background:#fff7ed}.lang-tag.my{color:#16a34a;background:#f0fdf4}.learn-translation{color:var(--gray-600);background:var(--gray-100);border-radius:8px;padding:4px 12px;font-size:15px}.learn-swipe-hint{color:var(--gray-400);flex-shrink:0;justify-content:center;align-items:center;gap:6px;padding:4px;font-size:13px;animation:2s ease-in-out infinite bounce-hint;display:flex}@keyframes bounce-hint{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.learn-progress-bar{background:var(--gray-200);border-radius:999px;flex-shrink:0;height:5px;margin:0 16px;overflow:hidden}.learn-progress-fill{border-radius:999px;height:100%;transition:width .35s}.learn-nav-btns{flex-shrink:0;gap:10px;padding:12px 16px 24px;display:flex}.learn-nav-btn{border-radius:var(--radius-xs);cursor:pointer;border:none;flex:1;justify-content:center;align-items:center;gap:6px;height:52px;font-size:16px;font-weight:700;transition:opacity .2s,background .2s;display:flex}.learn-nav-btn.prev{background:var(--gray-100);color:var(--gray-500)}.learn-nav-btn.prev:disabled{opacity:.35;cursor:not-allowed}.learn-nav-btn.next{background:var(--purple);color:#fff}.learn-nav-btn:active:not(:disabled){opacity:.85}.learn-checkin-float{z-index:20;justify-content:center;padding:16px;display:flex;position:fixed;bottom:0;left:0;right:0}.checkin-inner{border-radius:var(--radius);text-align:center;background:#fff;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:400px;padding:24px 20px;display:flex;box-shadow:0 -8px 40px #4f46e52e}.checkin-inner h3{color:var(--gray-900);font-size:18px;font-weight:800}.checkin-inner p{color:var(--gray-500);font-size:14px}.checkin-btn{background:var(--purple);color:#fff;border-radius:var(--radius-xs);cursor:pointer;border:none;align-items:center;gap:8px;height:50px;padding:0 32px;font-size:16px;font-weight:700;transition:background .2s;display:flex}.checkin-btn:active{background:var(--purple-dark)}.manage-screen{min-height:100dvh;padding:20px 16px 80px}.manage-section{margin-bottom:28px}.manage-section h3{color:var(--gray-600);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-size:14px;font-weight:700}.manage-book-list{flex-direction:column;gap:8px;margin-bottom:10px;display:flex}.manage-book-item{border:1.5px solid var(--gray-200);border-radius:var(--radius-xs);background:#fff;justify-content:space-between;align-items:center;padding:14px;display:flex}.manage-book-item strong{color:var(--gray-800);font-size:15px;font-weight:700}.manage-book-item p{color:var(--gray-500);margin-top:2px;font-size:12px}.manage-book-item.active{border-color:var(--purple);background:#faf7ff}.manage-book-actions{align-items:center;gap:6px;display:flex}.form-btn-row{align-items:center;gap:8px;display:flex}.manage-form,.manage-edit-form{border-radius:var(--radius-sm);border:1.5px solid var(--gray-200);background:#fff;flex-direction:column;gap:10px;padding:16px;display:flex}.manage-form h4{color:var(--gray-500);text-transform:uppercase;letter-spacing:.4px;font-size:13px;font-weight:700}.form-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.form-row input,.form-row select{border:2px solid var(--gray-200);border-radius:var(--radius-xs);background:#fff;outline:none;width:100%;height:46px;padding:0 14px;font-size:15px}.form-row input:focus,.form-row select:focus{border-color:var(--purple)}.form-msg{color:var(--green);font-size:13px;font-weight:500}.save-btn{background:var(--purple);color:#fff;border-radius:var(--radius-xs);cursor:pointer;border:none;justify-content:center;align-items:center;gap:6px;width:100%;height:48px;font-size:15px;font-weight:700;transition:background .2s;display:flex}.save-btn:active{background:var(--purple-dark)}.manage-item-list{flex-direction:column;gap:6px;margin-bottom:10px;display:flex}.manage-item-row{border:1.5px solid var(--gray-200);border-radius:var(--radius-xs);background:#fff;justify-content:space-between;align-items:center;padding:12px 14px;display:flex}.manage-item-row.active{border-color:var(--purple);background:var(--purple-light)}.manage-item-row strong{color:var(--gray-800);font-size:15px;font-weight:600}.manage-item-row p{color:var(--gray-500);margin-top:2px;font-size:12px}.manage-item-actions{gap:6px;display:flex}.ghost-btn.small{background:var(--gray-100);height:34px;color:var(--gray-600);border:1.5px solid var(--gray-200);cursor:pointer;border-radius:8px;align-items:center;gap:4px;padding:0 12px;font-size:13px;font-weight:500;transition:background .2s;display:flex}.ghost-btn.small:active{background:var(--gray-200)}.ghost-btn.small.danger{color:var(--red);background:var(--red-light);border-color:#fecaca}@supports (padding-bottom:env(safe-area-inset-bottom)){.learn-nav-btns,.learn-checkin-float{padding-bottom:calc(24px + env(safe-area-inset-bottom))}.manage-screen{padding-bottom:calc(80px + env(safe-area-inset-bottom))}.home-screen{padding-bottom:calc(100px + env(safe-area-inset-bottom))}}