/* ЗГЕНЕРОВАНО scripts/build-cabinet.mjs з ui/styles/app.css + ui/styles/toolkit.css — не правити руками */
:root {
  --bg: #0b0b10;
  --bg-2: #111118;
  --bg-3: #14141c;
  --white-rgb: 255, 255, 255;
  --white: #fff;
  --text-rgb: 245, 245, 247;
  --glass-rgb: 11, 11, 16;
  --shadow-rgb: 0, 0, 0;
  --surface: rgba(var(--white-rgb), 0.04);
  --surface-2: rgba(var(--white-rgb), 0.07);
  --surface-3: rgba(var(--white-rgb), 0.035);
  --surface-field: rgba(var(--white-rgb), 0.02);
  --surface-4: rgba(var(--white-rgb), 0.14);
  --surface-5: rgba(var(--white-rgb), 0.22);
  --surface-solid: #2a2a30;
  --skeleton-bg: rgba(var(--white-rgb), 0.07);
  --skeleton-sheen: rgba(var(--white-rgb), 0.10);
  --surface-row: rgba(54, 54, 54, 0.5);
  --surface-row-hi: rgba(76, 76, 76, 0.55);
  --ctl-tint: rgba(54, 56, 66, 0.42);
  --ctl-tint-hi: rgba(94, 96, 108, 0.52);
  --border: rgba(var(--white-rgb), 0.08);
  --border-2: rgba(var(--white-rgb), 0.14);
  --border-strong: rgba(var(--white-rgb), 0.24);
  --border-field: rgba(var(--white-rgb), 0.045);
  --text: #f5f5f7;
  --text-bright: rgba(var(--text-rgb), 0.85);
  --text-muted: rgba(var(--text-rgb), 0.68);
  --text-muted-ink: rgb(170, 170, 173);
  --text-dim: rgba(var(--text-rgb), 0.56);
  --on-glass: var(--text);
  --on-glass-bright: rgba(var(--white-rgb), 0.85);
  --on-glass-muted: rgba(var(--white-rgb), 0.60);
  --on-glass-dim: rgba(var(--white-rgb), 0.52);
  --accent-rgb: 255, 152, 18;
  --accent: rgb(var(--accent-rgb));
  --accent-2: #ffc062;
  --accent-ring: rgba(var(--accent-rgb), 0.22);
  --accent-ink: #1a0e00;
  --rank-ink-rgb: 38, 24, 8;
  --live-rgb: 255, 59, 48;
  --live: rgb(var(--live-rgb));
  --live-text: #ff6b60;
  --live-soft: rgba(var(--live-rgb), 0.16);
  --live-line: rgba(var(--live-rgb), 0.4);
  --danger-rgb: var(--live-rgb);
  --danger-text: var(--live-text);
  --danger-line: rgba(var(--danger-rgb), 0.5);
  --poster-grad: linear-gradient(160deg, rgba(var(--accent-rgb), 0.18) 0%, var(--surface-3) 60%, var(--bg) 100%);
  --soon-rgb: 90, 138, 255;
  --soon-soft: rgba(var(--soon-rgb), 0.14);
  --soon-text: #7da6ff;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius-sm: 11px;
  --surface-card: linear-gradient(160deg, rgba(var(--white-rgb),0.06) 0%, rgba(var(--white-rgb),0.02) 100%), var(--bg);
  --surface-card-hover: linear-gradient(160deg, rgba(var(--white-rgb),0.075) 0%, rgba(var(--white-rgb),0.03) 100%), var(--bg);
  --surface-card-hover-flat: rgba(var(--white-rgb), 0.012);
  --track-h: calc(4px * var(--control-scale));
  --track-bg: rgba(var(--white-rgb),0.14);
  --scrim-0: rgba(var(--glass-rgb), 0.40);
  --scrim-1: rgba(var(--glass-rgb), 0.55);
  --scrim-2: rgba(var(--glass-rgb), 0.72);
  --scrim-3: rgba(var(--glass-rgb), 0.92);
  --glass-blur-sm: blur(20px) saturate(180%);
  --glass-blur-md: blur(32px) saturate(180%);
  --glass-blur-lg: blur(40px) saturate(160%);
  --frost-tex: url('/frost-btn.png');
  --frost-size: auto;
  --frost-amt: 0.7;
  --frost-tint: none;
  --hero-rgb: 8, 8, 12;
  --scene-warm: rgba(255, 200, 140, 0.7);
  --scene-hot: rgba(255, 80, 40, 0.5);
  --ambient-1: rgb(150, 88, 47);
  --ambient-2: rgb(70, 78, 140);
  --ambient-3: rgb(40, 110, 120);
  --ambient-1-rgb: 150, 88, 47;
  --ambient-2-rgb: 70, 78, 140;
  --ambient-3-rgb: 40, 110, 120;
  --panel-warm: radial-gradient(120% 80% at 30% 0%, rgba(var(--ambient-1-rgb), 0.12), transparent 55%),
    linear-gradient(160deg, rgba(var(--ambient-1-rgb), 0.06) 0%, rgba(var(--ambient-1-rgb), 0.02) 45%, transparent 70%);
  --panel-warm-top: radial-gradient(46% 240% at 9% 100%, rgba(var(--ambient-1-rgb), 0.10), transparent 72%);
  --topbar-warm: radial-gradient(46% 240% at 9% 100%, rgba(var(--ambient-1-rgb), 0.05), transparent 72%);
  --ui-scale: 1.5;
  --type-scale: var(--ui-scale);
  --fs-3xs: calc(10px * var(--type-scale));
  --fs-2xs: calc(12.5px * var(--type-scale));
  --fs-xs: calc(13.5px * var(--type-scale));
  --fs-sm: calc(14.5px * var(--type-scale));
  --fs-base: calc(16px   * var(--type-scale));
  --fs-md: calc(19px   * var(--type-scale));
  --fs-lg: calc(22px   * var(--type-scale));
  --fs-xl: calc(24px   * var(--type-scale));
  --fs-2xl: calc(30px   * var(--type-scale));
  --fs-3xl: calc(36px   * var(--type-scale));
  --fs-4xl: calc(44px   * var(--type-scale));
  --fs-5xl: calc(54px   * var(--type-scale));
  --fs-hero: 5vw;
  --space-scale: calc(1 + (var(--ui-scale) - 1) * 0.55);
  --control-scale: var(--ui-scale);
  --ctl-h: calc(44px * var(--control-scale));
  --ctl-h-sm: calc(38px * var(--control-scale));
  --ctl-h-lg: calc(58px * var(--control-scale));
  --ctl-h-row: calc(40px * var(--control-scale));
  --icon: calc(20px * var(--control-scale));
  --icon-sm: calc(16px * var(--control-scale));
  --icon-lg: calc(24px * var(--control-scale));
  --page-pad: calc(36px * var(--space-scale));
  --gap-item: calc(12px * var(--space-scale));
  --sidebar-w: calc(var(--sidebar-row) + calc(var(--sidebar-pad) * var(--space-scale)) * 2 + 1px);
  --sidebar-pad: 10px;
  --sidebar-row: calc(36px * var(--control-scale));
  --brand-glyph: 30px;
  --topbar-h: calc(44px * var(--control-scale));
  --ov-hero-h: 375px;
  --cat-col-w: clamp(140px, 13.5vw, 176px);
  --row-gap: calc(20px * var(--space-scale));
  --hero-bg-extend: calc(46px * var(--space-scale));
  --card-r: 12px;
  --card-w: calc(132px * var(--space-scale));
  --rank-poke: calc(-42px * var(--space-scale));
  --liquid-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.22, 1.05, 0.36, 1);
  --ease-spring: cubic-bezier(.22, 1.4, .36, 1);
  --ease-pop: cubic-bezier(.22, 1.2, .36, 1);
  --ease-out-strong: cubic-bezier(.16, 1, .3, 1);
  --ease-soft-out: cubic-bezier(.22, .61, .36, 1);
  --ui-glow-rgb: 178, 184, 200;
  --ui-glow: radial-gradient(150% 150% at 50% 50%, rgba(var(--ui-glow-rgb), 0.05) 0%, rgba(var(--ui-glow-rgb), 0) 85%),
    radial-gradient(150% 150% at 50% 50%, rgba(var(--ui-glow-rgb), 0.035) 0%, rgba(var(--ui-glow-rgb), 0) 100%),
    radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(var(--shadow-rgb), 0.12) 100%);
  --ui-glow-live: radial-gradient(100% 100% at 50% 50%, rgba(255, 138, 128, 0.30) 0%, rgba(255, 138, 128, 0) 70%);
  --ui-glow-in: opacity 300ms ease;
  --ui-glow-out: opacity 130ms ease;
  --ui-lift-delay: 500ms;
  --ui-halo: 0 calc(7px * var(--control-scale)) calc(19px * var(--control-scale)) calc(-9px * var(--control-scale)) rgba(255, 255, 255, 0.24);
  --ui-halo-hover: 0 calc(11px * var(--control-scale)) calc(26px * var(--control-scale)) calc(-9px * var(--control-scale)) rgba(255, 255, 255, 0.38);
  --glass-fill: rgba(100, 100, 100, 0.4);
  --glass-fill-frost: rgba(70, 70, 70, 0.4);
  --ui-lift: translateY(-1px);
  --ui-lift-card: -3px;
  --ui-press: scale(0.97);
  --focus-ring-w: 3px;
  --focus-ring-off: 3px;
  --shelf-slide-h: 180ms;
  --shelf-slide-v: 300ms;
  --shelf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cat-push-ms: 200ms;
  --ui-glyph-on: #fff;
  --ui-glyph-glow: none;
  --ui-glyph-glow-ic: drop-shadow(0 0 calc(1px * var(--control-scale)) rgba(var(--white-rgb), 0.38)) drop-shadow(0 0 calc(3.5px * var(--control-scale)) rgba(var(--white-rgb), 0.24));
  --ui-glyph-glow-live: none;
  --ui-glyph-glow-accent: none;
  --ui-glyph-glow-soft: none;
  --ui-glyph-on-soft: rgba(245, 245, 247, 0.76);
  --ui-glyph-rest: rgba(245, 245, 247, 0.88);
}