/* ══════════════════════════════════════════════════════════════════
   Saxar CRM — Soft UI Evolution Design System
   Style: Evolved Soft UI · WCAG AA+ · Balanced Density
   Typography: Inter / System UI + JetBrains Mono (numeric)
   ══════════════════════════════════════════════════════════════════ */

/* Шрифты самохостятся (static/vendor/fonts): @import с fonts.googleapis.com
   блокировал рендер и не работал бы в закрытой ведомственной сети. */
@font-face {
  font-family: 'Inter';
  src: url("../vendor/fonts/InterVariable.2bf3d951bf9d.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("../vendor/fonts/JetBrainsMono.4e0581ae831b.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("../vendor/fonts/JetBrainsMono-Bold.f3651b6798df.woff2") format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* Публичная проверка билета: автономный экран без admin-обвязки. */
.sx-verify-page {
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  color: #1a1f2e;
  background:
    radial-gradient(circle at 15% 10%, rgba(82,168,96,.13), transparent 28%),
    radial-gradient(circle at 88% 88%, rgba(45,122,58,.10), transparent 31%),
    #f5f7f5;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}
.sx-verify-page *,
.sx-verify-page *::before,
.sx-verify-page *::after { box-sizing: border-box; }
.sx-verify-card {
  width: min(100%, 540px);
  overflow: hidden;
  border: 1px solid rgba(26,31,46,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 28px 70px rgba(25,63,35,.14);
}
.sx-verify-card__brand {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #eaecf0;
}
.sx-verify-card__brand img { width: 34px; height: 34px; }
.sx-verify-card__brand div { display: grid; gap: 2px; }
.sx-verify-card__brand strong { font-size: 13px; font-weight: 720; }
.sx-verify-card__brand small { color: #6b7280; font-size: 11px; }
.sx-verify-card__result {
  padding: 34px 30px 28px;
  text-align: center;
}
.sx-verify-card__icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: #1d6b2d;
  background: #e8f5ea;
}
.sx-verify-card__icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sx-verify-card--inactive .sx-verify-card__icon,
.sx-verify-card--not_found .sx-verify-card__icon {
  color: #b42318;
  background: #fef0ed;
}
.sx-verify-card--expired .sx-verify-card__icon,
.sx-verify-card--future .sx-verify-card__icon {
  color: #a15c07;
  background: #fff7e6;
}
.sx-verify-card__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #667085;
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.sx-verify-card__result h1 {
  margin: 0;
  color: #1a1f2e;
  font-size: clamp(25px, 6vw, 34px);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.sx-verify-card__result p {
  max-width: 390px;
  margin: 10px auto 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
}
.sx-verify-card__details {
  margin: 0 24px;
  padding: 5px 0;
  border-top: 1px solid #eaecf0;
}
.sx-verify-card__details > div {
  padding: 13px 2px;
  display: grid;
  grid-template-columns: minmax(120px, .75fr) minmax(0, 1.25fr);
  gap: 18px;
  border-bottom: 1px solid #f0f1f3;
}
.sx-verify-card__details > div:last-child { border-bottom: 0; }
.sx-verify-card__details dt {
  color: #667085;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sx-verify-card__details dd {
  min-width: 0;
  margin: 0;
  color: #374151;
  font-size: 12.5px;
  font-weight: 620;
  overflow-wrap: anywhere;
}
.sx-verify-card__details > div:first-child dd {
  color: #1d6b2d;
  font-family: "JetBrains Mono", monospace;
}
.sx-verify-card footer {
  padding: 16px 24px 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #667085;
  background: #fafbfa;
  font-size: 10px;
}
.sx-verify-card footer time {
  flex: 0 0 auto;
  color: #6b7280;
  font-family: "JetBrains Mono", monospace;
}
@media (max-width: 1480px) {
  .sx-gosuslugi-widget {
    grid-template-columns: 52px minmax(240px, 1fr) auto;
  }
  .sx-gosuslugi-widget__status {
    grid-column: 2;
    width: max-content;
  }
  .sx-gosuslugi-widget__actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-items: stretch;
    flex-direction: column;
  }
  .sx-gosuslugi-widget__actions .sx-btn { width: 100%; }
}

@media (max-width: 860px) {
  .sx-gosuslugi-widget {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;
    padding: 17px;
  }
  .sx-gosuslugi-widget__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .sx-gosuslugi-widget__status {
    grid-column: 1 / -1;
    width: 100%;
  }
  .sx-gosuslugi-widget__actions {
    grid-column: 1 / -1;
    grid-row: auto;
    flex-direction: row;
  }
  .sx-gosuslugi-widget__actions > * { flex: 1 1 0; }
}

@media (max-width: 480px) {
  .sx-verify-page { padding: 12px; align-items: center; }
  .sx-verify-card { border-radius: 19px; }
  .sx-verify-card__brand { padding: 17px 18px; }
  .sx-verify-card__result { padding: 28px 20px 23px; }
  .sx-verify-card__details { margin: 0 18px; }
  .sx-verify-card__details > div {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 11px 1px;
  }
  .sx-verify-card footer { padding: 14px 18px 16px; flex-direction: column; gap: 4px; }
}

/* ──────────────────────────────────────────────────────────────────
   DESIGN TOKENS — Light Mode
   ────────────────────────────────────────────────────────────────── */
:root {
  /* ── Brand palette ── */
  --sx-accent:        #2D7A3A;   /* Forest green — AA on white */
  --sx-accent-mid:    #3A8F49;   /* Main interactive green */
  --sx-accent-light:  #52A860;   /* Hover / lighter state */
  --sx-accent-pale:   #E8F5EA;   /* Soft green tint background */
  --sx-accent-ring:   rgba(58, 143, 73, 0.30);

  /* ── Neutrals — never pure black ── */
  --sx-ink-900:  #25241F;
  --sx-ink-700:  #45423A;
  --sx-ink-600:  #5C584E;
  --sx-ink-500:  #716C60;
  --sx-ink-400:  #777166;
  --sx-ink-300:  #817A6E;
  --sx-ink-100:  #F4EFE7;

  /* Тёплые минеральные нейтрали: спокойнее чистого серого и не желтят интерфейс. */
  --sx-slate-50:  #FAF7F2; --sx-slate-100: #F3EEE6; --sx-slate-150: #ECE5DB;
  --sx-slate-200: #E2D9CC; --sx-slate-300: #D2C6B6; --sx-slate-400: #A69D90;
  --sx-slate-500: #777166; --sx-slate-600: #5C584E; --sx-slate-700: #45423A;
  --sx-slate-800: #302E29; --sx-slate-900: #25241F;
  --sx-canvas: #F5F0E8;
  --sx-surface: #FFFDF9;
  --sx-surface-raised: #FFFFFF;

  --sx-green-50:  #F0FDF4; --sx-green-100: #DCFCE7; --sx-green-200: #BBF7D0;
  --sx-green-500: #22C55E; --sx-green-600: #16A34A; --sx-green-700: #15803D;
  --sx-green-800: #166534; --sx-green-900: #14532D;
  --sx-teal: #0D9488; --sx-emerald: #059669;

  --sx-blue: #3B82F6;   --sx-indigo: #6366F1;  --sx-violet: #8B5CF6;
  --sx-amber: #F59E0B;  --sx-orange: #F97316;  --sx-red: #EF4444;
  --sx-rose: #E11D48;

  /* ── Soft UI Evolution Shadow System ── */
  --sx-shadow-xs:  0 1px 2px rgba(26, 31, 46, 0.04);
  --sx-shadow-sm:  0 1px 3px rgba(26, 31, 46, 0.04),
                   0 4px 12px rgba(26, 31, 46, 0.06);
  --sx-shadow:     0 2px 4px rgba(26, 31, 46, 0.05),
                   0 8px 20px rgba(26, 31, 46, 0.07);
  --sx-shadow-md:  0 2px 6px rgba(26, 31, 46, 0.06),
                   0 12px 28px rgba(26, 31, 46, 0.09);
  --sx-shadow-lg:  0 4px 8px rgba(26, 31, 46, 0.06),
                   0 20px 40px rgba(26, 31, 46, 0.10);
  --sx-shadow-xl:  0 8px 16px rgba(26, 31, 46, 0.07),
                   0 32px 56px rgba(26, 31, 46, 0.11);
  --sx-shadow-green: 0 4px 16px rgba(45, 122, 58, 0.18);

  /* ── Geometry — 8–12px per spec ── */
  --sx-radius-xs: 4px;
  --sx-radius-sm: 8px;
  --sx-radius:    10px;    /* canonical */
  --sx-radius-lg: 12px;
  --sx-radius-xl: 16px;

  /* ── Gradients ── */
  --sx-grad-main:   linear-gradient(135deg, #1B4D25 0%, #2D7A3A 50%, #3A8F49 100%);
  --sx-grad-green:  linear-gradient(135deg, #2D7A3A 0%, #3A8F49 100%);
  --sx-grad-amber:  linear-gradient(135deg, #D97706 0%, #F97316 100%);
  --sx-grad-rose:   linear-gradient(135deg, #DC2626 0%, #E11D48 100%);
  --sx-grad-indigo: linear-gradient(135deg, #4F46E5 0%, #3B82F6 100%);

  /* ── Motion — 200–300ms per spec ── */
  --sx-dur-fast:   200ms;
  --sx-dur:        250ms;
  --sx-dur-slow:   300ms;
  --sx-dur-entry:  420ms;
  --sx-ease:       cubic-bezier(0.16, 1, 0.30, 1);
  --sx-ease-out:   cubic-bezier(0.0, 0.0, 0.20, 1.0);
  --sx-stagger:    80ms;
}

/* ── Dark mode tokens ── */
.dark {
  --sx-bg-base:       #121620;
  --sx-bg-surface:    #1A1E2C;
  --sx-bg-raised:     #22273A;
  --sx-border:        rgba(255, 255, 255, 0.08);
  --sx-border-strong: rgba(255, 255, 255, 0.14);
  --sx-text-primary:  rgba(255, 255, 255, 0.90);
  --sx-text-secondary:rgba(255, 255, 255, 0.74);
  --sx-text-muted:    rgba(255, 255, 255, 0.60);
  --sx-accent-on-dark:#6EE07F;
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL BASE
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body, .text-font-default-light, .text-font-default-dark {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-feature-settings: "cv11", "ss01", "cv02", "cv03", "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#main, #content { background: var(--sx-canvas) !important; }
.dark #main, .dark #content { background: #121620 !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sx-slate-200); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--sx-slate-300); }
.dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.09); }

/* Global focus — 2px ring, offset 2px (WCAG 2.1) */
:focus-visible {
  outline: 2px solid var(--sx-accent-mid) !important;
  outline-offset: 2px !important;
}
.dark :focus-visible { outline-color: var(--sx-accent-on-dark) !important; }

/* ══════════════════════════════════════════════════════════════════
   LOGIN
   ══════════════════════════════════════════════════════════════════ */

body.sx-login-page {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: #F3F5F3 !important;
}

.dark body.sx-login-page { background: #10141D !important; }

.sx-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 0.92fr) minmax(520px, 1.08fr);
}

.sx-login__brand {
  position: relative;
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(125, 216, 141, 0.22), transparent 30%),
    radial-gradient(circle at 18% 88%, rgba(87, 177, 108, 0.18), transparent 34%),
    linear-gradient(145deg, #102B1A 0%, #174B2A 48%, #216934 100%);
}

.sx-login__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image: radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(135deg, #000, transparent 72%);
}

.sx-login__brand::after {
  content: "";
  position: absolute;
  right: -170px;
  bottom: -190px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 58px rgba(255,255,255,.025),
    0 0 0 116px rgba(255,255,255,.018);
}

.sx-login__brand-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 5vw, 72px);
}

.sx-login__logo,
.sx-login__mobile-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  font-size: 15px;
  font-weight: 720;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.sx-login__logo .material-symbols-outlined,
.sx-login__mobile-logo .material-symbols-outlined {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #12361E;
  font-size: 21px;
  border-radius: 11px;
  background: #7DDB8E;
  box-shadow: 0 10px 30px rgba(4, 24, 11, .22);
}

.sx-login__brand-copy {
  margin: auto 0;
  padding: 52px 0;
}

.sx-login__eyebrow,
.sx-login__kicker {
  display: block;
  margin-bottom: 15px;
  color: #8BE29A;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sx-login__brand-copy h1 {
  margin: 0;
  max-width: 590px;
  color: #fff;
  font-size: clamp(39px, 4.5vw, 68px);
  font-weight: 720;
  line-height: 1.04;
  letter-spacing: -.055em;
}

.sx-login__brand-copy p {
  max-width: 510px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 15px;
  line-height: 1.7;
}

.sx-login__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sx-login__features > div {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
}

.sx-login__features .material-symbols-outlined {
  display: block;
  margin-bottom: 12px;
  color: #88DE98;
  font-size: 21px;
}

.sx-login__features strong,
.sx-login__features small {
  display: block;
}

.sx-login__features strong {
  color: rgba(255,255,255,.9);
  font-size: 11.5px;
  font-weight: 680;
}

.sx-login__features small {
  margin-top: 4px;
  color: rgba(255,255,255,.42);
  font-size: 10.5px;
  line-height: 1.45;
}

.sx-login__workspace {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 54px;
  background:
    radial-gradient(circle at 80% 18%, rgba(45,122,58,.07), transparent 30%),
    #F7F8F6;
}

.dark .sx-login__workspace {
  background:
    radial-gradient(circle at 80% 18%, rgba(110,224,127,.06), transparent 30%),
    #121620;
}

.sx-login__toolbar {
  position: absolute;
  top: 24px;
  right: 28px;
}

.sx-login__card {
  width: min(100%, 440px);
  padding: 44px 42px 36px;
  border: 1px solid rgba(26,31,46,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  box-shadow:
    0 2px 5px rgba(26,31,46,.04),
    0 24px 70px rgba(26,31,46,.10);
  backdrop-filter: blur(18px);
}

.dark .sx-login__card {
  border-color: rgba(255,255,255,.09);
  background: rgba(26,30,44,.92);
  box-shadow: 0 24px 70px rgba(0,0,0,.26);
}

.sx-login__mobile-logo { display: none; color: var(--sx-ink-900); }
.dark .sx-login__mobile-logo { color: rgba(255,255,255,.9); }

.sx-login__kicker {
  margin-bottom: 9px;
  color: var(--sx-accent);
}

.sx-login__card h2 {
  margin: 0;
  color: var(--sx-ink-900);
  font-size: 29px;
  font-weight: 730;
  line-height: 1.18;
  letter-spacing: -.035em;
}

.dark .sx-login__card h2 { color: rgba(255,255,255,.94); }

.sx-login__subtitle {
  margin: 9px 0 30px;
  color: var(--sx-ink-500);
  font-size: 13.5px;
}

.dark .sx-login__subtitle { color: rgba(255,255,255,.45); }

.sx-login__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sx-login-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sx-login-field > label {
  color: var(--sx-ink-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
}

.dark .sx-login-field > label { color: rgba(255,255,255,.62); }

.sx-login-field__control {
  position: relative;
  border-radius: 11px;
  background: #FAFBFA;
}

.dark .sx-login-field__control { background: #22273A; }

.sx-login-field__control > .material-symbols-outlined {
  position: absolute;
  z-index: 1;
  left: 14px;
  top: 50%;
  color: var(--sx-slate-400);
  font-size: 19px;
  pointer-events: none;
  transform: translateY(-50%);
}

.sx-login .sx-login-field__control input {
  width: 100% !important;
  min-height: 48px;
  /*
   * Отступы резервируют место и для нашей пиктограммы слева, и для
   * встроенной кнопки менеджера паролей справа. Дополнительная
   * специфичность нужна, чтобы общий стиль input ниже не сбросил padding.
   */
  padding: 11px 52px 11px 48px !important;
  border-color: var(--sx-slate-200) !important;
  border-radius: 11px !important;
  background: #FAFBFA !important;
  box-shadow: inset 0 1px 0 rgba(26,31,46,.02);
}

.sx-login .sx-login-field__control input:focus {
  background: #fff !important;
}

.dark .sx-login .sx-login-field__control input {
  border-color: rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.045) !important;
  color: rgba(255,255,255,.9) !important;
}

.sx-login-field--error input { border-color: var(--sx-red) !important; }
.sx-login-field__error { color: #B91C1C; font-size: 11.5px; line-height: 1.4; }

.sx-login__submit {
  width: 100%;
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 4px;
  border: 0;
  border-radius: 11px;
  color: #fff !important;
  background: var(--sx-grad-green) !important;
  background-image: var(--sx-grad-green) !important;
  box-shadow: 0 8px 24px rgba(45,122,58,.24) !important;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 680;
  transition: transform var(--sx-dur-fast) var(--sx-ease-out),
              box-shadow var(--sx-dur-fast) var(--sx-ease-out);
}

.sx-login__submit .material-symbols-outlined {
  font-size: 19px;
  transition: transform var(--sx-dur-fast) var(--sx-ease-out);
}

.sx-login__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 28px rgba(45,122,58,.3) !important;
}

.sx-login__submit:hover .material-symbols-outlined { transform: translateX(3px); }
.sx-login__submit:active { transform: translateY(0) scale(.995); }

.sx-login-field__control input:-webkit-autofill,
.sx-login-field__control input:-webkit-autofill:hover,
.sx-login-field__control input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sx-ink-900) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-box-shadow: 0 0 0 1000px #FAFBFA inset !important;
  box-shadow: 0 0 0 1000px #FAFBFA inset !important;
  caret-color: var(--sx-ink-900) !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}

.dark .sx-login-field__control input:-webkit-autofill,
.dark .sx-login-field__control input:-webkit-autofill:hover,
.dark .sx-login-field__control input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(255,255,255,.9) !important;
  -webkit-box-shadow: 0 0 0 1000px #22273A inset !important;
  box-shadow: 0 0 0 1000px #22273A inset !important;
  caret-color: #fff !important;
}

.sx-login__security {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--sx-slate-100);
  color: var(--sx-ink-400, #9CA3AF);
  font-size: 10.5px;
  line-height: 1.5;
}

.sx-login__security .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--sx-accent-mid);
  font-size: 17px;
}

.dark .sx-login__security {
  border-top-color: rgba(255,255,255,.06);
  color: var(--sx-text-secondary);
}

.sx-logout-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(45,122,58,.14), transparent 30%),
    #F3F5F3 !important;
}

.dark .sx-logout-page {
  background:
    radial-gradient(circle at 20% 20%, rgba(110,224,127,.06), transparent 30%),
    #121620 !important;
}

.sx-logout {
  width: min(100%, 470px);
  padding: 42px;
  text-align: center;
  border: 1px solid rgba(26,31,46,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--sx-shadow-lg);
}

.dark .sx-logout {
  border-color: rgba(255,255,255,.08);
  background: #1A1E2C;
}

.sx-logout__logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  color: #12361E;
  border-radius: 14px;
  background: #7DDB8E;
}

