:root {
  --allenai-ink: #0a0f0c;
  --allenai-panel: #111812;
  --allenai-panel-2: #182119;
  --allenai-line: #dce6dc;
  --allenai-soft: #f5f8f4;
  --allenai-soft-2: #edf4eb;
  --allenai-text: #152018;
  --allenai-muted: #607064;
  --allenai-green: #66f255;
  --allenai-green-2: #3bdc45;
  --allenai-green-3: #1fa833;
  --allenai-cyan: #35d9c6;
  --allenai-amber: #f3b342;
  --allenai-red: #ef5f5f;
  --allenai-radius: 8px;
  --allenai-shadow: 0 12px 32px rgba(12, 18, 13, 0.08);
  --allenai-shadow-soft: 0 2px 10px rgba(12, 18, 13, 0.06);
}

html {
  background: var(--allenai-soft);
}

body {
  color: var(--allenai-text);
  background:
    linear-gradient(180deg, rgba(102, 242, 85, 0.07), rgba(53, 217, 198, 0.035) 34%, transparent 62%),
    var(--allenai-soft) !important;
  letter-spacing: 0;
}

.dark body,
.dark .min-h-screen {
  background:
    linear-gradient(180deg, rgba(102, 242, 85, 0.08), rgba(53, 217, 198, 0.035) 42%, transparent 68%),
    #07100a !important;
}

::selection {
  color: var(--allenai-ink) !important;
  background: rgba(102, 242, 85, 0.35) !important;
}

