:root {
  color-scheme: dark;
  --bg: #06070b;
  --bg-2: #0b1020;
  --panel: rgba(15, 19, 31, 0.82);
  --panel-strong: rgba(12, 16, 28, 0.94);
  --panel-soft: rgba(255,255,255,.035);
  --panel-border: rgba(255,255,255,.09);
  --panel-border-strong: rgba(255,255,255,.14);
  --text: #f8fbff;
  --text-2: #e7edfa;
  --muted: #aeb7ca;
  --muted-2: #8c95a8;
  --soft: #d9e0f2;
  --shadow: 0 24px 72px rgba(0,0,0,.42);
  --shadow-soft: 0 14px 34px rgba(0,0,0,.2);
  --accent: #8b5cf6;
  --accent-rgb: 139, 92, 246;
  --accent-soft: rgba(139, 92, 246, .16);
  --accent-strong: rgba(139, 92, 246, .3);
  --ok: #10b981;
  --ok-soft: rgba(16,185,129,.16);
  --warn: #f59e0b;
  --warn-soft: rgba(245,158,11,.16);
  --down: #ef4444;
  --down-soft: rgba(239,68,68,.16);
  --radius: 26px;
  --radius-sm: 18px;
}

:root[data-accent="cyan"] {
  --accent: #06b6d4;
  --accent-rgb: 6, 182, 212;
  --accent-soft: rgba(6, 182, 212, .16);
  --accent-strong: rgba(6, 182, 212, .28);
}
:root[data-accent="emerald"] {
  --accent: #10b981;
  --accent-rgb: 16, 185, 129;
  --accent-soft: rgba(16, 185, 129, .16);
  --accent-strong: rgba(16, 185, 129, .28);
}
:root[data-accent="amber"] {
  --accent: #f59e0b;
  --accent-rgb: 245, 158, 11;
  --accent-soft: rgba(245, 158, 11, .16);
  --accent-strong: rgba(245, 158, 11, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  background:
    radial-gradient(circle at 0% 0%, var(--theme-radial-a), transparent 28%),
    radial-gradient(circle at 100% 0%, var(--theme-radial-b), transparent 24%),
    radial-gradient(circle at 50% 100%, var(--theme-radial-c), transparent 28%),
    var(--theme-bg);
  min-height: 100vh;
}

::selection {
  background: rgba(var(--accent-rgb), .26);
  color: white;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.panel, .panel-lite {
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.panel { padding: 1.3rem; }
.panel-lite { padding: 1rem; }

.eyebrow {
  margin: 0 0 .42rem;
  font-size: .73rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.muted, .muted-link { color: var(--muted); }
.muted-link:hover { color: var(--text); }

h1, h2, h3, h4, p { margin-top: 0; }
h1 {
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  margin-bottom: .35rem;
  line-height: 1.1;
}
h2 {
  font-size: clamp(1.45rem, 2.6vw, 2.3rem);
  margin-bottom: .35rem;
  line-height: 1.1;
}
h3 { font-size: 1.22rem; margin-bottom: 0; letter-spacing: -.015em; }
h4 { font-size: 1.03rem; margin-bottom: .25rem; letter-spacing: -.01em; }

.btn {
  border: 1px solid transparent;
  border-radius: 16px;
  padding: .9rem 1rem;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: var(--shadow-soft);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(.98); }
.btn:disabled { opacity: .65; cursor: wait; transform: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, white));
  color: white;
  box-shadow: 0 12px 28px rgba(var(--accent-rgb), .26);
}
.btn-primary:hover { box-shadow: 0 16px 34px rgba(var(--accent-rgb), .32); }
.btn-secondary {
  background: rgba(255,255,255,.045);
  color: var(--text);
  border-color: rgba(255,255,255,.09);
}
.btn-secondary:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}
.btn-danger {
  background: rgba(239,68,68,.12);
  color: #ffd2d2;
  border-color: rgba(239,68,68,.28);
}
.btn-block { width: 100%; }

.landing-page, .auth-page {
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.landing-shell {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.25rem;
  align-items: stretch;
}
.landing-brand, .landing-preview {
  padding: clamp(1.2rem, 3vw, 2.2rem);
  border-radius: 32px;
  background: rgba(14, 15, 23, .76);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.landing-brand {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
.landing-logo { width: 98px; height: 98px; }
.landing-copy { max-width: 58ch; color: var(--muted); font-size: 1.03rem; }
.landing-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.landing-preview { display: grid; gap: .85rem; align-content: center; }

.mini-card {
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  display: grid;
  gap: .25rem;
}
.mini-card .dot,
.status-badge::before {
  width: .72rem;
  height: .72rem;
  border-radius: 999px;
  display: inline-block;
  background: rgba(255,255,255,.25);
  box-shadow: 0 0 0 7px rgba(255,255,255,.05);
  content: "";
}
.mini-card.good .dot, .status-badge.good::before { background: var(--ok); }
.mini-card.warn .dot, .status-badge.warn::before { background: var(--warn); }
.mini-card.down .dot, .status-badge.down::before { background: var(--down); }

.auth-shell {
  width: min(560px, 100%);
  display: grid;
  gap: 1.2rem;
  border-color: var(--panel-border-strong);
}
.auth-shell.wide { width: min(820px, 100%); }
.auth-logo {
  width: 74px;
  height: 74px;
  padding: .6rem;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.form-grid { display: grid; gap: .95rem; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact { gap: .85rem; }
label { display: grid; gap: .45rem; }
label span {
  font-size: .95rem;
  color: var(--text-2);
  font-weight: 700;
}
.input-hint {
  margin-top: -.1rem;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.35;
}
input, select, textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    rgba(8, 11, 18, .92);
  color: var(--text);
  padding: .9rem .98rem;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input::placeholder,
textarea::placeholder { color: var(--muted-2); }
textarea { resize: vertical; min-height: 6rem; }
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.9rem;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23d9e0f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right .95rem center;
  background-size: auto, 18px 18px;
}
select option {
  background: #0c1020;
  color: var(--text);
}
input:hover, select:hover, textarea:hover {
  border-color: rgba(255,255,255,.18);
}
input:focus, select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, white);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: rgba(10, 14, 24, .96);
}
.full-width { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.message { min-height: 1.3rem; color: #d6ddff; font-weight: 600; }
.message.error { color: #ffd0d0; }
.hidden { display: none; }
.totp-result {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.03);
}
.qr-box {
  width: min(256px, 100%);
  border-radius: 22px;
  padding: .75rem;
  background: white;
}
.code-box { display: grid; gap: .5rem; }
code {
  word-break: break-all;
  background: rgba(255,255,255,.05);
  padding: .8rem;
  border-radius: 14px;
  color: var(--soft);
}

.dashboard-page { padding: 1rem; }
.dashboard-shell {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 1rem;
  width: min(1540px, 100%);
  margin: 0 auto;
}
.sidebar {
  position: sticky;
  top: 1rem;
  height: calc(100vh - 2rem);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 1.2rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    var(--panel-strong);
  border-color: var(--panel-border-strong);
}
.brand-row { display: flex; gap: .9rem; align-items: center; }
.sidebar-logo {
  width: 58px;
  height: 58px;
  padding: .65rem;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}
.side-nav { display: grid; gap: .45rem; }
.side-nav a {
  padding: .92rem 1rem;
  border-radius: 18px;
  color: var(--muted);
  font-weight: 700;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  border: 1px solid transparent;
  position: relative;
}
.side-nav a::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 10px;
  width: 4px;
  border-radius: 999px;
  background: transparent;
}
.side-nav a:hover,
.side-nav a.active {
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-color: rgba(255,255,255,.1);
  transform: translateY(-1px);
}
.side-nav a.active {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .15);
}
.side-nav a.active::before {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 65%, white));
}
.sidebar-foot {
  align-self: end;
  display: grid;
  gap: .8rem;
}
.sidebar-user {
  padding: .92rem 1rem;
  border-radius: 18px;
  color: var(--soft);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.075);
}
.main-content { display: grid; gap: 1rem; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.hero-panel {
  padding: 1.55rem;
  min-height: 160px;
  border-color: var(--panel-border-strong);
  background:
    linear-gradient(140deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(circle at right top, rgba(var(--accent-rgb), .16), transparent 34%),
    radial-gradient(circle at left bottom, rgba(255,255,255,.04), transparent 28%),
    var(--panel);
}
.compact-hero { min-height: 136px; }
.hero-copy { max-width: 64ch; }
.topbar-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.stat-card {
  display: grid;
  gap: .28rem;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -28px;
  top: -28px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
}
.stat-card strong {
  font-size: clamp(2rem, 3vw, 2.9rem);
  letter-spacing: -.03em;
}
.stat-label { color: var(--muted); font-weight: 700; }
.stat-sub { color: var(--soft); font-size: .92rem; }
.stat-card.neutral { border-color: rgba(255,255,255,.14); }
.stat-card.good {
  border-color: rgba(16,185,129,.24);
  background: linear-gradient(180deg, rgba(16,185,129,.08), rgba(255,255,255,.015)), var(--panel);
}
.stat-card.warn {
  border-color: rgba(245,158,11,.24);
  background: linear-gradient(180deg, rgba(245,158,11,.08), rgba(255,255,255,.015)), var(--panel);
}
.stat-card.down {
  border-color: rgba(239,68,68,.24);
  background: linear-gradient(180deg, rgba(239,68,68,.08), rgba(255,255,255,.015)), var(--panel);
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr);
  gap: 1rem;
}
.overview-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.overview-accent {
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(circle at right center, rgba(var(--accent-rgb), .17), transparent 40%),
    var(--panel);
}
.pulse-badge {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.02);
}
.pulse-badge span {
  position: absolute;
  inset: 12px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .18), transparent 70%);
}
.pulse-badge strong {
  position: relative;
  z-index: 1;
  font-size: 1.35rem;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .9fr);
  gap: 1rem;
  align-items: start;
}
.manage-grid { grid-template-columns: minmax(0, 1.2fr) minmax(380px, .9fr); }
.section-block { display: grid; gap: 1rem; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.toolbar-row {
  display: flex;
  gap: .8rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.search-input {
  max-width: 360px;
  min-width: 260px;
}
.filter-chip-row {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}
.chip {
  border-radius: 999px;
  padding: .68rem 1rem;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  color: var(--soft);
  cursor: pointer;
  font-weight: 700;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, color .18s ease;
}
.chip:hover { transform: translateY(-1px); }
.chip.active {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .11));
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, white 10%);
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), .16);
}
.sticky-card {
  position: sticky;
  top: 1rem;
}
.form-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    var(--panel-strong);
  border-color: var(--panel-border-strong);
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .95rem;
}
.dashboard-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.dashboard-simple-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: .75rem;
}
.compact-overview-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  padding: .95rem;
}
.compact-overview-item {
  min-width: 0;
  padding: .82rem .95rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  display: grid;
  gap: .4rem;
}
.compact-overview-accent {
  border-color: rgba(var(--accent-rgb), .24);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .12), rgba(255,255,255,.03));
}
.compact-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .74rem;
  font-weight: 700;
}
.compact-overview-main {
  display: grid;
  gap: .2rem;
}
.compact-overview-main strong {
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.1;
}
.compact-overview-main span {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.35;
}
.simple-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    rgba(12, 16, 26, .9);
}
.simple-service-row.good { border-color: rgba(16,185,129,.22); }
.simple-service-row.warn { border-color: rgba(245,158,11,.22); }
.simple-service-row.down { border-color: rgba(239,68,68,.22); }
.simple-service-main {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
}
.simple-service-title-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  flex: 1 1 auto;
}
.service-visual {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);
}
.service-visual.has-favicon {
  background: transparent;
  border-color: rgba(255,255,255,.04);
}
.favicon-shell {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 6px;
}
.simple-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  flex: 0 0 auto;
}
.service-favicon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.fallback-icon.hidden {
  display: none;
}
.simple-service-title-wrap > div:last-child {
  min-width: 0;
}
.simple-service-title-wrap .card-title-link {
  max-width: 100%;
}
.simple-service-endpoint {
  min-width: 0;
  padding: .82rem .9rem;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.05);
  display: grid;
  gap: .28rem;
}
.simple-service-endpoint span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.simple-service-endpoint strong {
  display: block;
  word-break: break-word;
  color: var(--text);
}
.simple-service-actions {
  display: flex;
  justify-content: flex-end;
}
.simple-service-actions .btn {
  min-width: 112px;
}
.manage-cards { grid-template-columns: 1fr; }
.resource-card {
  display: grid;
  gap: .95rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    rgba(12, 16, 26, .88);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,.24);
}
.resource-card.good { border-color: rgba(16,185,129,.22); }
.resource-card.warn { border-color: rgba(245,158,11,.22); }
.resource-card.down { border-color: rgba(239,68,68,.22); }
.resource-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem;
  align-items: center;
}
.icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.06);
}
.icon-wrap svg { width: 28px; height: 28px; fill: var(--accent); }
.card-title-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.card-title-link:hover { color: white; text-decoration: underline; }
.resource-meta {
  color: var(--muted);
  margin-bottom: 0;
  text-transform: capitalize;
  font-size: .92rem;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .58rem .85rem;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 700;
  background: rgba(255,255,255,.05);
  white-space: nowrap;
}
.status-badge.good { background: rgba(16,185,129,.11); color: #b7f5db; }
.status-badge.warn { background: rgba(245,158,11,.12); color: #ffe0a3; }
.status-badge.down { background: rgba(239,68,68,.12); color: #ffc2c2; }
.status-badge.unknown { background: rgba(255,255,255,.06); color: var(--soft); }
.resource-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.compact-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kv {
  padding: .85rem;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.05);
  display: grid;
  gap: .35rem;
}
.kv span { color: var(--muted); font-size: .82rem; font-weight: 700; }
.kv strong { word-break: break-word; }
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.tag {
  padding: .38rem .68rem;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .14);
  border: 1px solid rgba(var(--accent-rgb), .18);
  color: #f0ecff;
  font-size: .82rem;
  font-weight: 700;
}
.notes { color: #d5dcf0; margin-bottom: 0; }
.resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.empty-state {
  min-height: 260px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: .45rem;
  color: var(--muted);
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 24px;
  background: rgba(255,255,255,.02);
}
.settings-grid { display: grid; gap: 1rem; }
.security-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.security-summary strong {
  display: block;
  margin-top: .35rem;
  font-size: 1.15rem;
}
.summary-note {
  padding: .95rem 1rem;
  border-radius: 18px;
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .16);
  color: var(--soft);
}

@media (max-width: 1180px) {
  .dashboard-shell,
  .content-grid,
  .manage-grid,
  .overview-grid,
  .stats-grid,
  .compact-overview-bar {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    grid-template-rows: auto auto auto;
  }
  .sticky-card { position: static; }
}

@media (max-width: 900px) {
  .landing-shell,
  .cards-grid,
  .dashboard-simple-list,
  .resource-body,
  .compact-body {
    grid-template-columns: 1fr;
  }
  .simple-service-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .simple-service-actions {
    justify-content: stretch;
  }
  .simple-service-actions .btn {
    width: 100%;
  }
  .dashboard-shell { gap: .85rem; }
  .side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .side-nav a {
    text-align: center;
    padding: .84rem .55rem;
  }
  .side-nav a::before { display: none; }
}

@media (max-width: 720px) {
  .topbar,
  .section-head-stack-mobile,
  .landing-brand,
  .security-summary,
  .overview-card {
    display: grid;
    grid-template-columns: 1fr;
  }
  .two-columns { grid-template-columns: 1fr; }
  .toolbar-row,
  .topbar-actions,
  .resource-actions,
  .form-actions,
  .landing-actions,
  .security-summary .btn,
  .simple-service-main,
  .simple-service-title-wrap {
    width: 100%;
  }
  .toolbar-row .search-input,
  .topbar-actions .btn,
  .resource-actions .btn,
  .form-actions .btn,
  .landing-actions .btn,
  .security-summary .btn {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
  }
  .dashboard-page { padding: .75rem; }
  .panel, .panel-lite { border-radius: 22px; }
  .hero-panel { padding: 1.2rem; }
  .auth-page, .landing-page { padding: .9rem; }
  .auth-shell, .auth-shell.wide { width: 100%; }
}

.page-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.status-badge.unknown { background: rgba(255,255,255,.06); color: var(--soft); }
@media (max-width: 900px) {
  .side-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .side-nav { grid-template-columns: 1fr 1fr; }
}

.compact-select{min-width:180px;max-width:220px;}
.event-details{border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:.75rem .9rem;background:rgba(255,255,255,.03);}
.event-details summary{cursor:pointer;color:var(--soft);font-weight:700;}
.event-details pre{white-space:pre-wrap;word-break:break-word;color:var(--muted);font-size:.82rem;margin:.8rem 0 0;}
@media (max-width:900px){.side-nav{overflow-x:auto;grid-template-columns:repeat(9,minmax(120px,1fr));}.compact-select{max-width:none;min-width:0;}}

.updates-download-list {
  display: grid;
  gap: .8rem;
}
.updates-download-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
@media (max-width: 720px) {
  .updates-download-row {
    flex-direction: column;
    align-items: stretch;
  }
  .updates-download-row .btn {
    width: 100%;
  }
}

.inline-toggle { display:flex; align-items:center; gap:.7rem; color:var(--soft); font-weight:600; }
.inline-toggle input { width:18px; height:18px; }


body, .dashboard-shell, .main-content, .panel, .panel-lite, .resource-card, .resource-body, .kv, .notes, .resource-meta, .toolbar-row, .section-head, .topbar, .compact-overview-main, .summary-note, pre, code, textarea, input, select, .updates-download-row, .event-details {
  min-width: 0;
}

pre, code, .notes, .resource-meta, .kv strong, .compact-overview-main strong, .compact-overview-main span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dashboard-shell {
  max-width: 1380px;
}

.main-content {
  overflow-x: hidden;
}

.resource-card, .kv, .summary-note, .compact-overview-item {
  max-width: 100%;
}

.event-details pre {
  white-space: pre-wrap;
  max-width: 100%;
}

/* ===== UI polish / containment overrides ===== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.dashboard-shell,
.main-content,
.main-content > *,
.section-block,
.section-head,
.toolbar-row,
.cards-grid,
.cards-grid > *,
.dashboard-simple-list,
.dashboard-simple-list > *,
.resource-card,
.resource-head,
.resource-body,
.simple-service-row,
.simple-service-main,
.simple-service-title-wrap,
.simple-service-endpoint,
.compact-overview-item,
.compact-overview-main,
.side-nav a,
.hero-panel,
.topbar-actions,
.search-input {
  min-width: 0;
}

.panel,
.panel-lite,
.resource-card,
.simple-service-row,
.compact-overview-item,
.stat-card,
.sidebar,
.hero-panel {
  overflow: hidden;
}

.dashboard-shell {
  width: min(1400px, calc(100% - 24px));
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.sidebar {
  max-height: calc(100vh - 24px);
  overflow: auto;
}

.main-content {
  gap: 18px;
}

.hero-panel {
  min-height: unset;
  padding: 1.3rem 1.35rem;
}

.hero-copy {
  max-width: 54ch;
}

.topbar-actions {
  justify-content: flex-end;
  align-items: center;
}

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

.stat-card {
  min-height: 138px;
}

.compact-overview-bar {
  padding: 12px;
  gap: 12px;
  align-items: stretch;
}

.compact-overview-item {
  padding: 14px 16px;
}

.compact-overview-main strong {
  font-size: 1rem;
}

.section-head {
  align-items: flex-start;
}

.toolbar-row {
  flex: 1 1 auto;
  justify-content: flex-end;
}

.filter-chip-row {
  flex: 0 1 auto;
}

.search-input {
  flex: 1 1 300px;
  width: min(100%, 360px);
  max-width: 360px;
}

.dashboard-simple-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.simple-service-row {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
}

.simple-service-main {
  align-items: center;
  gap: 12px;
}

.simple-service-title-wrap {
  flex: 1 1 auto;
  gap: 12px;
}

.service-visual,
.simple-icon,
.icon-wrap {
  width: 52px;
  height: 52px;
}

.card-title-link {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resource-meta,
.notes,
.endpoint,
.compact-overview-main span,
.kv strong,
.kv span,
.sidebar-user,
.message,
.summary-note {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.simple-service-endpoint {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.simple-service-endpoint strong {
  font-size: 0.98rem;
  line-height: 1.3;
}

.simple-service-actions {
  display: none;
}

/* Better stack points before overlap starts */
@media (max-width: 1360px) {
  .dashboard-shell {
    grid-template-columns: 240px minmax(0, 1fr);
    width: min(1280px, calc(100% - 18px));
  }

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

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

  .section-head.section-head-stack-mobile,
  .topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .topbar-actions,
  .toolbar-row {
    justify-content: flex-start;
  }

  .search-input {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 1120px) {
  .dashboard-shell {
    grid-template-columns: 1fr;
    width: min(960px, calc(100% - 14px));
  }

  .sidebar {
    position: static;
    max-height: none;
  }

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

  .dashboard-simple-list,
  .compact-overview-bar,
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .dashboard-page {
    padding: 10px;
  }

  .dashboard-shell {
    width: 100%;
    gap: 12px;
  }

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

  .stats-grid,
  .compact-overview-bar,
  .dashboard-simple-list {
    grid-template-columns: 1fr;
  }

  .simple-service-row {
    grid-template-columns: 1fr;
  }

  .hero-panel,
  .panel,
  .panel-lite {
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* Dashboard services: force vertical list */
.dashboard-simple-list {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 14px;
}

.simple-service-row {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) !important;
}

@media (max-width: 900px) {
  .dashboard-simple-list {
    grid-template-columns: 1fr !important;
  }

  .simple-service-row {
    grid-template-columns: 1fr !important;
  }
}


.branding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .85rem;
}
.branding-card {
  display: grid;
  gap: .55rem;
  text-align: left;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius: 20px;
  padding: .9rem;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.branding-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), .34);
  background: rgba(255,255,255,.05);
}
.branding-card.active {
  border-color: rgba(var(--accent-rgb), .5);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .25) inset;
}
.branding-card img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  padding: .35rem;
}
.branding-card strong {
  font-size: .96rem;
}
.branding-card span {
  color: var(--muted);
  font-size: .86rem;
}


