/* базовая раскладка панели; цвета и шрифты задаёт ui.css (грузится после) */
  * { box-sizing: border-box; }
  body {
    margin: 0; font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
    background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased;
  }
  /* ---------- top bar ---------- */
  header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 28px; border-bottom: 1px solid var(--border);
    background: var(--panel); position: sticky; top: 0; z-index: 5;
  }
  .brand { display: flex; align-items: center; gap: 11px; font-weight: 650; font-size: 16px; }
  .brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(63,185,80,.16); }
  .brand small { color: var(--muted); font-weight: 400; }
  .top-actions { display: flex; align-items: center; gap: 14px; }
  .theme-toggle { cursor: pointer; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 12px; font-size: 13px; }
  .who { color: var(--muted); font-size: 13px; }

  /* ---------- layout ---------- */
  .wrap { max-width: 1080px; margin: 0 auto; padding: 28px; }

  /* ---------- stat cards ---------- */
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
  .stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
  .stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
  .stat .value { font-size: 26px; font-weight: 650; margin-top: 6px; }
  .stat .value small { font-size: 14px; color: var(--muted); font-weight: 400; }

  /* ---------- toolbar ---------- */
  .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .toolbar h2 { font-size: 17px; margin: 0; }
  .btn-primary {
    background: var(--accent); color: #fff; border: none; border-radius: 9px;
    padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  }
  .btn-primary:hover { filter: brightness(1.08); }

  /* ---------- table ---------- */
  .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  table { width: 100%; border-collapse: collapse; }
  th, td { text-align: left; padding: 13px 16px; font-size: 14px; }
  th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border); }
  tbody tr { border-bottom: 1px solid var(--border); }
  tbody tr:last-child { border-bottom: none; }
  tbody tr:hover { background: var(--panel-2); }
  .name { font-weight: 600; }
  .name small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 2px; }
  .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 9px; border-radius: 20px; }
  .badge.on { color: var(--green); background: rgba(63,185,80,.12); }
  .badge.off { color: var(--amber-tx); background: rgba(210,153,34,.13); }
  .badge .d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .traffic-bar { height: 5px; background: var(--panel-2); border-radius: 3px; margin-top: 6px; overflow: hidden; }
  .traffic-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
  .term { font-size: 13px; }
  .term.unlim { color: var(--muted); }
  .term.dated { color: var(--text); }
  .actions { display: flex; gap: 6px; justify-content: flex-end; }
  .icon-btn {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .icon-btn:hover { border-color: var(--accent); color: var(--accent-tx); }
  .icon-btn.danger:hover { border-color: var(--red); color: var(--red); }
  .muted { color: var(--muted); }

  /* ---------- modal ---------- */
  .overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none;
    align-items: center; justify-content: center; z-index: 20; padding: 20px;
  }
  .overlay.show { display: flex; }
  .modal { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; width: 420px; max-width: 100%; padding: 24px; }
  .modal h3 { margin: 0 0 4px; font-size: 18px; }
  .modal p.sub { margin: 0 0 18px; color: var(--muted); font-size: 13px; }
  .field { margin-bottom: 16px; }
  .field label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--muted); }
  .field input[type=text] {
    width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border);
    background: var(--panel-2); color: var(--text); font-size: 14px;
  }
  .seg { display: flex; gap: 8px; }
  .seg button {
    flex: 1; padding: 9px; border-radius: 9px; border: 1px solid var(--border);
    background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 13px;
  }
  .seg button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-tx); font-weight: 600; }
  .modal-actions { display: flex; gap: 10px; margin-top: 22px; }
  .btn-ghost { flex: 1; padding: 11px; border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: 14px; }

  /* ---------- qr modal ---------- */
  .qr-wrap { text-align: center; }
  .qr-box { width: 200px; height: 200px; margin: 6px auto 16px; background: #fff; border-radius: 12px; padding: 14px; }
  .qr-box svg { width: 100%; height: 100%; }
  .conf-actions { display: flex; gap: 10px; }
  .conf-actions button { flex: 1; padding: 11px; border-radius: 9px; font-size: 14px; cursor: pointer; border: 1px solid var(--border); }
  .conf-actions .dl { background: var(--accent); color: #fff; border: none; font-weight: 600; }
  .hint { background: var(--accent-soft); border-radius: 9px; padding: 11px 13px; font-size: 12.5px; color: var(--text); margin-bottom: 16px; text-align: left; line-height: 1.45; }

  @media (max-width: 720px) {
    .stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .col-hide { display: none; }
    .wrap { padding: 14px; }
  }
.login-body{display:flex;align-items:center;justify-content:center;height:100vh}
.login-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:32px;width:320px;display:flex;flex-direction:column;gap:14px}
.login-card input{padding:11px 13px;border-radius:9px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-size:14px}
.login-card button{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:11px;font-size:14px;cursor:pointer}
.login-card .err{color:var(--red);font-size:13px;margin:0}
/* ---------- category tabs ---------- */
.tabs{display:flex;gap:6px;background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:5px;width:fit-content}
.tabs a{border:none;background:transparent;color:var(--muted);font-size:14px;font-weight:600;padding:8px 18px;border-radius:8px;cursor:pointer;text-decoration:none}
.tabs a.active{background:var(--accent-soft);color:var(--accent-tx)}
.overdue{color:var(--red);font-size:12.5px;font-weight:600;white-space:nowrap}
.paidinfo{font-size:13px;cursor:pointer;border-bottom:1px dashed var(--muted);white-space:nowrap}
.paidinfo:hover{color:var(--accent-tx);border-color:var(--accent)}
.btn-extend{padding:6px 11px;border-radius:8px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-tx);cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap}
.btn-extend:hover{background:var(--accent);color:#fff}
.newdate{background:var(--accent-soft);border-radius:9px;padding:11px 13px;font-size:13px;line-height:1.5}
.history{margin:0;padding:0;list-style:none}
.history li{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid var(--border);font-size:14px}
.history li:last-child{border-bottom:none}
.history li.total{font-weight:700;border-top:2px solid var(--border)}
/* ---------- clients ---------- */
.client-row td{background:var(--panel-2);padding:10px 16px}
.client-line{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.client-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.tariff-badge{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-tx);background:var(--accent-soft);border-radius:6px;padding:2px 8px}
.devcount{font-size:12.5px}
.devcount.devover{color:var(--amber-tx);font-weight:700}
.client-actions{display:flex;gap:6px}
.subkey td:first-child{padding-left:34px}
.group-row td{background:var(--panel-2);padding:8px 16px;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.client-row{cursor:pointer}
.caret{color:var(--muted);font-size:12px;width:14px;display:inline-block;text-align:center}
/* ---------- bot chat panel ---------- */
/* высота = окно минус шапка/табы: список и лента скроллятся сами, композер всегда виден */
.chat-grid{display:grid;grid-template-columns:300px 1fr;height:calc(100vh - 190px);min-height:430px;margin-top:14px;overflow:hidden}
.dlg-list{border-right:1px solid var(--border);overflow-y:auto;min-height:0}
.dlg{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;flex-direction:column;gap:3px}
.dlg.active{background:var(--accent-soft)}
.dlg .top{display:flex;justify-content:space-between;align-items:center}
.dlg .nm{font-weight:600;font-size:14px}
.dlg .tm{font-size:11px;color:var(--muted)}
.dlg .prev{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.dlg .row2{display:flex;justify-content:space-between;align-items:center}
.unread{background:var(--accent);color:#fff;font-size:11px;border-radius:9px;padding:1px 7px;font-weight:700}
.chat{display:flex;flex-direction:column;min-height:0}
.chat-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.chat-head .nm{font-weight:650}
.order-inline[hidden]{display:none}
.order-inline{display:flex;align-items:center;gap:10px;background:rgba(210,153,34,.10);border:1px solid rgba(210,153,34,.35);border-radius:10px;padding:8px 12px;font-size:13px;flex-wrap:wrap}
.msgs{flex:1;padding:16px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.msg{max-width:72%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.35}
.msg.in{background:var(--panel-2);align-self:flex-start;border-bottom-left-radius:4px}
.msg.out{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;white-space:pre-wrap}
.msg.out.bot{background:var(--panel-2);color:var(--text);border:1px solid var(--border)}
.msg .who{font-weight:600;opacity:.9}
.msg.sys{align-self:center;background:none;color:var(--muted);font-size:12px;padding:2px}
.msg .t{display:block;font-size:10.5px;opacity:.65;margin-top:3px;text-align:right}
.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}
.composer input{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:10px 13px;color:var(--text);font-size:14px}
.composer button{background:var(--accent);border:none;color:#fff;border-radius:9px;padding:0 18px;font-weight:600;cursor:pointer}
.btn-ok,.btn-no{cursor:pointer;border:none;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600}
.btn-ok{background:var(--green);color:#fff}
.btn-no{background:transparent;border:1px solid var(--red);color:var(--red)}
.unread-badge{background:var(--red);color:#fff;border-radius:10px;font-size:12px;padding:1px 8px;font-weight:700}
.dlg{text-decoration:none;color:var(--text)}
.dlg-empty,.chat-empty{padding:40px;color:var(--muted);text-align:center}
.undeliv{color:var(--red);font-size:11px;font-style:normal}
.back{display:none;color:var(--muted);text-decoration:none;font-size:18px;padding-right:4px}
@media (max-width: 760px) {
  .chat-grid{grid-template-columns:1fr;height:calc(100vh - 150px)}
  .chat-grid.has-sel .dlg-list{display:none}
  .chat-grid:not(.has-sel) .chat{display:none}
  .back{display:inline}
}
/* ---------- мобильный адаптив: таблицы ключей → карточки ---------- */
@media (max-width: 720px) {
  header { padding: 12px 16px; }
  .stat { padding: 12px 13px; }
  .stat .value { font-size: 21px; }
  /* toolbar: вкладки на всю ширину, кнопки строкой ниже */
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .tabs { width: 100%; }
  .tabs a { flex: 1; text-align: center; padding: 9px 6px; }
  .toolbar-btns { width: 100%; }
  .toolbar-btns .btn-primary { flex: 1; }
  /* таблица → карточки */
  .card table, .card tbody { display: block; }
  .card thead { display: none; }
  tbody tr { display: flex; flex-wrap: wrap; align-items: center; padding: 12px 14px; }
  tbody tr[hidden] { display: none; } /* свёрнутые туннели клиента */
  tbody tr::after { content: ""; width: 100%; order: 3; } /* перенос строки после бейджа */
  tbody td { display: block; padding: 0; border: none; }
  td.name { order: 1; flex: 1; min-width: 0; font-size: 15px; }
  td.name small { font-size: 12px; }
  tbody td:nth-child(2) { order: 2; flex: none; margin-left: 10px; } /* статус-бейдж */
  .c-traffic, .c-online, .c-term { order: 4; font-size: 12.5px; color: var(--muted); margin-top: 7px; }
  .c-online::before, .c-term::before { content: "·"; margin: 0 6px; color: var(--muted); }
  tbody td:last-child { order: 5; width: 100%; flex: none; margin-top: 11px; }
  .actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .icon-btn { width: 38px; height: 38px; font-size: 15px; }
  /* строки клиентов и заголовки групп — обычные блоки */
  .client-row, .group-row { display: block; padding: 0; }
  .client-row::after, .group-row::after { content: none; }
  .client-row td, .group-row td { display: block; width: 100%; }
  .client-row td { padding: 11px 14px; }
  .group-row td { padding: 8px 14px; }
  /* вложенность туннелей клиента */
  tr.subkey { padding-left: 30px; }
  .subkey td:first-child { padding-left: 0; }
}

/* ---------- добавить на рабочий стол ---------- */
.a2hs-steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.a2hs-steps li + li { margin-top: 8px; }

/* ---------- график трафика по дням ---------- */
.tr-link{cursor:pointer;border-bottom:1px dashed var(--border)}
.tr-link:hover{color:var(--accent-tx);border-bottom-color:var(--accent)}
.chart-row td{padding:2px 14px 12px}
.chart-box{background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}
.chart-seg{display:flex;gap:4px}
.chart-seg button{padding:4px 10px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:12px;cursor:pointer}
.chart-seg button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.chart-svg svg{width:100%;height:110px;display:block}
.chart-svg rect{fill:var(--accent);opacity:.8}
.chart-svg rect:hover{opacity:1}

/* ---------- переключатель режима трафика ---------- */
.traffic-mode{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:8px}
/* ---------- server tab ---------- */
.srv-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.srv-limits{font-size:12.5px}
.srv-top .seg button{white-space:nowrap}
.srv-card{padding:16px 18px;margin-top:14px}
.srv-card h3{margin:0 0 8px;font-size:15px}
.srv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px}
.srv-grid .srv-card{margin-top:14px}
.ch-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.ch-head .muted{font-size:12.5px}
.ch-wrap{position:relative}
.ch{width:100%;height:auto;display:block}
.ch .grid{stroke:var(--border);stroke-width:1}
.ch .tick{fill:var(--muted);font-size:10px}
.ch .xh{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.tip{position:absolute;pointer-events:none;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:6px 9px;font-size:12px;line-height:1.4;min-width:130px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin:2px 0 6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.rec{border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.4;border-left-width:4px}
.rec.green{border-left-color:var(--green)}.rec.amber{border-left-color:var(--amber)}.rec.red{border-left-color:var(--red)}
.rec-h{margin-bottom:4px}
.tbl-wrap{overflow-x:auto;max-height:360px;overflow-y:auto}
.srv-table{width:100%;border-collapse:collapse;font-size:12.5px}
.srv-table th,.srv-table td{padding:5px 8px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}
.srv-table th:first-child,.srv-table td:first-child{text-align:left}
.srv-table th{color:var(--muted);font-weight:600;position:sticky;top:0;background:var(--panel)}
.now-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.now-cell{border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.now-v{font-size:22px;font-weight:700;margin:2px 0;font-variant-numeric:tabular-nums}
.now-cell .small{font-size:12px}
.now-top{grid-column:1/-1;border-top:1px solid var(--border);padding-top:8px;font-size:13px}
.now-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-variant-numeric:tabular-nums}
.ch-static{width:100%;height:auto;display:block}
.ch-static .grid{stroke:var(--border);stroke-width:1}.ch-static .tick{fill:var(--muted);font-size:10px}
@media (max-width:760px){.srv-grid{grid-template-columns:1fr}}

/* переключатель серверов + бейдж флага у ключа */
.srv-switch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.srv-switch .chip{padding:7px 14px;border-radius:9px;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-weight:600;font-size:13px;text-decoration:none}
.srv-switch .chip.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-tx)}
.srv-switch .chip.off{opacity:.55}
.srv-switch .chip.ghost{margin-left:auto}
.srv-switch select{padding:7px 10px;border-radius:9px;border:1px solid var(--border);background:var(--panel-2);color:var(--text)}
.srv-badge{font-size:12px;margin-right:5px}
/* страница «Серверы» */
.srv-table td{vertical-align:top;font-size:13px}
.srv-table td.c-status{white-space:nowrap}
.srv-table td.c-traffic{min-width:170px}
.srv-table td.c-hw,.srv-table td.c-pay{white-space:nowrap}
.srv-table tr.off{opacity:.6}
.srv-table td.name small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width: 720px){ .grid2{grid-template-columns:1fr} .srv-table td{width:100%;padding:4px 0} .srv-table td.c-keys::before{content:"Ключей / онлайн: ";color:var(--muted)} .srv-table td.c-hw::before{content:"Железо: ";color:var(--muted)} .srv-table td.c-pay::before{content:"Оплата: ";color:var(--muted)} }