/* Shared design system for every Splash Nodes product surface (sites.,
   names., design., mail., phone., billing., market., dash.).
   Tokens and component patterns lifted from the marketing site's GDPR page
   and the landing-page header, so the whole suite reads as one family. */

:root {
  --bg: #000;
  --panel: #0c0c0e;
  --panel-border: #ffffff20;
  --panel-border-soft: #ffffff0b;
  --text: #b9bbc5;
  --text-dim: #858893;
  --text-faint: #7f7f8c;
  --heading: #eeeef1;
  --white: #fff;
  --accent: #c6ff3d;
  --accent-dim: #c6ff3d66;
  --radius-lg: 14px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.22,1,.36,1);
  --font: 'Plus Jakarta Sans',sans-serif;
}

* { box-sizing: border-box; }
/* The `hidden` attribute loses to any author rule of equal specificity that
   sets `display` on the same element (e.g. a layout class like .sn-layout) —
   toggle visibility with `el.hidden = true/false` and keep this rule so
   that actually hides it. */
[hidden] { display: none !important; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, strong, b { color: var(--heading); }

/* ---------------------------------------------------------------- header */
/* Icon-only variant of the marketing header: brand mark + wordmark on the
   left, no text nav links, icon buttons on the right (help, language,
   mail, account). */
.sn-header {
  border-bottom: 1px solid var(--panel-border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 20;
}
.sn-header-inner {
  max-width: 1280px; margin: auto; padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.sn-brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--white); font-weight: 750; font-size: 18px; text-decoration: none;
}
.sn-brand svg { color: var(--accent); flex-shrink: 0; }
/* A plain typographic label, not a competing pill/chip — the main site's
   header is just a wordmark, so the product name reads as part of it
   (Splash Nodes / Billing) rather than as a separate UI element bolted on. */
.sn-product-tag {
  font-size: 18px; font-weight: 400; color: var(--text-dim);
  margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--panel-border);
}
.sn-header-icons { display: flex; align-items: center; gap: 6px; }
.sn-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--text);
  cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease);
}
.sn-icon-btn:hover, .sn-icon-btn:focus-visible { background: var(--panel); color: var(--white); }
.sn-icon-btn svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------- app shell */
.sn-layout {
  max-width: 1280px; margin: auto; padding: 40px 28px 80px;
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px;
}
.sn-nav {
  align-self: start; position: sticky; top: 88px;
  border: 1px solid var(--panel-border); border-radius: var(--radius-lg);
  background: var(--panel); padding: 18px;
}
.sn-nav a {
  display: block; padding: 9px 10px; margin: 2px 0; border-radius: 8px;
  text-decoration: none; color: var(--text-dim); font-size: 14px;
}
.sn-nav a:hover { color: var(--white); background: #ffffff0d; }
.sn-nav a.active { color: var(--bg); background: var(--accent); font-weight: 650; }

/* ---------------------------------------------------------------- cards */
.sn-box {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg); padding: 24px; margin: 0 0 20px;
}
.sn-card {
  padding: 20px; border: 1px solid var(--panel-border); border-radius: var(--radius-md);
  background: #0c0c0e;
}
.sn-card:hover { border-color: var(--accent-dim); }
.sn-empty {
  text-align: center; padding: 60px 24px; color: var(--text-dim);
}
.sn-empty svg { color: var(--text-faint); margin-bottom: 16px; }

/* --------------------------------------------------------------- button */
.sn-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border: 1px solid #ffffff55; border-radius: var(--radius-pill);
  color: var(--white); text-decoration: none; font-size: 14px; background: transparent;
  cursor: pointer; transition: color .3s ease;
}
.sn-btn::before {
  content: ""; position: absolute; inset: 0; background: var(--white); z-index: -1;
  transform: translateY(101%); transition: transform .3s ease;
}
.sn-btn:hover, .sn-btn:focus-visible { color: #000; }
.sn-btn:hover::before, .sn-btn:focus-visible::before { transform: translateY(0); }
.sn-btn.sn-btn-accent { border-color: var(--accent); }
.sn-btn.sn-btn-accent::before { background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sn-btn, .sn-btn::before { transition: none; } }

@media (max-width: 850px) {
  .sn-layout { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px 60px; }
  .sn-nav { position: static; }
  .sn-header-inner { padding: 12px 18px; }
}

/* ------------------------------------------------------------ form fields
   Shared by the setup wizard and the admin console's Settings tab — one
   definition so the two never drift apart. */
.f { margin-bottom: 14px; }
.f label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.f input, .f textarea, .f select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 8px;
  background: #000; color: var(--white); font-family: var(--font); font-size: 14px;
}
.f input:focus, .f textarea:focus, .f select:focus { outline: none; border-color: var(--accent-dim); }
.f.f-checkbox { display: flex; align-items: center; gap: 8px; }
.f.f-checkbox label { margin: 0; }
.f.f-checkbox input { width: auto; }
.why { font-size: 12.5px; color: var(--text-faint); margin: 4px 0 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mono { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 13px; background: #000; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--panel-border); word-break: break-all; }

/* --------------------------------------------------------- compact footer
   Just the bottom grey bar from the main site's footer — brand mark,
   copyright line, policy links — for sign-in/sign-up pages and anywhere a
   full marketing footer (callout, link columns, payment marks) would be
   out of place. */
.sn-footer-bottom {
  max-width: 1280px; margin: 40px auto 0; padding: 22px 28px 32px;
  border-top: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  color: var(--white); font-size: 14px;
}
.sn-footer-copyright { display: flex; align-items: center; gap: 16px; color: #c0c1c5; }
.sn-footer-copyright .sn-footer-logo { flex-shrink: 0; color: inherit; }
.sn-footer-copyright p { margin: 0; line-height: 1.5; }
.sn-footer-copyright p span { color: #c0c1c5; }
.sn-footer-policy-links { display: flex; flex-wrap: wrap; gap: 12px 22px; font-size: 13px; }
.sn-footer-policy-links a { color: #9595a3; text-decoration: none; }
.sn-footer-policy-links a:hover { color: var(--accent); }
@media (max-width: 720px) {
  .sn-footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px 20px 28px; }
}