/* ========================================================================
   VPN Admin — theme pulled from the reference (пример.py / "IP Checker"):
   terminal/cyberpunk console — JetBrains Mono, Syne for the logo/numbers,
   near-black bg, thin low-radius borders, cyan/green/yellow/red accents,
   scanline overlay.
   ======================================================================== */

:root {
  /* True AMOLED - background/panels/fields all pure or near-pure black,
     with only thin neutral-gray borders (not the navy-tinted grays this
     started with) to separate surfaces. Everything that used to read as
     "gray boxes" - the table header strip, inputs, panel bodies - is
     black now; only the accent colors carry any real hue. */
  --bg:      #000000;
  --panel:   #000000;
  --panel2:  #000000;
  --field:   #000000;
  --border:  #161616;
  --border2: #262626;
  --accent:  #00d4ff;
  --accent2: #0099cc;
  --green:   #39d353;
  --yellow:  #f0c040;
  --red:     #ff4d6a;
  --text:    #c9d5e0;
  --muted:   #4a6070;
  --mono:    'JetBrains Mono', SFMono-Regular, Consolas, monospace;
  --sans:    'Syne', -apple-system, sans-serif;

  /* legacy aliases kept so any un-migrated var() reference still resolves */
  --sub: var(--muted);
  --faint: var(--muted);
  --card: var(--panel);
  --card2: var(--panel2);
  --card3: var(--panel2);
  --danger: var(--red);
  --warn: var(--yellow);
  --blue: var(--accent);
  --white: #fff;
  --green-dim: rgba(57,211,83,0.08);
  --blue-dim: rgba(0,212,255,0.1);
  --danger-dim: rgba(255,77,106,0.08);
  --radius: 4px;
  --radius-sm: 3px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

/* scanline overlay, same trick as the reference — a faint repeating
   gradient tinted with the accent color, fixed over the whole viewport */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,212,255,0.012) 2px, rgba(0,212,255,0.012) 4px);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--green); text-decoration: none; }

::selection { background: rgba(0,212,255,0.25); color: #fff; }

*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ---------------------------------------------------------------------- */
/* Layout — top header + horizontal tab bar, like the reference           */
/* ---------------------------------------------------------------------- */

.layout { display: block; min-height: 100vh; background: var(--bg); }

header.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 100;
}
.logo {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.5px;
  text-shadow: 0 0 20px rgba(0,212,255,0.4);
  white-space: nowrap;
}
.logo span { color: var(--text); opacity: 0.5; }
.header-sub { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.btn-logout {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  transition: all .2s;
  display: inline-block;
}
.btn-logout:hover { border-color: var(--red); color: var(--red); text-decoration: none; }

.tabs.nav-tabs {
  display: flex;
  padding: 0 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  border-radius: 0;
  margin: 0;
}
.tabs.nav-tabs a.tab {
  padding: 12px 20px;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: all .2s;
  user-select: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tabs.nav-tabs a.tab:hover { color: var(--text); text-decoration: none; }
.tabs.nav-tabs a.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabs.nav-tabs a.tab.settings-tab { color: var(--yellow); opacity: .85; }
.tabs.nav-tabs a.tab.settings-tab:hover, .tabs.nav-tabs a.tab.settings-tab.active { color: var(--yellow); border-bottom-color: var(--yellow); opacity: 1; }

.main { padding: 24px 28px 60px; max-width: 1600px; background: var(--bg); }

h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 4px;
  color: var(--text);
  letter-spacing: -.2px;
}
h3 { color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin: 0; }
.page-sub { color: var(--muted); font-size: 12px; margin: 0 0 20px; max-width: 800px; line-height: 1.6; }

/* ---------------------------------------------------------------------- */
/* Panels ("card") — dark box, thin border, uppercase dot-bullet header   */
/* ---------------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
  overflow: hidden;
}
/* h3 as the first thing in a card becomes a full-bleed header strip
   (negative margins pull it out to the card's own padding edges) with
   an uppercase label and a glowing dot, matching the reference's
   .panel-header. Works regardless of whether later :has() support is
   assumed - no dependency on it. */
.card > h3:first-child {
  margin: -16px -16px 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card > h3:first-child::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  flex-shrink: 0;
}

.stat-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.stat-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  min-width: 160px;
  flex: 1;
}
.stat-tile .num { font-family: var(--sans); font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; text-shadow: 0 0 15px rgba(0,212,255,0.3); }
.stat-tile .label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-top: 7px; }
.stat-tile.blue .num { color: var(--accent2); text-shadow: none; }

/* ---------------------------------------------------------------------- */
/* Tables                                                                  */
/* ---------------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th {
  background: var(--panel2);
  color: var(--muted);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
th a { color: inherit; }
th a:hover { color: var(--text); text-decoration: none; }
tr:hover > td { background: rgba(0,212,255,0.03); }
tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */

input[type=text], input[type=password], input[type=number], textarea, select {
  background: var(--field);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 12.5px;
  width: 100%;
  font-family: var(--mono);
  transition: border-color .2s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent2); }
textarea { min-height: 70px; line-height: 1.7; }
label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; display: block; margin: 10px 0 6px; }
select { cursor: pointer; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,212,255,0.1);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  font-family: var(--mono);
}
.btn:hover { background: rgba(0,212,255,0.2); }

.btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border2);
}
.btn.secondary:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

.btn.danger { background: rgba(255,77,106,0.08); color: var(--red); border: 1px solid var(--red); }
.btn.danger:hover { background: rgba(255,77,106,0.16); }

.btn.small { padding: 5px 12px; font-size: 11px; }

