/*
 * Nebula unified admin shell — тёмная панель в духе Apple HIG (materials, SF-like типографика).
 */

/* ----- Токены ----- */
.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;
}

:root {
  --ui-bg: #0f1117;
  --ui-surface: #161922;
  --ui-surface-elevated: #1a1f2a;
  --ui-card: #1c2230;
  --ui-border: rgba(255, 255, 255, 0.09);
  --ui-text: #f5f5f7;
  --ui-muted: rgba(235, 235, 245, 0.6);
  --ui-accent: #7c3aed;
  --ui-accent-bright: #9d7dff;
  --ui-accent-dim: #5b21b6;
  --ui-success: #32d74b;
  --ui-danger: #ff453a;
  --ui-warning: #ffd60a;
  --ui-radius: 14px;
  --ui-radius-sm: 10px;
  --ui-radius-xs: 8px;
  --ui-radius-control: 12px;
  --ui-font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI",
    system-ui, sans-serif;
  --ui-sidebar-w: 268px;
  --ui-topbar-h: 56px;
  /* Адаптив под ширину экрана */
  --ui-page-pad-x: clamp(0.6rem, 2.8vw + 0.2rem, 1.75rem);
  --ui-page-pad-y: clamp(0.75rem, 2.2vw + 0.35rem, 1.6rem);
  --ui-font-base: clamp(0.875rem, 0.18rem + 1.05vw, 1.0625rem);
  --ui-font-small: clamp(0.75rem, 0.12rem + 0.85vw, 0.875rem);
  --ui-table-pad-x: clamp(0.35rem, 1.8vw + 0.1rem, 1rem);
  --ui-table-pad-y: clamp(0.45rem, 1.4vw + 0.2rem, 0.85rem);

  /* Унифицированные «material» слои (Apple-style dark) */
  --ui-separator: rgba(255, 255, 255, 0.1);
  --ui-separator-strong: rgba(255, 255, 255, 0.14);
  --ui-fill-subtle: rgba(255, 255, 255, 0.04);
  --ui-fill: rgba(255, 255, 255, 0.07);
  --ui-fill-hover: rgba(255, 255, 255, 0.11);
  --ui-fill-pressed: rgba(255, 255, 255, 0.05);
  --ui-selection: rgba(124, 58, 237, 0.18);
  --ui-selection-strong: rgba(124, 58, 237, 0.26);
  --ui-accent-ring: rgba(157, 125, 255, 0.45);
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --ui-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.22);
  --ui-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ui-toggle-on: #30d158;
  --ui-toggle-on-pressed: #28b74c;
  --ui-toggle-off-bg: rgba(235, 235, 245, 0.14);
  --ui-toggle-off-border: rgba(235, 235, 245, 0.22);
  --ui-toggle-off-text: rgba(235, 235, 245, 0.65);

  /* Apple-style materials (vibrancy / glass) */
  --ui-glass-regular: rgba(28, 34, 48, 0.52);
  --ui-glass-elevated: rgba(32, 38, 54, 0.58);
  --ui-glass-thick: rgba(22, 26, 36, 0.78);
  --ui-glass-chrome: rgba(255, 255, 255, 0.08);
  --ui-glass-border: rgba(255, 255, 255, 0.11);
  --ui-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --ui-glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.26);
  --ui-glass-blur: blur(16px) saturate(1.22);
  --ui-glass-blur-light: blur(10px) saturate(1.15);

  /* Алиасы для шаблонов services_console (единый muted/border/surface) */
  --sc-border: var(--ui-border);
  --sc-surface: var(--ui-card);
  --sc-sub: var(--ui-muted);
}

/* Общая стеклянная поверхность (KPI, панель юнитов, карточки) */
.ui-glass-surface {
  background: rgba(28, 34, 48, 0.42);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

:root {
  --sc-bg: var(--ui-bg);
  --sc-surface: var(--ui-surface);
  --sc-card: var(--ui-card);
  --sc-border: var(--ui-border);
  --sc-text: var(--ui-text);
  --sc-muted: var(--ui-muted);
  --sc-accent: var(--ui-accent-bright);
  --sc-accent-dim: var(--ui-accent);
  --sc-success: var(--ui-success);
  --sc-danger: var(--ui-danger);
  --sc-radius: var(--ui-radius);
  --sc-font: var(--ui-font);
}

/* ----- App shell ----- */
.shell-body,
.sc-body {
  margin: 0;
  min-height: 100vh;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: var(--ui-font-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Нативные <select> / календари: тёмная палитра списка (иначе Win/Chrome — белый dropdown и нечитаемый текст) */
  color-scheme: dark;
}

.shell-app {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

.shell-body-row {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

.shell-sidebar {
  display: flex;
  flex-direction: column;
  width: var(--ui-sidebar-w);
  flex-shrink: 0;
  min-height: 0;
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-border);
  align-self: stretch;
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease,
    border-color 0.2s ease;
}

.shell-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.85rem 0.65rem 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.shell-sidebar__footer {
  flex-shrink: 0;
  padding: 0.65rem 0.65rem 0.85rem;
  margin-top: auto;
  border-top: 1px solid var(--ui-separator);
  background: linear-gradient(180deg, transparent 0%, var(--ui-fill-subtle) 100%);
}

.shell-nav-group {
  padding: 0.2rem 0.35rem 0.5rem;
  margin-bottom: 1rem;
  border-radius: var(--ui-radius);
  background: var(--ui-fill-subtle);
  border: 1px solid var(--ui-border);
}

.shell-nav-group__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ui-muted);
  padding: 0.5rem 0.75rem 0.2rem;
  font-weight: 600;
}

.shell-nav__link {
  display: block;
  padding: 0.52rem 0.85rem;
  margin: 0.12rem 0;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-muted);
  text-decoration: none;
  font-size: 0.91rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background 0.12s, color 0.12s;
}

.shell-nav__link:hover {
  color: var(--ui-text);
  background: var(--ui-fill-hover);
}

.shell-nav__link.is-active {
  color: var(--ui-text);
  background: var(--ui-selection-strong);
  border-left: 3px solid var(--ui-accent-bright);
  padding-left: calc(0.75rem - 3px);
  font-weight: 600;
  box-shadow: var(--ui-inset-highlight), 0 0 0 1px rgba(157, 125, 255, 0.12);
}

.shell-sidebar-is-collapsed .shell-sidebar {
  width: 0 !important;
  min-width: 0 !important;
  flex-basis: 0 !important;
  opacity: 0;
  overflow: hidden;
  border-right-width: 0;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.shell-sidebar-expand {
  display: none;
  flex-shrink: 0;
  align-self: stretch;
  width: 46px;
  margin: 0;
  padding: 0.75rem 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  border: none;
  border-right: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-muted);
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.shell-sidebar-expand:hover {
  color: var(--ui-text);
  background: var(--ui-selection);
}

.shell-sidebar-expand:focus-visible {
  outline: 2px solid var(--ui-accent-bright);
  outline-offset: -2px;
}

.shell-sidebar-is-collapsed .shell-sidebar-expand {
  display: flex;
}

.shell-sidebar-toggle--panel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-fill-subtle);
  color: var(--ui-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
}

.shell-sidebar-toggle--panel:hover {
  background: var(--ui-fill-hover);
  border-color: var(--ui-separator-strong);
  color: var(--ui-text);
}

.shell-sidebar-toggle--panel:active {
  transform: scale(0.98);
}

.shell-sidebar-toggle--panel:focus-visible {
  outline: 2px solid var(--ui-accent-bright);
  outline-offset: 2px;
}

.shell-sidebar-toggle__svg {
  display: block;
  flex-shrink: 0;
}

.shell-sidebar-toggle__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .shell-sidebar,
  .shell-sidebar-expand {
    transition: none;
  }
}

.shell-workspace {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shell-topbar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  flex-shrink: 0;
  padding: 0;
  min-height: 0;
  background: var(--ui-surface-elevated);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-sm);
  z-index: 100;
}

.shell-topbar__primary {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  padding: 0.65rem var(--ui-page-pad-x);
  min-height: var(--ui-topbar-h);
  box-sizing: border-box;
}

.shell-topbar__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.4rem var(--ui-page-pad-x) 0.55rem;
  border-top: 1px solid var(--ui-border);
  min-height: 0;
  box-sizing: border-box;
  width: 100%;
}

.shell-topbar__sub:empty {
  display: none;
  padding: 0;
  border-top: none;
}

.shell-mainnav {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.35rem;
  min-width: 0;
}

.shell-mainnav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ui-muted);
  text-decoration: none;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  background: transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
}

.shell-mainnav__link:hover {
  color: var(--ui-text);
  background: var(--ui-fill-hover);
}

.shell-mainnav__link.is-active {
  color: var(--ui-text);
  border-color: transparent;
  background: var(--ui-fill-hover);
  box-shadow:
    var(--ui-inset-highlight),
    0 0 0 1px var(--ui-accent-ring),
    var(--ui-shadow-sm);
}

.shell-mainnav__icon {
  flex-shrink: 0;
  opacity: 0.88;
}

.shell-mainnav__link.is-active .shell-mainnav__icon {
  opacity: 1;
}

.shell-mainnav__more {
  position: relative;
  list-style: none;
}

.shell-mainnav__more-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ui-muted);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
}

.shell-mainnav__more-summary::-webkit-details-marker {
  display: none;
}

.shell-mainnav__more-summary::marker {
  content: "";
}

.shell-mainnav__more-summary:hover {
  color: var(--ui-text);
  background: var(--ui-fill-hover);
}

.shell-mainnav__more.is-active .shell-mainnav__more-summary {
  color: var(--ui-text);
  border-color: transparent;
  background: var(--ui-fill-hover);
  box-shadow:
    var(--ui-inset-highlight),
    0 0 0 1px var(--ui-accent-ring),
    var(--ui-shadow-sm);
}

.shell-mainnav__chev {
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform 0.15s ease;
}

.shell-mainnav__more[open] .shell-mainnav__chev {
  transform: rotate(180deg);
}

.shell-mainnav__dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 14rem;
  padding: 0.35rem;
  border-radius: var(--ui-radius-sm);
  background: rgba(28, 28, 30, 0.94);
  border: 1px solid var(--ui-separator);
  box-shadow: var(--ui-shadow-md), var(--ui-inset-highlight);
  -webkit-backdrop-filter: saturate(1.15) blur(24px);
  backdrop-filter: saturate(1.15) blur(24px);
  z-index: 120;
}

.shell-mainnav__sublink {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--ui-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ui-muted);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.shell-mainnav__sublink:hover {
  color: var(--ui-text);
  background: var(--ui-fill-hover);
}

.shell-mainnav__sublink.is-active {
  color: var(--ui-text);
  background: var(--ui-selection);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--ui-accent-bright);
}

body.shell-topnav-services:not(.shell-topnav-services--ctx-sidebar) #shell-sidebar {
  display: none !important;
}

body.shell-topnav-services:not(.shell-topnav-services--ctx-sidebar) .shell-sidebar-expand {
  display: none !important;
}

body.shell-topnav-services--ctx-sidebar {
  --ui-sidebar-w: 252px;
}

body.shell-topnav-services--ctx-sidebar #shell-sidebar {
  display: flex;
}

.sc-ctx-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sc-ctx-sidebar__top {
  padding: 0.35rem 0.45rem 0.65rem;
  margin-bottom: 0.15rem;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-fill-subtle);
  border: 1px solid var(--ui-border);
}

.sc-ctx-sidebar__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
}

.sc-ctx-sidebar__title-row .sc-ctx-sidebar__title {
  flex: 1 1 auto;
  min-width: 0;
}

.sc-ctx-sidebar__top-toggle {
  flex-shrink: 0;
  padding-top: 0.05rem;
}

.sc-ctx-sidebar__svc-toggle-form {
  margin: 0;
}

.sc-ctx-sidebar .sc-ctx-sidebar__svc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.48rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-height: 0;
  line-height: 1.15;
  border-radius: 6px;
  border: none;
  box-sizing: border-box;
}

.sc-ctx-sidebar button.sc-ctx-sidebar__svc-toggle {
  cursor: pointer;
  transition: filter 0.12s ease;
}

.sc-ctx-sidebar button.sc-ctx-sidebar__svc-toggle:hover {
  filter: brightness(1.06);
}

.sc-ctx-sidebar span.sc-ctx-sidebar__svc-toggle {
  cursor: default;
  pointer-events: none;
  opacity: 0.92;
}

.sc-ctx-sidebar .sc-btn.sc-btn--pv-on.sc-ctx-sidebar__svc-toggle {
  background: var(--ui-toggle-on);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--ui-inset-highlight);
}

.sc-ctx-sidebar .sc-btn.sc-btn--pv-off.sc-ctx-sidebar__svc-toggle {
  background: var(--ui-toggle-off-bg);
  color: var(--ui-toggle-off-text);
  border: 1px solid var(--ui-toggle-off-border);
  box-shadow: var(--ui-inset-highlight);
}

.sc-ctx-sidebar__badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-muted);
  margin: 0 0 0.15rem;
}

.sc-ctx-sidebar__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ui-text);
}

.sc-ctx-sidebar__service-home-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.12s ease;
}

.sc-ctx-sidebar__service-home-link:hover {
  color: var(--ui-accent-bright, #a78bfa);
  text-decoration: underline;
}

.sc-ctx-sidebar__context-note {
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-muted);
  line-height: 1.3;
}

.sc-ctx-sidebar__group {
  margin: 0;
  padding: 0;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-fill-subtle);
  border: 1px solid var(--ui-border);
  overflow: hidden;
}

.sc-ctx-sidebar__group + .sc-ctx-sidebar__group {
  margin-top: 0.15rem;
}

