/* Sign-in, invite and admin pages. Same dark Neko Drop palette as the ticker. */

:root {
  --bg: #170f13;
  --bg-glow: #2a1820;
  --panel: #21171c;
  --panel-2: #2a1e24;
  --edge: rgba(247, 189, 209, 0.11);
  --edge-strong: rgba(247, 189, 209, 0.24);
  --ink: #fbf2f5;
  --muted: #bba3ad;
  --faint: #86707a;
  --pink: #f7bdd1;
  --pink-deep: #e98fb0;
  --cyan: #a9dfe8;
  --up: #5fe39a;
  --down: #ff7b93;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120vw 70vh at 15% -10%, var(--bg-glow), transparent 60%),
    var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
[hidden] { display: none !important; }
a { color: var(--pink); }

/* ------------------------------------------------------------------ sign-in + invite card */

.auth-page { display: grid; place-items: center; padding: 24px 16px; }
.auth-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge);
  border-radius: 18px;
  padding: 32px 28px 28px;
  display: grid;
  gap: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
/* Neko Drop logo on a cream badge (its plum outline would vanish on the dark background). */
.logo-badge {
  justify-self: start;
  align-self: start;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fdf4ec;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.logo-badge img { display: block; height: 72px; width: auto; }
.logo-badge-sm { padding: 6px 10px; border-radius: 11px; }
.logo-badge-sm img { height: 44px; }
.auth-card h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.eyebrow { font: 600 0.75rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 12px;
  border: 0;
  font: 600 1rem var(--sans);
  cursor: pointer;
  background: var(--pink);
  color: #2b1219;
  transition: transform 0.1s, background 0.2s;
}
.btn:hover { background: #fbd0de; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn svg { width: 22px; height: 22px; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--edge-strong); }
.btn-ghost:hover { background: rgba(247, 189, 209, 0.08); }
.btn-small { min-height: 34px; padding: 0 12px; font-size: 0.875rem; border-radius: 9px; }
.btn-danger { background: transparent; color: var(--down); border: 1px solid rgba(255, 123, 147, 0.4); }
.btn-danger:hover { background: rgba(255, 123, 147, 0.1); }

.notice { padding: 12px 14px; border-radius: 12px; font-size: 0.925rem; }
.notice-error { background: rgba(255, 123, 147, 0.12); color: #ffc2cd; border: 1px solid rgba(255, 123, 147, 0.3); }
.notice-ok { background: rgba(95, 227, 154, 0.12); color: #bff5d6; border: 1px solid rgba(95, 227, 154, 0.3); }

.steps { margin: 0; padding-left: 20px; color: var(--muted); font-size: 0.925rem; display: grid; gap: 4px; }

/* ------------------------------------------------------------------ admin */

.admin { max-width: 980px; margin: 0 auto; padding: 24px 16px 64px; display: grid; gap: 20px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-head .brand { display: flex; align-items: center; gap: 12px; }
.admin-head h1 { font-size: 1.4rem; font-weight: 700; }
.admin-head nav { display: flex; gap: 8px; }

.section {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge);
  border-radius: 16px;
  padding: 20px;
  display: grid;
  gap: 14px;
}
.section h2 { font: 600 0.8rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); }
.section > p { color: var(--muted); font-size: 0.925rem; }

.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.form-row input,
.form-row select {
  flex: 1 1 200px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--edge-strong);
  background: rgba(23, 15, 19, 0.7);
  color: var(--ink);
  font: 1rem var(--sans);
}
.form-row select { flex: 0 1 170px; }
.form-row input:focus,
.form-row select:focus { outline: 2px solid var(--pink); outline-offset: 1px; }

.link-box {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(95, 227, 154, 0.08);
  border: 1px solid rgba(95, 227, 154, 0.3);
}
.link-box code {
  font: 0.85rem var(--mono);
  word-break: break-all;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.25);
  padding: 10px;
  border-radius: 8px;
}
.link-box .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.table { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
.table th {
  text-align: left;
  font: 600 0.72rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--edge);
}
.table td { padding: 10px 10px 10px 0; border-bottom: 1px solid rgba(247, 189, 209, 0.06); vertical-align: middle; }
.table td:last-child, .table th:last-child { text-align: right; padding-right: 0; }
.table .empty td { color: var(--faint); text-align: left; }
.tag { font: 600 0.72rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: rgba(169, 223, 232, 0.12); color: var(--cyan); }
.tag-admin { background: rgba(247, 189, 209, 0.14); color: var(--pink); }
.tag-used { background: rgba(95, 227, 154, 0.12); color: var(--up); }
.tag-dim { background: rgba(134, 112, 122, 0.18); color: var(--faint); }

@media (max-width: 640px) {
  .table thead { display: none; }
  .table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--edge); }
  .table td { border: 0; padding: 0; }
  .table td:last-child { grid-row: 1 / span 4; grid-column: 2; align-self: center; }
  .table td.hide-sm { display: none; }
}