/*
 * =========================================
 * APPLICATION - Базовые стили (Редизайн 2026)
 * Философия: Архитектурная Эфемерность
 *
 * 4 режима:
 * - Светлый Quiet Luxury: Теплые серые, sophisticated, paper-like
 * - Темный Quiet Luxury: Deep charcoal, warm undertones, architectural
 * - Светлый Vibe Shift: Dirty monitor, acid green, scan lines
 * - Темный Vibe Shift: Void black, toxic neon, CRT effects
 * =========================================
 */

/* =========================================
   ДЕФОЛТНЫЕ ПЕРЕМЕННЫЕ (fallback)
   ========================================= */

:root {
  /* =========================================
     ГЕОМЕТРИЯ И ТИПОГРАФИКА
     ========================================= */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

/* Typography scale -Golden Ratio approximated */
--font-main: 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', system-ui, sans-serif;
--font-vibe: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-base: 15px;
--font-size-md: 16px;
--font-size-lg: 18px;
--font-size-xl: 22px;
--font-size-2xl: 28px;
--font-size-3xl: 36px;
--line-height-tight: 1.2;
--line-height-snug: 1.35;
--line-height-normal: 1.5;
--line-height-relaxed: 1.65;

/* Letter-spacing по scale */
--tracking-tighter: -0.04em;
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;

/* =========================================
   LAYOUT & SPACING
   ========================================= */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--container-max: 1200px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--container-pad-mobile: 16px;
--container-pad-tablet: 32px;
--container-pad-desktop: 96px;

/* =========================================
   СВЕТЛАЯ ТЕМА: QUIET LUXURY
   ========================================= */

/* Backgrounds - теплые, sophisticated */
--bg-primary: oklch(98.7% 0.002 265deg);
--bg-secondary: oklch(100% 0 0deg);
--bg-tertiary: oklch(98% 0.003 265deg);
--bg-elevated: oklch(100% 0 0deg);
--bg-surface: oklch(99.2% 0.002 265deg);
--bg-surface-hover: oklch(96.5% 0.004 265deg);

/* Текст - глубокий, контрастный */
--text-primary: oklch(15% 0.018 265deg);
--text-secondary: oklch(46% 0.018 265deg);
--text-tertiary: oklch(64% 0.012 265deg);
--text-muted: oklch(75% 0.008 265deg);

/* Accents - sophisticated slate-blue */
--accent-primary: oklch(52% 0.14 248deg);
--accent-hover: oklch(58.% 0.16 248deg);
--accent-active: oklch(48% 0.12 248deg);
--accent-on-accent: oklch(99% 0.002 265deg);

/* Accent glow - subtle */
--accent-glow-sm: oklch(52% 0.14 248deg / 8%);
--accent-glow-md: oklch(52% 0.14 248deg / 15%);
--accent-glow-lg: oklch(52% 0.14 248deg / 25%);

/* Эхо теги - sophisticated */
--echo-anxiety: oklch(62% 0.18 18deg);
--echo-boredom: oklch(62% 0.12 248deg);
--echo-adventure: oklch(62% 0.18 168deg);
--echo-tag-anxiety: oklch(55% 0.15 15deg);
--echo-tag-boredom: oklch(55% 0.1 240deg);
--echo-tag-adventure: oklch(55% 0.15 165deg);

/* Semantic colors */
--color-error: oklch(58.% 0.24 25deg);
--color-error-bg: oklch(97.5% 0.025 25deg);
--color-error-glow: oklch(58.% 0.24 25deg / 20%);
--color-success: oklch(58.% 0.18 168deg);
--color-success-bg: oklch(97.5% 0.025 168deg);
--color-warning: oklch(68% 0.20 75deg);

/* =========================================
   ТЕНЕВАЯ СИСТЕМА - многослойная
   ========================================= */

/* Shadow XSmall - для деталей */
--shadow-xs:
  0 1px 2px oklch(15% 0.018 265deg / 6%),
  0 1px 3px oklch(15% 0.018 265deg / 4%);

/* Shadow Small - для chips, small cards */
--shadow-sm:
  0 1px 3px oklch(15% 0.018 265deg / 8%),
  0 2px 6px oklch(15% 0.018 265deg / 6%),
  0 1px 12px oklch(15% 0.018 265deg / 3%);

/* Shadow Medium - для кнопок, cards */
--shadow-md:
  0 2px 6px oklch(15% 0.018 265deg / 10%),
  0 4px 16px oklch(15% 0.018 265deg / 8%),
  0 1px 24px oklch(15% 0.018 265deg / 4%),
  0 0 0 1px oklch(92% 0.01 265deg / 50%);

/* Shadow Large - для elevated surfaces */
--shadow-lg:
  0 4px 12px oklch(15% 0.018 265deg / 12%),
  0 8px 32px oklch(15% 0.018 265deg / 10%),
  0 2px 48px oklch(15% 0.018 265deg / 6%),
  0 0 0 1px oklch(90% 0.015 265deg / 40%);

/* Shadow XL - для модалок */
--shadow-xl:
  0 8px 24px oklch(15% 0.018 265deg / 14%),
  0 16px 64px oklch(15% 0.018 265deg / 12%),
  0 4px 96px oklch(15% 0.018 265deg / 8%),
  0 0 0 1px oklch(88% 0.02 265deg / 30%);

/* Inner shadows - для depth */
--shadow-inner-sm: inset 0 1px 3px oklch(15% 0.018 265deg / 8%);
--shadow-inner-md: inset 0 2px 6px oklch(15% 0.018 265deg / 10%);

/* Ambient Occlusion - контактные тени */
--ao-outer: 0 1px 0 oklch(15% 0.018 265deg / 4%);
--ao-inner: inset 0 1px 2px oklch(15% 0.018 265deg / 6%);

/* Glow effects - для акцентов */
--glow-sm: 0 0 0 1px var(--accent-glow-sm), 0 0 12px var(--accent-glow-sm);
--glow-md: 0 0 0 1px var(--accent-glow-md), 0 0 20px var(--accent-glow-md), 0 0 40px var(--accent-glow-sm);
--glow-lg: 0 0 0 2px var(--accent-glow-md), 0 0 30px var(--accent-glow-lg), 0 0 60px var(--accent-glow-md);

/* =========================================
   ГРАНИЦЫ И РАЗДЕЛИТЕЛИ
   ========================================= */
--border-subtle: 1px solid oklch(90% 0.008 265deg);
--border-default: 1px solid oklch(86% 0.012 265deg);
--border-strong: 1px solid oklch(80% 0.018 265deg);
--border-accent: 1px solid oklch(52% 0.14 248deg / 40%);

/* =========================================
   GLASS MORPHISM
   ========================================= */
--glass-bg: oklch(100% 0 0deg / 70%);
--glass-border: oklch(85% 0.015 265deg / 50%);
--glass-shine: oklch(100% 0 0deg / 15%);
--glass-shadow: inset 0 1px 2px oklch(100% 0 0deg / 80%), 0 4px 16px oklch(15% 0.018 265deg / 8%);
--glass-blur: blur(20px) saturate(120%);

/* =========================================
   ТЕКСТУРЫ
   ========================================= */

/* Paper grain - для теплой, тактильности */
--texture-paper: url(/assets/noise.svg);

/* Specular highlight pattern - для бликов */
--texture-specular: linear-gradient(135deg, oklch(100% 0 0deg / 12%) 0%, oklch(100% 0 0deg / 4%) 50%, transparent 100%);

/* Scan lines - для Vibe mode */
--texture-scanlines: repeating-linear-gradient(
  0deg,
  transparent,
  transparent 2px,
  oklch(0% 0 0deg / 1.5%) 2px,
  oklch(0% 0 0deg / 1.5%) 4px
);

/* Noise для Vibe mode */
--texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23noise)' opacity='0.06'/%3E%3C/svg%3E");

