/* Orbital Plus: additive layer. The original theme and homepage are untouched. */

/* 1. Readable homepage typography. No body copy shrinks below 14px on phones. */
html body .cosmic-home {
  --home-muted: #b8c5d0;
  --home-subtle: #a8b9c7;
  font-size: 16px;
  line-height: 1.75;
}

.cosmic-home .cosmic-brand-copy strong { font-size: 23px; }
.cosmic-home .cosmic-brand-copy small { font-size: 12px; line-height: 1.5; letter-spacing: .045em; }
.cosmic-home .cosmic-nav-links a { font-size: 16px; padding: 11px 15px; }
.cosmic-home .cosmic-live-status { font-size: 14px; line-height: 1.5; }
.cosmic-home .cosmic-nav-login { min-height: 46px; font-size: 16px; padding: 10px 18px; }
.cosmic-home .cosmic-nav-inner { gap: 22px; min-height: 86px; }
.cosmic-home .cosmic-kicker { font-size: 16px; line-height: 1.6; letter-spacing: .07em; gap: 12px; }
.cosmic-home .cosmic-hero-lead { font-size: 18px; line-height: 1.9; }
.cosmic-home .cosmic-btn { min-height: 50px; padding: 12px 21px; font-size: 16px; }
.cosmic-home .cosmic-hero-notes { gap: 10px 0; font-size: 14px; line-height: 1.7; }
.cosmic-home .cosmic-hero-notes span + span::before { margin-inline: 12px; }

.cosmic-home .cosmic-deck-topline { flex-wrap: wrap; gap: 10px; font-size: 12px; line-height: 1.5; letter-spacing: .035em; }
.cosmic-home .cosmic-deck-footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; font-size: 13px; line-height: 1.65; }
.cosmic-home .cosmic-deck-footer div { min-width: 0; gap: 6px; }
.cosmic-home .cosmic-deck-footer div + div { padding-left: 12px; }
.cosmic-home .cosmic-deck-footer strong { font-size: 15px; line-height: 1.6; font-weight: 600; }
.cosmic-home .cosmic-command-deck { min-height: 570px; }
.cosmic-home .cosmic-stage-label { font-size: 12px; line-height: 1.5; padding: 6px 10px; letter-spacing: 0; }
.cosmic-home .cosmic-stage-label-a { top: 7%; left: 4%; }
.cosmic-home .cosmic-stage-label-b { right: 4%; bottom: 4%; }
/* SVG font sizes are in viewBox units and compensate for the orbit scaling. */
.cosmic-home .cosmic-model-node { font-size: 17px; letter-spacing: .02em; }
.cosmic-home .cosmic-model-node .cosmic-node-name { font-size: 20px; font-weight: 650; }
.cosmic-home .cosmic-core-label { font-size: 23px; }
.cosmic-home .cosmic-core-sub { font-size: 14px; letter-spacing: .05em; }

.cosmic-home .cosmic-signal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cosmic-home .cosmic-signal-item { min-height: 112px; padding: 22px; gap: 15px; }
.cosmic-home .cosmic-signal-item > span { font-size: 15px; }
.cosmic-home .cosmic-signal-item strong { font-size: 18px; line-height: 1.6; font-weight: 650; }
.cosmic-home .cosmic-signal-item small { font-size: 14px; line-height: 1.65; }
.cosmic-home .cosmic-signal-item div { gap: 5px; min-width: 0; }

.cosmic-home .cosmic-section-heading > p { font-size: 16px; line-height: 1.85; }
.cosmic-home .cosmic-capability-map { align-items: stretch; }
.cosmic-home .cosmic-capability-card { min-height: 410px; padding-bottom: 92px; }
.cosmic-home .cosmic-capability-card-main { min-height: 440px; }
.cosmic-home .cosmic-capability-card-offset { margin-top: 30px; }
.cosmic-home .cosmic-card-index { font-size: 14px; }
.cosmic-home .cosmic-card-label { font-size: 14px; line-height: 1.6; letter-spacing: .035em; }
.cosmic-home .cosmic-capability-card > p:not(.cosmic-card-label) { font-size: 16px; line-height: 1.85; }
.cosmic-home .cosmic-card-foot { font-size: 12px; line-height: 1.65; letter-spacing: .025em; max-width: calc(100% - 50px); }
.cosmic-home .cosmic-card-line { bottom: 62px; }

