/* ============================================================
   ZYPHERAL — Design System
   Dark-first infrastructure / monitoring / hosting dashboard
   ============================================================ */

:root {
  /* --- Surfaces (near-black, cool) --- */
  --bg:          #05070a;
  --bg-grad-1:   #070a10;
  --surface-1:   #0a0e15;   /* sidebar / chrome */
  --surface-2:   #0d121b;   /* cards */
  --surface-3:   #111825;   /* raised / hover */
  --surface-4:   #161f2d;   /* inputs / wells */
  --overlay:     #0b0f17;

  /* --- Borders --- */
  --border:        rgba(255,255,255,.065);
  --border-2:      rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.16);
  --hairline:      rgba(255,255,255,.045);

  /* --- Text --- */
  --t-hi:    #eef2f6;
  --t:       #b8c2cf;
  --t-dim:   #7c8696;
  --t-faint: #525c6b;
  --t-ghost: #364150;

  /* --- Brand (emerald) --- */
  --brand:        #34d399;
  --brand-bright: #5eead4;
  --brand-deep:   #10b981;
  --brand-dark:   #065f46;
  --brand-ink:    #032420;
  --brand-glow:   rgba(52,211,153,.30);
  --brand-soft:   rgba(52,211,153,.10);
  --brand-line:   rgba(52,211,153,.22);

  /* --- Status --- */
  --up:        #34d399;   --up-soft:   rgba(52,211,153,.12);
  --warn:      #fbbf24;   --warn-soft: rgba(251,191,36,.12);
  --down:      #fb5e7e;   --down-soft: rgba(251,94,126,.12);
  --info:      #56b8f5;   --info-soft: rgba(86,184,245,.12);
  --idle:      #8b93f8;   --idle-soft: rgba(139,147,248,.12);

  /* --- Chart series --- */
  --c1: #34d399;  --c2: #56b8f5;  --c3: #8b93f8;  --c4: #fbbf24;  --c5: #fb5e7e;

  /* --- Radii --- */
  --r-xs: 6px; --r-sm: 8px; --r: 11px; --r-md: 13px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* --- Shadows --- */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 6px 20px -8px rgba(0,0,0,.55);
  --sh-3: 0 18px 50px -16px rgba(0,0,0,.7);
  --sh-pop: 0 24px 60px -12px rgba(0,0,0,.75), 0 0 0 1px var(--border-2);
  --glow:  0 0 0 1px var(--brand-line), 0 8px 30px -8px var(--brand-glow);

  /* --- Type --- */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell-w: 252px;
  --shell-w-collapsed: 76px;
  --top-h: 60px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv01","ss01","tnum";
}
#root { height: 100%; }

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #1c2532; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #283344; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

h1,h2,h3,h4 { margin: 0; color: var(--t-hi); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }

/* ===================== App scaffold ===================== */
/* The collapse toggle animates the track rather than snapping — without this
   the sidebar jumps 252px -> 76px in one frame and reads as a layout glitch. */
.app { display: grid; grid-template-columns: var(--shell-w) 1fr; height: 100%; overflow: hidden;
  transition: grid-template-columns .2s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }
.app.collapsed { grid-template-columns: var(--shell-w-collapsed) 1fr; }

/* ===================== Sidebar ===================== */
.sidebar {
  background: linear-gradient(180deg, var(--surface-1), #070a11);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0; position: relative;
}
.sidebar::after { /* subtle right edge sheen */
  content:""; position:absolute; top:0; right:0; bottom:0; width:1px;
  background: linear-gradient(180deg, transparent, var(--brand-line) 30%, transparent 70%); opacity:.5;
}
.brand {
  height: var(--top-h); display: flex; align-items: center; gap: 11px;
  padding: 0 18px; border-bottom: 1px solid var(--hairline); flex-shrink: 0;
}
.brand-mark {
  width: 30px; height: 34px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--brand-bright), var(--brand-deep));
  -webkit-mask: var(--mark) center/contain no-repeat; mask: var(--mark) center/contain no-repeat;
  filter: drop-shadow(0 2px 8px var(--brand-glow));
}
.brand-word { font-size: 18px; font-weight: 600; color: var(--t-hi); letter-spacing: -.02em; }
.brand-word b { color: var(--brand-bright); font-weight: 600; }
.collapsed .brand-word, .collapsed .nav-label, .collapsed .nav-group-label, .collapsed .side-foot-txt { display: none; }
.collapsed .brand { justify-content: center; padding: 0; }

