/* M.I.A design tokens — ARIA design language (ariamanagement.ai): white → soft blue, one brand blue,
   lavender gradient for brand moments, gold spark, Geist + Geist Mono. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --fg: #0A1130;            /* SI navy */
  --muted: #4a5570;
  --muted-soft: #6b7a96;
  --faint: #9aa6bd;
  --brand: #0A1130;         /* primary actions = SI navy */
  --brand-press: #1a2556;
  --brand-soft: #7FA0FF;    /* SI pastel */
  --lavender: #a9bdff;
  --sparkle: #7FA0FF;       /* no gold in the SI kit */
  --hairline: rgba(15, 25, 50, 0.08);
  --hairline-strong: rgba(15, 25, 50, 0.14);
  --surface: #ffffff;
  --surface-soft: #f8faff;
  --surface-tint: #eef2ff;
  --navy: #0f1d3a;
  --ok: #10b981;
  --warn: #f59e0b;
  --bad: #ef4444;
  --shadow: 0 1px 2px rgba(15, 25, 50, 0.04), 0 8px 28px rgba(15, 25, 50, 0.06);
  --shadow-lift: 0 2px 4px rgba(15, 25, 50, 0.05), 0 16px 40px rgba(75, 123, 245, 0.12);
  --grad: linear-gradient(90deg, #7FA0FF 0%, #5b78d6 100%);
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { color: var(--fg); font-family: var(--font); -webkit-font-smoothing: antialiased; letter-spacing: -0.011em; }
body { background: #ffffff; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: var(--fg); }
a { color: var(--brand); text-decoration: none; }

.name-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; font-weight: 500; }
.spark { color: var(--sparkle); display: inline-block; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted-soft); }
.small { font-size: 12px; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 99px; background: var(--surface-tint); color: #3d57b8; border: 1px solid rgba(127, 160, 255, 0.3); white-space: nowrap; }
.pill.warn { background: #fff7e8; color: #b7791f; border-color: rgba(245, 158, 11, 0.25); }
.pill.ok { background: #ecfdf5; color: #047857; border-color: rgba(16, 185, 129, 0.25); }
.pill.bad { background: #fef2f2; color: #b91c1c; border-color: rgba(239, 68, 68, 0.25); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 500; font-size: 13.5px; transition: background .15s, transform .1s; }
.btn:hover { background: var(--brand-press); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--surface); color: var(--fg); border: 1px solid var(--hairline-strong); }
.btn.ghost:hover { background: var(--surface-soft); }
.btn.danger { background: var(--surface); color: var(--bad); border: 1px solid rgba(239, 68, 68, 0.3); }
.btn:disabled { opacity: .5; cursor: default; }

.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px; }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(75, 123, 245, 0.35); outline-offset: 0; }
pre { white-space: pre-wrap; word-break: break-word; font-family: var(--font); font-size: 13px; }

/* ── Liquid Glass (Apple, iOS/macOS 26 design language) ──────────────────────────────
   Translucent layers that blur + saturate what's behind them, a bright specular rim,
   a soft inner sheen, and capsule controls. Needs colour behind it to read as glass,
   so the page carries slow-drifting ambient light in the ARIA palette. */
:root {
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-blur: blur(24px) saturate(180%);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  --glass-edge: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 1px 1px rgba(10, 17, 48, 0.04), 0 10px 30px rgba(10, 17, 48, 0.08), 0 24px 60px rgba(127, 160, 255, 0.14);
}
.ambient { position: fixed; inset: -20%; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .9; }
.ambient i { position: absolute; border-radius: 50%; animation: drift 26s ease-in-out infinite alternate; }
.ambient i:nth-child(1) { width: 46vw; height: 46vw; left: 8%; top: 34%; background: radial-gradient(circle, rgba(127,160,255,.30), transparent 65%); }
.ambient i:nth-child(2) { width: 42vw; height: 42vw; right: 6%; top: 16%; background: radial-gradient(circle, rgba(177,150,255,.26), transparent 65%); animation-duration: 32s; }
.ambient i:nth-child(3) { width: 30vw; height: 30vw; left: 40%; bottom: 4%; background: radial-gradient(circle, rgba(10,17,48,.07), transparent 65%); animation-duration: 38s; }
.ambient i:nth-child(4) { width: 26vw; height: 26vw; right: 22%; bottom: 18%; background: radial-gradient(circle, rgba(196,170,255,.24), transparent 65%); animation-duration: 44s; }
@keyframes drift { to { transform: translate(6vw, -5vh) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .ambient i { animation: none; } }

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.48));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-rim), var(--glass-shadow);
  position: relative;
}
.glass::before {            /* specular sheen across the top third */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 38%);
  mix-blend-mode: soft-light;
}
.glass > * { position: relative; }
.capsule { border-radius: 999px; }
.glass-btn { background: rgba(255,255,255,.55); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--glass-rim), 0 4px 14px rgba(40,70,160,.10); border-radius: 999px; color: var(--fg); }
.glass-btn:hover { background: rgba(255,255,255,.78); }
.tint { background: linear-gradient(180deg, #1c2a5e, #0A1130); color: #fff; border: 1px solid rgba(127,160,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px rgba(10,17,48,.25); border-radius: 999px; }
.tint:hover { background: linear-gradient(180deg, #24346f, #111a42); }
.btn { border-radius: 999px; }
.card { background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.6)); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-rim), var(--glass-shadow); border-radius: 20px; }