/*
 * SavdoStast Classic Compact ERP — UI preview 1.
 *
 * This is an additive visual layer over the accepted Mobile Hotfix 2.
 * It does not alter routes, data, calculations, permissions or navigation.
 * The established mobile navigation selectors are intentionally absent.
 */

:root {
  --cc-primary: #2463d4;
  --cc-primary-hover: #1f55b8;
  --cc-primary-soft: #eaf1ff;
  --cc-sidebar: #17233a;
  --cc-sidebar-deep: #111c2e;
  --cc-text: #172033;
  --cc-muted: #687386;
  --cc-muted-2: #929bad;
  --cc-bg: #f4f6f9;
  --cc-mobile-bg: #f7f9fc;
  --cc-surface: #ffffff;
  --cc-surface-soft: #f8fafc;
  --cc-line: #e2e7ef;
  --cc-line-strong: #d4dbe6;
  --cc-green: #168a5b;
  --cc-green-soft: #e8f7f0;
  --cc-red: #cf3f4c;
  --cc-red-soft: #fcebed;
  --cc-orange: #d97916;
  --cc-orange-soft: #fff2e2;
  --cc-purple: #7851c9;
  --cc-purple-soft: #f1ebff;
  --cc-shadow: 0 1px 2px rgba(17, 24, 39, .05);
  --cc-shadow-lg: 0 14px 38px rgba(23, 32, 51, .15);
}

/* Keep one product typeface without cascading into the frozen mobile nav. */
:is(.auth-shell, .sidebar, .topbar, .content, .toast, dialog:not([data-modal-family="mobile-more"])),
:is(.auth-shell, .sidebar, .topbar, .content, .toast, dialog:not([data-modal-family="mobile-more"])) * {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* app.js supplies the semantic background inline; the overlay owns legibility. */
.toast {
  border-color: rgba(255, 255, 255, .18);
  color: #fff !important;
  font-weight: 600;
  transition: opacity .2s, transform .2s;
}

/* Rebind legacy page-local palettes to the Classic Compact semantic tokens. */
.content > .page {
  --blue: var(--primary) !important;
  --green: var(--success) !important;
  --orange: var(--warning) !important;
  --red: var(--danger) !important;
  --purple: var(--cc-purple) !important;
  --ref-blue: var(--primary) !important;
  --ref-violet: var(--purple) !important;
  --ref-green: var(--success) !important;
  --ref-orange: var(--warning) !important;
  --ref-red: var(--danger) !important;
  --unified-blue: var(--primary) !important;
  --unified-violet: var(--purple) !important;
  --unified-green: var(--success) !important;
  --unified-orange: var(--warning) !important;
  --unified-red: var(--danger) !important;
}

html[data-theme="dark"] .content > .page {
  --purple: #aa8be7 !important;
}

#crmPage .crm-column[data-status="todo"] {
  --crm-accent: var(--primary) !important;
}

#crmPage .crm-column[data-status="in_progress"] {
  --crm-accent: var(--warning) !important;
}

#crmPage .crm-column[data-status="review"] {
  --crm-accent: var(--unified-violet) !important;
}

#crmPage .crm-column[data-status="done"] {
  --crm-accent: var(--success) !important;
}

#crmPage .task-calendar-shell {
  --calendar-purchases: var(--primary) !important;
  --calendar-content: var(--unified-violet) !important;
  --calendar-advertising: var(--warning) !important;
  --calendar-finance: var(--success) !important;
  --calendar-logistics: var(--ref-cyan) !important;
}

#financePage .finance-summary-card.profit {
  --summary-tone: var(--success) !important;
}

/* v10.49: оба ДРР помещаются рядом с четырьмя базовыми карточками. */
#financePage .finance-summary-grid,
.finance-reference-modal .finance-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  #financePage .finance-summary-grid,
  .finance-reference-modal .finance-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  #financePage .finance-summary-grid,
  .finance-reference-modal .finance-summary-grid {
    grid-template-columns: 1fr;
  }
}

.ozon-finance-tree .finance-payout-total b {
  color: var(--success) !important;
}

/* Standalone 404/500 pages use the same restrained ERP visual language. */
.error-shell {
  --bg: var(--cc-bg);
  --card: var(--cc-surface);
  --text: var(--cc-text);
  --muted: var(--cc-muted);
  --t-light: var(--cc-muted-2);
  --line: var(--cc-line);
  --primary: var(--cc-primary);
  --primary-dark: var(--cc-primary-hover);
  --primary-soft: var(--cc-primary-soft);
  --purple: var(--cc-purple);
  --shadow-lg: var(--cc-shadow-lg);
  padding: 20px;
  background: var(--cc-bg);
  font-family: Arial, Helvetica, sans-serif;
}

html[data-theme="dark"] .error-shell {
  --bg: #101724;
  --card: #182234;
  --text: #f4f7fb;
  --muted: #a8b3c5;
  --t-light: #7f8da5;
  --line: #2b3950;
  --primary: #6f9df0;
  --primary-dark: #8aaff2;
  --primary-soft: rgba(79, 133, 226, .17);
  --purple: #aa8be7;
  --shadow-lg: 0 14px 38px rgba(0, 0, 0, .28);
  background: #101724;
}

.error-card {
  max-width: 560px;
  padding: 34px;
  border-radius: 10px;
  box-shadow: var(--cc-shadow);
}

html[data-theme="dark"] .error-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}

.error-eyebrow,
.error-code,
.error-title {
  font-family: Arial, Helvetica, sans-serif;
}

.error-code {
  margin-bottom: -8px;
  color: var(--primary);
  background: none;
  font-size: clamp(76px, 15vw, 104px);
}

.error-title {
  font-size: 24px;
}

.error-actions .btn {
  min-height: 36px;
  border-radius: 7px;
}

