/* ═══════════════════════════════════════════════════════════════════════
   Nexren Shield — "Pearl" design system (süt beyazı minimal)
   Near-white ground, hairline rules instead of shadows, one dark ink
   accent, generous whitespace. Elevation only where something genuinely
   floats (dropdown, dialog, toast). Light by default; data-theme="dark"
   mirrors the same restraint on a near-black ground.
   Retune the ramps in :root — everything else derives from them.
   ═══════════════════════════════════════════════════════════════════════ */
/* fonts are requested with <link> in the document head:
   an @import here would serialise a second round trip after this file. */

:root {
  --ink-950: #131417;
  --ink-900: #1c1e22;
  --ink-800: #2b2d33;
  --ink-700: #43464e;
  --ink-600: #5c5f66;
  --ink-500: #74777e;
  --ink-400: #8a8d94;
  --ink-300: #b6b8be;
  --ink-200: #d9dade;
  --ink-100: #ececee;
  --ink-50:  #f5f5f7;
  --paper:   #fbfbfc;
  --white:   #ffffff;

  --good: #17784d;  --good-soft: #eef7f2;
  --bad:  #b4372c;  --bad-soft:  #fbf0ee;
  --warn: #8a6320;  --warn-soft: #fbf5e9;
  --info: #2f5fa8;  --info-soft: #eaf1fb;

  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-surface-2: var(--ink-50);
  --color-text: var(--ink-950);
  --color-text-dim: var(--ink-600);
  --color-text-faint: var(--ink-400);
  --color-hairline: var(--ink-100);
  --color-hairline-strong: var(--ink-200);
  --color-accent: var(--ink-950);
  --color-accent-contrast: var(--white);
  --color-accent-soft: var(--ink-50);
  --code-bg: var(--ink-50);
  --code-text: var(--ink-900);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 44px; --s12: 60px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  --lift-menu: 0 12px 32px rgba(19,20,23,.10), 0 2px 6px rgba(19,20,23,.05);
  --lift-modal: 0 32px 80px rgba(19,20,23,.20);

  /* Kabuk viewport'u kaplar. Eskiden 1280px'lik sabit bir kolondu ve
     geniş ekranlarda iki yanda 300-600px ölü alan bırakıyordu. Kenar
     payı viewport ile birlikte büyür ama uçlara yapışmaz. */
  --shell: 100%;
  --gutter: clamp(16px, 2.4vw, 48px);

  /* legacy aliases — inline styles in index.html / app.js still reference
     these names; mapping them here keeps every inline colour on-palette
     instead of silently falling back to an invalid value. */
  --primary: var(--color-accent);
  --primary-hover: var(--ink-800);
  --bg-main: var(--color-bg);
  --bg-card: var(--color-surface);
  --border: var(--color-hairline);
  --border-focus: var(--color-hairline-strong);
  --color-divider: var(--color-hairline);
  --color-divider-strong: var(--color-hairline-strong);
  --color-accent-2: var(--color-text-dim);
  --color-accent-400: var(--info);
  --color-accent-700: var(--color-accent);
}

:root[data-theme="dark"] {
  --color-bg: #0e0f11;
  --color-surface: #16171a;
  --color-surface-2: #1d1f23;
  --color-text: #f4f4f5;
  --color-text-dim: #a4a7ae;
  --color-text-faint: #74777e;
  --color-hairline: #26282d;
  --color-hairline-strong: #34373d;
  --color-accent: #f4f4f5;
  --color-accent-contrast: #0e0f11;
  --color-accent-soft: #1d1f23;
  --code-bg: #0a0b0d;
  --code-text: #d8dade;
  --good: #4ec38a;  --good-soft: rgba(78,195,138,.14);
  --bad:  #e8776a;  --bad-soft:  rgba(232,119,106,.14);
  --warn: #d6a44f;  --warn-soft: rgba(214,164,79,.14);
  --info: #7fa9e8;  --info-soft: rgba(127,169,232,.14);
  --primary-hover: var(--ink-200);
  --lift-menu: 0 12px 32px rgba(0,0,0,.55);
  --lift-modal: 0 32px 80px rgba(0,0,0,.7);
}

/* ── base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--color-text); }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 15px; letter-spacing: -.01em; }
h4 { font-size: 13.5px; }
p { margin: 0 0 var(--s3); color: var(--color-text-dim); line-height: 1.6; }
p:last-child { margin-bottom: 0; }
a { color: var(--color-text); text-underline-offset: 3px; }
small { font-size: 12px; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--ink-200); }
:root[data-theme="dark"] ::selection { background: var(--ink-700); }
.muted, .hint { color: var(--color-text-faint); font-size: 13px; }
.dim { color: var(--color-text-dim); }
.mono { font-family: var(--font-mono); font-size: .92em; }
.eyebrow { margin: 0 0 5px; color: var(--color-text-faint); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.right { text-align: right; }

/* ═══════════════════════════════════════════════════════════════════
   TABLO SİSTEMİ — panelin 13 tablosunun tamamı bunun üzerinde durur

   Kurallar:
   1) `table-layout: fixed` + YÜZDELİK sütun genişlikleri. Piksel genişlik
      kullanmayın: kabuk artık viewport genişliğinde, sabit pikseller ya
      içeriği eziyor (IP hücresi 115px'e sıkışıp yan sütuna taşıyordu) ya
      da artan yerin tamamını tek bir serbest sütuna yığıyordu.
   2) Hücreler varsayılan olarak TEK SATIR ve taşan içerik üç noktayla
      kırpılır. Kırpılabilen her hücreye app.js `title` yazar, tam metin
      oradan okunur. Satır ritmi böylece her tabloda aynı kalır.
   3) Genişlik sınıfları `<th>` üzerine yazılır — `table-layout: fixed`
      sütun genişliğini yalnızca ilk satırdan okur, `<td>`lere dokunmak
      gerekmez (satırların çoğunu app.js üretiyor).
   4) Sütun yüzdeleri tablo başına %100'e tamamlanmalı. Serbest kalan
      sütun (`.c-flex`) genişlik almaz, artan yeri o toplar.
   5) Tablo `--tbl-min` altına inerse sarmalayıcı yatay kayar; sütunlar
      okunamayacak kadar ezilmez.
   ═══════════════════════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
th, td {
  padding: var(--s3); border-bottom: 1px solid var(--color-hairline);
  text-align: left; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
th { color: var(--color-text-faint); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding-bottom: var(--s2); }
td span { display: block; color: var(--color-text-faint); font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--color-surface-2); }
.row-clickable { cursor: pointer; }
tr.selected { background: var(--color-surface-2); }
.table-wrap { overflow-x: auto; }
/* Sütunlar bu genişliğin altında ezilmeye başlar; sarmalayıcı kaydırır.
   Yoğun tablolar --tbl-min'i kendi ihtiyacına göre yükseltir. */
.table-wrap > table { min-width: var(--tbl-min, 860px); }
.events-table-wrap { --tbl-min: 1100px; }

/* Sütun genişlikleri, hepsi yüzde ve hepsi <th> üzerinde. İki grup var:

   a) Sabit tipler — içeriği her tabloda aynı boyda olduğu için genişliği
      de her tabloda aynı: zaman damgası, IP, sayaç, HTTP yöntemi, rozet,
      aksiyon düğmesi.
   b) İçerik payları (.c-w*) — alan adı, yol, gerekçe gibi uzunluğu
      tablodan tabloya değişen sütunlar için. Bir tablonun payları
      ~%100'e tamamlanmalı; eksik kalan yeri tarayıcı sütunlara eşit
      dağıtır, bu yüzden yaklaşık olması yeterli. */
th.c-time   { width: 10%; }
th.c-ip     { width: 11%; }
th.c-date   { width: 11%; }
th.c-tag    { width:  9%; }
th.c-verb   { width:  6%; }
th.c-num    { width:  6%; }
th.c-act    { width:  7%; }   /* tek düğme */
th.c-act-sm { width:  5%; }   /* tek küçük düğme (yoğun log) */
th.c-act-lg { width: 14%; }   /* yan yana iki düğme */

th.c-w12 { width: 12%; } th.c-w16 { width: 16%; } th.c-w20 { width: 20%; }
th.c-w25 { width: 25%; } th.c-w30 { width: 30%; } th.c-w35 { width: 35%; }
th.c-w40 { width: 40%; } th.c-w45 { width: 45%; } th.c-w50 { width: 50%; }

/* Hücre tipleri. Taşma davranışı yukarıdaki varsayılandan gelir;
   bunlar yalnızca hizalama ve tipografi ekler. */
.cell-num, td.c-num { font-variant-numeric: tabular-nums; }
.cell-actions, td.c-act { text-align: right; }
.cell-actions .mini-btn + .mini-btn { margin-left: var(--s2); }
/* Hücre içindeki `code` rozeti kendi hücresini asla aşmaz — eski
   `max-width: none` uzun IPv4'lerin yan sütuna taşmasının sebebiydi. */
td code { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
/* İki satırlı hücre: üstte soluk yardımcı bilgi, altta asıl değer. */
.cell-stack span { margin: 0 0 1px; font-size: 11px; }
.empty { text-align: center; color: var(--color-text-faint); padding: var(--s8); }

code {
  display: inline-block; max-width: 320px; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--code-text); background: var(--code-bg);
  border: 1px solid var(--color-hairline); border-radius: var(--r-sm); padding: 1px 6px;
}
pre {
  margin: var(--s3) 0 0; padding: var(--s4); min-height: 80px; max-height: 520px; overflow: auto;
  border: 1px solid var(--color-hairline); border-radius: var(--r-sm);
  background: var(--code-bg); color: var(--code-text);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
.command-box { min-height: auto; font-size: 12px; color: var(--color-text-dim); }

/* ── controls ─────────────────────────────────────────────────────── */
button, input, select, textarea {
  min-height: 34px; font: inherit; font-size: 13px;
  border: 1px solid var(--color-hairline-strong); border-radius: var(--r-sm);
  background: var(--color-surface); color: var(--color-text); padding: 6px 11px;
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: var(--color-text-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-300); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
  outline: none;
}

/* selects get the system chrome stripped and a drawn caret, so they read
   as part of the panel instead of as an OS widget */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8d94' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374777e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
select:focus-visible { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23131417' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
select option { background: var(--color-surface); color: var(--color-text); }
select:disabled { opacity: .5; cursor: not-allowed; }

/* origin lock state chip */
.lock-state-icon {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--color-surface-2);
  border: 1px solid var(--color-hairline); color: var(--color-text-faint);
  transition: background-color .15s, color .15s, border-color .15s;
}
.lock-state-icon.locked { background: var(--good-soft); border-color: transparent; color: var(--good); }
.lock-state-icon.unlocked { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
textarea { min-height: 90px; padding: 10px 12px; resize: vertical; font-family: var(--font-mono); font-size: 12.5px; }
label { display: grid; gap: 6px; color: var(--color-text-dim); font-size: 12.5px; font-weight: 500; }

button {
  cursor: pointer; font-weight: 500; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent);
  white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s, transform .12s cubic-bezier(0.16, 1, 0.3, 1);
}
button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
button:active { transform: scale(0.98); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.secondary, button.ghost, .btn-secondary {
  background: var(--color-surface); color: var(--color-text); border-color: var(--color-hairline-strong);
}
button.secondary:hover, button.ghost:hover, .btn-secondary:hover { background: var(--color-surface-2); border-color: var(--ink-300); }
button.ghost { border-color: transparent; background: transparent; color: var(--color-text-dim); }
button.ghost:hover { background: var(--color-surface-2); color: var(--color-text); }
button.mini-btn { min-height: 26px; padding: 0 9px; font-size: 12px; }
.primary-btn { background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent); min-height: 38px; font-weight: 600; }
.primary-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.finish-btn { width: 100%; min-height: 40px; font-weight: 600; }
.finish-btn:disabled { background: transparent; color: var(--color-text-faint); border-color: var(--color-hairline-strong); }

/* ── status pills ─────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content;
  border-radius: var(--r-pill); border: 1px solid var(--color-hairline-strong);
  padding: 3px 9px; color: var(--color-text-dim); background: var(--color-surface);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.pill.valid, .pill.active, .pill.shield, .pill.live_public { color: var(--good); background: var(--good-soft); border-color: transparent; }
.pill.invalid, .pill.wrong_cert, .pill.plesk, .pill.block { color: var(--bad); background: var(--bad-soft); border-color: transparent; }
.pill.pending, .pill.unknown, .pill.lab_edge, .pill.waf_proof { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.action-block { color: var(--bad); }
.action-challenge { color: var(--warn); }
.action-rate_limit { color: var(--warn); }
.action-log { color: var(--info); }

/* ═══════════════════════════════════════════════════════════════════
   HEADER — the panel's face. One 60px band: identity on the left, the
   global menu riding the band's bottom edge so the active indicator
   lands exactly on the hairline, account cluster on the right.
   ═══════════════════════════════════════════════════════════════════ */
.app-shell { min-height: 100vh; background: var(--color-bg); }

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-hairline);
}
.hdr-in {
  max-width: var(--shell); margin: 0 auto; height: 60px; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; position: relative;
}

/* identity */
.hdr-brand { display: flex; align-items: center; gap: 10px; justify-self: start; text-decoration: none; color: inherit; }
.hdr-mark {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex: none;
  background: none; border: none; border-radius: 0; box-shadow: none;
}
.hdr-mark img { width: 30px; height: 30px; display: block; object-fit: contain; }

/* .brand-mark login.html'de baştan beri kullanılıyordu ama hiç tanımlanmamıştı --
   marka satırı düz bir "N" harfi olarak render oluyordu. */
.login-brand .brand-mark {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: linear-gradient(145deg, #20232b, #101216);
}
.login-brand .brand-mark img { width: 25px; height: 25px; display: block; }
:root[data-theme="dark"] .login-brand .brand-mark { background: none; border-radius: 0; }
:root[data-theme="dark"] .login-brand .brand-mark img { width: 34px; height: 34px; }
.hdr-word { font-size: 15px; font-weight: 500; letter-spacing: -.02em; color: var(--color-text-dim); white-space: nowrap; }
.hdr-word b { font-weight: 700; color: var(--color-text); }
.hdr-sep { width: 1px; align-self: center; height: 22px; background: var(--color-hairline-strong); flex: none; }
.hdr-env {
  align-self: center; flex: none;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-faint); background: var(--color-surface-2);
  border: 1px solid var(--color-hairline); border-radius: var(--r-pill); padding: 3px 10px;
}

/* ── Header Site Switcher in Global Nav (Pearl Minimalist Design) ── */
.gnav-switcher-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.gnav-site-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 var(--s4);
  min-height: 0;
  color: var(--color-text-dim);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.12s ease;
  max-width: 240px;
}
.gnav-site-btn::after {
  content: "";
  position: absolute;
  left: var(--s2);
  right: var(--s2);
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background-color 0.12s;
}
.gnav-site-btn:hover {
  color: var(--color-text);
  background: transparent;
  border-color: transparent;
}
.gnav-site-btn:hover::after {
  background: var(--color-hairline-strong);
}
.gnav-site-btn.active {
  color: var(--color-text);
  font-weight: 600;
  background: transparent;
}
.gnav-site-btn.active::after {
  background: var(--color-accent);
}
.gnav-site-btn .hdr-site-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  font-family: var(--font);
  font-size: 13.5px;
  letter-spacing: -0.01em;
}
.gnav-site-btn .hdr-site-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.hdr-site-caret-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  margin-left: 2px;
  cursor: pointer;
}
.hdr-site-caret-trigger:hover {
  background: transparent;
}
.hdr-site-caret-trigger * {
  pointer-events: none;
}
.gnav-site-btn .hdr-site-caret {
  color: var(--color-text-faint);
  transition: transform 0.15s ease, color 0.12s ease;
  flex: none;
  pointer-events: none;
}
.gnav-site-btn:hover .hdr-site-caret,
.hdr-site-caret-trigger:hover .hdr-site-caret {
  color: var(--color-text);
}
.gnav-site-btn.open .hdr-site-caret {
  transform: rotate(180deg);
}

