/* ============================================================
   HIGGSFIELD THEME — visual override layer only.
   Loaded after base styles; changes design tokens + component
   colours/typography. Zero functional changes.
   Palette: near-black surfaces, acid-lime accent (#d7f61e) with
   BLACK text on accent, white headings in expanded uppercase.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root, html.dark{
  --ink:#f2f4f7;
  --ink-soft:#9aa1ac;
  --ink-faint:#6d7480;
  --line:rgba(255,255,255,.08);
  --glass-bg:linear-gradient(160deg, rgba(21,22,25,.96), rgba(14,15,17,.94));
  --rim:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 40%, rgba(255,255,255,.06));
  --blue:#d7f61e; --green:#d7f61e; --amber:#ffb020; --red:#ff375f; --purple:#c087ff;
  --accent:#d7f61e; --accent-press:#b8d90b; --accent-soft:rgba(215,246,30,.14);
  --accent-ink:#d7f61e;
  --shadow:0 18px 50px -22px rgba(0,0,0,.85);
  --radius:18px;
  --page-bg:#0a0b0c;
  --illum-dim:#4a4f58;
  --card:#141518; --muted:var(--ink-faint); --bg:#0a0b0c;
}
/* the sun/moon toggle still works: "light" is a softer graphite variant */
html:not(.dark){
  --page-bg:#101114; --bg:#101114; --card:#191b1f;
  --glass-bg:linear-gradient(160deg, rgba(28,30,34,.97), rgba(20,21,24,.95));
}

html, body{ background:var(--page-bg) !important; }
body::before, body::after{ opacity:.10 !important; }

/* ---------------- typography ---------------- */
body{
  font-family:"Space Grotesk","Archivo","Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  color:var(--ink);
}
h1, h2, .side-brand, .brand, .circle-label, .console-head .brand{
  font-family:"Archivo","Space Grotesk",sans-serif !important;
  font-stretch:115%;
  font-weight:850 !important;
  text-transform:uppercase;
  letter-spacing:.015em;
}
h1{ letter-spacing:.02em; }
h3{ font-family:"Archivo",sans-serif; font-weight:800; }

/* inputs / selects / textareas — dark fields everywhere */
input, select, textarea{
  background:rgba(255,255,255,.055) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
  color-scheme:dark;
}
input::placeholder, textarea::placeholder{ color:var(--ink-faint); }
input:focus, select:focus, textarea:focus{ border-color:var(--accent) !important; outline:none; }

