/* ============================================================
   КЛИЕНТ ЦЕНТР — Design System
   Component styles only. All color tokens are owned by themes.css.
   Load order in HTML: themes.css → design-system.css → page.css
   ============================================================ */

/* ── 1. EMOJI FONT — bulletproof cross-platform color emoji ────────
   Strategy: declare a neutral family "NativeEmoji" with the full
   platform cascade in one src list. Using a neutral name avoids
   overriding the system "Apple Color Emoji" on macOS while still
   mapping correctly via local() on every OS. The unicode-range
   scopes it to emoji codepoints only so regular text is unaffected.
─────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "NativeEmoji";
  src:
    local("Apple Color Emoji"),   /* macOS 10.7+ / iOS */
    local("Twemoji Mozilla"),     /* Firefox on all platforms */
    local("Segoe UI Emoji"),      /* Windows 8.1+ */
    local("Segoe UI Symbol"),     /* Windows 7 fallback */
    local("Noto Color Emoji"),    /* Linux / Android / ChromeOS */
    local("Android Emoji");       /* older Android */
  font-display: block;
  unicode-range:
    U+00A9, U+00AE, U+200D, U+203C, U+2049, U+20E3,
    U+2122, U+2139, U+2194-2199, U+21A9-21AA,
    U+231A-231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA,
    U+24C2, U+25AA-25AB, U+25B6, U+25C0, U+25FB-25FE,
    U+2600-2604, U+260E, U+2611, U+2614-2615, U+2618, U+261D,
    U+2620, U+2622-2623, U+2626, U+262A, U+262E-262F,
    U+2638-263A, U+2640, U+2642, U+2648-2653, U+265F-2660,
    U+2663, U+2665-2666, U+2668, U+267B, U+267E-267F,
    U+2692-2697, U+2699, U+269B-269C, U+26A0-26A1, U+26A7,
    U+26AA-26AB, U+26B0-26B1, U+26BD-26BE, U+26C4-26C5,
    U+26CE-26CF, U+26D1, U+26D3-26D4, U+26E9-26EA,
    U+26F0-26F5, U+26F7-26FA, U+26FD, U+2702, U+2705,
    U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D,
    U+2721, U+2728, U+2733-2734, U+2744, U+2747, U+274C,
    U+274E, U+2753-2755, U+2757, U+2763-2764, U+2795-2797,
    U+27A1, U+27B0, U+27BF, U+2934-2935, U+2B05-2B07,
    U+2B1B-2B1C, U+2B50, U+2B55, U+3030, U+303D,
    U+3297, U+3299,
    U+1F000-1F02F, U+1F0A0-1F0FF,
    U+1F100-1F1FF, U+1F200-1F2FF,
    U+1F300-1F5FF, U+1F600-1F64F,
    U+1F680-1F6FF, U+1F700-1F77F,
    U+1F780-1F7FF, U+1F800-1F8FF,
    U+1F900-1F9FF, U+1FA00-1FA6F,
    U+1FA70-1FAFF, U+FE0E-FE0F, U+E0020-E007F;
}

/* ── SEMANTIC ALIASES (bridge accent tokens to role names) ── */
:root {
  --success: var(--lime);
  --warning: var(--gold);
  --danger:  var(--red);
  --info:    var(--blue);
}

/* ── 2. RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  min-width: 320px;
}
/* Плавный скролл только если пользователь/система не просят уменьшить анимацию.
   На слабых машинах smooth-scroll делает программные прокрутки (scrollIntoView,
   якоря) рваными — лучше мгновенно. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  /* NativeEmoji resolves to the platform emoji font via @font-face above.
     Direct fallbacks after it cover browsers that ignore @font-face local(). */
  font-family: var(--font-body), var(--font-emoji);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:where(.emoji, .theme-card__emoji, .biz-card__emoji, .empty-state__icon, [data-emoji]) {
  font-family: var(--font-emoji) !important;
  font-variant-emoji: emoji;
  text-rendering: optimizeSpeed;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { line-height: 1.15; font-weight: 700; }

/* ── 3. TYPOGRAPHY ──────────────────────────────────────────── */
.display-1 { font-size: var(--text-5xl); font-weight: 800; letter-spacing: -0.03em; }
.display-2 { font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.025em; }
.display-3 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; }
.heading-1 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.015em; }
.heading-2 { font-size: var(--text-xl);  font-weight: 600; }
.heading-3 { font-size: var(--text-lg);  font-weight: 600; }
.body-lg   { font-size: var(--text-md);  line-height: 1.7; }
.body-sm   { font-size: var(--text-sm);  line-height: 1.6; }
.caption   { font-size: var(--text-xs);  letter-spacing: 0.03em; color: var(--muted); }
.mono      { font-family: var(--font-mono); font-size: 0.9em; }

.text-blue   { color: var(--blue); }
.text-gold   { color: var(--gold); }
.text-lime   { color: var(--lime); }
.text-muted  { color: var(--muted); }
.text-soft   { color: var(--text-soft); }
.text-danger { color: var(--red); }

