:root {
  color-scheme: dark;
  --app: #000000;
  --surface: #0a0a0a;
  --panel: #111111;
  --subtle: #1a1a1a;
  --border: #262626;
  --border-strong: #3f3f46;
  --text: #ededed;
  --muted: #a1a1aa;
  --faint: #71717a;
  --accent: #f97316;
  --accent-hover: #fb923c;
  --accent-soft: rgba(249, 115, 22, .12);
  --accent-border: rgba(249, 115, 22, .3);
  --accent-text: #ffffff;
  --accent-ink: #fb923c;
  --ring: #f97316;
  --shadow: 0 12px 32px rgba(0, 0, 0, .24);
}

html.light {
  color-scheme: light;
  --app: #fafafa;
  --surface: #ffffff;
  --panel: #fafafa;
  --subtle: #f4f4f5;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --text: #18181b;
  --muted: #52525b;
  --faint: #71717a;
  --accent: #ea580c;
  --accent-hover: #c2410c;
  --accent-soft: rgba(234, 88, 12, .09);
  --accent-border: rgba(234, 88, 12, .24);
  --accent-text: #ffffff;
  --accent-ink: #c2410c;
  --ring: #ea580c;
  --shadow: 0 12px 32px rgba(24, 24, 27, .08);
}

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::selection { background: var(--text); color: var(--app); }
html { background: var(--app); }
body {
  background: var(--app) !important;
  color: var(--text) !important;
  font-size: 14px;
  letter-spacing: -.006em;
}

.bg-app { background-color: var(--app) !important; }
.bg-surface { background-color: var(--surface) !important; }
.bg-panel, .bg-panel\/50 { background-color: var(--panel) !important; }
.bg-subtle, .hover\:bg-subtle:hover, .hover\:bg-subtle\/30:hover, .hover\:bg-subtle\/40:hover { background-color: var(--subtle) !important; }
.border-border, .divide-border > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

.text-white, .text-zinc-100 { color: var(--text) !important; }
.text-zinc-200, .text-zinc-300 { color: var(--muted) !important; }
.text-zinc-400, .text-zinc-500 { color: var(--faint) !important; }
.hover\:text-white:hover, .hover\:text-zinc-100:hover { color: var(--text) !important; }

.text-orange-300, .text-orange-400, .text-orange-500,
.hover\:text-orange-300:hover, .hover\:text-orange-400:hover { color: var(--accent-ink) !important; }
.bg-orange-500\/10, .bg-orange-600\/20 { background-color: var(--accent-soft) !important; }
.border-orange-500\/20, .border-orange-500\/30, .hover\:border-orange-500\/40:hover { border-color: var(--accent-border) !important; }
.bg-orange-500, .bg-orange-600 { background-color: var(--accent) !important; color: var(--accent-text) !important; }
.accent-orange-600 { accent-color: var(--accent); }

.brand-lockup { color: var(--text); }
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-wordmark { color: var(--text); font-weight: 650; letter-spacing: -.035em; }

.btn-primary {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
  font-weight: 600;
  transition: opacity .15s ease, transform .15s ease;
}
.btn-primary:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  font-weight: 500;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-secondary:hover { background: var(--subtle) !important; border-color: var(--border-strong) !important; }

.nav-active {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  box-shadow: inset 0 0 0 1px var(--accent-border);
  font-weight: 600;
}
.card-pro {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.card-pro:hover { border-color: var(--border-strong) !important; }

input, select, textarea {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
input::placeholder, textarea::placeholder { color: var(--faint) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 16%, transparent) !important;
  outline: none;
}

.dropdown-menu { box-shadow: var(--shadow) !important; }
table thead { background: var(--panel) !important; }
table tbody tr { transition: background-color .15s ease; }
table tbody tr:hover { background: var(--panel) !important; }

.toast-stack {
  position: fixed;
  z-index: 100;
  top: 16px;
  right: 16px;
  display: grid;
  width: min(390px, calc(100vw - 32px));
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  pointer-events: auto;
  animation: toast-in .24s cubic-bezier(.2, .8, .2, 1) both;
}
.toast.is-leaving { animation: toast-out .18s ease forwards; }
.toast-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--subtle);
  color: var(--text);
}
.toast-title { font-size: 13px; font-weight: 650; line-height: 20px; }
.toast-message { margin-top: 1px; color: var(--muted); font-size: 13px; line-height: 19px; }
.toast-close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 6px;
  color: var(--faint);
}
.toast-close:hover { background: var(--subtle); color: var(--text); }
.toast[data-variant="success"] .toast-icon { background: #064e3b; color: #6ee7b7; }
.toast[data-variant="error"] .toast-icon { background: #7f1d1d; color: #fca5a5; }
.toast[data-variant="warning"] .toast-icon { background: #78350f; color: #fcd34d; }
.toast[data-variant="info"] .toast-icon { background: var(--accent-soft); color: var(--accent-ink); }
html.light .toast[data-variant="success"] .toast-icon { background: #d1fae5; color: #047857; }
html.light .toast[data-variant="error"] .toast-icon { background: #fee2e2; color: #b91c1c; }
html.light .toast[data-variant="warning"] .toast-icon { background: #fef3c7; color: #a16207; }
@keyframes toast-in {
  from { opacity: 0; transform: translate3d(18px, -6px, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translate3d(18px, 0, 0) scale(.98); }
}

.modal-overlay {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(4px);
  cursor: default;
  animation: modal-fade-in .16s ease both;
}
.modal-panel {
  position: relative;
  width: min(420px, 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 22px;
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  animation: modal-in .2s cubic-bezier(.2, .8, .2, 1) both;
}
.modal-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #7f1d1d;
  border-radius: 10px;
  background: #450a0a;
  color: #fca5a5;
}
.btn-danger {
  border: 1px solid #dc2626;
  background: #dc2626;
  color: #ffffff;
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-danger:hover { border-color: #b91c1c; background: #b91c1c; }
html.light .modal-backdrop { background: rgba(24, 24, 27, .42); }
html.light .modal-panel { box-shadow: 0 24px 70px rgba(24, 24, 27, .18); }
html.light .modal-icon { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
@keyframes modal-fade-in { from { opacity: 0; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.app-sidebar { background: var(--surface); }
.app-header { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); }
.metric-icon { background: var(--accent-soft) !important; border-color: var(--accent-border) !important; color: var(--accent-ink) !important; }
.accent-stroke { color: var(--accent) !important; }
.eyebrow { color: var(--faint); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

html.light .bg-emerald-950\/20, html.light .bg-emerald-950\/40 { background-color: #ecfdf5 !important; }
html.light .border-emerald-800\/40, html.light .border-emerald-800\/60 { border-color: #a7f3d0 !important; }
html.light .text-emerald-300, html.light .text-emerald-400 { color: #047857 !important; }
html.light .bg-red-950\/20, html.light .bg-red-950\/40 { background-color: #fef2f2 !important; }
html.light .border-red-800\/40, html.light .border-red-800\/60 { border-color: #fecaca !important; }
html.light .text-red-300, html.light .text-red-400 { color: #b91c1c !important; }
html.light .bg-amber-950\/20, html.light .bg-amber-950\/40 { background-color: #fffbeb !important; }
html.light .border-amber-800\/40, html.light .border-amber-800\/60 { border-color: #fde68a !important; }
html.light .text-amber-300, html.light .text-amber-400 { color: #a16207 !important; }
html.light .bg-orange-950\/40 { background-color: #fff7ed !important; }
html.light .border-orange-800\/40 { border-color: #fed7aa !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}