/* =========================================
   АНИМАЦИЯ
   ========================================= */

/* Easing functions - characterful */
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
--spring-sm: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--spring-md: cubic-bezier(0.34, 1.56, 0.64, 1);

/* Durations */
--duration-instant: 100ms;
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 350ms;
--duration-slower: 500ms;

/* =========================================
   BLUR FILTERS
   ========================================= */
--blur-sm: blur(8px);
--blur-md: blur(16px);
--blur-lg: blur(24px);
--blur-xl: blur(40px);
}

/* =========================================
 СВЕТЛАЯ ТЕМА: VIBE SHIFT (Void Noise Light)
 ========================================= */

body.vibe-shift {
/* Backgrounds - "dirty monitor" gray */
  --bg-primary: oklch(62% 0.02 265deg);
  --bg-secondary: oklch(66% 0.018 265deg);
  --bg-tertiary: oklch(70% 0.02 265deg);
  --bg-elevated: oklch(68% 0.018 265deg);
  --bg-surface: oklch(70% 0.018 265deg);
  --bg-surface-hover: oklch(75% 0.022 265deg);

  /* Текст - deep, high contrast */
  --text-primary: oklch(15% 0.02 265deg);
  --text-secondary: oklch(35% 0.018 265deg);
  --text-tertiary: oklch(48% 0.015 265deg);
  --text-muted: oklch(56.% 0.012 265deg);

  /* Accents - acid chartreuse */
  --accent-primary: oklch(72% 0.24 130deg);
  --accent-hover: oklch(78% 0.26 130deg);
  --accent-active: oklch(68% 0.22 130deg);
  --accent-on-accent: oklch(8% 0.005 265deg);

  /* Accent glow - выраженный */
  --accent-glow-sm: oklch(72% 0.24 130deg / 35%);
  --accent-glow-md: oklch(72% 0.24 130deg / 50%);
  --accent-glow-lg: oklch(72% 0.24 130deg / 65%);

  /* Эхо теги - toxic, но readable */
  --echo-anxiety: oklch(58.% 0.26 22deg);
  --echo-boredom: oklch(55.% 0.22 280deg);
  --echo-adventure: oklch(72% 0.26 130deg);
  --echo-tag-anxiety: oklch(65% 0.3 20deg);
  --echo-tag-boredom: oklch(60% 0.25 280deg);
  --echo-tag-adventure: oklch(75% 0.3 130deg);

  /* Semantic colors */
  --color-error: oklch(65% 0.28 22deg);
  --color-error-bg: oklch(62% 0.05 22deg);
  --color-error-glow: oklch(65% 0.28 22deg / 40%);
  --color-success: oklch(72% 0.26 130deg);
  --color-success-bg: oklch(62% 0.05 130deg);
  --color-warning: oklch(75% 0.24 75deg);

  /* =========================================
     ТЕНИ В СВЕТЛОМ VIBE SHIFT - жесткие, контрастные
     ========================================= */

  --shadow-xs:
    0 1px 2px oklch(15% 0.02 265deg / 30%),
    0 2px 4px oklch(15% 0.02 265deg / 20%);
  --shadow-sm:
    0 2px 4px oklch(15% 0.02 265deg / 35%),
    0 4px 10px oklch(15% 0.02 265deg / 25%),
    0 2px 20px oklch(15% 0.02 265deg / 15%);
  --shadow-md:
    0 3px 8px oklch(15% 0.02 265deg / 40%),
    0 8px 20px oklch(15% 0.02 265deg / 30%),
    0 3px 36px oklch(15% 0.02 265deg / 18%),
    0 0 0 1px oklch(85% 0.018 265deg / 40%);
  --shadow-lg:
    0 6px 16px oklch(15% 0.02 265deg / 45%),
    0 16px 40px oklch(15% 0.02 265deg / 35%),
    0 6px 64px oklch(15% 0.02 265deg / 20%),
    0 0 0 1px oklch(82% 0.022 265deg / 30%);
  --shadow-xl:
    0 12px 32px oklch(15% 0.02 265deg / 50%),
    0 32px 80px oklch(15% 0.02 265deg / 40%),
    0 12px 128px oklch(15% 0.02 265deg / 25%),
    0 0 0 1px oklch(78% 0.025 265deg / 25%);
  --shadow-inner-sm: inset 0 1px 3px oklch(15% 0.02 265deg / 25%);
  --shadow-inner-md: inset 0 2px 6px oklch(15% 0.02 265deg / 30%);
  --ao-outer: 0 1px 0 oklch(0% 0 0deg / 10%);
  --ao-inner: inset 0 1px 2px oklch(15% 0.02 265deg / 15%);

  /* =========================================
     GLOW ЭФФЕКТЫ - но на светлом фоне
     ========================================= */

  --glow-sm:
    0 0 0 1px oklch(72% 0.24 130deg / 50%),
    0 0 16px oklch(72% 0.24 130deg / 30%);
  --glow-md:
    0 0 0 2px oklch(72% 0.24 130deg / 60%),
    0 0 24px oklch(72% 0.24 130deg / 40%),
    0 0 48px oklch(72% 0.24 130deg / 20%);
  --glow-lg:
    0 0 0 3px oklch(72% 0.24 130deg / 70%),
    0 0 32px oklch(72% 0.24 130deg / 50%),
    0 0 64px oklch(72% 0.24 130deg / 30%);

  /* =========================================
     ГРАНИЦЫ В СВЕТЛОМ VIBE SHIFT
     ========================================= */
  --border-subtle: 1px solid oklch(54% 0.018 265deg);
  --border-default: 1px solid oklch(58.% 0.02 265deg);
  --border-strong: 1px solid oklch(64% 0.025 265deg);
  --border-accent: 1px solid oklch(72% 0.24 130deg / 60%);

  /* =========================================
     GLASS MORPHISM В СВЕТЛОМ VIBE SHIFT
     ========================================= */
  --glass-bg: oklch(70% 0.018 265deg / 70%);
  --glass-border: oklch(72% 0.24 130deg / 30%);
  --glass-shine: oklch(100% 0 0deg / 8%);
  --glass-shadow: inset 0 1px 2px oklch(15% 0.02 265deg / 30%), 0 8px 24px oklch(15% 0.02 265deg / 30%);
  --glass-blur: blur(8px) saturate(0.85);

  /* =========================================
     ТЕКСТУРЫ В СВЕТЛОМ VIBE SHIFT
     ========================================= */
  --texture-specular: linear-gradient(135deg, oklch(100% 0 0deg / 6%) 0%, oklch(100% 0 0deg / 2%) 50%, transparent 100%);
  --texture-scanlines: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    oklch(0% 0 0deg / 2%) 2px,
    oklch(0% 0 0deg / 2%) 4px
  );
  --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23noise)' opacity='0.06'/%3C/svg%3E");
}