/* Site Switcher Dropdown */
.gnav-switcher-wrap .hdr-site-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--r-md);
  box-shadow: var(--lift-menu);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: siteDropdownIn 0.12s ease-out;
}
.gnav-switcher-wrap .hdr-site-dropdown[hidden] {
  display: none !important;
}
@keyframes siteDropdownIn {
  from { opacity: 0; transform: translateY(-3px) translateX(-50%); }
  to { opacity: 1; transform: translateY(0) translateX(-50%); }
}

.hdr-site-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-hairline);
  background: var(--color-surface);
}
.hdr-site-search-wrap svg {
  color: var(--color-text-faint);
  flex: none;
}
.hdr-site-search-wrap input {
  border: none !important;
  background: transparent !important;
  width: 100%;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text);
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: auto !important;
  height: 24px;
}
.hdr-site-search-wrap input::placeholder {
  color: var(--color-text-faint);
  font-weight: 400;
}
.hdr-site-search-count {
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--color-text-faint);
  background: var(--color-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--color-hairline);
  flex: none;
}

.hdr-site-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hdr-site-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
  font-size: 13px;
  color: var(--color-text);
  position: relative;
}
.hdr-site-item:hover {
  background: var(--color-surface-2);
}
.hdr-site-item.active {
  background: var(--color-surface-2);
}
.hdr-site-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--color-accent);
}
.hdr-site-item-icon {
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hdr-site-favicon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.hdr-site-item-domain {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
}
.hdr-site-item.active .hdr-site-item-domain {
  font-weight: 600;
}
.hdr-site-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.hdr-site-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-faint);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  padding: 2px 7px;
  border-radius: 4px;
}
.hdr-site-item.active .hdr-site-mode-pill {
  color: var(--color-text-dim);
  border-color: var(--color-hairline-strong);
}
.hdr-site-check {
  color: var(--color-accent);
  flex: none;
}

.status-dot-sm {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.status-dot-sm.good { background: var(--good); }
.status-dot-sm.warn { background: var(--warn); }
.status-dot-sm.bad { background: var(--bad); }
.status-dot-sm.bad.pulse { animation: pulseDot 1.5s infinite; }

.hdr-site-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hdr-site-empty svg {
  opacity: 0.4;
}

.hdr-site-footer {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface-2);
}
.hdr-site-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 500;
  background: transparent;
  color: var(--color-text-dim);
  border: none;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.hdr-site-footer-btn:hover {
  background: var(--color-surface);
  color: var(--color-text);
}
.hdr-site-footer-btn.primary {
  color: var(--color-text);
  font-weight: 600;
}
.hdr-site-footer-btn.primary:hover {
  background: var(--color-surface);
}
.hdr-site-footer-sep {
  width: 1px;
  height: 14px;
  background: var(--color-hairline);
  margin: 0 4px;
  flex: none;
}

/* global menu — centered cleanly in header */
.hdr-nav {
  display: flex; align-items: stretch; justify-content: center; gap: var(--s2);
  min-width: 0; margin: 0; justify-self: center;
}
.gnav-item {
  position: relative; display: inline-flex; align-items: center;
  background: transparent; border: 0; border-radius: 0;
  padding: 0 var(--s4); min-height: 0; color: var(--color-text-dim);
  font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: color .12s;
}
.gnav-item::after {
  content: ""; position: absolute; left: var(--s2); right: var(--s2); bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background-color .12s;
}
.gnav-item:hover { color: var(--color-text); background: transparent; border-color: transparent; }
.gnav-item:hover::after { background: var(--color-hairline-strong); }
.gnav-item.active { color: var(--color-text); font-weight: 600; background: transparent; }
.gnav-item.active::after { background: var(--color-accent); }

/* account cluster */
.hdr-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); justify-self: end; }
.hdr-health, .status-dot {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  border: 0; background: transparent; color: var(--color-text-faint);
  padding: 0 var(--s2); font-size: 12.5px; min-height: 32px;
}
.hdr-health::before, .status-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent);
}
.hdr-health.down::before, .status-dot.down::before {
  background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent);
}
.hdr-icon, .icon-btn {
  width: 32px; height: 32px; min-height: 32px; padding: 0; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--color-text-faint);
}
.hdr-icon *, .icon-btn *, #theme-toggle * { pointer-events: none; }
.hdr-icon:hover, .icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-hairline); }

.hdr-user {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px 0 5px;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-pill);
  color: var(--color-text); font-size: 13px; font-weight: 500;
}
.hdr-user:hover, .hdr-user.open { background: var(--color-surface-2); border-color: var(--color-hairline); }
.hdr-avatar {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--color-accent); color: var(--color-accent-contrast); font-size: 11px; font-weight: 600;
}
.hdr-caret { color: var(--color-text-faint); transition: transform .15s ease; }
.hdr-user.open .hdr-caret { transform: rotate(180deg); }
.hdr-menu { right: 0; left: auto; width: 220px; }
.hdr-menu-id { display: flex; flex-direction: column; gap: 1px; padding: 4px 9px 6px; }
.hdr-menu-id strong { font-size: 13px; font-weight: 600; }
.hdr-menu-id span { font-size: 12px; color: var(--color-text-faint); }

@media (max-width: 860px) {
  .hdr-in { display: flex; justify-content: space-between; gap: var(--s2); }
  .hdr-sep, .hdr-env, .hdr-word, .hdr-user-name { display: none; }
  .hdr-health { display: none; }
  .hdr-search-trigger { width: 32px; padding: 0; justify-content: center; }
  .hdr-search-text, .hdr-search-kbd { display: none; }
  .hdr-nav { margin: 0; gap: 4px; }
  .gnav-item { padding: 0 var(--s2); font-size: 13px; }
  .gnav-site-btn { padding: 0 var(--s2); max-width: 180px; }
}

main { display: block; max-width: var(--shell); margin: 0 auto; padding: var(--s8) var(--gutter) var(--s12); min-width: 0; }

/* section layer — the global level */
.section-panel { display: none; }
.section-panel.active { display: block; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }
.section-head-text { display: flex; flex-direction: column; gap: 4px; }
.section-head h1 { margin: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s5); }
/* ── Dashboard & Section Top Bars ─────────────────────────────── */
.dash-top-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: var(--s5); padding: 12px 18px;
  background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--r-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.dash-greeting {
  display: flex; flex-direction: column; gap: 2px;
}
.dash-title {
  font-size: 15.5px; font-weight: 700; color: var(--color-text); letter-spacing: -.02em;
}
.dash-subtitle {
  font-size: 12.5px; color: var(--color-text-dim);
}
.dash-actions {
  display: flex; align-items: center; gap: 10px;
}

.admin-top-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: var(--s5); padding: 8px 16px;
  background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--r-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.admin-top-bar .pagenav {
  margin-bottom: 0; background: transparent; border: 0; padding: 0;
}

/* ── site list (Websites section) ─────────────────────────────────── */
.sites-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--s5);
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.sites-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.sites-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 220px;
  max-width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  padding: 0 10px;
  height: 34px;
  box-sizing: border-box;
  transition: border-color .15s;
}
.sites-search-wrap:focus-within {
  border-color: var(--ink-300);
}
.sites-search-wrap svg {
  color: var(--color-text-faint);
  flex: none;
}
.sites-search-wrap input {
  border: 0;
  background: transparent;
  padding: 0;
  height: 100%;
  width: 100%;
  font-size: 12.5px;
  color: var(--color-text);
  outline: none;
}
.sites-search-wrap input::-webkit-search-decoration,
.sites-search-wrap input::-webkit-search-cancel-button,
.sites-search-wrap input::-webkit-search-results-button,
.sites-search-wrap input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}
.sites-search-wrap input::placeholder {
  color: var(--color-text-faint);
}

/* ── Custom Toolbar Dropdowns ─────────────────────────────────────── */
.custom-dropdown {
  position: relative;
  display: inline-block;
}
.custom-dropdown-btn {
  height: 34px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  outline: none;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}
.custom-dropdown-btn:hover,
.custom-dropdown.open .custom-dropdown-btn {
  border-color: var(--ink-300);
  background: var(--color-surface);
}
.site-scope-btn {
  height: 34px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  color: var(--color-text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  outline: none;
  white-space: nowrap;
  transition: all .15s ease;
  box-sizing: border-box;
}
.site-scope-btn:hover {
  border-color: var(--ink-300);
  background: var(--color-surface);
  color: var(--color-text);
}
.site-scope-btn.active {
  background: rgba(37, 99, 235, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}
:root[data-theme="dark"] .site-scope-btn.active {
  background: rgba(59, 130, 246, 0.18);
  border-color: var(--color-accent);
  color: #93c5fd;
}
.dropdown-caret {
  color: var(--color-text-faint);
  transition: transform .2s ease;
  flex: none;
}
.custom-dropdown.open .dropdown-caret {
  transform: rotate(180deg);
}
.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 170px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.05);
  padding: 5px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:root[data-theme="dark"] .custom-dropdown-menu {
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.55);
}
.custom-dropdown-menu[hidden] {
  display: none !important;
}
.dropdown-item {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--color-text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .12s, color .12s;
}
.dropdown-item:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.dropdown-item.active {
  background: var(--color-surface-2);
  color: var(--color-text);
  font-weight: 600;
}

.sites-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
}
.new-site-action-btn {
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
}

/* ── Site Grid & New Card Design ──────────────────────────────────── */
.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: var(--s5);
}
.site-card {
  text-align: left;
  cursor: pointer;
  outline: none;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  box-sizing: border-box;
}
.site-card:hover {
  border-color: var(--ink-300);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}
:root[data-theme="dark"] .site-card:hover {
  box-shadow: 0 8px 28px -4px rgba(0, 0, 0, 0.5);
}

.site-card-top-area {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.site-card-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.site-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.site-card-favicon-wrap {
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.site-card-favicon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.site-card-no-favicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-dim);
}
.site-fallback-icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-dim);
  display: block;
}
.site-card-domain {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-card-subline {
  font-size: 12px;
  color: var(--color-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-card-badge-wrap {
  flex: none;
}

.site-card-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--color-hairline);
}
.site-stat-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  background: var(--color-surface-2);
  padding: 7px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--color-hairline);
  box-sizing: border-box;
}
.stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-faint);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.stat-value {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-text);
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.stat-value.stat-warn {
  color: var(--bad);
}

/* ── Workspace Tab Row with Right-Aligned 'All Sites' Button ──────── */
.workspace-tab-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: var(--s4);
}
.workspace-tab-row .tabstrip {
  margin-bottom: 0;
  border-bottom: 0;
  flex: 1;
  min-width: 0;
}
.tabstrip-all-sites-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: 4px;
  flex: none;
  transition: all .15s ease;
  user-select: none;
}
.tabstrip-all-sites-btn:hover {
  background: var(--color-surface);
  border-color: var(--ink-300);
}
.tabstrip-all-sites-btn svg,
.tabstrip-all-sites-btn *,
.sl-parent-link svg,
.sl-parent-link * {
  pointer-events: none;
}

/* ── Enhanced Site Overview Layout ───────────────────────────────── */
.summary-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.summary-metric-card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-metric-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.summary-metric-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-mono, monospace);
  line-height: 1.1;
}

.summary-metric-sub {
  font-size: 12px;
  color: var(--color-text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.summary-chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.summary-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.summary-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.summary-card-subtitle {
  margin: 3px 0 0 0;
  font-size: 12px;
  color: var(--color-text-dim);
}

.summary-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--color-text-dim);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.dot-allowed {
  background: #1a8055;
}

.legend-dot.dot-blocked {
  background: #c2453a;
}

.summary-bottom-grid {
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .summary-bottom-grid {
    grid-template-columns: 1fr;
  }
}

.summary-events-card,
.summary-diagnostics-card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.summary-diag-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  width: 100%;
}

.summary-diag-actions button {
  min-height: 40px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  transition: none !important;
}

.summary-diag-actions button.secondary,
.summary-diag-actions button.secondary:hover,
.summary-diag-actions button.secondary:focus,
.summary-diag-actions button.secondary:active {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline-strong);
  color: var(--color-text);
  box-shadow: none;
  transform: none;
}

.summary-diag-actions button[data-site-action="cert-issue"] {
  grid-column: span 2;
  min-height: 42px;
  font-weight: 600;
}

.summary-diag-actions button[data-site-action="cert-issue"]:hover,
.summary-diag-actions button[data-site-action="cert-issue"]:focus,
.summary-diag-actions button[data-site-action="cert-issue"]:active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
  box-shadow: none;
  transform: none;
}

.summary-events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pulse-dot-live {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 6px var(--good);
}

.summary-events-table-wrap {
  overflow-x: auto;
  min-height: 140px;
}

.summary-events-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.summary-events-table-wrap th {
  text-align: left;
  padding: 8px 10px;
  color: var(--color-text-dim);
  font-weight: 500;
  border-bottom: 1px solid var(--color-hairline);
  white-space: nowrap;
}

.summary-events-table-wrap td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-hairline);
  white-space: nowrap;
  vertical-align: middle;
}

.summary-events-table-wrap tr.row-link {
  cursor: pointer;
}

.summary-events-table-wrap tr.row-link:hover {
  background: var(--color-surface-2);
}

.summary-health-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.summary-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--color-surface-2);
  border-radius: var(--r-sm);
  font-size: 12px;
}

.summary-health-label {
  color: var(--color-text);
  font-weight: 500;
}

/* ── 4-Option Mode Switcher in Statusline ─────────────────────────── */
.sl-mode-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: none;
}
.mode-switch-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-dim);
  white-space: nowrap;
}
.mode-btn-group {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface-2);
  padding: 3px;
  border-radius: var(--r-md);
  border: 1px solid var(--color-hairline);
  gap: 2px;
  box-sizing: border-box;
}
.mode-btn-group .mode-toggle-btn,
button.mode-toggle-btn {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm);
  color: var(--color-text-dim) !important;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  transform: none;
}
.mode-btn-group .mode-toggle-btn:hover:not(.active),
button.mode-toggle-btn:hover:not(.active) {
  color: var(--color-text) !important;
  background: color-mix(in srgb, var(--color-text) 6%, transparent) !important;
  border-color: transparent !important;
}
.mode-btn-group .mode-toggle-btn:active:not(.active),
button.mode-toggle-btn:active:not(.active) {
  transform: scale(0.97);
}
.mode-btn-group .mode-toggle-btn.active,
button.mode-toggle-btn.active {
  background: var(--color-surface) !important;
  font-weight: 600 !important;
  border-color: var(--color-hairline) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
:root[data-theme="dark"] .mode-btn-group .mode-toggle-btn.active,
:root[data-theme="dark"] button.mode-toggle-btn.active {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.mode-btn-group .mode-toggle-btn.active::before,
button.mode-toggle-btn.active::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  flex: none;
}
.mode-btn-group .mode-toggle-btn[data-mode="Balanced"].active,
button.mode-toggle-btn[data-mode="Balanced"].active {
  color: #10b981 !important;
}
.mode-btn-group .mode-toggle-btn[data-mode="Balanced"].active::before,
button.mode-toggle-btn[data-mode="Balanced"].active::before {
  background: #10b981;
}
.mode-btn-group .mode-toggle-btn[data-mode="Monitor"].active,
button.mode-toggle-btn[data-mode="Monitor"].active {
  color: #3b82f6 !important;
}
.mode-btn-group .mode-toggle-btn[data-mode="Monitor"].active::before,
button.mode-toggle-btn[data-mode="Monitor"].active::before {
  background: #3b82f6;
}
.mode-btn-group .mode-toggle-btn[data-mode="Under Attack"].active,
button.mode-toggle-btn[data-mode="Under Attack"].active {
  color: #ef4444 !important;
}
.mode-btn-group .mode-toggle-btn[data-mode="Under Attack"].active::before,
button.mode-toggle-btn[data-mode="Under Attack"].active::before {
  background: #ef4444;
}
.mode-btn-group .mode-toggle-btn[data-mode="Off"].active,
button.mode-toggle-btn[data-mode="Off"].active {
  color: var(--color-text-faint) !important;
}
.mode-btn-group .mode-toggle-btn[data-mode="Off"].active::before,
button.mode-toggle-btn[data-mode="Off"].active::before {
  background: var(--color-text-faint);
}

/* ── workspace tabs (variant C) ───────────────────────────────────── */
.tabstrip {
  display: flex; align-items: flex-end; gap: 4px;
  border-bottom: 1px solid var(--color-hairline); margin-bottom: var(--s5);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  position: relative; box-sizing: border-box; height: 37px;
}
.tabstrip::-webkit-scrollbar { display: none; }
.wtab {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
  padding: 8px 12px; height: 36px; box-sizing: border-box; font-size: 13px; font-weight: 500;
  color: var(--color-text-dim); background: transparent;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0; margin-bottom: -1px; flex: none;
}
.wtab:hover { background: var(--color-surface-2); color: var(--color-text); border-color: transparent; }
.wtab.active {
  background: var(--color-surface); color: var(--color-text); font-weight: 600;
  border-color: var(--color-hairline); border-bottom: 1px solid var(--color-surface);
}
.wtab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: none; }
.wtab-dot.bad { background: var(--bad); }
.wtab-dot.warn { background: var(--warn); }
.wtab-dot.danger { background: var(--bad) !important; box-shadow: 0 0 6px var(--bad); }