.cosmic-home .cosmic-terminal-header { height: auto; min-height: 64px; flex-wrap: wrap; padding-block: 14px; font-size: 14px; line-height: 1.6; }
.cosmic-home .cosmic-terminal-header b { font-size: 12px; line-height: 1.5; }
.cosmic-home .cosmic-tabs button { min-height: 46px; font-size: 15px; padding: 11px 15px; }
.cosmic-home .cosmic-pre { font-size: 14px; line-height: 1.9; min-height: 365px; }
.cosmic-home .cosmic-pre .cm { color: #9aafbf; }
.cosmic-home .cosmic-terminal-footer { flex-wrap: wrap; font-size: 14px; line-height: 1.8; gap: 14px; }
.cosmic-home .cosmic-terminal-footer > span { flex: 1 1 230px; }
.cosmic-home .cosmic-terminal-footer code { font-size: inherit; }
.cosmic-home .cosmic-copy { font-size: 14px; line-height: 1.5; min-height: 44px; padding: 10px 14px; }
.cosmic-home .cosmic-route-number { font-size: 15px; }
.cosmic-home .cosmic-route-step p { max-width: 27em; font-size: 16px; line-height: 1.85; }
.cosmic-home .cosmic-route-end { font-size: 13px; line-height: 1.7; letter-spacing: .04em; }

.cosmic-home .cosmic-model-atlas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.cosmic-home .cosmic-model-card { min-width: 0; padding: 23px 20px; }
.cosmic-home .cosmic-model-card-head { flex-wrap: wrap; align-items: center; gap: 9px; }
.cosmic-home .cosmic-model-card-head > span { font-size: 12px; line-height: 1.6; }
.cosmic-home .cosmic-model-card h3 { font-size: 23px; line-height: 1.5; }
.cosmic-home .cosmic-model-card li { align-items: baseline; gap: 12px; font-size: 15px; line-height: 1.7; padding-block: 11px; }
.cosmic-home .cosmic-model-card li span { min-width: 0; overflow-wrap: anywhere; }
.cosmic-home .cosmic-model-card li b { flex: 0 0 auto; font-size: 15px; line-height: 1.7; }
.cosmic-home .cosmic-model-card footer { font-size: 12px; line-height: 1.75; overflow-wrap: anywhere; }
.cosmic-home .cosmic-model-chips { gap: 10px; font-size: 15px; line-height: 1.7; }
.cosmic-home .cosmic-model-chips b { font-size: 14px; line-height: 1.7; padding: 9px 12px; }
.cosmic-home .cosmic-cta-copy > p:last-child { font-size: 16px; line-height: 1.85; }
.cosmic-home .cosmic-footer-inner { flex-wrap: wrap; padding-block: 28px; gap: 22px; }
.cosmic-home .cosmic-footer-brand strong { font-size: 20px; }
.cosmic-home .cosmic-footer-brand small { font-size: 14px; line-height: 1.7; }
.cosmic-home .cosmic-footer nav a { font-size: 15px; line-height: 1.7; }
.cosmic-home .cosmic-footer-meta { font-size: 12px; line-height: 1.7; }

/* 2. A layered console rather than a uniform wall of translucent cards. */
:root {
  --plus-ink: #203543;
  --plus-muted: #526a79;
  --plus-panel: #fbfdff;
  --plus-panel-end: #f0f5f9;
  --plus-border: #d2dde6;
  --plus-field: #f0f5f9;
  --plus-hover: #e8f0f7;
  --plus-cyan: #167385;
  --plus-blue: #4963aa;
  --plus-orange: #b9502c;
  --plus-ring: rgba(22, 115, 133, .16);
  --plus-shadow: 0 7px 22px rgba(36, 59, 82, .065), inset 0 1px rgba(255, 255, 255, .95);
  --plus-grid: rgba(77, 104, 138, .04);
}
html.dark {
  --plus-ink: #eaf2f8;
  --plus-muted: #b0c2d1;
  --plus-panel: #172437;
  --plus-panel-end: #101c2a;
  --plus-border: #304459;
  --plus-field: #0d1928;
  --plus-hover: #21354b;
  --plus-cyan: #7bd4d3;
  --plus-blue: #a4b7f6;
  --plus-orange: #eea377;
  --plus-ring: rgba(123, 212, 211, .17);
  --plus-shadow: 0 12px 28px rgba(0, 0, 0, .2), inset 0 1px rgba(227, 242, 255, .055);
  --plus-grid: rgba(161, 193, 228, .035);
}

/* Pure background images create no new stacking contexts or click targets. */
html body:has(#app .sidebar) {
  background-color: #ecf2f8;
  background-image:
    radial-gradient(ellipse at 17% 3%, rgba(87, 134, 210, .14), transparent 48%),
    radial-gradient(ellipse at 90% 66%, rgba(51, 157, 157, .1), transparent 44%),
    linear-gradient(var(--plus-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--plus-grid) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
  background-attachment: fixed;
}
html.dark body:has(#app .sidebar) {
  background-color: #090f1c;
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(73, 100, 180, .21), transparent 48%),
    radial-gradient(ellipse at 94% 75%, rgba(33, 142, 151, .12), transparent 45%),
    linear-gradient(var(--plus-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--plus-grid) 1px, transparent 1px);
}

html body #app main .card,
html body #app main .stat-card {
  background: linear-gradient(145deg, var(--plus-panel), var(--plus-panel-end)) !important;
  border: 1px solid var(--plus-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--plus-shadow) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
html body #app main .card:hover,
html body #app main .stat-card:hover {
  border-color: color-mix(in srgb, var(--plus-border), var(--plus-cyan) 24%) !important;
  box-shadow: var(--plus-shadow) !important;
  transform: none !important;
}