.nav { flex: 1; overflow-y: auto; padding: 14px 12px 8px; min-height: 0; }
.nav-group-label {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-faint);
  padding: 14px 12px 7px; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--t-dim); font-size: 13.5px; font-weight: 500; position: relative;
  transition: background .14s, color .14s; user-select: none; margin-bottom: 1px;
  cursor: pointer;
}
.collapsed .nav-item { justify-content: center; padding: 10px; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.7; }
.nav-item:hover { background: var(--surface-3); color: var(--t); }
.nav-item.active { background: var(--brand-soft); color: var(--brand-bright); }
.nav-item.active::before {
  content:""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 99px; background: var(--brand); box-shadow: 0 0 10px var(--brand-glow);
}
.nav-badge {
  margin-left: auto; font-size: 10.5px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center; border-radius: 99px;
  background: var(--down); color: #fff; font-family: var(--mono);
}
.collapsed .nav-badge { position: absolute; top: 4px; right: 4px; margin: 0; transform: scale(.8); }

.side-foot { border-top: 1px solid var(--hairline); padding: 12px; flex-shrink: 0; }
.side-status {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12px;
}
.collapsed .side-status { justify-content: center; padding: 9px; }

/* ===================== Topbar ===================== */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background:
  radial-gradient(1100px 420px at 78% -8%, rgba(52,211,153,.05), transparent 60%),
  radial-gradient(900px 500px at -5% 110%, rgba(86,184,245,.04), transparent 55%),
  var(--bg); }
.topbar {
  height: var(--top-h); flex-shrink: 0; display: flex; align-items: center; gap: 14px;
  padding: 0 22px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-1) 78%, transparent);
  backdrop-filter: blur(10px); position: relative; z-index: 20;
}
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--t-dim); display: grid; place-items: center;
  position: relative; transition: .14s; flex-shrink: 0;
}
.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.7; }
.icon-btn:hover { background: var(--surface-3); color: var(--t-hi); border-color: var(--border-strong); }
.icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 99px; background: var(--down); border: 2px solid var(--surface-1); }

/* search */
.search {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 9px; height: 36px;
  padding: 0 12px; border-radius: var(--r-sm); background: var(--surface-2);
  border: 1px solid var(--border); color: var(--t-dim); transition: .14s;
}
.search:focus-within { border-color: var(--brand-line); background: var(--surface-3); box-shadow: 0 0 0 3px var(--brand-soft); }
/* Topbar search is a <button> that opens the command palette, styled to read
   as the input it replaced. */
.search-trigger { text-align: left; cursor: pointer; font-family: inherit; }
.search-trigger:hover { border-color: var(--border-strong); background: var(--surface-3); }
/* nowrap: this replaced an <input>, which never wrapped. A plain span does,
   and the placeholder broke onto two lines in the topbar. */
.search-ph { flex: 1; min-width: 0; color: var(--t-faint); font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search svg { width: 16px; height: 16px; flex-shrink: 0; }
.search input { flex: 1; background: none; border: none; outline: none; color: var(--t-hi); font-size: 13.5px; font-family: inherit; }
.search input::placeholder { color: var(--t-faint); }
.search kbd {
  font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; border-radius: 5px;
  background: var(--surface-4); border: 1px solid var(--border); color: var(--t-faint);
}

.top-spacer { flex: 1; }

/* ============================================================
   "Soon" — features that exist in the navigation but not yet in
   the product. Visibly inert: no pointer, no hover, dimmed.
   ============================================================ */
.soon-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; flex-shrink: 0;
  background: var(--surface-4); color: var(--t-faint); border: 1px solid var(--border);
}
.is-soon { cursor: default; }
.nav-item.is-soon { opacity: .45; }
.nav-item.is-soon:hover { background: transparent; color: var(--t-dim); }
.nav-item .nav-soon { margin-left: auto; }
.collapsed .nav-item .nav-soon { display: none; }
.pop-item.is-soon { opacity: .5; }
.pop-item.is-soon:hover { background: transparent; color: var(--t); }
.pop-item.is-soon:hover svg { color: var(--t-dim); }
.qa.is-soon { opacity: .5; }
.qa.is-soon:hover { border-color: var(--border); background: var(--surface-2); }
.card.is-soon { border-style: dashed; }