/* ── Under Attack Pulsing Red Theme ─────────────────────────────── */
@keyframes pulse-red-border {
  0% {
    border-color: rgba(239, 68, 68, 0.95) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25), 0 0 16px rgba(239, 68, 68, 0.2) !important;
  }
  50% {
    border-color: rgba(239, 68, 68, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.1), 0 0 6px rgba(239, 68, 68, 0.05) !important;
  }
  100% {
    border-color: rgba(239, 68, 68, 0.95) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25), 0 0 16px rgba(239, 68, 68, 0.2) !important;
  }
}

.site-card.under-attack,
.statusline.under-attack,
.hero-summary-banner.under-attack,
.wtab.under-attack {
  border-color: var(--bad) !important;
  animation: pulse-red-border 2s infinite ease-in-out !important;
  background: color-mix(in srgb, var(--bad) 5%, var(--color-surface)) !important;
}

.pill-danger {
  background: var(--bad-soft) !important;
  color: var(--bad) !important;
  border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent) !important;
  font-weight: 700;
  letter-spacing: .04em;
}

.pulse-red {
  animation: pulse-red-glow 1.5s infinite;
}

@keyframes pulse-red-glow {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.wtab-x {
  display: grid; place-items: center; width: 18px; height: 18px; min-height: 18px; padding: 0;
  border: 0; background: transparent; color: var(--color-text-faint);
  border-radius: 4px; font-size: 14px; line-height: 1;
}
.wtab-x:hover { background: var(--ink-200); color: var(--color-text); border-color: transparent; }
:root[data-theme="dark"] .wtab-x:hover { background: var(--color-hairline-strong); }
.wtab-add {
  height: 36px; box-sizing: border-box; padding: 0 10px; font-size: 16px;
  background: transparent; border: 0; color: var(--color-text-faint);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: var(--r-sm) var(--r-sm) 0 0; margin-bottom: -1px; flex: none;
}
.wtab-add:hover { background: var(--color-surface-2); color: var(--color-text); border-color: transparent; }

/* site status line + the site's own page menu */
.statusline {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: 12px 18px; margin-bottom: var(--s4);
  background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--r-md);
  font-size: 12.5px; color: var(--color-text-faint); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.sl-breadcrumb {
  display: flex; align-items: center; gap: 8px;
}
.sl-parent-link,
button.sl-parent-link {
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px !important;
  padding: 3px 6px !important;
  margin: 0 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--color-text-dim) !important;
  cursor: pointer !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}
.sl-parent-link:hover,
button.sl-parent-link:hover {
  color: var(--color-text) !important;
  background: color-mix(in srgb, var(--color-text) 8%, transparent) !important;
  border-color: transparent !important;
}
.sl-parent-link:active,
button.sl-parent-link:active {
  transform: scale(0.97) !important;
}
.sl-slash { color: var(--color-text-faint); font-weight: 400; font-size: 13px; }
.statusline b { font-weight: 500; color: var(--color-text-dim); }
.statusline .sl-name { font-size: 15.5px; font-weight: 700; color: var(--color-text); letter-spacing: -.02em; }
.statusline .sl-actions { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }

.pagenav {
  display: flex; gap: 2px; padding: 0 var(--s3); margin-bottom: var(--s5);
  background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--r-md);
  overflow-x: auto; scrollbar-width: none;
}
.pagenav::-webkit-scrollbar { display: none; }
.pagenav-item {
  background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 11px 12px; min-height: 42px; color: var(--color-text-dim);
  font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.pagenav-item:hover { color: var(--color-text); background: transparent; border-color: transparent; border-bottom-color: var(--color-hairline-strong); }
.pagenav-item.active { color: var(--color-text); font-weight: 600; background: transparent; border-bottom-color: var(--color-accent); }

/* legacy chrome that no longer has a place — neutralised */
.sidebar, .sidebar-sites, .sidebar-title, .sidebar-subnav, .site-switcher, .site-context, .new-site-button, .topbar { display: none !important; }

/* ── cards & panels ───────────────────────────────────────────────── */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.panel, .settings-card, .tool-card, .stat, .activation-summary, .activation-step, .mini-item,
.chart-container-box, .monitor-table-box, .rule-catalog-container, .stat-card, .stat-card-enhanced,
.hero-summary-banner, .policy-toggle-card, .toggle-row, .category-group, .rule-item, .dns-record-card {
  background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--r-md);
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), border-color .18s ease, box-shadow .18s ease;
}
.site-card:hover, .stat-card:hover, .tool-card:hover, .dns-record-card:hover {
  border-color: var(--color-hairline-strong);
  transform: translateY(-1.5px);
  box-shadow: 0 8px 24px -4px rgba(19, 20, 23, 0.05), 0 2px 6px -1px rgba(19, 20, 23, 0.03);
}

/* ── Watermelon UI: Input OTP (input-otp-2) ─────────────────────────── */
.otp-container {
  display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin: 12px 0;
}
.otp-group {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
}
.otp-slot {
  width: 50px; height: 56px; border-radius: var(--r-sm);
  border: 1px solid var(--color-hairline-strong); background: var(--color-surface);
  color: var(--color-text); font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  text-align: center; line-height: 56px; outline: none; caret-color: var(--color-accent);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s cubic-bezier(0.16, 1, 0.3, 1);
}
.otp-slot:hover { border-color: var(--ink-300); }
.otp-slot:focus, .otp-slot.active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
  transform: translateY(-1px);
}
.otp-timer-bar {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-size: 12.5px; color: var(--color-text-faint); margin-top: 4px;
}
.otp-resend-btn {
  background: transparent; border: 0; color: var(--color-accent); font-weight: 600;
  font-size: 12.5px; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
  min-height: auto;
}
.otp-resend-btn:disabled { color: var(--color-text-faint); cursor: not-allowed; text-decoration: none; }

/* ── Watermelon UI: Pagination (pagination-8) ──────────────────────── */
.pagination-8 {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: var(--color-surface); border: 1px solid var(--color-hairline);
  border-radius: var(--r-md); font-size: 13px; margin-top: 14px; flex-wrap: wrap;
}
.pagination-info { color: var(--color-text-dim); font-size: 12.5px; }
.pagination-list { display: flex; align-items: center; gap: 6px; }
.page-link {
  min-width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--color-hairline);
  background: var(--color-surface); color: var(--color-text); display: inline-flex;
  align-items: center; justify-content: center; font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all .15s ease; text-decoration: none; padding: 0 8px;
}
.page-link:hover { background: var(--color-surface-2); border-color: var(--color-hairline-strong); }
.page-link.active {
  background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent);
  font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.page-link.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.page-ellipsis-btn {
  color: var(--color-text-faint);
  font-weight: 700;
  position: relative;
}

.page-jump-popover {
  position: fixed;
  background: var(--color-surface, #181b21);
  border: 1px solid var(--color-hairline-strong, #333846);
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: popoverFadeIn 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-jump-popover::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--color-hairline-strong, #333846) transparent transparent transparent;
}

.page-jump-popover::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--color-surface, #181b21) transparent transparent transparent;
}

.page-jump-mini-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.page-jump-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-faint);
  padding-left: 2px;
}

.page-jump-mini-input {
  width: 58px;
  height: 28px;
  padding: 0 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-hairline-strong);
  border-radius: 5px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -moz-appearance: textfield;
  appearance: textfield;
}

.page-jump-mini-input::-webkit-outer-spin-button,
.page-jump-mini-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.page-jump-mini-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.page-jump-mini-btn {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-accent);
  color: var(--color-accent-contrast, #fff);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s ease;
}
.page-jump-mini-btn:hover {
  opacity: 0.9;
}

@keyframes popoverFadeIn {
  from { opacity: 0; transform: translate(-50%, 4px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.panel { padding: var(--s5); margin-bottom: var(--s4); }
.empty-panel { min-height: 260px; display: grid; align-content: center; justify-items: center; text-align: center; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s3); }
.panel-head p { margin-bottom: 0; font-size: 13px; }

.settings-card { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.settings-card h3 { margin: 0; font-size: 15px; font-weight: 600; }
.settings-card p { margin: 0; font-size: 13px; color: var(--color-text-dim); }
.settings-section { display: grid; gap: var(--s5); margin-bottom: var(--s6); }
.settings-row { display: grid; grid-template-columns: 240px 1fr; gap: var(--s6); padding-bottom: var(--s5); border-bottom: 1px solid var(--color-hairline); }
.settings-meta { display: flex; flex-direction: column; gap: 4px; }
.settings-meta h4 { margin: 0; font-size: 14px; font-weight: 600; }
.settings-meta p { margin: 0; font-size: 12.5px; color: var(--color-text-faint); }
.settings-control { display: flex; flex-direction: column; gap: var(--s3); max-width: 620px; }
.settings-control input, .settings-control select, .settings-control textarea { width: 100%; }
.settings-grid { display: grid; grid-template-columns: 1fr; gap: var(--s2); margin-bottom: var(--s3); }
.panel-grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s5); }
.form-grid { display: grid; grid-template-columns: 1.2fr .7fr .7fr auto; gap: var(--s3); align-items: end; }
.admin-origin { grid-template-columns: 1fr auto; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--color-hairline); }

.tool-card { padding: var(--s5); margin-bottom: var(--s3); }
.tool-card h3 { margin: 0 0 6px; font-size: 15px; }
.tool-card p { margin-bottom: var(--s3); font-size: 13px; }
.mini-list { display: grid; gap: var(--s2); }
.mini-item { padding: var(--s3); }
.mini-item span { display: block; margin-top: 4px; color: var(--color-text-faint); font-size: 12px; }
.subtle { background: var(--color-surface-2); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.cards.compact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stat { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.stat span { display: block; color: var(--color-text-faint); font-size: 12px; margin: 0; }
.stat strong { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; overflow-wrap: anywhere; }
.stat small { display: block; color: var(--color-text-faint); font-size: 12px; line-height: 1.4; }

.activation-flow { display: grid; gap: var(--s2); }
#activation-flow { margin-bottom: 16px; }
#activation-flow:empty { display: none; margin-bottom: 0; padding: 0; border: none; }
.activation-summary { padding: var(--s4); }
.activation-summary p { margin: var(--s2) 0 0; font-size: 13px; }
.activation-step { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); }
.activation-step strong { display: block; margin-bottom: 3px; font-weight: 600; }
.activation-step span { color: var(--color-text-faint); font-size: 12.5px; overflow-wrap: anywhere; }
.activation-step.complete { border-color: color-mix(in srgb, var(--good) 35%, transparent); background: var(--good-soft); }
.activation-step.blocked { border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-soft); }

.toggle-row { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: var(--s3); }
.toggle-row input { min-height: auto; width: auto; }
.waf-test { display: grid; gap: var(--s2); margin-bottom: var(--s2); }

/* hero / summary */
.hero-summary-banner {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  flex-wrap: wrap; padding: var(--s5) var(--s6); margin-bottom: var(--s4);
}
.hero-summary-domain { font-size: 20px; font-weight: 600; letter-spacing: -.025em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pulse-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500;
  padding: 3px 9px; border-radius: var(--r-pill); background: var(--good-soft); color: var(--good); border: 0;
}
.pulse-badge-danger { background: var(--bad-soft) !important; color: var(--bad) !important; border-color: transparent !important; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
@keyframes pulse-glow { from { opacity: .45; } to { opacity: 1; } }
.pulse-dot { animation: pulse-glow 1.6s infinite alternate; }

.stat-card-enhanced { padding: var(--s4) var(--s5); }
.stat-card-title { font-size: 12px; font-weight: 500; color: var(--color-text-faint); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; text-transform: none; letter-spacing: 0; }
.stat-card-value { font-size: 20px; font-weight: 600; letter-spacing: -.025em; overflow-wrap: anywhere; }
.stat-card-note { font-size: 11.5px; color: var(--color-text-faint); margin-top: 5px; line-height: 1.4; }

/* ── monitoring surfaces (global + per-site share this vocabulary) ── */
.mon-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--r-md);
}
.mon-toolbar-left, .mon-toolbar-right { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.inline-field { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--color-text-faint); }
.inline-field select { min-height: 32px; font-size: 12.5px; }
#traffic-vectors-chart, #site-vectors-chart { touch-action: pan-y; }
.health-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--good-soft); color: var(--good); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.health-chip.alert { background: var(--bad-soft); color: var(--bad); }
.health-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.health-chip.alert .health-dot { animation: pulse-glow 1.4s infinite alternate; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 0;
}

.kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.kpi::before {
  display: none;
}

.tab-panel[data-panel="monitor"] .stack,
[data-section="monitor"] .stack {
  gap: 14px;
}

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.2;
}

.kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-mono, monospace);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.kpi-note {
  font-size: 12px;
  color: var(--color-text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  line-height: 1.3;
}

.kpi-good .kpi-value {
  color: var(--good);
}

.kpi-bad .kpi-value {
  color: var(--bad);
}

.kpi-warn .kpi-value {
  color: var(--warn);
}

.mon-split { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--s4); align-items: stretch; }
.mon-split-even { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: stretch; }
.mon-split-rules { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s4); align-items: stretch; }
.mon-split > .settings-card, .mon-split-even > .settings-card, .mon-split-rules > .settings-card {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mon-split > .settings-card:first-child .chart-box {
  flex: 1;
  min-height: 260px;
  height: 100%;
}

.mon-split-even .table-wrap, .mon-split .table-wrap { --tbl-min: 0px; max-width: 100%; overflow-x: auto; }
.mon-split-even .table-wrap > table, .mon-split .table-wrap > table { min-width: 100%; table-layout: fixed; }

.mon-split-even table th, .mon-split-even table td,
.mon-split table th, .mon-split table td {
  padding: 6px 8px;
  font-size: 12px;
}
.mon-split-even table th, .mon-split table th {
  padding-bottom: 5px;
}
.mon-split-even table td code, .mon-split table td code {
  font-size: 11px;
  padding: 1px 4px;
  max-width: 100%;
}
.mon-split-even table td .pill, .mon-split table td .pill {
  font-size: 11px;
  padding: 1px 6px;
}

@media (max-width: 1000px) { .mon-split, .mon-split-even, .mon-split-rules { grid-template-columns: 1fr; } }
/* Grafik yüksekliği kartın genişliğiyle birlikte büyür. Sabit yükseklikte
   kalınca kart genişledikçe kazanılan yer ölü boşluğa dönüşüyordu: donut
   yüksekliğe sıkışıp küçük kalıyor, sağdaki açıklama listesiyle arasında
   kocaman bir aralık açılıyordu. */
.chart-box { height: clamp(280px, 22vw, 400px); position: relative; margin-top: 6px; }
.chart-box-sm { height: clamp(210px, 15vw, 300px); }

/* action breakdown bars — a compact legend that doubles as a chart */
.bar-list { display: flex; flex-direction: column; gap: var(--s2); }
.bar-row { display: grid; grid-template-columns: minmax(0, 148px) minmax(60px, 1fr) 52px; align-items: center; gap: var(--s3); font-size: 12.5px; }
.rules-bar-list .bar-row { grid-template-columns: minmax(0, 260px) minmax(60px, 1fr) 52px; }
.compact-bar-list .bar-row { grid-template-columns: minmax(0, 72px) minmax(60px, 1fr) 52px; }
.clickable-rule-row { cursor: pointer; border-radius: var(--r-sm); padding: 2px 4px; transition: background .15s ease; }
.clickable-rule-row:hover { background: var(--color-surface-2); }
.clickable-rule-name { color: var(--color-accent); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.clickable-rule-name:hover { color: var(--color-accent-hover); }
.bar-row .bar-name { color: var(--color-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Her ikisi de <span>: dolgu satır içi kaldığı için width/height hiç
   uygulanmıyordu ve bar hep boş görünüyordu. İz, ızgara öğesi olduğu için
   kendiliğinden bloklaşıyor; dolguya display'i açıkça vermek gerekiyor. */
.bar-track { display: block; height: 6px; border-radius: var(--r-pill); background: var(--color-surface-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; min-width: 3px; border-radius: var(--r-pill); background: var(--color-text-faint); transition: width .3s ease; }
.bar-fill.good { background: var(--good); }
.bar-fill.bad { background: var(--bad); }
.bar-fill.warn { background: var(--warn); }
.bar-fill.info { background: var(--info); }
.bar-row .bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: 600; }

.monitor-grid { display: grid; gap: var(--s4); }
.monitor-header { padding-bottom: var(--s3); border-bottom: 1px solid var(--color-hairline); margin-bottom: var(--s2); }
.monitor-header h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--s3); }
.stat-card { padding: var(--s4) var(--s5); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-hairline-strong); }
.stat-card.total-traffic::before { background: var(--good); }
.stat-card.threat-blocked::before { background: var(--bad); }
.stat-card.captcha-challenges::before { background: var(--warn); }
.stat-card.rate-limits::before { background: var(--info); }
.stat-card span { display: block; color: var(--color-text-faint); font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; margin-bottom: 5px; }
.stat-card strong { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.stat-card small { display: block; margin-top: 5px; color: var(--color-text-faint); font-size: 11.5px; }
.chart-section { margin-top: var(--s2); }
.chart-container-box, .monitor-table-box { padding: var(--s5); }
.chart-container-box h4, .monitor-table-box h4 { font-size: 13px; font-weight: 600; color: var(--color-text); margin: 0 0 var(--s3); text-transform: none; letter-spacing: 0; }

/* WAF rule catalog */
.rule-catalog-container { padding: var(--s5); }
.rule-catalog-container h3 { font-size: 15px; font-weight: 600; margin: 0; }
.catalog-toolbar { display: flex; align-items: center; gap: var(--s2); }
.catalog-toolbar input[type="text"] { min-height: 32px; font-size: 12.5px; }
.catalog-filters { display: flex; gap: var(--s2); flex-wrap: wrap; border-bottom: 1px solid var(--color-hairline); padding-bottom: var(--s3); margin: var(--s3) 0 var(--s4); }
.filter-btn {
  min-height: 28px; padding: 0 12px; font-size: 12px; font-weight: 500;
  background: var(--color-surface); color: var(--color-text-dim); border: 1px solid var(--color-hairline-strong);
}
.filter-btn:hover { background: var(--color-surface-2); color: var(--color-text); border-color: var(--ink-300); }
.filter-btn.active { background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent); font-weight: 600; }

.category-group { overflow: hidden; margin-bottom: var(--s2); width: 100%; flex-shrink: 0; }
.category-group:hover { border-color: var(--ink-300); }
.category-header { display: flex; justify-content: space-between; align-items: center; padding: var(--s3) var(--s4); cursor: pointer; user-select: none; min-height: 48px; }
.category-header:hover { background: var(--color-surface-2); }
.category-title-wrapper { display: flex; align-items: center; gap: var(--s2); }
.category-title-text { font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.category-count-badge { font-size: 11px; font-weight: 500; color: var(--color-text-faint); background: var(--color-surface-2); padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--color-hairline); }
.category-header .chevron { font-size: 10px; color: var(--color-text-faint); transition: transform .15s ease; }
.category-group.open .category-header .chevron { transform: rotate(90deg); color: var(--color-text); }
.category-rules { display: none; flex-direction: column; gap: var(--s2); padding: var(--s3); background: var(--color-surface-2); border-top: 1px solid var(--color-hairline); }
.category-group.open .category-rules { display: flex; }

.rule-item { padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); width: 100%; }
.rule-item:hover { border-color: var(--ink-300); }
.rule-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); }
.rule-item-main-info { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.rule-meta-line { display: flex; align-items: center; gap: var(--s2); font-size: 11px; color: var(--color-text-faint); flex-wrap: wrap; }
.rule-meta-id { font-family: var(--font-mono); font-weight: 500; color: var(--color-text-dim); }
.rule-meta-dot { color: var(--color-hairline-strong); font-size: 8px; }
.rule-meta-type { font-weight: 600; color: var(--color-text-faint); letter-spacing: .03em; }
.rule-meta-score { font-weight: 500; color: var(--color-text-faint); }
.rule-meta-req { font-weight: 600; color: var(--bad); letter-spacing: .03em; }
.rule-title { font-size: 13.5px; font-weight: 500; color: var(--color-text); line-height: 1.45; }
.rule-pattern-box { display: flex; align-items: flex-start; gap: var(--s2); background: var(--code-bg); border: 1px solid var(--color-hairline); border-radius: var(--r-sm); padding: var(--s2) var(--s3); font-size: 12px; width: 100%; }
.rule-pattern-label { font-size: 10px; font-weight: 600; color: var(--color-text-faint); letter-spacing: .05em; padding-top: 2px; flex-shrink: 0; }
.rule-pattern-code, .rule-pattern-box code { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-text-dim); line-height: 1.5; word-break: break-all; overflow-wrap: anywhere; white-space: pre-wrap; flex: 1; display: block; background: transparent; border: 0; padding: 0; max-width: none; }

/* toggle switch — genuinely a switch, high contrast in both dark & light mode */
.toggle-switch, .rule-toggle-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; cursor: pointer; }
.toggle-switch input, .rule-toggle-switch input { opacity: 0; width: 0; height: 0; min-height: auto; position: absolute; }
.slider { position: absolute; inset: 0; cursor: pointer; background: #e3e6ea; border: 1.5px solid #c9ccd2; border-radius: 999px; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); }
:root[data-theme="dark"] .slider { background: #1c212b; border-color: #333a47; }
.slider:before { content: ""; position: absolute; height: 14px; width: 14px; left: 2.5px; bottom: 2.5px; background: #8a8d94; border-radius: 50%; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
:root[data-theme="dark"] .slider:before { background: #5c6575; }

/* ON State — in dark mode, track is solid white; in light mode, track is solid dark */
input:checked + .slider { background: #131417 !important; border-color: #131417 !important; }
input:checked + .slider:before { transform: translateX(16px); background: #ffffff !important; }

:root[data-theme="dark"] input:checked + .slider { background: #ffffff !important; border-color: #ffffff !important; }
:root[data-theme="dark"] input:checked + .slider:before { transform: translateX(16px); background: #090b0e !important; }

/* policy toggles / mode buttons */
.policy-toggle-card { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); }
.policy-toggle-card:hover { border-color: var(--ink-300); }
.policy-toggle-info { display: flex; flex-direction: column; gap: 3px; }
.policy-toggle-label-row { display: flex; align-items: center; gap: var(--s2); }
.policy-toggle-title { font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.policy-toggle-status { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-pill); letter-spacing: .03em; text-transform: uppercase; }
.policy-toggle-status.active { background: var(--good-soft); color: var(--good); border: 0; }
.policy-toggle-status.inactive { background: var(--color-surface-2); color: var(--color-text-faint); border: 1px solid var(--color-hairline); }
.policy-toggle-desc { font-size: 12px; color: var(--color-text-faint); }
.policy-mode-section { display: flex; flex-direction: column; gap: var(--s2); }
.mode-buttons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.mode-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: var(--s3); min-height: 0;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-hairline-strong); border-radius: var(--r-md);
}
.mode-btn:hover { background: var(--color-surface-2); border-color: var(--ink-300); }
.mode-btn.active { background: var(--color-accent); border-color: var(--color-accent); }
.mode-btn-title { font-size: 13px; font-weight: 600; color: var(--color-text); }
.mode-btn.active .mode-btn-title, .mode-btn.active .mode-btn-desc { color: var(--color-accent-contrast); }
.mode-btn-desc { font-size: 11.5px; color: var(--color-text-faint); line-height: 1.35; }

/* badges on tabs / rows */
.site-chip-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip-badge { display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: .03em; padding: 2px 6px; border-radius: var(--r-pill); text-transform: uppercase; line-height: 1.5; }
.chip-badge-danger { background: var(--bad-soft); color: var(--bad); border: 0; }
.chip-badge-warning { background: var(--warn-soft); color: var(--warn); border: 0; }

/* terminal output */
.terminal-box { border: 1px solid var(--color-hairline); border-radius: var(--r-md); background: var(--code-bg); overflow: hidden; margin-top: var(--s3); }
.terminal-header { display: flex; align-items: center; gap: 6px; padding: var(--s2) var(--s4); background: var(--color-surface-2); border-bottom: 1px solid var(--color-hairline); }
.terminal-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.terminal-dot.red { background: var(--bad); }
.terminal-dot.yellow { background: var(--warn); }
.terminal-dot.green { background: var(--good); }
.terminal-title { margin-left: 6px; font-size: 11px; font-family: var(--font-mono); color: var(--color-text-faint); letter-spacing: .03em; }
.terminal-box pre { margin: 0; border: 0; border-radius: 0; background: transparent; padding: var(--s4); font-size: 12px; }

/* list rows rendered by app.js */
.list-item-row { display: flex; justify-content: space-between; align-items: center; padding: var(--s2) var(--s3); border: 1px solid var(--color-hairline); border-radius: var(--r-sm); background: var(--color-surface); margin-bottom: 6px; }
.list-item-row:hover { border-color: var(--ink-300); }

/* ── dialog / onboarding wizard ───────────────────────────────────── */
dialog {
  width: min(520px, calc(100vw - 28px));
  border: 1px solid var(--color-hairline); border-radius: var(--r-lg);
  padding: 0; background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--lift-modal);
}
dialog::backdrop { background: rgba(19,20,23,.4); backdrop-filter: blur(3px); }
.modal-body { padding: var(--s6); display: grid; gap: var(--s5); }
.modal-grid { display: grid; gap: var(--s4); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.modal-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.modal-head button.close-modal-btn { background: transparent; color: var(--color-text-faint); border: 0; min-height: 30px; padding: 0 10px; font-weight: 500; }
.modal-head button.close-modal-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.modal-actions button { width: 100%; min-height: 38px; font-weight: 600; }
#site-form { display: grid; gap: var(--s4); padding: var(--s6); }
.instruction-text { color: var(--color-text-dim) !important; font-size: 13px; }

.dns-record-card { padding: var(--s4); display: grid; gap: var(--s3); }
.dns-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font-size: 13px; }
.dns-label { color: var(--color-text-faint); font-weight: 500; }
.dns-value { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text); font-weight: 500; }
.type-badge { background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-hairline); padding: 2px 8px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600; font-family: var(--font); }
.dns-value.highlight { color: var(--color-text); font-weight: 600; }
.dns-status-pill { padding: var(--s3); border-radius: var(--r-sm); font-size: 13px; font-weight: 500; text-align: center; border: 1px solid transparent; }
.dns-status-pill.status-querying { background: var(--warn-soft); color: var(--warn); }
.dns-status-pill.status-success { background: var(--good-soft); color: var(--good); }
.dns-status-pill.status-error { background: var(--bad-soft); color: var(--bad); }
.dns-error-pre { font-family: var(--font-mono); font-size: 11px; margin: 0; padding: var(--s3); min-height: auto; background: var(--bad-soft); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); border-radius: var(--r-sm); max-height: 110px; line-height: 1.45; }

/* ── login — split screen, edge to edge, no dead margins ─────────────
   Left: wide dark ink-950 brand panel carrying the PixelBlast canvas
   (same ink on both themes -- it does not follow --color-bg, it IS the
   accent surface). Right: a narrow fixed-ish strip pinned to the page
   edge so the form sits close to the corner instead of floating in the
   middle of a half-screen column. Collapses to a compact top bar under
   860px so the phone view stays full-bleed instead of shrinking the
   brand panel into an unreadable sliver. */
body.login-split { min-height: 100vh; display: grid; grid-template-columns: 1fr clamp(400px, 32vw, 480px); }

.login-aside { position: relative; overflow: hidden; background: var(--ink-950); color: var(--white); }
:root[data-theme="dark"] .login-aside { background: #08090a; border-right: 1px solid var(--color-hairline); }

/* PixelBlast mounts its canvas here (assets/pixel-blast.js); pointer-events
   stay off the content layer above so click ripples still reach it. */
.login-aside-bg { position: absolute; inset: 0; z-index: 0; }

.login-aside-content {
  position: relative; z-index: 1; height: 100%; pointer-events: none;
  display: flex; flex-direction: column;
  padding: var(--s10) clamp(var(--s6), 4vw, var(--s10));
}

.login-aside-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.login-aside-brand img { width: 32px; height: 32px; display: block; }
.login-aside-brand strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--white); }
.login-aside-brand span { display: block; font-size: 12px; color: rgba(255,255,255,.55); }

.login-aside-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 460px; }
.login-tagline { margin: 0 0 var(--s6); font-size: clamp(26px, 3vw, 36px); line-height: 1.28; font-weight: 600; letter-spacing: -.02em; color: var(--white); }
.login-feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.login-feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72); }
.login-feature-list li::before { content: "✓"; flex: none; color: var(--good); font-weight: 700; }
:root[data-theme="dark"] .login-feature-list li::before { color: #4ec38a; }

.login-main { display: flex; align-items: center; justify-content: center; padding: var(--s5); background: var(--color-bg); }
.login-form-wrap { width: 100%; max-width: 336px; }
.login-form-wrap h1 { font-size: 22px; margin-bottom: var(--s2); }
.login-form-wrap > div > p { color: var(--color-text-dim); font-size: 13.5px; line-height: 1.5; }
.login-form { display: grid; gap: var(--s4); margin: var(--s6) 0 0; }
.login-form input { min-height: 38px; }
.login-form button { width: 100%; min-height: 38px; font-weight: 600; }
.login-error { margin: 0; border: 0; border-radius: var(--r-sm); background: var(--bad-soft); color: var(--bad); padding: var(--s3); font-size: 13px; }

.login-back-btn { width: 100%; background: transparent; border: 0; color: var(--color-text-dim); font-weight: 500; min-height: 34px; }
.login-back-btn:hover { color: var(--color-text); background: var(--color-surface-2); }

.otp-group { display: flex; gap: var(--s2); justify-content: space-between; }
.otp-slot { width: 100%; aspect-ratio: 1; padding: 0; text-align: center; font-family: var(--font-mono); font-size: 19px; font-weight: 600; }
.otp-slot.active { border-color: var(--color-accent); }

.otp-timer-bar { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--color-text-faint); }
.otp-resend-btn { background: none; border: 0; min-height: auto; padding: 0; color: var(--color-text); font-weight: 500; font-size: 12.5px; }
.otp-resend-btn:hover { background: none; text-decoration: underline; }
.otp-resend-btn:disabled { color: var(--color-text-faint); }

