@font-face {
  font-family: "CO Display";
  src:
    local("Atkinson Hyperlegible"),
    local("Atkinson Hyperlegible Regular"),
    local("Atkinson Hyperlegible Next"),
    local("Atkinson Hyperlegible Next Regular");
  font-display: swap;
}

@font-face {
  font-family: "CO Mono";
  src:
    local("Atkinson Hyperlegible Mono"),
    local("Atkinson Hyperlegible Mono Regular");
  font-display: swap;
}

:root {
  /* Carbon Neutrals — Deep Carbon #0F1117, Graphite #1A1D27 */
  --co-bg: #0F1117;
  --co-bg-elevated: #1A1D27;
  --co-panel: rgba(26, 29, 39, 0.18);
  --co-panel-strong: rgba(15, 17, 23, 0.32);
  --co-panel-soft: rgba(26, 29, 39, 0.10);
  --co-line: rgba(196, 202, 214, 0.10);
  --co-line-strong: rgba(196, 202, 214, 0.20);
  /* Body text #C4CAD6 per brand spec (10.2:1 contrast AAA) */
  --co-text: #C4CAD6;
  --co-muted: #8D96A8;
  --co-subtle: #5E6677;
  /* Cobalt Morpho — use #3A7AB8 (Cobalt 400) on dark, #1E5E9E (Cobalt 500) on light */
  --co-accent: #1E5E9E;
  --co-accent-strong: #3A7AB8;
  --co-accent-soft: rgba(30, 94, 158, 0.12);
  --co-accent-glow: rgba(58, 122, 184, 0.18);
  /* Iridescent Teal — subordinate to cobalt, hover/secondary only */
  --co-iridescent: #278A93;
  --co-iridescent-light: #72C8D4;
  /* Status colors — dark surface variants (light text on 12% fill) */
  --co-success: #97C459;
  --co-warning: #EF9F27;
  --co-danger: #F09595;
  --co-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  --co-shadow-soft: 0 10px 32px rgba(0, 0, 0, 0.24);
  /* Border radii per brand spec */
  --co-radius-card: 12px;
  --co-radius-nested: 8px;
  --co-radius-btn: 8px;
  --co-radius-input: 8px;
  --co-radius-badge: 20px;
  --co-radius-nav: 10px;
  /* Legacy aliases kept for backward compat */
  --co-radius-xl: 12px;
  --co-radius-lg: 12px;
  --co-radius-md: 8px;
  --co-radius-sm: 8px;
  --co-font-body: "Atkinson Hyperlegible", "CO Display", "Atkinson Hyperlegible Next", "Segoe UI", sans-serif;
  --co-font-mono: "CO Mono", "Atkinson Hyperlegible Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --co-button-min-height: 44px;
  --co-tile-button-min-height: var(--co-button-min-height);
  --co-topbar-button-min-height: 40px;
  --co-topbar-button-padding-y: 7px;
  --co-topbar-button-padding-x: 10px;
  --co-topbar-site-trigger-padding-inline: 12px;
  --co-site-trigger-inline-size: clamp(360px, 30vw, 520px);
  --co-site-trigger-inline-size-mobile: 100%;
  /* Transitions — 150ms ease-out, machinery not springs */
  --co-transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

html,
body {
  text-rendering: optimizeLegibility;
}

body.co-carbon,
body.co-carbon button,
body.co-carbon input,
body.co-carbon select,
body.co-carbon textarea {
  font-family: var(--co-font-body);
}

body.co-carbon {
  font-size: 15px;
  line-height: 1.7;
  color: var(--co-text);
  background:
    radial-gradient(circle at 10% -10%, rgba(58, 122, 184, 0.14), transparent 30%),
    radial-gradient(circle at 110% 0%, rgba(58, 122, 184, 0.08), transparent 28%),
    linear-gradient(180deg, #0F1117 0%, #131720 54%, #0F1117 100%);
}

body.co-carbon::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background:
    radial-gradient(circle at 70% 18%, transparent 0 28%, rgba(90, 102, 124, 0.08) 28.2%, transparent 28.8%),
    radial-gradient(circle at 70% 18%, transparent 0 37%, rgba(90, 102, 124, 0.07) 37.2%, transparent 37.8%),
    radial-gradient(circle at 70% 18%, transparent 0 46%, rgba(90, 102, 124, 0.06) 46.2%, transparent 46.8%),
    radial-gradient(circle at 70% 18%, transparent 0 55%, rgba(90, 102, 124, 0.05) 55.2%, transparent 55.8%);
  z-index: 0;
}

body.co-carbon > * {
  position: relative;
  z-index: 1;
}

body.co-carbon .glass-panel,
body.co-carbon .panel,
body.co-carbon .frame,
body.co-carbon .signin-container,
body.co-carbon .container,
body.co-carbon .alert,
body.co-carbon .feed,
body.co-carbon .footer {
  border-color: var(--co-line) !important;
  box-shadow: var(--co-shadow);
}

body.co-carbon .glass-panel,
body.co-carbon .panel,
body.co-carbon .frame,
body.co-carbon .signin-container,
body.co-carbon .container {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 120px),
    var(--co-panel);
}