.sc-ctx-sidebar__group summary {
  list-style: none;
  cursor: pointer;
  padding: 0.52rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ui-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.sc-ctx-sidebar__group summary::-webkit-details-marker {
  display: none;
}

.sc-ctx-sidebar__group summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sc-ctx-sidebar__group[open] summary::after {
  transform: rotate(45deg);
}

.sc-ctx-sidebar__group summary:hover {
  background: var(--ui-fill-hover);
  color: var(--ui-text);
}

.sc-ctx-sidebar__stack {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0 0.45rem 0.55rem;
}

.sc-ctx-sidebar__link {
  display: block;
  padding: 0.42rem 0.55rem;
  border-radius: var(--ui-radius-xs);
  font-size: 0.84rem;
  font-weight: 520;
  letter-spacing: -0.015em;
  color: var(--ui-muted);
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}

.sc-ctx-sidebar__link:hover {
  color: var(--ui-text);
  background: var(--ui-fill-hover);
}

.sc-ctx-sidebar__link.is-active {
  color: var(--ui-text);
  font-weight: 600;
  background: var(--ui-selection);
  box-shadow: inset 0 0 0 1px rgba(157, 125, 255, 0.22);
}

.sc-ctx-sidebar__muted {
  display: block;
  padding: 0.42rem 0.55rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ui-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sc-ctx-sidebar__group summary::after {
    transition: none;
  }
}

#sc-console-stats {
  scroll-margin-top: 5.5rem;
}

/* Якорь из главного меню (#sc-console-stats): без tabindex фокус не переходит на div,
   но часть браузеров всё же может подсветить цель — убираем системную обводку (не интерактив). */
#sc-console-stats:focus,
#sc-console-stats:focus-visible {
  outline: none;
}

@media (max-width: 720px) {
  .shell-mainnav {
    justify-content: flex-start;
  }

  .shell-topbar__primary {
    flex-wrap: wrap;
  }
}

.shell-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--ui-text);
  padding: 0.2rem 0.45rem 0.2rem 0.15rem;
  margin: -0.2rem 0;
  border-radius: var(--ui-radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}

.shell-topbar__brand:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.shell-topbar__brand:focus-visible {
  outline: 2px solid var(--ui-accent-bright);
  outline-offset: 2px;
}

.shell-topbar__brand-logo {
  width: 34px;
  height: 34px;
  border-radius: var(--ui-radius-sm);
  flex-shrink: 0;
  background: linear-gradient(
    145deg,
    var(--ui-accent-bright) 0%,
    var(--ui-accent-dim) 100%
  );
  box-shadow:
    var(--ui-shadow-sm),
    var(--ui-inset-highlight);
}

.shell-topbar__brand-text {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(0.9rem, 0.82rem + 0.35vw, 1.02rem);
  white-space: nowrap;
}

.shell-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: transparent;
  pointer-events: none;
}

.shell-topbar__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  margin-left: auto;
}

.shell-search-wrap {
  min-width: 0;
  flex: 1 1 14rem;
  max-width: min(24rem, 100%);
}

.shell-search-wrap form,
.shell-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.shell-search input[type="search"],
.shell-search input[type="text"] {
  width: min(100%, 22rem);
  min-width: 0;
  flex: 1 1 12rem;
  padding: 0.45rem 0.85rem;
  border-radius: 980px;
  border: 1px solid var(--ui-border);
  background: var(--ui-fill-subtle);
  color: var(--ui-text);
  font: inherit;
  box-shadow: var(--ui-inset-highlight);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.shell-search input[type="search"]:focus,
.shell-search input[type="text"]:focus {
  outline: none;
  border-color: var(--ui-accent-ring);
  background: var(--ui-fill);
}

.shell-user-chip {
  font-size: 0.8125rem;
  color: var(--ui-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.4rem 0.85rem;
  border-radius: 980px;
  background: var(--ui-fill);
  border: 1px solid var(--ui-border);
}

.shell-user-menu {
  position: relative;
  flex-shrink: 0;
}

.shell-user-menu__summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 220px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ui-text);
  padding: 0.4rem 0.85rem;
  border-radius: 980px;
  background: var(--ui-fill);
  border: 1px solid var(--ui-border);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-user-menu__summary::-webkit-details-marker {
  display: none;
}

.shell-user-menu__summary::marker {
  content: "";
}

.shell-user-menu__summary:hover {
  background: var(--ui-fill-hover);
  border-color: var(--ui-separator);
}

.shell-user-menu[open] .shell-user-menu__summary {
  background: var(--ui-selection);
  border-color: var(--ui-accent-ring);
  box-shadow: var(--ui-inset-highlight), 0 0 0 1px var(--ui-accent-ring);
}

.shell-user-menu__chev {
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform 0.15s ease;
}

.shell-user-menu[open] .shell-user-menu__chev {
  transform: rotate(180deg);
}

.shell-user-menu__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 14rem;
  padding: 0.5rem;
  border-radius: var(--ui-radius-sm);
  background: rgba(28, 28, 30, 0.94);
  border: 1px solid var(--ui-separator);
  box-shadow: var(--ui-shadow-md), var(--ui-inset-highlight);
  -webkit-backdrop-filter: saturate(1.15) blur(24px);
  backdrop-filter: saturate(1.15) blur(24px);
  z-index: 130;
}

.shell-user-menu__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.65rem 0.55rem;
  border-bottom: 0.5px solid var(--ui-separator);
  margin-bottom: 0.35rem;
}

.shell-user-menu__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ui-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-user-menu__email {
  font-size: 0.78rem;
  color: var(--ui-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-user-menu__logout-form {
  margin: 0;
}

.shell-user-menu__action {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: var(--ui-radius-sm);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  color: var(--ui-muted);
  background: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}

.shell-user-menu__action:hover {
  color: var(--ui-text);
  background: var(--ui-fill-hover);
}

.shell-user-menu__action--logout {
  color: #ff6b6b;
}

.shell-user-menu__action--logout:hover {
  color: #ff8787;
  background: rgba(255, 107, 107, 0.12);
}

.shell-topbar__link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ui-text);
  text-decoration: none;
  padding: 0.45rem 1rem;
  border-radius: 980px;
  border: 1px solid var(--ui-accent-ring);
  background: var(--ui-selection);
  box-shadow: var(--ui-inset-highlight), var(--ui-shadow-sm);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    filter 0.15s ease;
}

.shell-topbar__link:hover {
  filter: brightness(1.06);
  background: var(--ui-selection-strong);
  border-color: var(--ui-accent-bright);
}

.shell-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--ui-page-pad-y) var(--ui-page-pad-x) clamp(1.5rem, 4vw, 3rem);
  max-width: none;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

/* Консоль сервисов: контент на всю ширину рабочей области (с учётом sidebar) */
body.shell-topnav-services .shell-main {
  max-width: none;
  margin-inline: 0;
  width: 100%;
}

.shell-messages {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.shell-msg {
  padding: 0.65rem 1rem;
  border-radius: var(--ui-radius);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.shell-msg--error {
  background: color-mix(in srgb, var(--ui-danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-danger) 38%, transparent);
  color: color-mix(in srgb, var(--ui-danger) 65%, white);
}

.shell-msg--success {
  background: color-mix(in srgb, var(--ui-success) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-success) 38%, transparent);
  color: color-mix(in srgb, var(--ui-success) 72%, white);
}

.shell-msg--warning {
  background: color-mix(in srgb, var(--ui-warning) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-warning) 38%, transparent);
  color: color-mix(in srgb, var(--ui-warning) 78%, white);
}

.shell-msg--info,
.shell-msg--debug {
  background: var(--ui-selection);
  border: 1px solid color-mix(in srgb, var(--ui-accent-bright) 35%, transparent);
  color: color-mix(in srgb, var(--ui-accent-bright) 82%, white);
}

/* ----- Типографика страниц ----- */
.sc-title,
.ui-page-title {
  font-size: clamp(1.2rem, 0.85rem + 1.1vw, 1.65rem);
  font-weight: 700;
  margin: 0 0 0.35rem;
  letter-spacing: -0.03em;
}

.sc-sub,
.ui-sub {
  color: var(--ui-muted);
  margin: 0 0 1.5rem;
  font-size: var(--ui-font-base);
  line-height: 1.45;
}

/* ----- Карточки, KPI, сетки ----- */
.sc-grid-kpi,
.ui-grid-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: clamp(0.5rem, 2vw, 0.85rem);
  margin-bottom: 1.25rem;
}

.sc-kpi,
.ui-kpi {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 1rem;
  box-shadow: var(--ui-shadow-sm), var(--ui-inset-highlight);
}

.sc-kpi--skeleton {
  min-height: 4.5rem;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.04) 8%,
    rgba(255, 255, 255, 0.1) 18%,
    rgba(255, 255, 255, 0.04) 33%
  );
  background-size: 200% 100%;
  animation: sc-shimmer 1.4s ease-in-out infinite;
}

.sc-deferred-host--pending {
  min-height: 6rem;
}

.sc-deferred__hint {
  margin: 0.5rem 0 0;
  text-align: center;
}

@keyframes sc-shimmer {
  to {
    background-position: -200% 0;
  }
}

.sc-kpi__label,
.ui-kpi__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ui-muted);
  margin-bottom: 0.35rem;
}

.sc-kpi__value,
.ui-kpi__value {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ui-text);
}

.sc-card,
.ui-card {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: clamp(0.9rem, 2.2vw, 1.35rem);
  margin-bottom: 1.25rem;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: var(--ui-shadow-sm), var(--ui-inset-highlight);
}

.sc-card h2,
.ui-card h2 {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.sc-chart-wrap,
.ui-chart-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: clamp(220px, 36vh, 340px);
}

.sc-chart-wrap--hero {
  height: clamp(260px, min(52vh, 480px), 520px);
}

/* ----- Дашборд сервисов (полная ширина, без второй боковой колонки) ----- */
.shell-main:has(.sc-dashboard-page) {
  max-width: none;
  margin-inline: 0;
  width: 100%;
  box-sizing: border-box;
}

.sc-dashboard-page {
  width: 100%;
  min-width: 0;
}

.sc-dashboard-main {
  min-width: 0;
}

.sc-dashboard-main > .sc-title {
  margin-top: 0;
}

.sc-dashboard-catalog-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.35rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.88em;
  font-weight: 600;
  color: var(--ui-accent-bright);
  text-decoration: none;
  vertical-align: baseline;
  border-radius: 980px;
  border: 1px solid var(--ui-accent-ring);
  background: var(--ui-selection);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  box-shadow: var(--ui-inset-highlight);
}

.sc-dashboard-catalog-link:hover {
  background: var(--ui-selection-strong);
  border-color: var(--ui-accent-bright);
  color: var(--ui-text);
}

.sc-dashboard-catalog {
  margin-top: 1.5rem;
  scroll-margin-top: calc(var(--ui-topbar-h) + 1rem);
}

.sc-dashboard-catalog--compact {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Компактные плитки каталога (пропорции как у полоски KPI, см. референс админки) */
.sc-dashboard-catalog--compact .sc-dashboard-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: clamp(0.5rem, 2vw, 0.85rem);
  align-items: stretch;
}

.sc-service-tile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.35rem;
  box-sizing: border-box;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 0.45rem 0.65rem 0.45rem 0.45rem;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
  box-shadow: var(--ui-shadow-sm), var(--ui-inset-highlight);
}

.sc-service-tile:hover {
  border-color: var(--ui-separator-strong);
  background: var(--ui-fill-subtle);
  box-shadow: var(--ui-shadow-md), var(--ui-inset-highlight);
}

.sc-service-tile:focus-visible {
  outline: 2px solid var(--ui-accent-ring);
  outline-offset: 2px;
}

.sc-service-tile__mark {
  flex: 0 0 0.32rem;
  width: 0.32rem;
  align-self: stretch;
  min-height: 2.25rem;
  border-radius: 6px;
  background: linear-gradient(
    180deg,
    var(--ui-accent-bright, #a78bfa),
    color-mix(in srgb, var(--ui-accent) 42%, transparent)
  );
}

.sc-service-tile--inactive .sc-service-tile__mark {
  background: color-mix(in srgb, var(--ui-muted) 45%, transparent);
}

.sc-service-tile__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  justify-content: center;
}

.sc-service-tile__eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ui-accent-bright, #a78bfa);
  line-height: 1.2;
}

.sc-service-tile__title {
  font-size: clamp(0.92rem, 2.1vw, 1.08rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-service-tile__stats {
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--ui-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-service-tile__pill {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ui-success);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22);
}

.sc-service-tile--inactive {
  opacity: 0.92;
}

.sc-service-tile--inactive .sc-service-tile__pill {
  background: rgba(148, 163, 184, 0.85);
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.18);
}

.sc-service-tile--inactive .sc-service-tile__title {
  color: rgba(255, 255, 255, 0.82);
}

/* ----- Горизонтальный каталог (до N плиток во viewport, стрелки + drag-scroll) ----- */
.sc-catalog-strip {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
}

.sc-catalog-strip:not(.sc-catalog-strip--scrollable) .sc-catalog-strip__arrow {
  visibility: hidden;
  pointer-events: none;
}

.sc-catalog-strip__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  cursor: grab;
  touch-action: pan-x;
}

.sc-catalog-strip a {
  -webkit-user-drag: none;
}

.sc-catalog-strip__viewport--dragging {
  cursor: grabbing;
  user-select: none;
}

.sc-catalog-strip__viewport::-webkit-scrollbar {
  height: 6px;
}

.sc-catalog-strip--no-scrollbar .sc-catalog-strip__viewport {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sc-catalog-strip--no-scrollbar .sc-catalog-strip__viewport::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.sc-catalog-apps-filter-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: var(--ui-radius-control);
  border: 1px solid var(--ui-border);
  background: var(--ui-fill-subtle);
  color: var(--ui-text);
  font-size: 0.9rem;
  box-shadow: var(--ui-inset-highlight);
}

.sc-catalog-apps-filter-input::placeholder {
  color: var(--ui-muted);
  opacity: 0.95;
}

