/* ==========================================================================
   TriLingo — Design System
   Visual direction: Peranakan (Baba-Nyonya) tilework — the historical fusion
   of Chinese and Malay culture in Malaysia — reinterpreted as a clean,
   Apple-grade interface. Turquoise + coral + gold stand in for tile glaze,
   set against warm ivory (light) and deep ink-teal (dark).
   8px grid throughout. All units derive from --space-*.
   ========================================================================== */

:root {
  /* ---- Palette (named) ---- */
  --tile-turquoise:      #0E7C7B;   /* primary */
  --tile-turquoise-dark: #0A5F5E;
  --tile-coral:          #F2545B;   /* bunga raya accent — streaks / errors */
  --tile-gold:           #D4A94F;   /* achievements / xp */
  --ink:                 #142B2E;   /* deep teal-black text */
  --ivory:               #F7F4EC;   /* warm light background */

  --color-bg:        var(--ivory);
  --color-bg-elev:   #FFFFFF;
  --color-surface:   #FFFFFF;
  --color-border:    rgba(20, 43, 46, 0.09);
  --color-text:      var(--ink);
  --color-text-soft: rgba(20, 43, 46, 0.72);
  --color-text-faint:rgba(20, 43, 46, 0.64);

  --color-primary:      var(--tile-turquoise);
  --color-primary-soft: rgba(14, 124, 123, 0.12);
  --color-coral:        var(--tile-coral);
  --color-coral-soft:   rgba(242, 84, 91, 0.12);
  --color-gold:         var(--tile-gold);
  --color-gold-soft:    rgba(212, 169, 79, 0.15);

  --lang-en: #3B6CB4;
  --lang-ms: #C0672D;
  --lang-zh: #B0344A;

  /* ---- Spacing: 8px grid ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(20,43,46,0.06), 0 1px 1px rgba(20,43,46,0.04);
  --shadow-md: 0 8px 24px rgba(20,43,46,0.10), 0 2px 6px rgba(20,43,46,0.05);
  --shadow-lg: 0 20px 48px rgba(20,43,46,0.16), 0 6px 16px rgba(20,43,46,0.08);

  /* ---- Type ---- */
  --font-display: 'Manrope', 'Noto Sans SC', sans-serif;
  --font-body: 'Inter', 'Noto Sans SC', sans-serif;
  --font-zh: 'Noto Sans SC', sans-serif;

  --fs-scale: 1;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
  --color-bg:        #0E2023;
  --color-bg-elev:   #12292C;
  --color-surface:   #163235;
  --color-border:    rgba(255,255,255,0.08);
  --color-text:      #EFF7F6;
  --color-text-soft: rgba(239,247,246,0.76);
  --color-text-faint:rgba(239,247,246,0.58);
  --color-primary:      #2CB5B3;
  --color-primary-soft: rgba(44,181,179,0.16);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.36);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.5);
}

[data-contrast="high"] {
  --color-text-soft: var(--color-text);
  --color-border: rgba(20,43,46,0.35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior-y: none;
}
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: calc(15px * var(--fs-scale));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
input { font-family: inherit; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--color-primary-soft); }

/* ============ App shell ============ */
#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ============ Top bar ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--sp-3) + var(--safe-top)) var(--sp-5) var(--sp-3);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.topbar-brand { display: flex; align-items: center; gap: var(--sp-2); }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(150deg, var(--tile-turquoise), var(--tile-turquoise-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-zh); font-weight: 700; font-size: 15px;
  box-shadow: var(--shadow-sm);
}
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.topbar-actions { display: flex; gap: var(--sp-2); }
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-soft);
  transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .15s var(--ease-spring);
}
.icon-btn:active { transform: scale(0.9); }
.icon-btn:hover { background: var(--color-primary-soft); color: var(--color-primary); }

/* ============ Search overlay ============ */
.search-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column;
  padding: calc(var(--sp-5) + var(--safe-top)) var(--sp-5);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.search-overlay.open { opacity: 1; pointer-events: all; transform: translateY(0); }