/* Standard glass token: rgba(255,255,255,0.04) / blur 24px / border 0.06 */
body.co-carbon .glass-panel {
  backdrop-filter: blur(24px) saturate(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(1.04);
}

body.co-carbon .brand-title,
body.co-carbon h1,
body.co-carbon h2,
body.co-carbon h3,
body.co-carbon h4 {
  font-family: var(--co-font-body);
}

body.co-carbon .subtitle,
body.co-carbon .section-note,
body.co-carbon .helper-text,
body.co-carbon .auth-note,
body.co-carbon .sub,
body.co-carbon .site-option-address,
body.co-carbon .site-option-meta,
body.co-carbon .timeline-summary,
body.co-carbon .detail-subtitle,
body.co-carbon .detail-summary-caption,
body.co-carbon .status-subtitle,
body.co-carbon .intro-card p,
body.co-carbon .intro-card li {
  color: var(--co-muted) !important;
}

/* Overlines and data labels — mono, uppercase, 0.08em spacing */
body.co-carbon .site-trigger-label,
body.co-carbon .site-trigger-chevron,
body.co-carbon .tile-meta,
body.co-carbon .detail-eyebrow,
body.co-carbon .section-title,
body.co-carbon .card-title,
body.co-carbon .timeline-scale-label,
body.co-carbon .timeline-filter-summary,
body.co-carbon .timeline-ruler-tick,
body.co-carbon .calendar-weekday,
body.co-carbon .calendar-legend,
body.co-carbon .calendar-legend-item,
body.co-carbon .calendar-legend-count,
body.co-carbon .calendar-day-count,
body.co-carbon .detail-summary-label,
body.co-carbon .detail-live-kpi-label,
body.co-carbon .detail-meta-row,
body.co-carbon .timeline-summary-chip,
body.co-carbon .segment-meta,
body.co-carbon .chip,
body.co-carbon .chip-row,
body.co-carbon .badge,
body.co-carbon .pill,
body.co-carbon .tag,
body.co-carbon .label,
body.co-carbon .live,
body.co-carbon .kbd {
  font-family: var(--co-font-mono);
  letter-spacing: 0.08em;
}

body.co-carbon .detail-summary-value,
body.co-carbon .detail-live-kpi-value,
body.co-carbon .calendar-glance-value,
body.co-carbon .status-title,
body.co-carbon .calendar-day-number,
body.co-carbon .calendar-footer-month,
body.co-carbon .timeline-track-label,
body.co-carbon .timeline-title,
body.co-carbon #timestamp,
body.co-carbon #speed-display,
body.co-carbon #rpm-display,
body.co-carbon #imu-visual,
body.co-carbon #hydraulics-display {
  font-family: var(--co-font-mono);
}

body.co-carbon .topbar,
body.co-carbon header {
  border: 1px solid var(--co-line);
  border-color: var(--co-line) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 140px),
    rgba(15, 17, 23, 0.20) !important;
  box-shadow: var(--co-shadow-soft);
}

body.co-carbon select,
body.co-carbon input[type="text"],
body.co-carbon input[type="search"],
body.co-carbon input[type="number"],
body.co-carbon input[type="email"],
body.co-carbon input[type="password"],
body.co-carbon input[type="date"],
body.co-carbon input[type="time"],
body.co-carbon textarea {
  border: 1px solid var(--co-line) !important;
  background: rgba(15, 17, 23, 0.62) !important;
  color: var(--co-text) !important;
  /* Inputs: 8px per brand spec */
  border-radius: var(--co-radius-input) !important;
  box-shadow: none !important;
  transition: border-color var(--co-transition), box-shadow var(--co-transition);
}