.login-footer { margin-top: var(--s6); text-align: center; font-size: 12px; color: var(--color-text-faint); }
.login-footer a { color: var(--color-text-faint); }
.login-footer a:hover { color: var(--color-text); }

@media (max-width: 860px) {
  body.login-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-aside-content { flex-direction: row; align-items: center; padding: var(--s5) var(--gutter); }
  .login-aside-mid { display: none; }
  .login-main { padding: var(--s6) var(--gutter) var(--s8); }
}

/* ── floating: dropdown / toast ───────────────────────────────────── */
.menu-wrap { position: relative; }
.menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 260px;
  background: var(--color-surface); border: 1px solid var(--color-hairline);
  border-radius: var(--r-md); box-shadow: var(--lift-menu); padding: var(--s2);
  display: flex; flex-direction: column; gap: 1px;
}
.menu.hdr-menu, #user-menu { right: 0 !important; left: auto !important; width: 220px !important; }
.menu-label { padding: 7px 9px 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); }
.menu-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; justify-content: flex-start;
  padding: 8px 9px; min-height: 34px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--color-text); font-size: 13px; font-weight: 500;
}
.menu-row:hover { background: var(--color-surface-2); border-color: transparent; }
.menu-row.active { font-weight: 600; background: var(--color-surface-2); }

.toast {
  position: fixed; bottom: var(--s6); left: 50%; transform: translateX(-50%); z-index: 70;
  background: var(--ink-950); color: var(--white); padding: 10px 16px; font-size: 13px;
  border-radius: var(--r-pill); box-shadow: var(--lift-modal); max-width: 420px;
}
:root[data-theme="dark"] .toast { background: var(--white); color: var(--ink-950); }

/* ── Global Omni Search Header Trigger & Modal ────────────────────── */
.hdr-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  padding: 0 10px;
  height: 32px;
  font-size: 12.5px;
  color: var(--color-text-dim);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  width: 250px;
  max-width: 100%;
}
.hdr-search-trigger:hover {
  background: var(--color-surface);
  border-color: var(--color-hairline-strong);
  color: var(--color-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.hdr-search-trigger svg {
  color: var(--color-text-faint);
  flex: none;
}
.hdr-search-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  flex: 1;
}
.hdr-search-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: 3px;
  color: var(--color-text-faint);
  margin-left: auto;
  flex: none;
}

/* Omni Search Modal Backdrop */
.omni-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 11, 14, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 70px 16px 20px;
  animation: omniFadeIn 0.15s ease-out;
}
@keyframes omniFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.omni-dialog {
  width: 100%;
  max-width: 660px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--r-md);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.35), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  animation: omniScaleIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
:root[data-theme="dark"] .omni-dialog {
  box-shadow: 0 24px 70px -10px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(255, 255, 255, 0.08);
}
@keyframes omniScaleIn {
  from { transform: scale(0.97) translateY(-8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.omni-search-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-hairline);
  background: var(--color-surface);
}
.omni-search-icon {
  color: var(--color-text-dim);
  flex: none;
}
.omni-input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  font-size: 14.5px !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}
.omni-input::placeholder {
  color: var(--color-text-faint);
  font-weight: 400;
}
.omni-esc-badge {
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--color-text-faint);
  cursor: pointer;
  transition: all 0.12s;
}
.omni-esc-badge:hover {
  color: var(--color-text);
  border-color: var(--color-hairline-strong);
}

.omni-chips-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.omni-chips-bar::-webkit-scrollbar { display: none; }
.omni-chip {
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 500;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm);
  color: var(--color-text-dim) !important;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
  height: auto !important;
}
.omni-chip:hover {
  color: var(--color-text) !important;
  background: color-mix(in srgb, var(--color-text) 6%, transparent) !important;
}
.omni-chip.active {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  font-weight: 600;
  border-color: var(--color-hairline) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.omni-results-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 52vh;
}
.omni-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.08s ease, border-color 0.08s ease;
  text-align: left;
  border: 1px solid transparent;
}
.omni-item:hover,
.omni-item.selected {
  background: var(--color-surface-2);
  border-color: var(--color-hairline);
}
.omni-item-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--color-text-faint);
  background: var(--color-surface-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--color-hairline);
}
.omni-item:hover .omni-item-icon,
.omni-item.selected .omni-item-icon {
  color: var(--color-text);
  border-color: var(--color-hairline-strong);
}

.omni-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.omni-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.omni-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.omni-item-tag {
  font-size: 10.5px;
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--color-text-dim);
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
}
.omni-item-sub {
  font-size: 11.5px;
  color: var(--color-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.omni-item-action {
  font-size: 11.5px;
  color: var(--color-text-faint);
  flex: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
}
.omni-item:hover .omni-item-action,
.omni-item.selected .omni-item-action {
  color: var(--color-text);
}

.omni-empty-state {
  padding: 32px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-text-faint);
  font-size: 13px;
}
.omni-empty-state svg {
  color: var(--color-text-faint);
  opacity: 0.6;
}

.omni-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-hairline);
  font-size: 11px;
  color: var(--color-text-faint);
}
.omni-footer-hints {
  display: flex;
  align-items: center;
  gap: 10px;
}
.omni-footer-hints span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.omni-footer-hints kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--color-text-dim);
}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .panel-grid-2, .form-grid, .admin-origin, .settings-grid { grid-template-columns: 1fr; }
  .mode-buttons-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .settings-row { grid-template-columns: 1fr; gap: var(--s2); }
}
@media (max-width: 760px) {
  main { padding: var(--s4) var(--s3) var(--s8); }
  .topbar-in { flex-wrap: wrap; min-height: 0; padding: var(--s2) var(--s4); gap: var(--s3); }
  .gnav { order: 3; width: 100%; flex-basis: 100%; padding-bottom: var(--s2); }
  .topbar-end { margin-left: auto; }
  .cards, .cards.compact, .stat-row { grid-template-columns: 1fr; }
  .activation-step { grid-template-columns: 1fr; }
  .sites-toolbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px; }
  .sites-toolbar-left { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .sites-search-wrap { width: 100%; }
  .custom-dropdown { width: 100%; }
  .custom-dropdown-btn { width: 100%; justify-content: space-between; }
  .custom-dropdown-menu { width: 100%; }
  .sites-toolbar-right { width: 100%; margin-left: 0; }
  .sites-toolbar-right button { width: 100%; justify-content: center; }
  .workspace-tab-row { flex-wrap: wrap; gap: 8px; }
  .tabstrip-all-sites-btn { width: 100%; justify-content: center; margin-bottom: 0; }
  .statusline { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sl-mode-switcher { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; gap: 6px; }
  .mode-btn-group { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mode-toggle-btn { flex: 1; text-align: center; }
  .dash-top-bar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
  .dash-actions { width: 100%; }
  .dash-actions button { width: 100%; justify-content: center; }
  .admin-top-bar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px; }
  .admin-top-bar .pagenav { width: 100%; }
  .site-grid { grid-template-columns: 1fr; }
}

/* ── admin surfaces ───────────────────────────────────────────────── */
.admin-pane { display: none; }
.admin-pane.active { display: block; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3); }
.role-card {
  display: flex; flex-direction: column; gap: 4px; padding: var(--s3) var(--s4);
  background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--r-md);
}
.role-card strong { font-size: 13px; font-weight: 600; }
.role-card span { font-size: 12px; color: var(--color-text-faint); line-height: 1.45; }
.check-row { display: flex; flex-direction: row; align-items: center; gap: 9px; font-size: 13px; color: var(--color-text-dim); cursor: pointer; }
.check-row input { margin: 0; }
.ua-cell { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--color-text-faint); font-size: 12px; }
#users-table td .mini-btn + .mini-btn { margin-left: 5px; }

/* ── overlay dialogs built at runtime (user editor) ───────────────── */
/* These were missing, so the dialog rendered inline at the foot of the
   page instead of floating over it. */
.backdrop {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: var(--s4); background: rgba(19, 20, 23, .38); backdrop-filter: blur(3px);
}
.modal {
  width: min(460px, 100%); max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--color-surface); border: 1px solid var(--color-hairline);
  border-radius: var(--r-lg); box-shadow: var(--lift-modal);
  padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4);
}
.modal-title { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.modal-acts { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); }
.modal .field > label { font-size: 12.5px; }

/* ── select: native chrome replaced by a panel-native dropdown ────── */
/* The real <select> stays in the DOM as the source of truth, so every
   existing .value read and change listener keeps working; only its
   presentation is taken over. */
.sel { position: relative; display: block; width: 100%; }
.sel > select.sel-native {
  position: absolute; opacity: 0; pointer-events: none;
  width: 100%; height: 100%; inset: 0; margin: 0; padding: 0; border: 0;
}
.sel-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  width: 100%; min-height: 34px; padding: 6px 11px; cursor: pointer; text-align: left;
  background: var(--color-surface); color: var(--color-text); font-size: 13px; font-weight: 500;
  border: 1px solid var(--color-hairline-strong); border-radius: var(--r-sm);
  transition: border-color .12s ease, background-color .12s ease;
  transform: none !important;
}
.sel-btn:hover { background: var(--color-surface); border-color: var(--ink-300); }
.sel-btn:active { transform: none !important; }
.sel.open .sel-btn { border-color: var(--color-accent); }
.sel-btn:disabled { opacity: .5; cursor: not-allowed; }
.sel-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-caret { flex: none; color: var(--color-text-faint); transition: transform .15s ease; }
.sel.open .sel-caret { transform: rotate(180deg); }
.sel-menu {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 90;
  max-height: 280px; overflow-y: auto; overflow-x: hidden; padding: var(--s1);
  background: var(--color-surface); border: 1px solid var(--color-hairline);
  border-radius: var(--r-md); box-shadow: var(--lift-menu);
  display: flex; flex-direction: column; gap: 1px;
}
.sel-menu.up { top: auto; bottom: calc(100% + 5px); }
.sel-opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  width: 100%; text-align: left; padding: 8px 10px; min-height: 32px; cursor: pointer;
  white-space: nowrap;
  background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--color-text); font-size: 13px; font-weight: 500;
  transition: background-color .08s ease;
  transform: none !important;
}
.sel-opt:active { transform: none !important; }
.sel-opt:hover, .sel-opt.cursor { background: var(--color-surface-2); }
.sel-opt[aria-selected="true"] { font-weight: 600; }
.sel-opt[aria-selected="true"]::after {
  content: ""; width: 13px; height: 8px; flex: none; margin-right: 1px;
  border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg) translateY(-2px);
}
.inline-field .sel { width: auto; min-width: 148px; }
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.top-actions .sel { width: auto; min-width: 160px; margin: 0; }
.top-actions input[type="text"],
.top-actions input[type="search"] {
  min-height: 36px;
  margin: 0;
}

/* ── checkbox / radio: drawn, not OS-supplied ─────────────────────── */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; min-height: 17px; flex: none; padding: 0; margin: 0;
  border: 1.5px solid var(--color-hairline-strong); background: var(--color-surface);
  border-radius: 5px; cursor: pointer; position: relative;
  transition: background-color .12s, border-color .12s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--ink-400); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--color-accent); border-color: var(--color-accent);
}
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px;
  border: solid var(--color-accent-contrast); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--color-accent-contrast);
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }
.toggle-row { cursor: pointer; }
.toggle-row span { font-size: 13px; }

/* Aksiyon hücresi sağa yaslı ve tek satır — düğme satır yüksekliğini
   bozmadan sütununun içinde durur. */
#site-events td:last-child { text-align: right; }
#site-events td:last-child .mini-btn { margin: 0; padding: 0 8px; }
.rule-catalog-scroll { max-height: none !important; overflow: visible !important; }

/* key/value information grids on the site Settings page */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3) var(--s6); }
.kv { display: flex; flex-direction: column; gap: 3px; padding: var(--s2) 0; border-bottom: 1px solid var(--color-hairline); }
.kv-key { font-size: 11.5px; font-weight: 500; color: var(--color-text-faint); }
.kv-val { font-size: 13.5px; font-weight: 500; color: var(--color-text); overflow-wrap: anywhere; }
.btn-danger-solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger-solid:hover { background: color-mix(in srgb, var(--bad) 85%, #000); border-color: color-mix(in srgb, var(--bad) 85%, #000); }

/* a card header and its action button need air between them */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); row-gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s1); }
.card-head-text { padding-right: var(--s4); }
.card-head > button, .card-head > .top-actions { flex: none; }

/* profile dialog */
.prof-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--color-accent); color: var(--color-accent-contrast); font-size: 16px; font-weight: 600;
}
.prof-section-title { display: flex; align-items: center; gap: var(--s2); font-size: 13px; font-weight: 600; }
.totp-key { margin-top: var(--s2); padding: var(--s3); background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--r-sm); text-align: center; }
.totp-key code { font-size: 14px; letter-spacing: .12em; background: none; border: 0; max-width: none; word-break: break-all; }

/* ── record inspector drawer ──────────────────────────────────────── */
.drawer-wrap { position: fixed; inset: 0; z-index: 95; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(19,20,23,.32); backdrop-filter: blur(2px); }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%);
  background: var(--color-surface); border-left: 1px solid var(--color-hairline);
  box-shadow: var(--lift-modal); display: flex; flex-direction: column;
  animation: drawer-in .18s ease-out;
}
@keyframes drawer-in { from { transform: translateX(18px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) var(--s6); border-bottom: 1px solid var(--color-hairline); flex: none;
}
.drawer-head h3 { overflow-wrap: anywhere; }
/* overscroll-behavior: çekmecenin sonuna gelindiğinde kaydırma arkadaki
   sayfaya zincirlenmesin. */
.drawer-body { padding: var(--s5) var(--s6) var(--s10); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--s5); }
.drawer-section h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-faint); margin-bottom: var(--s2); }
.drawer-kv { display: grid; grid-template-columns: 1fr; gap: 0; }
.drawer-kv .kv { display: grid; grid-template-columns: 150px 1fr; gap: var(--s3); align-items: baseline; padding: 7px 0; }
.drawer-section pre.code { max-height: 280px; }
.row-link { cursor: pointer; }
.row-link:hover { background: var(--color-surface-2); }

/* İstek dökümü çekmecesi: olay zinciri ve komşu istek tabloları
   varsayılan 620px'e sığmıyor, kendi genişliğini alır. */
.drawer.drawer-wide { width: min(860px, 100%); }
.drawer.drawer-wide .table-wrap { margin-top: var(--s2); }
.drawer.drawer-wide table { font-size: 12.5px; }
.drawer.drawer-wide td, .drawer.drawer-wide th { padding: 8px var(--s2); }

/* ── attack wave cards ────────────────────────────────────────────── */
.wave-list { display: flex; flex-direction: column; gap: var(--s3); }
.wave { border: 1px solid var(--color-hairline); border-radius: var(--r-md); padding: var(--s4); background: var(--color-surface); }
.wave-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.wave-title { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: 14px; }
.wave-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s3); }
.wave-stats > div { display: flex; flex-direction: column; gap: 2px; }
.wave-actions { margin-top: var(--s3); display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ── pager ────────────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s3); border-top: 1px solid var(--color-hairline); }

/* drag-to-zoom on time series */
.chart-band { position: absolute; top: 0; bottom: 26px; background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-left: 1px solid var(--color-accent); border-right: 1px solid var(--color-accent); pointer-events: none; z-index: 2; }
.chart-reset { position: absolute; top: -52px; right: 0; z-index: 3; min-height: 26px; padding: 0 12px; font-size: 11.5px; font-weight: 500; background: var(--color-surface-2); color: var(--color-text-dim); border: 1px solid var(--color-hairline-strong); border-radius: var(--r-pill); white-space: nowrap; }
.chart-reset:hover { color: var(--color-text); background: var(--color-surface-2); border-color: var(--ink-300); }
.chart-box canvas { cursor: crosshair; }

