/* ==========================================================================
   Asila UI — design system foundation (standard: skill «assila-ui-ux»)
   One product for the seller workspace, the admin and the login page.
   Layers: tokens → base → shell → components → states → utilities.
   Screen-specific rules live in styles.css (workspace) and admin.css (admin);
   they use these tokens and never redefine the components.
   ========================================================================== */

/* ---------- 0. Inter (local woff2: latin + cyrillic + қазақ әғқңөұүһі) ---------- */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-cyrillic-ext-400-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); 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; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-cyrillic-ext-500-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); 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; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-cyrillic-ext-600-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); 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; }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-cyrillic-ext-700-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2"); 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; }

/* ---------- 1. Tokens ---------- */
:root {
  /* neutrals */
  --n0: #ffffff;
  --n25: #fafbfc;
  --n50: #f6f8fb;
  --n75: #f3f5f8;
  --n100: #eef1f5;
  --n150: #e8ebf0;
  --n200: #e2e6ed;
  --n300: #cfd5df;
  --n400: #a3aab8;
  --n500: #8a91a0;
  --n600: #5f6779;
  --n700: #454e60;
  --n800: #2d3546;
  --n900: #1b2333;

  /* roles */
  --bg: #eef1f6;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(255, 255, 255, 0.5);
  --surface-3: rgba(232, 236, 243, 0.72);
  --line: rgba(28, 32, 44, 0.08);
  --line-strong: var(--n300);
  --text: var(--n900);
  --text-2: var(--n700);
  --muted: var(--n600);          /* ≥4.5:1 on --bg and --surface */
  --faint: var(--n500);          /* placeholders, disabled; never essential text */

  --brand: #1d2d51;                /* ASSILA navy: logo, app icon */
  --brand-accent: #8cafff;
  --brand-gold: #d4b573;           /* logo swoosh; decorative accents only, never status */
  --brand-leaf: #8da66b;           /* logo leaf; decorative accents only, never status */
  --primary: #C2410C;
  --primary-hover: #9A3412;
  --primary-press: #7C2D12;
  --primary-soft: #FFF4ED;
  --primary-soft-2: #FFEDD5;
  --primary-text: #9A3412;
  --focus-ring: 0 0 0 3px rgba(194, 65, 12, 0.35);

  --success: #1e6b43;
  --success-soft: #e8f5ee;
  --success-line: #bfe3cd;
  --warning: #8a5300;
  --warning-strong: #b54708;
  --warning-soft: #fff4e2;
  --warning-line: #f3d49b;
  --danger: #b42318;
  --danger-solid: #d92d20;
  --danger-soft: #fdeceb;
  --danger-line: #f4c7c3;
  --violet: #5b3fc4;
  --violet-soft: #f1ecff;

  /* platforms */
  --pf-ig: linear-gradient(135deg, #f9b233, #e1306c 55%, #833ab4);
  --pf-fb: #1877f2;
  --pf-tt: #111111;
  --pf-tg: #229ed9;
  --pf-yt: #e62117;
  --pf-wa: #25d366;

  /* type */
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px;     /* meta, badges — never smaller */
  --fs-sm: 13px;     /* secondary lines, captions, labels */
  --fs-md: 14px;     /* dense UI, chips, table cells */
  --fs-base: 15px;   /* body text, list titles */
  --fs-lg: 16px;     /* inputs (no iOS zoom), sheet body */
  --fs-xl: 17px;     /* card and section titles */
  --fs-h2: 20px;     /* sheet titles, big section titles */
  --fs-h1: 24px;     /* page title on phones */
  --fs-display: 28px;/* page title ≥1024, key numbers */
  --lh: 1.45;
  --lh-tight: 1.25;

  /* space: 4px grid */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --gutter: 16px;

  /* radius */
  --r-2xs: 4px;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* control heights */
  --h-sm: 36px;
  --h-md: 44px;
  --h-lg: 52px;

  /* elevation: soft glass, not a hard drop */
  --sh-1: 0 1px 2px rgba(28, 36, 56, 0.05);
  --sh-2: 0 10px 28px rgba(28, 36, 56, 0.08);
  --sh-3: 0 18px 48px rgba(28, 36, 56, 0.12);
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.84);
  --glass-edge: rgba(28, 32, 44, 0.08);
  --glass-blur: blur(22px) saturate(1.75);
  --glass-shadow: 0 12px 32px rgba(28, 36, 56, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* layers */
  --z-sticky: 20;
  --z-nav: 30;
  --z-menu: 40;
  --z-overlay: 60;
  --z-viewer: 1000;

  /* shell */
  --nav-w: 240px;
  --rail-w: 96px;
  --topbar-h: 56px;
  --tabbar-h: 72px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --content-max: 1280px;
  --form-max: 720px;

  /* legacy aliases — older selectors keep working through tokens */
  --blue: var(--primary);
  --ink: var(--text);
  --accent: var(--primary);
  --radius: var(--r-lg);
  --ok: var(--success);
  --ok-bg: var(--success-soft);
  --warn: var(--warning);
  --warn-bg: var(--warning-soft);
  --warn-line: var(--warning-line);

  color-scheme: light;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (min-width: 768px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(900px 480px at 0% -10%, rgba(255, 255, 255, 0.95), transparent 55%),
    radial-gradient(800px 420px at 100% 0%, rgba(214, 222, 234, 0.85), transparent 50%),
    linear-gradient(180deg, #f7f8fb 0%, #e7ebf2 100%);
  background-attachment: fixed;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: var(--lh);
}
img, video, canvas, svg { max-width: 100%; }
img, video { height: auto; }

:where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(button) { cursor: pointer; border: 0; background: none; padding: 0; text-align: inherit; touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
:where(a) { color: inherit; text-decoration: none; }
a, button, summary, label { -webkit-touch-callout: none; }
summary { cursor: pointer; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); color: var(--text); overflow-wrap: anywhere; }
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-base); font-weight: 650; }
@media (min-width: 1024px) {
  h1 { font-size: var(--fs-display); }
}
small { font-size: var(--fs-sm); }
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-2);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  overflow-wrap: anywhere;
}
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
::selection { background: var(--primary-soft-2); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Icons */
.icon, .i { width: 20px; height: 20px; flex: none; vertical-align: middle; }

/* ---------- 3. Shell (workspace and admin share it) ---------- */
/* Phone (<768): top bar + content + bottom tab bar.
   Tablet (768–1023): icon rail on the left.
   Desktop (≥1024): sidebar with sections, brand on top, account at the bottom. */
.app-shell {
  min-height: 100dvh;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 20px);
}
.app-nav {
  position: fixed;
  z-index: var(--z-nav);
  left: 12px;
  right: 12px;
  bottom: calc(10px + var(--safe-b));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  min-height: var(--tabbar-h);
  padding: 6px 8px;
  border: 1px solid var(--glass-edge);
  border-radius: 32px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.nav-brand, .nav-label, .nav-foot, .nav-item.more-link { display: none; }
.nav-item {
  position: relative;
  min-width: 0;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 2px;
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.nav-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 32px;
  border-radius: var(--r-pill);
  flex: none;
}
.nav-wait {
  position: absolute;
  top: 6px;
  right: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.nav-icon .icon, .nav-icon .i { width: 24px; height: 24px; }
.nav-item[aria-current="page"], .nav-item.on { color: var(--primary-text); }
.nav-item[aria-current="page"] .nav-icon, .nav-item.on .nav-icon { background: var(--primary-soft); }
.nav-item:hover { color: var(--text); }
.nav-item[aria-current="page"]:hover { color: var(--primary-text); }

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: calc(var(--topbar-h) + var(--safe-t));
  margin: 0 12px;
  padding: var(--safe-t) var(--s4) 0;
  border: 1px solid var(--glass-edge);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.topbar-title { flex: 1; min-width: 0; }
.topbar-title strong, .topbar-title small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title strong { font-size: var(--fs-base); font-weight: 650; }
.topbar-title small { font-size: var(--fs-xs); color: var(--muted); }
.brand, .brand-mark {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--brand);
  object-fit: cover;
}
.business { display: flex; align-items: center; gap: var(--s3); min-width: 0; min-height: var(--h-md); text-align: left; }
.business > span:last-child { min-width: 0; }
.business strong, .business small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.business strong { font-size: var(--fs-base); font-weight: 650; }
.business small { font-size: var(--fs-xs); color: var(--muted); }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-md);
  height: var(--h-md);
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 650;
  flex: none;
}
main { display: block; min-width: 0; }
.page {
  width: 100%;
  max-width: var(--content-max);
  padding: var(--s6) var(--gutter) var(--s10);
}