/* =========================================
   ТЁМНАЯ ТЕМА (системная настройка)
   ========================================= */

@media (prefers-color-scheme: dark) {
  :root {
    /* Backgrounds - deep, warm charcoal */
    --bg-primary: oklch(21% 0.006 250deg);
    --bg-secondary: oklch(24% 0.007 250deg);
    --bg-tertiary: oklch(27% 0.008 250deg);
    --bg-elevated: oklch(25% 0.007 250deg);
    --bg-surface: oklch(26% 0.008 250deg);
    --bg-surface-hover: oklch(30% 0.01 250deg);

    /* Текст - matte, comfortable */
    --text-primary: oklch(88% 0.004 250deg);
    --text-secondary: oklch(58.% 0.008 250deg);
    --text-tertiary: oklch(42% 0.007 250deg);
    --text-muted: oklch(32% 0.006 250deg);

    /* Accents - bright slate */
    --accent-primary: oklch(72% 0.14 248deg);
    --accent-hover: oklch(78% 0.16 248deg);
    --accent-active: oklch(68% 0.12 248deg);
    --accent-on-accent: oklch(15% 0.006 250deg);

    /* Accent glow - более выраженный на темном */
    --accent-glow-sm: oklch(72% 0.14 248deg / 20%);
    --accent-glow-md: oklch(72% 0.14 248deg / 35%);
    --accent-glow-lg: oklch(72% 0.14 248deg / 50%);

    /* Эхо теги - приглушенные, но с характером */
    --echo-anxiety: oklch(72% 0.18 18deg);
    --echo-boredom: oklch(72% 0.12 248deg);
    --echo-adventure: oklch(72% 0.18 168deg);
    --echo-tag-anxiety: oklch(72% 0.18 18deg);
    --echo-tag-boredom: oklch(72% 0.12 248deg);
    --echo-tag-adventure: oklch(72% 0.18 168deg);

    /* Semantic colors - более насыщенные */
    --color-error: oklch(75% 0.24 25deg);
    --color-error-bg: oklch(25% 0.04 25deg);
    --color-error-glow: oklch(75% 0.24 25deg / 35%);
    --color-success: oklch(75% 0.18 168deg);
    --color-success-bg: oklch(25% 0.04 168deg);
    --color-warning: oklch(80% 0.20 75deg);

    /* =========================================
       ТЕНИ В ТЁМЛОЙ ТЕМЕ - цветные, многослойные
       ========================================= */

    --shadow-xs:
      0 1px 2px oklch(0% 0 0deg / 40%),
      0 1px 4px oklch(0% 0 0deg / 20%);
    --shadow-sm:
      0 1px 3px oklch(0% 0 0deg / 50%),
      0 2px 8px oklch(0% 0 0deg / 35%),
      0 1px 16px oklch(0% 0 0deg / 15%);
    --shadow-md:
      0 2px 6px oklch(0% 0 0deg / 60%),
      0 4px 20px oklch(0% 0 0deg / 45%),
      0 1px 28px oklch(0% 0 0deg / 20%),
      0 0 0 1px oklch(40% 0.008 250deg / 30%);
    --shadow-lg:
      0 4px 12px oklch(0% 0 0deg / 70%),
      0 8px 36px oklch(0% 0 0deg / 50%),
      0 2px 56px oklch(0% 0 0deg / 25%),
      0 0 0 1px oklch(35% 0.007 250deg / 20%);
    --shadow-xl:
      0 8px 24px oklch(0% 0 0deg / 80%),
      0 16px 72px oklch(0% 0 0deg / 60%),
      0 4px 112px oklch(0% 0 0deg / 30%),
      0 0 0 1px oklch(30% 0.006 250deg / 15%);
    --shadow-inner-sm: inset 0 1px 3px oklch(0% 0 0deg / 40%);
    --shadow-inner-md: inset 0 2px 6px oklch(0% 0 0deg / 50%);
    --ao-outer: 0 1px 0 oklch(100% 0 0deg / 3%);
    --ao-inner: inset 0 1px 2px oklch(0% 0 0deg / 30%);
    --glow-sm: 0 0 0 1px var(--accent-glow-sm), 0 0 16px var(--accent-glow-sm);
    --glow-md: 0 0 0 1px var(--accent-glow-md), 0 0 24px var(--accent-glow-lg), 0 0 48px var(--accent-glow-md);
    --glow-lg: 0 0 0 2px var(--accent-glow-md), 0 0 40px var(--accent-glow-lg), 0 0 80px var(--accent-glow-lg);

    /* =========================================
       ГРАНИЦЫ В ТЁМЛОЙ ТЕМЕ
       ========================================= */
    --border-subtle: 1px solid oklch(35% 0.008 250deg);
    --border-default: 1px solid oklch(40% 0.01 250deg);
    --border-strong: 1px solid oklch(48% 0.015 250deg);
    --border-accent: 1px solid oklch(72% 0.14 248deg / 50%);

    /* =========================================
       GLASS MORPHISM В ТЁМЛОЙ ТЕМЕ
       ========================================= */
    --glass-bg: oklch(26% 0.008 250deg / 70%);
    --glass-border: oklch(40% 0.01 250deg / 40%);
    --glass-shine: oklch(100% 0 0deg / 6%);
    --glass-shadow: inset 0 1px 2px oklch(100% 0 0deg / 10%), 0 8px 32px oklch(0% 0 0deg / 40%);
    --glass-blur: blur(24px) saturate(110%);

    /* =========================================
       ТЕКСТУРЫ В ТЁМЛОЙ ТЕМЕ - более выраженные
       ========================================= */
    --texture-paper: url(/assets/noise.svg);
    --texture-specular: linear-gradient(135deg, oklch(100% 0 0deg / 8%) 0%, oklch(100% 0 0deg / 2%) 50%, transparent 100%);
    --texture-scanlines: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      oklch(100% 0 0deg / 2%) 2px,
      oklch(100% 0 0deg / 2%) 4px
    );
    --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23noise)' opacity='0.05'/%3E%3C/svg%3E");
  }

  /* =========================================
     ТЁМНАЯ ТЕМА: VIBE SHIFT (Void Noise Dark)
     ========================================= */

  body.vibe-shift {
    /* Backgrounds - void black с greenish cast */
    --bg-primary: oklch(11% 0.005 265deg);
    --bg-secondary: oklch(14.% 0.006 265deg);
    --bg-tertiary: oklch(17% 0.007 265deg);
    --bg-elevated: oklch(15% 0.006 265deg);
    --bg-surface: oklch(16% 0.007 265deg);
    --bg-surface-hover: oklch(20% 0.008 265deg);

    /* Текст - cold white, high contrast */
    --text-primary: oklch(85% 0.003 165deg);
    --text-secondary: oklch(50% 0.015 165deg);
    --text-tertiary: oklch(35% 0.012 165deg);
    --text-muted: oklch(25% 0.01 165deg);

    /* Accents - TOXIC chartreuse и acid pink */
    --accent-primary: oklch(88% 0.26 130deg);
    --accent-hover: oklch(92% 0.28 130deg);
    --accent-active: oklch(85% 0.24 130deg);
    --accent-on-accent: oklch(8% 0.005 265deg);

    /* Accent glow - AGGRESSIVE */
    --accent-glow-sm: oklch(88% 0.26 130deg / 40%);
    --accent-glow-md: oklch(88% 0.26 130deg / 60%);
    --accent-glow-lg: oklch(88% 0.26 130deg / 80%);

    /* Эхо теги - TOXIC */
    --echo-anxiety: oklch(80% 0.30 22deg);
    --echo-boredom: oklch(75% 0.26 280deg);
    --echo-adventure: oklch(88% 0.30 130deg);
    --echo-tag-anxiety: oklch(80% 0.30 22deg);
    --echo-tag-boredom: oklch(75% 0.26 280deg);
    --echo-tag-adventure: oklch(88% 0.30 130deg);

    /* Semantic colors - кислотные */
    --color-error: oklch(85% 0.30 22deg);
    --color-error-bg: oklch(12% 0.08 22deg);
    --color-error-glow: oklch(85% 0.30 22deg / 60%);
    --color-success: oklch(88% 0.28 130deg);
    --color-success-bg: oklch(12% 0.08 130deg);
    --color-warning: oklch(90% 0.26 75deg);

    /* =========================================
       ТЕНИ В VIBE SHIFT - агрессивные, чёрные
       ========================================= */

    --shadow-xs:
      0 1px 3px oklch(0% 0 0deg / 90%),
      0 2px 6px oklch(0% 0 0deg / 70%);
    --shadow-sm:
      0 2px 6px oklch(0% 0 0deg / 95%),
      0 4px 14px oklch(0% 0 0deg / 80%),
      0 2px 24px oklch(0% 0 0deg / 50%);
    --shadow-md:
      0 3px 10px oklch(0% 0 0deg / 98%),
      0 8px 24px oklch(0% 0 0deg / 90%),
      0 3px 40px oklch(0% 0 0deg / 60%),
      0 0 0 1px oklch(88% 0.26 130deg / 30%);
    --shadow-lg:
      0 6px 18px oklch(0% 0 0deg / 100%),
      0 16px 48px oklch(0% 0 0deg / 95%),
      0 6px 72px oklch(0% 0 0deg / 70%),
      0 0 0 1px oklch(88% 0.26 130deg / 40%);
    --shadow-xl:
      0 12px 36px oklch(0% 0 0deg / 100%),
      0 32px 96px oklch(0% 0 0deg / 98%),
      0 12px 144px oklch(0% 0 0deg / 80%),
      0 0 0 1px oklch(88% 0.26 130deg / 50%);
    --shadow-inner-sm: inset 0 1px 4px oklch(0% 0 0deg / 70%);
    --shadow-inner-md: inset 0 2px 8px oklch(0% 0 0deg / 80%);
    --ao-outer: 0 1px 0 oklch(0% 0 0deg / 50%);
    --ao-inner: inset 0 1px 3px oklch(0% 0 0deg / 60%);

    /* =========================================
       GLOW ЭФФЕКТЫ - НЕОНОВЫЕ
       ========================================= */

    --glow-sm:
      0 0 0 1px oklch(88% 0.26 130deg / 50%),
      0 0 12px oklch(88% 0.26 130deg / 40%),
      0 0 24px oklch(88% 0.26 130deg / 20%);
    --glow-md:
      0 0 0 2px oklch(88% 0.26 130deg / 60%),
      0 0 20px oklch(88% 0.26 130deg / 50%),
      0 0 40px oklch(88% 0.26 130deg / 30%),
      0 0 80px oklch(88% 0.26 130deg / 15%);
    --glow-lg:
      0 0 0 3px oklch(88% 0.26 130deg / 70%),
      0 0 30px oklch(88% 0.26 130deg / 60%),
      0 0 60px oklch(88% 0.26 130deg / 40%),
      0 0 120px oklch(88% 0.26 130deg / 25%);

    /* =========================================
       ГРАНИЦЫ В VIBE SHIFT
       ========================================= */
    --border-subtle: 1px solid oklch(25% 0.015 265deg);
    --border-default: 1px solid oklch(30% 0.018 265deg);
    --border-strong: 1px solid oklch(38% 0.025 265deg);
    --border-accent: 1px solid oklch(88% 0.26 130deg / 70%);

    /* =========================================
       GLASS MORPHISM В VIBE SHIFT
       ========================================= */
    --glass-bg: oklch(16% 0.007 265deg / 60%);
    --glass-border: oklch(88% 0.26 130deg / 20%);
    --glass-shine: oklch(100% 0 0deg / 3%);
    --glass-shadow: inset 0 1px 3px oklch(0% 0 0deg / 80%), 0 8px 32px oklch(0% 0 0deg / 80%);
    --glass-blur: blur(4px) saturate(0.7);

    /* =========================================
       ТЕКСТУРЫ В VIBE SHIFT - агрессивные
       ========================================= */
    --texture-specular: linear-gradient(135deg, oklch(100% 0 0deg / 4%) 0%, transparent 100%);
    --texture-scanlines: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      oklch(88% 0.26 130deg / 2%) 1px,
      oklch(88% 0.26 130deg / 2%) 2px
    );

    /* CRT scanline texture */
    --texture-crt: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='crt' width='2' height='2' patternUnits='userSpaceOnUse'%3E%3Crect width='2' height='1' fill='transparent'/%3E%3Crect y='1' width='2' height='1' fill='oklch(0.88 0.26 13 0 / 0.03)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(/%23crt)'/%3E%3C/svg%3E");
    --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  }
}