.sx-logout h1 {
  margin: 0;
  color: var(--sx-ink-900);
  font-size: 25px;
  letter-spacing: -.03em;
}

.dark .sx-logout h1 { color: rgba(255,255,255,.94); }
.sx-logout p { margin: 10px 0 27px; color: var(--sx-ink-500); font-size: 13.5px; }
.dark .sx-logout p { color: rgba(255,255,255,.45); }
.sx-logout a {
  min-height: 47px;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: #fff !important;
  background: var(--sx-grad-green) !important;
  font-size: 14px;
  font-weight: 680;
  text-decoration: none;
  box-shadow: var(--sx-shadow-green);
}

@media (max-width: 1040px) {
  .sx-login { grid-template-columns: minmax(360px, .8fr) minmax(480px, 1.2fr); }
  .sx-login__features { display: none; }
}

@media (max-width: 860px) {
  .sx-login { display: block; }
  .sx-login__brand { display: none; }
  .sx-login__workspace { padding: 38px 20px; }
  .sx-login__mobile-logo { display: inline-flex; margin-bottom: 34px; }
}

@media (max-width: 480px) {
  .sx-login__workspace {
    display: flex;
    align-items: center;
    padding: 54px 16px 24px;
  }

  .sx-login__toolbar { top: 16px; right: 16px; }
  .sx-login__card {
    padding: 29px 23px 25px;
    border-radius: 17px;
  }
  .sx-login__mobile-logo { margin-bottom: 27px; }
  .sx-login__card h2 { font-size: 25px; }
  .sx-login__subtitle { margin-bottom: 24px; }
}

/* ══════════════════════════════════════════════════════════════════
   NAVIGATION SIDEBAR
   ══════════════════════════════════════════════════════════════════ */

#nav-sidebar { box-shadow: none !important; }

#site-name,
#nav-sidebar .border-b a,
#nav-sidebar .border-b span {
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.02em !important;
}

#nav-sidebar h2 {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-bottom: 4px !important;
}

#nav-sidebar a[href] {
  font-weight: 500 !important;
  font-size: 13.5px !important;
  border-radius: var(--sx-radius-sm) !important;
  transition: all var(--sx-dur-fast) var(--sx-ease-out) !important;
}

#nav-filter input { border-radius: var(--sx-radius-sm) !important; font-size: 13px !important; }

/* ══════════════════════════════════════════════════════════════════
   TOP HEADER
   ══════════════════════════════════════════════════════════════════ */

#header { position: relative !important; z-index: 100 !important; }

#header-inner {
  border-bottom: 1px solid var(--sx-slate-200) !important;
  background: rgba(255, 253, 249, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  position: relative !important;
  z-index: 100 !important;
}
.dark #header-inner {
  background: rgba(18, 22, 32, 0.94) !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

#header-inner h1, #header-inner h1 * {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sx-ink-700) !important;
  letter-spacing: -0.01em !important;
}
.dark #header-inner h1, .dark #header-inner h1 * {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* ══════════════════════════════════════════════════════════════════
   LIST TABLES
   ══════════════════════════════════════════════════════════════════ */

#changelist {
  background: var(--sx-surface) !important;
  border: 1px solid var(--sx-slate-200) !important;
  border-radius: var(--sx-radius) !important;
  box-shadow: var(--sx-shadow-sm) !important;
  overflow: visible !important;
}
.dark #changelist {
  background: #1A1E2C !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#result_list { border-spacing: 0 !important; border-collapse: collapse !important; }

#content-main,
#changelist,
.changelist-form-container,
.changelist-form-container > div,
#changelist-form {
  min-width: 0 !important;
  max-width: 100% !important;
}

#changelist [data-simplebar],
#changelist .simplebar-wrapper,
#changelist .simplebar-content-wrapper {
  max-width: 100% !important;
}

#result_list thead tr th {
  background: var(--sx-slate-50) !important;
  border-bottom: 1px solid var(--sx-slate-200) !important;
  color: var(--sx-ink-500) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 11px 16px !important;
}
.dark #result_list thead tr th {
  background: rgba(255, 255, 255, 0.025) !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.30) !important;
}

#result_list tbody tr {
  transition: background var(--sx-dur-fast) var(--sx-ease-out) !important;
  border-bottom: 1px solid var(--sx-slate-100) !important;
}
#result_list tbody tr:hover { background: var(--sx-slate-50) !important; }
.dark #result_list tbody tr { border-bottom-color: rgba(255, 255, 255, 0.04) !important; }
.dark #result_list tbody tr:hover { background: rgba(255, 255, 255, 0.03) !important; }

#result_list tbody tr td {
  padding: 13px 16px !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--sx-ink-700) !important;
  border: none !important;
  vertical-align: middle !important;
  overflow-wrap: anywhere;
}
.dark #result_list tbody tr td { color: rgba(255, 255, 255, 0.72) !important; }

#result_list a {
  color: var(--sx-ink-900) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color var(--sx-dur-fast) var(--sx-ease-out) !important;
}
#result_list a:hover { color: var(--sx-accent-mid) !important; }
.dark #result_list a { color: rgba(255, 255, 255, 0.88) !important; }
.dark #result_list a:hover { color: var(--sx-accent-on-dark) !important; }

#result_list tbody tr.selected { background: rgba(45, 122, 58, 0.05) !important; }

.paginator {
  padding: 14px 20px !important;
  border-top: 1px solid var(--sx-slate-100) !important;
  font-size: 13px !important;
  color: var(--sx-ink-500) !important;
  background: var(--sx-surface) !important;
}
.dark .paginator {
  background: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.38) !important;
}
.paginator a {
  color: var(--sx-accent-mid) !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: var(--sx-radius-sm) !important;
  transition: background var(--sx-dur-fast) var(--sx-ease-out) !important;
}
.paginator a:hover { background: var(--sx-green-50) !important; }
.paginator .this-page {
  background: var(--sx-accent) !important;
  color: #fff !important;
  padding: 4px 10px !important;
  border-radius: var(--sx-radius-sm) !important;
  font-weight: 700 !important;
}

#changelist-filter {
  width: min(330px, 86vw) !important;
  padding: 22px 20px 28px !important;
  background: var(--sx-surface) !important;
  border-left: 1px solid var(--sx-slate-200) !important;
  box-shadow: -18px 0 48px rgba(57, 48, 35, .08) !important;
}
.dark #changelist-filter {
  background: #202638 !important;
  border-left-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: -18px 0 48px rgba(0, 0, 0, .28) !important;
}
#changelist-filter h2 {
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--sx-ink-600) !important;
  margin: 0 0 18px !important;
}
#changelist-filter h3 {
  font-size: 10px !important;
  font-weight: 760 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--sx-ink-500) !important;
  padding-top: 18px !important;
  margin: 16px 0 8px !important;
  border-top: 1px solid var(--sx-slate-100) !important;
}
#changelist-filter h2 + h3 {
  margin-top: 0 !important;
}
#changelist-filter ul {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#changelist-filter li {
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
}
#changelist-filter a {
  position: relative !important;
  display: flex !important;
  min-height: 38px !important;
  align-items: center !important;
  padding: 8px 11px !important;
  color: var(--sx-ink-700) !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
  border-radius: var(--sx-radius-sm) !important;
  transition: all var(--sx-dur-fast) var(--sx-ease-out) !important;
  text-decoration: none !important;
}
#changelist-filter a:hover {
  background: var(--sx-accent-pale) !important;
  color: var(--sx-accent) !important;
}
#changelist-filter .selected a {
  padding-right: 34px !important;
  color: #22652E !important;
  background: #E8F1E6 !important;
  box-shadow: inset 0 0 0 1px rgba(45, 122, 58, .10) !important;
  font-weight: 680 !important;
}
#changelist-filter .selected a::after {
  content: "check";
  position: absolute;
  right: 10px;
  color: var(--sx-accent);
  font-family: "Material Symbols Outlined";
  font-size: 18px;
}
.dark #changelist-filter h2,
.dark #changelist-filter h3 {
  color: rgba(255, 255, 255, .68) !important;
}
.dark #changelist-filter h3 {
  border-top-color: rgba(255, 255, 255, .09) !important;
}
.dark #changelist-filter a {
  color: rgba(255, 255, 255, .82) !important;
}
.dark #changelist-filter a:hover {
  color: #F2FFF3 !important;
  background: rgba(110, 224, 127, .10) !important;
}
.dark #changelist-filter .selected a {
  color: #A8F2B3 !important;
  background: rgba(110, 224, 127, .14) !important;
  box-shadow: inset 0 0 0 1px rgba(110, 224, 127, .16) !important;
}
.dark #changelist-filter .selected a::after {
  color: #8CEB9A !important;
}

#toolbar { padding: 12px 20px 0 !important; }
#searchbar {
  border: 1px solid var(--sx-slate-200) !important;
  border-radius: var(--sx-radius-sm) !important;
  box-shadow: var(--sx-shadow-xs) !important;
  transition: all var(--sx-dur) var(--sx-ease-out) !important;
  overflow: hidden !important;
}
#searchbar:focus-within {
  border-color: var(--sx-accent-mid) !important;
  box-shadow: 0 0 0 3px var(--sx-accent-ring) !important;
}

/* ══════════════════════════════════════════════════════════════════
   EDIT FORMS
   ══════════════════════════════════════════════════════════════════ */

fieldset.module {
  border: none !important; background: transparent !important;
  padding: 0 !important; margin: 0 0 24px !important;
}
fieldset.module > h2 {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid var(--sx-accent-mid) !important;
  border-radius: 0 !important;
  padding: 6px 12px !important; margin-bottom: 12px !important;
  font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  color: var(--sx-ink-500) !important;
}
.dark fieldset.module > h2 {
  color: rgba(255, 255, 255, 0.44) !important;
  border-left-color: var(--sx-accent-on-dark) !important;
}

div.aligned {
  background: var(--sx-surface) !important;
  border: 1px solid var(--sx-slate-200) !important;
  border-radius: var(--sx-radius) !important;
  box-shadow: var(--sx-shadow-sm) !important;
  padding: 4px 8px !important; margin-bottom: 0 !important; overflow: visible !important;
}
.dark div.aligned {
  background: #1A1E2C !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.form-row {
  padding: 14px 12px !important;
  border-bottom: 1px solid var(--sx-slate-100) !important;
  transition: background var(--sx-dur-fast) var(--sx-ease-out) !important;
  min-width: 0 !important;
}
.form-row:last-child { border-bottom: none !important; }
.form-row:hover { background: var(--sx-slate-50) !important; }
.dark .form-row { border-bottom-color: rgba(255, 255, 255, 0.04) !important; }
.dark .form-row:hover { background: rgba(255, 255, 255, 0.025) !important; }

