/* Rare Spawn AI — theme tokens + base. Industrial-blueprint bones, loot-drop palette. */
:root{
  --bg-void:#0B0F14; --bg-deep:#10161D; --bg-panel:#151C25; --bg-elev:#1C2530; --bg-line:#26313E;
  --violet:#9D7BFF; --violet-bright:#BBA5FF; --violet-dim:#5F47B8;
  --gold:#FFC84A; --gold-bright:#FFE08A; --gold-dim:#A8801F;
  --cyan:#5EE7FF; --cyan-dim:#2A8FA3;
  --green:#7CE38B; --red:#FF5C6C;
  --fg:#E9EEF4; --fg-muted:#8592A3; --fg-dim:#56637A;
  --ease:cubic-bezier(.5,0,.2,1); --overshoot:cubic-bezier(.34,1.4,.5,1);
  --fast:150ms; --mid:320ms; --slow:640ms;
  --display:'Audiowide',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'Share Tech Mono','JetBrains Mono',monospace;
  --bloom-violet:0 0 18px rgba(157,123,255,.55),0 0 40px rgba(157,123,255,.28);
  --bloom-gold:0 0 18px rgba(255,200,74,.55),0 0 40px rgba(255,200,74,.25);
  --bloom-cyan:0 0 18px rgba(94,231,255,.55),0 0 40px rgba(94,231,255,.25);
  --sidebar:25vw;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--body);font-weight:500;color:var(--fg);background:var(--bg-void);line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--cyan);text-decoration:none}
::selection{background:rgba(157,123,255,.35)}
/* ambient */
.amb-sky{position:fixed;inset:0;z-index:-3;pointer-events:none;background:
  radial-gradient(120% 80% at 50% 0%,#182029 0%,#0F151C 50%,#080B10 100%),
  linear-gradient(180deg,rgba(157,123,255,.07),transparent 40%,rgba(94,231,255,.05))}
.amb-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.10;background-image:
  linear-gradient(0deg,transparent 31px,var(--cyan) 31px,var(--cyan) 32px,transparent 32px),
  linear-gradient(90deg,transparent 31px,var(--cyan) 31px,var(--cyan) 32px,transparent 32px),
  linear-gradient(0deg,transparent 159px,var(--violet) 159px,var(--violet) 160px,transparent 160px),
  linear-gradient(90deg,transparent 159px,var(--violet) 159px,var(--violet) 160px,transparent 160px);
  background-size:32px 32px,32px 32px,160px 160px,160px 160px;
  mask-image:radial-gradient(80% 70% at 50% 30%,#000 30%,transparent 90%)}
.amb-glyphs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.amb-glyphs span{position:absolute;font-family:var(--mono);font-size:15px;opacity:.16;color:var(--cyan);animation:drift 32s linear infinite;user-select:none}
@keyframes drift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(30px,-40px,0)}100%{transform:translate3d(0,0,0)}}

/* type */
.stencil{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em}
.mono{font-family:var(--mono)}
.muted{color:var(--fg-muted)}
.dim{color:var(--fg-dim)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
h1,h2,h3{margin:0;font-weight:600}

/* panels & bevels */
.panel{background:linear-gradient(180deg,var(--bg-panel),var(--bg-deep));border:1px solid var(--bg-line);border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.35)}
.bevel{position:relative;border:1px solid var(--bg-line);background:linear-gradient(180deg,var(--bg-elev),var(--bg-panel));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -2px 0 rgba(0,0,0,.35),0 3px 0 #070A0E}
.bevel::before{content:"";position:absolute;left:0;top:0;width:10px;height:10px;border-left:2px solid var(--violet);border-top:2px solid var(--violet);opacity:.8}
.bevel::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;border-right:2px solid var(--violet);border-bottom:2px solid var(--violet);opacity:.8}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:4px;border:1px solid var(--bg-line);
  background:linear-gradient(180deg,var(--bg-elev),var(--bg-panel));color:var(--fg);font-weight:600;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 0 #070A0E;transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast)}