/* KPI cards are identifiable by the existing icon-and-value structure. */
html body #app main .grid > .card:is(.flex.items-center.gap-3, :has(> .flex.items-center.gap-3)),
html body #app main .stat-card {
  --plus-kpi: #4963aa;
  --plus-kpi-wash: rgba(73, 99, 170, .09);
  background:
    radial-gradient(ellipse at 100% 0%, var(--plus-kpi-wash), transparent 73%),
    linear-gradient(140deg, var(--plus-panel), var(--plus-panel-end)) !important;
  border-top: 2px solid var(--plus-kpi) !important;
  border-radius: 13px 20px 13px 13px !important;
  box-shadow: var(--plus-shadow) !important;
}
html.dark body #app main .grid > .card:is(.flex.items-center.gap-3, :has(> .flex.items-center.gap-3)),
html.dark body #app main .stat-card { --plus-kpi: #94adef; --plus-kpi-wash: rgba(102, 136, 220, .14); }
html body #app main .grid > .card:is(.flex.items-center.gap-3, :has(> .flex.items-center.gap-3)):nth-child(4n + 2) { --plus-kpi: #8b73ae; --plus-kpi-wash: rgba(139, 115, 174, .12); }
html body #app main .grid > .card:is(.flex.items-center.gap-3, :has(> .flex.items-center.gap-3)):nth-child(4n + 3) { --plus-kpi: #38988c; --plus-kpi-wash: rgba(56, 152, 140, .12); }
html body #app main .grid > .card:is(.flex.items-center.gap-3, :has(> .flex.items-center.gap-3)):nth-child(4n + 4) { --plus-kpi: #c18b42; --plus-kpi-wash: rgba(193, 139, 66, .12); }
html body #app main .card > .card-header {
  background: color-mix(in srgb, var(--plus-panel), var(--plus-hover) 55%) !important;
  border-bottom: 1px solid var(--plus-border) !important;
}
html body #app main .card > :first-child > h2,
html body #app main .card > h3:first-child,
html body #app main .card > h2:first-child { color: var(--plus-ink); letter-spacing: -.01em; }

/* The sidebar is its own darker/lighter navigation surface, never a text overlay. */
html body #app .sidebar {
  background: linear-gradient(175deg, #fbfdff 45%, #eaf1f9 100%) !important;
  border-right: 1px solid var(--plus-border) !important;
  box-shadow: 5px 0 24px rgba(43, 67, 96, .045);
}
html.dark body #app .sidebar { background: linear-gradient(175deg, #0c1423 48%, #15253a 100%) !important; }
html body #app header.glass { background: color-mix(in srgb, var(--plus-panel) 94%, transparent) !important; border-bottom-color: var(--plus-border) !important; box-shadow: 0 3px 14px rgba(25, 46, 75, .04) !important; }
html body #app .sidebar-link { font-size: 14px !important; }
html body #app .sidebar-link-active { border-left-color: var(--plus-orange) !important; box-shadow: inset 0 1px rgba(255,255,255,.06) !important; }

