/* FERMORA design system.
   The only stylesheet of the Mini App: tokens, base, shell, components, sections,
   dialogs and breakpoints. Add new components here and build them from the tokens. */

@font-face {
  font-family: "Inter Variable";
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Display face of the brand (the /start cover is set in it): wordmark, page and panel titles.
   Montserrat, OFL — see fonts/LICENSE-Montserrat.txt. Latin and Cyrillic subsets only. */
@font-face {
  font-family: "Montserrat";
  src: url('/assets/fonts/Montserrat-cyrillic.woff2') format('woff2');
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  src: url('/assets/fonts/Montserrat-latin.woff2') format('woff2');
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ Tokens */
:root {
  color-scheme: light;

  /* Surfaces */
  /* Softer than pure white: long sessions in the panel tire the eyes less. */
  --bg: #ececf0;
  --bg-translucent: rgba(236, 236, 240, .84);
  --surface: #f8f8fa;
  --surface-subtle: #f2f2f5;
  --surface-hover: #efeff3;
  --surface-active: #e7e7ed;
  --surface-sunken: #e6e6ec;
  --nav-hover: #e1e1e8;

  /* Lines */
  --border: #dedee5;
  --border-subtle: #e6e6eb;
  --border-strong: #d4d4dd;
  --border-hover: #c2c2cd;

  /* Text */
  --text-primary: #16161d;
  --text-secondary: #4b4b5a;
  --text-muted: #6e6e7f;
  --text-placeholder: #868697;

  /* Accent: FERMORA / WB violet, used for actions and selection only */
  --accent: #6a42f0;
  --accent-hover: #5d35e3;
  --accent-active: #522bd1;
  --accent-soft: #f2eeff;
  --accent-soft-hover: #e9e3ff;
  --accent-border: #dcd2fd;
  --accent-text: #5530d8;

  /* Semantic */
  --success: #1c8a59;
  --success-soft: #ecf7f1;
  --success-border: #cbe8d8;
  --success-text: #146b44;
  --warning: #c27a06;
  --warning-soft: #fff7e8;
  --warning-border: #f2ddb0;
  --warning-tile: #fdebc6;
  --warning-text: #8f5400;
  --danger: #d33a4d;
  --danger-hover: #bf2f42;
  --danger-soft: #fef0f2;
  --danger-border: #f7d0d6;
  --danger-text: #b42739;
  --info: #2c6fe0;
  --info-soft: #eef4ff;
  --info-border: #d2e1fc;
  --info-text: #2356b5;

  /* Utility surfaces */
  --overlay: rgba(18, 16, 30, .4);
  --scrim: rgba(18, 16, 30, .32);
  --gutter-dim: #9a99a0;
  --modal-border: rgba(20, 20, 35, .07);
  --photo-bg: #f5f5f8;
  --map-bg: #e9e9ef;
  --star: #f2a516;
  --selection: #ded5ff;
  --skeleton-highlight: #f7f7fa;
  --danger-tile: #fcdde2;
  --info-tile: #dde9fe;
  --radio-ring: #ffffff;
  --ambient-1: rgba(118, 84, 255, .045);
  --ambient-2: rgba(70, 130, 255, .035);

  /* Shape */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-ml: 12px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(20, 20, 35, .05);
  --shadow-sm: 0 1px 2px rgba(20, 20, 35, .04), 0 2px 8px rgba(20, 20, 35, .05);
  --shadow-md: 0 2px 4px rgba(20, 20, 35, .04), 0 10px 28px rgba(20, 20, 35, .08);
  --shadow-lg: 0 8px 20px rgba(20, 20, 35, .07), 0 28px 72px rgba(20, 20, 35, .16);
  --ring: 0 0 0 3px rgba(106, 66, 240, .2);

  /* Type */
  --font: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Montserrat", var(--font);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Brand: the /start cover's violet-to-blue. Button stops keep white text above 5:1. */
  --brand-gradient: linear-gradient(95deg, var(--text-primary) 30%, #6a42f0 74%, #3d7bff);
  --premium-gradient: linear-gradient(120deg, #7a4cf5 0%, #5a37e6 48%, #2a64e0 100%);
  --premium-ring: conic-gradient(from 200deg, #8b5cff, #3d7bff, #c77dff, #8b5cff);
  --premium-glow: rgba(124, 77, 255, .42);
  --premium-text: #5530d8;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 220ms;

  /* Layout */
  --sidebar: 248px;
  --content-max: 1200px;
  --gutter: 32px;
  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
}

/* Dark theme: same tokens, tuned so every text level keeps AA contrast on the dark surfaces. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d11;
  --bg-translucent: rgba(13, 13, 17, .84);
  --surface: #16161c;
  --surface-subtle: #1a1a21;
  --surface-hover: #1e1e26;
  --surface-active: #25252e;
  --surface-sunken: #111116;
  --nav-hover: #1a1a21;
  --border: #2a2a33;
  --border-subtle: #212128;
  --border-strong: #363641;
  --border-hover: #474754;
  --text-primary: #ededf3;
  --text-secondary: #b9b9c6;
  --text-muted: #8e8e9c;
  --text-placeholder: #6b6b79;
  --accent: #7253ff;
  --accent-hover: #6646f2;
  --accent-active: #5a3be2;
  --accent-soft: #1f1a36;
  --accent-soft-hover: #272046;
  --accent-border: #3d3172;
  --accent-text: #b8a8ff;
  --success: #34c785;
  --success-soft: #0f241b;
  --success-border: #1e4633;
  --success-text: #5fd9a3;
  --warning: #f2b13e;
  --warning-soft: #251d0e;
  --warning-border: #4f3b17;
  --warning-tile: #3b2d10;
  --warning-text: #f5c463;
  --danger: #d93445;
  --danger-hover: #c52a3b;
  --danger-soft: #2a1317;
  --danger-border: #56242c;
  --danger-text: #ff8f99;
  --danger-tile: #3d1a20;
  --info: #5b9bff;
  --info-soft: #111c30;
  --info-border: #223d66;
  --info-text: #8fb9ff;
  --info-tile: #1a2b48;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .45);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, .5), 0 28px 72px rgba(0, 0, 0, .62);
  --ring: 0 0 0 3px rgba(130, 104, 255, .4);
  --overlay: rgba(3, 3, 7, .64);
  --scrim: rgba(3, 3, 7, .56);
  --gutter-dim: #050507;
  --modal-border: #2a2a33;
  --photo-bg: #ececf1;
  --map-bg: #111117;
  --star: #ffb547;
  --selection: #3b2f73;
  --skeleton-highlight: #23232c;
  --radio-ring: #16161c;
  --ambient-1: rgba(118, 84, 255, .13);
  --ambient-2: rgba(70, 130, 255, .07);
  --brand-gradient: linear-gradient(95deg, #ffffff 32%, #c9bfff 70%, #7fa8ff);
  --premium-glow: rgba(140, 100, 255, .55);
  --premium-text: #b8a8ff;
}

/* -------------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.003em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }
/* The reserved scrollbar gutter sits outside the fixed overlay; tint it to match the dimmed page. */
html:has(body.modal-open) { background: var(--gutter-dim); }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
input { min-width: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
code { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--selection); color: var(--text-primary); }
.icon { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.clipboard-field { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* A quiet, slowly moving wash: violet in the corner, a cold blue opposite. */
.ambient-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.ambient-texture {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(42% 38% at 88% 4%, var(--ambient-1), transparent 72%),
    radial-gradient(36% 34% at 4% 96%, var(--ambient-2), transparent 72%);
  animation: ambient-drift 40s ease-in-out infinite alternate;
  will-change: transform;
}
.ambient-light { display: none; }

/* ------------------------------------------------------------------- Shell */
/* No z-index here: the drawer sidebar must stack above the page scrim, which lives outside the shell. */
.app-shell { position: relative; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100dvh; }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 20px 12px 14px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  scrollbar-width: none;
}
/* Open geometric F from the reference, paired with the Montserrat wordmark. */
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 24px; }
.brand-logo { flex: none; width: 36px; height: 40px; color: var(--text-primary); overflow: visible; }
.brand-copy { display: grid; gap: 6px; min-width: 0; }
.brand-name { justify-self: start; font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: .012em; white-space: nowrap; color: var(--text-primary); }
.brand-tag { overflow: hidden; color: var(--text-muted); font-size: 9.5px; font-weight: 600; line-height: 1.2; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.brand-tag-baby { display: none; }
.sidebar-caption { margin: 0 0 6px; padding: 0 10px; color: var(--text-muted); font-size: 12px; font-weight: 500; }
.nav { display: grid; gap: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.nav-icon { display: flex; color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
.nav-icon .icon { width: 18px; height: 18px; }
.nav-item:hover { background: var(--nav-hover); color: var(--text-primary); }
.nav-item:active { background: var(--surface-active); }
.nav-item.active { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-xs); color: var(--text-primary); }
.nav-item.active .nav-icon { color: var(--accent); }
.sidebar-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.footer-label { display: none; }
.profile-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px; }
.avatar, .top-avatar {
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(140deg, #8a6cf6, #6a42f0);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.avatar { width: 34px; height: 34px; }
.avatar img, .top-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar .icon, .top-avatar .icon { width: 18px; height: 18px; }
.profile-copy { min-width: 0; }
.profile-copy strong, .profile-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#side-name { color: var(--text-primary); font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
#side-id { margin-top: 1px; color: var(--text-muted); font-size: 12px; }

.main-column { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: calc(60px + var(--safe-top));
  padding: var(--safe-top) max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter))) 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-translucent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}
.breadcrumbs { display: none; }
.mobile-menu { display: none; }
.workspace-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 420px;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.workspace-search:hover { border-color: var(--border-strong); }
.workspace-search:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.workspace-search [data-icon] { display: flex; }
.workspace-search .icon { width: 16px; height: 16px; }
.workspace-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 14px; }
.workspace-search input::placeholder { color: var(--text-placeholder); }
.top-avatar { width: 34px; height: 34px; margin-left: auto; }
.theme-toggle { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-secondary); box-shadow: var(--shadow-xs); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.theme-toggle:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text-primary); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle .icon { width: 17px; height: 17px; }
.theme-toggle + .top-avatar { margin-left: 0; }
.content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 28px var(--gutter) 64px; }
.sidebar-scrim { display: none; }

/* -------------------------------------------------------------- Typography */
.eyebrow { margin-bottom: 4px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 24px; }
.page-header > div:first-child { min-width: 0; }
.page-title { margin: 0; color: var(--text-primary); font-family: var(--display); font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.page-subtitle { max-width: 64ch; margin-top: 6px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.page-subtitle:empty { display: none; }
.page-header .back-button { margin-bottom: 6px; }
.section-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 32px 0 12px; }
.section-heading h2 { color: var(--text-primary); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.section-heading h2 small { margin-left: 6px; color: var(--text-muted); font-size: 14px; font-weight: 500; }
.section-footnote, .orders-summary-note { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.section-footnote { margin-top: 16px; }
.count-label, .list-end { color: var(--text-muted); font-size: 13px; }
.kv-label { color: var(--text-muted); font-size: 13px; }

/* ----------------------------------------------------------------- Buttons */
.button {
  --btn-h: 36px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.button .icon { width: 16px; height: 16px; }
.button:active:not(:disabled) { transform: scale(.98); }
.button.primary, .button.blue { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(64, 30, 170, .22), inset 0 1px 0 rgba(255, 255, 255, .14); }
.button.primary:hover:not(:disabled), .button.blue:hover:not(:disabled) { background: var(--accent-hover); }
.button.primary:active:not(:disabled), .button.blue:active:not(:disabled) { background: var(--accent-active); }
.button.ghost { border-color: var(--border-strong); background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.button.ghost:hover:not(:disabled) { border-color: var(--border-hover); background: var(--surface-hover); }
.button.ghost:active:not(:disabled) { background: var(--surface-active); }
.button.danger { background: var(--danger); color: #fff; box-shadow: 0 1px 2px rgba(160, 30, 50, .2); }
.button.danger:hover:not(:disabled) { background: var(--danger-hover); }
.button.danger-ghost { border-color: transparent; background: transparent; color: var(--danger-text); }
.button.danger-ghost:hover:not(:disabled) { border-color: var(--danger-border); background: var(--danger-soft); }
.button.small { --btn-h: 32px; padding: 0 12px; border-radius: var(--r-sm); font-size: 13px; }
.button.block { width: 100%; }
.button:disabled { border-color: var(--border); background: var(--surface-sunken); color: var(--text-placeholder); box-shadow: none; }
.button.ghost:disabled { background: var(--surface-subtle); }
.button.primary .mini-loader, .button.primary .spinner, .button.danger .mini-loader { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.text-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border-radius: var(--r-xs); color: var(--text-secondary); font-size: 13px; font-weight: 500; transition: color var(--dur-fast) var(--ease); }
.text-link:hover { color: var(--accent-text); }
.text-link .icon { width: 16px; height: 16px; }
.copy-phone, .modal-close, .account-arrow, .mobile-menu {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.copy-phone:hover, .modal-close:hover, .account-arrow:hover, .mobile-menu:hover { background: var(--surface-active); color: var(--text-primary); }
.copy-phone:active, .modal-close:active, .account-arrow:active { transform: scale(.94); }
.copy-phone .icon, .account-arrow .icon { width: 16px; height: 16px; }
.topbar .mobile-menu { display: none; }
.modal-close .icon { width: 18px; height: 18px; }
.copy-phone.copied { background: var(--success-soft); color: var(--success); }
.back-button { display: inline-flex; align-items: center; gap: 4px; height: 28px; margin-left: -6px; padding: 0 8px 0 4px; border-radius: var(--r-xs); color: var(--text-muted); font-size: 13px; font-weight: 500; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.back-button:hover { background: var(--surface-active); color: var(--text-primary); }
.back-button .icon { width: 16px; height: 16px; }

/* ------------------------------------------------------- Badges and status */
.badge, .status-pill, .payment-badge, .cert-badge, .install-badge, .verification-label, .wallet-title, .faq-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.badge > span { overflow: hidden; text-overflow: ellipsis; }
.badge b { font-weight: 650; font-variant-numeric: tabular-nums; }
.badge .icon, .status-pill .icon, .payment-badge .icon, .cert-badge .icon, .install-badge .icon { width: 14px; height: 14px; stroke-width: 2; }
.badge-sm { height: 20px; padding: 0 6px; font-size: 11px; }
.badge-success, .badge.paid, .status-pill.paid, .payment-badge.paid, .cert-badge-ok, .install-badge-ok { border-color: var(--success-border); background: var(--success-soft); color: var(--success-text); }
.badge-warning, .badge.pending, .status-pill.pending, .payment-badge.pending, .cert-badge-pending { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning-text); }
.badge-danger, .badge.unpaid, .status-pill.unpaid, .payment-badge.unpaid, .cert-badge-err { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger-text); }
.badge-info { border-color: var(--info-border); background: var(--info-soft); color: var(--info-text); }
.badge-accent { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-text); }
.badge-neutral { border-color: var(--border); background: var(--surface-subtle); color: var(--text-secondary); }
.badge-loading { color: var(--text-muted); }
.badge-loading .mini-loader { width: 12px; height: 12px; border-width: 1.5px; }
.connection-label { display: inline-flex; align-items: center; gap: 7px; color: var(--danger-text); font-size: 13px; font-weight: 500; white-space: nowrap; }
.connection-label i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px rgba(211, 58, 77, .14); }
.connection-label.connected { color: var(--success-text); }
.connection-label.connected i { background: var(--success); box-shadow: 0 0 0 3px rgba(28, 138, 89, .14); }
.live-indicator { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(28, 138, 89, .14); }
.meta-dot { width: 3px; height: 3px; flex: none; border-radius: 50%; background: var(--border-hover); }

/* ----------------------------------------------------------------- Notices */
.notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface); }
.notice-glyph { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--text-secondary); }
.notice-glyph .icon { width: 18px; height: 18px; }
.notice-body { flex: 1; min-width: 0; padding-top: 1px; }
.notice-title { color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.45; }
.notice-text { margin-top: 2px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.notice-text b { color: var(--text-primary); font-weight: 600; }
.notice-aside { display: grid; justify-items: end; gap: 1px; flex: none; padding: 1px 0 0 16px; margin-left: auto; border-left: 1px solid var(--warning-border); text-align: right; }
.notice-aside span { color: var(--text-muted); font-size: 12px; }
.notice-aside strong { color: var(--text-primary); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.notice-aside small { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.notice-steps { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: notice-step; }
.notice-steps li { position: relative; padding-left: 26px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; counter-increment: notice-step; }
.notice-steps li::before { content: counter(notice-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 1px solid currentColor; color: var(--text-muted); font-size: 11px; font-weight: 600; line-height: 1; }
.notice-warning { border-color: var(--warning-border); background: var(--warning-soft); }
.notice-warning .notice-glyph { background: var(--warning-tile); color: var(--warning-text); }
.notice-warning .notice-steps li::before { color: var(--warning-text); border-color: var(--warning-border); }
.notice-danger { border-color: var(--danger-border); background: var(--danger-soft); }
.notice-danger .notice-glyph { background: var(--danger-tile); color: var(--danger-text); }
.notice-info { border-color: var(--info-border); background: var(--info-soft); }
.notice-info .notice-glyph { background: var(--info-tile); color: var(--info-text); }
.notice-info .notice-aside { border-color: var(--info-border); }

/* ------------------------------------------------------------------- Cards */
.panel, .stat-card, .account-card, .order-card, .payment-card, .notification-card, .point-card,
.cert-card, .pickup-card, .empty-panel, .session-setting, .settings-entry, .install-hero,
.faq-preview, .order-totals, .metric-strip {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.empty-panel { display: flex; flex-direction: column; align-items: center; padding: 40px 24px; text-align: center; }
.empty-panel.compact { padding: 36px 24px; }
.empty-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text-muted); }
.empty-icon .icon { width: 20px; height: 20px; }
.empty-panel h3 { color: var(--text-primary); font-size: 15px; font-weight: 600; }
.empty-panel p { max-width: 46ch; margin-top: 4px; color: var(--text-muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.empty-panel .button { margin-top: 18px; }
:is(.account-list, .order-grid, .cert-grid, .payment-grid, .pickup-grid) > .empty-panel { grid-column: 1 / -1; }

/* Metrics: one bordered strip split into equal cells. */
.metric-strip, .order-totals { display: grid; grid-template-columns: repeat(var(--cells, 3), minmax(0, 1fr)); overflow: hidden; }
.metric-strip > div, .order-totals > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 20px; }
.metric-strip > div + div, .order-totals > div + div { border-left: 1px solid var(--border-subtle); }
.metric-strip span, .order-totals span { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.metric-strip strong, .order-totals strong { color: var(--text-primary); font-size: 22px; font-weight: 650; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-strip small, .order-totals small { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.metric-strip .is-success strong, .order-totals .summary-paid strong { color: var(--success-text); }
.metric-strip .is-danger strong, .order-totals .summary-unpaid strong { color: var(--danger-text); }
.metric-strip .is-warning strong { color: var(--warning-text); }
.metric-strip .is-zero strong { color: var(--text-placeholder); }

/* -------------------------------------------------------------------- Home */
.home-hero { align-items: center; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat-card { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 16px 18px; }
.stat-label { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.stat-label .icon { width: 16px; height: 16px; }
.stat-value { margin-top: 6px; color: var(--text-primary); font-size: 28px; font-weight: 650; line-height: 1.15; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.stat-note { color: var(--text-muted); font-size: 13px; }
.stat-card.is-warning .stat-label .icon { color: var(--warning); }
.stat-card.is-warning .stat-value { color: var(--warning-text); }
.stat-card.is-ok .stat-label .icon { color: var(--success); }
.stat-card.is-pending .stat-value { color: var(--text-placeholder); }
.faq-preview { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding: 16px 18px; }
.faq-preview-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.faq-symbol { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text-muted); }
.faq-symbol .icon { width: 18px; height: 18px; }
.faq-preview h2 { color: var(--text-primary); font-size: 15px; font-weight: 600; }
.faq-preview p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
/* Home dashboard */
.home-metrics { --cells: 3; }
.home-metrics span .icon { width: 15px; height: 15px; color: var(--text-muted); }
.home-metrics strong em { margin-left: 1px; color: var(--text-muted); font-size: .7em; font-style: normal; font-weight: 500; }
.home-metrics small { display: block; height: auto; padding: 0; overflow: hidden; background: none; color: var(--text-muted); font-size: 12px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.home-metrics .is-success span .icon { color: var(--success); }
.home-metrics .is-warning span .icon { color: var(--warning); }
.home-metrics .is-danger span .icon { color: var(--danger); }
.meter { position: relative; display: block; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 4px; background: var(--surface-sunken); }
.meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); border-radius: inherit; background: var(--success); transition: width var(--dur-slow) var(--ease); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: stretch; }
.home-card { min-width: 0; padding: 16px 18px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.home-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; margin-bottom: 12px; }
.home-card-head h2 { color: var(--text-primary); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.home-card-head > .icon { width: 18px; height: 18px; color: var(--text-muted); }
.count-pill { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--warning-soft); color: var(--warning-text); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.count-pill:empty { display: none; }
.attention-list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.attention-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.attention-item:first-child { padding-top: 2px; border-top: 0; }
.attention-item:last-child { padding-bottom: 0; }
.attention-glyph { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text-muted); }
.attention-glyph .icon { width: 18px; height: 18px; }
.attention-glyph.tone-warning { background: var(--warning-soft); color: var(--warning); }
.attention-glyph.tone-danger { background: var(--danger-soft); color: var(--danger-text); }
.attention-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.attention-copy strong { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.attention-copy strong small { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.attention-copy > span { color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.attention-item .button { flex: none; }
.attention-item.is-pending .attention-glyph { background: var(--accent-soft); }
.home-empty { display: flex; align-items: center; gap: 12px; padding: 4px 0 2px; }
.home-empty > .icon { flex: none; width: 36px; height: 36px; padding: 9px; border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text-muted); }
.home-empty.is-ok > .icon { background: var(--success-soft); color: var(--success); }
.home-empty > div { flex: 1; min-width: 0; }
.home-empty strong { display: block; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.home-empty p { margin-top: 2px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.home-empty .button { flex: none; }
.limit-caption { color: var(--text-muted); font-size: 13px; }
.limit-total { display: block; margin: 2px 0 12px; color: var(--text-primary); font-size: 28px; font-weight: 650; line-height: 1.2; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.limit-list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 4px 0 0; border-top: 1px solid var(--border-subtle); list-style: none; }
.limit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: calc(100% + 16px); min-height: 40px; margin: 0 -8px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--text-secondary); font-size: 13px; text-align: left; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.limit-row:hover { background: var(--surface-hover); color: var(--text-primary); }
.limit-row > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.limit-row > .badge { flex: 0 1 auto; min-width: 0; }
.home-accounts .section-heading { margin-top: 28px; }

/* ---------------------------------------------------------------- Accounts */
.toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 440px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.search:hover { border-color: var(--border-hover); }
.search:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.search .icon { width: 16px; height: 16px; }
.search input { width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--text-primary); font-size: 14px; }
.search input::placeholder { color: var(--text-placeholder); }
.account-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; align-items: stretch; }
.account-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.account-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.account-card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 2px; }
.account-open { display: flex; align-items: center; gap: 12px; min-width: 0; border-radius: var(--r-sm); text-align: left; }
.account-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }
.account-icon .icon { width: 20px; height: 20px; }
.account-body { display: grid; gap: 2px; min-width: 0; }
.account-body strong { overflow: hidden; color: var(--text-primary); font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; transition: color var(--dur-fast) var(--ease); }
.account-body > span { overflow: hidden; color: var(--text-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.account-open:hover .account-body strong { color: var(--accent-text); }
.account-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; min-height: 20px; }
.client-name { min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.account-installment { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-subtle); }

/* ------------------------------------------------- Account context and tabs */
.account-context { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; margin-bottom: 14px; color: var(--text-muted); font-size: 13px; }
.context-divider { color: var(--border-hover); }
.account-context > strong { color: var(--text-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.account-context .connection-label { margin-left: 4px; font-size: 12px; }
.account-tabs { position: relative; display: flex; gap: 2px; margin: 0 0 28px; border-bottom: 1px solid var(--border); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.account-tabs::-webkit-scrollbar { display: none; }
.account-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 40px;
  padding: 0 10px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.account-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background-color var(--dur) var(--ease); }
.account-tab:hover { color: var(--text-primary); }
.account-tab:hover::after { background: var(--border-strong); }
.account-tab.active { color: var(--text-primary); }
.account-tab.active::after { background: var(--accent); }
.account-tab:focus-visible { outline-offset: -2px; border-radius: var(--r-xs); }

/* ---------------------------------------------- Loading, spinners, skeletons */
.section-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; padding: 48px 24px; text-align: center; }
.section-loading .orbital-loader { position: relative; width: 40px; height: 40px; margin: 0 auto; }
.section-loading .orbital-dot { position: absolute; width: 8px; height: 8px; left: 16px; top: 2px; }
.section-loading .orbital-dot:nth-child(2) { left: 4px; top: 23px; }
.section-loading .orbital-dot:nth-child(3) { left: 28px; top: 23px; }
.section-loading .orbital-dot i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--accent); box-shadow: none; }
.section-loading .orbital-dot:nth-child(2) i { opacity: .55; }
.section-loading .orbital-dot:nth-child(3) i { opacity: .3; }
.section-loading h2 { margin-top: 18px; color: var(--text-primary); font-size: 15px; font-weight: 600; }
.section-loading p { margin-top: 4px; color: var(--text-muted); font-size: 13px; }
.loading-panel { display: flex; align-items: center; gap: 10px; padding: 24px 0; color: var(--text-muted); font-size: 13px; }
.spinner, .mini-loader { display: inline-block; flex: none; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.small-spinner, .mini-loader { width: 14px; height: 14px; }
.summary-placeholder { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 140px; margin-top: 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-ml); color: var(--text-muted); font-size: 13px; }
.progress-box { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface-subtle); }
.progress-box strong { display: block; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.progress-box small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.skel-dot, .skel-line { background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--skeleton-highlight) 50%, var(--surface-sunken) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }

/* ------------------------------------------------------------------ Orders */
.orders-summary-note { margin: 10px 0 0; }
.orders-refresh { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: var(--r-sm); color: var(--text-muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.orders-refresh:hover:not(:disabled) { background: var(--surface-active); color: var(--text-primary); }
.orders-refresh:disabled { cursor: default; }
.orders-refresh > .icon { width: 14px; height: 14px; }
.orders-refresh[data-status=loading] > .icon { animation: spin .9s linear infinite; }
.orders-refresh[data-status=error] { color: var(--danger-text); }
.orders-refresh[data-status=error] .live-indicator { background: var(--danger); box-shadow: 0 0 0 3px rgba(211, 58, 77, .14); }
.order-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; align-items: stretch; margin-top: 20px; }
.order-card {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* buttons default to flex-start in Chromium, which would collapse the photo */
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.order-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.product-photo { position: relative; display: grid; place-items: center; flex: none; aspect-ratio: 1; margin: 8px 8px 0; overflow: hidden; border-radius: var(--r-md); background: var(--photo-bg); }
.product-photo img { position: absolute; inset: 10px; display: block; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
.photo-fallback { display: grid; justify-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; }
.photo-fallback .icon { width: 28px; height: 28px; }
.order-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 12px 14px 14px; }
.order-status { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; max-width: 100%; height: 24px; padding: 0 8px; border-radius: var(--r-xs); background: var(--surface-sunken); color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.order-status > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.order-status .icon { width: 14px; height: 14px; }
.order-status[data-tone=ready] { background: var(--success-soft); color: var(--success-text); }
.order-status[data-tone=problem] { background: var(--danger-soft); color: var(--danger-text); }
.order-price-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 6px; }
.product-price { color: var(--text-primary); font-size: 20px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.product-name { display: -webkit-box; min-height: 2.8em; overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 500; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-brand { margin: 2px 0 14px; overflow: hidden; color: var(--text-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.order-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: auto 0 0; padding: 10px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.order-dates > div { display: grid; gap: 2px; min-width: 0; }
.order-dates dt { color: var(--text-muted); font-size: 12px; }
.order-dates dd { overflow: hidden; color: var(--text-primary); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.order-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; color: var(--text-muted); font-size: 12px; }
.order-card-bottom > span:last-child { display: inline-flex; align-items: center; gap: 2px; color: var(--text-secondary); font-weight: 500; transition: color var(--dur-fast) var(--ease); }
.order-card:hover .order-card-bottom > span:last-child { color: var(--accent-text); }
.order-card-bottom .icon { width: 14px; height: 14px; }
.product-article { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Payments */
.payment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.payment-card { display: flex; flex-direction: column; min-width: 0; padding: 20px; }
.payment-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.bank-logo, .wallet-icon { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text-muted); }
.bank-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.wallet-icon { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-text); }
.payment-card h3 { color: var(--text-primary); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.payment-kind { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.payment-number { display: block; margin: 18px 0 20px; color: var(--text-primary); font-size: 20px; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.payment-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 12px; }
.system-label { color: var(--text-secondary); font-weight: 600; letter-spacing: .03em; }
.wallet-balance { display: grid; gap: 2px; margin: 16px 0 20px; }
.wallet-balance > span { color: var(--text-muted); font-size: 12px; }
.wallet-balance > strong { color: var(--text-primary); font-size: 24px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ Notifications and sessions */
.notification-list { display: grid; gap: 8px; }
.notification-card { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 16px; }
.notice-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text-muted); }
.notice-icon .icon { width: 18px; height: 18px; }
.notice-icon.unread { background: var(--accent-soft); color: var(--accent-text); }
.notice-copy { flex: 1; min-width: 0; }
.notice-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.notice-heading h3 { min-width: 0; color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.45; }
.notice-heading time { flex: none; color: var(--text-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.notice-copy > p { margin-top: 3px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.notification-card:not(.session-card):has(.notice-icon.unread) .notice-heading h3::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 2px 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.notification-card:not(.session-card):not(:has(.notice-icon.unread)) .notice-heading h3 { font-weight: 500; }
.load-more { display: flex; justify-content: center; padding-top: 16px; }
.session-setting { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; padding: 16px; }
.setting-copy { flex: 1; min-width: 0; }
.setting-copy h3 { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.setting-copy p { margin-top: 2px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.toggle-control { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--text-secondary); font-size: 13px; cursor: pointer; }
.toggle-control input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; border-radius: 999px; background: var(--border-strong); cursor: pointer; transition: background-color var(--dur) var(--ease); }
.toggle-control input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 20, 35, .25); transition: transform var(--dur) var(--ease); }
.toggle-control input:checked { background: var(--accent); }
.toggle-control input:checked::before { transform: translateX(16px); }
.toggle-control input:hover:not(:checked) { background: var(--border-hover); }
.session-card .notice-heading h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.session-card > .button { align-self: center; flex: none; }
.session-details { margin-top: 8px; color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.session-details summary { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-weight: 500; cursor: pointer; list-style: none; border-radius: var(--r-xs); }
.session-details summary::-webkit-details-marker { display: none; }
.session-details summary::before { content: ""; width: 0; height: 0; border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; transition: transform var(--dur-fast) var(--ease); }
.session-details[open] summary::before { transform: rotate(90deg); }
.session-details summary:hover { color: var(--accent-text); }
.session-details p { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface-subtle); color: var(--text-secondary); font-size: 12px; line-height: 1.6; }

/* ------------------------------------------------------------ Installments */
.install-hero { max-width: 760px; padding: 24px; }
.install-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
.install-amount-wrap { display: flex; flex-direction: column; gap: 4px; }
.install-amount-wrap small { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.install-amount { color: var(--text-primary); font-size: 36px; font-weight: 650; line-height: 1.15; letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.install-amount span { margin-left: 2px; color: var(--text-muted); font-size: .6em; font-weight: 500; }
.install-badge { height: 28px; padding: 0 10px; font-size: 13px; }
.install-explain { max-width: 62ch; margin-top: 16px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.install-hero .notice { margin-top: 18px; }

/* ------------------------------------------------------------ Certificates */
.cert-summary { --cells: 4; margin-bottom: 4px; }
.fraud-lock-banner { margin-bottom: 16px; }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cert-card { display: flex; flex-direction: column; min-width: 0; padding: 16px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cert-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.cert-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.cert-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }
.cert-icon .icon { width: 18px; height: 18px; }
.cert-amount { color: var(--text-primary); font-size: 26px; font-weight: 650; line-height: 1.15; letter-spacing: -.024em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cert-amount small { margin-left: 2px; color: var(--text-muted); font-size: .62em; font-weight: 500; }
.cert-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--text-muted); font-size: 13px; }
.cert-meta time { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Pickup QR */
.pickup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; }
.pickup-card { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 16px; text-align: center; }
.pickup-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; align-self: stretch; min-height: 24px; margin-bottom: 14px; text-align: left; }
.pickup-heading h3 { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.pickup-card img { display: block; width: 148px; height: 148px; margin: 0 auto 14px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: #fff; }
.pickup-code { color: var(--text-primary); font-size: 22px; font-weight: 650; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.pickup-card > small { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.pickup-modal-code { padding: 16px 0 4px; text-align: center; }
.pickup-modal-code .pickup-code { font-size: 28px; }
.pickup-modal-code small { color: var(--text-muted); font-size: 13px; }
.pickup-modal-image { padding: 12px 0 0; text-align: center; }
.pickup-modal-image img { display: block; width: min(232px, 100%); height: auto; aspect-ratio: 1; margin: auto; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-ml); background: #fff; }

/* --------------------------------------------------------------- Addresses */
.address-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.address-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; flex: none; width: 240px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-sunken); }
.address-switch button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 7px; color: var(--text-muted); font-size: 13px; font-weight: 500; transition: color var(--dur-fast) var(--ease); }
.address-switch button:hover { color: var(--text-primary); }
.address-switch button[aria-selected=true] { color: var(--text-primary); }
.address-switch button .icon { width: 16px; height: 16px; }
.switch-indicator { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--dur-slow) var(--ease); }
.address-switch.courier .switch-indicator { transform: translateX(100%); }
.point-list { display: grid; gap: 8px; }
.point-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px; }
.point-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text-muted); }
.point-icon .icon { width: 18px; height: 18px; }
.point-card > div { flex: 1; min-width: 0; }
.point-card h3 { color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.point-card p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.point-card { position: relative; padding-right: 40px; }
.point-card:has(.button) { padding-right: 44px; }
.point-remove { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--text-placeholder); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.point-remove::after { content: ""; position: absolute; inset: -8px; }
.point-remove .icon { width: 14px; height: 14px; }
.point-remove:hover { background: var(--danger-soft); color: var(--danger-text); }
.point-card.confirming { border-color: var(--danger-border); }
.point-card.confirming .point-remove { visibility: hidden; }
.point-confirm { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 12px 0 16px; border-radius: inherit; background: color-mix(in srgb, var(--surface) 97%, transparent); backdrop-filter: blur(6px); animation: fade-in var(--dur) var(--ease); }
.point-confirm span { margin-right: auto; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.point-card.removing { opacity: .55; pointer-events: none; }

/* ----------------------------------------------------------------- Proxies */

/* ---------------------------------------------------------------- Settings */
.settings-entry { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 640px; padding: 16px; text-align: left; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.settings-entry:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.settings-entry > span:nth-child(2) { flex: 1; min-width: 0; }
.settings-entry strong { display: block; color: var(--text-primary); font-size: 15px; font-weight: 600; }
.settings-entry small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.settings-entry > .icon { width: 16px; height: 16px; color: var(--text-placeholder); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.settings-section { max-width: 760px; }
.settings-section + .settings-section { margin-top: 28px; }
.settings-section > h2 { margin-bottom: 10px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.settings-section .settings-entry { max-width: none; }
.settings-static { flex-wrap: wrap; cursor: default; }
.settings-static:hover { border-color: var(--border); box-shadow: var(--shadow-xs); }
.theme-choices { display: inline-grid; grid-auto-flow: column; gap: 2px; flex: none; padding: 3px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--surface-sunken); }
.theme-choice { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 7px; color: var(--text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.theme-choice .icon { width: 15px; height: 15px; }
.theme-choice:hover { color: var(--text-primary); }
.theme-choice[aria-pressed="true"] { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.theme-choice[aria-pressed="true"] .icon { color: var(--accent-text); }
.settings-entry:hover > .icon { color: var(--text-secondary); transform: translateX(2px); }
.tool-symbol { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--tool-bg, var(--surface-sunken)); color: var(--tool-fg, var(--text-secondary)); }
.tool-symbol .icon { width: 18px; height: 18px; }

/* ----------------------------------------------------------------- Dialogs */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
  overflow-y: auto;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: overlay-in var(--dur) var(--ease) both;
}
.modal {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100dvh - 48px - var(--safe-top) - var(--safe-bottom));
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--modal-border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  animation: dialog-in var(--dur-slow) var(--ease) both;
}
.modal.no-enter { animation: none; }
.modal:focus-visible { outline: none; }
.modal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-symbol { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); font-size: 18px; font-weight: 600; }
.modal-symbol .icon { width: 20px; height: 20px; }
.modal-symbol.danger { background: var(--danger-soft); color: var(--danger-text); }
.modal-top .modal-close { margin: -4px -8px 0 0; }
.modal h2 { color: var(--text-primary); font-size: 20px; font-weight: 650; line-height: 1.3; letter-spacing: -.018em; }
.modal > p, .modal-sub { margin-top: 6px; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.modal-sub + .modal-sub { margin-top: 10px; }
.modal-sub code { padding: 1px 5px; border-radius: 5px; background: var(--surface-sunken); color: var(--text-primary); }
.window-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin: -4px -8px 16px 0; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.window-bar .back-button { margin-left: -8px; }
.modal-actions { display: flex; gap: 8px; margin-top: 24px; }
.modal-actions .button { --btn-h: 40px; flex: 1; min-width: 0; white-space: normal; line-height: 1.2; }

/* Forms */
.field { display: block; margin: 0 0 6px; color: var(--text-primary); font-size: 13px; font-weight: 500; }
form > .field:not(:first-child), .modal form > .field { margin-top: 16px; }
.modal form > .field:first-child { margin-top: 20px; }
.input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 14px;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:hover:not(:focus):not(:disabled) { border-color: var(--border-hover); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.input::placeholder { color: var(--text-placeholder); }
.input:disabled { background: var(--surface-subtle); color: var(--text-muted); cursor: not-allowed; }
#code-input, #trust-code-input, #session-code-input { font-size: 18px; font-weight: 500; letter-spacing: .24em; font-variant-numeric: tabular-nums; }
#code-input::placeholder, #trust-code-input::placeholder { letter-spacing: .2em; }
.helper { margin-top: 8px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.form-error { margin-top: 10px; color: var(--danger-text); font-size: 13px; line-height: 1.5; }
.form-error:empty { display: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-top: 16px; }
.form-grid .field { margin-top: 0; }
.step-line { display: flex; gap: 6px; margin: 18px 0 2px; }
.step-line span { flex: 1; height: 3px; border-radius: 3px; background: var(--surface-sunken); transition: background-color var(--dur) var(--ease); }
.step-line span.active { background: var(--accent); }
.resend-area { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; color: var(--text-muted); font-size: 13px; }
.resend-button { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.resend-button:hover:not(:disabled) { background: var(--accent-soft-hover); }
.resend-button:disabled { background: transparent; color: var(--text-muted); cursor: default; }

/* Account window */
.account-window { width: min(720px, 100%); }
.account-window-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.account-emblem { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-ml); background: var(--accent-soft); color: var(--accent-text); }
.account-emblem .icon { width: 24px; height: 24px; }
.account-heading { flex: 1; min-width: 0; }
.account-phone-heading { display: flex; align-items: center; gap: 6px; min-width: 0; }
.account-phone-heading h1 { overflow: hidden; color: var(--text-primary); font-size: 24px; font-weight: 650; line-height: 1.2; letter-spacing: -.02em; white-space: nowrap; text-overflow: ellipsis; }
.account-client-name { margin-top: 4px; color: var(--text-primary); font-size: 15px; font-weight: 500; }
.account-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; color: var(--text-muted); font-size: 13px; }
.account-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.account-tool {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-ml);
  background: var(--surface);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.account-tool:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.account-tool:active { transform: scale(.99); background: var(--surface-active); }
.account-tool > span:nth-child(2) { display: grid; gap: 1px; flex: 1; min-width: 0; }
.account-tool strong { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.account-tool small { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.account-tool > .icon { width: 16px; height: 16px; color: var(--text-placeholder); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.account-tool:hover > .icon { color: var(--text-secondary); transform: translateX(2px); }
[data-page=orders] { --tool-bg: #eaf1ff; --tool-fg: #2a5fc4; }
[data-page=installments] { --tool-bg: #fdf3e2; --tool-fg: #9c5d06; }
[data-page=pickup-code] { --tool-bg: #f1edff; --tool-fg: #5530d8; }
[data-page=payments] { --tool-bg: #e8f5ee; --tool-fg: #17704a; }
[data-page=certificates] { --tool-bg: #fcecf4; --tool-fg: #a8336a; }
[data-page=notifications] { --tool-bg: #fdefe6; --tool-fg: #a8501d; }
[data-page=points] { --tool-bg: #e6f4f6; --tool-fg: #176f80; }
[data-page=sessions] { --tool-bg: #eef0f5; --tool-fg: #475066; }
[data-page=proxies] { --tool-bg: #eef0f5; --tool-fg: #475066; }
[data-theme="dark"] [data-page=orders] { --tool-bg: #15233d; --tool-fg: #7fa8ff; }
[data-theme="dark"] [data-page=installments] { --tool-bg: #2a2010; --tool-fg: #f0b450; }
[data-theme="dark"] [data-page=pickup-code] { --tool-bg: #211b3d; --tool-fg: #ad9cff; }
[data-theme="dark"] [data-page=payments] { --tool-bg: #102619; --tool-fg: #5fd39c; }
[data-theme="dark"] [data-page=certificates] { --tool-bg: #2c1323; --tool-fg: #f08cc0; }
[data-theme="dark"] [data-page=notifications] { --tool-bg: #2c1a10; --tool-fg: #f2a070; }
[data-theme="dark"] [data-page=points] { --tool-bg: #0f2529; --tool-fg: #5ccbd9; }
[data-theme="dark"] [data-page=sessions], [data-theme="dark"] [data-page=proxies] { --tool-bg: #1e212b; --tool-fg: #a7afc4; }
.account-device { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-ml); background: var(--surface-subtle); }
.device-symbol { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-secondary); }
.device-symbol .icon { width: 18px; height: 18px; }
.account-device > div { display: grid; gap: 1px; flex: 1; min-width: 0; }
.account-device small { color: var(--text-muted); font-size: 12px; }
.account-device strong { overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.account-device div > span { color: var(--text-muted); font-size: 12px; }
.account-window-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 13px; }
.account-window-footer .button { margin-right: -8px; }

/* Device picker */
.device-window { display: flex; flex-direction: column; width: min(520px, 100%); overflow: hidden; }
.device-window > .window-bar, .device-heading { flex: none; }
.device-heading { margin-bottom: 16px; }
.device-heading .device-symbol { margin-bottom: 12px; border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-text); }
.device-heading p { margin-top: 4px; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.device-window > h2 { margin-bottom: 4px; }
#device-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.device-scroll { flex: 1 1 auto; min-height: 0; margin: -3px; padding: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.device-options { display: grid; gap: 8px; }
.device-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-ml);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.device-option:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.device-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.device-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.device-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.device-option-icon { display: flex; color: var(--text-muted); }
.device-option:has(input:checked) .device-option-icon { color: var(--accent-text); }
.device-option > span:nth-of-type(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.device-option strong { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.device-option small { color: var(--text-muted); font-size: 12px; }
.radio-mark { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.device-option input:checked ~ .radio-mark { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3.5px var(--radio-ring); }
#device-more { flex: none; padding-top: 12px; text-align: center; }
#device-more:empty { display: none; }
#device-form > .form-error { flex: none; }
#device-form > .modal-actions { flex: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }

/* Order detail */
.order-window { width: min(800px, 100%); }
.order-detail { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
.order-detail-photo { width: 100%; margin: 0; border-radius: var(--r-lg); }
.order-detail-photo img { inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
.order-detail-copy { min-width: 0; }
.detail-kicker { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.order-detail-copy h2 { font-size: 20px; line-height: 1.35; }
.order-state-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; }
.order-detail-price { display: block; margin-bottom: 16px; color: var(--text-primary); font-size: 28px; font-weight: 650; letter-spacing: -.022em; font-variant-numeric: tabular-nums; }
.order-detail-copy .notice { margin-bottom: 16px; }
.detail-facts { display: grid; border-top: 1px solid var(--border-subtle); }
.detail-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 14px; }
.detail-facts dt { flex: none; color: var(--text-muted); }
.detail-facts dd { color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; }
.order-detail-copy .modal-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
.order-live-note { display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 13px; }

/* Address dialogs */
.address-window, .courier-window { width: min(600px, 100%); }
.address-search-row { display: flex; align-items: stretch; gap: 8px; }
.address-search-row .input { flex: 1; min-width: 0; }
.address-search-row .button { --btn-h: 40px; flex: none; }
.address-options { display: grid; gap: 8px; max-height: 330px; margin-top: 16px; padding: 2px; overflow-y: auto; overscroll-behavior: contain; }
.address-options:empty { display: none; }
.pickup-option, .courier-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface); text-align: left; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.pickup-option:hover, .courier-option:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.pickup-option .point-icon { width: 32px; height: 32px; }
.pickup-option > span:nth-child(2) { flex: 1; min-width: 0; color: var(--text-primary); font-size: 14px; line-height: 1.45; }
.pickup-option small { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--accent-text); font-size: 13px; font-weight: 500; }
.pickup-option small .icon { width: 14px; height: 14px; }
.courier-option { cursor: pointer; font-size: 14px; line-height: 1.45; }
.courier-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.courier-option input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.address-searching { display: flex; align-items: center; gap: 10px; padding: 14px 2px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
#pickup-more { margin-top: 12px; }
#pickup-more:empty { display: none; }
#pickup-more .button { width: 100%; }
.address-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.address-details label { display: grid; gap: 6px; color: var(--text-primary); font-size: 13px; font-weight: 500; }
.address-autocomplete { position: relative; }
.address-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; display: flex; flex-direction: column; gap: 2px; max-height: 280px; padding: 4px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface); box-shadow: var(--shadow-md); animation: pop-in var(--dur) var(--ease) both; }
.address-suggest-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 10px; border-radius: var(--r-sm); text-align: left; transition: background-color var(--dur-fast) var(--ease); }
.address-suggest-item:hover, .address-suggest-item:focus-visible { background: var(--surface-active); outline: none; }
.address-suggest-item strong { color: var(--text-primary); font-size: 14px; font-weight: 500; line-height: 1.35; }
.address-suggest-item small { color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.address-suggest-item.loading, .address-suggest-item.empty { flex-direction: row; align-items: center; gap: 8px; padding: 12px; color: var(--text-muted); font-size: 13px; pointer-events: none; }
.address-picked { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--success-border); border-radius: var(--r-ml); background: var(--success-soft); animation: pop-in var(--dur) var(--ease) both; }
.address-picked .picked-row { display: grid; gap: 1px; flex: 1; min-width: 0; }
.address-picked strong { color: var(--success-text); font-size: 14px; font-weight: 600; }
.address-picked small { color: var(--text-secondary); font-size: 13px; }

/* Pickup point picker: search and list on the left, a pitched 3D map on the right. */
.modal.pvz-window { display: flex; flex-direction: column; width: min(1180px, 100%); height: min(800px, calc(100dvh - 48px - var(--safe-top) - var(--safe-bottom))); max-height: none; padding: 0; overflow: hidden; }
.pvz-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--border-subtle); }
.pvz-header h2 { font-size: 18px; }
.pvz-header p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.pvz-body { display: grid; grid-template-columns: 380px minmax(0, 1fr); flex: 1; min-height: 0; }
.pvz-panel { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border-subtle); background: var(--surface); }
.pvz-search { display: flex; gap: 8px; padding: 16px 16px 10px; }
.pvz-search-field { position: relative; flex: 1; min-width: 0; }
.pvz-search-field > .icon { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; color: var(--text-muted); transform: translateY(-50%); pointer-events: none; }
.pvz-search-field .input { padding-left: 36px; }
.pvz-search .button { --btn-h: 40px; flex: none; }
.pvz-filter { display: flex; align-items: center; gap: 8px; height: 36px; margin: 0 16px 6px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-subtle); color: var(--text-muted); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.pvz-filter:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.pvz-filter .icon { width: 15px; height: 15px; }
.pvz-filter input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--text-primary); font-size: 13px; }
.pvz-filter input::placeholder { color: var(--text-placeholder); }
.pvz-panel > .form-error { margin: 0 16px 6px; }
.pvz-summary { padding: 6px 20px 8px; color: var(--text-muted); font-size: 12px; font-weight: 500; }
.pvz-summary:empty { display: none; }
.pvz-list { flex: 1; min-height: 0; padding: 0 8px 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.pvz-list .address-searching { padding: 12px; }
.pvz-list .pickup-option + .pickup-option { margin-top: 8px; }
.pvz-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px 10px 10px; border-radius: var(--r-ml); text-align: left; transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.pvz-item + .pvz-item { margin-top: 2px; }
.pvz-item:hover { background: var(--surface-hover); }
.pvz-item.selected { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
.pvz-item-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--text-muted); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pvz-item-icon .icon { width: 16px; height: 16px; }
.pvz-item.selected .pvz-item-icon { background: var(--accent); color: #fff; }
.pvz-item-body { display: grid; gap: 2px; flex: 1; min-width: 0; padding-top: 1px; }
.pvz-item-body strong { color: var(--text-primary); font-size: 14px; font-weight: 500; line-height: 1.35; }
.pvz-item-body small { overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.pvz-rate { display: inline-flex; align-items: center; gap: 3px; flex: none; padding-top: 2px; color: var(--text-secondary); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pvz-rate .icon, .pvz-facts .icon-star { width: 13px; height: 13px; color: var(--star); fill: var(--star); }
.pvz-more { padding: 0 16px 14px; }
.pvz-more:empty { display: none; }
.pvz-more .button { width: 100%; }
.pvz-empty { display: flex; align-items: flex-start; gap: 12px; margin: 4px 8px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-ml); color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.pvz-empty > .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.pvz-empty strong { display: block; color: var(--text-primary); font-weight: 600; }
.pvz-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--map-bg); }
/* MapLibre's own stylesheet sets .maplibregl-map { position: relative }; keep the map filling the stage. */
.pvz-stage .pvz-map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Centred by auto margins between the map controls; a long note wraps instead of running off the map. */
.pvz-map-note { position: absolute; top: 14px; right: 0; left: 0; z-index: 2; display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 120px); margin: 0 auto; padding: 8px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-md); color: var(--text-secondary); font-size: 13px; line-height: 1.35; }
.pvz-map-note .icon, .pvz-map-note .mini-loader { flex: none; }
.pvz-map-note .icon { width: 16px; height: 16px; color: var(--info); }
.pvz-card { position: absolute; left: 16px; bottom: 16px; z-index: 3; width: min(360px, calc(100% - 32px)); padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); animation: pop-in var(--dur) var(--ease) both; }
.pvz-card-head { display: flex; align-items: flex-start; gap: 12px; }
.pvz-card-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--accent); color: #fff; }
.pvz-card-icon .icon { width: 18px; height: 18px; }
.pvz-card-title { flex: 1; min-width: 0; }
.pvz-card-title span { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.pvz-card-title h3 { margin-top: 2px; color: var(--text-primary); font-size: 15px; font-weight: 600; line-height: 1.4; }
.pvz-card-close { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin: -4px -6px 0 0; border-radius: var(--r-sm); color: var(--text-muted); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pvz-card-close:hover { background: var(--surface-active); color: var(--text-primary); }
.pvz-card-close .icon { width: 16px; height: 16px; }
.pvz-facts { display: grid; gap: 8px; margin: 14px 0 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.pvz-facts > div { display: flex; align-items: flex-start; gap: 10px; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.pvz-facts dt { display: flex; flex: none; padding-top: 1px; color: var(--text-muted); }
.pvz-facts dt .icon { width: 16px; height: 16px; }
.pvz-facts > div:nth-child(2) dt .icon { color: var(--star); fill: var(--star); }
.pvz-facts b { color: var(--text-primary); font-weight: 650; }
.pvz-card .button { --btn-h: 42px; }
.pvz-stage .maplibregl-ctrl-top-right { top: 6px; right: 6px; }
.pvz-stage .maplibregl-ctrl-group { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-md); }
.pvz-stage .maplibregl-ctrl-group button { width: 36px; height: 36px; }
.pvz-stage .maplibregl-ctrl-group button + button { border-top-color: var(--border-subtle); }
.pvz-stage .maplibregl-ctrl-group button:hover { background-color: var(--surface-hover); }
.pvz-stage .maplibregl-ctrl.maplibregl-ctrl-attrib, .pvz-stage .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact-show { border: 1px solid var(--border-subtle); background: var(--bg-translucent); color: var(--text-muted); font-size: 11px; }
.pvz-stage .maplibregl-ctrl-attrib a { color: var(--text-secondary); }
.pvz-stage .maplibregl-ctrl-attrib.maplibregl-compact { border-radius: 999px; }
.pvz-stage .maplibregl-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Product search */
.product-search-result { margin-top: 20px; }
.product-search-result:empty { display: none; }
.product-preview { padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.product-preview-main { display: flex; align-items: flex-start; gap: 16px; }
.product-preview-main > img { flex: none; padding: 6px; border-radius: var(--r-md); background: var(--photo-bg); object-fit: contain; }
.product-preview-copy { flex: 1; min-width: 0; }
.product-preview h3 { color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.45; }
.product-preview-copy > p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.product-preview-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.product-preview-price b { color: var(--text-primary); font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.product-old-price, .product-preview small { color: var(--text-muted); font-size: 12px; }
.product-preview-copy > .badge { margin-top: 10px; }
.product-preview .modal-actions { flex-wrap: wrap; }

/* Chips and card picker */
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 4px; }
.chip-amount { height: 40px; text-align: center; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text-primary); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.chip-amount:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.chip-amount:active { transform: scale(.97); }
.chip-amount.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.card-picker { display: grid; gap: 8px; }
.card-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.card-opt:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.card-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.card-opt input[type=radio] { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.card-opt input[type=radio]:checked { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3.5px var(--radio-ring); }
.card-opt-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.card-opt-mask { display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 14px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.card-opt-mask .badge { letter-spacing: 0; }
.card-opt-meta { color: var(--text-muted); font-size: 12px; }
.card-opt-skeleton { pointer-events: none; }
.card-opt-skeleton .skel-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; }
.card-opt-skeleton .skel-lines { display: grid; gap: 7px; flex: 1; }
.card-opt-skeleton .skel-line { height: 9px; border-radius: 4px; }
.card-opt-skeleton .skel-line.long { width: 58%; }
.card-opt-skeleton .skel-line.short { width: 36%; }
.card-opt-empty { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-ml); background: var(--surface-subtle); color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.card-opt-empty .icon { width: 18px; height: 18px; }
.card-opt-empty.error { border-style: solid; border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger-text); }
.modal form > .field + .chip-grid, .modal form > .field + .card-picker { margin-top: 0; }

/* Alert dialog */
.alert-window { width: min(400px, 100%); padding: 28px 24px 24px; }
.alert-dialog { display: flex; flex-direction: column; align-items: center; text-align: center; }
.alert-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.alert-icon .icon { width: 24px; height: 24px; }
.alert-icon-err { background: var(--danger-soft); color: var(--danger); }
.alert-icon-ok { background: var(--success-soft); color: var(--success); }
.alert-icon-info { background: var(--info-soft); color: var(--info); }
.alert-icon-warn { background: var(--warning-soft); color: var(--warning); }
.alert-title { color: var(--text-primary); font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.alert-message { max-width: 36ch; margin-top: 6px; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.alert-ok { --btn-h: 40px; width: 100%; margin-top: 24px; }

/* Session protection wizard */
.trust-wizard { width: min(460px, 100%); }
.trust-intro-list { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface-subtle); }
.trust-intro-list strong { display: block; color: var(--text-muted); font-size: 12px; font-weight: 500; }
.trust-intro-list span { display: block; margin-top: 2px; color: var(--text-primary); font-size: 16px; font-weight: 600; }
.trust-session-list { display: grid; gap: 8px; max-height: 280px; margin-top: 16px; overflow-y: auto; }
.trust-session-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface); }
.trust-session-item > span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--text-secondary); }
.trust-session-item > span .icon { width: 16px; height: 16px; }
.trust-session-item strong { display: block; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.trust-session-item small { display: block; margin-top: 1px; color: var(--text-muted); font-size: 12px; }
.trust-more { padding-left: 4px; color: var(--text-muted); font-size: 12px; }

/* ------------------------------------------------------------------ Toasts */
.toast-stack { position: fixed; right: 20px; bottom: calc(20px + var(--safe-bottom)); z-index: 80; display: flex; flex-direction: column; align-items: stretch; width: min(380px, calc(100vw - 24px)); pointer-events: none; }
.toast { --toast-bg: #18161f; --toast-fg: #f5f4f8; --toast-muted: rgba(245, 244, 248, .55); display: flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 8px; padding: 8px 8px 8px 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .06); border-radius: 14px; background: var(--toast-bg); box-shadow: 0 12px 32px -8px rgba(15, 10, 30, .38), 0 2px 6px rgba(15, 10, 30, .18); color: var(--toast-fg); font-size: 14px; font-weight: 500; line-height: 1.4; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.toast:first-child { margin-top: 0; }
.toast-icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(52, 199, 123, .16); color: #4ade80; }
.toast-icon .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.toast.error .toast-icon { background: rgba(248, 113, 113, .16); color: #f87171; }
.toast-text { flex: 1; min-width: 0; padding: 3px 0; overflow-wrap: anywhere; }
.toast-close { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; color: var(--toast-muted); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.toast-close .icon { width: 14px; height: 14px; }
.toast:hover .toast-close { background: rgba(255, 255, 255, .08); color: var(--toast-fg); }
.toast.leaving { pointer-events: none; }
:root[data-theme="dark"] .toast { --toast-bg: #2a2734; border-color: rgba(255, 255, 255, .1); box-shadow: 0 16px 40px -8px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4); }

/* ------------------------------------------------------------------ Motion */
.enter { animation: item-in var(--dur-slow) var(--ease) var(--delay, 0ms) backwards; }
@keyframes item-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes ambient-drift { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 1.5%, 0) scale(1.05); } }

/* Dark theme details that tokens alone cannot express */
/* Light text on dark reads heavier, so large display text drops one weight step. */
[data-theme="dark"] .page-title, [data-theme="dark"] .stat-value, [data-theme="dark"] .metric-strip strong, [data-theme="dark"] .order-totals strong, [data-theme="dark"] .limit-total, [data-theme="dark"] .install-amount, [data-theme="dark"] .cert-amount, [data-theme="dark"] .product-price, [data-theme="dark"] .order-detail-price, [data-theme="dark"] .account-phone-heading h1, [data-theme="dark"] .modal h2 { font-weight: 600; }
[data-theme="dark"] .account-body strong, [data-theme="dark"] .notice-title, [data-theme="dark"] .home-card-head h2, [data-theme="dark"] .attention-copy strong, [data-theme="dark"] .account-tool strong, [data-theme="dark"] .section-heading h2 { font-weight: 550; }
[data-theme="dark"] .nav-item.active { background: var(--surface-active); border-color: var(--border-strong); box-shadow: none; }
[data-theme="dark"] .button.ghost { box-shadow: none; }
[data-theme="dark"] .account-icon, [data-theme="dark"] .account-emblem, [data-theme="dark"] .cert-icon, [data-theme="dark"] .wallet-icon, [data-theme="dark"] .modal-symbol { background: var(--accent-soft); color: var(--accent-text); }
[data-theme="dark"] .bank-logo { border-color: var(--border); }
[data-theme="dark"] .pickup-card img, [data-theme="dark"] .pickup-modal-image img { border-color: transparent; }
[data-theme="dark"] .pvz-stage .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg) brightness(1.5); }
[data-theme="dark"] .pvz-stage .maplibregl-ctrl-attrib-button { filter: invert(1); }
[data-theme="dark"] .toggle-control input:not(:checked) { background: var(--border-hover); }
/* Order card: price and product first, live delivery status as a tappable row at the bottom. */
.order-card { cursor: pointer; }
.order-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.order-card .order-price-row { margin-top: 2px; }
.order-card .order-dates { padding: 10px 0 0; border-bottom: 0; }
.order-track { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-ml); background: var(--surface-subtle); text-align: left; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.order-track:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.order-track:active { background: var(--surface-active); }
.track-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 4px var(--info-soft); }
.order-track[data-tone=ready] .track-dot { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.order-track[data-tone=problem] .track-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.track-copy { display: grid; gap: 1px; flex: 1; min-width: 0; }
.track-copy strong, .track-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track-copy strong { color: var(--text-primary); font-size: 13px; font-weight: 600; }
.order-track[data-tone=ready] .track-copy strong { color: var(--success-text); }
.order-track[data-tone=problem] .track-copy strong { color: var(--danger-text); }
.track-copy small { color: var(--text-muted); font-size: 12px; }
.order-track > .icon { width: 16px; height: 16px; color: var(--text-placeholder); transition: transform var(--dur) var(--ease); }
.order-track:hover > .icon { color: var(--text-secondary); transform: translateX(2px); }

/* Delivery timeline */
.timeline { display: grid; margin: 18px 0 0; padding: 0; list-style: none; }
.timeline li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; border-radius: 2px; background: var(--border); }
.timeline li:last-child::before { display: none; }
.timeline-dot { position: relative; z-index: 1; flex: none; width: 12px; height: 12px; margin-top: 4px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); }
.timeline li.current .timeline-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.timeline strong { display: block; color: var(--text-secondary); font-size: 14px; font-weight: 500; line-height: 1.45; }
.timeline li.current strong { color: var(--text-primary); font-weight: 600; }
.timeline small { display: block; margin-top: 1px; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.track-window { width: min(480px, 100%); }
.track-product { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-ml); background: var(--surface-subtle); }
.track-product .product-photo { flex: none; width: 56px; height: 56px; margin: 0; border-radius: var(--r-sm); aspect-ratio: auto; }
.track-product .product-photo img { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.track-product .photo-fallback small { display: none; }
.track-product > div:last-child { display: grid; gap: 2px; min-width: 0; }
.track-product strong { display: -webkit-box; overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.track-product span { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.modal > .track-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 12px; }
.detail-track { margin-top: 18px; }
.detail-track h3 { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.detail-track .timeline { margin-top: 12px; }

/* Account overview page */
/* Account head: one surface, no cards inside cards. The number leads, the
   rest sits in a single hairline-separated strip underneath. */
.account-hero { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.account-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 320px; background: radial-gradient(90% 120% at 0% 0%, var(--accent-soft), transparent 70%); opacity: .7; pointer-events: none; }
.account-hero > * { position: relative; }
.account-hero-main { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 20px; }
.account-hero-avatar { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(106, 66, 240, .18); }
.account-hero-avatar .icon { width: 22px; height: 22px; }
.account-hero-avatar i { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border: 2.5px solid var(--surface); border-radius: 50%; background: var(--danger); }
.account-hero-avatar i.online { background: var(--success); }
.account-hero .account-phone-heading h1 { font-size: 21px; font-weight: 600; letter-spacing: -.016em; }
.account-hero .account-client-name { margin-top: 1px; }
/* Device keeps its action, so it stays in the head rather than the strip. */
.account-hero-device { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; padding-left: 20px; border-left: 1px solid var(--border-subtle); }
.account-hero-device > span { display: grid; gap: 1px; min-width: 0; }
.account-hero-device small { color: var(--text-muted); font-size: 11.5px; }
.account-hero-device strong { color: var(--text-primary); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-hero-device .device-symbol { width: 32px; height: 32px; }
.account-facts { display: grid; grid-template-columns: 2fr 1.15fr 1fr; align-items: stretch; margin: 0; border-top: 1px solid var(--border-subtle); background: var(--surface-subtle); }
.account-fact { min-width: 0; padding: 12px 20px 13px; }
.account-fact + .account-fact { box-shadow: inset 1px 0 var(--border-subtle); }
/* The two payment facts sit side by side, so every cell of the strip is one
   line tall and the row scans left to right without ragged gaps. */
.account-fact.account-installment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-fact.account-installment .kv-row + .kv-row { margin-top: 0; }
/* In the strip a label reads better above its value than opposite it: the
   cells are wide, and space-between would fling the two apart. */
.account-fact .kv-row { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 4px; }
.account-fact .kv-row + .kv-row { margin-top: 10px; }
.account-fact .kv-label { font-size: 11.5px; letter-spacing: .005em; }
.account-fact .postpaid-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.account-hero ~ .section-heading { margin-top: 28px; }
.account-hero ~ .account-tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.account-hero ~ .account-tool-grid .account-tool { flex-direction: column; align-items: flex-start; gap: 14px; min-height: 132px; padding: 16px; border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.account-hero ~ .account-tool-grid .account-tool > .icon { position: absolute; top: 18px; right: 16px; }
.account-hero ~ .account-tool-grid .account-tool { position: relative; }
.account-hero ~ .account-tool-grid .tool-symbol { width: 40px; height: 40px; }
.account-hero ~ .account-tool-grid .tool-symbol .icon { width: 20px; height: 20px; }
.account-hero ~ .account-tool-grid .account-tool strong { font-size: 15px; }
.account-hero ~ .account-tool-grid .account-tool:hover { box-shadow: var(--shadow-sm); }
.account-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 16px 18px; border: 1px solid var(--danger-border); border-radius: var(--r-lg); background: var(--surface); }
.account-danger strong { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.account-danger p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.account-danger .button { flex: none; border-color: var(--danger-border); }

/* Product search */
.search-window { width: min(560px, 100%); }
.product-search-field { position: relative; display: flex; gap: 8px; }
.product-search-field > .icon { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; color: var(--text-muted); transform: translateY(-50%); pointer-events: none; }
.product-search-field .input { height: 46px; padding-left: 42px; font-size: 15px; }
.product-search-field .button { --btn-h: 46px; flex: none; padding: 0 20px; }
.product-search .helper { margin-top: 10px; }
.link-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--surface-sunken); color: var(--text-primary); font-family: var(--mono); font-size: 12px; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.link-chip:hover { background: var(--accent-soft); color: var(--accent-text); }

/* Sidebar profile */
.sidebar-bottom { padding-top: 12px; border-top: 0; }
.profile-card { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.profile-row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.avatar-wrap { position: relative; flex: none; }
.avatar-wrap .avatar { width: 38px; height: 38px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent-border); }
.presence { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border: 2.5px solid var(--surface); border-radius: 50%; background: var(--success); }
.profile-copy { flex: 1; }
.profile-action { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r-sm); color: var(--text-muted); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.profile-action:hover { background: var(--surface-active); color: var(--text-primary); }
.profile-action .icon { width: 17px; height: 17px; }
.profile-stats { display: grid; gap: 7px; padding: 10px 2px 2px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 12px; }
.profile-stats .meter { margin: 0; }

/* ------------------------------------------------------------- Breakpoints */
@media (min-width: 1600px) {
  :root { --sidebar: 264px; }
}
@media (max-width: 1180px) {
  :root { --sidebar: 228px; --gutter: 28px; }
  .account-tabs { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 1024px) {
  :root { --sidebar: 216px; --gutter: 24px; }
  .stat-grid { gap: 10px; }
  .stat-card { padding: 14px 16px; }
  .order-detail { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 24px; }
  .metric-strip > div, .order-totals > div { padding: 14px 16px; }
}
@media (max-width: 800px) {
  :root { --gutter: 20px; }
  html { scrollbar-gutter: auto; }
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: calc(100vw - 48px);
    height: 100dvh;
    padding: calc(20px + var(--safe-top)) 12px calc(14px + var(--safe-bottom));
    border-right: 1px solid var(--border);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    transform: translateX(calc(-100% - 24px));
    transition: transform 260ms var(--ease);
    overflow-y: auto;
  }
  body.menu-open .sidebar { transform: none; }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 25; display: block; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease); }
  body.menu-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  .topbar { gap: 8px; min-height: calc(56px + var(--safe-top)); padding: var(--safe-top) 12px 0; }
  .topbar .mobile-menu { display: inline-grid; margin-left: -2px; color: var(--text-secondary); }
  .mobile-menu .icon { width: 20px; height: 20px; }
  .workspace-search { flex: 1; }
  .content { padding: 24px var(--gutter) 48px; }
  .page-title { font-size: 26px; }
  .order-detail { grid-template-columns: 1fr; gap: 20px; }
  .order-detail-photo { width: min(260px, 100%); margin: 0 auto; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  body { font-size: 15px; }
  .content { padding: 20px var(--gutter) 40px; }
  .page-header { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 20px; }
  .page-header > .button { align-self: flex-start; }
  .page-title { font-size: 24px; }
  .page-subtitle { font-size: 14px; }
  .section-actions { justify-content: flex-start; }
  .section-heading { margin-top: 28px; }
  .button { --btn-h: 40px; }
  .button.small { --btn-h: 36px; }
  .input, .workspace-search input, .search input { font-size: 16px; }
  .workspace-search { height: 38px; }

  .stat-grid { grid-template-columns: 1fr; gap: 8px; }
  .stat-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 14px 16px; }
  .stat-label { grid-column: 1; grid-row: 1; }
  .stat-note { grid-column: 1; grid-row: 2; }
  .stat-value { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 24px; }
  .faq-preview { margin-top: 24px; }

  .toolbar { gap: 12px; }
  .search { max-width: none; }
  .count-label { display: none; }
  .account-list { grid-template-columns: 1fr; }
  .account-card { padding: 14px; }

  .account-context { margin-bottom: 10px; }
  .account-tabs { margin: 0 calc(var(--gutter) * -1) 22px; padding: 0 calc(var(--gutter) - 10px); }
  .account-tab { height: 42px; font-size: 14px; }

  .metric-strip > div, .order-totals > div { padding: 12px; gap: 4px; }
  .metric-strip span, .order-totals span { font-size: 12px; }
  .metric-strip strong, .order-totals strong { font-size: 17px; }
  .cert-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-summary > div:nth-child(3) { border-left: 0; }
  .cert-summary > div:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }

  .order-grid { grid-template-columns: 1fr; gap: 10px; }
  .order-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; }
  .order-card .product-photo { width: 92px; aspect-ratio: .82; margin: 12px 0 12px 12px; }
  .order-card .product-photo img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
  .order-body { padding: 12px 12px 12px 4px; }
  .order-price-row { margin: 8px 0 4px; }
  .product-price { font-size: 18px; }
  .product-name { min-height: 0; }
  .product-brand { margin-bottom: 10px; }
  .order-dates { font-size: 12px; }

  .notification-card { padding: 14px; gap: 12px; }
  .notice-heading { flex-direction: column; gap: 2px; }
  .notice-heading time { order: -1; }
  .session-setting { flex-wrap: wrap; padding: 14px; }
  .session-setting .setting-copy { flex-basis: calc(100% - 50px); }
  .toggle-control { margin-left: 50px; }
  .session-card { flex-wrap: wrap; }
  .session-card .notice-copy { flex-basis: calc(100% - 50px); }
  .session-card > .button { margin-left: 50px; }
  .point-card { padding: 14px; }

  .notice { flex-wrap: wrap; padding: 14px; }
  .notice-body { flex-basis: calc(100% - 44px); }
  .notice-aside { justify-items: start; flex: 1 0 calc(100% - 44px); margin: 4px 0 0 44px; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--warning-border); text-align: left; }
  .notice-info .notice-aside { border-color: var(--info-border); }

  .install-hero { padding: 20px; }
  .install-amount { font-size: 32px; }

  .cert-grid { grid-template-columns: 1fr; gap: 8px; }
  .cert-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 14px; }
  .cert-top { display: contents; }
  .cert-icon { grid-column: 1; grid-row: 1 / span 2; }
  .cert-top .cert-badge { grid-column: 3; grid-row: 1 / span 2; }
  .cert-amount { grid-column: 2; grid-row: 1; font-size: 20px; }
  .cert-meta { grid-column: 2; grid-row: 2; margin-top: 0; font-size: 12px; }

  .pickup-grid { grid-template-columns: 1fr; gap: 8px; }
  .pickup-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 0 16px; text-align: left; }
  .pickup-heading { grid-column: 1 / -1; }
  .pickup-card img { grid-column: 1; grid-row: 2 / 4; width: 112px; height: 112px; margin: 0; }
  .pickup-code { align-self: end; font-size: 22px; }
  .pickup-card > small { align-self: start; }

  .address-switch { width: 100%; }
  .address-toolbar > .button { width: 100%; }
  .payment-grid { grid-template-columns: 1fr; }

  .modal-root { padding: calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom)); }
  .modal { max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)); padding: 20px; border-radius: 16px; }
  .modal h2 { font-size: 19px; }
  .modal-actions .button { --btn-h: 44px; }
  .form-grid, .address-details { gap: 12px 10px; }
  .account-window-header { gap: 12px; margin-bottom: 16px; }
  .account-emblem { width: 40px; height: 40px; border-radius: var(--r-md); }
  .account-emblem .icon { width: 20px; height: 20px; }
  .account-phone-heading h1 { font-size: 21px; }
  .account-tool-grid { gap: 8px; }
  .account-meta-row .meta-dot { display: none; }
  .account-tool { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
  .account-tool > .icon { display: none; }
  .tool-symbol { width: 32px; height: 32px; }
  .tool-symbol .icon { width: 17px; height: 17px; }
  .account-tool strong { font-size: 13px; }
  .account-tool small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .account-device { padding: 10px; }
  .order-window .order-detail-copy h2 { font-size: 18px; }
  .order-detail-price { font-size: 24px; }
  .product-preview-main > img { width: 84px; height: 108px; }
  .product-preview .modal-actions .button { flex-basis: 100%; }
  .toast-stack { right: 12px; left: 12px; width: auto; bottom: calc(16px + var(--safe-bottom)); }
}
@media (max-width: 380px) {
  :root { --gutter: 12px; }
  .page-title { font-size: 22px; }
  .account-icon { width: 36px; height: 36px; }
  .account-open { gap: 10px; }
  .order-card { grid-template-columns: 88px minmax(0, 1fr); }
  .order-card .product-photo { width: 76px; }
  .order-dates { grid-template-columns: 1fr; gap: 4px; }
  .order-dates > div { display: flex; justify-content: space-between; gap: 8px; }
  .modal { padding: 16px; }
  .account-window-header .account-emblem { display: none; }
  .account-phone-heading h1 { font-size: 19px; }
  .account-device .device-symbol { display: none; }
  .metric-strip strong, .order-totals strong { font-size: 15px; }
  .pickup-card { grid-template-columns: 96px minmax(0, 1fr); gap: 0 12px; }
  .pickup-card img { width: 96px; height: 96px; }
  .pickup-code { font-size: 19px; letter-spacing: .1em; }
}
@media (max-width: 1100px) {
  .home-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .modal.pvz-window { height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)); }
  .pvz-body { display: flex; flex-direction: column; }
  .pvz-panel { display: contents; }
  .pvz-search { order: 1; padding: 12px 12px 8px; }
  .pvz-filter { order: 2; margin: 0 12px 8px; }
  .pvz-panel > .form-error { order: 3; margin: 0 12px 8px; }
  .pvz-stage { order: 4; flex: none; height: min(44dvh, 420px); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
  .pvz-summary { order: 5; padding: 10px 16px 6px; }
  .pvz-list { order: 6; flex: 1; min-height: 120px; padding: 0 6px 6px; }
  .pvz-more { order: 7; padding: 0 12px 12px; }
  .pvz-header { padding: 14px 12px 12px 16px; }
  .pvz-card { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 12px; }
  .pvz-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 12px; padding-top: 10px; }
  .pvz-card-title h3 { font-size: 14px; }
}
@media (max-width: 600px) {
  .home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-metrics > div:first-child { grid-column: 1 / -1; }
  .home-metrics > div:nth-child(2) { border-left: 0; }
  .home-metrics > div:nth-child(n+2) { border-top: 1px solid var(--border-subtle); }
  .home-card { padding: 14px; }
  .attention-item { flex-wrap: wrap; }
  .attention-copy { flex-basis: calc(100% - 48px); }
  .attention-item .button { margin-left: 48px; }
  .theme-toggle { width: 36px; height: 36px; }
  .settings-static .theme-choices { width: 100%; grid-auto-flow: row; }
  .theme-choice { height: 40px; }
}
@media (max-width: 380px) {
  .home-metrics span { font-size: 12px; }
  .home-metrics span .icon { display: none; }
  .home-metrics > div { padding: 12px 10px; }
}
@media (max-width: 1180px) {
  .account-hero ~ .account-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  /* The head wraps before the strip does, so the number keeps its own line. */
  .account-hero-main { flex-wrap: wrap; }
  .account-hero-device { width: 100%; margin-left: 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--border-subtle); }
  .account-facts { grid-template-columns: 1fr 1fr; }
  .account-fact:nth-child(3) { box-shadow: inset 0 1px var(--border-subtle); grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .account-hero ~ .account-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .account-hero { border-radius: var(--r-lg); }
  .account-hero-main { gap: 12px; padding: 16px; }
  .account-hero-avatar { width: 44px; height: 44px; border-radius: 13px; }
  .account-hero-avatar .icon { width: 20px; height: 20px; }
  .account-hero .account-phone-heading h1 { font-size: 19px; }
  /* One fact per row: side by side the values would wrap into columns of
     single words. Hairlines turn horizontal to match. */
  .account-facts { grid-template-columns: 1fr; }
  .account-fact { padding: 11px 16px; }
  .account-fact + .account-fact { box-shadow: inset 0 1px var(--border-subtle); }
  .account-fact.account-installment { grid-template-columns: 1fr 1fr; gap: 10px; }
  .account-fact:nth-child(3) { grid-column: auto; }
  .account-hero ~ .account-tool-grid { gap: 8px; }
  .account-hero ~ .account-tool-grid .account-tool { min-height: 0; gap: 10px; padding: 12px; }
  .account-danger { flex-direction: column; align-items: stretch; }
  .order-card .order-dates { padding-top: 8px; }
  .order-track { margin-top: 10px; padding: 8px 8px 8px 10px; }
  .product-search-field .button { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ambient-texture, .orbital-loader { animation: none !important; }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Sidebar plan line (temporary premium label) */
#side-stats-text { display: flex; align-items: center; gap: 7px; color: var(--accent-text); font-weight: 600; }
#side-stats-text .icon { flex: none; width: 15px; height: 15px; fill: currentColor; }

/* Installment + pay-on-delivery rows */
.account-installment { flex-direction: column; align-items: stretch; gap: 8px; }
.kv-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.postpaid-value { display: inline-flex; align-items: baseline; gap: 6px; color: var(--text-primary); font-size: 13px; font-variant-numeric: tabular-nums; }
.postpaid-value b { font-weight: 600; }
.kv-sub, .kv-none { color: var(--text-muted); font-size: 12px; }

/* Illustrated account avatars */
.account-art { overflow: hidden; padding: 0; background: none; }
.account-art svg { display: block; width: 100%; height: 100%; }
.account-icon.account-art { border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.account-hero-avatar { background: none; box-shadow: 0 10px 24px rgba(40, 20, 90, .18); }
.account-hero-avatar .account-art { display: block; width: 100%; height: 100%; border-radius: inherit; }
[data-theme="dark"] .account-icon.account-art { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* Locked installment limit: approved amount, quiet until WB verification is done */
.kv-row:has(.locked-limit) { row-gap: 8px; }
.locked-limit { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.locked-limit .icon { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: var(--surface-sunken); color: var(--text-secondary); }
.locked-limit b { color: var(--text-primary); font-size: 13px; font-weight: 600; }
.locked-limit small { color: var(--text-muted); font-size: 12px; }
.locked-limit.is-compact .icon { width: 20px; height: 20px; padding: 3.5px; }

/* Account folders */
.folder-bar { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 14px; }
.folder-scroll { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.folder-scroll::-webkit-scrollbar { display: none; }
.folder-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.folder-chip .icon { width: 15px; height: 15px; }
.folder-chip em { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-muted); font-size: 11.5px; font-style: normal; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.folder-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.folder-chip.active { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(106, 66, 240, .25); }
.folder-chip.active em { background: rgba(255, 255, 255, .22); color: #fff; }
.folder-chip.folder-add { border-style: dashed; color: var(--text-muted); }
.folder-chip.folder-add:hover { border-color: var(--accent-border); color: var(--accent-text); background: var(--accent-soft); }
.folder-edit { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-muted); }
.folder-edit:hover { color: var(--text-primary); border-color: var(--border-strong); }
.folder-edit .icon { width: 16px; height: 16px; }
.folder-tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.folder-tag .icon { width: 12px; height: 12px; }
.account-card-meta .folder-tag { flex: none; }
.account-gear { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r-sm); color: var(--text-placeholder); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur) var(--ease); }
.account-gear .icon { width: 16px; height: 16px; }
.account-gear:hover { background: var(--surface-active); color: var(--text-primary); transform: rotate(45deg); }
.folder-window { width: min(420px, 100%); }
.folder-hint { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.folder-options { display: grid; gap: 4px; margin-top: 14px; max-height: min(320px, 45vh); overflow-y: auto; }
.folder-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--r-ml); color: var(--text-primary); font-size: 14px; text-align: left; }
.folder-option:hover { background: var(--surface-hover); }
.folder-option.selected { border-color: var(--accent-border); background: var(--accent-soft); font-weight: 600; }
.folder-option > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-option > .icon { width: 16px; height: 16px; color: var(--accent-text); }
.folder-option-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--text-muted); }
.folder-option-icon .icon { width: 15px; height: 15px; }
.folder-new { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.folder-new .input { flex: 1; min-width: 0; }
.folder-new .button { flex: none; }

/* First login through FERMORA */
.account-first-login { padding-top: 8px; }
.account-card .account-first-login { margin-top: 8px; border-top: 1px dashed var(--border-subtle); }
.account-fact.account-first-login { padding-top: 12px; }
.first-login-value { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; color: var(--text-primary); font-size: 13px; font-variant-numeric: tabular-nums; }
.days-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.days-chip.is-done { background: var(--success-soft); color: var(--success-text); }
.days-chip .icon { width: 12px; height: 12px; }

/* Hold notification settings */
.switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--border-strong); transition: background-color var(--dur) var(--ease); }
.switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--dur) var(--ease); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] span { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hold-days { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: var(--surface); transition: opacity var(--dur) var(--ease); }
.hold-days.is-off { opacity: .55; }
.hold-day { height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.hold-day:hover { border-color: var(--border-strong); color: var(--text-primary); }
.hold-day[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.hold-custom { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; }
.hold-custom .input { width: 76px; height: 32px; padding: 0 10px; border-radius: 999px; font-size: 13px; }

@media (max-width: 600px) {
  .folder-bar { margin-bottom: 12px; }
  .account-card-meta .folder-tag { margin-left: 0; }
  .first-login-value { justify-content: flex-start; }
}

/* Installment payment history */
.install-history { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-xs); max-width: 760px; }
.install-history-head h2 { color: var(--text-primary); font-size: 15px; font-weight: 600; }
.install-history-body { margin-top: 12px; }
.install-history-empty { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-ml); background: var(--surface-subtle); }
.install-history-empty > .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--success-text); }
.install-history-empty strong { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.install-history-empty p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.install-history-last { margin-bottom: 10px; color: var(--text-secondary); font-size: 13px; }
.install-history-last b { color: var(--text-primary); font-weight: 600; }
.install-history-list { display: grid; margin: 0; padding: 0; list-style: none; }
.install-history-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.install-history-list li:first-child { border-top: 0; }
.install-history-list li > div { flex: 1; min-width: 0; }
.install-history-list strong { display: block; color: var(--text-primary); font-size: 14px; font-weight: 500; }
.install-history-list small { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.install-history-glyph { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--surface-sunken); color: var(--text-muted); }
.install-history-glyph .icon { width: 16px; height: 16px; }
.install-history-glyph.tone-success { background: var(--success-soft); color: var(--success-text); }
.install-history-glyph.tone-danger { background: var(--danger-soft); color: var(--danger-text); }
.install-history-amount { color: var(--text-primary); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) {
  .install-history { padding: 14px; border-radius: var(--r-lg); }
  .install-history-list li { flex-wrap: wrap; }
  .install-history-list li > .badge { margin-left: 44px; }
}
.account-card-meta { flex-wrap: nowrap; min-width: 0; }
.account-card-meta .client-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account-card-meta .connection-label { flex: none; }
@media (max-width: 420px) {
  .locked-limit.is-compact small { display: none; }
}
/* Custom hold days: plain number field without spin arrows */
.hold-custom .input { -moz-appearance: textfield; appearance: textfield; }
.hold-custom .input::-webkit-outer-spin-button, .hold-custom .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Account total metric: slim per-account segments */
.home-metrics small:has(.metric-sub) { overflow: visible; }
.metric-sub { display: flex; align-items: center; gap: 10px; margin-top: 2px; white-space: nowrap; }
.account-segments { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.account-segments i { display: block; width: 14px; height: 3px; border-radius: 3px; background: var(--border-strong); opacity: .6; }
.account-segments i.on { background: var(--success); opacity: 1; box-shadow: 0 0 6px color-mix(in srgb, var(--success) 45%, transparent); }
.meter.meter-thin { flex: 1; max-width: 140px; height: 3px; margin: 0; }


/* ------------------------------------------------------------------ Place-order wizard
   Пайплайн оформления заказа. Собран на токенах дизайн-системы: нейтральные
   поверхности, фиолет только на выбранном варианте, danger/warning не нужны. */
.po-title { margin: 2px 0 14px; font-size: 20px; font-weight: 650; letter-spacing: -.016em; }
.po-product { display: flex; gap: 14px; padding: 14px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-subtle); }
.po-photo { border-radius: var(--r-md); object-fit: cover; background: var(--photo-bg); flex: none; }
.po-product-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.po-product-copy strong { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.po-product-copy small { font-size: 12.5px; color: var(--text-muted); }
.po-price { margin-top: 4px; display: flex; gap: 10px; align-items: baseline; }
.po-price b { font-size: 20px; font-weight: 650; letter-spacing: -.015em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.po-price s { color: var(--text-muted); font-size: 13px; }

.po-section { margin: 0 0 16px; }
.po-label { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); }

.po-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.po-chip { padding: 8px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); font: 500 13px var(--font); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.po-chip:hover { border-color: var(--border-hover); }
.po-chip.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }

.po-qty { display: inline-flex; align-items: center; gap: 10px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.po-qty .button.small { width: 32px; height: 32px; padding: 0; justify-content: center; font-weight: 600; font-size: 16px; }
.po-qty-val { min-width: 32px; text-align: center; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text-primary); }

.po-delivery, .po-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.po-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-primary); text-align: left; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.po-opt:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.po-opt.selected { border-color: var(--accent); background: var(--accent-soft); }
.po-opt-head { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--text-primary); }
.po-opt-head .icon, .po-opt-head svg { width: 16px; height: 16px; color: var(--text-secondary); }
.po-opt.selected .po-opt-head { color: var(--accent-text); }
.po-opt.selected .po-opt-head .icon, .po-opt.selected .po-opt-head svg { color: var(--accent); }
.po-opt small { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.po-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.po-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.po-card:hover { border-color: var(--border-hover); }
.po-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.po-card input[type="radio"] { appearance: none; width: 16px; height: 16px; margin: 0; flex: none; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); position: relative; cursor: pointer; }
.po-card input[type="radio"]:checked { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 40%, transparent 42%); }
.po-card > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.po-card strong { font-size: 13.5px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.po-card small { font-size: 12px; color: var(--text-muted); }
.po-empty { padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-subtle); color: var(--text-muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }

@media (max-width: 480px) {
  .po-delivery, .po-pay { grid-template-columns: 1fr; }
}


/* Qty editable input inside place-order wizard. */
.po-qty { padding: 4px 4px; }
.po-qty-input { width: 56px; height: 32px; padding: 0 6px; margin: 0; border: none; outline: none; background: transparent; color: var(--text-primary); text-align: center; font: 600 15px var(--font); font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.po-qty-input::-webkit-outer-spin-button, .po-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.po-qty-input:focus { background: var(--surface-hover); border-radius: var(--r-sm); }
.po-qty-note { display: block; margin-top: 8px; font-size: 12px; color: var(--text-muted); line-height: 1.45; max-width: 50ch; }


/* Place-order: 3 payment tiles. */
.po-pay.po-pay-3 { grid-template-columns: repeat(3, 1fr); }
.po-opt[disabled] { opacity: .55; cursor: not-allowed; }
.po-opt[disabled]:hover { border-color: var(--border); background: var(--surface); }
@media (max-width: 560px) { .po-pay.po-pay-3 { grid-template-columns: 1fr; } }

/* Danger ghost button (отмена заказа). */
.button.ghost.danger, .button.primary.danger { border-color: var(--danger-border); color: var(--danger-text); background: var(--surface); }
.button.ghost.danger:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-soft); }
.button.primary.danger { background: var(--danger); color: #fff; border-color: var(--danger); box-shadow: 0 1px 2px rgba(170, 30, 50, .22), inset 0 1px 0 rgba(255, 255, 255, .14); }
.button.primary.danger:hover:not(:disabled) { background: var(--danger-hover); border-color: var(--danger-hover); }


/* Header right-side cluster of page actions. */
.header-actions { display: inline-flex; gap: 8px; align-items: center; }
.button.icon-only { width: 36px; padding: 0; justify-content: center; }
.button.icon-only .icon { margin: 0; }

/* ----------------------------------------------------------------- Proxies
   One bordered table on the page surface. Layout follows the table width
   (container queries): seven columns, then five, then a three-line card row. */
.px-header { margin-bottom: 20px; }
.px-header .header-actions { flex: none; }

/* Overview: the counters are the filters. */
.px-overview { container-type: inline-size; display: flex; align-items: stretch; min-width: 0; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.px-tabs { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.px-tabs::-webkit-scrollbar { display: none; }
.px-tab, .px-metric { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 5px; flex: 1 0 auto; min-width: 116px; padding: 14px 18px 13px; text-align: left; }
.px-tab + .px-tab { box-shadow: inset 1px 0 var(--border-subtle); }
.px-tab { transition: background-color var(--dur-fast) var(--ease); }
.px-tab:hover { background: var(--surface-hover); }
.px-tab:focus-visible { outline-offset: -2px; border-radius: var(--r-lg); }
.px-tab[aria-selected="true"] { background: var(--surface-subtle); }
.px-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.px-tab-label { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.px-tab[aria-selected="true"] .px-tab-label { color: var(--text-primary); }
.px-tab strong, .px-metric strong { color: var(--text-primary); font-size: 22px; font-weight: 650; line-height: 1.15; letter-spacing: -.022em; font-variant-numeric: tabular-nums; }
.px-metric { flex: 0 0 auto; min-width: 140px; margin-left: auto; box-shadow: inset 1px 0 var(--border); background: var(--surface-subtle); }
.px-metric strong.tier-fast { color: var(--success-text); }
.px-metric strong.tier-slow, .px-metric strong.tier-critical { color: var(--warning-text); }
.px-overview-skel .px-tab { gap: 9px; }
/* Counters that do not fit scroll sideways; the fade shows there is more. */
@container (max-width: 980px) {
  .px-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .px-tab, .px-metric { min-width: 0; padding: 12px 16px 11px; }
  .px-metric { margin-right: 20px; }
}

/* State dot: colour plus shape, never colour alone. */
.px-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-placeholder); }
.px-dot.s-active { background: var(--success); box-shadow: 0 0 0 2px var(--success-soft); }
.px-dot.s-reserve { background: var(--warning); }
.px-dot.s-unreachable { background: var(--warning); box-shadow: 0 0 0 2px var(--warning-soft); }
.px-dot.s-error { background: var(--danger); box-shadow: 0 0 0 2px var(--danger-soft); }
.px-dot.s-blocked { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); position: relative; }
.px-dot.s-blocked::after { content: ""; position: absolute; left: 1px; right: 1px; top: 3px; height: 1.5px; background: var(--text-muted); transform: rotate(-45deg); }
.px-dot.s-unknown { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-placeholder); }

/* Toolbar */
.px-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-height: 36px; }
.px-search { position: relative; flex: 0 1 340px; min-width: 0; }
.px-search > .icon { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; color: var(--text-muted); transform: translateY(-50%); pointer-events: none; }
.px-search .input { height: 36px; padding-left: 34px; font-size: 13.5px; }
.px-search .input::-webkit-search-cancel-button { cursor: pointer; }
.px-select-wrap { position: relative; flex: none; }
.px-sort { height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text-primary); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-xs); appearance: none; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.px-sort:hover { border-color: var(--border-hover); }
.px-sort:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.px-select-wrap > .icon { position: absolute; right: 10px; top: 50%; width: 14px; height: 14px; color: var(--text-muted); transform: translateY(-50%) rotate(90deg); pointer-events: none; }
.px-toolbar-spacer { flex: 1; }
.px-toolbar .button.small { height: 36px; --btn-h: 36px; }
.px-toolbar .button.is-on { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-text); }
.px-toolbar .button.icon-only { width: 36px; padding: 0; }
.px-toolbar .is-spinning .icon { animation: spin .7s linear infinite; }

.px-notice { align-items: center; margin-bottom: 12px; padding: 12px 12px 12px 14px; }
.px-notice .notice-text { margin-top: 1px; }
.px-notice > .button { flex: none; }

/* Bulk check progress */
.px-job { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 10px 10px 14px; overflow: hidden; border: 1px solid var(--info-border); border-radius: var(--r-ml); background: var(--info-soft); animation: pop-in var(--dur) var(--ease) both; }
.px-job .mini-loader { border-color: var(--info-border); border-top-color: var(--info); }
.px-job-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; flex: 1; min-width: 0; }
.px-job-text strong { color: var(--text-primary); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.px-job-text span { color: var(--text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.px-job-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--info); transition: width 300ms var(--ease); }
.px-job.is-done { border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-xs); }
.px-job-icon { display: grid; place-items: center; color: var(--success); }
.px-job-icon .icon { width: 18px; height: 18px; }

/* Table */
.px-table { --px-cols: minmax(120px, 1fr) minmax(208px, 1.3fr) minmax(104px, .9fr) 84px 116px 96px 64px; container-type: inline-size; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.px-table.is-selecting { --px-cols: 18px minmax(120px, 1fr) minmax(208px, 1.3fr) minmax(104px, .9fr) 84px 116px 96px 64px; }
.px-head, .px-row { display: grid; grid-template-columns: var(--px-cols); align-items: center; column-gap: 14px; padding: 0 12px 0 16px; }
.px-head { height: 36px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); color: var(--text-muted); font-size: 12px; font-weight: 550; letter-spacing: .01em; white-space: nowrap; }
.px-table.is-empty .px-head { display: none; }
.px-row { min-height: 56px; padding-top: 8px; padding-bottom: 8px; transition: background-color var(--dur-fast) var(--ease); }
.px-row + .px-row { box-shadow: inset 0 1px var(--border-subtle); }
.px-row:hover { background: var(--surface-hover); }
.px-row.is-selected { background: var(--accent-soft); }
.px-row.is-new { animation: px-new 2.4s var(--ease) both; }
@keyframes px-new { from { background: var(--accent-soft); } to { background: transparent; } }
.px-row > div { min-width: 0; }

.px-check-cell { display: grid; place-items: center; height: 100%; cursor: pointer; }
.px-check-cell input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }

.px-name strong { display: block; overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -.006em; white-space: nowrap; text-overflow: ellipsis; }
.px-sub { display: block; margin-top: 1px; overflow: hidden; color: var(--text-muted); font-size: 12px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.px-reason { font-weight: 500; }
.px-reason.tone-danger { color: var(--danger-text); }
.px-reason.tone-warning { color: var(--warning-text); }
.px-reason.tone-muted { color: var(--text-secondary); }
.px-compact-meta { display: none; margin-top: 1px; color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.px-addr { display: flex; align-items: center; gap: 8px; }
.px-host { flex: 0 1 auto; overflow: hidden; color: var(--text-primary); font-size: 13.5px; font-weight: 500; letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; }
.px-kind { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 5px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 10.5px; font-weight: 650; letter-spacing: .05em; }

.px-use { color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.px-use-count { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-weight: 500; }
.px-use-count .icon { width: 14px; height: 14px; color: var(--text-muted); }
.px-use-none { color: var(--text-placeholder); }

/* Latency: value plus a four-step bar, coloured only at the fast and slow ends. */
.px-lat { display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 13.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.px-bars b { width: 3px; border-radius: 1px; background: var(--border-strong); }
.px-bars b:nth-child(1) { height: 4px; } .px-bars b:nth-child(2) { height: 6px; } .px-bars b:nth-child(3) { height: 8.5px; } .px-bars b:nth-child(4) { height: 11px; }
.px-lat.tier-fast { color: var(--success-text); }
.px-lat.tier-fast b { background: var(--success); }
.px-lat.tier-ok b:nth-child(-n+3) { background: var(--text-secondary); }
.px-lat.tier-slow { color: var(--warning-text); }
.px-lat.tier-slow b:nth-child(-n+2) { background: var(--warning); }
.px-lat.tier-critical { color: var(--warning-text); }
.px-lat.tier-critical b:nth-child(1) { background: var(--warning); }
.px-lat.tier-none { color: var(--text-placeholder); font-weight: 500; }
.px-lat.tier-none .px-bars { opacity: .6; }

/* Status badge: one size, one radius, a dot or spinner, semantic tone. */
.px-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 9px 0 8px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface-subtle); color: var(--text-secondary); font-size: 12px; font-weight: 550; line-height: 1; white-space: nowrap; }
.px-badge .px-dot { width: 6px; height: 6px; box-shadow: none; }
.px-badge .px-dot.s-blocked::after { top: 2.25px; }
.px-badge.t-success { border-color: var(--success-border); background: var(--success-soft); color: var(--success-text); }
.px-badge.t-warning { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning-text); }
.px-badge.t-danger { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger-text); }
.px-badge.t-info { border-color: var(--info-border); background: var(--info-soft); color: var(--info-text); }
.px-badge.t-neutral { color: var(--text-primary); }
.px-badge.t-muted { border-color: var(--border-subtle); background: var(--surface-sunken); color: var(--text-muted); }
.px-badge.t-unknown { border-style: dashed; border-color: var(--border-strong); background: var(--surface); color: var(--text-secondary); }
.px-spin { flex: none; width: 11px; height: 11px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .75s linear infinite; }

.px-checked { color: var(--text-secondary); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-checked.is-never { color: var(--text-placeholder); }

.px-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.px-btn, .px-btn-gap { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r-sm); }
.px-btn { color: var(--text-muted); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.px-btn .icon { width: 16px; height: 16px; }
.px-btn .px-spin { width: 13px; height: 13px; color: var(--info); }
.px-btn:hover:not(:disabled) { background: var(--surface-active); color: var(--text-primary); }
.px-btn.danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger-text); }
.px-btn:disabled, .px-text-btn:disabled { opacity: .45; cursor: progress; }
.px-row:not(:hover):not(:focus-within) .px-btn.danger { color: var(--text-placeholder); }
.px-text-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text-primary); font-size: 12.5px; font-weight: 550; white-space: nowrap; box-shadow: var(--shadow-xs); transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.px-text-btn .icon { width: 14px; height: 14px; color: var(--text-muted); }
.px-text-btn .px-spin { color: var(--info); }
.px-text-btn:hover:not(:disabled) { border-color: var(--border-hover); background: var(--surface-hover); }

.px-more { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.px-more:empty, .px-more[hidden] { display: none; }
.px-sentinel { width: 1px; height: 1px; }
.px-empty { display: flex; flex-direction: column; align-items: center; padding-bottom: 28px; }
.px-empty .empty-panel { border: 0; box-shadow: none; background: transparent; padding-bottom: 12px; }
.px-empty-filter { gap: 12px; padding: 36px 16px; color: var(--text-secondary); font-size: 13.5px; text-align: center; }
.px-skel .skel-line { display: block; height: 10px; border-radius: 4px; }
.px-skel .px-name { display: grid; gap: 7px; }

/* Selection bar: sticks to the bottom of the viewport while the list scrolls. */
.px-bulk { position: sticky; bottom: calc(16px + var(--safe-bottom)); z-index: 20; display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 6px 6px 6px 14px; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface); box-shadow: var(--shadow-md); animation: pop-in var(--dur) var(--ease) both; }
.px-bulk[hidden] { display: none; }
.px-bulk-count { margin-right: 4px; color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.px-bulk-count b { color: var(--text-primary); font-weight: 650; font-variant-numeric: tabular-nums; }
.px-bulk-sep { width: 1px; height: 20px; margin: 0 2px; background: var(--border); }
.px-bulk .button.small { height: 32px; }

/* Add dialog */
.modal.px-add-window { width: min(540px, 100%); }
/* A fixed box: pasting a list scrolls inside it and never resizes the dialog. Long links wrap. */
.px-textarea { display: block; height: 176px; min-height: 0; max-height: none; padding: 10px 12px; font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; resize: none; }
.px-parse { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 220ms var(--ease), opacity 180ms var(--ease); }
.px-parse.has-content { grid-template-rows: 1fr; opacity: 1; }
.px-parse-inner { min-height: 0; overflow: hidden; }
.px-parse-inner > :first-child { margin-top: 10px; }
.px-parse-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--text-secondary); font-size: 13px; }
.px-parse-line > span { display: inline-flex; align-items: center; gap: 5px; }
.px-parse-line .icon { width: 15px; height: 15px; }
.px-parse-line .ok { color: var(--success-text); font-weight: 550; }
.px-parse-line .dup { color: var(--text-secondary); }
.px-parse-line .err { color: var(--danger-text); font-weight: 550; }
.px-issues { display: grid; gap: 3px; margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-subtle); list-style: none; font-size: 12.5px; line-height: 1.45; }
.px-issues li { display: flex; gap: 8px; color: var(--text-secondary); }
.px-issues li b { flex: none; min-width: 64px; color: var(--text-primary); font-weight: 550; font-variant-numeric: tabular-nums; }
.px-issues li.error b { color: var(--danger-text); }
.px-issues li.more { color: var(--text-muted); }
.px-scheme { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 0; padding: 0; border: 0; }
.px-scheme legend { float: left; color: var(--text-secondary); font-size: 13px; }
.px-seg { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-subtle); }
.px-seg label { position: relative; cursor: pointer; }
.px-seg input { position: absolute; opacity: 0; pointer-events: none; }
.px-seg span { display: block; padding: 5px 12px; border-radius: 7px; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.px-seg input:checked + span { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.px-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.px-form-error { margin-top: 12px; color: var(--danger-text); font-size: 13px; line-height: 1.45; }
.px-delete-note { margin-top: 16px; padding: 12px; }
.px-delete-note .notice-glyph { width: 28px; height: 28px; }

/* Medium tables: assignment and check time fold under the name. */
@container (max-width: 900px) {
  .px-table { --px-cols: minmax(112px, 1fr) minmax(208px, 1.4fr) 84px 116px 64px; }
  .px-table.is-selecting { --px-cols: 18px minmax(112px, 1fr) minmax(208px, 1.4fr) 84px 116px 64px; }
  .px-head > span:nth-last-child(5), .px-head > span:nth-last-child(2), .px-use, .px-when { display: none; }
  .px-row .px-sub { display: none; }
  .px-compact-meta { display: block; }
  .px-row:has(.px-reason) .px-sub { display: block; }
  .px-row:has(.px-reason) .px-compact-meta { display: none; }
}

/* Narrow: a three-line row — name and status, address and assignment, speed and actions. */
@container (max-width: 600px) {
  .px-head { display: none; }
  .px-row, .px-table.is-selecting .px-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name name status" "addr addr use" "lat when actions"; column-gap: 10px; row-gap: 6px; padding: 12px 12px 10px 14px; }
  .px-table.is-selecting .px-row { grid-template-columns: 18px minmax(0, 1fr) auto auto; grid-template-areas: "check name name status" "check addr addr use" "check lat when actions"; }
  .px-check-cell { grid-area: check; align-self: start; height: auto; padding-top: 2px; }
  .px-name { grid-area: name; display: flex; align-items: baseline; gap: 8px; }
  .px-name strong { flex: none; max-width: 60%; }
  .px-row .px-sub, .px-row:has(.px-reason) .px-sub { display: block; min-width: 0; margin: 0; }
  .px-compact-meta, .px-row:has(.px-reason) .px-compact-meta { display: none; }
  .px-status { grid-area: status; }
  .px-addr { grid-area: addr; }
  .px-use { grid-area: use; display: block; justify-self: end; font-size: 12.5px; }
  .px-use-count .icon { display: none; }
  .px-lat { grid-area: lat; }
  .px-when { grid-area: when; display: block; justify-self: end; }
  .px-actions { grid-area: actions; margin-right: -4px; }
  .px-row { min-height: 0; }
}

@media (max-width: 760px) {
  .px-header .header-actions { width: 100%; }
  .px-header .header-actions .button { flex: 1; }
  .px-toolbar { flex-wrap: wrap; }
  .px-search { flex: 1 1 100%; }
  .px-toolbar-spacer { display: none; }
  .px-select-wrap { flex: 1; }
  .px-sort { width: 100%; }
  .px-tab, .px-metric { min-width: 104px; padding: 12px 14px 11px; }
  .px-tab strong, .px-metric strong { font-size: 19px; }
  .px-tab[aria-selected="true"]::after { left: 12px; right: 12px; }
  .px-bulk { gap: 4px; padding-left: 12px; }
  .px-bulk .button.small { padding: 0 10px; }
  .px-bulk-sep { display: none; }
}
@media (max-width: 600px) {
  .px-notice { flex-wrap: wrap; gap: 10px 12px; }
  .px-notice .notice-glyph { display: none; }
  .px-notice .notice-body { flex: 1 1 200px; }
}
@media (max-width: 420px) {
  .px-header .header-actions { flex-wrap: wrap; }
  .px-header .header-actions .button { flex: 1 1 140px; }
  .px-bulk [data-action="px-select-all"] { display: none; }
  .px-scheme { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .px-row.is-new, .px-job, .px-bulk { animation: none; }
  .px-spin, .px-toolbar .is-spinning .icon { animation-duration: 1.6s; }
}

/* ------------------------------------------------------- Product photos, QR
   A photo that is still loading keeps the exact box of the photo (shimmer), so
   nothing shifts when it arrives; it then fades in. */
.photo-pending { display: block; background: linear-gradient(90deg, var(--photo-bg) 25%, var(--skeleton-highlight) 50%, var(--photo-bg) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.product-photo > .photo-pending { position: absolute; inset: 10px; border-radius: var(--r-sm); }
.photo-in { animation: fade-in var(--dur) var(--ease) both; }
.product-preview-photo { flex: none; width: 110px; height: 130px; padding: 6px; border-radius: var(--r-md); background: var(--photo-bg); object-fit: contain; }
span.product-preview-photo, span.po-photo { display: grid; place-items: center; color: var(--text-muted); }
span.product-preview-photo .icon, span.po-photo .icon { width: 24px; height: 24px; }
.po-photo { width: 72px; height: 86px; }
.qr-box { width: 148px; height: 148px; margin: 0 auto 14px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: #fff; }
.qr-box svg { display: block; width: 100%; height: 100%; }
.pickup-modal-image .qr-box { width: min(232px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto; padding: 10px; border-radius: var(--r-ml); }
[data-theme="dark"] .qr-box { border-color: transparent; }
@media (max-width: 600px) {
  .product-preview-photo { width: 84px; height: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-pending, .photo-in { animation: none; }
}

/* "Удалить все" on the proxy page: quiet until hovered, then clearly destructive. */
.button.ghost.px-delete-all { color: var(--text-secondary); }
.button.ghost.px-delete-all .icon { color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
.button.ghost.px-delete-all:hover:not(:disabled) { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger-text); }
.button.ghost.px-delete-all:hover:not(:disabled) .icon { color: var(--danger-text); }
.button.ghost.px-delete-all[hidden] { display: none; }
.px-delete-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-top: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface-subtle); }
.px-delete-stats > div { display: grid; gap: 2px; padding: 12px 14px; }
.px-delete-stats > div + div { box-shadow: inset 1px 0 var(--border-subtle); }
.px-delete-stats strong { color: var(--text-primary); font-size: 20px; font-weight: 650; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.px-delete-stats > div:first-child strong { color: var(--danger-text); }
.px-delete-stats span { color: var(--text-secondary); font-size: 12.5px; }
@media (max-width: 760px) {
  .px-header .header-actions .px-delete-all { flex: 0 0 40px; width: 40px; padding: 0; }
  .px-header .header-actions .px-delete-all span { display: none; }
}
@media (max-width: 420px) {
  .px-header .header-actions .px-delete-all { flex: 0 0 40px; }
}

/* Checkout: the payment source applies to an online charge and to paying at the point. */
.po-source-label { margin-top: 14px; }
.po-opt:disabled { opacity: .55; cursor: not-allowed; }
.po-opt:disabled:hover { border-color: var(--border); background: var(--surface); }
.po-note { margin-top: 10px; color: var(--text-muted); font-size: 12.5px; line-height: 1.45; }

/* A declined payment is stated on the order card: WB cancels such an order silently. */
.order-pay-alert { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--danger-border); border-radius: var(--r-sm); background: var(--danger-soft); color: var(--danger-text); font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.order-pay-alert .icon { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.order-detail .order-pay-alert { margin: 16px 0 0; padding: 10px 12px; font-size: 13px; }

/* ------------------------------------------------- Развитие аккаунтов
   The lightning mark is the one animated element: a slow, quiet pulse that
   says "this account is working right now" without pulling the eye away. */
.gr-bolt { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; color: var(--text-placeholder); vertical-align: -3px; }
.gr-bolt .icon { width: 12px; height: 12px; fill: currentColor; stroke-width: 0; }
.gr-bolt.is-live { color: var(--accent-text); background: var(--accent-soft); animation: gr-pulse 2.6s var(--ease) infinite; }
@keyframes gr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(106, 66, 240, .26); }
  50%      { box-shadow: 0 0 0 5px rgba(106, 66, 240, 0); }
}
[data-theme="dark"] .gr-bolt.is-live { animation-name: gr-pulse-dark; }
@keyframes gr-pulse-dark {
  0%, 100% { box-shadow: 0 0 0 0 rgba(130, 104, 255, .4); }
  50%      { box-shadow: 0 0 0 5px rgba(130, 104, 255, 0); }
}

.gr-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-bottom: 20px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.gr-strip > div { display: grid; gap: 5px; padding: 14px 18px 13px; }
.gr-strip > div + div { box-shadow: inset 1px 0 var(--border-subtle); }
.gr-strip span { display: flex; align-items: center; color: var(--text-secondary); font-size: 13px; font-weight: 500; white-space: nowrap; }
.gr-strip strong { display: flex; align-items: baseline; gap: 6px; color: var(--text-primary); font-size: 22px; font-weight: 650; line-height: 1.15; letter-spacing: -.022em; font-variant-numeric: tabular-nums; }
.gr-strip strong small { color: var(--text-muted); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.gr-strip .is-live strong { color: var(--accent-text); }
.gr-strip .gr-bolt { margin: 0 6px 0 0; }
.gr-strip-skel > div { gap: 9px; }

.gr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.gr-grid:not(.is-idle) { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.gr-grid.is-idle { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.gr-card { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.gr-card.is-on { border-color: var(--accent-border); box-shadow: var(--shadow-sm); }
.gr-card.is-off { opacity: .62; }
/* An account that is not warming is a one-line row, not a card full of
   zeroes: the accounts that are actually running have to stand out. */
.gr-card.is-idle { gap: 10px; padding: 13px 14px; background: var(--surface-subtle); box-shadow: none; }
.gr-card.is-idle:hover { border-color: var(--border-hover); background: var(--surface); box-shadow: var(--shadow-xs); }
.gr-card.is-idle .gr-actions { padding-top: 0; }
.gr-card:hover { box-shadow: var(--shadow-sm); }
.gr-skel { gap: 14px; }
.gr-skel .skel-line { display: block; height: 10px; border-radius: 4px; }

.gr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gr-id { display: grid; gap: 2px; min-width: 0; }
.gr-card.is-on .gr-head { align-items: center; }
.gr-id strong { display: flex; align-items: center; color: var(--text-primary); font-size: 15px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.gr-id span { color: var(--text-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-status { display: inline-flex; align-items: center; flex: none; height: 24px; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--surface-subtle); color: var(--text-secondary); font-size: 12px; font-weight: 550; white-space: nowrap; }
.gr-status.is-live { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-text); }
.gr-status.is-live .gr-bolt { width: 14px; height: 14px; margin: 0 5px 0 -2px; background: none; animation: none; }
.gr-status.is-muted { color: var(--text-placeholder); }

.gr-progress { height: 5px; overflow: hidden; border-radius: 3px; background: var(--surface-sunken); }
.gr-progress > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); transition: width 600ms var(--ease); }
.gr-progress-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: -6px; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.gr-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border-subtle); }
.gr-facts > div { display: grid; gap: 2px; min-width: 0; }
.gr-facts dt { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
.gr-facts dd { margin: 0; color: var(--text-primary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.3; }

.gr-plan { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.gr-plan span { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: 5px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 11.5px; font-weight: 500; }
.gr-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; }
.gr-note .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--success); }
.gr-note.is-error { color: var(--danger-text); }
.gr-note.is-error .icon { color: var(--danger); }

.gr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 2px; }
.gr-actions .button { flex: 0 1 auto; min-width: 0; }
.gr-spacer { flex: 1 0 0; }
/* Three buttons do not fit a card at this width: give the last one its own row. */
@container (max-width: 300px) { .gr-spacer { flex-basis: 100%; height: 0; } }
/* One quiet accent among ghost buttons beats nine solid ones in a row. */
.gr-start { color: var(--accent-text); }
.gr-start:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.gr-start .gr-bolt { width: 14px; height: 14px; margin: 0 5px 0 -2px; color: inherit; background: none; animation: none; }
.gr-stop:hover { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger-text); }
.gr-hint { margin: -8px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }

.gr-days { display: grid; gap: 6px; }
.gr-days .helper { margin: 0; }
.gr-opt { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.gr-opt:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.gr-opt:has(input:checked) { border-color: var(--accent-border); background: var(--accent-soft); }
.gr-opt input { width: 16px; height: 16px; margin: 1px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.gr-opt span { display: grid; gap: 2px; min-width: 0; }
.gr-opt strong { color: var(--text-primary); font-size: 13.5px; font-weight: 600; }
.gr-opt small { color: var(--text-muted); font-size: 12.5px; line-height: 1.45; }
.modal form > .field + .gr-days { margin-top: 0; }

@media (max-width: 600px) {
  .gr-grid, .gr-grid:not(.is-idle), .gr-grid.is-idle { grid-template-columns: 1fr; }
  .gr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gr-strip > div { padding: 12px 14px; }
  .gr-strip strong { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-bolt.is-live { animation: none; }
  .gr-progress > i { transition: none; }
}

/* Login dialog: quiet secondary choices under the main button. */
.login-aside { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.link-button { padding: 0; border: 0; background: none; color: var(--accent-text); font-size: 13px; font-weight: 550; cursor: pointer; transition: color var(--dur-fast) var(--ease); }
.link-button:hover { color: var(--accent-hover); text-decoration: underline; }
.link-button.is-quiet { color: var(--text-muted); font-weight: 500; }
.link-button.is-quiet:hover { color: var(--danger-text); }

/* Which proxy an account works through — secondary, but readable at a glance. */
.proxy-row { align-items: center; }
.proxy-value { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.proxy-value b { color: var(--text-primary); font-size: 13px; font-weight: 600; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proxy-kind { flex: none; display: inline-flex; align-items: center; height: 17px; padding: 0 5px; border-radius: 5px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 10px; font-weight: 650; letter-spacing: .04em; }
.proxy-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--text-placeholder); }
.proxy-dot.t-ok { background: var(--success); }
.proxy-dot.t-warn { background: var(--warning); }
.proxy-dot.t-bad { background: var(--danger); }
.proxy-dot.t-idle { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-hover); }
.kv-skel { display: inline-block; width: 108px; height: 11px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--skeleton-highlight) 50%, var(--surface-sunken) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.account-fact .proxy-value b { font-size: 13.5px; }
.account-card .account-proxy { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .kv-skel { animation: none; } }
/* Sessions of one residential gateway differ only by the login tail. */
.proxy-hint { flex: none; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------- Panels, premium and the brand (2026-10-09) */
/* Sidebar groups of the WB cabinet and of a new panel; the open panel is :root[data-panel]. */
.nav-group { display: grid; }
.panel-baby-only { display: none; }
:root[data-panel="baby"] .panel-wb-only { display: none; }
:root[data-panel="baby"] .panel-baby-only { display: grid; }
:root[data-panel="baby"] .brand-tag-wb { display: none; }
:root[data-panel="baby"] .brand-tag-baby { display: inline; color: var(--accent-text); }
:root[data-panel="baby"] .workspace-search { display: none; }
.panels-caption { margin-top: 22px; }
.nav-panel > span:nth-child(2) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The crown marks a Premium panel. */
.nav-premium { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-left: auto; border-radius: 7px; background: var(--premium-gradient); color: #fff; box-shadow: 0 2px 8px var(--premium-glow); }
.nav-premium .icon { width: 13px; height: 13px; }

/* WB chip after the wordmark, as on the cover's purple WB tile. White on both stops ≥ 5:1. */
.brand-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.brand-wb { display: inline-grid; place-items: center; flex: none; height: 18px; padding: 0 5px; border-radius: 5px; background: linear-gradient(135deg, #8b2ff5, #c21fb0); color: #fff; font-family: var(--display); font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(160, 40, 220, .35); }
.brand-wb { position: relative; isolation: isolate; }
.brand-wb::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; background: inherit; filter: blur(6px); opacity: .28; animation: brand-wb-breathe 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .brand-wb::before { animation: none; opacity: .25; } }
:root[data-panel="baby"] .brand-wb { display: none; }

/* With the plan active the button reports it (and opens renewal) instead of selling it. */
.subscribe-button.is-active { background: #f2eeff; color: var(--premium-text); box-shadow: inset 0 0 0 1px #dcd2fd, 0 3px 12px rgba(124, 77, 255, .18); }
.subscribe-button.is-active:hover { filter: none; background: #e9e3ff; box-shadow: inset 0 0 0 1px #cbbcfc, 0 4px 14px rgba(124, 77, 255, .24); }
[data-theme="dark"] .subscribe-button.is-active { background: #1f1a36; box-shadow: inset 0 0 0 1px #3d3172, 0 3px 12px rgba(124, 77, 255, .22); }
[data-theme="dark"] .subscribe-button.is-active:hover { background: #272046; }
#side-stats.is-off #side-stats-text { justify-content: space-between; color: var(--text-muted); font-weight: 500; }
.premium-cta { color: var(--premium-text); font-size: 12px; font-weight: 650; }
.premium-cta:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Top bar: subscription, theme, the profile with the premium ring. */
.topbar-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.topbar-actions .theme-toggle { margin-left: 0; }
.subscribe-button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: var(--premium-gradient); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -.004em; white-space: nowrap; box-shadow: 0 4px 14px var(--premium-glow), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease); }
.subscribe-button:hover { filter: brightness(1.07); box-shadow: 0 6px 20px var(--premium-glow), inset 0 1px 0 rgba(255, 255, 255, .26); }
.subscribe-button:active { transform: scale(.97); }
.subscribe-button:focus-visible { outline: none; box-shadow: var(--ring), 0 4px 14px var(--premium-glow); }
.subscribe-glyph { display: flex; }
.subscribe-glyph .icon { width: 16px; height: 16px; }
.top-profile { position: relative; flex: none; width: 34px; height: 34px; }
.top-profile .top-avatar { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0; }
.premium-mark { display: none; }
/* Premium shows on the avatar too, not only in the sidebar: a violet-blue ring with a soft halo
   and a star. Static, no pulsing (see design/UI_NOTES.md). */
.top-profile.is-premium::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--premium-ring); box-shadow: 0 0 16px 1px var(--premium-glow); }
.top-profile.is-premium .top-avatar { box-shadow: 0 0 0 2px var(--bg); }
.top-profile.is-premium .premium-mark { position: absolute; right: -5px; bottom: -4px; z-index: 2; display: grid; place-items: center; width: 17px; height: 17px; border: 2px solid var(--bg); border-radius: 50%; background: var(--premium-gradient); color: #fff; }
.premium-mark .icon { width: 9px; height: 9px; fill: currentColor; stroke-width: 1.4; }
.profile-card.is-premium .avatar-wrap .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #8b5cff, 0 0 14px var(--premium-glow); }
/* Premium keeps its violet in every panel, whatever the panel accent is. */
#side-stats-text { color: var(--premium-text); }
#side-stats-text .icon { filter: drop-shadow(0 0 6px var(--premium-glow)); }

/* «Детское питание»: the panel has its own warm accent. White on #c8461f is 4.8:1; the
   dark-theme text tone keeps 9:1 on its surfaces. */
:root[data-panel="baby"] {
  --accent: #c8461f;
  --accent-hover: #b63e1a;
  --accent-active: #a3361a;
  --accent-soft: #f8ebe5;
  --accent-soft-hover: #f4e0d7;
  --accent-border: #efcdbf;
  --accent-text: #ad3c1a;
  --ring: 0 0 0 3px rgba(200, 70, 31, .22);
  --selection: #ffd9cc;
  --ambient-1: rgba(255, 140, 100, .07);
  --ambient-2: rgba(255, 196, 120, .05);
}
:root[data-panel="baby"][data-theme="dark"] {
  --accent: #c8461f;
  --accent-hover: #d4532c;
  --accent-active: #b63e1a;
  --accent-soft: #2c1812;
  --accent-soft-hover: #371d15;
  --accent-border: #6b3426;
  --accent-text: #ffa58b;
  --ring: 0 0 0 3px rgba(255, 140, 110, .38);
  --selection: #5a2a1d;
  --ambient-1: rgba(255, 120, 80, .12);
  --ambient-2: rgba(255, 180, 100, .06);
}

/* Switch dialog: the panel picture, the text and a slider to cross over. */
.modal.panel-switch { --baby: #c8461f; --baby-text: #ad3c1a; width: min(440px, 100%); padding: 0; overflow: hidden; }
[data-theme="dark"] .modal.panel-switch { --baby-text: #ffa58b; }
.panel-switch-hero { position: relative; display: grid; place-items: center; height: 172px; background: radial-gradient(120% 95% at 50% 0%, #ffe1d3 0%, #fff3ec 52%, var(--surface) 100%); }
[data-theme="dark"] .panel-switch-hero { background: radial-gradient(120% 95% at 50% 0%, #43221a 0%, #24150f 55%, var(--surface) 100%); }
.panel-switch-hero .modal-close { position: absolute; top: 12px; right: 12px; }
.panel-switch-hero svg { width: 176px; height: auto; }
.panel-switch-body { padding: 2px 24px 24px; text-align: center; }
.panel-eyebrow { color: var(--baby-text); font-size: 11px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; }
.modal.panel-switch h2 { margin-top: 6px; font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: -.01em; }
.modal.panel-switch .modal-sub { max-width: 40ch; margin: 8px auto 0; }
.switch-track { --x: 0px; --p: 0; position: relative; height: 58px; margin-top: 22px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-sunken); overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.switch-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--x) + 54px); border-radius: inherit; background: linear-gradient(90deg, #ffb796, #f0643f 55%, var(--baby)); opacity: calc(.35 + var(--p) * .65); }
.switch-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding-left: 44px; color: var(--text-secondary); font-size: 13.5px; font-weight: 600; opacity: calc(1 - var(--p) * 2.4); pointer-events: none; }
.switch-label .icon { width: 14px; height: 14px; color: var(--text-muted); }
.switch-knob { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; color: var(--baby); box-shadow: 0 2px 8px rgba(40, 20, 12, .2), 0 0 0 1px rgba(40, 20, 12, .06); transform: translateX(var(--x)); cursor: grab; touch-action: none; }
.switch-knob .icon { width: 20px; height: 20px; stroke-width: 2.1; }
.switch-knob:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200, 70, 31, .35), 0 2px 8px rgba(40, 20, 12, .2); }
.switch-track.dragging .switch-knob { cursor: grabbing; }
.switch-track:not(.dragging) .switch-knob { transition: transform 260ms var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.switch-track:not(.dragging) .switch-fill { transition: width 260ms var(--ease), opacity 260ms var(--ease); }
.switch-track.done .switch-knob { background: var(--baby); color: #fff; }
.panel-stay { margin-top: 10px; }
.panel-switching { display: grid; justify-items: center; gap: 4px; padding: 40px 24px 36px; text-align: center; }
.panel-switching .orbital-loader { position: relative; width: 40px; height: 40px; margin-bottom: 14px; }
.panel-switching .orbital-dot { position: absolute; width: 8px; height: 8px; left: 16px; top: 2px; }
.panel-switching .orbital-dot:nth-child(2) { left: 4px; top: 23px; }
.panel-switching .orbital-dot:nth-child(3) { left: 28px; top: 23px; }
.panel-switching .orbital-dot i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--baby); }
.panel-switching .orbital-dot:nth-child(2) i { opacity: .55; }
.panel-switching .orbital-dot:nth-child(3) i { opacity: .3; }
.panel-switching h2 { font-family: var(--display); }
.panel-switching p { color: var(--text-muted); font-size: 13px; }

/* Subscription dialog: premium violet even when opened from a panel with its own accent. */
.modal.subscribe-modal { --accent: #6a42f0; --accent-hover: #5d35e3; --accent-active: #522bd1; --accent-soft: #f2eeff; --accent-border: #dcd2fd; --accent-text: #5530d8; width: min(420px, 100%); padding: 0; overflow: hidden; }
[data-theme="dark"] .modal.subscribe-modal { --accent: #7253ff; --accent-hover: #6646f2; --accent-active: #5a3be2; --accent-soft: #1f1a36; --accent-border: #3d3172; --accent-text: #b8a8ff; }
.sub-hero { position: relative; display: grid; justify-items: center; gap: 6px; padding: 30px 24px 26px; background: radial-gradient(130% 120% at 50% 0%, #8b5cff 0%, #5a37e6 45%, #2a2f7a 100%); color: #fff; text-align: center; }
.sub-hero .modal-close { position: absolute; top: 12px; right: 12px; color: rgba(255, 255, 255, .85); }
.sub-hero .modal-close:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.sub-crown { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 16px; background: rgba(255, 255, 255, .12); box-shadow: 0 8px 24px rgba(20, 10, 60, .35); }
.sub-crown .icon { width: 26px; height: 26px; }
.modal.subscribe-modal .sub-hero h2 { color: #fff; font-family: var(--display); font-size: 23px; font-weight: 800; letter-spacing: .005em; }
.sub-hero p { color: rgba(255, 255, 255, .82); font-size: 13.5px; }
.sub-body { display: grid; gap: 14px; padding: 20px 24px 24px; }
.sub-body .modal-sub { margin: 0; }
.sub-hero.is-done { background: radial-gradient(130% 120% at 50% 0%, #7d5cff 0%, #4f36d9 50%, #23296e 100%); }
.sub-caption { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.sub-plans { display: grid; gap: 8px; margin-top: -4px; }
.sub-plan { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.sub-plan:hover { border-color: var(--border-strong); }
.sub-plan input { position: absolute; opacity: 0; pointer-events: none; }
.sub-plan-mark { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.sub-plan-copy { display: grid; gap: 1px; flex: 1; min-width: 0; }
.sub-plan-copy strong { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.sub-plan-copy small { color: var(--text-muted); font-size: 12px; }
.sub-plan-badge { padding: 0 7px; border-radius: 999px; background: var(--premium-gradient); color: #fff; font-size: 11px; font-style: normal; font-weight: 650; line-height: 17px; }
.sub-plan-price { flex: none; color: var(--text-primary); font-family: var(--display); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sub-plan:has(input:checked) { border-color: #8b5cff; background: #f7f4ff; box-shadow: 0 0 0 3px rgba(124, 77, 255, .14); }
[data-theme="dark"] .sub-plan:has(input:checked) { background: #1c1832; box-shadow: 0 0 0 3px rgba(140, 100, 255, .22); }
.sub-plan:has(input:checked) .sub-plan-mark { border-color: #7a4cf5; box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 9px #7a4cf5; }
.sub-plan:has(input:focus-visible) { box-shadow: var(--ring); }
.modal.subscribe-modal .sub-buy { --btn-h: 44px; margin-top: 2px; background: var(--premium-gradient); font-size: 14px; }
.modal.subscribe-modal .sub-buy:hover:not(:disabled) { background: var(--premium-gradient); filter: brightness(1.07); }
.sub-until { margin-top: -6px; color: var(--text-secondary); font-size: 12px; text-align: center; }
.sub-note { display: flex; align-items: flex-start; gap: 7px; padding: 9px 11px; border-radius: var(--r-sm); background: var(--surface-subtle); color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.sub-note .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; }

/* Premium gate in front of the panel. */
.premium-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--premium-text); }
.premium-eyebrow .icon { width: 14px; height: 14px; }
.modal.panel-switch .sub-cta { --btn-h: 46px; margin-top: 22px; border: 0; background: var(--premium-gradient); color: #fff; font-size: 14px; box-shadow: 0 6px 18px var(--premium-glow); }
.modal.panel-switch .sub-cta:hover { filter: brightness(1.07); }
.baby-retry { display: flex; justify-content: center; margin-top: -4px; }

/* --------------------------------------------- Baby food panel (operator) */
/* Type follows the shared scale: titles in the display face, everything else Inter at
   12/13/14/15; money and counters use tabular figures. */
.baby-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--accent-text); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.baby-kicker .icon { width: 14px; height: 14px; }
.baby-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.baby-card + .baby-card { margin-top: 16px; }
.baby-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; }
.baby-section-head h2 { color: var(--text-primary); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.baby-section-head p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.baby-empty { padding: 20px 0 6px; color: var(--text-muted); font-size: 13px; text-align: center; }
.baby-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.baby-icon-button { width: 32px; padding: 0; }

/* Status pill: dot + text, never colour alone. */
.baby-status { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 12px; font-weight: 600; white-space: nowrap; }
.baby-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.baby-status .icon { width: 13px; height: 13px; margin: 0 -2px 0 -4px; }
.baby-status:has(.icon)::before { display: none; }
.baby-status.is-arrived { background: var(--success-soft); color: var(--success-text); }
.baby-status.is-on-way, .baby-status.is-bad { background: var(--danger-soft); color: var(--danger-text); }
.baby-status.is-wait, .baby-status.is-warn { background: var(--warning-soft); color: var(--warning-text); }
.baby-status.is-muted { color: var(--text-muted); }

/* Onboarding: hero with the BotFather chat, then the steps beside the token form. */
.baby-onboard { display: grid; gap: 20px; }
.baby-onboard-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: center; gap: 32px; padding: 32px; overflow: hidden; border: 1px solid var(--accent-border); border-radius: var(--r-xl); background: radial-gradient(80% 120% at 100% 0%, var(--accent-soft) 0%, var(--surface) 70%); box-shadow: var(--shadow-sm); }
.baby-onboard-hero .page-title { max-width: 18ch; font-size: 30px; line-height: 1.15; }
.baby-onboard-hero .page-subtitle { max-width: 52ch; margin-top: 10px; font-size: 14px; }
.baby-onboard-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bf-cta { --btn-h: 44px; padding: 0 18px; font-size: 14px; font-weight: 600; }
.baby-onboard-actions .button.ghost { --btn-h: 44px; }
.baby-onboard-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--text-muted); font-size: 12px; }
.baby-onboard-meta .icon { width: 14px; height: 14px; }

/* A miniature Telegram chat: the dialog the operator is about to have, played once. */
.bf-chat { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-md); }
.bf-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); }
.bf-chat-head strong { display: block; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.bf-chat-head small { color: var(--text-muted); font-size: 12px; }
.bf-chat-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #37aee2, #1e96c8); color: #fff; }
.bf-chat-avatar .icon { width: 18px; height: 18px; }
.bf-chat-body { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--surface-subtle); }
.bf-msg { max-width: 86%; padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: var(--surface); color: var(--text-primary); font-size: 13px; line-height: 1.4; box-shadow: var(--shadow-xs); opacity: 0; transform: translateY(6px); animation: bf-msg-in .32s var(--ease) forwards; animation-delay: calc(var(--i) * .55s + .25s); }
.bf-msg.is-me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--accent-soft); color: var(--accent-text); }
.bf-msg code { font-family: var(--mono); font-size: 12px; }
.bf-token { display: block; margin-top: 6px; padding: 5px 8px; border: 1px dashed var(--accent-border); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.bf-msg.is-token .bf-token { animation: bf-token-mark .6s var(--ease) both; animation-delay: calc(var(--i) * .55s + .7s); }
@keyframes bf-msg-in { to { opacity: 1; transform: none; } }
@keyframes bf-token-mark { from { box-shadow: 0 0 0 0 var(--accent-border); } 60% { box-shadow: 0 0 0 4px var(--accent-border); } to { box-shadow: 0 0 0 0 transparent; } }

.baby-onboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: start; gap: 20px; }
.bf-steps-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.bf-steps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bf-steps-head h2 { color: var(--text-primary); font-size: 16px; font-weight: 600; }
.bf-progress-count { color: var(--text-muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.bf-progress { height: 4px; margin: 12px 0 6px; overflow: hidden; border-radius: 999px; background: var(--surface-sunken); }
.bf-progress i { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: var(--accent); transition: width 320ms var(--ease); }
.bf-steps { display: grid; margin: 0; padding: 0; list-style: none; }
/* The rail between marks is the step's own ::before, so it ends at the last step. */
.bf-step { position: relative; display: flex; gap: 14px; padding: 14px 0 14px; opacity: 0; animation: bf-msg-in .35s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1s); }
.bf-step:nth-child(2) { --d: .07; } .bf-step:nth-child(3) { --d: .14; } .bf-step:nth-child(4) { --d: .21; }
.bf-step:not(:last-child)::before { content: ""; position: absolute; top: 46px; bottom: -6px; left: 15px; width: 2px; border-radius: 1px; background: var(--border); transition: background-color var(--dur) var(--ease); }
.bf-step.is-done:not(:last-child)::before { background: var(--accent); }
.bf-step-mark { position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.bf-step-mark .icon { display: none; width: 16px; height: 16px; stroke-width: 2.4; }
.bf-step.is-current .bf-step-mark { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.bf-step.is-done .bf-step-mark { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.bf-step.is-done .bf-step-mark > span { display: none; }
.bf-step.is-done .bf-step-mark .icon { display: block; }
.bf-step-body { min-width: 0; padding-top: 5px; }
.bf-step-body strong { display: block; color: var(--text-primary); font-size: 15px; font-weight: 600; }
.bf-step-body p { margin-top: 4px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.bf-step:not(.is-current):not(.is-done) .bf-step-body strong { color: var(--text-secondary); }
.bf-step-body code { padding: 1px 6px; border-radius: var(--r-xs); background: var(--surface-sunken); color: var(--text-primary); font-family: var(--mono); font-size: 12px; }
.bf-open { margin-top: 12px; }
.bf-command { display: inline-flex; align-items: center; gap: 10px; height: 34px; margin-top: 12px; padding: 0 12px; border: 1px dashed var(--accent-border); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.bf-command:hover { background: var(--accent-soft-hover); }
.bf-command:focus-visible { outline: none; box-shadow: var(--ring); }
.bf-command code { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.bf-command .icon { width: 15px; height: 15px; }

.baby-token-form { position: sticky; top: 16px; padding: 22px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.baby-token-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }
.baby-token-icon .icon { width: 20px; height: 20px; }
.baby-token-form h2 { color: var(--text-primary); font-family: var(--display); font-size: 18px; font-weight: 700; }
.baby-token-sub { margin: 4px 0 16px; color: var(--text-muted); font-size: 13px; }
.baby-token-form .field { margin-top: 0; }
.baby-token-row { position: relative; }
.baby-token-row .input { height: 44px; padding-right: 44px; font-family: var(--mono); font-size: 13px; letter-spacing: .01em; }
.baby-token-row.is-valid .input { border-color: var(--success); }
.baby-token-eye { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); transform: translateY(-50%); cursor: pointer; }
.baby-token-eye:hover { background: var(--surface-hover); color: var(--text-primary); }
.baby-token-eye:focus-visible { outline: none; box-shadow: var(--ring); }
.baby-token-eye .icon { width: 18px; height: 18px; }
.baby-token-form .form-error:empty { display: none; }
.baby-token-form .form-error { margin-top: 8px; }
.baby-token-submit { --btn-h: 44px; margin-top: 14px; font-weight: 600; }
.baby-token-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.baby-token-note .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; }

/* Admin header: the bot as an identity card, actions on the right. */
.baby-admin { display: grid; gap: 20px; }
.baby-admin-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 22px; border: 1px solid var(--accent-border); border-radius: var(--r-xl); background: radial-gradient(70% 160% at 100% 0%, var(--accent-soft) 0%, var(--surface) 65%); box-shadow: var(--shadow-sm); }
.baby-bot-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.baby-bot-avatar { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #ff9a72, var(--accent)); color: #fff; box-shadow: 0 6px 16px rgba(200, 70, 31, .28); }
.baby-bot-avatar .icon { width: 26px; height: 26px; stroke-width: 1.8; }
.baby-bot-copy { min-width: 0; }
.baby-bot-copy .baby-kicker { margin-bottom: 2px; }
.baby-bot-name { color: var(--text-primary); font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.baby-bot-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.baby-bot-title { color: var(--text-muted); font-size: 13px; }
.baby-runtime-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.baby-runtime-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.baby-runtime-status.is-active { background: var(--success-soft); color: var(--success-text); }
.baby-runtime-status.is-error { background: var(--warning-soft); color: var(--warning-text); }
.baby-admin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.baby-runtime-error { display: flex; gap: 10px; flex-basis: 100%; padding: 12px 14px; border: 1px solid var(--warning-border); border-radius: var(--r-ml); background: var(--warning-soft); color: var(--warning-text); }
.baby-runtime-error > .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.baby-runtime-error strong { font-size: 14px; font-weight: 600; }
.baby-runtime-error p { margin-top: 2px; font-size: 13px; overflow-wrap: anywhere; }

/* Tabs: an underline bar like the account sections, scrolling on narrow screens. */
.baby-tabs { display: flex; gap: 2px; margin-top: -4px; border-bottom: 1px solid var(--border); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.baby-tabs::-webkit-scrollbar { display: none; }
.baby-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; height: 42px; padding: 0 12px; border: 0; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color var(--dur-fast) var(--ease); }
.baby-tab .icon { width: 16px; height: 16px; }
.baby-tab::after { content: ""; position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background-color var(--dur-fast) var(--ease); }
.baby-tab:hover { color: var(--text-primary); }
.baby-tab.is-active { color: var(--accent-text); font-weight: 600; }
.baby-tab.is-active::after { background: var(--accent); }
.baby-tab:focus-visible { outline: none; border-radius: var(--r-sm); box-shadow: var(--ring); }
.baby-tab-content { min-height: 280px; }

.baby-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.baby-stat { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.baby-stat-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text-secondary); }
.baby-stat-icon .icon { width: 20px; height: 20px; }
.baby-stat.is-accent .baby-stat-icon { background: var(--accent-soft); color: var(--accent-text); }
.baby-stat.is-info .baby-stat-icon { background: var(--info-soft); color: var(--info-text); }
.baby-stat.is-success .baby-stat-icon { background: var(--success-soft); color: var(--success-text); }
.baby-stat.is-warning .baby-stat-icon { background: var(--warning-soft); color: var(--warning-text); }
.baby-stat small { display: block; color: var(--text-muted); font-size: 13px; }
.baby-stat strong { display: block; margin-top: 2px; color: var(--text-primary); font-size: 24px; font-weight: 650; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.baby-log-list { display: grid; margin: 0; padding: 0; list-style: none; }
.baby-log { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.baby-log:first-child { border-top: 0; padding-top: 2px; }
.baby-log-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text-secondary); }
.baby-log-icon .icon { width: 17px; height: 17px; }
.baby-log.is-success .baby-log-icon { background: var(--success-soft); color: var(--success-text); }
.baby-log.is-info .baby-log-icon { background: var(--info-soft); color: var(--info-text); }
.baby-log.is-warning .baby-log-icon { background: var(--warning-soft); color: var(--warning-text); }
.baby-log.is-danger .baby-log-icon { background: var(--danger-soft); color: var(--danger-text); }
.baby-log.is-accent .baby-log-icon { background: var(--accent-soft); color: var(--accent-text); }
.baby-log-body { flex: 1; min-width: 0; }
.baby-log-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.baby-log-top strong { min-width: 0; color: var(--text-primary); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.baby-log-top time { flex: none; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.baby-log-body p { margin-top: 2px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.baby-log-kind { display: inline-block; margin-top: 4px; color: var(--text-muted); font-size: 12px; }

.baby-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-muted); font-size: 12px; }
.baby-legend span { display: inline-flex; align-items: center; gap: 6px; }
.baby-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.baby-legend .is-on-way::before { background: var(--danger); }
.baby-legend .is-arrived::before { background: var(--success); }
.baby-legend .is-wait::before { background: var(--warning); }
.baby-branch { margin-bottom: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.baby-branch-head { display: flex; align-items: center; gap: 12px; }
.baby-branch-head > div { flex: 1; min-width: 0; }
.baby-branch-head strong { display: block; color: var(--text-primary); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.baby-branch-head small { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.baby-branch-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }
.baby-branch-icon .icon { width: 18px; height: 18px; }
.baby-count { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.baby-number-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.baby-number { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--r-ml); background: var(--surface-subtle); }
.baby-number-main { flex: 1; min-width: 0; }
.baby-number-main strong { display: block; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.baby-number-main small { display: block; margin-top: 2px; overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.baby-number-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); }
.baby-number.is-on-way .baby-number-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.baby-number.is-arrived .baby-number-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.baby-number.is-wait .baby-number-dot, .baby-number.is-warn .baby-number-dot { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }

.baby-user-list, .baby-product-list, .baby-payout-list, .baby-broadcast-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.baby-user { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.baby-user.is-banned { border-color: var(--danger-border); background: var(--danger-soft); }
.baby-user-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 15px; font-weight: 650; }
.baby-user-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.baby-user-head strong { color: var(--text-primary); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.baby-user-main small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.baby-user-main b { color: var(--text-secondary); font-weight: 600; }
.baby-user-balance { text-align: right; }
.baby-user-balance small { display: block; color: var(--text-muted); font-size: 12px; }
.baby-user-balance strong { color: var(--text-primary); font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }

.baby-product { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.baby-product header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.baby-product-title { min-width: 0; }
.baby-product-title strong { display: block; color: var(--text-primary); font-size: 15px; font-weight: 600; line-height: 1.35; }
.baby-product-title small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.baby-product-city { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.baby-product-city .icon { width: 14px; height: 14px; }
.baby-product-title a { color: var(--accent-text); font-variant-numeric: tabular-nums; text-decoration: none; }
.baby-product-title a:hover { text-decoration: underline; text-underline-offset: 2px; }
.baby-product-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--r-ml); background: var(--surface-subtle); }
.baby-product-facts > div { padding: 10px 12px; }
.baby-product-facts > div + div { border-left: 1px solid var(--border-subtle); }
.baby-product-facts dt { color: var(--text-muted); font-size: 12px; }
.baby-product-facts dd { margin: 2px 0 0; color: var(--text-primary); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.baby-city-field { position: relative; grid-column: 1 / -1; }
.baby-city-field > small { display: block; margin-top: 6px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.baby-city-options { position: absolute; z-index: 3; top: calc(100% - 18px); right: 0; left: 0; max-height: 210px; overflow: auto; padding: 4px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-md); }
.baby-city-options[hidden] { display: none; }
.baby-city-option { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.baby-city-option:hover, .baby-city-option:focus-visible { background: var(--surface-hover); }
.baby-city-option small, .baby-city-none { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.baby-city-none { display: block; padding: 9px 10px; }
.baby-limit-preview { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); font-size: 12px; line-height: 1.5; }
.baby-number-open { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 0; background: none; color: var(--text-primary); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.baby-number-open:hover { color: var(--accent-text); }
.baby-number-open .icon { width: 14px; height: 14px; color: var(--text-muted); }
.baby-number-actions { display: flex; align-items: center; gap: 8px; }
.modal.baby-number-modal { width: min(740px, 100%); }
.baby-detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.baby-detail-head > strong { font-size: 16px; }
.baby-detail-tabs { display: flex; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.baby-detail-tabs .button { flex-shrink: 0; }
.baby-detail-tabs [aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
.baby-detail-content { margin-top: 16px; min-width: 0; }
.baby-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.baby-detail-facts dt { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }
.baby-detail-facts dd { color: var(--text-primary); font-size: 13px; margin: 0; overflow-wrap: anywhere; }
.baby-detail-note { color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.baby-detail-title { font-size: 14px; margin: 20px 0 12px; }
.baby-detail-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--text-muted); font-size: 12px; }
.baby-order-card { padding: 16px; margin: 12px 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-subtle); }
.baby-order-card header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 14px; }
.baby-order-card header strong { overflow-wrap: anywhere; min-width: 0; }
.baby-order-card > p { color: var(--text-secondary); font-size: 12px; margin: 8px 0; }
.baby-order-history { display: grid; gap: 8px; padding: 12px 0 0 16px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; }
.baby-order-history time { display: block; color: var(--text-muted); margin-top: 4px; }
.baby-finished-orders > summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; padding: 12px 0; }
.baby-notices .notification-card { margin-top: 12px; }
.baby-notices-more { margin-top: 16px; }
@media (max-width: 480px) {
  .baby-detail-facts { grid-template-columns: 1fr; gap: 12px; }
  .baby-number-actions { margin-left: auto; }
  .baby-detail-tabs { gap: 4px; }
}
.baby-progress-row { display: flex; align-items: center; gap: 12px; }
.baby-progress-row > span { flex: none; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.baby-progress-row b { color: var(--text-primary); font-weight: 600; }
.baby-progress { flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-sunken); }
.baby-progress i { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff9a72, var(--accent)); transition: width var(--dur) var(--ease); }

.baby-broadcast .field { margin-top: 0; }
.baby-broadcast textarea { height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.5; }
.baby-form-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--text-muted); font-size: 12px; }
.baby-counter { flex: none; font-variant-numeric: tabular-nums; }
.baby-form-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.baby-broadcast-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-ml); background: var(--surface-subtle); }
.baby-broadcast-text { min-width: 0; }
.baby-broadcast-text p { color: var(--text-primary); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.baby-broadcast-text small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.baby-payout { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.baby-payout.is-pending { border-color: var(--warning-border); }
.baby-payout-main { display: grid; gap: 8px; min-width: 0; }
.baby-payout-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.baby-payout-top strong { color: var(--text-primary); font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.baby-payout-top small { color: var(--text-muted); font-size: 12px; }
.baby-requisites { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-sm); background: var(--surface-subtle); color: var(--text-secondary); font-family: var(--mono); font-size: 12px; text-align: left; cursor: pointer; }
.baby-requisites span { min-width: 0; overflow-wrap: anywhere; }
.baby-requisites .icon { flex: none; width: 14px; height: 14px; color: var(--text-muted); }
.baby-requisites:hover { border-color: var(--border-strong); }
.baby-payout-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--accent-text); font-size: 13px; text-decoration: none; }
.baby-payout-link .icon { width: 14px; height: 14px; }

.baby-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.baby-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.baby-field.is-wide { grid-column: 1 / -1; }
.baby-field .field { margin: 0; }
.baby-field small { color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.baby-field textarea { height: auto; min-height: 104px; padding: 10px 12px; line-height: 1.5; }
.baby-money { position: relative; }
.baby-money > span { position: absolute; top: 50%; left: 12px; color: var(--text-muted); font-size: 14px; transform: translateY(-50%); pointer-events: none; }
.baby-money .input { padding-left: 26px; font-variant-numeric: tabular-nums; }

/* Dialog forms of the panel. */
.baby-modal-form { display: grid; gap: 6px; margin-top: 16px; }
.baby-modal-form > .field { margin: 0; }
.baby-modal-form > .input + .baby-modal-grid { margin-top: 10px; }
.baby-modal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.baby-modal-grid .field { margin: 0 0 6px; }
.baby-toggle { margin-top: 12px; }
.baby-modal-form .form-error:empty { display: none; }
.baby-modal-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--accent-text); font-size: 13px; font-weight: 500; cursor: pointer; }
.baby-modal-link .icon { width: 15px; height: 15px; }
.baby-modal-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.baby-modal-form .modal-actions { margin-top: 14px; }

@media (max-width: 1000px) {
  .baby-onboard-grid { grid-template-columns: 1fr; }
  .baby-token-form { position: static; }
}
@media (max-width: 800px) {
  .baby-onboard-hero { grid-template-columns: 1fr; gap: 24px; padding: 22px 20px; }
  .baby-onboard-hero .page-title { font-size: 26px; }
  .bf-chat { max-width: 380px; }
  .baby-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baby-user { grid-template-columns: auto minmax(0, 1fr) auto; }
  .baby-user .baby-row-actions { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .baby-onboard-actions .button { width: 100%; }
  .baby-admin-head { padding: 16px; }
  .baby-bot-name { font-size: 18px; }
  .baby-bot-avatar { width: 44px; height: 44px; border-radius: 14px; }
  .baby-admin-actions { width: 100%; }
  .baby-admin-actions .button { flex: 1 1 auto; }
  .baby-card, .bf-steps-card, .baby-token-form { padding: 16px; }
  .baby-stat { gap: 10px; padding: 12px; }
  .baby-stat-icon { width: 34px; height: 34px; }
  .baby-stat strong { font-size: 20px; }
  .baby-settings-grid { grid-template-columns: 1fr; }
  .baby-product-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baby-product-facts > div:nth-child(3) { border-left: 0; }
  .baby-product-facts > div:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
  .baby-number { flex-wrap: wrap; }
  .baby-number-main { flex: 1 1 calc(100% - 22px); }
  .baby-number-main strong { white-space: nowrap; }
  .baby-number .baby-status { margin-left: 22px; }
  .baby-number .button { margin-left: auto; }
  .baby-payout { flex-direction: column; align-items: stretch; }
  .baby-form-actions .button { width: 100%; }
  .baby-modal-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .baby-stat-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-msg, .bf-step { animation: none; opacity: 1; transform: none; }
  .bf-msg.is-token .bf-token { animation: none; }
  .bf-progress i, .baby-progress i { transition: none; }
}

/* The «Детское питание» panel page. */
.baby-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 24px; margin-bottom: 20px; padding: 32px 36px; overflow: hidden; border: 1px solid var(--accent-border); border-radius: var(--r-xl); background: radial-gradient(90% 140% at 100% 0%, var(--accent-soft) 0%, var(--surface) 62%); box-shadow: var(--shadow-sm); }
.baby-hero .page-title { font-size: 34px; }
.baby-hero .page-subtitle { max-width: 58ch; }
.baby-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.baby-art svg { display: block; width: 100%; height: auto; }
.baby-roadmap { padding: 18px 20px 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.baby-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.baby-steps li { position: relative; display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-ml); background: var(--surface-subtle); }
.baby-steps strong { display: block; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.baby-steps small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.baby-step-mark { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); }
.baby-step-mark .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.baby-steps .is-done .baby-step-mark { border-color: var(--success); background: var(--success); color: #fff; }
.baby-steps .is-current { border-color: var(--accent-border); background: var(--accent-soft); }
.baby-steps .is-current .baby-step-mark { border-color: var(--accent); }
.baby-steps .is-current .baby-step-mark::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

@media (max-width: 800px) {
  .baby-hero { grid-template-columns: 1fr; padding: 24px 20px; }
  .baby-art { order: -1; width: min(260px, 80%); margin: 0 auto; }
  .baby-hero .page-title { font-size: 28px; }
  .baby-steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .subscribe-button { justify-content: center; width: 36px; height: 36px; padding: 0; }
  .subscribe-label { display: none; }
  .brand-name { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .switch-track:not(.dragging) .switch-knob, .switch-track:not(.dragging) .switch-fill, .subscribe-button { transition: none; }
}

/* Baby panel navigation in the sidebar (2026-10-09). */
.baby-side-bot { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 18px; padding: 10px 12px; border: 1px solid var(--accent-border); border-radius: var(--r-ml); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 80%); color: var(--text-primary); text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.baby-side-bot:hover { box-shadow: var(--shadow-sm); }
.baby-side-bot:focus-visible { outline: none; box-shadow: var(--ring); }
.baby-side-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #ff9a72, var(--accent)); color: #fff; }
.baby-side-avatar .icon { width: 18px; height: 18px; }
.baby-side-copy { display: grid; flex: 1; min-width: 0; }
.baby-side-copy strong { overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.baby-side-copy small { color: var(--text-muted); font-size: 12px; }
.baby-side-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.baby-side-bot.is-error .baby-side-dot { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.baby-nav { margin-bottom: 4px; }
.baby-nav .nav-item > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-count { flex: none; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 11px; font-weight: 650; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.nav-count.is-alert { background: var(--accent); color: #fff; }
.nav-item.active .nav-count:not(.is-alert) { background: var(--accent-soft); color: var(--accent-text); }
.panel-baby-only { overflow-y: auto; scrollbar-width: none; }
.panel-baby-only::-webkit-scrollbar { display: none; }

/* Page header of every baby page. */
.baby-page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 20px; }
.baby-page-head .page-title { font-size: 26px; }
.baby-page-head .page-subtitle { margin-top: 4px; }
.baby-page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.baby-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.baby-page > .baby-card + .baby-card { margin-top: 0; }

/* Home: stats, then logs beside users and the broadcast composer. */
.baby-home { display: grid; gap: 16px; }
.baby-home .baby-stat-grid { margin-bottom: 0; }
.baby-stat.is-link { width: 100%; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.baby-stat.is-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.baby-stat.is-link:active { transform: scale(.99); }
.baby-stat.is-link:focus-visible { outline: none; box-shadow: var(--ring); }
.baby-home-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); align-items: start; gap: 16px; }
.baby-home-side { display: grid; gap: 16px; }
.baby-home-side .baby-card + .baby-card { margin-top: 0; }
.baby-mini-users { display: grid; margin: 0; padding: 0; list-style: none; }
.baby-mini-users li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-subtle); }
.baby-mini-users li:first-child { border-top: 0; padding-top: 0; }
.baby-mini-users div { flex: 1; min-width: 0; }
.baby-mini-users strong { display: block; overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.baby-mini-users small { color: var(--text-muted); font-size: 12px; }
.baby-mini-users b { flex: none; color: var(--text-primary); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.baby-mini-rank { flex: none; width: 16px; color: var(--text-muted); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.baby-user-avatar.is-small { width: 32px; height: 32px; font-size: 13px; }
.baby-summary { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px; border: 1px solid var(--warning-border); border-radius: var(--r-ml); background: var(--warning-soft); color: var(--warning-text); font-size: 13px; }
.baby-summary span { display: inline-flex; align-items: center; gap: 6px; }
.baby-summary .icon { width: 15px; height: 15px; }
.baby-summary b { font-weight: 650; font-variant-numeric: tabular-nums; }
.baby-danger-zone .baby-section-head p b { color: var(--text-primary); font-weight: 600; }

/* The panel's own confirm / prompt dialogs. */
.modal.baby-dialog { width: min(420px, 100%); }
.modal.baby-dialog h2 { font-family: var(--display); font-size: 20px; font-weight: 700; }
.baby-dialog-form { display: grid; gap: 6px; margin-top: 16px; }
.baby-dialog-form .field { margin: 0; }
.baby-dialog-form .modal-actions { margin-top: 12px; }
.baby-dialog-hint { color: var(--text-muted); font-size: 12px; }
.modal-symbol.danger + .modal-close { color: var(--text-muted); }
.baby-tg-preview { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 6px; padding: 14px; border-radius: var(--r-ml); background: var(--surface-sunken); }
.baby-tg-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ff9a72, var(--accent)); color: #fff; }
.baby-tg-avatar .icon { width: 16px; height: 16px; }
.baby-tg-bubble { max-width: 100%; max-height: 220px; overflow: auto; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface); box-shadow: var(--shadow-xs); scrollbar-width: thin; }
.baby-tg-bubble strong { display: block; margin-bottom: 2px; color: var(--accent-text); font-size: 12px; font-weight: 600; }
.baby-tg-bubble p { color: var(--text-primary); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .baby-home-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .baby-page-head .page-title { font-size: 22px; }
  .baby-page-actions, .baby-page-actions .button { width: 100%; }
}

/* Text fields without native chrome: no spin arrows on numbers, no resize grip; text areas
   grow with their text (autoGrow in baby.js) and scroll only past their max height. */
.input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.input[type="number"]::-webkit-inner-spin-button, .input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }
:where(textarea.input) { padding: 10px 12px; line-height: 1.5; resize: none; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
textarea.input[data-autogrow] { height: auto; min-height: 84px; max-height: 360px; overflow-y: hidden; }
textarea.input[data-autogrow].is-capped { overflow-y: auto; }
textarea.input::-webkit-scrollbar { width: 6px; }
textarea.input::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--border-strong); }
textarea.input::-webkit-scrollbar-button { display: none; height: 0; }
textarea.input::-webkit-resizer { display: none; }

/* ============================================ Motion, home, logs, dropdown (2026-10-09, v3) */

/* Dialogs play their exit before closeModal removes them (app.js). */
/* Only the layer fades (ease-in keeps it readable at first); the card just settles away, so the
   two opacities never multiply into an instant blink. */
.modal-root.is-leaving { z-index: 59; pointer-events: none; animation: overlay-out 160ms ease-out forwards; }
.modal-root.is-leaving .modal { animation: dialog-out 160ms cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes overlay-out { to { opacity: 0; } }
@keyframes dialog-out { to { transform: translateY(10px) scale(.97); } }

/* The page scrollbar blends into the background instead of a bright native track. */
html { scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; }

/* Skeletons keep the shape of the page that is loading. */
.sk { display: block; flex: none; max-width: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--skeleton-highlight) 50%, var(--surface-sunken) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.sk-round { width: 40px; height: 40px; border-radius: 50%; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.sk-row > div { display: grid; flex: 1; gap: 8px; min-width: 0; }
.sk-card { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--r-xl); background: var(--surface); }
.sk-list { display: grid; gap: 12px; }
.sk-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: 8px; }
.sk-form > div { display: grid; gap: 8px; }
.sk-home { display: grid; gap: 22px; }
.sk-hero { display: flex; align-items: center; gap: 14px; padding: 24px; border-radius: 24px; background: var(--surface); }
.sk-hero > div { display: grid; gap: 8px; }
.sk-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding: 6px 0; }
.sk-kpis > div { display: grid; gap: 10px; }
.sk-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; }
.sk-cols > div { display: grid; align-content: start; gap: 6px; }
.bh .baby-home > .sk-home > .sk-hero { display: none; }
@media (max-width: 1100px) { .sk-cols { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .sk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sk-form { grid-template-columns: 1fr; } .sk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Entrances: every page enters in its own rhythm once its data is in (babyReveal). Short, only
   opacity and transform (the GPU composites them), and the wave is capped at a few items so a
   long list never trickles in. */
[data-reveal].is-revealed [data-r] { animation: r-rise 280ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 10) * 26ms); }
[data-reveal="baby-users"].is-revealed [data-r],
[data-reveal="baby-payouts"].is-revealed [data-r],
[data-reveal="baby-broadcasts"].is-revealed [data-r],
[data-reveal="admin-users"].is-revealed [data-r] { animation-name: r-slide; animation-delay: calc(min(var(--i, 0), 10) * 22ms); }
[data-reveal="baby-products"].is-revealed [data-r] { animation-name: r-lift; animation-duration: 320ms; animation-delay: calc(min(var(--i, 0), 6) * 45ms); }
[data-reveal="baby-products"].is-revealed .baby-progress i { animation: r-fill 600ms cubic-bezier(.3, .7, .2, 1) both; animation-delay: 120ms; }
[data-reveal="baby-numbers"].is-revealed [data-r] { animation-name: r-lift; animation-delay: calc(min(var(--i, 0), 8) * 35ms); }
[data-reveal="baby-numbers"].is-revealed .baby-number-dot { animation: r-pop 260ms cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: 160ms; }
[data-reveal="baby-logs"].is-revealed [data-r] { animation-name: r-slide; animation-duration: 240ms; animation-delay: calc(min(var(--i, 0), 12) * 16ms); }
[data-reveal="baby-logs"].is-revealed .bh-event-dot { animation: r-pop 260ms cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(min(var(--i, 0), 12) * 16ms + 60ms); }
[data-reveal="baby"].is-revealed .bh-kpi, [data-reveal="admin"].is-revealed .bh-kpi { animation-name: r-rise; animation-delay: calc(min(var(--i, 0), 6) * 30ms); }
[data-reveal="baby"].is-revealed .bh-bar i, [data-reveal="admin"].is-revealed .bh-bar i { animation: r-grow 460ms cubic-bezier(.25, .8, .25, 1) both; animation-delay: calc(var(--i, 0) * 16ms + 80ms); }
[data-reveal="baby"].is-revealed .bh-event { animation-name: r-slide; }
[data-reveal="baby"].is-revealed .bh-leader-avatar { animation: r-pop 300ms cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(min(var(--i, 0), 6) * 30ms + 80ms); }
@keyframes r-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes r-slide { from { opacity: 0; transform: translateX(-10px); } }
@keyframes r-lift { from { opacity: 0; transform: translateY(12px) scale(.99); } }
@keyframes r-pop { from { opacity: 0; transform: scale(.5); } }
/* Grows by scale, not width: width would lay the page out again on every frame. */
@keyframes r-fill { from { transform: scaleX(0); } }
@keyframes r-grow { from { transform: scaleY(0); } }

/* Telegram avatars: the photo fades in over the coloured initial. */
.baby-user-avatar { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: hsl(var(--h, 18) 70% 91%); color: hsl(var(--h, 18) 55% 34%); font-size: 15px; font-weight: 650; }
.baby-user-avatar.is-small { width: 32px; height: 32px; font-size: 13px; }
.baby-user-avatar b { font-weight: inherit; }
.baby-user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fade-in 260ms var(--ease) both; }
:root[data-theme="dark"] .baby-user-avatar { background: hsl(var(--h, 18) 32% 22%); color: hsl(var(--h, 18) 70% 80%); }

/* ------------------------------------------------------------------ Home */
.bh { gap: 22px; }
.bh-hero { position: relative; isolation: isolate; overflow: hidden; padding: 26px 28px; border: 0; border-radius: 24px; background: linear-gradient(120deg, var(--surface) 0%, var(--surface) 45%, var(--accent-soft) 100%); box-shadow: var(--shadow-sm); }
.bh-glow { position: absolute; z-index: -1; inset: -40% -10% auto auto; width: 420px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 140, 100, .28), transparent); filter: blur(10px); pointer-events: none; }
:root[data-theme="dark"] .bh-glow { background: radial-gradient(closest-side, rgba(255, 120, 80, .2), transparent); }
.bh-hero .baby-bot-avatar { width: 56px; height: 56px; border-radius: 18px; }
.bh-hello { margin: 0 0 2px; color: var(--text-secondary); font-size: 13px; font-weight: 500; }
.bh-hero .baby-bot-name { font-size: 24px; }

/* Key numbers as one ribbon: no boxes, hairlines between the values. */
.bh-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 4px 0; }
.baby-stat.bh-kpi { display: grid; align-content: start; gap: 6px; padding: 6px 18px; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; transform: none; }
.baby-stat.bh-kpi:first-child { padding-left: 2px; border-left: 0; }
.baby-stat.bh-kpi:hover { border-color: var(--border); box-shadow: none; }
.baby-stat.bh-kpi:hover strong { color: var(--accent-text); }
.baby-stat.bh-kpi:focus-visible { border-radius: var(--r-sm); box-shadow: var(--ring); }
.baby-stat.bh-kpi { justify-items: start; text-align: left; }
.bh-kpi-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.bh-kpi-label .icon { width: 15px; height: 15px; }
.bh-kpi.is-accent .bh-kpi-label .icon { color: var(--accent); }
.bh-kpi.is-info .bh-kpi-label .icon { color: var(--info); }
.bh-kpi.is-success .bh-kpi-label .icon { color: var(--success); }
.bh-kpi.is-warning .bh-kpi-label .icon { color: var(--warning); }
.baby-stat.bh-kpi strong { margin: 0; color: var(--text-primary); font-size: 28px; font-weight: 650; line-height: 1.1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease); }
.bh-kpi.is-warning strong { color: var(--warning-text); }

.bh-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); align-items: start; gap: 36px; }
.bh-main, .bh-side { min-width: 0; }
.bh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 12px; }
.bh-side > .bh-head:first-child { margin-top: 0; }
.bh-head h2 { color: var(--text-primary); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.bh-head small { color: var(--text-muted); font-size: 12px; }
.bh-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; border: 0; background: none; color: var(--accent-text); font-size: 13px; font-weight: 500; cursor: pointer; }
.bh-link .icon { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.bh-link:hover .icon { transform: translateX(3px); }
.bh-link:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--ring); }
.bh-empty { display: flex; align-items: center; gap: 8px; padding: 16px 0; color: var(--text-muted); font-size: 13px; }
.bh-empty .icon { width: 16px; height: 16px; }

/* Activity chart. */
.bh-panel { padding: 20px 22px 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-xs); }
.bh-chart-top { display: flex; gap: 28px; margin-bottom: 18px; }
.bh-chart-top > div { display: grid; gap: 2px; }
.bh-chart-top strong { color: var(--text-primary); font-size: 26px; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bh-chart-top strong.is-ok { color: var(--accent-text); }
.bh-chart-top span { color: var(--text-muted); font-size: 12px; }
.bh-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); align-items: end; gap: 6px; }
.bh-day { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.bh-bar { position: relative; width: 100%; max-width: 30px; height: 120px; }
.bh-bar::before { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 2px; background: var(--surface-sunken); }
.bh-bar i { position: absolute; right: 0; bottom: 0; left: 0; height: var(--h); border-radius: 6px 6px 3px 3px; transform-origin: bottom; }
.bh-bar-sent { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
.bh-bar-ok { background: linear-gradient(180deg, #f07a52, var(--accent)); }
.bh-day span { height: 14px; color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.bh-day.is-today span { color: var(--accent-text); font-weight: 650; }
.bh-day:hover .bh-bar-sent { background: var(--accent-soft-hover); }

/* Timeline of events (home and the log page). */
.bh-timeline { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.bh-event { position: relative; display: flex; gap: 14px; padding: 10px 0; }
.bh-event:not(:last-child)::before { content: ""; position: absolute; top: 44px; bottom: -8px; left: 15px; width: 2px; border-radius: 1px; background: var(--border-subtle); }
.bh-event-dot { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-sunken); color: var(--text-secondary); box-shadow: 0 0 0 4px var(--bg); }
.bh-event-dot .icon { width: 16px; height: 16px; }
.bh-event.is-success .bh-event-dot { background: var(--success-soft); color: var(--success-text); }
.bh-event.is-info .bh-event-dot { background: var(--info-soft); color: var(--info-text); }
.bh-event.is-warning .bh-event-dot { background: var(--warning-soft); color: var(--warning-text); }
.bh-event.is-danger .bh-event-dot { background: var(--danger-soft); color: var(--danger-text); }
.bh-event.is-accent .bh-event-dot { background: var(--accent-soft); color: var(--accent-text); }
.bh-event > div { flex: 1; min-width: 0; padding-top: 5px; }
.bh-event-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bh-event-top strong { min-width: 0; color: var(--text-primary); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.bh-event-top time { flex: none; color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.bh-event p { margin-top: 3px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

/* Leaders. */
.bh-leaders { display: grid; margin: 0; padding: 0; list-style: none; }
.bh-leader { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.bh-leader + .bh-leader { border-top: 1px solid var(--border-subtle); }
.bh-leader > div { flex: 1; min-width: 0; }
.bh-leader strong { display: block; overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.bh-leader small { color: var(--text-muted); font-size: 12px; }
.bh-leader > b { flex: none; color: var(--text-primary); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bh-leader-avatar { position: relative; flex: none; }
.bh-leader-avatar > i { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 11px; font-style: normal; font-weight: 700; box-shadow: 0 0 0 2px var(--bg); }
.bh-leader.is-top-1 .bh-leader-avatar > i { background: linear-gradient(135deg, #f7d26b, #e0a526); color: #4a3300; }
.bh-leader.is-top-2 .bh-leader-avatar > i { background: linear-gradient(135deg, #e3e6ec, #b9bfca); color: #33373f; }
.bh-leader.is-top-3 .bh-leader-avatar > i { background: linear-gradient(135deg, #f0b48c, #c9784a); color: #3d1e0b; }

/* Broadcast composer: one line that grows, like a chat input. */
.bh-composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; border: 1px solid var(--border-strong); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.bh-composer:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.bh-composer textarea.input { flex: 1; min-height: 36px; max-height: 180px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 14px; }
.bh-composer textarea.input:focus { box-shadow: none; }
.bh-send { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.bh-send .icon { width: 18px; height: 18px; margin-left: -2px; }
.bh-send:hover { background: var(--accent-hover); transform: scale(1.05); }
.bh-send:active { transform: scale(.95); }
.bh-send:focus-visible { outline: none; box-shadow: var(--ring); }
.bh-note { margin-top: 8px; color: var(--text-muted); font-size: 12px; }

@media (max-width: 1100px) {
  .bh-grid { grid-template-columns: 1fr; gap: 8px; }
  .bh-side > .bh-head:first-child { margin-top: 26px; }
}
@media (max-width: 900px) {
  .bh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .baby-stat.bh-kpi:nth-child(3n + 1) { padding-left: 2px; border-left: 0; }
}
@media (max-width: 600px) {
  .bh-hero { padding: 18px; border-radius: 20px; }
  .bh-hero .baby-bot-name { overflow: hidden; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
  .bh-hero .baby-bot-copy { flex: 1; min-width: 0; }
  .bh-hero .baby-bot-avatar { width: 46px; height: 46px; border-radius: 15px; }
  .bh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .baby-stat.bh-kpi { padding: 4px 14px; }
  .baby-stat.bh-kpi:nth-child(3n + 1) { padding-left: 14px; border-left: 1px solid var(--border); }
  .baby-stat.bh-kpi:nth-child(2n + 1) { padding-left: 2px; border-left: 0; }
  .baby-stat.bh-kpi strong { font-size: 24px; }
  .bh-panel { padding: 16px 14px 12px; }
  .bh-bars { gap: 4px; }
  .bh-bar { height: 96px; }
}

/* ------------------------------------------------------------------ Logs */
.log-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.log-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.log-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.log-chip b { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-muted); font-size: 11px; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; transition: inherit; }
.log-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.log-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.log-chip[aria-pressed="true"] b { background: rgba(255, 255, 255, .22); color: #fff; }
.log-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.log-search { position: relative; flex: 0 1 280px; min-width: 200px; }
.log-search .icon { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; color: var(--text-muted); transform: translateY(-50%); pointer-events: none; }
.log-search .input { height: 36px; padding-left: 36px; border-radius: 999px; }
.log-feed { display: grid; }
.log-day { display: flex; align-items: center; gap: 12px; margin: 22px 0 6px; color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.log-day::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.bh-timeline.is-full .bh-event { padding: 12px 0; }
.log-kind { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 11px; font-weight: 600; }
.log-kind.is-success { background: var(--success-soft); color: var(--success-text); }
.log-kind.is-info { background: var(--info-soft); color: var(--info-text); }
.log-kind.is-warning { background: var(--warning-soft); color: var(--warning-text); }
.log-kind.is-danger { background: var(--danger-soft); color: var(--danger-text); }
.log-kind.is-accent { background: var(--accent-soft); color: var(--accent-text); }
@media (max-width: 600px) {
  .log-chips { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .log-chips::-webkit-scrollbar { display: none; }
  .log-chip { flex: none; }
  .log-search { flex: 1 1 100%; }
}

/* -------------------------------------------------------------- Dropdown */
.fs { position: relative; display: inline-block; }
.fs-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fs-button { display: inline-flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text-primary); font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-xs); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.fs-button > span { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; }
.fs-button > .icon { width: 15px; height: 15px; color: var(--text-muted); }
.fs-caret { display: grid; color: var(--text-muted); transform: rotate(90deg); transition: transform 200ms var(--ease); }
.fs-caret .icon { width: 14px; height: 14px; }
.fs-button:hover { border-color: var(--border-hover); }
.fs-button:focus-visible, .fs.is-open .fs-button { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.fs.is-open .fs-caret { transform: rotate(-90deg); }
.fs-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; display: grid; gap: 2px; min-width: max(100%, 210px); padding: 6px; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left; pointer-events: none; transition: opacity 140ms var(--ease), transform 180ms var(--ease), visibility 0s linear 180ms; }
.fs.is-open .fs-list { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 140ms var(--ease), transform 180ms var(--ease), visibility 0s; }
.fs.is-up .fs-list { top: auto; bottom: calc(100% + 6px); transform: translateY(6px) scale(.98); transform-origin: bottom left; }
.fs.is-up.is-open .fs-list { transform: none; }
.fs.is-right .fs-list { right: 0; left: auto; transform-origin: top right; }
.fs-option { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color 120ms var(--ease), color 120ms var(--ease); }
.fs-option > span { flex: 1; }
.fs-option > .icon { width: 15px; height: 15px; color: var(--text-muted); }
.fs-check { display: grid; color: var(--accent); opacity: 0; transform: scale(.6); transition: opacity 140ms var(--ease), transform 180ms var(--ease); }
.fs-check .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.fs-option:hover, .fs-option:focus-visible { outline: none; background: var(--surface-hover); color: var(--text-primary); }
.fs-option[aria-selected="true"] { color: var(--text-primary); font-weight: 600; }
.fs-option[aria-selected="true"] > .icon { color: var(--accent); }
.fs-option[aria-selected="true"] .fs-check { opacity: 1; transform: none; }
.px-select-wrap .fs { display: block; }
.px-select-wrap > .icon { display: none; }
@media (max-width: 600px) { .px-select-wrap .fs-list { min-width: 100%; } }

/* Sidebar: the active item settles in softly. */
.baby-nav .nav-item { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.baby-nav .nav-item.active .nav-icon { animation: r-pop 320ms cubic-bezier(.3, 1.5, .5, 1) both; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-revealed [data-r], [data-reveal].is-revealed .bh-bar i, [data-reveal].is-revealed .baby-progress i,
  [data-reveal].is-revealed .baby-number-dot, [data-reveal].is-revealed .bh-event-dot, [data-reveal].is-revealed .bh-leader-avatar,
  .baby-user-avatar img, .sk, .baby-nav .nav-item.active .nav-icon { animation: none; }
  .fs-list, .fs-caret, .fs-check { transition: none; }
}

/* Dialogs whose content changes while typing stay pinned near the top: whatever appears below
   them (a parse summary, an error) extends them downwards instead of re-centring them. */
.modal-root:has(> .modal.anchor-top) { align-items: start; padding-top: calc(64px + var(--safe-top)); }
@media (max-width: 600px) {
  .modal-root:has(> .modal.anchor-top) { padding-top: calc(16px + var(--safe-top)); }
  .px-textarea { height: 148px; }
}
@media (prefers-reduced-motion: reduce) { .px-parse { transition: none; } }
.modal.px-add-window .modal-actions .button[type="submit"] { flex: 1.5; }

/* ============================================ Access, Premium home, admin panel (2026-10-09) */

/* Locks: only without Premium (:root.is-locked, applyAccess in panels.js). */
.nav-lock, .entry-lock { display: none; }
:root.is-locked .nav-lock { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-left: auto; border-radius: 7px; background: var(--surface-sunken); color: var(--text-muted); }
:root.is-locked .nav-lock .icon { width: 12px; height: 12px; stroke-width: 2.1; }
:root.is-locked .entry-lock { display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border-radius: 8px; background: var(--surface-sunken); color: var(--text-muted); }
:root.is-locked .entry-lock .icon { width: 13px; height: 13px; }
:root.is-locked .nav-item:has(.nav-lock) > span:nth-child(2) { color: var(--text-secondary); }
:root.is-locked .workspace-search { display: none; }
.admin-only { display: none; }
:root.is-admin .admin-only { display: grid; }
:root[data-panel="baby"] .admin-only { display: none; }

/* The bar charts follow the panel accent (violet in the cabinet, terracotta in «ДП»). */
.bh-bar-ok { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 62%, #fff), var(--accent)); }

/* «Available with Premium» dialog. */
.lock-hero .lock-medal { position: relative; }
.lock-medal > i { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #5a37e6; border-radius: 50%; background: #fff; color: #5a37e6; }
.lock-medal > i .icon { width: 11px; height: 11px; stroke-width: 2.4; }
.lock-perks { display: grid; gap: 10px; margin: 2px 0 6px; padding: 0; list-style: none; }
.lock-perks li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-primary); font-size: 14px; line-height: 1.45; }
.lock-perks .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); stroke-width: 2.4; }
.modal.lock-modal .button.ghost.block { margin-top: -6px; }

/* ---------------------------------------------------------- Premium home */
.premium-home { display: grid; gap: 14px; }
.ph-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 28px; padding: 36px 40px; overflow: hidden; border-radius: 26px; background: radial-gradient(120% 140% at 100% 0%, #8b5cff 0%, #5a37e6 42%, #2a2f7a 100%); color: #fff; box-shadow: 0 18px 48px rgba(70, 40, 190, .28); }
.ph-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 0% 100%, rgba(255, 255, 255, .12), transparent 60%); }
.ph-copy { min-width: 0; }
.ph-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.ph-badge .icon { width: 14px; height: 14px; }
.ph-title { max-width: 22ch; margin-top: 14px; font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.ph-sub { max-width: 54ch; margin-top: 10px; color: rgba(255, 255, 255, .84); font-size: 15px; line-height: 1.55; }
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
.ph-cta { --btn-h: 46px; padding: 0 22px; border: 0; background: #fff; color: #3b22b8; font-size: 15px; font-weight: 700; box-shadow: 0 8px 24px rgba(20, 10, 70, .3); }
.ph-cta:hover:not(:disabled) { background: #f4f0ff; transform: translateY(-1px); }
.ph-cta .icon { width: 18px; height: 18px; }
.ph-price { color: rgba(255, 255, 255, .78); font-size: 14px; }
.ph-price b { color: #fff; font-size: 16px; }
/* A crown on two slow orbits: decoration only, still with reduced motion. */
.ph-orbit { position: relative; display: grid; place-items: center; width: 200px; height: 200px; justify-self: end; grid-column: 2; grid-row: 1; }
.ph-orbit > i { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; animation: ph-spin 18s linear infinite; }
.ph-orbit > i::after { content: ""; position: absolute; top: 12%; left: 12%; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff; }
.ph-orbit > i + i { inset: 30px; border-color: rgba(255, 255, 255, .3); animation-duration: 11s; animation-direction: reverse; }
.ph-orbit > i + i::after { top: auto; bottom: 6%; left: 70%; width: 7px; height: 7px; }
.ph-orbit > span { display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 26px; background: rgba(255, 255, 255, .14); box-shadow: 0 10px 30px rgba(20, 10, 70, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ph-orbit > span .icon { width: 40px; height: 40px; stroke-width: 1.6; }
.ph-copy { grid-column: 1; grid-row: 1; }
@keyframes ph-spin { to { transform: rotate(360deg); } }
.ph-head { margin: 14px 0 0; color: var(--text-primary); font-size: 16px; font-weight: 600; }
.ph-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ph-feature { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.ph-feature:hover { border-color: #c9b9ff; box-shadow: 0 8px 24px rgba(90, 55, 230, .12); transform: translateY(-1px); }
.ph-feature:focus-visible { outline: none; box-shadow: var(--ring); }
.ph-feature-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: #f0ebff; color: #5a37e6; }
:root[data-theme="dark"] .ph-feature-icon { background: #241d42; color: #b8a8ff; }
.ph-feature-icon .icon { width: 22px; height: 22px; }
.ph-feature-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.ph-feature-copy strong { color: var(--text-primary); font-size: 15px; font-weight: 600; }
.ph-feature-copy small { color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.ph-lock { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--surface-sunken); color: var(--text-muted); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ph-lock .icon { width: 15px; height: 15px; }
.ph-feature:hover .ph-lock { background: #5a37e6; color: #fff; }
.ph-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ph-plan { position: relative; display: grid; justify-items: start; gap: 2px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.ph-plan:hover { border-color: #c9b9ff; box-shadow: 0 8px 24px rgba(90, 55, 230, .12); transform: translateY(-1px); }
.ph-plan:focus-visible { outline: none; box-shadow: var(--ring); }
.ph-plan.is-best { border-color: #8b5cff; box-shadow: 0 0 0 3px rgba(124, 77, 255, .12); }
.ph-plan-title { color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.ph-plan strong { color: var(--text-primary); font-family: var(--display); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ph-plan small { color: var(--text-muted); font-size: 12px; }
.ph-plan-badge { position: absolute; top: -10px; right: 14px; padding: 2px 9px; border-radius: 999px; background: var(--premium-gradient); color: #fff; font-size: 11px; font-style: normal; font-weight: 650; }
.premium-home [data-r] { animation: r-rise 300ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 8) * 35ms); }
@media (max-width: 900px) {
  .ph-hero { grid-template-columns: 1fr; padding: 28px 24px; }
  .ph-orbit { display: none; }
  .ph-title { font-size: 26px; }
}
@media (max-width: 600px) {
  .ph-hero { padding: 24px 20px; border-radius: 22px; }
  .ph-title { font-size: 22px; }
  .ph-sub { font-size: 14px; }
  .ph-actions .ph-cta { width: 100%; }
  .ph-features, .ph-plans { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- Outside Telegram */
.tg-only { position: relative; display: grid; place-items: center; min-height: 100dvh; padding: 32px 20px; overflow: hidden; }
.tg-only-glow { position: absolute; inset: 0; pointer-events: none; }
.tg-only-glow i { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(60px); opacity: .5; }
.tg-only-glow i:first-child { top: -180px; left: -120px; background: radial-gradient(closest-side, rgba(124, 77, 255, .5), transparent); }
.tg-only-glow i:last-child { right: -160px; bottom: -200px; background: radial-gradient(closest-side, rgba(55, 174, 226, .45), transparent); }
.tg-only-card { position: relative; width: min(440px, 100%); padding: 34px 30px 28px; border: 1px solid var(--border); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-lg); text-align: center; animation: dialog-in 280ms cubic-bezier(.2, .8, .2, 1) both; }
.tg-only-mark { position: relative; width: 64px; height: 64px; margin: 0 auto 18px; }
.tg-only-mark img, .tg-only-logo { width: 64px; height: 64px; color: var(--text-primary); }
.tg-only-mark > span { position: absolute; right: -10px; bottom: -8px; display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid var(--surface); border-radius: 50%; background: linear-gradient(135deg, #37aee2, #1e96c8); color: #fff; }
.tg-only-mark > span .icon { width: 15px; height: 15px; }
.tg-only-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tg-only-kicker .icon { width: 13px; height: 13px; }
.tg-only-card h1 { margin-top: 8px; color: var(--text-primary); font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1.2; }
.tg-only-text { margin-top: 10px; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.tg-only-steps { display: grid; gap: 10px; margin: 22px 0 22px; padding: 0; list-style: none; text-align: left; }
.tg-only-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-subtle); color: var(--text-primary); font-size: 14px; line-height: 1.45; }
.tg-only-steps b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; }
.tg-only-steps span span { font-weight: 600; }
.button.tg-only-cta { --btn-h: 48px; background: linear-gradient(135deg, #37aee2, #1e88c8); font-size: 15px; font-weight: 650; box-shadow: 0 8px 22px rgba(30, 136, 200, .3); }
.button.tg-only-cta:hover:not(:disabled) { background: linear-gradient(135deg, #2fa4d8, #1a7cb8); }
.tg-only-cta .icon { width: 18px; height: 18px; }
.tg-only-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--text-muted); font-size: 12px; }
.tg-only-note .icon { width: 14px; height: 14px; }

/* ------------------------------------------------------------ Admin panel */
.adm-kicker { color: var(--accent-text); }
.adm-kpi-hint { display: block; color: var(--text-muted); font-size: 12px; font-weight: 500; }
.baby-stat.bh-kpi:disabled { cursor: default; opacity: 1; }
.baby-stat.bh-kpi:disabled:hover strong { color: var(--text-primary); }
.adm-legend { display: flex; gap: 14px; margin-left: auto; color: var(--text-muted); font-size: 12px; }
.adm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.adm-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.adm-legend .is-new::before { background: var(--accent); }
.adm-legend .is-active::before { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
.bh-chart-top { align-items: flex-start; }
.adm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.adm-facts > div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-xs); }
.adm-facts > div > span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-text); }
.adm-facts .icon { width: 17px; height: 17px; }
.adm-facts p { display: grid; min-width: 0; }
.adm-facts b { color: var(--text-primary); font-size: 18px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.adm-facts small { color: var(--text-muted); font-size: 12px; }
.adm-mini-list { display: grid; margin: 0; padding: 0; list-style: none; }
.adm-mini + .adm-mini { border-top: 1px solid var(--border-subtle); }
.adm-mini > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 2px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.adm-mini > button > .icon { width: 15px; height: 15px; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease); }
.adm-mini > button:hover > .icon { transform: translateX(2px); }
.adm-mini-copy { display: grid; flex: 1; min-width: 0; }
.adm-mini-copy strong { overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.adm-mini-copy small { color: var(--text-muted); font-size: 12px; }
.adm-broadcast-cta { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 18px; padding: 16px 18px; border: 0; border-radius: 18px; background: var(--premium-gradient); color: #fff; text-align: left; cursor: pointer; box-shadow: 0 10px 28px var(--premium-glow); transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); }
.adm-broadcast-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.adm-broadcast-cta > span:first-child { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .18); }
.adm-broadcast-cta > span:nth-child(2) { display: grid; flex: 1; }
.adm-broadcast-cta strong { font-size: 15px; font-weight: 650; }
.adm-broadcast-cta small { color: rgba(255, 255, 255, .82); font-size: 12px; }
.adm-broadcast-cta .icon { width: 18px; height: 18px; }

.adm-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 11px; font-weight: 650; white-space: nowrap; }
.adm-badge .icon { width: 12px; height: 12px; }
.adm-badge.is-premium { background: #efe9ff; color: #5530d8; }
:root[data-theme="dark"] .adm-badge.is-premium { background: #241d42; color: #b8a8ff; }
.adm-badge.is-admin { background: var(--info-soft); color: var(--info-text); }
.adm-badge.is-banned { background: var(--danger-soft); color: var(--danger-text); }
.adm-badge.is-baby { background: #fbeee8; color: #ad3c1a; }
:root[data-theme="dark"] .adm-badge.is-baby { background: #2c1812; color: #ffa58b; }

.adm-count { margin: 4px 0 10px; color: var(--text-muted); font-size: 13px; }
.adm-count b { color: var(--text-primary); font-weight: 650; }
.adm-list { display: grid; margin: 0; padding: 4px 0; overflow: hidden; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-xs); list-style: none; }
.adm-row + .adm-row { border-top: 1px solid var(--border-subtle); }
.adm-row > button { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1.2fr) 86px 120px 16px; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.adm-row > button:hover { background: var(--surface-hover); }
.adm-row > button:focus-visible { outline: none; box-shadow: inset var(--ring); }
.adm-row.is-banned .adm-row-main strong { color: var(--text-muted); text-decoration: line-through; }
.adm-row-main { display: grid; min-width: 0; }
.adm-row-main strong { overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.adm-row-main small { overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.adm-row-badges { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.adm-row-stat, .adm-row-seen { display: grid; justify-items: start; }
.adm-row-stat b, .adm-row-seen b { color: var(--text-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.adm-row-stat b { font-size: 15px; font-variant-numeric: tabular-nums; }
.adm-row-stat small, .adm-row-seen small { color: var(--text-muted); font-size: 12px; }
.adm-row > button > .icon { width: 15px; height: 15px; color: var(--text-muted); }
.adm-more { display: flex; justify-content: center; margin-top: 14px; }
.adm-empty { justify-content: center; padding: 32px 0; }
.adm-avatar.is-large { width: 56px; height: 56px; font-size: 20px; }

/* User card. */
.modal.adm-user-modal { width: min(560px, 100%); }
.adm-user-loading .section-loading { padding: 40px 0; }
.adm-user-top { align-items: flex-start; }
.adm-user-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.adm-user-id h2 { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.adm-user-id p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.adm-link { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; cursor: pointer; }
.adm-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.adm-user-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.adm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.adm-stat { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface-subtle); }
.adm-stat small { color: var(--text-muted); font-size: 12px; }
.adm-stat strong { overflow: hidden; color: var(--text-primary); font-size: 15px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.adm-stat span { color: var(--text-muted); font-size: 12px; }
.adm-section { margin-top: 18px; }
.adm-section h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.adm-section h3 .icon { width: 16px; height: 16px; color: var(--accent-text); }
.adm-sublist { display: grid; margin: 0; padding: 0; list-style: none; }
.adm-sublist li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-subtle); font-size: 13px; }
.adm-sublist li:first-child { border-top: 0; }
.adm-sublist b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.adm-sublist small { flex: 1; min-width: 0; overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.adm-sublist.is-purchases span { color: var(--text-secondary); font-weight: 600; }
.adm-grant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adm-grant > span { margin-right: 4px; color: var(--text-secondary); font-size: 13px; }
.adm-user-actions { justify-content: flex-start; }
.adm-user-actions .button { flex: 0 1 auto; }

/* Broadcast composer. */
.adm-composer .field { margin-top: 0; }
.adm-audience { margin: 16px 0 0; padding: 0; border: 0; }
.adm-audience legend { margin-bottom: 8px; color: var(--text-primary); font-size: 13px; font-weight: 500; }
.adm-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-subtle); }
.adm-seg label { position: relative; cursor: pointer; }
.adm-seg input { position: absolute; opacity: 0; pointer-events: none; }
.adm-seg span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; color: var(--text-secondary); font-size: 13px; font-weight: 600; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.adm-seg span b { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-muted); font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.adm-seg input:checked + span { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.adm-seg input:checked + span b { background: var(--accent); color: #fff; }
.adm-seg input:focus-visible + span { box-shadow: var(--ring); }
.adm-toggle { margin-top: 14px; }
.adm-bc-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.adm-bc { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface-subtle); }
.adm-bc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adm-bc-top small { color: var(--text-muted); font-size: 12px; }
.adm-bc > p { color: var(--text-primary); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.adm-bc-error { display: flex; align-items: center; gap: 6px; color: var(--danger-text); font-size: 12px; }
.adm-bc-error .icon { width: 14px; height: 14px; }
.adm-tg-avatar { overflow: hidden; background: none; }
.adm-tg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.adm-tg-button { display: block; margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-text); font-size: 13px; font-weight: 600; text-align: center; }

@media (max-width: 1100px) {
  .adm-row > button { grid-template-columns: auto minmax(0, 1fr) 80px 16px; }
  .adm-row-badges, .adm-row-seen { display: none; }
}
@media (max-width: 800px) {
  .adm-facts { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .adm-row > button { grid-template-columns: auto minmax(0, 1fr) 16px; padding: 12px 14px; }
  .adm-row-stat { display: none; }
  .adm-stats { grid-template-columns: 1fr 1fr; }
  .adm-legend { display: none; }
  .adm-seg { display: grid; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-orbit > i, .premium-home [data-r], .tg-only-card { animation: none; }
}

/* Progress bars follow the panel accent too (violet in the cabinet and the admin panel). */
.baby-progress i { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent)); }

/* A number whose order never reached Wildberries offers a retry. */
.baby-retry-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 10px; margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--warning-border); border-radius: var(--r-ml); background: var(--warning-soft); color: var(--warning-text); }
.baby-retry-note > .icon { width: 18px; height: 18px; margin-top: 1px; }
.baby-retry-note p { font-size: 13px; line-height: 1.45; }
.baby-retry-note .button { grid-column: 2; justify-self: start; }

/* ================================================ Smooth motion (2026-10-09, v4)
   Blur behind a translucent layer is recomputed whenever anything under it changes; with the
   drifting background under the blurred top bar that was every frame — the «10 fps» feel in
   Telegram's WebView. The background stands still, nothing blurs what lies behind it, and the
   skeleton sweep moves by transform instead of repainting its gradient. */
.ambient-texture { animation: none; will-change: auto; transform: none; }
.topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bg) 97%, transparent); }
.modal-root { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root { --overlay: rgba(18, 16, 30, .46); }
.point-confirm { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ph-orbit > span { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .18); }
.ph-orbit > i { will-change: transform; }
.bh-glow, .tg-only-glow i { filter: none; }
.sk { position: relative; overflow: hidden; background: var(--surface-sunken); animation: none; }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent); transform: translateX(-100%); animation: sk-sweep 1.2s ease-in-out infinite; }
@keyframes sk-sweep { to { transform: translateX(100%); } }
.baby-progress i { transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* ====================================== Number card, retry progress, product photos (v5) */
button.baby-number-main { display: grid; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.baby-number-main strong { color: var(--text-primary); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease); }
button.baby-number-main:hover strong { color: var(--accent-text); }
button.baby-number-main:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--ring); }

/* Card of one number. */
.modal.bn-modal { width: min(620px, 100%); padding: 22px 24px 20px; }
.bn-loading .section-loading { padding: 48px 0; }
.bn-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.bn-head .modal-close { margin: -6px -8px 0 0; }
.bn-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--surface-sunken); color: var(--text-secondary); }
.bn-avatar .icon { width: 22px; height: 22px; }
.bn-avatar.is-arrived { background: var(--success-soft); color: var(--success-text); }
.bn-avatar.is-on-way { background: var(--accent-soft); color: var(--accent-text); }
.bn-avatar.is-warn, .bn-avatar.is-wait { background: var(--warning-soft); color: var(--warning-text); }
.bn-avatar.is-bad { background: var(--danger-soft); color: var(--danger-text); }
.bn-title { min-width: 0; }
.bn-title h2 { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-primary); font-family: var(--display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bn-title p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.bn-copy { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-muted); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.bn-copy:hover { background: var(--surface-hover); color: var(--text-primary); }
.bn-copy .icon { width: 15px; height: 15px; }

/* The intake as a five-step track. */
.bn-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 18px 0 4px; padding: 0; list-style: none; }
.bn-track li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.bn-track li::before { content: ""; position: absolute; top: 13px; right: 50%; left: -50%; height: 2px; background: var(--border); }
.bn-track li:first-child::before { display: none; }
.bn-track li.is-done::before, .bn-track li.is-current::before, .bn-track li.is-failed::before { background: var(--accent); }
.bn-track-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: transparent; }
.bn-track-dot .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.bn-track li.is-done .bn-track-dot { border-color: var(--accent); background: var(--accent); color: #fff; }
.bn-track li.is-current .bn-track-dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.bn-track li.is-current .bn-track-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.bn-track li.is-failed .bn-track-dot { border-color: var(--danger); background: var(--danger); color: #fff; }
.bn-track small { color: var(--text-muted); font-size: 11px; font-weight: 500; line-height: 1.25; }
.bn-track li.is-done small, .bn-track li.is-current small { color: var(--text-primary); }
.bn-track li.is-failed small { color: var(--danger-text); }

.bn-product { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: var(--surface-subtle); }
.bn-product-photo, .bn-order-photo, .bp-photo, .baby-product-photo { display: grid; place-items: center; flex: none; overflow: hidden; border-radius: 12px; background: #fff; color: var(--text-muted); }
.bn-product-photo { width: 56px; height: 56px; }
.bn-product-photo img, .bn-order-photo img, .bp-photo img, .baby-product-photo img { width: 100%; height: 100%; object-fit: contain; animation: fade-in 200ms var(--ease) both; }
.bn-product > div:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.bn-product strong { overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bn-product small { color: var(--text-muted); font-size: 12px; }
.bn-product-qty, .bn-product-sum { display: grid; justify-items: end; flex: none; }
.bn-product-qty b { color: var(--accent-text); font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.bn-product-sum b { color: var(--text-primary); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bn-product-qty small, .bn-product-sum small { color: var(--text-muted); font-size: 11px; }

.bn-delivery { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; }
.bn-delivery > span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-text); }
.bn-delivery.is-arrived > span { background: var(--success-soft); color: var(--success-text); }
.bn-delivery .icon { width: 17px; height: 17px; }
.bn-delivery > div { display: grid; flex: 1; min-width: 0; }
.bn-delivery strong { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.bn-delivery small { color: var(--text-muted); font-size: 12px; }
.bn-pvz, .bn-reason { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.bn-pvz .icon, .bn-reason .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent-text); }
.bn-reason { color: var(--warning-text); }
.bn-reason .icon { color: inherit; }

.bn-tabs { display: flex; gap: 4px; margin-top: 18px; padding: 4px; border-radius: 12px; background: var(--surface-sunken); }
.bn-tabs button { flex: 1; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.bn-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.bn-tabs button:disabled { opacity: .45; cursor: default; }
.bn-tabs button:focus-visible { outline: none; box-shadow: var(--ring); }
.bn-body { min-height: 120px; margin-top: 12px; }
.bn-body-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--text-muted); font-size: 12px; }
.bn-history { margin-top: 4px; }
.bn-more { display: flex; justify-content: center; margin-top: 10px; }
.bn-actions { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }

.bn-order { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.bn-body-head + .bn-order { border-top: 0; }
.bn-order-photo { width: 52px; height: 52px; }
.bn-order-main { display: grid; flex: 1; gap: 2px; min-width: 0; }
.bn-order-main strong { overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.bn-order-main small { color: var(--text-muted); font-size: 12px; }
.bn-order-history { display: grid; gap: 2px; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--border-subtle); list-style: none; }
.bn-order-history li { display: flex; justify-content: space-between; gap: 10px; color: var(--text-secondary); font-size: 12px; }
.bn-order-history time { flex: none; color: var(--text-muted); }

/* Retry progress. */
.modal.rp-modal { width: min(420px, 100%); }
.rp { display: grid; justify-items: center; text-align: center; }
.rp h2 { margin-top: 14px; font-family: var(--display); font-size: 20px; font-weight: 700; }
.rp .modal-sub { margin-top: 4px; }
.rp-orb { position: relative; display: grid; place-items: center; width: 84px; height: 84px; }
.rp-orb > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--accent-soft); color: var(--accent-text); }
.rp-orb > span .icon { width: 26px; height: 26px; }
.rp-orb > i { position: absolute; inset: 0; border: 2px solid transparent; border-top-color: var(--accent); border-radius: 50%; animation: spin 900ms linear infinite; }
.rp-orb > i + i { inset: 8px; border-top-color: transparent; border-right-color: color-mix(in srgb, var(--accent) 45%, transparent); animation-duration: 1400ms; animation-direction: reverse; }
.rp-orb.is-done > span { background: var(--success); color: #fff; animation: r-pop 360ms cubic-bezier(.3, 1.5, .5, 1) both; }
.rp-orb.is-failed > span { background: var(--danger-soft); color: var(--danger-text); animation: r-pop 300ms cubic-bezier(.3, 1.4, .5, 1) both; }
.rp-steps { display: grid; gap: 4px; width: 100%; margin: 18px 0 4px; padding: 0; list-style: none; text-align: left; }
.rp-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text-muted); font-size: 14px; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.rp-dot { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--border-strong); border-radius: 50%; color: transparent; transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease); }
.rp-dot .icon { width: 12px; height: 12px; stroke-width: 2.8; }
.rp-steps li.is-current { background: var(--accent-soft); color: var(--text-primary); font-weight: 600; }
.rp-steps li.is-current .rp-dot { border-color: var(--accent); border-right-color: transparent; animation: spin 800ms linear infinite; }
.rp-steps li.is-done { color: var(--text-secondary); }
.rp-steps li.is-done .rp-dot { border-color: var(--success); background: var(--success); color: #fff; }
.rp-pvz { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--text-secondary); font-size: 13px; }
.rp-pvz .icon { width: 15px; height: 15px; color: var(--accent-text); }
.rp .modal-actions { width: 100%; }

/* Product photos: the add dialog preview and the catalog. */
.bp-preview { display: none; align-items: center; gap: 12px; margin: 8px 0 2px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-subtle); }
.bp-preview.is-shown { display: flex; animation: r-rise 220ms var(--ease) both; }
.bp-photo { width: 52px; height: 52px; }
.bp-photo .sk { width: 52px; height: 52px; border-radius: 12px; }
.bp-preview > div { display: grid; flex: 1; gap: 6px; min-width: 0; }
.bp-preview strong { overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bp-preview small { color: var(--text-muted); font-size: 12px; }
.baby-product header { align-items: center; }
.baby-product-photo { width: 56px; height: 56px; border: 1px solid var(--border-subtle); }
.baby-product-title { flex: 1; }

@media (max-width: 600px) {
  .modal.bn-modal { padding: 18px 16px 16px; }
  .bn-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .bn-head > .baby-status { grid-column: 2; justify-self: start; }
  .bn-title h2 { font-size: 18px; }
  .bn-track small { font-size: 10px; }
  .bn-product { flex-wrap: wrap; }
  .bn-product-sum { justify-items: start; }
  .bn-delivery { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-orb > i, .rp-steps li.is-current .rp-dot { animation: none; }
}

/* Number card v2: units of one order, the account tab, finished orders. */
.bn-order-photo { position: relative; }
.bn-order-count { position: absolute; right: 3px; bottom: 3px; padding: 1px 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; font-variant-numeric: tabular-nums; }
.bn-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 4px 0 0; }
.bn-facts div { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-subtle); }
.bn-facts dt { color: var(--text-muted); font-size: 12px; }
.bn-facts dd { margin: 0; overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bn-finished { margin-top: 6px; }
.bn-finished summary { padding: 8px 0; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.bn-finished summary::-webkit-details-marker { display: none; }
.bn-finished summary::after { content: "›"; display: inline-block; margin-left: 6px; transition: transform var(--dur-fast) var(--ease); }
.bn-finished[open] summary::after { transform: rotate(90deg); }
.bn-sk { display: grid; gap: 14px; padding-top: 6px; }
.bn-sk .sk-row { display: flex; align-items: center; gap: 12px; }
.bn-sk .sk-row > div { display: grid; flex: 1; gap: 8px; }
/* On its way is the normal state, not an error: accent, not red. */
.baby-status.is-on-way { background: var(--accent-soft); color: var(--accent-text); }
.baby-number.is-on-way .baby-number-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.baby-legend .is-on-way::before { background: var(--accent); }
@media (max-width: 600px) { .bn-facts { grid-template-columns: 1fr; } }

/* Number card: the status sits on the product line and wraps under it when narrow. */
.bn-order-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.bn-order-top strong { flex: 1 1 160px; min-width: 0; overflow: hidden; color: var(--text-primary); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.bn-order-history li { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.bn-delivery > div { flex: 1 1 200px; }
.bn-delivery > .button { margin-left: auto; }
@media (max-width: 600px) {
  .bn-head { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
  .bn-head .bn-avatar { grid-row: 1 / span 2; align-self: start; }
  .bn-head .bn-title { grid-column: 2; grid-row: 1; }
  .bn-head .modal-close { grid-column: 3; grid-row: 1; align-self: start; }
  .bn-head > .baby-status { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
  .bn-product { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 12px; }
  .bn-product-photo { grid-row: 1 / span 2; }
  .bn-product-sum { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 6px; justify-items: initial; }
  .bn-order-history li { grid-template-columns: 1fr; gap: 0; }
}
.bn-title h2 { white-space: nowrap; }
@media (max-width: 360px) {
  .bn-avatar { width: 38px; height: 38px; border-radius: 12px; }
  .bn-title h2 { font-size: 16px; }
  .bn-track small { font-size: 9.5px; }
}

/* Units of one order: what is at the pickup, what is still coming and when. */
.bn-units { display: grid; gap: 2px; margin: 6px 0 0; padding: 6px 14px; border-radius: 14px; background: var(--surface-subtle); list-style: none; }
.bn-units li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; color: var(--text-secondary); font-size: 13px; }
.bn-units li + li { border-top: 1px solid var(--border-subtle); }
.bn-units b { color: var(--text-primary); font-weight: 650; font-variant-numeric: tabular-nums; }
.bn-units span:not(.bn-units-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-units time { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.bn-units-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bn-units .is-arrived .bn-units-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.bn-units .is-bad .bn-units-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.bn-units .is-arrived span:not(.bn-units-dot) { color: var(--success-text); }
@media (max-width: 420px) {
  .bn-units li { grid-template-columns: auto auto minmax(0, 1fr); }
  .bn-units time { grid-column: 3; }
}

/* ====================================== «Эмуляция» (daily buyer behaviour) */
.wm-hero { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--border-subtle); border-radius: 20px; background: var(--surface); margin-bottom: 14px; }
.wm-hero.is-on { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: linear-gradient(120deg, var(--accent-soft), var(--surface) 70%); }
.wm-orb { position: relative; display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 17px; background: var(--surface-sunken); color: var(--text-muted); }
.wm-orb .icon { width: 25px; height: 25px; z-index: 1; }
.wm-hero.is-on .wm-orb { background: var(--accent); color: #fff; }
.wm-hero.is-on .wm-orb > i { position: absolute; inset: -4px; border-radius: 21px; border: 2px solid var(--accent); opacity: .4; animation: wm-pulse 2.4s ease-out infinite; }
@keyframes wm-pulse { 0% { transform: scale(.85); opacity: .5; } 100% { transform: scale(1.25); opacity: 0; } }
.wm-hero-copy { flex: 1; min-width: 0; }
.wm-hero-copy h2 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--text-primary); }
.wm-hero-copy p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.wm-state { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.wm-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.wm-hero.is-on .wm-state { color: var(--accent-text); }
.wm-hero.is-on .wm-state i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: wm-blink 1.6s ease-in-out infinite; }
@keyframes wm-blink { 50% { opacity: .35; } }
.wm-master { position: relative; flex: none; width: 52px; height: 30px; cursor: pointer; }
.wm-master input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.wm-master span { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: background-color var(--dur) var(--ease); }
.wm-master span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(20, 20, 35, .3); transition: transform var(--dur) var(--ease); }
.wm-master input:checked + span { background: var(--accent); }
.wm-master input:checked + span::after { transform: translateX(22px); }
.wm-master input:focus-visible + span { box-shadow: var(--ring); }

.wm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.wm-stats > div { padding: 12px 14px; border-radius: 15px; background: var(--surface-subtle); }
.wm-stats span { display: block; color: var(--text-muted); font-size: 12px; }
.wm-stats strong { display: block; margin-top: 3px; color: var(--text-primary); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wm-stats .is-bad strong { color: var(--danger-text); }

.wm-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-bottom: 14px; transition: opacity var(--dur) var(--ease); }
.wm-grid.is-off { opacity: .5; pointer-events: none; }
.wm-card { padding: 16px 18px; }
.wm-actions { display: grid; gap: 4px; }
.wm-opt { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-radius: 12px; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.wm-opt:hover { background: var(--surface-subtle); }
.wm-opt-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-text); }
.wm-opt-icon .icon { width: 17px; height: 17px; }
.wm-opt-copy { flex: 1; min-width: 0; }
.wm-opt-copy strong { display: block; color: var(--text-primary); font-size: 14px; font-weight: 600; }
.wm-opt-copy small { display: block; margin-top: 1px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.wm-opt .toggle-control { flex: none; }

.wm-day { display: flex; gap: 2px; height: 44px; margin: 4px 0 2px; align-items: flex-end; }
.wm-day i { flex: 1; height: 45%; border-radius: 3px; background: var(--surface-sunken); transition: height var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.wm-day i.is-on { height: 100%; background: var(--accent-soft); }
.wm-day i.is-now { background: var(--accent); }
.wm-day-scale { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 10px; margin-bottom: 12px; }
.wm-window { display: flex; gap: 10px; }
.wm-window label { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--text-secondary); font-size: 13px; }
.wm-hour { flex: 1; }
.wm-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.wm-note .icon { flex: none; width: 15px; height: 15px; margin-top: 1px; }

.wm-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.wm-acc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 15px; background: var(--surface); }
.wm-acc.is-failed { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.wm-acc-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--success-soft); color: var(--success-text); }
.wm-acc.is-failed .wm-acc-icon { background: var(--danger-soft); color: var(--danger-text); }
.wm-acc-icon .icon { width: 16px; height: 16px; }
.wm-acc-main { flex: 1; min-width: 0; }
.wm-acc-main strong { display: flex; align-items: center; gap: 7px; color: var(--text-primary); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wm-acc-main small { display: block; margin-top: 1px; overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.wm-tag { padding: 1px 7px; border-radius: 999px; background: var(--warning-soft); color: var(--warning-text); font-size: 10px; font-weight: 700; }
.wm-acc-next { flex: none; text-align: right; }
.wm-acc-next small { display: block; color: var(--text-muted); font-size: 11px; }
.wm-acc-next b { color: var(--text-primary); font-size: 12.5px; font-weight: 600; }
@media (max-width: 700px) {
  .wm-grid { grid-template-columns: 1fr; }
  .wm-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .wm-hero { flex-wrap: wrap; }
  .wm-acc-next { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-hero.is-on .wm-orb > i, .wm-hero.is-on .wm-state i { animation: none; }
}

/* Grid items keep min-content width by default; let the account rows shrink and clip. */
.wm-acc { min-width: 0; }
.wm-acc-main strong { min-width: 0; overflow: hidden; }

/* Cabinet: hide-unneeded toggle and the «Детское питание» misfit tag. */
.toolbar { flex-wrap: wrap; }
.toolbar .acc-hide-baby { margin-left: auto; white-space: nowrap; }
.baby-acc-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--warning-soft); color: var(--warning-text); font-size: 11px; font-weight: 650; }
.baby-acc-tag .icon { width: 12px; height: 12px; }
.baby-acc-tag.is-ban { background: var(--danger-soft); color: var(--danger-text); }

/* ====================================== «Номера» v7: folders, pickups, unit rings, rows */
.nb-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }

/* A pickup: header with the arrived score, the fill bar, then its accounts as flat rows. */
.nb-pickups { display: grid; gap: 14px; }
.nb-pickup { min-width: 0; padding: 16px 18px 4px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface); }
.nb-pickup.is-done { border-color: color-mix(in srgb, var(--success) 38%, var(--border-subtle)); }
.nb-pickup-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.nb-pickup-pin { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.nb-pickup.is-full .nb-pickup-pin { background: var(--info-soft); color: var(--info-text); }
.nb-pickup.is-done .nb-pickup-pin { background: var(--success-soft); color: var(--success-text); }
.nb-pickup-pin .icon { width: 20px; height: 20px; }
.nb-pickup-title { min-width: 0; }
.nb-pickup-title strong { display: block; overflow: hidden; color: var(--text-primary); font-size: 15px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.nb-pickup-title small { display: block; margin-top: 2px; overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.nb-score { display: grid; justify-items: end; gap: 3px; }
.nb-score > b { color: var(--text-primary); font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.nb-score > b small { margin-left: 1px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.nb-score em { color: var(--text-muted); font-size: 11px; font-style: normal; }
.nb-pickup.is-done .nb-score > b { color: var(--success-text); }

.nb-meter { margin: 14px 0 0; }
.nb-meter-bar { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-sunken); }
.nb-meter-bar i { height: 100%; border-radius: 2px; transition: width var(--dur-slow) var(--ease); }
.nb-meter-bar i:first-child { border-radius: 999px 2px 2px 999px; }
.nb-meter-bar i.is-arrived { background: var(--success); }
.nb-meter-bar i.is-way { background: var(--info); }
.nb-meter-bar i.is-pending { background: var(--warning); }
.nb-meter-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; color: var(--text-muted); font-size: 12px; }
.nb-meter-stats > span[class^="is-"] { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.nb-meter-stats > span[class^="is-"]::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.nb-meter-stats b { color: var(--text-primary); font-weight: 650; font-variant-numeric: tabular-nums; }
.nb-meter-stats .is-arrived::before { background: var(--success); }
.nb-meter-stats .is-way::before { background: var(--info); }
.nb-meter-stats .is-pending::before { background: var(--warning); }
.nb-meter-stats .is-free::before { background: var(--border-strong); }
.nb-state { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 650; white-space: nowrap; }
.nb-state .icon { width: 12px; height: 12px; }
.nb-state.is-full { background: var(--info-soft); color: var(--info-text); }
.nb-state.is-done { background: var(--success-soft); color: var(--success-text); }
.nb-lost { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--danger-soft); color: var(--danger-text); font-size: 12.5px; line-height: 1.4; }
.nb-lost .icon { flex: none; width: 15px; height: 15px; margin-top: 1px; }

.nb-rows { margin: 12px -8px 0; padding: 0; list-style: none; border-top: 1px solid var(--border-subtle); }
.nb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px; padding: 9px 8px; border-bottom: 1px solid var(--border-subtle); }
.nb-row:last-child { border-bottom: 0; }
.nb-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 2px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nb-row-main:focus-visible { outline: none; box-shadow: var(--ring); }
.nb-row-copy { display: grid; gap: 1px; min-width: 0; }
.nb-row-copy strong { color: var(--text-primary); font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease); }
.nb-row-main:hover .nb-row-copy strong { color: var(--accent-text); }
.nb-row-copy small { overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.nb-row > .baby-status { justify-self: end; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-row-actions { display: flex; align-items: center; gap: 6px; }
.nb-row.is-warn .nb-row-copy small { color: var(--warning-text); }

/* The account's units at the pickup, as a ring: 2/6 — two of six are there. */
.nb-ring { --tone: var(--info); position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(var(--tone) calc(var(--p, 0) * 1%), var(--surface-sunken) 0); color: var(--text-primary); }
.nb-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface); }
.nb-ring > * { position: relative; }
.nb-ring b { font-size: 10px; font-weight: 700; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.nb-ring .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.nb-ring.is-done { --tone: var(--success); color: var(--success-text); }
.nb-ring.is-warn, .nb-ring.is-wait, .nb-ring.is-bad { background: var(--surface-sunken); }
.nb-ring.is-warn::before, .nb-ring.is-wait::before, .nb-ring.is-bad::before { display: none; }
.nb-ring.is-warn { background: var(--warning-soft); color: var(--warning-text); }
.nb-ring.is-wait { color: var(--text-muted); }
.nb-ring.is-bad { background: var(--danger-soft); color: var(--danger-text); }

/* «Ненужные» / «Бан»: what the folder holds, above its list (rows: «Номера» v8). */
.nb-hint { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px; padding: 10px 14px; border-radius: 13px; background: var(--surface-subtle); color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.nb-hint .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--info-text); }

/* «В пути» is calm progress (info), not the brand's warning-like orange. */
.baby-status.is-on-way { background: var(--info-soft); color: var(--info-text); }
.bn-avatar.is-on-way { background: var(--info-soft); color: var(--info-text); }
.bn-delivery.is-on-way > span { background: var(--info-soft); color: var(--info-text); }
.bn-units-dot { background: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }

/* Header «Обновить»: an icon on phones, so the title keeps the row. */
@media (max-width: 600px) {
  .baby-page-head.has-refresh { flex-wrap: nowrap; align-items: flex-start; }
  .baby-page-head.has-refresh > div:first-child { min-width: 0; }
  .baby-page-head.has-refresh .baby-page-actions { flex: none; width: auto; }
  .baby-page-head.has-refresh .baby-page-actions .button { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .baby-refresh span { display: none; }
}

@media (max-width: 600px) {
  .nb-top { gap: 10px; margin-bottom: 14px; }
  .nb-pickup { padding: 14px 14px 2px; border-radius: 16px; }
  .nb-pickup-head { gap: 10px; }
  .nb-pickup-pin { width: 36px; height: 36px; border-radius: 11px; }
  .nb-pickup-title strong { font-size: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .nb-score > b { font-size: 18px; }
  .nb-meter-stats { gap: 5px 12px; }
  .nb-rows { margin: 10px -6px 0; }
  .nb-row { grid-template-columns: minmax(0, 1fr) auto; padding: 9px 6px; }
  .nb-row-main { gap: 10px; }
  .nb-row-copy small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .nb-row > .baby-status { max-width: 42vw; }
  .nb-row-actions { grid-column: 1 / -1; padding-left: 48px; }
}
@media (max-width: 360px) {
  .nb-ring { width: 32px; height: 32px; }
  .nb-row-actions { padding-left: 44px; }
  .nb-meter-stats { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .nb-meter-bar i { transition: none; } }

/* «Номера» v7.1: very narrow phones stack the row. */
@media (max-width: 359px) {
  .nb-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .nb-row > .baby-status { justify-self: start; max-width: 100%; margin-left: 42px; }
  .nb-row-actions { padding-left: 42px; }
}

/* ====================================== «Номера» v8: sliding tabs, folder transitions, manage tiles */
/* Segmented control: equal segments, one thumb that slides (and follows a drag). */
.nb-folders { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 372px; max-width: 100%; padding: 3px; border-radius: 13px; background: var(--surface-sunken); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.nb-folders-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 2px rgba(20, 20, 35, .08), 0 2px 8px rgba(20, 20, 35, .06); transform: translateX(calc(var(--tab, 0) * 100%)); transition: transform 380ms cubic-bezier(.3, 1.3, .45, 1); will-change: transform; pointer-events: none; }
.nb-folders.is-dragging .nb-folders-thumb { transform: translateX(var(--drag, 0px)) scale(1.03); transition: transform 60ms linear; box-shadow: 0 2px 4px rgba(20, 20, 35, .1), 0 6px 16px rgba(20, 20, 35, .12); }
.nb-folder { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 200ms var(--ease), transform 160ms var(--ease); }
.nb-folder:hover { color: var(--text-primary); }
.nb-folder:active { transform: scale(.97); }
.nb-folder.is-active, .nb-folder.is-over { background: none; box-shadow: none; color: var(--text-primary); }
/* While dragging, only the folder under the thumb is lit; the pressed tab does not shrink. */
.nb-folders.is-dragging .nb-folder { transform: none; }
.nb-folders.is-dragging .nb-folder.is-active:not(.is-over) { color: var(--text-secondary); }
.nb-folder:focus-visible { outline: none; box-shadow: var(--ring); }
.nb-folder b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--text-muted) 16%, transparent); color: var(--text-muted); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.nb-folder.is-active[data-kind="main"] b { background: var(--accent-soft); color: var(--accent-text); }
.nb-folder.is-active[data-kind="unneeded"] b { background: var(--warning-soft); color: var(--warning-text); }
.nb-folder.is-active[data-kind="ban"] b { background: var(--danger-soft); color: var(--danger-text); }
[data-theme="dark"] .nb-folders-thumb { background: color-mix(in srgb, var(--surface) 82%, #fff 18%); }

/* Folder switch: the content leaves toward the old tab and comes in from the new one. */
.nb-body { --dir: 1; }
.nb-body.is-out { opacity: 0; transform: translateX(calc(var(--dir) * -18px)); transition: opacity 140ms ease, transform 140ms ease; }
.nb-body.is-in { animation: nb-body-in 300ms cubic-bezier(.2, .8, .2, 1) both; }
#baby-page .nb-body.is-in [data-r] { animation: nb-item-in 340ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 8) * 32ms + 40ms); }
@keyframes nb-body-in { from { opacity: 0; transform: translateX(calc(var(--dir) * 22px)); } to { opacity: 1; transform: none; } }
@keyframes nb-item-in { from { opacity: 0; transform: translateX(calc(var(--dir) * 14px)); } to { opacity: 1; transform: none; } }

/* «Ненужные» / «Бан»: one card, each number a single tappable row. */
.nb-flist { padding: 4px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface); }
.nb-flist ul { margin: 0; padding: 0; list-style: none; }
.nb-frow { position: relative; display: flex; align-items: center; gap: 4px; }
.nb-frow + .nb-frow::before { content: ""; position: absolute; top: 0; right: 14px; left: 66px; height: 1px; background: var(--border-subtle); }
.nb-frow-main { display: flex; flex: 1; align-items: center; gap: 13px; min-width: 0; padding: 12px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 180ms var(--ease), transform 160ms var(--ease); }
.nb-frow-main:hover { background: var(--surface-hover); }
.nb-frow-main:active { transform: scale(.995); background: var(--surface-active, var(--surface-hover)); }
.nb-frow-main:focus-visible { outline: none; box-shadow: var(--ring); }
.nb-frow-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--warning-soft); color: var(--warning-text); }
.nb-frow.is-ban .nb-frow-icon { background: var(--danger-soft); color: var(--danger-text); }
.nb-frow-icon .icon { width: 19px; height: 19px; }
.nb-frow-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.nb-frow-copy strong { overflow: hidden; color: var(--text-primary); font-size: 14.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.nb-frow-copy small { overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.nb-reason { color: var(--warning-text); font-weight: 600; }
.nb-frow.is-ban .nb-reason { color: var(--danger-text); }
.nb-manage { display: inline-flex; align-items: center; gap: 2px; flex: none; height: 32px; padding: 0 8px 0 13px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 650; transition: background-color 180ms var(--ease), gap 200ms var(--ease); }
.nb-manage .icon, .nb-side .icon { width: 16px; height: 16px; }
.nb-frow-main:hover .nb-manage { gap: 5px; background: color-mix(in srgb, var(--accent) 18%, var(--accent-soft)); }
.nb-side { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--text-muted); font-size: 12px; }
.nb-side em { font-style: normal; }

/* Manage: the cabinet sections of one kept session. */
.modal.nm-modal { width: min(560px, 100%); padding: 22px 22px 18px; }
.nm-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.nm-head .modal-close { align-self: start; margin: -6px -6px 0 0; }
.nm-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--warning-soft); color: var(--warning-text); }
.nm-icon .icon { width: 22px; height: 22px; }
.nm-title h2 { margin: 0; color: var(--text-primary); font-family: var(--display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nm-title p { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; }
.nm-lead { margin: 18px 0 10px; color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.nm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nm-tile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 12px 12px 12px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 180ms var(--ease), background-color 180ms var(--ease), transform 160ms var(--ease), box-shadow 180ms var(--ease); animation: nm-tile-in 320ms cubic-bezier(.2, .8, .2, 1) both; }
.nm-tile:nth-child(2) { animation-delay: 30ms; } .nm-tile:nth-child(3) { animation-delay: 60ms; } .nm-tile:nth-child(4) { animation-delay: 90ms; }
.nm-tile:nth-child(5) { animation-delay: 120ms; } .nm-tile:nth-child(6) { animation-delay: 150ms; }
.nm-tile:hover { border-color: var(--border-strong); background: var(--surface-hover); box-shadow: var(--shadow-xs); }
.nm-tile:active { transform: scale(.985); }
.nm-tile:focus-visible { outline: none; box-shadow: var(--ring); }
.nm-tile > .icon { flex: none; width: 16px; height: 16px; color: var(--text-muted); transition: transform 180ms var(--ease); }
.nm-tile:hover > .icon { transform: translateX(2px); }
.nm-tile-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.nm-tile-icon .icon { width: 18px; height: 18px; }
.nm-tile-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.nm-tile-copy strong { color: var(--text-primary); font-size: 14px; font-weight: 600; }
.nm-tile-copy small { display: -webkit-box; overflow: hidden; color: var(--text-muted); font-size: 12px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nm-foot { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
@keyframes nm-tile-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Switches: a springy knob, a short squash while pressed, and dragging that follows the finger. */
.toggle-control input { touch-action: pan-y; transition: background-color 240ms var(--ease), box-shadow 180ms var(--ease); }
.toggle-control input::before { transition: transform 320ms cubic-bezier(.34, 1.45, .5, 1), width 180ms var(--ease); }
.toggle-control input:active::before { width: 20px; }
.toggle-control input:checked:active::before { transform: translateX(12px); }
.toggle-control.is-dragging input, .toggle-control.is-dragging input:checked { background: var(--border-strong); transition: background-color 120ms var(--ease); }
.toggle-control.is-dragging.is-past-half input, .toggle-control.is-dragging.is-past-half input:checked { background: var(--accent); }
.toggle-control.is-dragging input::before, .toggle-control.is-dragging input:checked::before { width: 16px; transform: translateX(var(--drag-x)) !important; transition: none !important; }
.wm-master { touch-action: pan-y; }
.wm-master span { transition: background-color 260ms var(--ease), box-shadow 180ms var(--ease); }
.wm-master span::after { transition: transform 340ms cubic-bezier(.34, 1.45, .5, 1), width 180ms var(--ease); }
.wm-master input:active + span::after { width: 29px; }
.wm-master input:checked:active + span::after { transform: translateX(17px); }
.wm-master.is-dragging span, .wm-master.is-dragging input:checked + span { background: var(--border-strong); transition: background-color 120ms var(--ease); }
.wm-master.is-dragging.is-past-half span, .wm-master.is-dragging.is-past-half input:checked + span { background: var(--accent); }
.wm-master.is-dragging span::after, .wm-master.is-dragging input:checked + span::after { width: 24px; transform: translateX(var(--drag-x)) !important; transition: none !important; }

@media (max-width: 600px) {
  .nb-folders { width: 100%; }
  .nb-folder { padding: 0 6px; }
  .nb-flist { padding: 2px; border-radius: 16px; }
  .nb-frow-main { gap: 11px; padding: 11px 10px; }
  .nb-frow + .nb-frow::before { left: 60px; right: 10px; }
  .nb-frow-icon { width: 38px; height: 38px; }
  .nb-manage { padding: 0 6px 0 10px; font-size: 12.5px; }
  .nb-side em { display: none; }
  .nb-frow-copy small { display: -webkit-box; white-space: normal; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .modal.nm-modal { padding: 18px 16px 14px; }
  .nm-grid { grid-template-columns: 1fr; gap: 6px; }
}
/* Narrow phones: the number keeps its width, «Управлять» becomes its arrow. */
@media (max-width: 370px) {
  .nb-manage { width: 32px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .nb-manage .icon { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-folders-thumb, .nb-folder, .nm-tile, .toggle-control input::before, .wm-master span::after { transition: none; }
  .nb-body.is-out { transition: none; }
  .nb-body.is-in, #baby-page .nb-body.is-in [data-r], .nm-tile { animation: none; }
}

/* ============================================================== Payments (CryptoBot · xRocket) */
/* Wallet marks: drawn glyphs on each service's colour, no brand artwork. */
.pay-mark { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-sunken); color: #fff; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.pay-mark svg { width: 21px; height: 21px; }
.pay-mark.is-cryptobot, .is-cryptobot .pay-mark { background: linear-gradient(140deg, #45c0ff, #1c7cf0); box-shadow: 0 4px 12px rgba(28, 124, 240, .25); }
.pay-mark.is-xrocket, .is-xrocket .pay-mark { background: linear-gradient(140deg, #7a86ff, #2d38b5); box-shadow: 0 4px 12px rgba(45, 56, 181, .25); }

/* ------------------------------------------------ Premium: choosing how to pay */
.pay-methods { display: grid; gap: 8px; margin-top: -4px; }
.pay-method { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--r-ml); background: var(--surface); cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .25s var(--ease), transform .16s var(--ease); }
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pay-method:hover { border-color: var(--border-strong); }
.pay-method:active { transform: scale(.985); }
.pay-copy { display: grid; flex: 1; gap: 1px; min-width: 0; }
.pay-copy strong { color: var(--text-primary); font-size: 14px; font-weight: 650; }
.pay-copy small { color: var(--text-muted); font-size: 12px; }
.pay-tick { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--border-strong); border-radius: 50%; color: transparent; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.pay-tick .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.pay-method:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.pay-method:has(input:checked) .pay-tick { border-color: var(--accent); background: var(--accent); color: #fff; transform: scale(1.08); }
.pay-method:has(input:checked) .pay-mark { transform: rotate(-7deg) scale(1.06); }
.pay-method:has(input:focus-visible) { box-shadow: var(--ring); }
.pay-off { display: flex; align-items: flex-start; gap: 8px; padding: 11px 13px; border-radius: var(--r-md); background: var(--surface-subtle); color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.pay-off .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* Each payment step swaps in place: the new screen rises softly. */
.modal.subscribe-modal.is-step > * { animation: pay-step-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.modal.subscribe-modal.is-step > .sub-body { animation-delay: .07s; }
@keyframes pay-step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Waiting: two rings breathe out of the crown. */
.pay-orbit { position: relative; display: grid; place-items: center; width: 86px; height: 86px; margin-bottom: 2px; }
.pay-orbit .sub-crown { position: relative; z-index: 1; margin: 0; }
.pay-orbit-ring { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .6); border-radius: 50%; opacity: 0; animation: pay-ring 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.pay-orbit-ring.is-late { animation-delay: 1.2s; }
@keyframes pay-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.2); } }
.pay-steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pay-steps li { display: flex; align-items: center; gap: 11px; padding: 7px 2px; color: var(--text-muted); font-size: 14px; }
.pay-step-dot { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-sunken); color: var(--text-muted); font-size: 12px; font-weight: 700; }
.pay-step-dot .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.pay-steps li.is-done { color: var(--text-secondary); }
.pay-steps li.is-done .pay-step-dot { background: var(--success-soft); color: var(--success-text); animation: pay-pop .5s cubic-bezier(.3, 1.6, .5, 1) both .15s; }
.pay-steps li.is-active { color: var(--text-primary); font-weight: 600; }
.pay-steps li.is-active .pay-step-dot { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.pay-steps li.is-active .pay-step-dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pay-dot 1.4s ease-in-out infinite; }
@keyframes pay-dot { 0%, 100% { transform: scale(.75); opacity: .65; } 50% { transform: scale(1.15); opacity: 1; } }
.pay-live { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--text-muted); font-size: 12.5px; }
.pay-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success); transition: background-color .3s var(--ease); }
.pay-pulse::after { content: ""; position: absolute; inset: -4px; border: 2px solid currentColor; border-radius: 50%; color: var(--success); opacity: 0; animation: pay-pulse 1.8s ease-out infinite; }
.pay-live.is-checking .pay-pulse { background: var(--accent); }
@keyframes pay-pulse { 0% { opacity: .8; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.7); } }
.pay-links { display: flex; justify-content: space-between; gap: 12px; }
.pay-links .text-link { font-size: 13px; }

/* Paid: the check pops and sparks fly out. */
.sub-hero.is-done .sub-crown { animation: pay-pop .65s cubic-bezier(.3, 1.6, .5, 1) both .1s; }
@keyframes pay-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.pay-burst { position: absolute; top: 56px; left: 50%; width: 0; height: 0; pointer-events: none; }
.pay-burst i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: #fff; opacity: 0; animation: pay-spark .95s cubic-bezier(.15, .7, .3, 1) both .22s; }
.pay-burst i:nth-child(even) { background: #ffd66b; width: 6px; height: 6px; border-radius: 50%; }
.pay-burst i:nth-child(1) { --dx: -78px; --dy: -18px; } .pay-burst i:nth-child(2) { --dx: -54px; --dy: -52px; }
.pay-burst i:nth-child(3) { --dx: -12px; --dy: -66px; } .pay-burst i:nth-child(4) { --dx: 30px; --dy: -60px; }
.pay-burst i:nth-child(5) { --dx: 62px; --dy: -38px; } .pay-burst i:nth-child(6) { --dx: 80px; --dy: 4px; }
.pay-burst i:nth-child(7) { --dx: -70px; --dy: 30px; } .pay-burst i:nth-child(8) { --dx: 66px; --dy: 34px; }
@keyframes pay-spark { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.5); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(170deg) scale(1); } }
.sub-hero.is-expired { background: radial-gradient(130% 120% at 50% 0%, #9a96b8 0%, #5b5b85 50%, #2f3052 100%); }

/* ------------------------------------------------------------- Wallet key cards */
.wkey-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wkey { position: relative; display: grid; gap: 14px; align-content: start; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.wkey.is-on { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.wkey.is-entering { animation: wkey-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.wkey.is-connected-now { animation: wkey-in .5s cubic-bezier(.2, .8, .2, 1) both, wkey-glow 1.6s ease-out .2s; }
@keyframes wkey-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes wkey-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.wkey-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wkey-title { display: grid; flex: 1; gap: 1px; min-width: 0; }
.wkey-title strong { color: var(--text-primary); font-size: 15px; font-weight: 650; }
.wkey-title small { overflow: hidden; color: var(--text-muted); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.wkey-state { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-muted); font-size: 12px; font-weight: 600; }
.wkey-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
.wkey-state.is-on { background: var(--success-soft); color: var(--success-text); }
.wkey-state.is-on i { opacity: 1; box-shadow: 0 0 0 0 currentColor; animation: wkey-live 2s ease-out infinite; }
@keyframes wkey-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.wkey-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.wkey-facts div { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-subtle); }
.wkey-facts dt { color: var(--text-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.wkey-facts dd { margin: 0; overflow: hidden; color: var(--text-primary); font-size: 15px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.wkey-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px !important; letter-spacing: .02em; }
.wkey-balance.is-flash { animation: wkey-flash .9s var(--ease); }
@keyframes wkey-flash { 0% { color: var(--success-text); transform: translateY(-2px); } 100% { color: var(--text-primary); transform: none; } }
.wkey-shimmer { display: block; width: 92px; height: 15px; margin-top: 2px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-hover) 45%, var(--surface-sunken) 90%); background-size: 220% 100%; animation: wkey-shimmer 1.3s ease-in-out infinite; }
@keyframes wkey-shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } }
.wkey-form { display: grid; gap: 10px; }
.wkey-form.is-wrong { animation: wkey-shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes wkey-shake { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(4px); } 45%, 55% { transform: translateX(-5px); } }
.wkey-input { position: relative; }
.wkey-input .input { width: 100%; padding-right: 44px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }
.wkey-eye { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; color: var(--text-muted); cursor: pointer; transform: translateY(-50%); transition: color .2s var(--ease), background-color .2s var(--ease); }
.wkey-eye:hover, .wkey-eye.is-on { background: var(--surface-hover); color: var(--text-primary); }
.wkey-eye .icon { width: 17px; height: 17px; }
.wkey-testnet { font-size: 13px; }
.wkey-save { justify-self: start; }
.wkey-drawer { display: grid; grid-template-rows: 0fr; margin-top: -14px; opacity: 0; transition: grid-template-rows .35s cubic-bezier(.2, .8, .2, 1), opacity .25s var(--ease), margin-top .35s var(--ease); }
.wkey-drawer > div { min-height: 0; overflow: hidden; }
.wkey-drawer[data-open="1"] { grid-template-rows: 1fr; margin-top: 0; opacity: 1; }
.wkey-foot { display: flex; flex-wrap: wrap; gap: 8px; }

/* -------------------------------------------------------------- Admin «Оплата» */
.adm-pay-hero { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 16px; overflow: hidden; margin-bottom: 14px; padding: 20px 22px; border-radius: var(--r-lg); background: radial-gradient(120% 140% at 0% 0%, #8b5cff 0%, #5a37e6 48%, #2a2f7a 100%); color: #fff; box-shadow: 0 10px 30px rgba(60, 30, 160, .25); }
.adm-pay-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent); animation: adm-pay-drift 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes adm-pay-drift { to { transform: translate(-40px, 30px) scale(1.15); } }
.adm-pay-glyph { display: grid; place-items: center; grid-row: span 2; width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 16px; background: rgba(255, 255, 255, .12); }
.adm-pay-glyph .icon { width: 26px; height: 26px; }
.adm-pay-sum { display: grid; gap: 2px; }
.adm-pay-sum strong { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.adm-pay-sum small { color: rgba(255, 255, 255, .78); font-size: 13px; }
.adm-pay-state { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .92); font-size: 12.5px; font-weight: 600; }
.adm-pay-state i { width: 7px; height: 7px; border-radius: 50%; background: #ffb4b4; }
.adm-pay-hero.is-live .adm-pay-state i { background: #7dffb2; animation: wkey-live 2s ease-out infinite; }
.adm-pay-help, .ap-guide-again { margin: 14px 0; border: 1px solid var(--border-subtle); border-radius: var(--r-ml); background: var(--surface); }
.adm-pay-help summary, .ap-guide-again summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: var(--text-primary); font-size: 14px; font-weight: 600; list-style: none; cursor: pointer; }
.adm-pay-help summary::-webkit-details-marker, .ap-guide-again summary::-webkit-details-marker { display: none; }
.adm-pay-help summary > .icon:first-child, .ap-guide-again summary > .icon:first-child { width: 17px; height: 17px; color: var(--accent-text); }
.adm-pay-help summary span, .ap-guide-again summary span { flex: 1; }
.adm-pay-help summary > .icon:last-child, .ap-guide-again summary > .icon:last-child { width: 16px; height: 16px; color: var(--text-muted); transition: transform .3s var(--ease); }
.adm-pay-help[open] summary > .icon:last-child, .ap-guide-again[open] summary > .icon:last-child { transform: rotate(90deg); }
.adm-pay-help-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 2px 16px 16px; animation: pay-step-in .35s cubic-bezier(.2, .8, .2, 1) both; }
.adm-pay-help-body strong { color: var(--text-primary); font-size: 13.5px; }
.adm-pay-help-body ol { margin: 6px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.adm-pay-list { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.adm-pay-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--border-subtle); }
.adm-pay-row:first-child { border-top: 0; }
.adm-pay-row .pay-mark { width: 34px; height: 34px; border-radius: 11px; }
.adm-pay-row .pay-mark svg { width: 18px; height: 18px; }
.adm-pay-main { display: grid; flex: 1; gap: 2px; min-width: 0; }
.adm-pay-main strong { color: var(--text-primary); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.adm-pay-main small { overflow: hidden; color: var(--text-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.adm-pay-status { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.adm-pay-status.is-success { background: var(--success-soft); color: var(--success-text); }
.adm-pay-status.is-warning { background: var(--warning-soft); color: var(--warning-text); }

/* ------------------------------------------------------------ «Автовыплаты» */
.ap { display: grid; gap: 16px; }
.ap.is-entering { animation: wkey-in .5s cubic-bezier(.2, .8, .2, 1) both; }
/* Person → bot → wallet: dots run along the lines while payouts are on. */
.ap-flow { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0 2px; }
.ap-node { display: grid; justify-items: center; gap: 6px; flex: none; color: var(--text-muted); font-size: 11.5px; font-weight: 600; }
.ap-node .icon { width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: var(--surface-sunken); color: var(--text-secondary); transition: background-color .3s var(--ease), color .3s var(--ease); }
.ap-flow.is-live .ap-node.is-wallet .icon { background: var(--success-soft); color: var(--success-text); }
.ap-flow .ap-node.is-bot .icon { background: color-mix(in srgb, #2aa4e8 16%, transparent); color: #1f8fd0; }
.ap-line { position: relative; flex: 1; max-width: 120px; height: 2px; margin-bottom: 20px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 5px, transparent 5px 10px); }
.ap-line i { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); opacity: 0; animation: ap-run 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.ap-line i:nth-child(2) { animation-delay: .8s; } .ap-line i:nth-child(3) { animation-delay: 1.6s; }
.ap-flow.is-live .ap-line i { background: var(--success); }
@keyframes ap-run { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
.ap-rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); align-items: end; gap: 12px 20px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.ap-rules .baby-form-actions { grid-column: 1 / -1; }
.ap-auto { align-self: center; }

/* The guide: «stories» with a phone on the left and the step on the right. */
.wg { display: grid; gap: 14px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-subtle), var(--surface)); }
.wg-tabs { display: inline-flex; justify-self: start; gap: 4px; padding: 3px; border-radius: 13px; background: var(--surface-sunken); }
.wg-tab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border: 0; border-radius: 10px; background: none; color: var(--text-secondary); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.wg-tab .pay-mark { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; }
.wg-tab .pay-mark svg { width: 15px; height: 15px; }
.wg-tab.is-active { background: var(--surface); color: var(--text-primary); box-shadow: 0 1px 2px rgba(20, 20, 35, .08), 0 2px 8px rgba(20, 20, 35, .06); }
.wg-stage { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 22px; }
.wg-phone { position: relative; height: 330px; padding: 10px; border: 1px solid var(--border); border-radius: 30px; background: var(--surface); box-shadow: 0 12px 32px rgba(20, 20, 40, .12), inset 0 0 0 4px var(--surface-sunken); cursor: pointer; }
.wg-notch { position: absolute; top: 14px; left: 50%; z-index: 2; width: 58px; height: 6px; border-radius: 6px; background: var(--border-strong); transform: translateX(-50%); }
.wg-screen { position: relative; height: 100%; overflow: hidden; border-radius: 22px; background: color-mix(in srgb, #2aa4e8 7%, var(--surface-subtle)); }
.wg-scene { height: 100%; animation: wg-scene-in .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes wg-scene-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.wg-chat-head { display: flex; align-items: center; gap: 9px; padding: 22px 12px 10px; border-bottom: 1px solid var(--border-subtle); background: var(--surface); }
.wg-chat-head b { display: block; color: var(--text-primary); font-size: 13px; }
.wg-chat-head small { color: var(--text-muted); font-size: 11px; }
.wg-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; }
.wg-avatar svg { width: 17px; height: 17px; }
.wg-avatar.is-cryptobot { background: linear-gradient(140deg, #45c0ff, #1c7cf0); }
.wg-avatar.is-xrocket { background: linear-gradient(140deg, #7a86ff, #2d38b5); }
.wg-chat { display: grid; align-content: start; gap: 8px; padding: 12px 10px; }
.wg-bubble { justify-self: start; max-width: 92%; margin: 0; padding: 8px 11px; border-radius: 4px 14px 14px 14px; background: var(--surface); box-shadow: 0 1px 2px rgba(20, 20, 35, .08); color: var(--text-primary); font-size: 12px; line-height: 1.45; animation: wg-pop .45s cubic-bezier(.3, 1.4, .5, 1) both .15s; }
@keyframes wg-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.wg-start, .wg-keys span, .wg-paste-button { position: relative; display: grid; place-items: center; height: 32px; border-radius: 10px; background: color-mix(in srgb, #2aa4e8 16%, var(--surface)); color: #1d86c6; font-size: 12px; font-weight: 650; }
.wg-start { margin-top: auto; animation: wg-pop .45s cubic-bezier(.3, 1.4, .5, 1) both .35s; }
.wg-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; animation: wg-pop .45s cubic-bezier(.3, 1.4, .5, 1) both .35s; }
.wg-keys span.is-target { background: color-mix(in srgb, #2aa4e8 28%, var(--surface)); animation: wg-press 2.4s ease-in-out infinite 1s; }
.wg-tap { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(42, 164, 232, .35); opacity: 0; pointer-events: none; animation: wg-tap 2.4s ease-out infinite 1s; }
@keyframes wg-tap { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: scale(.7); } 40% { opacity: 0; transform: scale(1.9); } 100% { opacity: 0; } }
@keyframes wg-press { 0%, 8%, 30%, 100% { transform: none; } 14% { transform: scale(.94); } }
.wg-token { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--surface-sunken); color: var(--text-primary); font: 600 10.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; animation: wg-select 3s ease-in-out infinite 1s; }
@keyframes wg-select { 0%, 20% { background: var(--surface-sunken); } 35%, 75% { background: color-mix(in srgb, #2aa4e8 26%, var(--surface)); } 100% { background: var(--surface-sunken); } }
.wg-copied { display: inline-flex; align-items: center; gap: 6px; justify-self: center; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(20, 20, 30, .82); color: #fff; font-size: 11.5px; font-weight: 600; opacity: 0; animation: wg-toast 3s ease-in-out infinite 1.3s; }
.wg-copied .icon { width: 13px; height: 13px; }
@keyframes wg-toast { 0%, 10% { opacity: 0; transform: translateY(6px); } 20%, 70% { opacity: 1; transform: none; } 85%, 100% { opacity: 0; transform: translateY(-4px); } }
.wg-switch-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: var(--surface); color: var(--text-primary); font-size: 12.5px; font-weight: 600; animation: wg-pop .45s cubic-bezier(.3, 1.4, .5, 1) both .35s; }
.wg-switch { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong); animation: wg-switch-bg 3s ease-in-out infinite 1s; }
.wg-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 20, 35, .25); animation: wg-switch-knob 3s cubic-bezier(.34, 1.45, .5, 1) infinite 1s; }
@keyframes wg-switch-bg { 0%, 18% { background: var(--border-strong); } 28%, 88% { background: var(--success); } 100% { background: var(--border-strong); } }
@keyframes wg-switch-knob { 0%, 18% { transform: none; } 28%, 88% { transform: translateX(16px); } 100% { transform: none; } }
.wg-balance { display: grid; justify-items: center; gap: 2px; margin-top: 14px; animation: wg-pop .45s cubic-bezier(.3, 1.4, .5, 1) both .3s; }
.wg-balance b { color: var(--text-primary); font-family: var(--display); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wg-balance small { color: var(--text-muted); font-size: 11px; font-weight: 600; }
.wg-coin { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background: linear-gradient(140deg, #43d6a0, #16a37a); color: #fff; font-size: 19px; font-weight: 800; animation: wg-coin 1s cubic-bezier(.3, 1.5, .5, 1) both .2s; }
@keyframes wg-coin { from { opacity: 0; transform: translateY(-24px) rotateY(180deg); } to { opacity: 1; transform: none; } }
.wg-paste { display: grid; align-content: center; gap: 10px; height: 100%; padding: 16px 12px; }
.wg-paste-label { color: var(--text-secondary); font-size: 11.5px; font-weight: 600; }
.wg-paste-field { display: flex; align-items: center; height: 36px; overflow: hidden; padding: 0 10px; border: 1.5px solid var(--accent); border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.wg-typed { display: inline-block; overflow: hidden; color: var(--text-primary); font: 600 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; width: 0; animation: wg-type 1.4s steps(var(--chars), end) forwards .4s; }
@keyframes wg-type { to { width: calc(var(--chars) * 1ch); } }
.wg-caret { width: 1.5px; height: 15px; margin-left: 1px; background: var(--accent); animation: wg-caret 1s steps(1) infinite; }
@keyframes wg-caret { 50% { opacity: 0; } }
.wg-paste-button { height: 34px; background: var(--accent); color: #fff; animation: wg-press 2.4s ease-in-out infinite 2s; }
.wg-paste-button .icon { display: none; }
.wg-paste-button .wg-tap { background: rgba(255, 255, 255, .45); animation-delay: 2s; }
.wg-paste-ok { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--success-soft); color: var(--success-text); font-size: 11.5px; opacity: 0; animation: wg-pop .5s cubic-bezier(.3, 1.4, .5, 1) forwards 2.4s; }
.wg-paste-ok .icon { flex: none; width: 16px; height: 16px; }
.wg-side { display: grid; gap: 14px; align-content: center; min-width: 0; }
.wg-bars { display: flex; gap: 5px; }
.wg-bars i { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: var(--surface-sunken); }
.wg-bars i b { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); transform: scaleX(0); transform-origin: left; }
.wg-bars i.is-done b { transform: scaleX(1); }
.wg-bars i.is-now b { animation: wg-bar 5.6s linear forwards; }
.wg.is-held .wg-bars i.is-now b, .wg.is-paused .wg-bars i.is-now b { animation-play-state: paused; }
@keyframes wg-bar { to { transform: scaleX(1); } }
.wg-copy { display: grid; gap: 6px; min-height: 118px; align-content: start; }
.wg-copy > * { animation: pay-step-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.wg-copy > :nth-child(2) { animation-delay: .05s; } .wg-copy > :nth-child(3) { animation-delay: .1s; }
.wg-count { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.wg-copy h3 { margin: 0; color: var(--text-primary); font-family: var(--display); font-size: 20px; font-weight: 750; }
.wg-copy p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.wg-nav { display: flex; gap: 8px; }
.wg-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), transform .16s var(--ease); }
.wg-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.wg-btn:active { transform: scale(.94); }
.wg-btn .icon { width: 17px; height: 17px; }
.wg-pause-icon { display: flex; gap: 3px; }
.wg-pause-icon i { width: 3px; height: 12px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease); }
.wg.is-paused .wg-pause-icon i:first-child { transform: translateX(3px) scaleY(1); clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%); width: 10px; }
.wg.is-paused .wg-pause-icon i:last-child { width: 0; }

/* «Выплаты»: where each payout goes and why it waits. */
.pout-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: var(--r-lg); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface)); }
.pout-banner-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent)); color: #fff; animation: pout-wiggle 3.2s ease-in-out infinite; }
.pout-banner-icon .icon { width: 21px; height: 21px; }
@keyframes pout-wiggle { 0%, 82%, 100% { transform: none; } 86% { transform: rotate(-8deg); } 92% { transform: rotate(6deg); } }
.pout-banner > div { flex: 1; min-width: 0; }
.pout-banner strong { color: var(--text-primary); font-size: 14.5px; }
.pout-banner p { margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.pout-method { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 3px; border-radius: 999px; background: var(--surface-sunken); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.pout-method.is-manual { padding-left: 8px; }
.pout-method > .icon { width: 13px; height: 13px; }
.pout-method .pay-mark { width: 18px; height: 18px; border-radius: 6px; box-shadow: none; }
.pout-method .pay-mark svg { width: 11px; height: 11px; }
.pout-note { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; }
.pout-note .icon { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--info-text); }
.pout-note.is-warn { color: var(--warning-text); }
.pout-note.is-warn .icon { color: var(--warning-text); }
.pout-ref { display: block; margin-top: 6px; color: var(--text-muted); font-size: 12px; }
.pout-send { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 24%, transparent); }

@media (max-width: 800px) {
  .wg-stage { grid-template-columns: 1fr; gap: 16px; }
  .wg-phone { width: 100%; max-width: 240px; justify-self: center; height: 320px; }
  .wg-copy { min-height: 0; }
}
@media (max-width: 600px) {
  .wkey-grid, .adm-pay-help-body { grid-template-columns: 1fr; }
  .wkey-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .adm-pay-hero { padding: 18px; }
  .adm-pay-sum strong { font-size: 26px; }
  .ap-rules { grid-template-columns: 1fr; }
  .ap-line { max-width: 60px; }
  .ap-node .icon { width: 40px; height: 40px; padding: 10px; }
  .pout-banner { flex-wrap: wrap; }
  .pout-banner .button { width: 100%; }
  .wg { padding: 12px; }
  .wg-tabs { justify-self: stretch; }
  .wg-tab { flex: 1; justify-content: center; }
  .wg-copy h3 { font-size: 18px; }
  .pay-links { flex-direction: column; align-items: center; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .pay-orbit-ring, .pay-steps li.is-active .pay-step-dot i, .pay-pulse::after, .pay-burst i, .wkey-state.is-on i, .adm-pay-hero::after,
  .adm-pay-hero.is-live .adm-pay-state i, .ap-line i, .wg-tap, .wg-keys span.is-target, .wg-token, .wg-copied, .wg-switch, .wg-switch::before,
  .wg-paste-button, .wg-caret, .pout-banner-icon, .wkey-shimmer { animation: none; }
  .wg-typed { width: auto; animation: none; }
  .wg-copied, .wg-paste-ok { opacity: 1; animation: none; }
  .modal.subscribe-modal.is-step > *, .wg-scene, .wg-copy > *, .wg-bubble, .wg-start, .wg-keys, .wg-switch-row, .wg-balance, .wg-coin, .wkey.is-entering, .wkey.is-connected-now, .ap.is-entering { animation: none; }
  .wg-bars i.is-now b { animation: none; transform: scaleX(.5); }
}

/* ================================================================== FAQ (both panels) */
.faq { margin-top: 32px; padding: 20px 20px 10px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
#baby-page .faq { margin-top: 0; }
.faq-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.faq-head > div { flex: 1; min-width: 0; }
.faq-head h2 { color: var(--text-primary); font-size: 17px; font-weight: 700; }
.faq-head p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.faq-head .faq-symbol { width: 40px; height: 40px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-text); }
.faq-head .faq-symbol .icon { width: 20px; height: 20px; }
.faq-search { position: relative; display: flex; align-items: center; flex: none; width: 240px; }
.faq-search .icon { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.faq-search input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-subtle); color: var(--text-primary); font: inherit; font-size: 13.5px; transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
.faq-search input:focus { outline: none; border-color: var(--accent-border); background: var(--surface); box-shadow: var(--ring); }
.faq-groups { display: grid; gap: 18px; }
.faq-group { display: grid; gap: 2px; animation: faq-in .5s cubic-bezier(.2, .8, .2, 1) both; transition: opacity .25s var(--ease); }
.faq-group:nth-child(2) { animation-delay: .06s; } .faq-group:nth-child(3) { animation-delay: .12s; }
.faq-group:nth-child(4) { animation-delay: .18s; } .faq-group:nth-child(5) { animation-delay: .24s; }
@keyframes faq-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.faq-group.is-hidden { display: none; }
.faq-group h3 { margin: 0 0 4px; padding: 0 10px; color: var(--text-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.faq-item { display: grid; grid-template-rows: auto 1fr; border-radius: 14px; transition: background-color .25s var(--ease), box-shadow .25s var(--ease), opacity .25s var(--ease); }
.faq-item + .faq-item { box-shadow: inset 0 1px 0 var(--border-subtle); }
.faq-item.is-open { background: var(--surface-subtle); box-shadow: none; }
.faq-item.is-open + .faq-item { box-shadow: none; }
.faq-item.is-hidden { display: none; }
.faq-q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 10px; border: 0; border-radius: 14px; background: none; color: var(--text-primary); font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; transition: color .2s var(--ease), background-color .2s var(--ease); }
.faq-q:hover { background: var(--surface-hover); }
.faq-item.is-open .faq-q:hover { background: none; }
.faq-q:focus-visible { outline: none; box-shadow: var(--ring); }
.faq-q span { flex: 1; min-width: 0; }
/* A plus that turns into a minus. */
.faq-plus { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-sunken); transition: background-color .3s var(--ease), transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 2px; background: var(--text-secondary); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), background-color .3s var(--ease); }
.faq-plus::after { transform: rotate(90deg); }
.faq-item.is-open .faq-plus { background: var(--accent); transform: rotate(180deg); }
.faq-item.is-open .faq-plus::before, .faq-item.is-open .faq-plus::after { background: #fff; }
.faq-item.is-open .faq-plus::after { transform: rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1); }
.faq-a > div { min-height: 0; overflow: hidden; }
.faq-a p { margin: 0; padding: 0 50px 14px 10px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .4s cubic-bezier(.2, .8, .2, 1); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a p { opacity: 1; transform: none; transition-delay: .08s; }
.faq-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px 0 14px; color: var(--text-muted); font-size: 13.5px; animation: faq-in .35s var(--ease) both; }
.faq-empty .icon { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .faq { margin-top: 24px; padding: 16px 12px 6px; }
  .faq-head { flex-wrap: wrap; }
  .faq-search { width: 100%; }
  .faq-q { padding: 12px 8px; font-size: 14px; }
  .faq-a p { padding: 0 12px 13px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-group, .faq-empty { animation: none; }
  .faq-a, .faq-a p, .faq-plus, .faq-plus::before, .faq-plus::after { transition: none; }
}

/* ================================================== Debt / minus: payment on delivery closed */
.cod-off { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--danger-soft); color: var(--danger-text); font-size: 12px; animation: cod-in .4s cubic-bezier(.2, .8, .2, 1) both; }
.cod-off .icon { width: 13px; height: 13px; }
.cod-off b { font-weight: 650; }
.cod-off small { color: inherit; font-size: 11.5px; opacity: .85; }
.debt-value { display: inline-flex; align-items: center; gap: 6px; color: var(--danger-text); font-size: 13px; font-variant-numeric: tabular-nums; }
.debt-value .icon { width: 14px; height: 14px; animation: cod-pulse 2.4s ease-in-out infinite; }
.debt-value b { font-weight: 700; }
.po-alert { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger-text); animation: cod-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.po-alert > .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; animation: cod-pulse 2.4s ease-in-out infinite; }
.po-alert strong { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.po-alert p { margin: 2px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; }
.po-card.is-off { cursor: not-allowed; opacity: .75; border-style: dashed; }
.po-minus { color: var(--danger-text) !important; }
@keyframes cod-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cod-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .cod-off, .po-alert, .po-alert > .icon, .debt-value .icon { animation: none; } }