/* ── wizard as a page (modern premium redesign) ──────────────────── */
.newsite-page-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s2) 0 var(--s12);
}

.newsite-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s6);
}

.newsite-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-dim);
  cursor: pointer;
  transition: all 0.15s ease;
}
.newsite-back-link:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-hairline-strong);
}

.newsite-badge-pill {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

.newsite-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  padding: 6px 12px;
  color: var(--color-text-faint);
}
.newsite-close-btn:hover {
  color: var(--bad);
}

/* Stepper Progress Timeline */
.wizard-steps-container {
  margin-bottom: var(--s8);
  padding: 0 var(--s2);
}

.wizard-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.wizard-steps::-webkit-scrollbar { display: none; }

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 68px;
  position: relative;
  text-align: center;
}

.wizard-step::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -50%;
  right: 50%;
  height: 2px;
  background: var(--color-hairline-strong);
  z-index: 1;
  transition: background-color 0.2s ease;
}
.wizard-step:first-child::before {
  display: none;
}

.wizard-step.done::before,
.wizard-step.current::before {
  background: var(--color-accent);
}

.wizard-dot {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-surface);
  border: 2px solid var(--color-hairline-strong);
  color: var(--color-text-faint);
  transition: all 0.2s ease;
  box-shadow: 0 0 0 3px var(--color-bg);
}

.wizard-step.current .wizard-dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.wizard-step.done .wizard-dot {
  background: var(--good-soft);
  border-color: var(--good);
  color: var(--good);
}

.wizard-step-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-faint);
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}
.wizard-step.current .wizard-step-label {
  color: var(--color-text);
  font-weight: 600;
}
.wizard-step.done .wizard-step-label {
  color: var(--color-text-dim);
}

/* Wizard Shell Container */
.wizard-shell {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-card);
  max-width: 680px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.wizard-shell .modal-body {
  padding: var(--s8) var(--s8) var(--s10);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}

.wizard-card-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s2);
}

.wizard-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
  transition: transform 0.2s ease;
}
.wizard-hero-icon.icon-blue { background: color-mix(in srgb, #2563eb 12%, transparent); color: #3b82f6; border: 1px solid color-mix(in srgb, #2563eb 25%, transparent); }
.wizard-hero-icon.icon-purple { background: color-mix(in srgb, #8b5cf6 12%, transparent); color: #8b5cf6; border: 1px solid color-mix(in srgb, #8b5cf6 25%, transparent); }
.wizard-hero-icon.icon-green { background: color-mix(in srgb, #10b981 12%, transparent); color: #10b981; border: 1px solid color-mix(in srgb, #10b981 25%, transparent); }
.wizard-hero-icon.icon-orange { background: color-mix(in srgb, #f59e0b 12%, transparent); color: #f59e0b; border: 1px solid color-mix(in srgb, #f59e0b 25%, transparent); }
.wizard-hero-icon.icon-red { background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; border: 1px solid color-mix(in srgb, #ef4444 25%, transparent); }
.wizard-hero-icon.icon-yellow { background: color-mix(in srgb, #eab308 12%, transparent); color: #eab308; border: 1px solid color-mix(in srgb, #eab308 25%, transparent); }
.wizard-hero-icon.icon-teal { background: color-mix(in srgb, #06b6d4 12%, transparent); color: #06b6d4; border: 1px solid color-mix(in srgb, #06b6d4 25%, transparent); }
.wizard-hero-icon.icon-success { background: var(--good-soft); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); }

.wizard-card-header h2 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin: 0;
}

.wizard-subtitle {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-dim);
  max-width: 520px;
  margin: 0;
}

.wizard-shell .modal-grid {
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  gap: var(--s5);
}

/* Domain Input with Addon */
.input-with-addon {
  display: flex;
  align-items: stretch;
  border-radius: var(--r-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline-strong);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-with-addon:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.input-addon {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--color-surface-2);
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  border-right: 1px solid var(--color-hairline);
  user-select: none;
}
.input-with-addon input {
  flex: 1;
  min-width: 0;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-size: 14px;
  font-family: var(--font);
  font-weight: 500;
}

/* Feature Pills in Step 1 */
.wizard-feature-pills {
  display: grid;
  gap: 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.wizard-feature-pills .feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--color-text-dim);
  font-weight: 500;
}
.wizard-feature-pills .feature-item svg {
  color: var(--color-accent);
  flex: none;
}

/* Submit and Navigation Buttons */
.wizard-submit-btn,
.finish-large-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  border-radius: var(--r-sm);
  margin-top: 4px;
}

.wizard-shell .modal-actions {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--s3);
  width: 100%;
}
.wizard-shell .modal-actions button {
  min-height: 40px;
  font-size: 13.5px;
  font-weight: 600;
}

.wizard-shell .finish-btn {
  width: 100%;
  min-height: 42px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-sm);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.wizard-shell .finish-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* DNS Target Group & Copy Button */
.dns-target-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dns-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-dim);
  cursor: pointer;
  transition: all 0.12s ease;
}
.dns-copy-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-hairline-strong);
}
.dns-copy-btn.copied {
  background: var(--good-soft);
  color: var(--good);
  border-color: var(--good);
}

/* Toggle Group Card in Step 5 */
.toggle-group-card {
  display: grid;
  gap: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.toggle-group-card .toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.toggle-group-card .toggle-row input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
}
.toggle-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toggle-row-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.toggle-row-text span {
  font-size: 11.5px;
  color: var(--color-text-dim);
}

.parsed-hint-pill {
  margin: 4px 0 0;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--good);
  background: var(--good-soft);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--good) 20%, transparent);
}

/* Success Card in Step 8 */
.wizard-success-card {
  display: grid;
  gap: 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.success-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.success-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--good-soft);
  color: var(--good);
  font-size: 12px;
  font-weight: 700;
  flex: none;
  margin-top: 1px;
}
.success-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.success-item-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.success-item-text span {
  font-size: 12px;
  color: var(--color-text-dim);
}

/* ── forms laid out on a page rather than crammed into a modal ────── */
.form-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); max-width: 720px; }
.form-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s2); }
.form-actions .small { min-height: 18px; }
.settings-card > .field, .settings-card > .form-grid-2 { max-width: 720px; }

/* profile identity banner */
.prof-banner {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s5) var(--s6); border-radius: var(--r-md);
  background: var(--color-surface-2); border: 1px solid var(--color-hairline);
}
.prof-banner .prof-avatar { width: 52px; height: 52px; font-size: 20px; }
.prof-banner-id { display: flex; flex-direction: column; gap: 3px; }
.prof-banner-id strong { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.prof-banner-meta { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

/* inline user editor sits inside the card list, visually distinct */
#user-form-host .settings-card { border-color: var(--color-hairline-strong); background: var(--color-surface-2); }
#user-form-host .settings-card .field input,
#user-form-host .settings-card .field .sel-btn { background: var(--color-surface); }

/* ── live indicators ──────────────────────────────────────────────── */
.live-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: live-blink 1.6s infinite; }
@keyframes live-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ── capacity gauges ──────────────────────────────────────────────── */
.gauge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4); }
.gauge { display: flex; flex-direction: column; gap: var(--s2); }
.gauge-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.gauge-name { font-size: 12px; font-weight: 500; color: var(--color-text-faint); }
.gauge-val { font-size: 19px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gauge-track { height: 7px; border-radius: var(--r-pill); background: var(--color-surface-2); overflow: hidden; }
.gauge-fill { height: 100%; border-radius: var(--r-pill); background: var(--good); transition: width .5s ease, background-color .3s ease; }
.gauge-fill.warn { background: var(--warn); }
.gauge-fill.bad { background: var(--bad); }
.gauge-note { font-size: 11.5px; color: var(--color-text-faint); }

/* ── diagnostics ──────────────────────────────────────────────────── */
.diag { display: flex; flex-direction: column; gap: var(--s2); }
.diag-item { display: flex; gap: var(--s3); padding: var(--s3); border: 1px solid var(--color-hairline); border-radius: var(--r-md); background: var(--color-surface); }
.diag-item.error { border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-soft); }
.diag-item.warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); }
.diag-item.ok { border-color: color-mix(in srgb, var(--good) 30%, transparent); background: var(--good-soft); }
.diag-badge { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--color-text-faint); }
.diag-item.error .diag-badge { background: var(--bad); }
.diag-item.warn .diag-badge { background: var(--warn); }
.diag-item.ok .diag-badge { background: var(--good); }
.diag-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.diag-title { font-size: 13.5px; font-weight: 600; }
.diag-scope { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-faint); }
.diag-detail { font-size: 12.5px; color: var(--color-text-dim); overflow-wrap: anywhere; }
.diag-hint { font-size: 12.5px; color: var(--color-text-dim); font-style: italic; }

/* ── 2FA setup ────────────────────────────────────────────────────── */
.totp-setup { display: flex; gap: var(--s5); flex-wrap: wrap; align-items: flex-start; }
.totp-qr { flex: none; padding: var(--s3); background: #fff; border: 1px solid var(--color-hairline); border-radius: var(--r-md); line-height: 0; }
.totp-steps { display: flex; flex-direction: column; gap: var(--s2); min-width: 260px; flex: 1; }
.totp-steps p { margin: 0; }
.code-confirm { display: flex; align-items: stretch; margin-top: var(--s2); max-width: 380px; }
.code-confirm input {
  flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0;
  font-family: var(--font-mono); font-size: 16px; letter-spacing: .28em; text-align: center;
}
.code-confirm button { border-top-left-radius: 0; border-bottom-left-radius: 0; white-space: nowrap; }
.totp-key { margin-top: var(--s2); }



/* evidence blocks in the inspector */
.evidence { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s3); }
.evidence-label { font-size: 11.5px; font-weight: 500; color: var(--color-text-faint); }
.evidence pre.code { margin: 0; max-height: 180px; white-space: pre-wrap; word-break: break-all; }

/* Taşma ve kırpma davranışı artık tablo sisteminin varsayılanı; burada
   yalnızca bu hücrelerin kendine özgü tarafı kalıyor. */
.cell-req code { display: block; }
.plan-list { margin: var(--s2) 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--color-text-dim); }
#gateway-result { margin-top: var(--s2); }

/* one row per signature that fired */
.rule-hits { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--s3); }
.rule-hit { display: flex; align-items: baseline; gap: var(--s3); padding: 6px 9px; background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--r-sm); }
.rule-hit code { flex: none; background: none; border: 0; padding: 0; font-size: 12px; color: var(--color-text-faint); min-width: 68px; max-width: none; }
.rule-hit span { font-size: 12.5px; color: var(--color-text); overflow-wrap: anywhere; }

/* wave: which site, and what was done about it */
.wave-site { font-size: 13px; font-weight: 600; color: var(--color-text-dim); }
.wave-actionbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--color-hairline); }
.wave-acts { display: flex; gap: 5px; flex-wrap: wrap; }

/* Olay kaydı tablosu — yoğun log görünümü */
.events-table-wrap { min-height: auto; width: 100%; overflow-x: auto; }
.events-table { table-layout: fixed; width: 100%; min-width: 980px; border-collapse: collapse; }
.events-table th, .events-table td {
  padding: 8px 10px;
  height: 40px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}
.events-table th {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-faint);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.events-table td span {
  display: inline;
  margin-top: 0;
}
.events-table .cell-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
}
.events-table .cell-time span {
  display: inline !important;
  margin-top: 0 !important;
}
.events-table .cell-time .time-date {
  color: var(--color-text-faint);
  font-size: 11.5px;
  margin-right: 5px;
}
.events-table .cell-time .time-clock {
  color: var(--color-text);
  font-weight: 500;
}
.events-table .cell-ip code {
  font-family: var(--font-mono);
  font-size: 12px;
}
.events-table .cell-score {
  text-align: center !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12px;
  padding-left: 2px !important;
  padding-right: 6px !important;
}
.events-table td[class*="action-"] {
  padding-right: 4px !important;
}
.events-table .cell-req {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.events-table .cell-req-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.events-table .cell-req .tag-method {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 6px;
  letter-spacing: .02em;
  margin: 0;
  line-height: 1.2;
}
.events-table .cell-req .cell-path {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-text);
  background: none;
  border: 0;
  padding: 0;
}
.events-table .cell-rule, .events-table .cell-reason {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.events-table .cell-actions {
  text-align: right;
}
.events-table .cell-actions .mini-btn {
  margin: 0;
  padding: 2px 8px;
  font-size: 11px;
}


/* English readers: keep the pre-translation markup out of sight for the
   handful of milliseconds before the phrase table is applied. */
html[data-i18n-pending] body { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════════════
   Profile page.

   Controls sit in a label column / control column grid so every input
   starts on the same vertical line no matter how long its label is —
   the previous auto-fit grid let a two-line label push its field down
   and the pair read as diagonal. Inputs get intrinsic widths because
   a name, an e-mail or a password is short: stretching them across the
   card made the form look empty and hard to scan.
   ═══════════════════════════════════════════════════════════════════ */
[data-section="profile"] .stack { gap: var(--s4); max-width: 720px; }

.prof-banner {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5); border-radius: var(--r-md);
  background: var(--color-surface); border: 1px solid var(--color-hairline);
}
.prof-banner .prof-avatar { width: 48px; height: 48px; font-size: 18px; }
.prof-banner-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.prof-banner-id strong { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.prof-banner-meta { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

.pf-card { padding: 0; gap: 0; overflow: hidden; }
.pf-head { padding: var(--s5) var(--s6) var(--s4); display: flex; flex-direction: column; gap: 3px; }
.pf-head h3 { margin: 0; }
.pf-head p { margin: 0; }
.pf-head-row { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.pf-head-row > div { display: flex; flex-direction: column; gap: 3px; }

.pf-rows { display: flex; flex-direction: column; border-top: 1px solid var(--color-hairline); }
.pf-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  align-items: start; gap: var(--s4);
  padding: var(--s4) var(--s6);
}
.pf-row + .pf-row { border-top: 1px solid var(--color-hairline); }
.pf-row > label {
  display: block; padding-top: 9px;
  font-size: 13px; font-weight: 500; color: var(--color-text-dim);
}
.pf-control { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pf-hint { font-size: 12px; color: var(--color-text-faint); }

.pf-foot {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s6); border-top: 1px solid var(--color-hairline);
  background: var(--color-surface-2);
}
.pf-status { min-height: 18px; }

/* intrinsic control widths — short values should not span the card */
.w-200 { width: 200px; max-width: 100%; }
.w-320 { width: 320px; max-width: 100%; }
.pf-control .sel { width: 200px; max-width: 100%; }
#pf-2fa-body .pf-control .sel { width: auto; }

/* 2FA setup sits inside the card body, aligned with the rows above */
#pf-2fa-body .totp-setup { padding: var(--s5) var(--s6); border-top: 1px solid var(--color-hairline); }
#pf-2fa-body > .pf-foot:first-child { border-top: 1px solid var(--color-hairline); }
[data-section="profile"] .pf-status { padding: 0 var(--s6) var(--s4); }
[data-section="profile"] .pf-foot .pf-status { padding: 0; }

@media (max-width: 640px) {
  .pf-row { grid-template-columns: 1fr; gap: var(--s2); }
  .pf-row > label { padding-top: 0; }
  .w-200, .w-320 { width: 100%; }
  .pf-control .sel { width: 100%; }
}

/* ── bildirim kanalları ───────────────────────────────────────────── */
/* Kanal listesi kullanıcı listesiyle aynı ritmi izler: kimlik solda,
   durum anahtarı sağda, eylemler altta. Şablon editörü geniş çekmecede
   açılır çünkü HTML gövdesi 620px'e sığmıyor. */

.nch-intro { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.nch-intro-text { display: flex; flex-direction: column; gap: var(--s2); max-width: 640px; }
.nch-list { display: flex; flex-direction: column; gap: var(--s3); }

.nch-card {
  border: 1px solid var(--color-hairline); border-radius: var(--r-md);
  background: var(--color-surface); padding: var(--s4) var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
}
.nch-card.is-off { background: var(--color-surface-2); }
.nch-card.is-off .nch-card-name, .nch-card.is-off .nch-icon { opacity: .6; }
.nch-card-main { display: flex; align-items: center; gap: var(--s3); }
.nch-card-id { flex: 1; min-width: 0; }
.nch-card-name { display: flex; align-items: center; gap: var(--s2); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.nch-card-target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nch-icon {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid var(--color-hairline);
  background: var(--color-surface-2); color: var(--color-text-dim);
}
.nch-icon svg { width: 17px; height: 17px; }
.nch-icon-email { color: var(--info); }
.nch-icon-telegram { color: #229ED9; }   /* Telegram marka rengi */
.nch-icon-discord { color: #5865F2; }    /* Discord marka rengi */
.nch-icon-telegram, .nch-icon-discord { background: var(--color-surface); }

.nch-events { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.nch-event-chip {
  font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--color-surface-2); color: var(--color-text-dim); border: 1px solid var(--color-hairline);
}
.nch-event-more { color: var(--color-text-faint); }

.nch-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.nch-card-actions { display: flex; gap: var(--s2); }
.nch-card-actions button { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.nch-status-good { color: var(--good); font-weight: 600; }
.nch-status-bad { color: var(--bad); font-weight: 600; }
.nch-status-faint { color: var(--color-text-faint); }
.nch-card-error {
  font-size: 12px; color: var(--bad); background: var(--bad-soft);
  border-radius: var(--r-sm); padding: var(--s2) var(--s3); overflow-wrap: anywhere;
}

/* açık/kapalı anahtarı */
.nch-switch { position: relative; flex: none; width: 38px; height: 22px; cursor: pointer; }
.nch-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.nch-switch span {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: var(--color-hairline-strong); transition: background .15s ease; pointer-events: none;
}
.nch-switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--color-surface); transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(19,20,23,.2);
}
.nch-switch input:checked + span { background: var(--good); }
.nch-switch input:checked + span::after { transform: translateX(16px); }

/* ── editör çekmecesi ─────────────────────────────────────────────── */
.drawer.drawer-xl { width: min(980px, 100%); }
.nch-form { display: flex; flex-direction: column; gap: var(--s6); }
.nch-fields { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s4); }
.nch-fields .field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 500; }
.nch-fields .hint { font-size: 12px; font-weight: 400; }

.nch-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); }
.nch-platform {
  display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--s3);
  text-align: left; white-space: normal; padding: var(--s3); min-height: 0;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-hairline); border-radius: var(--r-md); cursor: pointer;
}
.nch-platform:hover { color: var(--color-text); }
.nch-platform:hover { border-color: var(--color-hairline-strong); background: var(--color-surface); }
.nch-platform.is-active { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.nch-platform-text { display: flex; flex-direction: column; gap: 2px; }
.nch-platform-text strong { font-size: 13px; font-weight: 600; }
.nch-platform-text .small { line-height: 1.45; }

.nch-events-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.nch-events-bulk { display: flex; gap: var(--s1); }
.nch-events-bulk button { min-height: 26px; padding: 0 8px; font-size: 12px; }
.nch-event-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s5); }
.nch-event-group-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-faint); padding-bottom: var(--s2); margin-bottom: var(--s1);
  border-bottom: 1px solid var(--color-hairline);
}
.nch-event-row { display: flex; align-items: flex-start; gap: var(--s2); padding: 7px 0; cursor: pointer; }
.nch-event-row input { margin-top: 2px; }
.nch-event-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nch-event-label { display: flex; align-items: center; gap: var(--s2); font-size: 13px; font-weight: 500; }
.nch-event-body .small { line-height: 1.45; }
.nch-sev { font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--r-pill); }
.nch-sev-critical { background: var(--bad-soft); color: var(--bad); }
.nch-sev-high { background: var(--warn-soft); color: var(--warn); }
.nch-sev-warning { background: var(--color-surface-2); color: var(--color-text-dim); }
.nch-sev-info { background: var(--good-soft); color: var(--good); }

