:root {
  color-scheme: dark;
  --bg: #151419;
  --sidebar: #19181e;
  --panel: #1e1d24;
  --card: #222129;
  --line: #34323c;
  --text: #f3f1f6;
  --muted: #a7a3b2;
  --lime: #d8f87b;
  --violet: #c4adff;
  --peach: #ffc1a6;
  --danger: #ffaeab;
  --success-ink: #a1edb3;
  --success-bg: #203729;
  --success-line: #54916a;
  --radius: 17px;
  font-family: Inter, "Atkinson Hyperlegible Next", system-ui, -apple-system, sans-serif;
  font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.85rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -.055em; }
h2 { font-size: 1.48rem; letter-spacing: -.04em; }
h3 { font-size: 1.04rem; letter-spacing: -.02em; }
svg { flex-shrink: 0; }
.initial { margin: 45px; color: var(--muted); }
.layout { min-height: 100vh; display: grid; grid-template-columns: 221px minmax(0, 1fr); }
.sidebar { height: 100dvh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 27px 17px 18px; background: var(--sidebar); border-right: 1px solid var(--line); z-index: 3; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 9px 47px; font-size: 1.33rem; font-weight: 800; letter-spacing: -.055em; width: fit-content; }
.brand img { width: 35px; height: 35px; }
.sidebar-label { color: #938e9f; font-weight: 720; font-size: .68rem; letter-spacing: .14em; margin: 0 12px 12px; }
.nav { display: grid; gap: 6px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; font-weight: 620; color: var(--muted); }
.nav a:hover, .nav a[aria-current] { color: var(--text); background: #2a2832; }
.nav a[aria-current] { color: var(--lime); background: #2c3023; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 17px; }
.local-profile { display: flex; align-items: center; gap: 10px; padding: 15px 7px 3px; border-top: 1px solid var(--line); }
.local-profile div { display: grid; gap: 3px; }
.local-profile strong { font-size: .88rem; }
.local-profile small { color: var(--muted); font-size: .71rem; }
.avatar { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; color: #ded1ff; background: #3a2e50; font-size: 1rem; }
.workspace { width: min(100%, 1440px); margin-inline: auto; padding: 26px clamp(21px, 3vw, 43px) 48px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; }
.breadcrumb { color: var(--muted); font-size: .85rem; }
.top-actions, .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.pill { min-height: 33px; border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; color: var(--muted); font-size: .78rem; font-weight: 730; white-space: nowrap; }
.pill svg { color: var(--peach); }
.pill.xp svg { color: var(--lime); }
.btn, .icon-btn, .text-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 720; color: var(--text); border: 1px solid transparent; border-radius: 10px; text-align: center; }
.btn { min-height: 41px; padding: 9px 15px; font-size: .83rem; }
.btn-primary { color: #22281a; background: var(--lime); }
.btn-primary:hover { background: #e8ffa1; }
.btn-secondary, .icon-btn { color: var(--text); background: var(--card); border-color: var(--line); }
.btn-secondary:hover, .icon-btn:hover { background: #34323c; }
.btn:disabled, .icon-btn:disabled { opacity: .42; cursor: default; }
.btn-danger { color: #302021; background: var(--danger); }
.icon-btn { width: 40px; height: 40px; }
.text-btn { padding: 5px 0; background: transparent; color: var(--muted); font-size: .84rem; }
.text-btn:hover { color: var(--lime); }
.dashboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(219px, 27%); gap: 24px; align-items: start; }
.main-col, .side-col { display: grid; gap: 27px; min-width: 0; }
.side-col { gap: 16px; }
.hero { min-height: 274px; display: flex; position: relative; border: 1px solid #40374c; border-radius: 21px; overflow: hidden; background: radial-gradient(ellipse at 83% 48%, #52406a, #282133 53%, #24202c 78%); isolation: isolate; }
.hero-content { position: relative; z-index: 1; padding: 26px 0 27px 28px; max-width: 65%; align-self: center; }
.eyebrow { display: flex; align-items: center; gap: 7px; color: var(--violet); text-transform: uppercase; font-weight: 800; font-size: .68rem; letter-spacing: .13em; margin-bottom: 12px; }
.hero h1 { max-width: 470px; font-size: clamp(1.85rem, 3.7vw, 3.15rem); }
.hero p { color: #d2c8de; line-height: 1.55; margin: 12px 0 19px; max-width: 330px; font-size: .92rem; }
.hero img { position: absolute; object-fit: contain; height: 100%; width: 48%; right: -1%; top: 0; z-index: -1; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 18px; }
.panel-title { display: flex; align-items: center; gap: 9px; }
.panel-title svg { color: var(--lime); }
.section-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 13px; }
.section-heading .text-btn { white-space: nowrap; }
.goal-layout { display: flex; justify-content: center; padding: 19px 0 12px; }
.goal-ring { --fill: 0%; width: 108px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--lime) var(--fill), #373641 0); display: grid; place-items: center; }
.goal-inner { height: 92px; width: 92px; border-radius: 50%; background: var(--panel); display: grid; place-content: center; text-align: center; }
.goal-inner strong { font-size: 1.5rem; letter-spacing: -.05em; }
.goal-inner span { font-size: .72rem; color: var(--muted); margin-top: 3px; }
.goal-note { text-align: center; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.activity { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 16px; }
.activity span { display: grid; place-items: center; gap: 6px; font-size: .66rem; color: var(--muted); }
.activity i { border-radius: 7px; width: 100%; max-width: 28px; height: 25px; display: grid; place-items: center; background: #2e2c37; color: var(--muted); font-style: normal; }
.activity i.active { background: var(--lime); color: #22281a; }
.activity i.today { outline: 1px solid var(--lime); outline-offset: -1px; }
.stats-mini { display: grid; gap: 12px; margin-top: 15px; }
.stats-mini div { display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: .84rem; color: var(--muted); }
.stats-mini strong { color: var(--text); }
.deck-grid, .mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.deck-tile { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 10px; min-width: 0; transition: border-color .15s, transform .15s; }
.deck-tile:hover, .mode-link:hover { border-color: var(--violet); transform: translateY(-2px); }
.deck-art { --tone: var(--lime); --wash: #303828; height: 80px; overflow: hidden; border-radius: 10px; color: var(--tone); background: radial-gradient(ellipse at 68% 10%, color-mix(in srgb, var(--tone) 15%, var(--wash)), var(--wash)); display: grid; place-items: center; position: relative; isolation: isolate; }
.deck-art::before, .deck-art::after { position: absolute; content: ""; inset: 50% auto auto 50%; width: 110px; height: 110px; border: 1px solid currentColor; border-radius: 29px; opacity: .20; transform: translate(-50%, -50%) rotate(-21deg); z-index: -1; }
.deck-art::after { transform: translate(-50%, -50%) rotate(-34deg) scale(1.36); opacity: .10; }
.deck-art svg { transform: rotate(-10deg); }
.violet { --tone: var(--violet); --wash: #342944; }
.peach { --tone: var(--peach); --wash: #412d2c; }
.deck-info { display: flex; flex: 1; flex-direction: column; padding: 12px 5px 4px; min-width: 0; }
.deck-info h3 { line-height: 1.22; overflow-wrap: anywhere; }
.deck-info p { color: var(--muted); margin: 6px 0 10px; font-size: .79rem; line-height: 1.45; }
.deck-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; color: var(--muted); font-size: .74rem; }
.deck-meta .arrow { margin-left: auto; color: var(--text); }
.level { color: var(--tone, var(--violet)); background: #ffffff0d; border-radius: 5px; padding: 2px 5px; }
.game-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode-link { display: flex; align-items: center; gap: 11px; min-width: 0; border-radius: 13px; border: 1px solid var(--line); background: var(--panel); padding: 12px; transition: border-color .15s, transform .15s; }
.mode-link span { display: grid; gap: 4px; }
.mode-link small { color: var(--muted); line-height: 1.35; }
.mode-link > svg:last-child { margin-left: auto; color: var(--muted); }
.square-icon { width: 37px; height: 37px; display: grid !important; place-items: center; border-radius: 9px; flex: 0 0 auto; background: #352b46; color: var(--violet); }
.square-icon.lime { background: #323826; color: var(--lime); }
.square-icon.peach { background: #412d2c; color: var(--peach); }
.page { display: grid; gap: 24px; }
.page-title { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 14px; }
.page-title p, .muted { color: var(--muted); line-height: 1.55; }
.page-title p { margin-top: 8px; max-width: 680px; }
.search, .field input, .field textarea, .field select, .learn-form input { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); }
.search { max-width: 350px; }
.field textarea { min-height: 90px; resize: vertical; }
.field { display: grid; gap: 6px; align-content: start; font-size: .85rem; font-weight: 620; }
.field small { color: var(--muted); font-weight: 400; }
input::placeholder, textarea::placeholder { color: #908a9f; }
.empty { padding: 32px 20px; color: var(--muted); text-align: center; }
.empty h2, .empty p { margin-bottom: 12px; }
.card-list { display: grid; gap: 8px; }
.word-row { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; display: grid; grid-template-columns: minmax(95px, 1fr) minmax(110px, 1.3fr) auto; gap: 15px; align-items: center; padding: 10px 13px; }
.word-row strong, .word-row span { overflow-wrap: anywhere; }
.word-row em { display: block; color: var(--muted); font-style: normal; font-size: .78rem; margin-top: 3px; }
.row-tools { display: flex; gap: 6px; }
.row-tools .icon-btn { width: 34px; height: 34px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-value { display: block; font-size: clamp(1.5rem, 4vw, 2.45rem); margin-bottom: 5px; letter-spacing: -.06em; }
.stat-label { color: var(--muted); font-size: .83rem; }
.breakdown { display: grid; gap: 12px; margin-top: 15px; }
.breakdown-row { display: grid; grid-template-columns: 83px minmax(0, 1fr) 30px; gap: 12px; align-items: center; font-size: .84rem; }
.bar { display: block; height: 7px; border-radius: 99px; background: #393641; overflow: hidden; }
.bar > span { height: 100%; border-radius: inherit; display: block; background: var(--lime); }
.breakdown-row:nth-child(2) .bar span { background: var(--peach); }
.breakdown-row:nth-child(3) .bar span { background: var(--violet); }
.breakdown-row:first-child .bar span { background: #777482; }
.trainer { max-width: 760px; margin-inline: auto; display: grid; gap: 16px; }
.trainer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trainer-top span { color: var(--muted); font-size: .86rem; }
.trainer-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; flex-shrink: 0; }
.trainer-top .trainer-streak:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 99px; background: var(--success-bg); color: var(--success-ink); font-weight: 700; }
.trainer-finish-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 15px; background: var(--success-bg); color: var(--success-ink); }
.trainer-perfect { border-color: var(--success-line); }
.trainer-perfect h2 { color: var(--success-ink); }
.flash-stage { overflow: clip; overflow-clip-margin: 5px; }
.flash-wrap { position: relative; perspective: 1400px; }
.flash-card {
  width: 100%; min-height: 305px; padding: 0; border: 0; border-radius: 21px;
  background: transparent; color: var(--text); display: grid; text-align: center; touch-action: pan-y;
  transform-style: preserve-3d; transition: transform .52s cubic-bezier(.37,.08,.24,1);
}
.flash-card.flipped { transform: rotateY(180deg); }
.flash-face {
  grid-area: 1 / 1; min-width: 0; padding: 66px 38px 34px;
  display: grid; align-content: center; gap: 8px; border-radius: inherit;
  border: 1px solid var(--flash-line, #4d405d);
  background: var(--flash-bg, radial-gradient(ellipse at 50% 0%, #352844, var(--panel) 75%));
  backface-visibility: hidden;
}
.flash-back { transform: rotateY(180deg); }
.flash-word { font-size: clamp(2rem, 7vw, 4.3rem); font-weight: 790; letter-spacing: -.05em; word-break: break-word; }
.flash-translation { color: var(--lime); font-size: clamp(1.65rem, 5vw, 2.8rem); font-weight: 740; letter-spacing: -.035em; line-height: 1.2; overflow-wrap: anywhere; }
.flash-meta { color: var(--violet); }
.flash-example { color: var(--text); line-height: 1.45; }
.flash-image { max-width: min(100%, 240px); max-height: 130px; margin: 3px auto; border-radius: 8px; }
.flash-hint { color: var(--muted); font-size: .8rem; }
.flash-audio { position: absolute; right: 12px; top: 12px; display: flex; gap: 5px; }
.flash-audio-extra:not([hidden]) { display: flex; gap: inherit; }
.flash-audio .btn { padding-inline: 8px; }
.flash-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.trainer-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.review-grading { display: grid; gap: 8px; }
.review-grading p { font-size: .84rem; }
.grades { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.grades .btn:hover { border-color: var(--violet); }
.grades .btn:first-child { color: var(--danger); }
.grades .btn:nth-child(3) { border-color: #596348; color: var(--lime); }
.learn-card { padding: 23px; display: grid; gap: 15px; }
.learn-card h2 { font-size: clamp(1.55rem, 5vw, 2.4rem); overflow-wrap: anywhere; }
.learn-form { display: flex; gap: 8px; }
.learn-form input { min-width: 0; }
.feedback { display: grid; gap: 9px; border-radius: 10px; padding: 15px; border: 1px solid var(--line); overflow-wrap: anywhere; }
.feedback.correct { background: var(--success-bg); border-color: var(--success-line); color: var(--success-ink); }
.feedback.wrong { background: #402d2e; border-color: #644345; }
.feedback p { color: #e6dfe9; }
dialog { width: min(580px, calc(100% - 28px)); max-height: calc(100% - 28px); padding: 0; border: 1px solid var(--line); border-radius: 18px; color: var(--text); background: var(--panel); }
dialog::backdrop { background: #0a090dcc; }
.modal-body { padding: 21px; display: grid; gap: 14px; }
.modal-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid > .full { grid-column: 1 / -1; }
.modal-actions { justify-content: flex-end; }
.speech-settings { margin: 0; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 12px; }
.speech-settings legend { padding: 0 5px; font-size: .85rem; font-weight: 700; }
.voice-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.voice-setting .btn { min-height: 43px; padding-inline: 9px; }
.check-field { display: flex; align-items: center; gap: 7px; font-size: .82rem; }
.check-field input { accent-color: var(--lime); }
.form-error { color: var(--danger); font-size: .84rem; }
#notice { display: none; position: fixed; bottom: 22px; right: 22px; max-width: min(420px, calc(100% - 44px)); padding: 12px 16px; background: #383247; border: 1px solid #625678; border-radius: 10px; z-index: 12; }
#notice:not(:empty) { display: block; }
.mobile-name { display: none; }
@media (min-width: 1500px) { .layout { grid-template-columns: 246px minmax(0, 1fr); } }
@media (max-width: 1120px) {
  .layout { grid-template-columns: 185px minmax(0, 1fr); }
  .sidebar { padding-inline: 12px; }
  .dashboard { gap: 15px; grid-template-columns: minmax(0, 1fr) 206px; }
  .deck-grid { gap: 8px; }
  .deck-meta { gap: 5px; }
}
@media (max-width: 940px) {
  .layout { grid-template-columns: 64px minmax(0, 1fr); }
  .sidebar { padding-inline: 8px; }
  .sidebar .brand { margin: 0 0 28px; justify-content: center; width: 100%; }
  .sidebar .brand span, .sidebar-label, .nav a span, .local-profile div { display: none; }
  .nav a { justify-content: center; }
  .local-profile { justify-content: center; padding-inline: 0; }
}
@media (max-width: 735px) {
  .dashboard { grid-template-columns: minmax(0, 1fr); }
  .side-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { min-height: 240px; }
}
@media (max-width: 550px) {
  .layout { display: block; }
  .sidebar { height: auto; position: fixed; inset: auto 0 0; border-right: 0; border-top: 1px solid var(--line); padding: 4px 4px max(5px, env(safe-area-inset-bottom)); }
  .sidebar .brand, .sidebar-bottom { display: none; }
  .nav { grid-template-columns: repeat(4, 1fr); gap: 3px; }
  .nav a { flex-direction: column; gap: 3px; font-size: .64rem; padding: 7px 2px; }
  .nav a span { display: initial; }
  .nav a svg { width: 17px; height: 17px; }
  .workspace { padding: 15px 13px 88px; }
  .topbar { margin-bottom: 16px; }
  .top-actions, #topStats { flex-wrap: nowrap; gap: 5px; }
  .top-actions .icon-btn { width: 34px; height: 34px; }
  .top-actions .pill { padding-inline: 7px; }
  .mobile-name { display: inline; }
  .breadcrumb span:not(.mobile-name) { display: none; }
  .main-col { gap: 22px; }
  .hero-content { padding-left: 16px; max-width: 78%; }
  .hero img { width: 42%; max-height: 46%; right: -4%; top: 20%; opacity: .8; }
  .hero p { font-size: .84rem; }
  .deck-grid { grid-template-columns: 1fr; }
  .deck-tile { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px; }
  .deck-art { height: 100%; min-height: 64px; }
  .deck-info { padding: 3px 3px 3px 5px; }
  .deck-info p { margin: 3px 0 6px; }
  .game-links { grid-template-columns: 1fr 1fr; }
  .mode-grid:not(.game-links) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-link { padding: 9px; gap: 7px; }
  .mode-link > svg:last-child { display: none; }
  .square-icon { width: 30px; height: 30px; }
  .side-col { gap: 8px; }
  .panel { padding: 12px; }
  .panel-title h2, .panel-title h3 { font-size: .95rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .word-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 7px; padding: 8px; }
  .row-tools { flex-wrap: wrap; justify-content: flex-end; max-width: 65px; }
  .row-tools .icon-btn { width: 29px; height: 29px; }
  .flash-card { min-height: 265px; }
  .trainer-meta { max-width: 46%; }
  .flash-face { padding-inline: 18px; }
  .grades { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modal-body { padding: 15px; }
  #notice { bottom: 72px; }
}
@media (max-width: 345px) {
  .hero-content { max-width: 94%; }
  .hero img { opacity: .24; }
  .flash-audio .btn { padding-inline: 6px; gap: 4px; }
  .flash-audio svg { width: 14px; height: 14px; }
  .voice-setting .btn svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}