/* Focus: 2px cobalt ring per brand spec */
body.co-carbon select:focus,
body.co-carbon input:focus,
body.co-carbon textarea:focus {
  outline: 2px solid var(--co-accent-strong) !important;
  outline-offset: 1px !important;
  border-color: var(--co-accent-strong) !important;
  box-shadow: none !important;
}

body.co-carbon button:focus-visible {
  outline: 2px solid var(--co-accent-strong) !important;
  outline-offset: 2px !important;
}

body.co-carbon .shell,
body.co-carbon .app {
  /* Max content width: 1280px per brand spec */
  max-width: 1280px;
}

body.co-carbon .panel h2,
body.co-carbon .panel h3,
body.co-carbon .section-title,
body.co-carbon .card-title {
  letter-spacing: -0.03em;
}

body.co-carbon:not(.co-logs) .topbar,
body.co-carbon.co-security header {
  border-radius: var(--co-radius-card);
  padding: 18px;
}

body.co-carbon .brand-title {
  font-weight: 650;
  letter-spacing: -0.028em;
  color: var(--co-text);
}

body.co-carbon .co-topbar-main {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
}

body.co-carbon .co-brand-block {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.co-carbon .co-brand-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
}

body.co-carbon .co-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body.co-carbon .co-brand-mark-carbon img {
  width: 24px;
  height: 24px;
}

body.co-carbon .co-brand-split-title {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.98rem;
  line-height: 1.02;
  padding-bottom: 1px;
  letter-spacing: -0.028em;
  font-weight: 650;
  color: var(--co-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.co-carbon .co-brand-title-primary {
  font-weight: 650;
  letter-spacing: -0.026em;
}

body.co-carbon .co-brand-title-secondary {
  font-family: var(--co-font-body);
  font-weight: 300;
  letter-spacing: -0.022em;
  opacity: 0.88;
}

body.co-carbon .co-brand-wordmark {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: 0.98rem;
  line-height: 1.02;
  padding-bottom: 1px;
  font-weight: 650;
  letter-spacing: -0.026em;
  color: var(--co-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.co-carbon .co-site-cluster {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.co-carbon .site-shell {
  position: relative;
  min-width: 0;
  justify-self: center;
  inline-size: min(100%, var(--co-site-trigger-inline-size));
  max-width: min(100%, var(--co-site-trigger-inline-size));
  flex: 0 0 min(100%, var(--co-site-trigger-inline-size));
}

body.co-carbon .co-site-partner-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  max-width: 172px;
  padding: 7px 12px;
  border-radius: var(--co-radius-card);
  border: 1px solid rgba(58, 122, 184, 0.12);
  background: rgba(15, 17, 23, 0.72);
  box-shadow: 0 10px 24px rgba(1, 4, 10, 0.18);
  overflow: hidden;
}

body.co-carbon .co-site-partner-badge.hidden {
  display: none;
}

body.co-carbon .co-site-partner-badge img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 18px;
  object-fit: contain;
}

/* Buttons — 8px radius, 150ms transitions, scale(0.98) active */
body.co-carbon .site-trigger,
body.co-carbon .nav-link,
body.co-carbon .action-button,
body.co-carbon .danger-button,
body.co-carbon .ghost-button,
body.co-carbon .tile-button,
body.co-carbon .btn,
body.co-carbon .microsoft-btn,
body.co-carbon .dev-btn {
  border: 1px solid var(--co-line) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)), rgba(26, 29, 39, 0.92) !important;
  color: var(--co-text) !important;
  /* Buttons: 8px per brand spec */
  border-radius: var(--co-radius-btn) !important;
  box-shadow: none !important;
  transition: background var(--co-transition), border-color var(--co-transition), opacity var(--co-transition), transform var(--co-transition) !important;
  min-height: var(--co-button-min-height);
}

body.co-carbon .tile-button {
  min-height: var(--co-tile-button-min-height);
}

/* Hover: +3% bg opacity, border lightens */
body.co-carbon .site-trigger:hover,
body.co-carbon .nav-link:hover,
body.co-carbon .action-button:hover,
body.co-carbon .danger-button:hover,
body.co-carbon .ghost-button:hover,
body.co-carbon .tile-button:hover,
body.co-carbon .btn:hover,
body.co-carbon .microsoft-btn:hover,
body.co-carbon .dev-btn:hover {
  border-color: var(--co-line-strong) !important;
  background: linear-gradient(180deg, rgba(58, 122, 184, 0.08), rgba(255, 255, 255, 0)), rgba(26, 29, 39, 0.96) !important;
}

/* Active: scale(0.98) */
body.co-carbon .site-trigger:active,
body.co-carbon .nav-link:active,
body.co-carbon .action-button:active,
body.co-carbon .ghost-button:active,
body.co-carbon .tile-button:active,
body.co-carbon .btn:active,
body.co-carbon .microsoft-btn:active,
body.co-carbon .dev-btn:active {
  transform: scale(0.98) !important;
}

body.co-carbon .nav-link.active,
body.co-carbon .action-button,
body.co-carbon .tile-button.active,
body.co-carbon .btn,
body.co-carbon .dev-btn {
  border-color: rgba(58, 122, 184, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(58, 122, 184, 0.12), rgba(255, 255, 255, 0)),
    rgba(15, 17, 23, 0.96) !important;
}

/* Danger button — Critical red per brand spec */
body.co-carbon .danger-button {
  border-color: rgba(240, 149, 149, 0.24) !important;
  color: #F09595 !important;
}

body.co-carbon .site-menu {
  width: 100%;
  min-width: 100%;
  background:
    linear-gradient(180deg, rgba(58, 122, 184, 0.10), rgba(255, 255, 255, 0) 150px),
    rgba(15, 17, 23, 0.84) !important;
  border-color: var(--co-line) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
}

body.co-carbon .site-option {
  background: rgba(26, 29, 39, 0.68) !important;
  border-color: rgba(196, 202, 214, 0.14) !important;
}

body.co-carbon .site-option.active {
  background:
    linear-gradient(180deg, rgba(58, 122, 184, 0.14), rgba(255, 255, 255, 0)),
    rgba(26, 29, 39, 0.78) !important;
  border-color: rgba(58, 122, 184, 0.28) !important;
}

body.co-carbon .banner,
body.co-carbon #message-banner {
  border-color: var(--co-line) !important;
  background: rgba(26, 29, 39, 0.64) !important;
  color: var(--co-text);
}