/* =========================================
   SVG ФИЛЬТРЫ (скрыты, но доступны)
   ========================================= */
svg.filters-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* =========================================
   RESET
   ========================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

/* =========================================
   DOCUMENT-FLOW: юридические документы, consent, my-data, post_chat
   Класс обязателен на html И body: overflow:hidden на html иначе
   не даёт скроллиться ни одному контейнеру.
   ========================================= */
html.legal-page,
body.legal-page {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

html.legal-page {
  overscroll-behavior-y: contain;
}

/* Turbo сохраняет <html> между навигациями. :has() страхует до выполнения
   JS: если body — document-flow, html тоже обязан отдать скролл. */
html:has(body.legal-page) {
  height: auto;
  min-height: 100%;
  overflow: visible;
  overscroll-behavior-y: contain;
}

body.legal-page {
  background-attachment: scroll;
  -webkit-overflow-scrolling: touch;
}

body.legal-page .legal {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

body {
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  background-image: var(--texture-paper);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration-slow) var(--ease-out-quart), color var(--duration-normal) var(--ease-out-quart);
}

/* =========================================
   VIBE SHIFT: базовые эффекты деградации
   ========================================= */
body.vibe-shift {
  background-image: var(--texture-noise);
}

@media (prefers-color-scheme: dark) {
  body.vibe-shift {
    background-image: var(--texture-noise), var(--texture-scanlines);
  }
}

/* =========================================
   LAYOUT
   ========================================= */
.app-layout, .chat-layout, .echo-room {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 100vw;
  overflow: hidden;
  background: transparent;
}

/* =========================================
   КОНТЕЙНЕР
   ========================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-mobile);
}

@media (width >= 768px) {
  .container { padding: 0 var(--container-pad-tablet); }
}

@media (width >= 1200px) {
  .container { padding: 0 var(--container-pad-desktop); }
}

/* =========================================
   HEADER
   ========================================= */
.header {
  padding: var(--space-3) var(--container-pad-mobile);
  padding-top: calc(var(--space-3) + var(--safe-top));
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-bottom: var(--border-subtle);
  transition: background var(--duration-normal) var(--ease-out-quart), border-color var(--duration-normal) var(--ease-out-quart);
  box-shadow: var(--ao-outer);
  position: relative;
}

.header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(50% 0.02 265deg / 10%), transparent);
  pointer-events: none;
}

