/* Nexus 2.0 — the Nexus Launch look (nexusalgo-launch.netlify.app): dark grid world, gold → ember, Inter + JetBrains Mono. */
:root {
  --bg: #09090b; --bg-2: #0f0f12; --panel: #141418; --panel-2: #1b1b21; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.15);
  --fg: #f5f3ef; --muted: #a8a49c; --dim: #75716a;
  --gold: #ffc65e; --ember: #f97316; --win: #4ade80; --loss: #f87171; --cyan: #5ee6ff; --discord: #5865f2; --on-gold: #1a1206;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh;
  background-image:
    radial-gradient(900px 520px at 12% -6%, rgba(249,115,22,.20), transparent 70%),
    radial-gradient(700px 460px at 92% 8%, rgba(94,230,255,.07), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
}
a { color: inherit; }
.wrap { max-width: 1140px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.025em; }
p { margin: 0; }
.mono { font-family: var(--mono); }
.eyebrow { font: 600 .74rem/1.35 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.grad { background: linear-gradient(92deg, #ffe3a3 0%, var(--gold) 35%, var(--ember) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.muted { color: var(--muted); } .dim { color: var(--dim); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font: 700 .95rem/1 var(--sans); text-decoration: none; border-radius: 999px; padding: .95em 1.5em; cursor: pointer; border: 0; white-space: nowrap; }
.btn-gold { color: var(--on-gold); background: linear-gradient(92deg, var(--gold), var(--ember)); box-shadow: 0 10px 34px -10px rgba(249,115,22,.65), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-gold:hover { filter: brightness(1.07); }
.btn-ghost { color: var(--fg); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-danger { color: var(--loss); background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.35); }
.btn-sm { padding: .62em 1.05em; font-size: .84rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }

/* sticky bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(9,9,11,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: 16px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.nmark { height: 26px; width: 21px; flex: none; overflow: visible; filter: drop-shadow(0 0 6px rgba(249,115,22,.55)); }
.brand span b { font-weight: 800; }
.bar-clock { margin-left: auto; display: flex; align-items: center; gap: 10px; font: 600 .82rem/1 var(--mono); color: var(--muted); }
.bar-clock .t { color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.bar-clock .live { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); animation: ping 1.8s infinite; }
.bar .btn { padding: .7em 1.15em; font-size: .86rem; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(249,115,22,.6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(249,115,22,0); } }
@media (max-width: 640px) { .bar-clock .lbl { display: none; } .brand span { display: none; } }

/* cards / panels */
.card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: 18px; padding: 20px; box-shadow: 0 30px 80px -40px rgba(0,0,0,.8); min-width: 0; }
.card.gold { border-color: rgba(255,198,94,.35); background: linear-gradient(180deg, rgba(255,198,94,.07), var(--panel)); }
.card.warn { border-color: rgba(248,113,113,.35); }
.card h3 { font-size: 1.15rem; font-weight: 800; }
.tag { display: inline-block; font: 600 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 6px; border: 1px solid rgba(255,198,94,.35); color: var(--gold); background: rgba(255,198,94,.06); }
.state { display: inline-block; font: 700 .66rem/1 var(--mono); letter-spacing: .1em; padding: 6px 8px; border-radius: 6px; text-transform: uppercase; white-space: nowrap; }
.state.ok, .state.sent, .state.live { color: var(--win); background: rgba(74,222,128,.1); }
.state.paper, .state.wait { color: var(--gold); background: rgba(255,198,94,.1); }
.state.off, .state.skipped { color: var(--dim); background: rgba(255,255,255,.05); }
.state.bad, .state.failed, .state.rejected { color: var(--loss); background: rgba(248,113,113,.1); }
.fine-note { font-size: .86rem; color: var(--muted); padding: 10px 12px; border-left: 2px solid rgba(255,198,94,.5); background: rgba(255,198,94,.04); border-radius: 0 8px 8px 0; }
.fine-note.red { border-left-color: rgba(248,113,113,.6); background: rgba(248,113,113,.05); }

/* forms */
label.f { display: grid; gap: 6px; font: 600 .74rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%; font: 500 .92rem/1.4 var(--mono); color: var(--fg); background: rgba(0,0,0,.35); border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 13px; outline: none;
}
textarea { min-height: 140px; resize: vertical; font-size: .8rem; }
input:focus, select:focus, textarea:focus { border-color: rgba(255,198,94,.6); box-shadow: 0 0 0 3px rgba(255,198,94,.12); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ember); flex: none; }
.toggle { position: relative; width: 46px; height: 26px; flex: none; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle i { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid var(--line-2); transition: .2s; cursor: pointer; }
.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: .2s; }
.toggle input:checked + i { background: linear-gradient(92deg, var(--gold), var(--ember)); border-color: transparent; }
.toggle input:checked + i::after { left: 23px; background: var(--on-gold); }
pre.code { margin: 0; font: 500 .76rem/1.5 var(--mono); color: var(--muted); background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 12px; padding: 12px; overflow: auto; max-height: 260px; }

/* toasts */
#toast { pointer-events: none; position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; display: grid; gap: 8px; width: min(560px, calc(100% - 32px)); }
#toast div { padding: 12px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -20px #000; font-size: .92rem; }
#toast div.err { border-color: rgba(248,113,113,.5); }
#toast div.ok { border-color: rgba(74,222,128,.45); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* the header's account button (assets/acct.js): Sign in, or your initial + Dashboard */
.signin { display: inline-flex; align-items: center; gap: 8px; }
.signin .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 .72rem/1 var(--sans); color: var(--on-gold); background: linear-gradient(135deg, var(--gold), var(--ember)); }
.signin .who { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 600; }
.signin .who::after { content: " ·"; }
@media (max-width: 1600px) { .signin .who { display: none; } }

/* the professional shop: blank templates until it opens */
.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.procard { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 18px; border: 1px dashed var(--line-2); background: rgba(255,255,255,.02); transition: transform .22s cubic-bezier(.2,.9,.3,1.3), border-color .22s ease, box-shadow .22s ease; }
.procard:hover { transform: translateY(-4px); border-color: rgba(255,198,94,.5); box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 28px rgba(249,115,22,.12); }
.procard h3 { margin: 0; font-size: 1.25rem; font-weight: 800; } .procard p { margin: 0; color: var(--muted); font-size: .9rem; }
.pcsoon { justify-self: start; flex: none; white-space: nowrap; font: 700 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); padding: 6px 9px; border-radius: 999px; border: 1px solid rgba(255,198,94,.35); background: rgba(255,198,94,.06); }
.pclines { display: grid; gap: 9px; } .pclines div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: center; } .pclines small { color: var(--muted); font-size: .76rem; } .pclines i { height: 8px; border-radius: 4px; background: rgba(255,255,255,.07); }
.pclines div:nth-child(2) i { width: 72%; } .pclines div:nth-child(3) i { width: 86%; }
.pcfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); } .pcfoot small { display: block; color: var(--muted); font-size: .72rem; } .pcfoot b { font-size: .92rem; }
.pctop { display: flex; justify-content: space-between; align-items: start; gap: 10px; } .pctop small { display: block; margin-top: 3px; font-size: .78rem; color: var(--muted); }
.pcshape { position: relative; display: flex; align-items: end; gap: 5px; height: 92px; padding: 12px; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, rgba(255,198,94,.05), rgba(255,255,255,.01)); border: 1px solid var(--line); }
.pcshape i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(255,198,94,.42), rgba(249,115,22,.1)); }
.pcshape em { position: absolute; left: 12px; top: 10px; font: 700 .62rem/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .procard { transition: none; } .procard:hover { transform: none; } }

/* the site's own checkboxes and dropdown arrows, never the browser's white ones */
input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; display: inline-grid; place-content: center; border: 1px solid #3a3e49; border-radius: 5px; background: #14161c; cursor: pointer; transition: border-color .12s, background .12s; }
input[type=checkbox]:hover { border-color: #ffc65e; }
input[type=checkbox]:checked { border-color: #ffc65e; background: rgba(255,198,94,.16); }
input[type=checkbox]:checked::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid #ffc65e; border-bottom: 2px solid #ffc65e; transform: rotate(-45deg); }
input[type=checkbox]:focus-visible { outline: 2px solid rgba(255,198,94,.6); outline-offset: 1px; }
input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23a1a5b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 7px center !important; background-size: 12px 12px !important; padding-right: 24px !important; cursor: pointer; }
select option, select optgroup { background: #14161c; color: #e6e7ea; }

/* 11/3 pre-video: headings break into even lines (no single word left alone); an odd last stat tile on a phone takes the whole row */
h1, h2, h3 { text-wrap: balance; }
@media (max-width: 640px) { .card.stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }