:root{--bg: var(--tg-theme-bg-color, #ffffff);--text: var(--tg-theme-text-color, #0f1419);--hint: var(--tg-theme-hint-color, #8a96a3);--link: var(--tg-theme-link-color, #2481cc);--button: var(--tg-theme-button-color, #2481cc);--button-text: var(--tg-theme-button-text-color, #ffffff);--secondary-bg: var(--tg-theme-secondary-bg-color, #f6f8fa);--card-bg: var(--tg-theme-secondary-bg-color, #ffffff);--card-border: rgba(127, 127, 127, .12);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 2px 8px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .08);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-pill: 999px;--transition: .18s cubic-bezier(.2, 0, 0, 1);--c-pending-bg: #f1f3f5;--c-pending-fg: #6c757d;--c-new-bg: #e7f1ff;--c-new-fg: #0d6efd;--c-learning-bg: #fff3cd;--c-learning-fg: #8c6d00;--c-reviewing-bg: #d1e7dd;--c-reviewing-fg: #146c43;--c-consolidating-bg: #e5d9f2;--c-consolidating-fg: #6f42c1;--c-mastered-bg: linear-gradient(135deg, #34d399 0%, #10b981 100%);--c-mastered-fg: #ffffff;--c-struggling-bg: #fde2e2;--c-struggling-fg: #c92a2a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{padding:20px 16px 32px;max-width:720px;margin:0 auto}.header{margin-bottom:20px}.header h1{font-size:26px;font-weight:700;margin:0 0 4px;letter-spacing:-.02em;line-height:1.2}.header .subtitle{color:var(--hint);font-size:14px;display:flex;align-items:center;gap:8px}.streak-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:linear-gradient(135deg,#ff6b6b,#ff8e3c);color:#fff;border-radius:var(--radius-pill);font-size:12px;font-weight:600;letter-spacing:.01em}.h1{font-size:22px;font-weight:700;margin:4px 0 16px;letter-spacing:-.01em}.muted{color:var(--hint);font-size:13px}.summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-bottom:20px}.summary .cell{background:var(--card-bg);border:1px solid var(--card-border);padding:14px 12px;border-radius:var(--radius-md);text-align:center;transition:transform var(--transition),box-shadow var(--transition);cursor:default}.summary .cell:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.summary .cell .n{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1}.summary .cell .l{font-size:10.5px;color:var(--hint);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:4px}.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;padding:10px 0;position:sticky;top:0;background:var(--bg);z-index:10}.filter-bar input[type=text]{flex:1 1 200px;padding:11px 14px;border-radius:var(--radius-md);border:1px solid var(--card-border);background:var(--card-bg);color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:border-color var(--transition),box-shadow var(--transition)}.filter-bar input[type=text]:focus{border-color:var(--button);box-shadow:0 0 0 3px #2481cc26}.filter-bar input[type=text]::placeholder{color:var(--hint)}.chip{padding:7px 14px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:500;border:1px solid var(--card-border);background:var(--card-bg);color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--transition);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-family:inherit;text-transform:capitalize}.chip:hover{border-color:#7f7f7f4d;transform:translateY(-.5px)}.chip.active{background:var(--button);color:var(--button-text);border-color:var(--button);box-shadow:var(--shadow-sm)}.word-row{padding:14px 16px;border-radius:var(--radius-md);background:var(--card-bg);border:1px solid var(--card-border);margin-bottom:8px;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}.word-row:hover{border-color:#7f7f7f33;box-shadow:var(--shadow-md)}.word-row .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.word-row .word-pair{flex:1 1 auto;min-width:0}.word-row .word{font-weight:600;font-size:16px;letter-spacing:-.01em}.word-row .sep{margin:0 6px;color:var(--hint);font-weight:400}.word-row .trans{color:var(--hint);font-size:15px}.word-row .bottom{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:12px;color:var(--hint);align-items:center}.word-row .bottom .stat{display:inline-flex;align-items:center;gap:4px}.badge{font-size:11px;padding:4px 10px;border-radius:var(--radius-pill);font-weight:600;letter-spacing:.02em;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.badge.pending{background:var(--c-pending-bg);color:var(--c-pending-fg)}.badge.new{background:var(--c-new-bg);color:var(--c-new-fg)}.badge.learning{background:var(--c-learning-bg);color:var(--c-learning-fg)}.badge.reviewing{background:var(--c-reviewing-bg);color:var(--c-reviewing-fg)}.badge.consolidating{background:var(--c-consolidating-bg);color:var(--c-consolidating-fg)}.badge.mastered{background:var(--c-mastered-bg);color:var(--c-mastered-fg);box-shadow:0 2px 8px #10b98140}.badge.struggling{background:var(--c-struggling-bg);color:var(--c-struggling-fg)}.empty,.loading{text-align:center;padding:48px 16px;color:var(--hint);font-size:14px}.empty:before{content:"📭";display:block;font-size:40px;margin-bottom:12px;opacity:.6}.loading:before{content:"";display:inline-block;width:22px;height:22px;border:2.5px solid var(--card-border);border-top-color:var(--button);border-radius:50%;animation:spin .7s linear infinite;margin-right:8px;vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}.error{padding:14px 16px;background:var(--c-struggling-bg);color:var(--c-struggling-fg);border-radius:var(--radius-md);font-size:14px;border:1px solid rgba(201,42,42,.15)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important;animation:none!important}}@media (max-width: 480px){.chip{padding:8px 14px;font-size:13px}.word-row{padding:13px 14px}.word-row .word{font-size:15.5px}.header h1{font-size:24px}}