/* OrbitCount: dark event-display look, shared with RobotDash */
:root{
  --void:#07090e; --panel:#0f131b; --panel-2:#151a25; --line:#222a39;
  --fg:#e3e9f4; --muted:#8b97b0; --cyan:#2ee6ff; --red:#e0453a; --gold:#ffd34d; --green:#5ee59a;
  --f-display:"Orbitron","Arial Black",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:radial-gradient(1200px 600px at 70% -10%,rgba(46,230,255,.08),transparent 60%),var(--void)}
html,body{margin:0;color:var(--fg);font:16px/1.55 var(--f-body)}
body{min-height:100vh;display:flex;flex-direction:column;padding-inline:16px}
a{color:var(--cyan)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}

/* header */
.top{width:100%;max-width:1120px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.brand b{font:800 17px/1 var(--f-display);letter-spacing:.08em}
.brand b span{color:var(--cyan)}
.nav{display:flex;align-items:center;gap:4px}
.nav a,.nav button{all:unset;cursor:pointer;font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 11px;border-radius:8px}
.nav a:hover,.nav button:hover{color:var(--fg);background:var(--panel-2)}
.nav form{margin:0}
.nav .nav-cta{color:#03222a;background:var(--cyan)}
.nav .nav-cta:hover{color:#03222a;background:#7af0ff}

/* page */
.main{flex:1;width:100%;margin-inline:auto;padding-block:28px 48px}
.main.narrow{max-width:440px}
.main.wide{max-width:1120px}
h1{font:800 clamp(22px,4vw,28px)/1.2 var(--f-display);letter-spacing:.02em;margin:0 0 12px}
.page-h{margin-bottom:4px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.card p{margin:0 0 12px}
.card p:last-child{margin-bottom:0}
.muted{color:var(--muted)}
.small{font-size:14px}
.flash{background:rgba(94,229,154,.1);border:1px solid rgba(94,229,154,.4);color:#c8f7dc;border-radius:10px;padding:10px 14px;margin:0 0 16px}
.err{background:rgba(224,69,58,.12);border:1px solid rgba(224,69,58,.5);color:#ffc9c4;border-radius:10px;padding:10px 14px}
.note{background:rgba(255,211,77,.08);border:1px solid rgba(255,211,77,.4);color:#ffe9a3;border-radius:10px;padding:10px 14px}
.empty-state{margin-top:16px;color:var(--muted)}

/* forms */
.form{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.form label{display:flex;flex-direction:column;gap:6px;font:500 13px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.form input{font:400 16px var(--f-body);color:var(--fg);background:var(--void);border:1px solid var(--line);border-radius:10px;padding:11px 12px;text-transform:none;letter-spacing:0}
.form input:focus{border-color:var(--cyan)}
.form small{font:400 12px var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px/1 var(--f-body);height:44px;padding:0 18px;border-radius:10px;background:var(--cyan);color:#03222a;text-decoration:none;text-align:center}
.btn:hover{background:#7af0ff}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--panel-2)}
.form .btn{width:100%;margin-top:4px}
.alt{font-size:14px;color:var(--muted);text-align:center;margin-top:16px!important}

/* home */
.hero{padding-block:40px 20px;max-width:720px}
.eyebrow{font:500 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.hero h1{font-size:clamp(30px,5.4vw,52px);line-height:1.08;margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--cyan)}
.lede{color:var(--muted);font-size:18px;max-width:58ch;margin:0 0 24px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}

/* footer */
.foot{width:100%;max-width:1120px;margin-inline:auto;border-top:1px solid var(--line);padding-block:18px 26px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font:400 13px/1.5 var(--f-mono);color:var(--muted)}
.foot a{color:var(--fg)}

@media (max-width:520px){
  .card{padding:18px}
  .brand b{font-size:15px}
  .nav a,.nav button{padding:9px 7px;letter-spacing:.05em}
}

/* ---------- v2: home page ---------- */
.tiny{font-size:12.5px}
.center{text-align:center}
.label{font:500 11px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.hero2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center;padding-block:20px 40px}
.hero2 h1{font-size:clamp(30px,5.2vw,52px);line-height:1.08;margin-bottom:16px}
.hero2 h1 em{font-style:normal;color:var(--cyan)}
.live{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);min-height:84px}
.hero-globe iframe{display:block;width:100%;aspect-ratio:1/1;border:0;border-radius:16px;background:transparent}
.hero-globe p{margin:8px 0 0}
.section{padding-block:34px;border-top:1px solid var(--line)}
.section-h{font:800 20px/1.2 var(--f-display);letter-spacing:.06em;text-transform:uppercase;margin:0 0 18px}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cards3 h3{font:600 17px/1.3 var(--f-body);margin:0 0 8px}
.cards3 p{margin:0}
.num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--cyan);color:var(--cyan);font:600 14px var(--f-mono);margin-bottom:12px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.split p{margin:0 0 12px}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;color:var(--muted)}
.checks li{padding-left:26px;position:relative}
.checks li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:600}
.nav-hide{}

/* ---------- v2: dashboard ---------- */
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px}
.dash-head p{margin:0}
.site{margin-bottom:18px}
.site-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.site-h h2{font:700 20px/1.2 var(--f-body);margin:0 0 4px}
.site-h a{text-decoration:none}
.site-stats{display:flex;gap:20px}
.site-stats div{text-align:right}
.site-stats b{display:block;font:600 22px/1 var(--f-mono);color:var(--gold);font-variant-numeric:tabular-nums}
.site-stats span{font:400 10.5px/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.step{padding-block:14px;border-bottom:1px solid var(--line)}
.step h3{display:flex;align-items:center;gap:10px;font:600 16px/1.3 var(--f-body);margin:0 0 6px}
.step h3 span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--cyan);color:var(--cyan);font:600 12px var(--f-mono)}
.step p{margin:0 0 8px}
.code{display:flex;gap:8px;align-items:stretch}
.code textarea{flex:1;min-width:0;resize:none;font:400 13px/1.45 var(--f-mono);color:#cfe9f0;background:var(--void);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.copy{all:unset;cursor:pointer;flex:none;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:0 14px;display:inline-flex;align-items:center;min-height:38px}
.copy:hover{background:var(--panel-2)}
code{font:400 .92em var(--f-mono);color:#cfe9f0;background:var(--panel-2);padding:1px 5px;border-radius:5px}
.brandbox{display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:var(--void);border:1px dashed var(--line);border-radius:12px;padding:14px}
.brandbox ol{margin:0;padding-left:20px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.brand-code{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand-code span{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.brand-code b{font:600 22px/1 var(--f-mono);letter-spacing:.08em;color:var(--gold)}
.brandbox p{margin:0}
.ok{color:#c8f7dc}
.settings{padding-top:12px}
.settings summary{cursor:pointer;font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 0}
.settings summary:hover{color:var(--fg)}
.form.inline{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:12px}
.form.inline label{flex:1 1 220px}
.form.inline .btn{width:auto;margin:0}
.linkbtn{all:unset;cursor:pointer;font-size:14px;text-decoration:underline}
.danger{color:#ff8f86}
.add-site h2{font:700 20px/1.2 var(--f-body);margin:0 0 6px}

@media (max-width:860px){
  .hero2,.split{grid-template-columns:1fr}
  .cards3{grid-template-columns:1fr}
  .hero-globe{max-width:520px;width:100%;margin-inline:auto}
}
@media (max-width:520px){
  .nav-hide{display:none!important}
  .code{flex-direction:column}
  .site-stats div{text-align:left}
}

/* ---------- v3: about section ---------- */
.about-body{max-width:760px}
.about-body p{color:var(--muted);margin:0 0 12px}
.about-body p:first-child{color:var(--fg)}

/* ---------- v4: styles page ---------- */
.styles-intro{padding-block:16px 8px;max-width:720px}
.styles-intro h1{font-size:clamp(28px,5vw,46px);line-height:1.08;margin-bottom:12px}
.styles-intro h1 em{font-style:normal;color:var(--cyan)}
.styler{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:start;padding-block:20px 34px;scroll-margin-top:16px}
.controls{display:flex;flex-direction:column;gap:20px}
.ctl .label{display:block}
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.themes button,.seg button{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg);font:500 14px/1.2 var(--f-body)}
.themes button{display:flex;flex-direction:column;gap:8px;padding:10px 12px}
.themes button[aria-pressed="true"],.seg button[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}
.themes button:hover,.seg button:hover{background:var(--panel-2)}
.dots{display:flex;gap:4px}
.dots i{display:block;width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.seg button{padding:9px 14px}
.text{font:400 15px var(--f-body);color:var(--fg);background:var(--void);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;max-width:320px;box-sizing:border-box}
select.text{margin-bottom:14px}
.check{display:flex;gap:9px;align-items:center;color:var(--fg);font-size:14.5px;margin:6px 0;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--cyan)}
.previews{position:sticky;top:12px}
.stage-box{border-radius:16px;padding:18px;border:1px solid var(--line);transition:background .2s}
.stage-box.dark{background:#0b0e14}
.stage-box.light{background:#f4f1ea;border-color:#ddd5c4}
.stage-box.light .label,.stage-box.light .muted{color:#6b6255}
.counter-preview{min-height:80px;display:flex;align-items:center;margin-bottom:12px}
.stage-box iframe{display:block;width:100%;aspect-ratio:1/1;border:0;border-radius:12px;background:transparent}
.stage-box p{margin:8px 0 0}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.tile{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.tile[aria-pressed="true"]{border-color:var(--cyan)}
.tile:hover{background:var(--panel-2)}
.tile-prev{display:flex;align-items:center;min-height:76px;margin-bottom:4px}
.tile b{font:600 16px var(--f-body)}
#code .step:last-of-type{border-bottom:0}
@media (max-width:900px){
  .styler{grid-template-columns:1fr}
  .previews{position:static;order:-1}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .themes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:1fr}
}
.motion-off{color:var(--gold);font-weight:500}

/* ---------- v6: early access strip ---------- */
.beta{margin-inline:-16px;padding:8px 16px;text-align:center;font:400 13px/1.45 var(--f-body);color:var(--muted);background:rgba(255,211,77,.07);border-bottom:1px solid rgba(255,211,77,.22)}
.beta b{display:inline-block;margin-right:8px;padding:2px 7px;border-radius:5px;font:600 10.5px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#1a1300;background:var(--gold)}
.beta a{color:var(--fg)}

/* ---------- v7: privacy & terms ---------- */
.legal{max-width:760px;padding-block:8px 20px}
.legal h1{font-size:clamp(28px,4.6vw,40px);margin-bottom:12px}
.legal .lede{margin-bottom:22px}
.legal section{padding-block:18px;border-top:1px solid var(--line);scroll-margin-top:16px}
.legal h2{font:700 19px/1.3 var(--f-body);margin:0 0 10px}
.legal p,.legal li{color:#c3cbdb}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.legal b{color:var(--fg)}
.toc{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 18px;font-size:14px}
.toc a{color:var(--muted)}
.toc a:hover{color:var(--cyan)}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--fg)}

/* ---------- v8: account-wide brand removal ---------- */
.account-brand{margin-bottom:18px}
.account-brand h2{font:700 20px/1.2 var(--f-body);margin:0 0 6px}
.account-brand .brandbox{margin-top:12px}
.ok.small{font-size:14.5px;margin:0}

/* ---------- v9: account page ---------- */
.acct{margin-top:16px}
.acct h2{font:700 19px/1.2 var(--f-body);margin:0 0 6px}
.acct .form{margin-bottom:0}
.danger-zone{border-color:rgba(224,69,58,.45)}
.btn.danger-btn{background:var(--red);color:#fff}
.btn.danger-btn:hover{background:#f05a4f}

/* ---------- v10: admin page ---------- */
.adm-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:16px 0}
.adm-stats .card{padding:14px}
.adm-stats b{display:block;font:600 22px/1.1 var(--f-mono);color:var(--gold);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.adm-stats span{font:400 11px/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.adm{margin-bottom:18px;scroll-margin-top:16px}
.adm h2{font:700 19px/1.2 var(--f-body);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.pill{display:inline-block;font:500 11px/1.5 var(--f-mono);letter-spacing:.06em;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted);vertical-align:middle}
.table-wrap{overflow-x:auto;margin-top:8px}
.table-wrap table{width:100%;border-collapse:collapse;font-size:14px}
.table-wrap th{text-align:left;font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.table-wrap td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap .n{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.table-wrap .msg{max-width:240px;overflow-wrap:anywhere;color:#c3cbdb}
.row-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}
.row-form input{font:400 14px var(--f-body);color:var(--fg);background:var(--void);border:1px solid var(--line);border-radius:8px;padding:7px 9px;min-width:160px}
.btn.small-btn{height:34px;padding:0 12px;font-size:13.5px}
.search-form{margin-bottom:10px}
.search-form input{min-width:240px}
.cleanup{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 6px;padding:8px 10px;border:1px dashed rgba(255,211,77,.35);border-radius:10px}
.inline-act{margin:0;display:inline}
.okc{color:#8ef0b6}
.warn{color:var(--gold)}
.del summary{cursor:pointer;color:#ff8f86;font-size:14px}
.del .row-form{margin-top:6px}

/* Starry background on every page, like the stars around the globe.
   Two tiles of different sizes so the pattern doesn't look repeated. Fixed, so the stars stay put while you scroll. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(/assets/stars-a.svg) 0 0/701px 563px repeat,url(/assets/stars-b.svg) 137px 211px/523px 617px repeat}