/* Shared visual language: bruno-ntmr/home-netmon (MIT). See THIRD_PARTY_NOTICES. */
:root {
  --bg: #100b18;
  --panel: rgba(32, 23, 47, .78);
  --panel-edge: rgba(190, 164, 224, .15);
  --text: #f4effa;
  --muted: #a99ab8;
  --accent: #b99aff;
  --accent-soft: rgba(185, 154, 255, .14);
  --cyan: #67cde4;
  --orange: #ffb567;
  --red: #ff6b72;
  --radius: 20px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, #392252 0, transparent 36rem),
    linear-gradient(145deg, #100b18, #181020 60%, #100b18);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

.ambient { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .25; }
.ambient-a { width: 26rem; height: 26rem; background: #9b5de5; right: -12rem; top: 15%; }
.ambient-b { width: 20rem; height: 20rem; background: #7356bc; left: -10rem; bottom: 0; }
.shell { position: relative; width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 70px; }
.topbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.dashboard-topbar { display: grid; width: 100%; justify-content: stretch; gap: 18px; }
.dashboard-title-row { display: flex; width: 100%; align-items: end; gap: 24px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.7rem); font-weight: 680; letter-spacing: -.055em; }
h2 { font-size: 1.05rem; font-weight: 620; letter-spacing: -.015em; }
.eyebrow { margin-bottom: 8px; color: var(--accent); font-size: .68rem; font-weight: 750; letter-spacing: .18em; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.dashboard-title-row .header-actions { margin-left: auto; }
.header-actions > button {
  box-sizing: border-box; height: 42px; min-height: 42px; margin: 0; padding: 8px 14px; line-height: 1.2;
}
select, button, input[type="date"], .button-link {
  color: var(--text); background: rgba(29, 21, 43, .85); border: 1px solid var(--panel-edge);
  border-radius: 12px; padding: 10px 14px; font: inherit;
}
button { cursor: pointer; color: var(--accent); }
.button-link { color: var(--accent); text-decoration: none; }
.header-actions > .button-link { box-sizing: border-box; height: 42px; min-height: 42px; margin: 0; padding: 10px 14px; line-height: 1.2; }
.header-context { display: flex; min-height: 46px; align-items: center; justify-content: flex-start; gap: 18px; padding-top: 14px; border-top: 1px solid var(--panel-edge); }
#host-select { width: min(420px, 55vw); height: 42px; min-height: 42px; margin: 0; padding: 8px 38px 8px 14px; line-height: 1.2; }
.freshness { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
.freshness span { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px currentColor; }
.freshness.live span { background: var(--accent); }
.freshness.stale span { background: var(--red); }

.summary-grid { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.summary-card, .panel {
  border: 1px solid var(--panel-edge); background: var(--panel); border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .16); backdrop-filter: blur(16px);
}
.summary-card { min-height: 142px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.summary-card.primary { justify-content: flex-start; background: linear-gradient(145deg, rgba(101, 64, 153, .54), rgba(35, 24, 54, .76)); }
.summary-card.primary.host-offline { background: linear-gradient(145deg, rgba(133, 39, 48, .68), rgba(49, 17, 21, .86)); border-color: rgba(255,107,114,.38); }
.summary-card .label { color: var(--muted); font-size: .78rem; }
.summary-card.primary .label { margin-bottom: 12px; }
.summary-card.primary #snapshot-time { margin-top: auto; padding-top: 14px; }
.summary-card strong { font-size: clamp(1.45rem, 3vw, 2.2rem); font-weight: 650; letter-spacing: -.04em; }
.summary-card small { color: var(--muted); }
.host-meta { display: grid; gap: 3px; }
.host-meta small:last-child { font-size: .68rem; }
.status-summary { display: flex; flex-wrap: wrap; gap: 6px; font-size: clamp(.82rem, 1.2vw, .98rem); font-weight: 620; line-height: 1.15; }
.tag-health { padding: 5px 8px; border-radius: 9px; background: rgba(255,255,255,.045); }
.tag-health b { margin-right: 3px; }
.tag-health.healthy { color: var(--accent); }
.tag-health.warning { color: var(--orange); }
.tag-health.down { color: var(--red); }
.tag-health-icon { display: inline-grid; width: 1.1em; height: 1.1em; place-items: center; margin-left: 2px; font-size: 1.12em; font-weight: 850; line-height: 1; }
.host-offline-label { color: #ff9da2; font-size: clamp(1.45rem, 3vw, 2.2rem); font-weight: 680; }
.panel { padding: 22px; }
.panel-heading { min-height: 36px; display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
input, textarea { width:100%; color:var(--text); background:rgba(29,21,43,.85); border:1px solid var(--panel-edge); border-radius:10px; padding:11px 13px; font:inherit; }
a { color:var(--accent); }
button:hover, .button-link:hover { background:var(--accent-soft); border-color:rgba(185,154,255,.35); }
button:disabled { opacity:.45; cursor:wait; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.primary-button { color:#100b18; background:var(--accent); border-color:var(--accent); font-weight:650; }
.primary-button:hover { background:#d1baff; }
.header-context { margin-bottom:22px; justify-content:space-between; }
.freshness i { width:7px; height:7px; border-radius:50%; background:var(--orange); }
.freshness.live i { background:var(--accent); box-shadow:0 0 12px var(--accent-soft); }
.freshness span { width:auto; height:auto; border-radius:0; background:none; box-shadow:none; }
.muted, .field small { color:var(--muted); font-size:.78rem; line-height:1.55; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.panel-heading .header-actions { gap:6px; }
.panel-heading button { font-size:.75rem; padding:8px 11px; }
.card-list { display:grid; gap:10px; }
.item-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; align-items:center; padding:16px; border-radius:14px; background:rgba(18,11,28,.43); }
.protocol-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:var(--accent); background:var(--accent-soft); font-size:.7rem; font-weight:750; }
.item-card.outbound .protocol-icon { color:var(--cyan); background:rgba(103,205,228,.1); }
.item-title { display:block; overflow-wrap:anywhere; font-size:.9rem; }
.item-detail { display:block; color:var(--muted); margin-top:5px; font: .65rem ui-monospace,monospace; overflow-wrap:anywhere; }
.card-actions { display:flex; align-items:center; gap:8px; }
.count { padding:5px 9px; color:var(--muted); background:rgba(255,255,255,.035); border-radius:9px; font-size:.68rem; }
.delete-button { color:var(--red); padding:6px 10px; font-size:1rem; }
.empty-state { padding:30px 10px; text-align:center; color:var(--muted); font-size:.85rem; }
.route-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:grid; gap:8px; color:var(--muted); font-size:.8rem; }
.field input, .field select, .field textarea { color:var(--text); font-size:.85rem; }
.field textarea { resize:vertical; font-family:ui-monospace,SFMono-Regular,monospace; line-height:1.6; }
.rules-field { margin-top:20px; }
.form-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; }
.form-footer button { flex-shrink:0; font-size:.8rem; }
fieldset { margin:16px 0 0; border:1px solid var(--panel-edge); border-radius:12px; padding:14px; }
legend { color:var(--muted); font-size:.75rem; }
#balancer-list { display:flex; flex-wrap:wrap; gap:16px; }
#balancer-list label { display:flex; gap:6px; align-items:center; font-size:.85rem; }
input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); }
.plan-panel { margin-top:14px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.75rem; line-height:1.6; color:var(--muted); }
.message { padding:14px 18px; margin-bottom:18px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--panel-edge); border-radius:12px; font-size:.85rem; }
.message.error { color:var(--red); background:rgba(255,107,114,.08); }
footer { display:flex; justify-content:space-between; margin-top:28px; color:var(--muted); font-size:.7rem; }
dialog { width:min(660px,calc(100% - 28px)); color:var(--text); background:#21172f; border:1px solid var(--panel-edge); border-radius:20px; padding:0; box-shadow:0 30px 100px #0009; }
dialog::backdrop { background:rgba(9,5,16,.75); backdrop-filter:blur(5px); }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--panel-edge); }
.dialog-heading button { padding:3px 10px; font-size:1.2rem; }
.dialog-body { display:grid; gap:18px; padding:24px; line-height:1.6; }
.dialog-footer { display:flex; justify-content:flex-end; gap:10px; padding:18px 24px; border-top:1px solid var(--panel-edge); }
.form-error { color:var(--red); font-size:.8rem; }
@media(max-width:900px) { .topbar { align-items:start; flex-direction:column; } .summary-grid { grid-template-columns:1fr 1fr; } .two-column { grid-template-columns:1fr; } }
@media(max-width:560px) { .shell { width:calc(100% - 24px); padding-top:26px; } h1 { font-size:2.3rem; } .header-actions { flex-wrap:wrap; gap:6px; } .summary-card { padding:18px; min-height:125px; } .route-fields { grid-template-columns:1fr; } .panel { padding:16px; } .panel-heading { flex-wrap:wrap; gap:10px; } .form-footer { align-items:stretch; flex-direction:column; } .header-context { align-items:start; gap:12px; flex-direction:column; } .count { overflow-wrap:anywhere; } .dialog-body { padding:18px; } }
.probe-tools { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px; }
.probe-button { padding:6px 10px; font-size:.7rem; }
.probe-result { color:var(--accent); font-size:.7rem; font-variant-numeric:tabular-nums; }
.probe-result.failed { color:var(--red); }
.freshness.live span, .freshness.stale span { background:none; box-shadow:none; }

.subscriptions-panel { margin-bottom:14px; }
#outbound-list { max-height:560px; overflow:auto; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { position:relative; display:grid; gap:22px; width:min(420px,100%); padding:34px; }
.login-card h1 { font-size:2.7rem; }
.login-card button { min-height:46px; }
.login-card .form-error:empty { display:none; }

.check-field { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.85rem; }
.item-card .probe-button { margin-top:8px; }

.icon-button {width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;flex-shrink:0}
.icon-button.active {color:var(--accent);border-color:var(--accent)}
.item-card .card-actions .icon-button {margin-top:0}

.tabs {display:flex;gap:6px;margin:22px 0 14px;border-bottom:1px solid var(--panel-edge);padding-bottom:10px}
.tabs [aria-selected=true] {background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.rule-table-wrap {overflow:auto;margin-top:24px}
.rule-table {width:100%;border-collapse:collapse;font-size:.82rem;text-align:left}
.rule-table th {font-weight:500;color:var(--muted);font-size:.72rem;padding:10px}
.rule-table td {padding:14px 10px;border-top:1px solid var(--panel-edge);vertical-align:middle}
.rule-table th:first-child {width:36px}
.rule-number {color:var(--muted)}
.rule-name {display:block;margin-bottom:7px;font-size:.88rem}
.rule-chips {display:flex;flex-wrap:wrap;gap:5px;min-width:180px}
.rule-chip {background:var(--accent-soft);color:var(--accent);border-radius:7px;padding:4px 7px;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem}
.rule-disabled .rule-chips,.rule-disabled .rule-name,.rule-disabled .rule-exit {opacity:.4}
.rule-exit {max-width:220px;overflow-wrap:anywhere}
.rule-actions {display:flex;gap:5px;justify-content:flex-end}
.advanced-routing {margin-top:22px;color:var(--muted);font-size:.8rem}
.advanced-routing summary {cursor:pointer;width:fit-content;padding:8px 0}
.advanced-routing textarea {margin:8px 0}
.rule-conditions {display:grid;gap:10px}
.rule-condition {display:grid;grid-template-columns:160px minmax(0,1fr) 32px;gap:8px;align-items:center}
.rule-condition select {max-width:100%;font-size:.78rem;padding:10px}
.rule-condition textarea {font-size:.82rem;resize:vertical}
.power-button.is-on {color:#72da9a;border-color:#72da9a66;background:#72da9a12}
.power-button.is-off {color:var(--red);border-color:#ff6b7266;background:#ff6b7210}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:560px){.rule-condition {grid-template-columns:minmax(0,1fr) 32px}.rule-condition select {grid-column:1/-1}.rule-actions {gap:3px}.rule-chip {max-width:220px}}

.card-actions {flex-wrap:nowrap;gap:5px}
.server-settings {margin-bottom:14px}
.server-settings summary {color:var(--muted);font-size:.8rem;cursor:pointer}
.server-settings .panel-heading {margin-top:18px}
#user-access {display:grid;gap:16px}
.config-preview {max-height:48vh;overflow:auto;background:var(--bg);padding:14px;border-radius:10px;color:var(--text);user-select:text}
.item-card .probe-result {display:block;margin-top:6px}
@media(max-width:1100px){.two-column {grid-template-columns:1fr}}
@media(max-width:560px){.item-card .card-actions {grid-column:2/-1;justify-content:flex-end}}

.settings-form {display:grid;gap:14px;max-width:480px}
.settings-form button {justify-self:start}
.token-row,.user-detail-access {display:flex;align-items:center;justify-content:space-between;gap:16px}
#mcp-address {display:block;margin:12px 0 20px;color:var(--accent);overflow-wrap:anywhere;font-size:.8rem}
.user-name-button {display:block;padding:0;border:0;border-radius:3px;background:none;font-weight:650;font-size:.92rem;text-align:left;color:var(--text);overflow-wrap:anywhere}
.user-name-button:hover {background:none;color:var(--accent)}
.user-activity {display:block;margin-top:8px;font-size:.74rem;color:var(--muted)}
.user-activity.recent {color:#72da9a}
.user-stat-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.user-stat-grid small {display:block;color:var(--muted);margin-bottom:6px;font-size:.7rem}
.user-stat-grid strong {font-size:.86rem}
.traffic-chart {position:relative;background:var(--bg);border:1px solid var(--panel-edge);border-radius:10px;padding:10px}
.traffic-svg {display:block;width:100%;height:170px}
.bar-download {fill:var(--accent)}.bar-upload {fill:#b1d5ff}
.traffic-axis {display:flex;justify-content:space-between;gap:12px;font-size:.64rem;color:var(--muted)}
.traffic-legend {color:var(--accent)}.traffic-legend span {color:#b1d5ff;margin-left:18px}
.config-links {display:flex;flex-wrap:wrap;gap:8px;font-size:.8rem}
#user-config-dialog {width:min(780px,calc(100% - 28px))}
#user-config-dialog .dialog-body {max-height:76vh;overflow:auto}
#outbound-list .item-card .card-actions {grid-column:auto;white-space:nowrap}
@media(max-width:560px){#outbound-list .item-card .card-actions {grid-column:2/-1}.tabs button {font-size:.8rem;padding:9px 12px}}

#user-config-dialog[open] {display:flex;flex-direction:column;max-height:calc(100dvh - 40px)}
#user-config-dialog .dialog-body {min-height:0;max-height:none;overflow:auto;padding:20px;gap:14px}
#user-config-dialog .dialog-heading,#user-config-dialog .dialog-footer {flex-shrink:0}

#open-settings {font-size:20px;padding:8px 12px}
#open-settings[aria-pressed=true] {background:var(--accent-soft);border-color:var(--accent)}

.system-grid {display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 18px}
.system-grid div {min-width:0}.system-grid dt {color:var(--muted);font-size:.72rem;margin-bottom:6px}.system-grid dd {margin:0;font-size:.85rem;overflow-wrap:anywhere}
.system-logs {display:flex;gap:8px;flex-wrap:wrap}.system-logs button {font-size:.8rem}
.validation-status {font-size:.75rem;color:#72da9a;max-width:260px;overflow-wrap:anywhere}
.validation-status.failed {color:var(--red)}
@media(max-width:560px){.system-grid {grid-template-columns:1fr}.validation-status {max-width:100%}}

.topbar > .header-actions {flex-wrap:wrap;max-width:100%;justify-content:flex-end;gap:8px}

.rule-add-row {display:flex;justify-content:flex-start;margin:10px 0 18px}
.rule-add-row button {width:32px;height:32px;padding:0;font-size:20px;line-height:1}

#rule-dialog {max-height:calc(100dvh - 32px);overflow:hidden}
#rule-form {display:flex;flex-direction:column;max-height:calc(100dvh - 34px);min-width:0}
#rule-form .dialog-body {overflow:auto;min-height:0}
#rule-form .dialog-heading,#rule-form .dialog-footer {flex-shrink:0}
.rule-condition {grid-template-columns:145px minmax(0,1fr) 32px;align-items:start;min-width:0}
.rule-condition > *, .condition-editor {min-width:0;max-width:100%}
.rule-condition select,.rule-condition input,.rule-condition textarea {box-sizing:border-box;width:100%;min-width:0;margin:0;font-size:.82rem}
.rule-condition input,.rule-condition select {height:40px}
.rule-condition textarea {min-height:64px;max-height:180px;resize:vertical}
.condition-editor {display:grid;gap:6px}
.condition-values:empty {display:none}
.condition-values {display:flex;flex-wrap:wrap;gap:5px;max-height:160px;overflow:auto;padding:1px}
.condition-value {display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;padding:4px 6px 4px 9px;border:1px solid var(--panel-edge);border-radius:7px;background:var(--accent-soft);font-size:.78rem}
.condition-value > span {min-width:0;overflow-wrap:anywhere}
.condition-value .icon-button {width:21px;height:21px;font-size:15px;border:0;background:transparent}
.condition-value.unknown {color:var(--red);border-color:var(--red)}
@media(max-width:560px){.rule-condition {grid-template-columns:minmax(0,1fr) 32px}.rule-condition > .condition-type {grid-column:1}.condition-editor {grid-column:1}.rule-condition > .icon-button {grid-column:2;grid-row:1}}

.overview-traffic {margin-bottom:20px}

#user-share {min-width:0;font-size:.85rem}
#user-share summary {cursor:pointer}
#user-share-controls {margin-top:10px;min-width:0}
#user-share-format {width:100%;margin-bottom:8px}
.share-url-row {display:flex;gap:6px;min-width:0;align-items:center}
.share-url-row input {min-width:0;flex:1;font-size:.78rem}
.share-url-row button {flex-shrink:0;margin:0;padding:8px 10px}
@media(max-width:560px){.share-url-row {flex-wrap:wrap}.share-url-row input {flex-basis:100%}}

.reality-qr{display:block;width:240px;max-width:100%;height:auto;background:#fff;border-radius:12px;margin:12px 0;padding:10px}
.client-profiles{display:flex;flex-direction:column;width:100%}.client-profile-row{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--line,rgba(190,160,240,.13))}.client-profile-name{flex:1;min-width:0}.client-profile-name strong{display:block;font-size:.95rem}.client-profile-name small{display:block;margin-top:4px;color:var(--muted);font-size:.76rem}.client-profile-actions{display:flex;gap:6px;flex-shrink:0}.client-action{display:grid;place-items:center;width:36px;height:36px;padding:8px;border:1px solid var(--line,rgba(190,160,240,.16));border-radius:10px;background:transparent;color:var(--accent);cursor:pointer;text-decoration:none}.client-action:hover{background:var(--accent-soft)}.client-action svg{width:19px;height:19px}.client-profile-format{max-width:205px;min-width:0;width:auto;font-size:.78rem;padding:8px}.client-profile-status{min-height:0;margin:0;font-size:.8rem;color:var(--accent)}.client-profile-status:not(:empty){padding-top:8px}.client-qr-dialog{width:min(360px,calc(100vw - 32px));padding:0}.client-qr-image{display:block;width:280px;max-width:calc(100% - 40px);height:auto;margin:20px auto;background:white;padding:10px;border-radius:12px}.client-download-page{max-width:760px}.client-download-page .panel{padding:16px 24px}.client-download-footer{display:flex;justify-content:flex-end;margin-top:16px}@media(max-width:560px){.client-profile-row{gap:8px;flex-wrap:wrap}.client-profile-format{order:3;flex-basis:100%;max-width:100%}.client-profile-name strong{font-size:.85rem}.client-action{width:34px;height:34px}}

.rule-user-options{display:flex;flex-direction:column;gap:8px;max-height:180px;overflow:auto;padding:12px 0}.rule-user-options .check-field{margin:0}#rule-user-picker summary{overflow-wrap:anywhere}

/* Rule fields share one baseline; selected values wrap below the picker. */
#rule-form .field input,#rule-form .field select {box-sizing:border-box;width:100%;height:40px;margin:0}
#rule-form .form-error:empty {display:none}
#rule-form .dialog-body > .muted {margin:0}
#rule-user-picker {min-width:0;border:1px solid var(--panel-edge);border-radius:10px;background:rgba(29,21,43,.85)}
#rule-user-picker summary {box-sizing:border-box;min-height:40px;padding:8px 12px;cursor:pointer;color:var(--text);font-size:.85rem}
#rule-user-picker .rule-user-options {padding:10px 12px;border-top:1px solid var(--panel-edge)}
.rule-condition {grid-template-columns:190px minmax(0,1fr) 40px;gap:8px}
.rule-condition > .icon-button {width:40px;height:40px;grid-column:3;grid-row:1}
.condition-editor[hidden] {display:none}
.condition-all > .condition-type {grid-column:1 / 3}
@media(max-width:560px){
 .rule-condition {grid-template-columns:minmax(0,1fr) 40px}
 .rule-condition > .condition-type,.condition-all > .condition-type {grid-column:1;grid-row:1}
 .rule-condition > .icon-button {grid-column:2;grid-row:1}
 .rule-condition > .condition-editor {grid-column:1 / -1;grid-row:2}
}
/* Reserve a consistent end gutter for every dropdown arrow. */
select,.field select,.rule-condition select,#host-select {
 appearance:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c4b5d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;
 background-position:right 12px center;
 background-size:16px;
 padding-inline-end:40px;
}

.rule-add-row {align-items:center;gap:10px}
.rule-add-row .rule-reset-button {width:auto;height:32px;padding:0 12px;font-size:.78rem;line-height:1.2}

.traffic-svg {height:220px;overflow:visible;outline-offset:3px}
.traffic-gridline {stroke:var(--panel-edge);stroke-dasharray:3 4;stroke-width:1}
.traffic-baseline {stroke:#82708f;stroke-width:1}
.traffic-scale,.traffic-time {fill:var(--muted);font-size:11px;font-family:inherit;font-variant-numeric:tabular-nums}
.traffic-cursor {stroke:var(--text);stroke-dasharray:3 3;stroke-width:1;pointer-events:none}
.traffic-dot {fill:var(--text);stroke:var(--bg);stroke-width:1;pointer-events:none}
.traffic-tooltip {position:absolute;z-index:2;min-width:175px;max-width:calc(100% - 16px);padding:10px 12px;border:1px solid var(--panel-edge);border-radius:9px;background:#21172ff5;box-shadow:0 6px 22px #0006;font-size:.75rem;pointer-events:none}
.traffic-tooltip>strong,.traffic-tooltip>small {display:block;margin-bottom:5px}
.traffic-tooltip>small {color:var(--muted)}
.traffic-tooltip-row {display:flex;justify-content:space-between;gap:16px;line-height:1.7}
.traffic-tooltip-row.download {color:var(--accent)}
.traffic-tooltip-row.upload {color:#b1d5ff}
.traffic-tooltip-row.total {border-top:1px solid var(--panel-edge);margin-top:4px;padding-top:3px}
.traffic-date {font-size:10px;opacity:.8}

.protocol-statuses{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:.73rem}
.protocol-statuses>.muted{margin-right:3px}
.protocol-state{padding:3px 7px;border-radius:6px;border:1px solid transparent;font-weight:500}
.protocol-state.is-running{color:#76d9a3;background:#76d9a310;border-color:#76d9a326}
.protocol-state.is-stopped{color:var(--red);background:#ff6b7210;border-color:#ff6b7226}
.protocol-state.is-degraded{color:var(--orange);background:#ffb56710;border-color:#ffb56726}
.protocol-state.is-disabled,.protocol-state.is-unknown{color:var(--muted);background:#a99ab808;border-color:var(--panel-edge)}

.client-qr-dialog{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.client-qr-image{width:auto;max-width:calc(100% - 40px);padding:0;border-radius:0;image-rendering:pixelated}

.configuration-status{margin:12px 0 16px;padding:10px 14px;border:1px solid #ffb56735;border-radius:10px;color:var(--orange);background:#ffb56708;font-size:.8rem}
.form-error:empty{display:none}
.rule-table td:nth-child(3){white-space:nowrap}
@media(max-width:560px){
 .rule-table,.rule-table tbody{display:block;width:100%}
 .rule-table thead{display:none}
 .rule-table tr{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:8px;row-gap:6px;padding:14px 0;border-top:1px solid var(--panel-edge)}
 .rule-table td{display:block;min-width:0;border:0;padding:0}
 .rule-table td:first-child{grid-column:1;grid-row:1 / span 3}
 .rule-table td:nth-child(2){grid-column:2;grid-row:1}
 .rule-table td:nth-child(3){grid-column:2;grid-row:2}
 .rule-table td:nth-child(4){grid-column:2;grid-row:3}
 .rule-table .rule-actions{justify-content:flex-start}
 .rule-table .rule-chip{max-width:100%}
}

.summary-card{min-width:0}
.summary-card strong{overflow-wrap:anywhere}
@media(max-width:560px){.rule-table .rule-exit{max-width:100%;overflow:hidden;text-overflow:ellipsis}}

.summary-card #runtime-status,.summary-card #route-label{font-size:1.15rem;line-height:1.35;letter-spacing:0}
.summary-card.primary .protocol-statuses{margin-top:12px;justify-content:flex-start;flex-wrap:wrap}
.summary-card #route-active{line-height:1.4;margin:6px 0;overflow-wrap:anywhere}

.protocol-statuses .server-ip{padding:0;border:0;background:none;box-shadow:none;font:inherit;color:var(--muted);cursor:pointer;min-height:0}
.protocol-statuses .server-ip:hover{color:var(--text)}

.topbar{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.topbar > .header-actions{width:100%;justify-content:flex-end}
.header-actions > .tabs{margin:0 auto 0 0;padding:0;border:0;flex-wrap:wrap}
@media(max-width:560px){.header-actions > .tabs{flex-basis:100%;margin-bottom:6px}.topbar > .header-actions{justify-content:flex-start}}

.validation-status{max-width:none;margin:12px 0 16px;padding:10px 14px;border:1px solid #72da9a35;border-radius:10px;background:#72da9a08;font-size:.8rem}
.validation-status:empty{display:none}
.validation-status.failed{border-color:#ff6b7235;background:#ff6b7208}

.managed-clients-json{max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.75rem;background:var(--bg);padding:12px;border-radius:8px}