/* Rogue Wave firewall panel - one stylesheet, same design language as the Rogue Wave server center
   (near-black, amber accent, mono labels, small radii). Replaces style.css. */

:root {
  --bg: #0b0b0a; --bar: #0f0f0d; --card: #111110; --card-2: #151513; --hover: #1a1916;
  --line: #22211d; --line-2: #2c2b26; --line-3: #3a3933;
  --text: #f2efe6; --text-2: #d9d6cc; --text-3: #a7a499; --muted: #888578;
  --amber: #ff7a00; --amber-ink: #140800; --amber-wash: rgba(255, 122, 0, .07); --amber-line: rgba(255, 122, 0, .35);
  --grad: linear-gradient(90deg, #ff8a00 0%, #fd6d00 55%, #f54b00 100%);
  --green: #4dd18f; --green-wash: rgba(77, 209, 143, .08); --green-line: rgba(77, 209, 143, .3);
  --red: #f43f3f; --red-wash: rgba(244, 63, 63, .08); --red-line: rgba(244, 63, 63, .35);
  --yellow: #f5c542;
  --sans: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 6px; --r-sm: 4px;
  /* names older markup still uses */
  --text2: var(--text-2); --border: var(--line); --border2: var(--line-2); --card2: var(--card-2); --row: var(--card);
  --blue: var(--amber); --blue2: var(--amber); --blue3: var(--amber-line); --accent: var(--amber); --accent-line: var(--amber-line);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--amber); cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, .mono { font-family: var(--mono); }
code { color: var(--amber); font-size: 12px; }
.hidden { display: none !important; }
.muted, .dim, .small-muted { color: var(--muted); }
.muted { font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; }
.small-muted { font-size: 12px; }
.right { margin-left: auto; }
.err { color: var(--red); min-height: 1em; font-size: 13px; }
.red, b.red, .status-attack { color: var(--red) !important; }
.empty, .empty-mini { color: var(--muted); font-size: 13px; padding: 18px 4px; text-align: left; }
::selection { background: var(--amber); color: var(--amber-ink); }
body.role-tenant [data-admin] { display: none !important; }
body.role-admin [data-tenant-only] { display: none !important; }

/* ---------------------------------------------------------------- status bar + header */
.statusbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 30px; padding: 0 28px;
             background: var(--bar); border-bottom: 1px solid var(--line); font: 12px var(--mono); color: var(--muted); }
.statusbar > div { display: flex; gap: 18px; align-items: center; white-space: nowrap; overflow: hidden; }
.statusbar b { color: var(--text-3); font-weight: 500; }
.statusbar .pill { all: unset; font: inherit; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.statusbar .pill.green { color: var(--muted); }
.statusbar .pill.red, .statusbar .alerts { color: var(--red); }
.statusbar .warn { color: var(--amber); }
.statusbar .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; box-shadow: none; }
.statusbar .pill.green .dot { color: var(--green); }

header.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; height: 56px; padding: 0 28px;
             background: rgba(11, 11, 10, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.wm { font: 700 17px var(--sans); letter-spacing: -.02em; color: var(--text); }
.wm i { font-style: normal; color: var(--amber); margin: 0 1px; }
.wm-tag { font: 12px var(--mono); color: var(--muted); }
nav#nav { display: flex; gap: 2px; height: 100%; }
nav#nav a { display: flex; align-items: center; padding: 0 12px; color: var(--text-3); font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; }
nav#nav a:hover { color: var(--text); text-decoration: none; }
nav#nav a.active { color: var(--text); border-bottom-color: var(--amber); }
.hdr-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.cmd { position: relative; display: flex; align-items: center; width: 280px; }
.cmd input { width: 100%; padding: 8px 64px 8px 12px; font-size: 13px; }
.cmd kbd { position: absolute; right: 8px; font: 11px var(--mono); color: var(--muted); border: 1px solid var(--line-3); border-radius: 3px; padding: 1px 6px; pointer-events: none; }
.cmd-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r);
            box-shadow: 0 16px 40px rgba(0, 0, 0, .55); overflow: hidden; z-index: 40; }
.cmd-menu a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; color: var(--text-2); font-size: 13px; }
.cmd-menu a span { color: var(--muted); font: 12px var(--mono); }
.cmd-menu a.sel, .cmd-menu a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.user-btn { background: transparent !important; color: var(--text-2) !important; border: 1px solid var(--line-2) !important; font-weight: 500 !important; }
.user-btn:hover { border-color: var(--line-3) !important; color: var(--text) !important; }

/* ---------------------------------------------------------------- layout */
main { max-width: 1440px; margin: 0 auto; padding: 26px 28px 80px; }
.page-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font: 600 22px var(--sans); letter-spacing: -.015em; }
.crumbs { font: 13px var(--mono); color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs b { color: var(--text); font-weight: 500; }
.crumbs i { font-style: normal; margin: 0 6px; color: var(--line-3); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin-bottom: 14px;
         border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; }
.cards > .card.stat { border: 0; border-right: 1px solid var(--line); border-radius: 0; margin: 0; }
.cards > .card.stat:last-child { border-right: 0; }
.inline-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------------------------------------------------------------- cards */
.card, .table-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 14px; }
.table-card { padding: 0; overflow: hidden; }
.card-title { display: flex; align-items: center; gap: 12px; font: 500 12px var(--mono); color: var(--muted); text-transform: lowercase; letter-spacing: 0; margin-bottom: 14px; }
.card-title .right { margin-left: auto; }
.card-head { margin-bottom: 14px; }
.card-head h3 { margin: 0; font: 600 14px var(--sans); color: var(--text); }
.card-head p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 80ch; }
.card-head p b { color: var(--text-2); font-weight: 600; }
.card-head.row { display: flex; align-items: center; gap: 12px; }
.card-head.row .right { margin-left: auto; }
.small-link { font-size: 13px; }
.stat { padding: 16px 18px; }
.stat .label { font: 12px var(--mono); color: var(--muted); }
.stat .value { font: 500 26px var(--mono); color: var(--text); margin-top: 6px; letter-spacing: -.02em; }
.stat .value.red { color: var(--red); }
.stat .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.tile-bar { height: 2px; background: var(--line); margin: 10px 0 8px; border-radius: 2px; overflow: hidden; }
.tile-bar i { display: block; height: 100%; background: var(--amber); min-width: 3px; }
.tile-bar i.red { background: var(--red); }

/* ---------------------------------------------------------------- buttons + inputs */
button, .btn { font: 600 13px var(--sans); background: var(--amber); color: var(--amber-ink); border: 1px solid var(--amber); border-radius: var(--r-sm);
               padding: 7px 14px; cursor: pointer; line-height: 1.3; }
button:hover { filter: brightness(1.08); }
button.small, .btn.small { padding: 4px 10px; font-size: 12px; font-weight: 500; }
button.ghost { background: transparent; color: var(--text-2); border-color: var(--line-2); font-weight: 500; }
button.ghost:hover { color: var(--text); border-color: var(--line-3); background: var(--hover); filter: none; }
button.danger { background: transparent; color: var(--red); border-color: var(--red-line); }
button.danger:hover { background: var(--red-wash); filter: none; }
button.danger-text { color: var(--red) !important; }
button:disabled { opacity: .45; cursor: default; filter: none; }
.btn-group { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.btn-group button { border: 0; border-radius: 0; border-left: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-weight: 500; padding: 9px 16px; }
.btn-group button:first-child { border-left: 0; }
.btn-group button:hover { background: var(--hover); color: var(--text); filter: none; }
.btn-group button.primary { background: var(--amber); color: var(--amber-ink); font-weight: 600; }
.btn-group button.primary:hover { filter: brightness(1.08); }
.btn-group button.danger { color: var(--red); background: var(--card); }
.btn-group button kbd { font: 10px var(--mono); color: inherit; opacity: .55; margin-left: 8px; }
.actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.actions .note { color: var(--muted); font-size: 12px; }
input, select, textarea { font: 13px var(--sans); background: var(--bar); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; }
input::placeholder, textarea::placeholder { color: #5f5d54; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber-line); box-shadow: 0 0 0 3px rgba(255, 122, 0, .1); }
select { cursor: pointer; }
textarea { width: 100%; font-family: var(--mono); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid label, .limits-grid label, .block-label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font: 12px var(--mono); }
.limits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; }
.readonly input, .readonly select, .readonly textarea { opacity: .6; pointer-events: none; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.toolbar select, .toolbar input { min-width: 150px; }
.toolbar input.search { flex: 1; max-width: 380px; }
.toolbar .spacer { flex: 1; }
.toolbar .count { color: var(--muted); font: 12px var(--mono); }

/* toggles */
.toggle { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bar); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.toggle .t-label { font-weight: 500; color: var(--text); font-size: 13px; }
.toggle .t-help { color: var(--muted); font-size: 12px; }
.switches, .toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.switch { position: relative; width: 34px; height: 19px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider { position: absolute; inset: 0; background: var(--line-2); border-radius: 19px; transition: background .15s; cursor: pointer; }
.switch .slider:before { content: ""; position: absolute; width: 13px; height: 13px; left: 3px; top: 3px; background: var(--text-3); border-radius: 50%; transition: transform .15s, background .15s; }
.switch input:checked + .slider { background: var(--amber); }
.switch input:checked + .slider:before { transform: translateX(15px); background: var(--amber-ink); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px var(--amber-line); }
.toggle.warn input:checked + .slider { background: var(--red); }

/* ---------------------------------------------------------------- pills, badges, status */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--card); font: 12px var(--mono); color: var(--text-2); }
.pill.clickable { cursor: pointer; }
.pill.red { color: var(--red); border-color: var(--red-line); }
.pill.green { color: var(--green); border-color: var(--green-line); }
.pill.amber, .pill.blue { color: var(--amber); border-color: var(--amber-line); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dot.pulse, .spill.attack i { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.badge { display: inline-block; padding: 1px 7px; border-radius: var(--r-sm); font: 500 11px var(--mono); color: var(--text-3); border: 1px solid var(--line-2); background: var(--bar); vertical-align: middle; }
.badge.red { color: var(--red); border-color: var(--red-line); background: var(--red-wash); }
.badge.green { color: var(--green); border-color: var(--green-line); background: var(--green-wash); }
.badge.amber, .badge.blue { color: var(--amber); border-color: var(--amber-line); background: var(--amber-wash); }
.badge.dim { color: var(--muted); }
.tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-sm); font: 500 11.5px var(--mono); color: var(--amber); border: 1px solid var(--amber-line); background: var(--amber-wash); }
.st, .spill { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--mono); color: var(--text-3); white-space: nowrap; }
.st .dot, .spill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.st.up, .spill.ok { color: var(--green); }
.st.down, .spill.attack { color: var(--red); }
.st.pending, .spill.warn { color: var(--amber); }
.st.disabled, .spill.off { color: var(--muted); }
.spill.bh { color: var(--red); }
.spill.bh i { border-radius: 1px; }
.status-inline { font-weight: 600; }
.status-mitigated { color: var(--green); }

