/* LayerOne Bootstrap companion stylesheet.
   Bootstrap 5.3 supplies framework primitives; this file provides the product shell, portal, and status-page skin.
   Legacy --accent/--surface tokens alias the Phase 0 design tokens in tokens.css so
   console, client, and marketing share one brand hue and surface scale. */
:root {
  color-scheme: light;
  --bg: var(--l1-surface-2);
  --bg-strong: var(--l1-surface-3);
  --surface: var(--l1-surface-1);
  --surface-subtle: var(--l1-surface-2);
  --surface-raised: var(--l1-surface-1);
  --surface-active: var(--l1-brand-soft);
  --line: var(--l1-border);
  --line-soft: var(--l1-surface-3);
  --line-strong: var(--l1-border-strong);
  --text: var(--l1-ink);
  --text-soft: var(--l1-ink-soft);
  --muted: var(--l1-ink-muted);
  --muted-light: var(--l1-text-dim, #9ca3af);
  /* Default console accent — aliases tokens.css brand (not a second purple). */
  --accent: var(--l1-brand);
  --accent-strong: var(--l1-brand-strong);
  --accent-soft: var(--l1-brand-soft);
  --accent-border: var(--l1-brand-border);
  --accent-teal: var(--l1-accent);
  --green: var(--l1-ok);
  --green-soft: var(--l1-ok-soft);
  --amber: var(--l1-warn);
  --amber-soft: var(--l1-warn-soft);
  --red: var(--l1-danger);
  --red-soft: var(--l1-danger-soft);
  --radius-card: var(--l1-radius-md);
  --radius-control: var(--l1-radius-sm);
  --shadow-line: 0 1px 0 rgba(17, 24, 39, 0.04);
  --shadow-panel: var(--l1-shadow-sm);
  --shadow-floating: var(--l1-shadow-lg);
  --console-nav-offset: 91px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--l1-font-body);
  letter-spacing: 0;
  margin: 0;
  min-height: 100vh;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.18);
  outline-offset: 2px;
}

svg,
i[data-lucide] {
  flex: 0 0 auto;
  display: inline-block;
  height: 16px;
  width: 16px;
}

.app-shell {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100vh;
  padding: 14px;
  position: sticky;
  top: 0;
}

.sidebar-top {
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  gap: 14px;
  padding-bottom: 16px;
}

.brand {
  border-radius: var(--radius-card);
  display: block;
  padding: 10px;
  text-decoration: none;
}

.brand:hover {
  background: #f3f6fb;
}

.brand-copy {
  min-width: 0;
}

.brand strong {
  color: var(--text);
  display: block;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.brand small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 3px;
}

.eyebrow,
.sidebar-label {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.sidebar-section {
  display: grid;
  gap: 6px;
}

.sidebar-label {
  padding: 0 10px;
}

.mode-switch {
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px;
}

.mode-switch button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  min-height: 32px;
  transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.mode-switch button:hover {
  color: var(--text);
}

.mode-switch button.is-active {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
  color: var(--accent);
}

.site-switcher {
  position: relative;
}

.site-nav-trigger {
  align-items: center;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-line);
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  list-style: none;
  min-height: 52px;
  padding: 10px;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.site-switcher summary::-webkit-details-marker,
.profile-menu summary::-webkit-details-marker {
  display: none;
}

.site-nav-trigger:hover,
.site-switcher[open] .site-nav-trigger {
  background: var(--surface-active);
  border-color: var(--accent-border);
  box-shadow: var(--shadow-line);
}

.nav-icon-frame {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-control);
  color: var(--accent);
  display: inline-flex;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.site-summary-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.site-summary-copy span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.site-summary-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-chevron {
  color: var(--muted);
  transition: transform 150ms ease;
}

.site-switcher[open] .site-chevron {
  transform: rotate(180deg);
}

.site-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-floating);
  display: grid;
  gap: 4px;
  left: 0;
  padding: 7px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
}

.site-option {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--text-soft);
  display: grid;
  gap: 9px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 42px;
  padding: 8px 10px;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.site-option:hover {
  background: var(--surface-subtle);
  color: var(--text);
}

.site-option[aria-current="page"] {
  background: var(--surface-active);
  border-color: #bfdbfe;
  color: var(--accent);
}

.site-option strong,
.site-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-option strong {
  font-size: 13px;
  font-weight: 850;
}

.site-option small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 1px;
}

.status-dot {
  background: var(--green);
  border-radius: 999px;
  flex: 0 0 auto;
  height: 8px;
  width: 8px;
}

.nav {
  display: grid;
  gap: 4px;
}

.nav a {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--text-soft);
  display: flex;
  font-size: 13px;
  font-weight: 780;
  gap: 10px;
  min-height: 38px;
  padding: 9px 10px;
  position: relative;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.nav a svg,
.nav a i[data-lucide] {
  color: var(--muted);
}

.nav a:hover {
  background: #f5f7fb;
  border-color: var(--line-soft);
  color: var(--text);
}

/* Every .nav in this codebase is a sidebar nav, and shell.css owns their active
   state (see the command-column note there). This rule is the lower-specificity fallback, so
   it must not reintroduce the brand fill that shell.css just removed — otherwise
   the purple comes back anywhere shell.css's longer selectors miss. */
.nav a.is-active,
.nav a[aria-current="page"] {
  background: var(--l1-surface-3);
  border-color: var(--l1-border);
  color: var(--l1-ink);
}

.nav a.is-active svg,
.nav a[aria-current="page"] svg,
.nav a.is-active i[data-lucide],
.nav a[aria-current="page"] i[data-lucide] {
  color: var(--l1-ink);
}

.main {
  min-width: 0;
  padding: 0 32px 40px;
}

.dashboard-shell{
  min-height: calc(100vh - var(--console-nav-offset));
  padding-top: var(--console-nav-offset);
}

.dashboard-shell {
  /* The dashboard navbar is sticky and remains in document flow. Adding its
     height again here creates an empty strip above the sidebar and content. */
  padding-top: 0;
}

.dashboard-shell{
  --console-nav-offset: 63px;
}

.dashboard-shell .sidebar-inner{
  max-height: calc(100vh - var(--console-nav-offset));
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  top: var(--console-nav-offset);
}

.dashboard-shell .sidebar-inner {
  overflow-y: hidden;
}

.l1-console-sidebar-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .75rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .125rem;
  scrollbar-gutter: stable;
}

/* Short client nav must still fill the remaining viewport, or the rail stops
   under the last link instead of running to the bottom of the screen.
   Match each surface's existing max-height so sticky long pages and this
   agree. Desktop only: the off-canvas drawer sizes the aside with
   top/bottom and flexes the inner instead. */
@media (min-width: 992px) {
  .dashboard-shell .sidebar-inner {
    min-height: calc(100vh - var(--console-nav-offset));
  }

  .l1-client-portal-body .dashboard-shell .sidebar-inner {
    min-height: calc(100vh - 64px);
  }

  html[data-l1-theme="dark"] .l1-console-body .dashboard-shell .sidebar-inner {
    min-height: calc(100vh - 64px);
  }

  html[data-l1-theme="dark"] .l1-client-portal-body .dashboard-shell .sidebar-inner {
    min-height: 100vh;
  }
}

.dashboard-shell .main {
  padding-top: 28px;
}

.header-context {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.breadcrumbs {
  align-items: center;
  color: var(--text-soft);
  display: flex;
  font-size: 13px;
  font-weight: 780;
  gap: 7px;
  min-width: 0;
}

.breadcrumbs span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumbs i[data-lucide] {
  color: var(--muted-light);
  height: 14px;
  width: 14px;
}

.header-subtitle {
  color: var(--muted);
  font-size: 12px;
}

.header-return-link {
  white-space: nowrap;
}

.header-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.profile-menu {
  position: relative;
}

.profile-menu summary {
  align-items: center;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  list-style: none;
  padding: 2px;
  width: 44px;
}

.profile-menu summary:hover {
  background: var(--surface-subtle);
}

.profile-avatar,
.profile-card-avatar {
  background: var(--accent-soft);
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  display: block;
  object-fit: cover;
  overflow: hidden;
}

.profile-avatar {
  height: 40px;
  width: 40px;
}

.profile-card-avatar {
  height: 38px;
  width: 38px;
}

.profile-popover {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-floating);
  display: grid;
  gap: 4px;
  min-width: 244px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  z-index: 20;
}

.profile-card {
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-bottom: 4px;
  padding: 7px 7px 11px;
}

.profile-card strong,
.profile-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.profile-card small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.profile-action {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--text-soft);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 760;
  gap: 9px;
  min-height: 38px;
  padding: 9px 10px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.profile-action:hover {
  background: var(--surface-subtle);
  color: var(--text);
}

/* Canonical status-pill spec - shared semantics across console and client:
   green = success/online, amber = warning/pending, red = critical, neutral = idle.
   Kept identical to the .status-pill block in website/css/marketing/. */
.status-pill,
.neutral-pill,
.danger-pill,
.warning-pill,
.badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: 0.03em;
  line-height: 1;
  min-height: 24px;
  padding: 5px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-pill {
  background: rgba(15, 122, 74, 0.10);
  border: 1px solid rgba(15, 122, 74, 0.24);
  color: var(--green);
}

.neutral-pill {
  background: rgba(91, 98, 120, 0.08);
  border: 1px solid rgba(91, 98, 120, 0.18);
  color: #4b5565;
}

.danger-pill {
  background: rgba(180, 35, 24, 0.08);
  border: 1px solid rgba(180, 35, 24, 0.20);
  color: var(--red);
}