/* Phone tab bar stays visible in the post editor. Hiding it made the bottom
   buttons look dead: taps landed on empty space where Сегодня/Ещё used to be. */

@media (min-width: 768px) {
  .app-shell {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    padding-bottom: 16px;
  }
  .topbar { display: none; }
  .app-nav {
    position: sticky;
    top: 16px;
    left: auto;
    right: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 1 / span 2;
    height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--s4) var(--s2);
    border: 1px solid var(--glass-edge);
    border-radius: 28px;
    background: var(--glass);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .app-shell > main { grid-column: 2; min-width: 0; }
  .nav-brand { display: flex; justify-content: center; padding: var(--s1) 0 var(--s3); }
  .nav-brand .business > span:last-child { display: none; }
  .nav-item.more-link { display: flex; }
  .nav-more { display: none !important; }
  .nav-item { min-height: 60px; font-size: 11px; }
  .nav-item > span:last-child { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; overflow-wrap: normal; }
  .nav-foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .app-shell { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .app-nav { padding: var(--s4) var(--s3); }
  .nav-brand { justify-content: flex-start; padding: 0 var(--s2) var(--s4); }
  .nav-brand .business > span:last-child { display: block; }
  .nav-label {
    display: block;
    margin: var(--s4) var(--s3) var(--s1);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--muted);
  }
  .nav-brand + .nav-label { margin-top: 0; }
  .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--s3);
    min-height: var(--h-md);
    padding: 0 var(--s3) 0 var(--s2);
    font-size: var(--fs-md);
    color: var(--text-2);
    text-align: left;
  }
  .nav-icon { width: 28px; height: 28px; border-radius: var(--r-sm); }
  .nav-icon .icon, .nav-icon .i { width: 20px; height: 20px; }
  .nav-item > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-wait { position: static; margin-left: auto; }
  .nav-item:hover { background: var(--surface-2); }
  .nav-item[aria-current="page"], .nav-item.on { background: var(--primary-soft); }
  .nav-item[aria-current="page"] .nav-icon, .nav-item.on .nav-icon { background: transparent; }
}