.nch-template-mode { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.nch-radio { display: flex; align-items: center; gap: var(--s2); font-size: 13px; font-weight: 500; cursor: pointer; }
.nch-radio input { margin: 0; }
.nch-format-badge {
  margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--color-surface-2); color: var(--color-text-dim); border: 1px solid var(--color-hairline);
}
#nch-format-hint { margin: var(--s2) 0 var(--s3); line-height: 1.55; }

.nch-vars { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) 6px; margin-bottom: var(--s2); }
.nch-var {
  font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; min-height: 0;
  background: var(--color-surface-2); color: var(--color-text-dim);
  border: 1px solid var(--color-hairline); border-radius: var(--r-sm); cursor: pointer;
}
.nch-var:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-hairline-strong); }

.nch-editor {
  width: 100%; min-height: 260px; resize: vertical; padding: var(--s3);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  background: var(--code-bg); color: var(--code-text);
  border: 1px solid var(--color-hairline-strong); border-radius: var(--r-sm);
}
.nch-editor[readonly] { opacity: .78; }
.nch-template-actions { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); flex-wrap: wrap; }
.nch-template-actions button { min-height: 28px; padding: 0 10px; font-size: 12px; }

.nch-preview { margin-top: var(--s5); border: 1px solid var(--color-hairline); border-radius: var(--r-md); overflow: hidden; }
.nch-preview-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--s4); background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-hairline); font-size: 12px; font-weight: 600;
}
.nch-preview-body { padding: var(--s4); background: var(--color-surface); max-height: 520px; overflow: auto; }
.nch-mail-subject { font-size: 13px; margin-bottom: var(--s3); overflow-wrap: anywhere; }
.nch-mail-frame { width: 100%; height: 460px; border: 1px solid var(--color-hairline); border-radius: var(--r-sm); background: #f4f4f5; }
.nch-json-error { font-size: 12.5px; color: var(--bad); background: var(--bad-soft); padding: var(--s3); border-radius: var(--r-sm); margin-bottom: var(--s3); line-height: 1.55; }

/* Telegram baloncuğu ve Discord kartı: gerçekte nasıl görüneceğini
   göstermek için o platformların kendi ölçüleriyle çiziliyor. */
.nch-tg { background: #e6ebee; padding: var(--s4); border-radius: var(--r-sm); }
:root[data-theme="dark"] .nch-tg { background: #17212b; }
.nch-tg-bubble {
  max-width: 460px; background: #ffffff; color: #1c1e22; border-radius: 12px;
  padding: 10px 13px; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(19,20,23,.12);
}
:root[data-theme="dark"] .nch-tg-bubble { background: #212d3b; color: #f4f4f5; }
.nch-tg-bubble code { background: rgba(19,20,23,.06); padding: 1px 4px; border-radius: 3px; font-size: 12.5px; }
.nch-tg-bubble blockquote { margin: 6px 0; padding-left: 9px; border-left: 2px solid #4a8fd0; color: inherit; opacity: .85; }
.nch-tg-bubble a { color: #2b7bb9; }

.nch-dc { background: #f2f3f5; padding: var(--s4); border-radius: var(--r-sm); }
:root[data-theme="dark"] .nch-dc { background: #313338; }
.nch-dc-msg { font-size: 13.5px; color: #2e3338; }
.nch-dc-embed {
  max-width: 520px; background: #ffffff; border-left: 4px solid #5561d6;
  border-radius: 4px; padding: 12px 16px 14px; color: #2e3338; font-size: 13.5px; line-height: 1.5;
}
:root[data-theme="dark"] .nch-dc-embed { background: #2b2d31; color: #dbdee1; }
.nch-dc-title { font-weight: 600; font-size: 14px; margin-bottom: 6px; overflow-wrap: anywhere; }
.nch-dc-desc { margin-bottom: 8px; overflow-wrap: anywhere; }
.nch-dc-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.nch-dc-field { flex: 1 1 100%; min-width: 0; }
.nch-dc-field.is-inline { flex: 1 1 30%; }
.nch-dc-field-name { font-size: 12.5px; font-weight: 600; margin-bottom: 1px; }
.nch-dc-field-value { font-size: 12.5px; overflow-wrap: anywhere; }
.nch-dc-footer { margin-top: 10px; font-size: 11.5px; opacity: .65; }
.nch-dc code, .nch-dc-embed code { background: rgba(19,20,23,.07); padding: 1px 4px; border-radius: 3px; font-family: var(--font-mono); font-size: 11.5px; }
:root[data-theme="dark"] .nch-dc-embed code { background: rgba(255,255,255,.08); }

.nch-form-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding-top: var(--s4); border-top: 1px solid var(--color-hairline); flex-wrap: wrap;
}
.nch-form-buttons { display: flex; gap: var(--s2); }

@media (max-width: 720px) {
  .nch-card-foot { align-items: flex-start; }
  .nch-card-actions { width: 100%; }
  .nch-event-groups { grid-template-columns: 1fr; }
}
/* Yerel <select>, panelin .sel bileşenine dönüştürülüyor (app.js
   enhanceSelects); burada yalnızca genişliğini başlık satırına
   sığdırıyoruz, görünümü tasarım sisteminden geliyor. */
.nch-preview-pick { display: flex; align-items: center; gap: var(--s2); font-weight: 400; }
.nch-preview-pick .sel { width: auto; min-width: 210px; }

/* Boş durum: .settings-card esnek sütun olduğu için buton tam genişliğe
   yayılıyordu; ortalanmış ve kendi genişliğinde dursun. */
.nch-empty { align-items: center; text-align: center; padding: var(--s10) var(--s6); }
.nch-empty button { align-self: center; }

/* ── düzen ilkelleri ──────────────────────────────────────────────── */
/* Bu sınıflar markup'ta baştan beri kullanılıyordu ama hiç tanımlanmamıştı:
   .grid-2/.grid-3 sıradan blok olarak davranınca abonelik ve limit alanları
   üst üste yığılıp tam genişliğe yayılıyordu. */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4) var(--s5); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4) var(--s5); }
.grid-2 > .field, .grid-3 > .field { min-width: 0; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* label global olarak display:grid; içindeki "(0 = sınırsız)" gibi ek
   açıklamalar bu yüzden alt satıra düşüyordu. */
.field > label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--color-text-dim); }
.field > input, .field > select, .field > textarea { width: 100%; }
.field > .hint { font-size: 12px; font-weight: 400; color: var(--color-text-faint); }

/* ── Manage Panel Refined Minimal Controls ── */
.tab-panel[data-panel="manage"] .grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  gap: 16px;
}
.tab-panel[data-panel="manage"] .grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  gap: 16px;
}
.tab-panel[data-panel="manage"] .field {
  max-width: 260px;
}
.tab-panel[data-panel="manage"] .field > select,
.tab-panel[data-panel="manage"] .field > input {
  max-width: 240px;
  height: 36px;
}
.tab-panel[data-panel="manage"] textarea {
  max-width: 580px;
}

.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row-end { justify-content: flex-end; }

/* yatay ayraç; kart içindeki iki liste arasında kullanılıyor */
.rule { height: 1px; background: var(--color-hairline); border: 0; margin: 0; flex: none; }

.tag {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--color-surface-2); color: var(--color-text-dim); border: 1px solid transparent;
}
.tag-good { background: var(--good-soft); color: var(--good); }
.tag-bad { background: var(--bad-soft); color: var(--bad); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }
.tag-line { background: transparent; border-color: var(--color-hairline-strong); color: var(--color-text-dim); }

.status-badge {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 9px;
  border-radius: var(--r-pill); background: var(--color-surface-2);
}
.status-badge.action-block { background: var(--bad-soft); }
.status-badge.action-challenge, .status-badge.action-rate_limit { background: var(--warn-soft); }
.status-badge.action-log { background: var(--info-soft); }
.status-badge.action-allow { background: var(--good-soft); }

.section-block { display: flex; flex-direction: column; gap: var(--s4); }
.card-danger { border-color: color-mix(in srgb, var(--bad) 35%, var(--color-hairline)); }
.empty-state { display: grid; place-items: center; gap: var(--s3); text-align: center; padding: var(--s10) var(--s6); color: var(--color-text-faint); }
.empty-icon-wrap { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--color-surface-2); color: var(--color-text-faint); }
.loading { color: var(--color-text-faint); font-size: 13px; }

/* kart içinde iki ayrı listeyi adlandıran küçük başlık */
.sub-list { display: flex; flex-direction: column; gap: var(--s2); }
.sub-list-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-faint); }

/* ═══════════════════════════════════════════════════════════════════
   Tam ekran düzeni — geniş viewport yoğunluğu

   Kabuğu viewport'a açmak (--shell) tek başına yetmiyor: kartlar tek
   sütun hâlinde alt alta dizildiğinde bu kez kartın *içi* boşalıyor,
   ölü alan kenardan içeri taşınmış oluyor. Bu yüzden geniş ekranlarda
   dikey yığınlar çok sütuna akıyor — kazanılan genişlik gerilmiş
   input'larla değil, yan yana gelen gerçek içerikle doluyor.

   Kasıtlı olarak DOKUNULMAYANLAR:
   - .w-200 / .w-320 / .pf-control .sel — bir ad ya da e-posta kısadır;
     kart boyunca germek daha önce düzeltilen "form bomboş görünüyor"
     sorununu geri getirir.
   - .wizard-shell (yeni site sihirbazı) — odaklanmış tek bir akış,
     ortada dar kalması bilinçli.
   - .nch-intro-text ve düz metin blokları — satır uzunluğu okunabilirlik
     sınırında tutuluyor.
   - login.html, mitigation.html, pages/*.html — bunlar ziyaretçiye
     gösterilen ara sayfalar; ortalanmış kart olmaları gerekiyor.

   Eşikler içeriğe göre: iki tablo yan yana ancak ~1600px'ten sonra
   nefes alıyor, form kartları ~1400px'te rahat ediyor.
   ═══════════════════════════════════════════════════════════════════ */

/* Kart içi form blokları: 720px sabit sınır, kart artık çok daha geniş
   olduğu için sağda büyük bir boşluk bırakıyordu. Sınır kalkmıyor ama
   auto-fit'in birden fazla sütun kurabileceği kadar yükseliyor. */
@media (min-width: 1400px) {
  .form-grid-2,
  .settings-card > .field,
  .settings-card > .form-grid-2 { max-width: 1120px; }
  .settings-control { max-width: 760px; }
}

/* Dashboard: KPI şeridi tam genişlik, altındaki iki tablo yan yana.
   Eşik 2100px, çünkü bu tablolar altı sütunlu: her birine en az ~1000px
   düşmezse IP ve kural adları kırpılmaya başlıyor. Daha dar ekranlarda
   tablolar tam genişlikte alt alta durur — okunabilirlik yoğunluktan
   önce gelir. */
@media (min-width: 2100px) {
  [data-section="dashboard"] .stack {
    display: grid; grid-template-columns: 1fr 1fr; align-items: start;
  }
  [data-section="dashboard"] .stack > .kpi-grid { grid-column: 1 / -1; margin-bottom: 0; }
}

/* Profil: kartlar tek kolonda 720px'e sıkışmak yerine yan yana akar;
   kimlik afişi tam genişlikte kalır. */
@media (min-width: 1400px) {
  [data-section="profile"] .stack {
    max-width: none;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
    align-items: start;
  }
  [data-section="profile"] .stack > .prof-banner { grid-column: 1 / -1; }
}

/* Site çalışma alanı: ayarlar sekmesindeki kart yığını iki sütuna akar,
   "siteyi kaldır" kartı tam genişlikte kalır — tehlikeli işlem yarım
   sütuna sıkışıp sıradan bir ayar gibi görünmemeli. */
