:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #070b14;
  color: #e5e7eb;
  --panel: #101827;
  --line: #263247;
  --accent: #38bdf8;
  --accent-2: #2563eb;
  --danger: #fb7185;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 15%, #123055 0, transparent 34rem),
    radial-gradient(circle at 85% 90%, #172554 0, transparent 30rem),
    #070b14;
}
.shell { width: min(92vw, 600px); margin: 6vh auto; }
.shell.wide { width: min(95vw, 1180px); }
header { margin-bottom: 2rem; }
h1 { margin: .25rem 0; font-size: clamp(2rem, 6vw, 3.5rem); letter-spacing: -.04em; }
h2 { margin-top: 0; }
a { color: var(--accent); }
.eyebrow { color: var(--accent); font-size: .75rem; letter-spacing: .22em; font-weight: 800; }
.tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.tabs button { flex: 1; background: transparent; border-color: var(--line); }
.tabs button.active { background: var(--accent-2); border-color: var(--accent-2); }
.panel, .toolbar, .table-wrap, .shell.wide section {
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 18px 55px #0005;
}
.panel { display: none; }
.panel.active { display: block; }
label { display: grid; gap: .45rem; margin-bottom: 1rem; font-size: .9rem; color: #cbd5e1; }
input, select, button {
  min-height: 44px;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #0b1220;
  color: #f8fafc;
  padding: .7rem .85rem;
  font: inherit;
}
button { cursor: pointer; background: var(--accent-2); border-color: var(--accent-2); font-weight: 700; }
button:hover { filter: brightness(1.12); }
button:disabled { opacity: .55; cursor: wait; }
button.secondary { background: #1e293b; border-color: #334155; }
button.small { min-height: 34px; padding: .35rem .6rem; margin-right: .5rem; }
.hint { margin-top: -0.5rem; color: #94a3b8; font-size: .8rem; }
.captcha-row, .code-row, .toolbar { display: flex; align-items: end; gap: .75rem; margin-bottom: 1rem; }
.captcha { min-width: 220px; height: 64px; overflow: hidden; border-radius: 8px; }
.code-row label { flex: 1; margin: 0; }
.message { margin: 1rem 0; padding: .9rem 1rem; border-radius: 8px; }
.message.hidden { display: none; }
.message.success { background: #064e3b; }
.message.error { background: #4c0519; color: #fecdd3; }
.admin-link { display: inline-block; margin-bottom: 1rem; font-weight: 700; }
.toolbar { margin-bottom: 1rem; }
.toolbar input { flex: 1; }
.table-wrap { overflow-x: auto; margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .8rem; border-bottom: 1px solid var(--line); text-align: left; white-space: pre-line; }
th { color: #94a3b8; font-size: .8rem; text-transform: uppercase; }
.audit-list { max-height: 320px; overflow: auto; color: #cbd5e1; }
@media (max-width: 600px) {
  .captcha-row, .code-row, .toolbar { align-items: stretch; flex-direction: column; }
  .captcha { width: 100%; }
}