/* maxiserver website theme — matches the client: dark, near-black surfaces, green
   (#2ecc71) accent, Ubuntu. */

:root {
  --bg: #181818;
  --surface: #202020;
  --surface-2: #282828;
  --surface-3: #303030;
  --border: #383838;
  --border-strong: #5c5c5c; /* for edges drawn ON a surface-2 panel, where --border vanishes */
  --text: #e8e8e8;
  --muted: #9a9a9a;
  --accent: #2ecc71;
  --accent-dim: #27ae60;
  --danger: #e74c3c;
  --warn: #f1c40f;
  --radius: 10px;
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Ubuntu, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* nav */
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 18px; }
.brand:hover { text-decoration: none; }
.brand b { color: var(--accent); font-weight: 700; }
.nav { position: relative; flex-wrap: wrap; }
.nav-links { display: flex; gap: 18px; }
.nav-links a { color: var(--text); font-weight: 500; }
.nav-auth { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nav-link { color: var(--muted); font-weight: 500; }
.nav-link:hover { color: var(--text); }
.ccy { width: auto; padding: 5px 8px; font-size: 13px; }
.nav-toggle {
  display: none; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px; width: 38px; height: 38px; font-size: 18px; cursor: pointer;
}
.nav-credits {
  font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--accent);
  background: rgba(46, 204, 113, 0.1); border: 1px solid #245c3a; border-radius: 999px; padding: 4px 11px;
}
.nav-credits:hover { text-decoration: none; background: rgba(46, 204, 113, 0.16); }
.ccy-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ccy-inline select { width: auto; padding: 5px 8px; font-size: 13px; }

main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 28px 24px 48px; }

