/*
 * design-d.css — Design-D tokens and components for the firewall dashboard.
 *
 * All selectors are scoped under .design-d (placed on <body> by base_d).
 * Values lifted verbatim from /tmp/fw-mockups/variant-d.html — do not invent.
 * Layers on top of Bootstrap 5 + Remix Icon already loaded by the app shell.
 * Does NOT import Bootstrap or any icon font.
 */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
.design-d {
  --bg:      #f3f3f9;
  --panel:   #ffffff;
  --panel-2: #f6f6fb;
  --line:    #e5e7ef;
  --ink:     #212529;
  --muted:   #6c757d;
  --faint:   #95a0b0;
  --red:     #e5384a;
  --orange:  #e07f19;
  --green:   #0a9d63;
  --blue:    #2b7de9;
  --grey:    #7b8aa0;
  --purple:  #7c3aed;
  --cyan:    #0891b2;
}

/* ── Page shell ─────────────────────────────────────────────────────────────── */
.design-d {
  background: var(--bg);
  color: var(--ink);
  /* Match the mockups' 16px base: the app shell (velzon app.min.css) sets body to ~13px,
     which shrank every inherited label/cell/icon vs the mockup. Restore the browser-default
     base so rem components (root-relative) stay put while inherited text + icons scale up. */
  font-size: 1rem;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.design-d .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ── Stat cards ─────────────────────────────────────────────────────────────── */
.design-d .stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .95rem 1.05rem;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.design-d .stat-card .label {
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.design-d .stat-card .value {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  margin-top: .25rem;
}

.design-d .stat-card .value small {
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
}

/* .spark = the colored top-right icon tile (same look as .stat-icon on the
   dashboard); the icon color comes from the card's accent via inline style. */
.design-d .stat-card:has(.spark) { padding-right: calc(1.05rem + 38px + .5rem); }
.design-d .stat-card .spark {
  position: absolute;
  top: .95rem;
  right: 1.05rem;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.design-d .stat-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
}

/* Stacked action bar inside stat cards */
.design-d .stackbar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  margin-top: .55rem;
  background: #eceef4;
}

.design-d .stackbar span {
  display: block;
  height: 100%;
}

/* Action-breakdown card: number tint + stackbar segment fill, per action. */
.design-d .fw-act-accept { color: var(--green); }
.design-d .fw-act-drop { color: var(--red); }
.design-d .fw-act-reject { color: var(--orange); }
.design-d .fw-act-masquerade { color: var(--blue); }
.design-d .fw-bar-accept { background: var(--green); }
.design-d .fw-bar-drop { background: var(--red); }
.design-d .fw-bar-reject { background: var(--orange); }
.design-d .fw-bar-masquerade { background: var(--blue); }

.design-d .legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin-top: .5rem;
  font-size: .72rem;
  color: var(--muted);
}

.design-d .legend i {
  font-size: .7rem;
  margin-right: .25rem;
  vertical-align: middle;
}

/* ── Tabs ───────────────────────────────────────────────────────────────────── */
.design-d .fw-tabs {
  display: inline-flex;
  gap: .2rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: .3rem;
  /* On a phone the bar is wider than the screen: scroll it instead of cutting off tabs. */
  max-width: 100%;
  overflow-x: auto;
}

.design-d .fw-tab {
  flex-shrink: 0;
  white-space: nowrap;
  background: transparent;
  border: none;
  color: var(--muted);
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem .95rem;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}

.design-d .fw-tab .cnt {
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 10px;
  font-size: .68rem;
  padding: .05rem .4rem;
  font-weight: 700;
}

.design-d .fw-tab:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, .035);
}

.design-d .fw-tab.active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

.design-d .fw-tab.active::after {
  display: none;
}

.design-d .fw-tab.active .cnt {
  background: rgba(74, 168, 255, .18);
  color: #1c5bb8;
}

/* ── Search bar ─────────────────────────────────────────────────────────────── */
.design-d .search-wrap {
  position: relative;
  margin: 1rem 0 .85rem;
}

.design-d .search-wrap i {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
}

.design-d .search-wrap input {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  padding-left: 2.3rem;
  border-radius: 10px;
  height: 42px;
}

.design-d .search-wrap input:focus {
  background: var(--panel);
  border-color: var(--blue);
  box-shadow: 0 0 0 .18rem rgba(74, 168, 255, .15);
  color: var(--ink);
}