/* sidebar collapse toggle */
.side-collapse {
  margin-left: auto; width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 8px;
  background: none; border: 1px solid transparent; color: var(--t-faint); transition: .14s;
}
.side-collapse:hover { background: var(--surface-3); border-color: var(--border); color: var(--t-hi); }
/* Collapsed: the wordmark is hidden, so centre the control under the logo. */
.collapsed .brand { flex-direction: column; gap: 6px; height: auto; padding: 12px 0; }
.collapsed .side-collapse { margin: 0; }

/* env pill */
.env-pill {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  background: var(--brand-soft); color: var(--brand-bright); border: 1px solid var(--brand-line);
}
.env-pill .pulse { width: 7px; height: 7px; }

/* profile */
.profile { display: flex; align-items: center; gap: 9px; padding: 4px 9px 4px 4px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface-2); transition: .14s; }
.profile { cursor: pointer; }
.profile:hover { background: var(--surface-3); border-color: var(--border-strong); }
.avatar {
  width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--brand-ink); flex-shrink: 0;
  background: linear-gradient(140deg, var(--brand-bright), var(--brand-deep));
}
.profile .pname { font-size: 12.5px; font-weight: 600; color: var(--t-hi); line-height: 1.1; }
.profile .pmail { font-size: 11px; color: var(--t-faint); line-height: 1.2; }

/* ===================== Domain selector ===================== */
.domain-switch {
  display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px 0 8px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--border); transition: .14s; min-width: 230px;
}
.domain-switch { cursor: pointer; }
.domain-switch:hover { border-color: var(--border-strong); background: var(--surface-3); }
.domain-switch .fav { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface-4); font-size: 13px; font-weight: 600; color: var(--t-hi); flex-shrink: 0; }
.domain-switch .ds-name { font-size: 13.5px; font-weight: 600; color: var(--t-hi); line-height: 1.15; }
.domain-switch .ds-sub { font-size: 11px; color: var(--t-faint); display: flex; align-items: center; gap: 5px; }
.domain-switch .chev { margin-left: auto; color: var(--t-faint); }

/* ===================== Page ===================== */
.page { flex: 1; overflow-y: auto; min-height: 0; }
.page-inner { max-width: 1480px; margin: 0 auto; padding: 26px 32px 64px; }
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.page-head .ph-title { font-size: 23px; font-weight: 600; letter-spacing: -.02em; }
.page-head .ph-sub { color: var(--t-dim); font-size: 13.5px; margin-top: 3px; }
.page-head .ph-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.breadcrumb { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--t-faint); margin-bottom:5px; }
.breadcrumb b { color: var(--t-dim); font-weight:500; }

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 600; border: 1px solid var(--border-2);
  background: var(--surface-3); color: var(--t-hi); transition: .14s; white-space: nowrap; letter-spacing: .005em;
}
.btn svg { width: 16px; height: 16px; stroke-width: 1.9; }
.btn:hover { background: var(--surface-4); border-color: var(--border-strong); }
.btn.primary {
  background: linear-gradient(140deg, var(--brand-bright), var(--brand-deep)); color: var(--brand-ink);
  border-color: transparent; box-shadow: 0 6px 18px -6px var(--brand-glow);
}
.btn.primary:hover { filter: brightness(1.07); box-shadow: 0 8px 24px -6px var(--brand-glow); }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.ghost:hover { background: var(--surface-3); }
.btn.danger { background: var(--down-soft); color: var(--down); border-color: rgba(251,94,126,.25); }
.btn.danger:hover { background: rgba(251,94,126,.18); }
.btn.sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-xs); }
.btn.sm svg { width: 14px; height: 14px; }
.btn.lg { height: 44px; padding: 0 20px; font-size: 14px; }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.block { width: 100%; }