.warning-pill {
  background: rgba(154, 91, 10, 0.10);
  border: 1px solid rgba(154, 91, 10, 0.24);
  color: var(--amber);
}

.badge {
  margin-top: 10px;
  padding: 5px 8px;
}

.badge-warning {
  background: var(--amber-soft);
  border: 1px solid rgba(217, 119, 6, 0.24);
  color: var(--amber);
}

.badge-success {
  background: var(--green-soft);
  border: 1px solid rgba(5, 150, 105, 0.22);
  color: var(--green);
}

/* .messages / .message moved to components.css so all four levels are styled
   with the --l1-* tone tokens and every layout gets them, app.css or not. */

.admin-delete-dialog {
  background: var(--surface);
  border: 1px solid rgba(180, 35, 24, 0.22);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-floating);
  color: var(--text);
  max-width: min(520px, calc(100vw - 32px));
  padding: 0;
  width: 100%;
}

.admin-delete-dialog::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

.admin-delete-dialog form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.admin-delete-dialog-head {
  align-items: flex-start;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
}

.admin-delete-dialog-head h2 {
  font-size: 18px;
  margin: 0;
}

.admin-delete-dialog-head p,
.admin-delete-warning span,
.admin-force-delete-option small {
  color: var(--muted);
  display: block;
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.admin-delete-icon {
  align-items: center;
  background: var(--red-soft);
  border: 1px solid rgba(180, 35, 24, 0.18);
  border-radius: 8px;
  color: var(--red);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.admin-delete-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  display: grid;
  gap: 0;
  overflow: hidden;
}

.admin-delete-summary div {
  align-items: center;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 10px;
  grid-template-columns: 110px minmax(0, 1fr);
  padding: 10px 12px;
}

.admin-delete-summary div:first-child {
  border-top: 0;
}

.admin-delete-summary strong,
.admin-delete-summary span {
  font-size: 13px;
  min-width: 0;
}

.admin-delete-summary strong {
  color: var(--muted);
}

.admin-delete-summary span {
  overflow-wrap: anywhere;
}

.admin-delete-warning {
  background: var(--red-soft);
  border: 1px solid rgba(180, 35, 24, 0.18);
  border-radius: var(--radius-control);
  color: var(--red);
  padding: 12px;
}

.admin-force-delete-option {
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 12px;
}

.admin-force-delete-option input {
  margin-top: 3px;
}

.admin-force-delete-option strong {
  color: var(--text);
  display: block;
  font-size: 13px;
}

.admin-delete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.topbar {
  align-items: flex-start;
  background: transparent;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 2px 0 18px;
}

h1 {
  color: var(--text);
  font-size: 24px;
  font-weight: 850;
  line-height: 1.16;
  margin: 4px 0 0;
}

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

.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stack {
  display: grid;
  gap: 14px;
}

.section-gap {
  margin-top: 14px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
  padding: 18px;
}

.panel h2 {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  margin: 0 0 8px;
}

.panel-heading {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.panel-heading h2,
.panel-heading p {
  margin: 0;
}

.panel-heading p {
  margin-top: 4px;
}

.narrow-panel {
  max-width: 760px;
}

.metric {
  color: var(--text);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  line-height: 1;
  margin: 8px 0 6px;
}

.uptime-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.uptime-summary {
  background: var(--surface-subtle);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-card);
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
}

.uptime-summary span,
.status-row-meta {
  color: var(--muted);
  font-size: 12px;
}

.uptime-summary strong {
  color: var(--text);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  line-height: 1.1;
}

.uptime-summary small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.uptime-history {
  align-items: end;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(30, minmax(4px, 1fr));
  margin-top: 12px;
}

.uptime-day {
  align-items: end;
  background: #f1f5f9;
  border-radius: 3px;
  display: flex;
  height: 32px;
  overflow: hidden;
}

.uptime-day span {
  background: #cbd5e1;
  border-radius: 3px;
  display: block;
  width: 100%;
}

.uptime-day-passing span {
  background: var(--green);
}

.uptime-day-degraded span {
  background: var(--amber);
}

.uptime-day-failing span {
  background: var(--red);
}

/* A day with no measurement behind it. Deliberately the neutral base grey
   rather than green: claiming uptime for a period nothing was watching is the
   failure mode the time-weighted availability work exists to remove. */
.uptime-day-unknown span {
  background: #cbd5e1;
}

.status-page .uptime-day {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 4px;
}

.muted {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.button {
  align-items: center;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-control);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  min-height: 38px;
  padding: 9px 15px;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.button:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  box-shadow: 0 6px 14px var(--l1-primary-glow, rgba(159, 167, 178, 0.18));
}

.button-full {
  width: 100%;
}

.button-secondary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-soft);
}

.button-secondary:hover {
  background: var(--surface-subtle);
  border-color: #94a3b8;
  box-shadow: var(--shadow-line);
  color: var(--text);
}

.button-danger {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.button-danger:hover {
  background: #9f1c14;
  border-color: #9f1c14;
}

/* Visible keyboard focus for interactive primitives (mouse clicks stay clean
   via :focus-visible). Keeps the console accessible without loud outlines. */
.button:focus-visible,
.button-secondary:focus-visible,
.button-danger:focus-visible,
.icon-button:focus-visible,
.nav a:focus-visible,
.table-row-link:focus-visible,
.profile-action:focus-visible,
.site-nav-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.icon-button {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--text-soft);
  display: inline-flex;
  height: 36px;
  justify-content: center;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  width: 36px;
}

.icon-button:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.icon-button-danger:hover {
  background: var(--red-soft);
  border-color: #fecaca;
  color: var(--red);
}

.form-card {
  display: grid;
  gap: 14px;
}

.marketing-builder .form-card {
  gap: 18px;
}

.builder-section {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  display: grid;
  gap: 14px;
  padding: 16px;
}

.builder-section .panel-heading {
  border-bottom: 1px solid var(--line-soft);
  margin: -2px -2px 0;
  padding-bottom: 12px;
}

.builder-advanced {
  background: #fbfdff;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  padding: 0;
}

.builder-advanced summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  padding: 14px 16px;
}

.builder-advanced summary::-webkit-details-marker {
  display: none;
}

.builder-advanced summary strong,
.builder-advanced summary small {
  display: block;
}

.builder-advanced summary strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.builder-advanced summary small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.builder-advanced[open] {
  padding-bottom: 16px;
}

.builder-advanced[open] summary {
  border-bottom: 1px dashed var(--line);
  margin-bottom: 14px;
}

.builder-advanced[open] label {
  margin-left: 16px;
  margin-right: 16px;
}

.builder-advanced[open] label + label {
  margin-top: 12px;
}

.form-card label,
.toolbar-form label {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 850;
}

.form-card input[type="email"],
.form-card input[type="file"],
.form-card input[type="number"],
.form-card input[type="password"],
.form-card input[type="text"],
.form-card select,
.form-card textarea,
.toolbar-form select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--text);
  font: inherit;
  min-height: 40px;
  padding: 9px 11px;
  width: 100%;
}

.form-card textarea {
  line-height: 1.5;
  min-height: 132px;
  resize: vertical;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus,
.toolbar-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(120, 131, 146, 0.16);
  outline: 0;
}

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

.form-grid > div {
  display: grid;
  gap: 10px;
}

.form-actions,
.toolbar-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.row-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.row-actions form,
.form-actions form {
  margin: 0;
}

.toolbar-form label {
  font-size: 12px;
  text-transform: uppercase;
}

.toolbar-form select {
  min-height: 38px;
  min-width: 184px;
  padding: 7px 10px;
  width: auto;
}

.checkbox-row {
  align-items: flex-start;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: flex;
  gap: 10px;
  margin: 4px 0 6px;
  padding: 12px;
}

.checkbox-row input {
  accent-color: var(--accent);
  margin-top: 3px;
}

.checkbox-row strong,
.checkbox-row small {
  display: block;
}

.checkbox-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}

.form-field-block {
  display: grid;
  gap: 8px;
}

.choice-stack ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.choice-stack label {
  align-items: center;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  cursor: pointer;
  display: flex;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
}

.choice-stack input {
  accent-color: var(--accent);
  height: 16px;
  width: 16px;
}

.form-error {
  color: var(--red);
  font-size: 13px;
  font-weight: 780;
}

.table-list {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  display: grid;
  margin-top: 12px;
  overflow: hidden;
}

.table-row,
.empty-state {
  align-items: center;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 13px 16px;
}

.table-row:hover {
  background: #fbfdff;
}

.table-row:first-child,
.empty-state:first-child {
  border-top: 0;
}

.table-row strong,
.empty-state strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.empty-state {
  background: #fbfdff;
  border-left: 0;
  border-right: 0;
  border-top-style: dashed;
  margin-top: 0;
  padding: 18px;
}

.table-row > div > span,
.empty-state span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 3px;
}