@media (width >= 768px) {
  .header {
    padding: var(--space-3) var(--container-pad-tablet);
    padding-top: calc(var(--space-3) + var(--safe-top));
  }
}

@media (width >= 1200px) {
  .header {
    padding: var(--space-3) var(--container-pad-desktop);
    padding-top: calc(var(--space-3) + var(--safe-top));
  }
}

.header__left {
  flex: 1;
}

.header__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--line-height-tight);
}

.header__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  position: relative;
}

body.vibe-shift .header__title {
  color: var(--accent-primary);
  text-transform: uppercase;
  font-family: var(--font-vibe);
  font-size: var(--font-size-lg);
  letter-spacing: var(--tracking-wider);
}

/* =========================================
   MAIN CONTENT
   ========================================= */
main {
  flex: 1;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
}

footer {
  flex-shrink: 0;
}

/* =========================================
   SCROLLBAR
   ========================================= */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: oklch(75% 0.015 265deg);
  border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease-out-quart);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

.vibe-shift ::-webkit-scrollbar-thumb {
  background: oklch(45% 0.02 265deg);
}

.vibe-shift ::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
  box-shadow: 0 0 6px var(--accent-glow-sm);
}

/* =========================================
   УТИЛИТЫ
   ========================================= */
.w-full { width: 100%; }
.h-full { height: 100%; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.hidden { display: none !important; }

.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }

