:root {
  color-scheme: dark;
  --night: #10131d;
  --panel: #1b2030;
  --panel-high: #272f45;
  --line: #343e55;
  --paper: #f5f7ff;
  --muted: #aab4c9;
  --blue: #7691ff;
  --blue-deep: #536fdf;
  --yellow: #ffbf57;
  --pink: #fc84a4;
  --green: #6fcd9a;
  --danger: #ff7996;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--night);
  color: var(--paper);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--night); }
body { min-width: 320px; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

#app { width: min(100%, 680px); min-height: 100svh; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px calc(84px + env(safe-area-inset-bottom)); }
.boot, .error-view { min-height: 80svh; display: grid; align-content: center; justify-items: center; text-align: center; gap: 12px; }
.boot p { color: var(--muted); margin: 0; }
.wordmark { font-size: 23px; font-weight: 800; letter-spacing: -.9px; }
.wordmark span { color: var(--blue); }
.topbar { height: 48px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.profile-button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--panel-high); color: var(--paper); display: grid; place-items: center; font-weight: 800; }
.profile-button::after { content: attr(data-initial); }
.screen { display: grid; gap: 16px; }
.greeting { margin: 0; font-size: clamp(25px, 7vw, 34px); letter-spacing: -1.2px; line-height: 1.1; }
.greeting small { display: block; color: var(--muted); font-size: 14px; letter-spacing: 0; margin-top: 8px; font-weight: 500; }
.card { background: var(--panel); border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: 20px; padding: 17px; }
.card h2 { margin: 0; font-size: 18px; letter-spacing: -.35px; }
.card p { margin: 8px 0 0; color: var(--muted); line-height: 1.5; font-size: 14px; }
.goal-card { position: relative; overflow: hidden; background: linear-gradient(122deg, #202c57, #1b2030 72%); border-color: #455ca9; }
.goal-card::after { content: ""; position: absolute; width: 210px; height: 210px; right: -125px; top: -150px; border: 34px solid color-mix(in srgb, var(--blue) 35%, transparent); border-radius: 50%; }
.goal-row, .menu-row, .word-row, .category-row { display: flex; align-items: center; gap: 12px; }
.goal-row { justify-content: space-between; position: relative; z-index: 1; }
.goal-number { font-size: 38px; letter-spacing: -2px; font-weight: 800; color: var(--paper); }
.goal-number span { font-size: 17px; letter-spacing: 0; color: var(--muted); font-weight: 600; }
.progress-track { height: 8px; overflow: hidden; background: rgba(245,247,255,.12); border-radius: 99px; margin-top: 15px; }
.progress-fill { height: 100%; width: 0; border-radius: inherit; background: var(--pink); transition: width .24s ease; }
.actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.primary-button, .secondary-button, .word-action { min-height: 51px; border: 0; border-radius: 15px; font-weight: 750; cursor: pointer; }
.primary-button { color: #10131d; background: var(--blue); box-shadow: inset 0 -2px 0 rgba(0,0,0,.16); }
.secondary-button { color: var(--paper); background: var(--panel-high); }
.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.section-title h2 { margin: 0; font-size: 19px; letter-spacing: -.45px; }
.quiet { color: var(--muted); font-size: 13px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.stat { background: var(--panel); border-radius: 15px; padding: 13px 11px; }
.stat b { display: block; font-size: 21px; letter-spacing: -.8px; }
.stat span { color: var(--muted); font-size: 12px; }
.tabs { position: fixed; z-index: 4; bottom: 0; left: 50%; translate: -50% 0; width: min(100%, 680px); padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); background: color-mix(in srgb, var(--night) 94%, transparent); border-top: 1px solid rgba(170,180,201,.12); backdrop-filter: blur(18px); }
.tab { border: 0; background: transparent; color: var(--muted); padding: 7px 4px; display: grid; place-items: center; gap: 3px; font-size: 12px; cursor: pointer; }
.tab-icon { font-size: 22px; line-height: 19px; }
.tab.active { color: var(--blue); font-weight: 750; }
.search { border: 1px solid var(--line); background: var(--panel); color: var(--paper); width: 100%; min-height: 47px; padding: 0 14px; border-radius: 14px; }
.filter-note { color: var(--muted); margin: -5px 1px 2px; font-size: 13px; }
.word-list, .category-list, .menu-list { display: grid; gap: 8px; }
.word-row, .category-row, .menu-row { background: var(--panel); border-radius: 16px; padding: 13px; }
.word-row { justify-content: space-between; }
.word-main { min-width: 0; }
.word-main b { display: block; font-size: 17px; letter-spacing: -.25px; }
.word-main small { color: var(--muted); font-size: 13px; }
.word-translation { color: var(--muted); font-size: 13px; max-width: 49%; text-align: right; }
.badge { flex: 0 0 auto; border-radius: 99px; padding: 4px 8px; font-size: 11px; font-weight: 700; background: #263557; color: #b8c8ff; }
.badge.new { background: #4a2638; color: #ffb0c3; }
.category-row { justify-content: space-between; }
.category-copy b { display: block; font-size: 15px; }
.category-copy small { color: var(--muted); font-size: 12px; }
.switch { position: relative; width: 46px; height: 28px; padding: 0; flex: 0 0 auto; border: 0; border-radius: 99px; background: #4a5263; cursor: pointer; }
.switch::after { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; border-radius: 50%; background: var(--paper); transition: translate .2s ease; }
.switch[aria-checked="true"] { background: var(--blue-deep); }
.switch[aria-checked="true"]::after { translate: 18px 0; }
.menu-row { justify-content: space-between; border: 0; border-radius: 0; padding: 16px 2px; border-bottom: 1px solid var(--line); background: transparent; text-align: left; color: var(--paper); width: 100%; cursor: pointer; }
.menu-row:first-child { border-top: 1px solid var(--line); }
.menu-label { display: grid; gap: 3px; }
.menu-label b { font-size: 15px; }
.menu-label span { font-size: 13px; color: var(--muted); }
.chevron { color: var(--muted); font-size: 23px; font-weight: 300; }
.settings-panel { display: grid; gap: 10px; }
.settings-panel label { color: var(--muted); font-size: 13px; display: grid; gap: 6px; }
.settings-panel input { min-height: 45px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-high); color: var(--paper); padding: 0 12px; }
.learn-card { min-height: 326px; display: grid; align-content: center; text-align: center; padding: 28px 22px; background: radial-gradient(circle at 50% -30%, #344688, var(--panel) 60%); }
.learn-card .label { color: var(--blue); font-weight: 750; font-size: 13px; }
.learn-word { font-size: clamp(36px, 12vw, 56px); letter-spacing: -2px; margin: 14px 0 5px; }
.learn-ipa { color: var(--muted); margin: 0; font-size: 16px; }
.learn-ru { margin: 24px 0 0; font-size: 19px; }
.learn-hint { color: var(--muted); margin: 10px 0 0; font-size: 13px; }
.empty { padding: 27px 12px; text-align: center; color: var(--muted); }
.error-mark { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: var(--danger); border: 2px solid var(--danger); font-size: 30px; font-weight: 800; }
.error-view h1 { margin: 2px 0 0; font-size: 23px; }
.error-view p { margin: 0; color: var(--muted); max-width: 330px; line-height: 1.5; }
.hidden { display: none !important; }
@media (min-width: 681px) { body { background: #0b0d13; } #app { border-left: 1px solid #202637; border-right: 1px solid #202637; } }
@media (prefers-reduced-motion: reduce) { *, *::after { transition: none !important; scroll-behavior: auto !important; } }