/* =====================================================================
   Flip VPN panel — the Flip Link look.
   Loaded after style.css: re-tunes the old palette (so the infrastructure
   pages match) and adds the components of the new sections.
   ===================================================================== */

:root {
  --bg: #05060f;
  --bg-soft: #080a18;
  --panel: rgba(255, 255, 255, .045);
  --panel-2: rgba(255, 255, 255, .07);
  --border: rgba(255, 255, 255, .085);
  --border-strong: rgba(139, 92, 246, .38);
  --text: #f5f6fb;
  --muted: #a3a6c2;
  --faint: #6b6e8a;

  --g1: #4fa6ff;
  --g2: #8b5cf6;
  --g3: #d946ef;
  --grad: linear-gradient(120deg, #4fa6ff 0%, #8b5cf6 52%, #d946ef 100%);
  --grad-soft: linear-gradient(120deg, rgba(79,166,255,.16), rgba(139,92,246,.16) 55%, rgba(217,70,239,.14));

  --cyan: #4fa6ff;
  --cyan-bright: #8cc6ff;
  --violet: #8b5cf6;
  --green: #34d399;
  --yellow: #f59e0b;
  --red: #f43f5e;

  /* chart series (validated for the dark surface, see dataviz check) */
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #9085e9;

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(.22, .8, .25, 1);
  --shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

html, body.hq { background: var(--bg); }

body.hq::before {
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(79,166,255,.13), transparent 60%),
    radial-gradient(800px 560px at 92% 0%, rgba(139,92,246,.15), transparent 62%),
    radial-gradient(700px 520px at 60% 110%, rgba(217,70,239,.08), transparent 60%),
    linear-gradient(180deg, #05060f, #070818 50%, #05060f);
}

.hq-glow { position: fixed; z-index: -1; width: 520px; height: 520px; border-radius: 50%;
  filter: blur(90px); opacity: .35; pointer-events: none; animation: hq-float 22s ease-in-out infinite; }
.hq-glow-a { top: -180px; left: 30%; background: rgba(79,166,255,.35); }
.hq-glow-b { bottom: -220px; right: -120px; background: rgba(217,70,239,.25); animation-delay: -11s; }
@keyframes hq-float { 0%,100% { transform: translate(0,0) } 50% { transform: translate(60px,40px) } }

/* ---------------- sidebar ---------------- */
.hq .sidebar {
  background: linear-gradient(180deg, rgba(10,11,26,.88), rgba(6,7,16,.92));
  border-right: 1px solid var(--border);
}
.hq-nav { flex: 1; overflow-y: auto; margin: 6px -6px 0; padding: 0 6px; scrollbar-width: thin; }
.hq-nav::-webkit-scrollbar { width: 4px; }
.hq-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }
.hq .nav-caption { margin: 16px 10px 6px; font-size: 10.5px; letter-spacing: .14em; color: var(--faint); }
.hq .nav-item { padding: 8px 10px; font-size: 13.5px; transition: background .2s var(--ease), color .2s, transform .2s var(--ease); }
.hq .nav-item:hover { transform: translateX(2px); color: var(--text); background: rgba(255,255,255,.04); }
.hq .nav-item.active { background: var(--grad-soft); border: 1px solid rgba(139,92,246,.28); color: #fff; }
.hq .nav-icon { width: 20px; text-align: center; opacity: .9; }
.hq .brand-wordmark span { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------------- page frame ---------------- */
.hq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 4px 0 22px; }
.hq-head h1 { margin: 0; font: 600 28px/1.15 "Space Grotesk", Inter, sans-serif; letter-spacing: -.01em; }
.hq-head h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hq-head p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.hq-head .right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted);
  padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52,211,153,.6);
  animation: hq-pulse 2s infinite; }
@keyframes hq-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55) } 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0) } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0) } }

/* period chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; color: var(--muted);
  border: 1px solid var(--border); background: var(--panel); transition: all .2s var(--ease); white-space: nowrap; }
.chip:hover { color: var(--text); border-color: rgba(255,255,255,.18); }
.chip.on { color: #fff; background: var(--grad-soft); border-color: rgba(139,92,246,.45); }

/* ---------------- cards & KPIs ---------------- */
.grid { display: grid; gap: 14px; }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-21 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1180px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-21 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .g-3, .g-2 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .g-4 { grid-template-columns: 1fr 1fr; gap: 10px; } }

