/* Flipio: токены дизайн-системы как CSS-переменные и вспомогательные классы fx-*.
   Источник — холст «Flipio — экраны MVP» (project/theme.css), 2026-11-05. */
:root {
  --surface: #ffffff; --surface-subtle: #f6f7f9; --surface-raised: #ffffff; --surface-inverse: #1a2238; --surface-brand: #2f3957;
  --ink: #1a2238; --ink-muted: #667085; --ink-faint: #858fa3; --ink-inverse: #ffffff; --ink-on-brand: #ffffff; --ink-on-navy: #ffffff; --ink-on-green: #1a2238;
  --navy: #2f3957; --navy-hover: #232b45; --navy-soft: #e9ecf4;
  --green: #81f288; --green-hover: #6ae672; --green-text: #1b7f38; --green-soft: #ecfdee;
  --border: #e4e7ec; --border-strong: #cfd4dd; --border-input: #7f8a9e; --focus-ring: #2f3957;
  --success: #146c30; --success-soft: #ecfdee; --warning: #b45309; --warning-soft: #fff4e0;
  --danger: #c4281c; --ink-on-danger: #ffffff; --danger-soft: #fef3f2; --info: #175cd3; --info-soft: #eef4ff;
  --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100; --chart-5: #e87ba4; --chart-6: #6250d6; --chart-grid: #eef0f3;
  --overlay: #1a2238b3;
  --font-display: "Manrope", "Golos Text", system-ui, -apple-system, sans-serif;
  --font-sans: "Golos Text", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --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; --space-16: 64px; --space-24: 96px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(26,34,56,0.06), 0 0 0 1px rgba(26,34,56,0.04);
  --shadow-md: 0 4px 12px rgba(26,34,56,0.08), 0 1px 3px rgba(26,34,56,0.06);
  --shadow-lg: 0 16px 40px rgba(26,34,56,0.14), 0 2px 6px rgba(26,34,56,0.06);
  /* hex density scale (sequential, built on chart-1) */
  --hex-0: #e6e9ee; --hex-1: #dbe7f8; --hex-2: #b4ccf0; --hex-3: #7facde; --hex-4: #4a86d2; --hex-5: #275fae;
  --map-ground: #f1f3f6; --map-water: #d9e6f2; --map-street: #ffffff; --map-block: #e8ebf0;
}
[data-theme="dark"] {
  --surface: #0f1526; --surface-subtle: #161d31; --surface-raised: #1d2640; --surface-inverse: #eef1f7;
  --ink: #eef1f7; --ink-muted: #9aa4bd; --ink-faint: #6b7693; --ink-inverse: #0f1526; --ink-on-navy: #0f1526;
  --navy: #aab8ea; --navy-hover: #c3cdf2; --navy-soft: #232c47; --green-hover: #9cf5a2; --green-text: #81f288; --green-soft: #15301f;
  --border: #28314a; --border-strong: #3b4663; --border-input: #66739a; --focus-ring: #81f288;
  --success: #81f288; --success-soft: #15301f; --warning: #fdb022; --warning-soft: #3a2a0a; --danger: #f97066; --ink-on-danger: #1a2238; --danger-soft: #3b1512; --info: #6fb1ff; --info-soft: #0f2447;
  --chart-grid: #222b43; --overlay: #05080fcc;
  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.4); --shadow-lg: 0 24px 48px rgba(0,0,0,0.6);
}

