/* AgentSwarm shared design system — tokens + primitives used by every page.
 * Brand: "a terminal in space" — deep night sky, aurora glow, glass panels,
 * one confident violet→cyan gradient. Mobile-first; every interactive target
 * ≥44px; focus-visible rings; reduced-motion honored throughout. */

:root{
  --bg:#070a12; --panel:#111624; --panel2:#0c1120; --ink:#eef1f7; --muted:#939cb0;
  --line:#232c40; --line2:#2e3a55;
  --accent:#7c6cff; --accent2:#22d3ee; --blue:#4f9cf6;
  --ok:#34d399; --err:#f87171; --warn:#fbbf24; --free:#22d3ee; --paid:#b1a2ff;
  --grad:linear-gradient(135deg,var(--accent),var(--blue) 55%,var(--accent2));
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-s:10px; --r-m:14px; --r-l:20px; --r-pill:999px;
  --shadow-1:0 2px 10px rgb(0 0 0 / .25);
  --shadow-2:0 12px 40px rgb(0 0 0 / .35);
  --glow-accent:0 8px 30px color-mix(in srgb,var(--accent) 32%,transparent);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{ --bg:#f3f5fb; --panel:#ffffff; --panel2:#eaeef7; --ink:#131a28; --muted:#5a6478;
         --line:#d9e0ee; --line2:#c4cee2; --shadow-1:0 2px 10px rgb(23 32 60 / .07);
         --shadow-2:0 12px 40px rgb(23 32 60 / .10); color-scheme:light; }
}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);
     font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;
     overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}

/* ---------- the sky: aurora glows + dot grid ---------- */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 420px at 12% -6%, color-mix(in srgb,var(--accent) 15%,transparent), transparent 70%),
    radial-gradient(720px 520px at 96% 20%, color-mix(in srgb,var(--accent2) 9%,transparent), transparent 70%),
    radial-gradient(540px 420px at 50% 110%, color-mix(in srgb,var(--blue) 8%,transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--line) 60%,transparent) 1px, transparent 0);
  background-size:auto,auto,auto,26px 26px}

/* ---------- icons (inline sprite, stroke follows text color) ---------- */
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.22em;
    stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.fill{fill:currentColor;stroke:none}
.ic.lg{width:1.5em;height:1.5em}

/* gradient icon badge — the "rich visual" anchor of every card */
.badge{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;border-radius:13px;color:#fff;background:var(--grad);
  box-shadow:var(--glow-accent)}
.badge .ic{width:22px;height:22px;vertical-align:0}
.badge.soft{background:color-mix(in srgb,var(--accent) 14%,var(--panel2));
  color:var(--accent2);box-shadow:none;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.badge.ok{background:linear-gradient(135deg,#0ea371,var(--ok))}
.badge.warn{background:linear-gradient(135deg,#b45309,var(--warn))}

/* ---------- glass cards ---------- */
.card{background:color-mix(in srgb,var(--panel) 88%,transparent);
  border:1px solid var(--line);border-radius:var(--r-l);padding:18px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow-2)}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.card-head h2{font-size:16.5px;letter-spacing:-.2px}
.card-head .sub{margin-top:1px}
.sub{color:var(--muted);font-size:13px}

/* ---------- buttons ---------- */
button,.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:48px;padding:13px 20px;border:0;border-radius:var(--r-m);
  background:var(--grad);background-size:150% 150%;color:#fff;
  font:700 15px/1.2 system-ui,-apple-system,sans-serif;text-decoration:none;text-align:center;
  cursor:pointer;box-shadow:var(--glow-accent);
  transition:transform .16s var(--ease-spring),box-shadow .2s,background-position .3s}
button:hover:not(:disabled),.btn:hover{transform:translateY(-1.5px);background-position:100% 0;
  box-shadow:0 10px 34px color-mix(in srgb,var(--accent) 42%,transparent)}
button:active:not(:disabled),.btn:active{transform:translateY(0) scale(.985)}
button:disabled{opacity:.45;cursor:default;transform:none}
button.ghost,.btn.ghost{background:color-mix(in srgb,var(--panel) 70%,transparent);
  border:1px solid var(--line2);color:var(--ink);box-shadow:none}
button.ghost:hover:not(:disabled),.btn.ghost:hover{border-color:color-mix(in srgb,var(--accent2) 55%,var(--line2));
  box-shadow:0 6px 20px rgb(0 0 0 / .18)}
:is(button,.btn,a,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--accent2);outline-offset:2px;border-radius:var(--r-s)}

/* ---------- inputs ---------- */
input,textarea,select{width:100%;padding:12px 13px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--panel2);color:var(--ink);font-size:15px;
  transition:border-color .15s,box-shadow .15s}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:color-mix(in srgb,var(--accent2) 60%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 18%,transparent)}
::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}

/* ---------- messages / status text ---------- */
.msg{font:12.5px var(--mono);margin-top:8px;white-space:pre-wrap;word-break:break-word;min-height:1em}
.ok{color:var(--ok)}.err{color:var(--err)}.warn{color:var(--warn)}
.msg.ok:not(:empty),.msg.err:not(:empty),.msg.warn:not(:empty){
  border-left:3px solid currentColor;padding:7px 10px;margin-top:10px;border-radius:0 8px 8px 0;
  background:color-mix(in srgb,currentColor 7%,transparent)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;font:600 10.5px var(--mono);
  padding:3px 9px;border-radius:var(--r-pill)}
.chip.trivial,.chip.simple{background:color-mix(in srgb,var(--free) 16%,transparent);color:var(--free)}
.chip.medium,.chip.hard{background:color-mix(in srgb,var(--paid) 18%,transparent);color:var(--paid)}
.chip.state{background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.chip.splitrec{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}

/* ---------- spinner + progress ---------- */
.spin{width:16px;height:16px;flex:none;display:inline-block;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--accent2);animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.busy{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--muted);font-size:13px}
.busy span{background:linear-gradient(90deg,var(--muted) 40%,var(--ink) 50%,var(--muted) 60%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  animation:shimmer 1.6s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- entrance reveal (subtle, once) ---------- */
.reveal{animation:rise .5s var(--ease-spring) both}
.reveal.d1{animation-delay:.06s}.reveal.d2{animation-delay:.12s}.reveal.d3{animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

details summary{cursor:pointer;color:var(--muted);font-size:12.5px;min-height:44px;
  display:flex;align-items:center;gap:8px;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"";width:7px;height:7px;flex:none;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .2s}
details[open] summary::before{transform:rotate(45deg)}

.hidden{display:none !important}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .spin{animation-duration:1.6s !important;animation-iteration-count:infinite !important}
}