.simple-admin-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
}
.integration-group-list {
  display: grid;
  gap: .9rem;
}
.integration-group {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}
.integration-group summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  font-weight: 700;
}
.integration-group summary::-webkit-details-marker { display: none; }
.integration-group summary strong { color: var(--muted); }
.integration-group-items {
  display: grid;
  gap: .7rem;
  padding: 0 1rem 1rem;
}
.compact-row-card {
  display: grid;
  gap: .8rem;
}
.compact-row-main, .compact-row-actions {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.compact-row-main { min-width: 0; }
.compact-row-main > div:last-child { min-width: 0; }
.compact-row-actions { flex-wrap: wrap; }
.simple-form-block {
  padding-top: .25rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.toggle-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
}
.simple-variables-box {
  padding: .95rem 1rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  display: grid;
  gap: .8rem;
}
.simple-token-list {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.token-chip {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  color: var(--soft);
  border-radius: 999px;
  padding: .48rem .7rem;
  cursor: pointer;
}
.token-chip:hover { background: rgba(255,255,255,.08); }
.sidebar, .main-content, .section-block, .resource-card, .resource-body, .compact-row-main, .compact-overview-main {
  min-width: 0;
}
html, body { overflow-x: hidden; }
body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; }
@media (max-width: 1180px) {
  .simple-admin-grid { grid-template-columns: 1fr; }
  .compact-row-actions { width: 100%; }
}
@media (max-width: 720px) {
  .compact-row-main, .compact-row-actions, .toggle-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
}

.cards-two-columns {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
  align-items: start;
}

.select-compact {
  min-width: 180px;
}

.preview-box {
  display: grid;
  gap: .55rem;
  border-style: dashed;
}

.preview-message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.template-icon {
  font-size: 1.35rem;
  line-height: 1;
}


.checkbox-line {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.checkbox-line input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.checkbox-line span {
  margin: 0;
}

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

.incident-timeline {
  list-style: none;
  padding: 0;
  margin: .9rem 0 0;
  display: grid;
  gap: .75rem;
}

.incident-timeline li {
  padding: .8rem .9rem;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  display: grid;
  gap: .25rem;
}

.incident-timeline li span {
  color: var(--muted);
  font-size: .86rem;
}

@media (max-width: 980px) {
  .cards-two-columns {
    grid-template-columns: 1fr;
  }
}


.share-links { display:grid; gap:12px; }
.share-links code { display:block; white-space:normal; overflow-wrap:anywhere; margin-top:6px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.resource-actions .btn + .btn { margin-left: 0; }


.service-hero-refined{align-items:flex-start}.actions-stack-tight{align-items:flex-end}.hero-status-line{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.quick-action-card{display:grid;gap:12px;padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}.quick-action-card label{display:grid;gap:6px}.quick-action-card input,.quick-action-card select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#121827;color:#fff}.stack-accordion{display:grid;gap:12px}.accordion-card{border-radius:18px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);overflow:hidden}.accordion-toggle{width:100%;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:16px 18px;background:transparent;border:0;color:inherit;text-align:left;cursor:pointer}.accordion-toggle h4{margin:4px 0 0}.accordion-body{display:none;padding:0 16px 16px}.accordion-card.open .accordion-body{display:block}.btn-small{padding:8px 12px;font-size:13px}.tag-action{text-decoration:none;display:inline-flex;align-items:center}.compact{padding:12px}.neutral .status-badge{opacity:.92}@media(max-width:860px){.actions-stack-tight{align-items:stretch}.action-grid{grid-template-columns:1fr}}

/* v7 product finish: richer service detail */
.service-v7-hero{display:flex;justify-content:space-between;gap:18px;align-items:center}.service-v7-headline{display:flex;gap:16px;align-items:flex-start}.service-v7-icon{width:72px;height:72px;border-radius:22px;background:rgba(255,255,255,.06);display:grid;place-items:center;overflow:hidden;font-size:30px;flex:0 0 72px}.service-v7-icon img{width:42px;height:42px;object-fit:contain}.service-v7-actions{align-self:stretch;justify-content:center}.cards-two-columns-wide{grid-template-columns:1.15fr .85fr}.service-uptime-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.uptime-panel{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:14px;display:grid;gap:10px}.uptime-strip{display:grid;grid-template-columns:repeat(24,1fr);gap:4px}.uptime-slot{height:12px;border-radius:999px;background:rgba(255,255,255,.12)}.uptime-slot.ok,.uptime-slot.good{background:#10b981}.uptime-slot.warn{background:#f59e0b}.uptime-slot.down{background:#ef4444}.uptime-slot.unknown{background:rgba(255,255,255,.12)}.timeline-stack{display:grid;gap:14px}.timeline-card{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:flex-start;padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)}.timeline-card.good{background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(255,255,255,.02))}.timeline-card.warn{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(255,255,255,.02))}.timeline-card.down{background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(255,255,255,.02))}.timeline-card.neutral{background:linear-gradient(135deg,rgba(148,163,184,.08),rgba(255,255,255,.02))}.timeline-dot{width:38px;height:38px;border-radius:14px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-size:18px}.timeline-content{display:grid;gap:10px}.timeline-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.quick-action-card{display:grid;gap:12px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)}.quick-action-card label{display:grid;gap:6px}.quick-action-card input,.quick-action-card select{width:100%;padding:12px 14px;border-radius:14px;background:rgba(6,12,24,.92);border:1px solid rgba(255,255,255,.08);color:#fff}.tag-warning{background:rgba(245,158,11,.16);color:#ffd18a}.tag-action{text-decoration:none}.service-detail-page-v7 .resource-actions{margin-top:8px}.service-detail-page-v7 .resource-actions .btn-small{padding:10px 12px}.service-detail-page-v7 .cards-grid.manage-cards{align-items:start}
@media (max-width: 1100px){.service-v7-hero,.cards-two-columns-wide{grid-template-columns:1fr;display:grid}.service-v7-headline{align-items:center}.service-v7-actions{align-self:auto}.service-uptime-grid{grid-template-columns:1fr}}
@media (max-width: 720px){.timeline-card{grid-template-columns:1fr}.timeline-dot{width:34px;height:34px}.timeline-head{flex-direction:column;align-items:flex-start}.service-v7-headline{flex-direction:column}.service-v7-icon{width:64px;height:64px}}

/* V8 enterprise dashboard + status pages */
.enterprise-hero-panel {
  background: linear-gradient(180deg, rgba(124,92,255,0.12), rgba(124,92,255,0.04));
}
.dashboard-enterprise-grid {
  align-items: start;
}
.status-public-page {
  background: radial-gradient(circle at top, rgba(124,92,255,0.12), transparent 40%), #0b1020;
  color: #e9ecff;
  min-height: 100vh;
}
.status-public-shell {
  width: min(1180px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 24px 0 40px;
  display: grid;
  gap: 18px;
}
.status-public-hero {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 16px;
  padding: 24px;
  border-radius: 24px;
}
.status-public-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.status-metric-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.status-metric-card.good { border-color: rgba(16,185,129,0.35); }
.status-metric-card.warn { border-color: rgba(245,158,11,0.35); }
.status-metric-card.down { border-color: rgba(239,68,68,0.35); }
.status-metric-card span { display:block; font-size: .82rem; color: rgba(233,236,255,0.72); }
.status-metric-card strong { display:block; font-size: 1.4rem; margin-top: 6px; }
.status-editorial-banner {
  padding: 20px 22px;
  border-radius: 22px;
  border: 1px solid rgba(245,158,11,0.28);
  background: linear-gradient(180deg, rgba(245,158,11,0.14), rgba(245,158,11,0.05));
}
.status-inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.component-section.component-critical {
  border-color: rgba(239,68,68,0.28);
}
.component-section.component-highlight,
.component-section.component-warning {
  border-color: rgba(245,158,11,0.28);
}
.status-public-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.uptime-strip {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
}
.uptime-dot {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.4);
}
.uptime-dot.good { background: rgba(16,185,129,0.9); }
.uptime-dot.warn { background: rgba(245,158,11,0.92); }
.uptime-dot.down { background: rgba(239,68,68,0.92); }
.dashboard-simple-list .resource-card,
#dashboard-executive-grid .resource-card,
#dashboard-noisy-list .resource-card,
#dashboard-groups-grid .resource-card,
#dashboard-upcoming-maintenance .resource-card {
  min-height: 100%;
}
@media (max-width: 900px) {
  .status-public-hero,
  .status-public-footer {
    grid-template-columns: 1fr;
    display: grid;
  }
  .status-public-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* V9 executive detail + richer status history */
.executive-summary-grid{display:grid;grid-template-columns:1.35fr repeat(3,minmax(0,1fr));gap:14px}.executive-hero-card,.executive-mini-card{border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);padding:16px;display:grid;gap:8px}.executive-hero-card.good{background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(255,255,255,.03))}.executive-hero-card.warn{background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(255,255,255,.03))}.executive-hero-card.down{background:linear-gradient(135deg,rgba(239,68,68,.14),rgba(255,255,255,.03))}.executive-mini-card span{font-size:.82rem;color:var(--muted)}.executive-mini-card strong{font-size:1.55rem}.executive-mini-card small{color:var(--muted)}.service-detail-page-v9 .stats-grid{margin-top:2px}.status-history-band{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);margin-bottom:14px}.status-history-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.uptime-strip.wide{grid-template-columns:repeat(28,minmax(0,1fr))}.status-public-page .status-history-grid .resource-card{min-height:100%}
@media (max-width: 1100px){.executive-summary-grid{grid-template-columns:1fr 1fr}.status-history-band{grid-template-columns:1fr}}
@media (max-width: 760px){.executive-summary-grid{grid-template-columns:1fr}.status-public-summary{grid-template-columns:1fr 1fr}.status-history-grid{grid-template-columns:1fr}}


.executive-board-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.executive-summary-card{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:10px}.executive-summary-card.good{box-shadow:inset 0 0 0 1px rgba(16,185,129,.2)}.executive-summary-card.warn{box-shadow:inset 0 0 0 1px rgba(245,158,11,.2)}.executive-summary-card.down{box-shadow:inset 0 0 0 1px rgba(239,68,68,.2)}.executive-kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted,#9ca3af)}.executive-summary-card strong{font-size:1.2rem}.attention-card .resource-actions{margin-top:10px}.compact-tags{margin-top:6px}.integration-preview-box{margin-top:14px}.preview-pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:.5rem 0}.preview-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px}.provider-preview-json{margin-top:12px;padding:12px;border-radius:14px;background:#0b1020;color:#dbe4ff;overflow:auto;font-size:.82rem;max-height:260px}.status-story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.status-story-card{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}.status-story-card.good{box-shadow:inset 0 0 0 1px rgba(16,185,129,.18)}.status-story-card.warn{box-shadow:inset 0 0 0 1px rgba(245,158,11,.18)}.status-story-card.down{box-shadow:inset 0 0 0 1px rgba(239,68,68,.18)}.status-story-head{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.status-story-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted,#9ca3af);font-size:.85rem;margin-top:10px}.component-details{overflow:hidden}.component-summary-row{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.component-summary-row::-webkit-details-marker{display:none}.component-details-body{display:flex;flex-direction:column;gap:16px;padding-top:14px}.component-toggle-tag{font-weight:700}.dashboard-priority-grid .section-block{min-height:100%}@media (max-width: 840px){.component-summary-row{flex-direction:column}.executive-board-grid,.status-story-grid{grid-template-columns:1fr}}

:root {
  --status-accent: #7c3aed;
}

.dashboard-visuals-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.chart-card .chart-shell,
.rich-uptime-panel .chart-shell {
  margin: 12px 0 10px;
  border-radius: 18px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.mini-line-svg,
.mini-stacked-svg {
  width: 100%;
  height: 88px;
  display: block;
}

.chart-card .mini-line-svg,
.rich-uptime-panel .mini-line-svg {
  color: rgba(148, 163, 184, 0.95);
}

.chart-card .health-line .mini-line-svg,
.rich-uptime-panel .latency-line .mini-line-svg {
  color: rgba(96, 165, 250, 0.95);
}

.chart-caption-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--muted, #94a3b8);
}

.provider-presets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.provider-presets-row .chip {
  border: 1px solid rgba(255,255,255,0.08);
}

.status-brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.status-brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--status-accent), rgba(255,255,255,0.14));
  color: white;
  box-shadow: 0 20px 42px rgba(0,0,0,0.28);
}