/* ---------- 4. Page header ---------- */
.title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
  margin: 0 0 var(--s4);
}
.title-row > div:first-child, .title-row > h1 { flex: 1 1 220px; min-width: 0; }
.eyebrow { margin: 0 0 var(--s1); font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.page-sub, .catalog-intro, .lead {
  margin: 0 0 var(--s5);
  max-width: 72ch;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--muted);
}
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: var(--h-md); margin: 0 0 var(--s2); }

/* ---------- 5. Buttons ---------- */
/* .primary — the one main action of a screen; .secondary — tonal blue (supporting action);
   .ghost-button/.ghost — neutral outlined; .text-button — inline action; .danger — outlined destructive
   trigger; .danger.solid — confirmation of a destructive action; .icon-button — 44×44 square. */
.btn, .primary, .secondary, .ghost-button, .ghost, .danger, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--h-md);
  min-width: var(--h-md);
  padding: 0 var(--s4);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.btn .icon, .primary .icon, .secondary .icon, .ghost-button .icon, .ghost .icon, .danger .icon { width: 18px; height: 18px; }
.primary { background: var(--primary); color: #fff; }
.primary:hover { background: var(--primary-hover); }
.primary:active { background: var(--primary-press); }
.secondary { background: var(--primary-soft); color: var(--primary-text); border-color: var(--primary-soft-2); }
.secondary:hover { background: var(--primary-soft-2); }
.ghost-button, .ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.ghost-button:hover, .ghost:hover { background: var(--surface-2); }
.danger { background: var(--surface); color: var(--danger); border-color: var(--danger-line); }
.danger:hover { background: var(--danger-soft); }
.danger.solid { background: var(--danger-solid); color: #fff; border-color: var(--danger-solid); }
.danger.solid:hover { background: var(--danger); }
.btn.lg, .primary.lg { min-height: var(--h-lg); font-size: var(--fs-base); }
.full { width: 100%; }
.text-button {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--h-md);
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  color: var(--primary-text);
  font-size: var(--fs-md);
  font-weight: 600;
}
.text-button:hover { background: var(--primary-soft); }
.text-button .icon { width: 16px; height: 16px; }
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-md);
  height: var(--h-md);
  flex: none;
  border-radius: var(--r-pill);
  color: var(--text-2);
}
.icon-button:hover { background: var(--surface-2); }
:is(.btn, .primary, .secondary, .ghost-button, .ghost, .danger, .button, .text-button, .icon-button):disabled,
:is(.btn, .primary, .secondary, .ghost-button, .ghost, .danger, .button)[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}
[aria-busy="true"] { cursor: progress; }

