:root{--bg:#f5f6fb;--bg-soft:#fff;--bg-sunken:#eef0f6;--text:#1f2430;--text-soft:#5b6478;--text-faint:#646e85;--border:#e6e9f2;--primary:#4f46e5;--primary-soft:#eef0ff;--primary-text:#fff;--accent:#f59e0b;--success:#15803a;--success-soft:#e7f7ec;--danger:#dc2626;--danger-soft:#fdeaea;--warn:#b45309;--warn-soft:#fdf3e3;--prefix:#2563eb;--root:#16a34a;--suffix:#db2777;--base:#7c3aed;--shadow:0 6px 22px #1f243014;--shadow-lg:0 14px 40px #1f243024;--radius:16px;--radius-sm:10px}.dark{--bg:#0f1320;--bg-soft:#171c2c;--bg-sunken:#11151f;--text:#e8ebf5;--text-soft:#a3acc4;--text-faint:#828ca6;--border:#262d40;--primary:#7c8bff;--primary-soft:#1d2340;--primary-text:#0f1320;--accent:#fbbf24;--success:#34d399;--success-soft:#10281f;--danger:#f87171;--danger-soft:#2a1518;--warn:#fbbf24;--warn-soft:#2a2110;--prefix:#60a5fa;--root:#4ade80;--suffix:#f472b6;--base:#a78bfa;--shadow:0 6px 22px #00000059;--shadow-lg:0 14px 40px #00000080}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;transition:background .2s,color .2s}button{cursor:pointer;font-family:inherit}.app{max-width:1080px;margin:0 auto;padding:16px 16px 96px}.hd{z-index:20;background:var(--bg-soft);background:color-mix(in srgb, var(--bg-soft) 88%, transparent);-webkit-backdrop-filter:saturate(1.4)blur(10px);backdrop-filter:saturate(1.4)blur(10px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);align-items:center;gap:10px;margin-bottom:16px;padding:12px 14px;display:flex;position:sticky;top:0}.hd .logo{background:linear-gradient(135deg, var(--primary), #8b5cf6);color:#fff;border-radius:11px;flex:none;place-items:center;width:38px;height:38px;display:grid}.hd .ttl{font-size:16px;font-weight:700;line-height:1.1}.hd .sub{color:var(--text-faint);font-size:11px}.hd .spacer{flex:1}.chip{background:var(--bg-sunken);color:var(--text-soft);border:1px solid var(--border);white-space:nowrap;border-radius:999px;align-items:center;gap:5px;padding:6px 10px;font-size:13px;font-weight:600;display:inline-flex}.chip.pts{background:var(--primary-soft);color:var(--primary);border-color:#0000}.chip.flame{background:var(--warn-soft);color:var(--warn);border-color:#0000}.iconbtn{border:1px solid var(--border);background:var(--bg-sunken);width:44px;height:44px;color:var(--text-soft);border-radius:12px;place-items:center;display:grid}.iconbtn:active{transform:scale(.95)}.card{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.card h2{margin:0 0 4px;font-size:15px}.card .hint{color:var(--text-faint);margin-bottom:12px;font-size:12px}.section-title{color:var(--text);align-items:center;gap:8px;margin:18px 4px 10px;font-size:14px;font-weight:700;display:flex}.section-title svg{color:var(--primary)}.btn{border:1px solid var(--border);background:var(--bg-sunken);color:var(--text);border-radius:12px;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:10px 16px;font-size:14px;font-weight:600;display:inline-flex}.btn:active{transform:scale(.97)}.btn.primary{background:var(--primary);color:var(--primary-text);border-color:#0000}.btn.ghost{background:0 0}.btn.danger{background:var(--danger-soft);color:var(--danger);border-color:#0000}.btn.sm{min-height:38px;padding:7px 12px;font-size:13px}.group-grid{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px;display:grid}.group-card{text-align:left;border:1px solid var(--border);background:var(--bg-soft);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:8px;padding:18px;transition:transform .15s,border-color .15s;display:flex}.group-card:hover{border-color:var(--primary);transform:translateY(-3px)}.group-card .emoji{color:#fff;border-radius:13px;place-items:center;width:46px;height:46px;display:grid}.group-card .title{margin:4px 0 0;font-size:16px;font-weight:600;display:block}.group-card p{color:var(--text-faint);margin:0;font-size:12px;line-height:1.5}.today{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg, var(--bg-soft), var(--bg-soft));box-shadow:var(--shadow);padding:16px}.today .row{border-bottom:1px dashed var(--border);align-items:center;gap:10px;padding:10px 0;display:flex}.today .row:last-child{border-bottom:none}.today .word{font-weight:600}.today .meta{color:var(--text-faint);font-size:12px}.today .overdue{color:var(--danger);background:var(--danger-soft);border-radius:6px;padding:2px 7px;font-size:11px;font-weight:700}.today .done .word{color:var(--text-faint);text-decoration:line-through}.check{border:2px solid var(--border);color:#fff;background:0 0;border-radius:8px;flex:none;place-items:center;width:26px;height:26px;display:grid}.check.on{background:var(--success);border-color:var(--success)}.tabs{background:var(--bg-soft);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;gap:8px;margin:16px 0;padding:6px;display:flex}.tabs button{color:var(--text-soft);background:0 0;border:none;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:10px;font-size:14px;font-weight:600;display:inline-flex}.tabs button.active{background:var(--primary);color:var(--primary-text)}.flip-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;display:grid}.flip{perspective:1200px;min-height:200px}.flip-inner{width:100%;min-height:200px;transform-style:preserve-3d;transition:transform .5s;position:relative}.flip.open .flip-inner{transform:rotateY(180deg)}.face{backface-visibility:hidden;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-soft);box-shadow:var(--shadow);flex-direction:column;padding:16px;display:flex;position:absolute;inset:0}.face.back{background:var(--primary-soft);transform:rotateY(180deg)}.face .word{font-size:22px;font-weight:700}.face .phon{color:var(--text-faint);margin-top:2px;font-size:13px}.face .pos{color:var(--primary);background:var(--primary-soft);border-radius:6px;align-self:flex-start;margin-top:8px;padding:2px 8px;font-size:11px;display:inline-block}.face .meaning{margin-top:auto;font-size:16px;font-weight:600}.face .ex{color:var(--text-soft);margin-top:6px;font-size:12px;line-height:1.5}.parts{flex-wrap:wrap;gap:6px;margin:6px 0;display:flex}.part{color:#fff;border-radius:9px;padding:6px 10px;font-size:13px;font-weight:600}.part.prefix{background:var(--prefix)}.part.root{background:var(--root)}.part.suffix{background:var(--suffix)}.part.base{background:var(--base)}.part-hint{color:var(--text-soft);width:100%;margin-top:-2px;font-size:11px}.flip .flipbtn{z-index:2;position:absolute;bottom:12px;right:12px}.quiz{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-soft);box-shadow:var(--shadow);margin-bottom:14px;padding:16px}.quiz .q{margin-bottom:4px;font-weight:600}.quiz .root{color:var(--text-faint);margin-bottom:12px;font-size:12px}.opt{border:1px solid var(--border);background:var(--bg-sunken);border-radius:12px;align-items:center;gap:10px;min-height:44px;margin-bottom:8px;padding:11px 13px;font-size:15px;display:flex}.opt.sel{border-color:var(--primary);background:var(--primary-soft)}.opt.right{border-color:var(--success);background:var(--success-soft);color:var(--success)}.opt.wrong{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}.opt .box{border:2px solid var(--border);color:#fff;border-radius:6px;flex:none;place-items:center;width:20px;height:20px;display:grid}.opt.sel .box,.opt.right .box,.opt.wrong .box{background:currentColor;border-color:currentColor}.opt .box svg{color:var(--bg-soft)}.exp{color:var(--text-soft);background:var(--bg-sunken);border-radius:10px;margin-top:10px;padding:10px 12px;font-size:13px;line-height:1.5}.exp b{color:var(--text)}.stat-row{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px;display:grid}.stat{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-soft);box-shadow:var(--shadow);text-align:center;padding:14px}.stat .n{color:var(--primary);font-size:24px;font-weight:800}.stat .l{color:var(--text-faint);margin-top:2px;font-size:12px}.lvl-bar{background:var(--bg-sunken);border-radius:999px;height:12px;margin:10px 0 4px;overflow:hidden}.lvl-bar>i{background:linear-gradient(90deg, var(--primary), #8b5cf6);border-radius:999px;height:100%;transition:width .3s;display:block}.lvl-list{flex-direction:column;gap:10px;margin-top:6px;display:flex}.lvl{border:1px solid var(--border);background:var(--bg-soft);border-radius:12px;align-items:center;gap:12px;padding:12px 14px;display:flex}.lvl .badge{background:var(--bg-sunken);width:36px;height:36px;color:var(--text-soft);border-radius:10px;flex:none;place-items:center;display:grid}.lvl.done .badge{background:var(--success-soft);color:var(--success)}.lvl .info{flex:1}.lvl .info .t{font-size:14px;font-weight:600}.lvl .info .d{color:var(--text-faint);font-size:12px}.overlay{z-index:50;background:#00000073;justify-content:flex-end;display:flex;position:fixed;inset:0}.drawer{background:var(--bg);width:min(420px,100%);height:100%;padding:20px;animation:.2s slidein;overflow-y:auto}@keyframes slidein{0%{opacity:.6;transform:translate(30px)}}.drawer h2{margin:0 0 14px;font-size:18px}.field{margin-bottom:16px}.field label{color:var(--text-soft);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.field input[type=text],.field input[type=password]{border:1px solid var(--border);background:var(--bg-soft);width:100%;color:var(--text);border-radius:11px;padding:11px 12px;font-size:16px}.field .note{color:var(--text-faint);margin-top:6px;font-size:12px;line-height:1.5}.sync-state{border-radius:999px;align-items:center;gap:6px;padding:5px 10px;font-size:12px;font-weight:600;display:inline-flex}.sync-state.local{background:var(--bg-sunken);color:var(--text-soft)}.sync-state.syncing{background:var(--warn-soft);color:var(--warn)}.sync-state.synced{background:var(--success-soft);color:var(--success)}.sync-state.offline{background:var(--danger-soft);color:var(--danger)}.dot{background:currentColor;border-radius:50%;width:8px;height:8px}.modal{z-index:60;background:#00000080;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal .box{background:var(--bg-soft);border-radius:var(--radius);max-width:360px;box-shadow:var(--shadow-lg);padding:22px}.modal .box h3{margin:0 0 8px;font-size:17px}.modal .box p{color:var(--text-soft);margin:0 0 16px;font-size:14px;line-height:1.6}.modal .acts{justify-content:flex-end;gap:10px;display:flex}.bottomnav{display:none}.toast{background:var(--text);color:var(--bg);z-index:70;box-shadow:var(--shadow-lg);border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600;position:fixed;bottom:84px;left:50%;transform:translate(-50%)}@media (max-width:760px){.app{padding:12px 12px 92px}.group-grid{grid-template-columns:1fr}.tabs{display:none}.bottomnav{z-index:40;background:var(--bg-soft);background:color-mix(in srgb, var(--bg-soft) 94%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:6px;display:flex;position:fixed;bottom:0;left:0;right:0}.bottomnav button{min-height:44px;color:var(--text-faint);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:3px;padding:10px 4px;font-size:11px;font-weight:600;display:flex}.bottomnav button.active{color:var(--primary)}.hd .sub{display:none}.stat-row{grid-template-columns:repeat(3,1fr)}}.tag{background:var(--bg-sunken);color:var(--text-soft);border-radius:6px;margin-top:4px;margin-right:6px;padding:2px 8px;font-size:11px;display:inline-block}.empty{text-align:center;color:var(--text-faint);padding:30px 10px;font-size:14px}.btn{position:relative;overflow:hidden}.btn:after{content:"";pointer-events:none;background:linear-gradient(120deg,#0000 30%,#ffffff47,#0000 70%);transition:transform .6s;position:absolute;inset:0;transform:translate(-130%)}.btn:hover{transform:translateY(-1px)}.btn:hover:after{transform:translate(130%)}.btn.primary:hover{box-shadow:0 8px 22px color-mix(in srgb, var(--primary) 38%, transparent)}.opt.right{animation:.35s cubic-bezier(.34,1.56,.64,1) pop}.opt.wrong{animation:.4s shake}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.check.on{animation:.4s cubic-bezier(.34,1.56,.64,1) checkpop}@keyframes checkpop{0%{transform:scale(.5)}60%{transform:scale(1.18)}to{transform:scale(1)}}.chip.flame:hover svg{transform-origin:50% 90%;animation:.6s wiggle}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-5deg)}}.flip.open{animation:.45s cubic-bezier(.34,1.56,.64,1) cardpop}@keyframes cardpop{0%{transform:scale(.97)}60%{transform:scale(1.012)}to{transform:scale(1)}}.lvl-bar>i{position:relative;overflow:hidden}.lvl-bar>i:after{content:"";background:linear-gradient(90deg,#0000,#ffffff73,#0000);animation:1.8s ease-in-out infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.lvl.done .badge{animation:.5s badgepulse}@keyframes badgepulse{0%{transform:scale(.8)}55%{transform:scale(1.12)}to{transform:scale(1)}}.toast{animation:.25s toastpop}@keyframes toastpop{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.hd .logo{cursor:pointer;transition:transform .2s}.hd .logo:hover{animation:.6s bob}@keyframes bob{0%,to{transform:translateY(0)}30%{transform:translateY(-4px)}60%{transform:translateY(0)}80%{transform:translateY(-2px)}}.celebration-layer{pointer-events:none;z-index:80;position:fixed;inset:0;overflow:hidden}.celebrate-emoji{animation:floatup var(--dur,1s) ease-out forwards;will-change:transform, opacity;font-size:22px;line-height:1;position:absolute;transform:translate(-50%,-50%)}@keyframes floatup{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)rotate(0)}20%{opacity:1;transform:translate(-50%,-50%)scale(1.15)rotate(8deg)}to{opacity:0;transform:translate(calc(-50% + var(--dx,0px)), -170px) scale(.9) rotate(-10deg)}}.streak-title{color:var(--text);background:#f59e0b29;background:color-mix(in srgb, var(--accent) 16%, transparent);border:1px solid #f59e0b52;border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);border-radius:999px;margin-top:5px;padding:2px 9px;font-size:11px;font-weight:700;display:inline-block}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:0}