.card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 18px 16px; backdrop-filter: blur(14px); transition: border-color .25s, transform .25s var(--ease), background .25s; }
.card:hover { border-color: rgba(255,255,255,.14); }
.card h3 { margin: 0 0 12px; font: 600 14px Inter, sans-serif; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card h3 small { color: var(--faint); font-weight: 500; font-size: 12px; }
.card + .card, .grid + .card, .card + .grid, .grid + .grid { margin-top: 14px; }

.kpi { overflow: hidden; }
.kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad); opacity: .0; transition: opacity .3s; }
.kpi:hover::after { opacity: .9; }
.kpi:hover { transform: translateY(-2px); }
.kpi .lbl { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi .val { font: 600 30px/1.1 "Space Grotesk", Inter, sans-serif; margin-top: 8px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12px; color: var(--faint); margin-top: 6px; }
.kpi .sub b { color: var(--muted); font-weight: 600; }
.kpi.accent .val { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi .ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; float: right;
  background: var(--grad-soft); border: 1px solid rgba(139,92,246,.25); font-size: 14px; }

.pos { color: var(--green) !important; }
.neg { color: var(--red) !important; }
.dim { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: "JetBrains Mono", monospace; font-size: 12.5px; }
.nowrap { white-space: nowrap; }

/* split bars (apps, statuses) */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 54px; gap: 10px; align-items: center; font-size: 13px; }
.bar-row .t { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .n { text-align: right; font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; border-radius: 8px; background: rgba(255,255,255,.05); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 8px; background: var(--grad); width: 0; transition: width 1.1s var(--ease); }

.stack { display: flex; height: 12px; border-radius: 8px; overflow: hidden; gap: 2px; background: rgba(255,255,255,.04); }
.stack span { display: block; height: 100%; transition: flex-grow 1s var(--ease); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* charts (drawn by hq.js) */
.chart { position: relative; height: 210px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .grid-line { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.chart .axis { fill: var(--faint); font-size: 10.5px; font-family: Inter, sans-serif; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { opacity: .18; }
.chart .bar { transition: opacity .15s; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .cross { stroke: rgba(255,255,255,.25); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot { stroke: var(--bg); stroke-width: 2; }
.chart-tip { position: absolute; pointer-events: none; padding: 8px 10px; border-radius: 10px; font-size: 12px;
  background: rgba(14,16,34,.96); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow);
  white-space: nowrap; transform: translate(-50%, -110%); opacity: 0; transition: opacity .12s; z-index: 5; }
.chart-tip b { font-variant-numeric: tabular-nums; }
.chart-tip .k { color: var(--muted); margin-bottom: 3px; }
.chart-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* ---------------- tables ---------------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); }
table.hq-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.hq-table th { text-align: left; font-weight: 500; color: var(--faint); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .06em; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0;
  background: rgba(8,9,22,.92); backdrop-filter: blur(10px); z-index: 1; }
.hq-table td { padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.045); vertical-align: middle; }
.hq-table tr { transition: background .15s; }
.hq-table tbody tr:hover { background: rgba(255,255,255,.035); }
.hq-table tr.click { cursor: pointer; }
.hq-table td.r, .hq-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.hq-table tfoot td { font-weight: 600; border-top: 1px solid var(--border); border-bottom: 0; }
.who b { display: block; font-weight: 600; }
.who small { color: var(--faint); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-paid { color: #6ee7b7; background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.25); }
.b-trial { color: #93c5fd; background: rgba(79,166,255,.1); border-color: rgba(79,166,255,.25); }
.b-expired { color: #fbbf24; background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.22); }
.b-blocked { color: #fda4af; background: rgba(244,63,94,.1); border-color: rgba(244,63,94,.25); }
.b-none { color: var(--muted); background: rgba(255,255,255,.04); border-color: var(--border); }
.b-on { color: #6ee7b7; } .b-off { color: #fda4af; } .b-warn { color: #fbbf24; }
.tag { display: inline-block; padding: 2px 7px; border-radius: 7px; font-size: 11px; color: var(--muted);
  background: rgba(255,255,255,.05); border: 1px solid var(--border); margin: 1px 2px 1px 0; white-space: nowrap; }
.tag.app { color: #c4b5fd; border-color: rgba(139,92,246,.3); background: rgba(139,92,246,.08); }
.dot-on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px;
  box-shadow: 0 0 10px rgba(52,211,153,.7); }

/* ---------------- filters & forms ---------------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.hq input[type=text], .hq input[type=search], .hq input[type=number], .hq input[type=date],
.hq select, .hq textarea, .field input, .field select, .field textarea {
  background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text); border-radius: 11px;
  padding: 8px 11px; font-size: 13px; outline: none; transition: border-color .2s, box-shadow .2s; min-width: 0; }
.hq input:focus, .hq select:focus, .hq textarea:focus { border-color: rgba(139,92,246,.55); box-shadow: 0 0 0 3px rgba(139,92,246,.15); }
.hq select option { background: #0e1022; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; align-items: end; }

.btn-hq { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 12px;
  border: 0; cursor: pointer; font: 600 13px Inter, sans-serif; color: #fff; background: var(--grad);
  box-shadow: 0 8px 24px rgba(139,92,246,.3); transition: transform .15s var(--ease), box-shadow .2s, filter .2s; white-space: nowrap; }
.btn-hq:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(139,92,246,.42); }
.btn-hq:active { transform: translateY(0) scale(.98); }
.btn-hq.ghost { background: rgba(255,255,255,.05); border: 1px solid var(--border); box-shadow: none; color: var(--text); font-weight: 500; }
.btn-hq.ghost:hover { border-color: rgba(255,255,255,.2); }
.btn-hq.danger { background: rgba(244,63,94,.14); border: 1px solid rgba(244,63,94,.35); color: #fda4af; box-shadow: none; }
.btn-hq.sm { padding: 6px 11px; font-size: 12px; border-radius: 10px; }

/* ---------------- tabs ---------------- */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--border);
  width: max-content; max-width: 100%; overflow-x: auto; margin-bottom: 14px; }
.tab { padding: 7px 14px; border-radius: 10px; font-size: 13px; color: var(--muted); cursor: pointer; border: 0; background: none; white-space: nowrap; }
.tab.on { background: var(--grad-soft); color: #fff; box-shadow: inset 0 0 0 1px rgba(139,92,246,.35); }
.tab .n { margin-left: 6px; color: var(--faint); font-size: 11.5px; }

/* ---------------- funnel ---------------- */
.funnel { display: flex; flex-direction: column; gap: 8px; }
.f-step { display: grid; grid-template-columns: 230px 1fr 140px; gap: 14px; align-items: center; font-size: 13px; }
.f-bar { height: 34px; border-radius: 10px; background: rgba(255,255,255,.04); overflow: hidden; position: relative; }
.f-bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--grad); border-radius: 10px; opacity: .85;
  transition: width 1.2s var(--ease); }
.f-bar em { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.f-step .pct { color: var(--muted); font-size: 12px; text-align: right; }
@media (max-width: 760px) { .f-step { grid-template-columns: 1fr; gap: 4px; } .f-step .pct { text-align: left; } }

.heat { border-radius: 8px; padding: 5px 8px; display: inline-block; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------------- user card ---------------- */
.u-hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.u-ava { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font: 600 22px "Space Grotesk", Inter, system-ui, sans-serif;
  background: var(--grad); box-shadow: 0 10px 30px rgba(139,92,246,.35); }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; font-size: 13px; }
.kv dt { color: var(--faint); }
.kv dd { margin: 0; }
.actions { display: flex; flex-direction: column; gap: 12px; }
.act-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.act-row > span { color: var(--muted); font-size: 12.5px; min-width: 120px; }

/* ---------------- misc ---------------- */
.empty { padding: 36px 16px; text-align: center; color: var(--faint); font-size: 13px; }
.note { font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.note b { color: var(--muted); }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.copy { cursor: pointer; border-bottom: 1px dashed rgba(255,255,255,.25); }
.copy:hover { color: #fff; }
.err-box { padding: 14px 16px; border-radius: var(--r-md); border: 1px solid rgba(244,63,94,.3); background: rgba(244,63,94,.07); color: #fecdd3; font-size: 13px; }
details.box { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; background: var(--panel); }
details.box summary { cursor: pointer; color: var(--muted); font-size: 13px; }
dialog.hq-dlg { background: #0d0f22; color: var(--text); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 22px;
  width: min(560px, 92vw); box-shadow: var(--shadow); }
dialog.hq-dlg::backdrop { background: rgba(3,4,10,.7); backdrop-filter: blur(4px); }
dialog.hq-dlg[open] { animation: hq-pop .25s var(--ease); }
@keyframes hq-pop { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }

/* entrance animation of blocks */
.rise { opacity: 0; transform: translateY(12px); animation: hq-rise .6s var(--ease) forwards; }
@keyframes hq-rise { to { opacity: 1; transform: none } }
.rise:nth-child(2) { animation-delay: .05s } .rise:nth-child(3) { animation-delay: .1s } .rise:nth-child(4) { animation-delay: .15s }
.rise:nth-child(5) { animation-delay: .2s } .rise:nth-child(6) { animation-delay: .25s } .rise:nth-child(n+7) { animation-delay: .3s }
.flash-num { animation: hq-flash .9s var(--ease); }
@keyframes hq-flash { 0% { text-shadow: 0 0 0 transparent } 30% { text-shadow: 0 0 18px rgba(139,92,246,.9) } 100% { text-shadow: 0 0 0 transparent } }

@media (prefers-reduced-motion: reduce) {
  .rise, dialog.hq-dlg[open], .hq-glow, .live i { animation: none !important; opacity: 1; transform: none; }
  .bar-fill, .f-bar span { transition: none; }
}

@media (max-width: 850px) {
  .hq-head h1 { font-size: 23px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dt { margin-top: 8px; }
  .bar-row { grid-template-columns: 90px 1fr 44px; }
}

/* layout fixes over the old stylesheet */
.grid > .card, .grid > .card + .card { margin-top: 0; }
.grid { align-items: start; }
.hq .nav-item { padding: 7px 10px !important; min-height: 0 !important; font-weight: 500 !important; gap: 10px; line-height: 1.3; }
.hq .nav-item span:not(.nav-icon):not(.ticket-badge) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq .sidebar-bottom { padding-top: 10px; border-top: 1px solid var(--border); margin-top: 8px; }
.hq .user-chip { padding: 8px 10px; }
.hq .content > *:not(.rise) { animation: none; opacity: 1; transform: none; }
.hq form.act-row { display: flex !important; flex-direction: row !important; gap: 8px; margin: 0; }
.hq .act-row input, .hq .act-row select { width: auto !important; flex: 0 1 auto; margin: 0 !important; }
.hq .act-row input[type=date] { min-width: 150px; }
.hq .act-row .btn-hq, .hq .filters .btn-hq { width: auto !important; margin: 0 !important; }
.hq .filters input, .hq .filters select { width: auto; margin: 0; }
.hq .form-grid .btn-hq { align-self: end; }
.hq .field input, .hq .field select, .hq .field textarea { width: 100%; }
.hq-table td.who { min-width: 190px; }
.hq-table td.r { white-space: nowrap; }
.wide-table { min-width: 1350px; }

/* login page in the same colors */
body.auth-body { background: var(--bg); }
.auth-body button[type=submit], .auth-body .btn-primary { background: var(--grad) !important; color: #fff !important; }
.hq .appbar-search input { padding-left: 38px; }
.hq .nav-item { padding: 7px 10px; }
.hq .nav-caption { margin: 12px 10px 4px; }

/* ================= compact lists (users, servers) ================= */
.ulist-card { padding: 6px 6px 2px; }
.hq-table.ulist td { padding: 12px; }
.u-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.u-av { position: relative; flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  font: 600 14px "Space Grotesk", Inter, sans-serif; color: #fff; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(120,130,160,.35), rgba(80,86,110,.35)); }
.u-av.s-paid { background: linear-gradient(135deg, #4FA6FF, #8B5CF6); }
.u-av.s-trial { background: linear-gradient(135deg, rgba(79,166,255,.55), rgba(79,166,255,.25)); }
.u-av.s-expired { background: linear-gradient(135deg, rgba(245,158,11,.45), rgba(245,158,11,.18)); }
.u-av.s-blocked { background: linear-gradient(135deg, rgba(244,63,94,.45), rgba(244,63,94,.18)); }
.u-av i.on { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--green); border: 2px solid #0a0b1a; box-shadow: 0 0 8px rgba(52,211,153,.8); }
.u-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.u-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.u-txt small { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.u-txt small .mono { font-size: 11.5px; }
.sub-line { display: block; color: var(--faint); font-size: 11.5px; margin-top: 4px; white-space: nowrap; font-weight: 400; }
.m-only { display: none !important; }
.grow { flex: 1 1 220px; min-width: 160px; }
@media (max-width: 1280px) { .hq-table .hide-lg { display: none; } }
@media (max-width: 1060px) { .hq-table .hide-md { display: none; } }

/* ================= advertising sources as cards ================= */
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.src { position: relative; border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px 16px;
  background: rgba(255,255,255,.02); overflow: hidden;
  transition: border-color .25s, transform .25s var(--ease), background .25s; }
.src::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: #3987e5; opacity: .8; }
.src.k-organic::before { background: #199e70; }
.src.k-ref::before { background: #9085e9; }
.src.k-legacy::before { background: rgba(255,255,255,.2); }
.src:hover { border-color: rgba(139,92,246,.35); transform: translateY(-2px); background: rgba(255,255,255,.03); }
.src-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.src-name { min-width: 0; }
.src-name b { display: block; font-size: 15px; }
.src-name small { color: var(--faint); font-size: 12px; }
.src-act { display: flex; gap: 6px; flex: none; }
.src-act form { margin: 0; }
.src-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin: 14px 0 12px; }
.src-big { min-width: 0; }
.src-big span { display: block; font: 600 20px/1.2 "Space Grotesk", Inter, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.src-big small { color: var(--faint); font-size: 11.5px; }
a.src-big { color: inherit; text-decoration: none; }
a.src-big:hover span { color: #c4b5fd; }
.src-funnel { position: relative; height: 8px; border-radius: 8px; background: rgba(255,255,255,.04); overflow: hidden; }
.src-funnel span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; transition: width 1s var(--ease); }
.src-funnel .f1 { background: rgba(79,166,255,.16); }
.src-funnel .f2 { background: rgba(139,92,246,.45); }
.src-funnel .f3 { background: var(--grad); }
.src-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; margin: 12px 0 0; }
.src-kv dt { color: var(--faint); font-size: 11px; }
.src-kv dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ================= phone ================= */
.hq-scrim { display: none; }
button.mobile-nav-item { background: none; border: 0; font: inherit; cursor: pointer; }
@keyframes hq-drawer { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes hq-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 860px) {
  body.menu-open { overflow: hidden; }
  body.menu-open .hq-sidebar { display: flex !important; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0;
    width: min(300px, 84vw); z-index: 60; padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
    background: #080919; box-shadow: 20px 0 60px rgba(0,0,0,.5); animation: hq-drawer .28s var(--ease); }
  body.menu-open .hq-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(3,4,10,.6);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: hq-fade .2s; }
  body.menu-open .mn-more { color: #fff; }
  .hq .appbar { display: none; }
  .hq-head { margin-bottom: 16px; }
  .hq-head h1 { font-size: 22px; }
  .hq-head p { font-size: 13px; }
  .card { padding: 14px; border-radius: 16px; }
  .kpi .val { font-size: 23px; }
  .filters .chips { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px;
    margin: 0 -14px; padding: 0 14px 2px; width: calc(100% + 28px); }
  .filters .chips::-webkit-scrollbar { display: none; }
  .filters .chip { flex: none; }
  .hq .filters input, .hq .filters select { flex: 1 1 140px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .hq form.act-row, .hq .act-row { flex-wrap: wrap; }
  .hq .act-row > span:first-of-type { flex: 1 1 100%; }
  .u-hero { flex-wrap: wrap; }
  .u-hero .right { width: 100%; justify-content: flex-start; text-align: left !important; }
  .chart { height: 190px; }
}

@media (max-width: 760px) {
  .hq-table:not(.no-cards) thead { display: none; }
  .hq-table:not(.no-cards), .hq-table:not(.no-cards) > tbody, .hq-table:not(.no-cards) > tfoot { display: block; width: 100%; }
  .hq-table:not(.no-cards) tr { display: block; border: 1px solid var(--border); border-radius: 14px; margin: 0 0 10px;
    padding: 8px 12px; background: rgba(255,255,255,.025); }
  .hq-table:not(.no-cards) td { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px;
    justify-items: end; align-items: baseline; border: 0 !important; padding: 5px 0 !important; text-align: right !important;
    white-space: normal; min-width: 0; }
  .hq-table:not(.no-cards) td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 6; justify-self: start;
    color: var(--faint); font-size: 12px; text-align: left; }
  .hq-table:not(.no-cards) td[data-label=""]::before { display: none; }
  .hq-table:not(.no-cards) td[data-label=""] { display: block !important; text-align: left !important; }
  .hq-table:not(.no-cards) td.who { display: block !important; text-align: left !important; padding-bottom: 9px !important;
    margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.06) !important; min-width: 0; }
  .hq-table:not(.no-cards) td.who::before { display: none; }
  .hq-table:not(.no-cards) td.hide-md, .hq-table:not(.no-cards) td.hide-lg { display: grid !important; }
  .hq-table:not(.no-cards) .sub-line { white-space: normal; text-align: right; }
  .hq-table:not(.no-cards) td[colspan] { display: block !important; }
  .m-only { display: inline-flex !important; }
  .d-only { display: none !important; }
  .u-row .m-only { margin-left: auto; }
  .u-txt b { max-width: 52vw; }
  .ulist-card, .card.ulist-card { padding: 0; background: none; border: 0; backdrop-filter: none; }
  .table-wrap { overflow: visible; }
  .no-cards-wrap { overflow-x: auto; }
  .src-grid { grid-template-columns: 1fr; }
  .src-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hq-table th { position: static; }
}
.src-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.src-big span em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.src-kv { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.src-kv dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 860px) {
  .hq .content { padding: calc(70px + env(safe-area-inset-top)) 14px calc(96px + env(safe-area-inset-bottom)) !important; }
  body.menu-open .hq-sidebar .brand > span:last-child,
  body.menu-open .hq-sidebar .nav-caption,
  body.menu-open .hq-sidebar .nav-item > span:not(.ticket-badge) { display: inline !important; }
  body.menu-open .hq-sidebar .nav-caption { display: block !important; }
  body.menu-open .hq-sidebar .ticket-badge:not([hidden]) { display: inline-flex !important; margin-left: auto; }
  body.menu-open .hq-sidebar .user-chip > div { display: flex !important; }
  body.menu-open .hq-sidebar .nav-item { justify-content: flex-start; font-size: 15px; padding: 10px 12px !important; }
  body.menu-open .hq-sidebar .user-chip { justify-content: flex-start; }
  button.mobile-nav-item { font-size: 10.5px; font-weight: 600; font-family: inherit; color: var(--faint); }
  .kpi .ico { display: none; }
}
@media (max-width: 760px) {
  .hq-table:not(.no-cards) td.who, .hq-table:not(.no-cards) td[data-label=""], .hq-table:not(.no-cards) td[colspan] { justify-items: normal; }
}
@media (max-width: 860px) {
  body.menu-open .hq-sidebar .user-chip > div { flex-direction: column; align-items: flex-start; gap: 1px; }
}
.tags { display: inline-flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.tag.never { color: #fbbf24; border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.08); }

/* ================= server management ================= */
.sw-row { display: inline-flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; align-items: center; }
.sw { appearance: none; font: 600 11.5px Inter, sans-serif; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  color: var(--faint); background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.14);
  text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25);
  transition: background .2s, color .2s, border-color .2s, transform .15s var(--ease); white-space: nowrap; }
.sw:hover:not(:disabled) { transform: translateY(-1px); color: var(--text); border-color: rgba(139,92,246,.5); }
.sw.on { text-decoration: none; color: #e9e5ff; background: linear-gradient(135deg, rgba(79,166,255,.22), rgba(139,92,246,.28));
  border: 1px solid rgba(139,92,246,.35); }
.sw.hand { box-shadow: 0 0 0 2px rgba(217,70,239,.45); }
.sw:disabled { opacity: .4; cursor: not-allowed; }
.sw.pwr, .sw.reset { text-decoration: none; padding: 5px 8px; border-style: solid; }
.sw.pwr.is-off { color: #fda4af; border-color: rgba(244,63,94,.4); background: rgba(244,63,94,.1); }
.sw.reset { color: #f0abfc; }
tr.row-off td { opacity: .55; }
tr.row-off td:last-child { opacity: 1; }
tr.busy { opacity: .5; pointer-events: none; }
.hist { display: inline-flex; gap: 2px; align-items: flex-end; height: 18px; }
.hist i { display: block; width: 4px; height: 100%; border-radius: 2px; background: rgba(52,211,153,.75); }
.hist i.bad { background: rgba(244,63,94,.7); height: 55%; }

dialog.hq-dlg.wide { width: min(940px, 95vw); }
.logbox { margin: 0; height: 300px; overflow: auto; padding: 12px; border-radius: 12px; background: rgba(0,0,0,.35);
  border: 1px solid var(--border); font: 12px/1.55 "JetBrains Mono", monospace; color: #c7cbe0; white-space: pre-wrap; }
.hq-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 200;
  padding: 11px 16px; border-radius: 12px; font-size: 13px; background: rgba(16,18,38,.97); border: 1px solid rgba(139,92,246,.35);
  box-shadow: var(--shadow); transition: opacity .25s, transform .25s var(--ease); max-width: 90vw; }
.hq-toast.in { opacity: 1; transform: translate(-50%, 0); }
.hq-toast.bad { border-color: rgba(244,63,94,.5); color: #fecdd3; }
@media (max-width: 860px) { .hq-toast { bottom: calc(86px + env(safe-area-inset-bottom)); } }

.src.feed.is-off { opacity: .6; }
.src-st { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.src-st.bad { color: #fda4af; }
.pick-wrap { max-height: min(52vh, 460px); overflow: auto; border: 1px solid var(--border); }
.pick td { padding: 8px 10px; }
.pick tr.is-dup td { opacity: .6; }
.pick select { padding: 5px 8px; font-size: 12px; }
@media (max-width: 760px) {
  .sw-row { justify-content: flex-end; }
  .logbox { height: 46vh; }
}

/* ================= subscription page editor ================= */
.sp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 14px; align-items: start; margin-top: 14px; }
.sp-edit > .card + .card { margin-top: 14px; }
.sp-prev { position: sticky; top: 14px; }
.sp-prev-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.sp-prev-bar .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-prev-bar select { margin-left: auto; }
.sp-frame-wrap { border-radius: 30px; padding: 8px; background: #15172b; box-shadow: 0 30px 80px -30px #000; }
.sp-frame-wrap iframe { display: block; width: 100%; height: min(78vh, 780px); border: 0; border-radius: 24px; background: #05060f; }
.sp-app { border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.025); margin-bottom: 10px; transition: border-color .2s; }
.sp-app[open] { border-color: rgba(139,92,246,.4); }
.sp-app.off { opacity: .6; }
.sp-app summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.sp-app summary::-webkit-details-marker { display: none; }
.sp-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; overflow: hidden;
  font: 700 17px "Space Grotesk", Inter, sans-serif; background: linear-gradient(145deg, #1b2350, #2a1b54); }
.sp-ic img { width: 100%; height: 100%; object-fit: cover; }
.sp-sum-act { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.sp-app-body { padding: 4px 14px 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.sp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.sp-lbl { font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.sp-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); margin: 0 12px 6px 0; cursor: pointer; }
.sp-plat { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--border); }
.sp-plat textarea, .sp-app-body textarea, .sp-texts textarea, .sp-faq textarea { font-size: 12.5px; width: 100%; resize: vertical; }
.sp-sw { position: relative; width: 38px; height: 22px; flex: none; cursor: pointer; }
.sp-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sp-sw i { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.12); transition: background .2s; }
.sp-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.sp-sw input:checked + i { background: var(--grad); }
.sp-sw input:checked + i::after { transform: translateX(16px); }
.sp-texts { display: grid; gap: 12px; }
.sp-tx { display: grid; gap: 6px; }
.sp-tx input { width: 100%; }
.sp-faq { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.sp-faq input { width: 100%; }
.sp-faq textarea { grid-column: 1; }
.sp-faq [data-x] { grid-row: 1 / span 2; grid-column: 2; align-self: start; }
@media (max-width: 1180px) {
  .sp-layout { grid-template-columns: 1fr; }
  .sp-prev { position: static; order: -1; }
  .sp-frame-wrap { max-width: 430px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .sp-row { grid-template-columns: 1fr; }
  .sp-app summary { flex-wrap: wrap; }
}
.sp-chk { white-space: nowrap; }
.hq .sp-chk input, .hq .sp-sw input { width: auto !important; margin: 0 !important; min-width: 0; }
.sp-row > div { min-width: 0; }
.sp-app-body .form-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sp-plat .form-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .sp-plat .form-grid { grid-template-columns: 1fr; } }

/* ================= admins / account ================= */
.totp-qr { width: 200px; height: 200px; padding: 10px; border-radius: 16px; background: #fff; }
.totp-qr svg { width: 100%; height: 100%; display: block; }
.temp-pw { border-color: rgba(52,211,153,.45); box-shadow: 0 0 40px rgba(52,211,153,.12); }
.link-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px;
  background: rgba(0,0,0,.3); border: 1px solid var(--border); }
.link-box .mono { font-size: 16px; color: #fff; cursor: pointer; }
@media (max-width: 860px) { .mobile-nav { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 1fr; } }

/* ================= monitoring ================= */
.live.bad { color: #fda4af; }
.live.bad i { background: var(--red); box-shadow: 0 0 10px var(--red); }
.alert-now { border-color: rgba(244,63,94,.45); box-shadow: 0 0 40px rgba(244,63,94,.12); }
.al-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.05); font-size: 14px; }
.al-row:first-of-type { border-top: 0; }
.al-row span:nth-child(2) { flex: 1; min-width: 200px; }
dl.kv.sm { margin: 0; }
dl.kv.sm dt, dl.kv.sm dd { font-size: 13px; }
.node-list { display: grid; gap: 2px; }
.node { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13.5px; min-width: 0; }
.node b { font-weight: 600; }
.node .faint { margin-left: auto; font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--faint); }
.dot.on { background: var(--green); box-shadow: 0 0 8px rgba(52,211,153,.8); }
.dot.off { background: var(--red); box-shadow: 0 0 8px rgba(244,63,94,.8); }
.dot.dis { background: rgba(255,255,255,.2); }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2px 14px; margin-top: 14px; }
.ev-grid .sp-chk { white-space: normal; align-items: flex-start; }
.al-kind { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; margin-right: 6px; }
.al-kind.k-down { color: #fda4af; background: rgba(244,63,94,.12); }
.al-kind.k-up { color: #6ee7b7; background: rgba(52,211,153,.12); }
.al-kind.k-remind { color: #fbbf24; background: rgba(245,158,11,.12); }
.al-kind.k-error { color: var(--muted); background: rgba(255,255,255,.06); }
.ticket-badge.mon { background: var(--red); }
.sw.tool { text-decoration: none; border-style: solid; padding: 5px 8px; }
.role-matrix th { font-size: 10.5px; letter-spacing: .03em; padding: 8px 6px; }
.role-matrix td { padding: 8px 6px; }
.role-matrix td:first-child { min-width: 190px; white-space: normal; }
.role-matrix td.r { color: var(--muted); }