/* Status banners — 12% fill, 20% border, light text variant per brand spec */
body.co-carbon .banner.success {
  border-color: rgba(99, 153, 34, 0.20) !important;
  background: rgba(99, 153, 34, 0.12) !important;
  color: #97C459 !important;
}

body.co-carbon .banner.error {
  border-color: rgba(226, 75, 74, 0.20) !important;
  background: rgba(226, 75, 74, 0.12) !important;
  color: #F09595 !important;
}

/* Cards — 12px outer, 8px nested per brand spec */
body.co-carbon .calendar-card,
body.co-carbon .detail-card,
body.co-carbon .timeline-card,
body.co-carbon .intro-card,
body.co-carbon .entity-card,
body.co-carbon .status-card,
body.co-carbon .card,
body.co-carbon .manage-card,
body.co-carbon .mission-card,
body.co-carbon .check-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0) 120px),
    rgba(15, 17, 23, 0.60) !important;
  border-color: var(--co-line) !important;
}

body.co-carbon .calendar-day,
body.co-carbon .timeline-track-label,
body.co-carbon .timeline-track-lane,
body.co-carbon .detail-summary-card,
body.co-carbon .detail-media-block,
body.co-carbon .calendar-glance-stat,
body.co-carbon .status-card,
body.co-carbon .entity-card,
body.co-carbon .mission-card,
body.co-carbon .check-card {
  box-shadow: none !important;
}

body.co-carbon .calendar-day {
  background: rgba(26, 29, 39, 0.74) !important;
  border-color: rgba(196, 202, 214, 0.14) !important;
}

body.co-carbon .calendar-day.selected,
body.co-carbon .timeline-track-row.selected .timeline-track-label,
body.co-carbon .timeline-track-row.related .timeline-track-label,
body.co-carbon .detail-summary-card.emphasis,
body.co-carbon .status-card.active {
  border-color: rgba(58, 122, 184, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(58, 122, 184, 0.12), rgba(255, 255, 255, 0)),
    rgba(15, 17, 23, 0.74) !important;
}

body.co-carbon .calendar-day-swatch,
body.co-carbon .calendar-legend-dot,
body.co-carbon .timeline-summary-chip::before {
  box-shadow: none !important;
}

/* Nested cards: 8px per brand spec */
body.co-carbon .detail-live-kpi,
body.co-carbon .detail-summary-card,
body.co-carbon .calendar-glance-stat,
body.co-carbon .status-card {
  border: 1px solid rgba(196, 202, 214, 0.14) !important;
  border-radius: var(--co-radius-nested) !important;
}

