/* ============ GMB//TRACKER — NEON theme (black / white / neon green) ============ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#050605;
  --bg2:#0A0C0A;
  --panel:rgba(10,13,10,.88);
  --panel2:rgba(14,18,14,.92);
  --line:#1B241C;
  --line-hi:#2A3D2C;
  --acc:#3DFF6E;
  --acc-dim:#1C7A3B;
  --amber:#FFC24B;
  --red:#FF4D4D;
  --green:#3DFF6E;
  --txt:#F2F5F2;
  --mut:#7E8C81;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --glow:0 0 14px rgba(61,255,110,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{
  font-family:var(--sans);color:var(--txt);min-height:100vh;background:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 70% -10%, rgba(61,255,110,.06), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(255,255,255,.03), transparent 60%),
    linear-gradient(rgba(61,255,110,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,255,110,.04) 1px, transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
}
button{font-family:inherit;cursor:pointer}
a{color:var(--acc);text-decoration:none}
input,select,textarea{
  font-family:var(--mono);font-size:.88rem;padding:.55rem .65rem;width:100%;
  background:#0B0F0B;border:1px solid var(--line);border-radius:6px;color:var(--txt);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 1px var(--acc), var(--glow)}
input::placeholder,textarea::placeholder{color:#4A5A4D}
label{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--mut);display:block;margin-bottom:.3rem}
::selection{background:rgba(61,255,110,.3)}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding:.7rem 1.4rem;background:rgba(5,6,5,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.logo{font-weight:700;font-size:1.15rem;letter-spacing:.06em;white-space:nowrap;color:#fff}
.logo .sl{color:var(--acc);text-shadow:var(--glow)}
.logo small{display:block;font-family:var(--mono);font-weight:400;font-size:.56rem;letter-spacing:.3em;color:var(--mut);text-transform:uppercase}
.nav{display:flex;gap:.15rem;flex-wrap:wrap}
.nav a{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);padding:.5rem .8rem;border:1px solid transparent;border-radius:6px;
}
.nav a:hover{color:#fff;border-color:var(--line)}
.nav a.on{color:var(--acc);border-color:var(--acc-dim);background:rgba(61,255,110,.08);text-shadow:var(--glow)}
.readouts{display:flex;gap:1.1rem;margin-left:auto;flex-wrap:wrap}
.readout{text-align:right}
.readout .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.readout .v{font-family:var(--mono);font-size:1.05rem;font-weight:700;color:var(--acc);text-shadow:var(--glow)}
.readout.white .v{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.35)}
.readout.warn .v{color:var(--red);text-shadow:0 0 12px rgba(255,77,77,.5)}

/* ---------- layout ---------- */
main{max-width:1220px;margin:0 auto;padding:1.5rem 1.4rem 3rem}
.pagehead{display:flex;align-items:baseline;gap:1rem;margin:.4rem 0 1.3rem;flex-wrap:wrap}
.pagehead h1{font-size:1.45rem;font-weight:700;letter-spacing:.02em;color:#fff}
.pagehead .path{font-family:var(--mono);font-size:.68rem;color:var(--mut);letter-spacing:.14em;text-transform:uppercase}
.pagehead .path b{color:var(--acc)}
.grid{display:grid;gap:1rem}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g2-1{grid-template-columns:2fr 1fr}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2,.g2-1{grid-template-columns:1fr}}
@media(max-width:520px){.g4{grid-template-columns:1fr 1fr}}

/* ---------- panels ---------- */
.panel{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:4px;padding:1.05rem;backdrop-filter:blur(6px);
}
.panel::before,.panel::after{content:'';position:absolute;width:14px;height:14px;pointer-events:none}
.panel::before{top:-1px;left:-1px;border-top:2px solid var(--acc);border-left:2px solid var(--acc)}
.panel::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--acc);border-right:2px solid var(--acc)}
.panel.quiet::before,.panel.quiet::after{display:none}
.panel h3{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem;
}
.panel h3::before{content:'▸';color:var(--acc)}