.status-public-hero {
  border: 1px solid color-mix(in srgb, var(--status-accent) 24%, transparent);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.28);
}

.status-public-hero .status-metric-card {
  border-color: color-mix(in srgb, var(--status-accent) 18%, rgba(255,255,255,0.08));
}

.status-subscribe-panel {
  border-color: color-mix(in srgb, var(--status-accent) 24%, rgba(255,255,255,0.08));
}

.status-subscribe-panel .btn-primary,
.status-public-hero .tag {
  background: color-mix(in srgb, var(--status-accent) 28%, rgba(255,255,255,0.04));
}

.rich-uptime-panel {
  min-height: 100%;
}

@media (max-width: 760px) {
  .status-brand-lockup {
    align-items: flex-start;
  }

  .chart-caption-row {
    flex-direction: column;
    gap: 4px;
  }
}


.status-brand-image{width:36px;height:36px;object-fit:contain;display:block}
.status-support-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.status-public-page .status-brand-mark img{filter:drop-shadow(0 8px 18px rgba(0,0,0,.24))}
.status-public-page .status-subscribe-panel .tag-row{margin:6px 0 10px}
.settings-grid #smtp-form{margin-top:8px}


/* Final polish round */
.section-jump-bar {
  position: sticky;
  top: 12px;
  z-index: 8;
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .9rem 1rem;
  background: linear-gradient(180deg, rgba(15,19,31,.92), rgba(15,19,31,.82));
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(18px);
}
.section-jump-bar .eyebrow { margin: 0; }
.section-jump-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .62rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-2);
  font-weight: 700;
  font-size: .92rem;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.section-jump-link:hover {
  background: rgba(var(--accent-rgb), .16);
  border-color: rgba(var(--accent-rgb), .28);
  transform: translateY(-1px);
}
.section-anchor-target { scroll-margin-top: 110px; }
.compact-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .52rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-2);
  font-size: .88rem;
  font-weight: 700;
}
.status-page-quick-nav {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.status-page-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.preview-note {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .9rem;
}
.live-preview-card {
  position: relative;
  overflow: hidden;
}
.live-preview-card::after {
  content: '';
  position: absolute;
  inset: auto -10% -45% auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .18), transparent 68%);
  pointer-events: none;
}
.form-inline-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}
.copy-inline-btn {
  padding: .55rem .78rem;
  min-height: 0;
  border-radius: 12px;
}
.mobile-top-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.mobile-top-nav a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .8rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  font-weight: 700;
}
.mobile-top-nav a.active {
  background: rgba(var(--accent-rgb), .18);
  border-color: rgba(var(--accent-rgb), .34);
}
@media (max-width: 900px) {
  .section-jump-bar { top: 8px; }
}