/* ---------------------------------------------------------------------- */
/* Badges                                                                  */
/* ---------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid transparent;
}
.badge.on { background: rgba(57,211,83,0.1); border-color: rgba(57,211,83,0.3); color: var(--green); }
.badge.off { background: rgba(74,96,112,0.12); border-color: var(--border2); color: var(--muted); }
.badge.danger { background: rgba(255,77,106,0.1); border-color: rgba(255,77,106,0.3); color: var(--red); }
.badge.warn { background: rgba(240,192,64,0.12); border-color: rgba(240,192,64,0.3); color: var(--yellow); }

/* ---------------------------------------------------------------------- */
/* Utility                                                                 */
/* ---------------------------------------------------------------------- */

.flex { display: flex; gap: 10px; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
form.inline { display: inline; }
.hint { color: var(--muted); font-size: 11px; }

/* ---------------------------------------------------------------------- */
/* Sub-page tabs (segmented, reuses the same visual language as the       */
/* top nav tabs — e.g. "Подписки": Список / Добавить)                      */
/* ---------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--mono);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn.accent-blue.active { color: var(--accent2); border-bottom-color: var(--accent2); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------------------------------------------------------------------- */
/* Login page                                                              */
/* ---------------------------------------------------------------------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-box {
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 8px;
  width: min(380px, calc(100vw - 32px));
  padding: 36px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  color: var(--text);
  box-sizing: border-box;
}
.login-box h2 {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(0,212,255,0.4);
  margin-bottom: 8px;
}
.login-box p.sub { font-size: 11px; color: var(--muted); margin: 0 0 32px; }
.login-box input {
  background: var(--field);
  border: 1px solid var(--border);
  color: var(--text);
  margin-bottom: 4px;
}
.login-box .btn { width: 100%; padding: 11px; margin-top: 18px; justify-content: center; }
.login-box .error {
  color: var(--red);
  font-size: 12px;
  margin-top: 12px;
  text-align: center;
}
.login-box .footer { text-align: center; margin-top: 20px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---------------------------------------------------------------------- */
/* Misc components reused across pages                                     */
/* ---------------------------------------------------------------------- */

code.url {
  background: var(--field);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  word-break: break-all;
  color: var(--accent);
  font-family: var(--mono);
}

.fold-toggle {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: transform 0.15s ease, background .15s ease, color .15s ease;
}
.fold-toggle:hover { background: rgba(0,212,255,0.08); color: var(--accent); }
.fold-toggle.open { transform: rotate(90deg); color: var(--accent); }

.checkbox-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--field);
}
.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 12px;
  margin: 3px 0;
  font-weight: 400;
  padding: 3px 4px;
  border-radius: 2px;
  cursor: grab;
}
.checkbox-list label::before {
  content: "⠿";
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}
.checkbox-list label:hover { background: rgba(0,212,255,0.05); }
.checkbox-list label.dragging { opacity: .35; background: rgba(0,212,255,0.1); cursor: grabbing; }
.checkbox-list input { width: auto; cursor: pointer; }

.terminal {
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  height: 520px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-all;
}

@media (max-width: 900px) {
  header.topbar { padding: 12px 16px; gap: 12px; }
  .header-sub { display: none; }
  .tabs.nav-tabs { padding: 0 16px; }
  .main { padding: 18px 16px 40px; }

  /* Every table here (subscriptions list, per-subscription device list,
     server list, IP-history detail) has more columns than a phone screen
     can show at readable size - rather than letting text/badges squeeze
     down to unreadable, let the table keep its natural width and put the
     scrollbar on its containing .card instead. This is the standard
     "let it be wide, scroll horizontally" pattern - much more usable on
     a phone than either wrapped-mush columns or a rewritten card-list
     layout (which this page doesn't have markup for). */
  .card { overflow-x: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
  .card > table, .card table table { min-width: 640px; }
  .card > h3:first-child { margin: -12px -12px 12px; padding: 10px 12px; }

  /* Button rows (edit/toggle/ban/delete per subscription, ban/note/probe
     per device) are written as a flat row of several buttons with no
     per-instance wrap style - on a phone that row is wider than the
     screen. Wrapping them here, globally, means every one of those rows
     (there are many, across devices.html) gets fixed without having to
     touch each one individually. */
  .flex { flex-wrap: wrap; }
  .tabs { flex-wrap: wrap; }

  h2 { font-size: 17px; }
  .page-sub { font-size: 11.5px; }
  table { font-size: 11.5px; }
  th, td { padding: 7px 8px; }

  /* Slightly larger tap targets than the desktop-sized .btn.small - easy
     to miss-tap a 5px-padding button with a finger instead of a cursor. */
  .btn.small { padding: 7px 12px; font-size: 11.5px; }
  .btn { padding: 10px 16px; }

  dialog.modal { padding: 18px 16px; }
  dialog.modal h3 { margin: -18px -16px 14px; padding: 12px 16px; }
}

@media (max-width: 480px) {
  .main { padding: 14px 10px 32px; }
  .card { padding: 10px; }
  .login-box { padding: 24px; }
  .stat-tile { min-width: 130px; padding: 10px 12px; }
  .stat-tile .num { font-size: 21px; }
}

/* ---------------------------------------------------------------------- */
/* Modal dialog (native <dialog>) — centered popup, used for the device   */
/* note editor instead of an inline expanding table row.                  */
/* ---------------------------------------------------------------------- */

dialog.modal {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 22px 24px;
  width: min(460px, calc(100vw - 40px));
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  font-family: var(--mono);
}
dialog.modal::backdrop {
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(1px);
}
dialog.modal h3 {
  margin: -22px -24px 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
dialog.modal h3::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  flex-shrink: 0;
}
dialog.modal .modal-hwid {
  font-size: 11px;
  color: var(--muted);
  margin: -10px 0 14px;
  word-break: break-all;
}
dialog.modal textarea {
  width: 100%;
}
dialog.modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}