.sc-catalog-strip__track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--sc-strip-gap, clamp(0.5rem, 2vw, 0.85rem));
  min-height: 100%;
}

.sc-catalog-strip__cell {
  flex: 0 0 var(--sc-strip-cell, 10rem);
  min-width: 0;
  display: flex;
}

.sc-catalog-strip__cell > .sc-service-tile {
  flex: 1 1 auto;
  width: 100%;
  min-height: 3.35rem;
}

.sc-catalog-strip__arrow {
  flex: 0 0 auto;
  align-self: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ui-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.sc-catalog-strip__arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

.sc-catalog-strip__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.shell-main:has(.sc-api-shell) {
  max-width: none;
  margin-inline: 0;
  width: 100%;
  box-sizing: border-box;
}

.sc-api-shell {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
  width: 100%;
  min-width: 0;
}

@media (max-width: 840px) {
  .sc-api-shell {
    grid-template-columns: 1fr;
  }
}

.sc-api-aside {
  position: sticky;
  top: calc(var(--ui-topbar-h, 52px) + 0.75rem);
  padding: 0.85rem 1rem;
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border);
  background: var(--ui-card);
}

.sc-api-aside__block + .sc-api-aside__block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sc-api-aside__heading {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(148, 163, 184, 0.9);
  margin-bottom: 0.4rem;
}

.sc-api-aside__link {
  display: block;
  padding: 0.28rem 0;
  color: var(--ui-fg-muted, #cbd5e1);
  text-decoration: none;
  font-size: 0.92rem;
  border-radius: 6px;
}

.sc-api-aside__link:hover {
  color: #fff;
}

.sc-api-aside__link.is-active {
  color: #fff;
  font-weight: 700;
}

.sc-api-main {
  min-width: 0;
}

.sc-breadcrumb {
  font-size: 0.88rem;
  color: rgba(148, 163, 184, 0.95);
  margin: 0 0 0.75rem;
}

.sc-breadcrumb a {
  color: var(--ui-accent-bright, #a78bfa);
  text-decoration: none;
}

.sc-breadcrumb a:hover {
  text-decoration: underline;
}

.sc-breadcrumb__sep {
  margin: 0 0.35rem;
  opacity: 0.55;
}

.sc-filter-bar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 0.85rem 1rem;
  align-items: end;
}

.sc-filter-bar__grid > .sc-form-row,
.sc-filter-bar__grid > fieldset {
  min-width: 0;
}

.sc-filter-bar__grid .sc-form-row input,
.sc-filter-bar__grid .sc-form-row select,
.sc-filter-bar__grid .sc-form-row textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* Catalog as_of: same height/width as other filter controls; calendar dialog has presets */
.sc-as-of-host {
  width: 100%;
  min-width: 0;
}

.sc-as-of-host__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.sc-as-of-host__trigger.sc-btn,
.shell-body .sc-as-of-host__trigger.sc-btn {
  justify-content: space-between;
  width: 100%;
  max-width: none;
  min-height: 2.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--ui-radius, 10px);
  border: 1px solid var(--ui-border);
  background: var(--ui-fill-subtle, var(--ui-surface));
  color: var(--ui-text);
  box-shadow: var(--ui-inset-highlight);
  font-size: inherit;
  font-weight: 500;
}

.sc-as-of-host__trigger::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  margin-left: 0.5rem;
  flex-shrink: 0;
  border-right: 1.5px solid var(--ui-muted);
  border-bottom: 1.5px solid var(--ui-muted);
  transform: rotate(45deg);
  opacity: 0.7;
}

.sc-drd__months--single {
  display: flex;
  justify-content: center;
}

.sc-drd__months--single .sc-drd__month {
  width: auto;
  max-width: 100%;
}

.sc-drd__months--single .sc-drd__grid {
  grid-template-columns: repeat(7, 2.5rem);
  justify-content: center;
  gap: 0.35rem;
}

.sc-filter-bar__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
  align-items: center;
}

/* Компактная полоса (период, 1–2 поля) */
.sc-filter-bar--compact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.sc-filter-bar--compact .sc-filter-bar__actions {
  margin-top: 0;
}

/* Чекбокс в сетке фильтра */
.sc-form-row--checkbox label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  min-height: 2.35rem;
}

.sc-form-row--checkbox input[type="checkbox"] {
  width: auto;
  max-width: none;
  margin: 0;
}

.sc-analytics-filters .staff-form-card {
  margin: 0;
}

/* ui-form-row на <form> ломает вложенные .sc-form-row — ограничиваем селектор */
form.ui-form-row > .sc-form-row input,
form.ui-form-row > .sc-form-row select,
form.ui-form-row > .sc-form-row textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

form.ui-form-row > .sc-filter-bar__actions {
  flex: 1 1 100%;
}

.sc-filter-bar__title {
  grid-column: 1 / -1;
}

.sc-select-multi {
  width: 100%;
  min-height: 6.5rem;
  border-radius: 8px;
  padding: 0.35rem;
  background: var(--ui-field-bg, rgba(0, 0, 0, 0.2));
  border: 1px solid var(--ui-border);
  color: inherit;
}

.sc-ue-app-picker {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--ui-border);
  background: var(--ui-field-bg, rgba(0, 0, 0, 0.2));
  color: inherit;
}

.sc-ue-app-picker[open] {
  z-index: 4;
}

.sc-ue-app-picker__summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 0.75rem;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sc-ue-app-picker__summary::-webkit-details-marker {
  display: none;
}

.sc-ue-app-picker__summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.65;
}

.sc-ue-app-picker[open] .sc-ue-app-picker__summary::after {
  transform: rotate(-135deg);
}

.sc-ue-app-picker__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  max-height: 14rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.35rem 0.4rem 0.55rem;
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  background: var(--ui-card, rgba(28, 28, 32, 0.98));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Picker dropdown overlaps banners, later form rows, and following sections */
.sc-ios-section:has(.sc-ue-app-picker[open]),
.sc-card:has(.sc-ue-app-picker[open]) {
  position: relative;
  z-index: 50;
}

.staff-form-card:has(.sc-ue-app-picker[open]) {
  position: relative;
  z-index: 2;
}

.sc-form-row:has(.sc-ue-app-picker[open]) {
  position: relative;
  z-index: 3;
}

.sc-ios-section:has(.sc-ue-app-picker[open]) > .sc-ios-banner,
.sc-card:has(.sc-ue-app-picker[open]) > .sc-table-wrap {
  position: relative;
  z-index: 1;
}

/* App slice rows: title + trailing checkbox (Apple-style list cell) */
.sc-app-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.45rem;
  margin: 0.05rem 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.28;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.14s ease;
}

.sc-app-list-row:hover {
  background: rgba(255, 255, 255, 0.055);
}

.sc-app-list-row:active {
  background: rgba(255, 255, 255, 0.09);
}

.sc-app-list-row__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.sc-app-list-row__title {
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ui-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-app-list-row__meta {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.88);
}

.sc-app-row-check {
  position: relative;
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  display: grid;
  place-items: center;
}

.sc-app-row-check input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.sc-app-row-check__glyph {
  pointer-events: none;
  width: 1.3125rem;
  height: 1.3125rem;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.34);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

.sc-app-row-check input:focus-visible + .sc-app-row-check__glyph {
  outline: 2px solid var(--ui-accent-bright, #a78bfa);
  outline-offset: 2px;
}

.sc-app-row-check input:checked + .sc-app-row-check__glyph {
  border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(165deg, #c4b5fd 0%, #7c3aed 52%, #6d28d9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

.sc-app-row-check input:checked + .sc-app-row-check__glyph::after {
  content: "";
  width: 0.28rem;
  height: 0.52rem;
  margin-bottom: 2px;
  margin-left: 1px;
  border: solid rgba(255, 255, 255, 0.96);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sc-app-grid-wrap {
  width: 100%;
}

.sc-app-catalog-meta {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--ui-radius-xs, 10px);
  background: rgba(255, 255, 255, 0.03);
  border: 0.5px solid var(--ui-separator, rgba(255, 255, 255, 0.06));
}

.sc-apis-overview .sc-app-grid--catalog {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 720px) {
  .sc-apis-overview .sc-app-grid--catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

@media (min-width: 1100px) {
  .sc-apis-overview .sc-app-grid--catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .sc-apis-overview .sc-app-catalog-card__shell {
    padding: 1rem 1rem 1.1rem 0.85rem;
  }

  .sc-app-catalog-card__title {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
  }

  .sc-app-catalog-card__bundle {
    font-size: 0.72rem;
  }

  .sc-app-catalog-card__hero-value {
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  }

  .sc-app-catalog-card__kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sc-app-catalog-card {
  min-height: 100%;
}

.sc-app-catalog-card__shell {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  min-height: 100%;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: calc(var(--ui-radius) + 2px);
  padding: 1.15rem 1.2rem 1.25rem 0.95rem;
  box-shadow: var(--ui-shadow-sm), var(--ui-inset-highlight);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.sc-app-catalog-card:hover .sc-app-catalog-card__shell {
  border-color: var(--ui-separator-strong);
  box-shadow: var(--ui-shadow-md), var(--ui-inset-highlight);
}

.sc-app-catalog-card__mark {
  flex: 0 0 0.34rem;
  width: 0.34rem;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--ui-accent-bright, #a78bfa),
    color-mix(in srgb, var(--ui-accent) 42%, transparent)
  );
}

.sc-app-catalog-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sc-app-catalog-card--pending .sc-app-catalog-card__loading {
  min-height: 10rem;
}

.sc-app-catalog-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
}

.sc-app-catalog-card__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.8vw, 1.45rem);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ui-text, #fff);
}

.sc-app-catalog-card__title .sc-badge {
  margin-left: 0.35rem;
  vertical-align: middle;
}

.sc-app-catalog-card__bundle {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ui-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}

.sc-app-catalog-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex-shrink: 0;
}

.sc-app-catalog-card__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-radius: var(--ui-radius);
  background: var(--ui-glass-chrome, rgba(255, 255, 255, 0.04));
  border: 0.5px solid var(--ui-glass-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--ui-glass-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.06));
}

.sc-app-catalog-card__hero-main {
  min-width: 0;
  flex: 1 1 auto;
}

.sc-app-catalog-card__hero-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ui-muted);
  margin-bottom: 0.35rem;
}

.sc-app-catalog-card__hero-value-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
}

.sc-app-catalog-card__hero-value {
  font-size: clamp(1.55rem, 3.5vw, 2rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ui-text, #fff);
}

.sc-app-catalog-card__hero-sub {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--ui-muted);
}

.sc-app-catalog-card__spark {
  flex: 0 0 auto;
  color: var(--ui-accent-bright, #a78bfa);
}

.sc-app-catalog-card__kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

@media (min-width: 1200px) {
  .sc-app-catalog-card__kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sc-apis-overview .sc-app-catalog-card__kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sc-app-catalog-card__kpi {
  padding: 0.65rem 0.7rem;
  border-radius: var(--ui-radius-xs, 10px);
  background: var(--ui-glass-chrome, rgba(255, 255, 255, 0.03));
  border: 0.5px solid var(--ui-glass-border, rgba(255, 255, 255, 0.07));
  box-shadow: var(--ui-glass-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.05));
}

.sc-app-catalog-card__kpi-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-muted);
  margin-bottom: 0.25rem;
}

.sc-app-catalog-card__kpi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.sc-app-catalog-card__kpi-value {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.sc-app-catalog-card__compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.sc-app-catalog-card__compare-col {
  padding: 0.7rem 0.75rem;
  border-radius: var(--ui-radius-xs, 10px);
  background: rgba(255, 255, 255, 0.02);
  border: 0.5px solid var(--ui-separator, rgba(255, 255, 255, 0.06));
}

.sc-app-catalog-card__compare-title {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ui-muted);
}

.sc-app-catalog-card__compare-list {
  margin: 0;
  display: grid;
  gap: 0.45rem;
}

.sc-app-catalog-card__compare-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.sc-app-catalog-card__compare-list dt {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ui-muted);
  font-weight: 500;
}

.sc-app-catalog-card__compare-list dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  text-align: right;
}

.sc-app-catalog-card__empty,
.sc-app-catalog-card__hint {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: var(--ui-radius-xs, 10px);
  font-size: 0.84rem;
  line-height: 1.45;
}