/* Pills/badges: 20px (999px) per brand spec */
body.co-carbon .timeline-segment,
body.co-carbon .timeline-summary-chip,
body.co-carbon .filter-chip,
body.co-carbon .chip,
body.co-carbon .pill,
body.co-carbon .tag {
  border-radius: 999px !important;
}

body.co-carbon .section-title,
body.co-carbon .tile-meta,
body.co-carbon .detail-eyebrow {
  color: var(--co-muted) !important;
}

body.co-carbon .detail-title,
body.co-carbon .tile-title,
body.co-carbon .section-head h2,
body.co-carbon .card-title,
body.co-carbon .intro-card h2 {
  font-family: var(--co-font-body);
  color: var(--co-text);
  letter-spacing: -0.03em;
}

body.co-carbon .timeline-ruler-tick,
body.co-carbon .timeline-track-label,
body.co-carbon .timeline-summary,
body.co-carbon .timeline-filter-summary,
body.co-carbon .calendar-day-count,
body.co-carbon .detail-meta-row,
body.co-carbon .detail-media-time,
body.co-carbon .label,
body.co-carbon .live {
  color: var(--co-muted) !important;
}

body.co-carbon .detail-audio-toggle svg,
body.co-carbon .site-trigger-chevron,
body.co-carbon .tile-icon-button {
  color: currentColor;
}

body.co-carbon .subtitle {
  max-width: 74ch;
  line-height: 1.55;
}

body.co-carbon .top-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

body.co-carbon .topbar .site-trigger,
body.co-carbon .topbar .top-actions .nav-link,
body.co-carbon .topbar .top-actions .action-button,
body.co-carbon .topbar .top-actions .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--co-topbar-button-min-height);
  padding: var(--co-topbar-button-padding-y) var(--co-topbar-button-padding-x);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  flex: 0 0 auto;
}

body.co-carbon .topbar .site-trigger {
  padding-inline: var(--co-topbar-site-trigger-padding-inline);
  gap: 8px;
  border-radius: var(--co-radius-btn) !important;
}

body.co-carbon.co-operator .shell,
body.co-carbon.co-settings .shell {
  max-width: 1280px;
  padding-top: 20px;
  padding-bottom: 28px;
}

body.co-carbon.co-operator .status-grid,
body.co-carbon.co-settings .intro-grid {
  gap: 14px;
}

/* Panels — 12px per brand spec (card outer) */
body.co-carbon.co-operator .panel,
body.co-carbon.co-settings .panel {
  border-radius: var(--co-radius-card);
}

body.co-carbon.co-operator .section,
body.co-carbon.co-settings .section,
body.co-carbon.co-operator .intro-card,
body.co-carbon.co-settings .intro-card,
body.co-carbon.co-operator .entity-card,
body.co-carbon.co-settings .entity-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 120px),
    rgba(15, 17, 23, 0.88) !important;
}