.form-row > div,
.form-row .flex,
.form-row .readonly {
  min-width: 0 !important;
  max-width: 100% !important;
}

.form-row .readonly,
.form-row .readonly a {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.change-form fieldset,
.change-form .module,
.change-form .aligned,
.change-form .form-row,
.change-form .form-row .flex-grow,
.change-form .related-widget-wrapper {
  min-width: 0 !important;
  max-width: 100% !important;
}

.change-form .related-widget-wrapper .select2-container {
  flex: 1 1 140px !important;
  min-width: 0 !important;
  width: auto !important;
}

.form-row .readonly a {
  display: inline-block;
  max-width: 100%;
}

.form-row label, .form-row > div > label {
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--sx-ink-500) !important; letter-spacing: 0.02em !important;
  margin-bottom: 4px !important; display: block !important;
}
.dark .form-row label { color: rgba(255, 255, 255, 0.42) !important; }

/* Base input styles — WCAG AA, 1px border, 10px radius */
input[type="text"], input[type="email"], input[type="number"],
input[type="date"], input[type="time"], input[type="url"],
input[type="password"], input[type="tel"], textarea, select {
  border: 1px solid var(--sx-slate-200) !important;
  border-radius: var(--sx-radius-sm) !important;
  padding: 9px 13px !important;
  font-size: 14px !important;
  font-family: inherit !important; font-weight: 400 !important;
  color: var(--sx-ink-900) !important;
  background: #fff !important;
  transition: border-color var(--sx-dur-fast) var(--sx-ease-out),
              box-shadow var(--sx-dur-fast) var(--sx-ease-out) !important;
  line-height: 1.6 !important;
}
input:hover, textarea:hover, select:hover {
  border-color: var(--sx-slate-300) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--sx-accent-mid) !important;
  box-shadow: 0 0 0 3px var(--sx-accent-ring) !important;
}
.dark input[type="text"], .dark input[type="email"], .dark textarea, .dark select {
  background: #22273A !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}
.dark input:focus, .dark textarea:focus, .dark select:focus {
  border-color: var(--sx-accent-on-dark) !important;
  box-shadow: 0 0 0 3px rgba(110, 224, 127, 0.18) !important;
}

input[type="checkbox"] {
  width: 16px !important; height: 16px !important;
  border-radius: 4px !important;
  accent-color: var(--sx-accent) !important;
  cursor: pointer !important;
}

#submit-row > div > div > div {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  border-top: 1px solid var(--sx-slate-200) !important;
  box-shadow: 0 -2px 16px rgba(26, 31, 46, 0.06) !important;
}
.dark #submit-row > div > div > div {
  background: rgba(18, 22, 32, 0.96) !important;
  border-top-color: rgba(255, 255, 255, 0.07) !important;
}

#submit-row input[type="submit"],
#submit-row button[type="submit"],
.submit-row input[type="submit"] {
  background: var(--sx-grad-green) !important;
  border: none !important;
  border-radius: var(--sx-radius) !important;
  padding: 10px 22px !important;
  font-size: 14px !important; font-weight: 600 !important;
  font-family: inherit !important;
  color: #fff !important; cursor: pointer !important;
  box-shadow: var(--sx-shadow-green) !important;
  transition: all var(--sx-dur) var(--sx-ease-out) !important;
  letter-spacing: -0.01em !important;
}
#submit-row input[type="submit"]:hover,
#submit-row button[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(45, 122, 58, 0.26) !important;
}
#submit-row input[type="submit"]:active,
#submit-row button[type="submit"]:active {
  transform: translateY(0) scale(0.99) !important;
}

#submit-row a.deletelink, .submit-row a.deletelink {
  background: rgba(239, 68, 68, 0.06) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.20) !important;
  border-radius: var(--sx-radius) !important;
  padding: 9px 18px !important;
  font-size: 13px !important; font-weight: 600 !important;
  text-decoration: none !important;
  transition: all var(--sx-dur-fast) var(--sx-ease-out) !important;
  display: inline-flex !important; align-items: center !important;
}
#submit-row a.deletelink:hover {
  background: rgba(239, 68, 68, 0.11) !important;
  transform: translateY(-1px) !important;
}

.object-tools a {
  background: #fff !important;
  border: 1px solid var(--sx-slate-200) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--sx-ink-500) !important;
  text-decoration: none !important;
  transition: all var(--sx-dur-fast) var(--sx-ease-out) !important;
  box-shadow: var(--sx-shadow-xs) !important;
}
.object-tools a:hover {
  background: var(--sx-accent-pale) !important;
  border-color: rgba(45, 122, 58, 0.22) !important;
  color: var(--sx-accent) !important;
}

.object-tools a.addlink {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  justify-content: center !important;
  color: #fff !important;
  background: var(--sx-grad-green) !important;
  border-color: transparent !important;
  box-shadow: var(--sx-shadow-green) !important;
}
.object-tools a.addlink:hover {
  color: #fff !important;
  background: var(--sx-grad-green) !important;
  border-color: transparent !important;
}
.object-tools a.addlink .material-symbols-outlined {
  color: #fff !important;
  font-size: 19px !important;
}

.sx-mobile-menu-toggle {
  display: none;
}

.actions select {
  border-radius: var(--sx-radius-sm) !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  border-color: var(--sx-slate-200) !important;
}
.actions button {
  background: #fff !important;
  border: 1px solid var(--sx-slate-200) !important;
  border-radius: var(--sx-radius-sm) !important;
  padding: 7px 14px !important;
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--sx-ink-500) !important;
  cursor: pointer !important;
  transition: all var(--sx-dur-fast) var(--sx-ease-out) !important;
}
.actions button:hover {
  background: var(--sx-slate-50) !important;
  border-color: var(--sx-slate-300) !important;
}

/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS — Soft UI Evolution spec
   Entry: fade + translateY(16px → 0), 420ms ease-out
   Stagger: 80ms between items
   Interactions: 200–300ms ease-out
   ══════════════════════════════════════════════════════════════════ */

@keyframes sxFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sxShimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* Section entries */
.sx-metrics, .sx-charts { animation: sxFadeIn var(--sx-dur-entry) var(--sx-ease-out); }
.sx-filters             { animation: sxFadeUp var(--sx-dur-entry) var(--sx-ease-out); }
.sx-bot-stats           { animation: sxFadeIn var(--sx-dur-entry) var(--sx-ease-out); }
.sx-map-controls        { animation: sxFadeIn var(--sx-dur) var(--sx-ease-out); }

/* Metric card stagger — 80ms per spec */
.sx-metric {
  animation: sxFadeUp var(--sx-dur-entry) var(--sx-ease-out) backwards;
}
.sx-metric:nth-child(1) { animation-delay: calc(0 * var(--sx-stagger)); }
.sx-metric:nth-child(2) { animation-delay: calc(1 * var(--sx-stagger)); }
.sx-metric:nth-child(3) { animation-delay: calc(2 * var(--sx-stagger)); }
.sx-metric:nth-child(4) { animation-delay: calc(3 * var(--sx-stagger)); }
.sx-metric:nth-child(5) { animation-delay: calc(4 * var(--sx-stagger)); }
.sx-metric:nth-child(6) { animation-delay: calc(5 * var(--sx-stagger)); }
.sx-metric:nth-child(7) { animation-delay: calc(6 * var(--sx-stagger)); }
.sx-metric:nth-child(8) { animation-delay: calc(7 * var(--sx-stagger)); }
.sx-metrics--bot .sx-metric { animation-delay: 0s !important; }

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD SHELL
   ══════════════════════════════════════════════════════════════════ */

.sx-dashboard { display: flex; flex-direction: column; gap: 24px; margin-top: 4px; }

.sx-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--sx-ink-300);
  margin: 0 0 16px;
  display: flex; align-items: center; gap: 14px;
}
.sx-section-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--sx-slate-200) 0%, transparent 100%);
}
.dark .sx-section-title { color: rgba(255, 255, 255, 0.22); }
.dark .sx-section-title::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
}
.sx-bot-stats { display: flex; flex-direction: column; }

/* ══════════════════════════════════════════════════════════════════
   HERO HEADER
   ══════════════════════════════════════════════════════════════════ */

.sx-dashboard__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 30px 34px;
  background: var(--sx-grad-main);
  border-radius: var(--sx-radius-xl);
  position: relative; overflow: hidden;
  box-shadow: 0 2px 4px rgba(26, 31, 46, 0.08),
              0 12px 32px rgba(27, 77, 37, 0.20);
  isolation: isolate;
}

/* Dot-grid texture */
.sx-dashboard__header::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none; z-index: 0;
}
/* Edge fade */
.sx-dashboard__header::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 260px; height: 100%;
  background: linear-gradient(to left, rgba(255,255,255,0.04) 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}
.sx-dashboard__header-copy,
.sx-map-page__copy {
  position: relative;
  z-index: 1;
}

.sx-dashboard__title {
  font-size: 26px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.2;
  color: #fff; position: relative; z-index: 1;
}
.sx-dashboard__subtitle {
  margin-top: 5px; font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400; position: relative; z-index: 1;
}

.sx-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; position: relative; z-index: 1;
}
.sx-export-group {
  display: inline-flex; gap: 2px;
  background: rgba(0, 0, 0, 0.22);
  padding: 4px; border-radius: var(--sx-radius);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}
.sx-export-menu {
  display: inline-flex;
}
.sx-export-menu > summary {
  display: none;
  list-style: none;
}
.sx-export-menu > summary::-webkit-details-marker { display: none; }
.sx-export-group .sx-btn {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  border: none !important; box-shadow: none !important;
}
.sx-export-group .sx-btn--primary {
  background: rgba(255, 255, 255, 0.14) !important; color: #fff !important;
}
.sx-export-group .sx-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important; transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS — rounded 10px, smooth 200ms, tactile press
   ══════════════════════════════════════════════════════════════════ */

.sx-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--sx-radius);
  font-size: 13px; font-weight: 600; font-family: inherit;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--sx-dur-fast) var(--sx-ease-out),
              box-shadow var(--sx-dur-fast) var(--sx-ease-out),
              transform var(--sx-dur-fast) var(--sx-ease-out),
              border-color var(--sx-dur-fast) var(--sx-ease-out);
  border: 1px solid transparent;
}
.sx-btn:hover  { transform: translateY(-1px); }
.sx-btn:active { transform: translateY(0) scale(0.98); }

/* Primary — accent fill, lift on hover */
.sx-btn--primary {
  background: var(--sx-grad-green) !important;
  color: #fff !important; border: none !important;
  box-shadow: var(--sx-shadow-green) !important;
}
.sx-btn--primary:hover {
  box-shadow: 0 6px 20px rgba(45, 122, 58, 0.26) !important;
  color: #fff !important;
}

/* Ghost — 1.5px border, subtle fill on hover */
.sx-btn--ghost {
  background: #fff !important;
  color: var(--sx-ink-700) !important;
  border: 1px solid var(--sx-slate-200) !important;
  box-shadow: var(--sx-shadow-xs) !important;
}
.sx-btn--ghost:hover {
  background: var(--sx-slate-50) !important;
  border-color: var(--sx-slate-300) !important;
  color: var(--sx-ink-900) !important;
}
.dark .sx-btn--ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
.dark .sx-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FILTERS
   ══════════════════════════════════════════════════════════════════ */

.sx-filter-panel { display: block; }
.sx-filter-panel > summary { display: none; }

.sx-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 12px 18px; padding: 20px 24px;
  background: var(--sx-surface);
  border: 1px solid var(--sx-slate-200);
  border-radius: var(--sx-radius-lg);
  box-shadow: var(--sx-shadow-sm);
}
.dark .sx-filters {
  background: #1A1E2C;
  border-color: rgba(255, 255, 255, 0.08);
}

.sx-filter {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label above input per spec */
.sx-filter label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--sx-ink-500);
}
.dark .sx-filter label { color: rgba(255, 255, 255, 0.32); }

.sx-filter input, .sx-filter select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--sx-slate-200);
  border-radius: var(--sx-radius-sm);
  font-size: 13.5px; font-weight: 400;
  background: var(--sx-surface-raised); color: var(--sx-ink-900);
  font-family: inherit;
  transition: border-color var(--sx-dur-fast) var(--sx-ease-out),
              box-shadow var(--sx-dur-fast) var(--sx-ease-out);
}
.sx-filter input:hover, .sx-filter select:hover {
  border-color: var(--sx-slate-300);
}
.sx-filter input:focus, .sx-filter select:focus {
  outline: none;
  border-color: var(--sx-accent-mid);
  box-shadow: 0 0 0 3px var(--sx-accent-ring);
}
.dark .sx-filter input, .dark .sx-filter select {
  background: #22273A !important;
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.88) !important;
  color-scheme: dark;
}
.dark .sx-filter input:focus, .dark .sx-filter select:focus {
  border-color: var(--sx-accent-on-dark);
  box-shadow: 0 0 0 3px rgba(110, 224, 127, 0.16);
}

.sx-filter--actions { flex-direction: row; align-items: flex-end; gap: 8px; }
.sx-filter--presets {
  flex-direction: row; align-items: center; gap: 6px;
  grid-column: 1 / -1; padding-top: 4px;
}

.sx-preset {
  font-size: 12px; font-weight: 600; padding: 5px 14px;
  border-radius: 999px;
  background: var(--sx-slate-100); color: var(--sx-ink-500);
  cursor: pointer; border: 1px solid transparent;
  transition: all var(--sx-dur-fast) var(--sx-ease-out);
}
.sx-preset:hover {
  background: var(--sx-accent-pale); color: var(--sx-accent);
  border-color: rgba(45, 122, 58, 0.22);
  transform: translateY(-1px);
}
.dark .sx-preset { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.48); }