.search-box {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--color-surface); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-md);
  color: var(--color-text-soft);
}
.search-box input {
  flex: 1; border: none; outline: none; background: none;
  font-size: 16px; color: var(--color-text);
}
.search-results { margin-top: var(--sp-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-2); }

/* ============ Pages ============ */
.pages { flex: 1; overflow: hidden; position: relative; padding-bottom: calc(84px + var(--safe-bottom)); }
.page {
  display: none;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.page.active { display: block; animation: pageIn .38s var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.page-inner { padding: var(--sp-2) var(--sp-5) var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-6); }
.page-title { font-size: 26px; font-weight: 800; margin-top: var(--sp-2); }
.page-sub { color: var(--color-text-soft); font-size: 14px; margin-top: -var(--sp-3); }

/* ============ Home ============ */
.hero-greeting { padding-top: var(--sp-2); }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--color-primary); margin-bottom: var(--sp-1); }
.hero-title { font-size: 28px; font-weight: 800; }

.glass {
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border);
}

.daily-goal-card {
  display: flex; align-items: center; gap: var(--sp-5);
  border-radius: var(--r-xl); padding: var(--sp-5);
  box-shadow: var(--shadow-md);
}
.goal-ring-wrap { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.goal-ring { width: 84px; height: 84px; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--color-primary-soft); stroke-width: 10; }
.ring-progress {
  fill: none; stroke: var(--color-primary); stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  transition: stroke-dashoffset .6s var(--ease-spring);
}
.goal-ring-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.goal-count { font-size: 22px; font-weight: 800; font-family: var(--font-display); }
.goal-total { font-size: 11px; color: var(--color-text-faint); }
.goal-info { flex: 1; }
.goal-title { font-weight: 700; font-size: 15px; }
.goal-sub { color: var(--color-text-soft); font-size: 13px; margin-top: 2px; }
.streak-pill {
  display: inline-flex; align-items: center; gap: 5px; margin-top: var(--sp-2);
  background: var(--color-coral-soft); color: var(--tile-coral);
  padding: 5px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700;
}

.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.action-tile {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: var(--sp-4);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  box-shadow: var(--shadow-sm); transition: transform .18s var(--ease-spring), box-shadow .2s;
}
.action-tile:active { transform: scale(0.96); }
.action-tile.primary { background: linear-gradient(150deg, var(--tile-turquoise), var(--tile-turquoise-dark)); color: #fff; border: none; }
.tile-icon { font-size: 22px; margin-bottom: var(--sp-1); }
.tile-label { font-weight: 700; font-size: 15px; }
.tile-sub { font-size: 11.5px; opacity: .7; }

.section-block { display: flex; flex-direction: column; gap: var(--sp-3); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; }
.section-head h2 { font-size: 17px; font-weight: 800; }
.section-hint { font-size: 12px; color: var(--color-text-faint); }

.card-row { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-1); scrollbar-width: none; }
.card-row::-webkit-scrollbar { display: none; }
.mini-card {
  flex: 0 0 132px; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-md); padding: var(--sp-3); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 4px; transition: transform .18s var(--ease-spring);
}
.mini-card:active { transform: scale(0.95); }
.mini-card .mc-level { font-size: 10px; font-weight: 700; color: var(--color-primary); }
.mini-card .mc-en { font-weight: 700; font-size: 14.5px; }
.mini-card .mc-zh { font-size: 12.5px; color: var(--color-text-soft); font-family: var(--font-zh); }

/* ============ Filter chips ============ */
.filter-chip-row, .direction-row { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.filter-chip-row::-webkit-scrollbar, .direction-row::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--color-surface); border: 1px solid var(--color-border);
  font-size: 13.5px; font-weight: 600; color: var(--color-text-soft);
  transition: all .2s var(--ease-out);
}
.chip.small { padding: 6px 12px; font-size: 12.5px; }
.chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ============ Study / Flashcard ============ */
.study-inner { padding-top: calc(var(--sp-2) + var(--safe-top)); gap: var(--sp-4); height: 100%; }
.study-topbar { display: flex; align-items: center; gap: var(--sp-3); }
.study-progress-track { flex: 1; height: 6px; background: var(--color-border); border-radius: var(--r-pill); overflow: hidden; }
.study-progress-fill { height: 100%; width: 10%; background: var(--color-primary); border-radius: var(--r-pill); transition: width .4s var(--ease-out); }
.study-progress-count { font-size: 12.5px; color: var(--color-text-soft); font-weight: 600; min-width: 40px; text-align: right; }

