/* Agent Lab — shared tokens and primitives (Apple-style dark, Inter) */
@font-face { font-family: 'Inter'; src: url(/assets/inter.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --cp-bg: #000; --cp-surface: #1c1c1e; --cp-surface-soft: #2c2c2e; --cp-text: #fff; --cp-text-soft: rgba(235,235,245,.78); --cp-text-muted: rgba(235,235,245,.6);
  --cp-accent: #0a84ff; --cp-link: #409cff; --cp-success: #30d158; --cp-danger: #ff453a;
  --blue: #0a84ff; --green: #30d158; --orange: #ff9f0a; --red: #ff453a; --yellow: #ffd60a; --purple: #bf5af2; --pink: #ff375f; --teal: #64d2ff; --indigo: #5e5ce6; --gray: #8e8e93;
  --l2: rgba(235,235,245,.62); --l3: rgba(235,235,245,.32); --fill: rgba(120,120,128,.36); --fill2: rgba(120,120,128,.24); --fill3: rgba(118,118,128,.18); --fill4: rgba(116,116,128,.12);
  --sep: rgba(84,84,88,.6); --glass-stroke: rgba(255,255,255,.1);
  --ease: cubic-bezier(.32,.72,0,1); --spring: cubic-bezier(.34,1.56,.64,1);
  --font: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Aptos, sans-serif; --mono: "SF Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: #000; color: var(--cp-text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:disabled { cursor: default; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--cp-link); text-decoration: none; }
.sym { display: inline-block; flex: none; vertical-align: middle; }
.plate { display: inline-grid; place-items: center; flex: none; border-radius: 22%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.plate img { width: 72%; height: 72%; object-fit: contain; display: block; }
.plate.ic { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.num { font-variant-numeric: tabular-nums; }
.bm { display: inline-grid; place-items: center; flex: none; color: #fff; box-shadow: 0 6px 18px rgba(94,92,230,.35), inset 0 0 0 .5px rgba(255,255,255,.3); }
.face { display: block; flex: none; }
.spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--fill); border-top-color: var(--cp-accent); animation: spin .8s linear infinite; flex: none; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; font-style: normal; letter-spacing: .02em; white-space: nowrap; flex: none; }
.tag.ai { background: rgba(191,90,242,.2); color: #e0a8ff; }
.tag.lib { background: rgba(10,132,255,.2); color: #79b8ff; }
.tag.safe, .tag.ok { background: rgba(48,209,88,.16); color: var(--green); }
.tag.warn { background: rgba(255,159,10,.18); color: var(--orange); }
.tag.bad { background: rgba(255,69,58,.18); color: #ff6961; }
.tag.dim { background: var(--fill3); color: var(--l2); }
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 300; }
.confetti i { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; animation: fall 2s cubic-bezier(.3,.6,.4,1) forwards; }
.toast2 { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); width: max-content; max-width: min(90vw, 560px); padding: 12px 18px; border-radius: 14px; background: rgba(44,44,46,.97); box-shadow: 0 12px 40px rgba(0,0,0,.5), inset 0 0 0 .5px rgba(255,255,255,.12); color: var(--cp-text-soft); font-size: 14px; line-height: 1.4; z-index: 400; animation: msgIn .3s var(--ease) both; }
.toast2 b { color: #fff; }
.switch { width: 51px; height: 31px; border-radius: 16px; background: var(--fill); position: relative; flex: none; transition: background .25s; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.25); transition: transform .3s var(--spring); }
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(20px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fall { to { top: 105%; transform: rotate(540deg) translateX(30px); opacity: .8; } }
@keyframes orbit { from { transform: rotate(0deg) translateX(72px) rotate(0deg); } to { transform: rotate(360deg) translateX(72px) rotate(-360deg); } }
@keyframes flashAdd { 0% { background: rgba(191,90,242,.35); } 100% { background: transparent; } }
@keyframes live { 50% { opacity: .35; } }
@keyframes scIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes popin { from { opacity: 0; transform: scale(.82); } }
@keyframes sheetIn { from { transform: translateY(100%); } }
@keyframes fadeIn { from { opacity: 0; } }