/* ---------------------------------------------------------------- tables */
table.attacks, table.list, .tbl, .rules { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.attacks th, table.list th, .tbl th, .rules th { text-align: left; font: 500 12px var(--mono); color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.attacks td, table.list td, .tbl td, .rules td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text-2); }
table.attacks tr:last-child td, table.list tr:last-child td, .tbl tr:last-child td { border-bottom: 0; }
.card table.list th:first-child, .card .tbl th:first-child, .card table.list td:first-child, .card .tbl td:first-child { padding-left: 0; }
.card table.list th:last-child, .card .tbl th:last-child, .card table.list td:last-child, .card .tbl td:last-child { padding-right: 0; }
table.attacks tr.row, .tbl tr.click, table.list tr.clickable { cursor: pointer; }
table.attacks tr.row:hover td, .tbl tr.click:hover td, table.list tr.clickable:hover td { background: var(--hover); }
table.attacks tr.row.open td { background: var(--card-2); }
table.attacks td.ip, .tbl .b { font-family: var(--mono); color: var(--text); font-weight: 500; }
table.attacks td .sub, .tbl td .sub { display: block; color: var(--muted); font-size: 12px; font-family: var(--sans); font-weight: 400; }
table.attacks td.size, .num { font-family: var(--mono); }
table.attacks th.num, table.attacks td.num, table.list td.num, table.list th.num, .tbl .num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.attacks td.chev, .chev { color: var(--muted); text-align: right; }
table.attacks td.actions, .tbl .acts { white-space: nowrap; text-align: right; }
table.attacks td.actions button, .tbl .acts button { margin-left: 6px; }
table.attacks tr.detail > td { padding: 0 14px 14px; background: var(--card-2); }
table.attacks tr.missing td { opacity: .55; }
table.list td.blue { color: var(--amber); font-weight: 500; font-family: var(--mono); }
table.list td.dim { color: var(--muted); }
table.list tr.other td { color: var(--muted); }
table.list td.wrap { white-space: normal; }
.detail { padding-top: 4px; }
.detail .card { margin-bottom: 12px; background: var(--card); }
tr.ev-attack td:nth-child(2) { color: var(--red); } tr.ev-node td:nth-child(2) { color: var(--amber); }
tr.ev-policy td:nth-child(2) { color: var(--text); } tr.ev-auth td:nth-child(2) { color: var(--green); }
.tbl td:first-child.mono, .tbl .time { font-family: var(--mono); color: var(--muted); }

