/* Octopus Nightshift — shared cinematic skin for every public page. */
:root {
  --night-bg: #05050a;
  --night-panel: rgba(15, 16, 28, .78);
  --night-panel-strong: rgba(9, 10, 18, .94);
  --night-border: rgba(255, 255, 255, .1);
  --night-text: #f8f7ff;
  --night-muted: #aaa9bd;
  --night-violet: #a78bfa;
  --night-cyan: #67e8f9;
}

html { color-scheme: dark; background: var(--night-bg); }
body, body.op-page, body.st-page, body.quick-setup-page {
  --bg: var(--night-bg);
  --bg-surface: var(--night-panel);
  --bg-surface-hover: rgba(27, 28, 47, .9);
  --panel: var(--night-panel);
  --panel-border: var(--night-border);
  --input-bg: rgba(255,255,255,.055);
  --text: var(--night-text);
  --text-silver: #bbbacc;
  --text-muted: #8f8ea3;
  --muted: var(--night-muted);
  --border: var(--night-border);
  background-color: var(--night-bg) !important;
  background-image: radial-gradient(circle at 10% 5%, rgba(124,58,237,.2), transparent 28%),
                    radial-gradient(circle at 90% 18%, rgba(6,182,212,.15), transparent 25%),
                    radial-gradient(circle at 52% 78%, rgba(236,72,153,.09), transparent 30%),
                    linear-gradient(180deg, #05050a 0%, #080711 52%, #040408 100%) !important;
  color: var(--night-text) !important;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .13;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
.aurora-blob { opacity: .34 !important; filter: blur(150px) !important; }
.aurora-blob--1 { background: #6d28d9 !important; }
.aurora-blob--2 { background: #db2777 !important; }
.aurora-blob--3 { background: #0891b2 !important; }
.aurora-blob--4 { background: #2563eb !important; }

/* Shared navigation */
.topbar, body > nav, .nav-inner {
  background: rgba(8,8,15,.74) !important;
  border-color: var(--night-border) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(24px) saturate(150%);
}
.brand__text, .logo-name { color: #fff !important; }
.nav-desktop a, .nav-inner a { color: #c0bfd0 !important; }
.nav-desktop a:hover, .nav-inner a:hover { color: #fff !important; background: rgba(139,92,246,.15) !important; }
.mobile-drawer__panel { background: rgba(8,8,15,.97) !important; border-color: var(--night-border) !important; }
.mobile-drawer__panel a { color: #d4d3df !important; }
.nav-toggle { color: #fff !important; }

/* Universal page typography and glass surfaces */
.support-hero h1, .sss-hero h1, .qs-page-head h1, .st-stage h1, header.hero h1 {
  background: linear-gradient(100deg, #fff 0%, #c4b5fd 38%, #67e8f9 72%, #f0abfc 100%) !important;
  background-size: 200% auto !important; -webkit-background-clip: text !important;
  background-clip: text !important; color: transparent !important;
  animation: nightshift-flow 8s linear infinite;
}
@keyframes nightshift-flow { to { background-position: 200% center; } }
.support-hero p, .sss-hero p, .qs-page-head p, .hero-date { color: var(--night-muted) !important; }
.hub-card, .acc-item, .contact-card, .sss-item, .sss-alert-box, .qs-card,
.intro-card, .policy-block, .toc, .panel, .st-metric, .st-verdict, .st-egress {
  background: linear-gradient(145deg, rgba(19,20,34,.8), rgba(8,8,15,.88)) !important;
  border-color: var(--night-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 24px 60px rgba(0,0,0,.24) !important;
  color: var(--night-text) !important;
}
.hub-card:hover, .sss-item:hover, .acc-item:hover, .policy-block:hover {
  border-color: rgba(139,92,246,.42) !important;
  box-shadow: 0 25px 65px rgba(0,0,0,.38), 0 0 38px rgba(124,58,237,.11) !important;
}
.hub-card h2, .hub-card h3, .acc-item summary, .sss-item summary,
.policy-title, .qs-method-label, .qs-field label, .panel h2, .contact-title { color: #f8f7ff !important; }
.hub-card p, .acc-item p, .sss-item p, .policy-body, .intro-card p,
.contact-empty, .hint, .legal, .hero-sub, .muted { color: var(--night-muted) !important; }
.support-section-alt, .support-section--faq, .sss-body { background: transparent !important; }

/* Forms and activation flows */
.qs-card, .panel { backdrop-filter: blur(26px) saturate(145%) !important; }
.qs-tabs--radio, .tabs { background: rgba(255,255,255,.045) !important; border-color: var(--night-border) !important; }
.qs-tabs--radio .qs-tab, .tab { color: #aaa9bd !important; }
.qs-tabs--radio .qs-tab.active, .tab.active {
  color: #fff !important; background: linear-gradient(135deg, #7c3aed, #db2777) !important;
  box-shadow: 0 10px 26px rgba(124,58,237,.3) !important;
}
.qs-field input, .field input, .qs-card input, .panel input, .panel select {
  background: rgba(255,255,255,.055) !important; color: #fff !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.qs-field input:focus, .field input:focus, .qs-card input:focus, .panel input:focus {
  background: rgba(255,255,255,.08) !important; border-color: var(--night-violet) !important;
  box-shadow: 0 0 0 4px rgba(139,92,246,.14), 0 0 30px rgba(124,58,237,.1) !important;
}
.qs-field input::placeholder, .field input::placeholder, .panel input::placeholder { color: #666579 !important; }
.qs-submit, .btn-primary, .panel .btn-primary {
  background: linear-gradient(120deg, #7c3aed, #db2777 58%, #0891b2) !important;
  color: #fff !important; box-shadow: 0 15px 38px rgba(124,58,237,.27) !important;
}
.qs-code-number, .code-number {
  color: #fff !important; text-shadow: 0 0 26px rgba(103,232,249,.4), 0 0 55px rgba(139,92,246,.24);
}

/* Reseller /b/{code}: keeps each reseller's dynamic --accent. */
.bg { background: radial-gradient(ellipse 90% 55% at 50% -8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%), linear-gradient(165deg, #05050a, #090812 52%, #040408) !important; }
.bg::after { content: ""; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 42px 42px; }
.hero-logo { background: rgba(255,255,255,.94) !important; border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important; box-shadow: 0 18px 48px rgba(0,0,0,.36), 0 0 35px color-mix(in srgb, var(--accent) 22%, transparent) !important; }
.announce { background: var(--night-panel) !important; border-color: var(--night-border) !important; border-left-color: var(--accent) !important; }
.server-pill { background: rgba(255,255,255,.045) !important; }
.btn-ghost { background: rgba(255,255,255,.06) !important; color: #ddd !important; border-color: var(--night-border) !important; }

/* Speed test */
.st-page .st-stage { color: #fff; }
.st-value { background: linear-gradient(100deg, #fff, #67e8f9 55%, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent !important; filter: drop-shadow(0 0 28px rgba(34,211,238,.16)); }
.st-progress { background: rgba(255,255,255,.07) !important; }
.st-progress__bar { background: linear-gradient(90deg, #7c3aed, #22d3ee, #ec4899) !important; box-shadow: 0 0 22px rgba(34,211,238,.3); }

/* Legal pages */
.layout { color: var(--night-text) !important; }
.toc a, .policy-body, .policy-body p, .policy-body li { color: #b5b4c6 !important; }
.policy-num, .lang-badge, .hero-eyebrow { color: var(--night-cyan) !important; border-color: rgba(34,211,238,.24) !important; background: rgba(6,182,212,.08) !important; }

.site-footer { background: rgba(3,3,7,.98) !important; border-top-color: rgba(139,92,246,.17) !important; }
.footer-contact, .octopus-support {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 9px 13px;
  border: 1px solid rgba(34,211,238,.24); border-radius: 999px; color: #67e8f9 !important;
  background: rgba(6,182,212,.07); font-size: 13px; font-weight: 700; text-decoration: none;
}
.footer-contact:hover, .octopus-support:hover { color: #fff !important; border-color: #67e8f9; box-shadow: 0 0 26px rgba(34,211,238,.15); }
.foot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.legal-nav-links { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.legal-nav-links a { padding: 7px 11px; border-radius: 999px; color: #c7c6d5 !important; font-size: 12px; font-weight: 700; text-decoration: none; }
.legal-nav-links a:hover { color: #fff !important; background: rgba(139,92,246,.16); }
@media (max-width: 620px) {
  .legal-nav-links a:last-child { display: none; }
  .legal-nav-links { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .support-hero h1, .sss-hero h1, .qs-page-head h1, .st-stage h1, header.hero h1 { animation: none; }
}