/* ============================================================
   Studio theme — Higgsfield design language
   Tokens read live off higgsfield.ai (July 2026):
     bg #0f1113 · text #f7f7f8 · muted #898a8b · nav #a8a8a8
     card #1c1e20, radius 16px, border rgba(255,255,255,.05)
     accent lime #d1fe17 · on-accent #131517 · pressed edge #829b19
     badges rgba(209,254,23,.2) lime text · headings Space Grotesk 700 UPPER
   Loaded AFTER each page's inline styles, so equal selectors win here.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --hg-bg:#0f1113;
  --hg-card:#1c1e20;
  --hg-card-2:#16181a;
  --hg-line:rgba(255,255,255,.05);
  --hg-line-2:rgba(255,255,255,.09);
  --hg-ink:#f7f7f8;
  --hg-ink-soft:#a8a8a8;
  --hg-muted:#898a8b;
  --hg-lime:#d1fe17;
  --hg-lime-soft:rgba(209,254,23,.2);
  --hg-on-lime:#131517;
  --hg-lime-edge:#829b19;
  --hg-pink:#f0126e;
  --hg-red:#ff5a5a;
  --hg-head:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --hg-body:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
}

html, body{ background:var(--hg-bg) !important; }

.st-page{ color:var(--hg-ink); font-family:var(--hg-body); }
.st-page h1, .st-page h2, .st-page h3{
  font-family:var(--hg-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.3px; color:#fff; }
.st-page h1{ font-size:24px }
.st-page .muted, .st-page .sub{ color:var(--hg-muted); }
.st-page b{ color:#fff }

/* ---------- panels & consoles: 16px cards on near-black ---------- */
.st-page .panel.glass, .st-console{
  background:var(--hg-card-2); border:1px solid var(--hg-line);
  border-radius:16px; box-shadow:none; color:var(--hg-ink); }
.st-dock{ background:var(--hg-card); border:1px solid var(--hg-line); border-radius:12px }

/* ---------- the header bar (see templates/_studio_bar.html) ----------
   Everything the bar needs is here, in the file every Studio page loads.
   These rules carried no display/padding/size for a long time; the bar only
   looked right on Step 1, whose template happened to add them locally, and
   Step 3 rendered as a bare row of links. Keep the bar complete here. */
.st-bar{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap }
.st-tabsw{ display:inline-flex; gap:4px; background:var(--hg-card);
  border:1px solid var(--hg-line); border-radius:12px; padding:4px }
.st-tabsw a{ padding:8px 20px; font-size:13.5px; text-decoration:none;
  color:var(--hg-ink-soft); font-family:var(--hg-head); font-weight:600;
  border-radius:8px; transition:color .15s,background .15s; white-space:nowrap }