/* Separate action hierarchy: raised warm primary, cool outlined secondary, quiet ghost. */
html body #app .btn,
html body #app .date-picker-trigger,
html body #app .select-trigger {
  min-height: 42px;
  border-radius: 11px !important;
  font-size: 14px !important;
  letter-spacing: 0;
  transform: none !important;
  transition: background-color .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
html body #app .btn-primary {
  background: linear-gradient(175deg, #bf603b, #a84324) !important;
  border-color: #a4472b !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 3px 0 #84351f, 0 6px 13px rgba(147,70,38,.15) !important;
}
html.dark body #app .btn-primary { background: linear-gradient(175deg, #f0b18a, #df8e60) !important; border-color: #f2ba92 !important; color: #23170f !important; box-shadow: inset 0 1px rgba(255,255,255,.35), 0 3px 0 #81492f, 0 6px 16px rgba(0,0,0,.2) !important; }
html body #app .btn-primary:hover:not(:disabled) { background: linear-gradient(175deg, #b55230, #92391f) !important; }
html.dark body #app .btn-primary:hover:not(:disabled) { background: linear-gradient(175deg, #f8c09c, #eda474) !important; }
html body #app .btn-primary:active:not(:disabled) { box-shadow: inset 0 2px 4px rgba(0,0,0,.18), 0 1px 0 #81492f !important; }
html body #app .btn-secondary {
  background: linear-gradient(180deg, var(--plus-panel), var(--plus-panel-end)) !important;
  color: var(--plus-ink) !important;
  border: 1px solid var(--plus-border) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 2px 5px rgba(25,46,75,.055) !important;
}
html body #app .btn-secondary:hover:not(:disabled) { border-color: var(--plus-cyan) !important; background: var(--plus-hover) !important; }
html body #app .btn-ghost { border-radius: 10px !important; }
html body #app .btn-danger { background: #ad3d59 !important; color: white !important; box-shadow: inset 0 1px rgba(255,255,255,.15), 0 2px 0 #772239 !important; }
html body #app .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none !important; transform: none !important; }

/* Inset fields. Keep the application's padding, icons and native type behavior. */
html body #app .input,
html body #app input:is([type="text"], [type="search"], [type="password"], [type="email"], [type="number"], [type="url"]),
html body #app select,
html body #app textarea,
html body .select-dropdown-portal .select-search-input,
html body .select-dropdown .select-search-input {
  background: var(--plus-field) !important;
  color: var(--plus-ink) !important;
  border: 1px solid var(--plus-border) !important;
  border-radius: 11px !important;
  min-height: 42px;
  font-size: 14px;
  box-shadow: inset 0 2px 3px rgba(25,46,75,.055) !important;
  caret-color: var(--plus-cyan);
}
html body #app input::placeholder,
html body #app textarea::placeholder { color: var(--plus-muted) !important; opacity: .85; }
html body #app .input:focus,
html body #app input:is([type="text"], [type="search"], [type="password"], [type="email"], [type="number"], [type="url"]):focus,
html body #app select:focus,
html body #app textarea:focus,
html body .select-dropdown-portal .select-search-input:focus {
  background: var(--plus-panel) !important;
  border-color: var(--plus-cyan) !important;
  box-shadow: 0 0 0 3px var(--plus-ring), inset 0 1px 2px rgba(25,46,75,.04) !important;
  outline: 2px solid transparent !important;
}
html body #app input[aria-invalid="true"],
html body #app textarea[aria-invalid="true"],
html body #app .select-trigger-error { border-color: var(--cosmic-rose) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cosmic-rose) 17%, transparent) !important; }
html body #app input:disabled,
html body #app select:disabled,
html body #app textarea:disabled { opacity: .65; cursor: not-allowed; }
html body #app .input-label { font-size: 14px !important; line-height: 1.6; letter-spacing: 0; }