/* Главная точка входа в ручную ЕСИА-авторизацию. */
.sx-gosuslugi-widget {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid #DFD4C4;
  border-radius: var(--sx-radius-lg);
  background:
    radial-gradient(circle at 92% 10%, rgba(95, 139, 91, .10), transparent 30%),
    linear-gradient(120deg, #FFFDF9 0%, #F8F2E8 100%);
  box-shadow: var(--sx-shadow-sm);
}
.sx-gosuslugi-widget__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #2D713A;
  border: 1px solid rgba(45, 113, 58, .12);
  border-radius: 15px;
  background: rgba(232, 241, 230, .90);
}
.sx-gosuslugi-widget__icon .material-symbols-outlined { font-size: 26px; }
.sx-gosuslugi-widget__copy { min-width: 0; }
.sx-gosuslugi-widget__kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--sx-ink-500);
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.sx-gosuslugi-widget h2 {
  margin: 0;
  color: var(--sx-ink-900);
  font-size: 16px;
  font-weight: 730;
  letter-spacing: -.015em;
}
.sx-gosuslugi-widget p {
  max-width: 660px;
  margin: 4px 0 0;
  color: var(--sx-ink-500);
  font-size: 11.5px;
  line-height: 1.45;
}
.sx-gosuslugi-widget__status {
  min-width: 174px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sx-slate-200);
  border-radius: var(--sx-radius);
  background: rgba(255, 255, 255, .72);
}
.sx-gosuslugi-widget__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #B07839;
  box-shadow: 0 0 0 4px rgba(176, 120, 57, .12);
}
.sx-gosuslugi-widget__status > span:last-child { display: grid; gap: 2px; }
.sx-gosuslugi-widget__status strong {
  color: var(--sx-ink-700);
  font-size: 11.5px;
  font-weight: 700;
}
.sx-gosuslugi-widget__status small {
  color: var(--sx-ink-500);
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
}
.sx-gosuslugi-widget__status.is-active {
  border-color: rgba(45, 122, 58, .20);
  background: rgba(232, 245, 234, .76);
}
.sx-gosuslugi-widget__status.is-active .sx-gosuslugi-widget__dot {
  background: #2D8A3B;
  box-shadow: 0 0 0 4px rgba(45, 138, 59, .13);
}
.sx-gosuslugi-widget__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sx-gosuslugi-widget__actions form { margin: 0; }
.sx-gosuslugi-widget__actions .material-symbols-outlined { font-size: 18px; }
.dark .sx-gosuslugi-widget {
  border-color: rgba(255, 255, 255, .09);
  background:
    radial-gradient(circle at 92% 10%, rgba(110, 224, 127, .08), transparent 30%),
    #1A1E2C;
}
.dark .sx-gosuslugi-widget__icon {
  color: #8CEB9A;
  border-color: rgba(110, 224, 127, .14);
  background: rgba(110, 224, 127, .10);
}
.dark .sx-gosuslugi-widget h2 { color: var(--sx-text-primary); }
.dark .sx-gosuslugi-widget p,
.dark .sx-gosuslugi-widget__kicker,
.dark .sx-gosuslugi-widget__status small { color: var(--sx-text-muted); }
.dark .sx-gosuslugi-widget__status {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .035);
}
.dark .sx-gosuslugi-widget__status strong { color: var(--sx-text-secondary); }
.dark .sx-gosuslugi-widget__status.is-active {
  border-color: rgba(110, 224, 127, .16);
  background: rgba(110, 224, 127, .08);
}
.dark .sx-preset:hover {
  background: rgba(110, 224, 127, 0.10);
  color: var(--sx-accent-on-dark);
  border-color: rgba(110, 224, 127, 0.20);
}

/* ══════════════════════════════════════════════════════════════════
   METRIC CARDS — Soft UI Evolution centrepiece
   Soft shadow, 10px radius, gradient top-line, WCAG AA values
   ══════════════════════════════════════════════════════════════════ */

.sx-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 12px;
}

.sx-metric {
  background: var(--sx-surface);
  border: 1px solid var(--sx-slate-150);
  border-radius: var(--sx-radius-lg);
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 3px;
  position: relative; overflow: hidden;
  transition: transform var(--sx-dur) var(--sx-ease-out),
              box-shadow var(--sx-dur) var(--sx-ease-out),
              border-color var(--sx-dur) var(--sx-ease-out);
  box-shadow: var(--sx-shadow-sm);
  isolation: isolate;
}

/* Gradient top accent line */
.sx-metric::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--sx-slate-200);
  transition: height var(--sx-dur) var(--sx-ease-out),
              background var(--sx-dur) var(--sx-ease-out);
}

/* Soft ambient tint on hover */
.sx-metric::after {
  content: ""; position: absolute; inset: 0;
  opacity: 0; z-index: 0; border-radius: inherit;
  transition: opacity var(--sx-dur) var(--sx-ease-out);
}

.sx-metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--sx-shadow-md);
  border-color: var(--sx-slate-200);
}
.sx-metric:hover::before { height: 3px; }

/* Dark mode — soft elevated surface */
.dark .sx-metric {
  background: #1A1E2C;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 4px rgba(0,0,0,0.22), 0 8px 20px rgba(0,0,0,0.18);
}
.dark .sx-metric::before { background: rgba(255, 255, 255, 0.10); }
.dark .sx-metric:hover {
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 4px 8px rgba(0,0,0,0.24), 0 16px 32px rgba(0,0,0,0.20);
}

/* Variant accents */
.sx-metric--accent::before { background: var(--sx-grad-green); }
.sx-metric--accent:hover::after {
  background: radial-gradient(ellipse at top, rgba(45, 122, 58, 0.05) 0%, transparent 70%);
  opacity: 1;
}
.sx-metric--warn::before   { background: var(--sx-grad-amber); }
.sx-metric--warn:hover::after {
  background: radial-gradient(ellipse at top, rgba(245, 158, 11, 0.05) 0%, transparent 70%);
  opacity: 1;
}
.sx-metric--bad::before    { background: var(--sx-grad-rose); }
.sx-metric--bad:hover::after {
  background: radial-gradient(ellipse at top, rgba(239, 68, 68, 0.05) 0%, transparent 70%);
  opacity: 1;
}
.sx-metric--info::before   { background: var(--sx-grad-indigo); }
.sx-metric--info:hover::after {
  background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
  opacity: 1;
}

/* Typography within cards */
.sx-metric__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--sx-ink-400, #9CA3AF);
  margin-bottom: 8px; position: relative; z-index: 2;
}
.dark .sx-metric__label { color: rgba(255, 255, 255, 0.32); }

