:root {
  --bg: #0A0D12;
  --surface: #10141C;
  --elevated: #161C28;
  --hover: #1B2230;
  --border: #202939;
  --border-soft: #1A2130;
  --ink: #E8EDF4;
  --muted: #7C8AA0;
  --faint: #4A5568;
  --cpu: #0FA896;
  --ram: #6C7BF2;
  --net: #C77E29;
  --good: #34D399;
  --warn: #FBBF24;
  --crit: #F87171;
  --accent: #14B8A6;
  --r: 16px;
  --font-display: "Unbounded", "Inter", sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
}

/* ================= темы: токены ================= */

:root[data-theme="midnight"] {
  --bg: #0B0A16; --surface: rgba(26, 23, 51, .55); --elevated: rgba(38, 33, 72, .6); --hover: rgba(46, 40, 88, .6);
  --border: #363065; --border-soft: rgba(58, 52, 110, .5);
  --ink: #ECEAF8; --muted: #8D89B0; --faint: #55517A;
  --accent: #8B7CF2;
  --r: 22px;
}
:root[data-theme="terminal"] {
  --bg: #050A06; --surface: #070F09; --elevated: #0D1810; --hover: #122015;
  --border: #2C5233; --border-soft: #1B3321;
  --ink: #C9F0D0; --muted: #6FA07A; --faint: #41654A;
  --accent: #2EA043;
  --r: 0px;
  --font-display: "JetBrains Mono", monospace;
  --font-body: "JetBrains Mono", monospace;
}
:root[data-theme="dawn"] {
  --bg: #F4F2EC; --surface: #FFFFFF; --elevated: #F0EEE7; --hover: #E9E6DD;
  --border: #D8D3C6; --border-soft: #E7E3D8;
  --ink: #24262C; --muted: #6E7379; --faint: #A4A69F;
  --cpu: #079B8A; --ram: #4F5ED9; --net: #A3641B;
  --good: #0E9A66; --warn: #B87F0A; --crit: #C94345;
  --accent: #0E7C6B;
  --r: 6px;
  --font-display: "Lora", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
}
:root[data-theme="synthwave"] {
  --bg: #120820; --surface: #1A0F2E; --elevated: #241542; --hover: #2B1A4E;
  --border: #4A2E80; --border-soft: #2E1D52;
  --ink: #F2E9FF; --muted: #A78FC9; --faint: #6B5390;
  --accent: #E551A8;
  --r: 14px;
}

/* ================= Полночь: стекло ================= */