@media (min-width: 1500px) {
  .tab-panel[data-panel="site-settings"] > .stack {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
    align-items: start;
  }
  .tab-panel[data-panel="site-settings"] > .stack > .card-danger { grid-column: 1 / -1; }
}

/* Bildirimler: .nch-intro listenin başlığı, yanına değil üstüne ait.
   Genişlikten kazanan liste kendisi — kanal kartları yan yana dizilir. */
@media (min-width: 1500px) {
  .nch-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); align-items: start; }
}

/* ── CAPTCHA Tab Enhancement ──────────────────────────────────────── */
.chip-suggestion-wrap {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.chip-suggestion {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-surface-2); color: var(--color-text-dim);
  border: 1px solid var(--color-hairline); border-radius: var(--r-pill);
  padding: 3px 10px; font-size: 11.5px; font-weight: 500;
  cursor: pointer; transition: all .15s ease; user-select: none;
}
.chip-suggestion:hover {
  color: var(--color-text); border-color: var(--color-hairline-strong);
  background: var(--color-surface);
}

.code-box-wrap {
  border: 1px solid var(--color-hairline); border-radius: var(--r-md);
  background: var(--code-bg); margin-top: 4px; overflow: hidden;
}
.code-box-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-hairline);
  font-size: 11.5px; font-weight: 600; color: var(--color-text-dim);
}
.code-box-wrap pre {
  margin: 0; border: 0; border-radius: 0; padding: 10px 12px;
  font-size: 11px; line-height: 1.45; min-height: 0; max-height: none;
  overflow: hidden;
}
.code-box-wrap pre code {
  background: transparent; border: 0; padding: 0; font-size: 11px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; max-width: 100%; display: block;
}

.captcha-alert-secret {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline-strong);
  border-left: 4px solid var(--warn, #f59e0b);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: grid;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.captcha-features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin-top: 12px;
}
.captcha-feature-card {
  padding: 14px; background: var(--color-surface-2);
  border: 1px solid var(--color-hairline); border-radius: var(--r-sm);
  display: flex; gap: 12px; align-items: flex-start;
}
.captcha-feature-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--color-surface); border: 1px solid var(--color-hairline);
  display: grid; place-items: center; flex: none; color: var(--color-accent);
}
.captcha-feature-info h5 {
  margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--color-text);
}
.captcha-feature-info p {
  margin: 0; font-size: 12px; color: var(--color-text-dim); line-height: 1.5;
}

.captcha-integration-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px;
}
@media (max-width: 900px) {
  .captcha-integration-grid { grid-template-columns: 1fr; }
}
.captcha-integration-card {
  background: var(--color-surface-2); border: 1px solid var(--color-hairline);
  border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.captcha-integration-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.captcha-integration-title {
  font-size: 13px; font-weight: 600; color: var(--color-text);
}

.captcha-snippet-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--color-hairline); padding-bottom: 6px; margin-bottom: 8px; flex-wrap: wrap;
}
.captcha-snippet-tab {
  background: transparent; border: none; font-size: 11.5px; font-weight: 500;
  color: var(--color-text-dim); padding: 3px 8px; border-radius: var(--r-xs); cursor: pointer; transition: all .15s ease;
}
.captcha-snippet-tab:hover {
  background: var(--color-surface-hover); color: var(--color-text);
}
.captcha-snippet-tab.active {
  background: var(--color-surface); color: var(--color-accent); font-weight: 600; border: 1px solid var(--color-hairline);
}
.captcha-snippet-pane {
  display: none;
}
.captcha-snippet-pane.active {
  display: block;
}

/* ══ SİSTEM ANALİZİ ═══════════════════════════════════════════════════════
   Bulgu kartları var olan `.settings-card` üzerine oturur; buradaki tek ek,
   ciddiyeti sol kenardan renkle okutmak ve kanıt/eylem bölümlerini ayırmak.
   Renkler yalnızca jetonlardan gelir, koyu tema kendiliğinden çalışır. */

.sa-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); }
.sa-intro-text { flex: 1; min-width: 0; }
.sa-intro-text p { margin: var(--s2) 0 0; }
.sa-scope-note { color: var(--color-text-faint); }
.sa-intro > button { flex: 0 0 auto; }

.sa-summary-card { display: grid; gap: var(--s5); }
.sa-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.sa-headline { font-size: 15px; font-weight: 600; letter-spacing: -.02em; margin-top: var(--s1); }
.sa-summary-meta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.sa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.sa-stat { background: var(--color-surface-2); border: 1px solid var(--color-hairline); border-radius: var(--r-sm); padding: var(--s3) var(--s4); }
.sa-stat-label { font-size: 12px; color: var(--color-text-faint); }
.sa-stat-value { font-size: 17px; font-weight: 600; margin-top: var(--s1); }

.sa-findings { display: grid; gap: var(--s5); }
.sa-findings:empty { display: none; }

.sa-finding { border-left: 3px solid var(--color-hairline-strong); display: grid; gap: var(--s3); }
.sa-finding.sa-sev-critical { border-left-color: var(--bad); }
.sa-finding.sa-sev-warning { border-left-color: var(--warn); }
.sa-finding.sa-sev-info { border-left-color: var(--info); }
.sa-finding.sa-sev-ok { border-left-color: var(--good); }

.sa-finding-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.sa-finding-head h3 { margin: 0; flex: 1; min-width: 0; }
.sa-sev-chip {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid currentColor; flex: 0 0 auto;
}
.sa-sev-critical .sa-sev-chip { color: var(--bad); background: var(--bad-soft); }
.sa-sev-warning .sa-sev-chip { color: var(--warn); background: var(--warn-soft); }
.sa-sev-info .sa-sev-chip { color: var(--info); background: var(--info-soft); }
.sa-sev-ok .sa-sev-chip { color: var(--good); background: var(--good-soft); }

.sa-finding-summary { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--color-text); max-width: 78ch; }
.sa-finding-tools { display: flex; gap: var(--s3); }
.sa-evidence-btn {
  min-height: 28px; padding: 0 var(--s2); font-size: 12px;
  /* Kenarlıksız bir düğme düz metinden ayırt edilemiyordu; altı çizgi tek
     başına "bu tıklanabilir" sinyalini veriyor. */
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--color-hairline-strong);
}
.sa-evidence-btn:hover { text-decoration-color: currentColor; }

.sa-evidence {
  background: var(--color-surface-2); border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm); padding: var(--s4); display: grid; gap: var(--s4);
}
.sa-evidence ul { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s1); font-size: 13px; }
.sa-rays { font-size: 12px; color: var(--color-text-dim); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.sa-rays-label { color: var(--color-text-faint); }
.sa-steps-title { font-size: 12px; font-weight: 600; color: var(--color-text-faint); margin-bottom: var(--s2); }
.sa-steps ol { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s1); font-size: 13px; }

.sa-action { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s2); }
.sa-action-denied { color: var(--color-text-dim); }
.sa-action-denied .small { max-width: 62ch; }

.sa-clean { text-align: center; }
.sa-clean-title { font-size: 15px; font-weight: 600; letter-spacing: -.02em; margin-bottom: var(--s2); }
.sa-clean p { margin: 0 auto; max-width: 62ch; }

.sa-history-card { padding: 0; overflow: hidden; }
.sa-history-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 14px 20px; border-bottom: 1px solid var(--color-hairline);
  background: var(--surface-subtle);
}
.sa-history-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.sa-history-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.sa-history-wrap { --tbl-min: 720px; overflow-x: auto; }

.sa-history-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto !important; }
.sa-history-table th {
  background: var(--surface-subtle); color: var(--muted); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 11px 20px;
  border-bottom: 1px solid var(--color-hairline); text-align: left;
  overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important;
}
.sa-history-table td {
  padding: 12px 20px; border-bottom: 1px solid var(--color-hairline); vertical-align: middle;
  overflow: visible !important; text-overflow: clip !important; white-space: normal !important;
}
.sa-history-table td span {
  display: inline; overflow: visible; text-overflow: clip; margin-top: 0;
}
.sa-history-table tbody tr:last-child td { border-bottom: none; }
.sa-history-table tbody tr:hover { background: var(--surface-hover); }

.sa-hist-time {
  white-space: nowrap !important; font-size: 12px; line-height: 1.3;
}
.sa-hist-time .time-date { font-weight: 600; color: var(--text-main); margin-right: 6px; }
.sa-hist-time .time-clock { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

.sa-hist-main { display: flex; flex-direction: column; gap: 3px; }
.sa-hist-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sa-hist-title { font-weight: 600; font-size: 13px; color: var(--text-main); }
.sa-hist-badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.sa-diff-pill {
  display: inline-flex !important; align-items: center; gap: 4px; padding: 2px 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  border-radius: var(--r-pill); line-height: 1.2;
}
.sa-diff-pill.add { background: var(--good-soft); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 25%, transparent); }
.sa-diff-pill.del { background: var(--bad-soft); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); }
.sa-diff-pill.warn { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
.sa-diff-pill.info { background: var(--color-surface-2); color: var(--color-text-dim); border: 1px solid var(--color-hairline); }

.sa-hist-sub { font-size: 11.5px; line-height: 1.3; color: var(--muted); display: block !important; }

.sa-hist-status .tag {
  display: inline-flex !important;
}

.sa-hist-actions {
  text-align: right; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
}
.sa-undo-btn { font-size: 11.5px; padding: 3px 10px; height: 26px; line-height: 1; border-radius: var(--r-sm); margin: 0 !important; }

/* Onay penceresi: iki sütunlu önce/sonra. Dar ekranda alt alta iner. */
.sa-consent-what > div:last-child { font-size: 13.5px; margin-top: var(--s1); }
.sa-consent-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.sa-diff-col { display: grid; gap: var(--s1); min-width: 0; }
.sa-consent-diff pre {
  margin: 0; padding: var(--s3); font-size: 12px; line-height: 1.5;
  background: var(--code-bg); color: var(--code-text);
  border: 1px solid var(--color-hairline); border-radius: var(--r-sm);
  white-space: pre-wrap; word-break: break-all; max-height: 160px; overflow: auto;
}
.sa-consent-note { display: grid; gap: var(--s2); }
.sa-consent-note p { margin: 0; }

@media (max-width: 760px) {
  .sa-intro { flex-direction: column; }
  .sa-consent-diff { grid-template-columns: 1fr; }
}

/* Kapsamlı WAF istisnaları — satır bazlı hata listesi */
.waf-exc-errors { display: grid; gap: var(--s2); margin-top: var(--s2); }
.waf-exc-error {
  font-size: 12.5px; line-height: 1.5; color: var(--bad);
  background: var(--bad-soft); border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm); padding: var(--s2) var(--s3);
}
.waf-exc-line { font-weight: 600; margin-right: var(--s1); }
.waf-exc-error code { margin-left: var(--s1); }


.dns-card-badge-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--color-hairline);
}
.dns-step-badge {
  font-size: 11.5px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.badge-txt { color: #0284c7; }
.badge-txt-pill {
  background: rgba(2, 132, 199, 0.12) !important; color: #0284c7 !important;
  border-color: rgba(2, 132, 199, 0.25) !important;
}
.dns-txt-note {
  margin-top: var(--s2); padding: 8px 12px; background: var(--surface-subtle);
  border-radius: var(--r-sm); font-size: 11.5px; line-height: 1.4;
}
.text-wrap-break { word-break: break-all; }


.onboard-error-banner {
  margin-top: 8px; padding: 10px 14px; background: var(--bad-soft); color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 8px;
}
.dns-target-group {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; width: 100%;
}
.dns-copy-btn.icon-only {
  width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px solid var(--color-hairline); background: var(--surface-subtle);
  color: var(--color-text-dim); cursor: pointer; flex-shrink: 0; transition: all 0.15s ease;
}
.dns-copy-btn.icon-only:hover {
  background: var(--surface-hover); color: var(--color-text); border-color: var(--color-hairline-strong);
}

/* ── Global Centered Nexren Shield Loading Overlay ─────────────────── */
.global-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 23, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.global-loader-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.global-loader-card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-lg, 16px);
  padding: 28px 32px;
  min-width: 280px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  box-shadow: 0 24px 54px -12px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: scale(0.92) translateY(8px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.global-loader-overlay.active .global-loader-card {
  transform: scale(1) translateY(0);
}

.global-loader-logo-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.global-loader-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
  animation: loader-logo-float 2.2s ease-in-out infinite alternate;
}

.global-loader-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--good-soft, rgba(26, 128, 85, 0.32)) 0%, transparent 72%);
  animation: loader-glow 1.8s ease-in-out infinite alternate;
  pointer-events: none;
}

.global-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.global-loader-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1.25;
}

.global-loader-subtitle {
  font-size: 12px;
  color: var(--color-text-dim);
  line-height: 1.35;
}

.global-loader-bar-wrap {
  width: 100%;
  padding: 2px 0 0;
}

.global-loader-bar-track {
  width: 100%;
  height: 4px;
  background: var(--color-surface-2, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.global-loader-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--color-accent, #1a8055), #4ade80, transparent);
  animation: loader-beam 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes loader-beam {
  0% {
    left: -50%;
  }
  100% {
    left: 100%;
  }
}

@keyframes loader-logo-float {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-2px) scale(1.03);
  }
}

@keyframes loader-glow {
  0% {
    opacity: 0.4;
    transform: scale(0.9);
  }
  100% {
    opacity: 0.9;
    transform: scale(1.25);
  }
}

/* ── Support Drawer & Ticket Center ───────────────────────────────── */
.drawer.drawer-support {
  width: min(840px, 100%);
}

.support-top-controls {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

.support-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

.support-filter-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-surface-2);
  padding: 3px;
  border-radius: var(--r-md);
  border: 1px solid var(--color-hairline);
}

.support-tab-btn {
  background: none;
  border: none;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .12s ease;
}

.support-tab-btn:hover {
  color: var(--color-text);
}

.support-tab-btn.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  font-weight: 600;
}

.support-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  background: var(--color-hairline);
  color: var(--color-text-dim);
}

.support-tab-btn.active .support-tab-count {
  background: var(--color-hairline-strong);
  color: var(--color-text);
}

.support-search-wrap {
  position: relative;
  width: 100%;
}

.support-search-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  pointer-events: none;
}

.support-search-input {
  width: 100%;
  padding: 8px 12px 8px 32px !important;
  font-size: 13px !important;
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-hairline) !important;
  border-radius: var(--r-md) !important;
}

.support-search-input:focus {
  background: var(--color-surface) !important;
  border-color: var(--color-hairline-strong) !important;
}

/* Ticket cards */
.support-ticket-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.support-ticket-card {
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.support-ticket-card:hover {
  background: var(--color-surface-2);
  border-color: var(--color-hairline-strong);
  transform: translateY(-1px);
}

.support-ticket-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}

.support-ticket-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.support-ticket-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.support-ticket-preview {
  font-size: 13px;
  color: var(--color-text-dim);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.support-ticket-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-faint);
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px dashed var(--color-hairline);
}

.support-ticket-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Create Form in Drawer */
.support-form-container {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.support-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3);
}

.support-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.support-form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

.support-form-group input,
.support-form-group select,
.support-form-group textarea {
  width: 100%;
}

.support-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s3);
  padding-top: var(--s2);
}

/* Ticket Detail View */
.support-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--s3);
}

.support-detail-back:hover {
  color: var(--color-text);
}

.support-detail-hero {
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  padding: 16px;
  background: var(--color-surface-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-detail-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

.support-detail-hero-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.support-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 16px;
  font-size: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--color-hairline);
}

.support-detail-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.support-detail-meta-key {
  color: var(--color-text-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.support-detail-meta-val {
  color: var(--color-text);
  font-weight: 500;
}

/* Conversation Thread */
.support-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--s2);
}

.support-msg {
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.support-msg.is-team {
  border-left: 3px solid var(--good);
  background: var(--color-surface);
}

.support-msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.support-msg-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.support-msg-body {
  font-size: 13.5px;
  color: var(--color-text);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.support-reply-card {
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--s2);
}

.support-reply-card h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}