/* =========================================
   FORM ELEMENTS
   ========================================= */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* =========================================
   LINKS
   Ссылка — «гравировка»: акцентный цвет и тонкий underline.
   В vibe-shift текст остаётся основным, аффорданс — кислотный underline.
   ========================================= */
.link {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: currentcolor;
  transition: color var(--duration-fast) var(--ease-out-quart), text-decoration-color var(--duration-fast) var(--ease-out-quart);
}

@supports (color: oklch(from red l c h)) {
  .link {
    text-decoration-color: oklch(from var(--accent-primary) l c h / 65%);
  }
}

button.link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.link:hover {
  color: var(--text-primary);
  text-decoration-color: var(--accent-primary);
}

.link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.link--quiet {
  color: var(--text-secondary);
}

.link--quiet:hover {
  color: var(--text-primary);
}

.link--external::after {
  content: '↗';
  margin-left: 2px;
  font-size: 0.8em;
  opacity: 70%;
}

body.vibe-shift .link {
  color: var(--text-primary);
}

body.vibe-shift .link:hover {
  text-decoration-color: var(--accent-primary);
}

input[type='checkbox'] {
  accent-color: var(--accent-primary);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================
   CHIP GROUP
   ========================================= */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* =========================================
   BUTTONS
   ========================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-weight: 600;
  font-size: var(--font-size-base);
  letter-spacing: var(--tracking-normal);
  transition: all var(--duration-fast) var(--ease-out-quart);
  border: none;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Specular highlight overlay */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--texture-specular);
  opacity: 0%;
  transition: opacity var(--duration-fast) var(--ease-out-quart);
  pointer-events: none;
  border-radius: inherit;
}

