:root{--radius:18px;--radius-sm:12px;--blur:18px;--bg:linear-gradient(160deg, #ece6da, #ece6da);--accent:#7c6cf0;--glass:#fff9;--glass-border:#ffffffd9;--text:#14161aeb;--text-soft:#14161a9e;--text-faint:#14161a66;--shadow:0 14px 40px #1f263c24;--sidebar-w:240px;--nav-h:64px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;background-position:50%;background-size:cover;min-height:100%;font-family:PingFang SC,Microsoft YaHei,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}input,textarea{font-family:inherit}h1,h2,h3,p{margin:0}.glass{background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--text)}.glass-pad{padding:20px}.app-shell{height:100vh;display:flex}.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);border-right:1px solid var(--glass-border);-webkit-backdrop-filter:blur(var(--blur));background:var(--glass);flex-direction:column;gap:8px;padding:28px 16px;display:flex}.brand{letter-spacing:.5px;align-items:center;gap:10px;padding:8px 12px 22px;font-size:20px;font-weight:700;display:flex}.brand .mark{background:var(--accent);color:#fff;border-radius:8px;place-items:center;width:26px;height:26px;font-size:15px;font-weight:700;display:grid}.nav-item{border-radius:var(--radius-sm);color:var(--text-soft);align-items:center;gap:12px;padding:11px 14px;font-size:15px;font-weight:500;transition:background .2s,color .2s;display:flex}.nav-item:hover{background:var(--glass);color:var(--text)}.nav-item.active{color:#fff;background:var(--accent);box-shadow:0 8px 20px #7c6cf059}.nav-item .k{text-align:center;width:20px;font-size:14px}.sidebar .foot{color:var(--text-faint);justify-content:space-between;margin-top:auto;padding:10px 12px;font-size:12px;display:flex}.sidebar .foot .you{align-items:center;gap:6px;display:inline-flex}.sidebar .foot .dot{background:var(--accent);border-radius:50%;width:8px;height:8px}.sidebar .foot .side-me{align-items:center;gap:8px;min-width:0;display:inline-flex}.sidebar .foot .side-me:hover .you{color:var(--text)}.side-me-avatar{background:var(--accent);color:#fff;border-radius:50%;flex:0 0 26px;place-items:center;width:26px;height:26px;font-size:12px;font-weight:700;display:grid;overflow:hidden}.side-me-avatar img{object-fit:cover;width:100%;height:100%;display:block}.main{flex:1;min-width:0;padding:32px 40px 48px;overflow-y:auto}.page{max-width:760px;margin:0 auto}.page-head{margin-bottom:26px}.page-head h1{margin-bottom:6px;font-size:26px;font-weight:700}.page-head p{color:var(--text-soft);font-size:14px}.mobile-nav{height:var(--nav-h);padding-bottom:env(safe-area-inset-bottom);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur));border-top:1px solid var(--glass-border);z-index:20;display:flex;position:fixed;bottom:0;left:0;right:0}.mobile-nav a{color:var(--text-faint);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;font-size:11px;display:flex}.mobile-nav a .k{border-radius:9px;place-items:center;width:26px;height:26px;font-size:16px;font-weight:600;transition:all .2s;display:grid}.mobile-nav a.active{color:var(--accent)}.mobile-nav a.active .k{background:var(--accent);color:#fff}.stats-grid{gap:16px;display:grid}.stats-grid.cols-2{grid-template-columns:repeat(2,1fr)}.stats-grid.cols-3{grid-template-columns:repeat(3,1fr)}.stat-card .label{color:var(--text-soft);margin-bottom:6px;font-size:13px}.stat-card .num{font-variant-numeric:tabular-nums;font-size:30px;font-weight:700;line-height:1}.stat-card .sub{color:var(--text-faint);margin-top:8px;font-size:12px}.pbar{background:var(--glass-border);border-radius:999px;height:10px;overflow:hidden}.pbar>i{background:var(--accent);border-radius:999px;height:100%;transition:width .5s;display:block}.btn{border-radius:var(--radius-sm);justify-content:center;align-items:center;gap:8px;padding:12px 22px;font-size:15px;font-weight:600;transition:transform .12s,box-shadow .2s,border-color .2s,color .2s;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px #7c6cf052}.btn-primary:hover{box-shadow:0 12px 28px #7c6cf06b}.btn-glass{background:var(--glass);border:1px solid var(--glass-border);color:var(--text)}.btn-glass:hover{border-color:var(--accent);color:var(--accent)}.btn-row{flex-wrap:wrap;gap:12px;display:flex}.btn.row-full{width:100%}.field{margin-bottom:16px;display:block}.field>label{color:var(--text-soft);margin-bottom:8px;font-size:13px;display:block}.input{border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:var(--glass);width:100%;color:var(--text);outline:none;padding:12px 14px;font-size:16px;transition:border-color .2s,box-shadow .2s}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7c6cf02e}input[type=range].range{appearance:none;background:linear-gradient(to right, var(--accent), var(--glass-border));border-radius:999px;outline:none;width:100%;height:6px}input[type=range].range::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid var(--accent);cursor:pointer;background:#fff;border-radius:50%;width:20px;height:20px;box-shadow:0 4px 10px #00000026}input[type=color].swatch{cursor:pointer;background:0 0;border:none;border-radius:12px;width:44px;height:44px;padding:0;overflow:hidden}.checker{flex-wrap:wrap;gap:10px;display:flex}.checker .pl{cursor:pointer;border:2px solid #0000;border-radius:12px;width:40px;height:40px;transition:border-color .15s,opacity .15s;position:relative;overflow:hidden}.checker .pl:hover{opacity:.82;outline:2px solid var(--accent);outline-offset:2px}.checker .pl.sel{border-color:var(--text);border-width:3px}.toggle{cursor:pointer;align-items:center;gap:10px;font-size:14px;display:inline-flex}.toggle .track{background:var(--glass-border);border-radius:999px;width:44px;height:26px;transition:background .2s;position:relative}.toggle .track:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 2px 6px #0000002e}.toggle input{display:none}.toggle input:checked+.track{background:var(--accent)}.toggle input:checked+.track:after{transform:translate(18px)}.bar-chart{align-items:flex-end;gap:4px;height:150px;padding:6px 2px;display:flex}.bar-chart .bar{background:var(--accent);opacity:.85;border-radius:6px 6px 2px 2px;flex:1;min-width:2px;transition:height .3s}.bar-chart .bar.zero{opacity:.25;height:3px}.bar-axis{color:var(--text-faint);justify-content:space-between;margin-top:6px;font-size:11px;display:flex}.quiz-word{letter-spacing:.5px;font-family:Georgia,Times New Roman,Segoe UI,serif;font-size:46px;font-weight:700;line-height:1.15}.quiz-choice{text-align:left;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--glass-border);width:100%;margin-bottom:12px;padding:15px 16px;font-size:16px;transition:transform .12s,box-shadow .2s,background .15s;display:block}.quiz-choice:hover{transform:translateY(-1px);box-shadow:0 8px 20px #1f263c1f}.quiz-choice.correct{background:#2fa36b2e;border-color:#2fa36b}.quiz-choice.wrong{background:#e4566e29;border-color:#e4566e}.quiz-choice:disabled{cursor:default;transform:none}.speak{background:var(--glass);border:1px solid var(--glass-border);color:var(--text-soft);border-radius:999px;align-items:center;gap:6px;padding:7px 14px;font-size:13px;display:inline-flex}.speak:hover{color:var(--accent);border-color:var(--accent)}.feedback{border-radius:var(--radius-sm);justify-content:space-between;align-items:center;margin-top:16px;padding:14px 16px;font-weight:600;display:flex}.feedback.good{color:#2fa36b;background:#2fa36b33;border:1px solid #2fa36b66}.feedback.bad{color:#e4566e;background:#e4566e2e;border:1px solid #e4566e66}.tl-item{border-bottom:1px solid var(--glass-border);gap:14px;padding:16px 4px;display:flex}.tl-item:last-child{border-bottom:none}.tl-avatar{background:var(--accent);color:#fff;border-radius:12px;flex:0 0 38px;place-items:center;width:38px;height:38px;font-size:16px;font-weight:700;display:grid}.tl-body{flex:1;min-width:0}.tl-meta{color:var(--text-faint);align-items:center;gap:8px;font-size:12px;display:flex}.tl-type{background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;padding:1px 8px;font-size:11px}.tl-content{margin-top:5px;font-size:15px}.tl-like{color:var(--text-soft);border:1px solid var(--glass-border);border-radius:999px;align-self:center;padding:6px 10px;font-size:13px}.tl-like:hover{color:var(--accent);border-color:var(--accent)}.tl-learn{border-bottom:1px solid var(--glass-border);color:var(--text-soft);align-items:center;gap:10px;padding:7px 4px;font-size:14px;display:flex}.tl-learn:last-child{border-bottom:none}.tl-avatar-sm{border-radius:8px;flex:0 0 26px;width:26px;height:26px;font-size:12px}.tl-avatar img{object-fit:cover;border-radius:inherit;width:100%;height:100%;display:block}.settings-avatar{background:var(--accent);color:#fff;border-radius:50%;flex:0 0 56px;place-items:center;width:56px;height:56px;font-size:22px;font-weight:700;display:grid;overflow:hidden}.settings-avatar img{object-fit:cover;width:100%;height:100%;display:block}.tl-num{color:var(--accent);font-weight:700}.tl-learn-time{color:var(--text-faint);white-space:nowrap;margin-left:auto;font-size:12px}.thumb-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.thumb{aspect-ratio:1;border-radius:var(--radius-sm);border:2px solid var(--glass-border);cursor:pointer;position:relative;overflow:hidden}.thumb img{object-fit:cover;width:100%;height:100%}.thumb.sel{border-color:var(--accent);border-width:3px}.thumb .del{color:#fff;background:#0000008c;border-radius:50%;width:24px;height:24px;font-size:14px;line-height:1;position:absolute;top:6px;right:6px}.thumb .del:hover{background:#e4566e}.upload-zone{border:2px dashed var(--glass-border);border-radius:var(--radius-sm);text-align:center;color:var(--text-soft);cursor:pointer;padding:22px;font-size:14px;transition:border-color .2s}.upload-zone:hover{border-color:var(--accent)}.row-between{justify-content:space-between;align-items:center;display:flex}.stack{gap:16px;display:grid}.hint{color:var(--text-faint);font-size:12px}.error-note{border-radius:var(--radius-sm);color:#e4566e;background:#e4566e26;border:1px solid #e4566e59;padding:12px 14px;font-size:14px}.empty{text-align:center;color:var(--text-faint);padding:40px 20px;font-size:14px}.skip{color:var(--text-faint);margin-top:14px;font-size:13px;text-decoration:underline;display:inline-block}@media (width<=820px){.app-shell{height:auto;display:block}.sidebar{display:none}.main{padding:20px 16px calc(var(--nav-h) + 24px)}.stats-grid.cols-2,.stats-grid.cols-3{grid-template-columns:repeat(2,1fr)}.thumb-grid{grid-template-columns:repeat(3,1fr)}.page-head h1{font-size:22px}.quiz-word{font-size:38px}}@media (width>=821px){.mobile-nav{display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.no-scrollbar{scrollbar-width:thin}.toast-wrap{z-index:999;pointer-events:none;flex-direction:column;align-items:center;gap:8px;padding:0 16px;display:flex;position:fixed;top:18px;left:0;right:0}.toast{background:var(--glass);max-width:460px;-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);border:1px solid var(--glass-border);box-shadow:var(--shadow);color:var(--text);border-radius:999px;align-items:center;gap:8px;padding:10px 18px;font-size:14px;font-weight:600;animation:.25s toast-in;display:flex}.toast-dot{border-radius:50%;flex:0 0 8px;width:8px;height:8px}.toast.success .toast-dot{background:#2fa36b}.toast.error .toast-dot{background:#e4566e}.toast.success{border-color:#2fa36b80}.toast.error{border-color:#e4566e8c}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.toast{animation:none}}