:root[data-theme="midnight"] body {
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(139, 124, 242, .16), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(60, 130, 246, .12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="midnight"] #sidebar {
  background: rgba(19, 17, 38, .55);
  backdrop-filter: blur(18px);
  border-right: 1px solid rgba(139, 124, 242, .15);
}
:root[data-theme="midnight"] .card,
:root[data-theme="midnight"] .tile,
:root[data-theme="midnight"] .panel,
:root[data-theme="midnight"] .pay-row {
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(5, 3, 18, .45);
  border: 1px solid rgba(139, 124, 242, .14);
}
:root[data-theme="midnight"] .btn { border-radius: 999px; }
:root[data-theme="midnight"] .brand {
  background: linear-gradient(120deg, #B6ACFF, #7AA8FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="midnight"] .bar, :root[data-theme="midnight"] .chip { border-radius: 999px; }

/* ================= Терминал: TUI ================= */

:root[data-theme="terminal"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
:root[data-theme="terminal"] * { border-radius: 0 !important; }
:root[data-theme="terminal"] .brand { letter-spacing: .2em; text-shadow: 0 0 12px rgba(46, 160, 67, .7); }
:root[data-theme="terminal"] .brand::before { content: '['; color: var(--faint); }
:root[data-theme="terminal"] .brand::after { content: ']'; color: var(--faint); }
:root[data-theme="terminal"] .grid { grid-template-columns: 1fr; gap: 10px; }
:root[data-theme="terminal"] .card { padding: 12px 16px; gap: 8px; }
:root[data-theme="terminal"] .card:hover { transform: none; background: var(--elevated); }
:root[data-theme="terminal"] .card-name::before { content: '> '; color: var(--accent); }
:root[data-theme="terminal"] .spark { display: none; }
:root[data-theme="terminal"] .metrics { flex-direction: row; }
:root[data-theme="terminal"] .metrics .metric { flex: 1; }
:root[data-theme="terminal"] .card, :root[data-theme="terminal"] .tile,
:root[data-theme="terminal"] .panel, :root[data-theme="terminal"] .pay-row {
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(46, 160, 67, .07);
}
:root[data-theme="terminal"] .dot.on { box-shadow: 0 0 12px var(--good); }
:root[data-theme="terminal"] .t-label, :root[data-theme="terminal"] .panel-title { color: var(--accent); }
:root[data-theme="terminal"] .btn { text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
:root[data-theme="terminal"] .tile .t-value { font-size: 20px; text-shadow: 0 0 10px rgba(46, 160, 67, .35); }

/* ================= Рассвет: бумага ================= */

:root[data-theme="dawn"] body {
  background: linear-gradient(180deg, #F7F5EF 0%, var(--bg) 240px);
}
:root[data-theme="dawn"] .card, :root[data-theme="dawn"] .tile,
:root[data-theme="dawn"] .panel, :root[data-theme="dawn"] .pay-row {
  border: none;
  box-shadow: 0 1px 2px rgba(40, 36, 26, .08), 0 8px 28px rgba(40, 36, 26, .07);
}
:root[data-theme="dawn"] #sidebar { background: transparent; border-right: 1px solid var(--border-soft); }
:root[data-theme="dawn"] .brand { font-style: italic; font-weight: 600; letter-spacing: 0; }
:root[data-theme="dawn"] .page-title { font-style: italic; }
:root[data-theme="dawn"] .tile .t-label { border-top: 2px solid var(--ink); padding-top: 8px; font-family: var(--font-body); letter-spacing: .08em; }
:root[data-theme="dawn"] .tile { background: transparent; box-shadow: none; padding: 8px 4px; }
:root[data-theme="dawn"] .tiles { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
:root[data-theme="dawn"] .btn.primary { color: #FFF; }
:root[data-theme="dawn"] .btn.pay { color: #2a1d02; }
:root[data-theme="dawn"] .topbar { background: color-mix(in srgb, #F7F5EF 85%, transparent); }
:root[data-theme="dawn"] .con-out { background: #FAF9F4; }
:root[data-theme="dawn"] .apexcharts-tooltip { color: var(--ink) !important; }

/* ================= Синтвейв: неон ================= */

:root[data-theme="synthwave"] body {
  background:
    radial-gradient(800px 500px at 50% -20%, rgba(229, 81, 168, .14), transparent 60%),
    radial-gradient(700px 500px at 100% 110%, rgba(34, 211, 238, .10), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
:root[data-theme="synthwave"] .brand {
  background: linear-gradient(100deg, #FF7EC3, #22D3EE);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(229, 81, 168, .55));
}
:root[data-theme="synthwave"] .card, :root[data-theme="synthwave"] .tile,
:root[data-theme="synthwave"] .panel, :root[data-theme="synthwave"] .pay-row {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(229, 81, 168, .55), rgba(76, 43, 128, .4) 40%, rgba(34, 211, 238, .5)) border-box;
}
:root[data-theme="synthwave"] .card:hover { box-shadow: 0 0 26px rgba(229, 81, 168, .22); }
:root[data-theme="synthwave"] .dot.on { background: #22D3EE; box-shadow: 0 0 12px #22D3EE; }
:root[data-theme="synthwave"] .card-open { color: var(--accent); }
:root[data-theme="synthwave"] .tile .t-value { text-shadow: 0 0 14px rgba(229, 81, 168, .5); }
:root[data-theme="synthwave"] .badge.ok { text-shadow: 0 0 8px rgba(52, 211, 153, .6); }
:root[data-theme="synthwave"] .btn.primary { background: linear-gradient(100deg, #E551A8, #9D4EDD); border-color: transparent; color: #FFF; }
:root[data-theme="synthwave"] .nav-item.active { box-shadow: inset 2px 0 0 var(--accent); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--font-body);
  min-height: 100vh;
}
.mono { font-family: var(--font-mono); }
.ic {
  width: 15px; height: 15px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -2px;
}
.nav-ico .ic { width: 16px; height: 16px; }
.btn .ic { width: 14px; height: 14px; }
.spacer { flex: 1; }
a { color: inherit; text-decoration: none; }

.cursor { color: var(--accent); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  * { transition: none !important; }
}

/* ================= каркас ================= */

.layout { display: flex; min-height: 100vh; }

#sidebar {
  width: 218px; flex: none;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column;
  padding: 22px 14px 16px;
  position: sticky; top: 0; height: 100vh;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700; font-size: 17px; line-height: 1.25;
  letter-spacing: .06em;
  padding: 0 10px 18px;
}

/* scrollbar-gutter: место под полосу прокрутки резервируется всегда — при разворачивании
   группы содержимое сайдбара не дёргается и плашки не съезжают */
nav { flex: 1; overflow-y: auto; scrollbar-gutter: stable; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  color: var(--muted); font-size: 13.5px; font-weight: 500;
  margin-bottom: 2px; cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap; overflow: hidden;
}
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item.active { background: var(--elevated); color: var(--ink); }
.nav-ico { width: 18px; text-align: center; flex: none; }
.nav-badge {
  margin-left: auto; font-size: 10.5px; font-family: var(--font-mono);
  background: color-mix(in srgb, var(--crit) 18%, transparent);
  color: var(--crit); border-radius: 6px; padding: 1px 7px; font-weight: 600;
}
.nav-badge.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.nav-sep { height: 1px; background: var(--border-soft); margin: 12px 6px; }
.nav-label {
  font-size: 10px; color: var(--faint); text-transform: uppercase;
  letter-spacing: .16em; padding: 0 10px 6px;
}
/* сворачиваемые группы навигации */
.nav-group { margin-top: 2px; }
.nav-group-head {
  display: flex; align-items: center; gap: 5px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--faint); font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .16em; padding: 9px 10px 5px;
  transition: color .15s;
}
.nav-group-head:hover { color: var(--text); }
.nav-chev { width: 13px; height: 13px; flex-shrink: 0; transition: transform .18s; }
.nav-group.collapsed .nav-chev { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-items { display: none; }
.nav-srv-label { font-size: 10px; color: var(--faint); font-family: var(--font-mono); padding: 7px 10px 3px; opacity: .7; letter-spacing: .1em; }
.nav-subgroup { margin-top: 2px; }
.nav-sub-head { font-size: 9px; padding: 6px 10px 4px; opacity: .8; }
.nav-sub-head .nav-chev { width: 11px; height: 11px; }

.nav-srv { display: flex; align-items: center; gap: 9px; }
.nav-srv .dot { width: 7px; height: 7px; }
.nav-srv .nv-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-srv .nv-cpu { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }

.theme-picker {
  display: flex; gap: 8px; padding: 12px 10px 0; align-items: center;
}
.theme-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border); cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.theme-dot:hover { transform: scale(1.15); }
.theme-dot.active { border-color: var(--ink); }

.side-actions { padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.side-row { display: flex; gap: 8px; }
.side-row .btn { flex: 1; }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  padding: 14px 28px;
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
}
.ticker {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticker b { color: var(--ink); font-weight: 600; }
.ticker .t-good { color: var(--good); }
.ticker .t-warn { color: var(--warn); }
.ticker .t-crit { color: var(--crit); }
.ticker .sep { color: var(--faint); margin: 0 8px; }

#page { padding: 22px 28px 48px; }

.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-title {
  font-family: var(--font-display); font-weight: 500; font-size: 21px;
  display: flex; align-items: center; gap: 12px;
}
.page-sub { width: 100%; color: var(--muted); font-size: 13px; margin-top: 2px; }
.page-actions { margin-left: auto; display: flex; gap: 9px; }

/* ================= кнопки ================= */

.btn {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--elevated); color: var(--ink);
  padding: 8px 14px; cursor: pointer; font-size: 13px;
  font-family: var(--font-body);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap; line-height: 1.2;
  transition: border-color .15s, background .15s, transform .1s;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #06251f; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; border-color: var(--crit); color: var(--crit); }
.btn.pay { background: var(--warn); border-color: var(--warn); color: #2a1d02; font-weight: 600; }
.btn.pay:hover { filter: brightness(1.08); }
.btn.mini { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.btn.wide { width: 100%; }

/* ================= тайлы ================= */

.vpn-strip { margin-bottom: 18px; }
.vpn-nodes-row { display: flex; flex-wrap: wrap; gap: 10px; }
.vpn-node {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--elevated); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 8px 14px; min-width: 130px;
}
.vpn-node .vn-name { font-weight: 600; font-size: 13px; }
.vpn-node .vn-pts { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.vpn-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.vpn-group {
  background: color-mix(in srgb, var(--elevated) 45%, transparent);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px 14px;
}
.vpn-group .sect-label { margin-bottom: 9px; }
.vpn-group .vpn-nodes-row { gap: 6px; }
.vpn-group .vpn-pill { background: var(--surface); margin: 0; }
.vpn-sel-panel { margin-bottom: 18px; }
.vpn-sel { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
/* ---------- Мои проекты ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.proj-card {
  background: var(--elevated); border: 1px solid var(--border-soft);
  border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s, border-color .15s;
}
.proj-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.proj-hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 108px; overflow: hidden; text-decoration: none;
  background:
    radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--acc, #667eea) 46%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--acc, #667eea) 30%, var(--elevated)), var(--elevated));
  border-bottom: 1px solid var(--border-soft);
}
.proj-hero-ico { font-size: 46px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); transition: transform .15s; }
.proj-card:hover .proj-hero-ico { transform: scale(1.08); }
.proj-open {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: color-mix(in srgb, var(--acc, #667eea) 82%, transparent); color: #fff;
  font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .15s;
}
.proj-hero:hover .proj-open { opacity: 1; }
.proj-open .ic { width: 16px; height: 16px; }
.proj-body { padding: 10px 12px 12px; }
.proj-name { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; color: var(--text); }
.proj-del {
  margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer;
  padding: 2px; border-radius: 6px; opacity: 0; transition: opacity .15s, color .15s;
}
.proj-card:hover .proj-del { opacity: 1; }
.proj-del:hover { color: var(--crit); }
.proj-del .ic { width: 15px; height: 15px; }
.proj-url { font-size: 12px; color: var(--muted); font-family: var(--font-mono); margin-top: 2px; word-break: break-all; }
.proj-desc { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tg-card {
  display: flex; align-items: stretch; gap: 4px;
  background: var(--elevated); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 6px 6px 6px 11px; transition: transform .15s, border-color .15s;
}
.tg-card:hover { transform: translateY(-2px); border-color: #2aabee; }
.tg-main { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; flex: 1; padding: 5px 0; }
.tg-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(160deg, #2aabee, #1c93d2); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.tg-ico .ic { width: 18px; height: 18px; }
.tg-meta { min-width: 0; display: flex; flex-direction: column; }
.tg-name { font-weight: 600; font-size: 14px; color: var(--text); }
.tg-desc { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-nodesc { font-style: italic; opacity: .6; }
.tg-edit {
  flex-shrink: 0; align-self: center; background: none; border: 0; color: var(--muted);
  cursor: pointer; padding: 7px; border-radius: 8px; transition: background .15s, color .15s;
}
.tg-edit:hover { background: var(--surface); color: var(--accent); }
.tg-edit .ic { width: 16px; height: 16px; display: block; }

.vpn-via { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.vpn-via b { color: var(--good); font-weight: 600; }
.vpn-via-auto { opacity: .7; }
.vpn-sel-btn {
  flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--elevated); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: 10px; padding: 12px 16px; font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.vpn-sel-btn:hover { border-color: var(--accent); }
.vpn-sel-btn.active {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, var(--elevated));
  color: var(--good);
}
.vpn-sel-btn.dead { opacity: .7; border-color: color-mix(in srgb, var(--crit) 55%, var(--border-soft)); }
.vpn-sel-btn .vsb-ms { font-size: 12px; font-weight: 400; color: var(--muted); font-family: var(--font-mono); }
.vpn-sel-btn.active .vsb-ms { color: var(--good); }
.vpn-sel-btn .vsb-ms.vsb-bad { color: var(--crit); }
.chip-x { cursor: pointer; color: var(--faint); margin-left: 4px; }
.chip-x:hover { color: var(--crit); }
.router-log {
  margin: 0; padding: 10px 12px; max-height: 420px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
  color: var(--muted); white-space: pre-wrap; word-break: break-all;
}
.vpn-pill {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 5px;
  background: var(--elevated); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 5px 11px; font-size: 12.5px; margin: 0 6px 6px 0;
  font-family: var(--font-mono); min-width: 128px;
}
.vpn-pill.bad { border-color: color-mix(in srgb, var(--crit) 40%, var(--border-soft)); }
.vpn-pill.checking { border-color: var(--accent); }
.vpn-nm { margin-right: 4px; }
.vpn-slot {
  display: inline-flex; align-items: center; justify-content: flex-end;
  width: 46px; height: 14px; font-size: 11.5px; font-family: var(--font-mono);
}
.vpn-slot.vpn-good { color: var(--good); }
.vpn-slot.vpn-bad { color: var(--crit); justify-content: center; }
.vpn-slot.vpn-q { color: var(--faint); justify-content: center; }
.vpn-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); animation: vpn-pulse 0.9s ease-in-out infinite;
}
@keyframes vpn-pulse { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  padding: 15px 19px 13px;
}
.tile .t-label {
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em;
  font-family: var(--font-mono);
}
.tile .t-value {
  font-family: var(--font-display); font-weight: 500; font-size: 23px;
  margin-top: 6px; line-height: 1.2;
}
.tile .t-value small { font-size: 13px; color: var(--muted); font-family: var(--font-body); font-weight: 400; }
.tile .t-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.tile.alarm .t-value { color: var(--crit); }
.tile.soon .t-value { color: var(--warn); }

.seg-row { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.seg { display: inline-flex; border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.seg-btn {
  background: transparent; border: none; color: var(--muted);
  padding: 5px 14px; font-size: 12px; cursor: pointer; font-family: var(--font-mono);
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { background: var(--elevated); color: var(--ink); }

.view-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 15;
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px; min-width: 220px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.vm-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.vm-row input { accent-color: var(--accent); }
.vm-sep { height: 1px; background: var(--border-soft); margin: 6px 0; }

.add-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.add-input {
  flex: 1; min-width: 140px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 7px 11px; font-size: 13px; font-family: var(--font-body);
}
.add-input:focus { outline: none; border-color: var(--accent); }

/* ================= настройки ================= */
.set-grid { display: flex; flex-direction: column; }
.set-row {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--border-soft);
}
.set-row:last-child { border-bottom: none; }
.set-row > div:first-child { flex: 1; }
.set-name { font-weight: 600; font-size: 14px; }
.set-hint { color: var(--muted); font-size: 12px; margin-top: 3px; max-width: 560px; }
.set-ctrl { display: flex; align-items: center; gap: 8px; flex: none; }
.set-ctrl input[type=number], .set-ctrl input[type=text] {
  width: 90px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px;
  font-size: 14px; font-family: var(--font-mono);
}
.set-ctrl input:focus { outline: none; border-color: var(--accent); }
.set-unit { color: var(--muted); font-size: 13px; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch::after {
  content: ''; position: absolute; inset: 0; border-radius: 24px;
  background: var(--elevated); border: 1px solid var(--border); transition: .2s;
}
.switch::before {
  content: ''; position: absolute; left: 3px; top: 3px; z-index: 1;
  width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: .2s;
}
.switch:has(input:checked)::after { background: color-mix(in srgb, var(--accent) 30%, var(--elevated)); border-color: var(--accent); }
.switch:has(input:checked)::before { transform: translateX(18px); background: var(--accent); }

/* ================= карточки обзора ================= */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 11px;
  position: relative; overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.card:hover { border-color: var(--border); transform: translateY(-2px); }
.card.dragging { opacity: .4; }
.card.drag-over { border-color: var(--accent); }
.card-actions { display: flex; gap: 6px; align-items: center; }

.grp-rows { display: flex; flex-direction: column; }
.grp-row {
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 6px; border-top: 1px solid var(--border-soft);
  cursor: pointer; border-radius: 8px;
}
.grp-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.grp-top .grp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-top .card-ip { margin-top: 0; }
.grp-mets { display: flex; align-items: center; gap: 14px; padding-left: 19px; flex-wrap: wrap; }
.grp-row:hover { background: var(--hover); }
.grp-name { font-weight: 600; font-size: 13.5px; }
.grp-metric { font-size: 11px; color: var(--muted); }
.grp-metric b { color: var(--ink); }
.card.offline { border-color: color-mix(in srgb, var(--crit) 40%, var(--border)); }
.card.offline::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--crit);
}

.card-head { display: flex; align-items: flex-start; gap: 10px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.on { background: var(--good); box-shadow: 0 0 10px color-mix(in srgb, var(--good) 70%, transparent); }
.dot.off { background: var(--crit); box-shadow: 0 0 10px color-mix(in srgb, var(--crit) 70%, transparent); }
.dot.wait { background: var(--faint); }
.card-head .dot { margin-top: 6px; }
.card-name { font-weight: 600; font-size: 15.5px; }
.card-ip { color: var(--muted); font-size: 12px; font-family: var(--font-mono); margin-top: 1px; }
.card-open { color: var(--faint); font-size: 16px; margin-left: auto; transition: color .15s, transform .15s; }
.card:hover .card-open { color: var(--accent); transform: translateX(2px); }
.card-err { color: var(--crit); font-size: 12px; font-family: var(--font-mono); word-break: break-all; }

.spark { height: 58px; margin: -4px -6px; pointer-events: none; }
.info-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--muted);
  font-size: 11px; font-family: var(--font-mono); font-style: italic;
  cursor: help; vertical-align: 2px; margin-left: 6px;
}
.info-i:hover { color: var(--accent); border-color: var(--accent); }

.spark-none {
  height: 58px; display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 11px;
  border: 1px dashed var(--border-soft); border-radius: 10px;
}

.facts { display: flex; flex-wrap: wrap; gap: 5px 14px; color: var(--muted); font-size: 12px; }
.facts b { color: var(--ink); font-weight: 500; }

/* метрики: крупные бары */
.metrics { display: flex; flex-direction: column; gap: 9px; }
.metric .m-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--muted); font-family: var(--font-mono);
}
.metric .m-label b { color: var(--ink); font-weight: 600; font-size: 13px; }
.bar { height: 9px; border-radius: 5px; background: var(--elevated); margin-top: 5px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 5px; background: var(--good); transition: width .5s; }
.bar > i.warn { background: var(--warn); }
.bar > i.crit { background: var(--crit); }
.bk-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.bk-row[hidden] { display: none; }

.bar > i.bk-indet {
  width: 30% !important;
  background: var(--accent);
  animation: bk-run 1.3s ease-in-out infinite;
}
@keyframes bk-run {
  0% { margin-left: 0; }
  50% { margin-left: 70%; }
  100% { margin-left: 0; }
}

/* ================= чипы ================= */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border-radius: 8px; padding: 3px 10px; font-size: 12px;
  border: 1px solid var(--border-soft); background: var(--elevated);
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); white-space: nowrap;
}
.chip.click { cursor: pointer; }
.chip.click:hover { border-color: var(--accent); }
.chip.up { color: var(--good); }
.chip.down { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 35%, var(--border-soft)); }
.chip.mid { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--border-soft)); }
.chip.vpn { color: var(--ram); border-color: color-mix(in srgb, var(--ram) 40%, var(--border-soft)); }
.chip.plain { color: var(--muted); }
.chip .ms { color: var(--muted); }

/* ================= биллинг-строка ================= */

.billing {
  border-top: 1px solid var(--border-soft); padding-top: 11px;
  display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap;
}
.billing .b-amount { font-family: var(--font-mono); font-weight: 600; }
.badge {
  border-radius: 7px; padding: 2px 10px; font-size: 11.5px; font-weight: 600;
  font-family: var(--font-mono); white-space: nowrap;
}
.badge.ok { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good); }
.badge.soon { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.badge.now { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--crit); }
.badge.vpn-badge { background: color-mix(in srgb, var(--ram) 15%, transparent); color: var(--ram); font-size: 14px; }

/* ================= страница сервера ================= */

.panel {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.panel-title {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .13em;
  font-family: var(--font-mono);
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px;
}
.panel-title .win { margin-left: auto; color: var(--faint); text-transform: none; letter-spacing: 0; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .duo { grid-template-columns: 1fr; } }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; }
.kv .k { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono); }
.kv .v { font-size: 14px; margin-top: 2px; font-family: var(--font-mono); }

/* аптайм-полоса */
.upstrip { display: flex; gap: 1px; height: 26px; border-radius: 6px; overflow: hidden; }
.upstrip i { flex: 1; background: var(--elevated); }
.upstrip i.u { background: color-mix(in srgb, var(--good) 55%, var(--elevated)); }
.upstrip i.d { background: var(--crit); }
.upstrip-cap { display: flex; justify-content: space-between; color: var(--faint); font-size: 10.5px; font-family: var(--font-mono); margin-top: 5px; }

/* pm2-таблица */
.pm2-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pm2-table th {
  text-align: left; font-size: 10.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono);
  font-weight: 400; padding: 4px 10px 8px;
}
.pm2-table td { padding: 7px 10px; border-top: 1px solid var(--border-soft); }
.pm2-table tr:hover td { background: var(--hover); }
.pm2-table .p-name { font-family: var(--font-mono); font-size: 12.5px; }
.p-stat {
  font-size: 10px; padding: 2px 8px; border-radius: 6px;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
}
.p-stat.online { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.p-stat.stopped, .p-stat.errored { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }
.p-meta { color: var(--muted); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.dev-cell { white-space: normal; max-width: 460px; }
.dev-more { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; color: var(--muted); }
.dev-more[hidden] { display: none; }
.chip.click { cursor: pointer; }
.p-restarts { color: var(--warn); }
.td-act { text-align: right; white-space: nowrap; }

/* ================= файлы ================= */

.fm-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.fm-path { color: var(--muted); font-size: 12px; word-break: break-all; }
.p-desc { color: var(--muted); font-size: 11.5px; font-family: var(--font-body); margin-top: 2px; }

/* ================= консоль Minecraft ================= */

.mcc-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.mcc-f {
  border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 3px 11px; font-size: 11px; cursor: pointer;
  color: var(--faint); background: transparent;
}
.mcc-f.active { color: var(--ink); background: var(--elevated); border-color: var(--border); }
.mcc-f.mcc-warn.active { color: var(--warn); }
.mcc-f.mcc-err.active { color: var(--crit); }
.mcc-log { max-height: 420px; min-height: 220px; }
.ml-info { color: var(--muted); }
.ml-warn { color: var(--warn); }
.ml-error { color: var(--crit); }
.ml-cmd { color: var(--accent); }

/* тонкий фирменный скроллбар (консоли и вся панель) */
.con-out::-webkit-scrollbar, .dev-more::-webkit-scrollbar, body::-webkit-scrollbar, nav::-webkit-scrollbar, .router-log::-webkit-scrollbar {
  width: 9px; height: 9px;
}
.con-out::-webkit-scrollbar-track, body::-webkit-scrollbar-track, nav::-webkit-scrollbar-track, .router-log::-webkit-scrollbar-track {
  background: transparent;
}
.con-out::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, nav::-webkit-scrollbar-thumb, .router-log::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 5px; border: 2px solid var(--bg);
}
.con-out::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .router-log::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
}

/* ================= консоль ================= */

.con-out {
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 12px 14px;
  font-size: 12px; line-height: 1.55; color: var(--muted);
  max-height: 320px; overflow: auto; margin: 0 0 10px;
  white-space: pre-wrap; word-break: break-all;
}
.con-row { display: flex; align-items: center; gap: 10px; }
.con-prompt { color: var(--accent); font-size: 12px; white-space: nowrap; }
.con-row input {
  flex: 1; background: var(--bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 12px; font-size: 13px;
}
.con-row input:focus { outline: none; border-color: var(--accent); }

/* ================= страница оплат ================= */

.pay-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r); padding: 15px 20px; margin-bottom: 10px;
  flex-wrap: wrap;
}
.pay-row .pr-name { font-weight: 600; font-size: 15px; min-width: 140px; }
.pay-row .pr-date { color: var(--muted); font-size: 13px; font-family: var(--font-mono); }
.pay-row .pr-amount { font-family: var(--font-mono); font-weight: 600; font-size: 15px; }

/* ================= карточки ботов ================= */

.bot-card { cursor: default; }
.bot-card:hover { transform: none; }
.bot-paths { border-top: 1px solid var(--border-soft); padding-top: 9px; display: flex; flex-direction: column; gap: 4px; }
.bp-row { display: flex; gap: 10px; font-size: 12px; align-items: baseline; }
.bp-row .k {
  flex: none; width: 76px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-family: var(--font-mono);
}
.bp-row .mono { color: var(--muted); font-size: 11.5px; word-break: break-all; }
.bp-row .bp-stale { color: var(--warn); }

/* ================= прочее ================= */

.empty { text-align: center; color: var(--muted); padding: 80px 20px; }
.empty-art { font-size: 20px; color: var(--faint); margin-bottom: 12px; font-family: var(--font-mono); }

dialog {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r);
  width: min(560px, 94vw); padding: 24px 26px;
}
dialog::backdrop { background: rgba(4, 6, 10, .7); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 16px; font-size: 16px; font-family: var(--font-display); font-weight: 500; }
dialog label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 11px; }
dialog label.inline { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--ink); font-size: 13px; }
dialog input {
  width: 100%; margin-top: 5px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 11px; font-size: 14px; font-family: var(--font-body);
}
dialog input[type=checkbox] { width: auto; margin: 0; accent-color: var(--accent); }
dialog select {
  width: 100%; margin-top: 5px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 11px; font-size: 14px; font-family: var(--font-body);
}
dialog input:focus { outline: none; border-color: var(--accent); }
dialog fieldset { border: 1px solid var(--border-soft); border-radius: 12px; margin: 0 0 14px; padding: 12px 14px; }
dialog legend { font-size: 13px; padding: 0 6px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 74px; gap: 12px; }
.actions { display: flex; gap: 10px; margin-top: 8px; }

#toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 18px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 20;
}
#toast.show { opacity: 1; }
#toast.err { border-color: var(--crit); color: var(--crit); }

/* apex-тултипы под тему */
.apexcharts-tooltip {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.45) !important;
}
.apexcharts-tooltip-title {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  font-family: var(--font-mono) !important;
}

/* ================= мобилка ================= */

@media (max-width: 800px) {
  .layout { flex-direction: column; }
  #sidebar {
    width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    padding: 12px 16px; gap: 8px;
  }
  .brand { padding: 0 8px 0 0; font-size: 13px; }
  .brand br { display: none; }
  nav { display: flex; flex: 1; overflow-x: auto; }
  .nav-sep, .nav-label { display: none; }
  #nav-servers { display: flex; }
  .side-actions { padding: 0; flex-direction: row; }
  .btn.wide { width: auto; }
  #page { padding: 16px; }
  .topbar { padding: 10px 16px; }
  .duo { grid-template-columns: 1fr; }
}

/* ---------- экран входа в облачную панель (в локальном режиме не появляется) ---------- */
.gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg, #14161a);
}
.gate-box {
  width: 320px; padding: 28px 26px;
  border: 1px solid var(--border, #2a2e35); border-radius: 14px;
  background: var(--card, #1a1d23);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 10px;
}
.gate-title { font-size: 19px; font-weight: 600; }
.gate-sub { color: var(--muted, #8b93a1); font-size: 13px; margin-bottom: 6px; line-height: 1.4; }
.gate-inp {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--border, #2a2e35); border-radius: 9px;
  background: var(--bg, #14161a); color: inherit; outline: none;
}
.gate-inp:focus { border-color: var(--accent, #4f8cff); }
.gate-btn { width: 100%; margin-top: 6px; padding: 10px; font-size: 14px; }
.gate-err { color: #e5484d; font-size: 12.5px; min-height: 16px; line-height: 1.35; }
.gate-out { align-self: center; }
#vault-chip { margin-left: 8px; }
.proj-repo {
  color: var(--muted, #8b93a1); opacity: .65;
  display: inline-flex; align-items: center; margin-left: 6px;
  transition: opacity .15s;
}
.proj-repo:hover { opacity: 1; }
/* плашка у группы «Локально»: в узком сайдбаре не должна переноситься на вторую строку,
   поэтому гасим наследуемые uppercase + letter-spacing и запрещаем перенос */
.nav-local-hint {
  margin-left: auto; flex-shrink: 0; white-space: nowrap;
  font-size: 9px; letter-spacing: 0; text-transform: none;
  color: var(--muted, #8b93a1); opacity: .55;
  border: 1px solid var(--border, #2a2e35); border-radius: 5px; padding: 1px 4px;
  line-height: 1.4;
}
/* сам заголовок группы: название сжимается, плашка остаётся целой */
.nav-group-head > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* карточка бота: до 5 действий в ряд — не даём им наезжать на название */
.bot-card .card-head { gap: 8px; }
.bot-card .card-actions { flex-shrink: 0; gap: 4px; }
.bot-card .card-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bot-card .card-ip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .bot-card .card-head { flex-wrap: wrap; }
  .bot-card .card-actions { width: 100%; justify-content: flex-end; }
}

/* карточки ботов шире серверных: имена длинные + до 5 действий в ряд.
   3 в ряд на широком экране вместо 4 — название помещается целиком */
.bots-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
@media (min-width: 1500px) {
  .bots-grid { grid-template-columns: repeat(3, 1fr); }
}