@font-face {
  font-family: 'Museo Sans Cyrl';
  src: url('/assets/museo_sans_cyrl_500.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
/* Colours, radius and sizes follow the loader (mutator/client/ui/loader/loader_ui.h, namespace theme). */
:root {
  --bg: #08090c;
  --header: #0a0b0f;
  --panel: #0e0f13;
  --field: #1a1a1c;
  --field-hover: #212124;
  --field-active: #0c0d11;
  --outline: #2a2b2f;
  --outline-hover: #424349;
  --glow: #3076e8;
  --primary: #e2e5eb;
  --primary-hover: #f0f2f6;
  --primary-held: #ccd0d7;
  --primary-text: #101216;
  --accent: #f0f2f6;
  --text: #d6dae2;
  --text-mut: #a0a6b2;
  --text-dark: #707682;
  --danger: #e17069;
  --success: #55c378;
  --success-dim: #41a55f;
  --radius: 8px;
  --fs-row: 15.5px;
  --fs-small: 14px;
  --fs-tiny: 12.5px;
  /* names kept for the admin pages */
  --card: var(--panel);
  --card-hover: #15161b;
  --border: var(--outline);
  --dim: var(--text-dark);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); }
body, input, select, textarea, button {
  font-family: 'Museo Sans Cyrl', 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-size: var(--fs-small);
}
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
::placeholder { color: var(--text-dark); opacity: 1; }
::selection { background: rgba(48, 118, 232, 0.45); }

/* ---- top bar (loader header) ---- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 80px; z-index: 20;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 32px;
  user-select: none;
}
.topbar nav { display: flex; align-items: center; gap: 8px; }
.topbar .who { color: var(--text-mut); font-size: 19px; margin-right: 10px; }
.topbar form { display: inline; }
.head-btn {
  height: 42px; padding: 0 16px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--text-mut); font-size: 20px;
  text-decoration: none; display: inline-flex; align-items: center; cursor: pointer;
  transition: background .15s, color .15s;
}
.head-btn:hover { background: rgba(240, 242, 246, 0.12); color: var(--accent); }
.head-btn.active { color: var(--accent); }

/* ---- sign-in layout: one centred container, form centred in the left half,
   portrait video card in the right half, both centred vertically ---- */
.auth {
  min-height: 100vh; padding: 80px 32px;
  display: flex; align-items: center; justify-content: center;
}
.auth-in {
  width: 100%; max-width: 1440px;
  display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center;
}
.auth-col { display: flex; flex-direction: column; align-items: center; }
.auth-col > * { width: 400px; }
/* the logo heads the form column, centred over the title */
.auth-col > .brand { width: auto; display: block; margin-bottom: 24px; }
.auth-col > .brand img { width: 96px; height: 96px; display: block; }
.auth-col .title, .auth-col .subtitle, .auth-col .status { text-align: center; }
.video-panel {
  justify-self: end; position: relative; overflow: hidden;
  height: min(900px, calc(100vh - 160px)); min-height: 480px; aspect-ratio: 4 / 5; max-width: 100%;
  border-radius: 20px; background: var(--panel);
}
/* customer pages are 1.5x the loader sizes */
.auth-col .title { font-size: 42px; margin-bottom: 36px; }
.auth-col .subtitle { font-size: 19px; margin: -24px 0 30px; }
.auth-col .field, .auth-col .primary, .auth-col .secondary { height: 44px; font-size: 17px; padding: 0 14px; border-radius: 8px; }
.auth-col .stack > .field + .field { margin-top: 12px; }
.auth-col .stack > .primary { margin-top: 18px; }
.auth-col .msg { font-size: 17px; margin-top: 20px; }
.auth-col .hint { font-size: 17px; margin-top: 28px; }
.auth-col .status { font-size: 20px; }
.auth-col .section-label { font-size: 16px; margin: 32px 0 12px; }
/* plans: a radio list (dot, name with badge, price with price per day) and one buy button */
.plan-list { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; }
.plan-row {
  position: relative; display: grid; grid-template-columns: 18px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px; background: var(--panel); border: 1px solid var(--outline); border-radius: 10px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.plan-row:hover { border-color: var(--outline-hover); }
.plan-row input { position: absolute; opacity: 0; pointer-events: none; }
.plan-row .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--outline-hover); box-sizing: border-box; }
.plan-row:has(input:checked) { border-color: var(--glow); background: #0f1420; }
.plan-row:has(input:checked) .dot { border: 5px solid var(--glow); }
.plan-row:has(input:focus-visible) { outline: 2px solid var(--glow); outline-offset: 2px; }
.plan-row .name { font-size: 17px; color: var(--text); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plan-row .price { text-align: right; font-size: 19px; color: var(--accent); font-variant-numeric: tabular-nums; }
.plan-row .price small { display: block; font-size: 12.5px; color: var(--text-dark); }
.plan-row .badge, .plan-row .save { font-size: 12px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.plan-row .badge { background: rgba(48,118,232,.16); color: #8fb4f2; }
.plan-row .save { background: rgba(85,195,120,.13); color: var(--success); }
.auth-col .plan-list .primary { margin-top: 10px; height: 46px; }
.auth-col .inline { gap: 10px; }
.auth-col .inline .secondary { padding: 0 20px; }
.auth-col .receipt { gap: 12px; margin-bottom: 24px; }
.auth-col .receipt div { font-size: 19px; }
/* Cabinet: a tighter rhythm than sign-in, so the column with every row shown
   (status, message, plans, key, loader) fits the height of the video. */
/* the column stays centred on the video; the page script grows the video when
   the column would be taller than it, so no row ever sits outside the video */
.auth-col:has(.cabinet) > .brand { margin-bottom: 14px; }
.auth-col:has(.cabinet) > .brand img { width: 76px; height: 76px; }
.auth-col .cabinet .title { font-size: 36px; margin-bottom: 4px; }
.auth-col .cabinet .status { font-size: 17px; }
.auth-col .cabinet .msg { margin-top: 12px; }
.auth-col .cabinet .plan-list { margin-top: 20px; }
.auth-col .cabinet .plan-row { padding: 11px 16px; }
.auth-col .cabinet .section-label { margin: 24px 0 10px; }
.auth-col .cabinet .loader-download { margin-top: 12px; display: flex; align-items: center; justify-content: center; }
.auth-col .cabinet #loader-wait:empty { display: none; }
/* a subscription end date never breaks across lines */
.status .local-time { white-space: nowrap; }
/* sign-up trap field: off screen for people, visible to simple bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.video-panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-panel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(8, 9, 12, 0.15); box-shadow: inset 0 0 0 1px var(--outline);
}
@media (max-width: 860px) {
  .video-panel { display: none; }
  .topbar { height: 64px; padding: 0 16px; }
  .auth-col > .brand img { width: 72px; height: 72px; }
  .head-btn { font-size: 17px; padding: 0 10px; }
  .auth { padding: 72px 16px 32px; }
  .auth-in { grid-template-columns: 1fr; }
  .auth-col > * { width: 100%; max-width: 400px; }
}
.stack { display: flex; flex-direction: column; }
.title { font-size: 28px; line-height: 1.1; color: var(--accent); margin-bottom: 28px; font-weight: 500; }
.subtitle { font-size: var(--fs-small); color: var(--text-mut); margin: -18px 0 24px; }
.stack > .field + .field { margin-top: 12px; }
.stack > .primary { margin-top: 18px; }
.msg { margin-top: 15px; text-align: center; font-size: var(--fs-tiny); color: var(--text-mut); min-height: 16px; }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--success); }
.hint { margin-top: 22px; text-align: center; font-size: var(--fs-tiny); color: var(--text-dark); }
.hint a { color: var(--text-mut); text-decoration: none; }
.hint a:hover { color: var(--accent); }

/* ---- input field ---- */
.field {
  display: block; width: 100%; height: 38px; padding: 0 10px;
  background: var(--field); color: var(--text); font-size: var(--fs-row);
  border: 1px solid var(--outline); border-radius: var(--radius); outline: none;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.field:hover { background: var(--field-hover); border-color: var(--outline-hover); }
.field:hover::placeholder { color: var(--text-mut); }
.field:focus {
  border-color: rgba(48, 118, 232, 0.85);
  box-shadow: 0 0 0 1px rgba(48, 118, 232, 0.16), 0 0 0 3px rgba(48, 118, 232, 0.10), 0 0 6px 3px rgba(48, 118, 232, 0.08);
}

/* ---- primary button: dark while it cannot be pressed, white once it can ---- */
.primary {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 38px;
  border-radius: var(--radius); border: 1px solid transparent;
  background: var(--primary); color: var(--primary-text); font-size: var(--fs-row);
  cursor: pointer; text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.primary:hover { background: var(--primary-hover); }
.primary:active { background: var(--primary-held); }
.primary:disabled, .primary[aria-disabled="true"] {
  background: var(--field-active); border-color: var(--outline);
  color: rgba(214, 218, 226, 0.4); cursor: default;
}
.secondary {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 38px;
  border-radius: var(--radius); border: 1px solid var(--outline);
  background: var(--field-active); color: var(--text-mut); font-size: var(--fs-row);
  cursor: pointer; text-decoration: none; transition: background .12s, color .12s, border-color .12s;
}
.secondary:hover { background: var(--field-hover); border-color: var(--outline-hover); color: var(--text); }

/* ---- cabinet ---- */
.section-label { font-size: var(--fs-tiny); color: var(--text-dark); margin: 26px 0 10px; }
.status { font-size: var(--fs-row); color: var(--text-mut); }
.status.on { color: var(--success); }
.status.off { color: var(--danger); }
.plans { display: flex; flex-direction: column; gap: 8px; }
.plans form { display: block; }
/* rows like the loader product list, with its green play triangle */
.plan {
  width: 100%; height: 44px; padding: 0 16px 0 12px; display: flex; align-items: center; gap: 10px;
  background: var(--field); border: 1px solid var(--outline); border-radius: 2px;
  color: var(--text); font-size: var(--fs-row); cursor: pointer; text-align: left;
  transition: background .12s, border-color .12s;
}
.plan:hover:not(:disabled) { background: var(--field-hover); border-color: var(--outline-hover); }
.plan .name { flex: 1; }
.plan .days { color: var(--text-dark); font-size: var(--fs-tiny); }
.plan .price { color: var(--accent); min-width: 44px; text-align: right; }
.plan .play {
  width: 0; height: 0; margin-left: 4px;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 8px solid var(--success-dim); opacity: .85; transition: opacity .12s, border-color .12s;
}
.plan:hover:not(:disabled) .play { border-left-color: var(--success); opacity: 1; }
.plan:disabled { cursor: default; color: var(--text-dark); }
.plan:disabled .price { color: var(--text-dark); }
.plan:disabled .play { border-left-color: var(--outline-hover); }
.inline { display: flex; gap: 8px; }
.inline .field { flex: 1; }
.inline .secondary { width: auto; padding: 0 14px; flex-shrink: 0; }
.receipt { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.receipt div { display: flex; justify-content: space-between; font-size: var(--fs-small); }
.receipt span { color: var(--text-dark); }
.stack > .secondary { margin-top: 10px; }

/* ---- admin ---- */
.admin-shell { display: flex; min-height: 100vh; }
aside {
  width: 220px; flex-shrink: 0; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
  background: var(--header); border-right: 1px solid var(--outline);
  position: sticky; top: 0; height: 100vh;
}
aside .brand { font-size: var(--fs-row); color: var(--accent); margin: 2px 0 20px 8px; }
aside a { display: block; padding: 8px 12px; color: var(--text-mut); text-decoration: none; border-radius: var(--radius); transition: background .12s, color .12s; }
aside a:hover { background: var(--field); color: var(--text); }
aside a.active { background: var(--field); color: var(--accent); box-shadow: inset 0 0 0 1px var(--outline); }
main { flex: 1; padding: 32px 40px; overflow-x: auto; display: flex; justify-content: center; }
.content-container { width: 100%; max-width: 1400px; }
h1 { font-size: 22px; font-weight: 500; margin-bottom: 18px; color: var(--accent); }
h2 { font-size: var(--fs-row); font-weight: 500; margin: 22px 0 10px; color: var(--text); }
b { font-weight: 500; color: var(--accent); }
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 22px; }
.stat-card { background: var(--panel); border: 1px solid var(--outline); border-radius: var(--radius); padding: 14px; }
.stat-card b { display: block; font-size: 22px; margin-top: 6px; }
.panel { background: var(--panel); border: 1px solid var(--outline); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--outline); vertical-align: middle; }
th { background: var(--header); color: var(--text-dark); font-size: var(--fs-tiny); font-weight: 500; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--card-hover); }
main input, main select, main textarea, main button {
  background: var(--field); border: 1px solid var(--outline); border-radius: var(--radius);
  color: var(--text); padding: 7px 10px; outline: none; transition: background .12s, border-color .12s, box-shadow .12s;
}
main input:hover, main select:hover, main textarea:hover { background: var(--field-hover); border-color: var(--outline-hover); }
main input:focus, main select:focus, main textarea:focus { border-color: rgba(48, 118, 232, 0.85); box-shadow: 0 0 0 3px rgba(48, 118, 232, 0.12); }
main button { background: var(--field-active); cursor: pointer; }
main button:hover { background: var(--field-hover); border-color: var(--outline-hover); color: var(--accent); }
main .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
main .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-text); }
main .btn-danger { color: var(--danger); }
main .btn-danger:hover { background: rgba(225, 112, 105, 0.12); border-color: var(--danger); color: var(--danger); }
.badge { display: inline-block; padding: 2px 7px; font-size: 11.5px; border-radius: 4px; background: var(--field); color: var(--text-mut); }
.badge.admin { color: #f07a8a; background: rgba(240, 122, 138, 0.12); }
.badge.customer { color: #7aa7f2; background: rgba(48, 118, 232, 0.14); }
.badge.active, .badge.paid { color: var(--success); background: rgba(85, 195, 120, 0.12); }
.badge.banned, .badge.canceled { color: var(--danger); background: rgba(225, 112, 105, 0.12); }
.badge.pending { color: #e6c26a; background: rgba(230, 194, 106, 0.12); }
.alert { padding: 10px 14px; margin-bottom: 16px; border-radius: var(--radius); background: rgba(85, 195, 120, 0.08); border: 1px solid rgba(85, 195, 120, 0.4); color: var(--text); }
.alert.err { background: rgba(225, 112, 105, 0.08); border-color: rgba(225, 112, 105, 0.5); color: #f0a49e; }
code, .mono { font-family: Consolas, 'Cascadia Mono', monospace; font-size: 12.5px; }
.dim { color: var(--text-dark); }
.w-1 { width: 1%; white-space: nowrap; }