/* ---- app helpers (prefix fx-) ---- */
.fl.fx-dark-nav, .fl-sidebar.fx-dark-nav { background: var(--surface-brand) !important; color: var(--ink-on-brand); border-right: 0; }
.fx-dark-nav .fl-nav-item { color: rgba(255,255,255,.82); }
.fx-dark-nav .fl-nav-item:hover { background: rgba(255,255,255,.08); color: #ffffff; }
.fx-dark-nav .fl-nav-item[aria-current="page"] { background: rgba(255,255,255,.14); color: #81f288; }
.fx-dark-nav .fl-badge { background: rgba(255,255,255,.16); color: #ffffff; border-color: transparent; }
.fx-dark-nav .fl-nav-item[aria-current="page"] .fl-badge { background: #81f288; color: #1a2238; }
.fx-dark-nav .fl-btn--ghost { color: rgba(255,255,255,.82); }
.fx-dark-nav .fl-btn--ghost:hover { background: rgba(255,255,255,.1); color: #ffffff; }
.fx-dark-nav .fl-sidebar__group-title { color: rgba(255,255,255,.56); }
.fx-dark-nav .fl-sidebar__user:hover { background: rgba(255,255,255,.08); }
.fx-skel { background: linear-gradient(90deg, var(--border) 0%, var(--surface-subtle) 50%, var(--border) 100%); background-size: 200% 100%; border-radius: 6px; animation: fx-shimmer 1.4s linear infinite; }
@keyframes fx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.fx-hex { position: absolute; width: 92px; height: 106px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); display: grid; place-items: center; font: 700 16px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.fx-hex--nodata { background: repeating-linear-gradient(135deg, #eceef2 0 7px, #d9dde4 7px 9px); color: var(--ink-muted); font: 500 10px/1 var(--font-sans); }
.fx-dot { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--ink-on-navy); border: 2px solid #ffffff; display: grid; place-items: center; font: 700 12px/1 var(--font-display); box-shadow: 0 1px 3px rgba(26,34,56,.3); }
.fx-dot--cluster { width: 36px; height: 36px; font-size: 13px; background: var(--surface-brand); }
.fx-legend-swatch { width: 22px; height: 16px; border-radius: 4px; flex: none; }
.fx-overline { font: 600 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.fx-caption { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.fx-metric { font: 800 32px/36px var(--font-display); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-metric-sm { font: 700 22px/28px var(--font-display); letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-photo { background: var(--navy-soft); color: var(--navy); border-radius: var(--radius-md); display: grid; place-items: center; }
.fx-kv { display: flex; justify-content: space-between; gap: 12px; font: 400 14px/20px var(--font-sans); }
.fx-kv dt { color: var(--ink-muted); margin: 0; }
.fx-kv dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.fx-panel { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.fx-pop { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.fx-tooltip { background: var(--surface-inverse); color: var(--ink-inverse); border-radius: var(--radius-md); padding: 10px 12px; font: 400 13px/18px var(--font-sans); box-shadow: var(--shadow-lg); }
.fx-tooltip b { font-weight: 600; }
.fx-stage { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-width: 0; }
.fx-stage__bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.fx-stage__bar > span { display: block; height: 100%; border-radius: 3px; background: var(--navy); }
.fx-stage--done .fx-stage__bar > span { background: var(--green-text); }
.fx-stage--fail .fx-stage__bar > span { background: var(--danger); }
.fx-timeline { display: flex; align-items: center; gap: 0; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.fx-timeline__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--navy); flex: none; }
.fx-timeline__seg { flex: 1 1 0; height: 2px; background: var(--border-strong); position: relative; min-width: 48px; }
.fx-timeline__seg--repair { background: repeating-linear-gradient(90deg, var(--navy) 0 6px, transparent 6px 10px); }
.fx-timeline__lbl { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); white-space: nowrap; background: var(--surface-raised); padding: 0 4px; }
/* ---- mobile ---- */
.fx-phone { width: 390px; min-height: 844px; box-sizing: border-box; position: relative; overflow: hidden; background: var(--surface-subtle); font-family: var(--font-sans); color: var(--ink); display: flex; flex-direction: column; }
.fx-sheet { background: var(--surface-raised); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.fx-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 8px auto 4px; flex: none; }
.fx-mtop { height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; background: var(--surface); border-bottom: 1px solid var(--border); flex: none; }
.fx-mtop h1 { font: 700 18px/24px var(--font-display); letter-spacing: -0.01em; margin: 0; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-hscroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fx-hscroll::-webkit-scrollbar { display: none; }
.fx-hscroll > * { flex: none; }
.fx-tabbar { height: 64px; flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface-brand); color: rgba(255,255,255,.7); border-top: 1px solid rgba(255,255,255,.08); }
.fx-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 500 11px/14px var(--font-sans); color: rgba(255,255,255,.7); text-decoration: none; }
.fx-tabbar a[aria-current="page"] { color: #81f288; }
.fx-link { color: var(--navy); text-decoration: none; font-weight: 500; }
.fx-link:hover { text-decoration: underline; text-underline-offset: 3px; }