.card-stage { flex: 1; display: flex; align-items: center; justify-content: center; perspective: 1400px; min-height: 380px; touch-action: pan-y; }
.flash-card {
  position: relative; width: 100%; max-width: 400px; height: 420px;
  transform-style: preserve-3d; transition: transform .55s var(--ease-spring);
  cursor: pointer;
}
.flash-card.flipped { transform: rotateY(180deg); }
.flash-card.swipe-left { animation: swipeLeft .35s var(--ease-out) forwards; }
.flash-card.swipe-right { animation: swipeRight .35s var(--ease-out) forwards; }
@keyframes swipeLeft { to { transform: translateX(-120%) rotate(-8deg); opacity: 0; } }
@keyframes swipeRight { to { transform: translateX(120%) rotate(8deg); opacity: 0; } }

.fc-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  padding: var(--sp-6); display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border);
  overflow: hidden;
}
.fc-front {
  align-items: center; justify-content: center; text-align: center; gap: var(--sp-2);
  background: linear-gradient(160deg, var(--color-surface), var(--color-bg-elev));
}
.fc-front::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    radial-gradient(circle at 15% 20%, var(--color-primary-soft) 0, transparent 45%),
    radial-gradient(circle at 85% 85%, var(--color-gold-soft) 0, transparent 45%);
}
.fc-level {
  position: relative; background: var(--color-primary-soft); color: var(--color-primary);
  font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: var(--r-pill);
}
.fc-category { position: relative; font-size: 12px; color: var(--color-text-faint); margin-top: 2px; }
.fc-word { position: relative; font-size: 34px; font-weight: 800; margin-top: var(--sp-3); }
.fc-speak {
  position: relative; width: 46px; height: 46px; border-radius: var(--r-pill);
  background: var(--color-primary); color: #fff; font-size: 18px; margin-top: var(--sp-2);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.fc-speak:active { transform: scale(0.9); }
.fc-hint { position: relative; font-size: 12px; color: var(--color-text-faint); margin-top: var(--sp-4); }
.fc-bottom-actions { position: absolute; bottom: var(--sp-5); left: 0; right: 0; display: flex; justify-content: center; gap: var(--sp-4); }
.fc-round-btn {
  width: 42px; height: 42px; border-radius: var(--r-pill); background: var(--color-bg);
  border: 1px solid var(--color-border); font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.fc-round-btn.active { background: var(--color-gold-soft); }

.fc-back { transform: rotateY(180deg); overflow-y: auto; gap: var(--sp-3); align-items: stretch; }
.fc-lang-block { border-bottom: 1px solid var(--color-border); padding-bottom: var(--sp-3); }
.fc-lang-block:last-of-type { border-bottom: none; }
.fc-lang-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 6px; margin-bottom: 5px;
}
.fc-lang-tag.en { background: color-mix(in srgb, var(--lang-en) 15%, transparent); color: var(--lang-en); }
.fc-lang-tag.ms { background: color-mix(in srgb, var(--lang-ms) 15%, transparent); color: var(--lang-ms); }
.fc-lang-tag.zh { background: color-mix(in srgb, var(--lang-zh) 15%, transparent); color: var(--lang-zh); }
.fc-lang-word { font-size: 18px; font-weight: 800; font-family: var(--font-zh); }
.fc-lang-def { font-size: 12.5px; color: var(--color-text-soft); margin-top: 2px; }
.fc-lang-ex { font-size: 12.5px; color: var(--color-text-faint); margin-top: 4px; font-style: italic; }
.fc-extra { font-size: 11.5px; color: var(--color-text-faint); }

.study-controls { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-2) 0 var(--sp-4); }
.ctrl-btn {
  height: 48px; padding: 0 var(--sp-3); border-radius: var(--r-pill);
  background: var(--color-surface); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13.5px;
  box-shadow: var(--shadow-sm);
}
.ctrl-btn:active { transform: scale(0.92); }
.ctrl-btn.hard { color: var(--tile-coral); flex: 1; }
.ctrl-btn.easy { color: var(--tile-turquoise); flex: 1; }

