:root {
  color-scheme: light;
  --page-bg: #eef3f4;
  --panel: #ffffff;
  --panel-soft: #f7faf9;
  --text: #172327;
  --text-muted: #52656b;
  --text-soft: #73858a;
  --border: #d5e0e2;
  --primary: #087f78;
  --primary-hover: #066861;
  --primary-soft: #e5f5f2;
  --primary-border: #a9d8d1;
  --accent: #a86212;
  --danger: #bd2c2c;
  --success: #177447;
  --shadow: 0 8px 24px rgba(24, 48, 53, 0.07);
}

html,
body,
#root {
  min-height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--page-bg) !important;
  color: var(--text) !important;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: 0;
}

#root > .min-h-screen,
.bg-gray-50,
.bg-gray-100 {
  background-color: var(--page-bg) !important;
  background-image: none !important;
}

nav {
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 5px 18px rgba(24, 48, 53, 0.07) !important;
}

nav .max-w-5xl {
  max-width: 1180px !important;
}

nav a:first-child > div {
  background: var(--primary) !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(8, 127, 120, 0.20) !important;
}

nav a:first-child span,
nav a:first-child span span {
  color: var(--text) !important;
  letter-spacing: 0 !important;
}

nav .bg-gray-100\/80 {
  background: #f1f5f5 !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

nav .bg-white {
  background: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(8, 127, 120, 0.18) !important;
}

nav .bg-white svg,
nav .bg-white span {
  color: #ffffff !important;
}

nav .text-gray-500,
nav .text-gray-700,
nav .text-indigo-600 {
  color: var(--text-muted) !important;
}

main.container {
  max-width: 1120px !important;
  padding-top: 7.25rem !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-3xl,
.text-4xl {
  color: var(--text) !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

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

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

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

.bg-white,
.bg-white\/80,
.bg-white\/90,
.bg-white\/60 {
  background-color: var(--panel) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: none !important;
}

.bg-white .bg-white,
.bg-white\/80 .bg-white,
.bg-white\/90 .bg-white {
  box-shadow: none !important;
}

.bg-gray-50,
.bg-gray-50\/50,
.bg-gray-50\/80,
.bg-gray-100 {
  background-color: var(--panel-soft) !important;
  background-image: none !important;
}

.rounded-2xl,
.rounded-3xl {
  border-radius: 8px !important;
}

.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: var(--shadow) !important;
}

input,
select,
textarea {
  background: #ffffff !important;
  border-color: #bdcbce !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

select option {
  background: #ffffff;
  color: var(--text);
}

input::placeholder,
textarea::placeholder {
  color: #849397 !important;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary) !important;
  --tw-ring-color: rgba(8, 127, 120, 0.22) !important;
}

button,
a {
  letter-spacing: 0 !important;
}

.bg-indigo-600,
.bg-indigo-700,
.bg-indigo-500,
.bg-blue-600,
.bg-blue-500,
.bg-purple-600,
.from-indigo-500,
.from-indigo-600,
.from-blue-500,
.from-blue-600,
.to-purple-500,
.to-purple-600,
.to-indigo-500,
.to-blue-600 {
  background-color: var(--primary) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.bg-indigo-600:hover,
.bg-indigo-700:hover,
.bg-blue-600:hover,
.bg-purple-600:hover {
  background-color: var(--primary-hover) !important;
}

.bg-indigo-600 *,
.bg-indigo-700 *,
.bg-blue-600 *,
.bg-purple-600 * {
  color: #ffffff !important;
}

.text-indigo-800,
.text-indigo-700,
.text-indigo-600,
.text-indigo-500,
.text-blue-700,
.text-blue-600,
.text-blue-500,
.text-purple-700,
.text-purple-600 {
  color: var(--primary) !important;
}

.bg-indigo-50,
.bg-indigo-50\/50,
.bg-indigo-100,
.bg-indigo-200,
.bg-blue-50,
.bg-blue-100,
.bg-purple-100,
.from-indigo-50,
.from-blue-50,
.to-purple-50 {
  background-color: var(--primary-soft) !important;
  background-image: none !important;
}

.border-indigo-100,
.border-indigo-200,
.border-indigo-300,
.border-indigo-400,
.border-indigo-500,
.border-indigo-600,
.border-blue-100,
.border-blue-200,
.border-blue-300,
.border-blue-400 {
  border-color: var(--primary-border) !important;
}

.border-gray-50,
.border-gray-100,
.border-gray-200,
.border-gray-300 {
  border-color: var(--border) !important;
}

.bg-green-50,
.bg-green-100,
.bg-emerald-50,
.bg-emerald-100 {
  background-color: #e9f7ef !important;
}

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

.bg-amber-50,
.bg-amber-100,
.bg-orange-100,
.bg-yellow-100 {
  background-color: #fff4dc !important;
}

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

.bg-red-50,
.bg-red-100 {
  background-color: #fff0f0 !important;
}

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

.grid .group,
.grid > div,
article,
.divide-y > div {
  border-color: var(--border) !important;
}

.fixed.inset-0,
.bg-black\/40,
.bg-black\/50,
.bg-gray-900\/50 {
  background-color: rgba(20, 35, 39, 0.58) !important;
}

.fixed.inset-0 > .bg-white,
.fixed.inset-0 > [class*="max-w-"],
.modal,
[role="dialog"] {
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.fixed.inset-0 > [class*="max-w-"] .bg-gray-50,
.fixed.inset-0 > [class*="max-w-"] .bg-gray-100 {
  background-color: var(--panel-soft) !important;
}

table {
  color: var(--text) !important;
  border-collapse: separate;
  border-spacing: 0;
}

thead,
thead.bg-gray-50,
tr.bg-gray-50 {
  background: #eef5f4 !important;
}

tbody,
tbody tr,
td {
  background-color: #ffffff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

tbody tr:hover,
.hover\:bg-gray-50:hover {
  background-color: #f3f8f7 !important;
}

th,
td {
  line-height: 1.45;
}

code,
pre {
  color: #264249;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #e8eeee;
}

::-webkit-scrollbar-thumb {
  background: #9db1b4;
  border: 2px solid #e8eeee;
  border-radius: 8px;
}

/* Member center */
.fixed.inset-0 > .max-w-md {
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 70px rgba(17, 35, 40, 0.24) !important;
}

.fixed.inset-0 > .max-w-md > .flex:first-child .w-10 {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.fixed.inset-0 > .max-w-md > .space-y-5 > .bg-gradient-to-br {
  background: #075f5b !important;
  color: #ffffff !important;
  border: 1px solid #07534f !important;
  box-shadow: none !important;
}

.fixed.inset-0 > .max-w-md > .space-y-5 > .bg-gradient-to-br h3,
.fixed.inset-0 > .max-w-md > .space-y-5 > .bg-gradient-to-br p,
.fixed.inset-0 > .max-w-md > .space-y-5 > .bg-gradient-to-br div,
.fixed.inset-0 > .max-w-md > .space-y-5 > .bg-gradient-to-br svg {
  color: #ffffff !important;
}

.fixed.inset-0 > .max-w-md > .space-y-5 .bg-white\/10,
.fixed.inset-0 > .max-w-md > .space-y-5 .bg-white\/20 {
  background: rgba(255, 255, 255, 0.13) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  box-shadow: none !important;
}

.fixed.inset-0 > .max-w-md > .space-y-5 .bg-white\/60,
.fixed.inset-0 > .max-w-md > .space-y-5 .bg-gray-50 {
  background: var(--panel-soft) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

.fixed.inset-0 > .max-w-md > .space-y-5 code {
  color: #15564f !important;
}

.fixed.inset-0 > .max-w-md > .space-y-5 input {
  min-height: 44px;
  background: #ffffff !important;
  color: var(--text) !important;
}

.fixed.inset-0 > .max-w-md > .space-y-5 button.bg-indigo-600,
.fixed.inset-0 > .max-w-md > .space-y-5 a.bg-indigo-100 {
  min-height: 42px;
}

.fixed.inset-0 > .max-w-md > .space-y-5 > button:last-child {
  color: var(--danger) !important;
  border-color: #e6b9b9 !important;
  background: #fff7f7 !important;
}

/* Keep intentionally dark utility panels readable. */
.bg-gray-900,
.bg-gray-800 {
  color: #ffffff !important;
}

.bg-gray-900 *,
.bg-gray-800 * {
  color: inherit;
}

/* Admin workspace */
#root > .min-h-screen.flex.overflow-hidden > aside {
  background: #173334 !important;
  border-color: #284a4b !important;
  box-shadow: 8px 0 24px rgba(17, 45, 46, 0.10) !important;
}

#root > .min-h-screen.flex.overflow-hidden > aside nav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#root > .min-h-screen.flex.overflow-hidden > aside > div:first-child,
#root > .min-h-screen.flex.overflow-hidden > aside > div:last-child {
  border-color: #315152 !important;
}

#root > .min-h-screen.flex.overflow-hidden > aside h1,
#root > .min-h-screen.flex.overflow-hidden > aside h1 span {
  color: #f4fbfa !important;
}

#root > .min-h-screen.flex.overflow-hidden > aside button.text-gray-400,
#root > .min-h-screen.flex.overflow-hidden > aside button.text-gray-500,
#root > .min-h-screen.flex.overflow-hidden > aside button.text-gray-600,
#root > .min-h-screen.flex.overflow-hidden > aside button.text-gray-700 {
  color: #b8cecd !important;
}

#root > .min-h-screen.flex.overflow-hidden > aside button:not(.bg-indigo-50):hover {
  background: #214142 !important;
  color: #ffffff !important;
}

#root > .min-h-screen.flex.overflow-hidden > aside button.bg-indigo-50 {
  background: #e2f4f1 !important;
  color: #075f59 !important;
  box-shadow: inset 3px 0 0 #0a827a !important;
}

#root > .min-h-screen.flex.overflow-hidden > aside button.bg-indigo-50 svg {
  color: #08786f !important;
}

#root > .min-h-screen.flex.overflow-hidden > .flex-1 > header {
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 0 rgba(24, 48, 53, 0.04);
}

