:root{--bg:#0e1a12;--surface:#162019;--surface-2:#1e2d22;--surface-3:#263329;--accent:#c9a96e;--accent-dim:#9e7d4e;--accent-glow:#c9a96e26;--text:#f0ead6;--text-muted:#8a9e8d;--text-faint:#5a6e5d;--border:#c9a96e1f;--border-hover:#c9a96e4d;--danger:#c47a6a;--warning:#c49a6a;--success:#6a9e7a;--info:#6a8a9e;--font-display:"Cormorant Garamond", Georgia, serif;--font-ui:"DM Sans", system-ui, sans-serif;font-family:var(--font-ui);color:var(--text);background-color:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);min-height:100svh}#root{flex-direction:column;min-height:100svh;display:flex}button{font-family:var(--font-ui);cursor:pointer;background:0 0;border:none}a{color:inherit;text-decoration:none}.topic-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:12px;padding:20px;transition:border-color .2s,box-shadow .2s,transform .2s;display:flex}.topic-card:hover{border-color:var(--border-hover);box-shadow:0 0 0 1px var(--border-hover), 0 8px 24px #0000004d;transform:translateY(-2px)}.topic-card__top{justify-content:space-between;align-items:center;display:flex}.topic-card__emoji{font-size:26px;line-height:1}.topic-card__due{letter-spacing:.08em;color:var(--text-faint);background:var(--surface-2);border:1px solid #0000;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:500}.topic-card__due--active{color:var(--accent);border-color:var(--border)}.topic-card__name{font-family:var(--font-display);color:var(--text);letter-spacing:-.01em;font-size:19px;font-weight:400;line-height:1.2}.topic-card__stagebar{background:var(--surface-3);cursor:default;border-radius:3px;height:5px;display:flex;overflow:hidden}.topic-card__stagebar-mastered{background:var(--accent);height:100%;transition:width .4s}.topic-card__stagebar-learning{background:var(--accent-dim);opacity:.55;height:100%;transition:width .4s}.topic-card__stagebar-new{background:var(--surface-3);height:100%;transition:width .4s}.topic-card__legend{flex-wrap:wrap;gap:12px;display:flex}.topic-card__legend-item{color:var(--text-faint);align-items:center;gap:5px;font-size:11px;display:flex}.topic-card__legend-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.topic-card__legend-item--mastered .topic-card__legend-dot{background:var(--accent)}.topic-card__legend-item--learning .topic-card__legend-dot{background:var(--accent-dim);opacity:.7}.topic-card__legend-item--new .topic-card__legend-dot{background:var(--text-faint)}.topic-card__btn{background:var(--accent-glow);border:1px solid var(--border);color:var(--accent);border-radius:8px;margin-top:4px;padding:10px 16px;font-size:13px;font-weight:500;transition:background .2s,border-color .2s,color .2s}.topic-card__btn:hover:not(:disabled){border-color:var(--accent-dim);color:var(--text);background:#c9a96e33}.topic-card__btn:disabled{color:var(--text-faint);cursor:default;background:0 0}.home{flex-direction:column;min-height:100svh;display:flex}.home__header{width:100%;max-width:1100px;margin:0 auto;padding:32px 24px 0}.home__title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text);font-size:clamp(32px,6vw,56px);font-weight:400;line-height:1}.home__main{flex-direction:column;flex:1;gap:32px;width:100%;max-width:1100px;margin:0 auto;padding:24px 24px 48px;display:flex}.dashboard{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:20px;padding:24px;display:flex}.dashboard__stats{grid-template-columns:repeat(4,1fr);gap:0;display:grid}@media (width<=600px){.dashboard__stats{grid-template-columns:repeat(2,1fr);gap:16px}}.dashboard__stat{border-right:1px solid var(--border);flex-direction:column;gap:4px;padding:0 16px;display:flex}.dashboard__stat:first-child{padding-left:0}.dashboard__stat:last-child{border-right:none}.dashboard__stat-value{font-family:var(--font-display);color:var(--text);font-size:36px;font-weight:400;line-height:1}.dashboard__stat-value--accent{color:var(--accent)}.dashboard__stat-label{color:var(--text-muted);letter-spacing:.04em;font-size:12px}.dashboard__heatmap-wrap{flex-direction:column;gap:8px;display:flex}.dashboard__heatmap-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-size:11px}.dashboard__heatmap{flex-wrap:wrap;gap:4px;display:flex}.dashboard__heat-cell{border-radius:3px;flex-shrink:0;width:16px;height:16px;transition:transform .15s}.dashboard__heat-cell:hover{cursor:default;transform:scale(1.3)}.dashboard__heat-cell.heat-0{background:var(--surface-3)}.dashboard__heat-cell.heat-1{background:#c9a96e40}.dashboard__heat-cell.heat-2{background:#c9a96e80}.dashboard__heat-cell.heat-3{background:#c9a96ebf}.dashboard__heat-cell.heat-4{background:var(--accent)}.dashboard__overall{flex-direction:column;gap:6px;display:flex}.dashboard__overall-bar{background:var(--surface-3);border-radius:3px;height:4px;display:flex;overflow:hidden}.dashboard__overall-mastered{background:var(--accent);height:100%;transition:width .6s}.dashboard__overall-learning{background:var(--accent-dim);opacity:.5;height:100%;transition:width .6s}.dashboard__overall-text{color:var(--text-faint);font-size:12px}.home__srs{flex-direction:column;gap:10px;display:flex}.home__srs-label{letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);align-items:baseline;gap:10px;font-size:11px;font-weight:500;display:flex}.home__srs-sub{letter-spacing:.04em;text-transform:none;color:var(--text-faint);opacity:.7;font-size:10px}.home__srs-btn{background:var(--surface);border:1px solid var(--accent-dim);text-align:left;cursor:pointer;border-radius:14px;justify-content:space-between;align-items:center;width:100%;padding:20px 24px;transition:background .15s,border-color .15s,transform .1s;display:flex}.home__srs-btn:hover{background:var(--accent-glow);border-color:var(--accent);transform:translateY(-1px)}.home__srs-btn:active{transform:translateY(0)}.home__srs-count{align-items:baseline;gap:8px;display:flex}.home__srs-num{font-family:var(--font-display);color:var(--accent);font-size:44px;font-weight:400;line-height:1}.home__srs-unit{color:var(--text-muted);font-size:14px}.home__srs-arrow{color:var(--accent-dim);white-space:nowrap;font-size:14px;transition:color .15s}.home__srs-btn:hover .home__srs-arrow{color:var(--accent)}.home__srs-done{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);border-radius:14px;align-items:center;gap:10px;padding:16px 20px;font-size:14px;display:flex}.home__srs-done-icon{color:var(--success);font-size:16px}.home__topics{flex-direction:column;gap:16px;display:flex}.home__section-header{justify-content:space-between;align-items:center;display:flex}.home__section-title{font-family:var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);font-size:11px;font-weight:500}.home__learned-link{color:var(--accent-dim);font-size:12px;transition:color .15s}.home__learned-link:hover{color:var(--accent)}.home__grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;display:grid}.home__loading{color:var(--text-muted);flex-direction:column;align-items:center;gap:16px;padding:80px 0;font-size:14px;display:flex}.home__spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin;display:block}@keyframes spin{to{transform:rotate(360deg)}}.learned{flex-direction:column;min-height:100svh;display:flex}.learned__header{border-bottom:1px solid var(--border);background:var(--bg);z-index:10;align-items:center;gap:12px;padding:20px 24px;display:flex;position:sticky;top:0}.learned__back{color:var(--text-muted);flex-shrink:0;padding:6px 0;font-size:14px;transition:color .15s}.learned__back:hover{color:var(--text)}.learned__title{font-family:var(--font-display);flex:1;font-size:24px;font-weight:400}.learned__total{color:var(--text-faint);letter-spacing:.04em;flex-shrink:0;font-size:12px}.lc-chart{border-bottom:1px solid var(--border);background:var(--surface);flex-direction:column;gap:10px;width:100%;max-width:900px;margin:0 auto;padding:20px 24px;display:flex}.lc-chart__header{justify-content:space-between;align-items:baseline;display:flex}.lc-chart__title{letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-size:11px;font-weight:500}.lc-chart__total{color:var(--accent);font-size:12px}.lc-chart__bars{align-items:flex-end;gap:3px;height:72px;display:flex}.lc-chart__col{cursor:default;flex:1;align-items:flex-end;height:100%;display:flex}.lc-chart__bar{background:var(--surface-3);border-radius:2px 2px 0 0;width:100%;transition:background .15s,height .4s}.lc-chart__bar--filled{background:var(--accent-dim)}.lc-chart__col:hover .lc-chart__bar--filled{background:var(--accent)}.lc-chart__axis{color:var(--text-faint);letter-spacing:.02em;justify-content:space-between;font-size:10px;display:flex}.learned__filters{border-bottom:1px solid var(--border);flex-direction:column;gap:12px;width:100%;max-width:900px;margin:0 auto;padding:16px 24px;display:flex}.learned__search{background:var(--surface);border:1px solid var(--border);width:100%;font-size:14px;font-family:var(--font-ui);color:var(--text);border-radius:8px;outline:none;padding:10px 14px;transition:border-color .15s}.learned__search::placeholder{color:var(--text-faint)}.learned__search:focus{border-color:var(--border-hover)}.learned__tabs{gap:4px;display:flex}.learned__tab{color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:8px;flex:1;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-size:13px;transition:color .15s,background .15s,border-color .15s;display:flex}.learned__tab:hover{color:var(--text);border-color:var(--border-hover)}.learned__tab--active{color:var(--accent);background:var(--accent-glow);border-color:var(--accent-dim)}.learned__tab-count{color:var(--text-faint);background:var(--surface-3);text-align:center;border-radius:10px;min-width:20px;padding:1px 6px;font-size:11px}.learned__tab--active .learned__tab-count{color:var(--accent);background:#c9a96e33}.learned__topic-select{background:var(--surface);border:1px solid var(--border);font-size:13px;font-family:var(--font-ui);color:var(--text-muted);cursor:pointer;border-radius:8px;outline:none;width:100%;padding:8px 12px;transition:border-color .15s}.learned__topic-select:focus{border-color:var(--border-hover)}.learned__list{flex-direction:column;flex:1;gap:1px;width:100%;max-width:900px;margin:0 auto;padding:8px 24px 48px;display:flex}.learned__item{border-bottom:1px solid var(--border);align-items:flex-start;gap:16px;padding:16px 0;transition:background .1s;display:flex}.learned__item:last-child{border-bottom:none}.learned__item-body{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.learned__phrase{color:var(--text);font-size:17px;font-weight:500;line-height:1.3}.learned__pronunciation{color:var(--text-faint);letter-spacing:.01em;font-size:12px;font-style:italic}.learned__example{color:var(--text-muted);margin-top:2px;font-size:13px;line-height:1.5}.learned__topic-tag{color:var(--text-faint);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;margin-top:6px;padding:2px 8px;font-size:11px;display:inline-block}.learned__item-aside{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:8px;display:flex}.learned__badge{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border);white-space:nowrap;border-radius:6px;padding:3px 8px;font-size:11px}.learned__badge--mastered{background:var(--accent-glow);color:var(--accent);border-color:var(--accent-dim)}.learned__speak{border:1px solid var(--border);background:var(--surface-2);width:32px;height:32px;color:var(--text-faint);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:color .15s,border-color .15s;display:flex}.learned__speak:hover{color:var(--accent);border-color:var(--border-hover)}.learned__speak--playing{color:var(--accent);border-color:var(--accent-dim);animation:1s ease-in-out infinite learned-pulse}@keyframes learned-pulse{0%,to{box-shadow:0 0 #c9a96e66}50%{box-shadow:0 0 0 5px #c9a96e00}}.learned__empty{text-align:center;color:var(--text-faint);padding:64px 0;font-size:14px}.learned__loading{color:var(--text-muted);flex-direction:column;align-items:center;gap:16px;padding:80px 0;font-size:14px;display:flex}.learned__spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin;display:block}@media (width<=600px){.learned__filters{padding:12px 16px}.learned__list{padding:4px 16px 48px}.learned__header{padding:16px}.learned__phrase{font-size:15px}.learned__tab{padding:7px 8px;font-size:12px}}.flashcard{perspective:1200px;cursor:pointer;width:100%;max-width:540px}.flashcard__inner{aspect-ratio:3/2;width:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1);position:relative}.flashcard__inner--flipped{transform:rotateY(180deg)}.flashcard__face{backface-visibility:hidden;border:1px solid var(--border);border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:32px 28px;display:flex;position:absolute;inset:0}.flashcard__front{background:var(--surface)}.flashcard__back{background:var(--surface-2);cursor:default;transform:rotateY(180deg)}.flashcard__phrase{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text);text-align:center;font-size:clamp(28px,6vw,44px);font-weight:600;line-height:1.1}.flashcard__phrase--back{color:var(--accent);margin-bottom:4px;font-size:clamp(18px,3.5vw,24px);font-style:italic;font-weight:400}.flashcard__pronunciation{color:var(--text-muted);letter-spacing:.02em;text-align:center;font-size:clamp(14px,2.5vw,18px)}.flashcard__example{color:var(--text);text-align:center;font-size:clamp(15px,2.5vw,18px);line-height:1.6}.flashcard__example mark{color:var(--accent);background:0 0;font-weight:600}.flashcard__tap-hint{letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-size:11px;animation:2s ease-in-out infinite tap-pulse;position:absolute;bottom:16px}@keyframes tap-pulse{0%,to{opacity:.4}50%{opacity:1}}.flashcard__speak{border:1px solid var(--border);background:var(--surface-3);width:34px;height:34px;color:var(--text-faint);z-index:1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:color .2s,border-color .2s,background .2s;display:flex;position:absolute;bottom:14px;right:14px}.flashcard__speak:hover{color:var(--accent);border-color:var(--border-hover);background:var(--accent-glow)}.flashcard__speak--playing{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-glow);animation:1.2s ease-in-out infinite speak-pulse}@keyframes speak-pulse{0%,to{box-shadow:0 0 #c9a96e80}50%{box-shadow:0 0 0 7px #c9a96e00}}.rating-bar{opacity:0;pointer-events:none;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:540px;transition:opacity .3s,transform .3s;display:flex;transform:translateY(12px)}.rating-bar--visible{opacity:1;pointer-events:auto;transform:translateY(0)}.rating-bar__hint{color:var(--text-faint);letter-spacing:.04em;font-size:11px}.rating-bar__buttons{grid-template-columns:1fr 1fr;gap:12px;width:100%;display:grid}.rating-bar__btn{font-family:var(--font-ui);border:1px solid;border-radius:12px;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;transition:background .15s,transform .1s,border-color .15s;display:flex}.rating-bar__btn:hover:not(:disabled){transform:translateY(-2px)}.rating-bar__btn:active:not(:disabled){transform:translateY(0)}.rating-bar__icon{font-size:22px;line-height:1}.rating-bar__label{letter-spacing:.02em;font-size:13px;font-weight:500}.rating-bar__btn--dontknow{color:#c47a6a;background:#c47a6a12;border-color:#c47a6a33}.rating-bar__btn--dontknow:hover:not(:disabled){background:#c47a6a24;border-color:#c47a6a66}.rating-bar__btn--know{color:var(--accent);background:var(--accent-glow);border-color:var(--border)}.rating-bar__btn--know:hover:not(:disabled){border-color:var(--accent-dim);background:#c9a96e33}.study{background:var(--bg);flex-direction:column;min-height:100svh;display:flex}.study--loading,.study--done{color:var(--text-muted);justify-content:center;align-items:center;gap:16px;font-size:14px}.study__spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite study-spin;display:block}@keyframes study-spin{to{transform:rotate(360deg)}}.study__header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.study__back{color:var(--text-muted);border-radius:6px;padding:6px 10px;font-size:13px;transition:color .15s,background .15s}.study__back:hover{color:var(--text);background:var(--surface-2)}.study__topic{color:var(--text-muted);align-items:center;gap:8px;font-size:13px;font-weight:500;display:flex}.study__count{color:var(--text-faint);text-align:right;min-width:52px;font-size:13px}.study__progress{background:var(--surface-2);height:2px}.study__progress-fill{background:var(--accent);height:100%;transition:width .4s}.study__main{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;padding:24px 16px 40px;display:flex}.study__hint{color:var(--text-faint);letter-spacing:.04em;font-size:12px;animation:.4s hint-fade}@keyframes hint-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.study__done-card{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:20px;flex-direction:column;align-items:center;gap:8px;min-width:240px;padding:48px 32px;display:flex}.study__done-label{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-size:12px;font-weight:500}.study__done-count{font-family:var(--font-display);color:var(--text);font-size:72px;font-weight:400;line-height:1}.study__done-sub{color:var(--text-muted);font-size:14px}.study__done-score{align-items:center;gap:8px;margin-bottom:24px;font-size:13px;display:flex}.study__done-got{color:var(--success)}.study__done-miss{color:var(--danger)}.study__done-sep{color:var(--text-faint)}.study__done-pct{color:var(--accent);font-weight:500}.study__done-btn{background:var(--accent-glow);border:1px solid var(--border-hover);color:var(--accent);border-radius:10px;padding:12px 28px;font-size:14px;font-weight:500;transition:background .2s,border-color .2s}.study__done-btn:hover{border-color:var(--accent-dim);background:#c9a96e33}