/* ============ Quiz ============ */
.quiz-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.quiz-mode-card {
  background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-3); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  font-weight: 700; font-size: 14px; box-shadow: var(--shadow-sm);
}
.quiz-mode-card.active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.qm-icon { font-size: 26px; }
.btn-primary {
  width: 100%; padding: 15px; background: var(--color-primary); color: #fff;
  border-radius: var(--r-lg); font-weight: 700; font-size: 15px; box-shadow: var(--shadow-md);
  transition: transform .15s var(--ease-spring);
}
.btn-primary:active { transform: scale(0.97); }
.btn-secondary {
  width: 100%; padding: 15px; background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text); border-radius: var(--r-lg); font-weight: 700; font-size: 15px; margin-top: var(--sp-2);
}

.quiz-question-card { border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-5); text-align: center; box-shadow: var(--shadow-md); }
.quiz-question-label { font-size: 13px; color: var(--color-text-soft); font-weight: 600; }
.quiz-question-word { font-size: 30px; font-weight: 800; margin-top: var(--sp-2); font-family: var(--font-zh); }
.quiz-options { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.quiz-opt {
  padding: 16px var(--sp-4); background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--r-md); font-size: 15px; font-weight: 600; text-align: left; box-shadow: var(--shadow-sm);
  transition: all .18s var(--ease-out);
}
.quiz-opt.correct { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }
.quiz-opt.wrong { background: var(--color-coral-soft); border-color: var(--tile-coral); color: var(--tile-coral); }
.quiz-opt.spelling-input {
  border: none; box-shadow: none; background: var(--color-bg-elev); border: 1.5px solid var(--color-border);
  font-size: 20px; text-align: center; font-weight: 700;
}
.quiz-feedback { text-align: center; margin-top: var(--sp-4); font-weight: 700; font-size: 14.5px; }

.quiz-result { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: var(--sp-12); }
.result-emoji { font-size: 56px; }
.quiz-result h1 { font-size: 26px; margin-top: var(--sp-3); }
.quiz-result p { color: var(--color-text-soft); margin-top: var(--sp-2); }
.result-stats { display: flex; gap: var(--sp-8); margin: var(--sp-6) 0; }
.rstat span { display: block; font-size: 24px; font-weight: 800; color: var(--color-primary); }
.rstat label { font-size: 12px; color: var(--color-text-faint); }

/* ============ Library ============ */
.lib-toolbar { display: flex; align-items: center; gap: var(--sp-2); }
.lib-count { margin-left: auto; font-size: 12px; color: var(--color-text-faint); }
.lib-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.lib-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.lib-item-main { flex: 1; min-width: 0; }
.lib-item-en { font-weight: 700; font-size: 15px; }
.lib-item-tri { font-size: 12.5px; color: var(--color-text-soft); font-family: var(--font-zh); margin-top: 2px; }
.lib-item-badge { font-size: 10px; font-weight: 800; color: var(--color-primary); background: var(--color-primary-soft); padding: 3px 8px; border-radius: var(--r-pill); }
.lib-item-star { font-size: 18px; opacity: .35; }
.lib-item-star.active { opacity: 1; }

/* ============ Statistics ============ */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.stat-card { border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-2); text-align: center; box-shadow: var(--shadow-sm); }
.stat-num { display: block; font-size: 20px; font-weight: 800; font-family: var(--font-display); color: var(--color-primary); }
.stat-num small { font-size: 11px; font-weight: 600; color: var(--color-text-faint); }
.stat-label { font-size: 10.5px; color: var(--color-text-faint); }

.heatmap { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.heat-cell { aspect-ratio: 1; border-radius: 4px; background: var(--color-border); }
.heat-cell[data-level="1"] { background: color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); }
.heat-cell[data-level="2"] { background: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); }
.heat-cell[data-level="3"] { background: var(--color-primary); }