/* JetBrains Mono for all metric values */
.sx-metric__value {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 42px; font-weight: 700; line-height: 1;
  color: var(--sx-ink-900);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  position: relative; z-index: 2;
}
.sx-metric__unit {
  color: var(--sx-slate-500);
  font-size: 14px;
  font-weight: 600;
}
.sx-empty-copy {
  color: var(--sx-slate-500);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.dark .sx-metric__unit,
.dark .sx-empty-copy {
  color: rgba(255, 255, 255, 0.66);
}
.dark .sx-metric__value { color: rgba(255, 255, 255, 0.94); }

/* Semantic value colors — all WCAG AA (≥4.5:1 on white) */
.sx-metric__value--good { color: #1D6B2D; }     /* 5.1:1 */
.sx-metric__value--warn { color: #B45309; }     /* 4.8:1 */
.sx-metric__value--bad  { color: #C53030; }     /* 5.4:1 */
.sx-metric__value--info { color: #3730A3; }     /* 6.1:1 */

/* Dark mode — brighter, still accessible on dark bg */
.dark .sx-metric__value--good { color: #6EE07F; }
.dark .sx-metric__value--warn { color: #FBBF24; }
.dark .sx-metric__value--bad  { color: #F87171; }
.dark .sx-metric__value--info { color: #A5B4FC; }

.sx-metric__sub {
  font-size: 12.5px; color: var(--sx-ink-400, #9CA3AF);
  margin-top: 5px; font-weight: 400;
  position: relative; z-index: 2; line-height: 1.4;
}
.dark .sx-metric__sub { color: rgba(255, 255, 255, 0.34); }

.sx-metric__icon {
  position: absolute; right: 18px; top: 20px;
  width: 36px; height: 36px; border-radius: var(--sx-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  background: var(--sx-slate-100);
  border: 1px solid rgba(0, 0, 0, 0.04);
  z-index: 2;
}
.sx-metric__icon.material-symbols-outlined {
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  text-align: center;
  color: var(--sx-ink-500);
  font-size: 19px;
}
.dark .sx-metric__icon.material-symbols-outlined {
  color: rgba(255,255,255,.62);
}
.dark .sx-metric__icon {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.05);
}
.sx-metric--accent .sx-metric__icon { background: rgba(45, 122, 58, 0.10); }
.sx-metric--warn   .sx-metric__icon { background: rgba(245, 158, 11, 0.10); }
.sx-metric--bad    .sx-metric__icon { background: rgba(239, 68, 68, 0.10); }
.sx-metric--info   .sx-metric__icon { background: rgba(99, 102, 241, 0.10); }

/* ══════════════════════════════════════════════════════════════════
   CHART CARDS
   ══════════════════════════════════════════════════════════════════ */

.sx-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
}
.sx-charts--territories {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(440px, 100%), 1fr)
  );
}

.sx-chart {
  background: var(--sx-surface);
  border: 1px solid var(--sx-slate-150);
  border-radius: var(--sx-radius-lg);
  padding: 24px 26px;
  box-shadow: var(--sx-shadow-sm);
  transition: transform var(--sx-dur) var(--sx-ease-out),
              box-shadow var(--sx-dur) var(--sx-ease-out);
}
.sx-chart:hover {
  transform: translateY(-2px);
  box-shadow: var(--sx-shadow-md);
}
.dark .sx-chart {
  background: #1A1E2C;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 4px rgba(0,0,0,0.22), 0 8px 20px rgba(0,0,0,0.16);
}
.dark .sx-chart:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.24), 0 16px 32px rgba(0,0,0,0.20);
}

.sx-chart__title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--sx-ink-400, #9CA3AF);
  margin-bottom: 18px;
}
.dark .sx-chart__title { color: rgba(255, 255, 255, 0.28); }
.sx-chart canvas { max-height: 260px; }

/* Recipients list */
.sx-recipient-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.sx-recipient-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: var(--sx-slate-50); border-radius: var(--sx-radius);
  font-size: 13px; font-weight: 400;
  transition: all var(--sx-dur-fast) var(--sx-ease-out);
  border: 1px solid transparent;
}
.sx-recipient-list li:hover {
  background: var(--sx-accent-pale); border-color: rgba(45, 122, 58, 0.14);
  transform: translateX(2px);
}
.dark .sx-recipient-list li {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.68);
}
.dark .sx-recipient-list li:hover {
  background: rgba(110, 224, 127, 0.07);
  border-color: rgba(110, 224, 127, 0.14);
}
.sx-recipient-list strong {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600; font-size: 12px;
  color: #1D6B2D;
  background: rgba(45, 122, 58, 0.08); padding: 3px 10px;
  border-radius: 999px; min-width: 32px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.dark .sx-recipient-list strong {
  background: rgba(110, 224, 127, 0.10); color: var(--sx-accent-on-dark);
}

/* ══════════════════════════════════════════════════════════════════
   STATUS BADGES — 1px border, soft bg, WCAG AA text
   ══════════════════════════════════════════════════════════════════ */

.sx-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap; line-height: 1.4;
  border: 1px solid transparent;
}
.sx-badge::before {
  content: ""; width: 5px; height: 5px;
  border-radius: 50%; background: currentColor; flex-shrink: 0;
}

/* All text colors satisfy WCAG AA 4.5:1 on their backgrounds */
.sx-badge--new      { background: rgba(99, 102, 241, 0.08);  color: #3730A3; border-color: rgba(99, 102, 241, 0.18); }
.sx-badge--progress { background: rgba(245, 158, 11, 0.09);  color: #92400E; border-color: rgba(245, 158, 11, 0.20); }
.sx-badge--success  { background: rgba(45, 122, 58, 0.08);   color: #1D6B2D; border-color: rgba(45, 122, 58, 0.18); }
.sx-badge--fail     { background: rgba(220, 38, 38, 0.08);   color: #991B1B; border-color: rgba(220, 38, 38, 0.18); }
.sx-badge--overdue  { background: rgba(239, 68, 68, 0.09);   color: #B91C1C; border-color: rgba(239, 68, 68, 0.20); }
.sx-badge--muted    { background: rgba(107, 114, 128, 0.09); color: #374151; border-color: rgba(107, 114, 128, 0.18); }

.dark .sx-badge--new      { background: rgba(99, 102, 241, 0.14);  border-color: rgba(99, 102, 241, 0.22);  color: #A5B4FC; }
.dark .sx-badge--progress { background: rgba(245, 158, 11, 0.13);  border-color: rgba(245, 158, 11, 0.24);  color: #FCD34D; }
.dark .sx-badge--success  { background: rgba(110, 224, 127, 0.10); border-color: rgba(110, 224, 127, 0.20); color: #6EE07F; }
.dark .sx-badge--fail     { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.22); color: #FCA5A5; }
.dark .sx-badge--overdue  { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.22); color: #F87171; }
.dark .sx-badge--muted    { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.50); }

.sx-sla {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sx-sla--ok  { color: #1D6B2D; }
.sx-sla--warn{ color: #92400E; }
.sx-sla--bad { color: #991B1B; }
.dark .sx-sla--ok  { color: #6EE07F; }
.dark .sx-sla--warn{ color: #FCD34D; }
.dark .sx-sla--bad { color: #FCA5A5; }

/* ══════════════════════════════════════════════════════════════════
   ACTION CARDS
   ══════════════════════════════════════════════════════════════════ */

.sx-card {
  max-width: 760px;
  background: #fff;
  border: 1px solid var(--sx-slate-150);
  border-radius: var(--sx-radius-xl);
  padding: 32px 36px; margin: 24px 0;
  box-shadow: var(--sx-shadow-sm);
}
.dark .sx-card {
  background: #1A1E2C;
  border-color: rgba(255, 255, 255, 0.08);
}

.sx-card__title {
  display: flex; align-items: center; gap: 9px;
  font-size: 20px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--sx-ink-900); margin: 0 0 6px;
}
.sx-card__title .material-symbols-outlined { font-size: 22px; color: var(--sx-accent); }
.sx-btn > .material-symbols-outlined { font-size: 18px; }
.dark .sx-card__title { color: rgba(255, 255, 255, 0.94); }
.sx-card__subtitle { font-size: 14px; color: var(--sx-ink-500); margin: 0 0 24px; line-height: 1.6; }

.sx-info {
  display: grid; grid-template-columns: 155px 1fr; gap: 10px 16px;
  margin-bottom: 24px; font-size: 13px;
  background: var(--sx-slate-50); border-radius: var(--sx-radius);
  padding: 16px 18px; border: 1px solid var(--sx-slate-100);
}
.dark .sx-info { background: #22273A; border-color: rgba(255, 255, 255, 0.06); }
.sx-info dt { color: var(--sx-ink-500); font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.sx-info dd { color: var(--sx-ink-900); margin: 0; font-weight: 500; word-break: break-word; }
.dark .sx-info dd { color: rgba(255, 255, 255, 0.82); }

.sx-form { display: flex; flex-direction: column; gap: 14px; }
.sx-form table { width: 100%; }
.sx-form th {
  padding: 10px 14px 10px 0; vertical-align: top;
  font-weight: 700; font-size: 11px; color: var(--sx-ink-500);
  white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase;
}
.dark .sx-form th { color: rgba(255, 255, 255, 0.40); }
.sx-form td { padding: 6px 0; }
.sx-form input, .sx-form select, .sx-form textarea {
  width: 100%; max-width: 540px;
  padding: 10px 14px; font-family: inherit; font-weight: 400; font-size: 14px;
  border: 1px solid var(--sx-slate-200); border-radius: var(--sx-radius);
  background: #fff; color: var(--sx-ink-900);
  transition: border-color var(--sx-dur-fast) var(--sx-ease-out),
              box-shadow var(--sx-dur-fast) var(--sx-ease-out);
  line-height: 1.6;
}
.sx-form input:focus, .sx-form select:focus, .sx-form textarea:focus {
  outline: none; border-color: var(--sx-accent-mid);
  box-shadow: 0 0 0 3px var(--sx-accent-ring);
}
.dark .sx-form input, .dark .sx-form select, .dark .sx-form textarea {
  background: #22273A; border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.90);
}

/* Ручной рендер полей (partial admin/_sx_form.html) */
.sx-field { display: flex; flex-direction: column; gap: 6px; }
.sx-field__label {
  font-weight: 700; font-size: 11px; color: var(--sx-ink-500);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.dark .sx-field__label { color: rgba(255, 255, 255, 0.40); }
.sx-req { color: var(--sx-red); font-weight: 700; }
.sx-field__help { font-size: 12px; color: var(--sx-ink-500); line-height: 1.5; }
.sx-field__error { font-size: 12px; color: var(--sx-red); font-weight: 600; }
.sx-field--has-error input,
.sx-field--has-error select,
.sx-field--has-error textarea { border-color: var(--sx-red); }
.sx-field--check { flex-direction: row; align-items: center; gap: 10px; }
.sx-field--check input[type="checkbox"] {
  width: 18px; height: 18px; max-width: 18px; margin: 0;
  flex: none; accent-color: var(--sx-accent-mid);
}
.sx-field--check label {
  font-weight: 500; font-size: 14px; color: var(--sx-ink-900);
  text-transform: none; letter-spacing: 0; cursor: pointer;
}
.dark .sx-field--check label { color: rgba(255, 255, 255, 0.82); }

.sx-submit-row {
  display: flex; gap: 12px; margin-top: 28px;
  padding-top: 20px; border-top: 1px solid var(--sx-slate-100);
}
.dark .sx-submit-row { border-top-color: rgba(255, 255, 255, 0.06); }

.sx-hint {
  margin-top: 18px; padding: 12px 16px;
  background: rgba(45, 122, 58, 0.06);
  border-left: 2px solid var(--sx-accent-mid);
  border-radius: 0 var(--sx-radius) var(--sx-radius) 0;
  font-size: 13.5px; color: var(--sx-ink-700); line-height: 1.65; font-weight: 400;
}
.dark .sx-hint {
  background: rgba(110, 224, 127, 0.06);
  color: rgba(255, 255, 255, 0.64);
  border-left-color: var(--sx-accent-on-dark);
}

/* ══════════════════════════════════════════════════════════════════
   HEATMAP PAGE
   ══════════════════════════════════════════════════════════════════ */

.sx-map-page {
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.sx-map-page__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 20px; padding: 26px 30px;
  background: var(--sx-grad-main);
  border-radius: var(--sx-radius-xl); position: relative; overflow: hidden;
  box-shadow: 0 2px 4px rgba(26, 31, 46, 0.08),
              0 12px 32px rgba(27, 77, 37, 0.20);
  isolation: isolate;
}
.sx-map-page__head::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none; z-index: 0;
}
.sx-map-page__head::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 200px; height: 100%;
  background: linear-gradient(to left, rgba(255,255,255,0.04) 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}
.sx-map-page h1 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.025em;
  margin: 0 0 4px; color: #fff; position: relative; z-index: 1;
}
.sx-map-page__desc {
  font-size: 13px; color: rgba(255, 255, 255, 0.78); margin: 0;
  max-width: 520px; position: relative; z-index: 1; line-height: 1.6;
}
.sx-map-stats { display: flex; gap: 10px; position: relative; z-index: 1; }
.sx-map-stat {
  background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--sx-radius-lg); padding: 10px 20px; min-width: 130px;
  backdrop-filter: blur(8px);
}
.sx-map-stat__label {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: rgba(255, 255, 255, 0.72);
}
.sx-map-stat__value {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em; margin-top: 2px;
}
.sx-map-popup__meta {
  color: var(--sx-slate-500);
}
.sx-map-popup__link {
  color: var(--sx-accent);
  font-weight: 650;
}
.dark .sx-map-popup__meta {
  color: rgba(255, 255, 255, 0.66);
}

.sx-map-leaflet-popup .leaflet-popup-content-wrapper {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(26, 31, 46, .10);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .24);
}
.sx-map-leaflet-popup .leaflet-popup-content {
  width: auto !important;
  margin: 0;
}
.sx-map-leaflet-popup .leaflet-popup-tip {
  background: #fff;
}
.sx-map-leaflet-popup .leaflet-popup-close-button {
  top: 13px;
  right: 13px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--sx-ink-500);
  border-radius: 50%;
  background: var(--sx-slate-100);
  font: 0/0 a;
}
.sx-map-leaflet-popup .leaflet-popup-close-button::before {
  content: "close";
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  line-height: 1;
}
.sx-map-card {
  min-width: 340px;
  max-width: 430px;
  color: var(--sx-ink-800);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.sx-map-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 54px 8px 20px;
}
.sx-map-card__number {
  color: var(--sx-ink-900);
  font-size: 17px;
  letter-spacing: -.02em;
}
.sx-map-card__status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  color: var(--sx-ink-600);
  border: 1px solid var(--sx-slate-200);
  border-radius: 999px;
  background: var(--sx-slate-50);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.sx-map-card__status--new { color: #3730A3; background: #EEF2FF; border-color: #C7D2FE; }
.sx-map-card__status--in_progress { color: #92400E; background: #FFFBEB; border-color: #FDE68A; }
.sx-map-card__status--overdue,
.sx-map-card__status--closed_fail { color: #991B1B; background: #FFF1F2; border-color: #FECDD3; }
.sx-map-card__status--closed_success { color: #166534; background: #F0FDF4; border-color: #BBF7D0; }
.sx-map-card__category {
  padding: 0 20px;
  color: var(--sx-accent);
  font-size: 14px;
  font-weight: 750;
}
.sx-map-card__subtype {
  padding: 2px 20px 0;
  color: var(--sx-ink-500);
  font-size: 11.5px;
}
.sx-map-card__description {
  display: -webkit-box;
  overflow: hidden;
  margin: 11px 20px 14px;
  color: var(--sx-ink-700);
  font-size: 12.5px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.sx-map-card__facts {
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--sx-slate-100);
  border-bottom: 1px solid var(--sx-slate-100);
  background: var(--sx-slate-50);
}
.sx-map-card__facts > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  padding: 4px 0;
}
.sx-map-card__facts dt {
  color: var(--sx-ink-400);
  font-size: 10.5px;
  font-weight: 650;
}
.sx-map-card__facts dd {
  min-width: 0;
  margin: 0;
  color: var(--sx-ink-700);
  font-size: 11.5px;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.sx-map-card__timeline,
.sx-map-card__counters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 20px 0;
}
.sx-map-card__timeline span,
.sx-map-card__counters span {
  padding: 4px 8px;
  color: var(--sx-ink-500);
  border-radius: 7px;
  background: var(--sx-slate-100);
  font-size: 10.5px;
  font-weight: 600;
}
.sx-map-card__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px 18px;
}
.sx-map-popup__link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  color: #fff;
  border-radius: 9px;
  background: var(--sx-accent);
  text-decoration: none;
}
.sx-map-card__map-link {
  color: var(--sx-ink-500);
  font-size: 11.5px;
  font-weight: 650;
  text-decoration: none;
}
.dark .sx-map-leaflet-popup .leaflet-popup-content-wrapper,
.dark .sx-map-leaflet-popup .leaflet-popup-tip {
  background: #1A1E2C;
}
.dark .sx-map-leaflet-popup .leaflet-popup-content-wrapper {
  border-color: rgba(255, 255, 255, .12);
}
.dark .sx-map-leaflet-popup .leaflet-popup-close-button {
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .08);
}
.dark .sx-map-card__number,
.dark .sx-map-card__category { color: rgba(255, 255, 255, .94); }
.dark .sx-map-card__subtype,
.dark .sx-map-card__description,
.dark .sx-map-card__facts dd { color: var(--sx-text-secondary); }
.dark .sx-map-card__facts {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .035);
}
.dark .sx-map-card__facts dt { color: var(--sx-text-muted); }
.dark .sx-map-card__timeline span,
.dark .sx-map-card__counters span {
  color: var(--sx-text-secondary);
  background: rgba(255, 255, 255, .07);
}
.dark .sx-map-card__map-link { color: var(--sx-text-secondary); }
.sx-map-controls {
  display: flex; gap: 4px; align-items: center;
  background: #fff; border: 1px solid var(--sx-slate-200);
  border-radius: var(--sx-radius); padding: 8px 14px; flex-wrap: wrap;
  box-shadow: var(--sx-shadow-sm);
}
.dark .sx-map-controls {
  background: #1A1E2C; border-color: rgba(255, 255, 255, 0.08);
}
.sx-map-controls__label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--sx-ink-400, #9CA3AF); margin-right: 8px;
}
.sx-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--sx-ink-600);
  cursor: pointer; user-select: none;
  padding: 5px 10px; border-radius: var(--sx-radius-sm);
  transition: all var(--sx-dur-fast) var(--sx-ease-out);
}
.sx-toggle:hover { background: var(--sx-slate-50); color: var(--sx-ink-900); }
.dark .sx-toggle { color: rgba(255, 255, 255, 0.60); }
.dark .sx-toggle:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.sx-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sx-accent); cursor: pointer; }

#sx-map {
  height: 68vh; min-height: 500px;
  border-radius: var(--sx-radius-xl);
  box-shadow: var(--sx-shadow-lg);
  overflow: hidden; border: 1px solid var(--sx-slate-200);
}
.dark #sx-map { border-color: rgba(255, 255, 255, 0.08); }

.sx-map-legend {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; color: var(--sx-ink-400, #9CA3AF); padding: 0 4px;
}
.sx-map-legend__bar {
  flex: 1; max-width: 300px; height: 4px; border-radius: 999px;
  background: linear-gradient(to right, #2D7A3A, #F59E0B, #EF4444);
}
.sx-map-legend__label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; }
.sx-map-legend__min, .sx-map-legend__max { font-size: 11px; font-weight: 500; }

.marker-cluster-small     { background-color: rgba(22, 163, 74, 0.14); }
.marker-cluster-small div { background-color: rgba(45, 122, 58, 0.90); color: #fff; font-weight: 700; font-size: 12px; border-radius: 50%; }
.marker-cluster-medium     { background-color: rgba(217, 119, 6, 0.14); }
.marker-cluster-medium div { background-color: rgba(180, 83, 9, 0.90); color: #fff; font-weight: 700; font-size: 12px; }
.marker-cluster-large     { background-color: rgba(220, 38, 38, 0.14); }
.marker-cluster-large div { background-color: rgba(185, 28, 28, 0.90); color: #fff; font-weight: 700; font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════
   DOCUMENT TABLE
   ══════════════════════════════════════════════════════════════════ */

.sx-docs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sx-docs-table th {
  text-align: left; padding: 11px 14px;
  background: var(--sx-slate-50); font-weight: 700; font-size: 10.5px;
  color: var(--sx-ink-400, #9CA3AF); text-transform: uppercase; letter-spacing: 0.07em;
  border-bottom: 1px solid var(--sx-slate-200);
}
.sx-docs-table td {
  padding: 13px 14px; border-bottom: 1px solid var(--sx-slate-100);
  font-weight: 400; vertical-align: middle; color: var(--sx-ink-700);
}
.sx-docs-table tr:hover td { background: var(--sx-slate-50); }
.dark .sx-docs-table th {
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.07);
}
.dark .sx-docs-table td { border-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.70); }
.dark .sx-docs-table tr:hover td { background: rgba(255, 255, 255, 0.03); }
.sx-docs-table a { color: var(--sx-accent-mid); font-weight: 600; text-decoration: none; }
.sx-docs-table a:hover { color: var(--sx-accent); text-decoration: underline; }

.sx-list-actions { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sx-list-actions a,
.sx-list-preview {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  background: var(--sx-slate-100); color: var(--sx-ink-500);
  text-decoration: none; font-weight: 600; letter-spacing: 0.01em;
  transition: all var(--sx-dur-fast) var(--sx-ease-out);
  border: 1px solid transparent;
  cursor: pointer;
}
.sx-list-preview .material-symbols-outlined {
  font-size: 15px;
  line-height: 1;
}
.sx-list-actions a:hover,
.sx-list-preview:hover {
  background: var(--sx-accent-pale); color: var(--sx-accent);
  border-color: rgba(45, 122, 58, 0.18);
  transform: translateY(-1px);
}
.dark .sx-list-actions a,
.dark .sx-list-preview { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.60); }
.dark .sx-list-actions a:hover,
.dark .sx-list-preview:hover {
  background: rgba(110, 224, 127, 0.10);
  color: var(--sx-accent-on-dark);
  border-color: rgba(110, 224, 127, 0.20);
}

.sx-cell-ellipsis {
  display: inline-block;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.sx-owner,
.sx-delivery,
.sx-ticket-amount,
.sx-ticket-period,
.sx-ticket-number {
  white-space: nowrap;
}

.sx-owner--empty,
.sx-delivery {
  color: var(--sx-ink-400, #9CA3AF);
}

.sx-delivery {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
}

.sx-delivery--done { color: #1D6B2D; }
.sx-delivery--wait { color: #92400E; }
.sx-delivery--done::before,
.sx-delivery--wait::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.sx-ticket-number,
.sx-ticket-amount,
.sx-ticket-period {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}

.sx-ticket-number { font-weight: 700 !important; }
.sx-ticket-amount { color: var(--sx-ink-700); font-weight: 650; }
.sx-ticket-amount--free { color: #1D6B2D; font-family: inherit; }

.dark .sx-owner--empty,
.dark .sx-delivery { color: rgba(255, 255, 255, 0.36); }
.dark .sx-ticket-amount,
.dark .sx-ticket-period { color: rgba(255, 255, 255, 0.82); }
.dark .sx-delivery--done,
.dark .sx-ticket-amount--free { color: #6EE07F; }
.dark .sx-delivery--wait { color: #FCD34D; }

@media (min-width: 1024px) and (max-width: 1599px) {
  #result_list thead th.column-owner_short,
  #result_list tbody td.field-owner_short {
    display: none !important;
  }

  #result_list thead tr th,
  #result_list tbody tr td {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #result_list thead tr th {
    font-size: 9.5px !important;
    letter-spacing: 0.045em !important;
  }

  #result_list tbody tr td { font-size: 12.5px !important; }
  .sx-cell-ellipsis { max-width: 118px; }
}

.sx-doc-number {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.sx-doc-template,
.sx-doc-email {
  display: block;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sx-list-stack {
  display: inline-flex;
  min-width: 0;
  max-width: 240px;
  flex-direction: column;
  gap: 3px;
}
.sx-list-stack strong,
.sx-list-stack small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sx-list-stack small {
  color: var(--sx-ink-400);
  font-size: 11.5px;
  font-weight: 500;
}
.dark .sx-list-stack small { color: rgba(255, 255, 255, 0.42); }

/* ══════════════════════════════════════════════════════════════════
   MEDIA GALLERY & LIGHTBOX
   ══════════════════════════════════════════════════════════════════ */

.sx-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px; margin: 6px 0;
}
.sx-gallery__item {
  position: relative; background: var(--sx-slate-100);
  border-radius: var(--sx-radius-lg); overflow: hidden;
  border: 1px solid var(--sx-slate-150); aspect-ratio: 4 / 3;
  cursor: zoom-in;
  transition: transform var(--sx-dur) var(--sx-ease-out),
              box-shadow var(--sx-dur) var(--sx-ease-out);
  box-shadow: var(--sx-shadow-xs);
}
.sx-gallery__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--sx-shadow-lg);
}
.dark .sx-gallery__item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.sx-gallery__item img, .sx-gallery__item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--sx-dur-slow) var(--sx-ease-out);
}
.sx-gallery__item:hover img, .sx-gallery__item:hover video { transform: scale(1.05); }
.sx-gallery__type {
  position: absolute; top: 10px; left: 10px;
  background: rgba(26, 31, 46, 0.70); backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.90); font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.sx-gallery__empty {
  padding: 44px; text-align: center; color: var(--sx-ink-400, #9CA3AF);
  border: 1.5px dashed var(--sx-slate-200); border-radius: var(--sx-radius-lg);
  font-size: 13.5px; font-weight: 400; background: var(--sx-slate-50); line-height: 1.6;
}
.dark .sx-gallery__empty {
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.025);
}

.sx-lightbox {
  position: fixed; inset: 0;
  background: rgba(18, 22, 32, 0.92); backdrop-filter: blur(20px);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; padding: 32px;
  animation: sxFadeIn var(--sx-dur-fast) var(--sx-ease-out);
}
.sx-lightbox.open { display: flex; }
.sx-lightbox__content {
  max-width: 95vw; max-height: 90vh;
  animation: sxFadeUp var(--sx-dur-entry) var(--sx-ease-out);
}
.sx-lightbox__content img, .sx-lightbox__content video {
  max-width: 95vw; max-height: 90vh; display: block;
  border-radius: var(--sx-radius-xl);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.50);
}
.sx-lightbox__close {
  position: absolute; top: 20px; right: 24px;
  background: rgba(255, 255, 255, 0.09); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.80);
  width: 40px; height: 40px; border-radius: 50%; font-size: 16px;
  cursor: pointer; transition: all var(--sx-dur-fast) var(--sx-ease-out);
  display: flex; align-items: center; justify-content: center;
}
.sx-lightbox__close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.sx-media-preview {
  display: inline-block; border-radius: var(--sx-radius);
  overflow: hidden;
  transition: transform var(--sx-dur) var(--sx-ease-out),
              box-shadow var(--sx-dur) var(--sx-ease-out);
  box-shadow: var(--sx-shadow-xs);
}
.sx-media-preview:hover { transform: scale(1.04); box-shadow: var(--sx-shadow-md); }
.sx-media-preview img { max-height: 140px; display: block; }

/* ══════════════════════════════════════════════════════════════════
   GOSUSLUGI / GIS AUTHORIZATION FLOW
   ══════════════════════════════════════════════════════════════════ */

.sx-gis-card { max-width: 980px; }
.sx-gis-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 28px;
}
.sx-gis-head > div:first-child { min-width: 0; }
.sx-gis-head .sx-card__title { overflow-wrap: anywhere; }
.sx-gis-kicker {
  display: block; margin-bottom: 7px;
  color: var(--sx-accent); font-size: 11px; font-weight: 750;
  letter-spacing: .09em; text-transform: uppercase;
}
.sx-auth-status {
  min-width: 220px; flex: 0 0 auto; display: flex; align-items: center; gap: 11px;
  padding: 12px 15px; border-radius: var(--sx-radius-lg); border: 1px solid;
}
.sx-auth-status__dot {
  width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%;
  box-shadow: 0 0 0 5px currentColor; opacity: .85;
}
.sx-auth-status > div { display: flex; flex-direction: column; gap: 2px; }
.sx-auth-status strong { font-size: 13px; line-height: 1.25; }
.sx-auth-status span:last-child {
  color: var(--sx-ink-500); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.sx-auth-status--active {
  color: var(--sx-green-600); background: var(--sx-green-50);
  border-color: var(--sx-green-200);
}
.sx-auth-status--expired {
  color: var(--sx-amber); background: #FFFBEB; border-color: #FDE68A;
}
.dark .sx-auth-status--active { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.2); }
.dark .sx-auth-status--expired { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.2); }
.dark .sx-auth-status span:last-child { color: rgba(255,255,255,.48); }

.sx-gis-steps { display: grid; gap: 12px; }
.sx-gis-step {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px;
  padding: 20px; border: 1px solid var(--sx-slate-150);
  border-radius: var(--sx-radius-lg); background: var(--sx-slate-50);
  transition: border-color var(--sx-dur-fast), background var(--sx-dur-fast), box-shadow var(--sx-dur-fast);
}
.sx-gis-step--done { border-color: var(--sx-green-200); }
.sx-gis-step--ready {
  background: #fff; border-color: rgba(45,122,58,.32);
  box-shadow: var(--sx-shadow-sm);
}
.dark .sx-gis-step { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.08); }
.dark .sx-gis-step--done, .dark .sx-gis-step--ready { border-color: rgba(110,224,127,.22); }
.sx-gis-step__number {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; background: #fff; border: 1px solid var(--sx-slate-200);
  color: var(--sx-ink-500); font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; box-shadow: var(--sx-shadow-xs);
}
.sx-gis-step--done .sx-gis-step__number,
.sx-gis-step--ready .sx-gis-step__number {
  color: #fff; border-color: transparent; background: var(--sx-grad-green);
}
.dark .sx-gis-step__number { background: #22273A; border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.55); }
.sx-gis-step__body h3 { margin: 1px 0 5px; font-size: 15px; font-weight: 700; color: var(--sx-ink-900); }
.sx-gis-step__body > p { margin: 0 0 14px; color: var(--sx-ink-500); font-size: 13px; line-height: 1.55; }
.dark .sx-gis-step__body h3 { color: rgba(255,255,255,.9); }
.dark .sx-gis-step__body > p { color: rgba(255,255,255,.46); }
.sx-gis-info { margin: 14px 0 18px; }
.sx-copy-package {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}
.sx-copy-field {
  overflow: hidden;
  border: 1px solid var(--sx-slate-200);
  border-radius: var(--sx-radius);
  background: #fff;
}
.sx-copy-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--sx-slate-150);
  background: var(--sx-slate-50);
  color: var(--sx-ink-700);
  font-size: 12px;
}
.sx-copy-field input,
.sx-copy-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  padding: 12px;
  background: transparent;
  color: var(--sx-ink-800);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}
.sx-copy-field input:focus,
.sx-copy-field textarea:focus {
  outline: 2px solid var(--sx-accent);
  outline-offset: -2px;
}
.sx-copy-button {
  border: 0;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--sx-accent-pale);
  color: var(--sx-accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.dark .sx-copy-field {
  border-color: rgba(255,255,255,.09);
  background: rgba(255,255,255,.025);
}
.dark .sx-copy-field__head {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.72);
}
.dark .sx-copy-field input,
.dark .sx-copy-field textarea {
  color: rgba(255,255,255,.84);
}
.sx-inline-alert {
  margin: 12px 0; padding: 11px 13px; border-radius: var(--sx-radius);
  background: var(--sx-accent-pale); color: var(--sx-ink-700); font-size: 12.5px; line-height: 1.5;
}
.sx-inline-alert--warn { background: #FFFBEB; color: #92400E; }
.dark .sx-inline-alert {
  color: var(--sx-text-secondary);
  background: rgba(110, 224, 127, .07);
}
.dark .sx-inline-alert--warn {
  color: #FCD34D;
  background: rgba(245, 158, 11, .10);
}
.sx-btn:disabled, .sx-btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}
.sx-expiry-notice {
  position: fixed; right: 24px; bottom: 24px; z-index: 10000;
  max-width: 380px; display: flex; flex-direction: column; gap: 4px;
  padding: 15px 18px; border-radius: var(--sx-radius-lg);
  color: #fff; background: #1A1F2E; box-shadow: var(--sx-shadow-xl);
  animation: sxFadeUp var(--sx-dur-entry) var(--sx-ease-out);
}
.sx-expiry-notice[hidden] { display: none; }
.sx-expiry-notice strong { font-size: 13px; }
.sx-expiry-notice span { color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.45; }
.sx-expiry-notice__close {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  color: rgba(255,255,255,.72);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.sx-expiry-notice__close:hover { color: #fff; background: rgba(255,255,255,.10); }
.sx-expiry-notice__close .material-symbols-outlined { color: inherit; font-size: 18px; }

/* ══════════════════════════════════════════════════════════════════
   REPORT MODE — экран доклада и чистая печать в PDF
   ══════════════════════════════════════════════════════════════════ */

.sx-report {
  width: min(100%, 1480px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--sx-ink-900);
}
.sx-report [data-report-section][hidden] {
  display: none !important;
}
.dark .sx-report { color: rgba(255,255,255,.92); }
.sx-report__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.sx-report__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sx-report-builder {
  position: relative;
}
.sx-report-builder > summary {
  list-style: none;
}
.sx-report-builder > summary::-webkit-details-marker {
  display: none;
}
.sx-report-builder__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: min(310px, calc(100vw - 32px));
  display: grid;
  gap: 5px;
  padding: 14px;
  color: var(--sx-ink-700);
  border: 1px solid var(--sx-slate-200);
  border-radius: var(--sx-radius-lg);
  background: #fff;
  box-shadow: var(--sx-shadow-lg);
}
.sx-report-builder__panel > strong {
  margin: 0 3px 5px;
  font-size: 12px;
}
.sx-report-builder__panel label {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--sx-radius-sm);
  cursor: pointer;
  font-size: 12.5px;
}
.sx-report-builder__panel label:hover {
  background: var(--sx-slate-50);
}
.sx-report-builder__panel input {
  width: 18px !important;
  height: 18px !important;
  flex: none;
}
.sx-report-builder__reset {
  min-height: 38px;
  margin-top: 5px;
  color: var(--sx-accent);
  background: var(--sx-accent-pale);
  border: 0;
  border-radius: var(--sx-radius-sm);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.dark .sx-report-builder__panel {
  color: var(--sx-text-secondary);
  background: #22273A;
  border-color: rgba(255, 255, 255, .14);
}
.dark .sx-report-builder__panel label:hover {
  background: rgba(255, 255, 255, .06);
}
.sx-report__head {
  min-height: 150px;
  padding: 30px 34px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 83% 18%, rgba(255,255,255,.14), transparent 22%),
    linear-gradient(135deg, #123e25 0%, #25753a 56%, #3f914f 100%);
  box-shadow: 0 16px 40px rgba(18,62,37,.18);
}
.sx-report__eyebrow {
  display: block;
  margin-bottom: 9px;
  color: rgba(255,255,255,.64);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.sx-report__head h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.sx-report__head p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.66);
  font-size: 14px;
}
.sx-report__stamp {
  min-width: 128px;
  padding: 14px 17px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.sx-report__stamp span,
.sx-report__stamp small {
  color: rgba(255,255,255,.56);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sx-report__stamp strong {
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 17px;
}
.sx-report__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sx-report__filters > div {
  min-width: 145px;
  padding: 9px 12px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--sx-slate-200);
  border-radius: 10px;
  background: #fff;
}
.dark .sx-report__filters > div {
  border-color: rgba(255,255,255,.08);
  background: #1a1e2c;
}
.sx-report__filters span {
  color: var(--sx-ink-400, #9ca3af);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.sx-report__filters strong { font-size: 12px; font-weight: 650; }
.sx-report__metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.sx-report__metrics article {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid var(--sx-slate-150);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--sx-shadow-xs);
}
.dark .sx-report__metrics article,
.dark .sx-report__charts article,
.dark .sx-report__tables article {
  border-color: rgba(255,255,255,.08);
  background: #1a1e2c;
}
.sx-report__metrics span {
  display: block;
  margin-bottom: 8px;
  color: var(--sx-ink-400, #9ca3af);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.sx-report__metrics strong {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(24px, 2.3vw, 35px);
  line-height: 1;
  letter-spacing: -.04em;
}
.sx-report__metrics small {
  margin-left: 3px;
  color: var(--sx-ink-400, #9ca3af);
  font-size: 11px;
  letter-spacing: 0;
}
.sx-report__metric--success strong { color: #1d6b2d; }
.sx-report__metric--danger strong { color: #c53030; }
.sx-report__metric--info strong { color: #3730a3; }
.dark .sx-report__metric--success strong { color: #6ee07f; }
.dark .sx-report__metric--danger strong { color: #f87171; }
.dark .sx-report__metric--info strong { color: #a5b4fc; }
.sx-report__charts,
.sx-report__tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sx-report__charts article,
.sx-report__tables article {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--sx-slate-150);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sx-shadow-xs);
}
.sx-report h2 {
  margin: 0 0 14px;
  color: var(--sx-ink-500);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dark .sx-report h2 { color: rgba(255,255,255,.4); }
.sx-report__canvas { height: 230px; }
.sx-report__tables ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sx-report__tables li {
  padding: 8px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--sx-slate-100);
  font-size: 12px;
}
.dark .sx-report__tables li { border-color: rgba(255,255,255,.06); }
.sx-report__tables li:last-child { border-bottom: 0; }
.sx-report__tables li span { min-width: 0; overflow-wrap: anywhere; }
.sx-report__tables li strong {
  color: #1d6b2d;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.dark .sx-report__tables li strong { color: #6ee07f; }
.sx-report__tables p {
  margin: 0;
  color: var(--sx-ink-400, #9ca3af);
  font-size: 12px;
}
.sx-report__footer {
  padding: 5px 2px 12px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--sx-ink-400, #9ca3af);
  font-size: 10px;
}

/* ══════════════════════════════════════════════════════════════════
   INTERFACE POLISH — accessibility, calm motion and compact workflows
   ══════════════════════════════════════════════════════════════════ */

.sx-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[x-cloak] {
  display: none !important;
}

button,
[role="button"],
.sx-btn,
.object-tools a,
.actions button {
  min-height: 40px;
}

.sx-btn {
  justify-content: center;
}

.sx-btn--danger {
  color: #fff !important;
  background: #B42318 !important;
  border-color: #B42318 !important;
  box-shadow: 0 4px 14px rgba(180, 35, 24, .20);
}

.sx-btn--danger:hover {
  color: #fff !important;
  background: #912018 !important;
  border-color: #912018 !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--sx-ink-400) !important;
  opacity: 1;
}

input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: .72;
}

input[readonly],
textarea[readonly],
.form-row .readonly {
  color: var(--sx-ink-600) !important;
  background: var(--sx-slate-50) !important;
}

.dark input[type="text"],
.dark input[type="email"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="url"],
.dark input[type="password"],
.dark input[type="tel"],
.dark textarea,
.dark select {
  color-scheme: dark;
  color: rgba(255, 255, 255, .92) !important;
  background: #22273A !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--sx-text-muted) !important;
}

.dark input[readonly],
.dark textarea[readonly],
.dark .form-row .readonly {
  color: var(--sx-text-secondary) !important;
  background: rgba(255, 255, 255, .035) !important;
}

.dark .form-row label,
.dark .sx-field__label,
.dark .sx-form th,
.dark .sx-filter label,
.dark .sx-section-title,
.dark .sx-chart__title,
.dark .sx-metric__label,
.dark .sx-report h2,
.dark .sx-docs-table th {
  color: var(--sx-text-muted) !important;
}

.dark .sx-metric__sub,
.dark .sx-card__subtitle,
.dark .sx-field__help,
.dark .sx-gis-step__body > p,
.dark .sx-hint,
.dark .sx-list-stack small {
  color: var(--sx-text-secondary) !important;
}

.dark #result_list thead tr th,
.dark #changelist-filter h2,
.dark #changelist-filter h3,
.dark .paginator,
.dark .sx-map-controls__label,
.dark .sx-map-legend,
.dark .sx-list-actions a,
.dark .sx-owner--empty,
.dark .sx-delivery,
.dark .sx-gallery__empty {
  color: var(--sx-text-muted) !important;
}

.sx-metric,
.sx-chart {
  transition: border-color var(--sx-dur-fast) var(--sx-ease-out),
              box-shadow var(--sx-dur-fast) var(--sx-ease-out);
}

.sx-metric:hover,
.sx-chart:hover {
  transform: none;
}

.sx-recipient-list li:hover {
  transform: none;
}

.sx-dashboard-section {
  min-width: 0;
}

.sx-dashboard-section > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--sx-ink-700);
  cursor: pointer;
  list-style: none;
}

.sx-dashboard-section > summary::-webkit-details-marker {
  display: none;
}

.sx-dashboard-section > summary h2 {
  margin: 0;
  color: var(--sx-ink-700);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sx-dashboard-section > summary h2::after {
  content: "";
  display: inline-block;
  width: 42px;
  height: 1px;
  margin: 0 0 3px 12px;
  background: var(--sx-slate-200);
}

.sx-dashboard-section > summary > span {
  margin-left: auto;
  color: var(--sx-ink-400);
  font-size: 11.5px;
}

.sx-dashboard-section > summary::after {
  content: "expand_less";
  font-family: "Material Symbols Outlined";
  color: var(--sx-ink-500);
  font-size: 20px;
}

.sx-dashboard-section:not([open]) > summary {
  margin-bottom: 0;
}

.sx-dashboard-section:not([open]) > summary::after {
  content: "expand_more";
}

.dark .sx-dashboard-section > summary h2,
.dark .sx-dashboard-section > summary::after {
  color: var(--sx-text-secondary);
}

.dark .sx-dashboard-section > summary h2::after {
  background: rgba(255, 255, 255, .10);
}

.dark .sx-dashboard-section > summary > span {
  color: var(--sx-text-muted);
}

.sx-section-title,
.sx-chart__title,
.sx-metric__label,
.sx-filter label,
.sx-report h2 {
  color: var(--sx-ink-400);
}

.sx-chart__canvas-wrap,
.sx-report__canvas {
  position: relative;
  min-height: 240px;
}

.sx-chart__canvas-wrap {
  height: 260px;
}

.sx-chart__canvas-wrap canvas,
.sx-report__canvas canvas {
  width: 100% !important;
  height: 100% !important;
}

.sx-chart-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--sx-ink-500);
  background: #fff;
  border: 1px dashed var(--sx-slate-200);
  border-radius: var(--sx-radius);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}

.sx-chart-state[hidden] {
  display: none;
}

.sx-chart-state[data-state="error"] {
  color: #912018;
  background: #FFF7F6;
  border-color: #F5B7B1;
}

.sx-chart-state[data-state="empty"] {
  color: var(--sx-ink-500);
  background: var(--sx-slate-50);
}

.dark .sx-chart-state {
  color: var(--sx-text-secondary);
  background: #1A1E2C;
  border-color: rgba(255, 255, 255, .14);
}

.dark .sx-chart-state[data-state="error"] {
  color: #FDA29B;
  background: rgba(180, 35, 24, .10);
  border-color: rgba(253, 162, 155, .28);
}

/* Accessible theme selector */
.sx-theme-switch__toggle {
  display: inline-grid;
  width: 40px;
  min-height: 40px;
  place-items: center;
  color: var(--sx-ink-600);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--sx-radius);
  cursor: pointer;
}

.sx-theme-switch__toggle:hover,
.sx-theme-switch__toggle[aria-expanded="true"] {
  color: var(--sx-ink-900);
  background: var(--sx-slate-100);
}

.sx-theme-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: 190px;
  padding: 6px;
  border: 1px solid var(--sx-slate-200);
  border-radius: var(--sx-radius-lg);
  background: #fff;
  box-shadow: var(--sx-shadow-lg);
}

.sx-theme-switch__option {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  color: var(--sx-ink-700);
  background: transparent;
  border: 0;
  border-radius: var(--sx-radius-sm);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.sx-theme-switch__option:hover,
.sx-theme-switch__option[aria-checked="true"] {
  color: var(--sx-accent);
  background: var(--sx-accent-pale);
}

.sx-theme-switch__check {
  font-size: 17px;
}

.dark .sx-theme-switch__toggle {
  color: var(--sx-text-secondary);
}

.dark .sx-theme-switch__toggle:hover,
.dark .sx-theme-switch__toggle[aria-expanded="true"] {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.dark .sx-theme-switch__menu {
  background: #22273A;
  border-color: rgba(255, 255, 255, .14);
}

.dark .sx-theme-switch__option {
  color: var(--sx-text-secondary);
}

.dark .sx-theme-switch__option:hover,
.dark .sx-theme-switch__option[aria-checked="true"] {
  color: var(--sx-accent-on-dark);
  background: rgba(110, 224, 127, .09);
}

/* Map loading, fallback list and controls */
.sx-map-state {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px;
  color: var(--sx-ink-600);
  border: 1px dashed var(--sx-slate-200);
  border-radius: var(--sx-radius);
  background: #fff;
  font-size: 13px;
  text-align: center;
}

.sx-map-state[hidden] {
  display: none;
}

.sx-map-state[data-state="error"] {
  color: #912018;
  background: #FFF7F6;
  border-color: #F5B7B1;
}

.dark .sx-map-state {
  color: var(--sx-text-secondary);
  background: #1A1E2C;
  border-color: rgba(255, 255, 255, .14);
}

.dark .sx-map-state[data-state="error"] {
  color: #FDA29B;
  background: rgba(180, 35, 24, .10);
  border-color: rgba(253, 162, 155, .28);
}

.sx-map-list {
  overflow: hidden;
  border: 1px solid var(--sx-slate-200);
  border-radius: var(--sx-radius-lg);
  background: #fff;
  box-shadow: var(--sx-shadow-xs);
}

.sx-map-list > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  color: var(--sx-ink-700);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.sx-map-list > summary::-webkit-details-marker {
  display: none;
}

.sx-map-list > summary::after {
  content: "expand_more";
  order: 3;
  font-family: "Material Symbols Outlined";
  font-size: 20px;
}

.sx-map-list[open] > summary::after {
  content: "expand_less";
}

.sx-map-list > summary span:last-child {
  min-width: 30px;
  margin-left: auto;
  padding: 2px 8px;
  color: var(--sx-accent);
  background: var(--sx-accent-pale);
  border-radius: 999px;
  text-align: center;
}

.sx-map-list__content {
  max-height: 360px;
  overflow: auto;
  padding: 0 14px 14px;
  border-top: 1px solid var(--sx-slate-100);
}

.sx-map-list__content ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-map-list__content li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr);
  gap: 16px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--sx-slate-100);
  font-size: 12.5px;
}

.sx-map-list__content li:last-child {
  border-bottom: 0;
}

.sx-map-list__content a {
  color: var(--sx-accent);
  font-weight: 650;
  text-decoration: none;
}

.sx-map-list__content li span {
  color: var(--sx-ink-500);
  overflow-wrap: anywhere;
}

.sx-map-list__note {
  color: var(--sx-ink-500);
  font-size: 12px;
}

.dark .sx-map-list {
  background: #1A1E2C;
  border-color: rgba(255, 255, 255, .10);
}

.dark .sx-map-list > summary {
  color: rgba(255, 255, 255, .88);
}

.dark .sx-map-list__content,
.dark .sx-map-list__content li {
  border-color: rgba(255, 255, 255, .07);
}

.dark .sx-map-list__content li span,
.dark .sx-map-list__note {
  color: var(--sx-text-secondary);
}

/* Gallery buttons are native controls, but should retain the card appearance. */
button.sx-gallery__item {
  width: 100%;
  min-height: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}

.flex.group:has(.sx-docs-table) > div:first-child,
.flex.group:has(.sx-gallery) > div:first-child,
.flex.group:has(.sx-gallery__empty) > div:first-child {
  display: none;
}

.sx-gallery__type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sx-gallery__type .material-symbols-outlined {
  font-size: 14px;
}

.sx-dialog-open {
  overflow: hidden;
}

.sx-lightbox[aria-hidden="true"] {
  display: none;
}

/* Confirmation and destructive workflows */
.sx-confirm-card {
  max-width: 720px;
}

.sx-confirm-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: #B42318;
  background: #FEF3F2;
  border: 1px solid #FECDCA;
  border-radius: 14px;
}

.sx-confirm-card__icon .material-symbols-outlined {
  font-size: 24px;
}

.sx-confirm-card__eyebrow {
  margin: 0 0 5px;
  color: #B42318;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sx-confirm-card__warning {
  margin: 20px 0;
  padding: 13px 15px;
  color: #7A271A;
  background: #FEF3F2;
  border: 1px solid #FECDCA;
  border-radius: var(--sx-radius);
  font-size: 13px;
  line-height: 1.55;
}

.sx-confirm-card__list {
  max-height: 280px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  border: 1px solid var(--sx-slate-200);
  border-radius: var(--sx-radius);
}

.sx-confirm-card__list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--sx-slate-100);
  font-size: 12.5px;
}

.sx-confirm-card__list li:last-child {
  border-bottom: 0;
}

.sx-confirm-card__list span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sx-confirm-card__list strong {
  flex: none;
  color: var(--sx-ink-500);
  font-size: 11.5px;
}

.sx-confirm-card__more {
  color: var(--sx-ink-500);
  font-size: 12px;
}

.sx-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--sx-slate-100);
}

.sx-confirm {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  color: var(--sx-ink-700);
  background: var(--sx-slate-50);
  border: 1px solid var(--sx-slate-200);
  border-radius: var(--sx-radius);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
}

.sx-confirm input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  flex: 0 0 20px;
  margin: 0;
}

.dark .sx-confirm {
  color: var(--sx-text-secondary);
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .10);
}

.dark .sx-confirm-card__icon,
.dark .sx-confirm-card__warning {
  color: #FDA29B;
  background: rgba(180, 35, 24, .10);
  border-color: rgba(253, 162, 155, .25);
}

.dark .sx-confirm-card__list,
.dark .sx-confirm-card__list li,
.dark .sx-form-actions {
  border-color: rgba(255, 255, 255, .09);
}

.dark .sx-confirm-card__list strong {
  color: var(--sx-text-secondary);
}

/* Quick appeal preview drawer */
.sx-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  justify-content: flex-end;
  background: rgba(10, 14, 24, .48);
  opacity: 0;
  backdrop-filter: blur(5px);
  transition: opacity var(--sx-dur) var(--sx-ease-out);
}
.sx-preview-overlay[hidden] { display: none; }
.sx-preview-overlay.is-open { opacity: 1; }
.sx-preview-drawer {
  position: relative;
  width: min(540px, calc(100vw - 24px));
  height: 100%;
  overflow: hidden;
  border-left: 1px solid var(--sx-slate-200);
  background: #fff;
  box-shadow: -24px 0 70px rgba(15, 23, 42, .24);
  transform: translateX(24px);
  transition: transform var(--sx-dur) var(--sx-ease-out);
}
.sx-preview-overlay.is-open .sx-preview-drawer { transform: translateX(0); }
.sx-preview-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--sx-ink-600);
  border: 1px solid var(--sx-slate-200);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--sx-shadow-sm);
  cursor: pointer;
}
.sx-preview-drawer__close .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}
.sx-preview-drawer__content {
  height: 100%;
  overflow: auto;
}
.sx-preview-loading,
.sx-preview-error {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 40px;
  color: var(--sx-ink-500);
  text-align: center;
}
.sx-preview-loading__dot {
  width: 28px;
  height: 28px;
  border: 3px solid var(--sx-slate-200);
  border-top-color: var(--sx-accent);
  border-radius: 50%;
  animation: sxSpin .7s linear infinite;
}
@keyframes sxSpin { to { transform: rotate(360deg); } }
.sx-appeal-preview {
  min-height: 100%;
  padding: 28px 26px 34px;
  color: var(--sx-ink-800);
}
.sx-appeal-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-right: 48px;
  margin-bottom: 20px;
}
.sx-appeal-preview__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--sx-ink-400);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sx-appeal-preview__head h2 {
  margin: 0;
  color: var(--sx-ink-900);
  font-family: 'JetBrains Mono', monospace;
  font-size: 25px;
  letter-spacing: -.04em;
}
.sx-appeal-preview__lead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid rgba(45, 122, 58, .18);
  border-radius: var(--sx-radius-lg);
  background: linear-gradient(135deg, rgba(45, 122, 58, .08), rgba(45, 122, 58, .025));
}
.sx-appeal-preview__lead > .material-symbols-outlined {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: var(--sx-accent);
  border-radius: 10px;
  background: rgba(45, 122, 58, .10);
  font-size: 20px;
}
.sx-appeal-preview__lead strong,
.sx-appeal-preview__lead span { display: block; }
.sx-appeal-preview__lead strong { color: var(--sx-ink-900); font-size: 14px; }
.sx-appeal-preview__lead div span { margin-top: 2px; color: var(--sx-ink-500); font-size: 11.5px; }
.sx-appeal-preview__description {
  margin: 18px 0 20px;
  color: var(--sx-ink-700);
  font-size: 13.5px;
  line-height: 1.65;
}
.sx-appeal-preview__media {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}
.sx-appeal-preview__media a {
  overflow: hidden;
  min-height: 92px;
  border: 1px solid var(--sx-slate-200);
  border-radius: 10px;
  background: var(--sx-slate-100);
}
.sx-appeal-preview__media img {
  width: 100%;
  height: 100%;
  min-height: 92px;
  display: block;
  object-fit: cover;
}
.sx-appeal-preview__video {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--sx-ink-600);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}
.sx-appeal-preview__section {
  padding: 18px 0;
  border-top: 1px solid var(--sx-slate-100);
}
.sx-appeal-preview__section h3 {
  margin: 0 0 12px;
  color: var(--sx-ink-900);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
}
.sx-appeal-preview__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
}
.sx-appeal-preview__facts > div { min-width: 0; }
.sx-appeal-preview__fact-wide { grid-column: 1 / -1; }
.sx-appeal-preview__facts dt {
  margin-bottom: 3px;
  color: var(--sx-ink-400);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sx-appeal-preview__facts dd {
  margin: 0;
  color: var(--sx-ink-700);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.sx-appeal-preview__facts a {
  color: var(--sx-accent);
  text-decoration: none;
}
.sx-appeal-preview__docs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sx-appeal-preview__docs > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--sx-slate-50);
}
.sx-appeal-preview__docs > div > .material-symbols-outlined {
  color: var(--sx-ink-400);
  font-size: 19px;
}
.sx-appeal-preview__docs strong,
.sx-appeal-preview__docs small { display: block; }
.sx-appeal-preview__docs strong { color: var(--sx-ink-700); font-size: 11.5px; }
.sx-appeal-preview__docs small { margin-top: 2px; color: var(--sx-ink-400); font-size: 10.5px; }
.sx-appeal-preview__docs > p { margin: 0; color: var(--sx-ink-400); font-size: 12px; }
.sx-appeal-preview__result { background: var(--sx-accent-pale) !important; }
.sx-appeal-preview__actions {
  position: sticky;
  bottom: -34px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px -26px -34px;
  padding: 16px 26px 20px;
  border-top: 1px solid var(--sx-slate-200);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
}
.dark .sx-preview-drawer {
  border-color: rgba(255, 255, 255, .10);
  background: #151925;
}
.dark .sx-preview-drawer__close {
  color: rgba(255, 255, 255, .78);
  border-color: rgba(255, 255, 255, .12);
  background: rgba(30, 35, 50, .94);
}
.dark .sx-appeal-preview { color: var(--sx-text-secondary); }
.dark .sx-appeal-preview__head h2,
.dark .sx-appeal-preview__lead strong,
.dark .sx-appeal-preview__section h3 { color: rgba(255, 255, 255, .94); }
.dark .sx-appeal-preview__lead {
  border-color: rgba(110, 224, 127, .16);
  background: linear-gradient(135deg, rgba(110, 224, 127, .09), rgba(110, 224, 127, .025));
}
.dark .sx-appeal-preview__description,
.dark .sx-appeal-preview__facts dd,
.dark .sx-appeal-preview__docs strong { color: var(--sx-text-secondary); }
.dark .sx-appeal-preview__section,
.dark .sx-appeal-preview__actions { border-color: rgba(255, 255, 255, .08); }
.dark .sx-appeal-preview__docs > div { background: rgba(255, 255, 255, .045); }
.dark .sx-appeal-preview__actions { background: rgba(21, 25, 37, .94); }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Счётчик — полезная подсказка на desktop, но на узком экране он
     переталкивает заголовок и превращает верхнюю панель в обрезанный текст.
     Сам список и его paginator остаются источником количества записей. */
  #header-inner h1 > span.font-medium {
    display: none !important;
  }
  .sx-dashboard { gap: 16px; }
  .sx-dashboard__header { padding: 20px; align-items: flex-start; }
  .sx-dashboard__title  { font-size: 21px; }
  .sx-dashboard__subtitle { max-width: 34ch; line-height: 1.45; }
  .sx-actions { width: 100%; }
  .sx-actions > .sx-btn,
  .sx-export-menu { flex: 1 1 96px; }
  .sx-export-menu { display: block; }
  .sx-export-menu > summary { width: 100%; display: inline-flex; }
  .sx-export-menu[open] { flex-basis: 100%; }
  .sx-export-menu[open] > summary { margin-bottom: 7px; }
  .sx-export-group { width: 100%; }
  .sx-export-group .sx-btn { flex: 1 1 0; }
  .sx-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sx-metric__value { font-size: 34px; }
  .sx-charts { grid-template-columns: 1fr; }
  .sx-chart { padding: 19px 18px; }
  .sx-dashboard-section > summary {
    margin-bottom: 10px;
    padding: 0 13px;
    border: 1px solid var(--sx-slate-200);
    border-radius: var(--sx-radius-lg);
    background: #fff;
    box-shadow: var(--sx-shadow-xs);
  }
  .sx-dashboard-section > summary h2::after { display: none; }
  .dark .sx-dashboard-section > summary {
    background: #1A1E2C;
    border-color: rgba(255, 255, 255, .10);
  }
  .sx-filters { grid-template-columns: 1fr 1fr; }
  .sx-report__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx-report__charts,
  .sx-report__tables { grid-template-columns: 1fr; }
  .sx-report__head { min-height: 132px; padding: 24px; }
  .sx-report__canvas { height: 210px; }
  .sx-map-stats { flex-wrap: wrap; }
  .sx-map-page__head { padding: 20px; align-items: flex-start; }
  .sx-map-page__desc { max-width: 38ch; line-height: 1.45; }
  .sx-map-stat { min-width: 118px; padding: 9px 15px; }
  .sx-map-stat__value { font-size: 23px; }
  .sx-map-controls { padding: 8px; }
  .sx-map-controls__label { width: 100%; margin: 0 0 2px 6px; }
  .sx-toggle { min-height: 40px; padding: 8px 9px; }
  .sx-toggle input[type="checkbox"],
  .sx-field--check input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
  }
  .sx-card { padding: 22px 20px; }
  .sx-gis-head { flex-direction: column; }
  .sx-auth-status { width: 100%; min-width: 0; }
  .sx-filter-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--sx-slate-200);
    border-radius: var(--sx-radius-lg);
    background: #fff;
    color: var(--sx-ink-700);
    box-shadow: var(--sx-shadow-sm);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    list-style: none;
  }
  .sx-filter-panel > summary::-webkit-details-marker { display: none; }
  .sx-filter-panel > summary > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .sx-filter-panel > summary .material-symbols-outlined { font-size: 18px; }
  .sx-filter-panel__state {
    color: var(--sx-ink-400, #9CA3AF);
    font-size: 11.5px;
    font-weight: 500;
  }
  .sx-filter-panel[open] > summary { margin-bottom: 8px; }
  .dark .sx-filter-panel > summary {
    border-color: rgba(255,255,255,.08);
    background: #1A1E2C;
    color: rgba(255,255,255,.82);
  }
  #result_list tbody tr > th::before,
  #result_list tbody tr > td::before {
    flex: 0 0 108px;
    margin-right: 12px;
    white-space: nowrap;
  }
  #result_list tbody tr > th > *,
  #result_list tbody tr > td > * {
    max-width: calc(100% - 120px);
    margin-left: auto;
  }
  #result_list .sx-cell-ellipsis,
  #result_list .sx-owner,
  #result_list .sx-ticket-fio,
  #result_list .sx-ticket-category {
    max-width: calc(100% - 120px);
  }

  .sx-docs-table,
  .sx-docs-table tbody,
  .sx-docs-table tr,
  .sx-docs-table td {
    display: block;
    width: 100%;
  }
  .sx-docs-table {
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  .sx-docs-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .sx-docs-table tr {
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid var(--sx-slate-200);
    border-radius: var(--sx-radius);
    background: #fff;
  }
  .sx-docs-table td {
    display: grid;
    grid-template-columns: minmax(84px, .38fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sx-slate-100);
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .sx-docs-table td::before {
    content: attr(data-label);
    color: var(--sx-ink-400);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .sx-docs-table td:last-child {
    border-bottom: 0;
  }
  .sx-docs-table__action a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid var(--sx-slate-200);
    border-radius: var(--sx-radius-sm);
    background: var(--sx-slate-50);
    text-decoration: none;
  }
  .dark .sx-docs-table tr {
    background: #1A1E2C;
    border-color: rgba(255, 255, 255, .10);
  }
  .dark .sx-docs-table td {
    border-color: rgba(255, 255, 255, .07);
  }
  .dark .sx-docs-table td::before {
    color: var(--sx-text-muted);
  }

  .sx-map-list__content li {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .sx-preview-drawer {
    width: min(100%, 540px);
  }
  .sx-list-preview span:not(.material-symbols-outlined) {
    display: none;
  }

  .sx-field--check {
    align-items: flex-start;
    padding: 12px;
    border: 1px solid var(--sx-slate-200);
    border-radius: var(--sx-radius);
    background: var(--sx-slate-50);
  }
  .dark .sx-field--check {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .10);
  }

  .sx-form-actions,
  .sx-submit-row {
    align-items: stretch;
    flex-direction: column;
  }
  .sx-form-actions .sx-btn,
  .sx-submit-row .sx-btn {
    width: 100%;
  }

  .sx-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sx-lightbox {
    padding: 16px;
  }
  .sx-lightbox__close {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 480px) {
  .sx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sx-metric { min-height: 132px; padding: 18px 15px 16px; }
  .sx-metric__label { max-width: calc(100% - 30px); font-size: 9.5px; }
  .sx-metric__value { font-size: 30px; }
  .sx-metric__sub { font-size: 11px; }
  .sx-metric__icon {
    top: 14px;
    right: 12px;
    width: 30px;
    height: 30px;
    font-size: 17px;
  }
  .sx-filters { grid-template-columns: 1fr; }
  .sx-filter--actions { align-items: stretch; flex-direction: column; }
  .sx-filter--actions .sx-btn { width: 100%; }
  .sx-filter--presets { align-items: stretch; }
  .sx-filter__group-label { width: 100%; }
  .sx-preset { min-height: 40px; flex: 1 1 40%; }
  .sx-report__head { align-items: flex-start; flex-direction: column; }
  .sx-report__stamp { width: 100%; min-width: 0; }
  .sx-report__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-report__metrics article { padding: 15px; }
  .sx-report__toolbar { align-items: stretch; flex-direction: column; }
  .sx-report__toolbar .sx-btn { justify-content: center; }
  .sx-report__toolbar-actions { align-items: stretch; flex-direction: column; }
  .sx-report-builder > summary { width: 100%; }
  .sx-report-builder__panel { right: auto; left: 0; }
  .sx-report__footer { flex-direction: column; gap: 3px; }
  .sx-info { grid-template-columns: 1fr; gap: 2px 0; }
  .sx-info dt { margin-top: 8px; }
  .sx-gis-step { grid-template-columns: 30px minmax(0, 1fr); padding: 16px; gap: 12px; }
  .sx-gis-step__number { width: 30px; height: 30px; }
  .sx-expiry-notice { left: 14px; right: 14px; bottom: 14px; }
  #sx-map { height: min(58vh, 520px); min-height: 340px; }
  .sx-map-card { min-width: 280px; }
  .sx-map-card__facts > div { grid-template-columns: 96px minmax(0, 1fr); }
  .sx-map-page__desc { display: none; }
  .sx-map-stats { width: 100%; }
  .sx-map-stat { width: 100%; }
  .sx-map-legend { gap: 8px; }
  .sx-map-legend__label { display: none; }
  .sx-gallery { grid-template-columns: 1fr; }
  .sx-preview-drawer {
    width: 100%;
    max-width: none;
    border-left: 0;
  }
  .sx-appeal-preview {
    padding: 24px 18px 30px;
  }
  .sx-appeal-preview__facts {
    grid-template-columns: 1fr;
  }
  .sx-appeal-preview__fact-wide {
    grid-column: auto;
  }
  .sx-appeal-preview__actions {
    bottom: -30px;
    margin: 8px -18px -30px;
    padding: 14px 18px 18px;
  }
  .sx-appeal-preview__actions .sx-btn {
    width: 100%;
  }
  .sx-confirm-card__list li {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .sx-gosuslugi-widget__actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 1279px) {
  .sx-mobile-menu-toggle {
    position: static !important;
    flex: 0 0 40px;
    display: grid !important;
    place-items: center;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--sx-ink-600);
    border: 1px solid transparent !important;
    border-radius: var(--sx-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer;
  }
  .sx-mobile-menu-toggle:hover,
  .sx-mobile-menu-toggle[aria-expanded="true"] {
    color: var(--sx-ink-900);
    background: var(--sx-slate-100) !important;
  }
  .sx-mobile-menu-toggle .material-symbols-outlined { font-size: 21px; }
  .dark .sx-mobile-menu-toggle { color: var(--sx-text-secondary); }
  .dark .sx-mobile-menu-toggle:hover,
  .dark .sx-mobile-menu-toggle[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, .08) !important;
  }
}

@media (max-width: 340px) {
  .sx-metrics { grid-template-columns: 1fr; }
}

/* ── Уважение к prefers-reduced-motion (WCAG 2.3.3) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body * { visibility: hidden !important; }
  .sx-report,
  .sx-report * { visibility: visible !important; }
  .sx-report {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    gap: 8px;
    color: #0f172a !important;
  }
  .sx-report__toolbar { display: none !important; }
  .sx-report__head {
    min-height: 84px;
    padding: 16px 20px;
    border-radius: 10px;
    box-shadow: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .sx-report__head h1 { font-size: 26px; }
  .sx-report__filters > div { padding: 5px 8px; min-width: 115px; }
  .sx-report__metrics { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .sx-report__metrics article { padding: 10px 11px; box-shadow: none; }
  .sx-report__metrics strong { font-size: 23px; }
  .sx-report__charts,
  .sx-report__tables { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .sx-report__charts article,
  .sx-report__tables article { padding: 10px 12px; box-shadow: none; break-inside: avoid; }
  .sx-report__canvas { height: 142px; }
  .sx-report__tables li { padding: 4px 1px; font-size: 9px; }
  .sx-report__footer { padding: 0; }
}