:root { --background:#f4f6f9; --surface:#fff; --text:#202c3d; --muted:#5c697b; --border:#dce2ea; --primary:#1759b8; --primary-soft:#edf3fc; --danger:#ae2029; --radius:6px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--background); color:var(--text); font:14px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--primary); text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
button,input,textarea,summary { font:inherit; }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 16px; border:1px solid transparent; border-radius:var(--radius); background:var(--primary); color:#fff; text-decoration:none; cursor:pointer; text-align:center; font-weight:600; }
button:hover,.button:hover { filter:brightness(.95); text-decoration:none; }
button:disabled { opacity:.55; cursor:not-allowed; }
.secondary { background:var(--surface); border-color:var(--border); color:var(--text); }
.danger { background:var(--danger); }
.danger-outline { background:var(--surface); color:var(--danger); border-color:#e5b5b9; }
:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip { position:absolute; left:16px; top:-80px; z-index:2; padding:8px; background:var(--surface); }
.skip:focus { top:8px; }
.top { background:var(--surface); border-bottom:1px solid var(--border); padding:16px 32px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.brand { color:var(--text); text-decoration:none; font-size:21px; font-weight:750; white-space:nowrap; letter-spacing:-.5px; }
.identity { display:flex; align-items:center; gap:20px; min-width:0; }
.identity span { overflow-wrap:anywhere; color:var(--muted); }
.shell { display:flex; gap:40px; max-width:1440px; margin:0 auto; padding:36px 32px 48px; min-height:calc(100vh - 128px); }
nav { flex:0 0 180px; }
nav summary { display:none; }
.navlinks { display:flex; flex-direction:column; gap:4px; }
.nav-downloads { margin-top:20px; padding-top:20px; border-top:1px solid var(--border); }
.navlinks a { padding:10px 14px; min-height:44px; color:var(--muted); border-radius:var(--radius); text-decoration:none; }
.navlinks a:hover { background:#e9edf3; color:var(--text); }
.navlinks a[aria-current] { background:#e6edf8; color:#164d9a; font-weight:650; }
main { min-width:0; flex:1; }
.page-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
h1 { font-size:28px; line-height:1.25; margin:0; letter-spacing:-.6px; overflow-wrap:anywhere; }
h2 { font-size:18px; line-height:1.4; margin:0 0 16px; letter-spacing:-.2px; }
p { margin:0 0 16px; overflow-wrap:anywhere; }
.lead { color:var(--muted); margin-bottom:28px; }
.back-link { display:inline-block; margin-bottom:16px; text-decoration:none; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:24px; margin-bottom:24px; }
.panel>:last-child { margin-bottom:0; }
.notice { border:1px solid #cbdaf1; border-radius:8px; background:#f0f5fe; padding:16px 20px; margin:20px 0 24px; overflow-wrap:anywhere; }
.notice>:last-child { margin-bottom:0; }
.error-notice { border-color:#edc5c8; background:#fff4f4; color:#832029; }
.muted,small,.caption { color:var(--muted); }
small { display:block; font-size:12px; line-height:1.6; }
.caption { font-size:12px; margin-top:16px; }
.login,.confirmation { max-width:680px; margin-top:24px; }
.login>.button { margin:8px 0 24px; }
input,textarea { width:100%; min-height:42px; border:1px solid #bac5d3; border-radius:var(--radius); padding:9px 12px; color:var(--text); background:var(--surface); margin-top:6px; }
input[readonly] { background:#f4f6f9; color:var(--muted); }
textarea { resize:vertical; overflow-wrap:anywhere; }
label { display:block; font-weight:550; }
form { margin:0; }
fieldset { border:0; padding:0; margin:0 0 28px; min-width:0; }
legend { padding:0; font-size:12px; font-weight:650; color:var(--muted); margin-bottom:14px; }
.node-form label:not(:first-child) { margin-top:16px; }
.node-form small { margin-top:6px; }
.node-form .endpoint-fields label { margin-top:0; }
.optional { font-weight:400; font-size:12px; color:var(--muted); }
.endpoint-fields { display:grid; grid-template-columns:minmax(0,1fr) 94px; gap:16px; }
.form-footer { border-top:1px solid var(--border); padding-top:20px; }
.check { display:flex; align-items:flex-start; gap:12px; font-weight:400; margin:20px 0; }
.check input { width:18px; min-height:18px; height:18px; flex:none; margin:3px 0 0; accent-color:var(--primary); }
.add-form,.form-grid { display:flex; align-items:flex-end; flex-wrap:wrap; gap:16px; }
.add-form label { flex:1; min-width:200px; }
.form-grid { margin-top:16px; }
.form-grid label { flex:1; min-width:160px; }
.quotas { display:flex; flex-wrap:wrap; gap:40px; margin-bottom:20px; }
.quotas strong { display:block; font-size:26px; letter-spacing:-.5px; }
summary { cursor:pointer; min-height:44px; padding:10px 0; font-weight:550; }
details>p:first-of-type { margin-top:8px; }
.help-disclosure { margin-top:24px; max-width:850px; color:var(--muted); }
.help-disclosure summary { color:var(--text); }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.device-list,.audit-list { list-style:none; padding:0; margin:0; }
.device-list li { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; border-top:1px solid var(--border); }
.device-list li:first-child { border-top:0; padding-top:0; }
.device-list li:last-child { padding-bottom:0; }
.device-list strong { overflow-wrap:anywhere; }
.device-list p { margin:8px 0; }
.status { font-size:12px; border-radius:4px; padding:3px 8px; display:inline-block; background:#edf0f4; color:#526071; white-space:normal; }
.status.published { background:#eaf1fc; color:#1e56a1; }
.readiness { display:inline-flex; align-items:baseline; gap:8px; }
.readiness::before { content:""; width:7px; height:7px; border-radius:50%; background:#798699; flex:none; }
.readiness.ready::before { background:#218153; }
.readiness.waiting::before { background:#b07815; }
table { border-collapse:collapse; width:100%; text-align:left; }
th { font-size:12px; color:var(--muted); font-weight:550; }
th,td { padding:18px 12px; vertical-align:top; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
td:first-child { max-width:280px; }
tr:last-child td { border-bottom:0; }
.catalog-panel { padding:0; overflow:hidden; margin-bottom:0; }
.search-toolbar { display:flex; align-items:center; gap:10px; padding:18px 20px; border-bottom:1px solid var(--border); }
.search-toolbar input { max-width:390px; margin:0; }
.search-toolbar>a { white-space:nowrap; }
.server-table th { background:#fafbfd; }
.server-table th:first-child,.server-table td:first-child { padding-left:24px; }
.server-table th:last-child,.server-table td:last-child { padding-right:24px; }
.server-table td { vertical-align:middle; }
.server-table td:first-child { width:36%; }
.server-table small { margin-top:3px; }
.row-action { text-align:right; white-space:nowrap; }
.row-action a { display:inline-block; padding:8px 0; text-decoration:none; font-weight:550; }
.pagination { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:16px 24px; border-top:1px solid var(--border); color:var(--muted); font-size:12px; }
.empty-state { padding:48px 24px; text-align:center; color:var(--muted); }
.empty-state h2 { color:var(--text); }
.node-columns { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:24px; align-items:start; }
.node-sidebar { min-width:0; }
.node-sidebar .panel { padding:22px; }
.facts { margin:0 0 20px; }
.facts>div { margin-bottom:16px; }
.facts>div:last-child { margin-bottom:0; }
dt { color:var(--muted); font-size:12px; margin-bottom:4px; }
dd { margin:0; overflow-wrap:anywhere; }
.technical-details { padding:0 4px; }
.technical-details code { font-size:12px; }
.download-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.download-grid>.panel { margin:0; }
.download-grid details { border-top:1px solid var(--border); padding-top:8px; margin-top:16px; }
.guide-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:24px; align-items:start; }
.guide-contents { position:sticky; top:20px; }
.guide-contents h2 { font-size:14px; }
.guide-contents ol { padding-left:20px; }
.guide-contents li { margin:12px 0; }
.guide-contents a { text-decoration:none; }
.guide-step { scroll-margin-top:20px; }
.guide-step h2 { font-size:21px; margin-top:4px; }
.eyebrow { font-size:12px; color:var(--muted); }
.where { font-size:12px; font-weight:650; color:var(--primary); margin-top:24px; }
.expected { border-left:3px solid #a9cbbb; padding-left:14px; color:#325748; }
.code-block { margin:16px 0; padding:14px; background:#f4f6f9; border:1px solid var(--border); border-radius:6px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; font:12px/1.8 ui-monospace,Consolas,monospace; }
code { font: .94em ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
.copy-command { margin-top:12px; padding:6px 12px; min-height:36px; font-size:12px; }
.activation-step { border:1px solid #e5cf9c; border-radius:6px; padding:8px 16px; background:#fffdf6; }
.troubleshooting dt { font-weight:600; font-size:14px; color:var(--text); margin-top:20px; }
.troubleshooting dd { margin-bottom:16px; }
footer { padding:0 32px 24px; text-align:center; color:var(--muted); font-size:12px; }
@media(max-width:1100px) { .shell { gap:24px; padding:28px 24px; } nav { flex-basis:162px; } .panel { padding:20px; } .catalog-panel { padding:0; } .node-columns { grid-template-columns:1fr; } .node-sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .node-sidebar .panel { margin-bottom:0; } .technical-details { grid-column:1/-1; margin-bottom:24px; } .guide-layout { grid-template-columns:1fr; } .guide-contents { position:static; } .guide-contents ol { display:flex; flex-wrap:wrap; gap:4px 36px; } .guide-contents li { margin:0; } .responsive-table thead { display:none; } .responsive-table,.responsive-table tbody,.responsive-table tr { display:block; } .responsive-table tr { border-bottom:1px solid var(--border); padding:16px 0; } .responsive-table tr:first-child { padding-top:0; } .responsive-table tr:last-child { border:0; padding-bottom:0; } .responsive-table td { display:grid; grid-template-columns:120px minmax(0,1fr); gap:0 16px; max-width:none; border:0; padding:8px 0; } .responsive-table td::before { content:attr(data-label); color:var(--muted); } .responsive-table small { grid-column:2; } }
@media(max-width:767px) { .top { padding:16px; flex-wrap:wrap; } .identity { width:100%; justify-content:space-between; font-size:12px; } .shell { padding:20px 16px 32px; display:block; } nav { margin-bottom:24px; } nav details { border-bottom:1px solid var(--border); padding-bottom:8px; } nav summary { display:list-item; } .navlinks { flex-direction:row; flex-wrap:wrap; } .navlinks a { flex:1 0 40%; } h1 { font-size:24px; } .page-header { align-items:flex-start; flex-wrap:wrap; gap:16px; } .lead { margin-bottom:20px; } .panel,.notice { margin-bottom:16px; } .device-list li { align-items:flex-start; flex-direction:column; } .add-form label,.form-grid label { min-width:0; flex-basis:100%; } .responsive-table td { grid-template-columns:88px minmax(0,1fr); gap:0 8px; } .responsive-table td .button,.responsive-table td button { width:100%; padding:8px; } .node-sidebar,.download-grid { display:block; } .node-sidebar .panel,.download-grid>.panel { margin-bottom:16px; } .guide-contents ol { display:block; } .guide-contents li { margin:8px 0; } input,textarea { font-size:16px; } button,.button { min-height:44px; } .search-toolbar { padding:16px; flex-wrap:wrap; } .search-toolbar input { flex:1; min-width:120px; width:0; } .server-table thead { display:none; } .server-table,.server-table tbody,.server-table tr,.server-table td { display:block; } .server-table tr { padding:20px; border-bottom:1px solid var(--border); } .server-table tr:last-child { border:0; } .server-table td,.server-table td:first-child,.server-table td:last-child { border:0; width:auto; max-width:none; padding:6px 0; } .server-table td:first-child { padding-bottom:12px; } .server-table td[data-label]:not(:first-child) { display:flex; justify-content:space-between; gap:12px; } .server-table td[data-label]:not(:first-child)::before { content:attr(data-label); color:var(--muted); font-size:12px; } .row-action { text-align:left; } .pagination { padding:16px 20px; } .node-columns { gap:0; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }
@media print { nav,.identity,.copy-command,footer { display:none!important; } .shell,.guide-layout { display:block; } .guide-contents { position:static; } .panel { break-inside:avoid; } }

/* Метрики сгруппированы в ячейках; на узком экране строка становится карточкой. */
.catalog-panel:has(.statistics-table) { overflow:visible; }
.statistics-table th { white-space:nowrap; }
.statistics-table td:first-child { width:27%; }
.statistics-table th,.statistics-table td { padding:18px 10px; }
.server-name { font-weight:650; text-decoration:none; }
.server-name:hover { text-decoration:underline; }
.metric-stack { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.statistics-table .status { white-space:nowrap; }
.metric-value,.traffic-cell { font-variant-numeric:tabular-nums; white-space:nowrap; }
.traffic-cell small { white-space:normal; max-width:180px; font-size:11px; }
.metric-period { color:var(--muted); font-size:12px; }
.metric-help { position:relative; display:inline-flex; vertical-align:middle; }
.help-button { padding:0; min-height:24px; width:24px; height:24px; border-radius:50%; background:transparent; color:var(--muted); border:1px solid var(--border); font-size:12px; line-height:1; }
.metric-tooltip { display:none; position:absolute; z-index:5; top:calc(100% + 6px); right:0; width:250px; max-width:calc(100vw - 48px); padding:12px 14px; border:1px solid var(--border); border-radius:6px; background:var(--text); color:var(--surface); font-size:12px; font-weight:400; line-height:1.6; white-space:normal; text-align:left; box-shadow:0 4px 12px #202c3d1a; }
.metric-help:hover .metric-tooltip,.help-button:focus-visible + .metric-tooltip,.help-button[aria-expanded="true"] + .metric-tooltip { display:block; }
.metric-help.tooltip-dismissed .metric-tooltip { display:none; }
.mobile-metric-label { display:none; }
.statistics-stale .metric-value { opacity:.55; }
@media(max-width:1200px) and (min-width:768px) {
  .statistics-table { font-size:12px; }
  .statistics-table th { white-space:normal; }
  .statistics-table th,.statistics-table td { padding:14px 6px; }
  .statistics-table th:first-child,.statistics-table td:first-child { padding-left:16px; }
  .statistics-table th:last-child,.statistics-table td:last-child { padding-right:16px; }
  .statistics-table td:first-child { width:24%; }
  .statistics-table .metric-value { white-space:normal; }
}
@media(max-width:1100px) {
  .statistics-table thead { display:none; }
  .statistics-table,.statistics-table tbody,.statistics-table tr,.statistics-table td { display:block; }
  .statistics-table tr { padding:20px; border-bottom:1px solid var(--border); }
  .statistics-table tr:last-child { border:0; }
  .statistics-table td,.statistics-table td:first-child,.statistics-table td:last-child { border:0; width:auto; max-width:none; padding:6px 0; }
  .statistics-table td:first-child { padding-bottom:12px; }
  .statistics-table td[data-label]:not(:first-child)::before { content:attr(data-label); color:var(--muted); font-size:12px; }
  .statistics-table td:not(:first-child) { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:8px 0; }
  .statistics-table td:first-child { width:auto; }
  .mobile-metric-label { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
  .statistics-table .metric-stack { align-items:flex-end; text-align:right; }
  .statistics-table .metric-tooltip { position:fixed; bottom:16px; left:16px; right:16px; top:auto; width:auto; max-width:none; }
  .help-button { min-height:28px; width:28px; height:28px; }
  .metric-value { padding-top:3px; }
}
@media(min-width:768px) and (max-width:1100px) {
  .statistics-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 32px; }
  .statistics-table td:first-child { grid-column:1/-1; }
}