/* segmented toggle */
.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.seg button { height: 30px; padding: 0 13px; border: none; background: none; color: var(--t-dim); font-size: 12.5px; font-weight: 600; border-radius: var(--r-xs); display: inline-flex; align-items: center; gap: 6px; transition: .12s; }
.seg button svg { width: 15px; height: 15px; }
.seg button.on { background: var(--surface-4); color: var(--t-hi); box-shadow: var(--sh-1); }

/* ===================== Cards ===================== */
.card {
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 80%, #000));
  border: 1px solid var(--border); border-radius: var(--r-md); position: relative;
}
.card.pad { padding: 18px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--hairline); }
.card-head .ch-title { font-size: 13.5px; font-weight: 600; color: var(--t-hi); }
.card-head .ch-sub { font-size: 11.5px; color: var(--t-faint); }
.card-head .ch-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card-body { padding: 18px; }

/* grid helpers */
.grid { display: grid; gap: 16px; }
.row { display: flex; gap: 16px; }
.between { display: flex; align-items: center; justify-content: space-between; }

/* ===================== Stat / metric cards ===================== */
.stat { padding: 16px 17px; }
.stat .s-top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.stat .s-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.stat .s-ico svg { width: 17px; height: 17px; stroke-width: 1.8; }
.stat .s-label { font-size: 12px; color: var(--t-dim); font-weight: 500; }
.stat .s-val { font-size: 27px; font-weight: 600; color: var(--t-hi); letter-spacing: -.02em; line-height: 1; font-family: var(--mono); }
.stat .s-val small { font-size: 14px; color: var(--t-dim); font-weight: 500; margin-left: 2px; }
.stat .s-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: var(--t-faint); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; font-family: var(--mono); }
.delta svg { width: 12px; height: 12px; }
.delta.up { color: var(--up); } .delta.down { color: var(--down); } .delta.flat { color: var(--t-dim); }

/* tinted icon chips */
.chip-bg-brand { background: var(--brand-soft); color: var(--brand); }
.chip-bg-info  { background: var(--info-soft); color: var(--info); }
.chip-bg-idle  { background: var(--idle-soft); color: var(--idle); }
.chip-bg-warn  { background: var(--warn-soft); color: var(--warn); }
.chip-bg-down  { background: var(--down-soft); color: var(--down); }

/* ===================== Status badges & dots ===================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em; border: 1px solid transparent; white-space: nowrap;
}
.badge .pulse, .badge .ddot { width: 6px; height: 6px; }
.badge.up   { background: var(--up-soft);   color: var(--up);   border-color: rgba(52,211,153,.22); }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(251,191,36,.22); }
.badge.down { background: var(--down-soft); color: var(--down); border-color: rgba(251,94,126,.24); }
.badge.info { background: var(--info-soft); color: var(--info); border-color: rgba(86,184,245,.22); }
.badge.idle { background: var(--idle-soft); color: var(--idle); border-color: rgba(139,147,248,.22); }
.badge.neutral { background: var(--surface-4); color: var(--t-dim); border-color: var(--border); }

.ddot { width: 8px; height: 8px; border-radius: 99px; display: inline-block; flex-shrink: 0; }
.ddot.up { background: var(--up); } .ddot.warn { background: var(--warn); }
.ddot.down { background: var(--down); } .ddot.info { background: var(--info); } .ddot.idle { background: var(--idle); }

.pulse { width: 8px; height: 8px; border-radius: 99px; position: relative; flex-shrink: 0; background: var(--up); }
.pulse::after { content:""; position: absolute; inset: -3px; border-radius: 99px; background: inherit; opacity: .5; animation: pulse 1.8s ease-out infinite; }
.pulse.warn { background: var(--warn); } .pulse.down { background: var(--down); } .pulse.info { background: var(--info); }
@keyframes pulse { 0%{ transform: scale(.6); opacity:.6 } 80%,100%{ transform: scale(2.4); opacity:0 } }

/* ===================== Tables ===================== */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--t-faint);
  font-weight: 600; padding: 11px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; position:sticky; top:0;
  background: var(--surface-2); z-index: 1;
}
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--hairline); font-size: 13px; vertical-align: middle; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--surface-3); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .t-strong { color: var(--t-hi); font-weight: 600; }
.tbl .t-mono { font-family: var(--mono); color: var(--t); font-size: 12.5px; }
.cell-site { display: flex; align-items: center; gap: 11px; }