html body #app .select-trigger,
html body #app .date-picker-trigger {
  background: linear-gradient(180deg, var(--plus-panel), var(--plus-field)) !important;
  border: 1px solid var(--plus-border) !important;
  color: var(--plus-ink) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 2px 4px rgba(25,46,75,.04) !important;
}
html body #app .select-trigger:hover:not(:disabled),
html body #app .date-picker-trigger:hover:not(:disabled) { border-color: var(--plus-cyan) !important; }
html body #app .select-trigger[aria-expanded="true"],
html body #app .select-trigger-open,
html body #app .select-trigger:focus-visible,
html body #app .date-picker-trigger:focus-visible { border-color: var(--plus-cyan) !important; box-shadow: 0 0 0 3px var(--plus-ring) !important; }
html body #app .select-trigger[aria-expanded="true"] .select-icon { color: var(--plus-cyan); }
html body .select-dropdown-portal,
html body #app .select-dropdown,
html body #app .dropdown,
html body #app .date-picker-dropdown,
html body #app .date-picker-panel {
  background: var(--plus-panel) !important;
  color: var(--plus-ink) !important;
  border: 1px solid var(--plus-border) !important;
  border-radius: 13px !important;
  box-shadow: 0 16px 40px rgba(18,35,55,.2), inset 0 1px rgba(255,255,255,.1) !important;
}
html body .select-dropdown-portal .select-option,
html body #app .select-dropdown .select-option { min-height: 40px; font-size: 14px !important; line-height: 1.65; color: var(--plus-ink) !important; border-radius: 7px; }
html body .select-dropdown-portal .select-option:hover,
html body #app .select-dropdown .select-option:hover { background: var(--plus-hover) !important; }
html body .select-dropdown-portal .select-option-selected,
html body #app .select-dropdown .select-option-selected { background: color-mix(in srgb, var(--plus-cyan) 13%, var(--plus-panel)) !important; color: var(--plus-cyan) !important; font-weight: 650; box-shadow: inset 3px 0 var(--plus-cyan); }
html body .select-dropdown-portal .select-header,
html body .select-dropdown-portal .select-search { border-color: var(--plus-border) !important; }
html body .select-dropdown-portal .select-empty { color: var(--plus-muted) !important; font-size: 14px; }

/* Data tables remain calm and horizontally scrollable. No striped text overlays. */
html body #app .table-wrapper,
html body #app .table-container { background: var(--plus-panel) !important; border-color: var(--plus-border) !important; border-radius: 16px !important; box-shadow: var(--plus-shadow) !important; }
html body #app .table-wrapper .table-header { background: var(--plus-panel-end) !important; border-color: var(--plus-border) !important; }
html body #app .table-wrapper thead th,
html body #app .table thead th { background: var(--plus-field) !important; color: var(--plus-muted) !important; border-color: var(--plus-border) !important; font-size: 13px !important; letter-spacing: .015em; }
html body #app .table-wrapper tbody td { border-color: color-mix(in srgb, var(--plus-border) 65%, transparent) !important; }
html body #app .table-wrapper tbody tr:hover,
html body #app .table tbody tr:hover { background: var(--plus-hover) !important; }
html body #app .modal-content { background: var(--plus-panel) !important; border: 1px solid var(--plus-border) !important; border-top: 3px solid var(--plus-cyan) !important; border-radius: 18px !important; box-shadow: 0 26px 80px rgba(9,22,39,.28) !important; }
html body #app .modal-header,
html body #app .modal-footer { background: var(--plus-panel-end) !important; border-color: var(--plus-border) !important; }

