/* ─── VPS Admin — единый дизайн ──────────────────────────────────────────── */
:root {
  --bg:        #0f172a;
  --surface:   #1e293b;
  --surface2:  #263347;
  --border:    #334155;
  --primary:   #38bdf8;
  --success:   #4ade80;
  --danger:    #f87171;
  --warning:   #fbbf24;
  --info:      #818cf8;
  --text:      #f1f5f9;
  --text-dim:  #94a3b8;
  --text-faint:#64748b;
  --mono:      'JetBrains Mono','Fira Code','Cascadia Code',monospace;
  --radius:    8px;
}
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0; }
html,body { height:100%;font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:14px; }

/* ─── Login ──────────────────────────────────────────────────────────────── */
.login-overlay { display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);position:fixed;inset:0;z-index:9999; }
.login-box { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:360px; }
.login-logo { font-size:1.4rem;font-weight:700;color:var(--primary);margin-bottom:1.5rem;text-align:center; }

/* ─── Topbar ─────────────────────────────────────────────────────────────── */
.topbar { display:flex;align-items:center;gap:.75rem;padding:.6rem 1.25rem;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;min-height:49px; }
.topbar-left { display:flex;align-items:center;gap:.5rem;flex-shrink:0; }
.topbar-logo { font-size:1.1rem; }
.topbar-title { font-weight:700;font-size:.9rem;color:var(--text); }
.topbar-right { display:flex;align-items:center;gap:.65rem;margin-left:auto; }

/* ─── App-status chip ────────────────────────────────────────────────────── */
.app-status-box { color:var(--text-dim);border:1px solid var(--border);border-radius:999px;padding:.2rem .65rem;background:rgba(255,255,255,.04);font-size:.75rem;white-space:nowrap; }
.app-status-box.ok   { color:var(--success);border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.08); }
.app-status-box.warn { color:var(--warning);border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08); }
.app-status-box.err  { color:var(--danger); border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.08); }

/* ─── Service nav ────────────────────────────────────────────────────────── */
.service-nav { display:flex;gap:.25rem; }
.service-nav a,.service-nav span { padding:.3rem .7rem;border-radius:5px;font-size:.8rem;color:var(--text-dim);text-decoration:none;border:1px solid var(--border);transition:all .15s; }
.service-nav a:hover,.service-nav a.active,.service-nav span.active { background:var(--primary);color:#0f172a;border-color:var(--primary);font-weight:600; }
.service-nav .nav-disabled { opacity:.4;cursor:not-allowed;pointer-events:none; }

/* ─── Auth box ───────────────────────────────────────────────────────────── */
.auth-box { display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-dim); }
.auth-box b { color:var(--text); }

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.main-layout { display:flex;height:calc(100vh - 49px);overflow:hidden; }
.sidebar { width:196px;min-width:196px;background:var(--surface);border-right:1px solid var(--border);padding:.75rem 0;flex-shrink:0;overflow-y:auto; }
.nav-item { padding:.55rem 1rem;cursor:pointer;font-size:.875rem;color:var(--text-dim);transition:all .15s;border-left:3px solid transparent;white-space:nowrap; }
.nav-item:hover { background:var(--surface2);color:var(--text); }
.nav-item.active { background:rgba(56,189,248,.1);color:var(--primary);border-left-color:var(--primary);font-weight:600; }
.content { flex:1;overflow-y:auto;padding:1.5rem; }

/* ─── Page header ────────────────────────────────────────────────────────── */
.page-header { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem; }
.page-header h2 { font-size:1.05rem;font-weight:700; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1rem; }
.card-header { padding:.6rem .75rem;border-bottom:1px solid var(--border);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);background:var(--surface2); }
.card-body { padding:1rem; }
.card-footer { padding:.65rem 1rem;border-top:1px solid var(--border);background:var(--surface2); }

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
.data-table { width:100%;border-collapse:collapse; }
.data-table th { background:var(--surface2);color:var(--text-dim);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.5rem .75rem;text-align:left;white-space:nowrap; }
.data-table td { padding:.5rem .75rem;border-bottom:1px solid var(--border);font-size:.875rem;vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--surface2); }
.table-empty { text-align:center;color:var(--text-faint);padding:2rem!important; }
.mono { font-family:var(--mono);font-size:.8rem; }
.table-actions { display:flex;gap:.3rem;flex-wrap:nowrap; }
.sortable { cursor:pointer;user-select:none; }
.sortable:hover { color:var(--text); }
.sort-indicator { display:inline-block;min-width:14px;color:var(--primary);font-size:.75rem; }
.sort-state { padding:.4rem .75rem;font-size:.75rem;color:var(--text-dim);border-bottom:1px solid var(--border);background:rgba(0,0,0,.15); }