/* ── 4. LAYOUT UTILITIES ────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-8);
}

.section {
  padding-block: var(--sp-24);
}
.section--sm { padding-block: var(--sp-16); }
.section--lg { padding-block: calc(var(--sp-24) * 1.5); }

.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }
.gap-10 { gap: var(--sp-10); }
.gap-12 { gap: var(--sp-12); }
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.grow    { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }

/* ── 5. CARD COMPONENT ──────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  /* backdrop-filter снят: .card используется в канбане, дашборде, и в
     карточке клиента внутри модалки редактирования заявки. Десятки
     элементов с собственным blur-слоем заставляли композитор пересчитывать
     blur при каждом hover/transform, давая «тугую» анимацию наведения.
     Существовал .card[data-select-open] оверрайд именно для этой проблемы
     при открытом селекте — теперь оверрайд не нужен. */
  transition: border-color var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.card:hover {
  border-color: var(--line-strong);
  background: var(--panel-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.card--flat  { border-radius: var(--r-lg); }
.card--sm    { padding: var(--sp-4); border-radius: var(--r-md); }
.card--lg    { padding: var(--sp-10); }
.card--glow-blue { box-shadow: var(--shadow-blue); border-color: var(--blue-dim); }
.card--glow-lime { box-shadow: var(--shadow-lime); border-color: var(--lime-dim); }

/* ── 6. BUTTON COMPONENT ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px var(--sp-6);
  border-radius: var(--r-full);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  /* было: transition: all — анимировало в т. ч. box-shadow/filter и
     вызывало повторную композицию при hover. Перечисляем только реально
     меняющиеся свойства. */
  transition: background var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              opacity var(--dur-base) var(--ease);
  white-space: nowrap;
  user-select: none;
}

.btn--primary {
  background: linear-gradient(135deg, var(--lime) 0%, var(--lime-dark) 100%);
  color: var(--bg);
  box-shadow: var(--shadow-lime);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--lime-dim) 0%, var(--lime) 100%);
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lime);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-dim);
}

.btn--secondary {
  background: var(--panel);
  color: var(--text);
  border: 1.5px solid var(--line-strong);
}
.btn--secondary:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-dim);
}

.btn--danger {
  background: var(--red-dim);
  color: var(--red);
  border: 1.5px solid rgba(255, 91, 91, 0.35);
}
.btn--danger:hover {
  background: rgba(255, 91, 91, 0.18);
  border-color: var(--red);
}

.btn--outline-lime {
  background: var(--lime-dim);
  color: var(--lime);
  border: 1.5px solid rgba(151, 232, 91, 0.35);
}
.btn--outline-lime:hover { background: rgba(151, 232, 91, 0.2); }

.btn--sm   { padding: 9px var(--sp-4);   font-size: var(--text-sm); }
.btn--lg   { padding: 16px var(--sp-10); font-size: var(--text-md); }
.btn--icon { padding: 10px; border-radius: var(--r-md); aspect-ratio: 1; }
.btn--full { width: 100%; }

/* ── 7. BADGE / TAG COMPONENT ───────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge--blue   { background: var(--blue-dim);   color: var(--blue);   border: 1px solid rgba(101,207,255,0.25); }
.badge--lime   { background: var(--lime-dim);   color: var(--lime);   border: 1px solid rgba(151,232,91,0.25); }
.badge--gold   { background: var(--gold-dim);   color: var(--gold);   border: 1px solid rgba(255,178,63,0.25); }
.badge--red    { background: var(--red-dim);    color: var(--red);    border: 1px solid rgba(255,91,91,0.25); }
.badge--purple { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(176,126,255,0.25); }
.badge--muted  { background: var(--panel); color: var(--muted); border: 1px solid var(--line); }

/* ── 8. INPUT COMPONENT ─────────────────────────────────────── */
.input-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
.input-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-soft); }

.input {
  width: 100%;
  padding: 12px var(--sp-4);
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--text-base);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  outline: none;
}
.input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}
.input::placeholder { color: var(--muted); }
.input[type="color"] {
  width: 52px;
  min-width: 52px;
  height: 54px;
  padding: 4px;
  cursor: pointer;
  flex: 0 0 auto;
}
.input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--r-md) - 4px);
}
.input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--r-md) - 4px);
}
.color-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.color-value {
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1;
  text-transform: uppercase;
}
.input--error { border-color: var(--red); }
.input--error:focus { box-shadow: 0 0 0 3px var(--red-dim); }

/* ── SELECT WRAPPER (suppress native arrow, show custom SVG) ─ */
.select-wrap {
  position: relative;
  display: block;
}
.select-wrap .select-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
}
.select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  flex-shrink: 0;
  display: block;
}
select.input option,
select.input optgroup {
  background: var(--panel-strong);
  color: var(--text);
}