.footer {
  border-top: 1px solid var(--border);
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 9px 16px;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #08240f; font-weight: 700; }
.btn.primary:hover { background: var(--accent-dim); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.danger { color: var(--danger); border-color: #5a2a26; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* cards + layout */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.grid { display: grid; gap: 18px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stack > * + * { margin-top: 14px; }
hr { border: none; border-top: 1px solid var(--border); margin: 22px 0; }

/* hero */
.hero {
  text-align: center;
  padding: 56px 20px 40px;
  background: radial-gradient(120% 140% at 50% -10%, rgba(46, 204, 113, 0.12), transparent 60%);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 28px;
}
.hero h1 { font-size: 40px; letter-spacing: -0.5px; }
.hero p { color: var(--muted); font-size: 18px; max-width: 620px; margin: 0 auto 24px; }
.hero .row { justify-content: center; }

/* badges + pills */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
}
.badge.accent { color: var(--accent); border-color: #245c3a; background: rgba(46,204,113,.08); }
.badge.good { color: var(--accent); }
.badge.warn { color: var(--warn); }
.badge.bad { color: var(--danger); }
.tag { font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }

/* store cards */
.store-grid { grid-template-columns: repeat(3, 1fr); }
.store-card { cursor: pointer; transition: border-color .15s, transform .05s; }
.store-card:hover { border-color: var(--accent-dim); }
.store-card .thumb {
  height: 120px; border-radius: 8px; margin-bottom: 12px;
  background: linear-gradient(135deg, #223, #1a2a22);
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px;
  background-size: cover; background-position: center;
}
.store-card h3 { margin-bottom: 3px; }
.price { color: var(--accent); font-weight: 700; }

/* pricing */
.variant { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--surface-2); }
.variant h4 { margin: 0 0 4px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.stepper button { background: var(--surface-3); border: none; color: var(--text); width: 34px; height: 34px; font-size: 18px; cursor: pointer; }
.stepper span { min-width: 44px; text-align: center; }

/* forms + tables */
input, select, textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  width: 100%;
}

/* Checkboxes and radios are NOT text fields and must escape the rule above.
   `width: 100%` on a checkbox makes it stretch to fill its row, which squeezed the
   label beside it into a narrow column -- the "Stay signed in for 30 days" label was
   wrapping onto three lines because the box had eaten the width. Individual callers
   were papering over it with inline `style="width:auto"`, one at a time and not
   everywhere, which is how the sign-in page was missed. */
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;      /* never stretch or shrink inside a flex row */
  padding: 0;
  margin: 0;
  border-radius: 4px;
  accent-color: var(--accent);
  cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }

/* A checkbox with a label beside it. The label is the click target, so it gets the
   pointer too, and `align-items: flex-start` keeps the box aligned to the FIRST line
   when the text wraps rather than floating to the vertical middle of the block. */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  margin: 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
}
.check-row input { margin-top: 2px; }   /* optical alignment with the cap height */
.check-row:hover { color: var(--accent); }

/* <summary> is a control: it opens something. Without this it renders with a text
   cursor and no hover feedback, so it does not read as clickable at all. */
summary {
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  transition: color .12s ease;
}
summary:hover { color: var(--accent); }
summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* A value beside the button that copies it. The value takes the slack and wraps at
   narrow widths rather than pushing the button off the edge; the button never
   shrinks, because a half-width "Copy" is not a button anyone trusts. */
.copy-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.copy-row .copy-value { flex: 1 1 240px; padding: 7px 9px; }
.copy-row .copy-btn { flex: 0 0 auto; }
/* Confirmation is on the button itself: the thing just clicked is where the eye
   already is, and a credential shown once deserves an unambiguous "that worked". */
.btn.copy-btn.ok { color: var(--accent); border-color: var(--accent); }
textarea { resize: vertical; min-height: 72px; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.field { margin-bottom: 14px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--muted); font-weight: 500; }

/* misc */
.loading { color: var(--muted); padding: 40px; text-align: center; }
/* A notice carries its own bottom spacing. It had none, so every one of the 85 call
   sites had to remember to space it and the ones that forgot butted straight into
   the next heading. Spacing that every caller must supply is spacing that will be
   missed. `:last-child` drops it again so a notice ending a card does not pad the
   card out. */
.notice { padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); margin-bottom: 14px; }
.notice:last-child { margin-bottom: 0; }
.notice.ok { border-color: #245c3a; }
.notice.err { border-color: #5a2a26; color: #f3b6ae; }
.notice.warn { border-color: #6a5b16; color: #f0dd91; }
.notice.info { border-color: #245c3a; color: var(--muted); }
.pay-methods { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.pay-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); min-width: 170px; }
.pay-tile.on { border-color: var(--accent); }
.pay-tile.soon { opacity: 0.6; }
/* A tile that is actually a <button>. The element carries semantics and keyboard
   focus; these rules stop the UA stylesheet from making it look unlike its
   siblings, which sit in the same row and must read as one set. */
.pay-tile-btn { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pay-tile-btn:hover { border-color: var(--accent); }
.pay-name { font-weight: 600; }
.meter { position: relative; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; min-width: 90px; max-width: 160px; margin-bottom: 4px; }
.meter > span { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 999px; }
.meter.low > span { background: var(--warn); }
.kbd { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--surface-3); padding: 2px 6px; border-radius: 5px; font-size: 13px; word-break: break-all; }
.stat { font-size: 26px; font-weight: 700; }
.stat.accent { color: var(--accent); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.dot.on { background: var(--accent); }
.dot.off { background: var(--muted); }

/* ============ richer homepage + store components ============ */
:root {
  --accent2: #8b7bff;
  --accent2-dim: #6f5cf0;
  --display: "Space Grotesk", Ubuntu, sans-serif;
}
h1, h2, h3, .display { font-family: var(--display); letter-spacing: -0.5px; }

.eyebrow {
  font-family: var(--display); font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; font-size: 12px; color: var(--accent); margin: 0 0 4px;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px;
}
.status-pill .live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18); }

/* hero */
.home-hero { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; padding: 52px 0 40px; }
.home-hero::before { content: ""; position: absolute; inset: -120px -40px auto; height: 360px; background: radial-gradient(60% 100% at 28% 0, rgba(46, 204, 113, 0.14), transparent 70%); pointer-events: none; z-index: -1; }
.home-hero h1 { font-size: clamp(38px, 6vw, 66px); line-height: 1.03; margin: 14px 0 18px; }
.home-hero h1 .dim { color: var(--muted); }
.home-hero .lead { font-size: 18px; color: var(--muted); max-width: 520px; margin: 0 0 26px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { margin-top: 14px; font-size: 14px; color: var(--muted); }

.steps { display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.step:nth-child(2) { margin-left: auto; width: 92%; }
.step:nth-child(3) { width: 84%; }
.step .n { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 14px; min-width: 22px; }
.step h4 { margin: 0 0 2px; font-family: var(--display); }
.step p { margin: 0; color: var(--muted); font-size: 14px; }

/* section */
.section { padding: 44px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); margin: 10px 0 12px; }
.section-head p { color: var(--muted); font-size: 17px; margin: 0; }

/* compare */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare .plan { border: 1px solid var(--border); border-radius: 16px; padding: 26px; background: var(--surface); position: relative; }
.compare .plan.sub { border-color: #3a3460; background: linear-gradient(180deg, rgba(139, 123, 255, 0.06), var(--surface)); }
.plan .kicker { font-size: 13px; color: var(--muted); font-weight: 500; margin: 14px 0 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.plan h3 { font-size: 24px; margin: 0 0 8px; }
.plan .ticks { list-style: none; padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid var(--border); }
.plan .ticks li { display: flex; gap: 10px; padding: 6px 0; }
.plan .ticks li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.plan.sub .ticks li::before { color: var(--accent2); }
.plan .flag { position: absolute; top: 18px; right: 18px; }
.badge.purple { color: var(--accent2); border-color: #3a3460; background: rgba(139, 123, 255, 0.1); }

/* feature tiles */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { border: 1px solid var(--border); border-radius: 14px; padding: 22px; background: var(--surface); }
.feature .ico { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 20px; }
.ico.g { background: rgba(46, 204, 113, 0.12); }
.ico.b { background: rgba(90, 160, 255, 0.12); }
.ico.p { background: rgba(139, 123, 255, 0.12); }
.ico.o { background: rgba(241, 168, 60, 0.12); }
.feature h3 { font-size: 18px; margin: 0 0 6px; }
.feature p { color: var(--muted); margin: 0; }

/* getting started */
.gs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gs .num { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(46, 204, 113, 0.12); color: var(--accent); font-family: var(--display); font-weight: 700; border: 1px solid #245c3a; margin-bottom: 14px; }

/* faq accordion */
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.qa { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.qa button { width: 100%; text-align: left; background: none; border: none; color: var(--text); font: inherit; font-weight: 500; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.qa .a { padding: 0 18px; max-height: 0; overflow: hidden; color: var(--muted); transition: max-height 0.2s ease, padding 0.2s ease; }
.qa.open .a { max-height: 220px; padding: 0 18px 16px; }
.qa .plus { color: var(--accent); font-size: 20px; line-height: 1; }

/* cta band */
.cta-band { position: relative; border: 1px solid var(--border); border-radius: 18px; padding: 36px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; overflow: hidden; background: var(--surface); margin: 20px 0; }
.cta-band::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 60%; background: radial-gradient(60% 120% at 0 50%, rgba(46, 204, 113, 0.12), transparent 70%); }
.cta-band > * { position: relative; }
.cta-band h2 { font-size: 30px; margin: 0; max-width: 560px; }

/* store */
.store-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 0 0 20px; }
.store-toolbar input { flex: 1; min-width: 220px; }
.store-toolbar select { width: auto; }
.store-card .thumb { height: 150px; }
.store-card .card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }

/* usage charts */
.usage-tiles { margin-bottom: 16px; }
.chart-grid { margin-bottom: 4px; }
.chart-card .chart-box { position: relative; height: 200px; }
.chart-total { font-family: var(--display); font-weight: 600; color: var(--text); font-size: 15px; }
.usage-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg-btn { background: var(--surface-2); border: none; color: var(--muted); padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.on { background: var(--accent); color: #08240f; font-weight: 600; }
.usage-controls select { width: auto; padding: 6px 10px; font-size: 13px; }

/* nav bell */
.nav-bell { position: relative; font-size: 16px; text-decoration: none; }
.bell-badge { position: absolute; top: -6px; right: -8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px; }

/* empty states */
.empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--border); border-radius: 14px; }
.empty-ico { font-size: 34px; margin-bottom: 8px; }
.empty h3 { margin: 0 0 6px; }
.empty p { max-width: 420px; margin: 0 auto 16px; }

/* notifications */
.notif { display: block; }
.notif.unread { border-left: 3px solid var(--accent); }

/* listing */
.listing { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: 8px; }
.listing-hero { height: 240px; border-radius: 14px; overflow: hidden; }
.listing-hero .thumb { height: 240px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }

/* toasts */
#toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; }
.toast { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 16px; min-width: 240px; max-width: 360px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); animation: toast-in 0.2s ease; }
.toast.err { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warn); }
.toast.out { opacity: 0; transform: translateY(6px); transition: 0.3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dev-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px 3px 4px; }
.dev-chip b { color: var(--text); }
.dev-chip:hover { border-color: var(--accent); }
.dev-avatar { border-radius: 50%; background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--display); font-weight: 700; flex-shrink: 0; }
.side-sticky { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; }
.side-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--surface); }
.dev-other { display: block; padding: 7px 0; color: var(--text); border-top: 1px solid var(--border); }
.dev-other:first-of-type { border-top: none; }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 8px 0 16px; flex-wrap: wrap; }
.tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; font-weight: 500; padding: 10px 14px; cursor: pointer; margin-bottom: -1px; }
.tab.on { color: var(--text); border-bottom-color: var(--accent); }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: 10px; padding: 6px 0; }
.check-list li::before { content: "✓"; color: var(--accent); font-weight: 700; }