/* ---------- 6. Fields ---------- */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]), select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: var(--h-md);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.4;
}
:where(textarea) { min-height: 96px; resize: vertical; }
:where(select) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
:where(input, select, textarea)::placeholder { color: var(--faint); opacity: 1; }
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
:where(input, select, textarea):disabled, :where(input, textarea)[readonly] { background: var(--surface-2); color: var(--text-2); }
:where(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); flex: none; }
:where(input[type="file"]) { max-width: 100%; min-height: var(--h-md); font-size: var(--fs-md); color: var(--text-2); }
input[type="file"]::file-selector-button {
  min-height: 40px;
  margin-right: var(--s3);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
@media (min-width: 1024px) {
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea) { font-size: var(--fs-base); }
}
.field, .stack-form label:not(.check):not(.big-check) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}
.hint, .field-hint { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); font-weight: 400; }
.error, .field-error, .login-error { color: var(--danger); font-size: var(--fs-sm); }
.check-row, label.check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s3);
  min-height: var(--h-md);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.big-check, label.big-check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
}
.big-check input { margin-top: 2px; }
.big-check small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); font-weight: 400; }
.big-check:has(input:checked) { border-color: var(--primary-soft-2); background: var(--primary-soft); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin: 0 0 var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* ---------- 7. Chips, chip rows, segmented control ---------- */
.chip, .filter-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover, .filter-chip:hover { border-color: var(--n400); }
.chip:has(input:checked), .chip[aria-pressed="true"], .chip.on, .filter-chip.on, .filter-chip[aria-pressed="true"] {
  background: var(--primary-soft);
  border-color: var(--primary-soft-2);
  color: var(--primary-text);
}
.filter-chip span { min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-xs); line-height: 20px; }
.filter-chip.on span { background: var(--primary-soft-2); color: var(--primary-text); }
/* one-line scrolling row on phones (edge to edge), wraps from 768 */
.chip-row, .filter-row, .inbox-filters {
  display: flex;
  gap: var(--s2);
  margin: 0 calc(-1 * var(--gutter)) var(--s4);
  padding: 2px var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 0 var(--gutter);
}
.chip-row::-webkit-scrollbar, .filter-row::-webkit-scrollbar, .inbox-filters::-webkit-scrollbar { display: none; }
.chip-sep { flex: none; width: 1px; margin: 6px 2px; background: var(--line); }
@media (min-width: 768px) {
  .chip-row, .filter-row, .inbox-filters { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}
.seg, .cc-seg, .subtabs, .pv-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar, .subtabs::-webkit-scrollbar, .pv-tabs::-webkit-scrollbar { display: none; }
.seg > *, .cc-seg > button, .subtabs > a, .pv-tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--s3);
  border-radius: 9px;
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: 600;
  white-space: nowrap;
}
.seg > [aria-pressed="true"], .seg > .on, .seg > [aria-current="page"],
.cc-seg > button.on, .subtabs > a[aria-current="page"], .pv-tab.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-1);
}

/* ---------- 8. Surfaces: cards, rows, badges, notices ---------- */
.card, .panel {
  min-width: 0;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.panel { padding: var(--s4); }
@media (min-width: 1024px) {
  .panel { padding: var(--s5); }
}
:where(button.card, a.card) { display: block; width: 100%; text-align: left; transition: border-color 0.12s, background-color 0.12s; }
:where(button.card, a.card):hover { border-color: var(--line-strong); }
.card-title { font-size: var(--fs-xl); font-weight: 650; }

/* list row: avatar/thumb · text (title, meta, preview) · trailing meta */
.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 72px;
  padding: var(--s3) var(--s4);
  min-width: 0;
}
.row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row-main > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { flex: none; display: grid; justify-items: end; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }

/* badges / status pills — one look everywhere */
.badge, .pill, .pill-s, .status, .content-status, .tag, .stock-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  vertical-align: middle;
}
.badge.ok, .pill-ok, .pill-s.ok, .status, .s-published { background: var(--success-soft); color: var(--success); }
.badge.warn, .pill-warn, .tag.warning, .stock-label, .s-preview, .s-draft { background: var(--warning-soft); color: var(--warning); }
.badge.err, .pill-error, .s-error, .s-rejected { background: var(--danger-soft); color: var(--danger); }
.badge.info, .tag, .s-approved, .s-confirmed, .pill-local { background: var(--primary-soft); color: var(--primary-text); }
.s-review { background: var(--warning-soft); color: var(--warning); }
.badge.plan, .s-scheduled { background: var(--violet-soft); color: var(--violet); }
.badge.off, .pill-off, .pill-s.off { background: var(--surface-3); color: var(--muted); }
.count-badge { min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--primary); color: #fff; font-size: var(--fs-xs); font-weight: 700; line-height: 20px; text-align: center; }

/* inline notices */
.notice, .state-note {
  display: block;
  margin: 0 0 var(--s3);
  padding: var(--s3) 14px;
  border: 1px solid var(--primary-soft-2);
  border-radius: var(--r-md);
  background: var(--primary-soft);
  color: var(--text);
  font-size: var(--fs-md);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.notice-ok, .notice.ok, .notice-ok-inline { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }
.notice-warn, .notice.warn, .state-note.warn { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning); }
.notice-error, .notice.err { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }

/* ---------- 9. Overlays ---------- */
/* Workspace dialog: bottom sheet on phones, centered modal from 768 */
dialog {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 92dvh;
  margin: 0;
  padding: 0 var(--s4) calc(var(--s4) + var(--safe-b));
  border: 1px solid var(--glass-edge);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--glass-strong);
  color: var(--text);
  box-shadow: var(--sh-3);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog::backdrop { background: rgba(16, 24, 40, 0.45); }
dialog[open] { animation: sheet-in 0.2s ease-out; }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sheet-handle { width: 36px; height: 4px; margin: 8px auto 4px; border-radius: var(--r-pill); background: var(--line-strong); }
.sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 56px;
  margin: 0 calc(-1 * var(--s4));
  padding: 0 var(--s2) 0 var(--s4);
  background: var(--surface);
}
.sheet-head h2 { flex: 1; min-width: 0; font-size: var(--fs-h2); overflow-wrap: anywhere; }
.sheet-body { font-size: var(--fs-base); line-height: 1.55; padding-top: var(--s1); }
.modal-open { overflow: hidden; }
@media (min-width: 768px) {
  dialog {
    inset: 0;
    width: min(560px, calc(100% - 48px));
    height: fit-content;
    max-height: min(86dvh, 900px);
    margin: auto;
    padding: 0 var(--s6) var(--s6);
    border-radius: var(--r-xl);
  }
  .sheet-head { margin: 0 calc(-1 * var(--s6)); padding: var(--s2) var(--s3) 0 var(--s6); }
  .sheet-handle { display: none; }
}

/* popover menus (details/summary or JS-toggled) */
.menu-panel, .head-menu-panel, .cc-menu-list, .soc-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-2);
}
.menu-item, .cc-menu-list button, .head-menu-panel .text-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s3);
  width: 100%;
  min-height: var(--h-md);
  padding: 0 var(--s3);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: left;
}
.menu-item:hover, .cc-menu-list button:hover, .head-menu-panel .text-button:hover { background: var(--surface-2); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* CSS-only bottom sheet (admin «Ещё», works without JS) */
.sheet-toggle { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(16, 24, 40, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.css-sheet {
  position: fixed;
  z-index: calc(var(--z-overlay) + 1);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 86dvh;
  overflow-y: auto;
  padding: 0 var(--s3) calc(var(--s4) + var(--safe-b));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface);
  box-shadow: var(--sh-3);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.sheet-toggle:checked ~ .sheet-backdrop { opacity: 1; pointer-events: auto; }
.sheet-toggle:checked ~ .css-sheet { transform: none; visibility: visible; transition: transform 0.22s ease; }
.css-sheet .sheet-head { margin: 0 calc(-1 * var(--s3)); }
.sheet-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--h-lg);
  padding: 0 var(--s3);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 500;
}
.sheet-item:hover { background: var(--surface-2); }
.sheet-item[aria-current="page"] { background: var(--primary-soft); color: var(--primary-text); font-weight: 600; }
.sheet-item.danger-text { color: var(--danger); }
.sheet-item .icon, .sheet-item .i { width: 22px; height: 22px; }
.sheet-list { display: grid; gap: 2px; }
@media (min-width: 768px) {
  .sheet-toggle, .sheet-backdrop, .css-sheet { display: none; }
}

/* ---------- 10. States: empty, loading, progress ---------- */
.empty-state, .catalog-empty, .placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s8) var(--s5);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--muted);
}
.empty-state h2, .catalog-empty h2, .placeholder h2 { font-size: var(--fs-xl); color: var(--text); }
.empty-state p, .catalog-empty p, .placeholder p { max-width: 44ch; margin: 0; font-size: var(--fs-md); }
.empty-icon, .placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: var(--primary-soft);
  color: var(--primary);
}
.demo-note, .loading-note { margin: var(--s3) 0; font-size: var(--fs-md); color: var(--muted); }
.skeleton, .cc-skel-row {
  border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--n100) 30%, var(--n50) 50%, var(--n100) 70%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }
.spinner, .cc-spin {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--primary-soft-2);
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
progress.bar, .gp-bar, .render-bar {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
progress.bar::-webkit-progress-bar, .gp-bar::-webkit-progress-bar, .render-bar::-webkit-progress-bar { background: var(--surface-3); border-radius: var(--r-pill); }
progress.bar::-webkit-progress-value, .gp-bar::-webkit-progress-value, .render-bar::-webkit-progress-value { background: var(--primary); border-radius: var(--r-pill); }
progress.bar::-moz-progress-bar, .gp-bar::-moz-progress-bar, .render-bar::-moz-progress-bar { background: var(--primary); border-radius: var(--r-pill); }

/* ---------- 11. Data display ---------- */
.table-wrap { max-width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: var(--fs-md); }
table.data th { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap; background: var(--surface-2); }
table.data tr:last-child td { border-bottom: 0; }
dl.kv { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: var(--s2) var(--s4); margin: var(--s3) 0 0; }
dl.kv dt { color: var(--muted); font-size: var(--fs-sm); }
dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  dl.kv { grid-template-columns: 1fr; gap: 2px; }
  dl.kv dt { margin-top: var(--s2); }
}
.detail { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
.detail > span { color: var(--muted); }
.detail strong { text-align: right; font-weight: 600; overflow-wrap: anywhere; }

/* disclosure */
details.collapse, details.tech, .page-more { border-top: 1px solid var(--line); }
details.collapse > summary, details.tech > summary, .page-more > summary, .disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: var(--h-md);
  font-weight: 600;
  color: var(--text);
}
details.collapse > summary::after, details.tech > summary::after, .page-more > summary::after, .disclosure > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 6px 4px auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
details[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }

/* platform badges */
.pf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pf-badge.xs { width: 20px; height: 20px; border-radius: var(--r-xs); font-size: 9px; }
.pf-ig { background: var(--pf-ig); }
.pf-fb { background: var(--pf-fb); font-size: 15px; }
.pf-fb.xs { font-size: 12px; }
.pf-tt { background: var(--pf-tt); }
.pf-tg { background: var(--pf-tg); }
.pf-yt { background: var(--pf-yt); }
.pf-wa { background: var(--pf-wa); }
.pf-x { background: var(--n500); }

/* ---------- 12. Utilities ---------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.muted { color: var(--muted); }
.danger-text { color: var(--danger); }
.ok-text { color: var(--success); }
.stack { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }
.break, .wrap-anywhere { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* phone tab bar vs sidebar items (Сегодня · Входящие · Клиенты · Контент · Настройки) */
.nav-item.side-only { display: none; }
@media (min-width: 768px) {
  .nav-item.side-only { display: flex; }
  .nav-item.tab-only { display: none; }
}

/* error state: same shape as the empty state, danger accent, one recovery action */
.error-state { border-color: var(--danger-line); }
.error-state .empty-icon { background: var(--danger-soft); color: var(--danger); font-size: var(--fs-h2); font-weight: 700; }
.loading-note { display: flex; align-items: center; gap: var(--s2); }

/* keyboard: first Tab jumps over the navigation */
.skip-link { position: absolute; left: var(--s2); top: -100px; z-index: var(--z-viewer); display: inline-flex; align-items: center; min-height: var(--h-md); padding: 0 var(--s4); border-radius: var(--r-md); background: var(--primary); color: #fff; font-weight: 600; }
.skip-link:focus { top: var(--s2); }
main:focus { outline: none; }
.img-fallback { display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-weight: 700; }