.btn:hover::before {
  opacity: 100%;
}

.btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.btn:active {
  transform: scale(0.96);
}

/* Primary button */
.btn--primary {
  background: var(--accent-primary);
  color: var(--accent-on-accent);
  box-shadow: var(--shadow-md);
  position: relative;
}

.btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, oklch(100% 0 0deg / 15%) 0%, oklch(100% 0 0deg / 5%) 50%, transparent 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  pointer-events: none;
}

.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow:
    0 6px 16px oklch(15% 0.018 265deg / 18%),
    0 12px 40px oklch(15% 0.018 265deg / 12%),
    0 0 0 2px var(--accent-glow-md);
}

.btn--primary:hover::before {
  opacity: 15%;
}

.btn--primary:active {
  background: var(--accent-active);
}

.btn--primary:disabled {
  opacity: 40%;
  pointer-events: none;
}

/* Ghost button */
.btn--ghost {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: var(--border-default);
  box-shadow: var(--shadow-sm);
}

.btn--ghost:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-md);
}

.btn--ghost:active {
  background: var(--bg-surface-hover);
  transform: scale(0.96);
}

/* Icon button */
.btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-out-quart);
  box-shadow: var(--shadow-xs);
}

.btn--icon:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.btn--icon img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: brightness(0); /* Черные по умолчанию */
}

.btn--icon:active {
  background: var(--bg-surface-hover);
  transform: scale(0.96);
}

/* Vibe Shift: белые иконки */
body.vibe-shift .btn--icon img {
  filter: brightness(0) invert(1);
}

/* В тёмной теме при наведении иконка снова тёмная */
@media (prefers-color-scheme: dark) {
  .btn--icon:hover img {
    filter: brightness(0);
  }

  /* Vibe Shift в тёмной теме - при наведении иконка снова тёмная */
  body.vibe-shift .btn--icon:hover img {
    filter: brightness(0) invert(1) invert(1);
  }
}

/* =========================================
   VIBE SHIFT BUTTONS
   ========================================= */
body.vibe-shift .btn {
  font-family: var(--font-vibe);
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-wider);
  border-radius: 0;
  position: relative;
}

/* Chromatic aberration glow */
body.vibe-shift .btn--primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--accent-primary);
  z-index: -1;
  filter: blur(6px);
  opacity: 50%;
  transition: opacity var(--duration-normal) var(--ease-out-quart);
}

body.vibe-shift .btn--primary:hover::before {
  opacity: 70%;
}

/* Граница — контрастный text-primary: в светлом vibe-shift кислотный фон
   почти совпадает по светлоте с поверхностью, и кнопка без границы сливается. */
body.vibe-shift .btn--primary {
  border: 1px solid var(--text-primary);
  box-shadow: var(--glow-sm);
}

body.vibe-shift .btn--primary:hover {
  box-shadow: var(--glow-md);
  animation: vibe-hover-glitch 0.3s var(--spring-md);
}

@keyframes vibe-hover-glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-1px, 0); }
  40% { transform: translate(1px, 0); }
  60% { transform: translate(-0.5px, 0); }
  80% { transform: translate(0.5px, 0); }
  100% { transform: translate(0); }
}

body.vibe-shift .btn--ghost {
  border-color: var(--border-default);
  color: var(--text-secondary);
  background: transparent;
  box-shadow: none;
}

body.vibe-shift .btn--ghost:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
  box-shadow: var(--glow-sm);
  background: transparent;
}

/* =========================================
   CHIPS
   ========================================= */
.chip {
  position: relative;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: transparent;
  border: var(--border-default);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-quart);
  box-shadow: var(--shadow-xs);
}

.chip:hover {
  border-color: var(--border-subtle);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.chip:active {
  transform: scale(0.96);
}

.chip--active {
  background: var(--accent-primary);
  color: var(--accent-on-accent);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
}

.chip--active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, oklch(100% 0 0deg / 12%) 0%, transparent 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  pointer-events: none;
}

.chip--lg {
  min-height: 44px;
  padding-inline: var(--space-4);
}

/* =========================================
   VIBE SHIFT CHIPS
   ========================================= */
body.vibe-shift .chip {
  border-radius: 0;
  border-color: var(--border-default);
  box-shadow: none;
  position: relative;
}

body.vibe-shift .chip:hover {
  box-shadow: var(--glow-sm);
  animation: chip-hover-glitch 0.2s var(--spring-sm);
}

@keyframes chip-hover-glitch {
  0% { transform: translate(0); }
  25% { transform: translate(-1px, 0); }
  50% { transform: translate(1px, 0); }
  75% { transform: translate(-0.5px, 0); }
  100% { transform: translate(0); }
}

body.vibe-shift .chip--active {
  border-color: var(--accent-primary);
  color: var(--accent-on-accent);
  box-shadow: var(--glow-md);
}

/* =========================================
   TOGGLE SWITCH
   ========================================= */
