/* EliteFlow UI — monochrome chrome (black/white), semantic colour only for data. */

html { color-scheme: light; scroll-behavior: smooth; }
html.dark { color-scheme: dark; }
body { transition: background-color .3s ease, color .3s ease; }

/* ---------- surfaces ---------- */
.card {
  background-color: #fff;
  border-radius: 1.5rem;
  border: 1px solid rgba(226, 232, 240, .8);
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 10px 24px -8px rgba(15,23,42,.16), 0 28px 56px -20px rgba(15,23,42,.24);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
}
.card:hover { border-color: rgba(203,213,225,.9); box-shadow: 0 2px 4px rgba(15,23,42,.08), 0 18px 36px -10px rgba(15,23,42,.2), 0 40px 72px -24px rgba(15,23,42,.3); }
.card-lift:hover { transform: translateY(-4px); }
.dark .card { background-color: #18181B; border-color: rgba(63,63,70,.9); box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 28px -8px rgba(0,0,0,.65), 0 32px 60px -20px rgba(0,0,0,.75); }
.dark .card:hover { border-color: rgba(82,82,91,.95); box-shadow: 0 2px 4px rgba(0,0,0,.55), 0 20px 40px -10px rgba(0,0,0,.75), 0 44px 80px -24px rgba(0,0,0,.85); }

.well { background-color: #F3F4F6; border: 1px solid rgba(226,232,240,.8); border-radius: 1rem; }
.dark .well { background-color: #0F0F12; border-color: rgba(63,63,70,.8); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 2.75rem; padding: 0 1.25rem; border-radius: 9999px;
  font-weight: 700; font-size: 14px; letter-spacing: -.01em; white-space: nowrap;
  cursor: pointer; user-select: none; text-decoration: none;
  transition: background-color .2s ease-out, box-shadow .2s ease-out, color .2s ease-out, transform .15s ease-out;
}
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-sm { height: 2.25rem; padding: 0 .875rem; font-size: 13px; }
.btn-lg { height: 3.25rem; padding: 0 1.75rem; font-size: 15px; }
.btn-icon { width: 2.75rem; padding: 0; }
.btn-icon.btn-sm { width: 2.25rem; }

.btn-elevated { box-shadow: 0 2px 4px rgba(15,23,42,.16), 0 10px 22px -6px rgba(15,23,42,.38), 0 16px 34px -12px var(--btn-glow, transparent); }
.btn-elevated:hover { box-shadow: 0 3px 6px rgba(15,23,42,.2), 0 18px 32px -8px rgba(15,23,42,.45), 0 24px 44px -14px var(--btn-glow, transparent); }
.btn-elevated:active { box-shadow: 0 1px 2px rgba(15,23,42,.2), 0 4px 10px -4px rgba(15,23,42,.3); }
.dark .btn-elevated { box-shadow: 0 2px 4px rgba(0,0,0,.55), 0 12px 26px -6px rgba(0,0,0,.7), 0 18px 38px -12px var(--btn-glow, transparent); }
.dark .btn-elevated:hover { box-shadow: 0 3px 6px rgba(0,0,0,.6), 0 20px 36px -8px rgba(0,0,0,.8), 0 26px 48px -14px var(--btn-glow, transparent); }

.btn-invert { background-color: #0f172a; color: #fff; }
.btn-invert:hover { background-color: #1e293b; }
.dark .btn-invert { background-color: #fff; color: #18181b; }
.dark .btn-invert:hover { background-color: #f4f4f5; }

.btn-outline { background-color: #fff; color: #1e293b; border: 1px solid rgba(226,232,240,.9); }
.btn-outline:hover { background-color: #f8fafc; }
.dark .btn-outline { background-color: #27272a; color: #f4f4f5; border-color: rgba(63,63,70,.9); }
.dark .btn-outline:hover { background-color: #3f3f46; }

.btn-ghost { background: transparent; color: #475569; }
.btn-ghost:hover { background-color: rgba(15,23,42,.06); color: #0f172a; }
.dark .btn-ghost { color: #a1a1aa; }
.dark .btn-ghost:hover { background-color: rgba(255,255,255,.08); color: #fff; }

.btn-danger { background-color: #fff; color: #e11d48; border: 1px solid rgba(225,29,72,.25); }
.btn-danger:hover { background-color: #fff1f2; }
.dark .btn-danger { background-color: #18181b; color: #fb7185; border-color: rgba(251,113,133,.3); }
.dark .btn-danger:hover { background-color: rgba(251,113,133,.1); }

/* ---------- inputs ---------- */
.input, .select, .textarea {
  width: 100%; height: 2.75rem; padding: 0 1rem; border-radius: .875rem;
  background-color: #fff; color: #0f172a; border: 1px solid rgba(226,232,240,.9);
  font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.textarea { height: auto; padding: .75rem 1rem; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .875rem center; }
.input::placeholder, .textarea::placeholder { color: #94a3b8; }
.input:focus, .select:focus, .textarea:focus { border-color: #0f172a; box-shadow: 0 0 0 3px rgba(15,23,42,.08); }
.dark .input, .dark .select, .dark .textarea { background-color: #0f0f12; color: #f4f4f5; border-color: rgba(63,63,70,.9); }
.dark .input::placeholder, .dark .textarea::placeholder { color: #71717a; }
.dark .input:focus, .dark .select:focus, .dark .textarea:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.1); }
.input-sm, .select-sm { height: 2.25rem; font-size: 13px; padding-left: .875rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: -.01em; }

input[type="range"] { accent-color: #0f172a; }
.dark input[type="range"] { accent-color: #fff; }
input[type="checkbox"], input[type="radio"] { accent-color: #0f172a; }
.dark input[type="checkbox"], .dark input[type="radio"] { accent-color: #fff; }

/* ---------- chips / badges ---------- */
.chip { display: inline-flex; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .875rem; border-radius: 9999px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; border: 1px solid transparent; transition: all .2s; color: #475569; background: transparent; }
.chip:hover { background-color: rgba(15,23,42,.05); color: #0f172a; }
.chip.on { background-color: #0f172a; color: #fff; }
.dark .chip { color: #a1a1aa; }
.dark .chip:hover { background-color: rgba(255,255,255,.08); color: #fff; }
.dark .chip.on { background-color: #fff; color: #18181b; }

.badge { display: inline-flex; align-items: center; gap: .375rem; height: 1.5rem; padding: 0 .625rem; border-radius: 9999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.badge .dot { width: .375rem; height: .375rem; border-radius: 9999px; background: currentColor; }
.badge-ok   { background: #ecfdf5; color: #047857; }  .dark .badge-ok   { background: rgba(16,185,129,.15); color: #34d399; }
.badge-warn { background: #fffbeb; color: #b45309; }  .dark .badge-warn { background: rgba(245,158,11,.15); color: #fbbf24; }
.badge-err  { background: #fff1f2; color: #be123c; }  .dark .badge-err  { background: rgba(244,63,94,.15); color: #fb7185; }
.badge-info { background: #eff6ff; color: #1d4ed8; }  .dark .badge-info { background: rgba(59,130,246,.15); color: #60a5fa; }
.badge-muted{ background: #f1f5f9; color: #475569; }  .dark .badge-muted{ background: rgba(255,255,255,.08); color: #a1a1aa; }
.badge-gemini { background: #eff6ff; color: #1d4ed8; } .dark .badge-gemini { background: rgba(56,189,248,.15); color: #7dd3fc; }
.badge-groq   { background: #f5f3ff; color: #6d28d9; } .dark .badge-groq   { background: rgba(167,139,250,.15); color: #c4b5fd; }

/* semantic text colours */
.t-ok { color: #059669; } .dark .t-ok { color: #34d399; }
.t-warn { color: #d97706; } .dark .t-warn { color: #fbbf24; }
.t-err { color: #e11d48; } .dark .t-err { color: #fb7185; }
.t-gemini { color: #0284c7; } .dark .t-gemini { color: #38bdf8; }
.t-groq { color: #7c3aed; } .dark .t-groq { color: #a78bfa; }

/* ---------- type helpers ---------- */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #64748b; }
.dark .eyebrow { color: #a1a1aa; }
.muted { color: #64748b; } .dark .muted { color: #a1a1aa; }
.faint { color: #94a3b8; } .dark .faint { color: #71717a; }
.wordmark { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1; }

/* ---------- table ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #64748b; text-align: left; padding: .75rem 1rem; border-bottom: 1px solid rgba(226,232,240,.9); }
.tbl td { padding: .875rem 1rem; border-bottom: 1px solid rgba(226,232,240,.6); font-size: 13.5px; vertical-align: middle; }
.tbl tbody tr { transition: background-color .15s; }
.tbl tbody tr:hover { background-color: rgba(15,23,42,.025); }
.dark .tbl th { color: #a1a1aa; border-color: rgba(63,63,70,.9); }
.dark .tbl td { border-color: rgba(63,63,70,.6); }
.dark .tbl tbody tr:hover { background-color: rgba(255,255,255,.03); }

/* ---------- progress ---------- */
.bar { height: .375rem; border-radius: 9999px; background-color: #e2e8f0; overflow: hidden; }
.dark .bar { background-color: #27272a; }
.bar > div { height: 100%; border-radius: 9999px; background-color: #0f172a; transition: width .4s cubic-bezier(.16,1,.3,1); }
.dark .bar > div { background-color: #fff; }

/* ---------- toggle switch ---------- */
.switch { position: relative; display: inline-block; width: 2.5rem; height: 1.5rem; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 9999px; background: #cbd5e1; transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.switch input:checked + span { background: #0f172a; }
.switch input:checked + span::after { transform: translateX(1rem); }
.dark .switch span { background: #3f3f46; }
.dark .switch input:checked + span { background: #fff; }
.dark .switch input:checked + span::after { background: #18181b; }

/* ---------- marquee ---------- */
@keyframes marquee-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.marquee-track { animation: marquee-scroll var(--marquee-duration, 40s) linear infinite; will-change: transform; }
.marquee-band { -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); }

/* ---------- misc ---------- */
.fade-up { animation: fade-up .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.d1 { animation-delay: .06s } .d2 { animation-delay: .12s } .d3 { animation-delay: .18s } .d4 { animation-delay: .24s }
.pulse-dot { position: relative; }
.pulse-dot::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: currentColor; opacity: .5; animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
.kbd { font-family: ui-monospace, monospace; font-size: 10.5px; padding: .125rem .375rem; border-radius: .375rem; background: rgba(15,23,42,.08); color: #475569; }
.dark .kbd { background: rgba(255,255,255,.12); color: #d4d4d8; }
.divider { border-color: rgba(226,232,240,.9); } .dark .divider { border-color: rgba(63,63,70,.9); }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #F3F4F6; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
.dark ::-webkit-scrollbar-track { background: #0A0A0A; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }
.scrollbar-none { scrollbar-width: none; } .scrollbar-none::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track, .pulse-dot::before { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}