@media (max-width: 1180px) {
  .cosmic-home .cosmic-live-status { display: none; }
  .cosmic-home .cosmic-nav-inner { gap: 18px; }
  .cosmic-home .cosmic-nav-links { gap: 0; }
  .cosmic-home .cosmic-model-atlas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cosmic-home .cosmic-model-card-head { flex-wrap: nowrap; }
}
@media (max-width: 800px) {
  .cosmic-home .cosmic-signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cosmic-home .cosmic-signal-item { min-height: 112px; padding: 18px 14px; }
  .cosmic-home .cosmic-hero-lead { font-size: 17px; }
  .cosmic-home .cosmic-command-deck { min-height: 490px; }
  .cosmic-home .cosmic-capability-card,
  .cosmic-home .cosmic-capability-card-main { min-height: 380px; }
  .cosmic-home .cosmic-capability-card-offset { margin-top: 0; }
  .cosmic-home .cosmic-terminal-footer { align-items: flex-start; }
  .cosmic-home .cosmic-terminal-footer > span { flex-basis: 100%; }
  .cosmic-home .cosmic-footer nav { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .cosmic-home .cosmic-nav-inner { gap: 10px; min-height: 80px; }
  .cosmic-home .cosmic-brand { gap: 9px; min-width: 0; }
  .cosmic-home .cosmic-brand-mark { width: 32px; height: 32px; flex: 0 0 32px; }
  .cosmic-home .cosmic-brand-copy strong { font-size: 21px; }
  .cosmic-home .cosmic-brand-copy small { max-width: 145px; font-size: 12px; line-height: 1.4; letter-spacing: 0; }
  .cosmic-home .cosmic-nav-login { padding: 10px 12px; font-size: 14px; white-space: nowrap; }
  .cosmic-home .cosmic-nav-actions { gap: 0; }
  .cosmic-home .cosmic-kicker { font-size: 15px; }
  .cosmic-home .cosmic-hero-notes { font-size: 14px; gap: 8px; }
  .cosmic-home .cosmic-btn { font-size: 15px; padding: 12px 16px; }
  .cosmic-home .cosmic-signal-item,
  .cosmic-home .cosmic-signal-item:first-child { gap: 10px; min-height: 118px; padding: 18px 10px; }
  .cosmic-home .cosmic-signal-item > span { display: none; }
  .cosmic-home .cosmic-signal-item strong { font-size: 18px; }
  .cosmic-home .cosmic-signal-item small { font-size: 14px; }
  .cosmic-home .cosmic-deck-topline { padding: 16px 14px 0; font-size: 12px; letter-spacing: 0; gap: 6px; }
  .cosmic-home .cosmic-deck-topline > span:last-child { font-size: 12px; }
  .cosmic-home .cosmic-command-deck { min-height: 440px; }
  .cosmic-home .cosmic-orbit-stage { height: 300px; }
  .cosmic-home .cosmic-model-node { font-size: 24px; }
  .cosmic-home .cosmic-model-node .cosmic-node-name { font-size: 26px; }
  .cosmic-home .cosmic-core-label { font-size: 27px; }
  .cosmic-home .cosmic-core-sub { font-size: 19px; }
  .cosmic-home .cosmic-stage-label { font-size: 12px; }
  .cosmic-home .cosmic-deck-footer { gap: 8px; font-size: 12px; padding: 0 14px 18px; }
  .cosmic-home .cosmic-deck-footer strong { font-size: 14px; }
  .cosmic-home .cosmic-deck-footer div + div { padding-left: 8px; }
  .cosmic-home .cosmic-capability-card { padding-inline: 22px; }
  .cosmic-home .cosmic-card-label { font-size: 14px; }
  .cosmic-home .cosmic-card-foot { font-size: 12px; }
  .cosmic-home .cosmic-terminal-header { gap: 10px; font-size: 14px; }
  .cosmic-home .cosmic-tabs button { font-size: 14px; padding-inline: 12px; }
  .cosmic-home .cosmic-pre { font-size: 14px; min-height: 365px; }
  .cosmic-home .cosmic-terminal-footer { flex-direction: column; }
  .cosmic-home .cosmic-terminal-footer > span { flex-basis: auto; }
  .cosmic-home .cosmic-model-atlas { grid-template-columns: minmax(0, 1fr); }
  .cosmic-home .cosmic-model-card-head { flex-wrap: wrap; }
  .cosmic-home .cosmic-footer-brand small { font-size: 14px; }
  .cosmic-home .cosmic-footer nav a { font-size: 15px; }
  .cosmic-home .cosmic-footer-meta { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html body #app .card,
  html body #app .btn,
  html body #app .input,
  html body #app .select-trigger { transition: none !important; }
}

/* Keep enlarged SVG labels on separate baselines. */
.cosmic-home .cosmic-node-openai text:not(.cosmic-node-name),
.cosmic-home .cosmic-node-anthropic text:not(.cosmic-node-name) { transform: translateY(-12px); }
.cosmic-home .cosmic-node-google text:not(.cosmic-node-name),
.cosmic-home .cosmic-node-domestic text:not(.cosmic-node-name) { transform: translateY(18px); }
.cosmic-home .cosmic-core-sub { transform: translateY(8px); }
.cosmic-home .cosmic-core-label { transform: translateY(-3px); }

/* Error and disabled states take priority over open/hover treatments. */
html body #app .select-trigger.select-trigger-error,
html body #app .select-trigger[aria-invalid="true"],
html body #app .input[aria-invalid="true"] {
  border-color: var(--cosmic-rose) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cosmic-rose) 17%, transparent) !important;
}
html body #app .select-trigger:disabled,
html body #app .select-trigger.select-trigger-disabled {
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none !important;
  border-color: var(--plus-border) !important;
}