@media (max-width: 600px) {
  .error-shell {
    padding: 12px;
  }

  .error-card {
    padding: 28px 18px;
    border-radius: 12px;
  }

  .error-actions {
    flex-direction: column;
  }

  .error-actions .btn {
    min-height: 44px;
  }
}

@media (min-width: 861px) {
  body,
  button,
  input,
  select,
  textarea {
    font-family: Arial, Helvetica, sans-serif;
  }

  body {
    text-rendering: optimizeLegibility;
  }

  :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cc-primary) 30%, transparent);
    outline-offset: 2px;
  }

  :root {
    --sidebar-width: 236px;
    --sidebar-compact: 72px;
    --topbar-height: 58px;
    --bg: var(--cc-bg);
    --bg-body: var(--cc-bg);
    --bg-card: var(--cc-surface);
    --bg-surface: var(--cc-surface);
    --bg-surface-secondary: var(--cc-surface-soft);
    --bg-muted: var(--cc-surface-soft);
    --bg-hover: #f0f4fa;
    --bg-sidebar: var(--cc-sidebar);
    --card: var(--cc-surface);
    --card-soft: var(--cc-surface-soft);
    --text: var(--cc-text);
    --t-base: var(--cc-text);
    --muted: var(--cc-muted);
    --t-muted: var(--cc-muted);
    --t-light: var(--cc-muted-2);
    --line: var(--cc-line);
    --border: var(--cc-line);
    --border-soft: #edf0f5;
    --primary: var(--cc-primary);
    --primary-dark: var(--cc-primary-hover);
    --primary-dk: var(--cc-primary-hover);
    --primary-soft: var(--cc-primary-soft);
    --primary-lt: var(--cc-primary-soft);
    --primary-ring: rgba(36, 99, 212, .15);
    --blue: var(--cc-primary);
    --green: var(--cc-green);
    --orange: var(--cc-orange);
    --red: var(--cc-red);
    --purple: var(--cc-purple);
    --success: var(--cc-green);
    --success-soft: var(--cc-green-soft);
    --danger: var(--cc-red);
    --danger-soft: var(--cc-red-soft);
    --warning: var(--cc-orange);
    --warning-soft: var(--cc-orange-soft);
    --info: var(--cc-primary);
    --info-soft: var(--cc-primary-soft);
    --shadow-card: var(--cc-shadow);
    --shadow-sm: 0 4px 12px rgba(23, 32, 51, .08);
    --shadow-lg: var(--cc-shadow-lg);
    --radius: 8px;
    --radius-sm: 6px;
    --ref-blue: var(--cc-primary);
    --ref-violet: var(--cc-purple);
    --ref-green: var(--cc-green);
    --ref-orange: var(--cc-orange);
    --ref-red: var(--cc-red);
    --ref-cyan: #1b8ca5;
    --ref-text: var(--cc-text);
    --ref-muted: var(--cc-muted);
    --ref-line: var(--cc-line);
    --ref-soft: var(--cc-surface-soft);
    --ref-card: var(--cc-surface);
    --ref-shadow: var(--cc-shadow);
    --unified-blue: var(--cc-primary);
    --unified-violet: var(--cc-purple);
    --unified-green: var(--cc-green);
    --unified-orange: var(--cc-orange);
    --unified-red: var(--cc-red);
    --unified-cyan: #1b8ca5;
    --unified-text: var(--cc-text);
    --unified-muted: var(--cc-muted);
    --unified-line: var(--cc-line);
    --unified-soft: var(--cc-surface-soft);
    --unified-card: var(--cc-surface);
    --unified-shadow: var(--cc-shadow);
  }

  html[data-theme="dark"] {
    --cc-shadow: 0 1px 2px rgba(0, 0, 0, .22);
    --cc-shadow-lg: 0 14px 38px rgba(0, 0, 0, .28);
    --bg: #101724;
    --bg-body: #101724;
    --bg-card: #182234;
    --bg-surface: #182234;
    --bg-surface-secondary: #1d293d;
    --bg-muted: #1d293d;
    --bg-hover: #243149;
    --bg-sidebar: #0d1625;
    --card: #182234;
    --card-soft: #1d293d;
    --text: #f4f7fb;
    --t-base: #f4f7fb;
    --muted: #a8b3c5;
    --t-muted: #a8b3c5;
    --t-light: #7f8da5;
    --line: #2b3950;
    --border: #2b3950;
    --border-soft: #233149;
    --primary: #6f9df0;
    --primary-dark: #8aaff2;
    --primary-dk: #5a89dc;
    --primary-soft: rgba(79, 133, 226, .17);
    --primary-lt: rgba(79, 133, 226, .17);
    --primary-ring: rgba(111, 157, 240, .22);
    --success: #51c48e;
    --success-soft: rgba(81, 196, 142, .14);
    --danger: #f07b86;
    --danger-soft: rgba(240, 123, 134, .14);
    --warning: #efaa5c;
    --warning-soft: rgba(239, 170, 92, .14);
    --info: #6f9df0;
    --info-soft: rgba(111, 157, 240, .15);
    --ref-blue: #6f9df0;
    --ref-violet: #aa8be7;
    --ref-green: #51c48e;
    --ref-orange: #efaa5c;
    --ref-red: #f07b86;
    --ref-cyan: #61bdd1;
    --ref-text: #f4f7fb;
    --ref-muted: #a8b3c5;
    --ref-line: #2b3950;
    --ref-soft: #141e2e;
    --ref-card: #182234;
    --ref-shadow: 0 1px 2px rgba(0, 0, 0, .22);
    --unified-blue: #6f9df0;
    --unified-violet: #aa8be7;
    --unified-green: #51c48e;
    --unified-orange: #efaa5c;
    --unified-red: #f07b86;
    --unified-cyan: #61bdd1;
    --unified-text: #f4f7fb;
    --unified-muted: #a8b3c5;
    --unified-line: #2b3950;
    --unified-soft: #141e2e;
    --unified-card: #182234;
    --unified-shadow: 0 1px 2px rgba(0, 0, 0, .22);
  }

  .shell,
  .app-shell,
  .app-workspace,
  .main,
  .content {
    background: var(--bg);
  }

  .sidebar {
    width: 236px;
    padding: 0;
    border-right: 1px solid #25324a;
    background: var(--cc-sidebar);
    box-shadow: none;
  }

  html[data-theme="dark"] .sidebar {
    border-right-color: #223049;
    background: #0d1625;
  }

  .brand {
    height: 58px;
    padding: 0 14px;
    gap: 10px;
    border-bottom: 1px solid rgba(226, 231, 239, .12);
    background: var(--cc-sidebar-deep);
    color: #fff;
  }

  .brand-logo {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 8px;
    background: var(--cc-primary);
    box-shadow: none;
  }

  .brand-logo svg {
    width: 21px;
    height: 21px;
  }

  .brand-name {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    letter-spacing: -.01em;
  }

  .brand-tag {
    margin-top: 2px;
    color: #8f9bb0;
    font-size: 8px;
    letter-spacing: .08em;
  }

  .sidebar-toggle {
    border-radius: 6px;
    color: #91a0b8;
  }

  .sidebar-toggle:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
  }

  .sidebar-scroll {
    padding: 13px 10px 10px;
    scrollbar-color: #35445f transparent;
  }

  .nav-section {
    gap: 2px;
    margin-bottom: 14px;
  }

  .nav-label {
    padding: 8px 10px 5px;
    color: #7f8ca3;
    font-size: 9px;
    letter-spacing: .09em;
  }

  .nav-link.nav-item {
    min-height: 36px;
    padding: 7px 9px;
    gap: 10px;
    border-radius: 6px;
    color: #b8c1d0;
    transition: background .15s ease, color .15s ease;
  }

  .nav-link.nav-item > svg {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }

  .nav-link.nav-item > span {
    font-size: 12px;
  }

  .nav-link.nav-item:hover {
    transform: none;
    background: rgba(255, 255, 255, .07);
    color: #fff;
  }

  .nav-link.nav-item.active {
    background: rgba(72, 128, 225, .2);
    color: #eef4ff;
  }

  .nav-link.nav-item.active::after {
    top: 5px;
    bottom: 5px;
    left: -10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #5e96f1;
  }

  .nav-finance-toggle {
    color: #8390a6;
  }

  .nav-finance-toggle:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
  }

  .nav-submenu {
    margin-left: 25px;
    border-left-color: rgba(226, 231, 239, .16);
  }

  .nav-submenu button {
    color: #9da8ba;
  }

  .nav-submenu button:hover,
  .nav-submenu button.active {
    background: rgba(72, 128, 225, .18);
    color: #eaf1ff;
  }

  .nav-badge {
    border-radius: 5px;
  }

  .sidebar-footer {
    padding: 9px 10px;
    border-top-color: rgba(226, 231, 239, .12);
    background: var(--cc-sidebar-deep);
  }

  .workspace {
    padding: 7px;
    border-radius: 7px;
    color: #eef3fb;
  }

  .workspace:hover {
    background: rgba(255, 255, 255, .07);
  }

  .workspace-avatar,
  .account-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 7px;
    background: var(--cc-primary);
  }

  .workspace-role,
  .workspace-chev {
    color: #8f9bb0;
  }

  .topbar {
    height: 58px;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--card) 97%, transparent);
    box-shadow: var(--cc-shadow);
    backdrop-filter: blur(12px);
  }

  .crumbs {
    gap: 7px;
    font-size: 11px;
  }

  .topbar-actions {
    gap: 6px;
  }

  body header.topbar > .topbar-actions {
    display: flex;
  }

  .topbar-store {
    min-width: 190px;
  }

  .topbar-store .select,
  .topbar :is(input, select) {
    min-height: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 11px;
  }

  .topbar .icon-btn,
  .topbar .icon-button,
  .topbar .hamburger,
  .profile-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 6px;
  }

  .topbar .button,
  .topbar .btn {
    min-height: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 11px;
  }

  .profile-button {
    width: auto;
    padding: 2px 7px 2px 2px;
  }

  .profile-button > span {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: var(--cc-primary);
  }

  .content,
  body .app-workspace > .content {
    padding: 20px 20px 28px;
  }

  .content > .page {
    max-width: 1680px;
  }

  /* SavdoStast v10.46.1 — orders desktop flow layout.
   * The base orders view renders its heading and period control outside the
   * normal flow.  Classic Compact used to collapse the heading margin to 4px,
   * which let the first KPI row slide under the description and calendar.
   * Keep all three elements in explicit grid rows on desktop. */
  .content #financePage.reference-orders-mode {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 7px;
    align-items: start;
  }

  .content #financePage.reference-orders-mode::before {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }

  .content #financePage.reference-orders-mode::after {
    grid-column: 1;
    grid-row: 2;
    position: static;
    margin: 0;
    line-height: 1.35;
  }

  .content #financePage.reference-orders-mode > .finance-toolbar {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: static;
    align-self: start;
    max-width: min(360px, 32vw);
  }

  .content #financePage.reference-orders-mode > #financeReportContent {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    margin-top: 11px;
  }

  .content #financePage.reference-orders-mode .reference-order-metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .content #financePage.reference-orders-mode .reference-order-metric {
    min-width: 0;
  }

  @media (max-width: 1100px) {
    .content #financePage.reference-orders-mode .reference-order-metrics {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 940px) {
    .content #financePage.reference-orders-mode .reference-order-metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .page,
  .reference-page,
  .unified-standard-page:not(.reference-orders-mode) {
    font-size: 12px;
  }

  .hero,
  .page-intro,
  .reference-page-head,
  .unified-standard-page:not(.reference-orders-mode) > .hero,
  .unified-standard-page:not(.reference-orders-mode) > .page-intro,
  .unified-standard-page:not(.reference-orders-mode) > .operations-heading,
  .unified-standard-page:not(.reference-orders-mode) > .profile-hero {
    min-height: auto;
    margin-bottom: 14px;
    align-items: center;
    gap: 16px;
  }

  .hero h1,
  .page-intro h1,
  .reference-page-head h1,
  .unified-standard-page:not(.reference-orders-mode) > .hero h1,
  .unified-standard-page:not(.reference-orders-mode) > .page-intro h1,
  .unified-standard-page:not(.reference-orders-mode) > .operations-heading h1,
  .unified-standard-page:not(.reference-orders-mode) > .profile-hero h1,
  #financePage.reference-orders-mode::before {
    margin: 0 0 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.01em;
  }

  .hero p,
  .page-intro p,
  .reference-page-head p,
  .unified-standard-page:not(.reference-orders-mode) > :is(.hero, .page-intro, .operations-heading, .profile-hero) p {
    font-size: 11px;
  }

  .eyebrow,
  .panel-kicker,
  .reference-section-kicker {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
  }

  .card,
  .panel,
  .reference-panel,
  .reference-kpi-card,
  .reference-product-metric,
  .reference-order-metric,
  .reference-expense-metric,
  .metric-card,
  .report-metric,
  .beta-card,
  .guide-card,
  .billing-plan,
  .assistant-workspace,
  .feedback-workspace,
  .unified-standard-page:not(.reference-orders-mode) :is(.panel, .card, .assistant-workspace, .feedback-workspace, .billing-plan, .beta-card, .guide-card) {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--cc-shadow);
  }

  /* Page-specific legacy selectors used IDs; this is the desktop card contract. */
  body .content > .page :is(
    .card,
    .panel,
    .reference-panel,
    .reference-kpi-card,
    .reference-product-metric,
    .reference-order-metric,
    .reference-expense-metric,
    .metric-card,
    .report-metric,
    .beta-card,
    .guide-card,
    .billing-plan,
    .assistant-workspace,
    .feedback-workspace,
    .period-card,
    .promotion-metrics > article,
    .promotion-toolbar,
    .promotion-rule-note,
    .promotion-table-scroll
  ) {
    border-radius: 8px !important;
  }

  body .content #promotionsPage :is(.promotion-toolbar, .promotion-rule-note, .promotion-table-scroll) {
    box-shadow: var(--cc-shadow) !important;
  }

  body .content #promotionsPage .promotion-metrics > article {
    box-shadow: inset 0 3px var(--metric-accent, var(--primary)), var(--cc-shadow) !important;
  }

  /* Normalize legacy feature workspaces that do not use the shared card class. */
  body .content :is(
    .sync-progress,
    .order-feed-card,
    .abc-card,
    .account-trial-banner,
    #feedbackPage .feedback-mail-shell,
    #feedbackPage .reader-card,
    #crmPage .crm-toolbar,
    #crmPage .crm-column,
    #crmPage .task-card,
    #crmPage .task-calendar-shell,
    #markingPage .marking-workflow,
    #markingPage .marking-subnav,
    #settingsPage .tax-country-card,
    #adminPage .admin-ai-config
  ) {
    border-radius: 8px !important;
  }

  body .content :is(
    .sync-progress,
    .order-feed-card,
    .abc-card,
    .account-trial-banner,
    #feedbackPage .feedback-mail-shell,
    #feedbackPage .reader-card,
    #crmPage .crm-toolbar,
    #crmPage .crm-column,
    #crmPage .task-card,
    #crmPage .task-calendar-shell,
    #markingPage .marking-workflow,
    #markingPage .marking-subnav,
    #settingsPage .tax-country-card,
    #adminPage .admin-ai-config
  ) {
    box-shadow: var(--cc-shadow) !important;
  }

  body .content :is(.beta-metric, #billingPage .billing-plan) {
    box-shadow: inset 0 3px var(--metric-accent, var(--primary)), var(--cc-shadow) !important;
  }

  dialog:not([data-modal-family="mobile-more"]) :is(
    .finance-summary-card,
    .finance-payout-total,
    .finance-management-block
  ) {
    border-radius: 8px !important;
    box-shadow: var(--cc-shadow) !important;
  }

  .panel-heading,
  .card-head,
  .report-head,
  .reference-panel-title,
  .order-feed-heading,
  .admin-detail-heading,
  .unified-standard-page:not(.reference-orders-mode) :is(.panel-heading, .card-head, .report-head, .section-heading) {
    min-height: 0;
    padding: 12px 14px 9px;
    gap: 12px;
  }

  .panel-heading h2,
  .panel-heading h3,
  .report-head h2,
  .reference-panel-title h2,
  .section-heading h2,
  .section-heading h3,
  .unified-standard-page:not(.reference-orders-mode) :is(.panel-heading, .section-heading) :is(h2, h3) {
    margin: 2px 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0;
  }

  .panel-heading p,
  .report-head p,
  .reference-panel-title p,
  .reference-panel-title span,
  .section-heading p {
    font-size: 10px;
  }

  .section-heading {
    margin: 18px 0 9px;
  }

  .btn,
  .button,
  .reference-control,
  .reference-primary,
  .reference-gradient,
  .unified-standard-page:not(.reference-orders-mode) :is(.button, .btn, button.reference-control) {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 11px;
    box-shadow: none;
  }

  .btn:hover,
  .button:hover,
  .reference-control:hover,
  .unified-standard-page:not(.reference-orders-mode) :is(.button, .btn):hover {
    transform: none;
    box-shadow: 0 3px 10px rgba(23, 32, 51, .08);
  }

  .reference-gradient {
    border: 1px solid var(--primary);
    background: var(--primary);
  }

  .unified-standard-page:not(.reference-orders-mode) .button.primary,
  .unified-standard-page:not(.reference-orders-mode) .btn--primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: none;
  }

  .unified-standard-page:not(.reference-orders-mode) .button.primary:hover,
  .unified-standard-page:not(.reference-orders-mode) .btn--primary:hover {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
  }

  :where(input, select, textarea, .select, .search, .date-control) {
    border-radius: 7px;
  }

  .content :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select) {
    min-height: 38px;
    padding: 0 10px;
    font-size: 11px;
  }

  .content textarea {
    min-height: 84px;
    padding: 10px;
    font-size: 11px;
  }

  .toolbar,
  [class$="-toolbar"],
  .data-toolbar,
  .table-tools,
  .crm-toolbar,
  .rfbs-toolbar,
  .unified-standard-page:not(.reference-orders-mode) :is(.toolbar, .data-toolbar, .table-tools, .crm-toolbar, .rfbs-toolbar) {
    margin-bottom: 12px;
    padding: 9px 10px;
    gap: 8px;
    border-radius: 8px;
    box-shadow: var(--cc-shadow);
  }

  .preset-list,
  .report-tabs,
  .feedback-tabs,
  .scheme-switch,
  .transit-period-switch,
  .marking-subnav,
  .rfbs-nav,
  .crm-tabs,
  .admin-subnav,
  .accrual-view-tabs,
  .beta-feature-nav,
  .reference-tabs,
  .reference-order-tabs {
    padding: 0;
    gap: 18px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  :is(.preset-list, .report-tabs, .feedback-tabs, .scheme-switch, .transit-period-switch, .marking-subnav, .rfbs-nav, .crm-tabs, .admin-subnav, .accrual-view-tabs, .beta-feature-nav, .reference-tabs, .reference-order-tabs) button {
    min-height: 34px;
    padding: 0 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-size: 11px;
  }

  :is(.preset-list, .report-tabs, .feedback-tabs, .scheme-switch, .transit-period-switch, .marking-subnav, .rfbs-nav, .crm-tabs, .admin-subnav, .accrual-view-tabs, .beta-feature-nav, .reference-tabs, .reference-order-tabs) button:hover,
  :is(.preset-list, .report-tabs, .feedback-tabs, .scheme-switch, .transit-period-switch, .marking-subnav, .rfbs-nav, .crm-tabs, .admin-subnav, .accrual-view-tabs, .beta-feature-nav, .reference-tabs, .reference-order-tabs) button.active {
    border-bottom-color: var(--primary);
    background: transparent;
    box-shadow: none;
    color: var(--primary);
    transform: none;
  }

  .reference-kpi-grid,
  .reference-product-metrics,
  .reference-order-metrics,
  .reference-expense-metrics,
  .metric-grid,
  .kpi-grid,
  .report-metric-grid,
  .admin-summary-grid,
  .crm-summary-grid {
    gap: 10px;
    margin-bottom: 10px;
  }

  .reference-kpi-card,
  .reference-product-metric,
  .reference-order-metric,
  .reference-expense-metric,
  .metric-card,
  .report-metric,
  .admin-summary-card,
  .crm-stat-card {
    min-height: 104px;
    padding: 13px 14px;
    overflow: hidden;
  }

  .unified-standard-page:not(.reference-orders-mode) :is(
    .metric-grid,
    .kpi-grid,
    .report-metric-grid,
    .rfbs-summary,
    .fulfillment-summary,
    .knowledge-stats,
    .marking-metrics,
    .order-map-metrics,
    .transit-activity-metrics,
    .admin-summary-grid,
    .crm-summary-grid
  ) > * {
    min-height: 104px;
    padding: 13px 14px;
    border-radius: 8px;
    box-shadow: inset 0 3px var(--metric-accent, var(--primary)), var(--cc-shadow);
  }

  #financePage.unified-standard-page:not(.reference-orders-mode) .period-card {
    min-height: 156px;
    border-radius: 8px;
    box-shadow: var(--cc-shadow);
  }

  .reference-kpi-card:hover,
  .reference-product-metric:hover,
  .reference-order-metric:hover,
  .reference-expense-metric:hover,
  .metric-card:hover,
  .report-metric:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(23, 32, 51, .07);
  }

  .reference-kpi-icon,
  .reference-product-metric i,
  .reference-order-metric i,
  .reference-expense-metric i {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 8px;
    box-shadow: none;
  }

  .reference-kpi-icon {
    background: color-mix(in srgb, var(--kpi-color) 12%, var(--card));
    color: var(--kpi-color);
  }

  .reference-kpi-icon svg {
    width: 19px;
    height: 19px;
  }

  .reference-kpi-card strong,
  .reference-product-metric b,
  .reference-order-metric b,
  .reference-expense-metric b,
  .metric-card strong,
  .metric-card b,
  .report-metric b,
  .admin-summary-card b,
  .crm-stat-card b {
    margin-top: 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 23px;
    line-height: 1.1;
    letter-spacing: -.01em;
  }

  .reference-kpi-compare {
    margin-top: 9px;
  }

  .reference-kpi-compare b,
  .status,
  .badge,
  .reference-status,
  .promotion-status,
  .scheme-badge,
  .transit-status-badge {
    border-radius: 5px;
  }

  .reference-dashboard-grid,
  .reference-products-layout,
  .reference-expense-layout,
  .reference-order-analytics,
  .dashboard-feature-grid,
  .knowledge-layout {
    gap: 10px;
  }

  .reference-dashboard-main,
  .reference-dashboard-side,
  .reference-product-side {
    gap: 10px;
  }

  .reference-panel-title {
    min-height: 46px;
  }

  .reference-profit-layout,
  .reference-profit-footer,
  .reference-ranked-list,
  .reference-budget-list,
  .reference-upcoming-list {
    padding-right: 14px;
    padding-left: 14px;
  }

  .reference-profit-footer > div,
  .recommendation-card,
  .reference-issue i,
  .reference-calendar-event,
  .reference-cash-warning,
  .reference-order-status,
  .reference-order-days {
    border-radius: 7px;
  }

  .table-scroll,
  .ozon-details-table-wrap,
  .reference-product-table-panel {
    border-radius: 8px;
    scrollbar-color: var(--line-strong, var(--line)) transparent;
  }

  table {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  th {
    height: 40px;
    padding: 8px 10px;
    background: var(--bg-muted);
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
  }

  td {
    min-height: 44px;
    padding: 9px 10px;
    border-bottom-color: var(--line);
  }

  tbody tr:hover {
    background: var(--bg-muted);
  }

  .dd-menu,
  dialog,
  .savdo-modal > .savdo-modal__surface,
  .reference-dialog-card,
  .dialog-card,
  .billing-dialog-card,
  .widget-dialog-card,
  .finance-dialog {
    border-radius: 8px;
    box-shadow: var(--cc-shadow-lg);
  }

  .dd-menu {
    border-radius: 8px;
  }

  .dialog-close,
  .finance-dialog-close {
    border-radius: 6px;
  }

  .savdo-modal__header,
  .savdo-modal__footer,
  .dialog-card > header,
  .billing-dialog-card > header,
  .widget-dialog-head {
    padding: 14px 16px;
  }

  .auth-shell {
    --primary: var(--cc-primary);
    --primary-dark: var(--cc-primary-hover);
    --primary-soft: var(--cc-primary-soft);
    --primary-ring: rgba(36, 99, 212, .15);
    --text: var(--cc-text);
    --muted: var(--cc-muted);
    --t-light: var(--cc-muted-2);
    --line: var(--cc-line);
    --card: var(--cc-surface);
    --bg: var(--cc-bg);
    background: var(--cc-bg);
  }

  .auth-aside {
    background: var(--cc-sidebar);
  }

  .auth-aside::before,
  .auth-aside::after,
  .auth-card.login-card::before {
    display: none;
  }

  .auth-brand .logo,
  .auth-quote-author .av {
    border-radius: 8px;
    background: var(--cc-primary);
    box-shadow: none;
  }

  .auth-card.login-card {
    border: 1px solid var(--cc-line);
    border-radius: 8px;
    background: var(--cc-surface);
    box-shadow: 0 12px 32px rgba(23, 32, 51, .1);
  }

  .auth-card h2,
  .auth-state-card h3 {
    font-family: Arial, Helvetica, sans-serif;
  }

  .auth-tabs,
  .registration-access-note,
  .auth-input-control,
  .auth-state-icon {
    border-radius: 7px;
  }
}