.sc-app-catalog-card__empty {
  background: rgba(239, 68, 68, 0.08);
  border: 0.5px solid rgba(239, 68, 68, 0.22);
  color: color-mix(in srgb, var(--ui-danger, #ef4444) 85%, #fff);
}

.sc-app-catalog-card__hint {
  background: rgba(56, 189, 248, 0.07);
  border: 0.5px solid rgba(56, 189, 248, 0.18);
  color: var(--ui-muted);
}

.sc-sparkline {
  display: block;
  overflow: visible;
}

.sc-sparkline__area {
  fill: currentColor;
  opacity: 0.14;
}

.sc-sparkline__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sc-sparkline--up {
  color: var(--ui-success, #22c55e);
}

.sc-sparkline--down {
  color: var(--ui-danger, #ef4444);
}

.sc-sparkline--flat {
  color: var(--ui-muted, #94a3b8);
}

.sc-metric-delta {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.1;
}

.sc-metric-delta--up {
  color: var(--ui-success, #22c55e);
  background: color-mix(in srgb, var(--ui-success, #22c55e) 14%, transparent);
}

.sc-metric-delta--down {
  color: var(--ui-danger, #ef4444);
  background: color-mix(in srgb, var(--ui-danger, #ef4444) 14%, transparent);
}

.sc-metric-delta--flat {
  opacity: 0.55;
}

.sc-app-catalog-card__shimmer {
  height: 7.5rem;
  border-radius: var(--ui-radius-xs, 10px);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: sc-shimmer 1.2s ease-in-out infinite;
}

.sc-apis-overview .sc-api-catalog-card {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--ui-accent-bright);
  position: relative;
}

.sc-apis-overview .sc-api-catalog-card::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ui-success);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.sc-api-catalog-card__id {
  font-size: 0.78rem;
  opacity: 0.8;
}

.sc-api-catalog-card__name {
  font-weight: 700;
  margin: 0.2rem 0 0.6rem;
}

.sc-api-catalog-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sc-label-hint {
  font-weight: 400;
  opacity: 0.75;
  font-size: 0.85em;
}

.sc-app-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 12rem;
  overflow: auto;
  padding: 0.25rem 0;
}

.sc-console-filters {
  margin-bottom: 1rem;
}

.sc-console-filters__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.sc-console-filters__hint {
  margin: 0 0 0.85rem;
}

.sc-console-filters__fieldset .sc-form-row {
  margin-bottom: 0;
  min-width: 0;
}

.sc-console-filters__fieldset .sc-form-row input,
.sc-console-filters__fieldset .sc-form-row select,
.sc-console-filters__fieldset .sc-form-row textarea {
  max-width: 100%;
  box-sizing: border-box;
}

.sc-console-filters__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sc-console-filters__fieldset {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 0.65rem 0.85rem;
  margin: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.65rem 1rem;
  align-items: end;
}

.sc-console-filters__fieldset--apps {
  grid-template-columns: 1fr;
}

.sc-console-filters__fieldset legend {
  grid-column: 1 / -1;
  padding: 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(148, 163, 184, 0.95);
}

/* Период: одна колонка внутри рамки + полная ширина в сетке фильтров (иначе поля дат уезжают за границу) */
.sc-console-filters__fieldset:has(> .sc-daterange-host) {
  grid-template-columns: 1fr;
}

.sc-console-filters__fieldset > .sc-daterange-host {
  grid-column: 1 / -1;
  min-width: 0;
}

.sc-filter-bar__grid > fieldset.sc-console-filters__fieldset:has(.sc-daterange-host) {
  grid-column: 1 / -1;
}

.sc-console-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sc-filter-bar__grid > fieldset.sc-console-filters__fieldset--apps {
  grid-column: 1 / -1;
}

.sc-card--chart-hero {
  margin-bottom: 1rem;
}

/* ----- Сетка приложений (обзор) ----- */
.sc-app-grid,
.ui-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(0.65rem, 2vw, 1rem);
}

.sc-app-card,
.ui-app-card {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 1.1rem 1.1rem 1.1rem 1.15rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.15s, box-shadow 0.15s;
  border-left: 4px solid var(--ui-accent-bright);
  position: relative;
}

.sc-app-card::before,
.ui-app-card::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ui-success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-success) 28%, transparent);
}

.sc-app-card:hover,
.ui-app-card:hover {
  border-color: var(--ui-accent-ring);
  box-shadow: var(--ui-shadow-md), var(--ui-inset-highlight);
}

.sc-app-card__id,
.ui-app-card__id {
  font-size: 0.875rem;
  color: var(--ui-accent-bright);
  font-family: ui-monospace, monospace;
}

.sc-app-card__name,
.ui-app-card__name {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0.25rem 0;
  padding-right: 1.5rem;
}

.sc-app-card__meta,
.ui-app-card__meta {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ui-muted);
}

.sc-app-card--inactive {
  border-left-color: rgba(148, 163, 184, 0.45);
  opacity: 0.94;
}

.sc-app-card--inactive::before {
  background: rgba(148, 163, 184, 0.9);
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.22);
}

/* ----- Секция обзора (как группа ресурсов) ----- */
.ui-resource-section {
  margin-bottom: 2rem;
}

.ui-resource-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ui-resource-section__title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
  color: var(--ui-text);
}

.ui-resource-section__count {
  font-size: 0.875rem;
  color: var(--ui-muted);
}

/* ----- Деталь приложения: шапка + вкладки ----- */
.ui-app-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ui-app-hero--service-under-apps {
  align-items: center;
  margin-top: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--ui-radius);
  background: var(--ui-glass-regular);
  border: 0.5px solid var(--ui-glass-border);
  box-shadow: var(--ui-glass-shadow), var(--ui-glass-highlight);
}

.ui-app-hero__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ui-app-hero__meta {
  font-size: 0.9rem;
  color: var(--ui-muted);
  margin: 0.35rem 0 0;
  max-width: 720px;
}

.ui-app-hero__meta .sc-badge {
  margin-left: 0.35rem;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.68rem;
}

.sc-user-restrictions-btn {
  min-height: 40px;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ui-accent) 28%, transparent);
}

.sc-user-restrictions-btn.sc-btn--danger {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ui-danger) 28%, transparent);
}

.ui-app-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ui-success);
  margin-top: 0.5rem;
}

.ui-app-hero__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ui-success);
}

.ui-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ui-border);
}

.ui-tabbar a,
.ui-tabbar span {
  padding: 0.45rem 0.95rem;
  border-radius: 980px;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ui-muted);
  background: var(--ui-fill-subtle);
  border: 1px solid var(--ui-border);
}

.ui-tabbar a:hover {
  color: var(--ui-text);
  background: var(--ui-selection);
  border-color: var(--ui-border);
}

.ui-tabbar a.is-active,
.ui-tabbar span.is-active {
  color: var(--ui-text);
  background: var(--ui-accent-bright);
  border-color: transparent;
  box-shadow: var(--ui-inset-highlight), var(--ui-shadow-sm);
}

/* ----- Сетка макета (12 колонок) ----- */
.sc-layout-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1rem);
  width: 100%;
  max-width: none;
  margin-bottom: 1.25rem;
  align-items: stretch;
}

.sc-layout-grid__item {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (min-width: 640px) {
  .sc-layout-grid__item--sm-4 {
    grid-column: span 4;
  }

  .sc-layout-grid__item--sm-6 {
    grid-column: span 6;
  }

  .sc-layout-grid__item--sm-8 {
    grid-column: span 8;
  }
}

@media (min-width: 900px) {
  .sc-layout-grid__item--md-3 {
    grid-column: span 3;
  }

  .sc-layout-grid__item--md-4 {
    grid-column: span 4;
  }

  .sc-layout-grid__item--md-6 {
    grid-column: span 6;
  }

  .sc-layout-grid__item--md-8 {
    grid-column: span 8;
  }

  .sc-layout-grid__item--md-9 {
    grid-column: span 9;
  }

  .sc-layout-grid__item--md-12 {
    grid-column: span 12;
  }

  /* Явные колонки сетки важнее авто-раскладки ui-dashboard-grid */
  .sc-layout-grid .sc-layout-grid__item.sc-layout-grid__item--md-3 {
    grid-column: span 3;
  }

  .sc-layout-grid .sc-layout-grid__item.sc-layout-grid__item--md-4 {
    grid-column: span 4;
  }

  .sc-layout-grid .sc-layout-grid__item.sc-layout-grid__item--md-6 {
    grid-column: span 6;
  }

  .sc-layout-grid .sc-layout-grid__item.sc-layout-grid__item--md-8 {
    grid-column: span 8;
  }

  .sc-layout-grid .sc-layout-grid__item.sc-layout-grid__item--md-9 {
    grid-column: span 9;
  }

  .sc-layout-grid .sc-layout-grid__item.sc-layout-grid__item--md-12 {
    grid-column: span 12;
  }
}

.sc-layout-grid > .sc-card,
.sc-layout-grid > .ui-card {
  margin-bottom: 0;
}

/* Кольцевая диаграмма — компактная ячейка, без растягивания на всю строку */
.sc-card--chart-donut {
  align-self: start;
}

.sc-card--chart-donut .sc-chart-wrap--donut {
  width: 100%;
  max-width: 15rem;
  margin-inline: auto;
  height: clamp(180px, 22vw, 240px);
  max-height: 240px;
}

.sc-card--chart-donut h2 {
  margin-bottom: 0.65rem;
}

.ui-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1rem);
  width: 100%;
  max-width: none;
  margin-bottom: 1.25rem;
}

.ui-dashboard-grid > .sc-card,
.ui-dashboard-grid > .ui-card {
  grid-column: 1 / -1;
  min-width: 0;
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .ui-dashboard-grid > .sc-card,
  .ui-dashboard-grid > .ui-card {
    grid-column: span 6;
  }
}

@media (max-width: 520px) {
  .shell-topbar__brand-text {
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 960px) {
  .shell-body-row {
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .shell-sidebar-expand {
    position: fixed;
    left: max(0.75rem, env(safe-area-inset-left, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    width: 3.25rem;
    height: 3.25rem;
    align-self: auto;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4);
    z-index: 200;
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  .shell-sidebar {
    width: 100% !important;
    min-height: 0;
    max-height: min(52vh, 22rem);
    border-right: none;
    border-bottom: 1px solid var(--ui-border);
    opacity: 1 !important;
    flex-basis: auto !important;
    pointer-events: auto !important;
  }

  .shell-sidebar-is-collapsed .shell-sidebar {
    display: none;
  }

  .shell-sidebar__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    overflow-y: auto;
  }

  .shell-nav-group {
    width: 100%;
  }

  .shell-workspace {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .sc-layout-grid__item--sm-4,
  .sc-layout-grid__item--sm-6,
  .sc-layout-grid__item--sm-8,
  .sc-layout-grid__item--md-3,
  .sc-layout-grid__item--md-4,
  .sc-layout-grid__item--md-6,
  .sc-layout-grid__item--md-8,
  .sc-layout-grid__item--md-9 {
    grid-column: 1 / -1;
  }

  .ui-dashboard-grid > .sc-card,
  .ui-dashboard-grid > .ui-card {
    grid-column: 1 / -1;
  }
}

/* ----- Таблицы, формы, кнопки ----- */
.sc-table-wrap,
.ui-table-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
}

.sc-table,
.ui-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: var(--ui-font-base);
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.sc-table th,
.sc-table td,
.ui-table th,
.ui-table td {
  text-align: left;
  padding: var(--ui-table-pad-y) var(--ui-table-pad-x);
  border-bottom: 1px solid var(--ui-border);
  vertical-align: top;
  hyphens: auto;
}

.sc-table th,
.ui-table th {
  color: var(--ui-muted);
  font-weight: 600;
  font-size: var(--ui-font-small);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sc-table td code,
.sc-table code,
.ui-table td code,
.ui-table code {
  font-size: 0.92em;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.sc-table tbody tr[data-op-row] {
  cursor: pointer;
}

.sc-table--usage-events {
  font-size: 0.82rem;
}

.sc-table--usage-events th,
.sc-table--usage-events td {
  padding: 0.38rem 0.48rem;
  vertical-align: top;
}

.sc-table--usage-events tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

.sc-usage-events-section .sc-usage-events-form {
  position: relative;
  z-index: 12;
  margin-bottom: 0;
  overflow: visible;
}

/* Форма идёт в разметке раньше таблицы; без слоя таблица перекрывает выпадающий список приложений */
.sc-usage-events-section > .sc-table-wrap {
  position: relative;
  z-index: 0;
}

.sc-btn,
.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.52rem 1rem;
  border-radius: var(--ui-radius-control);
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition:
    filter 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.sc-btn--primary,
.ui-btn--primary {
  background: var(--ui-accent-bright);
  color: #fff;
  box-shadow: var(--ui-inset-highlight), var(--ui-shadow-sm);
}

.sc-btn--primary:hover,
.ui-btn--primary:hover {
  filter: brightness(1.06);
}

.sc-btn--ghost,
.ui-btn--ghost {
  background: var(--ui-fill);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-inset-highlight);
}

.sc-btn--ghost:hover,
.ui-btn--ghost:hover {
  background: var(--ui-fill-hover);
}

.sc-btn--danger,
.ui-btn--danger {
  background: transparent;
  color: var(--ui-danger);
  border: 1px solid rgba(255, 69, 58, 0.45);
}

.sc-btn--danger:hover,
.ui-btn--danger:hover {
  background: rgba(255, 69, 58, 0.12);
}

.sc-form-row,
.ui-form-row {
  margin-bottom: 1rem;
}

.sc-form-row label,
.ui-form-row label {
  display: block;
  font-size: 0.875rem;
  color: var(--ui-muted);
  margin-bottom: 0.35rem;
}

.sc-hint,
.ui-hint {
  font-size: 0.875rem;
  color: var(--ui-muted);
  margin: 0.25rem 0 0;
  max-width: 520px;
  line-height: 1.45;
}

.sc-form-row input,
.sc-form-row select,
.sc-form-row textarea,
.ui-form-row input,
.ui-form-row select,
.ui-form-row textarea {
  width: 100%;
  max-width: 480px;
  padding: 0.52rem 0.75rem;
  border-radius: var(--ui-radius-control);
  border: 1px solid var(--ui-border);
  background: var(--ui-fill-subtle);
  color: var(--ui-text);
  font: inherit;
  box-shadow: var(--ui-inset-highlight);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.sc-form-row input:focus,
.sc-form-row select:focus,
.sc-form-row textarea:focus,
.ui-form-row input:focus,
.ui-form-row select:focus,
.ui-form-row textarea:focus {
  outline: none;
  border-color: var(--ui-accent-ring);
  background: var(--ui-fill);
}

.shell-body select option,
.shell-body select optgroup,
.sc-body select option,
.sc-body select optgroup {
  background-color: var(--ui-surface-elevated);
  color: var(--ui-text);
}

/* Несколько полей в ряд: явный flex + зазоры (часто в разметке только flex-wrap) */
.shell-body .staff-form-card:not(.sc-filter-bar__grid):has(.sc-form-row ~ .sc-form-row) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 1.15rem;
  row-gap: 1rem;
}

.shell-body .staff-form-card:not(.sc-filter-bar__grid):has(.sc-form-row ~ .sc-form-row) > .sc-form-row {
  margin-bottom: 0;
  flex: 0 1 auto;
  min-width: min(100%, 10rem);
}

.shell-body .staff-form-card:not(.sc-filter-bar__grid):has(.sc-form-row ~ .sc-form-row) > label[style*="display:flex"] {
  flex: 1 1 100%;
}

/* Чёткая граница между соседними полями на «стекле» */
.shell-body .staff-form-card .sc-form-row input,
.shell-body .staff-form-card .sc-form-row select,
.shell-body .staff-form-card .sc-form-row textarea {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.shell-body .staff-form-card .sc-daterange-host .sc-form-row input,
.shell-body .staff-form-card .sc-daterange-host .sc-form-row select {
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.42rem 0.58rem;
  font-size: 0.84rem;
  border-radius: 8px;
}

.shell-body .sc-form-row > div[style*="display:flex"] {
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.sc-setup,
.ui-setup {
  max-width: 560px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: var(--ui-card);
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border);
}

.sc-setup code,
.ui-setup code {
  font-size: 0.85rem;
  color: var(--ui-accent-bright);
  opacity: 0.92;
}

.sc-badge,
.ui-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 980px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sc-badge--ok,
.ui-badge--ok {
  background: color-mix(in srgb, var(--ui-success) 22%, transparent);
  color: var(--ui-success);
}

.sc-badge--warn,
.ui-badge--warn {
  background: color-mix(in srgb, var(--ui-warning) 22%, transparent);
  color: var(--ui-warning);
}

.sc-badge--danger,
.ui-badge--danger {
  background: color-mix(in srgb, var(--ui-danger) 22%, transparent);
  color: var(--ui-danger);
}

.sc-tabs,
.ui-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.sc-tabs a,
.ui-tabs a {
  padding: 0.4rem 0.9rem;
  border-radius: 980px;
  background: var(--ui-fill-subtle);
  border: 1px solid var(--ui-border);
  color: var(--ui-muted);
  text-decoration: none;
  font-size: 0.9375rem;
}

.sc-tabs a:hover,
.sc-tabs a.is-active,
.ui-tabs a:hover,
.ui-tabs a.is-active {
  background: var(--ui-selection-strong);
  border-color: var(--ui-accent-ring);
  color: var(--ui-text);
  box-shadow: var(--ui-inset-highlight);
}

.sc-app-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 900px) {
  .sc-app-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ----- Staff / integration tables (legacy) ----- */
.shell-body .staff-inner,
.shell-body .ios-main {
  max-width: 1200px;
  margin: 0 auto;
}

.shell-body table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  word-break: break-word;
  overflow-wrap: anywhere;
  background: var(--ui-card);
  border-radius: var(--ui-radius);
  overflow: hidden;
  border: 1px solid var(--ui-border);
  font-size: var(--ui-font-base);
}

.shell-body table th,
.shell-body table td {
  padding: var(--ui-table-pad-y) var(--ui-table-pad-x);
  border-bottom: 1px solid var(--ui-border);
  text-align: left;
  line-height: 1.45;
  vertical-align: top;
  hyphens: auto;
}

.shell-body table th {
  background: var(--ui-surface-elevated);
  color: var(--ui-muted);
  font-size: var(--ui-font-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.shell-body .staff-form-card,
.shell-body .ios-panel {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.shell-body .pagination {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.9rem;
  color: var(--ui-muted);
}

.shell-body .pagination a {
  color: var(--ui-accent-bright);
}

/* ----- Django Admin: единая тёмная тема (.shell-theme) ----- */
body.admin-ios.shell-theme {
  --primary: #c8b8fc;
  --secondary: var(--ui-accent);
  --accent: var(--ui-selection);

  --primary-fg: #0f1117;

  --body-fg: #e5e7eb;
  --body-bg: #0f1117;
  --body-quiet-color: #9ca3af;
  --body-medium-color: #d1d5db;
  --body-loud-color: #f9fafb;

  --header-color: #f3f4f6;
  --header-branding-color: #c4b5fd;
  --header-bg: #161922;
  --header-link-color: #e9d5ff;

  --breadcrumbs-fg: #9ca3af;
  --breadcrumbs-link-fg: #c4b5fd;
  --breadcrumbs-bg: #161922;

  --link-fg: #c4b5fd;
  --link-hover-color: #ddd6fe;
  --link-selected-fg: #a78bfa;

  --hairline-color: rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 255, 255, 0.1);

  --darkened-bg: rgba(255, 255, 255, 0.04);
  --selected-bg: color-mix(in srgb, var(--ui-accent-bright) 18%, transparent);
  --selected-row: color-mix(in srgb, var(--ui-accent-bright) 9%, transparent);

  --button-bg: rgba(255, 255, 255, 0.08);
  --button-hover-bg: rgba(255, 255, 255, 0.12);
  --default-button-bg: #7c3aed;
  --default-button-hover-bg: #6d28d9;

  background: var(--body-bg) !important;
  color: var(--body-fg) !important;
}

/* Django Admin #header — тот же язык, что у .shell-topbar на консоли */
body.admin-ios.shell-theme:not(.popup) #header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  float: none;
  clear: both;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--ui-topbar-h);
  padding: 0.65rem var(--ui-page-pad-x);
  padding-top: max(0.65rem, env(safe-area-inset-top, 0px));
  background: var(--ui-surface-elevated) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow-sm);
  color: var(--ui-text);
}

body.admin-ios.shell-theme:not(.popup) #header::after {
  display: none;
}

body.admin-ios.shell-theme #branding {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  margin: 0;
}

body.admin-ios.shell-theme #site-name {
  padding: 0;
  margin: 0;
}