/* V15 final branding pass */
:root {
  --accent: #4f7cff;
  --accent-rgb: 79, 124, 255;
  --accent-soft: rgba(79, 124, 255, .18);
  --accent-strong: rgba(79, 124, 255, .3);
  --brand-indigo: #4f7cff;
  --brand-violet: #8b5cf6;
  --brand-cyan: #22d3ee;
  --brand-green: #55f08b;
  --brand-glow: 0 20px 56px rgba(79, 124, 255, .28);
}
:root[data-accent="hostwatch"] {
  --accent: #4f7cff;
  --accent-rgb: 79, 124, 255;
  --accent-soft: rgba(79, 124, 255, .18);
  --accent-strong: rgba(79, 124, 255, .3);
}
:root[data-accent="violet"] {
  --accent: #6678ff;
  --accent-rgb: 102, 120, 255;
  --accent-soft: rgba(102, 120, 255, .16);
  --accent-strong: rgba(102, 120, 255, .28);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, rgba(255,255,255,.3), transparent 72%);
  opacity: .18;
}
body::after {
  content: "";
  position: fixed;
  inset: auto -12vw -20vh auto;
  width: 38vw;
  height: 38vw;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,211,238,.18), transparent 60%);
  filter: blur(28px);
  pointer-events: none;
  opacity: .6;
}
.sidebar,
.hero-panel,
.landing-brand,
.landing-preview,
.auth-shell,
.status-public-hero,
.resource-card,
.stat-card,
.executive-summary-card,
.executive-hero-card,
.executive-mini-card,
.status-story-card,
.timeline-card,
.status-subscribe-panel {
  position: relative;
  overflow: hidden;
}
.sidebar::before,
.hero-panel::before,
.landing-brand::before,
.auth-shell::before,
.status-public-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(79,124,255,.11), transparent 42%, rgba(139,92,246,.08) 72%, transparent 100%);
  opacity: .9;
}
.sidebar::after,
.hero-panel::after,
.landing-brand::after,
.auth-shell::after,
.status-public-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%);
  opacity: .45;
}
.brand-row > div h1,
[data-app-title] {
  letter-spacing: -.03em;
}
.brand-row > div .eyebrow,
.brand-chip,
.hero-brand-line .eyebrow {
  color: #d9e7ff;
}
.brand-chip,
.hero-brand-line,
.brand-subline {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .48rem .8rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(79,124,255,.18), rgba(139,92,246,.14));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 30px rgba(10, 14, 30, .26);
  backdrop-filter: blur(12px);
}
.brand-chip img,
.hero-brand-line img,
.mobile-brand-strip img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.sidebar-logo,
.landing-logo,
.auth-logo {
  box-shadow: var(--brand-glow);
  background: linear-gradient(145deg, rgba(79,124,255,.16), rgba(139,92,246,.12));
  border-color: rgba(255,255,255,.12);
}
.sidebar-logo {
  width: 62px;
  height: 62px;
}
.side-nav a.active {
  background: linear-gradient(135deg, rgba(79,124,255,.18), rgba(139,92,246,.12));
  border-color: rgba(79,124,255,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 26px rgba(12, 16, 28, .2);
}
.side-nav a:hover {
  background: rgba(79,124,255,.12);
  border-color: rgba(79,124,255,.22);
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-indigo), var(--brand-violet) 62%, var(--brand-cyan));
  box-shadow: 0 14px 34px rgba(79,124,255,.28);
}
.btn-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.04));
}
.panel,
.panel-lite,
.resource-card,
.stat-card,
.executive-summary-card,
.executive-hero-card,
.executive-mini-card,
.quick-action-card,
.status-story-card,
.timeline-card,
.mini-card,
.status-metric-card,
.uptime-panel,
.status-history-band,
.service-pill,
.mobile-panel,
.mini,
.incident,
.row,
.count {
  box-shadow: 0 16px 44px rgba(5, 8, 18, .18);
}
.hero-panel {
  background:
    linear-gradient(140deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(circle at right top, rgba(79,124,255,.26), transparent 34%),
    radial-gradient(circle at left bottom, rgba(34,211,238,.12), transparent 26%),
    linear-gradient(180deg, rgba(10,14,26,.94), rgba(12,16,28,.88));
}
.enterprise-hero-panel {
  background:
    linear-gradient(180deg, rgba(79,124,255,.14), rgba(79,124,255,.04)),
    radial-gradient(circle at 85% 15%, rgba(34,211,238,.14), transparent 28%);
}
.status-public-page {
  background:
    radial-gradient(circle at top, rgba(79,124,255,.16), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(34,211,238,.08), transparent 26%),
    #0a1020;
}
.status-brand-mark {
  background: linear-gradient(135deg, color-mix(in srgb, var(--status-accent) 82%, #5ee9ff), rgba(255,255,255,.14));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--status-accent) 32%, rgba(0,0,0,.28));
}
.status-public-hero .status-metric-card,
.stat-card,
.executive-summary-card,
.executive-hero-card,
.executive-mini-card {
  backdrop-filter: blur(12px);
}
.section-jump-link,
.compact-hero-stat,
.tag,
.chip {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.095);
}
.tag,
.chip,
.compact-hero-stat,
.status-badge,
.section-jump-link {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.status-badge.good,
.tag.good,
.chip.good { background: rgba(16,185,129,.14); }
.status-badge.warn,
.tag.warn,
.chip.warn { background: rgba(245,158,11,.14); }
.status-badge.down,
.tag.down,
.chip.down { background: rgba(239,68,68,.14); }
.landing-brand,
.auth-shell {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)),
    linear-gradient(160deg, rgba(10,14,26,.96), rgba(12,18,34,.88));
}
.landing-copy,
.auth-shell .muted {
  max-width: 60ch;
}
.brand-title-glow {
  background: linear-gradient(135deg, #eef3ff, #c0d9ff 46%, #91f1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy strong,
.landing-copy strong,
.muted strong {
  color: var(--text);
}
.status-page-quick-nav,
.section-jump-bar {
  background: linear-gradient(180deg, rgba(10,14,26,.92), rgba(10,14,26,.84));
  border-color: rgba(79,124,255,.14);
}
.mobile-brand-strip {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(79,124,255,.18), rgba(139,92,246,.12));
  border:1px solid rgba(255,255,255,.09);
  box-shadow: var(--brand-glow);
}
.mobile-brand-strip strong {
  display:block;
  line-height:1.1;
}
.mobile-brand-strip span {
  display:block;
  color:#d6e4ff;
  font-size:12px;
}
.mobile-top-nav a.active,
.mobile-top-nav a:hover {
  background: linear-gradient(135deg, rgba(79,124,255,.22), rgba(139,92,246,.15));
  border-color: rgba(79,124,255,.32);
}
#status-page-preview .resource-card,
#status-pages-list .resource-card,
#service-overview .resource-card,
#service-notifications .resource-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.022));
}
.preview-note {
  margin-top: 6px;
  color: var(--soft);
}
.copy-inline-btn {
  min-height: 42px;
}
@media (max-width: 760px) {
  .brand-chip,
  .hero-brand-line,
  .brand-subline {
    width: 100%;
    justify-content: flex-start;
  }
  .sidebar-logo,
  .landing-logo,
  .auth-logo {
    box-shadow: 0 12px 28px rgba(79,124,255,.24);
  }
}


/* ===== v16 professional IA / UX refresh ===== */
.dashboard-shell {
  grid-template-columns: minmax(262px, 290px) minmax(0, 1fr);
  gap: 1.2rem;
}
.sidebar {
  position: sticky;
  top: 1rem;
  align-self: start;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.05rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
    linear-gradient(160deg, rgba(var(--accent-rgb), .12), transparent 28%),
    rgba(10, 13, 24, 0.9);
  border-color: rgba(255,255,255,.08);
}
.workspace-summary {
  display: grid;
  gap: .25rem;
  margin: .95rem 0 1rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), rgba(255,255,255,.03));
}
.workspace-summary strong {
  font-size: 1rem;
  letter-spacing: -.01em;
}
.side-nav.grouped-nav {
  display: grid;
  gap: .8rem;
}
.nav-group {
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
  border-radius: 20px;
  overflow: hidden;
}
.nav-group-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: .88rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
.nav-group-toggle strong {
  display: block;
  font-size: .96rem;
}
.nav-group-toggle small {
  display: block;
  margin-top: .16rem;
  color: var(--muted);
  font-size: .75rem;
}
.nav-group-links {
  display: grid;
  gap: .35rem;
  padding: 0 .55rem .55rem;
}
.nav-group[data-open="false"] .nav-group-links {
  display: none;
}
.nav-group-caret {
  color: var(--muted);
  transition: transform .18s ease;
}
.nav-group[data-open="false"] .nav-group-caret {
  transform: rotate(-90deg);
}
.side-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .72rem .85rem;
  border-radius: 14px;
  color: var(--text-2);
  background: rgba(255,255,255,.02);
  border: 1px solid transparent;
}
.side-nav a:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.side-nav a.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .26), rgba(255,255,255,.05));
  border-color: rgba(var(--accent-rgb), .32);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 24px rgba(var(--accent-rgb), .16);
}
.workspace-hints {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .85rem;
}