.st-tabsw a:hover{ color:#fff; text-decoration:none }
.st-tabsw a.on{ background:var(--hg-lime); color:var(--hg-on-lime) }
.st-scrub-link{ font-size:12px; color:var(--hg-ink-soft); text-decoration:none }
.st-scrub-link:hover{ color:#cfd6e4 }

/* ---------- badges: Higgsfield "New"-style translucent lime pills ---------- */
.st-badge{ font-size:12px; padding:5px 12px; white-space:nowrap;
  font-family:var(--hg-head); font-weight:700; border-radius:8px }
.st-badge-ok{ background:var(--hg-lime-soft); color:var(--hg-lime); border:1px solid rgba(209,254,23,.35) }
.st-badge-warn{ background:rgba(240,18,110,.14); color:#ff7ab1; border:1px solid rgba(240,18,110,.4) }

/* ---------- the CTA: lime, dark text, pressed 3D bottom edge ---------- */
.st-generate{
  background:var(--hg-lime); color:var(--hg-on-lime);
  font-family:var(--hg-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; border-radius:10px; border:0;
  box-shadow:inset 0 -2.4px 0 0 var(--hg-lime-edge);
  transition:filter .12s, transform .06s }
.st-generate:hover{ filter:brightness(1.07) }
.st-generate:active{ transform:translateY(1px); box-shadow:inset 0 -1px 0 0 var(--hg-lime-edge) }
.st-generate:disabled{ opacity:.4 }

/* ---------- secondary buttons: white @5%, 10px radius ---------- */
.st-page .btn{
  background:rgba(255,255,255,.05); color:var(--hg-ink);
  border:1px solid var(--hg-line-2); border-radius:10px; font-weight:500;
  transition:background .15s }
.st-page .btn:hover{ background:rgba(255,255,255,.1) }
.st-page .btn.ghost{ background:rgba(255,255,255,.05); border-color:var(--hg-line-2) }

/* ---------- inputs ---------- */
.st-page textarea, .st-page select, .st-page input[type=text],
.hf-prompt, .st-dock-sel, .st-adv textarea,
.pp-left textarea, .pp-left select, .pp-list input[type=text],
.pp-prev-pick{
  background:var(--hg-card) !important; color:var(--hg-ink) !important;
  border:1px solid var(--hg-line-2) !important; border-radius:10px !important; }
.st-page textarea:focus, .st-page select:focus, .st-page input[type=text]:focus,
.hf-prompt:focus, .pp-left textarea:focus{
  border-color:var(--hg-lime) !important; outline:none;
  box-shadow:0 0 0 2px rgba(209,254,23,.15) }
.st-page input[type=range], .st-page input[type=checkbox]{ accent-color:var(--hg-lime) }
.st-page input[type=color]{ background:var(--hg-card); border:1px solid var(--hg-line-2); border-radius:8px }
.st-dock-l, .pp-f>span{ color:var(--hg-muted); font-family:var(--hg-head); letter-spacing:.8px }
.pp-f>span b{ color:var(--hg-lime) }
.st-l{ color:var(--hg-muted); font-family:var(--hg-head) }

/* ---------- tiles & drop zones ---------- */
.hf-tile, .pp-tile{ background:var(--hg-card); border:1px solid var(--hg-line); border-radius:16px }
.hf-tile .m, .pp-tile .m{ background:#0b0d0e }
.pp-tile .b a, .hf-tile .b a{ color:var(--hg-lime); text-decoration:none }
.pp-drop, .st-drop{ border:1.5px dashed var(--hg-line-2); border-radius:16px; background:transparent }
.pp-drop:hover, .pp-drop.drag, .st-drop:hover, .st-drop.drag{
  border-color:var(--hg-lime); background:rgba(209,254,23,.05) }
.pp-item{ background:var(--hg-card); border-radius:10px }
.pp-prev-box{ background:#0b0d0e; border:1px solid var(--hg-line); border-radius:16px }
.pp-empty{ color:var(--hg-muted) }

/* ---------- job states ---------- */
.st-jobstate{ font-family:var(--hg-head); font-weight:700; border-radius:8px;
  background:rgba(255,255,255,.08); color:var(--hg-ink-soft) }
.st-jobstate.st-done{ background:var(--hg-lime-soft); color:var(--hg-lime) }
.st-jobstate.st-to-be-reviewed{ background:rgba(52,211,153,.16); color:#34d399;
  box-shadow:inset 0 0 0 1px rgba(52,211,153,.45) }
.st-jobstate.st-running{ background:rgba(255,255,255,.08); color:#fff }
.st-jobstate.st-failed, .st-jobstate.st-partial{ background:rgba(240,18,110,.15); color:#ff7ab1 }
.st-spin{ border:2.5px solid rgba(255,255,255,.12); border-top-color:var(--hg-lime) }
.st-fail{ color:#ff7ab1 }
.st-hist-row{ background:var(--hg-card); border:1px solid var(--hg-line); border-radius:12px }

/* ---------- links & scrollbars ---------- */
.st-page a{ color:inherit }
.st-page ::-webkit-scrollbar{ width:10px; height:10px }
.st-page ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:99px }
.st-page ::-webkit-scrollbar-track{ background:transparent }

/* ===== Motion: page + workflow transitions (2026-07) ===================== */
@media (prefers-reduced-motion: no-preference){
  .st-page{ animation:stPageIn .34s cubic-bezier(.2,.8,.25,1) both }
  .st-page.st-leaving, .appmain.st-leaving, .cht-page.st-leaving{
    animation:stPageOut .17s ease-in forwards }
  .pp-alloc-ok{ animation:stPopIn .38s cubic-bezier(.2,1.5,.4,1) both }
  .pp-tile, .st-tile{ animation:stTileIn .3s cubic-bezier(.2,.8,.25,1) both }
}
@keyframes stPageIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes stPageOut{ to{ opacity:0; transform:translateY(-10px) } }
@keyframes stPopIn{ from{ opacity:0; transform:scale(.55) } to{ opacity:1; transform:scale(1) } }
@keyframes stTileIn{ from{ opacity:0; transform:translateY(8px) scale(.97) } to{ opacity:1; transform:none } }
.st-fly{ position:fixed; z-index:9999; margin:0; pointer-events:none; overflow:hidden;
  border-radius:12px; box-shadow:0 14px 44px rgba(0,0,0,.55); opacity:.96;
  transition:all .6s cubic-bezier(.5,-0.05,.25,1) }
.st-pulse{ animation:stPulse .55s ease }
@keyframes stPulse{ 0%{ transform:scale(1) } 35%{ transform:scale(1.1);
  box-shadow:0 0 0 12px rgba(209,254,23,.18) } 100%{ transform:scale(1) } }

/* The hidden attribute must ALWAYS win - author display rules (flex/grid) on
   the same element silently override it and leave "hidden" overlays covering
   the page (the carousel lightbox bug, 2026-07). */
[hidden]{ display:none !important; }