/* ===================== Forms ===================== */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--t); }
.field .hint { font-size: 11.5px; color: var(--t-faint); }
.input, .select, textarea.input {
  height: 40px; padding: 0 13px; border-radius: var(--r-sm); background: var(--surface-4);
  border: 1px solid var(--border); color: var(--t-hi); font-size: 13.5px; font-family: inherit; outline: none; transition: .14s; width: 100%;
}
textarea.input { height: auto; padding: 11px 13px; resize: vertical; line-height: 1.5; }
.input::placeholder { color: var(--t-faint); }
.input:focus, .select:focus, textarea.input:focus { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }
.input.mono { font-family: var(--mono); font-size: 12.5px; }
.input-group { display: flex; align-items: center; background: var(--surface-4); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.input-group .pre { padding: 0 11px; color: var(--t-faint); font-size: 13px; border-right: 1px solid var(--border); height: 40px; display: grid; place-items: center; background: var(--surface-3); }
.input-group input { flex: 1; height: 40px; padding: 0 12px; background: none; border: none; outline: none; color: var(--t-hi); font-family: var(--mono); font-size: 12.5px; }

/* toggle switch */
.switch { width: 40px; height: 23px; border-radius: 99px; background: var(--surface-4); border: 1px solid var(--border); position: relative; transition: .16s; flex-shrink: 0; cursor: pointer; }
.switch::after { content:""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 99px; background: var(--t-dim); transition: .16s; }
.switch.on { background: var(--brand-deep); border-color: transparent; }
.switch.on::after { left: 19px; background: #fff; }

/* progress / meters */
.meter { height: 7px; border-radius: 99px; background: var(--surface-4); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); }
.meter.warn > i { background: linear-gradient(90deg, #d9890c, var(--warn)); }
.meter.down > i { background: linear-gradient(90deg, #d33a57, var(--down)); }

/* ===================== Misc ===================== */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0,1fr)); gap: 14px; }
.divider { height: 1px; background: var(--border); margin: 0; border: none; }
.tag { font-size: 11px; font-family: var(--mono); padding: 2px 7px; border-radius: 5px; background: var(--surface-4); color: var(--t-dim); border: 1px solid var(--border); }
.dim { color: var(--t-dim); } .faint { color: var(--t-faint); } .hi { color: var(--t-hi); }
.mt0{margin-top:0}.mb0{margin-bottom:0}

/* activity feed */
.feed-item { display: flex; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.feed-item:last-child { border-bottom: none; }
.feed-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.feed-ico svg { width: 16px; height: 16px; stroke-width: 1.8; }
.feed-main { flex: 1; min-width: 0; }
.feed-title { font-size: 13px; color: var(--t); }
.feed-title b { color: var(--t-hi); font-weight: 600; }
.feed-time { font-size: 11.5px; color: var(--t-faint); margin-top: 2px; font-family: var(--mono); }

/* quick action tile */
.qa { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); transition: .14s; text-align: left; width: 100%; }
.qa:hover { background: var(--surface-3); border-color: var(--brand-line); transform: translateY(-1px); }
.qa .qa-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-4); color: var(--brand); }
.qa .qa-ico svg { width: 18px; height: 18px; }
.qa .qa-t { font-size: 13px; font-weight: 600; color: var(--t-hi); }
.qa .qa-d { font-size: 11.5px; color: var(--t-faint); }
.qa .qa-arrow { margin-left: auto; color: var(--t-ghost); transition: .14s; }
.qa:hover .qa-arrow { color: var(--brand); transform: translateX(2px); }