/* Filter/select dropdown control (shared: bgp-session list, community catalog) */
.design-d .ctrl-select {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  height: 42px;
  padding: 0 .7rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.design-d .ctrl-select:focus {
  outline: none;
  border-color: var(--blue);
}

/* ── Dense table ────────────────────────────────────────────────────────────── */
.design-d .fw-table-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

/* No-router router-picker overview (shown when no router is selected) */
.design-d .fw-router-picker { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: .85rem 1rem; }
.design-d .fw-rpp-head { font-weight: 700; font-size: .9rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.design-d .fw-rpp-head span { font-weight: 500; font-size: .78rem; color: var(--muted); }
.design-d .fw-router-card { width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: .6rem .75rem; display: flex; flex-direction: column; gap: .3rem; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.design-d .fw-router-card:hover { border-color: var(--blue); box-shadow: 0 1px 4px rgba(43, 125, 233, .15); }
.design-d .fw-router-card .rc-name { font-weight: 700; font-size: .84rem; display: flex; align-items: center; gap: .35rem; }
.design-d .fw-router-card .rc-count { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.design-d .fw-router-card .rc-count small { font-size: .68rem; font-weight: 600; color: var(--faint); margin-left: .3rem; text-transform: uppercase; letter-spacing: .04em; }
.design-d .fw-router-card.empty { opacity: .5; }

.design-d table.fw {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

.design-d table.fw thead th {
  background: var(--panel-2);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .68rem;
  font-weight: 700;
  padding: .6rem .7rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
/* No global sticky header: a hardcoded `top` (was 34px, tuned for the firewall
   control bar) overlaps the first row on every other .fw list. If a long table
   wants a sticky header, opt in per page with top = the fixed topbar height. */

.design-d table.fw thead th.num { text-align: right; }

.design-d table.fw tbody td {
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.design-d table.fw tbody tr.rule {
  transition: background .12s, box-shadow .12s;
  cursor: pointer;
}

.design-d table.fw tbody tr.rule:hover {
  background: #eef5ff;
  box-shadow: inset 0 0 0 1px rgba(43, 125, 233, .2), inset 3px 0 0 var(--blue);
}

.design-d table.fw tbody tr.rule.selected {
  background: #eafaf3;
  box-shadow: inset 3px 0 0 var(--green), inset 0 0 0 1px rgba(10, 157, 99, .28);
}

.design-d table.fw tbody tr.disabled { opacity: .42; }

.design-d table.fw tbody tr.disabled .a-badge { filter: grayscale(.4); }

.design-d .idx {
  color: var(--faint);
  font-family: ui-monospace, monospace;
  font-size: .75rem;
  width: 2.4rem;
}

.design-d .drag {
  color: var(--faint);
  cursor: grab;
  opacity: .55;
}

.design-d tr.rule:hover .drag { opacity: 1; color: var(--muted); }

/* Block header in the combined rules table: rules only move inside their block. */
.design-d tr.fw-block-head td {
  background: var(--soft, #f6f8fb);
  border-top: 2px solid var(--line, #e5e9f0);
  font-size: .72rem;
  padding: .35rem .75rem;
}
.design-d tr.fw-block-head .bh-name { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.design-d tr.fw-block-head .bh-hint { margin-left: .6rem; color: var(--faint); }
.design-d .row-actions .row-edit:disabled { opacity: .3; cursor: not-allowed; }

/* ── Action badges ──────────────────────────────────────────────────────────── */
.design-d .a-badge {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-weight: 700;
  font-size: .72rem;
  padding: .2rem .5rem;
  border-radius: 7px;
  line-height: 1;
  white-space: nowrap;
}

.design-d .a-drop       { background: rgba(255, 91, 106, .14); color: var(--red);    box-shadow: inset 0 0 0 1px rgba(255, 91, 106, .35); }
.design-d .a-reject     { background: rgba(255, 157, 61, .14); color: var(--orange); box-shadow: inset 0 0 0 1px rgba(255, 157, 61, .35); }
.design-d .a-accept     { background: rgba(61, 219, 143, .14); color: var(--green);  box-shadow: inset 0 0 0 1px rgba(61, 219, 143, .35); }
.design-d .a-masquerade { background: rgba(74, 168, 255, .14); color: var(--blue);   box-shadow: inset 0 0 0 1px rgba(74, 168, 255, .35); }
.design-d .a-passthrough,
.design-d .a-notrack,
.design-d .a-jump,
.design-d .a-log,
.design-d .a-dst-nat    { background: rgba(123, 138, 160, .13); color: var(--grey);  box-shadow: inset 0 0 0 1px rgba(123, 138, 160, .3); }

/* ── Scope badges ───────────────────────────────────────────────────────────── */
.design-d .scope-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 700;
  font-size: .66rem;
  padding: .18rem .45rem;
  border-radius: 7px;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.design-d .scope-global { background: rgba(129, 140, 248, .16); color: #4f46e5; box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .4); }
.design-d .scope-local  { background: rgba(45, 212, 191, .14);  color: #0d9488; box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .38); }

.design-d table.fw tbody tr.rule.sc-global td:first-child { box-shadow: inset 3px 0 0 #818cf8; }
.design-d table.fw tbody tr.rule.sc-local  td:first-child { box-shadow: inset 3px 0 0 #2dd4bf; }

/* ── Scope segmented filter ─────────────────────────────────────────────────── */
.design-d .scope-seg {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  height: 42px;
}

.design-d .scope-seg .lbl {
  display: flex;
  align-items: center;
  color: var(--faint);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 .7rem;
  border-right: 1px solid var(--line);
}

.design-d .scope-seg button {
  background: transparent;
  border: none;
  color: var(--muted);
  font-weight: 600;
  font-size: .8rem;
  padding: 0 .85rem;
  cursor: pointer;
}

.design-d .scope-seg button:hover { color: var(--ink); }
.design-d .scope-seg button.active { background: var(--panel-2); color: var(--ink); }
.design-d .scope-seg button.active[data-scope="global"] { color: #4f46e5; box-shadow: inset 0 -2px 0 #818cf8; }
.design-d .scope-seg button.active[data-scope="local"]  { color: #0d9488; box-shadow: inset 0 -2px 0 #2dd4bf; }

.design-d .scope-split { font-size: .72rem; color: var(--muted); margin-top: .4rem; display: flex; gap: .7rem; }
.design-d .scope-split .g { color: #4f46e5; font-weight: 700; }
.design-d .scope-split .l { color: #0d9488; font-weight: 700; }

/* ── Chip ───────────────────────────────────────────────────────────────────── */
.design-d .chip {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: #475569;
  border-radius: 6px;
  padding: .1rem .4rem;
  font-size: .72rem;
  font-family: ui-monospace, monospace;
}

.design-d .chip i { color: var(--blue); font-size: .72rem; }

.design-d .chip.clist { cursor: pointer; }
.design-d .chip.clist:hover { border-color: var(--blue); color: var(--blue); }
.design-d .chip.clist:hover i { color: var(--blue); }

/* ── Misc table helpers ─────────────────────────────────────────────────────── */
.design-d .chain-tag { font-family: ui-monospace, monospace; color: #334155; font-size: .78rem; }
.design-d .val       { font-family: ui-monospace, monospace; color: #334155; }
.design-d .val.muted { color: var(--faint); }
.design-d .proto     { font-family: ui-monospace, monospace; color: #5b6b7f; text-transform: uppercase; font-size: .72rem; }
.design-d .port      { font-family: ui-monospace, monospace; color: #b5730a; font-size: .76rem; }

.design-d .iface     { display: inline-flex; align-items: center; gap: .25rem; font-family: ui-monospace, monospace; font-size: .72rem; color: #4a5a6d; }
.design-d .iface i   { font-size: .72rem; color: var(--faint); }

.design-d td.num { text-align: right; font-family: ui-monospace, monospace; white-space: nowrap; }
.design-d .bytes { color: #212529; font-weight: 600; font-size: .82rem; }
.design-d .pkts  { color: var(--muted); font-size: .78rem; }
.design-d .zero  { color: var(--faint); }
.design-d .has-val { color: #212529; }

/* Row action buttons (Edit / Toggle / Move / Delete) — compact icon buttons. */
.design-d td.fw-act { white-space: nowrap; text-align: right; }

.design-d .fam  { font-size: .62rem; font-weight: 700; padding: .05rem .3rem; border-radius: 4px; margin-left: .35rem; vertical-align: middle; }
.design-d .fam4 { background: rgba(74, 168, 255, .15); color: #1c5bb8; }
.design-d .fam6 { background: rgba(189, 138, 255, .15); color: #7c3aed; }

.design-d .scope-g { color: var(--faint); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }

/* ── Live counter pulse ─────────────────────────────────────────────────────── */
.design-d .pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: .4rem;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(10, 157, 99, .55);
  animation: d-pulse 1.8s infinite;
}

.design-d .pulse.hot {
  background: var(--orange);
  animation: d-pulse-hot 1.2s infinite;
}

@keyframes d-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(10, 157, 99, .5); }
  70%  { box-shadow: 0 0 0 6px rgba(10, 157, 99, 0);  }
  100% { box-shadow: 0 0 0 0   rgba(10, 157, 99, 0);  }
}

@keyframes d-pulse-hot {
  0%   { box-shadow: 0 0 0 0   rgba(224, 127, 25, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(224, 127, 25, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(224, 127, 25, 0);   }
}

/* ── Special / context rows ─────────────────────────────────────────────────── */
.design-d tr.special td {
  background: linear-gradient(90deg, #f6f8fc, #fbfcfe);
  border-bottom: 1px solid var(--line);
  padding: .5rem .7rem;
}

.design-d tr.special .badge-ctx {
  background: rgba(123, 138, 160, .12);
  color: var(--grey);
  border: 1px solid rgba(123, 138, 160, .28);
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 6px;
}

.design-d tr.special .note { color: var(--muted); font-family: ui-monospace, monospace; font-size: .76rem; }
.design-d tr.special i.ctx-ico { color: var(--faint); }

/* ── Empty-state panel ──────────────────────────────────────────────────────── */
.design-d .tab-empty {
  color: var(--muted);
  text-align: center;
  padding: 2.4rem;
  font-size: .9rem;
}

.design-d .footnote {
  color: var(--faint);
  font-size: .72rem;
  margin-top: .7rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* ── Per-row edit affordance ────────────────────────────────────────────────── */
.design-d .row-edit {
  background: transparent;
  border: none;
  color: var(--faint);
  padding: .1rem .3rem;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
}

.design-d tr.rule:hover .row-edit { color: var(--blue); }
.design-d .row-edit:hover { background: rgba(74, 168, 255, .14); color: #1c5bb8; }
.design-d .row-actions { display: inline-flex; align-items: center; gap: .1rem; margin-left: .35rem; }

/* ── Modal / drawer chrome ──────────────────────────────────────────────────── */
.design-d #editModal .modal-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(30, 40, 60, .18);
}

.design-d #editModal .modal-header {
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.2rem;
}

.design-d #editModal .modal-body   { padding: 0 1.2rem 1.1rem; }
.design-d #editModal .modal-footer { border-top: 1px solid var(--line); padding: .85rem 1.2rem; }

/* Firewall deploy/mass-delete confirm modal — rendered into #deploy-result, no #editModal id */
.design-d .fw-modal-d .modal-content { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); box-shadow: 0 24px 70px rgba(30, 40, 60, .18); }
.design-d .fw-modal-d .modal-header  { border-bottom: 1px solid var(--line); padding: 1rem 1.2rem; }
.design-d .fw-modal-d .modal-footer  { border-top: 1px solid var(--line); padding: .85rem 1.2rem; }

.design-d #editModal .em-title {
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}

.design-d #editModal .em-sub {
  color: var(--muted);
  font-size: .76rem;
  font-family: ui-monospace, monospace;
  margin-top: .2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.design-d #editModal .em-headbtns .btn-close   { margin: .2rem 0 0 .4rem; padding: .35rem; flex-shrink: 0; }


/* Modal nav-tabs */
.design-d #editModal .nav-tabs { border-bottom: 1px solid var(--line); margin: .9rem 0 1rem; gap: .15rem; }
.design-d #editModal .nav-tabs .nav-link {
  color: var(--muted);
  border: none;
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem .9rem;
  border-radius: 8px 8px 0 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.design-d #editModal .nav-tabs .nav-link:hover  { color: var(--ink); background: rgba(74, 168, 255, .06); }
.design-d #editModal .nav-tabs .nav-link.active { color: var(--ink); background: transparent; }
.design-d #editModal .nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: -1px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--blue);
}

/* Modal form controls */
.design-d #editModal .form-label {
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  margin-bottom: .25rem;
}

.design-d #editModal .form-control,
.design-d #editModal .form-select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: .85rem;
  border-radius: 9px;
}

.design-d #editModal .form-control::placeholder { color: var(--faint); }

.design-d #editModal .form-control:focus,
.design-d #editModal .form-select:focus {
  background: var(--panel-2);
  border-color: var(--blue);
  box-shadow: 0 0 0 .18rem rgba(74, 168, 255, .15);
  color: var(--ink);
}

.design-d #editModal .input-group-text {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--faint);
  font-family: ui-monospace, monospace;
  font-size: .8rem;
}

.design-d #editModal .form-text       { color: var(--faint); font-size: .72rem; }
.design-d #editModal .form-check-input { background-color: var(--panel-2); border-color: var(--line); }
.design-d #editModal .form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.design-d #editModal .form-check-label { color: var(--ink); font-size: .85rem; }

.design-d #editModal .sec-head {
  color: var(--faint);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin: .4rem 0 .6rem;
  padding-bottom: .35rem;
  border-bottom: 1px dashed var(--line);
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Connection-state toggle chips */
.design-d .cs-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.design-d .cs-chip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 20px;
  padding: .28rem .7rem;
  font-size: .76rem;
  font-family: ui-monospace, monospace;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.design-d .cs-chip.on          { background: rgba(74, 168, 255, .16); border-color: rgba(74, 168, 255, .5); color: #1c5bb8; }
.design-d .cs-chip.on.invalid  { background: rgba(255, 91, 106, .16); border-color: rgba(255, 91, 106, .5); color: #c0293a; }

/* Scope segmented control in modal */
.design-d .em-scope-seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.design-d .em-scope-seg button { background: transparent; border: none; color: var(--muted); font-weight: 600; font-size: .8rem; padding: .4rem 1rem; cursor: pointer; }
.design-d .em-scope-seg button.active[data-scope="global"] { background: rgba(129, 140, 248, .16); color: #4f46e5; }
.design-d .em-scope-seg button.active[data-scope="local"]  { background: rgba(45, 212, 191, .14);  color: #0d9488; }

/* Statistics readouts in modal */
.design-d .stat-read {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  height: 100%;
}

.design-d .stat-read .lbl { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; gap: .4rem; }
.design-d .stat-read .big { font-size: 2rem; font-weight: 800; margin-top: .3rem; line-height: 1; }
.design-d .stat-read .big small { font-size: .9rem; font-weight: 600; color: var(--muted); }

/* Negation toggle button */
.design-d .neg-toggle {
  flex: 0 0 auto;
  width: 2.4rem;
  font-family: ui-monospace, monospace;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: .375rem;
  color: var(--faint);
  cursor: pointer;
}
.design-d .neg-toggle:hover { color: var(--red); border-color: rgba(229, 56, 74, .5); }

.design-d .neg-toggle.active {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  box-shadow: 0 0 0 .18rem rgba(229, 56, 74, .18);
}

.design-d .neg-tip { color: var(--faint); font-size: .72rem; font-style: italic; margin: .1rem 0 .9rem; display: flex; align-items: center; gap: .4rem; }
.design-d .neg-tip .k { font-family: ui-monospace, monospace; color: var(--red); font-weight: 800; font-style: normal; }

/* ── Page header helpers ─────────────────────────────────────────────────────── */
.design-d .page-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.design-d .page-sub   { color: var(--muted); font-size: .8rem; font-family: ui-monospace, monospace; }

.design-d .counter-hint   { color: var(--faint); font-size: .78rem; display: inline-flex; align-items: center; gap: .35rem; }
.design-d .counter-hint i { color: var(--blue); }

/* Page content container (the mockup wraps every page in .wrap). */
body.design-d #appContent .wrap { padding: 1.1rem 1.1rem 3rem; }

/* ── Pager (shared) ──────────────────────────────────────────────────────────
   Was copy-pasted inline into every D list page (list_prefix_d, list_bgpsession_d,
   byoip prefix_list_d …). Promoted here so pages that don't carry the inline block
   (the firewall D lists) still get a styled pager instead of bare browser buttons. */
.design-d .pag { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.design-d .pag-btn {
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; padding: .3rem .65rem; font-size: .8rem; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; line-height: 1;
}
.design-d .pag-btn:hover { border-color: var(--blue); color: var(--blue); }
.design-d .pag-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.design-d .pag-btn.disabled, .design-d .pag-btn:disabled { opacity: .4; pointer-events: none; cursor: not-allowed; }
.design-d .pag-btn.danger { color: var(--red); }
.design-d .pag-btn.danger:hover { border-color: var(--red); color: #c0293a; }
.design-d .pag-info { color: var(--muted); font-size: .8rem; }

/* ── Firewall rules list helpers (Task 6) ───────────────────────────────────── */
.design-d .fw-section-title { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1.25rem 0 .6rem; }
.design-d .fw-chain-head    { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); border-bottom: 1px solid var(--line); padding-bottom: .3rem; margin: 0 0 .5rem; }
.design-d .fw-local-marker  { text-align: center; color: var(--faint); font-size: .72rem; border-top: 1px dashed var(--line); margin: .4rem 0; padding-top: .3rem; }

/* Visible column/badge legend (no hover needed). */
.design-d .fw-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin: .2rem 0 1rem; font-size: .74rem; color: var(--muted); }
.design-d .fw-legend > span { display: inline-flex; align-items: center; gap: .35rem; }

/* Address-list direction wrapper (mockup .al-item / .dir). */
.design-d .al-item { display: inline-flex; align-items: center; gap: .22rem; margin-right: .3rem; }
.design-d .al-item .dir,
.design-d .dir { font-size: .6rem; text-transform: uppercase; color: var(--faint); font-weight: 700; letter-spacing: .03em; }

/* ── Shell layout (sidebar + topbar + content offset) ───────────────────────── */
/* Values lifted verbatim from /tmp/fw-mockups/variant-d.html lines 251-301.    */

body.design-d #appSidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background: #fff;
  border-right: 1px solid #e9ebec;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1030;
  transition: width .2s ease;
}

body.design-d #appSidebar .brand {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  border-bottom: 1px solid #e9ebec;
}

body.design-d #appSidebar .brand .wordmark {
  font-weight: 800;
  font-size: 1.25rem;
  color: #5ea3cb;
  letter-spacing: -.3px;
  white-space: nowrap;
}

body.design-d #appSidebar .brand .logo-lg { display: inline-block; }
body.design-d #appSidebar .brand .logo-sm { display: none; }

body.design-d #appSidebar .menu { padding: 10px 0; }

body.design-d #appSidebar .menu-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #adb5bd;
  padding: 14px 22px 6px;
  white-space: nowrap;
}

body.design-d #appSidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 22px;
  color: #6d7080;
  font-size: .9rem;
  text-decoration: none;
  border-left: 3px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

body.design-d #appSidebar .nav-item i {
  font-size: 1.15rem;
  flex: 0 0 20px;
  text-align: center;
}

/* Collapsible-group chevron: right-aligned, rotates 180deg when the group is expanded.
   display:inline-block is required — transform is ignored on default-inline <i> elements. */
body.design-d #appSidebar .nav-item .menu-caret {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-block;
  font-size: .95rem;
  transition: transform .18s ease;
}

body.design-d #appSidebar .nav-item[aria-expanded="true"] .menu-caret { transform: rotate(180deg); }

body.design-d #appSidebar .nav-item:hover { color: #5ea3cb; }

body.design-d #appSidebar .nav-item.active {
  color: #5ea3cb;
  background: rgba(94, 163, 203, .1);
  border-left-color: #5ea3cb;
  font-weight: 600;
}

body.design-d #appSidebar .sub {
  padding-left: 52px;
  font-size: .84rem;
  padding-top: 7px;
  padding-bottom: 7px;
}

/* Tree guide line: a vertical rule down the left of each expanded sub-menu so
   its items unmistakably read as children of the item above, not as a top-level
   item that lost its icon. Each nested level gets its own line one step deeper,
   which is what makes menu-under-menu groups legible. */
body.design-d #appSidebar .menu-sub { position: relative; }
body.design-d #appSidebar .menu-sub::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: #dde1e6;
}

/* Second-level collapsible groups (DDoS / Firewall nested under Dashboards &
   Monitoring): links and their guide line sit one step deeper still. */
body.design-d #appSidebar .menu-sub .menu-sub .nav-item.sub { padding-left: 72px; }
body.design-d #appSidebar .menu-sub .menu-sub::before { left: 51px; }

body.design-d #appSidebar .label { transition: opacity .15s; }

body.design-d #appTopbar {
  position: fixed;
  top: 0;
  left: 250px;
  right: 0;
  height: 64px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  z-index: 1020;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  transition: left .2s ease;
}

body.design-d #appTopbar .hamburger {
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  color: #495057;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
}

body.design-d #appTopbar .hamburger:hover { background: #f1f1f1; }

body.design-d #appTopbar .crumb { color: #878a99; font-size: .9rem; }
body.design-d #appTopbar .crumb b { color: #495057; font-weight: 600; }

body.design-d #appTopbar .tb-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #878a99;
}

body.design-d #appTopbar .tb-right i { font-size: 1.25rem; cursor: pointer; }

body.design-d #appTopbar .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5ea3cb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
}

body.design-d #appContent {
  margin-left: 250px;
  padding-top: 64px;
  padding-bottom: 1rem;
  transition: margin-left .2s ease;
}

body.design-d #appContent .fw-table-card { overflow-x: auto; }

/* Collapsed icon-rail (body.sidebar-sm toggled by JS in base_d) */
body.design-d.sidebar-sm #appSidebar { width: 74px; }
body.design-d.sidebar-sm #appSidebar .brand { padding: 0; justify-content: center; }

body.design-d.sidebar-sm #appSidebar .wordmark,
body.design-d.sidebar-sm #appSidebar .brand .logo-lg,
body.design-d.sidebar-sm #appSidebar .menu-title,
body.design-d.sidebar-sm #appSidebar .nav-item .label,
body.design-d.sidebar-sm #appSidebar .nav-item .menu-caret,
body.design-d.sidebar-sm #appSidebar .sub { display: none; }
body.design-d.sidebar-sm #appSidebar .menu-sub::before { display: none; }
body.design-d.sidebar-sm #appSidebar .brand .logo-sm { display: inline-block; }

body.design-d.sidebar-sm #appSidebar .nav-item {
  justify-content: center;
  padding: 11px 0;
  gap: 0;
  border-left-width: 0;
}

body.design-d.sidebar-sm #appSidebar .nav-item.active {
  border-left-width: 0;
  background: rgba(94, 163, 203, .1);
}

body.design-d.sidebar-sm #appTopbar { left: 74px; }
body.design-d.sidebar-sm #appContent { margin-left: 74px; }

/* ── Address-list popover ────────────────────────────────────────────────────── */
.design-d .list-pop {
  position: fixed;
  z-index: 1080;
  width: 320px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(16, 24, 40, .18);
  overflow: hidden;
  font-size: .82rem;
}

.design-d .list-pop .lp-head   { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.design-d .list-pop .lp-title  { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: .4rem; }
.design-d .list-pop .lp-title i { color: var(--blue); }
.design-d .list-pop .lp-count  { margin-left: auto; color: var(--faint); font-size: .72rem; }
.design-d .list-pop .lp-close  { border: none; background: transparent; color: var(--faint); cursor: pointer; font-size: 1rem; line-height: 1; }
.design-d .list-pop .lp-search { padding: .5rem .8rem; border-bottom: 1px solid var(--line); }
.design-d .list-pop .lp-search input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: .35rem .6rem; font-size: .8rem; }
.design-d .list-pop .lp-body   { max-height: 230px; overflow: auto; }
.design-d .list-pop .lp-item   { display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-bottom: 1px solid var(--panel); font-family: ui-monospace, monospace; color: #334155; }
.design-d .list-pop .lp-item:hover { background: var(--panel); }
.design-d .list-pop .lp-item .rm { margin-left: auto; color: var(--faint); cursor: pointer; visibility: hidden; }
.design-d .list-pop .lp-item:hover .rm { visibility: visible; }
.design-d .list-pop .lp-foot   { padding: .55rem .8rem; border-top: 1px solid var(--line); display: flex; gap: .5rem; }
.design-d .list-pop .lp-foot input  { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: .35rem .6rem; font-size: .8rem; }
.design-d .list-pop .lp-foot button { border: none; background: var(--blue); color: #fff; border-radius: 8px; padding: .35rem .7rem; font-weight: 600; font-size: .78rem; cursor: pointer; }

/* ── BGP session detail — object header ────────────────────────────────────── */
.design-d .obj-header {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.1rem 1.3rem;
}

.design-d .obj-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.design-d .obj-title .aso { color: var(--blue); }

.design-d .obj-sub {
  color: var(--muted);
  font-size: .8rem;
  font-family: ui-monospace, monospace;
  margin-top: .2rem;
}

/* ── Pills (status / afi / type badges on detail header) ───────────────────── */
.design-d .pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .22rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.design-d .pill-est    { background: rgba(10, 157, 99, .12);  color: var(--green); border: 1px solid rgba(10, 157, 99, .3); }
.design-d .pill-active { background: rgba(10, 157, 99, .1);   color: var(--green); border: 1px solid rgba(10, 157, 99, .25); }
.design-d .pill-afi    { background: rgba(189, 138, 255, .14); color: #7c3aed;      border: 1px solid rgba(189, 138, 255, .3); }
.design-d .pill-type   { background: rgba(43, 125, 233, .1);  color: #1c5bb8;      border: 1px solid rgba(43, 125, 233, .25); }


/* ── Spec card (key-value summary panels) ───────────────────────────────────── */
.design-d .spec-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  height: 100%;
  overflow: hidden;
}

.design-d .spec-card .sc-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: .82rem;
  color: #334155;
  background: var(--panel-2);
}

.design-d .spec-card .sc-head i { color: var(--blue); font-size: 1rem; }

.design-d .spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--line);
}

.design-d .spec-row:last-child { border-bottom: none; }

.design-d .candidate {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .9rem 1rem;
  margin-bottom: .7rem;
  background: var(--panel);
}

.design-d .candidate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}

.design-d .spec-row .k {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.design-d .spec-row .v {
  font-family: ui-monospace, monospace;
  font-size: .78rem;
  color: #334155;
  text-align: right;
  word-break: break-all;
}

/* ── Panel card (generic content panel) ─────────────────────────────────────── */
.design-d .panel-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.design-d .panel-card .pc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: .82rem;
  color: #334155;
}

.design-d .panel-card .pc-head i { color: var(--blue); }

.design-d .panel-body { padding: 1rem; }

/* ── Timeline (state history) ───────────────────────────────────────────────── */
.design-d .tl {
  position: relative;
  margin: .2rem 0 0;
  padding-left: 1.4rem;
}

.design-d .tl:before {
  content: "";
  position: absolute;
  left: 6px;
  top: .4rem;
  bottom: .4rem;
  width: 2px;
  background: var(--line);
}

.design-d .tl-item {
  position: relative;
  padding: 0 0 1.15rem 0;
}

.design-d .tl-item:last-child { padding-bottom: 0; }

.design-d .tl-dot {
  position: absolute;
  left: -1.4rem;
  top: .15rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  box-shadow: 0 0 0 3px rgba(43, 125, 233, .1);
}

.design-d .tl-dot.green { border-color: var(--green); box-shadow: 0 0 0 3px rgba(10, 157, 99, .12); }
.design-d .tl-dot.grey  { border-color: var(--grey);  box-shadow: 0 0 0 3px rgba(123, 138, 160, .12); }

.design-d .tl-title { font-weight: 700; font-size: .82rem; color: #334155; }

.design-d .tl-meta {
  color: var(--faint);
  font-size: .72rem;
  margin-top: .1rem;
  font-family: ui-monospace, monospace;
}

/* ── Raw config block ────────────────────────────────────────────────────────── */
/* ponytail: dark bg on pre.raw is intentional — it's a terminal-style code block */
.design-d pre.raw {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.55;
  overflow-x: auto;
}

.design-d pre.raw .c { color: #64748b; }
.design-d pre.raw .k { color: #7dd3fc; }
.design-d pre.raw .s { color: #a5f3b4; }
.design-d pre.raw .n { color: #fbbf24; }

/* ── Related objects rail ────────────────────────────────────────────────────── */
.design-d .rel-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}

.design-d .rel-row:last-child { border-bottom: none; }
.design-d .rel-row:hover      { background: #f4f9ff; }

.design-d .rel-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  color: var(--blue);
  font-size: 1rem;
  flex: 0 0 30px;
}

.design-d .rel-main { flex: 1; min-width: 0; }
.design-d .rel-t    { font-size: .78rem; font-weight: 700; color: #334155; }
.design-d .rel-s    { font-size: .7rem; color: var(--muted); font-family: ui-monospace, monospace; margin-top: .05rem; }

/* ── Tab panes ───────────────────────────────────────────────────────────────── */
.design-d .tab-pane        { display: none; }
.design-d .tab-pane.active { display: block; }

/* ── Live-state badge — established ─────────────────────────────────────────── */
.design-d .ls-established {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(10, 157, 99, .12);
  color: var(--green);
  border: 1px solid rgba(10, 157, 99, .3);
  border-radius: 7px;
  padding: .18rem .5rem;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Pulse dot (reuses d-pulse keyframe already defined above) ───────────────── */
.design-d .pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: .3rem;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(10, 157, 99, .55);
  animation: d-pulse 1.8s infinite;
}

/* ── Dashboard ────────────────────────────────────────────────────────────────── */

/* alert strip + notification card */
.design-d .alert-strip {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  background: rgba(229, 56, 74, .07);
  border: 1px solid rgba(229, 56, 74, .22);
  border-radius: 10px;
  font-size: .82rem;
  color: #b91c1c;
  margin-bottom: .5rem;
}
.design-d .alert-strip i { flex: 0 0 auto; font-size: 1rem; }
.design-d .alert-strip a { color: #b91c1c; text-decoration: underline; font-weight: 600; }

.design-d .notif-card {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  background: rgba(43, 125, 233, .07);
  border: 1px solid rgba(43, 125, 233, .2);
  border-radius: 10px;
  font-size: .82rem;
  color: #1c5bb8;
  margin-bottom: .5rem;
}
.design-d .notif-card i { flex: 0 0 auto; }

/* welcome hero (active dashboard) */
.design-d .hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 1.25rem;
}
.design-d .hero-greet { font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; }
.design-d .hero-sub   { color: var(--muted); font-size: .82rem; margin-top: .1rem; }
.design-d .hero-date  { color: var(--faint); font-size: .78rem; font-family: ui-monospace, monospace; }

/* stat card extensions (bar + head helpers used on dashboard) */
.design-d .stat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.design-d .stat-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.design-d .stat-bar {
  height: 5px;
  border-radius: 3px;
  background: #eceef4;
  margin-top: .6rem;
  overflow: hidden;
}
.design-d .stat-bar-fill { height: 100%; border-radius: 3px; transition: width .6s; }
.design-d .stat-sub       { color: var(--muted); font-size: .72rem; margin-top: .35rem; }

/* quick actions grid */
.design-d .qa-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .5rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 1100px) { .design-d .qa-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .design-d .qa-grid { grid-template-columns: repeat(2, 1fr); } }
.design-d .qa-tile {
  background: var(--panel);
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .55rem .4rem;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, background .15s, color .15s;
  min-height: 64px;
}
.design-d .qa-tile i    { font-size: 1.25rem; color: var(--faint); transition: color .15s; }
.design-d .qa-tile span { font-size: .74rem; font-weight: 600; text-align: center; line-height: 1.2; }
.design-d .qa-tile:hover   { border-color: var(--blue); background: rgba(43, 125, 233, .04); color: var(--blue); }
.design-d .qa-tile:hover i { color: var(--blue); }

/* section headers */
.design-d .sec-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* goal cards */
.design-d .goal-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .85rem 1rem;
  height: 100%;
}
.design-d .goal-card .goal-title   { font-size: .82rem; font-weight: 700; line-height: 1.3; margin-bottom: .15rem; }
.design-d .goal-card .goal-runtime { font-size: .68rem; color: var(--faint); margin-bottom: .5rem; display: flex; align-items: center; gap: .3rem; }
.design-d .goal-card .goal-amounts { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-bottom: .3rem; }
.design-d .goal-card .goal-amounts .reached { font-weight: 700; color: var(--ink); }
.design-d .goal-bar      { height: 7px; border-radius: 4px; background: #eceef4; overflow: hidden; margin-bottom: .5rem; }
.design-d .goal-bar-fill { height: 100%; border-radius: 4px; transition: width .6s; }
.design-d .goal-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .18rem .5rem;
  border-radius: 6px;
  line-height: 1.2;
}
.design-d .goal-active { background: rgba(10, 157, 99, .12); color: #0a9d63; border: 1px solid rgba(10, 157, 99, .25); }
.design-d .goal-warn   { background: rgba(224, 127, 25, .12); color: #b45309; border: 1px solid rgba(224, 127, 25, .3); }

/* panel card head helpers (dashboard variant with .panel-head / .panel-title / .panel-body) */
.design-d .panel-card .panel-head {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.design-d .panel-card .panel-title {
  font-size: .88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* fw-tab size override for leaderboard period tabs */
.design-d .fw-tabs .fw-tab { font-size: .82rem; padding: .38rem .75rem; }
/* ponytail: a.fw-tab needs no underline (buttons inherit none; anchors don't) */
.design-d a.fw-tab { text-decoration: none; }

/* leaderboard */
.design-d .lb-section-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--faint);
  padding: .5rem 0 .3rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .4rem;
}
.design-d .lb-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .32rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .8rem;
}
.design-d .lb-row:last-child { border-bottom: none; }
.design-d .lb-rank    { width: 1.4rem; font-size: .85rem; flex: 0 0 auto; text-align: center; }
.design-d .lb-name    { flex: 1; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.design-d .lb-val     { font-family: ui-monospace, monospace; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.design-d .lb-bar-wrap { width: 60px; background: #eceef4; border-radius: 3px; height: 4px; flex: 0 0 60px; }
.design-d .lb-bar     { height: 4px; border-radius: 3px; background: var(--blue); }

/* news timeline */
.design-d .news-item { display: flex; gap: .65rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.design-d .news-item:last-child { border-bottom: none; }
.design-d .news-dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: 0 0 auto; margin-top: .35rem; }
.design-d .news-title { font-size: .82rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.design-d .news-date  { font-size: .7rem; color: var(--faint); margin-top: .1rem; }

/* recent tasks feed */
.design-d .task-row { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.design-d .task-row:last-child { border-bottom: none; }
.design-d .task-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--panel-2);
  color: var(--muted);
}
.design-d .task-main   { flex: 1; min-width: 0; }
.design-d .task-name   { font-size: .82rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.design-d .task-target { font-size: .72rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.design-d .task-right  { flex: 0 0 auto; text-align: right; }
.design-d .task-when   { font-size: .68rem; color: var(--faint); margin-top: .2rem; }
.design-d .task-badge {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .16rem .45rem;
  border-radius: 6px;
  line-height: 1.2;
  white-space: nowrap;
}
.design-d .tb-done { background: rgba(10, 157, 99, .12);  color: #0a9d63; border: 1px solid rgba(10, 157, 99, .25); }
.design-d .tb-run  { background: rgba(43, 125, 233, .12); color: #2b7de9; border: 1px solid rgba(43, 125, 233, .25); }
.design-d .tb-fail { background: rgba(229, 56, 74, .12);  color: #e5384a; border: 1px solid rgba(229, 56, 74, .25); }
.design-d .task-badge .spin { animation: tspin .8s linear infinite; display: inline-block; }
@keyframes tspin { to { transform: rotate(360deg); } }

/* empty-state dashboard (mock-empty.html) */

/* hero variant for new-user empty state */
.design-d .hero-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0; }

/* checklist / get-started card */
.design-d .checklist-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem;
}
.design-d .checklist-card h6 {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.design-d .step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  margin-bottom: .4rem;
}
.design-d .step:last-child { margin-bottom: 0; }
.design-d .step.active { background: rgba(94, 163, 203, .08); border: 1px solid rgba(94, 163, 203, .25); }
.design-d .step.locked { opacity: .45; }
.design-d .step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: .05rem;
}
.design-d .step.active .step-num { background: #5ea3cb; color: #fff; }
.design-d .step.locked .step-num { background: var(--line); color: var(--muted); }
.design-d .step-body            { flex: 1; }
.design-d .step-body .step-title { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.design-d .step-body .step-desc  { color: var(--muted); font-size: .8rem; margin-top: .2rem; }
.design-d .step-cta { margin-top: .6rem; }
.design-d .btn-step {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  padding: .35rem .85rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.design-d .btn-step-primary        { background: #5ea3cb; color: #fff; }
.design-d .btn-step-primary:hover  { background: #4d8fb5; color: #fff; }
.design-d .btn-step-locked         { background: var(--panel-2); color: var(--faint); cursor: not-allowed; border: 1px solid var(--line); }
.design-d .lock-icon               { font-size: .75rem; color: var(--faint); }

/* empty stat card helpers */
.design-d .stat-empty .value { color: var(--faint); }
.design-d .stat-empty .label { color: var(--faint); }
.design-d .stat-empty .spark { opacity: .45; }
.design-d .nothing-yet { font-size: .68rem; color: var(--faint); margin-top: .25rem; font-style: italic; }
.design-d .usage-bar  { height: 3px; background: var(--line); border-radius: 2px; margin-top: .55rem; overflow: hidden; }
.design-d .usage-fill { height: 100%; width: 0%; background: var(--faint); border-radius: 2px; }

/* empty state panels */
.design-d .empty-panel {
  background: var(--panel);
  border: 2px dashed var(--line);
  border-radius: 16px;
  padding: 2.8rem 1.5rem;
  text-align: center;
}
.design-d .empty-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 2px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 2rem;
  color: var(--faint);
}
.design-d .empty-panel h5  { font-size: 1rem; font-weight: 700; color: var(--muted); margin-bottom: .4rem; }
.design-d .empty-panel p   { color: var(--faint); font-size: .83rem; margin-bottom: 1.1rem; max-width: 240px; margin-left: auto; margin-right: auto; }

/* hero-empty (empty-state dashboard, distinct from the populated flat .hero) */
.design-d .hero-empty {
  background: linear-gradient(135deg, #eef6fd 0%, #f7f2ff 100%);
  border: 1px solid #d9ebf8;
  border-radius: 18px;
  padding: 2.4rem 2rem 2rem;
  position: relative;
  overflow: hidden;
}
.design-d .hero-empty::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(94, 163, 203, .08);
  pointer-events: none;
}
.design-d .hero-empty .hero-sub {
  font-size: .95rem;
  max-width: 520px;
}

/* stat-cards-row: single uniform flex row for all 8 dashboard stat cards */
.design-d .stat-cards-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }

.design-d .stat-cards-row > * { flex: 1 1 150px; min-width: 150px; }

/* ============ ASN list: card + table view ============ */
/* view toggle */
.design-d .view-toggle { display: inline-flex; gap: .2rem; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: .3rem; }
.design-d .view-toggle button { background: transparent; border: none; color: var(--muted); font-weight: 600; font-size: .85rem; padding: .45rem .8rem; border-radius: 8px; display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.design-d .view-toggle button:hover { color: var(--ink); }
.design-d .view-toggle button.active { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.12); }

/* ASN + AS-SET chips */
.design-d .asn-badge { font-family: ui-monospace, monospace; font-weight: 700; font-size: .82rem; background: rgba(43,125,233,.1); color: #1c5bb8; border: 1px solid rgba(43,125,233,.2); border-radius: 6px; padding: .12rem .45rem; display: inline-block; }
.design-d .asset-chip { font-family: ui-monospace, monospace; font-size: .74rem; color: #475569; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: .1rem .4rem; display: inline-block; }

/* state badges */
.design-d .st { display: inline-flex; align-items: center; gap: .3rem; border-radius: 7px; padding: .2rem .55rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.design-d .st-approved { background: rgba(10,157,99,.1); color: var(--green); border: 1px solid rgba(10,157,99,.25); }
.design-d .st-pending { background: rgba(224,127,25,.1); color: var(--orange); border: 1px solid rgba(224,127,25,.28); }
.design-d .st-rejected { background: rgba(229,56,74,.1); color: var(--red); border: 1px solid rgba(229,56,74,.28); }
.design-d .st-locked { background: rgba(224,127,25,.12); color: #b85c00; border: 1px solid rgba(224,127,25,.3); }
.design-d .st-disabled { background: rgba(123,138,160,.12); color: var(--grey); border: 1px solid rgba(123,138,160,.3); }
.design-d .st-reactivation { background: rgba(43,125,233,.1); color: #1c5bb8; border: 1px solid rgba(43,125,233,.25); }

/* card grid */
.design-d .asn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 1rem; }
.design-d .asn-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; position: relative; overflow: hidden; transition: box-shadow .13s, border-color .13s; display: flex; flex-direction: column; }
.design-d .asn-card:hover { box-shadow: 0 6px 22px rgba(16,24,40,.08); border-color: #d3dbe8; }
.design-d .asn-card .accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.design-d .accent-green { background: var(--green); }
.design-d .accent-orange { background: var(--orange); }
.design-d .accent-red { background: var(--red); }
.design-d .accent-grey { background: var(--grey); }
.design-d .accent-blue { background: var(--blue); }
.design-d .asn-card-body { padding: 1rem 1.1rem 1.1rem 1.25rem; flex: 1 1 auto; }
.design-d .asn-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.design-d .asn-card-head .name { font-weight: 700; font-size: 1.02rem; line-height: 1.2; margin-top: .35rem; }
.design-d .asn-card-head .name small { display: block; font-weight: 400; font-size: .74rem; color: var(--faint); font-family: ui-monospace, monospace; margin-top: .15rem; }

/* metric grid */
.design-d .metric-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .9rem; }
.design-d .metric { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: .5rem .6rem; }
.design-d .metric .m-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; display: flex; align-items: center; gap: .3rem; }
.design-d .metric .m-val { font-size: .9rem; font-weight: 700; margin-top: .15rem; }
.design-d .metric .m-val small { font-weight: 500; color: var(--muted); font-size: .72rem; }
.design-d .pfx-meter { height: 5px; border-radius: 3px; background: #e7ebf2; overflow: hidden; margin-top: .35rem; }
.design-d .pfx-meter > span { display: block; height: 100%; background: var(--green); }
.design-d .pfx-meter.over > span { background: var(--red); }

/* AS-SET line */
.design-d .asset-line { margin-top: .85rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }

/* in-card alert strip */
.design-d .card-alert { margin-top: .9rem; border-radius: 9px; padding: .55rem .7rem; font-size: .78rem; display: flex; gap: .55rem; align-items: flex-start; }
.design-d .card-alert i { font-size: 1rem; margin-top: .05rem; }
.design-d .card-alert.warn { background: rgba(224,127,25,.08); border: 1px solid rgba(224,127,25,.25); color: #8a5200; }
.design-d .card-alert.danger { background: rgba(229,56,74,.07); border: 1px solid rgba(229,56,74,.22); color: #a11524; }
.design-d .card-alert.info { background: rgba(43,125,233,.07); border: 1px solid rgba(43,125,233,.2); color: #1c5bb8; }
.design-d .card-alert .a-actions { margin-top: .45rem; display: flex; gap: .4rem; flex-wrap: wrap; }

/* card footer */
.design-d .asn-card-foot { display: flex; align-items: center; gap: .35rem; border-top: 1px solid var(--line); padding: .6rem .8rem; background: var(--panel-2); }
/* Exempt widget (card footer action), not a system button. */
.design-d .foot-btn { background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: 7px; padding: .32rem .6rem; font-size: .78rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; }
.design-d .foot-btn:hover { background: #fff; border-color: var(--line); color: var(--blue); }
.design-d .foot-btn.danger:hover { color: var(--red); border-color: rgba(229,56,74,.3); }
.design-d .foot-btn.ghost { margin-left: auto; }

/* table action buttons (for ASN rows) */
.design-d .act-btn { background: transparent; border: none; color: var(--faint); padding: .18rem .3rem; border-radius: 6px; cursor: pointer; line-height: 1; font-size: .9rem; text-decoration: none; }
.design-d .act-btn:hover { background: rgba(74,168,255,.12); color: var(--blue); }
.design-d .act-btn.danger:hover { background: rgba(229,56,74,.1); color: var(--red); }

/* ── Points of Presence ─────────────────────────────────────── */
.design-d .pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; }
.design-d .pop-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.design-d .pop-flag { font-size: 1.3rem; flex: 0 0 auto; }
.design-d .pop-meta { flex: 1; min-width: 0; }
.design-d .pop-city { font-size: .82rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.design-d .pop-sub  { font-size: .7rem; color: var(--muted); }
.design-d .pop-dot  { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.design-d .pop-dot.up   { background: var(--green); }
.design-d .pop-dot.down { background: var(--faint); }

/* ============================================================
   ASN Add Wizard (asn_add_d.html) — lifted from mock-asn-add.html
   ============================================================ */

/* quota pill */
.design-d .quota-pill { display: inline-flex; align-items: center; gap: .5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .8rem; font-size: .82rem; color: var(--muted); }
.design-d .quota-pill b { color: var(--ink); font-weight: 700; }
.design-d .quota-pill .mini-bar { width: 70px; height: 6px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.design-d .quota-pill .mini-bar > span { display: block; height: 100%; background: var(--blue); }

/* stepper */
.design-d .stepper { display: flex; align-items: center; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1.1rem; }
.design-d .step { display: flex; align-items: center; gap: .6rem; flex: 1; }
.design-d .step .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: var(--faint); flex: 0 0 auto; }
.design-d .step .s-txt { font-size: .82rem; color: var(--faint); font-weight: 600; line-height: 1.15; }
.design-d .step .s-txt small { display: block; font-weight: 400; font-size: .68rem; color: var(--faint); }
.design-d .step.active .dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.design-d .step.active .s-txt { color: var(--ink); }
.design-d .step.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.design-d .step.done .s-txt { color: var(--ink); }
.design-d .step .bar { flex: 1; height: 2px; background: var(--line); margin: 0 .8rem; }
.design-d .step:last-child { flex: 0 0 auto; }

/* wizard cards / steps */
.design-d .wiz-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.5rem; margin-top: 1.1rem; }
.design-d .wiz-step { display: none; }
.design-d .wiz-step.active { display: block; animation: wizFade .18s ease; }
@keyframes wizFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* section heading */
.design-d .sec-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }

/* field styles inside wizard */
.design-d .field-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--muted); margin-bottom: .35rem; display: block; }
.design-d .field-hint { font-size: .76rem; color: var(--faint); margin-top: .3rem; }

/* ===== canonical Design-D form vocabulary =====
   Shared by the tunnel/subnet/BGP add wizards AND plain CRUD forms so every form
   looks identical. The wizard pages still carry byte-identical inline copies of
   these rules (page-local); this is the single source for forms that don't. */
.design-d .wiz-section-head { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); display: flex; align-items: center; gap: .4rem; padding-bottom: .6rem; border-bottom: 1px dashed var(--line); margin-bottom: 1rem; }
.design-d .wiz-section-head i { color: var(--blue); }
.design-d .wiz-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: .3rem; display: block; }
.design-d .cond-desc { font-size: .72rem; color: var(--faint); margin-top: .35rem; }
.design-d .cond-hint { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .4rem; }
/* form inputs inside a .d-form — identical to the wizard's `.wiz-card .form-control` look */
.design-d .d-form .form-control, .design-d .d-form .form-select { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: 9px; font-size: .88rem; }
.design-d .d-form .form-control::placeholder { color: var(--faint); }
.design-d .d-form .form-control:focus, .design-d .d-form .form-select:focus { background: var(--panel-2); border-color: var(--blue); box-shadow: 0 0 0 .18rem rgba(43,125,233,.15); color: var(--ink); }

/* PeeringDB autofill card */
.design-d .pdb-card { margin-top: 1rem; border: 1px solid rgba(43,125,233,.25); background: rgba(43,125,233,.05); border-radius: 11px; padding: .85rem 1rem; }
.design-d .pdb-card .pdb-top { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; color: #1c5bb8; }
.design-d .pdb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: .7rem; }
.design-d .pdb-grid .p { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; }
.design-d .pdb-grid .p .l { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; }
.design-d .pdb-grid .p .v { font-size: .9rem; font-weight: 700; margin-top: .12rem; }

/* prefix comparison table */
.design-d .cmp { width: 100%; border-collapse: collapse; margin-top: .4rem; font-size: .85rem; }
.design-d .cmp th { background: var(--panel-2); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: .64rem; font-weight: 700; padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--line); }
.design-d .cmp td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
.design-d .cmp .num { font-family: ui-monospace, monospace; font-weight: 700; }
.design-d .cmp .ok { color: var(--green); }
.design-d .cmp .bad { color: var(--red); }
.design-d .verdict { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; border-radius: 6px; padding: .15rem .45rem; }
.design-d .verdict.ok { background: rgba(10,157,99,.1); color: var(--green); border: 1px solid rgba(10,157,99,.25); }
.design-d .verdict.bad { background: rgba(229,56,74,.1); color: var(--red); border: 1px solid rgba(229,56,74,.28); }

/* embedded check section card */
.design-d .check-card { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin-top: 1rem; }
.design-d .check-head { display: flex; align-items: center; justify-content: space-between; padding: .6rem .85rem; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.design-d .check-head h6 { margin: 0; font-size: .82rem; font-weight: 700; }
.design-d .check-badge { font-size: .68rem; font-weight: 700; border-radius: 6px; padding: .15rem .5rem; }
.design-d .cb-pass { background: rgba(10,157,99,.12); color: var(--green); }
.design-d .cb-warn { background: rgba(224,127,25,.12); color: var(--orange); }
.design-d .cb-fail { background: rgba(229,56,74,.12); color: var(--red); }
.design-d .cb-na { background: rgba(148,163,184,.14); color: var(--muted); }
.design-d .cb-skip { background: rgba(148,163,184,.10); color: var(--faint); }
.design-d .check-step { display: flex; gap: .6rem; padding: .5rem .85rem; border-bottom: 1px solid var(--line); align-items: flex-start; }
.design-d .check-step:last-child { border-bottom: none; }
.design-d .step-badge { font-size: .6rem; font-weight: 800; border-radius: 5px; padding: .12rem .35rem; flex: 0 0 auto; margin-top: .1rem; }
.design-d .sb-pass { background: rgba(10,157,99,.12); color: var(--green); }
.design-d .sb-warn { background: rgba(224,127,25,.12); color: var(--orange); }
.design-d .sb-fail { background: rgba(229,56,74,.12); color: var(--red); }
.design-d .sb-na { background: rgba(148,163,184,.14); color: var(--muted); }
.design-d .sb-skip { background: rgba(148,163,184,.10); color: var(--faint); }
.design-d .check-step .t { font-size: .83rem; font-weight: 600; }
.design-d .check-step .d { font-size: .76rem; color: var(--muted); margin-top: .1rem; }
.design-d .check-step .fix { font-size: .76rem; color: #1c5bb8; margin-top: .15rem; }
/* Exempt widget (checkable look), not a system button. */
.design-d .btn-check { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .55rem 1rem; font-weight: 700; font-size: .85rem; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.design-d .btn-check:hover { border-color: var(--blue); color: var(--blue); }

/* info-box (RDAP / token explanation) */
.design-d .info-box { display: flex; gap: .6rem; align-items: flex-start; background: rgba(43,125,233,.05); border: 1px solid rgba(43,125,233,.2); border-radius: 11px; padding: .9rem 1.05rem; font-size: .84rem; color: #25507f; line-height: 1.45; }
.design-d .info-box > i { font-size: 1.15rem; color: var(--blue); margin-top: .05rem; }

/* verification method chooser */
.design-d .vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .4rem; }
.design-d .vm-opt { border: 1.5px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; cursor: pointer; transition: border-color .12s, background .12s; }
.design-d .vm-opt:hover { border-color: #c6d2e6; }
.design-d .vm-opt.sel { border-color: var(--blue); background: rgba(43,125,233,.04); }
.design-d .vm-opt .vm-top { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; }
.design-d .vm-opt .vm-top i { font-size: 1.3rem; color: var(--blue); }
.design-d .vm-opt .vm-desc { font-size: .8rem; color: var(--muted); margin-top: .5rem; line-height: 1.4; }
.design-d .vm-opt .vm-tag { font-size: .62rem; font-weight: 700; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: .1rem .4rem; color: var(--muted); margin-left: auto; }

/* token display box */
.design-d .token-box { display: flex; align-items: center; gap: 1rem; background: var(--panel-2); border: 1px dashed #c6d2e6; border-radius: 11px; padding: .95rem 1.15rem; margin-top: .4rem; }
.design-d .token-box .token-val { font-family: ui-monospace, monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: .03em; color: var(--ink); flex: 1; word-break: break-all; user-select: all; }
.design-d .token-box .btn-copy { flex: 0 0 auto; background: var(--blue); border: none; color: #fff; font-weight: 700; font-size: .82rem; padding: .5rem 1rem; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.design-d .token-box .btn-copy:hover { background: #1f6acc; }
.design-d .danger-note { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: .6rem 1rem; font-size: .88rem; color: #7a5100; }

/* wizard nav */
.design-d .wiz-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }

/* inline hint notes */
.design-d .g-note { border-radius: 9px; padding: .55rem .75rem; font-size: .78rem; margin-top: .7rem; display: flex; gap: .5rem; align-items: flex-start; line-height: 1.4; }
.design-d .g-note i { margin-top: .05rem; font-size: .95rem; }
.design-d .g-info { background: rgba(43,125,233,.06); border: 1px solid rgba(43,125,233,.2); color: #25507f; }
.design-d .g-warn { background: rgba(224,127,25,.08); border: 1px solid rgba(224,127,25,.25); color: #8a5200; }

/* RIR guide partials */
.design-d .guide-head { font-weight: 700; font-size: .92rem; margin-bottom: .7rem; display: flex; align-items: center; gap: .45rem; }
.design-d .guide-steps { margin: 0; padding-left: 1.2rem; font-size: .85rem; line-height: 1.5; color: var(--ink); }
.design-d .guide-steps li { margin-bottom: .55rem; }
.design-d .g-token-line { display: flex; gap: .5rem; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .55rem; margin-top: .4rem; }
.design-d .g-token-line .mono { flex: 1; font-size: .79rem; word-break: break-all; }
.design-d .g-token-line button { flex: 0 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: .7rem; font-weight: 700; padding: .25rem .55rem; cursor: pointer; color: var(--ink); }
.design-d .whois-box { background: #1f2733; color: #e6edf3; border-radius: 8px; padding: .55rem .7rem; margin-top: .4rem; font-family: ui-monospace, monospace; font-size: .8rem; }
.design-d .rir-tabs { display: flex; flex-wrap: wrap; gap: .3rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: .3rem; margin-bottom: 1rem; }
.design-d .rir-tabs button { background: transparent; border: none; color: var(--muted); font-weight: 600; font-size: .82rem; padding: .42rem .85rem; border-radius: 7px; cursor: pointer; }
.design-d .rir-tabs button:hover { color: var(--ink); }
.design-d .rir-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.design-d .rir-pane { display: none; }
.design-d .rir-pane.active { display: block; }

/* news page */
.design-d .news-hero { background: linear-gradient(135deg,#eef6fd 0%,#f7f2ff 100%); border: 1px solid #d9ebf8; border-radius: 16px; padding: 1.5rem 1.6rem; position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.25rem; }
.design-d .news-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(94,163,203,.08); pointer-events: none; }
.design-d .news-hero .rocket { font-size: 2.2rem; color: #5ea3cb; flex: 0 0 auto; }
.design-d .news-hero h4 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.design-d .news-hero p { color: var(--muted); font-size: .85rem; margin: .25rem 0 0; max-width: 640px; }
.design-d .news-post { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; position: relative; margin-bottom: 1rem; }
.design-d .news-post .accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 14px 0 0 14px; }
.design-d .news-post .np-head { padding: .85rem 1.1rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.design-d .news-post .np-title { font-size: 1rem; font-weight: 700; line-height: 1.3; display: flex; align-items: center; gap: .5rem; }
.design-d .news-post .np-title i { font-size: 1.1rem; }
.design-d .news-post .np-date { font-size: .74rem; color: var(--faint); white-space: nowrap; font-family: ui-monospace, monospace; flex: 0 0 auto; margin-top: .15rem; }
.design-d .news-post .np-body { padding: .9rem 1.1rem; color: var(--ink); font-size: .9rem; line-height: 1.6; }
.design-d .news-post .np-body p { margin: 0 0 .7rem; }
.design-d .news-post .np-body p:last-child { margin-bottom: 0; }
.design-d .news-post .np-body ul { margin: .2rem 0 .7rem 1.1rem; padding: 0; }
.design-d .news-post .np-body a { color: var(--blue); }
.design-d .news-post .np-foot { padding: .6rem 1.1rem; background: var(--panel-2); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: .74rem; color: var(--muted); }
.design-d .news-post .np-foot .who { display: flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--ink); }
.design-d .news-post .np-foot .upd { display: flex; align-items: center; gap: .3rem; }
.design-d .pager { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 1.4rem 0 .3rem; flex-wrap: wrap; }
.design-d .pager a, .design-d .pager span { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; padding: .4rem .7rem; border-radius: 9px; text-decoration: none; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.design-d .pager a:hover { border-color: var(--blue); color: var(--blue); }
.design-d .pager .current { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Design-D add-ASN wizard: style Django-rendered form widgets like the mockup's .wiz-input.
   The form is shared with classic, so we style by element inside .wiz-card (not by adding a class). */
.design-d .wiz-card input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
.design-d .wiz-card select,
.design-d .wiz-card textarea { border: 1px solid var(--line); border-radius: 9px; padding: .6rem .8rem; font-size: .92rem; width: 100%; background: #fff; color: var(--ink); }
.design-d .wiz-card input:not([type="checkbox"]):not([type="radio"]):focus,
.design-d .wiz-card select:focus,
.design-d .wiz-card textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 .18rem rgba(43, 125, 233, .15); outline: none; }
.design-d .wiz-card input[name="asn"] { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: .02em; }

/* Reusable Design-D delete/confirm modal (host in _delete_modal_host_d.html) */
.design-d .d-modal { display: none; position: fixed; inset: 0; z-index: 1090; }
.design-d .d-modal.open { display: block; }
.design-d .d-modal-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .45); }
.design-d .d-modal-dialog { position: relative; max-width: 520px; margin: 8vh auto 0; padding: 0 1rem; }
.design-d .d-modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(16, 24, 40, .25); }
.design-d .d-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.design-d .d-modal-head h5 { margin: 0; font-size: 1rem; font-weight: 700; }
.design-d .d-modal-x { background: transparent; border: none; color: var(--faint); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.design-d .d-modal-x:hover { color: var(--ink); }
.design-d .d-modal-body { padding: 1.1rem; font-size: .9rem; }
.design-d .d-modal-body a { color: var(--blue); }
.design-d .d-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; padding: .85rem 1.1rem; border-top: 1px solid var(--line); background: var(--panel-2); }


/* ---- DDoS Ops (Design-D) ---- */

/* severity text helpers */
.design-d .sev-critical{color:var(--red);font-weight:700;}
.design-d .sev-warning{color:var(--orange);font-weight:600;}

/* severity pills */
.design-d .sevpill{display:inline-flex;align-items:center;gap:.3rem;border-radius:20px;padding:.14rem .58rem;font-size:.7rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;}
.design-d .sevpill-critical{background:rgba(229,56,74,.13);color:#c0293a;}
.design-d .sevpill-warning{background:rgba(224,127,25,.14);color:#b05b00;}

/* incident state badges */
.design-d .stbadge{display:inline-flex;align-items:center;gap:.3rem;border-radius:20px;padding:.14rem .58rem;font-size:.7rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;}
.design-d .stbadge-firing{background:rgba(229,56,74,.13);color:#c0293a;}
.design-d .stbadge-acked{background:rgba(224,127,25,.15);color:#b05b00;}
.design-d .stbadge-resolved{background:rgba(10,157,99,.14);color:#0a7a52;}
.design-d .stbadge-cooldown{background:rgba(43,125,233,.10);color:#1c5bb8;}
.design-d .stbadge-candidate{background:rgba(123,138,160,.16);color:var(--grey);}

/* pulse dot for firing state (keyframe is DDoS-specific — existing d-pulse uses green) */
@keyframes mkpulse{0%{box-shadow:0 0 0 0 rgba(229,56,74,.45);}70%{box-shadow:0 0 0 6px rgba(229,56,74,0);}100%{box-shadow:0 0 0 0 rgba(229,56,74,0);}}

/* health status */
.design-d .hst{display:inline-flex;align-items:center;gap:.3rem;border-radius:20px;padding:.12rem .5rem;font-size:.7rem;font-weight:700;}
.design-d .hst-ok{background:rgba(10,157,99,.13);color:#0a7a52;}
.design-d .hst-degraded{background:rgba(224,127,25,.14);color:#b05b00;}
.design-d .hst-error{background:rgba(229,56,74,.13);color:#c0293a;}

/* family / AFI chips */
.design-d .fam-chip{display:inline-flex;align-items:center;gap:.28rem;border-radius:6px;padding:.1rem .44rem;font-size:.7rem;font-weight:700;background:var(--panel-2);color:var(--muted);border:1px solid var(--line);}
.design-d .afi-badge{display:inline-block;border-radius:6px;padding:.12rem .42rem;font-size:.68rem;font-weight:700;background:var(--panel-2);color:var(--muted);border:1px solid var(--line);}
.design-d .afi-v6{background:rgba(64,64,192,.1);color:#4040c0;}
.design-d .ip-cell{font-family:ui-monospace,monospace;font-size:.82rem;color:#1c5bb8;font-weight:700;}

/* KPI tone helpers (design-d already ships .stat-card; .rate is DDoS-new) */
.design-d .stat-card .rate{font-variant-numeric:tabular-nums;}
.design-d .val-red{color:var(--red)!important;}
.design-d .val-orange{color:var(--orange)!important;}
.design-d .val-green{color:var(--green)!important;}
.design-d .val-blue{color:var(--blue)!important;}
.design-d .val-grey{color:var(--grey)!important;}

/* hero: worst active incident / calm state */
.design-d .ddos-hero{border:1px solid var(--line);border-left:4px solid var(--red);border-radius:14px;background:linear-gradient(180deg,rgba(229,56,74,.05),#fff 60%);padding:1.1rem 1.3rem;}
.design-d .ddos-hero.calm{border-left-color:var(--green);background:linear-gradient(180deg,rgba(10,157,99,.05),#fff 60%);}
.design-d .ddos-hero .h-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem;}
.design-d .ddos-hero .h-title{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem;color:var(--ink);}
.design-d .ddos-hero .h-sub{color:var(--muted);font-size:.84rem;margin-top:.2rem;}
.design-d .hero-peaks{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:.9rem;}
.design-d .hero-peak .pk-l{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:800;}
.design-d .hero-peak .pk-v{font-size:1.15rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
.design-d .hero-calm-ico{width:46px;height:46px;border-radius:12px;background:rgba(10,157,99,.12);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:1.5rem;}

/* coverage gauge and meter */
.design-d .gauge-wrap{display:flex;align-items:center;gap:1rem;}
.design-d .gauge{--p:70;--c:var(--green);width:96px;height:96px;flex:none;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--panel-2) 0);display:flex;align-items:center;justify-content:center;position:relative;}
.design-d .gauge::before{content:"";position:absolute;inset:11px;border-radius:50%;background:#fff;}
.design-d .gauge .g-val{position:relative;font-weight:800;font-size:1.05rem;color:var(--ink);}
.design-d .meter{background:var(--panel-2);height:12px;border-radius:7px;overflow:hidden;}
.design-d .meter > i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--blue),#0ab39c);}
.design-d .meter.warn > i{background:linear-gradient(90deg,var(--orange),#e5a13a);}
.design-d .meter.bad > i{background:linear-gradient(90deg,var(--red),#e5677a);}

/* vstat banners (verified / warn / err / run) */
.design-d .vstat{border-radius:9px;padding:.6rem .85rem;font-size:.82rem;display:flex;gap:.5rem;align-items:flex-start;}
.design-d .vstat-run{background:rgba(43,125,233,.1);color:#1c5bb8;}
.design-d .vstat-ok{background:rgba(10,157,99,.12);color:#0a7a52;}
.design-d .vstat-warn{background:rgba(224,127,25,.13);color:#b05b00;}
.design-d .vstat-err{background:rgba(229,56,74,.12);color:#c0293a;}

/* forensics: verdict badges (DDoS-specific modifiers; .verdict base already in design-d.css) */
.design-d .verdict-attack{background:rgba(229,56,74,.13);color:#c0293a;}
.design-d .verdict-surge{background:rgba(10,157,99,.13);color:#0a7a52;}
.design-d .verdict-unknown{background:rgba(123,138,160,.16);color:var(--grey);}

/* fact tiles */
.design-d .fact-tile{border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:.75rem .85rem;height:100%;}
.design-d .fact-tile .ft-l{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:800;display:flex;align-items:center;gap:.3rem;}
.design-d .fact-tile .ft-v{font-size:1rem;font-weight:800;color:var(--ink);margin-top:.2rem;}
.design-d .fact-tile .ft-s{font-size:.74rem;color:var(--muted);margin-top:.1rem;}

/* mitigation callout */
.design-d .mit-callout{border:1px solid rgba(43,125,233,.25);background:rgba(43,125,233,.05);border-radius:11px;padding:.85rem 1rem;}
.design-d .mit-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.55rem 0;border-top:1px dashed var(--line);}
.design-d .mit-row:first-of-type{border-top:none;}
.design-d .mit-val{font-family:ui-monospace,monospace;font-size:.8rem;background:#0f1b2d;color:#e2e8f0;border-radius:7px;padding:.24rem .5rem;}
.design-d .cost-badge{font-size:.66rem;font-weight:800;border-radius:20px;padding:.08rem .48rem;text-transform:uppercase;letter-spacing:.03em;}
.design-d .cost-low{background:rgba(10,157,99,.13);color:#0a7a52;}
.design-d .cost-med{background:rgba(224,127,25,.14);color:#b05b00;}
.design-d .cost-high{background:rgba(229,56,74,.13);color:#c0293a;}

/* boundary badges (network path) */
.design-d .bnd{font-size:.64rem;font-weight:800;border-radius:5px;padding:.06rem .34rem;text-transform:uppercase;}
.design-d .bnd-external{background:rgba(229,56,74,.13);color:#c0293a;}
.design-d .bnd-internal{background:rgba(123,138,160,.16);color:var(--grey);}
.design-d .bnd-customer{background:rgba(10,157,99,.13);color:#0a7a52;}

/* legend key */
.design-d .keylegend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;font-size:.74rem;color:var(--muted);}
.design-d .keylegend .k{display:inline-flex;align-items:center;gap:.35rem;}
.design-d .keylegend .sw{width:11px;height:11px;border-radius:3px;flex:none;}

/* incident timeline flat rows */
.design-d .trow{display:flex;align-items:center;gap:.9rem;padding:.6rem .9rem;border-bottom:1px solid var(--line);}
.design-d .trow:last-child{border-bottom:none;}
.design-d .trow:hover{background:rgba(43,125,233,.03);}
.design-d .trow .t-when{min-width:132px;flex:none;font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums;}
.design-d .trow .t-mid{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;}
.design-d .trow .t-right{flex:none;display:flex;align-items:center;gap:1rem;font-size:.76rem;color:var(--muted);white-space:nowrap;}
.design-d .trow .t-right .rk{display:inline-flex;align-items:center;gap:.25rem;}

/* stale data badge */
.design-d .stale-badge{font-size:.64rem;font-weight:800;border-radius:5px;padding:.06rem .34rem;background:rgba(224,127,25,.14);color:#b05b00;text-transform:uppercase;}

/* tl-dot colour variants — red and orange (green already in design-d.css) */
.design-d .tl-dot.red{background:var(--red);}
.design-d .tl-dot.orange{background:var(--orange);}
.design-d .tl-day{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700;margin:1.1rem 0 .45rem;}
.design-d .tl-day:first-child{margin-top:0;}
.design-d .top-row{display:grid;grid-template-columns:minmax(120px,1fr) 112px 1fr 64px;gap:.6rem;align-items:center;padding:.4rem 0;border-top:1px solid var(--line);font-size:.8rem;}
.design-d .top-row:first-child{border-top:none;}
.design-d .top-row .mono{font-family:ui-monospace,monospace;font-size:.76rem;color:#334155;}
.design-d .top-row .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);}
.design-d .bgp-mini > *,
.design-d .traffic-mini > *{flex:1 1 105px;min-width:0;}
.design-d .bgp-mini .value,
.design-d .traffic-mini .value{font-size:1.1rem;}

/* ---- DDoS D — final-review class top-up ---- */
/* meter-fill: ratio bar fill used in alert_channels_d.html */
.design-d .meter .meter-fill{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--blue),#0ab39c);}
/* afi-v4 badge (afi-v6 already defined above) */
.design-d .afi-v4{background:var(--panel-2);color:var(--muted);}
/* code-tag: monospace inline chip */
.design-d .code-tag{font-family:var(--font-mono,monospace);font-size:.78rem;background:var(--panel-2);border:1px solid var(--line);border-radius:.25rem;padding:.1rem .35rem;color:var(--muted);}
/* spec-list / spec-label / spec-value */
.design-d .spec-list{padding:.35rem 0;margin:0;list-style:none;}
.design-d .spec-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.design-d .spec-value{font-size:.9rem;font-weight:500;}
/* panel-card-header / panel-card-body (alias for pc-head / panel-body) */
.design-d .panel-card-header{padding:.55rem .9rem;border-bottom:1px solid var(--line);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;}
.design-d .panel-card-body{padding:.75rem .9rem;}
/* pc-sub: sub-label inside a panel-card header */
.design-d .pc-sub{font-size:.72rem;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;}
/* sc-label / sc-value: summary card label/value pair */
.design-d .sc-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.design-d .sc-value{font-size:.95rem;font-weight:600;}
/* pill-ok / pill-err: status pills */
.design-d .pill-ok{display:inline-block;padding:.15rem .55rem;border-radius:1rem;font-size:.72rem;font-weight:600;background:rgba(10,179,156,.15);color:#0ab39c;}
.design-d .pill-err{display:inline-block;padding:.15rem .55rem;border-radius:1rem;font-size:.72rem;font-weight:600;background:rgba(220,53,69,.13);color:#dc3545;}
/* keylegend-item: colour-key legend row */
.design-d .keylegend-item{display:flex;align-items:center;gap:.4rem;font-size:.8rem;margin-bottom:.25rem;}
/* backlink: small muted back-navigation link */
.design-d .backlink{color:var(--muted);font-size:.78rem;text-decoration:none;}
.design-d .backlink:hover{color:var(--blue);text-decoration:underline;}

/* ---- DDoS D — cross-page shared classes (audit top-up: were defined only in dashboard_d's page <style>, used unstyled on channels/rules/baselines/incident-detail) ---- */
/* .seg: segmented toggle (dashboard cards/table, baselines with/without-baseline) */
.design-d .seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;}
.design-d .seg button{border:none;background:var(--panel);color:var(--muted);font-size:.8rem;font-weight:700;padding:.4rem .7rem;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;}
.design-d .seg button.active{background:var(--blue);color:#fff;}
/* .seg with links (filters that are plain GET links, e.g. prefix-limit approvals) */
.design-d .seg a{font-size:.8rem;font-weight:700;padding:.4rem .7rem;color:var(--muted);background:var(--panel);text-decoration:none;display:inline-flex;align-items:center;}
.design-d .seg a:not(.active):hover{color:var(--ink);background:var(--panel-2);}
.design-d .seg a.active{background:var(--blue);color:#fff;}
.design-d .seg a .cnt{font-variant-numeric:tabular-nums;margin-left:.35rem;opacity:.85;}
/* bulk limit forms (staff: user limits, Tunnelbroker limits) */
.design-d .lim-field .field-label .mono{font-size:.68rem;color:var(--faint);margin-left:.3rem;}
.design-d .lim-input{max-width:9rem;font-variant-numeric:tabular-nums;}
.design-d .lim-now{font-size:.72rem;color:var(--muted);margin-top:.3rem;}
.design-d .lim-now b{color:var(--ink);font-weight:600;}
/* !important: .wiz-card input:not(...) is more specific and would keep the neutral border */
.design-d .lim-field.changed .lim-input,.design-d .tb-row.changed .lim-input{border-color:var(--orange)!important;box-shadow:0 0 0 3px rgba(224,127,25,.18)!important;}
.design-d .lim-field.changed .lim-now{color:var(--orange);font-weight:600;}
.design-d .save-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin:1rem -1.5rem -1.4rem;padding:.9rem 1.5rem;border-top:1px solid var(--line);background:var(--panel-2);border-radius:0 0 14px 14px;}
.design-d .ack{display:flex;gap:.6rem;align-items:flex-start;font-size:.84rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);margin:0;}
.design-d .ack input{margin-top:.2rem;}
.design-d .tb-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:.9rem;align-items:start;padding:.9rem 0;}
.design-d .tb-row + .tb-row{border-top:1px solid var(--line);}
.design-d .tb-row .name{font-weight:600;padding-top:.45rem;}
.design-d .tb-row .name small{display:block;font-weight:400;color:var(--muted);font-size:.72rem;font-family:ui-monospace,monospace;}
.design-d .tb-row .lim-input{max-width:100%;}
.design-d .tb-match{font-size:.72rem;color:var(--muted);margin-top:.3rem;}
.design-d .tb-match.zero{color:var(--orange);font-weight:600;}
@media (max-width:767px){.design-d .tb-row{grid-template-columns:1fr;}}
/* staff moderation (users, ASNs): search picker, selection bar, impact preview */
.design-d .pick-wrap{position:relative;}
.design-d .pick-menu{position:absolute;left:0;right:0;top:100%;margin-top:.25rem;z-index:5;background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 32px rgba(16,24,40,.15);overflow:hidden;}
.design-d .pick-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;font-size:.84rem;border-bottom:1px solid var(--line);}
.design-d .pick-item:last-child{border-bottom:none;}
.design-d .pick-item:hover{background:var(--panel-2);}
.design-d .pick-item .who{flex:1 1 auto;min-width:0;}
.design-d .pick-item .who b{font-weight:600;}
.design-d .pick-item .who small{display:block;color:var(--muted);font-size:.72rem;}
.design-d .pick-item.is-selected{opacity:.55;}
.design-d .pick-foot{padding:.45rem .8rem;font-size:.72rem;color:var(--faint);background:var(--panel-2);}
.design-d .mod-table td,.design-d .mod-table th{vertical-align:middle;}
.design-d .mod-remove{color:var(--muted);font-size:1rem;text-decoration:none;}
.design-d .mod-remove:hover{color:var(--red);}
.design-d .row-dim td{color:var(--muted);}
.design-d .sel-summary{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.84rem;}
.design-d .sel-summary .n{font-weight:700;color:var(--ink);}
.design-d .impact-block + .impact-block{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);}
.design-d .impact-title{font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:.5rem;}
.design-d .impact-title .pill{margin-left:.35rem;}
/* a search box inside a .wiz-card: keep room for the icon (the wiz-card input rule is 0,6,1) */
.design-d .wiz-card .search-wrap input{padding-left:2.2rem!important;}
/* .pc-title: panel-card section title (alert channels) */
.design-d .pc-title{font-weight:700;font-size:.82rem;color:var(--ink);}
/* .pill-warn: warning-tinted pill (channel failures / warning states) */
.design-d .pill-warn{background:rgba(224,127,25,.14);color:#b05b00;border-color:transparent;}

/* ===== DNS hosting (P5) — all scoped .dns-* (+ notif-error danger variant); controller-added, never retunes a shared selector ===== */
.design-d .dns-zone-name{font-family:ui-monospace,monospace;font-weight:700;font-size:.85rem;color:var(--ink);}
.design-d .dns-zone-src{font-size:.72rem;color:var(--faint);}
.design-d .dns-zone-title{font-family:ui-monospace,monospace;}
.design-d .dns-ztag{display:inline-block;border-radius:6px;padding:.12rem .42rem;font-size:.67rem;font-weight:700;margin-right:.55rem;}
.design-d .dns-ztag-fwd{background:rgba(160,80,220,.13);color:#7c3aed;}
.design-d .dns-ztag-rev{background:rgba(43,125,233,.12);color:#1c5bb8;}
.design-d .dns-st{display:inline-flex;align-items:center;gap:.3rem;border-radius:20px;padding:.12rem .5rem;font-size:.68rem;font-weight:700;margin-right:.25rem;}
.design-d .dns-st-active{background:rgba(10,157,99,.13);color:#0a7a52;}
.design-d .dns-st-pending{background:rgba(224,127,25,.14);color:#b05b00;}
.design-d .dns-st-failed,.design-d .dns-st-breach{background:rgba(229,56,74,.12);color:#c0293a;}
.design-d .dns-st-disabled{background:rgba(123,138,160,.16);color:var(--grey);}
.design-d .dns-src{display:inline-flex;align-items:center;gap:.25rem;border-radius:6px;padding:.12rem .42rem;font-size:.67rem;font-weight:700;}
.design-d .dns-src-portal{background:rgba(43,125,233,.12);color:#1c5bb8;}
.design-d .dns-src-external{background:rgba(160,80,220,.13);color:#7c3aed;}
.design-d .dns-src-neutral{background:rgba(123,138,160,.16);color:var(--grey);}
.design-d .dns-qps{min-width:120px;font-size:.78rem;}
.design-d .dns-qps-lim{color:var(--faint);}
.design-d .dns-qps-track{height:6px;border-radius:6px;background:var(--panel-2);overflow:hidden;margin-top:.25rem;}
.design-d .dns-qps-fill{height:100%;border-radius:6px;background:var(--green);}
.design-d .dns-qps-fill.is-warn{background:var(--orange);}
.design-d .dns-qps-fill.is-over{background:var(--red);}
.design-d .dns-code{margin:0;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:.8rem 1rem;font-family:ui-monospace,monospace;font-size:.76rem;color:var(--ink);white-space:pre-wrap;word-break:break-all;}
.design-d .dns-switch-btn{background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);font-size:.84rem;font-weight:600;cursor:pointer;}
.design-d .dns-switch-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;}
.design-d .dns-switch{position:relative;flex:0 0 auto;width:38px;height:22px;border-radius:999px;background:var(--line);transition:background .2s;}
.design-d .dns-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s;}
.design-d .dns-switch.on{background:var(--green);}
.design-d .dns-switch.on::after{transform:translateX(16px);}
.design-d .dns-legend{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;font-size:.78rem;font-weight:600;color:#878a99;margin-bottom:.5rem;}
.design-d .dns-legend-item{display:inline-flex;align-items:center;gap:.5rem;}
.design-d .dns-sw{display:inline-block;width:16px;height:10px;border-radius:3px;}
.design-d .dns-sw-area{background:linear-gradient(180deg,#3577f1,rgba(53,119,241,.2));}
.design-d .dns-sw-limit{width:18px;height:0;border-top:2px dashed #f06548;border-radius:0;}
.design-d .dns-empty{text-align:center;padding:2.5rem 1rem;color:var(--muted);}
.design-d .dns-empty > i{display:block;font-size:2rem;color:var(--faint);}
.design-d .dns-spin{opacity:0;transition:opacity .2s;margin-left:.4rem;color:var(--muted);}
.design-d .dns-spin.htmx-request{opacity:1;}
.design-d .dns-mode-seg{display:inline-flex;gap:.2rem;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:.3rem;}
.design-d .dns-mode-seg-link{background:transparent;border:none;color:var(--muted);font-weight:600;font-size:.85rem;padding:.45rem .8rem;border-radius:8px;display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;text-decoration:none;}
.design-d .dns-mode-seg-link:hover{color:var(--ink);}
.design-d .dns-mode-seg-link[aria-current="page"]{color:var(--ink);background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.12);}
.design-d .dns-pick-card{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;text-align:left;font:inherit;color:inherit;}
.design-d .dns-pick-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.design-d .notif-card.notif-error{background:rgba(229,56,74,.08);border-color:rgba(229,56,74,.25);color:#c0293a;}
/* these two are used by the DNS rows/actions (classic + D) but ship undefined in Velzon; define here for D */
.design-d .badge-soft-purple{background:rgba(160,80,220,.13);color:#7c3aed;}
/* ===== end DNS hosting ===== */

/* ===== housekeeping: banners, event pills, confirm rows (housekeeping page, public postpone page, BGP list) ===== */
.design-d .bgp-banner { display: flex; align-items: flex-start; gap: .7rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem .75rem 1.1rem; margin-bottom: 1rem;
  font-size: .82rem; color: var(--ink); position: relative; }
.design-d .bgp-banner > i { font-size: 1.1rem; line-height: 1.3; flex: 0 0 auto; }
.design-d .bgp-banner::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 12px 0 0 12px; }
.design-d .bgp-banner-amber { background: rgba(224, 127, 25, .06); }
.design-d .bgp-banner-amber::before { background: var(--orange); }
.design-d .bgp-banner-amber > i { color: var(--orange); }
.design-d .bgp-banner-info { background: rgba(43, 125, 233, .05); }
.design-d .bgp-banner-info::before { background: var(--blue); }
.design-d .bgp-banner-info > i { color: var(--blue); }
.design-d .bgp-banner-ok { background: rgba(10, 157, 99, .06); }
.design-d .bgp-banner-ok::before { background: var(--green); }
.design-d .bgp-banner-ok > i { color: var(--green); }
.design-d .bgp-banner-red { background: rgba(229, 56, 74, .06); }
.design-d .bgp-banner-red::before { background: var(--red); }
.design-d .bgp-banner-red > i { color: var(--red); }
.design-d .ev-pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 7px; padding: .16rem .5rem;
  font-size: .7rem; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.design-d .ev-pill i { font-size: .8rem; }
.design-d .ev-grey   { background: rgba(123, 138, 160, .12); color: var(--grey, #6b7a90); border-color: rgba(123, 138, 160, .3); }
.design-d .ev-orange { background: rgba(224, 127, 25, .14); color: var(--orange); border-color: rgba(224, 127, 25, .35); }
.design-d .ev-orange-light { background: transparent; color: var(--orange); border-color: rgba(224, 127, 25, .4); border-style: dashed; }
.design-d .ev-blue   { background: rgba(43, 125, 233, .1); color: var(--blue); border-color: rgba(43, 125, 233, .3); }
.design-d .ev-red-outline { background: transparent; color: var(--red); border-color: rgba(229, 56, 74, .45); }
.design-d .ev-red    { background: var(--red); color: #fff; border-color: var(--red); }
.design-d .ev-purple { background: rgba(124, 58, 237, .1); color: #7c3aed; border-color: rgba(124, 58, 237, .3); }
.design-d .ev-green  { background: rgba(10, 157, 99, .12); color: var(--green); border-color: rgba(10, 157, 99, .3); }
.design-d .hk-confirm-rows { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .84rem; margin: 0 0 .6rem; }
.design-d .hk-confirm-rows dt { color: var(--muted); font-weight: 600; }
.design-d .hk-confirm-rows dd { margin: 0; font-family: ui-monospace, monospace; color: var(--ink); }
.design-d .hk-foot-note { font-size: .74rem; color: var(--muted); margin: .5rem 0 0; }
/* ===== end housekeeping ===== */

/* ===== shared components promoted from page-local <style> blocks (design-d gap migration, phase 0) =====
   Sources: list_bgpsession_d.html (pills, badges, row cells, expand toggle, control bar),
   bgp_session_wizard_d.html (wizard buttons; --wiz-* tokens equal the global ones),
   community_goals/d/_cg_css_d.html (form-actions), kb/d/_kb_css_d.html (field-err).
   Pages that still define these inline keep working: same values. */
.design-d .ws-active  { display:inline-block; background:rgba(10,157,99,.1);   color:var(--green);  border:1px solid rgba(10,157,99,.25);  border-radius:6px; padding:.12rem .4rem; font-size:.67rem; font-weight:700; white-space:nowrap; }
.design-d .ws-bad     { display:inline-block; background:rgba(229,56,74,.12);  color:var(--red);    border:1px solid rgba(229,56,74,.3);   border-radius:6px; padding:.12rem .4rem; font-size:.67rem; font-weight:700; white-space:nowrap; }
.design-d .ws-info    { display:inline-block; background:rgba(43,125,233,.1);  color:var(--blue);   border:1px solid rgba(43,125,233,.25); border-radius:6px; padding:.12rem .4rem; font-size:.67rem; font-weight:700; white-space:nowrap; }
.design-d .ws-warn    { display:inline-block; background:rgba(224,127,25,.12); color:var(--orange); border:1px solid rgba(224,127,25,.3);  border-radius:6px; padding:.12rem .4rem; font-size:.67rem; font-weight:700; white-space:nowrap; }
.design-d .ws-muted   { display:inline-block; background:rgba(123,138,160,.12); color:var(--grey);  border:1px solid rgba(123,138,160,.3); border-radius:6px; padding:.12rem .4rem; font-size:.67rem; font-weight:700; white-space:nowrap; }
.design-d .ls-up      { display:inline-flex; align-items:center; gap:.3rem; background:rgba(10,157,99,.12);   color:var(--green);  border:1px solid rgba(10,157,99,.3);   border-radius:7px; padding:.18rem .5rem; font-size:.7rem; font-weight:700; white-space:nowrap; }
.design-d .ls-down    { display:inline-flex; align-items:center; gap:.3rem; background:rgba(229,56,74,.1);    color:var(--red);    border:1px solid rgba(229,56,74,.28);  border-radius:7px; padding:.18rem .5rem; font-size:.7rem; font-weight:700; white-space:nowrap; }
.design-d .ls-admin   { display:inline-flex; align-items:center; gap:.3rem; background:rgba(123,138,160,.12); color:var(--grey);   border:1px solid rgba(123,138,160,.3); border-radius:7px; padding:.18rem .5rem; font-size:.7rem; font-weight:700; white-space:nowrap; }
.design-d .ls-warn    { display:inline-flex; align-items:center; gap:.3rem; background:rgba(224,127,25,.12); color:var(--orange); border:1px solid rgba(224,127,25,.3);  border-radius:7px; padding:.18rem .5rem; font-size:.7rem; font-weight:700; white-space:nowrap; }
.design-d .ls-passive { display:inline-flex; align-items:center; gap:.3rem; background:rgba(123,138,160,.1);  color:var(--grey);   border:1px solid rgba(123,138,160,.28); border-radius:7px; padding:.18rem .5rem; font-size:.7rem; font-weight:700; white-space:nowrap; }
.design-d .afi4       { background:rgba(74,168,255,.14); color:#1c5bb8; border-radius:5px; padding:.1rem .35rem; font-size:.65rem; font-weight:700; }
.design-d .afi6       { background:rgba(189,138,255,.14); color:#7c3aed; border-radius:5px; padding:.1rem .35rem; font-size:.65rem; font-weight:700; }
.design-d .type-badge { background:var(--panel-2); color:#475569; border:1px solid var(--line); border-radius:5px; padding:.1rem .35rem; font-size:.65rem; font-weight:700; font-family:ui-monospace,monospace; }
.design-d .id-cell     { font-family:ui-monospace,monospace; color:var(--faint); font-size:.74rem; }
.design-d .router-name { font-family:ui-monospace,monospace; font-size:.78rem; color:#334155; }
.design-d .peer-asn    { font-family:ui-monospace,monospace; font-weight:700; color:#334155; font-size:.8rem; }
.design-d .peer-name   { color:var(--muted); font-size:.72rem; margin-top:.05rem; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.design-d .bgp-expand-toggle { color:var(--faint); text-decoration:none; background:transparent; border:none; cursor:pointer; padding:.1rem .3rem; }
.design-d .bgp-expand-toggle .expand-icon { transition:transform .2s; font-size:.95rem; }
.design-d .bgp-expand-toggle[aria-expanded="true"] .expand-icon { transform:rotate(90deg); color:var(--blue); }
.design-d .bgp-controlbar { align-items:center; }
.design-d .bgp-controlbar .search-wrap { margin:0; }
.design-d .form-actions { display:flex; align-items:center; gap:.6rem; margin-top:.5rem; flex-wrap:wrap; }
.design-d .form-actions .spacer { flex:1; }
.design-d .field-err { display:flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:700; color:#c0293a; margin-top:.3rem; }
.design-d .field-err i { font-size:.9rem; }
/* new shared rules */
.design-d .skel { height:14px; border-radius:6px; background:linear-gradient(90deg, var(--line) 0%, var(--panel-2) 50%, var(--line) 100%); background-size:200% 100%; animation:d-skel 1.2s ease-in-out infinite; }
@keyframes d-skel { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
/* spec-row values are mono + break-all for ids/addresses; .prose is for sentences (no mid-word breaks) */
.design-d .spec-row .v.prose { font-family:inherit; word-break:normal; overflow-wrap:anywhere; }
/* ===== end shared components ===== */
/* .d-form inputs set `background:` as a shorthand, which resets background-repeat; Bootstrap's
   is-invalid icon then tiles across the field. Show it once, as Bootstrap intends. */
.design-d .d-form .form-control.is-invalid,
.design-d .d-form .form-select.is-invalid { background-repeat: no-repeat; }
/* BGP Monitor (staff BGP alerts): severity donut, kind bars, selected rows, confirm target summary, snooze presets. */
.design-d .bgp-alert-chart{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.2rem;align-items:center;}
.design-d .bgp-kind-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 28px;gap:.6rem;align-items:center;font-size:.8rem;margin-bottom:.4rem;}
.design-d .bgp-kind-row .meter{height:8px;}
.design-d .bgp-sel-row > td{background:#f4f9ff;}
.design-d .bgp-alert-foot{font-size:.72rem;color:var(--muted);}
.design-d .tgt{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem;font-size:.8rem;margin:.5rem 0;}
.design-d .tgt > div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);margin-bottom:.15rem;}
.design-d .tgt span.k{color:var(--muted);}
.design-d .snooze-presets{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0 .3rem;}
.design-d .snooze-field{display:flex;align-items:center;gap:.5rem;font-size:.8rem;}
.design-d .snooze-field input{width:6.5rem;}
.design-d .bgp-mf-note{color:var(--muted);margin:.5rem 0 0;font-size:.8rem;}
.design-d .bgp-mf-list{margin:.3rem 0 0;padding-left:1.1rem;font-size:.8rem;}
.design-d .bgp-alert-chart-box{min-height:150px;border-radius:10px;background:var(--panel-2);padding:.25rem .4rem;}
.design-d .bgp-raw-note{font-size:.72rem;color:var(--faint);margin-top:.4rem;}
.design-d .card-alert[hidden]{display:none;}
.design-d .stat-sub.positive { color: var(--green); font-weight: 600; }
.design-d .stat-sub.negative { color: var(--red); font-weight: 600; }
.design-d .stat-sub.neutral  { color: var(--muted); font-weight: 600; }
.design-d .score-value { font-size: 2.6rem; font-weight: 800; line-height: 1; margin-bottom: .3rem; }
.design-d .tone-ok   { color: var(--green); }
.design-d .tone-warn { color: var(--orange); }
.design-d .tone-bad  { color: var(--red); }
.design-d .usage-fill.tone-ok   { background: var(--green); }
.design-d .usage-fill.tone-warn { background: var(--orange); }
.design-d .usage-fill.tone-bad  { background: var(--red); }

/* IXP peering wizard: stepper, step connectors, selection bar, snippet box. */
.design-d .wiz-stepper { display: flex; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.5rem; margin-top: 1.1rem; }
.design-d .wiz-stepper-inner { display: flex; align-items: center; width: 100%; }
.design-d .step-item { display: flex; align-items: center; gap: .55rem; }
.design-d .step-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: .8rem; border: 2px solid var(--line); background: var(--panel); color: var(--muted); }
.design-d .step-item.active .step-dot, .design-d .step-item.done .step-dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.design-d .step-label { font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.design-d .step-item.active .step-label, .design-d .step-item.done .step-label { color: var(--blue); }
.design-d .step-item.active .step-label { font-weight: 700; }
.design-d .wiz-summary-bar { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .65rem 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-bottom: 1.25rem; }
.design-d .wiz-summary-bar .s-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem; }
.design-d .wiz-summary-bar .s-item i { color: var(--blue); font-size: 1rem; }
.design-d .wiz-summary-bar .s-item .s-label { color: var(--muted); }
.design-d .wiz-summary-bar .s-item .s-val { font-weight: 700; color: var(--ink); }
.design-d .wiz-summary-bar .s-sep { width: 1px; height: 18px; background: var(--line); }
.design-d .step-connector { flex: 1; height: 2px; background: var(--line); margin: 0 .6rem; }
.design-d .step-connector.done { background: var(--blue); }
.design-d .peer-row-off td { color: var(--muted); }
.design-d .sticky-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; padding: .75rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 -4px 12px rgba(16, 24, 40, .06); }
.design-d .snippet-box { font-family: ui-monospace, monospace; font-size: .8rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: .75rem 1rem; white-space: pre; overflow-x: auto; margin: 0; }
/* Public pages (partials/base_public_d.html): no sidebar, so topbar and content span the full width. */
body.design-d.d-public #appTopbar { left: 0; }
body.design-d.d-public #appContent { margin-left: 0; }
body.design-d.d-public #appContent .wrap { margin-left: auto; margin-right: auto; }
@media (max-width: 575.98px) {
  body.design-d.d-public #appTopbar .pub-logo { height: 30px; width: auto; }
  body.design-d.d-public #appTopbar .crumb { display: none; } /* logo + Log in + Sign up fill a phone row */
}
/* Choice pickers: a modern radio selection. The real <input type=radio> stays (form value, keyboard, screen
   readers) but is visually hidden; the card / row / segment shows the state. Search: data-choice-filter. */
.design-d .choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.6rem;}
.design-d .choice-card{position:relative;display:flex;flex-direction:column;gap:.25rem;margin:0;padding:.75rem .9rem;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;}
.design-d .choice-card:hover{border-color:#b9d4f5;}
.design-d .choice-card input[type=radio],.design-d .choice-row input[type=radio],.design-d .seg-radio input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.design-d .choice-card:has(input:checked){border-color:var(--blue);background:#f6faff;box-shadow:0 0 0 3px rgba(43,125,233,.14);}
.design-d .choice-card:has(input:focus-visible),.design-d .seg-radio label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px;}
.design-d .choice-card:has(input:disabled){opacity:.55;cursor:not-allowed;}
.design-d .choice-card .choice-check{position:absolute;top:.6rem;right:.65rem;font-size:1.05rem;color:var(--blue);opacity:0;transition:opacity .15s;}
.design-d .choice-card:has(input:checked) .choice-check{opacity:1;}
.design-d .choice-title{font-weight:700;color:var(--ink);font-size:.88rem;padding-right:1.4rem;}
.design-d .choice-meta{font-size:.74rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;}
.design-d table.fw tr.choice-row{cursor:pointer;}
.design-d table.fw tr.choice-row:hover > td{background:var(--panel-2);}
.design-d table.fw tr.choice-row:has(input:checked) > td{background:#f4f9ff;}
.design-d table.fw tr.choice-row:has(input:checked) > td:first-child{box-shadow:inset 3px 0 0 var(--blue);}
.design-d table.fw tr.choice-row:has(input:disabled){cursor:not-allowed;opacity:.55;}
.design-d .choice-dot{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid #c3cbd6;vertical-align:middle;transition:border-color .15s,box-shadow .15s;}
.design-d tr.choice-row:has(input:checked) .choice-dot{border-color:var(--blue);box-shadow:inset 0 0 0 3px #fff;background:var(--blue);}
.design-d .seg-radio{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel);}
.design-d .seg-radio label{position:relative;margin:0;padding:.42rem .9rem;font-size:.8rem;font-weight:700;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;border-right:1px solid var(--line);}
.design-d .seg-radio label:last-child{border-right:none;}
.design-d .seg-radio label:hover{color:var(--ink);background:var(--panel-2);}
.design-d .seg-radio label:has(input:checked){background:var(--blue);color:#fff;}
.design-d .choice-empty{display:none;font-size:.8rem;color:var(--muted);padding:.6rem 0;}

/* ===== Button system — docs/superpowers/specs/2026-10-19-design-d-buttons-design.md =====
   Target classes: tool-btn [primary|danger|save] [lg], act-btn, pag-btn, seg-btn. */
.design-d .tool-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; line-height: 1.25;
  padding: .42rem .75rem; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel); color: #475569;
  cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: none;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
}
.design-d .tool-btn:hover {
  border-color: var(--blue); color: var(--blue); background: #f4f9ff;
}
/* size: form footer */
.design-d .tool-btn.lg {
  font-size: .9rem; padding: .6rem 1.5rem; border-radius: 11px; gap: .4rem;
}
/* primary (blue): toolbar primary, form navigation */
.design-d .tool-btn.primary {
  background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700;
}
.design-d .tool-btn.primary:hover {
  background: #2569c9; border-color: #2569c9; color: #fff;
}
/* save (green): form main action and "Add …" (user decision 2026-10-19) */
.design-d .tool-btn.save {
  background: var(--green); border-color: var(--green); color: #fff; font-weight: 700;
}
.design-d .tool-btn.save:hover {
  background: #088550; border-color: #088550; color: #fff;
}
/* danger */
.design-d .tool-btn.danger {
  background: rgba(229, 56, 74, .06); border-color: rgba(229, 56, 74, .3); color: var(--red);
}
.design-d .tool-btn.danger:hover {
  background: rgba(229, 56, 74, .13); border-color: rgba(229, 56, 74, .45); color: var(--red);
}
/* solid danger: final destructive confirmations only (ordinary delete/revoke stay .danger) */
.design-d .tool-btn.danger.solid {
  background: var(--red); border-color: var(--red); color: #fff; font-weight: 700;
}
.design-d .tool-btn.danger.solid:hover {
  background: #c92a3b; border-color: #c92a3b; color: #fff;
}
.design-d :is(.tool-btn, .tool-btn.danger.solid, .seg-btn, .act-btn, .pag-btn):is(:disabled, .disabled, [aria-disabled="true"], .htmx-request) {
  opacity: .55; cursor: not-allowed; pointer-events: none;
}
.design-d :is(.tool-btn, .tool-btn.danger.solid, .seg-btn, .act-btn, .pag-btn):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; box-shadow: none;
}
.design-d :is(.tool-btn.danger, .tool-btn.danger.solid, .act-btn.danger):focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}
/* segmented toggle: styles itself (no Bootstrap .btn), joins inside .btn-group */
.design-d .seg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .25rem .5rem; line-height: 1.25; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  text-decoration: none; cursor: pointer; position: relative; border-radius: .2rem;
}
.design-d .seg-btn:hover { border-color: var(--blue); color: var(--blue); z-index: 2; }
.design-d .seg-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; z-index: 3; }
.design-d .btn-check:checked + .seg-btn { background: var(--blue); border-color: var(--blue); color: #fff; z-index: 3; }
.design-d .btn-group > .seg-btn { border-radius: 0; }
.design-d .btn-group > .seg-btn:not(:first-child) { margin-left: -1px; }
.design-d .btn-group > .seg-btn:first-child { border-top-left-radius: .2rem; border-bottom-left-radius: .2rem; }
.design-d .btn-group > .seg-btn:last-child { border-top-right-radius: .2rem; border-bottom-right-radius: .2rem; }
/* ===== end button system ===== */

/* Internet visibility widgets (transit ops, data sources and KPI tiles) */
.vz-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;padding:1rem;}
.vz-kpi{border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem;}
.vz-kpi .k{font-size:.7rem;color:var(--faint);text-transform:uppercase;letter-spacing:.03em;font-weight:600;}
.vz-kpi .v{font-size:1.35rem;font-weight:700;color:var(--ink);}
.vz-kpi .s{font-size:.72rem;color:var(--muted);}
.vz-src{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.75rem;padding:1rem;}
.vz-srcc{border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;font-size:.8rem;color:var(--muted);}
.vz-srcc b{color:var(--ink);}
.vz-srcc .row2{display:flex;justify-content:space-between;gap:.5rem;padding:.15rem 0;}
.vz-note{font-size:.75rem;color:var(--faint);padding:.5rem 1rem .9rem;}
.alert-row.is-ended > td{opacity:.55;}