/* Brand color remap for existing Tailwind primary utilities. */
.bg-primary-50 { background-color: #efffed !important; }
.bg-primary-100 { background-color: #dafece !important; }
.bg-primary-200 { background-color: #b7fca6 !important; }
.bg-primary-300 { background-color: #8cf57a !important; }
.bg-primary-400 { background-color: #66f255 !important; }
.bg-primary-500 { background-color: #45df42 !important; }
.bg-primary-600 { background-color: #27bd35 !important; }
.bg-primary-700 { background-color: #1d902e !important; }
.bg-primary-800 { background-color: #176f27 !important; }
.bg-primary-900 { background-color: #145321 !important; }
.text-primary-300 { color: #9aff86 !important; }
.text-primary-400 { color: #78f36a !important; }
.text-primary-500 { color: #45df42 !important; }
.text-primary-600 { color: #229f31 !important; }
.text-primary-700 { color: #176f27 !important; }
.border-primary-200 { border-color: #b7fca6 !important; }
.border-primary-300 { border-color: #8cf57a !important; }
.border-primary-500 { border-color: #45df42 !important; }
.border-primary-600 { border-color: #27bd35 !important; }
.from-primary-50 { --tw-gradient-from: #efffed var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(239, 255, 237, 0) var(--tw-gradient-to-position) !important; }
.from-primary-400 { --tw-gradient-from: #66f255 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(102, 242, 85, 0) var(--tw-gradient-to-position) !important; }
.from-primary-500 { --tw-gradient-from: #45df42 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(69, 223, 66, 0) var(--tw-gradient-to-position) !important; }
.from-primary-600 { --tw-gradient-from: #27bd35 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(39, 189, 53, 0) var(--tw-gradient-to-position) !important; }
.to-primary-500 { --tw-gradient-to: #45df42 var(--tw-gradient-to-position) !important; }
.to-primary-600 { --tw-gradient-to: #27bd35 var(--tw-gradient-to-position) !important; }
.to-primary-700 { --tw-gradient-to: #1d902e var(--tw-gradient-to-position) !important; }
.ring-primary-100 { --tw-ring-color: #dafece !important; }
.ring-primary-500,
.focus\:ring-primary-500:focus { --tw-ring-color: rgba(69, 223, 66, 0.42) !important; }

/* App shell. */
.bg-mesh-gradient {
  background-image:
    linear-gradient(rgba(26, 39, 29, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 39, 29, 0.035) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 75%);
}

.glass {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(21, 32, 24, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 12px 28px rgba(10, 15, 12, 0.045) !important;
  backdrop-filter: blur(18px) saturate(1.15);
}

.dark .glass {
  background: rgba(8, 14, 10, 0.78) !important;
  border-color: rgba(102, 242, 85, 0.12) !important;
  box-shadow: 0 1px 0 rgba(102, 242, 85, 0.09), 0 18px 34px rgba(0, 0, 0, 0.25) !important;
}

.sidebar {
  color: #dbe8dd !important;
  background:
    linear-gradient(180deg, rgba(102, 242, 85, 0.10), rgba(53, 217, 198, 0.035) 28%, transparent 52%),
    var(--allenai-ink) !important;
  border-right: 1px solid rgba(102, 242, 85, 0.18) !important;
  box-shadow: 18px 0 36px rgba(10, 15, 12, 0.14) !important;
}

.sidebar-header {
  border-bottom-color: rgba(102, 242, 85, 0.14) !important;
  height: 64px !important;
  padding-left: 20px !important;
  padding-right: 18px !important;
  gap: 12px !important;
}

.sidebar-logo,
.h-16.w-16.items-center.justify-center.overflow-hidden,
.h-9.w-9.items-center.justify-center.overflow-hidden {
  background: rgba(5, 8, 5, 0.82) !important;
  border: 1px solid rgba(102, 242, 85, 0.26) !important;
  border-radius: var(--allenai-radius) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 18px rgba(102, 242, 85, 0.10) !important;
}

.sidebar-logo {
  width: 38px !important;
  height: 38px !important;
}

.sidebar-logo img {
  padding: 3px !important;
}

.sidebar-brand-title,
.sidebar .text-gray-900,
.sidebar .dark\:text-white {
  color: #f3fff0 !important;
}

.sidebar-brand {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 8px !important;
}

.sidebar-brand-title {
  color: #eaf7ea !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

.sidebar-brand > .relative {
  flex: 0 0 auto !important;
}

.sidebar-brand > .relative > button {
  height: 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(102, 242, 85, 0.16) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: rgba(219, 232, 221, 0.78) !important;
  padding: 0 7px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.sidebar-brand > .relative > button:hover {
  background: rgba(102, 242, 85, 0.11) !important;
  border-color: rgba(102, 242, 85, 0.28) !important;
  color: #efffee !important;
}

.sidebar-header-collapsed {
  padding-left: 17px !important;
  padding-right: 17px !important;
  justify-content: center !important;
}

.sidebar-section-title {
  color: rgba(219, 232, 221, 0.54) !important;
}

.sidebar-link {
  color: rgba(219, 232, 221, 0.78) !important;
  border: 1px solid transparent !important;
  border-radius: var(--allenai-radius) !important;
}

.sidebar-link:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(102, 242, 85, 0.14) !important;
}

.sidebar-link-active {
  color: var(--allenai-green) !important;
  background: linear-gradient(90deg, rgba(102, 242, 85, 0.20), rgba(53, 217, 198, 0.08)) !important;
  border-color: rgba(102, 242, 85, 0.32) !important;
  box-shadow: inset 3px 0 0 var(--allenai-green), 0 10px 22px rgba(102, 242, 85, 0.08) !important;
}

main {
  background: transparent !important;
}

.card,
.card-glass,
.modal-content,
.dialog-container,
.dropdown,
.table-container,
.rounded-2xl.bg-white,
.rounded-xl.bg-white {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(21, 32, 24, 0.10) !important;
  border-radius: var(--allenai-radius) !important;
  box-shadow: var(--allenai-shadow-soft) !important;
}

.dark .card,
.dark .card-glass,
.dark .modal-content,
.dark .dialog-container,
.dark .dropdown,
.dark .table-container,
.dark .rounded-2xl.bg-white,
.dark .rounded-xl.bg-white {
  background: rgba(13, 20, 15, 0.94) !important;
  border-color: rgba(102, 242, 85, 0.14) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

.card-hover:hover,
.hover\:shadow-card-hover:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(69, 223, 66, 0.26) !important;
  box-shadow: var(--allenai-shadow) !important;
}

.btn,
.input,
.dropdown,
.badge,
.toast,
.modal-content,
.dialog-container,
.table-container {
  border-radius: var(--allenai-radius) !important;
}

.btn-primary {
  color: #061006 !important;
  background: linear-gradient(135deg, var(--allenai-green), var(--allenai-cyan)) !important;
  border: 1px solid rgba(102, 242, 85, 0.45) !important;
  box-shadow: 0 10px 22px rgba(69, 223, 66, 0.18) !important;
}

.btn-primary:hover {
  color: #020602 !important;
  filter: saturate(1.06) brightness(1.02);
  box-shadow: 0 14px 28px rgba(69, 223, 66, 0.24) !important;
}

.btn-secondary,
.btn-ghost {
  background: rgba(255, 255, 255, 0.74) !important;
  border: 1px solid rgba(21, 32, 24, 0.10) !important;
  color: #26352a !important;
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: #f2f7f0 !important;
  border-color: rgba(69, 223, 66, 0.26) !important;
}

.dark .btn-secondary,
.dark .btn-ghost {
  background: rgba(20, 30, 22, 0.86) !important;
  border-color: rgba(102, 242, 85, 0.13) !important;
  color: #e8f5e9 !important;
}

.input,
input,
textarea,
select {
  background-color: rgba(255, 255, 255, 0.90) !important;
  border-color: rgba(21, 32, 24, 0.14) !important;
  color: #152018 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(69, 223, 66, 0.70) !important;
  box-shadow: 0 0 0 3px rgba(69, 223, 66, 0.15) !important;
}

.dark .input,
.dark input,
.dark textarea,
.dark select {
  background-color: rgba(9, 15, 11, 0.88) !important;
  border-color: rgba(102, 242, 85, 0.16) !important;
  color: #ecf8ed !important;
}

.table th {
  color: #405044 !important;
  background: #eef5ec !important;
  border-bottom-color: rgba(21, 32, 24, 0.10) !important;
}

.table td {
  border-bottom-color: rgba(21, 32, 24, 0.07) !important;
}

.table tbody tr:hover {
  background: rgba(102, 242, 85, 0.06) !important;
}

.dark .table th {
  color: #bdd0c0 !important;
  background: rgba(102, 242, 85, 0.08) !important;
}

.dark .table tbody tr:hover {
  background: rgba(102, 242, 85, 0.075) !important;
}

.badge-primary,
.stat-icon-primary {
  color: #145321 !important;
  background: rgba(102, 242, 85, 0.18) !important;
}

.badge-success,
.stat-icon-success {
  color: #0f7a45 !important;
  background: rgba(52, 211, 153, 0.17) !important;
}

.badge-warning,
.stat-icon-warning {
  color: #9a5b05 !important;
  background: rgba(243, 179, 66, 0.18) !important;
}

.badge-danger,
.stat-icon-danger {
  color: #b22d2d !important;
  background: rgba(239, 95, 95, 0.16) !important;
}

.page-title,
h1,
h2,
h3 {
  color: #121b14;
  letter-spacing: 0 !important;
}

.dark .page-title,
.dark h1,
.dark h2,
.dark h3 {
  color: #f0fff0 !important;
}

.page-description,
.stat-label,
.input-hint {
  color: var(--allenai-muted) !important;
}

.dark .page-description,
.dark .stat-label,
.dark .input-hint {
  color: #94a897 !important;
}

.text-gradient,
.bg-clip-text.text-transparent {
  color: #18341c !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.dark .text-gradient,
.dark .bg-clip-text.text-transparent {
  color: #eaffdf !important;
}

/* Auth and setup screens: remove decorative blobs and make the brand feel intentional. */
.absolute.-right-40,
.absolute.-bottom-40,
.absolute.left-1\/2.top-1\/2 {
  display: none !important;
}

.absolute.inset-0.bg-gradient-to-br,
.from-gray-50.via-primary-50\/30.to-gray-100 {
  background:
    linear-gradient(135deg, rgba(10, 15, 12, 0.92), rgba(13, 26, 16, 0.86)),
    radial-gradient(circle at 25% 10%, rgba(102, 242, 85, 0.16), transparent 30%),
    #08100a !important;
}

.absolute.inset-0.bg-\[linear-gradient\(rgba\(20\,184\,166\,0\.03\)_1px\,transparent_1px\)\,linear-gradient\(90deg\,rgba\(20\,184\,166\,0\.03\)_1px\,transparent_1px\)\] {
  background-image:
    linear-gradient(rgba(102, 242, 85, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 242, 85, 0.06) 1px, transparent 1px) !important;
}

.modal-overlay,
.dialog-overlay {
  background: rgba(5, 8, 5, 0.58) !important;
  backdrop-filter: blur(8px);
}

.toast {
  border-left-color: var(--allenai-green) !important;
  box-shadow: var(--allenai-shadow) !important;
}

a {
  text-decoration-color: rgba(69, 223, 66, 0.45);
}

a:hover {
  color: #1f8f2e;
}

@media (max-width: 768px) {
  .card,
  .card-glass,
  .modal-content,
  .dialog-container {
    border-radius: var(--allenai-radius) !important;
  }

  main {
    padding: 1rem !important;
  }
}

/* Second pass: cleaner public/auth surfaces. Keep the app console practical instead of turning everything dark. */
div[class*="relative"][class*="min-h-screen"][class*="bg-gradient-to-br"],
div[class*="relative"][class*="items-center"][class*="justify-center"][class*="overflow-hidden"] {
  background:
    radial-gradient(circle at 18% 12%, rgba(102, 242, 85, 0.18), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(53, 217, 198, 0.14), transparent 28%),
    linear-gradient(180deg, #fbfef9 0%, #f2f8f0 48%, #eaf3e8 100%) !important;
}

div[class*="absolute"][class*="inset-0"][class*="bg-gradient-to-br"] {
  background:
    radial-gradient(circle at 24% 14%, rgba(102, 242, 85, 0.18), transparent 28%),
    radial-gradient(circle at 76% 18%, rgba(53, 217, 198, 0.13), transparent 30%),
    linear-gradient(180deg, #fbfef9 0%, #f4faf2 54%, #edf5eb 100%) !important;
}

div[class*="absolute"][class*="bg-[linear-gradient"] {
  background-image:
    linear-gradient(rgba(31, 58, 36, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 58, 36, 0.045) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
}

/* Auth card and brand block */
.relative.z-10.w-full.max-w-md {
  color: #17231a !important;
}

.relative.z-10.w-full.max-w-md .text-gradient,
.relative.z-10.w-full.max-w-md h1,
.relative.z-10.w-full.max-w-md .text-3xl {
  color: #143018 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #143018 !important;
}

.relative.z-10.w-full.max-w-md p,
.relative.z-10.w-full.max-w-md .text-gray-500,
.relative.z-10.w-full.max-w-md .dark\:text-dark-400,
.relative.z-10.w-full.max-w-md .text-gray-400,
.relative.z-10.w-full.max-w-md .dark\:text-dark-500 {
  color: #617267 !important;
}

.relative.z-10.w-full.max-w-md .card-glass {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(24, 46, 28, 0.12) !important;
  box-shadow: 0 24px 70px rgba(20, 35, 24, 0.14) !important;
}

.relative.z-10.w-full.max-w-md label,
.relative.z-10.w-full.max-w-md .input-label,
.relative.z-10.w-full.max-w-md .text-gray-700,
.relative.z-10.w-full.max-w-md .text-gray-900,
.relative.z-10.w-full.max-w-md .dark\:text-white {
  color: #19251c !important;
}

.relative.z-10.w-full.max-w-md .btn-primary {
  color: #061006 !important;
  font-weight: 700 !important;
}

/* Public landing page */
header.relative.z-20 + main,
header.relative.z-20,
header.relative.z-20 ~ main {
  color: #17231a !important;
}

header.relative.z-20 nav {
  color: #17231a !important;
}

header.relative.z-20 + main h1,
header.relative.z-20 + main h2,
header.relative.z-20 + main h3 {
  color: #102315 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #102315 !important;
}

header.relative.z-20 + main p,
header.relative.z-20 + main span,
header.relative.z-20 + main .text-gray-600,
header.relative.z-20 + main .dark\:text-dark-300 {
  color: #526258 !important;
}

.terminal-container .terminal-window,
.terminal-window {
  background: #101a14 !important;
  border: 1px solid rgba(102, 242, 85, 0.18) !important;
  box-shadow: 0 26px 70px rgba(20, 35, 24, 0.18) !important;
}

.terminal-window span,
header.relative.z-20 + main .terminal-window span {
  color: #d6e4d8 !important;
}

.terminal-window .terminal-title,
header.relative.z-20 + main .terminal-window .terminal-title {
  color: #728174 !important;
}

.terminal-window .code-prompt,
header.relative.z-20 + main .terminal-window .code-prompt {
  color: var(--allenai-green) !important;
}

.terminal-window .code-url,
header.relative.z-20 + main .terminal-window .code-url,
.terminal-window .code-cmd,
header.relative.z-20 + main .terminal-window .code-cmd {
  color: #35d9c6 !important;
}

.terminal-window .code-comment,
header.relative.z-20 + main .terminal-window .code-comment {
  color: #83928a !important;
}

.terminal-window .code-success,
header.relative.z-20 + main .terminal-window .code-success {
  color: #0b2a12 !important;
  background: rgba(102, 242, 85, 0.80) !important;
}

.terminal-window .code-response,
header.relative.z-20 + main .terminal-window .code-response {
  color: #f0c75b !important;
}

header.relative.z-20 + main [class*="bg-white/60"],
header.relative.z-20 + main [class*="bg-white/80"],
header.relative.z-20 + main [class*="dark:bg-dark-800"] {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(24, 46, 28, 0.12) !important;
  box-shadow: 0 16px 36px rgba(20, 35, 24, 0.09) !important;
}

footer,
footer * {
  color: #647367 !important;
}

/* Dashboard/app canvas: light workspace even when the browser prefers dark mode. */
.min-h-screen.bg-gray-50,
.dark .min-h-screen.bg-gray-50 {
  background:
    linear-gradient(180deg, rgba(102, 242, 85, 0.045), rgba(53, 217, 198, 0.025) 36%, transparent 62%),
    #f7faf5 !important;
}

.dark .bg-mesh-gradient {
  background-image:
    linear-gradient(rgba(26, 39, 29, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 39, 29, 0.03) 1px, transparent 1px) !important;
}