/* ---------- stats ---------- */
.stat .n{font-family:var(--mono);font-size:2rem;font-weight:700;color:#fff}
.stat .n.glow{color:var(--acc);text-shadow:var(--glow)}
.stat .sub{font-family:var(--mono);font-size:.66rem;color:var(--mut);margin-top:.2rem;letter-spacing:.06em}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:740px}
th{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);
  text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line-hi);background:rgba(9,12,9,.95);
  position:sticky;top:0;
}
td{padding:.55rem .8rem;border-bottom:1px solid rgba(27,36,28,.6);font-family:var(--mono);font-size:.8rem}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(61,255,110,.05)}
td.num,th.num{text-align:right}
td .town{font-family:var(--sans);font-size:.9rem;font-weight:600;color:#fff}
tfoot td{border-top:1px solid var(--line-hi);color:var(--acc);font-weight:700}

/* status + brand chips */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.45rem;vertical-align:1px}
.st-live .dot{background:var(--acc);box-shadow:0 0 8px var(--acc)}
.st-pending .dot{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.st-suspended .dot{background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 1.6s infinite}
.st-reinstating .dot{background:#fff;box-shadow:0 0 8px #fff}
@keyframes pulse{50%{opacity:.35}}
.chip{
  display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  padding:.14rem .5rem;border-radius:3px;border:1px solid var(--line-hi);color:var(--mut);white-space:nowrap;
}
.chip.b-HP{color:var(--acc);border-color:#1C7A3B;background:rgba(61,255,110,.08)}
.chip.b-EP{color:#fff;border-color:#4A5A4D;background:rgba(255,255,255,.06)}
.chip.b-PDR{color:var(--amber);border-color:#7A5A14;background:rgba(255,194,75,.08)}
.chip.paid{color:var(--acc);border-color:#1C7A3B;background:rgba(61,255,110,.08)}
.chip.pending{color:var(--amber);border-color:#7A5A14;background:rgba(255,194,75,.08)}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(61,255,110,.12);color:var(--acc);border:1px solid var(--acc-dim);
  border-radius:4px;padding:.55rem 1rem;transition:all .15s;
}
.btn:hover{background:rgba(61,255,110,.22);box-shadow:var(--glow)}
.btn.ghost{background:transparent;color:var(--mut);border-color:var(--line-hi)}
.btn.ghost:hover{color:#fff;border-color:var(--mut);box-shadow:none}
.btn.warn{background:rgba(255,77,77,.12);color:var(--red);border-color:#7A2626}
.btn.warn:hover{background:rgba(255,77,77,.22);box-shadow:0 0 12px rgba(255,77,77,.4)}
.btn.sm{padding:.28rem .55rem;font-size:.64rem}
.btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- misc ---------- */
.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:end}
.row>div{flex:1;min-width:135px}
.muted{color:var(--mut);font-size:.82rem}
.mono{font-family:var(--mono)}
.mb{margin-bottom:1rem}.mt{margin-top:1rem}
.notice{
  font-size:.82rem;padding:.75rem .95rem;margin-bottom:1.1rem;border-radius:0 4px 4px 0;
  border-left:2px solid var(--amber);background:rgba(255,194,75,.06);color:#E8D5A8;
}
.notice.blue{border-color:var(--acc);background:rgba(61,255,110,.05);color:#BFE8CB}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.filters>*{max-width:200px}
.empty{text-align:center;padding:2.4rem 1rem;color:var(--mut);font-family:var(--mono);font-size:.8rem;letter-spacing:.08em}

/* bars chart */
.bars{display:flex;align-items:flex-end;gap:7px;height:120px;padding-top:1.1rem}
.bar{flex:1;background:linear-gradient(180deg,var(--acc),var(--acc-dim));border-radius:2px 2px 0 0;min-height:2px;position:relative;box-shadow:0 0 10px rgba(61,255,110,.25)}
.bar.white{background:linear-gradient(180deg,#FFFFFF,#5E6B60);box-shadow:0 0 10px rgba(255,255,255,.2)}
.bar .t{position:absolute;top:-1.1rem;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.6rem;color:var(--txt)}
.bar .w{position:absolute;bottom:-1.25rem;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.56rem;color:var(--mut);white-space:nowrap}
.chartpad{height:1.4rem}

/* horizontal city revenue bars */
.hbar{margin-bottom:.55rem}
.hbar .hl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;margin-bottom:.2rem}
.hbar .hl .amt{color:var(--acc)}
.hbar .track{height:7px;background:#101510;border-radius:3px;overflow:hidden}
.hbar .fill{height:100%;background:linear-gradient(90deg,var(--acc-dim),var(--acc));box-shadow:0 0 8px rgba(61,255,110,.4);border-radius:3px}

/* feed */
.feed{list-style:none}
.feed li{display:flex;gap:.7rem;padding:.5rem 0;border-bottom:1px solid rgba(27,36,28,.55);font-size:.82rem;flex-wrap:wrap;font-family:var(--mono)}
.feed li:last-child{border-bottom:none}
.feed .when{color:var(--mut);font-size:.68rem;min-width:78px;padding-top:.1rem}

/* rings */
.ringrow{display:flex;gap:1.4rem;justify-content:space-around;flex-wrap:wrap}
.ring{text-align:center}
.ring svg{transform:rotate(-90deg)}
.ring .rl{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:.3rem}

/* dialog */
dialog{border:1px solid var(--line-hi);border-radius:4px;padding:0;max-width:580px;width:92vw;background:var(--bg2);color:var(--txt);box-shadow:0 0 60px rgba(61,255,110,.14)}
dialog::backdrop{background:rgba(2,4,2,.8);backdrop-filter:blur(3px)}
.dlg-h{padding:.8rem 1.1rem;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.dlg-b{padding:1.1rem}

/* vault */
.vault-entry{border:1px solid var(--line);border-radius:4px;padding:.85rem;margin-bottom:.7rem;background:var(--panel2)}
.vault-entry .secret{font-family:var(--mono);background:#020402;color:var(--acc);padding:.25rem .55rem;border-radius:3px;user-select:all;word-break:break-all;border:1px solid var(--line)}

/* toast */
.toast{
  position:fixed;bottom:1.3rem;left:50%;transform:translateX(-50%);z-index:99;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;
  background:var(--bg2);color:var(--acc);border:1px solid var(--acc-dim);
  padding:.6rem 1.2rem;border-radius:4px;opacity:0;transition:opacity .25s;pointer-events:none;
  box-shadow:var(--glow);
}
.toast.show{opacity:1}

footer{text-align:center;padding:1.4rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:#3A473D}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- hero greeting ---------- */
.hero{
  position:relative;padding:1.6rem 1.4rem;border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(120deg, rgba(61,255,110,.09), rgba(5,6,5,.6) 55%);
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(61,255,110,.08), transparent);
  animation:sweep 5s linear infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.hgreet{
  font-size:1.7rem;font-weight:700;color:#fff;letter-spacing:.01em;
  text-shadow:0 0 18px rgba(61,255,110,.35);
}
.hsub{font-family:var(--mono);font-size:.85rem;color:var(--mut);margin-top:.45rem;letter-spacing:.04em}
.hsub b{color:var(--acc);text-shadow:var(--glow);font-size:1rem}
@media(max-width:600px){.hgreet{font-size:1.25rem}}