body.admin-ios.shell-theme h1#site-name {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

body.admin-ios.shell-theme h1#site-name a:link,
body.admin-ios.shell-theme h1#site-name a:visited,
body.admin-ios.shell-theme #site-name a:link,
body.admin-ios.shell-theme #site-name a:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ui-text) !important;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(0.9rem, 0.82rem + 0.35vw, 1.02rem);
  padding: 0.2rem 0.45rem 0.2rem 0.15rem;
  margin: 0;
  border-radius: var(--ui-radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}

body.admin-ios.shell-theme #site-name a:hover,
body.admin-ios.shell-theme h1#site-name a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06);
}

body.admin-ios.shell-theme #site-name a:focus-visible,
body.admin-ios.shell-theme h1#site-name a:focus-visible {
  outline: 2px solid var(--ui-accent-bright);
  outline-offset: 2px;
}

body.admin-ios.shell-theme #site-name a::before,
body.admin-ios.shell-theme h1#site-name a::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: var(--ui-radius-sm);
  flex-shrink: 0;
  background: linear-gradient(
    145deg,
    var(--ui-accent-bright) 0%,
    var(--ui-accent-dim) 100%
  );
  box-shadow: var(--ui-shadow-sm), var(--ui-inset-highlight);
}

body.admin-ios.shell-theme #user-tools {
  float: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--ui-muted);
  font-weight: 400;
  margin: 0;
  text-align: inherit;
}

body.admin-ios.shell-theme #user-tools a:link,
body.admin-ios.shell-theme #user-tools a:visited {
  color: var(--ui-accent-bright);
  font-weight: 500;
  text-decoration: none;
}

body.admin-ios.shell-theme #user-tools a:hover {
  color: #fff;
  text-decoration: underline;
}

body.admin-ios.shell-theme #user-tools strong {
  color: var(--ui-muted);
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 980px;
  background: var(--ui-fill);
  border: 1px solid var(--ui-border);
  max-width: min(220px, 46vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-ios.shell-theme #logout-form {
  display: inline-flex;
  margin: 0;
}

body.admin-ios.shell-theme #logout-form button {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ui-text);
  padding: 0.45rem 1rem;
  border-radius: 980px;
  border: 1px solid var(--ui-accent-ring);
  background: var(--ui-selection-strong);
  box-shadow: var(--ui-inset-highlight), var(--ui-shadow-sm);
  min-height: auto;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    filter 0.15s ease;
}

body.admin-ios.shell-theme #logout-form button:hover {
  filter: brightness(1.06);
  background: var(--ui-selection-strong);
  border-color: var(--ui-accent-bright);
}

body.admin-ios.shell-theme .module,
body.admin-ios.shell-theme .dashboard .module {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
}

body.admin-ios.shell-theme .module h2,
body.admin-ios.shell-theme .module caption {
  background: var(--ui-surface-elevated);
  color: var(--ui-text);
  border-bottom: 1px solid var(--ui-border);
}

body.admin-ios.shell-theme input,
body.admin-ios.shell-theme select,
body.admin-ios.shell-theme textarea {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

/* Карточки быстрых ссылок на главной админки */
body.admin-ios.shell-theme .staff-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

body.admin-ios.shell-theme .staff-shortcuts-grid li {
  margin: 0;
}

body.admin-ios.shell-theme .staff-shortcuts-grid a {
  display: block;
  padding: 1rem 1.1rem;
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  border-left: 4px solid var(--ui-accent-bright);
  color: var(--ui-text);
  text-decoration: none;
  font-weight: 500;
  transition: box-shadow 0.15s, border-color 0.15s;
}

body.admin-ios.shell-theme .staff-shortcuts-grid a:hover {
  border-color: var(--ui-accent-ring);
  box-shadow: var(--ui-shadow-md);
}

body.admin-ios.shell-theme .staff-shortcuts h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
}

/* Контент Django Admin: ширина и отступы под любой экран */
body.admin-ios.shell-theme #content {
  max-width: min(1200px, 100%);
  width: 100%;
  box-sizing: border-box;
  padding-left: var(--ui-page-pad-x);
  padding-right: var(--ui-page-pad-x);
}

body.admin-ios.shell-theme #content h1 {
  font-size: clamp(1.1rem, 0.85rem + 1.1vw, 1.45rem);
  word-wrap: break-word;
}

body.admin-ios.shell-theme .main {
  min-width: 0;
}

body.admin-ios.shell-theme .admin-app-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  justify-content: center;
}

body.admin-ios.shell-theme .admin-app-card.module {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-left: 4px solid var(--ui-accent-bright);
}

body.admin-ios.shell-theme .admin-app-card.module h2.admin-app-card__title {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--ui-surface-elevated);
  border-bottom: 1px solid var(--ui-border);
  font-size: 1rem;
  font-weight: 600;
}

body.admin-ios.shell-theme .admin-app-card__title-link {
  color: var(--ui-text);
  text-decoration: none;
}

body.admin-ios.shell-theme .admin-app-card__title-link:hover {
  color: var(--ui-accent-bright);
}

body.admin-ios.shell-theme .admin-app-card__models {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}

body.admin-ios.shell-theme .admin-app-card__model {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--ui-fill-subtle);
}

body.admin-ios.shell-theme .admin-app-card__model:last-child {
  border-bottom: none;
}

body.admin-ios.shell-theme .admin-app-card__model-name a {
  color: var(--ui-text);
  font-weight: 500;
  text-decoration: none;
}

body.admin-ios.shell-theme .admin-app-card__model-name a:hover {
  color: var(--ui-accent-bright);
}

body.admin-ios.shell-theme .admin-app-card__model-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex-shrink: 0;
}

body.admin-ios.shell-theme .admin-app-card__model-actions a {
  font-size: 0.78rem;
}

body.admin-ios.shell-theme .admin-home-empty {
  color: var(--ui-muted);
  text-align: center;
  padding: 2rem;
}

/* ----- Staff DB hub: те же карточки моделей, что в админке (shell без .admin-ios) ----- */
.staff-db-hub__block {
  margin-bottom: 1.5rem;
}

.staff-db-hub-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}

.staff-db-hub-links a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-elevated);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  text-decoration: none;
  font-size: 0.9rem;
}

.staff-db-hub-links a:hover {
  border-color: var(--ui-accent-ring);
  background: var(--ui-selection);
  color: var(--ui-accent-bright);
}

/* ----- Каталог и БД: хаб с пояснениями ----- */
.staff-db-hub {
  max-width: min(1200px, 100%);
}

.staff-db-hub__intro {
  max-width: 46rem;
  line-height: 1.55;
}

.staff-db-hub__section {
  margin-top: 2rem;
}

.staff-db-hub__section--admin {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ui-border);
}

.staff-db-hub__h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.2rem);
  font-weight: 600;
  color: var(--ui-text);
}

.staff-db-hub__h3 {
  margin: 1.25rem 0 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-muted);
}

.staff-db-hub__section-lead {
  margin: 0 0 1rem;
  max-width: 44rem;
  font-size: var(--ui-font-base);
  line-height: 1.5;
  color: var(--ui-muted);
}

.staff-db-hub__group {
  margin-bottom: 1.5rem;
}

.staff-db-hub__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.staff-db-hub-card {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--ui-accent-bright);
}

.staff-db-hub-card__link {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ui-text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.staff-db-hub-card__link:hover {
  color: var(--ui-accent-bright);
}

.staff-db-hub-card__table {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--ui-font-small);
  font-family: ui-monospace, Consolas, monospace;
  color: var(--ui-muted);
}

.staff-db-hub-card__desc {
  margin: 0.5rem 0 0;
  font-size: var(--ui-font-base);
  line-height: 1.5;
  color: var(--ui-muted);
}

.staff-breadcrumb {
  margin: 0 0 0.75rem;
  font-size: var(--ui-font-small);
}

.staff-breadcrumb a {
  color: var(--ui-muted);
  text-decoration: none;
  font-weight: 500;
}

.staff-breadcrumb a:hover {
  color: var(--ui-accent-bright);
}

.staff-add-heading,
.staff-table-heading {
  margin-top: 1.5rem;
}

.staff-id-hint {
  font-size: var(--ui-font-small);
  color: var(--ui-muted);
  font-weight: 400;
}

.shell-main .admin-app-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  justify-content: center;
}

.shell-main .admin-app-card.module {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--ui-radius);
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--ui-accent-bright);
}

.shell-main .admin-app-card.module h2.admin-app-card__title {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--ui-surface-elevated);
  border-bottom: 1px solid var(--ui-border);
  font-size: 1rem;
  font-weight: 600;
}

.shell-main .admin-app-card__title-link {
  color: var(--ui-text);
  text-decoration: none;
}