/* ---------------- buttons: lime with BLACK text ---------------- */
.btn, .topbtn.signout, .invg-send, .invg-bank, .sop-gate-btn,
.st-generate, .sopg-check, .push-bell.on, .btab.on, .cht-nav a.on,
.st-tabsw a.on, .sop-start-btn{
  background:var(--accent) !important;
  background-image:none !important;
  color:#101203 !important;
  border:none;
  box-shadow:0 8px 22px -10px rgba(215,246,30,.45) !important;
  font-weight:800;
}
.btn:hover, .invg-send:hover, .st-generate:hover{ filter:brightness(1.06); }
.btn.ghost, html.dark .btn.ghost{
  background:rgba(255,255,255,.07) !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
}
.btn.danger{
  background:var(--red) !important;
  color:#fff !important;
  box-shadow:0 8px 22px -10px rgba(255,55,95,.45) !important;
}
.btn.sm{ font-weight:800; }
.topbtn.brk{ color:#241a00 !important; }
.st-vrev-keep{ background:var(--accent) !important; color:#101203 !important;
  box-shadow:0 10px 26px -10px rgba(215,246,30,.6) !important; }
.invg-check{ background:var(--accent) !important; color:#101203 !important;
  box-shadow:0 14px 30px -10px rgba(215,246,30,.55) !important; }

/* icon chips that sit on accent backgrounds -> dark strokes */
.side-tab.active .side-ic{ background:var(--accent) !important; color:#101203 !important; }
.circle-ic{ background:var(--accent) !important; }
.circle-ic svg{ stroke:#101203 !important; }
.invg-drop-ic{ color:var(--accent); }

/* ---------------- surfaces ---------------- */
.glass, .panel.glass, .editor-pop, .led-edit-pop, .invg-card{
  background:var(--glass-bg) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important;
  color:var(--ink);
}
.circle{ box-shadow:0 24px 55px -28px rgba(0,0,0,.9) !important; }
.circle:hover{ box-shadow:0 26px 60px -20px rgba(215,246,30,.28) !important; }
.bstat{ border-radius:16px !important; }
.bank-toast{ background:#17181b !important; }

/* pills & status chips — Higgsfield style: lime or outlined */
.pill{ font-weight:800; letter-spacing:.03em; }
.pill.live{ background:var(--accent-soft) !important; color:var(--accent) !important; }
.pill.admin{ background:rgba(192,135,255,.16) !important; color:#c087ff !important; }
.pill.manager{ background:rgba(120,170,255,.15) !important; color:#7aa9ff !important; }
.pill.va{ background:rgba(255,255,255,.09) !important; color:var(--ink-soft) !important; }
.pill.banned, .pill.down{ background:rgba(255,55,95,.15) !important; color:#ff5d7d !important; }
.pill.off{ background:rgba(255,255,255,.08) !important; color:var(--ink-soft) !important; }
.fbp-tag{ background:var(--accent-soft) !important; color:var(--accent) !important;
  border-color:rgba(215,246,30,.35) !important; }
.fbp-toggle{ background:rgba(255,255,255,.05) !important; color:var(--ink-soft) !important; }
.fbp-toggle.open{ color:var(--accent) !important; border-color:rgba(215,246,30,.5) !important; }
.cht-chip.whale{ background:rgba(192,135,255,.16) !important; color:#c087ff !important; }
.cht-chip.high{ background:var(--accent-soft) !important; color:var(--accent) !important; }
.sub-chip.on{ background:var(--accent-soft) !important; color:var(--accent) !important; }
.ivp-chip.ok, .cw-chip.ok, .cw-badge.ok{ background:var(--accent-soft) !important; color:var(--accent) !important; }
.ivp-chip.new{ background:rgba(120,170,255,.15) !important; color:#7aa9ff !important; }

/* flashes */
.flash.ok{ background:var(--accent-soft) !important; color:var(--accent) !important;
  border:1px solid rgba(215,246,30,.3) !important; }
.flash.error{ background:rgba(255,55,95,.12) !important; color:#ff5d7d !important;
  border:1px solid rgba(255,55,95,.35) !important; }

/* sidebar + nav */
.side .glass{ background:#0f1012 !important; }
.side-sub{ color:var(--ink-faint) !important; }
.side-tab:hover{ background:rgba(255,255,255,.05); border-radius:12px; }
.cht-nav, .btabs, .st-tabsw{ background:#121316 !important; border-color:var(--line) !important; }

/* tables */
th{ color:var(--ink-faint) !important; text-transform:uppercase; letter-spacing:.06em; }
td{ border-color:var(--line) !important; }
tr:hover td{ background:rgba(255,255,255,.025); }

/* dark-native studio pages: swap their blue accent for lime */
.st-tabsw a.on{ background:var(--accent) !important; color:#101203 !important; }
.hf-prompt:focus{ border-color:var(--accent) !important; }
.st-dock-sel:focus{ border-color:var(--accent); }
#stVRevNext:hover, #stVRevPrev:hover{ border-color:rgba(215,246,30,.4); }

/* gate / alert bars keep their semantics but sit darker */
.sop-gatebar{ background:#3d2f00 !important; color:#ffd66e !important; }
.sop-gatebar a{ color:#ffd66e !important; }
.hf-tokenbar{ background:#4a1020 !important; color:#ff9bb0 !important; }
.cns-alert{ background:rgba(255,55,95,.07) !important; }
.cns-alert.ok{ background:rgba(215,246,30,.05) !important; }
.cns-alert.ok .cns-alert-h{ color:var(--accent) !important; }

/* progress bars -> lime */
.scbar>span, .sopg-prog>span, .invg-bar span, .bstat .fill,
.sop-check-bar .scbar>span{
  background:linear-gradient(90deg, var(--accent), #eaff5e) !important;
}

/* accent-coloured text helpers */
.bstat-n.in, .sub-card.hi b, .rep-hist [style*="accent-ink"]{ color:var(--accent) !important; }

/* keep the guided-SOP / reviewer overlays pitch black */
.sopg{ background:#0a0b0c !important; }
#stVRev{ background:rgba(6,7,8,.97) !important; }

/* scrollbars */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#26282c; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:#33363b; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---- SOP body: pasted content carries baked-in dark colours + the heading
   scroll-illuminate gradient, both invisible on the dark theme. Force every
   text node inside .sop-body (and the VA guided card) to readable light,
   neutralise gradient/transparent fills, and re-colour links to the accent. */
.sop-body, .sop-body *, .va-sop-body, .va-sop-body *,
.sopg-text, .sopg-text *{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background-image:none !important;
}
.sop-body [style*="background"], .sop-body font[color]{
  background-color:transparent !important;
}
.sop-body a, .sop-body a *{
  color:var(--accent) !important;
  -webkit-text-fill-color:var(--accent) !important;
}
.sop-body code, .sop-body pre{ background:rgba(255,255,255,.06) !important; }
.sop-body blockquote{ border-left-color:var(--accent) !important; }
/* the illuminate rule dims .appmain headings by default (JS fills on scroll);
   on the reskin just keep them bright so nothing renders near-invisible. */
.appmain h1, .appmain h2{
  background-image:none !important; color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}