:root {
  --ui-bg: #f8fafc;
  --ui-surface: #ffffff;
  --ui-surface-2: #ffffff;
  --ui-border: rgba(51, 65, 85, 0.14);
  --ui-border-strong: rgba(51, 65, 85, 0.20);
  --ui-text: #334155;
  --ui-muted: #64748b;
  --ui-link: #2563eb;
  --ui-ring: rgba(37, 99, 235, 0.18);
  --ui-primary-bg: rgba(230, 244, 255, 0.95);
  --ui-primary-border: rgba(147, 197, 253, 0.55);
  --ui-primary-hover: rgba(219, 234, 254, 0.95);
  --ui-success-bg: rgba(16, 185, 129, 0.10);
  --ui-success-border: rgba(16, 185, 129, 0.26);
  --ui-success-text: #065f46;
  --ui-danger-bg: rgba(239, 68, 68, 0.10);
  --ui-danger-border: rgba(239, 68, 68, 0.24);
  --ui-danger-text: #991b1b;
  --ui-shadow: 0 1px 1px rgba(2, 6, 23, 0.04), 0 8px 18px rgba(2, 6, 23, 0.07);
  --ui-shadow-sm: 0 1px 1px rgba(2, 6, 23, 0.04);
}

html,
body {
  height: 100%;
}

body {
  background: #ffffff;
  color: var(--ui-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100%;
}

/* Cards / panels */
div.border.border-slate-200.rounded-lg {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

/* navbar */
.border-b.border-slate-200 {
  border-color: var(--ui-border) !important;
  background: #f1f5f9;
}

.text-slate-500 {
  color: var(--ui-muted) !important;
}

.text-slate-600 {
  color: #475569 !important;
}

.text-slate-800 {
  color: #334155 !important;
}

/* Tables */
table {
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  background: rgba(248, 250, 252, 0.98);
  color: #334155;
}

.divide-y.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

tbody tr:hover {
  background: rgba(239, 246, 255, 0.75) !important;
}

tbody td {
  color: #0f172a;
}

/* Inputs */
input,
select,
textarea {
  border-color: rgba(15, 23, 42, 0.16) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 1px 0 rgba(2, 6, 23, 0.02);
}

input::placeholder {
  color: rgba(71, 85, 105, 0.75);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.35) !important;
  box-shadow: 0 0 0 4px var(--ui-ring) !important;
}

/* Buttons */
button {
  letter-spacing: 0.01em;
}

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

button.rounded-full.bg-slate-900 {
  background: var(--ui-primary-bg) !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-primary-border) !important;
  box-shadow: 0 1px 1px rgba(2, 6, 23, 0.03);
}

button.rounded-full.bg-slate-900:hover {
  background: var(--ui-primary-hover) !important;
}

button.rounded-full.bg-slate-900:disabled {
  background: rgba(255, 255, 255, 0.70) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}

button.rounded-full.bg-white {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}

button.rounded-full.bg-white:hover {
  background: rgba(248, 250, 252, 0.98) !important;
  border-color: rgba(51, 65, 85, 0.22) !important;
}

button.rounded-full:disabled {
  opacity: 0.65;
}

button.rounded-lg {
  border-color: rgba(15, 23, 42, 0.14) !important;
}

/* Subtle, classy action accents */
.ui-btn-success {
  background: var(--ui-success-bg) !important;
  border-color: var(--ui-success-border) !important;
  color: var(--ui-success-text) !important;
}

.ui-btn-success:hover {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
}

.ui-btn-danger {
  background: var(--ui-danger-bg) !important;
  border-color: var(--ui-danger-border) !important;
  color: var(--ui-danger-text) !important;
}

.ui-btn-danger:hover {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.30) !important;
}

button:focus {
  outline: none;
}

button:focus-visible {
  box-shadow: 0 0 0 4px var(--ui-ring) !important;
}

/* Subtle nicer monospace */
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-xs {
  letter-spacing: 0.01em;
}

.bg-slate-50 {
  background-color: rgba(248, 250, 252, 0.92) !important;
}

.border-slate-300 {
  border-color: rgba(15, 23, 42, 0.16) !important;
}

.border-slate-200 {
  border-color: rgba(15, 23, 42, 0.10) !important;
}