.shell-main .admin-app-card__title-link:hover {
  color: var(--ui-accent-bright);
}

.shell-main .admin-app-card__models {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}

.shell-main .admin-app-card__model {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--ui-fill-subtle);
}

.shell-main .admin-app-card__model:last-child {
  border-bottom: none;
}

.shell-main .admin-app-card__model-name a {
  color: var(--ui-text);
  font-weight: 500;
  text-decoration: none;
}

.shell-main .admin-app-card__model-name a:hover {
  color: var(--ui-accent-bright);
}

.shell-main .admin-app-card__model-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex-shrink: 0;
}

.shell-main .admin-app-card__model-actions a {
  font-size: 0.78rem;
}

/* ----- «Стекло» (полупрозрачные панели, как в iOS) ----- */
.shell-body,
.sc-body {
  background: linear-gradient(165deg, #0a0c12 0%, #121726 42%, #0f1117 100%);
  background-attachment: fixed;
}

@supports ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
  .shell-sidebar {
    background: rgba(28, 28, 30, 0.58);
    -webkit-backdrop-filter: saturate(1.2) blur(28px);
    backdrop-filter: saturate(1.2) blur(28px);
    border-right-color: var(--ui-separator);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
  }

  .shell-topbar {
    background: rgba(28, 28, 30, 0.76);
    -webkit-backdrop-filter: saturate(1.18) blur(24px);
    backdrop-filter: saturate(1.18) blur(24px);
    border-bottom-color: var(--ui-border);
    box-shadow: var(--ui-shadow-md), var(--ui-inset-highlight);
  }

  .shell-sidebar__footer {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .shell-sidebar-toggle--panel {
    background: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .shell-sidebar-expand {
    background: rgba(22, 25, 34, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
  }

  .sc-kpi,
  .ui-kpi,
  .sc-card,
  .ui-card,
  .sc-app-card,
  .ui-app-card {
    background: rgba(28, 34, 48, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  }

  .shell-search input[type="search"],
  .shell-search input[type="text"] {
    background: rgba(15, 17, 23, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  body.admin-ios.shell-theme .module,
  body.admin-ios.shell-theme .dashboard .module {
    background: rgba(28, 34, 48, 0.52);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
  }

  body.admin-ios.shell-theme .staff-shortcuts-grid a {
    background: rgba(28, 34, 48, 0.52);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .shell-messages .shell-msg {
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
  }

  .staff-form-card,
  .shell-body .staff-form-card {
    background: rgba(28, 34, 48, 0.48);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ui-radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
  }

  .sc-setup,
  .ui-setup {
    background: rgba(28, 34, 48, 0.52);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  }

  .sc-form-row input,
  .sc-form-row select,
  .sc-form-row textarea,
  .ui-form-row input,
  .ui-form-row select,
  .ui-form-row textarea {
    background: rgba(15, 17, 23, 0.42);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.11);
  }

  .shell-body .staff-form-card .sc-form-row input,
  .shell-body .staff-form-card .sc-form-row select,
  .shell-body .staff-form-card .sc-form-row textarea {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
      0 1px 4px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  .sc-table thead,
  .ui-table thead,
  .sc-table th,
  .ui-table th {
    background: rgba(22, 25, 34, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .shell-body table {
    background: rgba(28, 34, 48, 0.42);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  }

  .shell-body table th {
    background: rgba(22, 25, 34, 0.58);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .ui-tabbar a,
  .ui-tabbar span {
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ui-tabbar a.is-active,
  .ui-tabbar span.is-active {
    border-color: transparent;
    box-shadow: var(--ui-inset-highlight), var(--ui-shadow-sm);
  }

  .ui-tabbar a:hover {
    background: var(--ui-selection);
  }

  .sc-tabs a {
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  .sc-tabs a:hover,
  .sc-tabs a.is-active {
    background: var(--ui-selection-strong);
    border-color: var(--ui-accent-ring);
  }

  .sc-btn--ghost,
  .ui-btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.12);
  }

  .sc-btn--primary,
  .ui-btn--primary {
    box-shadow: var(--ui-inset-highlight), var(--ui-shadow-md);
  }

  .shell-topbar__link {
    background: var(--ui-selection);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .ui-app-hero {
    background: rgba(28, 34, 48, 0.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    backdrop-filter: blur(14px) saturate(1.12);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--ui-radius);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  }

  dialog.sc-dialog {
    background: rgba(22, 26, 36, 0.88);
    color: var(--ui-text);
    -webkit-backdrop-filter: blur(28px) saturate(1.25);
    backdrop-filter: blur(28px) saturate(1.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  }

  dialog.sc-dialog::backdrop {
    background: rgba(6, 8, 14, 0.52);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .staff-db-hub-card {
    background: rgba(28, 28, 30, 0.52);
    -webkit-backdrop-filter: blur(12px) saturate(1.12);
    backdrop-filter: blur(12px) saturate(1.12);
    border-color: var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
  }

  .staff-db-hub-links a {
    background: rgba(28, 28, 30, 0.48);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: var(--ui-border);
  }

  .shell-body .pagination {
    background: rgba(28, 34, 48, 0.4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 0.65rem 1rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  body.admin-ios.shell-theme:not(.popup) #header {
    background: linear-gradient(
      180deg,
      rgba(28, 33, 46, 0.72) 0%,
      rgba(22, 25, 34, 0.68) 100%
    ) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    backdrop-filter: blur(20px) saturate(1.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  body.admin-ios.shell-theme .breadcrumbs {
    background: rgba(22, 25, 34, 0.55) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  body.admin-ios.shell-theme fieldset.module {
    background: rgba(28, 34, 48, 0.48);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
    border-color: rgba(255, 255, 255, 0.1);
  }

  body.admin-ios.shell-theme .submit-row {
    background: rgba(22, 25, 34, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  body.admin-ios.shell-theme input:not([type="submit"]):not([type="button"]),
  body.admin-ios.shell-theme select,
  body.admin-ios.shell-theme textarea {
    background: rgba(15, 17, 23, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.1);
  }

  body.admin-ios.shell-theme .object-tools a {
    background: var(--ui-selection);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--ui-accent-ring);
  }

  .shell-main .admin-app-card.module {
    background: rgba(28, 34, 48, 0.52);
    -webkit-backdrop-filter: blur(12px) saturate(1.12);
    backdrop-filter: blur(12px) saturate(1.12);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .shell-main .admin-app-card.module h2.admin-app-card__title {
    background: rgba(22, 25, 34, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .shell-body .ios-panel {
    background: rgba(28, 34, 48, 0.48);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    backdrop-filter: blur(14px) saturate(1.12);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  }

  /* Services console: billing, units, iOS Settings */
  .sc-ios-inset,
  .sc-ios-disclosure > summary,
  .sc-ios-disclosure__body,
  .ui-app-hero--service-under-apps {
    background: var(--ui-glass-regular);
    -webkit-backdrop-filter: var(--ui-glass-blur);
    backdrop-filter: var(--ui-glass-blur);
    border-color: var(--ui-glass-border);
    box-shadow: var(--ui-glass-shadow), var(--ui-glass-highlight);
  }

  .sc-ios-kpi-grid .sc-kpi {
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(10px) saturate(1.18);
    backdrop-filter: blur(10px) saturate(1.18);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .sc-filter-pill {
    background: var(--ui-glass-chrome);
    -webkit-backdrop-filter: var(--ui-glass-blur-light);
    backdrop-filter: var(--ui-glass-blur-light);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: var(--ui-glass-highlight);
  }

  .sc-filter-pill.is-active {
    background: rgba(124, 58, 237, 0.32);
    border-color: var(--ui-accent-ring);
    box-shadow:
      var(--ui-glass-highlight),
      0 4px 20px rgba(124, 58, 237, 0.22);
  }

  .sc-ios-row__control select,
  .sc-ios-row__control input[type="text"],
  .sc-ios-row__control input[type="number"],
  .sc-ios-row__control input[type="date"],
  .sc-ios-textarea,
  .sc-daterange-host--compact .sc-form-row input[type="date"],
  .sc-units-panel__date-cell input[type="date"] {
    background: rgba(15, 17, 23, 0.42);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .ui-glass-surface,
  .sc-units-panel__toolbar.ui-glass-surface {
    background: rgba(28, 34, 48, 0.38);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
  }

  .sc-ios-banner {
    background: color-mix(in srgb, var(--ui-warning) 16%, rgba(28, 34, 48, 0.45));
    -webkit-backdrop-filter: blur(12px) saturate(1.12);
    backdrop-filter: blur(12px) saturate(1.12);
    border-color: color-mix(in srgb, var(--ui-warning) 38%, transparent);
  }

  .sc-ios-link-bar a {
    background: rgba(124, 58, 237, 0.22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: var(--ui-accent-ring);
  }

  .sc-ios-disclosure__body {
    background: rgba(28, 34, 48, 0.38);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
  }

  .sc-drawer__backdrop {
    background: rgba(6, 8, 14, 0.48);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
  }

  .sc-drawer__panel {
    background: rgba(22, 26, 36, 0.72);
    -webkit-backdrop-filter: blur(28px) saturate(1.28);
    backdrop-filter: blur(28px) saturate(1.28);
    border-left-color: rgba(255, 255, 255, 0.1);
    box-shadow: -20px 0 56px rgba(0, 0, 0, 0.4);
  }

}

/* Fallback без blur: чуть светлее поверхности */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .shell-sidebar {
    background: rgba(22, 25, 34, 0.92);
  }

  .shell-topbar {
    background: rgba(26, 31, 42, 0.92);
  }

  .sc-kpi,
  .ui-kpi,
  .sc-card,
  .ui-card,
  .sc-app-card,
  .ui-app-card {
    background: rgba(28, 34, 48, 0.88);
  }

  .staff-form-card,
  .shell-body .staff-form-card,
  .sc-setup,
  .ui-setup {
    background: rgba(28, 34, 48, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .sc-form-row input,
  .sc-form-row select,
  .sc-form-row textarea,
  .ui-form-row input,
  .ui-form-row select,
  .ui-form-row textarea {
    background: rgba(15, 17, 23, 0.85);
  }

  .shell-body table,
  .shell-body table th {
    background: rgba(28, 34, 48, 0.88);
  }

  .ui-app-hero {
    background: rgba(28, 34, 48, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ui-radius);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
  }

  dialog.sc-dialog {
    background: rgba(22, 26, 36, 0.96);
    color: var(--ui-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .staff-db-hub-card,
  .staff-db-hub-links a {
    background: var(--ui-card);
    border-color: var(--ui-border);
  }

  body.admin-ios.shell-theme:not(.popup) #header {
    background: linear-gradient(
      180deg,
      rgba(30, 35, 48, 0.97) 0%,
      rgba(22, 25, 34, 0.95) 100%
    ) !important;
  }

  body.admin-ios.shell-theme fieldset.module {
    background: rgba(28, 34, 48, 0.88);
  }

  .ui-glass-surface,
  .sc-ios-inset,
  .sc-ios-disclosure > summary,
  .sc-ios-disclosure__body,
  .ui-app-hero--service-under-apps {
    background: rgba(28, 34, 48, 0.88);
  }
}

/* ----- Services console: Apple-like toolbar & filter drawer ----- */

.sc-console-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
}

.sc-console-toolbar__text {
  flex: 1 1 16rem;
  min-width: 0;
}

/* ----- Биллинг приложений сервиса ----- */
.sc-service-billing-apps-filter {
  margin: 0;
}

.sc-service-billing-apps-filter > .sc-form-row:first-child {
  min-width: min(100%, 22rem);
}

details.sc-service-billing-slot.sc-card {
  padding: 0;
  overflow: hidden;
  margin-top: 1rem;
}

.sc-service-billing-slot__summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.85rem 1rem;
  list-style-position: outside;
  margin: 0;
  background: var(--ui-surface-elevated);
  border-bottom: 1px solid transparent;
}

details.sc-service-billing-slot[open] > .sc-service-billing-slot__summary {
  border-bottom-color: var(--ui-border);
}

.sc-service-billing-slot__summary::-webkit-details-marker {
  margin-inline-end: 0.5rem;
}

.sc-service-billing-slot__body {
  padding: 0 1rem 1rem;
}

.sc-service-billing-slot__title {
  letter-spacing: -0.02em;
}

section.sc-service-billing-slot {
  margin-top: 1.25rem;
}

.sc-service-billing-slot__heading {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ui-text);
}

.sc-console-toolbar__text .sc-title {
  margin: 0 0 0.2rem;
  font-size: clamp(1.35rem, 0.55rem + 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sc-console-toolbar__text .sc-sub {
  margin: 0;
  font-size: var(--ui-font-small);
  color: var(--ui-muted);
}

.sc-console-toolbar__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sc-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 980px;
  border: 1px solid var(--ui-border);
  background: var(--ui-fill);
  color: var(--ui-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.12s ease;
  box-shadow: var(--ui-inset-highlight);
}

.sc-filter-pill:hover {
  background: var(--ui-fill-hover);
  border-color: var(--ui-separator-strong);
}

.sc-filter-pill:active {
  transform: scale(0.98);
}

.sc-filter-pill__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 980px;
  background: var(--ui-accent-bright);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: var(--ui-inset-highlight);
}

.sc-date-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.sc-date-preset-btn {
  padding: 0.35rem 0.65rem;
  border-radius: 980px;
  border: 1px solid var(--ui-border);
  background: var(--ui-fill-subtle);
  color: var(--ui-muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  box-shadow: var(--ui-inset-highlight);
}

.sc-date-preset-btn:hover {
  color: var(--ui-text);
  background: var(--ui-fill-hover);
  border-color: var(--ui-separator-strong);
}

.sc-app-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
}

.sc-app-toggle-row .sc-date-preset-btn {
  font-size: 0.78rem;
}

.sc-drawer {
  position: fixed;
  inset: 0;
  z-index: 240;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.sc-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.sc-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.sc-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(28rem, 94vw);
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: rgba(28, 28, 30, 0.92);
  border-left: 1px solid var(--ui-separator);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: saturate(1.2) blur(28px);
  backdrop-filter: saturate(1.2) blur(28px);
  transform: translateX(104%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  outline: none;
}

.sc-drawer.is-open .sc-drawer__panel {
  transform: translateX(0);
}

.sc-drawer__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--ui-border);
}

.sc-drawer__head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.sc-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 980px;
  background: var(--ui-fill);
  color: var(--ui-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sc-drawer__close:hover {
  background: var(--ui-fill-hover);
}

.sc-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.1rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.sc-drawer__body .staff-form-card {
  margin: 0;
}

.sc-drawer__body .sc-form-row input,
.sc-drawer__body .sc-form-row select,
.sc-drawer__body .sc-form-row textarea {
  max-width: 100%;
  box-sizing: border-box;
}

.sc-units-panel {
  width: 100%;
  max-height: 0;
  opacity: 0;
  margin: 0;
  overflow: clip;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.25s ease;
}

.sc-units-panel.is-open {
  max-height: 3200px;
  opacity: 1;
  margin: 0 0 1.25rem;
  overflow: visible;
}

.sc-units-panel__inner {
  width: 100%;
  max-width: none;
  padding: 0;
  border: none;
  background: transparent;
}

.sc-units-panel__bar {
  margin: 0 0 1rem;
}

.sc-units-panel__toolbar {
  padding: 0.85rem 1rem 0.9rem;
  border-radius: var(--ui-radius);
}

.sc-units-panel__toolbar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}

.sc-units-panel__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-muted);
  flex-shrink: 0;
}

.sc-units-panel__range-preview {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ui-muted);
}

.sc-units-panel__toolbar-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
}

.sc-daterange-host--units {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.sc-units-panel__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.sc-units-panel__date-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  min-width: 0;
}

.sc-units-panel__date-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ui-muted);
}

.sc-units-panel__date-cell input[type="date"] {
  width: 8.25rem;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.32rem 0.48rem;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--ui-text);
  border-radius: var(--ui-radius-xs);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 17, 23, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sc-units-panel__date-dash {
  flex-shrink: 0;
  align-self: center;
  margin: 0 0.05rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ui-muted);
  opacity: 0.75;
}

.sc-units-panel__cal-btn {
  margin-left: 0.1rem;
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: -0.01em;
}

.sc-units-panel__cal-btn .sc-units-panel__cal-icon {
  display: block;
  flex-shrink: 0;
  opacity: 0.9;
}

.sc-units-panel__toolbar-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.sc-units-panel__toolbar-actions .sc-btn {
  padding: 0.44rem 0.9rem;
  font-size: 0.84rem;
  border-radius: 980px;
}

.sc-units-panel__warn {
  margin: -0.2rem 0 0.85rem;
  color: var(--ui-warning);
}

.sc-units-panel__empty {
  margin: 0 0 1rem;
}

.sc-units-panel__kpi {
  margin-bottom: 1.25rem;
}

.sc-units-panel__foot {
  display: flex;
  justify-content: flex-end;
  margin: -0.15rem 0 0;
}

.sc-units-panel__foot .sc-btn--ghost {
  font-size: 0.875rem;
  font-weight: 500;
}

@media (max-width: 720px) {
  .sc-units-panel__toolbar-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .sc-units-panel__range-preview {
    text-align: left;
    width: 100%;
  }

  .sc-units-panel__toolbar-body {
    flex-direction: column;
    align-items: stretch;
  }

  .sc-units-panel__toolbar-actions {
    margin-left: 0;
    justify-content: flex-end;
  }

  .sc-units-panel__dates {
    width: 100%;
  }

  .sc-units-panel__cal-btn {
    margin-left: 0;
  }
}

/* Компактный выбор дат (прочие встроенные фильтры) */
.sc-daterange-host--compact .sc-daterange-host__row {
  margin-bottom: 0.4rem;
  gap: 0.35rem 0.55rem;
}

.sc-daterange-host--compact .sc-daterange-host__preview {
  font-size: 0.75rem;
}

.sc-daterange-host--compact .sc-daterange-host__open-btn.sc-btn {
  padding: 0.28rem 0.58rem;
  font-size: 0.72rem;
  border-radius: 7px;
}

.sc-daterange-host--compact .sc-daterange-host__manual {
  grid-template-columns: repeat(2, minmax(0, 7.75rem));
  gap: 0.35rem 0.5rem;
}

.sc-daterange-host--compact .sc-daterange-host__manual .sc-form-row label {
  font-size: 0.72rem;
  margin-bottom: 0.18rem;
}

.sc-daterange-host--compact .sc-form-row input[type="date"],
.sc-daterange-host--compact .sc-form-row select {
  width: 100%;
  max-width: 7.75rem;
  padding: 0.3rem 0.45rem;
  font-size: 0.78rem;
  border-radius: 7px;
}

.sc-filter-pill.is-active {
  border-color: var(--ui-accent-ring);
  background: var(--ui-selection-strong);
  color: var(--ui-text);
}

/* ----- iOS Settings layout (services console) ----- */
.sc-ios-page {
  width: 100%;
  max-width: none;
}

.sc-console-page--full {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.sc-ctx-sidebar__catalog-nav {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.15rem 0.2rem 0;
}

.sc-ctx-sidebar__catalog-nav .shell-nav-group {
  margin: 0;
}

.sc-ctx-sidebar__catalog-nav .shell-nav__link {
  display: block;
  padding: 0.42rem 0.55rem;
  border-radius: var(--ui-radius-xs);
  font-size: 0.9rem;
}

.sc-ios-section {
  margin-bottom: 1.35rem;
}

.sc-ios-section__header {
  margin: 0 0 0.4rem;
  padding: 0 0.15rem 0 1rem;
  font-size: var(--ui-font-small);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ui-muted);
}

.sc-ios-section__footer {
  margin: 0.45rem 1rem 0;
  padding: 0 0.15rem;
  font-size: var(--ui-font-small);
  line-height: 1.4;
  color: var(--ui-muted);
}

.sc-ios-inset {
  background: var(--ui-glass-regular);
  border-radius: var(--ui-radius-sm);
  border: 0.5px solid var(--ui-glass-border);
  box-shadow: var(--ui-glass-shadow), var(--ui-glass-highlight);
  overflow: hidden;
}

.sc-ios-inset + .sc-ios-inset {
  margin-top: 0.65rem;
}

.sc-ios-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.7rem 1rem;
  border-top: 0.5px solid var(--ui-separator);
}

.sc-ios-inset > .sc-ios-row:first-child,
.sc-ios-inset > .sc-ios-status:first-child,
.sc-ios-inset > .sc-ios-link-bar:first-child,
.sc-ios-inset > .sc-ios-pad:first-child {
  border-top: none;
}

.sc-ios-row__label {
  flex: 1 1 7.5rem;
  min-width: 0;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ui-text);
}

.sc-ios-row__control {
  flex: 2 1 12rem;
  min-width: 0;
}

.sc-ios-row__control select,
.sc-ios-row__control input[type="text"],
.sc-ios-row__control input[type="number"],
.sc-ios-row__control input[type="date"],
.sc-ios-textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1.0625rem;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-fill);
  color: var(--ui-text);
}

.sc-ios-textarea {
  min-height: 5.5rem;
  resize: vertical;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.sc-ios-row__hint {
  flex: 1 1 100%;
  margin: -0.15rem 0 0;
  font-size: var(--ui-font-small);
  line-height: 1.35;
  color: var(--ui-muted);
}

.sc-ios-pad {
  padding: 0.75rem 1rem;
}

.sc-ios-banner {
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: var(--ui-radius-sm);
  font-size: 0.875rem;
  line-height: 1.4;
  background: color-mix(in srgb, var(--ui-warning) 14%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--ui-warning) 35%, transparent);
  color: var(--ui-text);
}

.sc-ios-status {
  padding: 0.85rem 1rem;
}

.sc-ios-status__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sc-ios-status__meta {
  margin: 0.35rem 0 0;
  font-size: var(--ui-font-small);
  color: var(--ui-muted);
  line-height: 1.4;
}

.sc-ios-status__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.sc-ios-link-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  border-top: 0.5px solid var(--ui-separator);
}

.sc-ios-link-bar a {
  padding: 0.4rem 0.85rem;
  border-radius: 980px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ui-accent-bright);
  background: var(--ui-selection);
  border: 1px solid var(--ui-accent-ring);
}

.sc-ios-link-bar a:hover {
  background: var(--ui-selection-strong);
}

.sc-ios-switch-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-ios-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-top: 0.5px solid var(--ui-separator);
}

.sc-ios-inset > .sc-ios-switch-list > .sc-ios-switch-row:first-child {
  border-top: none;
}

.sc-ios-switch-row__label {
  flex: 1;
  min-width: 0;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}

.sc-ios-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}

.sc-ios-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.sc-ios-switch__track {
  display: block;
  width: 3.1rem;
  height: 1.85rem;
  border-radius: 999px;
  background: var(--ui-toggle-off-bg);
  border: 0.5px solid var(--ui-toggle-off-border);
  transition: background 0.2s ease;
}

.sc-ios-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease;
}

.sc-ios-switch input:checked + .sc-ios-switch__track {
  background: var(--ui-toggle-on);
  border-color: transparent;
}

.sc-ios-switch input:checked + .sc-ios-switch__track .sc-ios-switch__thumb {
  transform: translateX(1.25rem);
}

.sc-ios-disclosure {
  margin-bottom: 1.25rem;
}

.sc-ios-disclosure > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ui-text);
  background: var(--ui-glass-regular);
  border-radius: var(--ui-radius-sm);
  border: 0.5px solid var(--ui-glass-border);
  box-shadow: var(--ui-glass-shadow), var(--ui-glass-highlight);
}

.sc-ios-disclosure > summary::-webkit-details-marker {
  display: none;
}

.sc-ios-disclosure > summary::after {
  content: "›";
  float: right;
  color: var(--ui-muted);
  font-size: 1.25rem;
  font-weight: 300;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.sc-ios-disclosure[open] > summary {
  border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
}

.sc-ios-disclosure[open] > summary::after {
  transform: rotate(-90deg);
}

.sc-ios-disclosure__body {
  padding: 0.85rem 1rem 1rem;
  background: var(--ui-glass-regular);
  border: 0.5px solid var(--ui-glass-border);
  border-top: none;
  border-radius: 0 0 var(--ui-radius-sm) var(--ui-radius-sm);
}

.sc-ios-form-actions {
  margin: 1.25rem 0 0;
  padding: 0 0.15rem;
}

.sc-ios-form-actions .sc-btn--primary {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 1.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  border-radius: var(--ui-radius-sm);
}

.sc-ios-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: 0.5rem;
  padding: 0.65rem;
}

.sc-ios-kpi-grid .sc-kpi {
  padding: 0.65rem 0.7rem;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-glass-chrome);
  border: 0.5px solid var(--ui-glass-border);
  box-shadow: var(--ui-glass-highlight);
}

.sc-ios-inset .sc-table-wrap {
  margin: 0;
}

.sc-ios-inset .sc-table {
  font-size: 0.9375rem;
}

.sc-ios-inset .sc-table thead th {
  background: transparent;
  font-size: var(--ui-font-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ui-muted);
  border-bottom: 0.5px solid var(--ui-separator-strong);
}

.sc-ios-inset .sc-table tbody td {
  border-bottom: 0.5px solid var(--ui-separator);
}

.sc-ios-inset .sc-table tbody tr:last-child td {
  border-bottom: none;
}

.sc-ios-list-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: inherit;
  border-top: 0.5px solid var(--ui-separator);
}

.sc-ios-list-row:first-child {
  border-top: none;
}

.sc-ios-list-row__body {
  flex: 1;
  min-width: 0;
}

.sc-ios-list-row__title {
  display: block;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}

.sc-ios-list-row__subtitle {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--ui-font-small);
  color: var(--ui-muted);
}

.sc-ios-chevron {
  flex-shrink: 0;
  color: var(--ui-muted);
  font-size: 1.25rem;
  font-weight: 300;
}

.sc-ios-factor-map__rows {
  padding: 0.5rem 0.65rem 0.65rem;
}

.sc-ios-factor-map__row {
  display: grid;
  grid-template-columns: 1fr 5.5rem auto;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.45rem;
}

.sc-ios-factor-map__row input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: none;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-fill);
  color: var(--ui-text);
}