.table-row-link {
  border-radius: var(--radius-control);
  color: inherit;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.table-row-link:hover {
  background: var(--surface-subtle);
}

.table-row-link:hover strong {
  color: var(--accent);
}

.tag-row,
.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.env-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.env-list span {
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  padding: 4px 8px;
}

.tag-pill{
  align-items: center;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  padding: 4px 10px;
  text-decoration: none;
}

.status-list {
  display: grid;
  margin-top: 14px;
}

.status-page {
  display: grid;
  gap: 20px;
}

.status-hero {
  align-items: center;
  background:
    radial-gradient(circle at 16% 18%, rgba(207, 211, 216, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(165, 172, 182, 0.16), rgba(90, 99, 112, 0.12) 46%, rgba(255, 255, 255, 0.03) 100%),
    linear-gradient(180deg, #2f343a 0%, #393f48 58%, #454c56 100%);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: 0 18px 42px rgba(57, 63, 72, 0.16);
  color: #ffffff;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  overflow: hidden;
  padding: 22px;
  position: relative;
}

.status-hero::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  content: "";
  inset: 0;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
}

.status-hero > * {
  position: relative;
  z-index: 1;
}

.status-hero h1,
.status-hero p {
  margin: 0;
}

.status-hero h1 {
  color: #ffffff;
  font-size: 28px;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(17, 19, 22, 0.24);
}

.status-hero .eyebrow {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
}

.status-hero p {
  color: rgba(255, 255, 255, 0.84);
  font-size: 15px;
  margin-top: 7px;
  text-shadow: 0 1px 2px rgba(17, 19, 22, 0.18);
}

.status-hero-state {
  align-items: flex-end;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.status-hero-state > span:last-child {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 760;
  text-shadow: 0 1px 2px rgba(17, 19, 22, 0.18);
  white-space: nowrap;
}

.status-incidents,
.public-status-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);
  overflow: hidden;
}

.status-section-heading,
.public-status-summary {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 18px 20px;
}

.status-section-heading h2,
.status-section-heading p,
.public-status-summary h2,
.public-status-summary p {
  margin: 0;
}

.status-section-heading p,
.public-status-summary p {
  margin-top: 5px;
}

.public-status-refresh {
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  padding: 7px 10px;
  white-space: nowrap;
}

.public-status-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 14px;
}

.public-status-group-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-line);
  display: grid;
  overflow: hidden;
}

.public-status-group-heading {
  align-items: center;
  background: linear-gradient(180deg, #fbfdff, #f7faff);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 13px 15px;
}

.public-status-group-heading h3 {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  margin: 0;
}

.public-status-group-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.status-row {
  align-items: center;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 0;
}

.status-row:first-child {
  border-top: 0;
}

.status-row-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.status-row-main strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.status-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  line-height: 1.4;
}

.status-row-meta span {
  white-space: nowrap;
}

.status-service {
  border-top: 1px solid var(--line-soft);
}

.status-service:first-of-type {
  border-top: 0;
}

.status-service-link {
  color: inherit;
  display: block;
  text-decoration: none;
}

.status-service summary::-webkit-details-marker {
  display: none;
}

.status-service-trigger {
  cursor: pointer;
  list-style: none;
  padding: 15px;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.status-service-trigger:hover,
.status-service[open] .status-service-trigger {
  background: #fbfdff;
}

.status-service-link:hover .status-service-trigger {
  background: #fbfdff;
  transform: translateX(2px);
}

.status-service-detail {
  background: var(--surface-subtle);
  border-top: 1px solid var(--line-soft);
  padding: 15px;
}

.status-row-state {
  align-items: center;
  display: flex;
  gap: 10px;
}

.status-row-state i[data-lucide] {
  color: var(--muted-light);
  transition: transform 150ms ease;
}

.status-service[open] .status-row-state i[data-lucide] {
  transform: rotate(180deg);
}

.status-service-link:hover .status-row-state i[data-lucide] {
  color: var(--accent);
  transform: translateX(2px);
}

.public-status-service-history {
  align-items: end;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(30, minmax(3px, 1fr));
  margin-top: 10px;
  max-width: 520px;
}

.public-status-service-history .uptime-day {
  height: 18px;
}

.status-back-link {
  align-items: center;
  color: var(--text-soft);
  display: inline-flex;
  font-size: 13px;
  font-weight: 780;
  gap: 8px;
  text-decoration: none;
  width: fit-content;
}

.status-back-link:hover {
  color: var(--accent);
}

.status-detail-body {
  display: grid;
  gap: 16px;
  padding: 18px 20px 20px;
}

.uptime-history-large .uptime-day {
  height: 42px;
}

.latency-map-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
}

.latency-map {
  background:
    radial-gradient(circle at 28% 38%, rgba(120, 131, 146, 0.09), transparent 24%),
    radial-gradient(circle at 54% 27%, rgba(15, 118, 110, 0.08), transparent 22%),
    #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  min-height: 360px;
  overflow: hidden;
  padding: 18px;
  place-items: center;
  position: relative;
}

.latency-map-canvas {
  aspect-ratio: 2000 / 1280;
  position: relative;
  width: min(100%, 760px);
}

.latency-world-map {
  display: block;
  filter: grayscale(0.85);
  height: 100%;
  inset: 0;
  object-fit: fill;
  opacity: 0.34;
  position: absolute;
  width: 100%;
}

.latency-map-marker {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  position: absolute;
  transform: translate(-9px, -9px);
  z-index: 3;
}

.latency-map-dot {
  background: var(--accent);
  border: 3px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(120, 131, 146, 0.28), 0 10px 22px rgba(120, 131, 146, 0.22);
  height: 18px;
  width: 18px;
}

.latency-map-pulse {
  animation: latency-pulse 1800ms ease-out infinite;
  background: rgba(120, 131, 146, 0.2);
  border-radius: 999px;
  height: 34px;
  left: -8px;
  position: absolute;
  top: -8px;
  width: 34px;
}

.latency-map-label {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.10);
  display: grid;
  gap: 2px;
  min-width: 158px;
  padding: 8px 10px;
}

.latency-map-label strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.latency-map-label small {
  color: var(--muted);
  font-size: 11px;
}

.latency-location-list {
  display: grid;
  gap: 10px;
}

.latency-location-card {
  align-content: start;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 12px;
}

.latency-location-card .neutral-pill {
  align-self: start;
  justify-self: start;
}

.latency-location-card strong,
.latency-location-card span,
.latency-location-card small {
  display: block;
}

.latency-location-card strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.latency-location-card span,
.latency-location-card small {
  color: var(--muted);
  font-size: 12px;
}

