/* GRWCPBN design system — tokens & components ported from the design handoff. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  --bg:#e7e4df; --panel:#f4f2ee; --card:#ffffff; --ink:#191714; --ink2:#4a453e;
  --muted:#9a938a; --line:#e4e0d9; --line2:#f0ede8; --feature:#141210;
  --feature-ink:#ffffff; --tint:#fbf3ee; --accent:#c14b26; --accent-hover:#a13c1c;
}
:root[data-theme="dark"] {
  --bg:#0f1115; --panel:#171a1f; --card:#1e222a; --ink:#eef0f3; --ink2:#c3c9d2;
  --muted:#8b93a1; --line:#2a2f38; --line2:#242932; --feature:#242c38;
  --feature-ink:#eef0f3; --tint:rgba(224,138,90,.13);
  color-scheme: dark;
}

body {
  font-family:'Manrope','Helvetica Neue',Arial,sans-serif; color:var(--ink);
  background:var(--bg); -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-hover); }
input, select, button, textarea { font-family:inherit; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#cdc8c0; border-radius:6px; border:3px solid transparent; background-clip:content-box; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#3a414c; background-clip:content-box; }

@keyframes grw-fade { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:translateY(0);} }
@keyframes grw-shimmer { 0% { background-position:-420px 0;} 100% { background-position:420px 0;} }
.grw-skel { background:linear-gradient(90deg,var(--line2) 25%,var(--line) 37%,var(--line2) 63%); background-size:840px 100%; animation:grw-shimmer 1.25s ease-in-out infinite; border-radius:6px; }
.fade { animation:grw-fade .4s ease; }

/* ---------- app shell ---------- */
.app { display:flex; min-height:100vh; width:100%; padding:14px; gap:14px; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }

/* ---------- sidebar ---------- */
.sidebar { width:230px; flex-shrink:0; overflow:hidden; background:#141210; border-radius:26px;
  padding:22px 16px; display:flex; flex-direction:column; position:sticky; top:14px; height:calc(100vh - 28px); }