.sc-ios-pre {
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  overflow: auto;
  max-height: 22rem;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-fill-subtle);
  color: var(--ui-muted);
}

.sc-coverage-table__row--ok {
  background: color-mix(in srgb, var(--ui-success) 8%, transparent);
}

.sc-coverage-table__row--gap {
  background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
}

.sc-coverage-table__row--conflict {
  background: color-mix(in srgb, var(--ui-danger) 10%, transparent);
}


body.sc-drawer-open {
  overflow: hidden;
}

.sc-dashboard-page[data-sc-drawer-host],
.ui-app-hero[data-sc-drawer-host] {
  position: relative;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .sc-drawer__panel {
    background: rgba(22, 25, 34, 0.97);
  }

  .sc-drawer__backdrop {
    background: rgba(0, 0, 0, 0.55);
  }
}

/* ----- Полноэкранный диалог выбора диапазона дат (2 месяца) ----- */

dialog.sc-drd {
  padding: 0;
  border-radius: calc(var(--ui-radius) + 4px);
  max-width: min(56rem, 98vw);
  width: 100%;
  margin: auto;
  background: color-mix(in srgb, var(--ui-surface-elevated) 94%, transparent);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.5),
    var(--ui-inset-highlight);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}

dialog.sc-drd::backdrop {
  background: rgba(0, 0, 0, 0.48);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.sc-drd__shell {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 44rem);
}