/* ─── Status chips ───────────────────────────────────────────────────────── */
.status-badge,.status-chip { display:inline-block;padding:.2rem .7rem;border-radius:20px;font-size:.75rem;font-weight:600;border:1px solid; }
.status-active,.status-on  { background:rgba(74,222,128,.12);color:var(--success);border-color:rgba(74,222,128,.35); }
.status-inactive,.status-off { background:rgba(248,113,113,.12);color:var(--danger);border-color:rgba(248,113,113,.35); }
.status-unknown { background:rgba(100,116,139,.12);color:var(--text-dim);border-color:var(--border); }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn { padding:.4rem .85rem;border:none;border-radius:5px;cursor:pointer;font-size:.8rem;font-weight:600;transition:all .15s;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap; }
.btn:disabled { opacity:.5;cursor:not-allowed; }
.btn-primary { background:var(--primary);color:#0f172a; }
.btn-primary:hover:not(:disabled) { background:#7dd3fc; }
.btn-success { background:var(--success);color:#0f172a; }
.btn-success:hover:not(:disabled) { background:#86efac; }
.btn-danger  { background:var(--danger);color:#0f172a; }
.btn-danger:hover:not(:disabled)  { background:#fca5a5; }
.btn-warning { background:var(--warning);color:#0f172a; }
.btn-warning:hover:not(:disabled) { background:#fcd34d; }
.btn-info    { background:var(--info);color:#fff; }
.btn-info:hover:not(:disabled)    { background:#a5b4fc; }
.btn-ghost   { background:transparent;color:var(--text-dim);border:1px solid var(--border); }
.btn-ghost:hover:not(:disabled)   { background:var(--surface2);color:var(--text); }
.btn-sm  { padding:.3rem .6rem;font-size:.75rem; }
.btn-icon{ min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;padding:0; }
.btn-group { display:flex;gap:.4rem;flex-wrap:wrap; }

/* ─── Forms (field-group) ────────────────────────────────────────────────── */
.field-group { margin-bottom:.85rem; }
.field-group label { display:block;font-size:.78rem;font-weight:600;color:var(--text-dim);margin-bottom:.3rem; }
.field-group input,.field-group select,.field-group textarea {
  width:100%;background:var(--bg);border:1px solid var(--border);border-radius:5px;
  color:var(--text);padding:.45rem .65rem;font-size:.875rem;outline:none;transition:border-color .15s;
}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus { border-color:var(--primary); }
.code-editor { font-family:var(--mono);font-size:.8rem;resize:vertical; }
.input-row { display:flex;gap:.5rem; }
.input-row select { flex:1; }

/* ─── Form grid (2-col) ──────────────────────────────────────────────────── */
.form-grid { display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:.85rem; }
.form-grid label { display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;color:var(--text-dim); }
.form-grid input,.form-grid select,.form-grid textarea {
  background:var(--bg);border:1px solid var(--border);border-radius:5px;
  color:var(--text);padding:.45rem .65rem;font-size:.875rem;outline:none;transition:border-color .15s;
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color:var(--primary); }
.form-grid textarea { font-family:var(--mono);font-size:.8rem;resize:vertical; }
.wide { grid-column:1/-1; }
.form-actions { grid-column:1/-1;display:flex;align-items:center;gap:.5rem;margin-top:.25rem; }
.form-actions-right { display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto; }

/* ─── iOS toggle ─────────────────────────────────────────────────────────── */
.switch-item { display:inline-flex;align-items:center;gap:.65rem;color:var(--text);font-size:.875rem; }
.ios-switch { appearance:none;-webkit-appearance:none;width:40px;height:22px;border-radius:999px;background:rgba(148,163,184,.25);position:relative;border:1px solid var(--border);cursor:pointer;flex-shrink:0;transition:background .2s,border-color .2s; }
.ios-switch::after { content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s; }
.ios-switch:checked { background:var(--success);border-color:var(--success); }
.ios-switch:checked::after { transform:translateX(18px); }

/* ─── Server picker ──────────────────────────────────────────────────────── */
.server-picker { display:inline-flex;align-items:center;gap:.5rem;color:var(--text-dim);font-size:.8rem; }
.server-picker select { background:var(--bg);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:.35rem .6rem;font-size:.8rem;outline:none;transition:border-color .15s; }
.server-picker select:focus { border-color:var(--primary); }

/* ─── Uplink box ─────────────────────────────────────────────────────────── */
.uplink-box { background:rgba(15,23,42,.5);border:1px solid var(--border);border-radius:6px;padding:.75rem; }
.uplink-box select[multiple] { min-height:110px; }
.uplink-seq-actions { display:inline-flex;gap:.5rem;margin-top:.5rem; }

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
.alert { padding:.5rem .75rem;border-radius:5px;font-size:.8rem;margin-top:.5rem; }
.alert-error { background:rgba(248,113,113,.12);color:var(--danger);border:1px solid rgba(248,113,113,.3); }
.alert-success { background:rgba(74,222,128,.1);color:var(--success);border:1px solid rgba(74,222,128,.25); }
.error { background:rgba(248,113,113,.12);color:var(--danger);border:1px solid rgba(248,113,113,.3);border-radius:5px;padding:.5rem .75rem;margin-top:.5rem;font-size:.85rem;white-space:pre-wrap; }
.info  { color:#7dd3fc;margin-top:.5rem;font-size:.85rem;white-space:pre-wrap; }

/* ─── Terminal / logs ────────────────────────────────────────────────────── */
.logs,.terminal { background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:.75rem;font-family:var(--mono);font-size:.75rem;color:#94a3b8;white-space:pre-wrap;overflow-x:auto;min-height:120px;max-height:400px;overflow-y:auto; }

/* ─── QR ─────────────────────────────────────────────────────────────────── */
.qr-img { width:260px;max-width:100%;background:#fff;border-radius:8px;padding:6px;display:block;margin:1rem 0; }

/* ─── Busy overlay ───────────────────────────────────────────────────────── */
.busy-overlay { position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:2000; }
.busy-card { min-width:300px;max-width:90vw;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:1.25rem 1.5rem;color:var(--text); }
.busy-card h3 { margin-bottom:.75rem;font-size:1rem; }

/* ─── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:500;display:flex;align-items:center;justify-content:center; }
.modal-box { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:480px;max-width:calc(100vw - 2rem); }
.modal-header { display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border); }
.modal-header span { font-weight:700; }
.modal-close { background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1rem;padding:.2rem .5rem; }
.modal-body { padding:1rem; }
.modal-footer { display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--border); }
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:.75rem; }

/* ─── Misc ───────────────────────────────────────────────────────────────── */
.hidden { display:none!important; }
.switches { display:flex;flex-direction:column;gap:.5rem; }
h3 { font-size:.9rem;font-weight:700;color:var(--text-dim);margin:1rem 0 .5rem;text-transform:uppercase;letter-spacing:.04em; }

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px;height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border);border-radius:3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   VPS Admin — общие компоненты редизайна (идентичны в web-admin и wg-admin)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Dashboard stat-cards (инфографика) ─────────────────────────────────── */
.stat-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:.75rem;margin-bottom:1.25rem; }
.stat-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem 1rem;display:flex;align-items:center;gap:.8rem;position:relative;overflow:hidden;transition:border-color .15s; }
.stat-card:hover { border-color:var(--text-faint); }
.stat-card .stat-ico { font-size:1.55rem;line-height:1;flex-shrink:0;opacity:.92; }
.stat-card .stat-main { display:flex;flex-direction:column;gap:.05rem;min-width:0; }
.stat-card .stat-val { font-size:1.4rem;font-weight:700;color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums; }
.stat-card .stat-label { font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap; }
.stat-card .stat-sub { font-size:.7rem;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.stat-card::before { content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--border); }
.stat-card.accent-ok::before { background:var(--success); }
.stat-card.accent-primary::before { background:var(--primary); }
.stat-card.accent-warn::before { background:var(--warning); }
.stat-card.accent-danger::before { background:var(--danger); }
.stat-card.accent-info::before { background:var(--info); }
.stat-val.ok{color:var(--success);} .stat-val.warn{color:var(--warning);} .stat-val.danger{color:var(--danger);} .stat-val.primary{color:var(--primary);}

/* ─── Status dot ─────────────────────────────────────────────────────────── */
.dot { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.45rem;vertical-align:middle;flex-shrink:0; }
.dot-on { background:var(--success);box-shadow:0 0 0 3px rgba(74,222,128,.16); }
.dot-off { background:var(--text-faint); }
.dot-warn { background:var(--warning);box-shadow:0 0 0 3px rgba(251,191,36,.16); }
.dot-danger { background:var(--danger);box-shadow:0 0 0 3px rgba(248,113,113,.16); }
.state-cell { display:inline-flex;align-items:center;white-space:nowrap; }

/* ─── Type / proto badge ─────────────────────────────────────────────────── */
.type-badge { display:inline-block;padding:.15rem .55rem;border-radius:5px;font-size:.7rem;font-weight:700;letter-spacing:.03em;border:1px solid;white-space:nowrap; }
.type-tcp{color:#7dd3fc;border-color:rgba(125,211,252,.4);background:rgba(125,211,252,.08);}
.type-udp{color:#f0abfc;border-color:rgba(240,171,252,.4);background:rgba(240,171,252,.08);}

/* ─── Route (listen → forward) ───────────────────────────────────────────── */
.route { display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.8rem;white-space:nowrap; }
.route .arrow { color:var(--text-faint); }

/* ─── Hints / help ───────────────────────────────────────────────────────── */
.page-hint { color:var(--text-dim);font-size:.8rem;margin:-.35rem 0 1.1rem;display:flex;align-items:flex-start;gap:.45rem;line-height:1.5; }
.page-hint .i { color:var(--primary);flex-shrink:0; }
.field-hint { font-size:.72rem;color:var(--text-faint);margin-top:.25rem;font-weight:400;line-height:1.4; }

/* ─── Empty state ────────────────────────────────────────────────────────── */
.empty-state { text-align:center;padding:2.5rem 1rem;color:var(--text-faint); }
.empty-state .es-ico { font-size:2.1rem;display:block;margin-bottom:.55rem;opacity:.55; }
.empty-state .es-title { color:var(--text-dim);font-weight:600;margin-bottom:.3rem;font-size:.92rem; }
.empty-state .es-sub { font-size:.8rem; }

/* ─── Alias chip ─────────────────────────────────────────────────────────── */
.alias-chip { display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem; }
.alias-chip .alias-name { color:var(--primary);font-weight:600; }
.alias-chip .alias-ip { font-family:var(--mono);color:var(--text-dim);font-size:.76rem; }

/* ─── Access editors (aliases / allowed-ips / allowed-ports) ─────────────── */
.kv-row { display:flex;align-items:center;gap:.5rem;padding:.35rem 0;border-bottom:1px solid var(--border); }
.kv-row:last-child { border-bottom:none; }
.kv-row input, .kv-row select { background:var(--bg);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:.4rem .6rem;font-size:.85rem;outline:none;transition:border-color .15s; }
.kv-row input:focus, .kv-row select:focus { border-color:var(--primary); }
.kv-row .grow { flex:1;min-width:120px; }
.kv-row .kv-name { width:160px; }
.kv-row .mono { font-family:var(--mono); }
.access-add { display:flex;gap:.5rem;margin-top:.85rem;flex-wrap:wrap;align-items:center; }
.access-add input, .access-add select { background:var(--bg);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:.45rem .65rem;font-size:.85rem;outline:none; }
.access-add input:focus, .access-add select:focus { border-color:var(--primary); }
.access-empty { color:var(--text-faint);font-size:.82rem;padding:.4rem 0; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:768px) {
  .sidebar { display:none; }
  .form-grid { grid-template-columns:1fr; }
  .wide { grid-column:1; }
  .form-actions { flex-direction:column;align-items:stretch; }
  .service-nav { display:none; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
}

/* ─── vps-auth: подзаголовок и хаб ────────────────────────────────────────── */
.login-sub { text-align:center;color:var(--text-dim);font-size:.85rem;margin:-1rem 0 1.25rem; }
.login-sub b { color:var(--text); }
.hub-links { display:flex;flex-direction:column;gap:.5rem; }
.hub-link { width:100%;justify-content:center;text-decoration:none; }

/* ─── Password reveal ────────────────────────────────────────────────────── */
.pwd-wrap { position:relative;display:flex;align-items:center; }
.pwd-wrap input { flex:1; }
.pwd-toggle { position:absolute;right:.35rem;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.95rem;padding:.15rem .35rem;border-radius:4px;line-height:1; }
.pwd-toggle:hover { color:var(--text);background:var(--surface2); }