@import "tailwindcss";

@theme {
  --color-bg: #0b0d10;
  --color-surface: #11141a;
  --color-surface-2: #161a21;
  --color-surface-3: #1c212a;
  --color-border: #232831;
  --color-border-strong: #2f3641;
  --color-ink: #e7e9ee;
  --color-ink-2: #aab1bd;
  --color-ink-3: #6f7784;
  --color-accent: #3987e5;
  --color-accent-2: #d95926;
  --color-accent-3: #199e70;
  --color-good: #22a06b;
  --color-warn: #c98500;
  --color-bad: #e66767;
  --color-violet: #9085e9;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

:root {
  color-scheme: dark;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
}

html, body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { scrollbar-width: thin; scrollbar-color: #2f3641 transparent; }

.num { font-variant-numeric: tabular-nums; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em; border: 1px solid transparent; white-space: nowrap;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--color-border-strong); background: var(--color-surface-2); color: var(--color-ink);
  transition: background 120ms, border-color 120ms, opacity 120ms; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--color-surface-3); border-color: #3a4250; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: white; }
.btn-primary:hover { background: #4a93ea; border-color: #4a93ea; }
.btn-danger { background: transparent; border-color: #5a2b2b; color: var(--color-bad); }
.btn-danger:hover { background: #2a1616; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-ink-2); }
.btn-ghost:hover { background: var(--color-surface-2); color: var(--color-ink); }
.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; }

.input {
  height: 34px; padding: 0 10px; border-radius: 8px; font-size: 13px; width: 100%;
  border: 1px solid var(--color-border-strong); background: var(--color-bg); color: var(--color-ink); outline: none;
}
.input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(57,135,229,0.18); }
textarea.input { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; }
select.input { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, #6f7784 50%), linear-gradient(135deg, #6f7784 50%, transparent 50%); background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px; background-size: 5px 5px; background-repeat: no-repeat; }

.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl th { text-align: left; font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); padding: 8px 12px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.row-link { cursor: pointer; }
.tbl tr.row-link:hover td { background: var(--color-surface-2); }

.label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-3); font-weight: 500; }
.mono { font-family: var(--font-mono); }
.prose-sm p { margin: 0 0 8px; }
.prose-sm code { font-family: var(--font-mono); font-size: 12px; background: var(--color-surface-3); padding: 1px 5px; border-radius: 4px; }
.prose-sm pre { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; overflow: auto; font-size: 12px; margin: 8px 0; }
.prose-sm pre code { background: none; padding: 0; }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
.spin { animation: spin 0.9s linear infinite; }