/* uptime timeline bars */
.uptime-bars { display: flex; gap: 2px; align-items: flex-end; height: 38px; }
.uptime-bars > i { flex: 1; border-radius: 2px; min-width: 0; transition: opacity .12s; }
.ub-up { background: var(--up); } .ub-warn { background: var(--warn); } .ub-down { background: var(--down); } .ub-none { background: var(--surface-4); }
.uptime-bars > i:hover { opacity: .7; }

/* dropdown / popover */
.pop {
  position: absolute; background: var(--overlay); border: 1px solid var(--border-2); border-radius: var(--r-md);
  box-shadow: var(--sh-pop); z-index: 100; overflow: hidden; animation: pop .14s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.pop-item { display: flex; align-items: center; gap: 11px; padding: 10px 13px; font-size: 13px; color: var(--t); transition: background .1s; cursor: pointer; }
.pop-item svg { width: 16px; height: 16px; color: var(--t-dim); }
.pop-item:hover { background: var(--surface-3); color: var(--t-hi); }
.pop-item:hover svg { color: var(--brand); }
.pop-sep { height: 1px; background: var(--border); margin: 4px 0; }
.pop-label { padding: 9px 13px 5px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-faint); font-weight: 600; }

/* modal */
.scrim { position: fixed; inset: 0; background: rgba(3,5,8,.66); backdrop-filter: blur(4px); z-index: 200; display: grid; place-items: center; padding: 24px; animation: fade .16s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: 100%; background: var(--overlay); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--sh-3); animation: pop .2s ease; max-height: 90vh; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; gap: 13px; padding: 18px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-head h3 { font-size: 16px; }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 22px; border-top: 1px solid var(--border); flex-shrink: 0; }
.modal-x { margin-left: auto; }

/* steps */
.steps { display: flex; align-items: center; gap: 0; }
.step { display: flex; align-items: center; gap: 10px; }
.step-num { width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; font-family: var(--mono); border: 1.5px solid var(--border-strong); color: var(--t-dim); background: var(--surface-2); flex-shrink: 0; transition: .2s; }
.step.done .step-num { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.step.active .step-num { border-color: var(--brand); color: var(--brand-bright); box-shadow: 0 0 0 4px var(--brand-soft); }
.step-label { font-size: 12.5px; color: var(--t-faint); font-weight: 600; }
.step.active .step-label, .step.done .step-label { color: var(--t-hi); }
.step-line { width: 30px; height: 2px; background: var(--border-strong); margin: 0 10px; border-radius: 99px; }
.step.done + .step-conn { background: var(--brand); }

/* empty state */
.empty { text-align: center; padding: 50px 20px; }
.empty .e-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 16px; background: var(--surface-3); color: var(--t-faint); }
.empty .e-ico svg { width: 26px; height: 26px; }
.empty h4 { font-size: 15px; margin-bottom: 6px; }
.empty p { color: var(--t-dim); font-size: 13px; max-width: 340px; margin: 0 auto 18px; }

/* skeleton */
.skel { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-4) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@keyframes spin { to { transform: rotate(360deg); } }

/* fade-in for page transitions */
/* Entrance: transform-only + motion-gated so content is NEVER hidden,
   even if the animation is play-pending or never ticks in an iframe. */
.fade-up { }
@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: fadeUp .35s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes fadeUp { from { transform: translateY(6px); } to { transform: none; } }

/* tooltip */
.tip { position: relative; }
.has-tip { cursor: default; }

/* sparkline cell */
.spark { width: 86px; height: 28px; }