.workspace-toolbar {
  display: grid;
  gap: 1rem;
  align-items: center;
  grid-template-columns: minmax(0, 1.2fr) auto;
}
.workspace-toolbar-copy {
  max-width: 64ch;
}
.workspace-toolbar-copy h3 {
  margin: 0 0 .35rem;
}
.workspace-jump-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.view-switch {
  display: inline-flex;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.view-pill {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  color: var(--text);
  min-height: 42px;
  padding: .68rem .95rem;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: .18s ease;
}
.view-pill:hover {
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.view-pill.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .28), rgba(255,255,255,.06));
  border-color: rgba(var(--accent-rgb), .34);
  box-shadow: 0 12px 30px rgba(var(--accent-rgb), .16);
}
.view-hidden {
  display: none !important;
}
.section-jump-link {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.section-jump-link:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.main-content {
  display: grid;
  gap: 1rem;
}
.hero-panel,
.section-block,
.compact-overview-bar,
.stat-card,
.resource-card,
.simple-service-row {
  border-color: rgba(255,255,255,.075);
}
.stats-grid {
  gap: .9rem;
}
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.09), transparent 70%);
  pointer-events: none;
}
.executive-board-panel,
#dashboard-visuals-section .section-block,
#dashboard-services-section,
#service-summary-section,
#service-timeline-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.014)),
    rgba(10, 14, 25, 0.9);
}
.simple-service-row {
  display: grid;
  gap: .95rem;
  border-radius: 22px;
  padding: 1rem 1.05rem;
}
.simple-service-main {
  display: block;
}
.simple-service-topline {
  display: flex;
  gap: .8rem;
  justify-content: space-between;
  align-items: center;
}
.simple-service-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}
.mini-fact {
  padding: .8rem .88rem;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  min-width: 0;
}
.mini-fact span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .28rem;
}
.mini-fact strong {
  display: block;
  font-size: .94rem;
  overflow-wrap: anywhere;
}
.simple-service-footer {
  display: flex;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.service-detail-page-v9 .hero-panel {
  padding-bottom: 1.5rem;
}
.hero-status-line,
#service-executive-summary,
#service-uptime,
#service-overview,
#service-notifications {
  gap: .85rem;
}
.executive-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}
.executive-summary-grid .resource-card,
.executive-summary-grid .panel-lite {
  min-height: 100%;
}
.stack-accordion {
  display: grid;
  gap: .8rem;
}
.accordion-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.025);
}
.accordion-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 1rem 1rem .95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
.accordion-body {
  padding: 0 1rem 1rem;
}
@media (max-width: 1180px) {
  .dashboard-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    max-height: none;
  }
  .workspace-toolbar,
  .simple-service-footer {
    grid-template-columns: 1fr;
  }
  .view-switch {
    justify-content: flex-start;
  }
  .simple-service-facts,
  .executive-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .simple-service-facts,
  .executive-summary-grid {
    grid-template-columns: 1fr;
  }
  .workspace-jump-links {
    overflow: auto;
    flex-wrap: nowrap;
    padding-bottom: .2rem;
  }
  .view-switch {
    width: 100%;
  }
  .view-pill {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* V17 status pages refinement */
.status-admin-jump-bar { margin-bottom: 14px; }
.form-subsection-title {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.form-subsection-title strong { font-size: .98rem; }
.form-subsection-title span { color: var(--muted); font-size: .9rem; }
.mini-preview-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;
  margin-top:12px;
}
.mini-preview-card {
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  display:grid;
  gap:6px;
}
.status-public-page .status-story-grid,
.status-public-page .status-incident-timeline { scroll-margin-top: 120px; }
.status-public-page .component-details {
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.status-public-page .component-details[open] {
  border-color: color-mix(in srgb, var(--status-accent) 28%, rgba(255,255,255,.08));
  box-shadow: 0 20px 38px rgba(2,6,23,.24);
}
.status-public-page .component-summary-row h3 { margin-bottom: 6px; }
.status-public-page .component-summary-row .tag-row { justify-content: flex-end; }
.status-public-page .resource-card .preview-note { margin-bottom: 0; }
.status-public-page .status-incident-entry h4 { font-size: 1.05rem; }
.status-public-page .status-incident-update strong { font-size: .93rem; }
.status-public-page .status-service-grid .resource-card { min-height: 100%; }
.status-public-page .status-empty-note { margin-top: 12px; }
@media (max-width: 760px) {
  .status-public-page .status-component-actions,
  .status-public-page .status-filter-bar,
  .status-page-quick-nav { align-items: stretch; }
  .status-public-page .status-filter-pills,
  .status-public-page .status-page-quick-actions { width: 100%; }
  .status-public-page .status-filter-pill { flex: 1 1 0; text-align: center; }
  .status-public-page .component-summary-row .tag-row { justify-content: flex-start; }
}


/* V19 dashboard service-first redesign */
.dashboard-services-only {
  align-content: start;
}
.dashboard-clean-hero {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
.dashboard-clean-actions {
  justify-content: flex-end;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.stats-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-catalog-shell {
  padding: 1.1rem;
}
.dashboard-services-head {
  margin-bottom: 1rem;
}
.catalog-toolbar-row {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}
.catalog-search-input {
  min-width: min(100%, 360px);
}
.dashboard-service-cards {
  display: grid;
  gap: .95rem;
}
.service-list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border-radius: 24px;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
    rgba(10, 14, 25, 0.92);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.service-list-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
}
.service-list-card.good { border-color: rgba(16,185,129,.22); }
.service-list-card.warn { border-color: rgba(245,158,11,.24); }
.service-list-card.down { border-color: rgba(239,68,68,.26); }
.service-list-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.service-list-visual {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
}
.service-list-copy {
  min-width: 0;
  display: grid;
  gap: .38rem;
}
.service-list-title-row {
  display: flex;
  gap: .8rem;
  align-items: center;
  flex-wrap: wrap;
}
.service-name-link {
  color: #f8fbff;
  font-size: 1.03rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-decoration: none;
}
.service-name-link:hover {
  color: rgb(var(--accent-rgb));
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.service-name-link.disabled {
  opacity: .84;
  pointer-events: none;
}
.service-subline {
  color: var(--muted);
  font-size: .9rem;
}
.service-endpoint-line {
  display: grid;
  gap: .2rem;
  min-width: 0;
}
.service-endpoint-line span {
  color: rgba(185, 199, 223, .72);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.service-endpoint-line strong {
  font-size: .92rem;
  font-weight: 700;
  color: #eef5ff;
  overflow-wrap: anywhere;
}
.service-list-side {
  display: grid;
  gap: .65rem;
  min-width: 168px;
}
.service-side-pill {
  padding: .82rem .9rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  text-align: left;
}
.service-side-pill span {
  display: block;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(185, 199, 223, .72);
  margin-bottom: .2rem;
}
.service-side-pill strong {
  display: block;
  font-size: .95rem;
  color: #f8fbff;
  overflow-wrap: anywhere;
}
.service-side-pill.good { border-color: rgba(16,185,129,.24); }
.service-side-pill.warn { border-color: rgba(245,158,11,.24); }
.service-side-pill.down { border-color: rgba(239,68,68,.26); }
.service-side-pill.neutral { border-color: rgba(255,255,255,.08); }
@media (max-width: 1100px) {
  .dashboard-clean-hero,
  .service-list-card {
    grid-template-columns: 1fr;
  }
  .stats-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-list-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
}
@media (max-width: 720px) {
  .stats-grid-compact,
  .service-list-side {
    grid-template-columns: 1fr;
  }
  .service-list-main {
    align-items: flex-start;
  }
  .service-list-title-row {
    align-items: flex-start;
  }
  .catalog-search-input {
    min-width: 100%;
  }
}


.dashboard-clean-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.2rem;
  align-items: end;
}
.dashboard-clean-hero .hero-copy { max-width: 72ch; }
.dashboard-services-head { gap: 1rem; }
.dashboard-service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.service-list-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.05rem .85rem;
  background: var(--tile-bg), var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  box-shadow: var(--tile-shadow);
  overflow: hidden;
}
.service-list-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .35), transparent);
  opacity: .5;
}
.service-list-card.good { border-color: rgba(16,185,129,.2); }
.service-list-card.warn { border-color: rgba(245,158,11,.22); }
.service-list-card.down { border-color: rgba(239,68,68,.24); }
.service-list-main { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .9rem; align-items: center; }
.service-list-visual {
  width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.08);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.favicon-shell, .service-favicon { width: 30px; height: 30px; }