/* rating breakdown */
.rating-summary { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.rating-big { text-align: center; min-width: 120px; }
.rating-bars { flex: 1; min-width: 220px; }
.bar-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.bar-label { width: 80px; font-size: 13px; }
.bar { flex: 1; height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); }
.bar-n { width: 28px; text-align: right; font-size: 13px; }
.review .badge.good { color: var(--accent); }

/* payout stepper */
.payout-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pstep { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.pnum { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(46, 204, 113, 0.14); color: var(--accent); font-family: var(--display); font-weight: 700; font-size: 12px; }
.parrow { color: var(--muted); }

/* docs */
.docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; margin-top: 8px; }
.docs-nav { position: sticky; top: 76px; align-self: start; display: flex; flex-direction: column; gap: 4px; }
.docs-nav a { color: var(--muted); padding: 6px 0; }
.docs-nav a:hover { color: var(--text); }
.doc-section { padding: 8px 0 20px; border-bottom: 1px solid var(--border); }
.doc-section:last-child { border-bottom: none; }
.doc-section h2 { font-size: 22px; }
.doc-nav-group { margin-bottom: 12px; }
.doc-nav-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 4px 0; }
.doc-nav-group a { display: block; }
.doc-pre { display: block; padding: 12px; white-space: pre-wrap; overflow-x: auto; line-height: 1.5; }
.guide-body h3 { margin: 18px 0 6px; font-size: 16px; }
.guide-body h3:first-child { margin-top: 0; }
.guide-body li { margin: 4px 0; }