/* ── CUSTOM SELECT (theme-safe popup over native <select>) ─ */
.custom-select {
  position: relative;
}
.custom-select .select-arrow,
.custom-select .appt-status-arrow {
  display: none;
}
.custom-select__native {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.custom-select__button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 11px 12px 11px var(--sp-4);
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.custom-select__button:hover {
  border-color: var(--line-strong);
  background: var(--panel-hover);
}
.custom-select__button:focus-visible,
.custom-select.is-open .custom-select__button {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim), inset 0 1px 0 rgba(255,255,255,0.04);
}
.custom-select__button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.custom-select__button.is-placeholder .custom-select__value {
  color: var(--muted);
}
.custom-select__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select__chevron {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  color: var(--muted);
  background: color-mix(in srgb, var(--bg-raised) 70%, transparent);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.custom-select.is-open .custom-select__chevron {
  transform: rotate(180deg);
  color: var(--blue);
}
.custom-select__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1200;
  max-height: min(280px, 42vh);
  overflow-y: auto;
  padding: 6px;
  background: color-mix(in srgb, var(--panel-strong) 94%, var(--bg-raised));
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  /* backdrop-filter снят: дропдаун кастом-селекта часто раскрывается
     прямо в форме редактирования заявки и блюр форсил re-композицию
     при hover по опциям. */
}
.custom-select__option {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-size: var(--text-sm);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.custom-select__option:hover,
.custom-select__option:focus-visible {
  background: var(--blue-dim);
  color: var(--text);
}
.custom-select__option.is-selected {
  background: var(--lime-dim);
  color: var(--lime);
  font-weight: 700;
}
.custom-select__option.is-placeholder {
  color: var(--muted);
}
.custom-select__option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.custom-select--compact {
  min-width: 132px;
}
.custom-select--compact .custom-select__button {
  min-height: 36px;
  padding: 0 6px 0 var(--sp-3);
  font-size: var(--text-xs);
  border-radius: var(--r-md);
}
.custom-select--compact .custom-select__chevron {
  width: 24px;
  height: 24px;
}
.custom-select--compact .custom-select__menu {
  right: auto;
  min-width: 190px;
}

/* ── SLOT / TIME PICKER ─────────────────────────────────────── */
.slot-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  min-height: 48px;
  align-items: center;
  transition: border-color var(--dur-base) var(--ease);
}
.slot-btn {
  padding: 6px 12px;
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.slot-btn:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-dim);
}
.slot-btn.is-selected {
  background: var(--lime-dim);
  border-color: var(--lime);
  color: var(--lime);
  font-weight: 600;
}
.slot-btn--taken,
.slot-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── 9. AVATAR COMPONENT ────────────────────────────────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-dim), var(--purple-dim));
  border: 1.5px solid var(--line-strong);
  color: var(--text-soft);
}
.avatar--sm  { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar--md  { width: 36px; height: 36px; }
.avatar--lg  { width: 48px; height: 48px; font-size: var(--text-md); }
.avatar--xl  { width: 64px; height: 64px; font-size: var(--text-xl); }
/* Initials sit underneath; <img class="avatar__img"> overlays them when the
   profile photo loads, and removes itself on error to expose the initials. */
.avatar { position: relative; }
.avatar__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ── 10. DIVIDER ────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--line);
  width: 100%;
  margin-block: var(--sp-4);
}

/* ── 11. STAT / METRIC CARD ─────────────────────────────────── */
.stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.stat-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.stat-card__label {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.stat-card__value {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-card__delta {
  font-size: var(--text-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stat-card__delta--up   { color: var(--lime); }
.stat-card__delta--down { color: var(--red); }

/* ── 12. PROGRESS BAR ───────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--line);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--blue), var(--purple));
  transition: width var(--dur-slow) var(--ease);
}
.progress-bar--lime .progress-bar__fill {
  background: linear-gradient(90deg, var(--lime-dark), var(--lime));
}
.progress-bar--gold .progress-bar__fill {
  background: linear-gradient(90deg, var(--gold-strong), var(--gold));
}

/* ── 13. SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--line-strong); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── 14. SKELETON LOADER ────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-raised) 25%, var(--bg-soft) 50%, var(--bg-raised) 75%);
  background-size: 200% 100%;
  animation: skeleton-sweep 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 15. TOOLTIP ────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: var(--text-xs);
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── 16. NOTIFICATION DOT ───────────────────────────────────── */
.notif-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--red);
  border: 2px solid var(--bg);
  flex-shrink: 0;
}
.notif-dot--blue { background: var(--blue); }
.notif-dot--lime { background: var(--lime); }

/* ── 17. EMPTY STATE ────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16);
  gap: var(--sp-4);
  text-align: center;
  color: var(--muted);
}
.empty-state__icon {
  font-size: 2.5rem;
  opacity: 0.4;
}
.empty-state__title { font-size: var(--text-lg); font-weight: 600; color: var(--text-soft); }

/* ── 18. RESPONSIVE UTILITIES ───────────────────────────────── */
@media (max-width: 1080px) {
  .container { padding-inline: var(--sp-6); }
  .hide-md { display: none !important; }
}
@media (max-width: 768px) {
  .container { padding-inline: var(--sp-4); }
  .section { padding-block: var(--sp-16); }
  .section--sm { padding-block: var(--sp-10); }
  .hide-sm { display: none !important; }
  .btn--lg { padding: 14px var(--sp-8); }
  .btn { width: 100%; justify-content: center; }
  .btn--icon { width: auto; }
}
@media (max-width: 480px) {
  .hide-xs { display: none !important; }
}