.sc-drd__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--ui-separator);
}

.sc-drd__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sc-drd__icon-btn {
  width: 2.35rem;
  height: 2.35rem;
  border: none;
  border-radius: 999px;
  background: var(--ui-fill);
  color: var(--ui-text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sc-drd__icon-btn:hover {
  background: var(--ui-fill-hover);
}

.sc-drd__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(10.5rem, 13rem) minmax(0, 1fr);
  gap: 0;
}

.sc-drd__presets {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 0.9rem;
  margin: 0;
  border-right: 1px solid var(--ui-border);
  background: var(--ui-fill-subtle);
  overflow-y: auto;
}

.sc-drd__preset {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-accent-bright);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.35;
  transition: background 0.12s ease;
}

.sc-drd__preset:hover {
  background: var(--ui-selection);
  color: var(--ui-text);
}

.sc-drd__cal-wrap {
  padding: 1rem 1rem 1.1rem;
  min-width: 0;
}

.sc-drd__months-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
}

.sc-drd__nav-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-selection-strong);
  color: var(--ui-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}

.sc-drd__nav-btn:hover {
  background: color-mix(in srgb, var(--ui-accent-bright) 30%, transparent);
}

.sc-drd__nav-btn:active {
  transform: scale(0.97);
}

.sc-drd__months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.sc-drd__month {
  min-width: 0;
}

.sc-drd__month-cap {
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  color: var(--ui-text);
}

.sc-drd__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(2.25rem, 1fr));
  gap: 0.35rem;
  width: 100%;
}

.sc-drd__dow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ui-muted);
  text-align: center;
  padding: 0.2rem 0;
}

dialog.sc-drd .sc-drd__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  aspect-ratio: 1;
  line-height: 1;
}

.sc-drd__day {
  position: relative;
  border: none;
  border-radius: 10px;
  background: var(--ui-fill-subtle);
  color: var(--ui-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.sc-drd__day:hover:not(.is-muted) {
  background: var(--ui-selection);
}

.sc-drd__day.is-muted {
  color: color-mix(in srgb, var(--ui-muted) 38%, transparent);
  background: transparent;
  cursor: default;
}

.sc-drd__day.is-today:not(.is-muted) {
  box-shadow: 0 0 0 1px var(--ui-accent-ring);
}

.sc-drd__day.is-in-range:not(.is-muted) {
  background: var(--ui-selection);
}

.sc-drd__day.is-edge:not(.is-muted) {
  background: var(--ui-accent-bright);
  color: #fff;
  font-weight: 700;
}

.sc-drd__footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--ui-separator);
  background: var(--ui-fill-subtle);
}

.sc-daterange-host {
  margin-bottom: 0;
}

.sc-daterange-host__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.55rem;
}

.sc-daterange-host__preview {
  margin: 0;
  flex: 1 1 8rem;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ui-muted);
}

.sc-daterange-host__open-btn.sc-btn {
  padding: 0.36rem 0.72rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 8px;
  flex-shrink: 0;
}

.sc-daterange-host__manual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.65rem;
  align-items: end;
}

.sc-daterange-host__manual .sc-form-row {
  margin-bottom: 0;
  min-width: 0;
}

.sc-daterange-host__manual .sc-form-row label {
  font-size: 0.78rem;
  margin-bottom: 0.22rem;
}

.sc-daterange-host .sc-form-row input,
.sc-daterange-host .sc-form-row select {
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.42rem 0.58rem;
  font-size: 0.84rem;
  border-radius: 8px;
}

@media (max-width: 720px) {
  .sc-drd__body {
    grid-template-columns: 1fr;
  }

  .sc-drd__presets {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--ui-border);
  }

  .sc-drd__preset {
    width: auto;
    flex: 1 1 auto;
    font-size: 0.78rem;
  }

  .sc-drd__months {
    grid-template-columns: 1fr;
  }

  .sc-drd__months--single .sc-drd__grid,
  .sc-drd__grid {
    grid-template-columns: repeat(7, 2.35rem);
    gap: 0.3rem;
  }

  .sc-daterange-host__manual {
    grid-template-columns: 1fr;
  }
}

.sc-badge--soft {
  font-weight: 500;
  background: var(--ui-fill);
  color: var(--ui-text);
  border: 0.5px solid var(--ui-separator);
}

.sc-apphud-page__errors {
  margin-bottom: 1rem;
}

.sc-apphud-grid {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 900px) {
  .sc-apphud-grid {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  }
}

.sc-apphud-mono {
  font-size: 0.9rem;
  word-break: break-all;
}

.sc-apphud-url-field {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  width: 100%;
}

.sc-apphud-url-field__input {
  flex: 1 1 12rem;
  min-width: 0;
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.55rem 0.65rem;
  border: none;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-fill);
  color: var(--ui-text);
}

.sc-apphud-products__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.65rem;
}

.sc-apphud-search {
  flex: 1 1 10rem;
  max-width: 16rem;
  margin: 0;
}

.sc-apphud-search input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 980px;
  background: var(--ui-fill);
  color: var(--ui-text);
}

.sc-apphud-search input:focus {
  outline: 2px solid var(--ui-accent-ring);
  outline-offset: 1px;
}

.sc-apphud-products__list {
  padding: 0;
}

.sc-apphud-product {
  border-top: 0.5px solid var(--ui-separator);
}

.sc-apphud-product:first-child {
  border-top: none;
}

.sc-apphud-product__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
}

.sc-apphud-product__summary > .sc-ios-chevron {
  align-self: center;
  flex-shrink: 0;
}

.sc-apphud-product__summary::-webkit-details-marker {
  display: none;
}

.sc-apphud-product__summary::marker {
  content: "";
}

.sc-apphud-product__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

@media (min-width: 520px) {
  .sc-apphud-product__main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
  }
}

.sc-apphud-product__code {
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  word-break: break-all;
}

.sc-apphud-product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.sc-apphud-product__kind {
  font-size: 0.75rem;
}

.sc-apphud-product[open] .sc-ios-chevron {
  transform: rotate(90deg);
}

.sc-apphud-product__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.65rem;
  padding: 0 1rem 0.85rem;
  border-top: 0.5px solid color-mix(in srgb, var(--ui-separator) 60%, transparent);
  background: color-mix(in srgb, var(--ui-fill) 40%, transparent);
}

.sc-apphud-product__form {
  flex: 1 1 100%;
  min-width: min(100%, 18rem);
}

.sc-apphud-product__fields {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0.65rem;
  border-radius: var(--ui-radius-xs);
  overflow: hidden;
  background: var(--ui-bg, #fff);
}

.sc-apphud-product__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem 0.7rem;
}

@media (max-width: 400px) {
  .sc-apphud-product__inputs {
    grid-template-columns: 1fr;
  }
}

.sc-apphud-product__active {
  margin: 0;
  border-top: 0.5px solid var(--ui-separator);
}

.sc-apphud-product__active .sc-ios-switch-row {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.sc-apphud-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.sc-apphud-field__label {
  font-size: var(--ui-font-small);
  color: var(--ui-muted);
}

.sc-apphud-field input:not([type="checkbox"]) {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: none;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-fill);
  color: var(--ui-text);
}

.sc-apphud-product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sc-apphud-product__delete-form,
.sc-apphud-product__activate-form {
  flex: 0 0 auto;
}

.sc-apphud-products__group-label {
  margin: 0;
  padding: 0.55rem 1rem 0.35rem;
  font-size: var(--ui-font-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-muted);
}

.sc-apphud-products__group-label--inactive {
  border-top: 0.5px solid var(--ui-separator);
  margin-top: 0.25rem;
  padding-top: 0.85rem;
}

.sc-apphud-products__empty {
  margin: 0;
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--ui-muted);
  font-size: var(--ui-font-small);
}

.sc-apphud-add {
  margin-top: 0.85rem;
}

.sc-apphud-product[data-sc-apphud-hidden] {
  display: none;
}

/* ===== Services console: unified Apple-style components ===== */

.shell-topnav-services .ui-app-hero {
  align-items: center;
  margin-top: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--ui-radius);
  background: var(--ui-glass-regular);
  border: 0.5px solid var(--ui-glass-border);
  box-shadow: var(--ui-glass-shadow), var(--ui-glass-highlight);
  -webkit-backdrop-filter: var(--ui-glass-blur-light);
  backdrop-filter: var(--ui-glass-blur-light);
}

.shell-topnav-services .sc-console-toolbar {
  align-items: center;
  margin-top: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--ui-radius);
  background: var(--ui-glass-regular);
  border: 0.5px solid var(--ui-glass-border);
  box-shadow: var(--ui-glass-shadow), var(--ui-glass-highlight);
  -webkit-backdrop-filter: var(--ui-glass-blur-light);
  backdrop-filter: var(--ui-glass-blur-light);
}

.shell-topnav-services .sc-console-toolbar__text .sc-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.shell-topnav-services .sc-console-toolbar__text .sc-sub {
  margin: 0.35rem 0 0;
  max-width: 720px;
}

.ui-app-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.sc-ios-link-bar--inline {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.sc-form-row--flush {
  margin: 0 !important;
}

.sc-ios-pad--actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.sc-table--compact {
  font-size: 0.88rem;
}

.sc-table--compact th,
.sc-table--compact td {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.sc-pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Native dialog */
dialog.sc-dialog {
  border: none;
  border-radius: var(--ui-radius);
  padding: 0;
  max-width: 40rem;
  width: min(40rem, calc(100vw - 2rem));
  color: var(--ui-text);
  background: var(--ui-glass-thick);
  border: 0.5px solid var(--ui-glass-border);
  box-shadow: var(--ui-glass-shadow), 0 24px 64px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  backdrop-filter: blur(28px) saturate(1.25);
}

dialog.sc-dialog--wide {
  max-width: 42rem;
  width: min(42rem, calc(100vw - 2rem));
}

dialog.sc-dialog::backdrop {
  background: rgba(6, 8, 14, 0.52);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.sc-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 0.5px solid var(--ui-separator);
}

.sc-dialog__body {
  padding: 1rem 1.25rem 1.25rem;
  max-height: min(80vh, 36rem);
  overflow-y: auto;
}

.sc-dialog__section {
  margin-top: 1.25rem;
}

.sc-dialog__section:first-child {
  margin-top: 0;
}

.sc-dialog__section h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
}

dialog.sc-dialog .sc-form-row input,
dialog.sc-dialog .sc-form-row select,
dialog.sc-dialog .sc-form-row textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--ui-fill-subtle);
  border: 0.5px solid var(--ui-separator);
  color: var(--ui-text);
}

/* Collapsible cards (Dola, prompts, и др.) */
.sc-collapsible-card,
.sc-dola-item,
.sc-prompt-item {
  border: 0.5px solid var(--ui-separator);
  border-radius: var(--ui-radius-sm);
  margin-bottom: 0.65rem;
  overflow: hidden;
  background: var(--ui-fill-subtle);
}

.sc-collapsible-card > summary,
.sc-dola-item > summary,
.sc-prompt-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.sc-prompt-item > summary {
  display: block;
}

.sc-collapsible-card > summary::-webkit-details-marker,
.sc-dola-item > summary::-webkit-details-marker,
.sc-prompt-item > summary::-webkit-details-marker {
  display: none;
}

.sc-collapsible-card > summary::marker,
.sc-dola-item > summary::marker,
.sc-prompt-item > summary::marker {
  content: "";
}

.sc-collapsible-card > summary:hover,
.sc-dola-item > summary:hover,
.sc-prompt-item > summary:hover {
  background: var(--ui-fill-hover);
}

.sc-collapsible-card__title,
.sc-dola-item__title,
.sc-prompt-item__title {
  font-weight: 700;
  flex: 1;
  min-width: 12rem;
  margin: 0;
  font-size: 1.05rem;
}

.sc-collapsible-card__meta,
.sc-dola-item__meta,
.sc-prompt-item__meta {
  font-size: 0.8rem;
  color: var(--ui-muted);
  font-family: ui-monospace, monospace;
  margin: 0.35rem 0 0;
}

.sc-dola-item__app {
  font-size: 0.78rem;
  color: var(--ui-muted);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--ui-selection);
  white-space: nowrap;
}

.sc-collapsible-card__body,
.sc-dola-item__body,
.sc-prompt-item__body {
  padding: 0 1rem 1rem;
  border-top: 0.5px solid var(--ui-separator);
}

.sc-prompt-item__desc {
  margin: 0.4rem 0 0;
  color: var(--ui-muted);
  font-size: 0.9rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Legacy sc-title pages → единый «заголовок секции» */
.shell-topnav-services .sc-console-page-header {
  margin: 0.25rem 0 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--ui-radius);
  background: var(--ui-glass-regular);
  border: 0.5px solid var(--ui-glass-border);
  box-shadow: var(--ui-glass-shadow), var(--ui-glass-highlight);
}

.shell-topnav-services .sc-console-page-header .sc-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.shell-topnav-services .sc-console-page-header .sc-sub {
  margin: 0.35rem 0 0;
  max-width: 720px;
}

/* Контекстные страницы: единый вертикальный ритм */
.shell-topnav-services--ctx-sidebar .sc-ios-page {
  margin-top: 0;
}

.shell-topnav-services .sc-card > h2:first-child,
.shell-topnav-services .sc-ios-section__header:first-child {
  margin-top: 0;
}

.sc-ios-section__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.35rem;
  padding: 0 0.15rem;
}

.sc-ios-section__toolbar .sc-ios-section__header {
  margin: 0;
  padding: 0;
  text-transform: none;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ui-text);
}

.sc-ios-section__toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.sc-ios-section__lead {
  margin: 0 0 0.85rem;
  padding: 0 0.15rem;
  color: var(--ui-muted);
  font-size: var(--ui-font-small);
  max-width: 720px;
}

dialog.sc-dialog.sc-dialog--category-order {
  max-width: 44rem;
  width: min(44rem, calc(100vw - 2rem));
}