:root {
  color-scheme: dark;
  --canvas: var(--srm-canvas, #05070c);
  --surface-1: var(--srm-surface-1, #0d111a);
  --surface-2: var(--srm-surface-2, #121824);
  --surface-3: var(--srm-surface-3, #182031);
  --surface-elevated: var(--srm-surface-elevated, #1c212a);
  --border: var(--srm-border, rgba(160, 174, 198, 0.24));
  --border-strong: var(--srm-border-strong, rgba(139, 130, 205, 0.46));
  --text: var(--srm-text-primary, #f4f7fb);
  --text-secondary: var(--srm-text-secondary, #c8ced8);
  --text-muted: var(--srm-text-muted, #aeb7c5);
  --accent: var(--srm-accent, #7d74cc);
  --accent-2: var(--srm-accent-2, #66758f);
  --danger: var(--srm-danger, #d46d7a);
  --success: var(--srm-success, #4fae83);
  --warning: var(--srm-warning, #c8a45d);
  --shadow: var(--srm-shadow, 0 22px 70px rgba(0, 0, 0, 0.42));
  --radius: var(--srm-radius-sm, 7px);
  --radius-lg: var(--srm-radius-lg, 12px);
  --focus: var(--srm-focus-ring, 0 0 0 3px rgba(125, 116, 204, 0.22));
  --line: var(--border);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

.sr-only { position: fixed !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; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-elevated); color: var(--text); transform: translateY(-160%); transition: transform 120ms ease; }
.skip-link:focus { transform: translateY(0); outline: none; box-shadow: var(--focus); }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(91, 101, 128, 0.09), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(105, 91, 120, 0.07), transparent 36%),
    var(--canvas);
  color: var(--text);
  overflow-x: hidden;
}

html {
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus); }

.ambient {
  position: fixed;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.14;
  pointer-events: none;
  animation: drift 18s ease-in-out infinite alternate;
}
.ambient-a { left: -15vw; top: 5vh; background: #536276; }
.ambient-b { right: -13vw; bottom: -10vh; background: #445267; animation-delay: -7s; }

@keyframes drift {
  from { transform: translate3d(0, -2%, 0) scale(0.96); }
  to { transform: translate3d(8%, 4%, 0) scale(1.05); }
}

.loyalty-shell { min-width: 0; width: 100%; display: grid; gap: 16px; }
.loyalty-toolbar { min-width: 0; max-width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
.loyalty-shell .table-shell, .loyalty-shell .table-scroll { min-width: 0; max-width: 100%; }
.loyalty-shell .data-table td > small { display: block; margin-top: 4px; color: var(--text-secondary); line-height: 1.35; }
.business-module-list { display: grid; gap: 10px; margin-top: 12px; }
.business-module-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.business-module-row > div { display: grid; gap: 3px; }
.business-module-row span { color: var(--text-secondary); font-size: 12px; }
.production-shell { display: grid; gap: 16px; min-width: 0; }
.production-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; }
.production-filters { display: flex; justify-content: flex-end; }
.production-filters label { width: min(280px, 100%); }
.production-job-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.production-job-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
.production-job-card small { display: block; margin-top: 4px; color: var(--text-secondary); }
.production-progress { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.production-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.production-job-metrics, .production-release-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.production-job-metrics span, .production-release-summary span { display: grid; gap: 4px; padding: 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-secondary); font-size: 11px; }
.production-job-metrics strong, .production-release-summary strong { color: var(--text); font-size: 14px; }
.production-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.production-report-grid article { display: grid; gap: 8px; min-height: 118px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
.production-report-grid span, .production-report-grid small { color: var(--text-secondary); }
.production-report-grid strong { color: var(--text); font-size: 24px; }
.production-shell .data-table td > small { display: block; margin-top: 4px; color: var(--text-secondary); }
.loyalty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.loyalty-card, .loyalty-simulator, .loyalty-preview { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text); }
.loyalty-card h3, .loyalty-card p { margin: 10px 0; }
.loyalty-card small, .loyalty-simulator p { color: var(--text-secondary); }
.loyalty-card-workspace { display: grid; gap: 14px; min-width: 0; }
.loyalty-card-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(150px, 0.7fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.loyalty-list { display: grid; gap: 12px; min-width: 0; }
.loyalty-list-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-1), #090b10);
  cursor: pointer;
}
.loyalty-list-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.loyalty-balance-row, .loyalty-card-meta, .loyalty-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.loyalty-balance-row span,
.loyalty-card-meta span,
.loyalty-detail-grid article {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(160, 174, 198, 0.16);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.025);
  color: var(--text-secondary);
}
.loyalty-balance-row strong,
.loyalty-detail-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
}
.loyalty-detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.loyalty-detail-grid article { display: grid; gap: 4px; }
.loyalty-detail-grid span,
.loyalty-detail-grid small { color: var(--text-secondary); }
.loyalty-action-panel { display: grid; gap: 12px; margin-top: 12px; }
.loyalty-simulator { display: grid; gap: 16px; max-width: 900px; }
.loyalty-preview { display: grid; gap: 8px; background: var(--surface-3); }
.loyalty-preview strong { font-size: 22px; }
body:has(.loyalty-editor) .modal-card { width: min(1060px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
body:has(.loyalty-editor) .modal-form { padding: 0; }
.loyalty-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  min-width: 0;
  color: var(--text);
  background: #090b0e;
}
.loyalty-editor-main { display: grid; gap: 12px; min-width: 0; padding: 18px; }
.loyalty-editor-section {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(190, 198, 208, .17);
  border-radius: 9px;
  background: linear-gradient(145deg, #111419, #0c0f13);
}
.loyalty-editor-section > header { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.loyalty-editor-section > header > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(205, 212, 222, .24); border-radius: 7px; color: #e7eaf0; background: #191d23; font-size: 12px; font-weight: 700; }
.loyalty-editor-section h3 { margin: 1px 0 3px; color: #f4f6f8; font-size: 15px; }
.loyalty-editor-section p { margin: 0; color: #9fa7b2; font-size: 11px; line-height: 1.45; }
.loyalty-editor-section label { min-width: 0; }
.loyalty-editor-section label > small { display: block; margin-top: 5px; color: #929ba7; font-size: 10px; line-height: 1.4; }
.loyalty-editor-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border-left: 1px solid rgba(190, 198, 208, .17);
  background: linear-gradient(155deg, #15191f, #0c0f13);
}
.loyalty-preview-label { color: #9fa7b2; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.loyalty-editor-aside dl { display: grid; gap: 0; margin: 0; }
.loyalty-editor-aside dl > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(190, 198, 208, .13); }
.loyalty-editor-aside dt { color: #98a1ad; font-size: 11px; }
.loyalty-editor-aside dd { margin: 0; color: #eef1f5; font-size: 11px; font-weight: 650; text-align: right; }
.loyalty-program-preview, .loyalty-card-preview, .loyalty-rule-preview { display: grid; gap: 9px; padding: 16px; border: 1px solid rgba(205, 212, 222, .24); border-radius: 10px; background: linear-gradient(145deg, #22272e, #111419); box-shadow: 0 16px 30px rgba(0, 0, 0, .28); }
.loyalty-program-preview i, .loyalty-card-preview i { width: 25px; height: 25px; color: #dfe3e8; }
.loyalty-program-preview strong, .loyalty-card-preview strong, .loyalty-rule-preview strong { color: #f6f7f9; font-size: 17px; overflow-wrap: anywhere; }
.loyalty-program-preview small, .loyalty-card-preview small, .loyalty-rule-preview span { color: #aab1ba; font-size: 11px; }
.loyalty-card-preview > span { color: #aab1ba; font-size: 10px; font-weight: 800; letter-spacing: 0; }
.loyalty-card-preview strong { margin-top: 12px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.loyalty-rule-preview { gap: 11px; }
.loyalty-editor-actions { position: sticky; bottom: 0; z-index: 2; margin: 0; padding: 12px 18px !important; border-top: 1px solid rgba(190, 198, 208, .17); background: #101318; }
.loyalty-rule-editor .loyalty-editor-aside { position: sticky; top: 0; align-self: start; min-height: 100%; }
.loyalty-editor .loyalty-rule-scope { background: linear-gradient(145deg, #111419, #0c0f13); }
@media (max-width: 920px) { .loyalty-card-filters, .loyalty-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  body:has(.loyalty-editor) .modal-card { width: 100%; max-height: 100dvh; border-radius: 0; }
  .loyalty-editor { grid-template-columns: 1fr; }
  .loyalty-editor-aside { border-top: 1px solid rgba(190, 198, 208, .17); border-left: 0; }
  .loyalty-rule-editor .loyalty-editor-aside { position: static; min-height: 0; }
}
@media (max-width: 720px) { .loyalty-toolbar { align-items: stretch; flex-direction: column; } .loyalty-grid, .loyalty-card-filters, .loyalty-balance-row, .loyalty-card-meta, .loyalty-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 500px) {
  .loyalty-editor-main { padding: 10px; }
  .loyalty-editor-section { padding: 12px; }
  .loyalty-editor-aside { padding: 14px; }
  .loyalty-editor-actions { padding: 10px !important; }
  .loyalty-editor-actions .button { flex: 1 1 0; min-width: 0; }
}

.shell { min-height: 100vh; padding: 28px; position: relative; z-index: 1; }
.hidden { display: none !important; }
.eyebrow { margin: 0 0 8px; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; font-weight: 700; }
.muted, .field-hint { color: var(--text-secondary); }
.field-hint { margin: -4px 0 2px; font-size: 12px; line-height: 1.45; }

.auth-layout {
  width: min(1080px, 100%);
  min-height: calc(100vh - 56px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(8, 9, 12, 0.9);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.brand-panel {
  position: relative;
  padding: clamp(36px, 6vw, 76px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 46px;
  background: linear-gradient(145deg, rgba(17, 19, 24, 0.98), rgba(8, 9, 12, 0.99));
  border-right: 1px solid var(--border);
}
.brand-panel > div:not(.security-note) {
  align-self: center;
  width: min(520px, 100%);
}

.brand-mark {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: linear-gradient(145deg, rgba(125, 109, 255, 0.22), rgba(77, 132, 255, 0.08));
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 14px 30px rgba(18, 24, 59, 0.34);
}
.brand-mark.small { width: 38px; height: 38px; font-size: 12px; }
.brand-logo {
  width: 112px;
  height: 112px;
  object-fit: contain;
  object-position: center;
  border-radius: 28px;
  border: 1px solid var(--border-strong);
  background: #0d1014;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.32));
}
.brand-panel h1 { margin: 10px 0 18px; font-size: clamp(38px, 5vw, 64px); line-height: 1; }
.brand-copy { margin: 0; max-width: 520px; color: var(--text-secondary); font-size: 17px; line-height: 1.65; }
.security-note { display: flex; align-items: flex-start; gap: 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.status-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(53, 197, 140, 0.10); flex: 0 0 auto; }
.auth-legal-link {
  width: 100%;
  min-height: 50px;
  justify-content: center;
  padding-inline: 20px;
  font-size: 14px;
  text-align: center;
}

.auth-card { padding: clamp(30px, 4vw, 54px); background: rgba(11, 13, 17, 0.97); overflow-y: auto; }
.card-head, .workspace-head, .topbar, .topbar-actions, .compact-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-head { margin-bottom: 30px; }
.auth-card-title { min-width: 0; display: flex; align-items: center; }
.card-head h2, .workspace-head h2 { margin: 0; font-size: 28px; }
.version { color: var(--text-muted); font-size: 12px; }
.surface-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: -12px 0 24px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #07090d;
}
.surface-choice {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 750;
}
button.surface-choice:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.surface-choice.active { border-color: rgba(125, 109, 255, 0.32); background: rgba(125, 109, 255, 0.13); color: var(--text); }
.surface-choice svg { width: 17px; height: 17px; flex: 0 0 17px; }

.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 650; }
input, select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
input::placeholder { color: var(--text-muted); }
textarea { min-height: 92px; padding-top: 12px; resize: vertical; }
select { appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
input:hover, select:hover, textarea:hover { border-color: rgba(139, 157, 205, 0.38); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--focus); background-color: var(--surface-3); }

.password-field { position: relative; display: block; }
.password-field input { padding-right: 50px; }
.password-toggle { position: absolute; top: 50%; right: 6px; width: 38px; height: 36px; padding: 0; transform: translateY(-50%); border: 0; border-radius: var(--radius); background: transparent; color: var(--text-secondary); display: grid; place-items: center; }
.password-toggle:hover { background: rgba(125, 109, 255, 0.12); color: var(--text); }
.password-toggle:focus-visible { outline: none; box-shadow: var(--focus); }
.password-toggle span { position: relative; width: 19px; height: 12px; border: 1.8px solid currentColor; border-radius: 50% / 62%; }
.password-toggle span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: currentColor; }
.password-toggle span::before { content: ""; position: absolute; left: -3px; top: 4px; width: 24px; height: 2px; transform: rotate(-38deg); border-radius: 2px; background: currentColor; box-shadow: 0 0 0 2px var(--surface-2); }
.password-toggle.visible span::before { display: none; }

.button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 700;
  transition: transform 120ms ease, background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.button:hover { transform: translateY(-1px); }
.button:focus-visible, .link-button:focus-visible, .nav-item:focus-visible, .icon-button:focus-visible { outline: none; box-shadow: var(--focus); }
.button:disabled { cursor: wait; opacity: 0.58; transform: none; }
.button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28); }
.button.primary:hover { background: linear-gradient(135deg, #9a94aa, #777f8e); }
.button.secondary { border-color: var(--border); background: var(--surface-2); }
.button.secondary:hover { border-color: var(--border-strong); background: var(--surface-3); }
.button.provider-button { border-color: var(--border-strong); background: var(--surface-2); }
.button.provider-button:hover { border-color: rgba(139, 157, 205, 0.52); background: var(--surface-3); }
.button.danger { border-color: rgba(255, 111, 130, 0.35); background: rgba(255, 111, 130, 0.10); color: #ffd8de; }
.button.compact { min-height: 36px; padding-inline: 14px; font-size: 13px; }

.form-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-link-action { flex: 1 1 180px; min-height: 44px; justify-content: center; padding-inline: 12px; font-size: 12px; text-align: center; }
.recovery-choice {
  min-height: 68px;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
  text-align: left;
}
.recovery-choice strong { color: var(--text); font-size: 14px; }
.recovery-choice span { color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.field-optional { color: var(--text-tertiary); font-size: 11px; font-weight: 500; }
.auth-remember {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 10px !important;
  color: var(--text) !important;
  cursor: pointer;
}
.auth-remember input { width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: #d8dde4; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.link-button { padding: 4px 0; border: 0; background: transparent; color: #aab7ff; font-size: 13px; }
.link-button:hover { color: var(--text); }

.notice, .error-box {
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}
.notice { border: 1px solid rgba(125, 109, 255, 0.32); background: rgba(125, 109, 255, 0.10); color: #d9d5ff; }
.control-notice {
  position: fixed;
  z-index: 1600;
  top: 20px;
  right: 20px;
  width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 14px 16px 14px 42px;
  border: 1px solid rgba(160, 168, 178, 0.32);
  background: rgba(18, 20, 23, 0.96);
  color: var(--text-primary);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px);
}
.control-notice::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 19px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #56b98a;
  box-shadow: 0 0 0 4px rgba(86, 185, 138, 0.12);
}
@media (max-width: 600px) {
  .control-notice { top: 12px; right: 16px; }
}
.error-box { border: 1px solid rgba(255, 111, 130, 0.35); background: rgba(255, 111, 130, 0.10); color: #ffd8de; }

.verification { text-align: center; padding: 16px 0; }
.verification h3 { margin: 0 0 10px; font-size: 23px; }
.verification p { color: var(--text-secondary); line-height: 1.55; }
.verification .button { width: 100%; margin-top: 10px; }
.code-input {
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 8px;
  text-align: center;
}

.control-layout { min-height: calc(100vh - 56px); max-width: 1540px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(8, 9, 12, 0.96); box-shadow: var(--shadow); overflow: hidden; }
.topbar { min-height: 70px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface-1); }
.compact-brand { justify-content: flex-start; }
.compact-brand div { display: grid; gap: 3px; }
.compact-brand small, .account-label { color: var(--text-secondary); font-size: 12px; }
.control-content { position: relative; min-height: calc(100vh - 128px); display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.control-nav { padding: 18px 12px; border-right: 1px solid var(--border); background: #080a0d; }
.nav-item { width: 100%; min-height: 42px; padding: 0 12px; margin-bottom: 6px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-secondary); text-align: left; font-weight: 650; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { border-color: rgba(125, 109, 255, 0.3); background: rgba(125, 109, 255, 0.12); color: var(--text); }
.workspace { min-width: 0; padding: 24px; }
.workspace-head { margin-bottom: 18px; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-size: 20px; }
.icon-button svg { width: 20px; height: 20px; display: block; margin: auto; }
.icon-button:hover { border-color: var(--border-strong); }
.workspace-body { min-width: 0; display: grid; gap: 12px; }

.context-switcher { min-width: 420px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.context-switcher label { display: grid; grid-template-columns: auto minmax(120px, 1fr); align-items: center; gap: 8px; color: var(--text-muted); font-size: 11px; font-weight: 700; }
.context-switcher select { width: 100%; min-width: 0; max-width: 100%; min-height: 38px; padding-left: 10px; font-size: 12px; }
.context-switcher:has(option:only-child) { opacity: 0.72; }

.empty-state, .business-card, .session-card, .security-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.empty-state { padding: 30px; text-align: center; }
.empty-state h3 { margin: 0 0 8px; }
.empty-state p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.business-card, .session-card { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.business-card h3, .session-card h3, .security-card h3 { margin: 0 0 6px; font-size: 16px; }
.business-card p, .session-card p, .security-card p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: var(--surface-2); font-size: 11px; font-weight: 700; }
.badge.current { border-color: rgba(77, 132, 255, 0.38); color: #c9dcff; }
.badge.revoked { border-color: rgba(255, 111, 130, 0.3); color: #ffc8d0; }
.session-actions { display: flex; align-items: center; gap: 10px; }
.security-card { padding: 20px; }
.security-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.security-metric { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.security-metric span { display: block; color: var(--text-muted); font-size: 11px; margin-bottom: 6px; }
.security-metric strong { font-size: 14px; }

.organization-shell { display: grid; gap: 16px; }
.organization-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.organization-toolbar p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; }
.organization-grid { display: grid; grid-template-columns: minmax(260px, 0.34fr) minmax(0, 0.66fr); gap: 16px; align-items: start; }
.business-list, .structure-panel { min-width: 0; display: grid; gap: 10px; }
.business-card { cursor: pointer; transition: border-color 150ms ease, background 150ms ease, transform 120ms ease; }
.business-card:hover { transform: translateY(-1px); border-color: rgba(139, 157, 205, 0.38); }
.business-card.selected { border-color: var(--border-strong); background: linear-gradient(145deg, rgba(125, 109, 255, 0.14), var(--surface-1)); }
.business-card.archived, .structure-row.archived { opacity: 0.62; }
.business-card-actions, .structure-actions, .section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.structure-section { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); overflow: hidden; }
.structure-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.structure-head.compact { min-height: 0; justify-content: flex-end; padding: 8px 12px; }
.structure-head.compact:empty { display: none; }
.structure-head h3 { margin: 0; font-size: 15px; }
.structure-head p { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; }
.structure-disclosure { transition: border-color 150ms ease, background 150ms ease; }
.structure-disclosure[open] { border-color: var(--border-strong); }
.structure-summary { min-height: 58px; display: grid; grid-template-columns: minmax(0, 1fr) 40px 20px; align-items: center; column-gap: 10px; padding: 12px 16px; list-style: none; cursor: pointer; background: var(--surface-2); }
.structure-summary::-webkit-details-marker { display: none; }
.structure-summary::after { content: ""; grid-column: 3; justify-self: end; width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform 150ms ease; }
.structure-disclosure[open] .structure-summary::after { transform: rotate(225deg); }
.structure-summary > span:first-child { grid-column: 1; display: grid; gap: 4px; min-width: 0; }
.structure-summary > .badge { grid-column: 2; justify-self: center; min-width: 26px; justify-content: center; padding-inline: 7px; font-variant-numeric: tabular-nums; }
.structure-summary strong { color: var(--text); font-size: 14px; }
.structure-summary small { color: var(--text-secondary); font-size: 12px; line-height: 1.35; }
.structure-list { display: grid; }
.structure-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.structure-row:last-child { border-bottom: 0; }
.structure-row h4 { margin: 0 0 4px; font-size: 14px; }
.structure-row p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.structure-empty { padding: 20px 16px; color: var(--text-secondary); font-size: 13px; }
.split-structure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.structure-filter { min-width: min(320px, 42vw); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; color: var(--text-muted); font-size: 11px; }
.structure-filter input { min-height: 38px; }
.row-check { width: 16px; min-height: 16px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--accent); }

.catalog-shell { display: grid; gap: 12px; }
.catalog-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(220, 226, 235, .15);
  border-radius: 8px;
  background: #080a0d;
}
.catalog-workspace-tabs button {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #b9c0ca;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.catalog-workspace-tabs button:hover,
.catalog-workspace-tabs button.active {
  border-color: rgba(224, 230, 239, .22);
  background: #1a1e24;
  color: #f7f8fa;
}
.catalog-workspace-tabs button:focus-visible { outline: 2px solid #aeb7c4; outline-offset: 2px; }
.catalog-workspace-tabs svg { width: 18px; height: 18px; flex: 0 0 18px; }
@media (max-width: 760px) {
  .catalog-workspace-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: sticky;
    top: 0;
    z-index: 8;
  }
  .catalog-workspace-tabs button { min-height: 42px; padding-inline: 8px; font-size: 12px; }
}
.catalog-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 180px 150px auto auto; gap: 9px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.catalog-summary { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-secondary); font-size: 11px; }
.catalog-table { min-width: 980px; }
.catalog-table small { display: block; margin-top: 4px; color: var(--text-muted); }
.catalog-actions { display: flex; flex-wrap: nowrap; gap: 6px; }
.catalog-footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(10, 16, 30, 0.96); backdrop-filter: blur(10px); }
.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.metric { padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.metric span { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 10px; text-transform: uppercase; }
.metric strong { font-size: 13px; }
.business-compact-note { margin: 12px 16px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255, 255, 255, 0.018); color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.button.ghost { min-height: 34px; padding: 0 11px; border-color: var(--border); background: transparent; font-size: 12px; }
.button.ghost:hover { background: var(--surface-3); }

.modal-layer { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(2, 5, 12, 0.76); backdrop-filter: blur(9px); animation: modal-fade 150ms ease; }
body:has(.modal-layer:not(.hidden)) { overflow: hidden; }
.modal-card { display: flex; flex-direction: column; width: min(620px, 100%); max-height: min(820px, calc(100dvh - 40px)); overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow); animation: modal-rise 170ms ease; }
.modal-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.modal-head h2 { margin: 0; font-size: 21px; }
.modal-form { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 20px; scrollbar-width: none; }
.modal-form::-webkit-scrollbar { width: 0; height: 0; }
.modal-form .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.modal-form .form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.modal-feedback { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(232, 94, 112, .48); border-radius: 9px; outline: none; background: rgba(74, 20, 29, .32); color: #ffd7dc; }
.modal-feedback strong { color: #fff0f2; font-size: 13px; }
.modal-feedback span { color: #ffc4cc; font-size: 13px; line-height: 1.45; }
.structure-readonly-label { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check-item { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 9px !important; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-secondary); }
.check-item input { width: 17px; min-height: 17px; accent-color: var(--accent); }
.close-button { font-size: 26px; line-height: 1; }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(8px) scale(0.99); } }

.busy { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(3, 4, 6, 0.78); backdrop-filter: blur(8px); color: var(--text); font-weight: 700; }
.busy-card { width: min(340px, 100%); display: grid; grid-template-columns: 42px 24px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #101216; box-shadow: var(--shadow); }
.busy-logo { width: 42px; height: 42px; display: block; object-fit: contain; border: 1px solid var(--border); border-radius: 10px; background: #0d1014; }
.spinner { width: 22px; height: 22px; border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: var(--accent); border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .shell { padding: 14px; }
  .auth-layout { min-height: calc(100vh - 28px); grid-template-columns: 1fr; }
  .brand-panel { padding: 28px; gap: 24px; border-right: 0; border-bottom: 1px solid var(--border); }
  .brand-panel h1 { font-size: 38px; }
  .brand-copy { font-size: 14px; }
  .auth-card { padding: 28px; }
  .control-layout { min-height: calc(100vh - 28px); }
  .topbar { flex-wrap: wrap; }
  .context-switcher { min-width: 0; width: 100%; order: 3; }
  .control-content { grid-template-columns: 1fr; }
  .control-nav { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .nav-item { width: auto; flex: 0 0 auto; margin: 0; }
  .security-grid { grid-template-columns: 1fr; }
  .organization-grid { grid-template-columns: 1fr; }
  .split-structure { grid-template-columns: 1fr; }
  .catalog-toolbar { grid-template-columns: 1fr 1fr; }
  .catalog-toolbar input { grid-column: 1 / -1; }
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 500px) {
  .shell { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .auth-layout { min-height: calc(100svh - 16px); }
  .brand-panel { min-height: 116px; padding: 16px 16px 16px 76px; justify-content: center; gap: 8px; }
  .brand-panel .brand-mark, .security-note { display: none; }
  .brand-panel .brand-logo {
    display: block;
    position: absolute;
    left: 16px;
    top: 18px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .brand-panel .eyebrow { margin-bottom: 4px; font-size: 10px; }
  .brand-panel h1 { margin: 2px 0 6px; font-size: 26px; }
  .brand-copy { font-size: 12.5px; line-height: 1.38; }
  .auth-card { padding: 16px 20px; }
  .card-head { margin-bottom: 14px; }
  .card-head h2 { font-size: 24px; }
  .form { gap: 10px; }
  .form label { gap: 5px; }
  .form-links { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .auth-link-action { width: 100%; min-height: 42px; }
  .topbar { align-items: flex-start; }
  .account-label { display: none; }
  .workspace { padding: 16px; }
  .business-card, .session-card { grid-template-columns: 1fr; }
  .session-actions { justify-content: space-between; }
  .context-switcher { grid-template-columns: 1fr; }
  .context-switcher label { grid-template-columns: 62px minmax(0, 1fr); }
  .organization-toolbar, .structure-head, .structure-row { align-items: stretch; flex-direction: column; }
  .organization-toolbar { display: grid; }
  .structure-row { grid-template-columns: 1fr; }
  .metric-row, .modal-form .form-row, .check-grid { grid-template-columns: 1fr; }
  .modal-layer { padding: 8px; }
  .modal-card { max-height: calc(100dvh - 16px); }
  .modal-form { max-height: none; }
}

/* Stage 07: protected control-center shell */
.control-layout { position: relative; }
.offline-banner { padding: 9px 18px; border-bottom: 1px solid rgba(245, 183, 95, 0.32); background: rgba(245, 183, 95, 0.10); color: #ffe0af; font-size: 12px; font-weight: 700; text-align: center; }
.demo-account-banner { position: relative; z-index: 9; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 11px 18px; border-bottom: 1px solid rgba(179, 188, 201, .24); background: linear-gradient(90deg, rgba(34, 38, 45, .98), rgba(19, 22, 27, .98)); color: var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.demo-account-banner.hidden { display: none; }
.demo-account-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(205, 211, 220, .28); border-radius: 10px; background: rgba(255, 255, 255, .045); color: #e8ebf0; }
.demo-account-icon svg { width: 19px; height: 19px; }
.demo-account-banner > div { min-width: 0; }
.demo-account-banner small { display: block; margin-bottom: 2px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.demo-account-banner strong { display: block; color: #f4f6f8; font-size: 14px; }
.demo-account-banner p { margin: 3px 0 0; color: #b9c0ca; font-size: 12px; line-height: 1.35; }
.demo-account-banner .button { white-space: nowrap; }
.control-logo { width: 42px; height: 42px; border-radius: var(--radius); object-fit: contain; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32); }
.menu-button { display: none; }
.topbar { position: relative; z-index: 8; }
.topbar-actions { margin-left: auto; }
.topbar-tool, .account-button {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.topbar-tool { min-width: 40px; padding: 0 11px; position: relative; }
.topbar-documents, .topbar-logout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; white-space: nowrap; }
.topbar-documents svg, .topbar-logout svg { width: 17px; height: 17px; flex: 0 0 17px; }
.product-switch { border-color: rgba(125, 109, 255, 0.28); color: var(--text); }
.topbar-tool svg { width: 18px; height: 18px; flex: 0 0 18px; }
.topbar-tool:hover, .account-button:hover { border-color: var(--border-strong); background: var(--surface-3); color: var(--text); }
.topbar-tool kbd { padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-1); color: var(--text-muted); font-size: 9px; }
.account-button { padding: 4px 10px 4px 5px; }
.account-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, rgba(125, 109, 255, 0.32), rgba(77, 132, 255, 0.24)); color: var(--text); font-size: 10px; font-weight: 800; }
.notification-count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border: 2px solid var(--surface-1); border-radius: 999px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 800; }

.control-content { grid-template-columns: 248px minmax(0, 1fr); }
.control-nav { position: relative; z-index: 7; padding: 18px 12px 24px; }
.nav-group-label { margin: 16px 12px 8px; color: var(--text-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.nav-group-label:first-child { margin-top: 2px; }
.nav-group { display: grid; grid-template-rows: auto 0fr; margin-bottom: 7px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.015); overflow: hidden; transition: grid-template-rows 160ms ease, border-color 160ms ease, background 160ms ease; }
.nav-group.expanded { grid-template-rows: auto 1fr; border-color: var(--border-strong); background: rgba(255, 255, 255, 0.025); }
.nav-group-toggle { width: 100%; min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px; border: 0; border-radius: 0; background: transparent; color: var(--text-secondary); font-size: 11px; font-weight: 800; text-align: left; }
.nav-group-toggle:hover { background: var(--surface-2); color: var(--text); }
.nav-group-toggle svg { width: 16px; height: 16px; flex: 0 0 16px; transition: transform 160ms ease; }
.nav-group-title { min-width: 0; display: flex; align-items: center; gap: 9px; }
.nav-group-title > svg { color: #aeb4bd; }
.nav-group-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group.expanded > .nav-group-toggle .nav-group-chevron { transform: rotate(180deg); }
.nav-group-items { min-height: 0; display: grid; gap: 3px; padding: 0 4px; overflow: hidden; }
.nav-group.expanded > .nav-group-items { padding-bottom: 4px; }
.nav-group-items .nav-item { margin-bottom: 0; }
.nav-item { display: flex; align-items: center; gap: 10px; }
.nav-item > span:last-child { display: flex; min-height: 26px; align-items: center; line-height: 1.25; }
.nav-icon { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; color: var(--text-muted); font-size: 15px; line-height: 1; }
.nav-icon svg { width: 17px; height: 17px; display: block; margin: 0; }
.nav-item.active .nav-icon { border-color: rgba(125, 109, 255, 0.28); background: rgba(125, 109, 255, 0.14); color: var(--text); }
.nav-scrim { display: none; }
.workspace { min-height: 620px; }

.breadcrumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text-muted); font-size: 11px; }
.breadcrumbs span + span::before { content: "/"; margin-right: 8px; color: rgba(139, 157, 205, 0.44); }

.overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.overview-card, .onboarding-card, .profile-card, .table-shell, .activity-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}
.overview-card { min-height: 122px; padding: 16px; display: grid; align-content: space-between; gap: 12px; text-align: left; color: var(--text); }
.overview-card-action { width: 100%; border-color: var(--border); background: linear-gradient(145deg, rgba(255, 255, 255, 0.025), var(--surface-1)); transition: border-color 150ms ease, background 150ms ease, transform 120ms ease; }
.overview-card-action:hover { transform: translateY(-1px); border-color: var(--border-strong); background: linear-gradient(145deg, rgba(125, 116, 204, 0.09), var(--surface-1)); }
.overview-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.overview-card-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text-secondary); }
.overview-card-icon svg { width: 18px; height: 18px; }
.overview-card-label { color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.overview-card strong { font-size: 27px; }
.overview-card-detail { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-muted); font-size: 11px; }
.overview-card-detail svg { width: 14px; height: 14px; flex: 0 0 14px; }
.overview-section { display: grid; gap: 12px; margin-top: 4px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.section-heading h3 { margin: 0; font-size: 16px; }
.section-heading p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.activity-list { display: grid; gap: 8px; }
.activity-card { width: 100%; padding: 13px 15px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; color: var(--text); text-align: left; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, transform 120ms ease; }
.activity-card:hover { border-color: var(--border-strong); background: var(--surface-2); transform: translateY(-1px); }
.activity-card strong { display: block; margin-bottom: 4px; font-size: 13px; }
.activity-card p { margin: 0; color: var(--text-secondary); font-size: 11px; }
.activity-card time { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.activity-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.activity-detail-grid section { display: grid; gap: 6px; min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.activity-detail-grid span { color: var(--text-muted); font-size: 11px; }
.activity-detail-grid strong { color: var(--text); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.activity-detail-wide { grid-column: 1 / -1; }
.onboarding-card { padding: 22px; }
.onboarding-card h3 { margin: 0 0 8px; }
.onboarding-card > p { max-width: 760px; margin: 0; color: var(--text-secondary); line-height: 1.55; }
.onboarding-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.onboarding-step { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.onboarding-step span { display: block; margin-bottom: 8px; color: #c9c4ff; font-size: 11px; font-weight: 800; }
.onboarding-step strong { display: block; margin-bottom: 6px; font-size: 13px; }
.onboarding-step p { margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.onboarding-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Chapter 04: contextual help and onboarding */
.auth-guidance {
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}
.auth-guidance p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.auth-guidance strong { color: var(--text); }
.field-help { display: block; margin-top: 5px; color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.registration-outcome { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.workspace-head-actions { display: flex; align-items: center; gap: 8px; }
.sync-state {
  max-width: 190px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.2;
  text-align: right;
}
.sync-state[data-status="error"] { color: #d8a7a7; }
.sync-button {
  min-height: 38px;
  gap: 7px;
  white-space: nowrap;
}
.sync-button svg { width: 17px; height: 17px; }
.sync-button.is-syncing svg { animation: control-sync-spin .8s linear infinite; }
@keyframes control-sync-spin { to { transform: rotate(360deg); } }
.help-button { color: var(--text); }
@media (max-width: 720px) {
  .demo-account-banner { grid-template-columns: 34px minmax(0, 1fr); padding: 10px; }
  .demo-account-icon { width: 34px; height: 34px; }
  .demo-account-banner .button { grid-column: 1 / -1; width: 100%; min-height: 40px; }
  .sync-state { display: none; }
  .sync-button span { display: none; }
  .sync-button { width: 40px; min-width: 40px; padding-inline: 0; justify-content: center; }
}
.section-help-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
}
.section-help-banner strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 13px; }
.section-help-banner p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.section-help-banner .button { white-space: nowrap; }
.help-layer,
.onboarding-layer {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(2, 5, 11, .76);
  backdrop-filter: blur(10px);
}
.help-layer.hidden,
.onboarding-layer.hidden { display: none; }
.help-card {
  width: min(720px, 100%);
  max-height: min(760px, calc(100dvh - 44px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
  box-shadow: var(--shadow);
}
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.help-head h2 { margin: 2px 0 0; }
.help-content { display: grid; gap: 16px; max-height: calc(100dvh - 150px); overflow: auto; padding: 20px; scrollbar-color: var(--border-strong) var(--surface-1); }
.help-summary { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.help-first-action { padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 10px; background: var(--surface-2); }
.help-first-action span { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.help-first-action strong { color: var(--text); line-height: 1.5; }
.help-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: help-step; }
.help-steps li { position: relative; min-height: 38px; padding: 10px 12px 10px 44px; border: 1px solid var(--border); border-radius: 9px; color: var(--text-secondary); background: var(--surface-2); line-height: 1.45; }
.help-steps li::before { counter-increment: help-step; content: counter(help-step); position: absolute; left: 11px; top: 9px; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--text); font-size: 11px; font-weight: 800; }
.help-important { padding: 12px 14px; border-left: 3px solid var(--srm-danger); border-radius: 8px; color: var(--text-secondary); background: color-mix(in srgb, var(--srm-danger) 8%, var(--surface-2)); line-height: 1.5; }
.help-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 2px; }
.onboarding-dialog { width: min(560px, 100%); padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); box-shadow: var(--shadow); }
.onboarding-dialog h2 { margin: 8px 0 10px; color: var(--text); }
.onboarding-dialog > p:not(.eyebrow) { min-height: 72px; margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.onboarding-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-bottom: 20px; }
.onboarding-progress span { height: 3px; border-radius: 3px; background: var(--border); }
.onboarding-progress span.active { background: var(--accent); }
.onboarding-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.onboarding-footer > div { display: flex; gap: 8px; }

@media (max-width: 640px) {
  .section-help-banner { grid-template-columns: 1fr; }
  .section-help-banner .button { width: 100%; }
  .help-layer, .onboarding-layer { align-items: end; padding: 10px; }
  .help-card, .onboarding-dialog { border-radius: 12px; }
  .help-content { max-height: calc(100dvh - 120px); padding: 16px; }
  .onboarding-dialog { padding: 20px 18px; }
  .onboarding-footer { align-items: stretch; }
  .onboarding-footer > div { flex: 1; }
  .onboarding-footer .button { flex: 1; }
}
.button-link { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

.table-shell { overflow: hidden; }
.table-toolbar { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.table-toolbar p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.data-table th { color: var(--text-muted); background: rgba(7, 12, 23, 0.62); font-size: 10px; text-transform: uppercase; }
.data-table td { color: var(--text-secondary); font-size: 12px; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table strong { color: var(--text); }
.table-scroll { overflow-x: auto; scrollbar-gutter: stable; }
.activity-card, .document-card, .crm-row, .delivery-card, .production-job-card, .migration-config-card, .migration-engine-card, .cutover-card { content-visibility: auto; contain: layout paint style; contain-intrinsic-size: auto 76px; }

@media (pointer: coarse) {
  :where(button, .button, .nav-item, .link-button, input, select, textarea, [role="button"]) { min-height: 44px; }
  :where(input[type="checkbox"], input[type="radio"]) { min-width: 22px; min-height: 22px; }
}
@media (max-width: 600px) {
  :where(button, .button, .nav-item, .link-button, input, select, textarea, [role="button"]) { min-height: 44px; }
  :where(input[type="checkbox"], input[type="radio"]) { min-width: 22px; min-height: 22px; }
}
.profile-stack { width: min(100%, 860px); display: grid; gap: 16px; }
.control-layout.account-only .context-switcher,
.control-layout.account-only .control-nav,
.control-layout.account-only .command-trigger,
.control-layout.account-only .notification-trigger,
.control-layout.account-only .product-switch { display: none !important; }
.control-layout.account-only .control-content { grid-template-columns: minmax(0, 1fr); }
.control-layout.account-only .workspace { width: min(1120px, 100%); margin-inline: auto; }
.control-layout.account-only .profile-stack { width: 100%; }
.product-access-card > header,
.account-guide-card > header,
.activation-card > header { padding: 18px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.product-access-card h3,
.product-access-card h4,
.account-guide-card h3,
.activation-card h3 { margin: 0; }
.product-access-card header p,
.account-guide-card header p,
.activation-card header p { margin: 6px 0 0; color: var(--text-secondary); }
.product-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 20px 20px; }
.product-access-grid section { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.product-access-grid section > :last-child { grid-column: 1 / -1; width: 100%; }
.product-access-grid section p { margin: 5px 0 0; color: var(--text-secondary); line-height: 1.45; }
.product-access-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-3); color: var(--text); }
.product-access-icon svg { width: 20px; height: 20px; }
.product-access-note { min-height: 40px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); color: var(--text-secondary); }
.account-guide-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 18px 20px 20px; }
.activation-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 18px 20px 20px; }
.activation-form label { min-width: 0; }
.activation-form input { text-transform: uppercase; letter-spacing: 0; }
.legal-consent-list { display: grid; gap: 9px; margin: 0; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.legal-consent-list legend { padding-inline: 6px; color: var(--text); font-size: 13px; font-weight: 700; }
.legal-consent-list label { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 9px; color: var(--text-secondary); font-size: 13px; line-height: 1.4; }
.legal-consent-list input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.legal-consent-list a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.profile-card { width: 100%; overflow: hidden; }
.profile-card header { padding: 18px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.profile-card h3 { margin: 0 0 5px; }
.profile-card p { margin: 0; color: var(--text-secondary); font-size: 12px; }
.profile-form { padding: 20px; }
.profile-form .form-actions { display: flex; justify-content: flex-end; }
.release-body { padding: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.release-body p { margin: 4px 0 0; color: var(--text-secondary); }
.release-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.release-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.release-platform { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.release-platform-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.release-platform-heading > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.release-platform-heading span, .release-platform dt { color: var(--text-muted); font-size: 11px; }
.release-platform dl { display: grid; gap: 8px; margin: 14px 0 0; }
.release-platform dl > div { display: grid; grid-template-columns: minmax(86px, .4fr) minmax(0, 1fr); gap: 10px; }
.release-platform dt, .release-platform dd { margin: 0; }
.release-platform dd { color: var(--text-secondary); overflow-wrap: anywhere; }
.release-checksum { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-build-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px 20px; }
.system-build-info div { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.system-build-info span { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.system-build-info strong { display: block; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.state-card { min-height: 360px; padding: 34px; display: grid; place-items: center; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
.state-card > div { max-width: 560px; }
.state-code { color: #c9c4ff; font-size: 12px; font-weight: 800; }
.state-card h3 { margin: 8px 0; font-size: 24px; }
.state-card p { margin: 0 0 18px; color: var(--text-secondary); line-height: 1.55; }

.notification-panel { position: absolute; z-index: 15; top: 78px; right: 18px; width: min(390px, calc(100% - 36px)); max-height: min(640px, calc(100vh - 110px)); overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-1); box-shadow: var(--shadow); }
.notification-panel header { padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.notification-panel h2 { margin: 0; font-size: 18px; }
.notification-list { max-height: 520px; overflow-y: auto; padding: 10px; }
.notification-item { padding: 12px; border-bottom: 1px solid var(--border); }
.notification-item:last-child { border-bottom: 0; }
.notification-item strong { display: block; margin-bottom: 4px; font-size: 12px; }
.notification-item p { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.4; }

.command-layer { position: fixed; inset: 0; z-index: 30; display: grid; place-items: start center; padding: 12vh 16px 16px; background: rgba(2, 5, 12, 0.76); backdrop-filter: blur(10px); }
.command-card { width: min(650px, 100%); overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-1); box-shadow: var(--shadow); }
.command-search { min-height: 62px; padding: 9px 16px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.command-search input { min-height: 42px; border: 0; background: transparent; box-shadow: none; }
.command-results { max-height: 380px; overflow-y: auto; padding: 8px; }
.command-option { width: 100%; min-height: 46px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-secondary); text-align: left; }
.command-option:hover, .command-option.active { border-color: var(--border); background: var(--surface-2); color: var(--text); }
.command-option small { color: var(--text-muted); }
.command-card footer { padding: 10px 14px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 10px; }

@media (max-width: 1360px) {
  .account-label, .topbar-logout span { display: none; }
  .account-button, .topbar-logout { width: 40px; min-width: 40px; padding: 0; }
}

@media (max-width: 1160px) {
  .control-content { grid-template-columns: 224px minmax(0, 1fr); }
  .context-switcher { min-width: 330px; }
  .tool-label, .topbar-tool kbd { display: none; }
  .topbar-documents span { display: none; }
  .topbar-documents { width: 40px; min-width: 40px; padding: 0; }
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .control-layout { min-height: calc(100vh - 28px); }
  .topbar { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; }
  .menu-button { display: grid; }
  .compact-brand { min-width: 0; }
  .compact-brand div { overflow: hidden; }
  .compact-brand strong, .compact-brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { grid-column: 3; }
  .topbar-actions .button, .account-label { display: none; }
  .context-switcher { grid-column: 1 / -1; width: 100%; min-width: 0; order: initial; }
  .control-content { display: block; }
  .control-nav { position: absolute; inset: 0 auto 0 0; width: min(292px, 86vw); min-height: 100%; display: block; overflow-y: auto; transform: translateX(-102%); transition: transform 180ms ease; border-right: 1px solid var(--border-strong); border-bottom: 0; box-shadow: 18px 0 54px rgba(0, 0, 0, 0.42); }
  .control-nav.open { transform: translateX(0); }
  .nav-item { width: 100%; margin-bottom: 6px; }
  .nav-scrim { position: absolute; inset: 0; z-index: 6; display: block; border: 0; background: rgba(2, 5, 12, 0.68); }
  .workspace { min-height: calc(100vh - 184px); }
  .onboarding-steps { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .control-logo { width: 36px; height: 36px; }
  .compact-brand small { display: none; }
  .topbar { padding: 10px; gap: 8px; }
  .topbar-actions { gap: 6px; }
  .command-trigger { display: none; }
  .context-switcher { gap: 7px; }
  .context-switcher label { grid-template-columns: 58px minmax(0, 1fr); }
  .workspace-head h2 { font-size: 23px; }
  .overview-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .overview-card { min-height: 90px; padding: 12px; }
  .overview-card strong { font-size: 22px; }
  .activity-card { grid-template-columns: 1fr; gap: 6px; }
  .activity-card time { white-space: normal; }
  .activity-detail-grid { grid-template-columns: 1fr; }
  .activity-detail-wide { grid-column: auto; }
  .onboarding-card { padding: 16px; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .data-table th, .data-table td { padding: 11px 12px; }
  .profile-form { padding: 16px; }
  .release-body { padding: 16px; align-items: stretch; flex-direction: column; }
  .release-platforms { grid-template-columns: 1fr; }
  .release-actions { justify-content: stretch; }
  .release-actions > * { flex: 1 1 180px; }
  .notification-panel { top: 70px; right: 8px; width: calc(100% - 16px); }
  .catalog-toolbar { grid-template-columns: 1fr; }
  .catalog-toolbar input { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}
/* Stage 11 catalog details */
.catalog-inline-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.catalog-detail-section { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8, 17, 31, .68); }
.catalog-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.catalog-detail-row span { min-width: 0; display: grid; gap: 3px; }
.catalog-detail-row small { color: var(--text-muted); overflow-wrap: anywhere; }
.catalog-history { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.catalog-history li { display: flex; justify-content: space-between; gap: 12px; color: var(--text-muted); }
.catalog-history strong { color: var(--text); font-weight: 600; }
.catalog-label-preview { width: min(100%, 430px); margin: 10px auto; padding: 28px; display: grid; gap: 12px; text-align: center; color: #000; background: #fff; border: 2px solid #000; }
.catalog-label-preview strong { font-size: 24px; }
.catalog-label-preview b { font-family: ui-monospace, Consolas, monospace; letter-spacing: 2px; }

@media (max-width: 720px) {
  .production-toolbar, .business-module-row { align-items: stretch; flex-direction: column; }
  .production-toolbar .section-actions, .business-module-row .button { width: 100%; }
  .production-job-metrics, .production-release-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-inline-field { grid-template-columns: 1fr; }
  .catalog-detail-row { align-items: flex-start; }
}

@media print {
  body * { visibility: hidden !important; }
  .catalog-label-preview, .catalog-label-preview * { visibility: visible !important; }
  .catalog-label-preview { position: fixed; inset: 0 auto auto 0; margin: 0; }
}

/* Stage 27 read-only MoySklad discovery */
.moysklad-shell { display: grid; gap: 14px; min-width: 0; color: var(--srm-text-primary, #f5f7ff); }
.moysklad-hero, .moysklad-section, .moysklad-fallback, .moysklad-connection, .moysklad-job, .moysklad-safety, .moysklad-warning, .moysklad-manifest-summary article { border: 1px solid var(--srm-border-default, #243553); border-radius: 10px; background: var(--srm-surface-1, #0c1629); }
.moysklad-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px; }
.moysklad-hero > div { min-width: 0; }
.moysklad-hero h3 { margin: 10px 0 6px; font-size: 20px; }
.moysklad-hero p, .moysklad-section header p, .moysklad-fallback p, .moysklad-connection p, .moysklad-safety p { margin: 0; color: var(--srm-text-secondary, #9dacbf); line-height: 1.5; }
.moysklad-section { min-width: 0; overflow: hidden; }
.moysklad-section > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px; border-bottom: 1px solid var(--srm-border-subtle, #1d2a43); }
.moysklad-section h3 { margin: 0 0 4px; font-size: 16px; }
.moysklad-connections, .moysklad-jobs { display: grid; gap: 10px; padding: 12px; }
.moysklad-connection { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px; }
.moysklad-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(113,103,255,.45); border-radius: 9px; background: rgba(113,103,255,.12); color: #eef0ff; font-size: 12px; font-weight: 800; }
.moysklad-connection-body { display: grid; gap: 5px; min-width: 0; }
.moysklad-connection-body strong, .moysklad-connection-body small, .moysklad-connection-body p { overflow-wrap: anywhere; }
.moysklad-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; max-width: 360px; }
.moysklad-job { display: grid; grid-template-columns: minmax(160px, .7fr) minmax(180px, 1.5fr) auto; align-items: center; gap: 14px; padding: 12px 14px; }
.moysklad-job > div:first-child { display: grid; gap: 4px; }
.moysklad-job small { color: var(--srm-text-secondary, #9dacbf); }
.moysklad-job p { grid-column: 1 / -1; margin: 0; color: #ffbbc4; }
.moysklad-progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--srm-surface-0, #07101f); }
.moysklad-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6c63d8, #8e87ef); transition: width .24s ease; }
.moysklad-fallback, .moysklad-safety, .moysklad-warning { padding: 14px 16px; }
.moysklad-fallback strong, .moysklad-safety strong, .moysklad-warning strong { display: block; margin-bottom: 5px; }
.moysklad-manifest-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.moysklad-manifest-summary article { display: grid; gap: 5px; padding: 13px; }
.moysklad-manifest-summary span { color: var(--srm-text-secondary, #9dacbf); font-size: 12px; }
.moysklad-warning ul { margin: 8px 0 0; padding-left: 20px; color: var(--srm-text-secondary, #9dacbf); }
body:has(.moysklad-manifest-summary) .modal-card { width: min(900px, 100%); }
@media (max-width: 820px) {
  .moysklad-hero { align-items: stretch; flex-direction: column; }
  .moysklad-connection { grid-template-columns: 42px minmax(0, 1fr); }
  .moysklad-actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .moysklad-job { grid-template-columns: 1fr auto; }
  .moysklad-progress { grid-column: 1 / -1; grid-row: 2; }
  .moysklad-job b { grid-column: 2; grid-row: 1; }
}
@media (max-width: 560px) {
  .moysklad-section > header { align-items: stretch; flex-direction: column; }
  .moysklad-actions .button { flex: 1 1 120px; }
  .moysklad-manifest-summary { grid-template-columns: 1fr; }
}

/* Stage 24: server-side automation builder */
.automation-shell { display: grid; gap: 14px; min-width: 0; color: var(--srm-text-primary, #f5f7ff); }
.automation-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.automation-summary article { display: grid; gap: 5px; min-width: 0; padding: 15px; border: 1px solid var(--srm-border-default, #243553); border-radius: 11px; background: linear-gradient(145deg, rgba(13,23,40,.98), rgba(7,13,25,.98)); }
.automation-summary span, .automation-summary small { color: var(--srm-text-secondary, #9dacbf); }
.automation-summary strong { color: var(--srm-text-primary, #f5f7ff); font-size: 25px; }
.automation-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 5px; border: 1px solid var(--srm-border-default, #243553); border-radius: 11px; background: var(--srm-surface-0, #07101f); scrollbar-width: thin; }
.automation-tabs button { flex: 0 0 auto; min-height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--srm-text-secondary, #9dacbf); cursor: pointer; }
.automation-tabs button.active { border-color: var(--srm-border-strong, #34517c); background: var(--srm-surface-2, #111f35); color: var(--srm-text-primary, #f5f7ff); }
.automation-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.automation-flow article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 3px 10px; padding: 13px; border: 1px solid var(--srm-border-default, #243553); border-radius: 10px; background: var(--srm-surface-1, #0c1629); }
.automation-flow article > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--srm-border-strong, #34517c); border-radius: 50%; color: var(--srm-text-primary, #f5f7ff); font-weight: 700; }
.automation-flow small, .automation-presets small { color: var(--srm-text-secondary, #9dacbf); }
.automation-presets { display: grid; gap: 10px; padding: 15px; border: 1px solid var(--srm-border-default, #243553); border-radius: 11px; background: var(--srm-surface-1, #0c1629); }
.automation-presets > header > div { display: grid; gap: 4px; }
.automation-presets > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.automation-presets button { display: grid; gap: 5px; min-height: 72px; padding: 12px; border: 1px solid var(--srm-border-default, #243553); border-radius: 9px; background: var(--srm-surface-0, #07101f); color: var(--srm-text-primary, #f5f7ff); text-align: left; cursor: pointer; }
.automation-presets button:hover, .automation-presets button:focus-visible { border-color: var(--srm-border-strong, #34517c); background: var(--srm-surface-2, #111f35); outline: none; }
.automation-toolbar, .automation-panel, .automation-simulation { min-width: 0; padding: 15px; border: 1px solid var(--srm-border-default, #243553); border-radius: 11px; background: linear-gradient(145deg, rgba(13,23,40,.98), rgba(7,13,25,.98)); }
.automation-toolbar, .automation-panel > header, .automation-simulation > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.automation-toolbar > div, .automation-panel > header > div { display: grid; gap: 4px; }
.automation-toolbar small, .automation-panel small, .automation-rule-card small, .automation-rule-card p, .automation-simulation p { color: var(--srm-text-secondary, #9dacbf); }
.automation-rule-list { display: grid; gap: 10px; }
.automation-rule-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 15px; border: 1px solid var(--srm-border-default, #243553); border-radius: 11px; background: var(--srm-surface-1, #0c1629); }
.automation-rule-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.automation-rule-main > div { display: grid; gap: 4px; min-width: 0; }
.automation-rule-main strong, .automation-rule-main p { overflow-wrap: anywhere; }
.automation-rule-main p { margin: 2px 0 0; }
.automation-rule-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.automation-state, .automation-kind { display: inline-flex; align-items: center; width: max-content; min-height: 25px; padding: 3px 8px; border: 1px solid var(--srm-border-strong, #34517c); border-radius: 999px; background: var(--srm-surface-2, #111f35); color: var(--srm-text-secondary, #9dacbf); font-size: 12px; white-space: nowrap; }
.automation-state.enabled { border-color: rgba(83,166,255,.48); color: #dbeafe; }
.automation-state.failed { border-color: rgba(244,112,112,.5); color: #fecaca; }
.automation-panel .data-table td strong, .automation-panel .data-table td small { display: block; }
.automation-panel .table-scroll { max-height: min(58vh, 620px); margin-top: 13px; border: 1px solid var(--srm-border-subtle, #1d2a43); border-radius: 9px; background: var(--srm-surface-0, #07101f); }
.automation-simulation { position: sticky; bottom: 10px; z-index: 3; display: grid; gap: 10px; box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.automation-error { display: flex; align-items: center; gap: 14px; }

@media (max-width: 900px) {
  .automation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-flow, .automation-presets > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-rule-card, .automation-toolbar { align-items: stretch; flex-direction: column; }
  .automation-rule-actions { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .automation-summary { grid-template-columns: 1fr 1fr; }
  .automation-flow, .automation-presets > div { grid-template-columns: 1fr; }
  .automation-summary article { padding: 12px; }
  .automation-summary strong { font-size: 21px; }
  .automation-rule-main { flex-direction: column; }
  .automation-rule-actions .button { flex: 1 1 120px; }
}

/* Stage 23 analytics center */
.analytics-shell { display: grid; gap: 14px; min-width: 0; color: var(--srm-text-primary, #f5f7ff); }
.analytics-report-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px; padding: 10px; border: 1px solid var(--srm-border-default, #243553); border-radius: 12px; background: rgba(7, 13, 24, .94); }
.analytics-report-group { position: relative; min-width: 0; }
.analytics-report-group summary { display: grid; gap: 3px; min-height: 54px; padding: 10px 34px 10px 12px; border: 1px solid var(--srm-border-default, #243553); border-radius: 9px; background: var(--srm-surface-1, #0c1629); color: var(--srm-text-primary, #f5f7ff); cursor: pointer; list-style: none; }
.analytics-report-group summary::-webkit-details-marker { display: none; }
.analytics-report-group summary::after { position: absolute; top: 17px; right: 13px; content: "⌄"; color: var(--srm-text-secondary, #9dacbf); }
.analytics-report-group summary small { overflow: hidden; color: var(--srm-text-secondary, #9dacbf); text-overflow: ellipsis; white-space: nowrap; }
.analytics-report-group > div { position: absolute; z-index: 8; display: grid; gap: 5px; width: min(320px, calc(100vw - 40px)); margin-top: 6px; padding: 7px; border: 1px solid var(--srm-border-default, #243553); border-radius: 9px; background: #0a1425; box-shadow: 0 18px 44px rgba(0,0,0,.42); }
.analytics-report-group button { min-height: 36px; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--srm-text-secondary, #9dacbf); text-align: left; cursor: pointer; }
.analytics-report-group button:hover, .analytics-report-group button:focus-visible { border-color: var(--srm-border-default, #243553); color: var(--srm-text-primary, #f5f7ff); outline: none; }
.analytics-report-group button.active { border-color: rgba(140, 131, 183, .46); background: rgba(55, 51, 75, .78); color: #fff; }
.analytics-report-group button:disabled { opacity: .38; cursor: not-allowed; }
.analytics-toolbar, .analytics-panel, .analytics-table-panel, .analytics-integrity { border: 1px solid var(--srm-border-default, #243553); border-radius: 12px; background: linear-gradient(145deg, rgba(13, 23, 40, .98), rgba(7, 13, 25, .98)); box-shadow: 0 14px 36px rgba(0, 0, 0, .18); }
.analytics-toolbar { display: grid; gap: 12px; padding: 14px; }
.analytics-filter-grid, .analytics-advanced { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); align-items: end; gap: 10px; }
.analytics-filter-grid label, .analytics-advanced label { min-width: 0; color: var(--srm-text-secondary, #9dacbf); font-size: 12px; }
.analytics-filter-grid input, .analytics-filter-grid select, .analytics-advanced input { width: 100%; margin-top: 5px; color-scheme: dark; }
.analytics-advanced { padding-top: 12px; border-top: 1px solid var(--srm-border-subtle, #1d2a43); }
.analytics-actions, .analytics-export-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.analytics-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.analytics-kpis article { display: grid; gap: 8px; min-width: 0; padding: 15px; border: 1px solid var(--srm-border-default, #243553); border-radius: 11px; background: rgba(11, 20, 35, .94); }
.analytics-kpis span, .analytics-kpis small { color: var(--srm-text-secondary, #9dacbf); }
.analytics-kpis strong { overflow-wrap: anywhere; color: #fff; font-size: clamp(19px, 2vw, 28px); }
.analytics-kpis small { font-size: 11px; }
.analytics-kpis small.negative { color: #e7a0a0; }
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 12px; min-width: 0; }
.analytics-panel { min-width: 0; padding: 15px; }
.analytics-panel > header, .analytics-table-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 12px; }
.analytics-panel > header div, .analytics-table-panel > header div { display: grid; gap: 4px; }
.analytics-panel > header span, .analytics-panel > header small, .analytics-table-panel > header small { color: var(--srm-text-secondary, #9dacbf); }
.analytics-chart { display: grid; gap: 8px; min-height: 230px; align-content: start; }
.analytics-bar-row { display: grid; grid-template-columns: minmax(90px, 150px) minmax(120px, 1fr) minmax(100px, auto); align-items: center; gap: 10px; width: 100%; min-height: 30px; padding: 4px 0; border: 0; background: transparent; color: var(--srm-text-secondary, #9dacbf); text-align: left; cursor: pointer; }
.analytics-bar-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-bar-row > i { display: grid; gap: 3px; min-height: 15px; overflow: hidden; border-radius: 5px; background: rgba(84, 96, 123, .12); }
.analytics-bar-row > i b { display: block; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #68637f, #9993b6); transition: width .2s ease; }
.analytics-bar-row > i b.previous { background: #3d4960; }
.analytics-bar-row > strong { color: var(--srm-text-primary, #f5f7ff); text-align: right; }
.analytics-bar-row:hover > i b.current { background: linear-gradient(90deg, #77718f, #aaa5c6); }
.analytics-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; color: var(--srm-text-secondary, #9dacbf); font-size: 12px; }
.analytics-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.analytics-chart-legend i { width: 18px; height: 6px; border-radius: 99px; background: #8f89aa; }
.analytics-chart-legend i.previous { background: #3d4960; }
.analytics-side { display: grid; align-content: start; gap: 8px; }
.analytics-side > header { padding: 6px 0; border-bottom: 1px solid var(--srm-border-subtle, #1d2a43); }
.analytics-side > button:not(.button), .analytics-side > div { display: grid; gap: 3px; width: 100%; padding: 10px; border: 1px solid var(--srm-border-subtle, #1d2a43); border-radius: 8px; background: rgba(14, 25, 43, .78); color: var(--srm-text-primary, #f5f7ff); text-align: left; }
.analytics-side > button:not(.button) { cursor: pointer; }
.analytics-side > button:not(.button):hover { border-color: rgba(140, 131, 183, .48); }
.analytics-side small, .analytics-side p { margin: 0; color: var(--srm-text-secondary, #9dacbf); }
.analytics-table-panel { min-width: 0; overflow: hidden; }
.analytics-table-panel > header { padding: 14px 15px; border-bottom: 1px solid var(--srm-border-subtle, #1d2a43); }
.analytics-table-panel .table-scroll { max-height: 440px; overflow: auto; scrollbar-color: #34415a #091222; }
.analytics-table { min-width: 920px; }
.analytics-table th { position: sticky; top: 0; z-index: 1; background: #101b2e; }
.analytics-table td strong, .analytics-table td small { display: block; }
.analytics-table td small { margin-top: 3px; color: var(--srm-text-secondary, #9dacbf); }
.analytics-table-panel > footer { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--srm-border-subtle, #1d2a43); }
.analytics-error { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px; }
.analytics-error .status-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(224, 117, 117, .42); border-radius: 50%; color: #f3b1b1; background: rgba(112, 31, 45, .22); font-weight: 800; }
.analytics-error p, .analytics-error small { color: var(--srm-text-secondary, #9dacbf); }
.analytics-error p { margin: 5px 0 2px; }
.analytics-integrity { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; }
.analytics-integrity div { display: grid; gap: 3px; }
.analytics-integrity small, .analytics-integrity > span:last-child { color: var(--srm-text-secondary, #9dacbf); }
.analytics-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.analytics-detail-list article { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--srm-border-subtle, #1d2a43); border-radius: 9px; background: rgba(9, 17, 31, .86); }
.analytics-detail-list span { color: var(--srm-text-secondary, #9dacbf); font-size: 12px; }

@media (max-width: 1180px) {
  .analytics-filter-grid, .analytics-advanced { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .analytics-report-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-filter-grid, .analytics-advanced, .analytics-grid { grid-template-columns: 1fr; }
  .analytics-filter-grid .button { width: 100%; }
  .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-panel > header, .analytics-table-panel > header { align-items: flex-start; flex-direction: column; }
  .analytics-bar-row { grid-template-columns: minmax(78px, 110px) minmax(80px, 1fr); }
  .analytics-bar-row > strong { grid-column: 2; }
  .analytics-integrity { grid-template-columns: auto minmax(0, 1fr); }
  .analytics-integrity > span:last-child { grid-column: 2; }
}

/* Protected platform developer workspace */
.developer-shell {
  position: relative;
  display: grid;
  gap: 16px;
  min-width: 0;
  padding-bottom: 28px;
}

.developer-shell::before {
  position: fixed;
  z-index: -1;
  top: 18%;
  right: 4%;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(58, 75, 102, .12);
  filter: blur(90px);
  content: "";
  pointer-events: none;
  animation: developer-breathe 9s ease-in-out infinite alternate;
}

@keyframes developer-breathe {
  from { opacity: .34; transform: translate3d(-3%, 2%, 0) scale(.92); }
  to { opacity: .72; transform: translate3d(3%, -2%, 0) scale(1.08); }
}

.developer-hero,
.developer-panel {
  border: 1px solid #252c36;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(18, 22, 29, .97), rgba(8, 11, 16, .98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

.developer-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 158px;
  padding: 26px 28px;
  overflow: hidden;
}

.developer-hero h3 {
  margin: 6px 0 8px;
  color: #f7f9fc;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: 0;
}

.developer-hero p {
  max-width: 700px;
  margin: 0;
  color: #aeb8c7;
  line-height: 1.55;
}

.developer-identity {
  display: grid;
  flex: 0 0 min(310px, 34%);
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid #303844;
  border-radius: 8px;
  background: #0a0e14;
}

.developer-identity span,
.developer-identity small {
  color: #8e9aaa;
  font-size: 12px;
}

.developer-identity strong {
  color: #f8fafc;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.developer-controls,
.developer-panel-head,
.developer-card-head,
.developer-card-actions,
.developer-row-actions {
  display: flex;
  align-items: center;
}

.developer-controls,
.developer-panel-head {
  justify-content: space-between;
  gap: 14px;
}

.developer-controls {
  min-width: 0;
}

.developer-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid #272e38;
  border-radius: 8px;
  background: #080b10;
}

.developer-tabs button {
  min-height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9ca7b6;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.developer-tabs button:hover,
.developer-tabs button.active {
  background: #1b212a;
  color: #fff;
}

.developer-search {
  display: flex;
  align-items: center;
  width: min(430px, 45vw);
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid #2b333e;
  border-radius: 8px;
  background: #0b0f15;
  color: #8692a2;
}

.developer-search svg {
  width: 17px;
  flex: 0 0 auto;
}

.developer-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: #f5f7fa;
  box-shadow: none;
}

.developer-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.developer-metric {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 86px;
  padding: 16px;
  border: 1px solid #242b34;
  border-radius: 8px;
  background: rgba(11, 15, 21, .94);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.developer-metric:hover,
.developer-metric:focus-visible {
  border-color: #46515f;
  background: #111720;
  transform: translateY(-1px);
}

.developer-metric-icon {
  display: grid;
  width: 42px;
  aspect-ratio: 1;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid #323b47;
  border-radius: 8px;
  background: #171d25;
  color: #dce4ee;
}

.developer-metric-icon svg {
  width: 20px;
}

.developer-metric div {
  display: grid;
  gap: 3px;
}

.developer-metric span {
  color: #9ca8b7;
  font-size: 12px;
}

.developer-metric strong {
  color: #fff;
  font-size: 23px;
}

.developer-metric small {
  color: #c0c9d4;
  font-size: 10px;
}

.developer-panel {
  min-width: 0;
  padding: 20px;
}

.developer-panel-head {
  margin-bottom: 16px;
}

.developer-panel-head h3,
.developer-intent-card h4,
.developer-account-section h4 {
  margin: 3px 0 0;
  color: #f7f9fc;
  letter-spacing: 0;
}

.developer-count {
  display: grid;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #303844;
  border-radius: 50%;
  background: #11161d;
  color: #fff;
  font-weight: 800;
}

.developer-load-more {
  display: flex;
  justify-content: center;
  padding-top: 14px;
}

.developer-release-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.developer-release-summary article {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 13px 15px;
  border: 1px solid #28303a;
  border-radius: 8px;
  background: #0b0f15;
}

.developer-release-summary span {
  color: #9da8b6;
  font-size: 12px;
}

.developer-release-summary strong {
  color: #f7f9fc;
  font-size: 22px;
}

.developer-release-list {
  display: grid;
  gap: 9px;
}

.developer-release-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 15px;
  border: 1px solid #272f39;
  border-radius: 8px;
  background: #090d12;
}

.developer-release-platform {
  display: grid;
  width: 48px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #343d49;
  border-radius: 8px;
  background: #171c23;
  color: #edf2f7;
}

.developer-release-platform svg {
  width: 21px;
}

.developer-release-copy {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.developer-release-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.developer-release-title strong {
  color: #f8fafc;
  font-size: 15px;
}

.developer-release-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #3a4451;
  border-radius: 999px;
  background: #161c24;
  color: #dce3eb;
  font-size: 11px;
  font-weight: 800;
}

.developer-release-status.is-published {
  border-color: #385449;
  color: #bce8d4;
}

.developer-release-status.is-scheduled {
  border-color: #48546a;
  color: #d5def0;
}

.developer-release-status.is-withdrawn {
  border-color: #5b3b41;
  color: #efc3ca;
}

.developer-release-copy p {
  margin: 0;
  color: #b4becb;
  line-height: 1.5;
}

.developer-release-copy dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
}

.developer-release-copy dl div {
  display: flex;
  min-width: 0;
  gap: 6px;
}

.developer-release-copy dt {
  color: #7f8b9a;
  font-size: 11px;
}

.developer-release-copy dd {
  margin: 0;
  color: #dce3eb;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.developer-security-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 13px;
  border: 1px solid #303945;
  border-radius: 8px;
  background: #10151c;
  color: #c3ccd7;
  line-height: 1.5;
}

.developer-security-note svg {
  width: 18px;
  flex: 0 0 18px;
  color: #dce4ee;
}

@media (max-width: 720px) {
  .developer-release-summary {
    grid-template-columns: 1fr;
  }

  .developer-release-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .developer-release-platform {
    width: 40px;
  }

  .developer-release-card > .developer-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .developer-release-copy dl,
  .developer-release-copy dl div {
    display: grid;
    gap: 2px;
  }
}

.developer-list {
  display: grid;
  gap: 7px;
}

.developer-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 66px;
  padding: 12px 14px;
  border: 1px solid #292c31;
  border-radius: 8px;
  background: #0a0b0d;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.developer-list-row:hover {
  border-color: #454950;
  background: #111214;
}

.developer-list-main,
.developer-list-meta {
  display: grid;
  gap: 4px;
}

.developer-list-main strong,
.developer-table strong {
  color: #f4f7fb;
}

.developer-list-main small,
.developer-list-meta time,
.developer-table small {
  color: #8e9aaa;
  font-size: 12px;
}

.developer-list-meta {
  flex: 0 0 auto;
  justify-items: end;
}

.developer-intent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.developer-intent-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid #292c31;
  border-radius: 8px;
  background: #0a0b0d;
}

.developer-card-head {
  justify-content: space-between;
  gap: 12px;
}

.developer-card-head time {
  color: #8995a5;
  font-size: 12px;
}

.developer-intent-card h4 {
  margin-top: 15px;
  font-size: 17px;
}

.developer-contact {
  margin: 7px 0 10px;
  color: #c7d0dc;
}

.developer-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.developer-contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid #303238;
  border-radius: 6px;
  color: #dce3ec;
  font-size: 12px;
  text-decoration: none;
}

.developer-contact-links svg {
  width: 14px;
}

.developer-selection,
.developer-message,
.developer-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #2a2d32;
  border-radius: 7px;
  background: #0e1013;
  color: #bdc7d4;
  line-height: 1.5;
}

.developer-message {
  white-space: pre-wrap;
}

.developer-note {
  color: #9ba7b6;
  font-size: 12px;
}

.developer-security-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0 0;
  padding: 11px 12px;
  border: 1px solid #303238;
  border-radius: 7px;
  background: #0d0f12;
  color: #c5cfdb;
  line-height: 1.45;
}

.developer-security-note svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: #9fb3ca;
}

.developer-delivery-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid #2a3440;
  border-radius: 7px;
  background: #10151c;
  color: #c5cfdb;
  font-size: 12px;
}

.developer-delivery-state svg {
  width: 16px;
  height: 16px;
  color: #9fb3ca;
}

.developer-delivery-state[data-state="failed"] {
  border-color: #5a3440;
  color: #f0c8d0;
}

.developer-card-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 15px;
}

.developer-toolbar-actions,
.developer-key-tools,
.developer-modal-actions {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.developer-key-tools {
  align-items: stretch;
}

.developer-key-tools .button {
  flex: 1 1 170px;
  justify-content: center;
}

.developer-key-link {
  display: grid;
  gap: 3px;
  max-width: 260px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.developer-key-link:hover strong,
.developer-key-link:focus-visible strong {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.developer-linked-key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #303946;
  border-radius: 8px;
  background: #0c1117;
}

.developer-linked-key.compact {
  justify-content: flex-start;
  margin-top: 10px;
  color: #d5dde7;
  font-size: 12px;
}

.developer-linked-key svg {
  width: 16px;
  height: 16px;
}

.developer-linked-key > div {
  display: grid;
  gap: 4px;
}

.developer-linked-key span,
.developer-history > h4 {
  color: #919dac;
  font-size: 12px;
}

.developer-linked-key strong {
  color: #f4f6f9;
}

.developer-history {
  padding: 13px;
  border: 1px solid #262e38;
  border-radius: 8px;
  background: #0c1016;
}

.developer-history > h4 {
  margin: 0;
  color: #dce3ec;
  font-size: 14px;
}

.developer-filter {
  display: grid;
  gap: 5px;
  color: #8f9baa;
  font-size: 12px;
}

.developer-filter select {
  min-width: 190px;
}

.developer-intent-heading {
  align-items: center;
}

.developer-result-count {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border: 1px solid #2b333e;
  border-radius: 7px;
  background: #0b0f15;
  color: #919dac;
  font-size: 12px;
}

.developer-result-count strong {
  color: #f5f7fa;
  font-size: 14px;
}

.developer-intent-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) minmax(150px, .7fr) minmax(160px, .8fr) minmax(176px, auto);
  align-items: end;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #252d37;
  border-radius: 8px;
  background: #090d12;
}

.developer-intent-search {
  width: 100%;
}

.developer-intent-tools .developer-filter select {
  width: 100%;
  min-width: 0;
}

.developer-sort-direction {
  min-height: 44px;
  justify-content: center;
  white-space: nowrap;
}

.developer-sort-direction svg {
  width: 17px;
  height: 17px;
}

.developer-intent-resultbar {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #8f9baa;
  font-size: 12px;
}

.developer-intent-resultbar > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.developer-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #252d37;
  border-radius: 8px;
  background: #090d12;
}

.developer-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.developer-table th,
.developer-table td {
  padding: 12px 13px;
  border-bottom: 1px solid #222a33;
  color: #c4ceda;
  text-align: left;
  vertical-align: middle;
}

.developer-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: #11161d;
  color: #9eabb9;
  font-size: 12px;
  font-weight: 800;
}

.developer-table tbody tr:hover {
  background: #10161e;
}

.developer-table tbody tr:last-child td {
  border-bottom: 0;
}

.developer-table td > span,
.developer-table td > strong,
.developer-table td > small {
  display: block;
}

.developer-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid #3a4451;
  border-radius: 999px;
  background: #171d25;
  color: #dbe3ed;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.developer-status[data-state="new"],
.developer-status[data-state="not_activated"] {
  border-color: #566374;
  background: #1c232c;
}

.developer-status[data-state="paid"],
.developer-status[data-state="active"],
.developer-status[data-state="approved"] {
  border-color: #40574d;
  background: #15221d;
  color: #d8e9df;
}

.developer-status[data-state="rejected"],
.developer-status[data-state="revoked"],
.developer-status[data-state="blocked"] {
  border-color: #654348;
  background: #251719;
  color: #f2dadd;
}

.developer-row-actions {
  justify-content: flex-end;
  gap: 6px;
}

.developer-modal-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid #303946;
  border-radius: 8px;
  background: #11171f;
  color: #c5cfdb;
  line-height: 1.45;
}

.developer-modal-note svg {
  width: 19px;
  flex: 0 0 19px;
}

.developer-secret {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border: 1px solid #3b4654;
  border-radius: 8px;
  background: #080b10;
}

.developer-secret code {
  min-width: 0;
  flex: 1;
  color: #fff;
  font-size: clamp(13px, 2.2vw, 18px);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.developer-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.developer-detail-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border: 1px solid #262e38;
  border-radius: 7px;
  background: #0c1016;
}

.developer-detail-grid span {
  color: #8995a5;
  font-size: 11px;
}

.developer-detail-grid strong {
  color: #eef2f7;
  overflow-wrap: anywhere;
}

.developer-account-section {
  padding: 13px;
  border: 1px solid #262e38;
  border-radius: 8px;
  background: #0c1016;
}

.developer-account-section p {
  margin: 7px 0 0;
}

.developer-mini-list {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

.developer-mini-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #222a33;
}

.developer-mini-list small {
  color: #8f9baa;
}

@media (max-width: 980px) {
  .developer-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .developer-intent-grid {
    grid-template-columns: 1fr;
  }

  .developer-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .developer-search {
    width: 100%;
  }

  .developer-intent-tools {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .developer-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 19px;
  }

  .developer-identity {
    flex-basis: auto;
  }

  .developer-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .developer-tabs button {
    padding-inline: 8px;
  }

  .developer-metrics {
    grid-template-columns: 1fr;
  }

  .developer-panel {
    padding: 14px;
  }

  .developer-toolbar,
  .developer-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .developer-filter select {
    width: 100%;
  }

  .developer-intent-tools {
    grid-template-columns: 1fr;
  }

  .developer-intent-resultbar {
    align-items: stretch;
    flex-direction: column;
  }

  .developer-intent-resultbar .button {
    width: 100%;
    justify-content: center;
  }

  .developer-detail-grid {
    grid-template-columns: 1fr;
  }

  .developer-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .developer-card-actions .button {
    width: 100%;
  }

  .developer-toolbar-actions,
  .developer-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .developer-toolbar-actions .button,
  .developer-modal-actions .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .developer-shell::before {
    animation: none;
  }
}
/* End protected platform developer workspace */

@media (max-width: 640px) {
  .product-access-grid { grid-template-columns: 1fr; }
  .activation-form { grid-template-columns: 1fr; }
  .activation-form .button { width: 100%; }
}
@media (max-width: 430px) {
  .analytics-report-menu { grid-template-columns: 1fr; }
  .analytics-kpis, .analytics-detail-list { grid-template-columns: 1fr; }
  .analytics-toolbar, .analytics-panel { padding: 12px; }
  .analytics-actions .button, .analytics-export-actions .button { flex: 1 1 calc(50% - 8px); }
  .analytics-error { grid-template-columns: auto minmax(0, 1fr); }
  .analytics-error .button { grid-column: 1 / -1; width: 100%; }
}

/* Stage 19 finance and settlements */
.finance-shell { display: grid; gap: 14px; min-width: 0; }
.finance-toolbar { display: grid; gap: 12px; min-width: 0; }
.finance-period, .finance-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.finance-period { justify-content: flex-end; }
.finance-period input { width: 150px; min-height: 38px; }
.finance-metrics, .finance-bank-result { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.finance-metrics article, .finance-metrics button, .finance-bank-result article, .finance-account-grid article, .finance-reference-grid article, .finance-section { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); }
.finance-metrics article, .finance-metrics button, .finance-bank-result article { display: grid; gap: 7px; min-height: 92px; padding: 14px; color: inherit; text-align: left; }
.finance-metrics button { cursor: pointer; }
.finance-metrics button:hover, .finance-metrics button:focus-visible { border-color: var(--srm-border-strong, #34517c); background: var(--surface-2); outline: none; }
.finance-metrics span, .finance-bank-result span { color: var(--text-secondary); font-size: 12px; }
.finance-metrics strong, .finance-bank-result strong { color: var(--text); font-size: 19px; overflow-wrap: anywhere; }
.finance-section { padding: 16px; min-width: 0; }
.finance-account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.finance-account-grid article { padding: 14px; }
.finance-account-grid h3 { margin: 10px 0 6px; color: var(--text); }
.finance-account-grid p, .finance-account-grid small { color: var(--text-secondary); }
.finance-reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.finance-reference-grid article { padding: 14px; }
.finance-reference-grid article > p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 0; border-top: 1px solid var(--border); color: var(--text); }
.finance-reference-grid article > p span { color: var(--text-secondary); }
.finance-ledger { display: grid; gap: 8px; }
.finance-ledger article { display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(130px, auto); align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.finance-ledger article div { display: grid; gap: 3px; }
.finance-ledger small, .finance-ledger time { color: var(--text-secondary); }
.finance-ledger span { color: var(--text); font-weight: 700; }
.finance-chart-switch { display: flex; flex-wrap: wrap; gap: 7px; }
.finance-chart { display: grid; gap: 9px; min-height: 150px; align-content: start; }
.finance-chart > div:not(.empty-state) { display: grid; grid-template-columns: minmax(86px, 120px) minmax(120px, 1fr) minmax(110px, auto); align-items: center; gap: 10px; }
.finance-chart time { color: var(--text-secondary); }
.finance-chart i { height: 10px; overflow: hidden; border-radius: 99px; background: rgba(84, 96, 123, .16); }
.finance-chart i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #69647f, #9892b5); }
.finance-chart i b.negative { background: linear-gradient(90deg, #80535d, #aa6e79); }
.finance-chart strong { color: var(--text); text-align: right; }
.finance-table { min-width: 1040px; }
.finance-table td small { display: block; margin-top: 4px; color: var(--text-secondary); }
.finance-allocation-editor { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.finance-allocation-editor h3 { margin: 0 0 12px; }
.finance-rights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.finance-rights-grid .check-row { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
@media (max-width: 1100px) {
  .finance-toolbar { align-items: stretch; flex-direction: column; }
  .finance-metrics, .finance-bank-result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .finance-period { align-items: stretch; flex-direction: column; }
  .finance-period input, .finance-period .button { width: 100%; }
  .finance-metrics, .finance-bank-result, .finance-account-grid, .finance-reference-grid, .finance-rights-grid { grid-template-columns: 1fr; }
  .finance-ledger article { grid-template-columns: 1fr; }
  .finance-section { padding: 12px; }
}
/* Stage 12 pricing engine */
.pricing-shell { display: grid; gap: 14px; }
.pricing-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(9, 18, 34, .84); }
.pricing-toolbar h3 { margin: 0 0 5px; }
.pricing-toolbar p { max-width: 720px; margin: 0; color: var(--text-muted); line-height: 1.5; }
.pricing-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pricing-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pricing-metrics span { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 20, 38, .76); color: var(--text-muted); }
.pricing-metrics strong { color: var(--text); font-size: 18px; }
.pricing-tabs { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7, 14, 27, .82); overflow-x: auto; }
.pricing-tabs button { min-height: 38px; padding: 8px 16px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.pricing-tabs button.active { border-color: rgba(128, 119, 255, .42); background: rgba(96, 82, 210, .2); color: var(--text); }
.pricing-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.pricing-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 20, 38, .78); }
.pricing-card h3 { margin: 12px 0 6px; }
.pricing-card p { margin: 0 0 10px; color: var(--text); }
.pricing-card small { color: var(--text-muted); }
.pricing-history { display: grid; gap: 9px; }
.pricing-history article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(9, 18, 34, .78); }
.pricing-history article div { display: grid; gap: 3px; }
.pricing-history article span, .pricing-history article small, .pricing-history article p { color: var(--text-muted); }
.pricing-history article p { grid-column: 1 / -1; margin: 0; }
.pricing-table { min-width: 1080px; table-layout: fixed; }
.pricing-table th, .pricing-table td { padding: 13px 12px; vertical-align: top; overflow-wrap: anywhere; }
.pricing-table th:nth-child(1) { width: 22%; }
.pricing-table th:nth-child(2) { width: 11%; }
.pricing-table th:nth-child(3), .pricing-table th:nth-child(4) { width: 11%; }
.pricing-table th:nth-child(5) { width: 18%; }
.pricing-table th:nth-child(6) { width: 15%; }
.pricing-table th:nth-child(7) { width: 12%; }
.pricing-table td strong, .pricing-table td small { display: block; }
.pricing-table td small { margin-top: 4px; color: var(--text-muted); line-height: 1.35; }

@media (max-width: 880px) {
  .pricing-toolbar { display: grid; }
  .pricing-actions { justify-content: flex-start; }
  .pricing-metrics { grid-template-columns: 1fr; }
}

/* Stage 13 inventory ledger */
.inventory-shell { display: grid; gap: 14px; min-width: 0; }
.inventory-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 20, 38, .78); }
.inventory-toolbar h3 { margin: 0 0 6px; }
.inventory-toolbar p { max-width: 720px; margin: 0; color: var(--text-muted); line-height: 1.45; }
.inventory-toolbar-actions, .inventory-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.inventory-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.inventory-metrics span { display: flex; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 17, 32, .78); color: var(--text-muted); }
.inventory-metrics strong { color: var(--text); font-size: 18px; }
.inventory-sort-control { display: flex; justify-content: flex-end; }
.inventory-sort-control label { display: grid; grid-template-columns: auto minmax(190px, 240px); align-items: center; gap: 10px; color: var(--text-muted); font-size: 12px; }
.inventory-sort-control select { min-width: 0; }
.inventory-table { min-width: 760px; }
.inventory-table td, .inventory-table th { vertical-align: top; }
.inventory-table td small, .inventory-table td strong { display: block; }
.inventory-table td small { margin-top: 4px; color: var(--text-muted); }
.inventory-documents-table { width: 100%; min-width: 0; table-layout: fixed; }
.inventory-documents-table th, .inventory-documents-table td { padding-right: 10px; padding-left: 10px; }
.inventory-documents-table th:nth-child(1) { width: 5%; }
.inventory-documents-table th:nth-child(2) { width: 15%; }
.inventory-documents-table th:nth-child(3) { width: 12%; }
.inventory-documents-table th:nth-child(4) { width: 22%; }
.inventory-documents-table th:nth-child(5) { width: 9%; }
.inventory-documents-table th:nth-child(6) { width: 19%; }
.inventory-documents-table th:nth-child(7) { width: 18%; }
.inventory-documents-table td { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .inventory-documents-table { min-width: 760px; }
}
.table-link { padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.table-link strong, .table-link small { display: block; }
.table-link small { margin-top: 4px; color: var(--text-muted); line-height: 1.35; }
.table-link:hover strong { color: var(--accent); }
.inventory-ledger { display: grid; gap: 9px; }
.inventory-ledger article { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, .5fr); gap: 5px 14px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 17, 32, .78); }
.inventory-ledger article div { display: grid; gap: 3px; }
.inventory-ledger article p { grid-column: 1 / -1; margin: 0; color: var(--text); }
.inventory-ledger article small, .inventory-ledger article span { color: var(--text-muted); }
.inventory-document-summary { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 17, 32, .78); }
.inventory-document-summary .badge { width: fit-content; }
.inventory-document-summary p { margin: 0; color: var(--text-muted); }
.inventory-document-relation { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inventory-document-relation .table-link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.inventory-document-lines { display: grid; gap: 10px; }
.inventory-document-line { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7, 12, 22, .92); }
.inventory-line-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inventory-document-line label small { display: block; margin-top: 5px; color: var(--text-muted); overflow-wrap: anywhere; }
.inventory-new-product-note { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.inventory-explainer { display: flex; gap: 8px 18px; align-items: baseline; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-1); }
.inventory-explainer span { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.inventory-detail-grid, .inventory-balance-meaning { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inventory-detail-grid article, .inventory-balance-meaning article { display: grid; gap: 5px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-1); }
.inventory-detail-grid span, .inventory-balance-meaning span { color: var(--text-muted); font-size: 11px; }
.inventory-detail-grid strong, .inventory-balance-meaning strong { overflow-wrap: anywhere; color: var(--text); }
.inventory-balance-meaning { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.inventory-balance-meaning small { color: var(--text-secondary); line-height: 1.35; }
.inventory-ledger.detail { max-height: 330px; overflow: auto; }
body:has(.inventory-document-lines) .modal-card { width: min(920px, 100%); }
body:has(.inventory-balance-meaning) .modal-card { width: min(980px, 100%); }

@media (max-width: 760px) {
  .inventory-explainer { display: grid; }
  .inventory-sort-control, .inventory-sort-control label { display: grid; grid-template-columns: 1fr; }
  .inventory-detail-grid, .inventory-balance-meaning { grid-template-columns: 1fr; }
}

.loyalty-overview { display: grid; gap: 14px; }
.loyalty-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.loyalty-summary article { display: grid; gap: 6px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-1); }
.loyalty-summary span, .loyalty-summary small { color: var(--text-muted); }
.loyalty-summary strong { color: var(--text); font-size: 21px; overflow-wrap: anywhere; }
.loyalty-overview-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) { .loyalty-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .loyalty-summary { grid-template-columns: 1fr; } }

.documents-shell { display: grid; gap: 18px; min-width: 0; }
.document-tabs { width: fit-content; max-width: 100%; padding: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(7, 13, 24, .92); scrollbar-width: none; }
.document-tabs .tab { border: 1px solid transparent; color: var(--text-muted); background: transparent; }
.document-tabs .tab:hover, .document-tabs .tab:focus-visible { color: var(--text); border-color: rgba(128, 145, 174, .28); background: rgba(22, 32, 51, .72); }
.document-tabs .tab.active { color: var(--text); border-color: rgba(154, 143, 179, .42); background: rgba(39, 38, 55, .96); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025); }
.document-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8, 17, 32, .86); }
.document-toolbar > p { flex: 1 1 360px; margin: 0; align-self: center; }
.document-toolbar label { min-width: 170px; }
.document-toolbar .button { margin-left: auto; }
.document-grid, .document-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.document-grid > .empty-state, .document-template-grid > .empty-state { grid-column: 1 / -1; min-height: 170px; }
.document-card, .document-template-card { min-width: 0; padding: 16px; border: 1px solid rgba(128, 145, 174, .24); border-radius: 12px; background: linear-gradient(145deg, rgba(15, 25, 43, .96), rgba(8, 15, 29, .98)); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.document-card { cursor: pointer; transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.document-card:hover, .document-card:focus-visible { border-color: rgba(141, 153, 184, .52); transform: translateY(-1px); outline: none; }
.document-card p, .document-template-card p { margin: 13px 0; color: var(--text-muted); overflow-wrap: anywhere; }
.document-kind { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 12px; }
.document-card-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-muted); }
.document-card-foot strong { color: var(--text); }
.document-provenance { display: block; width: fit-content; margin-top: 12px; padding: 5px 8px; border: 1px solid rgba(150, 160, 180, .28); border-radius: 6px; color: var(--text-muted); font-size: 11px; }
.document-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.document-detail-grid article { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 17, 32, .78); }
.document-detail-grid span { color: var(--text-muted); font-size: 12px; }
.document-readonly { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid rgba(148, 163, 184, .28); border-radius: 10px; color: var(--text-muted); background: rgba(17, 24, 39, .8); }
body:has(.document-preview-shell) .modal-card { width: min(1100px, 100%); max-height: calc(100dvh - 32px); }
body:has(.document-preview-shell) .modal-form { display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.document-preview-shell { display: grid; place-items: stretch; min-width: 0; min-height: min(70vh, 800px); padding: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #07090d; }
.document-preview-shell iframe { display: block; width: 100%; height: min(70vh, 800px); border: 0; border-radius: 6px; background: #fff; box-shadow: 0 20px 48px rgba(0, 0, 0, .42); }
.document-template-card .inline-actions { flex-wrap: wrap; }
@media (max-width: 760px) {
  .document-toolbar { align-items: stretch; }
  .document-toolbar label, .document-toolbar .button { width: 100%; margin-left: 0; }
  .document-grid, .document-template-grid { grid-template-columns: 1fr; }
  .document-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:has(.document-preview-shell) .modal-card { max-height: calc(100dvh - 16px); }
  body:has(.document-preview-shell) .modal-form { padding: 10px; }
  .document-preview-shell { min-height: 62vh; padding: 6px; }
  .document-preview-shell iframe { height: 62vh; }
}
@media (max-width: 430px) { .document-detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 880px) {
  .inventory-toolbar { display: grid; }
  .inventory-metrics { grid-template-columns: 1fr; }
  .inventory-ledger article { grid-template-columns: 1fr; }
  .inventory-ledger article p { grid-column: auto; }
}
/* Stage 14 CRM */
.crm-shell { display: grid; gap: 16px; }
.crm-toolbar, .crm-controls, .crm-metrics, .crm-row, .crm-duplicate-card, .crm-detail-grid article, .crm-merge-grid article { background: var(--srm-surface-1, #0c1629); border: 1px solid var(--srm-border-default, #243553); border-radius: 12px; }
.crm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; }
.crm-toolbar h3, .crm-duplicate-card h3, .crm-detail-grid h3, .crm-merge-grid h3 { margin: 0 0 6px; color: var(--srm-text-primary, #f5f7ff); }
.crm-toolbar p, .crm-row span, .crm-duplicate-card p, .crm-merge-grid p { margin: 0; color: var(--srm-text-secondary, #9dacbf); }
.crm-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.crm-metrics span { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; color: var(--srm-text-secondary, #9dacbf); }
.crm-metrics span + span { border-left: 1px solid var(--srm-border-subtle, #1d2a43); }
.crm-metrics strong { color: var(--srm-text-primary, #f5f7ff); }
.crm-controls { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; align-items: end; gap: 14px; padding: 12px; }
.crm-search { display: grid; gap: 5px; color: var(--srm-text-secondary, #9dacbf); font-size: 12px; }
.crm-controls .check-row { display: flex; align-items: center; align-self: end; gap: 8px; min-height: 42px; padding: 0 8px; }
.crm-controls .check-row input { flex: 0 0 18px; width: 18px; height: 18px; min-width: 18px; min-height: 18px; margin: 0; accent-color: var(--srm-accent, #7167ff); }
.crm-list, .crm-duplicate-list { display: grid; gap: 10px; }
.crm-row { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.crm-row:hover, .crm-row:focus-visible { border-color: var(--srm-accent, #7167ff); background: var(--srm-surface-2, #111d33); outline: none; transform: translateY(-1px); }
.crm-row-main, .crm-row-contact, .crm-row-status { min-width: 0; display: grid; gap: 5px; }
.crm-row-main strong { color: var(--srm-text-primary, #f5f7ff); overflow-wrap: anywhere; }
.crm-row-contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-row-status { justify-items: end; }
.crm-chips, .crm-role-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-role-picker { gap: 16px; padding: 4px 0; }
.crm-role-picker .check-row { display: flex; align-items: center; gap: 8px; }
.crm-role-picker .check-row input { flex: 0 0 18px; width: 18px; height: 18px; min-width: 18px; min-height: 18px; margin: 0; accent-color: var(--srm-accent, #7167ff); }
.crm-chip { width: fit-content; padding: 3px 7px; border: 1px solid var(--srm-border-default, #243553); border-radius: 999px; color: var(--srm-text-secondary, #9dacbf); font-size: 11px; }
.crm-duplicate-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; }
.crm-detail-grid, .crm-merge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.crm-detail-grid article, .crm-merge-grid article { padding: 14px; }
.crm-timeline { display: grid; gap: 8px; margin: 10px 0; padding: 0; list-style: none; }
.crm-timeline li { padding: 9px 10px; border: 1px solid var(--srm-border-subtle, #1d2a43); border-radius: 8px; color: var(--srm-text-secondary, #9dacbf); }
.crm-timeline li div { display: flex; justify-content: space-between; gap: 10px; }
.crm-timeline strong { color: var(--srm-text-primary, #f5f7ff); }
@media (max-width: 1100px) { .crm-controls { grid-template-columns: 1fr 1fr; } .crm-controls .pricing-tabs { grid-column: 1 / -1; } .crm-row { grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr); } .crm-row-status { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; } }
@media (max-width: 600px) { .crm-toolbar, .crm-duplicate-card { align-items: stretch; flex-direction: column; } .crm-metrics, .crm-controls, .crm-row, .crm-detail-grid, .crm-merge-grid { grid-template-columns: 1fr; } .crm-metrics span + span { border-left: 0; border-top: 1px solid var(--srm-border-subtle, #1d2a43); } .crm-controls .pricing-tabs, .crm-row-status { grid-column: auto; } .crm-row-status { justify-items: stretch; } .crm-row-contact span { white-space: normal; overflow-wrap: anywhere; } }

/* Stage 15 customer orders */
.order-filters, .order-summary { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 14px; border: 1px solid var(--srm-border-default, #243553); border-radius: 10px; background: var(--srm-surface-1, #0c1629); }
.order-filters label { width: min(280px, 100%); }
.order-summary span { flex: 1 1 260px; color: var(--srm-text-secondary, #9dacbf); }
.order-summary strong { color: var(--srm-text-primary, #f5f7ff); }
.order-quantity { width: 112px; min-width: 92px; }
.order-row small { color: var(--srm-text-secondary, #9dacbf); }
body:has(.order-lines-table) .modal-card { width: min(900px, 100%); }
.order-lines-table { width: 100%; table-layout: fixed; }
.order-lines-table th, .order-lines-table td { padding: 10px 12px; text-align: left; vertical-align: middle; }
.order-lines-table th:nth-child(1) { width: 28%; }
.order-lines-table th:nth-child(2) { width: 14%; }
.order-lines-table th:nth-child(3) { width: 22%; }
.order-lines-table th:nth-child(4), .order-lines-table th:nth-child(5) { width: 18%; }
.order-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.order-row { position: relative; padding-left: 48px; }
.order-select { position: absolute; left: 14px; top: 16px; width: 22px; height: 22px; display: grid; place-items: center; }
.order-select input { width: 17px; height: 17px; min-height: 0; }
.order-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.order-board-column { min-width: 0; padding: 10px; border: 1px solid var(--srm-border-default, #243553); border-radius: 10px; background: var(--srm-surface-1, #0c1629); }
.order-board-column > header { display: flex; justify-content: space-between; gap: 10px; padding: 4px 4px 12px; color: var(--srm-text-primary, #f5f7ff); }
.order-board-column .order-row { grid-template-columns: 1fr; margin-bottom: 8px; }
.order-board-column .crm-row-contact, .order-board-column .crm-row-status { justify-items: start; }
@media (max-width: 600px) {
  .order-board { grid-auto-columns: minmax(270px, 88vw); }
  .modal-layer { padding: 8px; }
  .modal-form { padding: 14px 14px 18px; }
  .order-lines-wrap { overflow: visible; }
  .order-lines-table, .order-lines-table tbody, .order-lines-table tr, .order-lines-table td { display: block; width: 100%; min-width: 0; }
  .order-lines-table thead { display: none; }
  .order-lines-table tr { padding: 8px 10px; border: 1px solid var(--srm-border-subtle, #1d2a43); border-radius: 9px; }
  .order-lines-table td { display: grid; grid-template-columns: minmax(95px, .8fr) minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 0; border: 0; overflow-wrap: anywhere; }
  .order-lines-table td::before { content: attr(data-label); color: var(--srm-text-secondary, #9dacbf); font-size: 12px; }
  .order-lines-table .order-quantity { width: 100%; }
}

/* Services and delivery operations */
.delivery-controls, .production-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--srm-border-default); border-radius: 10px; background: var(--srm-surface-1); }
.delivery-controls { flex-wrap: wrap; }
.delivery-controls label { flex: 1 1 180px; min-width: 0; }
.delivery-controls .check-item.compact { flex: 0 1 auto; min-height: 40px; white-space: nowrap; }
.delivery-grid, .service-grid, .template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.delivery-card, .service-card { min-width: 0; padding: 16px; border: 1px solid var(--srm-border-default); border-radius: 10px; background: var(--srm-surface-1); color: var(--srm-text-primary); }
.delivery-card { display: grid; gap: 12px; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.delivery-card:hover, .delivery-card:focus-visible { border-color: var(--srm-accent); background: var(--srm-surface-2); outline: none; transform: translateY(-1px); }
.service-card { display: grid; gap: 10px; }
.service-card p, .delivery-card p { margin: 0; color: var(--srm-text-secondary); }
.service-category-row, .delivery-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--srm-text-secondary); font-size: 13px; }
.delivery-address { overflow-wrap: anywhere; line-height: 1.45; }
.delivery-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.delivery-detail-grid article { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid var(--srm-border-subtle); border-radius: 9px; background: var(--srm-surface-1); }
.delivery-detail-grid article span, .delivery-detail-grid article small { color: var(--srm-text-secondary); }
.delivery-detail-grid article strong { overflow-wrap: anywhere; color: var(--srm-text-primary); }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check-item { display: flex !important; flex-direction: row !important; align-items: center; gap: 9px; min-height: 42px; padding: 9px 11px; border: 1px solid var(--srm-border-subtle); border-radius: 8px; background: var(--srm-surface-1); color: var(--srm-text-secondary); }
.check-item input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--srm-accent); }
.delivery-editor-section { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--srm-border-subtle); border-radius: 10px; background: var(--srm-surface-0); }
.delivery-editor-section h3 { margin: 0; color: var(--srm-text-primary); font-size: 15px; }

@media (max-width: 760px) {
  .production-toolbar, .delivery-controls { align-items: stretch; flex-direction: column; }
  .delivery-grid, .service-grid, .template-grid, .delivery-detail-grid, .check-grid { grid-template-columns: 1fr; }
  .delivery-controls label { width: 100%; }
}

/* Stage 25 API, webhooks and integrations */
.integration-shell { display: grid; gap: 14px; min-width: 0; color: var(--srm-text-primary, #f5f7ff); }
.integration-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.integration-summary article, .integration-panel, .integration-toolbar, .integration-card { border: 1px solid var(--srm-border-default, #243553); border-radius: 10px; background: var(--srm-surface-1, #0c1629); }
.integration-summary article { display: grid; gap: 5px; min-width: 0; padding: 15px; }
.integration-summary span, .integration-summary small, .integration-card small, .integration-card p, .integration-toolbar small { color: var(--srm-text-secondary, #9dacbf); }
.integration-summary strong { color: var(--srm-text-primary, #f5f7ff); font-size: 25px; }
.integration-tabs { display: flex; gap: 6px; padding: 5px; overflow-x: auto; border: 1px solid var(--srm-border-subtle, #1d2a43); border-radius: 9px; background: var(--srm-surface-0, #07101f); scrollbar-width: none; }
.integration-tabs::-webkit-scrollbar { display: none; }
.integration-tabs button { min-height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--srm-text-secondary, #9dacbf); font: inherit; white-space: nowrap; cursor: pointer; }
.integration-tabs button:hover, .integration-tabs button:focus-visible { border-color: var(--srm-border-default, #243553); color: var(--srm-text-primary, #f5f7ff); outline: none; }
.integration-tabs button.active { border-color: rgba(113,103,255,.58); background: rgba(113,103,255,.14); color: var(--srm-text-primary, #f5f7ff); }
.integration-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; }
.integration-toolbar > div { display: grid; gap: 5px; min-width: 0; }
.integration-toolbar strong { font-size: 16px; }
.integration-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 12px; }
.integration-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 15px; }
.integration-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--srm-border-default, #243553); border-radius: 8px; background: var(--srm-surface-2, #111d33); color: var(--srm-text-primary, #f5f7ff); font-size: 12px; font-weight: 800; }
.integration-card-body { display: grid; gap: 5px; min-width: 0; }
.integration-card-body strong, .integration-card-body p, .integration-card-body small { overflow-wrap: anywhere; }
.integration-card-body p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; }
.integration-card-actions { display: grid; justify-items: stretch; gap: 7px; }
.integration-badge, .integration-state { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; padding: 3px 8px; border: 1px solid var(--srm-border-default, #243553); border-radius: 999px; background: var(--srm-surface-0, #07101f); color: var(--srm-text-secondary, #9dacbf); font-size: 11px; }
.integration-state.active { border-color: rgba(108,151,255,.45); color: #dbe6ff; }
.integration-state.failed { border-color: rgba(232,94,112,.45); color: #ffbbc4; }
.integration-panel { min-width: 0; overflow: hidden; }
.integration-panel .data-table { min-width: 780px; }
.integration-panel td small { display: block; margin-top: 4px; color: var(--srm-text-secondary, #9dacbf); overflow-wrap: anywhere; }
.integration-row-actions { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.integration-error { display: flex; align-items: center; gap: 14px; padding: 18px; }
.integration-error > div { flex: 1; min-width: 0; }
.integration-error p { margin: 4px 0; color: var(--srm-text-secondary, #9dacbf); }
.integration-fieldset { margin: 0; padding: 12px; border: 1px solid var(--srm-border-default, #243553); border-radius: 9px; background: var(--srm-surface-0, #07101f); }
.integration-fieldset legend { padding: 0 7px; color: var(--srm-text-primary, #f5f7ff); }
.integration-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.one-time-secret { display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(113,103,255,.55); border-radius: 9px; background: var(--srm-surface-0, #07101f); }
.one-time-secret span { color: var(--srm-text-secondary, #9dacbf); line-height: 1.5; }
.one-time-secret code { display: block; max-height: 170px; padding: 13px; overflow: auto; border: 1px solid var(--srm-border-default, #243553); border-radius: 7px; background: #050a13; color: #eef2ff; font: 12px/1.6 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }
@media (max-width: 980px) { .integration-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .integration-card { grid-template-columns: 42px minmax(0, 1fr); } .integration-card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; } }
@media (max-width: 600px) { .integration-summary { grid-template-columns: 1fr 1fr; } .integration-summary article { padding: 12px; } .integration-summary strong { font-size: 21px; } .integration-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } .integration-tabs button { width: 100%; min-width: 0; padding-inline: 8px; } .integration-toolbar { align-items: stretch; flex-direction: column; } .integration-card-grid, .integration-check-grid { grid-template-columns: 1fr; } .integration-card { grid-template-columns: 38px minmax(0, 1fr); padding: 13px; } .integration-card-icon { width: 38px; height: 38px; } }

@media print {
  body * { visibility: hidden !important; }
  #entityForm, #entityForm * { visibility: visible !important; }
  #entityForm { position: absolute; inset: 0; color: #000 !important; background: #fff !important; }
  #entityForm table, #entityForm th, #entityForm td { color: #000 !important; border: 1px solid #000 !important; background: #fff !important; }
  #entityForm .form-row, #entityForm .form-actions, #entityForm .order-quantity { display: none !important; }
}

/* Stage 28 migration mapping wizard */
.migration-mapping-shell { display: grid; gap: 16px; min-width: 0; color: var(--text); }
.migration-mapping-hero, .migration-wizard-head, .migration-step-panel, .migration-wizard-footer, .migration-config-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(11, 13, 17, .94);
}
.migration-mapping-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px; }
.migration-mapping-hero h3, .migration-wizard-head h3, .migration-step-copy h3, .migration-step-form h3 { margin: 8px 0 6px; color: var(--text); }
.migration-mapping-hero p, .migration-step-copy > p, .migration-step-form > p { max-width: 820px; margin: 0; color: var(--text-secondary); line-height: 1.55; }
.migration-config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.migration-config-card { display: grid; gap: 7px; min-width: 0; padding: 16px; color: var(--text); text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.migration-config-card:hover, .migration-config-card:focus-visible { border-color: var(--border-strong); background: var(--surface-2); outline: none; transform: translateY(-1px); }
.migration-config-card strong, .migration-config-card small, .migration-config-card p { overflow-wrap: anywhere; }
.migration-config-card small, .migration-config-card p { margin: 0; color: var(--text-secondary); }
.migration-wizard-head { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; }
.migration-wizard-head > div { display: grid; gap: 3px; min-width: 0; }
.migration-wizard-head h3 { overflow-wrap: anywhere; }
.migration-wizard-head small { color: var(--text-muted); }
.migration-stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 7px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(5, 6, 8, .84); }
.migration-stepper button { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; min-height: 46px; padding: 7px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-muted); text-align: left; }
.migration-stepper button b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-1); color: var(--text-secondary); font-size: 12px; }
.migration-stepper button span { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.migration-stepper button:hover, .migration-stepper button:focus-visible { border-color: var(--border); color: var(--text); outline: none; }
.migration-stepper button.active { border-color: rgba(150, 145, 172, .52); background: rgba(139, 133, 158, .14); color: var(--text); }
.migration-stepper button.done b { border-color: rgba(117, 128, 153, .55); color: var(--text); }
.migration-step-panel { min-width: 0; padding: 20px; overflow: hidden; }
.migration-step-copy, .migration-step-form { display: grid; gap: 16px; min-width: 0; }
.migration-step-form label { display: grid; gap: 7px; color: var(--text-secondary); }
.migration-step-form input:not([type="checkbox"]):not([type="radio"]), .migration-step-form select { width: 100%; min-height: 42px; color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
.migration-summary-grid, .migration-confirm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 9px; }
.migration-summary-grid article, .migration-confirm-grid article { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.migration-summary-grid span, .migration-confirm-grid span { color: var(--text-muted); font-size: 12px; }
.migration-summary-grid strong, .migration-confirm-grid strong { color: var(--text); font-size: 18px; overflow-wrap: anywhere; }
.migration-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.migration-mode-card { display: grid !important; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px !important; min-height: 130px; padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); cursor: pointer; }
.migration-mode-card.active { border-color: rgba(150, 145, 172, .58); background: rgba(139, 133, 158, .12); }
.migration-mode-card input { width: 17px; height: 17px; min-height: 0; margin: 2px 0 0; accent-color: var(--accent); }
.migration-mode-card span { display: grid; gap: 8px; }
.migration-mode-card small { color: var(--text-secondary); line-height: 1.45; }
.mapping-note, .mapping-guard { padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: rgba(17, 20, 26, .9); color: var(--text-secondary); line-height: 1.45; }
.mapping-note.warning { border-color: rgba(245, 183, 95, .32); color: #e5c899; }
.mapping-guard { display: grid; gap: 5px; }
.mapping-guard strong { color: var(--text); }
.migration-setting-list { display: grid; gap: 8px; }
.migration-setting-list > label { grid-template-columns: minmax(180px, 1fr) minmax(220px, .6fr); align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-1); }
.migration-setting-list label > span { display: grid; gap: 4px; }
.migration-setting-list small { color: var(--text-muted); }
.migration-fields-head, .migration-run-head, .migration-run-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.migration-fields-head > div { display: grid; gap: 4px; }
.migration-fields-head small, .migration-run-footer { color: var(--text-secondary); }
.migration-field-list { display: grid; gap: 8px; }
.migration-field-row { display: grid; grid-template-columns: 1fr 1fr 150px 1fr 130px 38px; gap: 7px; align-items: center; padding: 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-1); }
.migration-field-row .button { width: 38px; height: 38px; padding: 0; }
.migration-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.migration-rule-grid article { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-1); }
.migration-rule-grid ol { min-height: 108px; margin: 0; padding-left: 20px; color: var(--text-secondary); line-height: 1.6; }
.migration-step-panel .table-scroll { max-width: 100%; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-1); }
.migration-step-panel .data-table { min-width: 760px; }
.migration-step-panel .data-table td small { display: block; margin-top: 4px; color: var(--text-muted); }
.migration-step-panel .data-table td select { width: 100%; min-width: 150px; margin: 2px 0; color: var(--text); background: var(--surface-2); }
.mapping-state { display: inline-flex; width: fit-content; padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: var(--surface-1); font-size: 11px; }
.mapping-state.ready { border-color: rgba(108, 151, 255, .38); color: #d8e3f8; }
.mapping-state.blocked { border-color: rgba(245, 183, 95, .38); color: #e5c899; }
.mapping-state.muted { color: var(--text-muted); }
.migration-confirm-check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px !important; padding: 13px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-1); }
.migration-confirm-check input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; accent-color: var(--accent); }
.migration-wizard-footer { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; box-shadow: 0 -12px 30px rgba(0,0,0,.24); }
.migration-wizard-footer span { color: var(--text-muted); text-align: center; }

@media (max-width: 1050px) {
  .migration-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .migration-mode-grid, .migration-rule-grid { grid-template-columns: 1fr; }
  .migration-mode-card { min-height: 0; }
  .migration-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .migration-field-row .button { width: 100%; }
}
@media (max-width: 620px) {
  .migration-mapping-hero, .migration-run-head, .migration-fields-head { align-items: stretch; flex-direction: column; }
  .migration-mapping-hero .button, .migration-run-head .button, .migration-fields-head .button { width: 100%; }
  .migration-wizard-head { display: grid; }
  .migration-stepper { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .migration-stepper button { flex: 0 0 152px; scroll-snap-align: start; }
  .migration-step-panel { padding: 14px; }
  .migration-setting-list > label, .migration-field-row { grid-template-columns: 1fr; }
  .migration-wizard-footer { grid-template-columns: 1fr 1fr; }
  .migration-wizard-footer span { grid-column: 1 / -1; grid-row: 1; }
}

/* Stage 29 server migration engine */
.migration-engine-shell { display: grid; gap: 16px; min-width: 0; color: var(--text); }
.migration-engine-hero, .migration-engine-detail-head, .migration-engine-overview, .migration-engine-section, .migration-engine-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(10, 12, 16, .94); box-shadow: var(--shadow-sm); }
.migration-engine-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px; }
.migration-engine-hero h3, .migration-engine-detail-head h3, .migration-engine-section h3 { margin: 7px 0 5px; color: var(--text); }
.migration-engine-hero p, .migration-engine-section header p { max-width: 850px; margin: 0; color: var(--text-secondary); line-height: 1.5; }
.migration-engine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.migration-engine-card { display: grid; gap: 9px; min-width: 0; padding: 16px; color: var(--text); text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.migration-engine-card:hover, .migration-engine-card:focus-visible { border-color: var(--border-strong); background: var(--surface-2); outline: none; transform: translateY(-1px); }
.migration-engine-card strong, .migration-engine-card small, .migration-engine-card p { overflow-wrap: anywhere; }
.migration-engine-card small, .migration-engine-card p { margin: 0; color: var(--text-secondary); }
.migration-engine-card-head, .migration-engine-detail-head, .migration-engine-actions, .migration-engine-section header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.migration-run-state { display: inline-flex; width: fit-content; max-width: 100%; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); font-size: 11px; line-height: 1.25; }
.migration-run-state.running, .migration-run-state.queued, .migration-run-state.retry { border-color: rgba(133, 143, 171, .56); color: #d8dcea; }
.migration-run-state.completed { border-color: rgba(93, 147, 125, .45); color: #c9ded5; }
.migration-run-state.failed, .migration-run-state.waiting_credentials, .migration-run-state.cancelled { border-color: rgba(184, 102, 112, .48); color: #efc9ce; }
.migration-engine-progress { height: 8px; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: rgba(3, 4, 6, .9); }
.migration-engine-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6f7182, #a3a6b8); transition: width .2s ease; }
.migration-engine-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 15px 16px; }
.migration-engine-detail-head > div:nth-child(2) { min-width: 0; }
.migration-engine-detail-head h3, .migration-engine-detail-head small { overflow-wrap: anywhere; }
.migration-engine-detail-head small { color: var(--text-secondary); }
.migration-engine-actions { justify-content: flex-end; flex-wrap: wrap; }
.migration-engine-overview { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(420px, 1.2fr); gap: 16px; padding: 16px; }
.migration-engine-meter { display: grid; align-content: center; gap: 11px; min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1); }
.migration-engine-meter > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.migration-engine-meter strong { color: var(--text); font-size: 27px; }
.migration-engine-meter span, .migration-engine-meter p { color: var(--text-secondary); }
.migration-engine-meter p { margin: 0; font-size: 12px; line-height: 1.45; }
.migration-engine-section { min-width: 0; overflow: hidden; }
.migration-engine-section header { padding: 15px 16px; border-bottom: 1px solid var(--border); }
.migration-engine-section .table-scroll { max-width: 100%; border: 0; border-radius: 0; background: var(--surface-1); }
.migration-engine-section .data-table { min-width: 720px; }
.migration-engine-section .data-table td small { display: block; margin-top: 4px; color: var(--text-muted); }

@media (max-width: 760px) {
  .migration-engine-hero { align-items: stretch; flex-direction: column; padding: 15px; }
  .migration-engine-hero .button { width: 100%; }
  .migration-engine-detail-head { grid-template-columns: 1fr; align-items: stretch; }
  .migration-engine-detail-head > .button { width: fit-content; }
  .migration-engine-actions { justify-content: stretch; }
  .migration-engine-actions .button { flex: 1 1 150px; }
  .migration-engine-overview { grid-template-columns: 1fr; padding: 12px; }
  .migration-engine-section header { align-items: flex-start; flex-direction: column; }
}

/* Stage 30 delta synchronization and controlled cutover */
.cutover-shell { display: grid; gap: 16px; min-width: 0; color: var(--text); }
.cutover-hero, .cutover-card, .cutover-detail-head, .cutover-summary, .cutover-section, .cutover-activated, .cutover-safety { border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(9, 11, 15, .96); box-shadow: var(--shadow-sm); }
.cutover-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px; }
.cutover-hero h3, .cutover-detail-head h3, .cutover-section h3 { margin: 7px 0 5px; color: var(--text); }
.cutover-hero p, .cutover-section header p { max-width: 900px; margin: 0; color: var(--text-secondary); line-height: 1.55; }
.cutover-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.cutover-card { display: grid; gap: 9px; min-width: 0; padding: 16px; color: var(--text); text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.cutover-card:hover, .cutover-card:focus-visible { border-color: var(--border-strong); background: var(--surface-2); outline: none; transform: translateY(-1px); }
.cutover-card-head, .cutover-section header, .cutover-check, .cutover-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cutover-card small, .cutover-card p { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.cutover-state { display: inline-flex; width: fit-content; max-width: 100%; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); font-size: 11px; line-height: 1.25; }
.cutover-state.activated, .cutover-state.passed, .cutover-state.created, .cutover-state.updated { border-color: rgba(103, 133, 123, .54); color: #d8e5df; }
.cutover-state.blocked, .cutover-state.waiting_credentials, .cutover-state.cancelled, .cutover-state.failed { border-color: rgba(170, 99, 109, .5); color: #efced2; }
.cutover-state.delta_queued, .cutover-state.delta_running, .cutover-state.final_delta_queued, .cutover-state.final_delta_running, .cutover-state.ready_to_activate { border-color: rgba(127, 137, 165, .58); color: #dde1ed; }
.cutover-direction { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; width: fit-content; color: var(--text-secondary); font-size: 13px; }
.cutover-direction b { color: var(--text); font-size: 18px; }
.cutover-direction small { color: var(--text-muted); }
.cutover-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, auto); align-items: center; gap: 14px; padding: 15px 16px; }
.cutover-detail-head > div:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.cutover-detail-head h3 { overflow-wrap: anywhere; }
.cutover-actions { justify-content: flex-end; flex-wrap: wrap; }
.cutover-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; overflow: hidden; padding: 1px; }
.cutover-summary article { display: grid; gap: 5px; min-width: 0; padding: 15px; background: var(--surface-1); }
.cutover-summary span { color: var(--text-muted); font-size: 12px; }
.cutover-summary strong { color: var(--text); font-size: 21px; overflow-wrap: anywhere; }
.cutover-section { min-width: 0; overflow: hidden; }
.cutover-section > header { padding: 15px 16px; border-bottom: 1px solid var(--border); }
.cutover-section > header > span { flex: 0 0 auto; color: var(--text-secondary); }
.cutover-check-list { display: grid; gap: 1px; padding: 1px; background: var(--border); }
.cutover-check { min-width: 0; padding: 12px 14px; background: var(--surface-1); }
.cutover-check > div:nth-child(2) { display: grid; flex: 1 1 auto; gap: 4px; min-width: 0; }
.cutover-check strong, .cutover-check small { overflow-wrap: anywhere; }
.cutover-check small { color: var(--text-secondary); }
.cutover-check-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-secondary); background: var(--surface-2); }
.cutover-check.passed .cutover-check-icon { border-color: rgba(103, 133, 123, .54); color: #d8e5df; }
.cutover-check.failed .cutover-check-icon { border-color: rgba(170, 99, 109, .5); color: #efced2; }
.cutover-auto { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; }
.cutover-check-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.cutover-section .table-scroll { max-width: 100%; border: 0; border-radius: 0; background: var(--surface-1); }
.cutover-section .data-table { min-width: 690px; }
.cutover-section .data-table td small { display: block; margin-top: 4px; color: var(--text-muted); }
.cutover-safety { display: grid; gap: 6px; padding: 14px; }
.cutover-safety strong { color: var(--text); }
.cutover-safety span { color: var(--text-secondary); line-height: 1.5; }
.cutover-activated { display: grid; gap: 5px; padding: 16px; border-color: rgba(103, 133, 123, .48); }
.cutover-activated strong { color: var(--text); }
.cutover-activated span { color: var(--text-secondary); }

@media (max-width: 1100px) {
  .cutover-detail-head { grid-template-columns: 1fr; align-items: stretch; }
  .cutover-detail-head > .button { width: fit-content; }
  .cutover-actions { justify-content: stretch; }
  .cutover-actions .button { flex: 1 1 150px; }
  .cutover-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .cutover-hero { align-items: stretch; flex-direction: column; padding: 15px; }
  .cutover-hero .button { width: 100%; }
  .cutover-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cutover-section > header, .cutover-check { align-items: flex-start; flex-direction: column; }
  .cutover-check { position: relative; padding-left: 52px; }
  .cutover-check-icon { position: absolute; left: 14px; top: 13px; }
  .cutover-check-actions { width: 100%; }
  .cutover-check-actions .button { flex: 1 1 0; }
}

.reconciliation-shell { display:grid; gap:16px; min-width:0; padding-bottom:28px; }
.reconciliation-hero,.reconciliation-detail-head,.reconciliation-section,.reconciliation-footer { background:linear-gradient(145deg,rgba(17,23,34,.98),rgba(9,14,23,.98)); border:1px solid var(--border); border-radius:8px; box-shadow:0 18px 48px rgba(0,0,0,.22); }
.reconciliation-hero { display:flex; justify-content:space-between; align-items:center; gap:22px; padding:24px; }
.reconciliation-hero h3,.reconciliation-detail-head h3,.reconciliation-section h3 { margin:6px 0; color:var(--text); }
.reconciliation-hero p,.reconciliation-section p { max-width:780px; margin:0; color:var(--text-secondary); line-height:1.55; }
.reconciliation-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px; }
.reconciliation-card { display:grid; gap:10px; min-width:0; padding:16px; text-align:left; color:var(--text); background:#0d1420; border:1px solid #273247; border-radius:8px; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.reconciliation-card:hover { transform:translateY(-1px); background:#111a28; border-color:#526281; }
.reconciliation-card>div { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.reconciliation-card span,.reconciliation-card small { color:var(--text-secondary); }
.reconciliation-card code,.reconciliation-footer code { overflow-wrap:anywhere; color:#c8d3e6; font-size:12px; }
.reconciliation-state,.severity-badge,.reconciliation-resolved,.reconciliation-signed { display:inline-flex; align-items:center; width:max-content; padding:4px 8px; border:1px solid #35445e; border-radius:999px; color:#d6deed; background:#172131; font-size:12px; font-weight:700; }
.reconciliation-state.blocked,.severity-badge { border-color:#6e4151; background:#2b1921; color:#ffccd5; }
.reconciliation-state.completed,.reconciliation-state.signed_off,.reconciliation-signed { border-color:#385274; background:#15243a; color:#cfe0fb; }
.reconciliation-detail-head { display:grid; grid-template-columns:auto minmax(220px,1fr) minmax(260px,auto); align-items:center; gap:16px; padding:18px; }
.reconciliation-actions,.reconciliation-finding-actions,.reconciliation-footer>div:last-child { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.reconciliation-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.reconciliation-summary article,.reconciliation-metric,.reconciliation-finance { min-width:0; padding:14px; background:#0d1420; border:1px solid #273247; border-radius:8px; }
.reconciliation-summary span,.reconciliation-metric span,.reconciliation-finance span { display:block; color:var(--text-secondary); font-size:12px; }
.reconciliation-summary strong,.reconciliation-metric strong,.reconciliation-finance strong { display:block; margin-top:6px; color:var(--text); font-size:21px; }
.reconciliation-section { min-width:0; padding:18px; }
.reconciliation-section>header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.reconciliation-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:9px; }
.reconciliation-metric small,.reconciliation-finance small { display:block; margin-top:5px; color:#94a3ba; }
.reconciliation-metric.mismatch { border-color:#6e4151; }
.reconciliation-finance-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:9px; }
.reconciliation-findings { display:grid; gap:9px; }
.reconciliation-finding { display:flex; align-items:center; justify-content:space-between; gap:14px; min-width:0; padding:14px; background:#0c131e; border:1px solid #29354a; border-left:3px solid #526281; border-radius:7px; }
.reconciliation-finding.error { border-left-color:#d28b56; }
.reconciliation-finding.blocker { border-left-color:#d06072; }
.reconciliation-finding.resolved { opacity:.7; }
.reconciliation-finding-main { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.reconciliation-finding-main>div { min-width:0; }
.reconciliation-finding-main strong { color:var(--text); }
.reconciliation-finding-main p { margin:4px 0; color:var(--text-secondary); overflow-wrap:anywhere; }
.reconciliation-finding-main small { color:#8fa0b9; }
.reconciliation-resolved { border-color:#3b506e; background:#151f2f; color:#cad5e7; }
.reconciliation-footer { position:sticky; bottom:0; z-index:4; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 16px; backdrop-filter:blur(18px); }
.reconciliation-footer strong { display:block; margin-bottom:4px; color:var(--text); }

@media (max-width:1024px) {
  .reconciliation-detail-head { grid-template-columns:auto 1fr; }
  .reconciliation-actions { grid-column:1/-1; justify-content:flex-start; }
  .reconciliation-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reconciliation-finding { align-items:flex-start; flex-direction:column; }
  .reconciliation-finding-actions { justify-content:flex-start; }
}
@media (max-width:600px) {
  .reconciliation-hero,.reconciliation-footer { align-items:stretch; flex-direction:column; }
  .reconciliation-detail-head { grid-template-columns:1fr; }
  .reconciliation-summary,.reconciliation-metrics,.reconciliation-finance-grid { grid-template-columns:1fr; }
  .reconciliation-section,.reconciliation-hero { padding:14px; }
  .reconciliation-actions,.reconciliation-footer>div:last-child { justify-content:flex-start; }
  .reconciliation-footer { position:relative; }
}

/* Stage 32 security, backups and data policy */
.security-center { display:grid; gap:16px; min-width:0; padding-bottom:28px; color:var(--text); }
.security-hero,.security-panel { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:linear-gradient(145deg,rgba(16,21,31,.98),rgba(8,12,19,.98)); box-shadow:0 18px 48px rgba(0,0,0,.22); }
.security-hero { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:22px; }
.security-hero h3,.security-panel h3 { margin:6px 0; color:var(--text); }
.security-hero p,.security-panel p { max-width:850px; margin:0; color:var(--text-secondary); line-height:1.55; }
.security-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.security-summary article { display:grid; gap:6px; min-width:0; padding:15px; border:1px solid #29344a; border-radius:8px; background:#0d1420; }
.security-summary span { color:var(--text-secondary); font-size:12px; }
.security-summary strong { color:var(--text); font-size:20px; overflow-wrap:anywhere; }
.security-panel>header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 18px; border-bottom:1px solid var(--border); }
.security-panel>header>div:first-child { min-width:0; }
.security-inline-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 18px; }
.security-panel>header .security-inline-actions { justify-content:flex-end; padding:0; }
.security-state { display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:4px 8px; border:1px solid #3a475f; border-radius:999px; background:#172131; color:#d7deeb; font-size:11px; line-height:1.25; text-align:center; }
.security-state.passed,.security-state.completed { border-color:#475a7a; background:#17243a; color:#dbe7fb; }
.security-state.failed,.security-state.review_required { border-color:#714455; background:#2b1921; color:#ffd0d8; }
.security-list { display:grid; gap:1px; padding:1px; background:var(--border); }
.security-list-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; padding:14px 17px; background:#0c131e; }
.security-list-row>div { display:grid; gap:5px; min-width:0; }
.security-list-row>div:last-child { justify-items:end; }
.security-list-row strong { color:var(--text); }
.security-list-row span,.security-list-row code { color:var(--text-secondary); overflow-wrap:anywhere; }
.security-list-row code { font-size:11px; }
.security-empty { padding:18px; color:var(--text-secondary); background:#0c131e; }
.security-audit-table { min-width:780px; }
.security-audit-table td small { display:block; max-width:280px; margin-top:4px; overflow:hidden; color:var(--text-muted); text-overflow:ellipsis; }
.security-audit-table code { color:#cbd5e7; font-size:11px; }
.security-retention-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:18px; }
.security-retention-form label { display:grid; gap:7px; min-width:0; color:var(--text-secondary); font-size:12px; }
.security-retention-form input { width:100%; min-width:0; color:var(--text); background:var(--surface-2); border-color:var(--border); }
.security-retention-form .button { align-self:end; min-height:42px; }

@media (max-width:1024px) {
  .security-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .security-retention-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .security-panel>header { align-items:flex-start; }
}
@media (max-width:600px) {
  .security-hero,.security-panel>header,.security-list-row { align-items:stretch; flex-direction:column; }
  .security-hero,.security-panel>header { padding:14px; }
  .security-summary,.security-retention-form { grid-template-columns:1fr; }
  .security-panel>header .security-inline-actions,.security-inline-actions { justify-content:stretch; padding:12px 14px; }
  .security-inline-actions .button,.security-panel>header>.button,.security-hero>.button { width:100%; }
  .security-list-row>div:last-child { justify-items:start; }
  .security-list-row .button { width:100%; }
}

/* Keep touch targets stable after feature-specific responsive rules. */
@media (max-width:600px) {
  :where(button, .button, .nav-item, .link-button, input:not([type="checkbox"]):not([type="radio"]), select, textarea, [role="button"]) {
    min-height:44px !important;
  }
}
.document-position-list { display: grid; gap: 12px; }
.document-position-row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; border: 1px solid rgba(132, 148, 176, .22); border-radius: 10px; background: rgba(9, 15, 25, .88); }
.document-position-row > .icon-button { position: absolute; top: 10px; right: 10px; z-index: 1; }
.document-position-remove { grid-column: 1 / -1; justify-self: end; }
.document-position-row > .wide { grid-column: 1 / -1; }
.document-position-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 9px 10px; border-radius: 8px; background: rgba(46, 57, 77, .28); color: var(--text-secondary); font-size: 12px; }
.document-guide { display: grid; gap: 5px; padding: 12px; border: 1px solid rgba(117, 128, 255, .28); border-radius: 10px; background: rgba(24, 27, 49, .72); color: var(--text-secondary); }
.document-guide strong { color: var(--text-primary); }
.document-guide small { margin-top: 4px; color: var(--text-muted); }
@media (max-width: 640px) { .document-position-row { grid-template-columns: 1fr; } .document-position-row > .wide, .document-position-meta { grid-column: 1; } }
.crm-type-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.crm-type-card {
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--border-strong, #344159);
  border-radius: 8px;
  background: #111722;
  color: #f4f7fb;
  text-align: left;
  cursor: pointer;
}

.crm-type-card:hover,
.crm-type-card:focus-visible {
  border-color: #7376d8;
  background: #171d2b;
  outline: none;
}

.crm-type-card strong,
.crm-type-card span {
  display: block;
}

.crm-type-card span {
  margin-top: 8px;
  color: #aebbd0;
  line-height: 1.45;
}

.crm-entity-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #293449);
  border-radius: 8px;
  background: #0f1520;
}

.crm-entity-heading p {
  margin: 0;
  color: #aebbd0;
}

@media (max-width: 640px) {
  .crm-type-choice { grid-template-columns: 1fr; }
}

/* Stage 34 / SRM Control stage 9: compact control dashboard and structure */
@media (max-width: 1024px) {
  .overview-grid,
  .system-build-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .overview-grid,
  .system-build-info {
    grid-template-columns: 1fr;
  }

  .overview-card {
    min-height: 112px;
  }

  .structure-summary {
    grid-template-columns: minmax(0, 1fr) 36px 18px;
    align-items: center;
  }

  .business-module-row {
    align-items: stretch;
    flex-direction: column;
  }

  .business-module-row .button {
    width: 100%;
  }
}

:root {
  --accent: #aeb5c0;
  --accent-2: #8f98a5;
  --focus: 0 0 0 3px rgba(174, 181, 192, 0.15);
}

body.srm-page :where(.button.primary, button.primary) {
  color: #f4f6f8;
  border-color: rgba(190, 197, 207, 0.25);
  background: linear-gradient(180deg, #2a2f37, #181c22);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.055);
}

body.srm-page :where(.nav-icon, .overview-card-icon, .module-icon) {
  color: var(--text-secondary);
  border-color: var(--border);
  background: linear-gradient(180deg, #171b22, #0e1116);
}

body.srm-page .nav-item.active .nav-icon {
  color: var(--text);
  border-color: rgba(200, 207, 216, 0.28);
  background: linear-gradient(180deg, #252a32, #14181e);
}

.loyalty-rule-scope {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.loyalty-rule-scope > div:first-child {
  display: grid;
  gap: 8px;
}

.loyalty-rule-scope p {
  margin: 0;
}

.loyalty-rule-scope select[multiple] {
  min-height: 184px;
  padding: 6px;
  background-image: none;
}

.loyalty-rule-scope select[multiple] option {
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 6px;
}

.loyalty-rule-scope select[multiple] option:checked {
  color: var(--text);
  background: #2a2f37 linear-gradient(180deg, #2a2f37, #20252c);
}

body.srm-page :where(.status, .badge, .pill) {
  color: var(--text-secondary);
}

body.srm-page .link-button {
  color: var(--text-secondary);
}

body.srm-page .link-button:hover,
body.srm-page .link-button:focus-visible {
  color: var(--text);
  text-decoration-color: rgba(222, 229, 238, 0.5);
}

body.srm-page .notification-panel {
  background: linear-gradient(180deg, #14171b, #090b0e);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.48);
}

body.srm-page .notification-panel header,
body.srm-page .notification-item {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.09);
}

body.srm-page .notification-item:hover {
  background: #1a1e23;
}

body.srm-page .notification-item strong {
  color: #f7f8fa;
}

body.srm-page .notification-item p {
  color: #b8bec8;
}
.commercial-readonly-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: var(--text);
}

.commercial-readonly-banner p {
  margin: 4px 0 0;
  color: var(--text-secondary);
}

.profile-identifier-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(224, 230, 239, .14);
  border-radius: 8px;
  background: #0b0e12;
  color: #bdc5d0;
  line-height: 1.45;
}

.profile-form .form-actions {
  flex-wrap: wrap;
  gap: 10px;
}

.profile-password-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(224, 230, 239, .16);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(7, 9, 12, .92));
}

.profile-password-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(224, 230, 239, .15);
  border-radius: 8px;
  background: #11151a;
  color: var(--text-secondary);
}

.profile-password-icon svg { width: 19px; height: 19px; }
.profile-password-copy { min-width: 0; display: grid; gap: 3px; }
.profile-password-copy span { color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.profile-password-copy strong { color: var(--text); font-size: 15px; letter-spacing: 0; }
.profile-password-copy small { color: var(--text-muted); line-height: 1.4; }
.profile-password-flow { display: grid; gap: 14px; }
.profile-password-flow__notice { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.profile-password-flow__notice svg { width: 22px; height: 22px; color: var(--text-secondary); }
.profile-password-flow__notice p { margin: 5px 0 0; color: var(--text-secondary); line-height: 1.45; }
.profile-password-flow__status { min-height: 20px; margin: 0; color: var(--text-secondary); font-size: 12px; }

@media (max-width: 640px) {
  .profile-password-panel { grid-template-columns: 42px minmax(0, 1fr); }
  .profile-password-panel .button { grid-column: 1 / -1; width: 100%; }
}

/* Developer-only support workspace. */
.developer-support-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.developer-support-metric {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 68px;
  padding: 12px;
  gap: 10px;
  border: 1px solid rgba(224, 230, 239, .14);
  border-radius: 8px;
  background: #111315;
  color: var(--text);
  text-align: left;
}

.developer-support-metric:hover,
.developer-support-metric.active {
  border-color: rgba(240, 243, 247, .38);
  background: #1a1d20;
}

.developer-support-metric svg {
  width: 18px;
  height: 18px;
  padding: 8px;
  box-sizing: content-box;
  border: 1px solid rgba(224, 230, 239, .12);
  border-radius: 7px;
  background: #0b0d0f;
  color: #d6d9dd;
}

.developer-support-metric span { min-width: 0; color: var(--text-secondary); font-size: 12px; }
.developer-support-metric strong { font-size: 22px; }

.developer-support-workspace {
  display: grid;
  grid-template-columns: minmax(250px, .82fr) minmax(420px, 1.7fr) minmax(250px, .8fr);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid rgba(224, 230, 239, .14);
  border-radius: 8px;
  background: #0b0d0f;
}

.developer-support-inbox,
.developer-support-chat,
.developer-support-inspector { min-width: 0; background: #101214; }

.developer-support-inbox,
.developer-support-chat { border-right: 1px solid rgba(224, 230, 239, .12); }

.developer-support-inbox > header,
.developer-support-chat-head,
.developer-support-inspector > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 14px 16px;
  gap: 12px;
  border-bottom: 1px solid rgba(224, 230, 239, .12);
  background: #131517;
}

.developer-support-inbox h3,
.developer-support-chat-head h3,
.developer-support-inspector h3 { margin: 2px 0 0; font-size: 16px; }
.developer-support-chat-head span { color: var(--text-secondary); font-size: 12px; }
.developer-support-chat-head select { width: 160px; flex: 0 0 160px; background: #0b0d0f; }

.developer-support-thread-list {
  display: grid;
  align-content: start;
  max-height: 612px;
  overflow: auto;
  scrollbar-width: none;
}
.developer-support-thread-list::-webkit-scrollbar { display: none; }

.developer-support-thread {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  min-width: 0;
  padding: 12px 14px;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid rgba(224, 230, 239, .09);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.developer-support-thread:hover,
.developer-support-thread.active { background: #1a1d20; }
.developer-support-thread.active { box-shadow: inset 2px 0 #e4e6e8; }

.developer-support-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(224, 230, 239, .16);
  border-radius: 50%;
  background: #202326;
  font-weight: 800;
}

.developer-support-thread-copy { display: grid; min-width: 0; gap: 3px; }
.developer-support-thread-copy > span { display: flex; min-width: 0; justify-content: space-between; gap: 8px; }
.developer-support-thread-copy strong,
.developer-support-thread-copy b,
.developer-support-thread-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.developer-support-thread-copy b { color: var(--text-secondary); font-size: 11px; }
.developer-support-thread-copy small,
.developer-support-thread-copy time { color: var(--text-muted); font-size: 10px; font-style: normal; }
.developer-support-thread > em { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e5e7e9; color: #111315; font-size: 11px; font-style: normal; font-weight: 800; line-height: 20px; text-align: center; }

.developer-support-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.developer-support-messages { display: flex; flex-direction: column; gap: 10px; min-height: 0; max-height: 468px; padding: 18px; overflow: auto; scrollbar-width: none; }
.developer-support-messages::-webkit-scrollbar { display: none; }
.developer-support-message { width: min(76%, 560px); padding: 11px 13px; border: 1px solid rgba(224, 230, 239, .12); border-radius: 8px; background: #171a1d; }
.developer-support-message.outgoing { align-self: flex-end; background: #25282b; border-color: rgba(240, 243, 247, .22); }
.developer-support-message > div { display: flex; justify-content: space-between; gap: 12px; }
.developer-support-message time { color: var(--text-muted); font-size: 10px; }
.developer-support-message p { margin: 7px 0 0; color: #e5e7e9; line-height: 1.48; white-space: pre-wrap; overflow-wrap: anywhere; }
.developer-support-message > span { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--text-secondary); font-size: 11px; }
.developer-support-message > span svg { width: 14px; height: 14px; }

.developer-support-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 14px; border-top: 1px solid rgba(224, 230, 239, .12); background: #131517; }
.developer-support-composer textarea { min-height: 68px; resize: vertical; background: #0b0d0f; }
.developer-support-composer .button { align-self: end; min-height: 42px; }
.developer-support-archive-note { display: flex; align-items: flex-start; padding: 15px 18px; gap: 12px; border-top: 1px solid rgba(224, 230, 239, .12); background: #131517; color: var(--text-secondary); }
.developer-support-archive-note svg { flex: 0 0 auto; width: 20px; height: 20px; color: #cdd2d7; }
.developer-support-archive-note strong, .developer-support-archive-note p { margin: 0; }
.developer-support-archive-note p { margin-top: 4px; font-size: 12px; line-height: 1.45; }
.developer-support-empty { display: grid; place-content: center; justify-items: center; min-height: 500px; padding: 30px; text-align: center; color: var(--text-secondary); }
.developer-support-empty svg { width: 28px; height: 28px; }
.developer-support-empty h3 { margin: 12px 0 4px; color: var(--text); }
.developer-support-empty p { margin: 0; }

.developer-support-inspector { padding-bottom: 16px; }
.developer-support-inspector > header { display: grid; justify-content: stretch; }
.developer-support-inspector dl { display: grid; margin: 0; padding: 14px 16px; gap: 0; }
.developer-support-inspector dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); padding: 10px 0; gap: 8px; border-bottom: 1px solid rgba(224, 230, 239, .09); }
.developer-support-inspector dt { color: var(--text-muted); font-size: 11px; }
.developer-support-inspector dd { min-width: 0; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.developer-support-inspector > label { display: grid; padding: 2px 16px 10px; gap: 7px; color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.developer-support-inspector textarea { min-height: 100px; resize: vertical; background: #0b0d0f; }
.developer-support-inspector > .button { width: calc(100% - 32px); margin: 0 16px; }
.developer-support-delete-zone { display: grid; padding: 14px 16px; margin: 14px 16px 0; gap: 11px; border: 1px solid rgba(210, 118, 118, .28); border-radius: 8px; background: rgba(80, 29, 29, .12); }
.developer-support-delete-zone strong, .developer-support-delete-zone p { margin: 0; }
.developer-support-delete-zone p { margin-top: 5px; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.developer-support-delete-zone .button { width: 100%; }
.developer-support-delete-zone .button:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 1180px) {
  .developer-support-workspace { grid-template-columns: minmax(230px, .8fr) minmax(390px, 1.5fr); }
  .developer-support-inspector { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr) auto; align-items: end; border-top: 1px solid rgba(224, 230, 239, .12); }
  .developer-support-inspector > header { border-bottom: 0; }
  .developer-support-inspector dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .developer-support-inspector dl > div { grid-template-columns: 1fr; }
  .developer-support-inspector > .button { width: auto; margin: 0 16px 16px 0; }
  .developer-support-delete-zone { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .developer-support-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .developer-support-workspace { grid-template-columns: 1fr; min-height: 0; overflow: visible; }
  .developer-support-inbox,
  .developer-support-chat { border-right: 0; border-bottom: 1px solid rgba(224, 230, 239, .12); }
  .developer-support-thread-list { max-height: 310px; }
  .developer-support-messages { min-height: 360px; max-height: 470px; }
  .developer-support-inspector { grid-column: auto; display: block; }
  .developer-support-inspector > header { border-bottom: 1px solid rgba(224, 230, 239, .12); }
  .developer-support-inspector dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .developer-support-inspector > .button { width: calc(100% - 32px); margin: 0 16px; }
}

@media (max-width: 520px) {
  .developer-support-summary { grid-template-columns: 1fr; }
  .developer-support-composer { grid-template-columns: 1fr; }
  .developer-support-chat-head { align-items: stretch; flex-direction: column; }
  .developer-support-chat-head select { width: 100%; flex-basis: auto; }
  .developer-support-message { width: 90%; }
  .developer-support-inspector dl { grid-template-columns: 1fr; }
}
.catalog-mode-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.catalog-mode-guide article { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid rgba(188,196,207,.17); border-radius: 8px; background: #101318; }
.catalog-mode-guide svg { flex: 0 0 auto; width: 20px; height: 20px; color: #c7cdd4; }
.catalog-mode-guide strong, .catalog-mode-guide p { margin: 0; }
.catalog-mode-guide p { margin-top: 5px; color: #9ca4ae; font-size: 12px; line-height: 1.45; }
@media (max-width: 640px) { .catalog-mode-guide { grid-template-columns: 1fr; } }