.btn:hover{background:linear-gradient(180deg,#232E3B,var(--bg-elev));transform:translateY(-1px)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 #070A0E}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(180deg,var(--violet-bright),var(--violet));color:#0E0A1F;border-color:var(--violet-bright);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 #3A2C73}
.btn-primary:hover{background:linear-gradient(180deg,#CCBBFF,var(--violet-bright));box-shadow:var(--bloom-violet),0 3px 0 #3A2C73}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1E1500;border-color:var(--gold-bright);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 #6E5312}
.btn-gold:hover{box-shadow:var(--bloom-gold),0 3px 0 #6E5312}
.btn-ghost{background:transparent;box-shadow:none;border-color:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.05)}
.btn-sm{padding:6px 10px;font-size:12px}
.btn .cost{font-family:var(--mono);font-size:11px;opacity:.75;letter-spacing:.06em}

/* pill */
.pill{display:inline-flex;align-items:center;gap:8px;padding:4px 6px 4px 4px;border-radius:999px;border:1px solid var(--bg-line);
  background:rgba(16,22,29,.85);backdrop-filter:blur(10px);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.pill .avatar{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--violet-bright),var(--violet-dim));display:grid;place-items:center;
  font-family:var(--display);font-size:13px;color:#0E0A1F;border:2px solid rgba(255,255,255,.15)}
.pill .credits{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.08em;padding:0 4px}
.pill .icon-btn{width:30px;height:30px;border-radius:50%;border:none;background:transparent;display:grid;place-items:center;color:var(--fg-muted)}
.pill .icon-btn:hover{color:var(--fg);background:rgba(255,255,255,.07)}

/* inputs */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted)}
textarea.input,input.input,select.input{width:100%;background:var(--bg-void);border:1px solid var(--bg-line);border-radius:4px;padding:10px 12px;color:var(--fg);outline:none;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);transition:border-color var(--fast)}
textarea.input{resize:vertical;min-height:84px;line-height:1.4}
.input:focus{border-color:var(--violet);box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 0 0 3px rgba(157,123,255,.18)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-muted) 50%),linear-gradient(135deg,var(--fg-muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--bg-line);color:var(--fg-muted);background:rgba(255,255,255,.02)}
.chip.ok{color:var(--green);border-color:rgba(124,227,139,.4)}
.chip.run{color:var(--cyan);border-color:rgba(94,231,255,.4)}
.chip.err{color:var(--red);border-color:rgba(255,92,108,.4)}
.chip.gold{color:var(--gold);border-color:rgba(255,200,74,.4)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.run .dot{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* misc */
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--bg-line) 20%,var(--bg-line) 80%,transparent);margin:10px 0}
.skeleton{background:linear-gradient(90deg,var(--bg-panel) 0%,var(--bg-elev) 50%,var(--bg-panel) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;padding:10px 16px;border-radius:6px;background:var(--bg-elev);border:1px solid var(--bg-line);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;z-index:50;transition:all var(--mid) var(--overshoot);pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--red);color:var(--red)}
.toast.ok{border-color:var(--green);color:var(--green)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--bg-line);border-radius:4px}::-webkit-scrollbar-track{background:transparent}

/* logo */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.logo svg{width:26px;height:26px;filter:drop-shadow(0 0 8px rgba(157,123,255,.6))}
.logo .word{font-family:var(--display);font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.logo .word b{color:var(--violet-bright);font-weight:400}
.logo .ai{font-family:var(--mono);font-size:10px;color:var(--gold);border:1px solid var(--gold-dim);padding:1px 5px;border-radius:3px;letter-spacing:.2em}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(5,8,12,.7);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:40;opacity:0;pointer-events:none;transition:opacity var(--mid)}
.modal-bg.open{opacity:1;pointer-events:auto}
.modal{width:min(440px,92vw);padding:26px;transform:translateY(12px) scale(.98);transition:transform var(--mid) var(--overshoot)}
.modal-bg.open .modal{transform:none}