@media (max-width: 960px) {
  body.co-carbon .co-topbar-main {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.co-carbon .top-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body.co-carbon .co-site-cluster {
    width: 100%;
  }

  body.co-carbon .site-shell {
    inline-size: var(--co-site-trigger-inline-size-mobile);
    max-width: var(--co-site-trigger-inline-size-mobile);
    flex-basis: var(--co-site-trigger-inline-size-mobile);
  }

  body.co-carbon .co-site-partner-badge {
    min-width: 92px;
    justify-content: center;
  }
}

body.co-carbon.co-time-machine .container {
  position: relative;
}

body.co-carbon.co-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

/* Auth shell — card outer 12px per brand spec */
body.co-carbon .co-auth-shell,
body.co-carbon .co-message-shell {
  width: min(520px, 100%);
  padding: 28px;
  border-radius: var(--co-radius-card);
  border: 1px solid var(--co-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 150px),
    rgba(26, 29, 39, 0.90);
  box-shadow: var(--co-shadow);
}

body.co-carbon .co-auth-brand,
body.co-carbon .co-message-brand {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

body.co-carbon .co-auth-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

body.co-carbon .co-auth-kicker {
  color: var(--co-muted);
  font-family: var(--co-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.co-carbon .co-auth-title {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

body.co-carbon .co-auth-copy,
body.co-carbon .co-message-copy {
  margin: 0 0 22px;
  color: var(--co-muted);
  line-height: 1.6;
}

body.co-carbon.co-auth .signin-container {
  width: 100%;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.co-carbon.co-auth .microsoft-btn,
body.co-carbon.co-auth .dev-btn {
  width: 100%;
  justify-content: center;
  padding: 13px 18px;
  font-size: 0.95rem;
}

body.co-carbon.co-auth .divider {
  color: var(--co-subtle);
  font-family: var(--co-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

body.co-carbon.co-utility {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

body.co-carbon.co-utility h1 {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

body.co-carbon.co-security header .sub,
body.co-carbon.co-security .badge,
body.co-carbon.co-security .chip,
body.co-carbon.co-security .label,
body.co-carbon.co-security .live,
body.co-carbon.co-security .statusline,
body.co-carbon.co-security .tag {
  font-family: var(--co-font-mono);
}

body.co-carbon.co-security {
  background:
    radial-gradient(circle at 0% 0%, rgba(58, 122, 184, 0.12), transparent 28%),
    linear-gradient(180deg, #0F1117 0%, #131720 56%, #0F1117 100%);
}

body.co-carbon.co-security .app {
  max-width: 1280px;
}

body.co-carbon.co-security .frame,
body.co-carbon.co-security .panel,
body.co-carbon.co-security .alert,
body.co-carbon.co-security .feed,
body.co-carbon.co-security .footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 120px),
    rgba(26, 29, 39, 0.68) !important;
}

body.co-carbon.co-security .logo {
  width: 40px;
  height: 40px;
  border-radius: var(--co-radius-card);
  border-color: rgba(58, 122, 184, 0.24);
  background: rgba(15, 17, 23, 0.92);
  box-shadow: none;
}

body.co-carbon.co-security .alert .top {
  color: #F09595;
}

body.co-carbon.co-security .btn {
  border-radius: var(--co-radius-btn) !important;
}

/* Time machine container — card 12px */
body.co-carbon.co-time-machine .container {
  max-width: min(1280px, calc(100vw - 28px));
  margin: 18px auto;
  padding: 18px;
  border-radius: var(--co-radius-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 140px),
    rgba(26, 29, 39, 0.66);
}

body.co-carbon.co-time-machine #controls,
body.co-carbon.co-time-machine #camera-toggle-container {
  gap: 12px;
}

body.co-carbon.co-time-machine #scrubber,
body.co-carbon.co-time-machine #speed,
body.co-carbon.co-time-machine #recording-select,
body.co-carbon.co-time-machine #play-pause-btn {
  accent-color: var(--co-accent-strong);
}

body.co-carbon.co-time-machine #play-pause-btn,
body.co-carbon.co-time-machine #speed,
body.co-carbon.co-time-machine #recording-select {
  min-height: 44px;
  border: 1px solid var(--co-line);
  border-radius: var(--co-radius-btn);
  background: rgba(26, 29, 39, 0.94);
  color: var(--co-text);
}

body.co-carbon.co-time-machine #map,
body.co-carbon.co-time-machine #video-grid-container > div,
body.co-carbon.co-time-machine .player,
body.co-carbon.co-time-machine #map-loading {
  border-radius: var(--co-radius-card);
}

body.co-carbon.co-estop .feed,
body.co-carbon.co-estop #estop-button {
  box-shadow: var(--co-shadow-soft);
}

body.co-carbon.co-estop .feed {
  background: rgba(15, 17, 23, 0.96) !important;
}

@media (max-width: 900px) {
  body.co-carbon .co-auth-shell,
  body.co-carbon .co-message-shell {
    padding: 24px;
  }
}

/* Reduced motion — respect OS preference */
@media (prefers-reduced-motion: reduce) {
  body.co-carbon *,
  body.co-carbon *::before,
  body.co-carbon *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* Touch-optimized mobile overrides */
@media (max-width: 760px) {
  body.co-carbon input[type="text"],
  body.co-carbon input[type="search"],
  body.co-carbon input[type="number"],
  body.co-carbon input[type="email"],
  body.co-carbon input[type="password"],
  body.co-carbon input[type="date"],
  body.co-carbon input[type="time"],
  body.co-carbon select,
  body.co-carbon textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body.co-carbon .site-trigger,
  body.co-carbon .nav-link,
  body.co-carbon .action-button,
  body.co-carbon .danger-button,
  body.co-carbon .ghost-button,
  body.co-carbon .btn,
  body.co-carbon .microsoft-btn,
  body.co-carbon .dev-btn {
    min-height: 48px !important;
  }
}