@media (max-width: 860px) {
  .toast {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: 12px;
    max-width: none;
  }

  .content,
  .content button,
  .content input,
  .content select,
  .content textarea,
  .topbar,
  .topbar button,
  .topbar input,
  .topbar select,
  .auth-shell,
  .auth-shell button,
  .auth-shell input,
  .auth-shell select,
  .auth-shell textarea,
  dialog:not([data-modal-family="mobile-more"]),
  dialog:not([data-modal-family="mobile-more"]) button,
  dialog:not([data-modal-family="mobile-more"]) input,
  dialog:not([data-modal-family="mobile-more"]) select,
  dialog:not([data-modal-family="mobile-more"]) textarea {
    font-family: Arial, Helvetica, sans-serif;
  }

  .content :where(button, a, input, select, textarea, [tabindex]):focus-visible,
  .topbar :where(button, a, input, select, textarea, [tabindex]):focus-visible,
  .auth-shell :where(button, a, input, select, textarea, [tabindex]):focus-visible,
  dialog:not([data-modal-family="mobile-more"]) :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cc-primary) 30%, transparent);
    outline-offset: 2px;
  }

  .content {
    --primary: var(--cc-primary);
    --primary-dark: var(--cc-primary-hover);
    --primary-soft: var(--cc-primary-soft);
    --primary-ring: rgba(36, 99, 212, .15);
    --text: var(--cc-text);
    --t-base: var(--cc-text);
    --muted: var(--cc-muted);
    --t-muted: var(--cc-muted);
    --t-light: var(--cc-muted-2);
    --line: var(--cc-line);
    --border: var(--cc-line);
    --card: var(--cc-surface);
    --card-soft: var(--cc-surface-soft);
    --bg: var(--cc-mobile-bg);
    --bg-muted: var(--cc-surface-soft);
    --success: var(--cc-green);
    --danger: var(--cc-red);
    --warning: var(--cc-orange);
    --ref-blue: var(--cc-primary);
    --ref-violet: var(--cc-purple);
    --ref-green: var(--cc-green);
    --ref-orange: var(--cc-orange);
    --ref-red: var(--cc-red);
    --ref-text: var(--cc-text);
    --ref-muted: var(--cc-muted);
    --ref-line: var(--cc-line);
    --ref-soft: var(--cc-surface-soft);
    --ref-card: var(--cc-surface);
    --ref-shadow: var(--cc-shadow);
    --unified-blue: var(--cc-primary);
    --unified-violet: var(--cc-purple);
    --unified-green: var(--cc-green);
    --unified-orange: var(--cc-orange);
    --unified-red: var(--cc-red);
    --unified-text: var(--cc-text);
    --unified-muted: var(--cc-muted);
    --unified-line: var(--cc-line);
    --unified-soft: var(--cc-surface-soft);
    --unified-card: var(--cc-surface);
    --unified-shadow: var(--cc-shadow);
    background: var(--cc-mobile-bg);
  }

  html[data-theme="dark"] .content {
    --cc-shadow: 0 1px 2px rgba(0, 0, 0, .22);
    --cc-shadow-lg: 0 14px 38px rgba(0, 0, 0, .28);
    --primary: #6f9df0;
    --primary-dark: #8aaff2;
    --primary-soft: rgba(111, 157, 240, .16);
    --primary-ring: rgba(111, 157, 240, .22);
    --text: #f4f7fb;
    --t-base: #f4f7fb;
    --muted: #a8b3c5;
    --t-muted: #a8b3c5;
    --t-light: #7f8da5;
    --line: #2b3950;
    --border: #2b3950;
    --card: #182234;
    --card-soft: #1d293d;
    --bg: #101724;
    --bg-muted: #1d293d;
    --success: #51c48e;
    --danger: #f07b86;
    --warning: #efaa5c;
    --ref-blue: #6f9df0;
    --ref-violet: #aa8be7;
    --ref-green: #51c48e;
    --ref-orange: #efaa5c;
    --ref-red: #f07b86;
    --ref-text: #f4f7fb;
    --ref-muted: #a8b3c5;
    --ref-line: #2b3950;
    --ref-soft: #141e2e;
    --ref-card: #182234;
    --ref-shadow: 0 1px 2px rgba(0, 0, 0, .22);
    --unified-blue: #6f9df0;
    --unified-violet: #aa8be7;
    --unified-green: #51c48e;
    --unified-orange: #efaa5c;
    --unified-red: #f07b86;
    --unified-text: #f4f7fb;
    --unified-muted: #a8b3c5;
    --unified-line: #2b3950;
    --unified-soft: #141e2e;
    --unified-card: #182234;
    --unified-shadow: 0 1px 2px rgba(0, 0, 0, .22);
    background: #101724;
  }

  .topbar {
    border-bottom-color: var(--cc-line);
    background: color-mix(in srgb, var(--cc-surface) 97%, transparent);
    box-shadow: var(--cc-shadow);
  }

  html[data-theme="dark"] .topbar {
    border-bottom-color: #2b3950;
    background: color-mix(in srgb, #182234 97%, transparent);
  }

  .topbar :is(.select, .icon-btn, .button) {
    border-radius: 8px;
  }

  .content .reference-page-head,
  .content :is(.hero, .page-intro, .operations-heading, .profile-hero) {
    margin-bottom: 12px;
  }

  .content .reference-page-head h1,
  .content :is(.hero, .page-intro, .operations-heading, .profile-hero) h1,
  .content #financePage.reference-orders-mode::before {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 23px;
    letter-spacing: -.01em;
  }

  .content :is(.reference-panel, .panel, .card, .reference-kpi-card, .reference-product-metric, .reference-order-metric, .reference-expense-metric, .metric-card, .report-metric, .recommendation-card, .guide-card, .billing-plan) {
    border-color: var(--line);
    border-radius: 10px;
    background: var(--card);
    box-shadow: var(--cc-shadow);
  }

  .content :is(
    .mobile-order-card,
    .mobile-order-summary article,
    .mobile-order-empty,
    #settingsPage .display-settings,
    #settingsPage .settings-form,
    #feedbackPage .feedback-mail-shell,
    #feedbackPage .reader-card,
    #crmPage .crm-column,
    #crmPage .task-card,
    #settingsPage .tax-country-card
  ) {
    border-radius: 10px !important;
    box-shadow: var(--cc-shadow) !important;
  }

  .content #financePage :is(.period-card, .metric-card),
  .content #promotionsPage :is(
    .promotion-metrics > article,
    .promotion-toolbar,
    .promotion-rule-note,
    .promotion-table-scroll
  ),
  .content #crmPage > :is(.operations-tabs, .crm-toolbar),
  .content #settingsPage .tax-country-code,
  dialog:not([data-modal-family="mobile-more"]) :is(
    .finance-summary-card,
    .finance-payout-total,
    .finance-management-block
  ) {
    border-radius: 10px !important;
    box-shadow: var(--cc-shadow) !important;
  }

  .content #promotionsPage .promotion-metrics > article {
    box-shadow: inset 0 3px var(--metric-accent, var(--primary)), var(--cc-shadow) !important;
  }

  .content #settingsPage .tax-country-code {
    box-shadow: none !important;
  }

  .content :is(.reference-panel-title, .panel-heading, .card-head, .report-head) {
    padding: 12px 13px 8px;
  }

  .content :is(.reference-panel-title, .panel-heading, .card-head, .report-head) :is(h2, h3) {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0;
  }

  .content :is(.reference-kpi-card, .metric-card, .report-metric, .reference-product-metric, .reference-order-metric, .reference-expense-metric) {
    border-radius: 10px;
  }

  .content .reference-kpi-icon,
  .content :is(.reference-product-metric, .reference-order-metric, .reference-expense-metric) i {
    border-radius: 9px;
    box-shadow: none;
  }

  .content .reference-kpi-icon {
    background: color-mix(in srgb, var(--kpi-color) 12%, var(--card));
    color: var(--kpi-color);
  }

  .content :is(.button, .btn, .reference-control, .reference-primary, .reference-gradient) {
    border-radius: 8px;
    box-shadow: none;
  }

  .content .reference-gradient {
    border: 1px solid var(--primary);
    background: var(--primary);
  }

  .content :is(input, select, textarea, .select, .search) {
    border-radius: 8px;
  }

  .content .toolbar,
  .content [class$="-toolbar"],
  .content :is(.data-toolbar, .table-tools, .crm-toolbar, .rfbs-toolbar) {
    border-radius: 10px;
    box-shadow: var(--cc-shadow);
  }

  .content table {
    font-variant-numeric: tabular-nums;
  }

  .content th {
    background: var(--bg-muted);
    color: var(--muted);
  }

  .content :is(.status, .badge, .reference-status, .promotion-status, .scheme-badge, .transit-status-badge) {
    border-radius: 6px;
  }

  .auth-shell {
    --primary: var(--cc-primary);
    --primary-dark: var(--cc-primary-hover);
    --primary-soft: var(--cc-primary-soft);
    --primary-ring: rgba(36, 99, 212, .15);
    --text: var(--cc-text);
    --muted: var(--cc-muted);
    --t-light: var(--cc-muted-2);
    --line: var(--cc-line);
    --card: var(--cc-surface);
    --bg: var(--cc-mobile-bg);
    background: var(--cc-mobile-bg);
  }

  html[data-theme="dark"] .auth-shell {
    --primary: #6f9df0;
    --primary-dark: #8aaff2;
    --primary-soft: rgba(111, 157, 240, .16);
    --primary-ring: rgba(111, 157, 240, .22);
    --text: #f4f7fb;
    --muted: #a8b3c5;
    --t-light: #7f8da5;
    --line: #2b3950;
    --card: #182234;
    --bg: #101724;
    background: #101724;
  }

  .auth-shell,
  .auth-main {
    background-image: none;
  }

  .auth-card.login-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 12px 34px rgba(23, 32, 51, .12);
  }

  .auth-card.login-card::before {
    display: none;
  }

  .auth-card h2,
  .auth-state-card h3 {
    font-family: Arial, Helvetica, sans-serif;
  }

  .auth-tabs,
  .auth-input-control,
  .registration-access-note,
  .auth-state-icon {
    border-radius: 9px;
  }

  dialog:not([data-modal-family="mobile-more"]) {
    --primary: var(--cc-primary);
    --primary-dark: var(--cc-primary-hover);
    --primary-soft: var(--cc-primary-soft);
    --text: var(--cc-text);
    --muted: var(--cc-muted);
    --line: var(--cc-line);
    --card: var(--cc-surface);
  }

  html[data-theme="dark"] dialog:not([data-modal-family="mobile-more"]) {
    --primary: #6f9df0;
    --primary-dark: #8aaff2;
    --primary-soft: rgba(111, 157, 240, .16);
    --text: #f4f7fb;
    --muted: #a8b3c5;
    --line: #2b3950;
    --card: #182234;
  }

  dialog:not([data-modal-family="mobile-more"]) :is(.dialog-card, .savdo-modal__surface, .billing-dialog-card, .reference-dialog-card) {
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .content {
    padding-right: 10px;
    padding-left: 10px;
  }

  .content .reference-page-head h1,
  .content :is(.hero, .page-intro, .operations-heading, .profile-hero) h1,
  .content #financePage.reference-orders-mode::before {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.auth-shell, .sidebar, .topbar, .content, .toast, dialog:not([data-modal-family="mobile-more"])),
  :is(.auth-shell, .sidebar, .topbar, .content, .toast, dialog:not([data-modal-family="mobile-more"])) *,
  :is(.auth-shell, .sidebar, .topbar, .content, .toast, dialog:not([data-modal-family="mobile-more"]))::before,
  :is(.auth-shell, .sidebar, .topbar, .content, .toast, dialog:not([data-modal-family="mobile-more"]))::after,
  :is(.auth-shell, .sidebar, .topbar, .content, .toast, dialog:not([data-modal-family="mobile-more"])) *::before,
  :is(.auth-shell, .sidebar, .topbar, .content, .toast, dialog:not([data-modal-family="mobile-more"])) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  :root {
    --cc-bg: #fff;
    --cc-surface: #fff;
    --cc-text: #111827;
    --cc-muted: #4b5563;
    --cc-line: #d1d5db;
  }

  .card,
  .panel,
  .reference-panel {
    box-shadow: none !important;
  }
}