/* variant editor */
.var-edit { padding: 10px 0; border-top: 1px solid var(--border); }
.var-edit:first-child { border-top: none; padding-top: 0; }
.var-edit .row { align-items: center; }

/* category picker */
.rte { min-height: 158px; }
.rte-grid { align-items: start; }
.field-hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.form-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px 12px; }
.cat-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cat-chk input { width: auto; }

/* Quill dark theme */
.ql-toolbar.ql-snow { border: 1px solid var(--border); border-radius: 8px 8px 0 0; background: var(--surface-3); }
.ql-container.ql-snow { border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; font-family: inherit; font-size: 14px; }
.ql-editor { min-height: 120px; color: var(--text); }
.ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }
.ql-snow .ql-stroke { stroke: var(--muted); }
.ql-snow .ql-fill { fill: var(--muted); }
.ql-snow .ql-picker { color: var(--muted); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke { stroke: var(--text); }
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent); }
.ql-snow .ql-tooltip { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.ql-snow .ql-tooltip input[type=text] { background: var(--surface-3); border: 1px solid var(--border); color: var(--text); }

/* rendered rich content on listing pages */
.tab-panel ul, .tab-panel ol { padding-left: 20px; margin: 6px 0; }
.tab-panel li { padding: 2px 0; }
.tab-panel p { margin: 8px 0; }
.tab-panel a { color: var(--accent); }

/* footer */
.footer { flex-direction: column; align-items: stretch; gap: 16px; }
.footer-main { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer-brand { display: flex; flex-direction: column; gap: 2px; }
.footer-name { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--text); }
.footer-name b { color: var(--accent); }
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: var(--muted); }
.footer-legal { font-size: 12px; max-width: 720px; margin: 0; }

