/* === Дизайн-токены из FOR_CLAUDE_CODE.md (Шаг 1) — копируется как есть === */

:root {
  --font-display: -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-rounded: -apple-system, "SF Pro Rounded", "SF Pro Display", system-ui, sans-serif;

  /* Light fallback (Telegram сам передаёт цвета через themeParams) */
  --bg: var(--tg-theme-secondary-bg-color, #F2F2F7);
  --surface: var(--tg-theme-bg-color, #FFFFFF);
  --surface-2: #F9F9FB;
  --hairline: rgba(60,60,67,0.10);

  --text: var(--tg-theme-text-color, #0A0A0F);
  --text-2: var(--tg-theme-subtitle-text-color, #3C3C43);
  --text-3: var(--tg-theme-hint-color, rgba(60,60,67,0.60));

  --accent: var(--tg-theme-button-color, #0E7C4A);
  --accent-on: var(--tg-theme-button-text-color, #FFFFFF);
  --accent-soft: rgba(14,124,74,0.10);
  --red: #B3261E;

  --cat-1:#2E7D5B; --cat-2:#8B5E3C; --cat-3:#4B5D8C; --cat-4:#7A4F8B;
  --cat-5:#B5651D; --cat-6:#5B6770; --cat-7:#8C5A8E; --cat-8:#436B7C;

  --r-md:6px; --r-lg:10px; --r-xl:14px; --r-2xl:18px;  /* sharp */

  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(60,60,67,0.08);
  --shadow-fab: 0 6px 16px rgba(14,124,74,0.22), 0 2px 4px rgba(0,0,0,0.06);
}

[data-theme="dark"] {
  --bg: #000;
  --surface: #1C1C1E;
  --surface-2: #2C2C2E;
  --hairline: rgba(84,84,88,0.36);
  --text: #fff;
  --text-2: #EBEBF5;
  --text-3: rgba(235,235,245,0.60);
  --accent: #2DBA6E;
  --accent-soft: rgba(45,186,110,0.16);
  --shadow-card: 0 0 0 0.5px rgba(255,255,255,0.06);
  --shadow-fab: 0 6px 16px rgba(45,186,110,0.32);
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html {
  /* Запрет double-tap zoom и pinch */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-display);
  background: var(--bg);
  color: var(--text);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum","ss01";
  -webkit-touch-callout: none;
  overscroll-behavior-y: contain;
}
/* iOS Safari автозум при focus на input < 16px — гарантируем минимум */
input, textarea, select {
  font-size: max(16px, 1em);
}

/* числа */
.fb-num { font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
.fb-hero-num { font-family: var(--font-rounded); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; }

/* карточки */
.fb-card { background: var(--surface); border-radius: var(--r-2xl); box-shadow: var(--shadow-card); }

/* строка списка */
.fb-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; position: relative; }
.fb-row + .fb-row::before {
  content: ""; position: absolute; top: 0; left: 60px; right: 0;
  height: 1px; background: var(--hairline);
}

/* плитка иконки категории */
.fb-tile { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; color: #fff; }
.fb-tile-lg { width: 40px; height: 40px; border-radius: 10px; }

/* прогресс-бар */
.fb-progress { height: 4px; background: var(--hairline); border-radius: 999px; overflow: hidden; }
.fb-progress > div { height: 100%; border-radius: 999px; transition: width .3s; background: var(--accent); }

/* секция-заголовок */
.fb-section { font-size: 13px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding: 0 4px 8px 4px; display: flex; justify-content: space-between; align-items: center; }
.fb-section a, .fb-section button { color: var(--accent); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; background: none; border: none; }

/* FAB */
.fb-fab { position: fixed; right: 18px; bottom: 100px; width: 56px; height: 56px; border-radius: 28px; background: var(--accent); color: #fff; border: none; display: grid; place-items: center; box-shadow: var(--shadow-fab); z-index: 50; }

/* таб-бар */
.fb-tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border-top: 0.5px solid var(--hairline); display: flex; z-index: 40; }
.fb-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 500; color: var(--text-3); background: transparent; border: none; padding-top: 6px; text-decoration: none; }
.fb-tab.active { color: var(--accent); }
.fb-tab svg { width: 26px; height: 26px; }

/* большая кнопка */
.fb-btn { width: 100%; padding: 14px 20px; border-radius: var(--r-lg); font-size: 17px; font-weight: 600; background: var(--accent); color: var(--accent-on); border: none; font-family: inherit; }

/* numpad клавиша */
.fb-key { background: var(--surface); border: none; border-radius: var(--r-xl); font-size: 28px; font-weight: 500; color: var(--text); height: 56px; font-family: var(--font-rounded); box-shadow: var(--shadow-card); }

/* === Compat-слой (используется текущей разметкой до Сессий 3-6) === */
[x-cloak] { display: none !important; }

/* Полноэкранная модалка (numpad и т.п.) — поверх всего */
.fb-fullscreen-modal {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1000 !important;
    background: var(--bg) !important;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Полупрозрачный оверлей для bottom-sheet модалок */
.fb-modal-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999 !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

.bg-bg          { background-color: var(--bg); }
.bg-surface     { background-color: var(--surface); }
.bg-surface-2   { background-color: var(--surface-2); }
.bg-accent      { background-color: var(--accent); }
.bg-accent-soft { background-color: var(--accent-soft); }
.bg-amber-soft  { background-color: rgba(232,177,75,0.16); }
.bg-red-soft    { background-color: rgba(179,38,30,0.18); }

.text-text     { color: var(--text); }
.text-text2    { color: var(--text-2); }
.text-text3    { color: var(--text-3); }
.text-accent   { color: var(--accent); }
.text-accent-text { color: var(--accent-on); }
.text-amber    { color: #E8B14B; }
.text-red      { color: var(--red); }

.border-hairline { border-color: var(--hairline); }

.rounded-md  { border-radius: var(--r-md); }
.rounded-lg  { border-radius: var(--r-lg); }
.rounded-xl  { border-radius: var(--r-xl); }
.rounded-2xl { border-radius: var(--r-2xl); }

.shadow-card { box-shadow: var(--shadow-card); }
.shadow-fab  { box-shadow: var(--shadow-fab); }

/* Утилиты совместимые с прошлым редизайном */
.fb-hero { font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; }
.numpad-btn { height: 56px; background: var(--surface); color: var(--text); border-radius: var(--r-xl); font-size: 24px; font-weight: 500; display: grid; place-items: center; transition: background-color 60ms; user-select: none; }
.numpad-btn:active { background: var(--surface-2); }
.numpad-confirm { background: var(--accent); color: var(--accent-on); border-radius: var(--r-xl); display: grid; place-items: center; font-size: 28px; font-weight: 600; }
.numpad-amount { font-size: 72px; line-height: 0.95; font-weight: 600; letter-spacing: -0.04em; }
.hero-amount   { font-size: 56px; line-height: 0.95; font-weight: 600; letter-spacing: -0.04em; }
@media (min-width: 380px) { .hero-amount { font-size: 64px; } }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

.progress-rail { height: 4px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; transition: width 200ms ease-out; }

.cat-tile { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; font-size: 16px; }

.ring-track { stroke: var(--hairline); }
.ring-fill  { stroke: var(--accent); transition: stroke-dashoffset 300ms ease-out; }