/* Let narrow homepage viewports account for the browser's scrollbar. */
html body:has(.cosmic-home) { min-width: 0; }

/* Vue teleports dialogs outside #app; give them the same control hierarchy. */
html body .modal-overlay .modal-content {
  background: var(--plus-panel) !important;
  border: 1px solid var(--plus-border) !important;
  border-top: 3px solid var(--plus-cyan) !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 80px rgba(9,22,39,.32) !important;
}
html body .modal-overlay .modal-header,
html body .modal-overlay .modal-footer { background: var(--plus-panel-end) !important; border-color: var(--plus-border) !important; }
html body .modal-overlay .input-label { color: var(--plus-muted) !important; font-size: 14px !important; letter-spacing: 0; line-height: 1.6; }
html body .modal-overlay .modal-content :is(.input, input[type="email"], input[type="text"], input[type="password"], input[type="number"], textarea, select) {
  background: var(--plus-field) !important;
  color: var(--plus-ink) !important;
  border: 1px solid var(--plus-border) !important;
  border-radius: 11px !important;
  min-height: 42px;
  font-size: 14px;
  box-shadow: inset 0 2px 3px rgba(25,46,75,.055) !important;
}
html body .modal-overlay .modal-content :is(.input, input, textarea, select):focus {
  border-color: var(--plus-cyan) !important;
  background: var(--plus-panel) !important;
  box-shadow: 0 0 0 3px var(--plus-ring) !important;
}
html body .modal-overlay .modal-content :is(.input, input, textarea, select)[aria-invalid="true"] { border-color: var(--cosmic-rose) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cosmic-rose) 17%, transparent) !important; }
html body .modal-overlay .modal-content :is(.input, input, textarea, select):disabled { opacity: .6; cursor: not-allowed; }
html body .modal-overlay .modal-content :is(.btn, .select-trigger) {
  min-height: 42px;
  font-size: 14px !important;
  border-radius: 11px !important;
  letter-spacing: 0;
  transform: none !important;
}
html body .modal-overlay .modal-content :is(.btn-secondary, .select-trigger) {
  background: linear-gradient(180deg, var(--plus-panel), var(--plus-field)) !important;
  color: var(--plus-ink) !important;
  border: 1px solid var(--plus-border) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 2px 5px rgba(25,46,75,.055) !important;
}
html body .modal-overlay .modal-content :is(.btn-secondary, .select-trigger):hover:not(:disabled),
html body .modal-overlay .modal-content .select-trigger[aria-expanded="true"] { border-color: var(--plus-cyan) !important; background: var(--plus-hover) !important; }
html body .modal-overlay .modal-content .btn-primary {
  background: linear-gradient(175deg, #bf603b, #a84324) !important;
  color: white !important;
  border-color: #a4472b !important;
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 3px 0 #84351f, 0 6px 13px rgba(147,70,38,.15) !important;
}
html.dark body .modal-overlay .modal-content .btn-primary {
  background: linear-gradient(175deg, #f0b18a, #df8e60) !important;
  color: #23170f !important;
  border-color: #f2ba92 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 3px 0 #81492f, 0 6px 16px rgba(0,0,0,.2) !important;
}
html body .modal-overlay .modal-content .btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
html body .modal-overlay .modal-content .btn-primary:active:not(:disabled) { box-shadow: inset 0 2px 4px rgba(0,0,0,.18), 0 1px 0 #81492f !important; }
html body .modal-overlay .modal-content .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none !important; }