/* responsive for the new components */
@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; }
  .features, .gs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .compare, .features, .gs { grid-template-columns: 1fr; }
  .step:nth-child(2), .step:nth-child(3) { width: 100%; margin-left: 0; }
  .home-hero { padding-top: 32px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 820px) {
  .listing, .docs { grid-template-columns: 1fr; }
  .side-sticky, .docs-nav { position: static; }
  .docs-nav { flex-direction: row; flex-wrap: wrap; gap: 12px; }
}

/* live session monitor (dashboard) */
.sess-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sess-card { cursor: pointer; }
.sess-card:hover { border-color: var(--accent); }
.world-canvas { display: block; width: 100%; height: 360px; background: #0d1117; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; margin-top: 8px; }
.hm-grid { display: grid; grid-template-rows: repeat(7, 11px); grid-auto-flow: column; gap: 3px; width: max-content; }
.hm-cell { width: 11px; height: 11px; border-radius: 2px; background: var(--surface-3); }
.lb-rank { width: 44px; font-weight: 700; }
.sess-grid { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
.act-row { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.pos-canvas { display: block; width: 100%; height: 300px; background: #0d1117; border: 1px solid var(--border); border-radius: 10px; cursor: crosshair; margin-top: 8px; }
.cf-form { margin-top: 8px; }
.cf-section { margin-bottom: 14px; }
.cf-section > b { display: block; margin-bottom: 8px; }
.cf-group-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 10px 0 4px; }
.cf-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.cf-field label { font-size: 13px; }
@media (max-width: 900px) { .sess-grid { grid-template-columns: 1fr; } }

/* transports (pathing data) viewer */
.transport-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.transport-map { position: sticky; top: 84px; }
/* The pathing pages use the whole window: controls a third, the map two thirds and as
   tall as the window allows. main.wide is set by those views and cleared by the router. */
main.wide { max-width: none; }
.pathing-layout { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.pathing-layout.map-first > .transport-map { order: 2; }
.pathing-layout .tr-canvas { height: max(480px, calc(100vh - 170px)); }
.pathing-side .tr-kinds { margin-bottom: 12px; }
.pathing-side .tr-detail { margin: 0 0 12px; }
.pathing-side .transport-cards { max-height: none; overflow: visible; padding-right: 0; }
.tr-canvas { display: block; width: 100%; height: 600px; background: #0d1117; border: 1px solid var(--border); border-radius: 12px; cursor: grab; }
.tr-canvas:active { cursor: grabbing; }
.tr-mapfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; gap: 10px; flex-wrap: wrap; }
.coord-link { background: none; border: 0; padding: 0; font: 12px ui-monospace, monospace; color: var(--accent); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.coord-link:hover { text-decoration-style: solid; }
.tr-goto { display: flex; gap: 6px; align-items: center; }
.tr-goto input { width: 170px; padding: 5px 8px; font-size: 13px; }
.tr-layers { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 13px; }
.tr-detail { margin-top: 10px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
/* The selected transport's panel is surface-2, the same fill as a tag or a button, so
   their usual border disappeared into it. Lighter fill and a stronger edge in here. */
.tr-detail .tag, .tr-sel-body .tag { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
.tr-detail .btn, .tr-sel-body .btn { border-color: var(--border-strong); }
.tr-detail .btn:not(.ghost), .tr-sel-body .btn:not(.ghost) { background: var(--surface-3); }
.tr-detail .btn:hover, .tr-sel-body .btn:hover { background: #3c3c3c; }
.tr-rel-group { margin-top: 10px; }
/* The selected transport, open where it sits in the list. Sticky at both edges: while its
   place is above or below the window it floats at that edge, and it returns to its place
   when that scrolls back into view. top matches the map's own sticky offset. */
.tr-row.selected { position: sticky; top: 84px; bottom: 12px; z-index: 3; flex-wrap: wrap; cursor: default; background: var(--surface-2); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,0.5); }
.tr-row.selected:hover { background: var(--surface-2); }
/* The list and its wrapper take no box of their own here, so the open row's sticky range is
   the whole left column: it can float at the bottom edge even at the top of the page, where
   the list itself starts far down, below the filters. */
.pathing-side .transport-cards, .pathing-side #tr-list { display: contents; }
/* The row above already names it: keep only the kind and object tags from the heading. */
.tr-sel-body > .row:first-child > .dot, .tr-sel-body > .row:first-child > b { display: none; }
.tr-sel-body { flex-basis: 100%; font-size: 13px; padding: 8px 2px 2px; border-top: 1px solid var(--border-strong); margin-top: 6px; }
.tile-menu { position: absolute; z-index: 50; min-width: 230px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.tile-menu-head { padding: 6px 10px 4px; font-size: 12px; color: var(--muted); }
.tile-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 7px 10px; background: none; border: 0; border-radius: 6px; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.tile-menu button:hover, .tile-menu button:focus { background: var(--surface-3); outline: none; }
.tile-menu button .mono { font-size: 11px; }
.tr-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; text-align: left; margin-top: 4px; padding: 6px 8px; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.tr-rel:hover { background: #3c3c3c; }
.tr-rel .mono { font-size: 12px; }
.tr-rel-req { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.tr-toolbar { display: flex; gap: 10px; margin-bottom: 12px; }
.tr-toolbar input { flex: 1; }
.tr-toolbar select { width: auto; }
.tr-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tr-kind { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 13px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text); cursor: pointer; }
.tr-kind.on { border-color: var(--accent); background: rgba(46, 204, 113, 0.1); }
.transport-cards { max-height: 640px; overflow-y: auto; padding-right: 4px; }
.tr-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--border); cursor: pointer; }
.tr-row:hover { background: var(--surface-2); }
.tr-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tr-row-main .mono { font-size: 12px; }
.tr-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 13px; flex-wrap: wrap; }
.tr-pager .pager-per { width: auto; padding: 4px 8px; font-size: 13px; }

/* admin overview: a card that is a door to a list page */
.admin-door { text-decoration: none; color: inherit; display: block; }
.admin-door:hover { border-color: var(--accent-dim); }

/* store discovery: the best-rated bot in each category */
.cat-winners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat-winner {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); text-decoration: none; color: var(--text);
}
.cat-winner:hover { border-color: var(--accent-dim); }

/* a developer's public answer, nested under the review it replies to */
.dev-reply {
  margin: 12px 0 0 0; padding: 10px 12px;
  border-left: 2px solid var(--accent-dim);
  background: var(--surface-2); border-radius: 0 8px 8px 0;
}

/* settings: account key/value table + preference toggles */
.kv { min-width: 0; }
.kv th { width: 150px; color: var(--muted); font-weight: 500; text-align: left; vertical-align: top; }
.pref { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.pref input { width: auto; margin-top: 3px; }
.pref span { display: flex; flex-direction: column; gap: 2px; }
.pref .muted { font-size: 13px; }

/* tablet */
@media (max-width: 900px) {
  .grid.cols-4, .grid.cols-3, .store-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-winners { grid-template-columns: repeat(2, 1fr); }
  .transport-layout { grid-template-columns: 1fr; }
  .pathing-layout { grid-template-columns: 1fr; }
  .pathing-layout > .transport-map { order: -1; }
  .pathing-layout .tr-canvas { height: 520px; }
  .transport-map { position: static; }
  .transport-cards { max-height: none; }
}

/* phone */
@media (max-width: 640px) {
  main { padding: 20px 16px 40px; }
  .nav { padding: 10px 16px; }
  .grid.cols-4, .grid.cols-3, .grid.cols-2, .store-grid, .cat-winners { grid-template-columns: 1fr; }
  .hero { padding: 40px 16px 30px; }
  .hero h1 { font-size: 28px; }
  .hero p { font-size: 16px; }
  .nav-toggle { display: block; order: 4; }
  .nav-auth { order: 3; }
  .nav-links {
    order: 5; display: none; width: 100%; flex-direction: column; gap: 2px;
    padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border);
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 9px 2px; }
  .card { overflow-x: auto; }          /* wide tables scroll rather than overflow */
  table { min-width: 460px; }
  .spread { flex-wrap: wrap; }
  .stat { font-size: 22px; }
  .footer { flex-direction: column; gap: 4px; }
}

/* --- confirm dialog -------------------------------------------------------
   Used where a click spends money. The backdrop is a click target (dismiss =
   cancel) and the panel stops propagation by being a child the handler checks
   against, so "click outside to cancel" needs no extra listener. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, .62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  width: 100%; max-width: 420px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.modal-rows { width: 100%; border-collapse: collapse; margin-top: 4px; }
.modal-rows th, .modal-rows td {
  padding: 11px 12px; font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.modal-rows tr:last-child th, .modal-rows tr:last-child td { border-bottom: 0; }
/* Label left and quiet, value right and loud: the eye goes to the number. */
.modal-rows th { text-align: left; font-weight: 500; color: var(--muted); white-space: nowrap; }
.modal-rows td { text-align: right; font-weight: 600; }
.modal-rows td.accent { color: var(--accent); }
.modal-rows td.bad { color: var(--danger); }
/* A disabled confirm still has to look like the reason it is disabled. */
.modal .btn[disabled] { opacity: .6; cursor: not-allowed; }

/* --- top-up amount field --------------------------------------------------
   The input was a bare number box, so "1000" could have been credits, dollars or
   XMR. The label names the unit, the suffix repeats it at the point of typing,
   and the line beneath says what it costs. */
.topup-box { max-width: 520px; }
.topup-box > label { display: block; font-size: 14px; color: var(--text); margin-bottom: 8px; }
/* The unit sits INSIDE the field's border so it reads as part of the value
   rather than as a word that happens to follow it. */
.input-suffix {
  display: inline-flex; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding-right: 11px;
}
.input-suffix input {
  border: 0; background: transparent; width: 130px;
  padding-right: 4px;
}
.input-suffix input:focus { outline: none; }
.input-suffix:focus-within { border-color: var(--accent); }
.input-suffix > span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.topup-est { margin-top: 10px; font-size: 14px; }
.topup-est b { color: var(--accent); }

/* --- an open invoice ------------------------------------------------------
   The QR carries the address AND the amount, so it is the primary control here
   and the copyable string is folded away behind a disclosure. That ordering is
   the point: transcribing a 95-character address by hand is the step where
   money goes somewhere unrecoverable, and it should be the fallback rather than
   the default. */
.invoice { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
/* The white plate travels with the code. Scanners expect dark modules on a light
   background and this is a dark theme, so a QR inheriting the page background
   reads as unscannable on some phones and fine on others -- the worst kind of
   bug to be told about. Same reasoning as src/auth/qr.ts. */
.invoice-qr { width: 190px; background: #fff; padding: 10px; border-radius: 10px; flex: 0 0 auto; }
.invoice-qr svg { display: block; width: 100%; height: auto; }
.invoice-main { flex: 1 1 260px; min-width: 0; }
.invoice-amount { font-size: 17px; }
.invoice-manual > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.invoice-manual[open] > summary { margin-bottom: 4px; }

/* The swap detour. Shut by default and visually quieter than the invoice above
   it, because it is a link to somebody else's service that costs the payer the
   privacy they came here for -- an option, never the path of least resistance. */
/* Spaced on BOTH sides: it is followed by the page's standing explanation of how
   top-ups work, and without a bottom margin the two read as one block — a note
   about the third-party detour running straight into a paragraph about ours. */
.swap-box { margin: 16px 0 18px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); }
.swap-box > summary { cursor: pointer; font-size: 14px; }

/* A payment seen in the mempool but not yet mined. Amber rather than green: it
   has not happened yet, and the ten-to-twenty minutes before it does are exactly
   when saying "paid" would be a lie. */
.seen-note { font-size: 12px; color: var(--warn, #d9a441); margin-top: 2px; }

/* The result region only exists once an invoice is open, so its spacing is
   conditional — an empty #topup-msg must not leave a gap above the notice. */
#topup-msg:not(:empty) { margin-bottom: 18px; }

/* The swap route when it is the CHOSEN one, rather than a footnote under the Monero
   invoice. Same surface as .swap-box so the two read as the same feature, but open
   by default and leading with its primary action: someone who pressed "Pay with
   another coin" should not have to expand anything to reach the button. */
.swap-panel { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--surface-2); }

/* an admin viewing as someone else: always visible, never mistaken for their own session */
.view-as-bar { position: sticky; top: 0; z-index: 1000; display: flex; gap: 12px; align-items: center; justify-content: center; padding: 8px 16px; background: #b8860b; color: #111; font-size: 14px; }
.view-as-bar .btn { background: #111; color: #fff; border-color: #111; }