/* Admin uses the landing page's dark brand tokens (decision 0029). */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/fonts/Inter-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-weight: 700; font-display: swap; src: url('/fonts/InterDisplay-Bold.ttf') format('truetype'); }

:root {
  --background: #0b1411;
  --foreground: #fff7e9;
  --card: #13221b;
  --muted-foreground: #a7b5ac;
  --border: #26392f;
  --input: #66796e;
  --primary: #a3e4bc;
  --primary-foreground: #0b1411;
  --destructive: #f97066;
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--background);
  color: var(--foreground);
  font: 400 15px/1.5 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--border);
}

.wordmark { display: inline-flex; align-items: center; gap: 8px; font: 700 18px/1 'Inter Display', 'Inter', sans-serif; }

.page { display: flex; flex-direction: column; gap: 16px; max-width: 1280px; margin: 0 auto; padding: 24px 16px 48px; }

[data-view] { display: flex; flex-direction: column; gap: 16px; }

[data-view='login'] { max-width: 420px; }

.eyebrow { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }

.title { margin: 0; font: 700 28px/1.15 'Inter Display', 'Inter', sans-serif; letter-spacing: -0.02em; }

.hint { margin: 0; color: var(--muted-foreground); }

.error { margin: 0; font-size: 14px; color: var(--destructive); }

.field { display: flex; flex-direction: column; gap: 8px; }

.field label { font-weight: 500; }

.input {
  min-height: 48px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: 6px;
}

.input:focus, :is(.btn-primary, .btn-ghost):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.btn-primary {
  align-self: flex-start;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 24px;
  font-weight: 500;
  background: var(--primary);
  color: var(--primary-foreground);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:disabled { opacity: 0.55; cursor: progress; }

.btn-ghost { min-height: 40px; padding: 6px 14px; background: none; border: 1px solid var(--input); border-radius: 999px; cursor: pointer; }

/* The table scrolls inside its own frame; the page never scrolls sideways. */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th, td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); white-space: nowrap; }

th { position: sticky; top: 0; background: var(--card); font-weight: 500; color: var(--muted-foreground); }

tbody tr:last-child td { border-bottom: 0; }

td:last-child { text-align: right; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.dialog::backdrop { background: rgb(0 0 0 / 0.64); }

.dialog-body { display: flex; flex-direction: column; gap: 20px; padding: 24px; }

.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.dialog-title { margin: 0; font: 700 20px/1.2 'Inter Display', 'Inter', sans-serif; overflow-wrap: anywhere; }

.answers { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.answers dt { margin-top: 12px; font-size: 13px; color: var(--muted-foreground); }
.answers dt:first-child { margin-top: 0; }
.answers dd { margin: 0; font-weight: 500; }