.toggle-switch {
  position: relative;
  width: 48px;
  height: 26px;
}

.toggle-switch__input {
  opacity: 0%;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-switch__label {
  position: absolute;
  inset: 0;
  background: var(--bg-surface);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out-quart);
  border: var(--border-default);
  box-shadow: var(--shadow-sm), inset 0 2px 4px oklch(0% 0 0deg / 6%);
}

.toggle-switch__label::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--text-primary);
  border-radius: 50%;
  transition: transform var(--duration-normal) var(--spring-md), box-shadow var(--duration-fast) var(--ease-out-quart);
  box-shadow: 0 2px 4px oklch(0% 0 0deg / 15%), 0 0 0 1px oklch(0% 0 0deg / 5%), inset 0 -1px 2px oklch(0% 0 0deg / 10%);

  /* Specular highlight on thumb */
  background-image: linear-gradient(180deg, oklch(100% 0 0deg / 30%) 0%, oklch(100% 0 0deg / 10%) 40%, transparent 100%);
}

.toggle-switch__label:hover::after {
  box-shadow: 0 2px 6px oklch(0% 0 0deg / 20%), 0 0 0 1px oklch(0% 0 0deg / 8%);
}

.toggle-switch__input:checked + .toggle-switch__label {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-sm), var(--glow-sm);
}

.toggle-switch__input:checked + .toggle-switch__label::after {
  transform: translateX(22px);
  background: var(--accent-on-accent);
  box-shadow: 0 2px 6px oklch(0% 0 0deg / 25%);
}

/* =========================================
   VIBE SHIFT TOGGLE SWITCH
   ========================================= */
body.vibe-shift .toggle-switch__label {
  background: var(--bg-surface);
  border-radius: 0;
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

body.vibe-shift .toggle-switch__label::after {
  border-radius: 0;
  box-shadow: 0 2px 4px oklch(0% 0 0deg / 40%);
  background-image: none;
}

body.vibe-shift .toggle-switch__label:hover::after {
  box-shadow: 0 2px 6px oklch(0% 0 0deg / 50%);
}

body.vibe-shift .toggle-switch__input:checked + .toggle-switch__label {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: var(--glow-sm);
}

body.vibe-shift .toggle-switch__input:checked + .toggle-switch__label::after {
  transform: translateX(22px);
  box-shadow: 0 2px 8px oklch(0% 0 0deg / 60%);
}

/* =========================================
   INPUTS
   ========================================= */
.input-field {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  letter-spacing: var(--tracking-normal);
  outline: none;
  transition: all var(--duration-fast) var(--ease-out-quart);
  box-shadow: var(--shadow-xs), inset 0 1px 2px oklch(0% 0 0deg / 3%);
}

.input-field::placeholder {
  color: var(--text-muted);
}

.input-field:hover {
  border-color: var(--border-subtle);
}

.input-field:focus {
  border-color: var(--accent-primary);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm), var(--glow-sm), inset 0 1px 2px oklch(100% 0 0deg / 5%);
}

.input-field--error {
  border-color: var(--color-error);
  background: var(--color-error-bg);
  box-shadow: 0 0 0 2px var(--color-error-glow);
  animation: shake 0.4s var(--spring-md);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* =========================================
   VIBE SHIFT INPUTS
   ========================================= */
body.vibe-shift .input-field {
  background: var(--bg-surface);
  border-color: var(--border-default);
  border-radius: 0;
  font-family: var(--font-vibe);
  caret-color: var(--accent-primary);
  box-shadow: var(--shadow-xs);
}

body.vibe-shift .input-field:focus {
  background: var(--bg-surface-hover);
  box-shadow: var(--glow-sm);
  animation: input-focus-glitch 0.3s var(--spring-md);
}

@keyframes input-focus-glitch {
  0% { transform: translateX(0); }
  20% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  60% { transform: translateX(-0.5px); }
  80% { transform: translateX(0.5px); }
  100% { transform: translateX(0); }
}

/* =========================================
   STATISTICS
   ========================================= */
.statistics {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: var(--border-subtle);
  box-shadow: var(--shadow-sm), inset 0 1px 2px oklch(100% 0 0deg / 60%);
}

body.vibe-shift .statistics {
  background: var(--bg-surface);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

.stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}


/* =========================================
   VIBE SHIFT: редкие случайные эффекты
   ========================================= */

.vibe-blinking {
  animation: vibe-blink 150ms ease-in-out;
}

@keyframes vibe-blink {
  0%, 100% { opacity: 100%; }
  50% { opacity: 30%; }
}

.vibe-glitching {
  animation: vibe-glitch 200ms steps(2);
}

@keyframes vibe-glitch {
  0% {
    transform: translate(0);
    text-shadow:
      1px 0 oklch(88% 0.26 130deg / 60%),
      -1px 0 oklch(85% 0.30 22deg / 50%);
  }

  50% {
    transform: translate(-2px, 0);
    text-shadow:
      2px 0 oklch(88% 0.26 130deg / 80%),
      -2px 0 oklch(85% 0.30 22deg / 70%);
  }

  100% {
    transform: translate(0);
  }
}

/* =========================================
   PWA INSTALL BANNER
   ========================================= */

.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px calc(16px + var(--safe-right));
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: slide-up 0.3s ease-out;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0%;
  }
  to {
    transform: translateY(0%);
    opacity: 100%;
  }
}

.pwa-install-banner button {
  width: 100%;
  max-width: 400px;
}