/* ---------------------------------------------------------------- attack detail (NeoProtect-style) */
.attack-head { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.attack-head h3 { margin: 0; font: 600 18px var(--sans); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.attack-head .sub { color: var(--muted); font: 12.5px var(--mono); margin-top: 6px; }
.attack-head .kpis { display: flex; gap: 40px; margin-left: auto; }
.attack-head .kpis .label { font: 12px var(--mono); color: var(--muted); }
.attack-head .kpis .big { font: 500 28px var(--mono); color: var(--text); letter-spacing: -.02em; }
.chart-wrap { position: relative; height: 240px; }
.chart-wrap.tall { height: 280px; }
.legend { display: inline-flex; gap: 14px; font: 12px var(--mono); color: var(--muted); text-transform: lowercase; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.range-sel { display: inline-flex; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; margin-left: auto; }
.range-sel a { padding: 4px 10px; font: 12px var(--mono); color: var(--muted); border-left: 1px solid var(--line-2); text-transform: none; }
.range-sel a:first-child { border-left: 0; }
.range-sel a:hover { color: var(--text); text-decoration: none; background: var(--hover); }
.range-sel a.active { color: var(--amber-ink); background: var(--amber); }
.map-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }
.map { background: var(--bar); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; min-height: 220px; }
.map svg { width: 100%; height: auto; display: block; }
.map path { fill: #1d1c18; stroke: #0b0b0a; stroke-width: .4; }
.bars { display: flex; flex-direction: column; gap: 7px; }
.bars .bar-row { display: grid; grid-template-columns: minmax(110px, 1.1fr) 2fr 52px; gap: 12px; align-items: center; font-size: 13px; }
.bars .name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .name .sub { display: block; color: var(--muted); font: 11.5px var(--mono); }
.bars .bar { position: relative; height: 22px; background: var(--bar); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.bars .bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(244, 63, 63, .22), rgba(244, 63, 63, .75)); min-width: 4px; }
.bars .bar.blue > i { background: linear-gradient(90deg, rgba(255, 138, 0, .22), rgba(245, 75, 0, .8)); }
.bars .bar span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 500 12px var(--mono); color: var(--text); }
.bars .pct { color: var(--muted); font: 12px var(--mono); text-align: right; }
.collapsible > .card-title { cursor: pointer; user-select: none; margin-bottom: 0; }
.collapsible > .card-title .chev { margin-left: auto; transition: transform .15s; }
.collapsible.open > .card-title { margin-bottom: 14px; }
.collapsible.open > .card-title .chev { transform: rotate(180deg); }
.collapsible > .body { display: none; }
.collapsible.open > .body { display: block; }
.tech .card { background: var(--bar); }
.banner, .alert { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--r); margin-bottom: 14px; font-size: 13.5px;
                  background: #170f08; border: 1px solid #33200f; color: var(--text-2); }
.banner b:first-child, .alert > b:first-child { color: var(--amber); }
.alert.attack { background: #1a0c0c; border-color: #3d1717; }
.alert.attack > b:first-child { color: var(--red); }
.alert .right { margin-left: auto; }
pre.log { background: var(--bar); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; max-height: 280px; overflow: auto; font: 12px var(--mono); margin: 0; white-space: pre-wrap; color: var(--text-2); }
.session-banner { background: #170f08; border: 1px solid #33200f; color: var(--text-2); border-radius: var(--r); padding: 9px 14px; font-size: 13px; margin-bottom: 14px; }
.session-banner.error { background: var(--red-wash); border-color: var(--red-line); color: var(--red); }

/* ---------------------------------------------------------------- overview node cards, policies, rules (admin pages) */
.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.node-card { margin: 0; cursor: pointer; }
.node-card:hover { border-color: var(--line-3); }
.node-card .nc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.node-card .nc-head b { font: 600 15px var(--mono); }
.node-card .nc-head .loc { color: var(--muted); font-size: 12px; }
.node-card .nc-head .st { margin-left: auto; }
.node-card .nc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.node-card .nc-stats .label { color: var(--muted); font: 11.5px var(--mono); }
.node-card .nc-stats .v { font: 500 15px var(--mono); }
.node-card .nc-err { color: var(--red); font-size: 12px; margin-top: 8px; word-break: break-all; }
.pol-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pol-head h3 { margin: 0; font: 600 16px var(--mono); }
.pol-head .ips { font: 12px var(--mono); color: var(--text-3); }
.rules tr.blocked td, .rules-tbl tr.blocked td { background: var(--red-wash); }
.rules tr.blocked td.port { text-decoration: line-through; text-decoration-color: var(--red-line); }
.rules td.act { text-align: right; white-space: nowrap; }
.rules td.act button { margin-left: 6px; }
.rule-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.rule-form input, .rule-form select { width: 120px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 13px; margin: 0; }
.kv dt { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.kv dd { margin: 0; word-break: break-all; color: var(--text-2); }
.tenant-detail .grid2 { align-items: start; }
.ip-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ip-form input, .ip-form select { min-width: 120px; }
.token-box { background: var(--bar); border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; font: 13px var(--mono); word-break: break-all; color: var(--amber); margin: 10px 0; user-select: all; }

/* ---------------------------------------------------------------- modal, toast, login */
.modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); display: flex; align-items: flex-start; justify-content: center; padding: 70px 16px; z-index: 45; overflow: auto; }
.modal { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 22px 24px; width: 560px; max-width: 100%; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.modal.wide { width: 860px; }
.modal h3 { margin: 0 0 16px; font: 600 16px var(--sans); }
.modal .full { grid-column: 1 / -1; }
.modal .actions { justify-content: flex-end; }
.toast { position: fixed; bottom: 22px; right: 22px; background: var(--card); border: 1px solid var(--line-2); border-left: 3px solid var(--amber); padding: 11px 16px;
         border-radius: var(--r-sm); z-index: 60; max-width: 440px; font-size: 13px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.toast.error { border-left-color: var(--red); color: #ffd0d0; }
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg); }
.login-box { width: 380px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 30px 30px 26px; }
.login-box .login-brand { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.login-box h2 { margin: 0; font: 600 20px var(--sans); }
.login-box .hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.login-step { display: flex; flex-direction: column; gap: 12px; }
.login-step label { display: flex; flex-direction: column; gap: 6px; font: 12px var(--mono); color: var(--muted); }
.login-step input { padding: 10px 12px; font-size: 14px; }
.login-box button[type=submit] { padding: 10px 14px; font-size: 14px; }
.login-box .err:empty { display: none; }
.login-links { display: flex; justify-content: space-between; font-size: 12.5px; }
.choice-list { display: flex; flex-direction: column; gap: 8px; }
.choice-list button { text-align: left; background: var(--bar); border-color: var(--line-2); color: var(--text); font-weight: 500; }
.choice-list button:hover { border-color: var(--amber-line); filter: none; }

/* ---------------------------------------------------------------- IP list */
.ip-table td.addr b { display: block; font: 500 14px var(--mono); color: var(--text); }
.ip-table td.addr span { color: var(--muted); font-size: 12px; }
.ip-table tr.attack td.addr b { color: var(--red); }
.ip-table .bar-cell { width: 120px; }
.mini-bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 5px; }
.mini-bar i { display: block; height: 100%; background: var(--amber); }
.empty-state { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 40px 24px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); }
.empty-state b { color: var(--text); font-size: 14px; }

/* ---------------------------------------------------------------- one IP (server-center layout) */
.srv-head { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.srv-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0; font: 700 40px/1.1 var(--mono); letter-spacing: -.02em; color: var(--text); }
.srv-title .state { font: 500 15px var(--mono); }
.srv-title .state.ok { color: var(--green); } .srv-title .state.attack { color: var(--red); } .srv-title .state.warn { color: var(--amber); } .srv-title .state.off { color: var(--muted); }
.srv-title .state small { color: var(--muted); font-size: 13px; margin-left: 4px; }
.srv-meta { margin-top: 8px; font: 13px var(--mono); color: var(--text-3); }
.srv-meta i { font-style: normal; color: var(--line-3); margin: 0 8px; }
.srv-head .btn-group { margin-left: auto; }
.srv-grid { display: grid; grid-template-columns: 196px minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.side { position: sticky; top: 76px; display: flex; flex-direction: column; }
.side .sh { font: 12px var(--mono); color: var(--muted); padding: 14px 10px 6px; }
.side .sh:first-child { padding-top: 0; }
.side a { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: var(--r-sm); color: var(--text-2); font-size: 14px;
          border-left: 2px solid transparent; }
.side a span { font: 12px var(--mono); color: var(--muted); }
.side a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.side a.active { background: var(--hover); color: var(--text); border-left-color: var(--amber); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.rail { display: flex; flex-direction: column; gap: 12px; }
.rail .rc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 6px 6px; }
.rail .rc.dashed { border-style: dashed; padding: 12px 14px; }
.rail .rh { font: 12px var(--mono); color: var(--muted); padding: 0 10px 6px; }
.rail .rc.dashed .rh { padding: 0 0 6px; }
.rail a { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: var(--r-sm); color: var(--text-2); font-size: 14px; }
.rail a kbd { font: 11px var(--mono); color: var(--muted); }
.rail a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.rail a.danger { color: var(--red); }
.rail .owner b { display: block; color: var(--amber); font-size: 14px; margin-bottom: 2px; }
.rail .owner span { color: var(--text-3); font-size: 13px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); margin-bottom: 14px; overflow: hidden; }
.tile { padding: 16px 18px; border-right: 1px solid var(--line); min-width: 0; }
.tile:last-child { border-right: 0; }
.tile label { display: block; font: 12px var(--mono); color: var(--muted); }
.tile .tv { font: 500 26px var(--mono); color: var(--text); margin-top: 6px; letter-spacing: -.02em; white-space: nowrap; }
.tile .tv small { font-size: 14px; color: var(--text-3); margin-left: 4px; }
.tile .ts { color: var(--muted); font-size: 12.5px; }
.conn { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 14px; }
.conn label { font: 12px var(--mono); color: var(--muted); }
.conn code { font: 500 14px var(--mono); color: var(--text); }
.conn .right { color: var(--muted); font-size: 12.5px; }
.rows { display: flex; flex-direction: column; }
.rows > div { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rows > div:last-child { border-bottom: 0; }
.rows label { font: 13px var(--mono); color: var(--muted); }
.rows b { font-weight: 500; color: var(--text); }
.rows b.ok { color: var(--green); } .rows b.off { color: var(--muted); } .rows b.attack { color: var(--red); }
.rows a { font-size: 13px; }
.sec-title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.sec-title h2 { margin: 0; font: 600 18px var(--sans); white-space: nowrap; flex-shrink: 0; }
.sec-title p { margin: 0; color: var(--muted); font-size: 13px; }

/* firewall section */
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; }
.seg button { background: transparent; color: var(--text-3); border: 0; border-left: 1px solid var(--line-2); border-radius: 0; padding: 6px 14px; font-weight: 500; font-size: 13px; }
.seg button:first-child { border-left: 0; }
.seg button:hover { background: var(--hover); color: var(--text); filter: none; }
.seg button.on { background: var(--amber); color: var(--amber-ink); font-weight: 600; }
.seg.sm button { padding: 3px 10px; font: 12px var(--mono); }
.def-grid { display: flex; flex-direction: column; }
.def-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.def-row:last-child { border-bottom: 0; }
.def-row b { display: block; font: 500 13.5px var(--mono); color: var(--text); }
.def-row span { color: var(--muted); font-size: 12.5px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.presets .lbl { font: 12px var(--mono); color: var(--muted); margin-right: 6px; }
.preset { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 12px; background: var(--bar); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--text); text-align: left; }
.preset b { font: 600 13px var(--sans); }
.preset span { font: 11px var(--mono); color: var(--muted); }
.preset:hover:not(:disabled) { border-color: var(--amber-line); background: var(--amber-wash); filter: none; }
.preset.done { opacity: .4; }
.add-rule { display: grid; grid-template-columns: max-content minmax(150px, 1.3fr) minmax(150px, 1fr) minmax(130px, .8fr) auto; gap: 8px; align-items: center;
            padding: 12px; background: var(--bar); border: 1px solid var(--line); border-radius: var(--r); }
.hint { color: var(--muted); font-size: 12.5px; margin: 8px 2px 12px; min-height: 1em; }
.proto { display: inline-block; font: 600 11px var(--mono); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--text-3); }
.proto.udp { color: var(--amber); border-color: var(--amber-line); }
select.inline { padding: 5px 8px; font-size: 13px; min-width: 150px; background: var(--bar); }

/* allowlist */
.allow-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.allow-forms form { padding: 12px; background: var(--bar); border: 1px solid var(--line); border-radius: var(--r); }
.allow-forms label { display: block; font: 12px var(--mono); color: var(--muted); margin-bottom: 8px; }
.inrow { display: flex; gap: 8px; }
.inrow input { flex: 1; min-width: 0; }
.allow-forms .hint { margin: 8px 2px 0; }
.usage { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 12px var(--mono); margin: 2px 0 8px; }
.usage .bar { flex: 0 0 160px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.usage .bar i { display: block; height: 100%; background: var(--amber); min-width: 2px; }

/* protection */
.profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.profile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; text-align: left; background: var(--bar);
           border: 1px solid var(--line-2); border-radius: var(--r); color: var(--text); }
.profile b { font: 600 14px var(--sans); }
.profile span { color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.45; }
.profile em { position: absolute; top: 10px; right: 10px; font: 600 10.5px var(--mono); font-style: normal; color: var(--amber); }
.profile.on { border-color: var(--amber-line); background: var(--amber-wash); }
.profile:hover { border-color: var(--line-3); filter: none; }
.switch-list { display: flex; flex-direction: column; }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.sw-row:last-child { border-bottom: 0; }
.sw-row b { display: block; font-weight: 500; color: var(--text); font-size: 13.5px; }
.sw-row span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.kv-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.kv-list > div:last-child { border-bottom: 0; }
.kv-list span { font-family: var(--mono); color: var(--muted); }
.kv-list b { font-weight: 500; text-align: right; word-break: break-all; }
.att-row { display: grid; grid-template-columns: 116px 1fr auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13.5px; align-items: baseline; }
.att-row:last-child { border-bottom: 0; }
.att-row .t { font: 12.5px var(--mono); color: var(--muted); }
.att-row .num { text-align: right; font: 500 13px var(--mono); color: var(--text); }
.att-row:hover b { color: var(--amber); }

@media (max-width: 1180px) {
  .srv-grid { grid-template-columns: 180px minmax(0, 1fr); }
  .rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 860px) {
  .statusbar { padding: 0 16px; } header.top { padding: 0 16px; gap: 14px; height: auto; flex-wrap: wrap; padding-top: 8px; }
  nav#nav { order: 3; width: 100%; overflow-x: auto; height: 42px; }
  .cmd { width: 200px; }
  main { padding: 18px 16px 60px; }
  .srv-grid { grid-template-columns: 1fr; }
  .side { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .side .sh { display: none; }
  .side a { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 5px 10px; font-size: 13px; }
  .side a.active { border-color: var(--amber-line); border-radius: var(--r-sm); }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile:nth-child(2) { border-right: 0; } .tile:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .grid2, .grid4, .map-row, .allow-forms, .form-grid { grid-template-columns: 1fr; }
  .add-rule { grid-template-columns: 1fr 1fr; } .add-rule .seg { grid-column: 1 / -1; justify-self: start; }
  .srv-title { font-size: 28px; }
  .srv-head .btn-group { margin-left: 0; }
  .rows > div { grid-template-columns: 110px 1fr auto; }
  .attack-head .kpis { margin-left: 0; gap: 24px; }
}

/* orange gradient accent (same as the Rogue Wave site headline) */
.wm i { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
button, .btn, .btn-group button.primary, .seg button.on, .range-sel a.active { background: var(--grad); border-color: #fd6d00; }
button.ghost, button.danger, .btn-group button, .seg button, .choice-list button, .preset, .profile, .user-btn, .hero-ip .copy { background-image: none; }
.btn-group button.primary { background: var(--grad); }
.switch input:checked + .slider, .tile-bar i, .mini-bar i, .usage .bar i { background: var(--grad); }
.tile-bar i.red { background: var(--red); }
nav#nav a.active, .tabs a.active { border-image: var(--grad) 1; }
.side a.active { border-left-color: #ff8a00; }
.toast { border-left-color: #fd6d00; }
.srv-title .state.warn, .statusbar .warn { color: var(--amber); }
.accent-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* styled dropdowns (ui.js) */
select.dd-native { display: none !important; }
.dd { position: relative; display: inline-flex; min-width: 140px; vertical-align: middle; }
.dd .dd-btn { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
              font: 13px var(--sans); color: var(--text); background: var(--bar); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; min-height: 35px; }
.dd .dd-btn:hover { border-color: var(--line-3); }
.dd .dd-btn:focus-visible, .dd.open .dd-btn { border-color: var(--amber-line); box-shadow: 0 0 0 3px rgba(255, 122, 0, .1); }
.dd .dd-btn:disabled { opacity: .5; cursor: default; }
.dd.placeholder .dd-label { color: #5f5d54; }
.dd .dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd .dd-caret { flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .12s; }
.dd.open .dd-caret { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--amber); }
.dd .dd-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: 360px; max-height: 320px; overflow: auto; z-index: 35;
               background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 4px; box-shadow: 0 18px 44px rgba(0, 0, 0, .6); }
.dd.up .dd-menu { top: auto; bottom: calc(100% + 4px); }
.dd .dd-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px 7px 12px; border-radius: var(--r-sm); cursor: pointer; border-left: 2px solid transparent; }
.dd .dd-item b { font-weight: 500; font-size: 13px; color: var(--text-2); }
.dd .dd-item span { font-size: 12px; color: var(--muted); line-height: 1.35; white-space: normal; }
.dd .dd-item.hl { background: var(--hover); }
.dd .dd-item.hl b { color: var(--text); }
.dd .dd-item.sel { border-left-color: #ff8a00; }
.dd .dd-item.sel b { color: var(--amber); }
.dd .dd-item.dis { opacity: .4; cursor: default; }
.dd .dd-group { font: 11.5px var(--mono); color: var(--muted); padding: 8px 12px 4px; }
.dd.inline { min-width: 160px; }
.dd.inline .dd-btn { padding: 5px 9px; min-height: 30px; }
.toolbar .dd { min-width: 160px; }
.add-rule .dd, .form-grid .dd, .modal .dd { width: 100%; }

/* drop reasons, captures, shadow test */
.why { display: block; margin-top: 2px; font: 500 11px var(--mono); color: var(--red); opacity: .85; }
.cap-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; }
.cap-form label, .shadow-grid label > span { display: block; font: 500 11px var(--mono); color: var(--muted); text-transform: lowercase; margin-bottom: 6px; }
.cap-form .primary { margin-left: auto; }
.shadow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 16px; align-items: end; }
.shadow-grid em { font-style: normal; color: var(--text-3); }
.shadow-grid input[type=number] { width: 100%; }
.shadow-grid .chk { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.shadow-grid .chk span { display: inline; margin: 0; font: inherit; color: inherit; text-transform: none; }
.shadow-grid .btns { grid-column: 1 / -1; display: flex; gap: 8px; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 640px) { .cap-form .primary { margin-left: 0; width: 100%; } }
table.attacks td.num, table.list td.num { white-space: nowrap; }

/* port sources, blocklist */
.allow-forms.k3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.allow-forms .inrow > * { min-width: 0; }
.allow-forms .inrow .dd { flex: 1; min-width: 0; }
.allow-forms.k1 { grid-template-columns: 1fr; }
button.who { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
button.who i { font-style: normal; opacity: .6; }
button.who.on { color: var(--amber); border-color: var(--amber-line); }
tr.from-row > td { background: var(--bar); padding: 14px !important; }
.from-box .from-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.from-box .from-head span { color: var(--muted); font-size: 13px; }
.from-box .tbl { margin-bottom: 10px; }
@media (max-width: 900px) { .allow-forms.k3 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- left sidebar (replaces the top bar) */
:root { --side-w: 232px; }
header.top { display: none; }
.sidenav { position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 30; display: flex; flex-direction: column; gap: 14px;
           padding: 18px 14px 14px; background: #0d0d0c; border-right: 1px solid var(--line); }
.sidenav .brand { display: flex; align-items: baseline; gap: 10px; padding: 2px 8px 6px; }
.sidenav .cmd { width: auto; }
.sidenav .cmd input { padding: 8px 58px 8px 10px; font-size: 13px; }
.sidenav .cmd-menu { width: 300px; }
nav#nav { display: flex; flex-direction: column; gap: 2px; height: auto; overflow-y: auto; flex: 1; }
nav#nav .nh { font: 500 11px var(--mono); color: var(--muted); text-transform: lowercase; padding: 14px 10px 6px; }
nav#nav .nh:first-child { padding-top: 4px; }
nav#nav a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--r-sm); border: 0; border-left: 2px solid transparent;
            color: var(--text-3); font-size: 14px; font-weight: 500; }
nav#nav a svg { width: 17px; height: 17px; flex: none; opacity: .75; }
nav#nav a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
nav#nav a.active { background: var(--hover); color: var(--text); border-image: none; border-left: 2px solid #ff8a00; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
nav#nav a.active svg { opacity: 1; color: #ff8a00; }
.nav-badge { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--red); color: #fff; font: 600 11px/18px var(--mono); text-align: center; }
.side-foot { border-top: 1px solid var(--line); padding-top: 12px; }
.side-foot .user-btn { width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-toggle { display: none; }
.statusbar, main { margin-left: var(--side-w); }
main { max-width: none; }
.page-head .right { margin-left: auto; }
@media (max-width: 860px) {
  .sidenav { position: sticky; top: 0; width: auto; inset: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidenav .brand { flex: 1; padding: 0; align-items: center; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; margin-left: auto; padding: 8px; background: transparent !important; border: 1px solid var(--line-2); }
  .nav-toggle i { display: block; width: 16px; height: 2px; background: var(--text-2); }
  .sidenav .cmd, nav#nav, .side-foot { display: none; width: 100%; }
  body.nav-open .sidenav .cmd, body.nav-open nav#nav, body.nav-open .side-foot { display: flex; }
  body.nav-open nav#nav { max-height: 70vh; }
  .statusbar, main { margin-left: 0; }
}
.side { top: 20px; }
/* with the sidebar the content area is narrower: the action rail moves under the page earlier */
@media (max-width: 1520px) {
  .srv-grid { grid-template-columns: 180px minmax(0, 1fr); }
  .rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.srv-grid > section { min-width: 0; overflow-x: auto; }

/* overview */
.ov-ip { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px; gap: 14px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ov-ip:last-child { border-bottom: 0; }
.ov-ip:hover { background: var(--hover); }
.ov-ip .a b { display: block; font: 500 14px var(--mono); color: var(--text); }
.ov-ip .a span { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-ip .num { text-align: right; font: 13px var(--mono); color: var(--text-2); }
#page-overview .grid2 { align-items: start; }
#page-overview .grid2 .card { min-height: 100%; }

/* sign-in: Turnstile + VPS panel button */
.ts-box { min-height: 65px; }
.login-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font: 12px var(--mono); }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.btn-vps { display: flex; justify-content: center; padding: 10px 14px; border: 1px solid var(--line-3); border-radius: var(--r-sm); color: var(--text); font-weight: 600; font-size: 14px; }
.btn-vps:hover { border-color: #ff8a00; text-decoration: none; background: var(--hover); }
.login-or.hidden, .btn-vps.hidden, .ts-box.hidden { display: none; }

/* alerts */
.alerts-intro { display: flex; align-items: center; gap: 18px; }
.alerts-intro > div { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.alerts-intro span { color: var(--muted); font-size: 13px; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line-2); font: 11.5px var(--mono); color: var(--text-2); }
tr.paused td { opacity: .55; }
.alert-form .wide { grid-column: 1 / -1; }
.alert-form .lbl { display: block; font: 500 11px var(--mono); color: var(--muted); margin-bottom: 8px; }
.alert-form .lbl em { font-style: normal; color: var(--text-3); }
.alert-form .checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.alert-form .btns .dim { align-self: center; font-size: 12.5px; }
.secret-box { padding: 12px; background: var(--bar); border: 1px solid var(--line-2); border-radius: var(--r-sm); word-break: break-all; cursor: copy; margin-top: 10px; }

/* change history */
.diff { font: 12.5px/1.6 var(--mono); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.diff div { padding: 1px 10px; white-space: pre-wrap; word-break: break-all; }
.diff div b { display: inline-block; width: 16px; font-weight: 600; }
.diff .add { background: rgba(77, 209, 143, .08); color: #9fe6c0; }
.diff .del { background: rgba(244, 63, 63, .08); color: #f5a3a3; }
table.hist td:nth-child(2) { max-width: 520px; }

/* ================= polish: dropdowns, status pills, port rules ================= */
.dd .dd-btn { background: var(--bar); border-color: var(--line-2); min-height: 36px; padding: 7px 12px; font-weight: 500; }
.dd .dd-caret { width: 6px; height: 6px; border-color: var(--text-3); }
.dd .dd-menu { position: fixed; top: 0; left: 0; z-index: 80; max-width: 380px; max-height: 340px; padding: 5px; border-radius: 10px;
               background: #141412; border: 1px solid var(--line-3); box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02); }
.dd.up .dd-menu { bottom: auto; }
.dd .dd-item { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border: 0; border-radius: 7px; }
.dd .dd-item .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dd .dd-item b { font-weight: 500; font-size: 13.5px; color: var(--text); }
.dd .dd-item span { font-size: 12px; color: var(--muted); }
.dd .dd-item.hl { background: rgba(255, 255, 255, .05); }
.dd .dd-item.sel { background: rgba(255, 122, 0, .08); }
.dd .dd-item.sel b { color: #ffa040; }
.dd .dd-item .ck { flex: none; width: 10px; height: 5px; border-left: 2px solid transparent; border-bottom: 2px solid transparent; transform: rotate(-45deg) translateY(-2px); }
.dd .dd-item.sel .ck { border-color: #ff8a00; }
.dd .dd-item.hidden { display: none; }
.dd .dd-search { position: sticky; top: -5px; margin: -5px -5px 5px; padding: 6px; background: #141412; border-bottom: 1px solid var(--line); }
.dd .dd-search input { width: 100%; padding: 7px 10px; font-size: 13px; }
.dd.inline .dd-btn { min-height: 32px; padding: 5px 10px; font-size: 13px; }

.pill-st { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 9px; border-radius: 999px; font: 500 12px var(--sans);
           line-height: 1.4; white-space: nowrap; vertical-align: middle; border: 1px solid var(--line-2); color: var(--text-3); background: rgba(255, 255, 255, .02); }
.pill-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill-st.live { color: #ff6b6b; border-color: rgba(244, 63, 63, .4); background: rgba(244, 63, 63, .1); }
.pill-st.live i { animation: pulse 1.4s ease-in-out infinite; }
.pill-st.good { color: var(--green); border-color: rgba(77, 209, 143, .35); background: rgba(77, 209, 143, .08); }
.pill-st.part { color: #ffa040; border-color: var(--amber-line); background: var(--amber-wash); }
.pill-st.bad { color: #ff7b7b; border-color: rgba(244, 63, 63, .35); background: rgba(244, 63, 63, .08); }
.attack-head h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.attack-head h3 .tag { margin: 0; }
table.attacks td .pill-st + .sub { margin-top: 4px; }

/* port rules */
.def-grid.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.def-cell { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--bar); border: 1px solid var(--line); border-radius: var(--r); }
.def-cell .h b { display: block; font: 600 13.5px var(--sans); color: var(--text); }
.def-cell .h span { color: var(--muted); font-size: 12.5px; }
.def-cell .seg { align-self: flex-start; }
.add-port { display: grid; grid-template-columns: max-content minmax(150px, 1fr) minmax(200px, 1.4fr) minmax(120px, .7fr) max-content; gap: 12px; align-items: end; }
.add-port label > span { display: block; font: 500 11px var(--mono); color: var(--muted); margin-bottom: 6px; }
.add-port label > span em { font-style: normal; color: var(--text-3); }
.add-port input { width: 100%; min-height: 36px; }
.add-port .dd { width: 100%; }
.add-port .seg button { min-height: 34px; }
.add-port .f-go button { min-height: 36px; padding: 0 18px; }
.presets { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); gap: 8px; }
.preset { flex-direction: row; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 999px; }
.preset b { font: 600 12.5px var(--sans); }
.preset span { font: 11px var(--mono); }
.preset.done { opacity: .45; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush .pad { padding: 16px 18px 6px; }
.card.flush .empty-mini.pad { padding: 4px 18px 18px; }
.card.flush .rules-tbl th:first-child, .card.flush .rules-tbl td:first-child { padding-left: 18px; }
.card.flush .rules-tbl th:last-child, .card.flush .rules-tbl td:last-child { padding-right: 18px; }
.rules-tbl td { vertical-align: middle; }
.port-cell { display: flex; align-items: center; gap: 10px; }
.port-cell b { font: 600 15px var(--mono); color: var(--text); min-width: 56px; }
button.who { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2);
             font: 500 12.5px var(--sans); color: var(--text-2); }
button.who:hover { border-color: var(--line-3); color: var(--text); }
button.who.on { color: #ffa040; border-color: var(--amber-line); background: var(--amber-wash); }
button.who .chev { width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
button.who .chev.up { transform: rotate(-135deg) translate(-1px, -1px); }
.rules-tbl tr.blocked td { background: rgba(244, 63, 63, .04); }
.rules-tbl .acts { opacity: .8; }
.rules-tbl tr:hover .acts { opacity: 1; }
@media (max-width: 1100px) { .add-port { grid-template-columns: max-content 1fr 1fr; } .add-port .f-filter { grid-column: span 2; } }
@media (max-width: 760px) { .def-grid.three, .add-port { grid-template-columns: 1fr; } .add-port .f-filter { grid-column: auto; } }

/* advanced (staff) */
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }
.adv-f { display: flex; flex-direction: column; gap: 4px; position: relative; }
.adv-f > span { font: 500 11px var(--mono); color: var(--muted); }
.adv-f > span em { font-style: normal; color: var(--text-3); }
.adv-f input { width: 100%; }
.adv-f small { font-size: 11.5px; color: var(--muted); }
.adv-f code { position: absolute; top: 0; right: 0; font: 10px var(--mono); color: #4f4d46; }
.adv-f.changed input { border-color: var(--amber-line); background: var(--amber-wash); }
.adv-f.changed > span::after { content: " · changed"; color: #ffa040; }
details.bursts { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
details.bursts summary, .card details summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
details.bursts .adv-grid { margin-top: 12px; }
.sm-in { width: 120px; padding: 5px 8px; min-height: 30px; }
.chips-kv { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-kv span { padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; color: var(--text-2); }
.chips-kv code { font: 11px var(--mono); color: var(--muted); margin-right: 4px; }
pre.pol-file { margin: 12px 0 0; padding: 12px 14px; max-height: 420px; overflow: auto; background: var(--bar); border: 1px solid var(--line); border-radius: var(--r-sm); font: 12px/1.55 var(--mono); color: var(--text-2); }
.adv-save { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 35%); z-index: 5; }
.adv-save .amber { color: #ffa040; }

/* toasts */
#toast { display: none !important; }
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: flex; flex-direction: column; gap: 10px; width: 360px; max-width: calc(100vw - 32px); pointer-events: none; }
.tst { position: relative; pointer-events: auto; display: grid; grid-template-columns: 22px minmax(0, 1fr) 20px; gap: 12px; align-items: start; padding: 13px 14px 15px;
       background: #151513; border: 1px solid var(--line-3); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); overflow: hidden;
       animation: tst-in .22s cubic-bezier(.2, .9, .3, 1.2); }
.tst.out { animation: tst-out .2s ease-in forwards; }
.tst .ic { width: 22px; height: 22px; border-radius: 50%; position: relative; }
.tst.good .ic { background: rgba(77, 209, 143, .14); box-shadow: inset 0 0 0 1px rgba(77, 209, 143, .45); }
.tst.good .ic::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tst.bad .ic { background: rgba(244, 63, 63, .14); box-shadow: inset 0 0 0 1px rgba(244, 63, 63, .5); }
.tst.bad .ic::before, .tst.bad .ic::after { content: ""; position: absolute; left: 10px; top: 5px; width: 2px; height: 12px; background: #ff6b6b; border-radius: 1px; transform: rotate(45deg); }
.tst.bad .ic::after { transform: rotate(-45deg); }
.tst .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
.tst .tx b { font: 600 13.5px var(--sans); color: var(--text); }
.tst .tx span { font-size: 12.5px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.tst .x { all: unset; cursor: pointer; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius: 5px; color: var(--muted); font-size: 16px; }
.tst .x:hover { background: var(--hover); color: var(--text); }
.tst .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; animation: tst-bar linear forwards; }
.tst.good .bar { background: var(--green); opacity: .6; }
.tst.bad .bar { background: #ff6b6b; opacity: .7; }
.tst.hold .bar { animation-play-state: paused; }
@keyframes tst-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes tst-out { to { opacity: 0; transform: translateX(16px); } }
@keyframes tst-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) { #toasts { left: 16px; right: 16px; bottom: 16px; width: auto; } }

/* advanced: switches + defaults */
.adv-sw { align-items: start; }
.adv-sw .sw-row b { display: block; font: 600 13.5px var(--sans); color: var(--text); }
.adv-sw .sw-row span:not(.switch):not(.slider) { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.adv-sw .sw-row.warn input:checked + .slider { background: var(--red); }
.adv-sw .def-row span { font: 11px var(--mono); }
.adv-sw .def-row .dd { min-width: 150px; }
.adv-sw { display: flex; flex-direction: column; gap: 0; }
.adv-sw .switch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 32px; }
.adv-sw .switch-list .sw-row:last-child { border-bottom: 1px solid var(--line); }
.adv-sw .def-row { flex-wrap: wrap; }
.adv-sw .def-row b { font: 600 13.5px var(--sans); }

/* advanced: full-width cards, defaults in a grid */
.adv-sw { align-items: stretch; }
.adv-sw > .card { width: auto; }
.adv-sw .def-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 32px; }
.adv-sw .def-row { border-bottom: 1px solid var(--line); }
.adv-sw .def-row .seg button { white-space: nowrap; }

/* sensitivity */
.sens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sens-opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r);
            border: 1px solid var(--line-2); background: var(--bar); transition: border-color .12s, background .12s; }
.sens-opt:hover:not(:disabled) { border-color: var(--line-3); }
.sens-opt:disabled { cursor: default; opacity: .6; }
.sens-opt.on { border-color: #ff8a00; background: var(--amber-wash); }
.sens-top { display: flex; align-items: center; justify-content: space-between; }
.sens-top b { font: 600 14px var(--sans); color: var(--text); }
.sens-top em { font: normal 500 11px var(--mono); color: #ffa040; }
.sens-txt { font-size: 12.5px; color: var(--muted); line-height: 1.45; min-height: 3em; }
.sens-nums { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--line); padding-top: 8px; }
.sens-nums span { display: flex; justify-content: space-between; gap: 10px; font: 12px var(--mono); color: var(--text-2); }
.sens-nums i { font-style: normal; color: var(--muted); font-family: var(--sans); }
@media (max-width: 900px) { .sens { grid-template-columns: 1fr; } }
.chip.health { color: #ffa040; border-color: var(--amber-line); }

/* outbound */
.out-form { grid-template-columns: max-content minmax(150px, 1fr) max-content minmax(120px, .8fr) max-content; }
@media (max-width: 1100px) { .out-form { grid-template-columns: 1fr 1fr; } }

/* allowlist: Cloudflare offer */
.cf-offer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; margin-bottom: 14px;
  border: 1px dashed var(--line-2); border-radius: var(--r); }
.cf-offer b { display: block; margin-bottom: 2px; }
.cf-offer span { color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .cf-offer { flex-direction: column; align-items: stretch; } }

/* sensitivity: automatic tightening during attacks */
.esc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.esc .sw-row { margin: 0; }
.esc-state { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--amber-line); background: var(--amber-wash); }
.esc-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-top: 6px; flex: none; }
.esc-state.live { border-color: var(--red-line); background: var(--red-wash); }
.esc-state.live i { background: var(--red); animation: escpulse 1.4s ease-in-out infinite; }
.esc-state b { display: block; }
.esc-state span { color: var(--text-2); font-size: 13px; }
@keyframes escpulse { 50% { opacity: .3; } }

/* IP page: lay out by the width the page actually gets (the sidebar takes 232px), not the window,
   so nothing scrolls sideways between ~860 and ~1250px */
main { container-type: inline-size; container-name: main; }
.srv-grid > section { overflow-x: visible; }
.srv-grid > section .card:has(table), .table-card { overflow-x: auto; }   /* a wide table scrolls inside its card, never the page */
@container main (max-width: 960px) {
  .srv-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .side { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .side .sh { display: none; }
  .side a { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 5px 10px; font-size: 13px; gap: 8px; }
  .side a.active { border-color: var(--amber-line); border-left-color: var(--amber-line); border-radius: var(--r-sm); }
  .rail { grid-column: auto; }
  .srv-head .btn-group { margin-left: 0; flex-wrap: wrap; }
}
@container main (max-width: 820px) {
  .grid2, .grid4, .map-row, .allow-forms, .allow-forms.k3, .form-grid, .sens, .def-grid.three { grid-template-columns: 1fr; }
  .add-rule, .add-port, .out-form { grid-template-columns: 1fr 1fr; }
  .add-rule .seg, .add-port .f-filter { grid-column: 1 / -1; justify-self: start; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .srv-title { font-size: 28px; }
}
@container main (max-width: 520px) {
  .add-rule, .add-port, .out-form { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .inrow { flex-wrap: wrap; }
  .inrow input { flex: 1 1 100%; }
  .card-head.row { flex-wrap: wrap; row-gap: 8px; }
  .card-head.row .seg.right { margin-left: 0; }
}

.cf-offer .cf-acts { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }

/* detected services */
.scan-tbl td { vertical-align: top; }
.scan-tbl tr.done { opacity: .65; }
.scan-tbl .sub { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.scan-tbl .sub.risk { color: var(--amber); }
.scan-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.scan-acts .chk { margin-left: auto; }
@container main (max-width: 820px) { .scan-acts .chk { margin-left: 0; } }

/* TLS clients */
.tls-tbl tr.blocked td { opacity: .75; }

/* in-app confirmation (ui.js ask) */
.ask-bg { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .62); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: ask-in .12s ease-out; }
.ask { width: 440px; max-width: 100%; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); padding: 20px 22px 18px; }
.ask-h { font: 600 15px/1.45 var(--sans); color: var(--text); margin-bottom: 8px; }
.ask p { margin: 0 0 8px; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.ask-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ask-btns button { min-width: 88px; }
.ask-btns button.danger { background: var(--red); background-image: none; border-color: var(--red); color: #fff; }
.ask-btns button.danger:hover { filter: brightness(1.1); }
@keyframes ask-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ask-pop { from { transform: translateY(6px) scale(.98); } to { transform: none; } }
.ask { animation: ask-pop .14s ease-out; }

/* checkboxes in the panel's style (switches keep their own look) */
input[type=checkbox]:not(.switch input) { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex: none;
  border: 1px solid var(--line-3); border-radius: 4px; background: var(--card-2); display: inline-grid; place-content: center;
  cursor: pointer; vertical-align: middle; transition: background .12s, border-color .12s; }
input[type=checkbox]:not(.switch input):hover { border-color: var(--amber-line); }
input[type=checkbox]:not(.switch input):focus-visible { outline: 2px solid var(--amber-line); outline-offset: 2px; }
input[type=checkbox]:not(.switch input):checked { background: var(--amber); border-color: var(--amber); }
input[type=checkbox]:not(.switch input):checked::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--amber-ink); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
input[type=checkbox]:not(.switch input):disabled { opacity: .5; cursor: default; }
label.chk { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; color: var(--text-2); font-size: 13px; line-height: 1.4; }
label.chk:hover span { color: var(--text); }

/* account card */
.modal.acct { width: 400px; }
.acct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.acct-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--amber-wash);
  border: 1px solid var(--amber-line); color: var(--amber); font: 700 17px var(--sans); }
.acct-id b { display: block; font-size: 15px; color: var(--text); }
.acct-id span { font-size: 12.5px; color: var(--muted); }
.acct-kv { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.acct-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.acct-btns button { min-width: 92px; }
/* detected services: daily auto-scan switch */
.scan-auto { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; cursor: pointer; font-size: 13px; color: var(--text-2); }
.scan-auto:hover { color: var(--text); }
@container main (max-width: 820px) { .scan-auto { margin-left: 0; } }

/* compact on/off option (switch + short label, details in the tooltip) */
.opt-sw { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: var(--text-2); user-select: none; }
.opt-sw:hover { color: var(--text); }
.scan-auto { margin-left: auto; }

/* TLS clients */
.tls-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.tls-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tls-tile .k { font: 12px var(--mono); color: var(--muted); }
.tls-tile b { font: 600 22px var(--sans); color: var(--text); line-height: 1.25; }
.tls-tile b .pill-st { font-size: 13px; vertical-align: middle; }
.tls-tile .s { font-size: 12.5px; color: var(--muted); }
.tls-prog { height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; margin-top: 6px; }
.tls-prog i { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
.tls-rule { margin: 0 0 14px; }
.card.flush .tls-tbl th:first-child, .card.flush .tls-tbl td:first-child { padding-left: 18px; }
.card.flush .tls-tbl th:last-child, .card.flush .tls-tbl td:last-child { padding-right: 18px; }
.tls-tbl td.acts { text-align: right; }
.tls-tbl .fp { font: 500 12.5px var(--mono); color: var(--text); background: var(--card-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 3px 8px; }
.tls-tbl .share { display: grid; grid-template-columns: minmax(60px, 120px) auto auto; align-items: center; gap: 10px; justify-content: start; }
.tls-tbl .share .bar { height: 6px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
.tls-tbl .share .bar i { display: block; height: 100%; background: var(--amber); border-radius: 6px; }
.tls-tbl .share .n { color: var(--text); font-variant-numeric: tabular-nums; }
.tls-tbl .share .p { font: 12px var(--mono); color: var(--muted); }
.tls-tbl tr.blocked td { opacity: .8; }
@container main (max-width: 820px) { .tls-tiles { grid-template-columns: 1fr; } }

/* traffic chart tooltip */
.chart-tip { position: absolute; pointer-events: none; z-index: 5; min-width: 170px; background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); padding: 9px 11px; opacity: 0; transition: opacity .1s; }
.chart-tip .ct-t { font: 11.5px var(--mono); color: var(--muted); margin-bottom: 6px; }
.chart-tip .ct-r { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.chart-tip .ct-r + .ct-r, .chart-tip .ct-s + .ct-r { margin-top: 5px; }
.chart-tip .ct-r i { width: 9px; height: 9px; border-radius: 3px; }
.chart-tip .ct-r b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-tip .ct-s { padding-left: 17px; font: 11.5px var(--mono); color: var(--muted); }

/* opened attack: one compact card with tabs */
table.attacks tr.detail > td { padding: 4px 12px 14px; }
.atk { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.atk > .empty { padding: 18px; }
.atk-head { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; padding: 14px 16px 12px 18px; }
.atk-id { min-width: 0; }
.atk-head h3 { margin: 0; font: 600 16px var(--sans); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.atk-head h3 .tag { margin: 0; }
.atk-head .sub { color: var(--muted); font: 12px var(--mono); margin-top: 5px; }
.atk-kpis { display: flex; gap: 26px; margin-left: auto; }
.atk-kpis span { display: block; font: 11.5px var(--mono); color: var(--muted); }
.atk-kpis b { font: 500 18px var(--mono); color: var(--text); letter-spacing: -.01em; white-space: nowrap; }
.atk-kpis b.green { color: var(--green); } .atk-kpis b.amber { color: var(--amber); } .atk-kpis b.red { color: var(--red); }
.atk-x { align-self: flex-start; padding: 3px 8px; color: var(--muted); }
.atk-tabs { display: flex; align-items: center; gap: 2px; padding: 0 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-x: auto; }
.atk-tabs > a { padding: 10px 9px 9px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.atk-tabs > a:hover { color: var(--text); text-decoration: none; }
.atk-tabs > a.on { color: var(--text); border-bottom-color: var(--amber); }
.atk-tabs > a .n { font: 11px var(--mono); color: var(--muted); }
.atk-tabs .range-sel { margin: 0 4px 0 auto; flex-shrink: 0; }
.atk-pane { display: none; padding: 14px 18px 16px; }
.atk-pane.on { display: block; }
.atk-pane h4 { margin: 0 0 8px; font: 12px var(--mono); color: var(--muted); font-weight: 400; }
.atk-cap { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; font-size: 12px; }
.atk .chart-wrap { height: 220px; }
.atk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; align-items: start; }
.atk-grid.map-g { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.atk .map { min-height: 0; padding: 4px; }
.atk .map svg { max-height: 230px; }
.atk table.list { width: 100%; }
@container main (max-width: 820px) { .atk-grid, .atk-grid.map-g { grid-template-columns: 1fr; } .atk-kpis { margin-left: 0; gap: 20px; } }
.atk table.list { font-size: 13px; }
.atk table.list th { padding: 6px 10px; }
.atk table.list td { padding: 7px 10px; }
.atk table.list th:first-child, .atk table.list td:first-child { padding-left: 0; }
.atk table.list th:last-child, .atk table.list td:last-child { padding-right: 0; }
.atk table.list td .sub { display: block; color: var(--muted); font: 11.5px var(--mono); margin-top: 2px; }
.atk table.list td .sub .why { display: inline; margin: 0; }

/* traffic path: first card of the IP page's rail */
.rail .flow-rc { padding: 12px; }
.rail .flow-rc .rh { display: flex; flex-direction: column; gap: 2px; padding: 0 2px 10px; }
.rail .flow-rc .rh span { font-size: 11px; color: var(--text-3); }
.flow { display: flex; flex-direction: column; gap: 10px; }
.fl-step { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 48px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card-2); }
.fl-step + .fl-step::before { content: ""; position: absolute; left: 50%; top: -11px; height: 10px; margin-left: -1px; border-left: 2px solid var(--line-2); }
.fl-step.end { border-style: dashed; background: transparent; }
button.fl-step { cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
button.fl-step:hover, button.fl-step:focus-visible { border-color: var(--line-3); background: var(--hover); box-shadow: inset 3px 0 0 var(--amber); }
.fl-step > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl-step b { font: 600 13px var(--sans); color: var(--text); }
.fl-step i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.fl-step em { margin-left: auto; font: normal 600 15px var(--mono); color: var(--text); }
.fl-step.bad { border-color: var(--red-line); } .fl-step.bad i { color: var(--red); }
.fl-step.warn i { color: #ffa040; }
.fl-step.live { box-shadow: inset 3px 0 0 var(--red); } .fl-step.live i { color: #ff7b7b; }

/* port rules: on/off switch and allow/deny pill */
.rules-tbl th.en, .rules-tbl td.en { width: 46px; }
.rules-tbl td.en .switch { display: inline-block; vertical-align: middle; }
.rules-tbl td .sub { display: block; font: 11.5px var(--mono); color: var(--muted); margin-top: 3px; }
.rules-tbl tr.off td:not(.en):not(.acts) { opacity: .45; }
.rules-tbl tr.off td { background: transparent; }
.act-pill { all: unset; box-sizing: border-box; cursor: pointer; display: inline-block; min-width: 56px; text-align: center; padding: 3px 12px; border-radius: 999px;
  font: 600 12px var(--sans); border: 1px solid transparent; transition: filter .12s; }
.act-pill.allow { color: var(--green); background: rgba(77, 209, 143, .1); border-color: rgba(77, 209, 143, .28); }
.act-pill.deny { color: #ff7b7b; background: rgba(244, 63, 63, .1); border-color: rgba(244, 63, 63, .3); }
.act-pill:hover { filter: brightness(1.25); }
.act-pill:focus-visible { outline: 2px solid var(--amber-line); outline-offset: 2px; }

/* sensitivity levels */
.sens-opt { gap: 10px; padding: 14px 16px 12px; }
.sens-top { justify-content: flex-start; gap: 10px; }
.sens-top em { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: rgba(255, 138, 0, .12); border: 1px solid var(--amber-line); }
.sens-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sens-meter i { width: 4px; border-radius: 1px; background: var(--line-3); }
.sens-meter i:nth-child(1) { height: 6px; } .sens-meter i:nth-child(2) { height: 10px; } .sens-meter i:nth-child(3) { height: 14px; }
.sens-meter[data-l="1"] i:nth-child(-n+1), .sens-meter[data-l="2"] i:nth-child(-n+2), .sens-meter[data-l="3"] i { background: var(--amber); }
.sens-txt { min-height: 2.9em; }
.sens-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; flex-direction: row; padding-top: 10px; }
.sens-nums span { display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 0 8px; border-left: 1px solid var(--line); }
.sens-nums span:first-child { padding-left: 0; border-left: 0; }
.sens-nums b { font: 600 15px var(--mono); color: var(--text); }
.sens-nums i { font: 11px var(--sans); color: var(--muted); }

/* open a port: who can reach it, on the same form */
.add-port .f-note { grid-column: 1 / 3; }
.add-port .f-from { grid-column: 3 / -2; }
.add-port .f-cf { align-self: end; min-height: 36px; display: flex; align-items: center; }
.card-head .drop-all { margin-left: 12px; }
@media (max-width: 1100px) { .add-port .f-note, .add-port .f-from, .add-port .f-cf { grid-column: 1 / -1; } }

/* rule notes */
.rules-tbl td.note-cell { max-width: 220px; }
.note-btn { all: unset; box-sizing: border-box; cursor: text; display: block; max-width: 100%; padding: 4px 8px; margin-left: -8px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid transparent; }
.note-btn:hover, .note-btn:focus-visible { border-color: var(--line-2); background: var(--card-2); }
.note-btn.empty { color: var(--text-3); font-size: 12px; opacity: 0; }
.rules-tbl tr:hover .note-btn.empty, .note-btn.empty:focus-visible { opacity: 1; }
.note-in { width: 100%; min-width: 120px; min-height: 30px; padding: 4px 8px; font-size: 13px; }

/* attack card: the public report */
.atk-sh { align-self: flex-start; }
.atk-share { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--card-2); }
.atk-share.hidden { display: none; }
.atk-share .ash-img img { display: block; width: 100%; border-radius: var(--r-sm); border: 1px solid var(--line-2); }
.atk-share .ash-b { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.atk-share .ash-b b { font: 600 14px var(--sans); color: var(--text); }
.atk-share .ash-b > span { font-size: 13px; color: var(--muted); max-width: 640px; }
.atk-share .ash-l { display: flex; gap: 8px; width: 100%; max-width: 640px; }
.atk-share .ash-l input { flex: 1; min-width: 0; font: 12.5px var(--mono); }
@container main (max-width: 820px) { .atk-share { grid-template-columns: 1fr; } }
.atk-share .ash-img { max-width: 380px; }

/* Port rules: Open ports / Outbound cards with an Add form inside */
.ports-count { font: 12.5px var(--mono); color: var(--muted); margin-right: 10px; white-space: nowrap; }
.card-head .ch-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card-head .ch-t span { font-size: 12.5px; color: var(--muted); max-width: 640px; }
.addport { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card-2); }
.addport .ap-row { display: grid; grid-template-columns: max-content minmax(140px, 1fr) minmax(180px, 1.3fr) minmax(120px, .8fr); gap: 12px; align-items: end; }
.addport .ap-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.addport .ap-f > span { font: 500 11px var(--mono); color: var(--muted); }
.addport .ap-f > span em { font-style: normal; color: var(--text-3); }
.addport .ap-f input, .addport .ap-f select { width: 100%; min-height: 36px; }
.addport .seg button { min-height: 34px; }
.addport .ap-hint { margin: -6px 0 0; }
.addport .ap-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 12px var(--mono); color: var(--muted); }
.addport .ap-multi b { font: 600 12.5px var(--mono); color: var(--text); padding: 4px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); }
.addport .ap-multi b.done { color: var(--text-3); }
.addport .ap-cf { align-self: flex-start; }
.addport .ap-cf i { font-style: normal; color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.addport .ap-common { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.addport .ap-common > span { font: 11px var(--mono); color: var(--muted); margin-right: 4px; }
.addport .ap-go { display: flex; justify-content: flex-end; gap: 8px; }
.addport .hidden { display: none; }
.note-btn.auto { color: var(--muted); font-style: italic; }
.note-btn.auto:hover { color: var(--text-2); }
@container main (max-width: 820px) { .addport .ap-row { grid-template-columns: 1fr 1fr; } }

/* Add port pop-up: header, sections, live summary; it rises in on open */
.modal.pm { width: 620px; padding: 0; overflow: hidden; animation: pmIn .22s cubic-bezier(.2, .8, .2, 1); }
.modal-bg:has(> .modal.pm) { animation: pmFade .2s ease-out; }
@keyframes pmIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pmFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal.pm, .modal-bg:has(> .modal.pm) { animation: none; } }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.pm-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--amber-wash); border: 1px solid var(--amber-line); color: var(--amber); font: 600 18px var(--mono); }
.pm-head h3 { margin: 0; font: 600 16px var(--sans); }
.pm-head p { margin: 2px 0 0; font: 12px var(--mono); color: var(--muted); }
.pm-head .pm-x { margin-left: auto; align-self: flex-start; }
.pm-body { max-height: min(62vh, 640px); overflow: auto; }
.pm-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.pm-sec:last-child { border-bottom: 0; }
.pm-sec > h4 { grid-column: 1 / -1; margin: 0 0 -2px; font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pm-sec > label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pm-sec > label > span { font: 500 11.5px var(--mono); color: var(--muted); }
.pm-sec > label > span i { font-style: normal; color: var(--text-3); }
.pm-sec .full { grid-column: 1 / -1; }
.pm-sec input, .pm-sec select { width: 100%; min-height: 36px; }
.pm-sec .pm-hint { font-size: 12px; color: var(--muted); }
.pm-sec .pm-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 12px var(--mono); color: var(--muted); }
.pm-sec .pm-multi b { font: 600 12.5px var(--mono); color: var(--text); padding: 4px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card-2); }
.pm-sec .pm-multi b.done { color: var(--text-3); }
.pm-sec .hidden { display: none; }
.modal.pm .pm-sum { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--card-2); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.modal.pm .pm-sum b { color: var(--text); font-weight: 600; }
.modal.pm .actions { margin: 0; padding: 0 20px 16px; background: var(--card-2); }
@media (max-width: 600px) { .pm-sec { grid-template-columns: 1fr; } }
/* the ports table fits its card: tighter cells, the limit sits under the filter */
.rules-tbl td.note-cell { max-width: 170px; }
.rules-tbl select.inline { max-width: 170px; }
.card.flush .rules-tbl th, .card.flush .rules-tbl td { padding-left: 10px; padding-right: 10px; }
.card.flush .rules-tbl th:first-child, .card.flush .rules-tbl td:first-child { padding-left: 18px; }
.card.flush .rules-tbl th:last-child, .card.flush .rules-tbl td:last-child { padding-right: 18px; }
.icon-rm { padding: 5px 7px; color: var(--muted); line-height: 0; }
.icon-rm:hover { color: var(--red); background: var(--red-wash); }

/* phones: each port rule becomes a small card (switch, port, remove / note / action + filter / who) */
@container main (max-width: 640px) {
  #open-ports .rules-tbl thead { display: none; }
  #open-ports .rules-tbl, #open-ports .rules-tbl tbody { display: block; }
  #open-ports .rules-tbl tbody tr:not(.from-row) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
    grid-template-areas: "en port rm" "note note note" "act filter filter" "who who who"; }
  #open-ports .rules-tbl tbody tr:not(.from-row) > td { display: block; padding: 0 !important; border: 0; max-width: none; }
  #open-ports .rules-tbl tbody tr > td:nth-child(1) { grid-area: en; }
  #open-ports .rules-tbl tbody tr > td:nth-child(2) { grid-area: port; }
  #open-ports .rules-tbl tbody tr > td:nth-child(3) { grid-area: note; }
  #open-ports .rules-tbl tbody tr > td:nth-child(4) { grid-area: act; }
  #open-ports .rules-tbl tbody tr > td:nth-child(5) { grid-area: filter; }
  #open-ports .rules-tbl tbody tr > td:nth-child(6) { grid-area: who; }
  #open-ports .rules-tbl tbody tr > td:nth-child(7) { grid-area: rm; }
  #open-ports .rules-tbl select.inline { max-width: none; width: 100%; }
  #open-ports .rules-tbl .note-btn { margin-left: 0; padding-left: 0; }
  #open-ports .rules-tbl tr.from-row, #open-ports .rules-tbl tr.from-row > td { display: block; }
  #open-ports .card-head { flex-wrap: wrap; }
}

/* phones: the attack list stacks (one compact block per attack), so an opened attack fits the screen */
@container main (max-width: 700px) {
  table.attacks thead { display: none; }
  table.attacks, table.attacks tbody { display: block; }
  table.attacks tr.row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.attacks tr.row > td { display: block; padding: 0; border: 0; white-space: nowrap; }
  table.attacks tr.row > td:first-child { flex-basis: 100%; }
  table.attacks tr.row > td.chev { display: none; }
  table.attacks tr.row > td .sub { display: inline; margin-left: 6px; }
  table.attacks tr.detail, table.attacks tr.detail > td { display: block; }
  table.attacks tr.detail > td { padding: 4px 8px 12px; }
  .atk-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; width: 100%; margin-left: 0; }
  .atk-kpis b { font-size: 16px; }
}

/* L7 proxy tab */
.l7-reasons{display:grid;gap:14px;padding:4px 18px 16px}
/* L7 tables sit in flush cards with a padded (.pad) header: align their edge columns to the 18px header */
.card.flush .l7-tbl th:first-child, .card.flush .l7-tbl td:first-child { padding-left: 18px; }
.card.flush .l7-tbl th:last-child, .card.flush .l7-tbl td:last-child { padding-right: 18px; }
.l7-reason .l7-rh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.l7-reason .l7-rh b{font-weight:600}
.l7-reason .l7-rh span{color:var(--muted);font-size:12px}
.l7-reason .bar{height:7px;border-radius:4px;background:#1d1c18;overflow:hidden;margin:5px 0 3px}
.l7-reason .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--grad-a,#ff8a00),var(--grad-b,#f54b00))}
.l7-reason .hint{margin:0;font-size:12px;color:var(--muted)}
.l7-steps{margin:2px 0 0;padding-left:20px;display:grid;gap:9px;font-size:13.5px;line-height:1.5}
.l7-steps code{background:#1a1915;border:1px solid var(--line,#22211d);border-radius:5px;padding:1px 6px;font-size:12px;white-space:nowrap}

.l7-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@container main (max-width:900px){.l7-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container main (max-width:520px){.l7-tiles{grid-template-columns:1fr}}
.l7-chart{height:220px;padding:6px 10px 10px;min-width:0}
.l7-chart canvas{max-width:100%}
.scroll-x{overflow-x:auto;min-width:0}
/* L7 self-serve: add-site button, DNS record result, setup note */
.empty-state .primary, .l7-empty .primary { margin-top: 12px; }
.pm-ico.good { background: var(--green-wash); border-color: var(--green-line); color: var(--green); }
.l7-dns { display: grid; gap: 8px; margin: 2px 0 14px; }
.l7-dns-row { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 12px 14px; background: var(--bar); border: 1px solid var(--line-2); border-radius: var(--r); align-items: baseline; }
.l7-dns-row .k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.l7-dns-row b { font-size: 13.5px; color: var(--text); }
.l7-dns-row b.mono { font-family: var(--mono); font-size: 13px; }
.l7-note { padding: 12px 14px; border: 1px solid var(--line); border-left: 2px solid var(--amber-line); border-radius: var(--r-sm); background: var(--card-2); }
.l7-note b { display: block; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.l7-note p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.l7-note pre { margin: 10px 0 0; padding: 10px 12px; background: var(--bar); border: 1px solid var(--line); border-radius: var(--r-sm); font: 12px/1.6 var(--mono); color: var(--text-2); white-space: pre-wrap; }
/* L7 visitor-check: modal option + per-site indicator */
.l7-check-opt .l7-check-lbl { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text); }
.l7-check-opt input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--amber); flex: none; margin: 0; }
.l7-chk { color: var(--amber); }
/* L7 recent-rejections log */
.l7-log td { white-space: nowrap; }
.l7-why { display: inline-block; font: 11.5px var(--mono); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-3); white-space: nowrap; }
.l7-why.r-no_hello { color: var(--amber); border-color: var(--amber-line); background: var(--amber-wash); }
.l7-why.r-conn_rate, .l7-why.r-conn_cur { color: #ff9a4d; border-color: rgba(255,122,0,.3); }
.l7-why.r-unknown_host { color: var(--text-3); }
/* L7 per-site traffic: site tabs */
.l7-stabs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.l7-stab { font: 12px var(--mono); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-3); cursor: pointer; }
.l7-stab.on { color: var(--amber); border-color: var(--amber-line); background: var(--amber-wash); }
.l7-stab:hover { color: var(--text); }
/* L7 one-command setup block */
.l7-cmd { margin: 8px 0; padding: 10px 12px; background: var(--bar); border: 1px solid var(--line); border-radius: var(--r-sm); font: 11.5px/1.6 var(--mono); color: var(--text-2); white-space: pre-wrap; word-break: break-all; }
/* L7 per-site visitor-check toggle */
.l7-chk-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.l7-chk-row .opt-sw { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.l7-style-sel { font: 12px var(--sans); padding: 3px 8px; background: var(--bar); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--text-2); }