/* SavdoStast v10.46.2 — безопасное обновление Seller API-ключа Ozon */
#rotateApiKeyButton {
  position: relative;
}

#rotateApiKeyButton.credential-warning::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--card, #fff);
  border-radius: 50%;
  background: var(--danger, #ef4444);
}

#apiKeyRotationDialog {
  width: min(620px, calc(100vw - 28px));
}

#apiKeyRotationDialog .dialog-card {
  max-height: min(760px, calc(100vh - 28px));
  padding: 0;
  overflow: auto;
}

#apiKeyRotationDialog :is(.shop-dialog-header, .shop-dialog-body, .shop-dialog-footer) {
  padding-inline: 24px;
}

#apiKeyRotationDialog .shop-dialog-header {
  padding-top: 24px;
  padding-bottom: 18px;
}

#apiKeyRotationDialog .shop-dialog-body {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  padding-bottom: 18px;
}

#apiKeyRotationDialog .shop-dialog-footer {
  padding-top: 16px;
  padding-bottom: 22px;
}

.credential-shop-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.credential-shop-summary > div,
.api-key-current-status,
.api-key-rotation-note {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-muted);
}

.credential-shop-summary span,
.api-key-current-status span,
.api-key-rotation-note span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.credential-shop-summary b {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.api-key-current-status {
  border-left: 4px solid var(--line);
}

.api-key-current-status.good {
  border-left-color: var(--success, #16a34a);
}

.api-key-current-status.warn {
  border-left-color: var(--warning, #f59e0b);
}

.api-key-current-status.danger {
  border-left-color: var(--danger, #ef4444);
}

.api-key-rotation-note {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 65%, var(--card));
}

@media (max-width: 620px) {
  #apiKeyRotationDialog :is(.shop-dialog-header, .shop-dialog-body, .shop-dialog-footer) {
    padding-inline: 16px;
  }

  .credential-shop-summary {
    grid-template-columns: 1fr;
  }
}