/* code block */
.code { background: #06090e; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; font-family: var(--mono); font-size: 12px; color: var(--brand-bright); overflow-x: auto; line-height: 1.7; }
.code .k { color: var(--t-faint); }

/* responsive */
@media (max-width: 1100px) {
  .app { grid-template-columns: var(--shell-w-collapsed) 1fr; }
  .brand-word, .nav-label, .nav-group-label { display: none; }
  .domain-switch { min-width: 0; }
  .search { max-width: 200px; }
}

/* ============================================================
   Light mode — opt-in via <html data-theme="light">.
   Overrides only; dark mode (the default :root) is untouched.
   ============================================================ */
:root[data-theme="light"] {
  --bg:          #f4f5f7;
  --bg-grad-1:   #eef0f3;
  --surface-1:   #ffffff;
  --surface-2:   #ffffff;
  --surface-3:   #eef0f3;
  --surface-4:   #e8eaee;
  --overlay:     #ffffff;

  --border:        rgba(15,23,42,.10);
  --border-2:      rgba(15,23,42,.14);
  --border-strong: rgba(15,23,42,.22);
  --hairline:      rgba(15,23,42,.07);

  --t-hi:    #0e1726;
  --t:       #3b4658;
  --t-dim:   #18181a;
  --t-faint: #8a93a2;
  --t-ghost: #b6bdc8;

  /* status — darker so colored text reads on white */
  --warn:  #b7791f;  --warn-soft: rgba(183,121,31,.13);
  --down:  #e0314f;  --down-soft: rgba(224,49,79,.10);
  --info:  #0d80c9;  --info-soft: rgba(13,128,201,.10);
  --idle:  #5b62e0;  --idle-soft: rgba(91,98,224,.10);

  /* chart series — slightly deepened for legibility on white */
  --c2: #2f9be0;  --c3: #6168e8;  --c4: #cf9211;  --c5: #e0314f;

  --sh-1:  0 1px 2px rgba(15,23,42,.06);
  --sh-2:  0 6px 20px -8px rgba(15,23,42,.14);
  --sh-3:  0 18px 50px -16px rgba(15,23,42,.20);
  --sh-pop: 0 20px 50px -12px rgba(15,23,42,.22), 0 0 0 1px var(--border-2);
}

:root[data-theme="light"] *::-webkit-scrollbar-thumb { background: #d4d8df; }
:root[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: #c2c8d1; }

/* Writable fields must look writable. --surface-4 is a mid grey in light mode,
   which read as a disabled control on white cards. Match the card instead and
   let the border carry the field's edge.
   This covers .input/.select/textarea too, not just .input-group — they share
   the same background, so fixing only one would leave neighbouring fields in a
   form looking inconsistently disabled. */
:root[data-theme="light"] .input-group,
:root[data-theme="light"] .input,
:root[data-theme="light"] .select,
:root[data-theme="light"] textarea.input { background: var(--surface-1); }
:root[data-theme="light"] .input-group .pre { background: var(--surface-3); }
:root[data-theme="light"] .input-group:focus-within {
  border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft);
}

:root[data-theme="light"] .sidebar { background: #ffffff; }
:root[data-theme="light"] .sidebar::after { opacity: .25; }
:root[data-theme="light"] .card { background: #ffffff; box-shadow: 0 1px 2px rgba(15,23,42,.05); }

/* deepen tinted text so it reads on light tints */
:root[data-theme="light"] .nav-item.active { color: var(--brand-deep); }
:root[data-theme="light"] .env-pill { color: var(--brand-deep); }
:root[data-theme="light"] .badge.up { color: var(--brand-deep); }
:root[data-theme="light"] .delta.up { color: var(--brand-deep); }
:root[data-theme="light"] .qa:hover { border-color: var(--brand-line); }

:root[data-theme="light"] .code { background: #f6f8fa; color: var(--brand-deep); }
:root[data-theme="light"] .scrim { background: rgba(15,23,42,.32); }

/* sidebar: keep hover text fixed (no color shift) in light mode */
:root[data-theme="light"] .nav-item:hover { color: #18181a; }
:root[data-theme="light"] .nav-item.active:hover { color: var(--brand-deep); }

/* theme toggle button */
.theme-btn svg { transition: transform .3s cubic-bezier(.2,.7,.3,1); }