:root{--teal-50: #f0fdfa;--teal-100: #ccfbf1;--teal-200: #99f6e4;--teal-300: #5eead4;--teal-400: #2dd4bf;--teal-500: #14b8a6;--teal-600: #0d9488;--teal-700: #0f766e;--teal-800: #115e59;--teal-900: #134e4a;--amber-400: #fbbf24;--amber-500: #f59e0b;--amber-600: #d97706;--rose-500: #f43f5e;--rose-600: #e11d48;--sky-500: #0ea5e9;--violet-500: #8b5cf6;--green-500: #22c55e;--bg: #f6f8fa;--bg-elevated: #ffffff;--bg-sunken: #eef1f5;--bg-paper: #fdfbf7;--card: #ffffff;--card-hover: #f8fafc;--border: #e2e8f0;--border-strong: #cbd5e1;--text: #0f172a;--text-2: #475569;--text-3: #64748b;--primary: var(--teal-700);--primary-strong: var(--teal-800);--primary-soft: #e6f5f3;--primary-contrast: #ffffff;--accent: var(--amber-600);--accent-soft: #fef3e2;--danger: var(--rose-600);--danger-soft: #ffe9ed;--success: #16a34a;--success-soft: #e9f9ef;--info: #0284c7;--info-soft: #e8f4fc;--shadow-sm: 0 1px 2px rgb(15 23 42 / .05);--shadow-md: 0 2px 8px -1px rgb(15 23 42 / .08), 0 1px 3px rgb(15 23 42 / .05);--shadow-lg: 0 12px 32px -8px rgb(15 23 42 / .14), 0 2px 8px rgb(15 23 42 / .06);--nav-bg: rgb(255 255 255 / .92);--ring: rgb(13 148 136 / .35);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 22px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;--font-serif: "Georgia", "Times New Roman", "Noto Serif TC", "PMingLiU", serif;--font-mono: "SFMono-Regular", "Cascadia Code", Consolas, "Roboto Mono", monospace;--nav-h: 64px;--bottom-nav-h: 62px;--safe-bottom: env(safe-area-inset-bottom, 0px);color-scheme:light}[data-theme=dark]{--bg: #0b1220;--bg-elevated: #101a2c;--bg-sunken: #080e19;--bg-paper: #101826;--card: #121e33;--card-hover: #16243d;--border: #23324d;--border-strong: #33466a;--text: #e8edf5;--text-2: #a8b6cc;--text-3: #7d8ba3;--primary: var(--teal-400);--primary-strong: var(--teal-300);--primary-soft: rgb(45 212 191 / .12);--primary-contrast: #06211e;--accent: var(--amber-400);--accent-soft: rgb(251 191 36 / .13);--danger: #fb7185;--danger-soft: rgb(251 113 133 / .14);--success: #4ade80;--success-soft: rgb(74 222 128 / .12);--info: #38bdf8;--info-soft: rgb(56 189 248 / .12);--shadow-sm: 0 1px 2px rgb(0 0 0 / .35);--shadow-md: 0 2px 10px -1px rgb(0 0 0 / .4);--shadow-lg: 0 14px 40px -10px rgb(0 0 0 / .55);--nav-bg: rgb(16 26 44 / .92);--ring: rgb(45 212 191 / .4);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:none}h1,h2,h3,h4,h5,p{margin:0}h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}h2{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}h3{font-size:1rem;font-weight:700}a{color:var(--primary);text-decoration:none}button{font-family:inherit;border:none;background:none;color:inherit;padding:0;cursor:pointer}input,textarea,select{font-family:inherit;font-size:1rem;color:var(--text)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}::selection{background:var(--primary-soft)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.app-shell{display:flex;min-height:100dvh}.sidebar{display:none}.main-area{flex:1;min-width:0;display:flex;flex-direction:column;padding-bottom:calc(var(--bottom-nav-h) + var(--safe-bottom))}.page{width:100%;max-width:1080px;margin:0 auto;padding:16px 16px 48px;animation:page-in .28s ease both}@keyframes page-in{0%{opacity:0}to{opacity:1}}.page-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 18px}.page-title{display:flex;flex-direction:column;gap:2px}.page-title .subtitle{color:var(--text-3);font-size:.85rem}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:space-around;background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border);padding-bottom:var(--safe-bottom);height:calc(var(--bottom-nav-h) + var(--safe-bottom))}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;font-size:.68rem;font-weight:600;color:var(--text-3);transition:color .2s}.bottom-nav a.active{color:var(--primary)}.bottom-nav a svg{width:23px;height:23px}@media(min-width:900px){.bottom-nav{display:none}.main-area{padding-bottom:0}.sidebar{display:flex;flex-direction:column;gap:4px;width:232px;flex-shrink:0;position:sticky;top:0;height:100dvh;padding:20px 14px;border-right:1px solid var(--border);background:var(--bg-elevated)}.sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 10px 20px;font-weight:800;font-size:1.05rem;letter-spacing:-.01em}.sidebar .brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--teal-500),var(--teal-700));display:grid;place-items:center;color:#fff;font-weight:800;font-size:.95rem;box-shadow:var(--shadow-md)}.sidebar a.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-md);color:var(--text-2);font-weight:600;font-size:.92rem;transition:background .18s,color .18s}.sidebar a.nav-item:hover{background:var(--bg-sunken);color:var(--text)}.sidebar a.nav-item.active{background:var(--primary-soft);color:var(--primary)}.sidebar a.nav-item svg{width:20px;height:20px}.sidebar .sidebar-footer{margin-top:auto;padding:10px;font-size:.75rem;color:var(--text-3)}.page{padding:28px 32px 64px}}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:18px}.card.interactive{cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}.card.interactive:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);background:var(--card-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--radius-md);font-weight:700;font-size:.95rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s;user-select:none;-webkit-tap-highlight-color:transparent}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--primary);color:var(--primary-contrast)}.btn.primary:hover:not(:disabled){background:var(--primary-strong)}.btn.accent{background:var(--accent);color:#fff}[data-theme=dark] .btn.accent{color:#241a02}.btn.accent:hover:not(:disabled){filter:brightness(1.06)}.btn.ghost{background:transparent;border:1px solid var(--border-strong);color:var(--text-2)}.btn.ghost:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.btn.soft{background:var(--primary-soft);color:var(--primary)}.btn.soft:hover:not(:disabled){filter:brightness(.97)}.btn.danger-soft{background:var(--danger-soft);color:var(--danger)}.btn.sm{min-height:36px;padding:0 14px;font-size:.85rem;border-radius:var(--radius-sm)}.btn.lg{min-height:52px;padding:0 28px;font-size:1.05rem;border-radius:var(--radius-lg)}.btn.icon-only{width:44px;padding:0}.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;background:var(--bg-sunken);color:var(--text-2);white-space:nowrap}.chip.teal{background:var(--primary-soft);color:var(--primary)}.chip.amber{background:var(--accent-soft);color:var(--accent)}.chip.rose{background:var(--danger-soft);color:var(--danger)}.chip.green{background:var(--success-soft);color:var(--success)}.chip.info{background:var(--info-soft);color:var(--info)}.input,textarea.input{width:100%;min-height:44px;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);transition:border-color .2s,box-shadow .2s}.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}.seg{display:inline-flex;background:var(--bg-sunken);border-radius:var(--radius-md);padding:3px;gap:2px}.seg button{min-height:38px;padding:0 14px;border-radius:9px;font-weight:600;font-size:.85rem;color:var(--text-3);cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}.seg button.active{background:var(--card);color:var(--text);box-shadow:var(--shadow-sm)}.progress-track{height:8px;border-radius:999px;background:var(--bg-sunken);overflow:hidden}.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal-500),var(--teal-400));transition:width .5s cubic-bezier(.22,1,.36,1)}.grid{display:grid;gap:14px}@media(min-width:640px){.grid.cols-2{grid-template-columns:1fr 1fr}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-4{grid-template-columns:repeat(4,1fr)}}.muted{color:var(--text-3);font-size:.85rem}.divider{height:1px;background:var(--border);border:none;margin:14px 0}.modal-backdrop{position:fixed;inset:0;z-index:100;background:#0208148c;backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;animation:fade-in .2s ease}@media(min-width:640px){.modal-backdrop{align-items:center}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal{width:100%;max-width:480px;max-height:86dvh;overflow-y:auto;background:var(--bg-elevated);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:22px 20px calc(22px + var(--safe-bottom));animation:slide-up .28s cubic-bezier(.22,1,.36,1)}@media(min-width:640px){.modal{border-radius:var(--radius-xl);padding:26px;box-shadow:var(--shadow-lg)}}@keyframes slide-up{0%{transform:translateY(28px);opacity:.6}to{transform:none;opacity:1}}.study-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:28px 22px;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}.study-word{font-size:2.1rem;font-weight:800;letter-spacing:-.02em}.ipa{font-family:var(--font-sans);color:var(--text-3);font-size:1.02rem}.reader{background:var(--bg-paper);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;font-family:var(--font-serif);font-size:1.05rem;line-height:1.85}@media(min-width:900px){.reader{padding:36px 40px}}.reader h3{font-family:var(--font-sans);margin-bottom:12px}.reader p{margin-bottom:1em;text-align:justify}.collectable-word:hover{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}.reader.collect-mode{cursor:default}.reader.collect-mode .collectable-word{border-bottom:1px dotted var(--border-strong)}.diff-ok{color:var(--success);font-weight:600}.diff-bad{color:var(--danger);font-weight:700;text-decoration:line-through;text-decoration-thickness:1.5px}.diff-missing{color:var(--accent);font-weight:700;border-bottom:2px dotted var(--accent)}.rec-pulse{position:relative}.rec-pulse:before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--danger);animation:rec-ring 1.4s ease-out infinite}@keyframes rec-ring{0%{transform:scale(.85);opacity:.9}to{transform:scale(1.35);opacity:0}}.ph-good{color:var(--success)}.ph-mid{color:var(--accent)}.ph-bad{color:var(--danger)}.score-ring-label{font-size:1.9rem;font-weight:800;letter-spacing:-.03em}.heatmap-cell{rx:2.5px;transition:opacity .15s}.heatmap-cell:hover{opacity:.75}.table-wrap{overflow-x:auto}table.data{width:100%;border-collapse:collapse;font-size:.9rem}table.data th{text-align:left;color:var(--text-3);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--border)}table.data td{padding:10px;border-bottom:1px solid var(--border)}@media(min-width:900px){::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}}