:root {
  --page-bg: #0c0f0e;
  --page-bg-soft: #111614;
  --surface: #161b19;
  --surface-raised: #1b211f;
  --surface-muted: #111614;
  --border: #2b3631;
  --border-strong: #3a4741;
  --text: #f4f1ea;
  --text-soft: #d9d2c7;
  --text-muted: #9e988f;
  --primary: #46d6a7;
  --primary-strong: #2ebf91;
  --secondary: #86a8ff;
  --accent-warm: #e8b45b;
  --danger: #ff766d;
  --success: #5edb8f;
  color-scheme: dark;
}

html,
body {
  background: var(--page-bg);
  color: var(--text);
}

body {
  min-height: 100vh;
}

#root {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

#root:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(232,180,91,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,214,167,.035) 1px, transparent 1px),
    radial-gradient(circle at 16% 18%, rgba(134,168,255,.12), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(70,214,167,.11), transparent 26%),
    linear-gradient(135deg, #0c0f0e 0%, #121715 52%, #0a0d0c 100%);
  background-size: 56px 56px, 56px 56px, auto;
}

header.fixed {
  background: rgba(12, 15, 14, .86) !important;
  border-bottom: 1px solid rgba(244,241,234,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

main {
  background: transparent;
}

footer.bg-gray-900 {
  background: #080a09 !important;
  border-top: 1px solid var(--border);
}

.bg-white,
.bg-gray-50,
.bg-blue-50,
.bg-green-50,
.bg-red-50 {
  background-color: var(--surface) !important;
}

.bg-gray-100,
.bg-gray-200,
.bg-blue-100,
.bg-green-100,
.bg-indigo-100,
.bg-orange-100,
.bg-purple-100,
.bg-red-100,
.bg-yellow-100 {
  background-color: var(--surface-muted) !important;
}

.bg-gray-900 {
  background-color: #0a0d0c !important;
}

.absolute.inset-0.bg-gradient-to-br {
  background:
    radial-gradient(circle at 78% 22%, rgba(134,168,255,.14), transparent 32%),
    radial-gradient(circle at 18% 74%, rgba(232,180,91,.08), transparent 28%),
    linear-gradient(135deg, rgba(12,15,14,.96), rgba(18,25,22,.91)),
    repeating-linear-gradient(90deg, rgba(244,241,234,.035) 0 1px, transparent 1px 96px) !important;
}

.from-blue-50,
.from-gray-50 {
  --tw-gradient-from: #151b18 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(21 27 24 / 0) var(--tw-gradient-to-position) !important;
}

.to-teal-50,
.to-gray-100 {
  --tw-gradient-to: #0c0f0e var(--tw-gradient-to-position) !important;
}

.bg-white.rounded-xl,
.bg-white.rounded-2xl,
.bg-white.rounded-lg,
.bg-gray-50.rounded-xl,
.bg-blue-50.rounded-xl {
  border: 1px solid var(--border);
}

.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl {
  box-shadow: 0 18px 48px rgba(0,0,0,.28) !important;
}

.hover\:shadow-md:hover,
.hover\:shadow-lg:hover,
.hover\:shadow-xl:hover {
  box-shadow: 0 22px 64px rgba(0,0,0,.38), 0 0 0 1px rgba(70,214,167,.18) !important;
}

.text-gray-900,
.text-gray-800 {
  color: var(--text) !important;
}

.text-gray-700,
.text-gray-600 {
  color: var(--text-soft) !important;
}

.text-gray-500,
.text-gray-400,
.text-gray-300 {
  color: var(--text-muted) !important;
}

.text-blue-400,
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-indigo-600 {
  color: var(--secondary) !important;
}

.text-teal-500,
.text-green-500,
.text-green-600 {
  color: var(--success) !important;
}

.text-orange-500,
.text-orange-600,
.text-yellow-500,
.text-yellow-600 {
  color: var(--accent-warm) !important;
}

.text-purple-500,
.text-purple-600 {
  color: #c9a7ff !important;
}

.text-red-500,
.text-red-600,
.text-red-700 {
  color: var(--danger) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-gray-800,
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border) !important;
}

.border-blue-500,
.ring-blue-500 {
  border-color: var(--primary) !important;
  --tw-ring-color: rgba(70, 214, 167, .68) !important;
}

.bg-blue-500,
.bg-blue-600 {
  background-color: var(--primary) !important;
  color: #07120f !important;
}

.bg-teal-500 {
  background-color: var(--secondary) !important;
  color: #070b18 !important;
}

.bg-blue-400 {
  background-color: rgba(134,168,255,.2) !important;
}

.bg-teal-400,
.bg-indigo-400 {
  background-color: rgba(70,214,167,.18) !important;
}

.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover,
.active\:bg-blue-700:active {
  background-color: var(--primary-strong) !important;
  color: #06100d !important;
}

.hover\:bg-teal-600:hover,
.active\:bg-teal-700:active {
  background-color: #6f91ee !important;
  color: #060a16 !important;
}

.hover\:bg-blue-50:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover,
.hover\:bg-red-50:hover {
  background-color: rgba(70,214,167,.1) !important;
}

.hover\:bg-gray-800:hover {
  background-color: #222a26 !important;
}

.hover\:text-blue-500:hover,
.hover\:text-blue-700:hover,
.hover\:text-blue-800:hover,
.hover\:text-white:hover {
  color: var(--primary) !important;
}

input:not([type="checkbox"]),
textarea {
  background: #101513 !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(244,241,234,.035);
}

input:not([type="checkbox"])::placeholder,
textarea::placeholder {
  color: #74838b !important;
}

input[type="checkbox"] {
  accent-color: var(--primary);
}

.focus\:ring-blue-500:focus,
.focus\:ring-red-500:focus {
  --tw-ring-color: rgba(70, 214, 167, .55) !important;
}

.fixed.inset-0.z-50 {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.fixed.inset-0.z-50 .bg-white {
  background: var(--surface-raised) !important;
}

.blur-3xl.rounded-full {
  opacity: .08 !important;
  filter: blur(76px) saturate(.85);
}

.rounded-2xl,
.rounded-xl,
.rounded-lg {
  border-radius: 10px;
}

.rounded-full {
  border-radius: 9999px;
}

.border-dashed {
  background: rgba(244,241,234,.025);
}

.bg-clip-text.text-transparent {
  background-image: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent-warm)) !important;
}

.fill-yellow-400,
.text-yellow-400,
.text-yellow-500,
.text-yellow-600 {
  color: var(--accent-warm) !important;
  fill: var(--accent-warm) !important;
}

.transition-all,
.transition-colors,
.transition-shadow {
  transition-duration: .22s;
}