html[data-l1-theme="dark"] .status-page .latency-map {
  background:
    radial-gradient(circle at 28% 38%, rgba(160, 167, 178, 0.18), transparent 24%),
    radial-gradient(circle at 54% 27%, rgba(55, 212, 165, 0.12), transparent 22%),
    #141618 !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

html[data-l1-theme="dark"] .status-page .latency-world-map {
  filter: brightness(0) invert(1);
  mix-blend-mode: screen;
  opacity: 0.18;
}

html[data-l1-theme="dark"] .status-page .latency-map-dot {
  background: #a0a7b2;
  border-color: #f8fafc;
  box-shadow: 0 0 0 1px rgba(213, 216, 221, 0.42), 0 10px 24px rgba(160, 167, 178, 0.28);
}

html[data-l1-theme="dark"] .status-page .latency-map-pulse {
  background: rgba(160, 167, 178, 0.24);
}

html[data-l1-theme="dark"] .status-page .latency-map-label,
html[data-l1-theme="dark"] .status-page .latency-location-card {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow: none;
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .status-page .latency-map-label strong,
html[data-l1-theme="dark"] .status-page .latency-location-card strong {
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .status-page .latency-map-label small,
html[data-l1-theme="dark"] .status-page .latency-location-card span,
html[data-l1-theme="dark"] .status-page .latency-location-card small {
  color: #b6bcc5 !important;
}

html[data-l1-theme="dark"] .status-page .latency-location-card .neutral-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e8eaec;
}
@keyframes latency-pulse {
  from {
    opacity: 0.8;
    transform: scale(0.65);
  }

  to {
    opacity: 0;
    transform: scale(1.45);
  }
}

.status-service-panel {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.status-detail-heading {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.status-detail-heading h4 {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  margin: 0;
}

.status-detail-heading span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.status-service-panel .uptime-history {
  margin-top: 0;
}

.status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 10px;
}

.status-legend span {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
}

.legend-dot {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.legend-dot-good {
  background: var(--green);
}

.legend-dot-warning {
  background: var(--amber);
}

.legend-dot-bad {
  background: var(--red);
}

.main-site-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.incident-history-list,
.ticket-message-list,
.ticket-preview{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.incident-public-card,
.ticket-message,
.ticket-row {
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px;
}

.incident-public-card h3 {
  color: var(--text);
  font-size: 15px;
  margin: 0;
}

.incident-history-card {
  background: #ffffff;
}

.incident-history-meta {
  align-items: flex-end;
  display: grid;
  gap: 6px;
  justify-items: end;
}

.incident-history-meta > span:last-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-align: right;
}

.incident-public-updates {
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
}

.incident-public-update strong,
.incident-public-update span {
  display: inline-block;
  font-size: 12px;
}

.incident-public-update strong {
  color: var(--text);
  font-weight: 850;
  margin-right: 8px;
}

.incident-public-update span {
  color: var(--muted);
}

.incident-public-update p,
.ticket-message p {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 8px 0 0;
}

.ticket-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.ticket-row strong {
  display: block;
  font-size: 14px;
}

.ticket-row span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.ticket-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.ticket-message-internal {
  background: var(--amber-soft);
  border-color: rgba(217, 119, 6, 0.24);
}

.ticket-message-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.ticket-message-head strong {
  font-size: 14px;
}

.ticket-message-head span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.meta-list {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
}

.meta-list div {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.meta-list div:first-child {
  border-top: 0;
  padding-top: 0;
}

.meta-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  margin: 0;
  text-transform: uppercase;
}

.meta-list dd {
  color: var(--text);
  font-size: 14px;
  font-weight: 680;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.inventory-node,
.inventory-empty-node {
  border-radius: var(--radius-card);
  min-height: 58px;
}

.inventory-node {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
  color: inherit;
  display: grid;
  gap: 8px;
  padding: 12px;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.inventory-node:hover {
  background: var(--surface-active);
  border-color: #bfdbfe;
  transform: translateY(-1px);
}

.inventory-node-head,
.inventory-node-meta {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.inventory-node-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.inventory-node-head small,
.inventory-node-meta span,
.inventory-empty-node {
  color: var(--muted);
  font-size: 12px;
}

.inventory-node-head small,
.inventory-node-meta span {
  white-space: nowrap;
}

.inventory-empty-node {
  align-items: center;
  background: var(--surface-subtle);
  border: 1px dashed var(--line);
  display: flex;
  justify-content: center;
  padding: 11px;
}

.inventory-guest-list {
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.inventory-guest {
  background: var(--surface-subtle);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-control);
  display: grid;
  gap: 2px;
  padding: 7px 8px;
}

.inventory-guest strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.inventory-guest small {
  color: var(--muted);
  font-size: 11px;
}

.topology-map {
  background:
    linear-gradient(90deg, rgba(216, 224, 234, 0.48) 1px, transparent 1px),
    linear-gradient(180deg, rgba(216, 224, 234, 0.48) 1px, transparent 1px),
    var(--surface-subtle);
  background-size: 56px 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  height: var(--topology-height);
  margin-top: 16px;
  min-height: 280px;
  overflow: hidden;
  position: relative;
}

.topology-lines {
  inset: 0;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.topology-edge {
  stroke: #7c93b0;
  stroke-linecap: round;
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.topology-edge-host {
  stroke: var(--amber);
  stroke-dasharray: 5 5;
}

.topology-edge-management {
  stroke: var(--accent);
  stroke-dasharray: 3 4;
}

.topology-edge-dependency {
  stroke: var(--muted);
  stroke-dasharray: 2 5;
}

.topology-edge-label {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 850;
  padding: 3px 7px;
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 3;
}

.topology-edge-label-host {
  background: var(--amber-soft);
  border-color: rgba(217, 119, 6, 0.24);
  color: var(--amber);
}

.topology-node {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel);
  color: inherit;
  display: grid;
  gap: 3px;
  min-height: 64px;
  padding: 10px 12px;
  position: absolute;
  text-decoration: none;
  transform: translate(-50%, -50%);
  width: 164px;
  z-index: 4;
}

.topology-node:hover {
  background: var(--surface-active);
  border-color: #bfdbfe;
}

.topology-node strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.topology-node span,
.topology-node small {
  color: var(--muted);
  font-size: 12px;
}

.topology-node-edge {
  border-color: rgba(220, 38, 38, 0.30);
}

.topology-node-network {
  border-color: rgba(37, 99, 235, 0.28);
}

.topology-node-compute {
  border-color: rgba(5, 150, 105, 0.28);
}

.topology-hint {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  bottom: 14px;
  box-shadow: var(--shadow-panel);
  display: grid;
  gap: 3px;
  left: 14px;
  padding: 10px 12px;
  position: absolute;
  z-index: 5;
}

.topology-hint strong {
  color: var(--text);
  font-size: 13px;
}

.topology-hint span {
  color: var(--muted);
  font-size: 12px;
}

.auth-brand {
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 18px;
}

.auth-brand strong,
.auth-brand span {
  display: block;
}

.auth-brand strong {
  font-size: 15px;
}

.auth-brand span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

/* Brand mark at the top of the auth card - keeps it corporate and grounded. */

.form-card label.field span{
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 850;
}

.public-profile-menu {
  margin-left: 4px;
}

.public-sidebar-main {
  min-width: 0;
}

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

@media (max-width: 860px){
  :root {
    --console-nav-offset: 80px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-bottom: 1px solid var(--line);
    border-right: 0;
  }

  .sidebar-inner {
    min-height: auto;
    position: static;
  }

  .dashboard-shell .sidebar-inner{
    max-height: none;
    overflow-y: visible;
    top: 0;
  }

  .main {
    padding: 0 18px 26px;
  }

  .dashboard-shell .main {
    padding-top: 20px;
  }

  

  .header-context {
    width: 100%;
  }

  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid,
.compact-grid,
.form-grid,
.ticket-layout,
.uptime-grid{
    grid-template-columns: 1fr;
  }

  

  .topology-map {
    overflow-x: auto;
  }

  .topology-node {
    width: 142px;
  }

  .topbar,
  .status-row,
  .status-hero,
  .status-section-heading,
  .public-status-summary,
  .ticket-row,
  .table-row,
  .empty-state,
  .panel-heading,
  .ticket-message-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-status-refresh {
    white-space: normal;
  }

  .status-hero-state {
    align-items: flex-start;
    justify-items: start;
  }

  .status-service-panel {
    grid-template-columns: 1fr;
  }

  .status-detail-heading {
    flex-direction: column;
  }

  .status-detail-heading span {
    text-align: left;
  }

  

  

  

  .latency-map-layout {
    grid-template-columns: 1fr;
  }

  .latency-map {
    min-height: 260px;
  }

  .latency-map-label {
    min-width: 136px;
  }

  .toolbar-form,
  .form-actions {
    align-items: stretch;
    width: 100%;
  }

  .toolbar-form select,
  .toolbar-form .button,
  .form-actions .button {
    width: 100%;
  }

  .status-row-meta span {
    white-space: normal;
  }

  .table-list {
    border-radius: var(--radius-card);
  }

  

  
}

@media (max-width: 560px){
  .nav {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 23px;
  }

  

  

  

  

  

  
}

/* Console and client shell styles moved to static/css/shell.css */
/* Client area structure pass: centered rail, compact Bootstrap surfaces, and consistent page rhythm. */
.l1-client-portal-body {
  --l1-console-content-max: 1140px;
}

.l1-client-portal-body .l1-console-content > :where(.status-page) {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--l1-console-content-max);
  width: min(100%, var(--l1-console-content-width));
}

.l1-client-page-header {
  align-items: flex-end;
  background: var(--l1-shell-bg);
  border: 1px solid var(--l1-line) !important;
  border-radius: var(--l1-radius-sm);
  box-shadow: none;
  margin-bottom: 0 !important;
  padding: .75rem .875rem !important;
}

.l1-client-page-header > div:first-child {
  min-width: min(100%, 22rem);
}

.l1-client-page-header .text-primary,
.l1-client-page-header .text-muted.small.fw-semibold,
.l1-client-page-header .text-uppercase.small.fw-semibold {
  color: var(--l1-shell-ink-muted) !important;
  font-size: .6875rem;
  letter-spacing: .04em;
}

.l1-client-page-header :where(.h2, .h3, h1) {
  color: var(--l1-shell-ink);
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: .125rem !important;
}

.l1-client-page-header p {
  max-width: 56rem;
}

.l1-client-page-header > .card,
.l1-client-page-header .card {
  border-color: var(--l1-line) !important;
  border-radius: var(--l1-radius-sm) !important;
  box-shadow: none !important;
  min-width: min(100%, 12rem);
}

.l1-client-page-header .card-body {
  padding: .625rem .75rem;
}

@media (min-width: 1200px){
  .l1-client-portal-body {
    --l1-console-content-width: 78vw;
    --l1-console-content-max: 1140px;
  }
}

@media (max-width: 1199.98px){
  .l1-client-portal-body {
    --l1-console-content-width: 100%;
    --l1-console-content-max: 100%;
  }
}

@media (max-width: 576px){
  .l1-client-page-header {
    align-items: stretch;
  }

  .l1-client-page-header > .card,
  .l1-client-page-header .card {
    width: 100%;
  }
}
/* Dark checkbox rows: token-based so the checked state follows the theme. */

html[data-l1-theme="dark"] .checkbox-row input[type="checkbox"]{
  background-color: var(--l1-surface-2) !important;
  border-color: var(--l1-line) !important;
}

html[data-l1-theme="dark"] .checkbox-row input[type="checkbox"]:checked{
  background-color: var(--l1-brand) !important;
  border-color: var(--l1-brand) !important;
}

/* Dark client portal shell polish */
html[data-l1-theme="dark"] .l1-client-portal-body {
  --bs-body-bg: var(--l1-console-canvas);
  --bs-body-color: #f3f4f6;
  --bs-border-color: rgba(255, 255, 255, 0.13);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
  --bs-card-bg: rgba(255, 255, 255, 0.04);
  --bs-card-border-color: rgba(255, 255, 255, 0.12);
  --bs-emphasis-color: #ffffff;
  --bs-heading-color: #f8fafc;
  --bs-light-bg-subtle: rgba(255, 255, 255, 0.055);
  --bs-secondary-bg: #212429;
  --bs-secondary-color: #b6bcc5;
  --bs-tertiary-bg: #16191c;
  --console-nav-offset: 0px;
  --line: rgba(255, 255, 255, 0.13);
  --line-soft: rgba(255, 255, 255, 0.1);
  --muted: #b6bcc5;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-subtle: rgba(255, 255, 255, 0.055);
  --text: #f8fafc;
  --text-soft: #b6bcc5;
  /* Console dark surface — matches --l1-surface-2 in the tokens.css console
     layer. Marketing runs its own, deeper ground (--l1-bg). */
  background: var(--l1-console-canvas);
  color: #f3f4f6;
}

html[data-l1-theme="dark"] .l1-client-portal-body .dashboard-shell {
  background: var(--l1-console-canvas);
  min-height: calc(100vh - 64px);
  padding-top: 0;
}

html[data-l1-theme="dark"] .l1-client-portal-body .dashboard-shell .sidebar-inner {
  max-height: 100vh;
  top: 0;
}

html[data-l1-theme="dark"] .l1-client-portal-body .main,
html[data-l1-theme="dark"] .l1-client-portal-body .dashboard-shell .main {
  background: var(--l1-console-canvas);
  color: #f8fafc;
}

html[data-l1-theme="dark"] .l1-client-portal-body .sidebar {
  background: #181a1d;
  border-right-color: rgba(255, 255, 255, 0.11);
  box-shadow: none;
  color: #f8fafc;
}

html[data-l1-theme="dark"] .l1-client-portal-body .sidebar-inner {
  background: transparent;
}

html[data-l1-theme="dark"] .l1-client-portal-body .brand,
html[data-l1-theme="dark"] .l1-client-portal-body .brand strong {
  color: #f8fafc;
}

html[data-l1-theme="dark"] .l1-client-portal-body .brand small,
html[data-l1-theme="dark"] .l1-client-portal-body .sidebar-label,
html[data-l1-theme="dark"] .l1-client-portal-body .text-muted {
  color: #b6bcc5 !important;
}

html[data-l1-theme="dark"] .l1-client-portal-body .sidebar-top,
html[data-l1-theme="dark"] .l1-client-portal-body .sidebar-bottom {
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-l1-theme="dark"] .l1-client-portal-body .nav a {
  color: #dadde1;
}

html[data-l1-theme="dark"] .l1-client-portal-body .nav a:hover {
  background: rgba(188, 193, 201, 0.12);
  border-color: rgba(213, 216, 221, 0.22);
  color: #ffffff;
}

html[data-l1-theme="dark"] .l1-client-portal-body .mode-switch {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.13);
}

html[data-l1-theme="dark"] .l1-client-portal-body .mode-switch button {
  color: #b6bcc5;
}

html[data-l1-theme="dark"] .l1-client-portal-body :where(
  .l1-client-page-header,
  .panel,
  .card,
  .table-list,
  .table-row,
  .empty-state,
  .list-group,
  .list-group-item,
  .alert,
  .topbar.card
) {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow: none !important;
  color: #f8fafc;
}

html[data-l1-theme="dark"] .l1-client-portal-body :where(.panel-title, .card-title, h1, h2, h3, h4, h5, h6, strong, th) {
  color: #f8fafc;
}

html[data-l1-theme="dark"] .l1-client-portal-body :where(.panel-subtitle, .card-subtitle, p, td, small, .meta, .helptext) {
  color: #b6bcc5;
}

html[data-l1-theme="dark"] .l1-client-portal-body :where(.table, table) {
  --bs-table-bg: transparent;
  --bs-table-color: #f8fafc;
  --bs-table-border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

html[data-l1-theme="dark"] .l1-client-portal-body :where(.table > :not(caption) > * > *, table:not(.l1-table) th, table:not(.l1-table) td) {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: inherit;
}

html[data-l1-theme="dark"] .l1-client-portal-body :where(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-client-portal-body :where(.form-control, .form-select, input, textarea, select)::placeholder {
  color: #8b95a2 !important;
}

html[data-l1-theme="dark"] .l1-client-portal-body :where(.btn-outline-secondary, .btn-outline-dark) {
  border-color: rgba(255, 255, 255, 0.2);
  color: #dadde1;
}

html[data-l1-theme="dark"] .l1-client-portal-body :where(.btn-outline-secondary, .btn-outline-dark):hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

html[data-l1-theme="dark"] .l1-client-portal-body :where(.badge, .status-pill, .neutral-pill) {
  border-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 900px){
  html[data-l1-theme="dark"] .l1-client-portal-body .dashboard-shell .sidebar-inner {
    max-height: none;
  }
}

/* Client portal navbar spacing reset */
.l1-client-portal-body .dashboard-shell {
  --console-nav-offset: 0px;
  min-height: calc(100vh - 64px);
  padding-top: 0;
}

.l1-client-portal-body .dashboard-shell .sidebar-inner {
  max-height: calc(100vh - 64px);
  top: 64px;
}

@media (max-width: 760px){
  .l1-client-portal-body .dashboard-shell .sidebar-inner {
    max-height: none;
    top: auto;
  }
}

/* Dark admin console, status, account, and checkout consolidation */
html[data-l1-theme="dark"] .l1-console-body {
  --bs-body-bg: var(--l1-console-canvas);
  --bs-body-color: #f8fafc;
  --bs-border-color: rgba(255, 255, 255, 0.13);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
  --bs-card-bg: rgba(255, 255, 255, 0.04);
  --bs-card-border-color: rgba(255, 255, 255, 0.12);
  --bs-emphasis-color: #ffffff;
  --bs-heading-color: #f8fafc;
  --bs-light-bg-subtle: rgba(255, 255, 255, 0.055);
  --bs-secondary-bg: #212429;
  --bs-secondary-color: #b6bcc5;
  --bs-tertiary-bg: #16191c;
  --console-nav-offset: 0px;
  --line: rgba(255, 255, 255, 0.13);
  --line-soft: rgba(255, 255, 255, 0.1);
  --muted: #b6bcc5;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-subtle: rgba(255, 255, 255, 0.055);
  --text: #f8fafc;
  --text-soft: #b6bcc5;
  background: var(--l1-console-canvas);
  color: #f8fafc;
}

html[data-l1-theme="dark"] .l1-console-body .dashboard-shell,
html[data-l1-theme="dark"] .l1-console-body .l1-console-shell {
  background: var(--l1-console-canvas);
  min-height: calc(100vh - 64px);
  padding-top: 0;
}

html[data-l1-theme="dark"] .l1-console-body .dashboard-shell .sidebar-inner {
  max-height: calc(100vh - 64px);
  top: 64px;
}

html[data-l1-theme="dark"] .l1-console-body .l1-console-content,
html[data-l1-theme="dark"] .l1-console-body .main,
html[data-l1-theme="dark"] .l1-console-body .dashboard-shell .main {
  background: var(--l1-console-canvas);
  color: #f8fafc;
}

html[data-l1-theme="dark"] .l1-console-body .l1-console-sidebar,
html[data-l1-theme="dark"] .l1-console-body:not(.l1-client-portal-body) .sidebar {
  background: #181a1d;
  border-right-color: rgba(255, 255, 255, 0.11);
  box-shadow: none;
  color: #f8fafc;
}

html[data-l1-theme="dark"] .l1-console-body .l1-console-sidebar .sidebar-inner,
html[data-l1-theme="dark"] .l1-console-body:not(.l1-client-portal-body) .sidebar-inner {
  background: transparent;
}

html[data-l1-theme="dark"] .l1-console-body :where(
  .card,
  .panel,
  .l1-client-page-header,
  .l1-console-page > .topbar.card,
  .table-list,
  .table-row,
  .empty-state,
  .list-group,
  .list-group-item,
  .alert-light,
  .bg-body,
  .bg-body-tertiary,
  .card-header,
  .modal-content
) {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow: none !important;
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-console-body :where(h1, h2, h3, h4, h5, h6, strong, table:not(.l1-table) th, label, .card-title, .panel-title) {
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-console-body :where(.text-body-secondary, .text-muted, .muted, small, td, p, .helptext, .form-text) {
  color: #b6bcc5 !important;
}

html[data-l1-theme="dark"] .l1-console-body :where(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-console-body :where(.form-control, .form-select, input, textarea, select)::placeholder {
  color: #8b95a2 !important;
}

html[data-l1-theme="dark"] .l1-console-body :where(.table, table) {
  --bs-table-bg: transparent;
  --bs-table-color: #f8fafc;
  --bs-table-border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

html[data-l1-theme="dark"] .l1-console-body :where(.table > :not(caption) > * > *, table:not(.l1-table) th, table:not(.l1-table) td) {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: inherit;
}

html[data-l1-theme="dark"] .l1-console-body .alert-success {
  background: rgba(16, 185, 129, .12) !important;
  border-color: rgba(16, 185, 129, .28) !important;
  color: #bbf7d0 !important;
}

html[data-l1-theme="dark"] .l1-console-body .alert-warning {
  background: rgba(245, 158, 11, .12) !important;
  border-color: rgba(245, 158, 11, .28) !important;
  color: #fde68a !important;
}

html[data-l1-theme="dark"] .l1-console-body .btn-outline-secondary,
html[data-l1-theme="dark"] .l1-console-body .btn-outline-dark {
  border-color: rgba(255, 255, 255, 0.22);
  color: #dadde1;
}

html[data-l1-theme="dark"] .l1-console-body .btn-outline-secondary:hover,
html[data-l1-theme="dark"] .l1-console-body .btn-outline-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

html[data-l1-theme="dark"] .status-page{
  background: #16191c;
  color: #f8fafc;
}

html[data-l1-theme="dark"] .status-page :where(
  .status-hero,
.status-incidents,
.public-status-shell,
.public-status-summary,
.public-status-group-card,
.status-service-trigger,
.incident-public-card,
.incident-public-update,
.status-service-panel,
.status-row,
.latency-map-layout
){
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow: none !important;
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .status-page .status-hero {
  background-image:
    radial-gradient(circle at 18% 10%, rgba(160, 167, 178, .2), transparent 24rem),
    linear-gradient(180deg, rgba(23, 34, 53, .96), rgba(17, 18, 31, .96)) !important;
}

html[data-l1-theme="dark"] .status-page :where(h1, h2, h3, h4, strong) {
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .status-page :where(p, .muted, .text-muted, .status-row-meta, .public-status-group-heading span) {
  color: #b6bcc5 !important;
}

html[data-l1-theme="dark"] .status-page .status-service-link {
  color: inherit;
}

html[data-l1-theme="dark"] .status-page .status-service-trigger:hover {
  background-color: rgba(255, 255, 255, 0.065) !important;
  border-color: rgba(213, 216, 221, .28) !important;
}

html[data-l1-theme="dark"] .status-page .public-status-refresh {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .14);
  color: #dadde1;
}

/* Dark public status overview service rows. */
html[data-l1-theme="dark"] .status-page .status-service {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
}

html[data-l1-theme="dark"] .status-page .status-service-link,
html[data-l1-theme="dark"] .status-page .status-service-link:visited {
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .status-page .status-service-link .status-service-trigger,
html[data-l1-theme="dark"] .status-page .status-service > .status-service-trigger {
  background: transparent !important;
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .status-page .status-service-link:hover .status-service-trigger,
html[data-l1-theme="dark"] .status-page .status-service-trigger:hover,
html[data-l1-theme="dark"] .status-page .status-service[open] .status-service-trigger {
  background: rgba(255, 255, 255, 0.065) !important;
  color: #ffffff !important;
  transform: none;
}

html[data-l1-theme="dark"] .status-page .status-row-main strong,
html[data-l1-theme="dark"] .status-page .status-row-state,
html[data-l1-theme="dark"] .status-page .status-row-state .neutral-pill {
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .status-page .public-status-service-history .uptime-day {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-l1-theme="dark"] .l1-checkout-page .card-body {
  padding: 1rem !important;
}

@media (max-width: 760px){
  html[data-l1-theme="dark"] .l1-console-body .dashboard-shell .sidebar-inner {
    max-height: none;
    top: auto;
  }
}
/* Cross-console UI hardening pass. Keeps Bootstrap utility classes readable in both admin and client shells. */
.l1-console-body :where(.bg-white, .bg-light, .bg-body, .bg-body-tertiary, .alert-light, .text-bg-light) {
  background-color: var(--l1-shell-bg) !important;
  border-color: var(--l1-line) !important;
  color: var(--l1-shell-ink) !important;
}

.l1-console-body :where(.text-dark, .text-black) {
  color: var(--l1-shell-ink) !important;
}

.l1-console-body :where(.text-secondary, .text-muted, .text-body-secondary, .form-text, .small.text-muted) {
  color: var(--l1-shell-ink-muted) !important;
}

.l1-console-body :where(.border, .border-top, .border-end, .border-bottom, .border-start, .border-light) {
  border-color: var(--l1-line) !important;
}

.l1-console-body :where(code, kbd, pre, .code-block, .font-monospace) {
  background-color: var(--l1-shell-bg-subtle) !important;
  border-color: var(--l1-line) !important;
  color: var(--l1-shell-ink) !important;
}

.l1-console-body :where(code, kbd, .font-monospace) {
  border-radius: var(--l1-radius-sm);
  overflow-wrap: anywhere;
}

.l1-console-body :where(pre, .code-block) {
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  max-height: 34rem;
  overflow: auto;
  padding: .875rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.l1-console-body :where(.table-responsive, .list-group, .table-list) {
  border-color: var(--l1-line) !important;
}

.l1-console-body :where(.table, table) {
  margin-bottom: 0;
}

.l1-console-body :where(.table th, .table td, table:not(.l1-table) th, table:not(.l1-table) td) {
  vertical-align: middle;
}

.l1-console-body :where(.badge, .status-pill, .neutral-pill) {
  align-items: center;
  display: inline-flex;
  gap: .25rem;
  line-height: 1.1;
  max-width: 100%;
  min-height: 1.35rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

.l1-console-body .btn :where(svg, i[data-lucide]),
.l1-console-body .button :where(svg, i[data-lucide]) {
  margin-top: -1px;
}

.l1-console-body :where(.btn, .button) {
  align-items: center;
  display: inline-flex;
  gap: .375rem;
  justify-content: center;
}

.l1-console-body :where(.row-actions, .toolbar-form, .card-header, .panel-heading) {
  min-width: 0;
}

.l1-console-body :where(.row-actions, .toolbar-form) > * {
  min-width: 0;
}

html[data-l1-theme="dark"] .l1-console-body :where(.bg-white, .bg-light, .bg-body, .bg-body-tertiary, .alert-light, .text-bg-light) {
  background-color: rgba(255, 255, 255, .045) !important;
  border-color: rgba(255, 255, 255, .13) !important;
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-console-body :where(code, kbd, pre, .code-block, .font-monospace) {
  background-color: rgba(0, 0, 0, .22) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #f2f3f5 !important;
}

html[data-l1-theme="dark"] .l1-console-body :where(.text-secondary, .text-muted, .text-body-secondary, .form-text) {
  color: #b6bcc5 !important;
}

@media (max-width: 760px){
  .l1-console-body :where(.card-header, .panel-heading, .l1-client-page-header) {
    align-items: stretch !important;
  }

  .l1-console-body :where(.card-header .btn, .panel-heading .btn, .l1-client-page-header .btn) {
    width: 100%;
  }
}
/* Admin/client dark-mode refinement pass. */
/* The per-page width override that used to live here (.l1-jobs-page and three
   already-dead siblings) is gone. It set width: min(100%, 78vw) on one console
   page only, so between roughly 1530px and 1590px of viewport the jobs page
   rendered narrower than every other .ui-page and its content visibly shifted
   away from the sidebar. .ui-page owns the console page frame — one max-width
   for every page. */

.bulk-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.bulk-row {
  display: grid !important;
  gap: .75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 3.25rem;
}

.bulk-row-check {
  height: 1rem;
  justify-self: center;
  margin-top: 0;
  width: 1rem;
}

.bulk-row-main {
  color: inherit;
  display: grid;
  gap: .2rem;
  min-width: 0;
  text-decoration: none;
}

.bulk-row-main span {
  color: var(--l1-shell-ink-muted);
  overflow-wrap: anywhere;
}

.bulk-row-main:hover strong {
  text-decoration: underline;
  text-underline-offset: .18em;
}

html[data-l1-theme="dark"] .l1-console-body .alert-danger {
  background: rgba(239, 68, 68, .14) !important;
  border-color: rgba(248, 113, 113, .34) !important;
  color: #fecaca !important;
}

html[data-l1-theme="dark"] .l1-console-body .alert-info {
  background: rgba(56, 189, 248, .12) !important;
  border-color: rgba(125, 211, 252, .28) !important;
  color: #bae6fd !important;
}

html[data-l1-theme="dark"] .l1-console-body .alert-danger :where(a, strong),
html[data-l1-theme="dark"] .l1-console-body .alert-info :where(a, strong) {
  color: #ffffff !important;
}

html[data-l1-theme="dark"] .l1-console-body .bulk-row {
  background: rgba(255, 255, 255, .028) !important;
  border-color: rgba(255, 255, 255, .115) !important;
}

html[data-l1-theme="dark"] .l1-console-body .bulk-row-main span {
  color: #b6bcc5;
}

html[data-l1-theme="dark"] .l1-client-portal-body {
  --bs-primary: var(--l1-brand);
  --bs-primary-rgb: 139, 92, 246;
  --bs-link-color: var(--l1-brand-strong);
  --bs-link-hover-color: var(--l1-brand-contrast);
  --bs-primary-bg-subtle: var(--l1-brand-soft);
  --bs-primary-border-subtle: var(--l1-brand-border);
  --bs-primary-text-emphasis: var(--l1-brand-strong);
}

html[data-l1-theme="dark"] .l1-client-portal-body .nav a:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
}

@media (max-width: 760px){
  .bulk-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .bulk-row > :where(.neutral-pill, .status-pill) {
    grid-column: 2;
    justify-self: start;
  }

  .bulk-action-buttons {
    width: 100%;
  }

  .bulk-action-buttons .btn {
    flex: 1 1 10rem;
  }
}
/* Admin console simplification pass: one aligned page stack per screen. */
.l1-console-page {
  display: grid;
  gap: .75rem;
}

.l1-console-page > :where(.topbar, .grid, .compact-grid, .panel, .row, .card, .table-list, .container, .container-fluid, form) {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  width: 100%;
}

.l1-console-page > :where(.topbar, .section-gap) {
  margin-bottom: 0;
  margin-top: 0;
}

.l1-console-page > .topbar {
  border-bottom-color: var(--l1-line);
}

.l1-console-page > :where(.grid.row, .compact-grid.row) {
  margin-left: 0;
  margin-right: 0;
}

.l1-console-page > :where(.grid.row, .compact-grid.row) > * {
  max-width: none;
  min-width: 0;
  width: 100% !important;
}

.l1-flow-steps {
  align-items: stretch;
  background: var(--l1-shell-bg);
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: .5rem;
}

.l1-flow-step {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--l1-radius-sm);
  color: var(--l1-shell-ink-muted);
  display: inline-flex;
  font-size: .78125rem;
  font-weight: 700;
  gap: .5rem;
  justify-content: center;
  min-height: 2rem;
  padding: .25rem .5rem;
  white-space: nowrap;
}

.l1-flow-step > span {
  align-items: center;
  background: var(--l1-shell-bg-subtle);
  border: 1px solid var(--l1-line);
  border-radius: 999px;
  display: inline-flex;
  font-size: .6875rem;
  height: 1.25rem;
  justify-content: center;
  width: 1.25rem;
}

.l1-flow-step.is-current,
.l1-flow-step.is-complete {
  background: var(--l1-brand-soft);
  border-color: var(--l1-brand-border);
  color: var(--l1-brand-strong);
}

.l1-flow-step.is-current > span,
.l1-flow-step.is-complete > span {
  background: var(--l1-brand);
  border-color: var(--l1-brand);
  color: #fff;
}

.l1-order-workspace .card-body,
.l1-checkout-page .card-body {
  padding: .875rem !important;
}

.l1-order-workspace :where(.h4, .display-6),
.l1-checkout-page :where(.h4, .display-6) {
  letter-spacing: 0;
}

.l1-order-workspace .display-6 {
  font-size: clamp(1.5rem, 2vw, 1.875rem);
}

/* .l1-choice-row / .l1-choice-option and the .list-group-item.active overrides
   that propped them up are gone — replaced by .l1-choice in components.css. The
   colour: inherit !important here existed only to stop site.js's text-white-50
   rendering as white-on-lavender; neither is needed now. */

.l1-payment-panel {
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  overflow: hidden;
}

.l1-payment-panel > .card-header,
.l1-payment-panel > .card-body {
  background: var(--l1-shell-bg) !important;
  border-color: var(--l1-line) !important;
  padding: .875rem !important;
}

.l1-payment-panel > .card-header {
  border-bottom: 1px solid var(--l1-line);
}

.l1-payment-panel .border.rounded-3 {
  background: var(--l1-shell-bg-subtle);
}

html[data-l1-theme="dark"] .l1-client-portal-body {
  --bs-primary-bg-subtle: var(--l1-brand-soft);
  --bs-primary-border-subtle: var(--l1-brand-border);
  --bs-primary-text-emphasis: var(--l1-brand-strong);
}

html[data-l1-theme="dark"] .l1-client-portal-body :where(.l1-flow-steps, .l1-payment-panel) {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .13);
}

html[data-l1-theme="dark"] .l1-client-portal-body .l1-flow-step {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .09);
}

html[data-l1-theme="dark"] .l1-client-portal-body .l1-flow-step > span {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .14);
  color: #dadde1;
}

html[data-l1-theme="dark"] .l1-client-portal-body .l1-payment-panel > .card-header,
html[data-l1-theme="dark"] .l1-client-portal-body .l1-payment-panel > .card-body,
html[data-l1-theme="dark"] .l1-client-portal-body .l1-payment-panel .border.rounded-3 {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(255, 255, 255, .13) !important;
}

@media (max-width: 640px){
  .l1-flow-steps {
    grid-template-columns: 1fr;
  }

  .l1-flow-step {
    justify-content: flex-start;
  }
}

/* Simple checkout pass: reduce credit top-up checkout to amount, resulting balance, and payment. */
.l1-simple-checkout > .container-fluid {
  margin-left: auto;
  margin-right: auto;
  max-width: 920px;
}

/* Two-column checkout: payment on the left, order summary parked on the right.
   The payment column is first in the DOM, which is the desktop reading and tab
   order, so the two columns need no reordering at all above the breakpoint —
   only the explicit placement below. */
.l1-checkout-shell {
  margin-left: auto;
  margin-right: auto;
  max-width: 1120px;
  width: 100%;
}

/* One column below the breakpoint, with the summary lifted above the payment
   form by grid row rather than by source order: a phone should read what it is
   paying before how to pay. */
.l1-checkout-layout {
  display: grid;
  gap: 1rem;
}

.l1-checkout-main,
.l1-checkout-aside {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.l1-checkout-aside {
  grid-row: 1;
}

.l1-checkout-main {
  grid-row: 2;
}

@media (min-width: 900px) {
  .l1-checkout-layout {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 21rem;
  }

  /* Both back on one row, each in its own column, so the visual order and the
     DOM order agree and a `order` swap is not needed to produce them. */
  .l1-checkout-main {
    grid-column: 1;
    grid-row: 1;
  }

  .l1-checkout-aside {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    /* Clears the portal's fixed header so the summary does not slide under it. */
    top: 1rem;
  }
}

/* Selectable payment rows — saved methods and new-method flows share this, so a
   card on file and "pay with a new card" are visibly the same kind of choice.

   Deliberately unboxed. Each option used to be a bordered, filled tile, which
   on the add-payment-method page stacked four boxes inside a fifth (the panel)
   and read as five competing things rather than one list of four. The radio is
   the affordance; the row only has to sit next to it. */
.l1-payment-option {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: .625rem;
  padding: .125rem 0;
}

/* Selection is carried by the radio plus the label going accent-coloured. The
   old treatment leaned on a border colour, which is the one cue a red/green
   colour-blind customer can miss; with no border left, the checked radio itself
   is the cue that does not depend on hue. */
.l1-payment-option:has(input:checked) .l1-payment-option__label {
  color: var(--l1-accent);
}

.l1-payment-option:has(input:focus-visible) {
  outline: 2px solid var(--l1-accent);
  outline-offset: 3px;
  border-radius: var(--l1-radius-sm);
}

/* Disabled rows stay listed. A method that vanished because it cannot pay this
   order reads as a method the account has lost. */
.l1-payment-option.is-disabled {
  cursor: not-allowed;
  opacity: .55;
}

/* Remove, beside a saved card. A destructive button in a list whose only other
   control is a radio would be the loudest thing on the page for the action
   taken least, so it is a quiet link and the confirmation dialog is what
   actually guards the removal. */
.l1-payment-remove {
  background: none;
  border: 0;
  color: var(--l1-danger);
  cursor: pointer;
  font-size: var(--l1-text-micro);
  padding: .125rem 0;
  text-decoration: underline;
}

.l1-payment-remove:hover {
  text-decoration: none;
}

/* Unboxed for the same reason as .l1-payment-option: a bordered disclosure
   sitting under a list of plain radios reads as a different kind of control
   rather than more of the same list. Only the top rule separates it. */
.l1-payment-more {
  border-top: 1px solid var(--l1-line);
  padding-top: .5rem;
}

/* No display change on the summary itself — that would drop its disclosure role
   and stop the details toggling. The flex row lives on the inner span. */
.l1-payment-more__summary {
  cursor: pointer;
  list-style: none;
  padding: .25rem 0;
}

.l1-payment-more__summary::-webkit-details-marker {
  display: none;
}

.l1-payment-more__summary-inner {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-weight: 600;
  gap: .25rem .5rem;
}

.l1-payment-more__summary-inner::after {
  color: var(--l1-shell-ink-muted);
  content: "\25BE";
  margin-left: auto;
  transition: transform .12s ease;
}

.l1-payment-more[open] .l1-payment-more__summary-inner::after {
  transform: rotate(180deg);
}

.l1-payment-more__body {
  display: grid;
  gap: .25rem;
  padding: .375rem 0 .25rem;
}

.l1-simple-checkout .l1-client-page-header {
  align-items: flex-start;
}

/* Boxed tiles side by side. This is what the summary looks like while it is a
   full-width band above the payment form — below 900px, where the layout is one
   column; the sidebar treatment further down replaces it at the width that
   actually produces a sidebar. */
.l1-checkout-summary-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.l1-checkout-summary-item {
  background: var(--l1-shell-bg-subtle);
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  display: grid;
  gap: .2rem;
  min-height: 5rem;
  padding: .75rem;
}

.l1-checkout-summary-item > span {
  color: var(--l1-shell-ink-muted);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.l1-checkout-summary-item > strong {
  color: var(--l1-shell-ink);
  font-size: 1.35rem;
  line-height: 1.1;
}

.l1-checkout-summary-item > small {
  color: var(--l1-shell-ink-muted);
}

/* In the sidebar the three tiles have about 7rem each, which breaks "Awaiting
   payment" over three lines and turns the caption under it into a column of
   single words. One tile per row instead, laid out label-left / value-right the
   way an order summary reads everywhere else — and inside the breakpoint that
   creates the sidebar, because .l1-checkout-aside exists at every width and
   unscoped this flattened a full-width band down to a single column. */
@media (min-width: 900px) {
  .l1-checkout-aside .l1-checkout-summary-grid {
    gap: 0;
    grid-template-columns: 1fr;
  }

  .l1-checkout-aside .l1-checkout-summary-item {
    align-items: baseline;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--l1-line);
    border-radius: 0;
    column-gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    padding: .625rem 0;
  }

  .l1-checkout-aside .l1-checkout-summary-item > strong {
    font-size: 1rem;
    justify-self: end;
    text-align: right;
  }

  .l1-checkout-aside .l1-checkout-summary-item > small {
    color: var(--l1-shell-ink-muted);
    grid-column: 1 / -1;
    font-size: .75rem;
  }

  /* Due today is the number the customer is deciding on, so it keeps the weight
     the tiles used to carry. */
  .l1-checkout-aside .l1-checkout-summary-item:first-child > strong {
    font-size: 1.5rem;
  }

  .l1-checkout-aside .l1-checkout-summary-item:last-of-type {
    border-bottom: 0;
  }

  /* Dark mode paints a box on the tile below; the divider list has no box to
     paint, only a rule between rows. Out-specifies that rule rather than
     fighting it with !important, which is why it no longer carries one. */
  html[data-l1-theme="dark"] .l1-client-portal-body .l1-checkout-aside .l1-checkout-summary-item {
    background: none;
    border-color: rgba(255, 255, 255, .13);
  }
}

.l1-checkout-detail-strip,
.l1-checkout-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}

.l1-checkout-detail-strip {
  border-top: 1px solid var(--l1-line);
  color: var(--l1-shell-ink-muted);
  font-size: .78125rem;
  padding-top: .75rem;
}

.l1-checkout-detail-strip strong {
  color: var(--l1-shell-ink);
}

.l1-simple-checkout .l1-checkout-payment-card .card-body {
  gap: .75rem !important;
}

.l1-simple-checkout .l1-payment-panel {
  background: transparent !important;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.l1-simple-checkout .l1-payment-panel > .card-body {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.l1-simple-checkout .l1-payment-panel form {
  gap: .75rem !important;
}

.l1-payment-selected {
  background: var(--l1-shell-bg-subtle);
}

.l1-simple-checkout [data-payment-provider-submit] {
  min-width: 10rem;
}

/* No !important: the boxed tile it paints is a plain .l1-checkout-summary-item
   rule, which this already out-specifies, and forcing it here beat the sidebar's
   flattening and left dark mode drawing boxes where light mode draws dividers. */
html[data-l1-theme="dark"] .l1-client-portal-body .l1-checkout-summary-item {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .13);
}

html[data-l1-theme="dark"] .l1-client-portal-body .l1-payment-selected {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(255, 255, 255, .13) !important;
}

html[data-l1-theme="dark"] .l1-client-portal-body .l1-simple-checkout .l1-payment-panel,
html[data-l1-theme="dark"] .l1-client-portal-body .l1-simple-checkout .l1-payment-panel > .card-body {
  background: transparent !important;
  border-color: transparent !important;
}

@media (max-width: 760px){
  .l1-checkout-summary-grid {
    grid-template-columns: 1fr;
  }

  .l1-checkout-actions > :where(a, button, form),
  .l1-simple-checkout [data-payment-provider-submit] {
    width: 100%;
  }
}

/* Usage ledger: compact monthly ledger attached to the live credit graph. */

/* Client portal design polish: subtle structure without adding more custom UI weight. */
.l1-client-portal-body .l1-client-page-header {
  background: linear-gradient(180deg, var(--l1-client-surface), var(--l1-client-soft-surface));
  border: 1px solid var(--l1-client-hairline);
  border-left: .1875rem solid var(--l1-brand);
  border-radius: var(--l1-radius-sm);
  box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .06);
  padding: 1rem;
}

.l1-client-portal-body .l1-client-page-header h1,
.l1-client-portal-body .l1-client-page-header .h1,
.l1-client-portal-body .l1-client-page-header .h2,
.l1-client-portal-body .l1-client-page-header .h3 {
  letter-spacing: 0;
}

.l1-client-portal-body .l1-client-card,
.l1-client-portal-body .l1-client-kpi-card {
  border-color: var(--l1-client-hairline);
  border-radius: var(--l1-radius-sm);
  box-shadow: none !important;
}

.l1-client-portal-body .l1-client-kpi-card .card-body {
  min-height: 6.25rem;
}

.l1-client-portal-body .l1-client-card > .card-header {
  background: transparent !important;
  border-color: var(--l1-client-hairline);
  padding: .875rem 1rem;
}

.l1-client-portal-body .l1-client-card > .card-body {
  padding: 1rem;
}

.l1-client-portal-body .l1-resource-table tbody tr:hover > * {
  /* Was a hardcoded rgba(13, 110, 253, .045) — Bootstrap blue, not the brand. */
  background: color-mix(in srgb, var(--l1-brand) 5%, transparent);
}

.l1-client-portal-body [aria-label="Daily credit usage chart"] {
  background-image: linear-gradient(to top, rgba(148, 163, 184, .13) 1px, transparent 1px);
  background-size: 100% 25%;
}

html[data-l1-theme="dark"] .l1-client-portal-body .l1-client-page-header,
html[data-l1-theme="dark"] .l1-client-portal-body .l1-client-card,
html[data-l1-theme="dark"] .l1-client-portal-body .l1-client-kpi-card {
  box-shadow: none !important;
}

html[data-l1-theme="dark"] .l1-client-portal-body .l1-resource-table tbody tr:hover > * {
  background: rgba(168, 175, 185, .08);
}

html[data-l1-theme="dark"] .l1-client-portal-body [aria-label="Daily credit usage chart"] {
  background-image: linear-gradient(to top, rgba(255, 255, 255, .07) 1px, transparent 1px);
}
/* Dark auth checkbox row: keep "Keep me signed in" as an inline control, not a card. */

/* Auth simple form alignment: shared structure for light and dark login/register pages. */
.auth-simple-card {
  display: grid;
  gap: 18px;
}

.auth-simple-head {
  display: grid;
  gap: 8px;
  margin-bottom: 2px;
}

.auth-simple-mark {
  align-items: center;
  display: flex;
  gap: 10px;
}

.auth-simple-icon {
  align-items: center;
  background: rgba(151, 160, 172, .08);
  border: 1px solid rgba(151, 160, 172, .18);
  border-radius: 9px;
  color: var(--accent);
  display: inline-flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.auth-simple-icon svg,
.auth-simple-icon i {
  height: 17px;
  width: 17px;
}

.auth-simple-mark strong,
.auth-simple-mark small {
  display: inline;
}

.auth-simple-mark small {
  color: var(--muted);
  margin-left: 4px;
}

.auth-kicker {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.auth-simple-head h1 {
  font-size: clamp(1.65rem, 3vw, 2rem);
  line-height: 1.14;
  margin: 0;
}

.auth-simple-head p {
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.45;
  margin: 0;
}

.auth-switch-card {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  padding: 12px 14px;
}

.auth-switch-card a {
  color: var(--accent);
  font-weight: 850;
  text-decoration: none;
}

.auth-switch-card a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: .18em;
}

@media (max-width: 420px){
  

  .auth-switch-card {
    justify-content: flex-start;
  }
}

/* Admin billing settings redesign. */
.l1-admin-settings-page {
  gap: .875rem;
}

.l1-admin-settings-page .l1-settings-topbar {
  align-items: center;
  background: var(--l1-shell-bg);
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  padding: 1rem;
}

.l1-settings-overview,
.l1-settings-grid,
.l1-settings-provider-grid {
  display: grid;
  gap: .75rem;
}

.l1-settings-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.l1-settings-status-card {
  background: var(--l1-shell-bg);
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  display: grid;
  gap: .25rem;
  min-height: 5.75rem;
  padding: .875rem;
}

.l1-settings-status-card > span,
.l1-settings-label {
  color: var(--l1-shell-ink-muted);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.l1-settings-status-card > strong {
  color: var(--l1-shell-ink);
  font-size: 1.35rem;
  line-height: 1.1;
}

.l1-settings-status-card > small,
.l1-settings-field small,
.l1-settings-note span {
  color: var(--l1-shell-ink-muted);
  font-size: .75rem;
  line-height: 1.45;
}

.l1-settings-stack {
  display: grid;
  gap: .75rem;
}

.l1-settings-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .65fr);
}

.l1-settings-provider-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.l1-settings-card {
  align-content: start;
  display: grid;
  gap: .875rem;
  min-width: 0;
}

.l1-settings-card-heading {
  border-bottom: 1px solid var(--l1-line);
  margin: -.125rem 0 0;
  padding-bottom: .75rem;
}

.l1-settings-card-heading h2 {
  color: var(--l1-shell-ink) !important;
  font-size: 1rem !important;
  font-weight: 800;
  text-transform: none;
}

.l1-settings-card-heading p {
  margin-top: .25rem;
  max-width: 52rem;
}

.l1-settings-form-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.l1-settings-policy-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
}

.l1-settings-tight-grid {
  grid-template-columns: 1fr;
}

.l1-settings-field {
  display: grid;
  gap: .35rem;
  margin: 0;
  min-width: 0;
}

.l1-settings-field:has(textarea),
.l1-settings-toggle-field {
  grid-column: 1 / -1;
}

.l1-settings-field textarea {
  min-height: 6rem;
}

.l1-settings-toggle-field {
  background: var(--l1-shell-bg-subtle);
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  padding: .75rem;
}

.l1-settings-toggle-row {
  align-items: center;
  color: var(--l1-shell-ink);
  display: inline-flex;
  font-size: .875rem;
  font-weight: 800;
  gap: .5rem;
}

.l1-settings-toggle-row input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

.l1-settings-note {
  background: var(--l1-shell-bg-subtle);
  border: 1px solid var(--l1-line);
  border-radius: var(--l1-radius-sm);
  display: grid;
  gap: .25rem;
  padding: .75rem;
}

.l1-settings-note strong {
  color: var(--l1-shell-ink);
  font-size: .8125rem;
}

.l1-settings-list {
  overflow: hidden;
}

.l1-settings-side-card {
  align-content: start;
}

html[data-l1-theme="dark"] .l1-admin-settings-page :where(.l1-settings-topbar, .l1-settings-status-card, .l1-settings-card, .l1-settings-note, .l1-settings-toggle-field) {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .13) !important;
  color: #f8fafc !important;
}

html[data-l1-theme="dark"] .l1-admin-settings-page :where(.l1-settings-status-card > small, .l1-settings-field small, .l1-settings-note span) {
  color: #b6bcc5 !important;
}

@media (max-width: 980px){
  .l1-settings-overview,
  .l1-settings-grid,
  .l1-settings-provider-grid {
    grid-template-columns: 1fr;
  }
}

/* deployment_check stub — live auth styles are in auth-pages.css / components.css */
.auth-body {}