.service-favicon { object-fit: contain; }
.simple-icon svg { width: 22px; height: 22px; fill: currentColor; opacity: .95; }
.service-list-copy { min-width: 0; display: grid; gap: .26rem; }
.service-list-title-row { display:flex; align-items:center; gap:.7rem; min-width:0; }
.service-name-link {
  font-size: 1.06rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.service-name-link:hover { color: var(--accent); }
.service-name-link.disabled { pointer-events: none; opacity: .82; }
.service-subline { color: var(--muted); font-size: .87rem; }
.service-endpoint-line { display:flex; align-items:center; gap:.55rem; min-width:0; color: var(--muted); font-size: .82rem; }
.service-endpoint-line span { text-transform: uppercase; letter-spacing: .14em; font-size: .69rem; color: var(--muted-2); }
.service-endpoint-line strong { min-width:0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 650; color: var(--soft); }
.service-list-side { display:grid; gap:.65rem; justify-items:end; min-width: 140px; }
.service-side-pill {
  display:grid; gap:.12rem; min-width: 134px; text-align:right;
  padding:.62rem .8rem; border-radius: 16px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
}
.service-side-pill span { font-size: .71rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted-2); }
.service-side-pill strong { font-size: .94rem; }
.service-heartbeat-inline {
  margin-top: .15rem;
  display: flex; align-items: center; gap: 2px;
  width: min(100%, 210px); height: 10px;
}
.service-heartbeat-inline span {
  flex: 1 1 0; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.service-heartbeat-inline span.up { background: color-mix(in srgb, var(--ok) 88%, white); }
.service-heartbeat-inline span.warn { background: color-mix(in srgb, var(--warn) 88%, white); }
.service-heartbeat-inline span.down { background: color-mix(in srgb, var(--down) 88%, white); }
.service-heartbeat-inline span.maintenance { background: color-mix(in srgb, var(--accent) 74%, white); }
.service-heartbeat-inline span.unknown { background: rgba(148,163,184,.35); }
.appearance-shell { display:grid; gap:1rem; }
.theme-toolbar { display:flex; flex-wrap:wrap; gap:1rem; align-items:end; }
.theme-select-wrap { min-width: 240px; }
.theme-helper-note {
  margin: 0;
  padding: .9rem 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}
@media (max-width: 920px) {
  .dashboard-clean-hero,
  .service-list-card { grid-template-columns: 1fr; }
  .service-list-side { justify-items: stretch; min-width: 0; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .service-side-pill { min-width: 0; text-align: left; }
}
@media (max-width: 640px) {
  .dashboard-service-cards { grid-template-columns: 1fr; }
  .service-list-main { align-items: start; }
  .service-list-side { grid-template-columns: 1fr; }
  .service-list-visual { width: 48px; height: 48px; }
}


/* v21 tile refinement */
.dashboard-hero-minimal {
  align-items: center;
}
.dashboard-hero-minimal .hero-copy {
  max-width: 52ch;
}
.dashboard-hero-actions-minimal {
  align-self: center;
}
.dashboard-services-head {
  gap: .85rem;
}
.dashboard-service-cards {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.service-tile-card {
  grid-template-columns: 1fr;
  gap: .72rem;
  padding: .95rem;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.016)), var(--panel);
}
.service-tile-card::after {
  display: none;
}
.service-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .85rem;
}
.service-tile-main {
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: .75rem;
}
.service-tile-copy {
  gap: .22rem;
}
.service-tile-title-row {
  gap: .45rem;
}
.service-list-visual {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
.favicon-shell, .service-favicon {
  width: 24px;
  height: 24px;
}
.simple-icon svg {
  width: 18px;
  height: 18px;
}
.service-name-link {
  font-size: 1rem;
  line-height: 1.15;
}
.service-subline {
  font-size: .79rem;
}
.service-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  margin-top: .15rem;
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}
.service-status-dot.good { background: var(--ok); }
.service-status-dot.warn { background: var(--warn); }
.service-status-dot.down { background: var(--down); }
.service-status-dot.unknown { background: rgba(148,163,184,.65); }
.service-tile-endpoint {
  display: grid;
  gap: .15rem;
  align-items: start;
}
.service-tile-endpoint strong {
  font-size: .84rem;
}
.service-tile-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .65rem;
}
.service-inline-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: .28rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.08);
}
.service-inline-badge.good { background: rgba(16,185,129,.14); color: #d6ffec; border-color: rgba(16,185,129,.24); }
.service-inline-badge.warn { background: rgba(245,158,11,.16); color: #ffe8bf; border-color: rgba(245,158,11,.24); }
.service-inline-badge.down { background: rgba(239,68,68,.15); color: #ffd7d7; border-color: rgba(239,68,68,.24); }
.service-inline-badge.unknown { background: rgba(148,163,184,.12); color: #d7dfed; }
.service-latency-inline {
  font-size: .83rem;
  font-weight: 700;
  color: var(--soft);
}
.service-heartbeat-inline {
  margin-top: .05rem;
  width: 100%;
  height: 8px;
  gap: 1.5px;
}
.service-heartbeat-inline span {
  height: 4px;
}
@media (max-width: 920px) {
  .dashboard-hero-minimal {
    grid-template-columns: 1fr;
  }
}