.cat-perf { display: flex; flex-direction: column; gap: var(--sp-3); }
.cat-perf-row { display: flex; align-items: center; gap: var(--sp-3); }
.cat-perf-label { width: 88px; font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.cat-perf-track { flex: 1; height: 8px; background: var(--color-border); border-radius: var(--r-pill); overflow: hidden; }
.cat-perf-fill { height: 100%; background: var(--color-primary); border-radius: var(--r-pill); }
.cat-perf-pct { font-size: 12px; color: var(--color-text-faint); width: 34px; text-align: right; }

/* ============ Achievements ============ */
.xp-bar-card { border-radius: var(--r-xl); padding: var(--sp-5); box-shadow: var(--shadow-md); }
.xp-top { display: flex; justify-content: space-between; align-items: center; }
.xp-title { font-weight: 800; font-size: 16px; }
.xp-level { background: var(--color-gold-soft); color: var(--tile-gold); font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); }
.xp-track { height: 10px; background: var(--color-border); border-radius: var(--r-pill); margin-top: var(--sp-3); overflow: hidden; }
.xp-fill { height: 100%; background: linear-gradient(90deg, var(--tile-gold), var(--tile-coral)); border-radius: var(--r-pill); transition: width .6s var(--ease-spring); }
.xp-text { font-size: 12px; color: var(--color-text-faint); display: block; margin-top: var(--sp-2); }

.achievement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.ach-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-2); text-align: center; box-shadow: var(--shadow-sm); opacity: .4;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ach-card.unlocked { opacity: 1; }
.ach-icon { font-size: 26px; }
.ach-name { font-size: 11.5px; font-weight: 700; }

/* ============ Settings ============ */
.settings-group { display: flex; flex-direction: column; gap: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.settings-group-title { font-size: 12px; font-weight: 700; color: var(--color-text-faint); padding: var(--sp-3) var(--sp-4) var(--sp-1); text-transform: uppercase; letter-spacing: .04em; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--color-border); font-size: 14.5px; }
.settings-row:first-of-type { border-top: none; }
.settings-row.btn-row { padding: var(--sp-4); }

.switch { position: relative; width: 46px; height: 27px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: var(--color-border); border-radius: var(--r-pill); transition: .25s var(--ease-out); cursor: pointer; }
.slider::before { content: ""; position: absolute; width: 21px; height: 21px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .25s var(--ease-spring); box-shadow: var(--shadow-sm); }
.switch input:checked + .slider { background: var(--color-primary); }
.switch input:checked + .slider::before { transform: translateX(19px); }

.segmented { display: flex; background: var(--color-bg); border-radius: var(--r-pill); padding: 3px; }
.segmented button { padding: 6px 14px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: var(--color-text-soft); }
.segmented button.active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }

.stepper { display: flex; align-items: center; gap: var(--sp-3); }
.stepper button { width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--color-bg); font-weight: 700; font-size: 16px; }
.stepper span { font-weight: 700; min-width: 20px; text-align: center; }

.app-version { text-align: center; font-size: 11.5px; color: var(--color-text-faint); padding-top: var(--sp-4); }

/* ============ Bottom tab bar ============ */
.tabbar {
  position: fixed; left: 50%; bottom: calc(var(--sp-4) + var(--safe-bottom));
  transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 460px;
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: space-around;
  padding: var(--sp-2) var(--sp-2);
  box-shadow: var(--shadow-lg);
  z-index: 30;
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--color-text-faint); font-size: 10px; font-weight: 600; padding: 6px 10px; border-radius: var(--r-md);
  transition: color .2s var(--ease-out), transform .15s var(--ease-spring);
}
.tab-item svg { width: 22px; height: 22px; }
.tab-item.active { color: var(--color-primary); }
.tab-item:active { transform: scale(0.9); }
.tab-fab { margin-top: -26px; }
.fab-circle {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(150deg, var(--tile-coral), var(--tile-turquoise));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
}

/* ============ Toast ============ */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-bottom));
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 11px 20px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: all .3s var(--ease-spring); z-index: 200;
  max-width: 84%; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ Accessibility ============ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ============ Small-screen tightening ============ */
@media (max-width: 360px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .achievement-grid { grid-template-columns: repeat(2, 1fr); }
}