.logo-row { display:flex; align-items:center; gap:11px; padding:6px 8px 18px; }
.logo-mark { width:34px; height:34px; flex-shrink:0; border-radius:10px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px; }
.logo-name { color:#fff; font-weight:600; font-size:15px; letter-spacing:.02em; }
.logo-sub { color:#8a847b; font-size:10.5px; letter-spacing:.04em; }
.nav { position:relative; display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.nav-cutout { position:absolute; left:0; top:0; height:44px; width:calc(100% + 16px); background:var(--bg);
  border-radius:14px 0 0 14px; transition:transform 380ms cubic-bezier(.22,.8,.25,1), opacity 220ms ease; pointer-events:none; z-index:0; }
.nav-cutout .c-t, .nav-cutout .c-b { position:absolute; right:0; width:22px; height:22px; background:transparent; pointer-events:none; }
.nav-cutout .c-t { top:-22px; border-bottom-right-radius:22px; box-shadow:7px 7px 0 7px var(--bg); }
.nav-cutout .c-b { bottom:-22px; border-top-right-radius:22px; box-shadow:7px -7px 0 7px var(--bg); }
.nav-item { position:relative; z-index:1; display:flex; align-items:center; gap:11px; width:100%; height:44px;
  text-align:left; border:none; cursor:pointer; font-size:13.5px; background:transparent; border-radius:13px;
  padding:0 13px; color:#8a847b; transition:color 240ms ease; text-decoration:none; }
.nav-item.active { color:var(--ink); }
.nav-item .badge { margin-left:auto; background:#2a2622; color:#c9c3ba; font-size:10.5px; padding:2px 7px; border-radius:20px; }
.side-bottom { margin-top:auto; display:flex; flex-direction:column; gap:12px; }
.side-btn { display:flex; align-items:center; gap:11px; width:100%; border:none; cursor:pointer; background:#1e1b18;
  color:#c9c3ba; border-radius:13px; padding:11px 13px; font-size:13.5px; transition:background .18s ease; }
.side-btn:hover { background:#2a2622; }
.sync-card { background:#1e1b18; border-radius:16px; padding:13px 14px; }
.sync-card .k { color:#8a847b; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; }
.sync-card .v { color:#fff; font-size:13px; margin-top:5px; display:flex; align-items:center; gap:7px; }
.sync-dot { width:7px; height:7px; border-radius:50%; background:#5ea87a; box-shadow:0 0 0 3px rgba(94,168,122,.2); }
.user-row { display:flex; align-items:center; gap:10px; padding:4px 6px; }
.user-av { width:32px; height:32px; flex-shrink:0; border-radius:10px; background:var(--ink2); color:var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; }

/* ---------- panels / cards ---------- */
.panel { background:var(--panel); border-radius:22px; }
.panel-pad { padding:22px 26px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; }
.eyebrow { font-size:11.5px; color:var(--muted); letter-spacing:.04em; }
.h1 { font-weight:700; font-size:30px; letter-spacing:-0.02em; margin-top:2px; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  color:var(--ink); padding:11px 15px; border-radius:12px; font-size:13px; cursor:pointer; }
.btn:hover { border-color:var(--muted); }
.btn-dark { background:#141210; color:#fff; border:none; padding:11px 16px; border-radius:12px; font-size:13px; cursor:pointer; }
:root[data-theme="dark"] .btn-dark { background:#2a2f38; }
.btn-sm { padding:6px 11px; border-radius:8px; font-size:11.5px; }

/* ---------- search + selects ---------- */
.search { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  padding:9px 14px; border-radius:12px; min-width:240px; }
.search input { border:none; outline:none; background:transparent; font-size:13px; width:100%; color:var(--ink); }
.select { padding:9px 14px; border:1px solid var(--line); border-radius:10px; font-size:12.5px;
  background:var(--card); color:var(--ink2); outline:none; cursor:pointer; }

/* ---------- badges / pills ---------- */
.badge-status { display:inline-block; padding:3px 10px; border-radius:14px; font-size:11px; font-weight:600; }
.st-ok    { background:#e7f2ec; color:#2f7d51; }
.st-warn  { background:#fbf1de; color:#b07d1e; }
.st-err   { background:#fbe8e3; color:#b0402a; }
.st-none  { background:#efece7; color:#8a847b; }
:root[data-theme="dark"] .st-ok{background:rgba(47,125,81,.18);} 
:root[data-theme="dark"] .st-warn{background:rgba(176,125,30,.18);}
:root[data-theme="dark"] .st-err{background:rgba(176,64,42,.2);}
:root[data-theme="dark"] .st-none{background:var(--line2);}
.reg-pill { display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line);
  padding:4px 10px; border-radius:16px; font-size:11.5px; color:var(--ink2); }
.reg-dot { width:7px; height:7px; border-radius:50%; }

/* ---------- table ---------- */
.table-wrap { background:var(--panel); border-radius:22px; padding:8px; flex:1; overflow:auto; }
table.grw { width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; }
table.grw th { padding:12px; font-weight:500; color:var(--muted); text-align:left; }
table.grw td { padding:13px 12px; border-top:1px solid var(--line); vertical-align:top; }
table.grw tr.sel td { background:var(--tint); }
.mono { font-family:monospace; font-size:11.5px; color:var(--ink2); }
.ns-stack { display:flex; flex-direction:column; gap:3px; }
.sub-under { font-size:10.5px; color:var(--muted); margin-top:3px; }
.chk { cursor:pointer; width:15px; height:15px; accent-color:#141210; }

/* ---------- bulk bar ---------- */
.bulk { background:#141210; border-radius:16px; padding:12px 20px; display:flex; align-items:center; gap:16px; color:#fff; }
:root[data-theme="dark"] .bulk { background:#242c38; }
.bulk .sep { width:1px; height:20px; background:var(--ink2); }
.bulk-btn { background:#2a2622; color:#fff; border:none; padding:8px 14px; border-radius:9px; font-size:12.5px; cursor:pointer; }
.bulk-btn.accent { background:var(--accent); }

/* ---------- pager ---------- */
.pager { display:flex; gap:6px; align-items:center; }
.pg { min-width:34px; height:34px; padding:0 9px; border-radius:9px; font-size:12.5px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--ink); }
.pg.active { border-color:#141210; background:#141210; color:#fff; }
:root[data-theme="dark"] .pg.active { background:#2a2f38; border-color:#2a2f38; }
.pg.dots { border:none; background:transparent; color:var(--muted); cursor:default; }

/* ---------- empty state ---------- */
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:56px 20px; text-align:center; }
.empty .ico { width:52px; height:52px; border-radius:14px; background:var(--line2); display:flex;
  align-items:center; justify-content:center; color:var(--muted); margin-bottom:14px; }
.empty .t { font-weight:600; font-size:16px; margin-bottom:5px; }
.empty .d { font-size:13px; color:var(--muted); max-width:320px; }

/* ---------- toast + tooltip ---------- */
.toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:#141210; color:#fff;
  padding:13px 22px; border-radius:30px; font-size:13px; z-index:60; box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:flex; align-items:center; gap:10px; animation:grw-fade .3s ease; }
.toast .dot { width:8px; height:8px; border-radius:50%; background:#5ea87a; }
.toast.error .dot { background:#e8654a; } .toast.warning .dot { background:#e0a52e; }
#tip { position:fixed; background:#141210; color:#fff; padding:7px 11px; border-radius:8px; font-size:11.5px;
  max-width:240px; z-index:80; pointer-events:none; line-height:1.4; box-shadow:0 6px 20px rgba(0,0,0,.25); display:none; }

/* ---------- login ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { background:var(--panel); border-radius:24px; padding:36px 34px; width:380px; max-width:100%; }
.login-card .logo-mark { margin-bottom:18px; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label { font-size:12.5px; color:var(--ink2); }
.field input { padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-size:14px; outline:none; background:var(--card); color:var(--ink); }
.form-err { background:#fbe8e3; color:#b0402a; padding:9px 13px; border-radius:10px; font-size:12.5px; margin-bottom:14px; }

@media (max-width:1040px) {
  .grid-2, .grid-13, .grid-250 { grid-template-columns:minmax(0,1fr) !important; }
  .sidebar { display:none; }
}

/* ================= Phase 5 components ================= */
.grid-13 { display:grid; grid-template-columns:minmax(320px,1.3fr) minmax(0,1fr);
  gap:14px; flex:1; }
.grid-2  { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.grid-250{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:14px; flex:1; }

/* segmented tabs */
.seg { display:flex; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:4px; }
.seg a, .seg button { border:none; cursor:pointer; padding:9px 18px; border-radius:9px; font-size:12.5px;
  background:transparent; color:var(--ink2); text-decoration:none; }
.seg .on { background:#141210; color:#fff; }
:root[data-theme="dark"] .seg .on { background:#2a2f38; }

/* forms */
.f-label { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink2); margin-bottom:7px; }
.f-in { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-size:14px;
  outline:none; background:var(--card); color:var(--ink); }
.f-in:focus { border-color:var(--muted); }
.f-in.mono { font-family:monospace; font-size:13px; }
.f-row { margin-bottom:20px; }
.f-check { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink2); cursor:pointer; }
.f-check input { width:16px; height:16px; accent-color:#141210; }
.hint { font-size:11.5px; color:var(--muted); }
.warn-box { background:#fbe8e3; color:#b0402a; padding:9px 13px; border-radius:10px; font-size:12px; line-height:1.45; }
:root[data-theme="dark"] .warn-box { background:rgba(176,64,42,.2); }
.divider { border-top:1px solid var(--line); padding-top:16px; margin-top:4px; }

/* feature (dark) panel */
.feature { background:var(--feature); color:var(--feature-ink); border-radius:22px; padding:26px 28px; }
.feature h3 { font-weight:600; font-size:17px; margin:0 0 18px; }
.step { display:flex; gap:13px; margin-bottom:16px; }
.step .n { width:26px; height:26px; flex-shrink:0; border-radius:8px; background:#2a2622; color:#c9c3ba;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.step .t { font-size:13px; font-weight:600; }
.step .d { font-size:11.5px; color:#8a847b; margin-top:2px; line-height:1.4; }

/* dns record chips */
.rec { display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line);
  border-radius:9px; padding:8px 11px; min-width:0; }
.rec .ty { flex-shrink:0; width:46px; font-family:monospace; font-size:11px; font-weight:700; color:var(--ink2); }
.rec .nm { font-family:monospace; font-size:11.5px; color:var(--ink); flex:0 1 auto;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rec .vl { font-family:monospace; font-size:11px; color:var(--muted); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pxy { flex-shrink:0; font-size:10px; font-weight:600; padding:2px 8px; border-radius:11px;
  background:var(--line2); color:var(--muted); border:none; }
.pxy.on { background:rgba(224,165,46,.16); color:#b07d1e; }

/* summary rows */
.sum { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; }
.sum .k { color:var(--muted); }
.sum .v { font-weight:600; }

/* progress */
.bar { height:8px; background:var(--line2); border-radius:6px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--accent); border-radius:6px; transition:width .4s ease; }
.bar.thin { height:6px; }

/* queue rows */
.qrow { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
  border-radius:11px; padding:10px 13px; }

/* stat tiles */
.tiles { display:flex; gap:12px; flex-wrap:wrap; }
.tile { background:var(--panel); border-radius:16px; padding:16px 20px; flex:1; }
.tile .k { font-size:11.5px; color:var(--muted); }
.tile .v { font-size:24px; font-weight:600; margin-top:3px; }

/* terminal (raw log) */
.term { background:#12141a; border-radius:22px; padding:8px; flex:1; display:flex; flex-direction:column; overflow:hidden; }
.term-bar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; }
.term-dots span { width:11px; height:11px; border-radius:50%; display:inline-block; margin-right:7px; }
.term-body { flex:1; overflow:auto; padding:6px 16px 16px; font-family:monospace; font-size:12px; line-height:1.7; }
.term-line { display:flex; gap:12px; }
.term-line .ts { color:#4a5160; flex-shrink:0; }
.term-line .tx { white-space:pre-wrap; word-break:break-word; }
.lv-ok{color:#5ea87a;} .lv-accent{color:#e08a5a;} .lv-error{color:#e0705a;} .lv-muted{color:#8b93a1;}

/* activity events */
.ev { display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:14px 18px; }
.ev .ico { width:36px; height:36px; flex-shrink:0; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:15px; font-weight:700; }
.ev .t { font-size:13.5px; font-weight:600; }
.ev .m { font-size:12px; color:var(--muted); margin-top:2px; }

/* drawer */
.scrim { position:fixed; inset:0; background:rgba(15,17,21,.42); z-index:58; animation:grw-fade .2s ease; }
.drawer { position:fixed; top:0; right:0; height:100vh; width:460px; max-width:100vw; background:var(--panel);
  z-index:59; box-shadow:-24px 0 60px rgba(0,0,0,.22); display:flex; flex-direction:column; animation:grw-fade .25s ease; }
.drawer-head { padding:24px 26px; border-bottom:1px solid var(--line); display:flex;
  align-items:flex-start; justify-content:space-between; gap:12px; }
.drawer-body { padding:22px 26px; overflow:auto; flex:1; }
.x-btn { background:var(--card); border:1px solid var(--line); width:34px; height:34px; border-radius:10px;
  cursor:pointer; font-size:15px; color:var(--ink); flex-shrink:0; }

/* docs */
.doc-nav { background:var(--panel); border-radius:22px; padding:16px; display:flex; flex-direction:column; gap:4px; }
.doc-nav a { text-align:left; padding:11px 14px; border-radius:12px; font-size:13px; color:var(--ink2); text-decoration:none; }
.doc-nav a.on { background:#141210; color:#fff; }
:root[data-theme="dark"] .doc-nav a.on { background:#2a2f38; }
.doc-body { background:var(--panel); border-radius:22px; padding:34px 40px; overflow:auto; }
.doc-body h2 { font-weight:700; font-size:24px; letter-spacing:-0.01em; margin:0 0 6px; }
.doc-body .lede { color:var(--muted); font-size:13px; margin-bottom:24px; }
.doc-body h3 { font-weight:600; font-size:16px; margin:22px 0 4px; }
.doc-body p { font-size:14px; line-height:1.65; color:var(--ink2); margin:8px 0; }
.note { background:var(--tint); border-left:3px solid var(--accent); padding:12px 16px; border-radius:0 10px 10px 0;
  font-size:13px; line-height:1.55; color:var(--ink2); margin:12px 0; }
pre.code { background:#141210; color:#d8d2c8; padding:14px 16px; border-radius:12px; font-family:monospace;
  font-size:12.5px; line-height:1.6; margin:12px 0; white-space:pre-wrap; }

/* ns editor */
.ns-row { display:flex; gap:9px; align-items:center; margin-bottom:9px; }
.ns-row input { flex:1; padding:11px 13px; border:1px solid var(--line); border-radius:10px; font-size:13px;
  font-family:monospace; outline:none; background:var(--card); color:var(--ink); }
.icon-btn { background:var(--card); border:1px solid var(--line); width:38px; height:38px; border-radius:10px;
  cursor:pointer; color:#b04a2a; }
.dashed { background:var(--card); border:1px dashed #cfc8bd; padding:10px 14px; border-radius:10px;
  font-size:12.5px; cursor:pointer; color:var(--ink2); width:100%; }
.hist { display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.hist .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }

/* registrar cards */
.rcard { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; }
.rcard .nm { font-weight:600; font-size:15px; }
.kv { display:flex; gap:22px; margin-top:14px; }
.kv .k { font-size:11px; color:var(--muted); }
.kv .v { font-size:13px; font-weight:600; margin-top:2px; }
.chip { display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:7px 8px 7px 14px; font-size:12.5px; font-family:monospace; color:var(--ink2); }
.chip button { width:22px; height:22px; border-radius:50%; border:none; background:var(--line2);
  color:#b0402a; cursor:pointer; font-size:12px; }

/* ================= Home hero ================= */
.hero { flex:1; position:relative; overflow:hidden; border-radius:26px; padding:30px 40px 40px;
  display:flex; flex-direction:column; background-size:cover; background-position:center; }
.hero-badge { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.5); padding:9px 18px;
  border-radius:30px; font-size:12.5px; color:#241f1a; font-weight:500; }
.hero-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
.hero-mid { position:relative; z-index:1; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:20px 0; }
.hero-title { font-weight:700; font-size:118px; line-height:.9; letter-spacing:-0.03em;
  color:#fbf8f4; text-shadow:0 2px 24px rgba(20,12,6,.35); text-align:center; }
.hero-sub { margin-top:20px; color:#f3ede6; font-size:16px; max-width:540px; text-align:center;
  text-wrap:balance; text-shadow:0 1px 12px rgba(20,12,6,.35); }
.hero-cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px;
  width:100%; max-width:860px; }
.hero-card { position:relative; overflow:hidden; text-align:left; text-decoration:none;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.42); backdrop-filter:blur(14px);
  border-radius:22px; padding:26px 26px 30px; min-height:260px; cursor:pointer; display:flex;
  flex-direction:column; color:#17140f; transition:background .35s ease, transform .35s ease;
  box-shadow:0 12px 40px rgba(30,20,10,.12); }
.hero-card:hover { background:rgba(255,255,255,.78); color:#17140f; }
.hero-card .tag { align-self:flex-start; background:rgba(255,255,255,.5); backdrop-filter:blur(4px);
  padding:6px 13px; border-radius:20px; font-size:11.5px; letter-spacing:.04em; }
.hero-card .glyph { font-size:34px; font-weight:600; margin-bottom:22px; }
.hero-card .h { font-weight:600; font-size:26px; line-height:1.05; text-transform:uppercase; letter-spacing:-0.01em; }
.hero-card .p { margin-top:10px; font-size:13px; opacity:.78; }
.hero-links { position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap; margin-top:6px; }
.hero-links a, .hero-links button { color:#f3ede6; font-size:12.5px; text-decoration:none;
  background:transparent; border:none; cursor:pointer; padding:6px 2px; opacity:.85;
  text-shadow:0 1px 10px rgba(20,12,6,.4); font-family:inherit; }
.hero-links a:hover, .hero-links button:hover { opacity:1; color:#fff; text-decoration:underline; }
.hero-links .sep { color:rgba(255,255,255,.45); }
@media (max-width:900px) {
  .hero-title { font-size:64px; }
  .hero-cards { grid-template-columns:1fr; }
  .hero { padding:22px 20px 28px; }
}

/* ================= Modal ================= */
.modal-scrim { position:fixed; inset:0; background:rgba(15,17,21,.45); z-index:70;
  display:flex; align-items:center; justify-content:center; padding:24px; animation:grw-fade .2s ease; }
.modal { background:var(--panel); border-radius:22px; width:560px; max-width:100%; max-height:88vh;
  display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.3); animation:grw-fade .25s ease; }
.modal-head { padding:22px 26px 16px; border-bottom:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.modal-title { font-weight:700; font-size:20px; letter-spacing:-0.01em; }
.modal-body { padding:20px 26px; overflow:auto; flex:1; }
.modal-foot { padding:16px 26px 22px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.pill-list { display:flex; flex-wrap:wrap; gap:6px; max-height:120px; overflow:auto; }
.pill-list span { background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:4px 11px; font-size:11.5px; font-family:monospace; color:var(--ink2); }
.gate-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; border-top:1px solid var(--line2); font-size:12.5px; }

/* ================= Language switcher ================= */
.lang-switch { display:flex; gap:4px; background:#1e1b18; border-radius:11px; padding:4px; }
.lang-btn { flex:1; border:none; cursor:pointer; background:transparent; color:#8a847b;
  font-size:11.5px; font-weight:600; letter-spacing:.05em; padding:7px 0; border-radius:8px;
  font-family:inherit; transition:background .18s ease, color .18s ease; }
.lang-btn:hover { color:#c9c3ba; }
.lang-btn.on { background:#2a2622; color:#fff; }
/* on light surfaces (hero, login) */
.lang-switch.plain { background:transparent; padding:0; gap:8px; }
.lang-switch.plain .lang-btn { color:#f3ede6; opacity:.75; padding:6px 8px;
  text-shadow:0 1px 10px rgba(20,12,6,.4); }
.lang-switch.plain .lang-btn.on { background:rgba(255,255,255,.22); opacity:1; }
.lang-switch.dark-ink .lang-btn { color:var(--muted); text-shadow:none; }
.lang-switch.dark-ink .lang-btn.on { background:var(--line2); color:var(--ink); }

.hero-links .lang-switch { background:transparent; padding:0; gap:8px; }
.hero-links .lang-switch .lang-btn { color:#f3ede6; opacity:.8; padding:6px 6px;
  text-shadow:0 1px 10px rgba(20,12,6,.4); }
.hero-links .lang-switch .lang-btn.on { background:rgba(255,255,255,.22); opacity:1; }
.lang-switch-inline .lang-switch { background:var(--card); border:1px solid var(--line); }
.lang-switch-inline .lang-btn { color:var(--muted); }
.lang-switch-inline .lang-btn.on { background:#141210; color:#fff; }

/* ================= Demo-data warning ================= */
.demo-bar { display:flex; align-items:center; gap:14px; background:#fbf1de; border:1px solid #e8d5a8;
  color:#7a5a12; border-radius:16px; padding:13px 20px; font-size:13px; }
:root[data-theme="dark"] .demo-bar { background:rgba(176,125,30,.16); border-color:rgba(176,125,30,.35); color:#e0b45a; }
.demo-bar code { background:rgba(0,0,0,.07); padding:2px 7px; border-radius:6px; font-size:12px; }
.demo-tag { display:inline-block; margin-left:7px; background:#e8d5a8; color:#7a5a12; font-size:9.5px;
  font-weight:700; letter-spacing:.06em; padding:1px 6px; border-radius:9px; vertical-align:middle; }
:root[data-theme="dark"] .demo-tag { background:rgba(176,125,30,.3); color:#e0b45a; }

.ns-src { font-size:10px; color:var(--muted); margin-top:3px; font-family:'Manrope',sans-serif; }
.ns-src.drift { color:#b07d1e; cursor:help; }
.ok-box { background:#e7f2ec; color:#2f7d51; padding:11px 14px; border-radius:10px;
  font-size:12.5px; line-height:1.5; }
:root[data-theme="dark"] .ok-box { background:rgba(47,125,81,.18); color:#7cc79a; }
.note code, .warn-box code, .ok-box code { background:rgba(0,0,0,.07); padding:1px 6px; border-radius:5px; font-size:11.5px; }
[x-cloak] { display:none !important; }

/* ================= Connection check ================= */
.check-panel { background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; margin-top:14px; }
.check-panel.ok  { border-left:3px solid #2f7d51; }
.check-panel.bad { border-left:3px solid #b0402a; }
.check-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:10px; }
.check-verdict { font-weight:700; font-size:14px; }
.check-panel.ok .check-verdict  { color:#2f7d51; }
.check-panel.bad .check-verdict { color:#b0402a; }
.check-row { display:flex; gap:10px; padding:7px 0; border-top:1px solid var(--line2); }
.check-badge { flex-shrink:0; width:18px; height:18px; border-radius:50%; font-size:11px;
  font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.check-badge.pass { background:#e7f2ec; color:#2f7d51; }
.check-badge.warn { background:#fbf1de; color:#b07d1e; }
.check-badge.fail { background:#fbe8e3; color:#b0402a; }
:root[data-theme="dark"] .check-badge.pass { background:rgba(47,125,81,.2); }
:root[data-theme="dark"] .check-badge.warn { background:rgba(176,125,30,.2); }
:root[data-theme="dark"] .check-badge.fail { background:rgba(176,64,42,.22); }
.check-label { font-size:12.5px; font-weight:600; color:var(--ink); }
.check-detail { font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.45;
  word-break:break-word; }
.htmx-request .btn-spin { opacity:.55; pointer-events:none; }

.sync-line { margin-top:10px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.sync-msg { flex-basis:100%; font-size:11.5px; line-height:1.5; color:var(--muted);
  white-space:pre-wrap; word-break:break-word; margin-top:4px;
  background:var(--line2); padding:8px 10px; border-radius:8px; }
.sync-line.st-err .sync-msg { background:#fbe8e3; color:#8f3623; }
:root[data-theme="dark"] .sync-line.st-err .sync-msg { background:rgba(176,64,42,.18); color:#e0a08e; }

/* ================= Sync progress ================= */
.run-panel { background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:14px 18px; margin-bottom:12px; }
.run-panel.running { border-left:3px solid var(--accent); }
.run-panel.done    { border-left:3px solid #2f7d51; }
.run-panel.failed  { border-left:3px solid #b0402a; }
.run-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.run-title { font-weight:700; font-size:14px; }
.run-panel.running .run-title { color:var(--accent); }
.run-panel.failed  .run-title { color:#b0402a; }
.run-stage { font-size:12.5px; color:var(--ink2); margin-top:5px; }
.run-stage .mono { font-family:monospace; font-size:11.5px; color:var(--muted); }
.run-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.run-msg { margin-top:9px; font-size:11.5px; color:var(--muted); background:var(--line2);
  padding:8px 10px; border-radius:8px; white-space:pre-wrap; }
@keyframes run-pulse { 0%,100% { opacity:1 } 50% { opacity:.45 } }
.run-panel.running .run-title { animation:run-pulse 1.6s ease-in-out infinite; }

/* a state we inferred rather than one Cloudflare reported */
.badge-status.soft { font-style:italic; opacity:.85; }

/* ================= Dry-run banner ================= */
.dry-banner { background:#fbf1de; border:1px solid #e8d5a8; color:#7a5a12;
  border-radius:12px; padding:9px 16px; font-size:12.5px; margin-bottom:12px;
  cursor:help; display:flex; align-items:center; gap:8px; }
.dry-banner b { letter-spacing:.06em; font-size:11px; background:#e8d5a8; color:#5d4409;
  padding:2px 8px; border-radius:20px; }
.dry-banner code { background:rgba(0,0,0,.06); padding:1px 6px; border-radius:5px; font-size:11.5px; }
:root[data-theme="dark"] .dry-banner { background:rgba(176,125,30,.16);
  border-color:rgba(176,125,30,.35); color:#e0b45a; }
:root[data-theme="dark"] .dry-banner b { background:rgba(176,125,30,.35); color:#f0d9a5; }
.sim-tag { display:inline-block; margin-left:7px; background:#e8d5a8; color:#7a5a12;
  font-size:9.5px; font-weight:700; letter-spacing:.06em; padding:1px 6px; border-radius:9px;
  vertical-align:middle; cursor:help; }
:root[data-theme="dark"] .sim-tag { background:rgba(176,125,30,.3); color:#e0b45a; }

.btn-icon { padding:5px 9px; font-size:14px; line-height:1; }
.check-badge.skip { background:var(--line2); color:var(--muted); }
:root[data-theme="dark"] .check-badge.skip { background:rgba(255,255,255,.08); }

/* ================= HTMX activity indicators ================= */
.htmx-indicator { display:none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display:inline-flex; }
.working { align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.working .spin { width:13px; height:13px; border:2px solid var(--line2);
  border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ================= WAF rules ================= */
.rules-list { display:flex; flex-direction:column; gap:7px; }
.rule-row { display:flex; gap:11px; align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-radius:11px; padding:10px 13px; }
.rule-action { flex-shrink:0; font-size:10px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 9px; border-radius:20px; margin-top:1px; }
.rule-action.skip  { background:#e7f2ec; color:#2f7d51; }
.rule-action.block { background:#fbe8e3; color:#b0402a; }
.rule-action.challenge, .rule-action.managed_challenge { background:#fbf1de; color:#b07d1e; }
.rule-desc { font-size:12.5px; font-weight:600; color:var(--ink); }
.rule-expr { font-size:11px; color:var(--muted); margin-top:3px; word-break:break-all; }

/* sidebar sync state */
.sync-card.ok      .sync-dot { background:#3d9163; }
.sync-card.running .sync-dot { background:#d1662e; }
.sync-card.stale   .sync-dot { background:#b0402a; }
.sync-card.never   .sync-dot { background:#b07d1e; }
.sync-card.stale   .v { color:#e0a08e; }
.sync-card.never   .v { color:#e0b45a; }
.sync-dot.pulse { animation:run-pulse 1.4s ease-in-out infinite; }

/* ================= Hero background follows the theme live ================= */
.hero { background-image: var(--hero-light); }
:root[data-theme="dark"] .hero { background-image: var(--hero-dark); }

/* moon while light (tap for dark), sun while dark (tap for light) */
.theme-ico { display:none; line-height:0; }
.theme-ico.moon { display:inline-flex; }
:root[data-theme="dark"] .theme-ico.moon { display:none; }
:root[data-theme="dark"] .theme-ico.sun  { display:inline-flex; }

.run-panel.cancelling { border-left:3px solid #b07d1e; }
.run-panel.cancelled  { border-left:3px solid var(--muted); }
.run-panel.cancelling .run-title { color:#b07d1e; }
.run-panel.cancelled  .run-title { color:var(--muted); }

/* verdict colours + keep multi-line provider hints readable */
.check-panel.warn { border-left:3px solid #b07d1e; }
.check-panel.fail { border-left:3px solid #b0402a; }
.check-panel.warn .check-verdict { color:#b07d1e; }
.check-panel.fail .check-verdict { color:#b0402a; }
.check-detail { white-space:pre-wrap; }

/* ================= server IP rows ================= */
.ip-row { display:flex; align-items:center; gap:12px; padding:9px 13px; background:var(--card);
  border:1px solid var(--line); border-radius:11px; margin-bottom:7px; font-size:12.5px; }
.ip-del { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px;
  padding:0 2px; }
.ip-del:hover { color:#b0402a; }

.rec .vl.missing { color:#b0402a; font-style:italic; }

/* ================= mail template state ================= */
.mail-state { display:flex; flex-wrap:wrap; gap:8px 18px; padding:11px 14px; margin-bottom:14px;
  border-radius:11px; font-size:12.5px; border:1px solid var(--line); background:var(--card); }
.mail-state.ready { border-left:3px solid #2f7d51; }
.mail-state.gaps  { border-left:3px solid #b0402a; }
.ms-item { display:flex; align-items:center; gap:7px; }
.ms-item .mono { font-size:11.5px; color:var(--muted); }
.ms-mark { width:16px; height:16px; border-radius:50%; font-size:10px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fbe8e3; color:#b0402a; }
.ms-mark.on { background:#e7f2ec; color:#2f7d51; }
:root[data-theme="dark"] .ms-mark    { background:rgba(176,64,42,.2); }
:root[data-theme="dark"] .ms-mark.on { background:rgba(47,125,81,.2); }

/* ================= write gating ================= */
.write-state { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:14px;
  padding:9px 12px; border-radius:10px; font-size:12px; background:var(--card);
  border:1px solid var(--line); }
.write-state.st-ok   { border-left:3px solid #2f7d51; }
.write-state.st-warn { border-left:3px solid #b07d1e; }
.write-state.st-none { border-left:3px solid var(--muted); }

.ev-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:0 2px 12px; }

.doc-guide p { font-size:13px; line-height:1.75; margin:0 0 12px; color:var(--ink2); }
.doc-guide p b { color:var(--ink); }

/* ================= destructive action ================= */
.danger-zone { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:26px;
  padding:14px 16px; border:1px solid rgba(176,64,42,.35); border-radius:12px;
  background:rgba(176,64,42,.05); }
.btn-danger { border-color:rgba(176,64,42,.45); color:#b0402a; }
.btn-danger:hover { background:rgba(176,64,42,.1); border-color:#b0402a; }