:root {
  --bg: #0f1419;
  --panel: #1a222c;
  --text: #e7ecf1;
  --muted: #8b9aab;
  --line: #2a3542;
  --ru: #6bcf8e;
  --abroad: #6ba3ff;
  --accent: #e8c36a;
  --warn: #f08a6b;
  --online: #5dde9a;
  --offline: #6a7685;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, #243246 0%, var(--bg) 55%);
  color: var(--text); min-height: 100vh;
}
main { width: 100%; max-width: none; margin: 0 auto; padding: 1.25rem clamp(1rem, 2.5vw, 2.5rem) 2.5rem; }
.nav {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1.25rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line);
}
.nav-link {
  color: var(--muted); text-decoration: none; font-size: .9rem;
  padding: .35rem .7rem; border-radius: 999px; border: 1px solid transparent;
}
.nav-link:hover { color: var(--text); border-color: var(--line); }
.nav-link.active {
  color: var(--text); background: color-mix(in srgb, var(--panel) 80%, black);
  border-color: var(--line);
}
h1 { font-size: 1.6rem; margin: 0 0 .35rem; letter-spacing: .02em; }
.sub { color: var(--muted); margin: 0 0 1.25rem; font-size: .9rem; line-height: 1.5; }
.sub .nw { white-space: nowrap; }
.legend { display: flex; gap: .35rem 1rem; flex-wrap: wrap; margin: 0 0 .75rem; color: var(--muted); font-size: .8rem; }
.legend > span { white-space: nowrap; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; vertical-align: .02em; }
.dot.ru { background: var(--ru); }
.dot.abroad { background: var(--abroad); }
.dot.total { background: var(--accent); }
.dot.online { background: var(--online); }
a { color: var(--abroad); }
.panel {
  background: color-mix(in srgb, var(--panel) 92%, black);
  border: 1px solid var(--line); border-radius: 12px; overflow: auto;
  margin-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
}
.panel h2 {
  margin: 0; padding: .7rem .9rem; font-size: .85rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
}
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th, td {
  padding: .45rem .55rem; text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
thead th {
  color: var(--muted); font-weight: 600; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .04em;
  padding-top: .5rem; padding-bottom: .45rem;
  border-bottom: 1px solid var(--line);
}
thead th.g-ru { color: var(--ru); border-bottom: 2px solid color-mix(in srgb, var(--ru) 45%, var(--line)); }
thead th.g-abroad { color: var(--abroad); border-bottom: 2px solid color-mix(in srgb, var(--abroad) 45%, var(--line)); }
thead th.g-total { color: var(--accent); border-bottom: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
thead th.traf-col, thead th.dur-col { text-align: right; }
thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
thead th.sortable:hover { color: var(--text); }
thead th.sortable .sort-ind {
  display: inline-block; margin-left: .2rem; opacity: .35; font-size: .8em;
  width: .85em; text-align: center;
}
thead th.sortable.asc .sort-ind,
thead th.sortable.desc .sort-ind { opacity: 1; color: var(--accent); }
thead th.sortable.asc .sort-ind::after { content: "▲"; }
thead th.sortable.desc .sort-ind::after { content: "▼"; }
thead th.sortable:not(.asc):not(.desc) .sort-ind::after { content: "↕"; }
th.user-col, td.user { width: 36%; }
th.meta-col, td.meta-cell { width: 16%; }
th.dur-col, td.num.dur { width: 6%; }
th.dir-col, td.dir-gutter { width: 2.2rem; padding-left: .2rem; padding-right: .15rem; }
th.traf-col, td.traf { width: 14%; }
.num, .traf {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  font-size: .82rem;
}
thead th.dir-col {
  text-align: center; color: var(--muted); font-size: .62rem;
  letter-spacing: 0; text-transform: none; font-weight: 500;
}
.dir-stack, .traf-stack {
  display: grid; row-gap: .12rem; align-items: baseline;
}
.dir-stack {
  justify-items: center; width: 100%;
  color: var(--muted); font-size: .72rem; line-height: 1.25;
}
.traf-stack {
  grid-template-columns: 4.6em 2.4em;
  column-gap: .3rem;
  width: max-content; margin-left: auto;
}
.traf-stack .amt {
  text-align: right; line-height: 1.25; font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.traf-stack .unit {
  text-align: left; line-height: 1.25; font-size: .68rem;
  color: var(--muted); letter-spacing: .02em;
}
td.traf.total .amt { color: var(--accent); font-weight: 600; }
td.traf.total .unit { color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
tbody.grp:last-child tr:last-child td { border-bottom: 0; }
.grp-head > * { background: color-mix(in srgb, var(--panel) 70%, #243246); }
.grp-head td.traf .amt { color: var(--muted); font-weight: 500; }
.grp-head td.traf.total .amt {
  color: color-mix(in srgb, var(--accent) 75%, var(--muted)); font-weight: 600;
}
.grp-name { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .9rem; }
.grp-name .helper { margin-right: .5rem; }
.age, .cnt { color: var(--muted); font-weight: 400; font-size: .72rem; white-space: nowrap; }
.cnt { margin-left: .45rem; }
.cnt::before { content: "· "; }
.age.stale { color: var(--warn); }
.user .name { font-weight: 600; margin-right: .45rem; overflow-wrap: anywhere; font-size: .92rem; }
.row-n {
  display: inline-block; min-width: 1.6em; margin-right: .25rem;
  color: var(--muted, #888); font-variant-numeric: tabular-nums; font-weight: 500;
  user-select: none;
}
.p-tun-h .row-n { min-width: 1.4em; }
.meta { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; color: var(--muted); font-size: .74rem; }
.ip, .endpoint { font-variant-numeric: tabular-nums; }
.endpoint { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
button.copy-ip {
  display: inline-flex; align-items: center; gap: .25rem;
  margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer;
  max-width: 100%; text-align: left;
}
button.copy-ip .copy-ip-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.copy-ip .copy-ip-icon {
  flex-shrink: 0; opacity: .4; color: var(--muted); line-height: 0;
}
button.copy-ip:hover .copy-ip-icon,
button.copy-ip:focus-visible .copy-ip-icon { opacity: .85; color: var(--abroad); }
button.copy-ip.copied .copy-ip-icon { opacity: 1; color: var(--online); }
button.copy-ip.copied::after { content: " ✓"; color: var(--online); font-size: .85em; }
button.copy-ip.copy-failed .copy-ip-icon { opacity: 1; color: #c0392b; }
button.copy-ip:focus-visible { outline: 1px solid var(--abroad); outline-offset: 2px; border-radius: 3px; }
table.nodes { table-layout: auto; }
table.nodes th.role-col, table.nodes td.role { width: 6.5rem; }
table.nodes td.addr-cell { font-variant-numeric: tabular-nums; font-size: .84rem; }
table.nodes .addr-label {
  display: block; font-size: .65rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: .12rem;
}
table.nodes .role-badge {
  display: inline-block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .04em; padding: .12rem .4rem; border-radius: 4px;
  border: 1px solid var(--line); color: var(--muted);
}
table.nodes .role-controller { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
table.nodes .role-helper { color: var(--ru); border-color: color-mix(in srgb, var(--ru) 40%, var(--line)); }
table.nodes .role-remote { color: var(--abroad); border-color: color-mix(in srgb, var(--abroad) 40%, var(--line)); }
tr.idle .traf .amt, tr.idle .traf .unit { color: var(--muted); }
.kind {
  display: inline-block; font-size: .6rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .02rem .3rem; border-radius: 4px; border: 1px solid var(--line); line-height: 1.35;
}
.kind-owrt { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.kind-users0 { color: var(--ru); border-color: color-mix(in srgb, var(--ru) 40%, var(--line)); }
.badge {
  display: inline-block; font-size: .6rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .02rem .3rem; border-radius: 4px; line-height: 1.35; font-weight: 600;
}
.badge-on { color: #0b1a12; background: var(--online); }
.badge-off { color: var(--muted); background: color-mix(in srgb, var(--offline) 35%, transparent); border: 1px solid var(--line); }
.sess { color: var(--muted); font-size: .72rem; margin-top: .15rem; line-height: 1.35; }
.time-stack {
  display: flex; flex-direction: column; gap: .12rem;
  font-size: .74rem; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.time-stack .t-end { color: var(--muted); }
.muted { color: var(--muted); font-size: .85rem; }
.empty { padding: 1.25rem .9rem; }
@media (max-width: 720px) {
  main { padding: .85rem .4rem 1.75rem; }
  h1 { font-size: 1.25rem; }
  .sub { font-size: .8rem; }
  th, td { padding: .35rem .2rem; }
  /* Keep fixed layout so columns share the viewport instead of growing and clipping. */
  table.traffic { table-layout: fixed; width: 100%; min-width: 0; }
  table.traffic th.user-col,
  table.traffic td.user { width: 34%; }
  table.traffic th.dir-col,
  table.traffic td.dir-gutter { width: 1.15rem; padding-left: 0; padding-right: 0; }
  table.traffic th.traf-col,
  table.traffic td.traf { width: 21%; }
  table.traffic .traf-stack {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .15rem;
    width: 100%;
    margin-left: 0;
  }
  table.traffic .traf-stack .amt { font-size: .72rem; }
  table.traffic .traf-stack .unit { font-size: .58rem; }
  table.traffic .user .name { display: block; font-size: .84rem; margin-right: 0; }
  table.traffic .endpoint { display: none; }
  table.traffic .meta { font-size: .68rem; gap: .2rem; }
  table.traffic .ip { display: block; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
}

/* ---------------------------------------------------------------- v3 additions */
tr.clk { cursor: pointer; }
tr.clk:hover > td, tr.clk:focus-visible > td { background: color-mix(in srgb, var(--panel) 75%, #2b3a50); }
tr.clk:focus-visible { outline: 1px solid var(--abroad); outline-offset: -1px; }
.hint-click { opacity: .75; }
.helper-tag { color: var(--muted); font-size: .72rem; }
.t-now { color: var(--online); }
time { font-variant-numeric: tabular-nums; }

/* sessions filters */
.filters {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 0 0 .75rem;
}
.filters input, .filters select, .filters button {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: .4rem .55rem; font: inherit; font-size: .85rem; min-height: 2.1rem;
}
.filters input:focus, .filters select:focus { outline: 1px solid var(--abroad); border-color: var(--abroad); }
.filters .f-q { flex: 1 1 14rem; min-width: 0; }
.filters .f-dt { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .78rem; }
.filters .f-dt input { padding: .3rem .4rem; font-size: .8rem; }
.filters .f-go { cursor: pointer; color: var(--muted); }
.js .filters .f-go { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .2rem .3rem .2rem .65rem;
}
.chip b { color: var(--text); font-weight: 600; }
.chip a { color: var(--muted); text-decoration: none; padding: 0 .35rem; }
.chip a:hover { color: var(--warn); }
.sbar {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: 0 0 .5rem; color: var(--muted); font-size: .82rem; min-height: 1.9rem;
}
.sbar.bottom { justify-content: flex-end; margin-top: -.4rem; }
.pager { display: flex; gap: .4rem; }
.pg {
  display: inline-block; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); text-decoration: none; font-size: .82rem; white-space: nowrap;
}
a.pg:hover { border-color: var(--abroad); color: var(--abroad); }
.pg.off { color: var(--offline); opacity: .6; }
#sresults.loading, #bresults.loading { opacity: .55; transition: opacity .15s; }

/* dashboard home */
.dash-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .65rem; margin: 0 0 1.1rem;
}
.dash-tile {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .85rem .9rem; border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, black);
  border: 1px solid var(--line); text-decoration: none; color: inherit;
  min-height: 5.5rem;
}
.dash-tile:hover { border-color: var(--abroad); }
.dash-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.dash-val { font-size: 1.55rem; font-weight: 650; letter-spacing: .01em; line-height: 1.15; }
.dash-sub { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.dash-helpers .dash-list { list-style: none; margin: 0; padding: .35rem 0; }
.dash-helpers .dash-list li {
  display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: baseline;
  padding: .55rem .9rem; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.dash-helpers .dash-list li:last-child { border-bottom: 0; }
.dash-helpers .helper { font-weight: 600; min-width: 3.5rem; }
table.sessions th a { color: inherit; text-decoration: none; }

/* /billing — own layout (do not reuse sessions column widths / mobile grid) */
table.billing {
  table-layout: fixed; width: 100%;
}
table.billing th, table.billing td {
  vertical-align: top; padding: .55rem .45rem;
}
table.billing th.b-id, table.billing td.b-id { width: 2.4rem; text-align: right; }
table.billing th.b-person, table.billing td.b-person { width: 20%; }
table.billing th.b-tunnel, table.billing td.b-tunnel { width: 18%; }
table.billing th.b-status, table.billing td.b-status { width: 7.5rem; }
table.billing th.b-amt, table.billing td.b-amt { width: 5.5rem; text-align: right; }
table.billing th.b-pay, table.billing td.b-pay { width: 8.5rem; }
table.billing th.b-time, table.billing td.b-time {
  width: 5.8rem; white-space: nowrap; font-size: .78rem; color: var(--muted);
}
table.billing .b-stack {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0;
}
table.billing td.b-amt .b-stack { align-items: flex-end; }
table.billing .b-name {
  display: block; font-weight: 600; font-size: .9rem; line-height: 1.25;
  color: var(--abroad); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
span.b-name { color: var(--text); }
a.b-name:hover { text-decoration: underline; }
table.billing .b-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem;
  font-size: .72rem; line-height: 1.3; color: var(--muted);
  overflow: hidden; max-width: 100%;
}
table.billing .b-sub .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
table.billing .b-rub {
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; white-space: nowrap;
}
table.billing .b-pay a { font-size: .84rem; }
@media (max-width: 860px) {
  table.billing th.b-paid, table.billing td.b-paid { display: none; }
  table.billing th.b-id, table.billing td.b-id { display: none; }
}
@media (max-width: 720px) {
  table.billing, table.billing tbody { display: block; width: 100%; }
  table.billing thead { display: none; }
  table.billing tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "person person"
      "tunnel tunnel"
      "status amt"
      "pay pay"
      "created paid";
    gap: .35rem .6rem;
    padding: .65rem .55rem; border-bottom: 1px solid var(--line);
  }
  table.billing tr.empty-row { display: block; }
  table.billing td {
    border: 0; padding: 0; width: auto !important; text-align: left !important;
  }
  table.billing td.b-person { grid-area: person; }
  table.billing td.b-tunnel { grid-area: tunnel; }
  table.billing td.b-status { grid-area: status; }
  table.billing td.b-amt { grid-area: amt; }
  table.billing td.b-pay { grid-area: pay; }
  table.billing td.b-time:not(.b-paid) { grid-area: created; }
  table.billing td.b-paid { grid-area: paid; display: block; }
  table.billing td.b-id { display: none; }
  table.billing td::before {
    content: attr(data-label); display: block;
    font-size: .58rem; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 600; color: var(--muted); margin-bottom: .1rem;
  }
  table.billing td.b-person::before, table.billing td.b-tunnel::before { display: none; }
  table.billing td.b-amt .b-stack { align-items: flex-start; }
  table.billing .b-name { white-space: normal; }
}
table.sessions th.sortable a:hover { color: var(--text); }
table.sessions thead th.sortable:not(.asc):not(.desc) .sort-ind::after { content: ""; }

/* detail card: native <dialog> — side panel on desktop, full screen on phones */
dialog.card {
  padding: 0; border: 1px solid var(--line); color: var(--text);
  background: color-mix(in srgb, var(--panel) 96%, black);
  width: min(760px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0 0 0 auto; border-radius: 0; border-width: 0 0 0 1px;
  box-shadow: -20px 0 50px rgba(0,0,0,.45);
}
dialog.card[open] { display: flex; flex-direction: column; animation: card-in .16s ease-out; }
@keyframes card-in { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
dialog.card::backdrop { background: rgba(5, 8, 12, .55); }
/* Person as a shareable full-page view: /people?person=<id> (netdiag-style query tabs). */
dialog.card.person-full {
  width: 100vw; max-width: 100vw; margin: 0; border: 0; box-shadow: none;
  background: var(--bg);
}
dialog.card.person-full .card-head {
  background: color-mix(in srgb, var(--panel) 96%, black);
  border-bottom: 1px solid var(--line);
  padding: .75rem clamp(1rem, 2.5vw, 2.5rem);
}
dialog.card.person-full .card-body {
  max-width: none; margin: 0 auto; width: 100%;
  padding: 1rem clamp(1rem, 2.5vw, 2.5rem) 2.5rem;
  background: transparent;
}
body.person-open > main { visibility: hidden; pointer-events: none; }
.card-head {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
  background: inherit; z-index: 1;
}
.card-head h2 { margin: 0; font-size: 1.1rem; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.card-x {
  border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 8px;
  width: 2.1rem; height: 2.1rem; font-size: 1rem; cursor: pointer; flex-shrink: 0;
}
.card-x:hover { color: var(--text); border-color: var(--muted); }
.card-body { padding: .8rem .9rem 1.4rem; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.card-body .meta { margin-bottom: .7rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; font-size: .85rem; margin: 0 0 .9rem; }
.kv dt { color: var(--muted); font-size: .75rem; padding-top: .1rem; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.card h3 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  margin: 1rem 0 .45rem; font-weight: 600;
}
.tot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.tot {
  border: 1px solid var(--line); border-radius: 10px; padding: .45rem .55rem;
  background: color-mix(in srgb, var(--panel) 80%, black);
}
.tot .lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.tot.ru .lbl { color: var(--ru); } .tot.abroad .lbl { color: var(--abroad); } .tot.total .lbl { color: var(--accent); }
.tot .big { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; margin: .1rem 0; }
.tot.total .big { color: var(--accent); }
.tot .sub2 { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 0 .5rem; }
.tot .sub2 span { white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button {
  background: none; border: 0; color: var(--muted); font: inherit; font-size: .78rem;
  padding: .3rem .6rem; cursor: pointer; border-left: 1px solid var(--line);
}
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--abroad) 22%, transparent); color: var(--text); }
.chart-ctl { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.chart { position: relative; touch-action: pan-y; }
.chart svg { display: block; width: 100%; height: 190px; overflow: visible; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .grid text, .chart .xl text { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart .ln { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.chart .ln.ru { stroke: var(--ru); } .chart .ln.abroad { stroke: var(--abroad); }
.chart .ar.ru { fill: color-mix(in srgb, var(--ru) 16%, transparent); }
.chart .ar.abroad { fill: color-mix(in srgb, var(--abroad) 14%, transparent); }
.chart .cur line { stroke: var(--muted); stroke-dasharray: 3 3; }
.chart .cur circle.ru { fill: var(--ru); } .chart .cur circle.abroad { fill: var(--abroad); }
.chart .tip {
  position: absolute; top: 0; pointer-events: none; font-size: .74rem; line-height: 1.35;
  background: rgba(10, 14, 19, .92); border: 1px solid var(--line); border-radius: 8px;
  padding: .35rem .5rem; white-space: nowrap; font-variant-numeric: tabular-nums; display: none;
}
.chart .tip .r { color: var(--ru); } .chart .tip .a { color: var(--abroad); }
.chart-foot { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .72rem; margin-top: .25rem; }
.chart-empty { color: var(--muted); font-size: .8rem; padding: 2.2rem 0; text-align: center; }
.slist { list-style: none; margin: 0; padding: 0; }
.slist li {
  display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: baseline;
  padding: .4rem .2rem; border-bottom: 1px solid var(--line); font-size: .8rem; cursor: pointer;
}
.slist li:hover { background: color-mix(in srgb, var(--panel) 75%, #2b3a50); }
.slist .d { color: var(--muted); font-variant-numeric: tabular-nums; }
.slist .t { color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-links { margin-top: .8rem; font-size: .82rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.err { color: var(--warn); }

@media (max-width: 720px) {
  dialog.card { width: 100vw; border-width: 0; box-shadow: none; }
  @keyframes card-in { from { transform: translateY(16px); opacity: .4; } to { transform: none; opacity: 1; } }
  .hint-click { display: none; }
  .filters { gap: .35rem; }
  .filters select { flex: 1 1 40%; min-width: 0; }
  .filters select[name=helper] { flex: 0 1 auto; }
  .filters .f-dt { flex: 1 1 40%; min-width: 0; }
  .filters .f-dt input { flex: 1; min-width: 0; }
  .sbar { font-size: .76rem; }
  .pg { padding: .3rem .55rem; font-size: .78rem; }
  /* Sessions → one card per session; same ↓↑ + RU/Abroad/Total grid as Traffic rows. */
  table.sessions, table.sessions tbody { display: block; width: 100%; }
  table.sessions thead { display: none; }
  table.sessions tr {
    display: grid; grid-template-columns: 1.15rem repeat(3, minmax(0, 1fr));
    grid-template-areas: "user user user user" "time time time dur" "dir ru ab tot";
    column-gap: .2rem; row-gap: .15rem;
    padding: .5rem .45rem .45rem; border-bottom: 1px solid var(--line);
  }
  table.sessions tr.empty-row { display: block; }
  table.sessions td,
  table.sessions td.user, table.sessions td.meta-cell, table.sessions td.num.dur,
  table.sessions td.dir-gutter, table.sessions td.traf { border: 0; padding: 0; width: auto; }
  table.sessions td.user { grid-area: user; }
  table.sessions td.meta-cell { grid-area: time; }
  table.sessions td.dur { grid-area: dur; align-self: end; font-size: .74rem; color: var(--muted); }
  table.sessions td.dir-gutter { grid-area: dir; align-self: end; }
  table.sessions td.traf.ru { grid-area: ru; }
  table.sessions td.traf.abroad { grid-area: ab; }
  table.sessions td.traf.total { grid-area: tot; }
  table.sessions td.traf::before {
    content: attr(data-label); display: block; font-size: .58rem; text-transform: uppercase;
    letter-spacing: .04em; font-weight: 600; text-align: right; margin-bottom: .05rem;
  }
  table.sessions td.traf.ru::before { color: var(--ru); }
  table.sessions td.traf.abroad::before { color: var(--abroad); }
  table.sessions td.traf.total::before { color: var(--accent); }
  table.sessions .traf-stack { grid-template-columns: minmax(0, 1fr) auto; column-gap: .15rem; width: 100%; margin-left: 0; }
  table.sessions .traf-stack .amt { font-size: .74rem; }
  table.sessions .traf-stack .unit { font-size: .6rem; }
  table.sessions .user .name { font-size: .88rem; }
  table.sessions .user { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; }
  table.sessions .user .sess { margin: 0; flex-basis: 100%; }
  table.sessions .time-stack { flex-direction: row; gap: .35rem; font-size: .72rem; color: var(--muted); }
  table.sessions .endpoint { max-width: 100%; }
  .tot .big { font-size: .9rem; }
}

/* /dns: learned IPs */
table.dns .role-badge, .card .role-badge { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; padding: .12rem .4rem; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }
table.dns .role-badge.role-routed, .card .role-badge.role-routed { color: var(--abroad); border-color: color-mix(in srgb, var(--abroad) 45%, var(--line)); }
table.dns .role-badge.role-pending, .card .role-badge.role-pending { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
table.dns .role-badge.role-excluded, .card .role-badge.role-excluded { color: var(--ru); border-color: color-mix(in srgb, var(--ru) 45%, var(--line)); }
table.dns th a { color: inherit; text-decoration: none; }
table.dns th.sortable.desc a, table.dns th.sortable.asc a { color: var(--accent); }
table.dns tr.clk { cursor: pointer; }
table.dns td.dom { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filters .f-n { width: 6.5rem; }
@media (max-width: 720px) {
  table.dns .hide-sm { display: none; }
  table.dns { font-size: .8rem; }
  table.dns td, table.dns th { padding-left: .3rem; padding-right: .3rem; }
  table.dns td.dom { max-width: 5.2rem; }
  .panel:has(> table.dns) { overflow-x: auto; }
  table.dns td.meta-col { white-space: nowrap; font-size: .72rem; }
  table.dns td.addr-cell { font-size: .74rem; }
  table.dns .copy-ip-icon { display: none; }
  table.dns .role-badge { font-size: .58rem; padding: .08rem .25rem; letter-spacing: 0; }
  .filters .f-n { flex: 1 1 40%; width: auto; }
}

/* WG users (/wg) */
.badge-err { color: #1a0d09; background: var(--warn); }
.badge-warn { color: #1a1408; background: var(--accent); }
.wg-revs { gap: .6rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.wg-revs b { color: var(--text); }
.js #wg-create .f-go, .js #p-create .f-go { display: inline-block; cursor: pointer; color: var(--text); }
.wg-msg { font-size: .8rem; color: var(--muted); }
.wg-msg.err { color: var(--warn); }
.wg-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .6rem; }
.wg-btn {
  font: inherit; font-size: .82rem; color: var(--text); background: var(--panel); text-decoration: none;
  border: 1px solid var(--line); border-radius: 6px; padding: .35rem .75rem; cursor: pointer;
}
.wg-btn:hover { border-color: var(--abroad); }
.wg-btn.warn { color: var(--accent); }
.wg-btn.danger { color: var(--warn); }
.wg-btn:disabled { opacity: .5; cursor: default; }
.wg-qr img { display: block; width: min(100%, 300px); height: auto; background: #fff; border-radius: 8px; margin: .3rem 0; }
.wg-conf-tools { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 .25rem; }
.wg-conf-pre {
  margin: 0 0 .4rem; padding: .55rem .7rem; max-height: min(50vh, 22rem); overflow: auto;
  font: .78rem/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  white-space: pre; word-break: normal; user-select: text;
}
.wg-btn.copied { border-color: var(--abroad); }
.wg-btn.copy-failed { border-color: var(--warn); color: var(--warn); }
@media (max-width: 720px) {
  #wg-create input[name=note] { flex: 1 1 40%; min-width: 0; }
  .wg-btn { padding: .5rem .8rem; }
}

/* people (/people) */
.person-tag { font-size: .7rem; color: var(--accent); }
.p-hero {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .65rem .8rem; margin-bottom: .65rem;
  background: color-mix(in srgb, var(--panel) 85%, #111821);
  border: 1px solid var(--line); border-radius: 10px;
}
.p-hero-badges { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.p-hero-badges .p-inv-link { margin-left: auto; padding: .2rem .55rem; font-size: .78rem; }
.p-hero-meta { font-size: .8rem; line-height: 1.4; }
.p-grid2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem; margin-bottom: .75rem;
}
.p-sec {
  background: color-mix(in srgb, var(--panel) 90%, black);
  border: 1px solid var(--line); border-radius: 10px;
  padding: .75rem .85rem; margin-bottom: .75rem;
}
.p-grid2 > .p-sec { margin-bottom: 0; }
.p-sec h3, .p-sec h4 {
  margin: 0 0 .5rem; font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.p-sec h4 b { color: var(--accent); font-size: .92rem; }
.p-sec-head {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  justify-content: space-between; margin-bottom: .55rem;
}
.p-sec-head h3 { margin: 0; }
.p-hint { margin: -.2rem 0 .45rem; font-size: .76rem; }
.p-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.p-row input { flex: 1 1 9rem; min-width: 0; }
.p-edit { display: grid; gap: .4rem; margin: .2rem 0 .45rem; }
.p-edit input, .p-edit textarea, .p-bal-f input, .p-add input, .p-tun-f input, .p-tun-f select {
  font: inherit; font-size: .85rem; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: .35rem .5rem; min-width: 0;
}
.p-edit button { justify-self: start; }
.p-toggles { margin: .35rem 0 0; }
.p-bal-quick { margin: .25rem 0 .45rem; }
.p-tun-card {
  background: color-mix(in srgb, var(--bg) 65%, var(--panel));
  border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem .7rem; margin-top: .5rem;
}
.p-tun-h { font-size: .86rem; display: flex; flex-wrap: wrap; gap: .35rem .45rem; align-items: center; }
.p-tun-h .name { font-weight: 600; color: var(--abroad); text-decoration: none; font-size: .92rem; }
.p-tun-h .name:hover { text-decoration: underline; }
.p-tun-stat { margin-left: auto; font-size: .78rem; }
.p-tun-more { margin-top: .35rem; border-top: 1px dashed var(--line); padding-top: .35rem; }
.p-tun-more > summary { cursor: pointer; font-size: .76rem; user-select: none; }
.p-details > summary { cursor: pointer; list-style: none; }
.p-details > summary h3 { display: inline; }
.p-tun { border-top: 1px solid var(--line); padding: .55rem 0 .2rem; }
.p-tun-f { display: flex; gap: .4rem; margin-top: .35rem; flex-wrap: wrap; }
.p-tun-f input { flex: 1 1 8rem; }
.p-tun-f select { flex: 1 1 8rem; }
.p-tun-f .p-move-q { flex: 1 1 7rem; }
.p-add input { flex: 1 1 12rem; min-width: 0; }

table.people th.msg-col,
table.people td.msg-col {
  width: 2.2rem; max-width: 2.4rem; text-align: center;
  padding-left: .25rem; padding-right: .15rem; vertical-align: middle;
}
table.people th.msg-col { font-size: .95rem; }
table.people td.msg-col .tg-unread { margin-right: 0; }
.tg-unread {
  display: inline-block;
  margin-right: .3rem;
  font-size: .95em;
  vertical-align: -0.05em;
  color: #ff6b8a;
  animation: tg-unread-pulse 1.6s ease-in-out infinite;
}
h3 .tg-unread {
  margin-left: .25rem;
  margin-right: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: .15em;
}
@keyframes tg-unread-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.tg-box { margin: .4rem 0 .8rem; }
.tg-log {
  max-height: 16rem; overflow: auto; border: 1px solid var(--line); border-radius: 8px;
  padding: .45rem .55rem; margin: .4rem 0; background: color-mix(in srgb, var(--bg) 70%, #000);
  font-size: .82rem; display: flex; flex-direction: column; gap: .35rem;
}
.tg-msg { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; line-height: 1.35; }
.tg-msg .tg-body { flex: 1 1 12rem; white-space: pre-wrap; word-break: break-word; }
.tg-msg.tg-in .tg-body { color: var(--text); }
.tg-msg.tg-out .tg-body { color: var(--accent); }
.tg-msg.tg-admin .tg-body { color: #f0c674; }
.tg-msg.tg-system { opacity: .75; font-style: italic; }
.tg-send { display: grid; gap: .35rem; grid-template-columns: 1fr auto; align-items: end; }
.tg-send textarea {
  grid-column: 1 / -1; font: inherit; font-size: .85rem; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; padding: .4rem .5rem; resize: vertical; min-height: 2.6rem;
}
.tg-send button { justify-self: end; }
.tg-react {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .12rem; margin: .15rem 0 0;
  padding: .12rem 0 0; border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  opacity: .55;
}
.tg-msg.tg-in:hover .tg-react, .tg-react:focus-within, .tg-react.busy { opacity: 1; }
.tg-react-btn {
  font: inherit; font-size: 1rem; line-height: 1; padding: .15rem .2rem; margin: 0;
  border: 0; border-radius: 4px; background: transparent; cursor: pointer; opacity: .85;
}
.tg-react-btn:hover { opacity: 1; background: color-mix(in srgb, var(--line) 40%, transparent); }
.tg-react-clear { opacity: .5; font-size: .85rem; }
.tg-react.busy { opacity: .5; pointer-events: none; }
.tg-msg.tg-reaction { font-size: .78rem; }

.wg-nets { display: flex; gap: .4rem; margin: .35rem 0; flex-wrap: wrap; }
.wg-nets input { flex: 1 1 12rem; min-width: 0; font: inherit; font-size: .82rem; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; padding: .35rem .5rem; }

/* Туннели (merged with Traffic) + Люди: per-device traffic */
.meta .hs { color: var(--muted, #888); font-size: .85em; }
.p-devs-tgl { font: inherit; font-size: .85em; color: var(--muted, #888); background: none; border: 0; padding: .1rem 0; cursor: pointer; display: block; }
.p-devs-tgl:hover { color: var(--text); }
table.traffic tr.dev td.user { padding-left: 1.6rem; }
table.traffic tr.dev .name { font-weight: 400; font-size: .9em; }
table.traffic tr.dev td { background: color-mix(in srgb, var(--line) 18%, transparent); }

/* 2-column person workspace on desktop */
.p-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr);
  gap: 1rem;
  align-items: start;
}
.p-col-main, .p-col-side {
  display: flex; flex-direction: column; gap: .85rem; min-width: 0;
}
.p-col-side {
  position: sticky; top: .75rem;
}
.p-col-side .tg-log { max-height: 24rem; }
/* person page top row: chat left, profile/note right; main sections below */
.p-top {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 1rem; align-items: start; margin-bottom: .85rem;
}
.p-top.one { grid-template-columns: 1fr; }
.p-top .tg-log { max-height: 22rem; }
.p-hero {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  justify-content: space-between; margin-bottom: .75rem;
  padding: .65rem .85rem; border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 88%, black);
}
.p-hero-badges { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
@media (max-width: 1080px) {
  .p-workspace { grid-template-columns: 1fr; }
  .p-col-side { position: static; }
  .p-top { grid-template-columns: 1fr; }
}

/* Marketing 2-column grid on desktop */
.mkt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1rem;
  align-items: start;
}
.mkt-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.mkt-topic {
  border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; margin-bottom: .45rem;
  background: color-mix(in srgb, var(--bg) 55%, var(--panel));
}
.mkt-topic > summary { cursor: pointer; font-weight: 600; font-size: .86rem; }
@media (max-width: 1080px) {
  .mkt-grid { grid-template-columns: 1fr; }
}

/* /diag — diagnostics table & probe editor */
table.diag-probes-cfg { table-layout: auto; }
table.diag-probes-cfg th, table.diag-probes-cfg td { padding: .35rem .45rem; }
table.diag-probes-cfg td.c { text-align: center; }
table.diag-probes-cfg input[type="text"], table.diag-probes-cfg input:not([type]) {
  width: 100%; font: inherit; font-size: .84rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .45rem;
}
table.diag-tbl { table-layout: auto; }
table.diag-tbl th, table.diag-tbl td { padding: .5rem .6rem; vertical-align: top; }
table.diag-tbl th.d-status, table.diag-tbl td.d-status { width: 7.5rem; white-space: nowrap; }
table.diag-tbl th.d-time, table.diag-tbl td.d-time { width: 7.5rem; white-space: nowrap; }
table.diag-tbl th.d-person, table.diag-tbl td.d-person { width: 15%; }
table.diag-tbl th.d-srv, table.diag-tbl td.d-srv { width: 15%; }
table.diag-tbl th.d-ext, table.diag-tbl td.d-ext { width: 15%; }
table.diag-tbl th.d-spd, table.diag-tbl td.d-spd { width: 8.5rem; white-space: nowrap; }
table.diag-tbl th.d-act, table.diag-tbl td.d-act { width: 10.5rem; white-space: nowrap; }
.diag-probe-item {
  border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; margin-bottom: .45rem;
  background: color-mix(in srgb, var(--bg) 60%, var(--panel));
}
.diag-probe-pre {
  margin: .4rem 0 0; padding: .5rem .6rem; border-radius: 6px; border: 1px solid var(--line);
  background: #0b0f14; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
@media (max-width: 860px) {
  table.diag-tbl, table.diag-tbl tbody { display: block; width: 100%; }
  table.diag-tbl thead { display: none; }
  table.diag-tbl tr { display: block; padding: .55rem; border-bottom: 1px solid var(--line); }
  table.diag-tbl td { display: block; width: 100% !important; border: 0; padding: .18rem 0; }
}

.diag-routes { width: 100%; border-collapse: collapse; font-size: .8rem; }
.diag-routes th, .diag-routes td { padding: .2rem .45rem; text-align: left; border-bottom: 1px solid rgba(127,127,127,.2); vertical-align: top; }
/* person top row: chat stretches to the right column height (profile + summary + balance) */
.p-top { align-items: stretch; }
.p-side { display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.p-tg-sec { display: flex; flex-direction: column; min-height: 0; }
.p-tg-sec .tg-box { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.p-top .tg-log { flex: 1; min-height: 14rem; max-height: 40rem; }
.p-sum { font-size: .84rem; display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; margin: 0; }
.p-sum dt { color: var(--muted, #888); }
.p-sum dd { margin: 0; min-width: 0; }
.p-sum-toggles { margin-top: .5rem; }
@media (max-width: 1080px) { .p-top .tg-log { max-height: 22rem; } }