#root > .min-h-screen.flex.overflow-hidden > .flex-1 > main {
  background: #f1f5f4 !important;
}

#root > .min-h-screen.flex.overflow-hidden table {
  min-width: 720px;
}

#root > .min-h-screen.flex.overflow-hidden div:has(> table) {
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
}

#root > .min-h-screen.flex.overflow-hidden .rounded-xl,
#root > .min-h-screen.flex.overflow-hidden .rounded-2xl {
  border-radius: 8px !important;
}

#root > .min-h-screen.flex.overflow-hidden button,
#root > .min-h-screen.flex.overflow-hidden input,
#root > .min-h-screen.flex.overflow-hidden select,
#root > .min-h-screen.flex.overflow-hidden textarea {
  min-height: 38px;
}

/* Admin sign-in stays compact and readable. */
#root > .min-h-screen.flex.items-center.justify-center {
  background: #eaf0ef !important;
}

#root > .min-h-screen.flex.items-center.justify-center > .max-w-sm {
  border: 1px solid #cedbda !important;
  border-top: 4px solid var(--primary) !important;
  box-shadow: 0 20px 55px rgba(25, 55, 57, 0.14) !important;
}

#root > .min-h-screen.flex.items-center.justify-center .w-16.h-16 {
  border-radius: 8px !important;
  background: var(--primary-soft) !important;
}

@media (max-width: 640px) {
  main.container {
    padding-top: 5.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  nav .max-w-5xl {
    height: 58px !important;
  }

  .fixed.inset-0 > [class*="max-w-"] {
    max-height: 92vh;
  }

  #root > .min-h-screen.flex.overflow-hidden > .flex-1 > main {
    padding: 1rem !important;
  }

  #root > .min-h-screen.flex.overflow-hidden table {
    min-width: 680px;
  }
}