:root { color-scheme: light; --ink:#182522; --muted:#6a7974; --line:#dce6e1; --paper:#f6faf7; --card:#fff; --mint:#b9ead2; --mint-deep:#2c8061; --coral:#d95f52; --shadow:0 18px 50px rgba(26,57,46,.09); }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button { border:0; border-radius:10px; cursor:pointer; padding:10px 15px; font-weight:650; }
button.primary { background:var(--ink); color:#fff; }
button.secondary { background:#edf4f0; color:var(--ink); }
button.danger { background:#fff0ee; color:#aa3d32; }
button:disabled { opacity:.55; cursor:wait; }
.topbar { align-items:center; background:#fff; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:18px clamp(20px,5vw,70px); }
.brand { align-items:center; display:flex; gap:12px; font-size:20px; font-weight:800; letter-spacing:-.04em; }
.brand-mark { align-items:center; background:var(--mint); border-radius:12px; display:flex; height:35px; justify-content:center; width:35px; }
.brand-mark:after { background:var(--ink); border-radius:50%; content:""; height:12px; width:12px; }
.topbar small { color:var(--muted); }
main { margin:auto; max-width:1440px; padding:38px clamp(20px,5vw,70px) 70px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(30px,4vw,46px); letter-spacing:-.06em; line-height:1; margin-bottom:9px; }
h2 { letter-spacing:-.03em; }
.intro { color:var(--muted); margin-bottom:32px; }
.toolbar { align-items:center; display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.toolbar input,.toolbar select,.login-card input { background:#fff; border:1px solid var(--line); border-radius:10px; color:var(--ink); min-height:42px; outline:none; padding:9px 12px; }
.toolbar input { flex:1 1 270px; }
input:focus,select:focus { border-color:var(--mint-deep); box-shadow:0 0 0 3px rgba(44,128,97,.12); }
.stats { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); margin-bottom:24px; }
.stat,.panel,.login-card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.stat { padding:19px 21px; }
.stat strong { display:block; font-size:28px; letter-spacing:-.05em; }
.stat span { color:var(--muted); font-size:13px; }
.panel { overflow:hidden; }
.table-wrap { overflow:auto; }
table { border-collapse:collapse; min-width:760px; width:100%; }
th { background:#f2f7f4; color:var(--muted); font-size:12px; font-weight:750; letter-spacing:.07em; padding:13px 18px; text-align:left; text-transform:uppercase; }
td { border-top:1px solid var(--line); padding:15px 18px; vertical-align:middle; }
tr.user-row { cursor:pointer; }
tr.user-row:hover td { background:#fbfefc; }
.user-name { font-weight:750; }
.subtle { color:var(--muted); font-size:13px; }
.pill { border-radius:999px; display:inline-block; font-size:12px; font-weight:750; padding:4px 9px; }
.pill.active { background:#e5f6ec; color:#27714f; }
.pill.banned { background:#fff0ee; color:#a74439; }
.empty { color:var(--muted); padding:42px 20px; text-align:center; }
.auth-screen { align-items:center; display:flex; min-height:calc(100vh - 74px); justify-content:center; padding:25px; }
.login-card { max-width:470px; padding:34px; width:100%; }
.login-card h1 { font-size:34px; }
.login-card label { color:var(--muted); display:block; font-size:13px; font-weight:700; margin:18px 0 6px; }
.login-card input { display:block; width:100%; }
.login-card button { margin-top:22px; width:100%; }
.login-card img { background:#fff; border:1px solid var(--line); border-radius:12px; display:block; margin:20px auto; max-width:220px; padding:8px; width:100%; }
.secret { background:#f2f7f4; border-radius:8px; display:block; font-size:13px; overflow:auto; padding:10px; user-select:all; }
.hint { color:var(--muted); font-size:13px; margin-top:18px; }
.error { color:var(--coral); font-size:13px; margin-top:12px; }
.hidden { display:none !important; }
dialog { border:0; border-radius:20px; box-shadow:0 25px 100px rgba(16,42,31,.25); max-height:90vh; max-width:1050px; padding:0; width:calc(100% - 32px); }
dialog::backdrop { background:rgba(16,38,29,.42); }
.dialog-inner { padding:28px; }
.dialog-head { align-items:flex-start; display:flex; gap:20px; justify-content:space-between; }
.dialog-head h2 { margin-bottom:3px; }
.close { background:#edf4f0; border-radius:50%; font-size:20px; height:37px; padding:0; width:37px; }
.detail-meta { display:grid; gap:10px; grid-template-columns:repeat(4,1fr); margin:23px 0; }
.meta-box { background:#f4f8f5; border-radius:12px; padding:12px; }
.meta-box span { color:var(--muted); display:block; font-size:12px; }
.meta-box strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-section { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; }
.detail-section h3 { margin-bottom:11px; }
.detail-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.profile-fields { display:grid; gap:8px 12px; grid-template-columns:minmax(120px,.35fr) minmax(220px,1fr); align-items:center; }
.profile-fields label { color:var(--muted); font-size:13px; font-weight:700; }
.profile-fields input { background:var(--card); border:1px solid var(--line); border-radius:10px; color:var(--ink); min-height:42px; padding:9px 11px; width:100%; }
.profile-fields input:focus { border-color:var(--mint-deep); box-shadow:0 0 0 3px color-mix(in srgb, var(--mint-deep) 20%, transparent); outline:0; }
.profile-form-actions { align-items:center; display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.profile-form-actions .subtle { min-height:1.5em; }
.library-table { min-width:650px; }
.library-table td,.library-table th { padding:11px 13px; }
@media (max-width:700px) { .stats { grid-template-columns:1fr; } .detail-meta { grid-template-columns:repeat(2,1fr); } .profile-fields { grid-template-columns:1fr; } .dialog-inner { padding:20px; } }

/* TomeHoard branding and the persisted admin-panel theme. */
:root {
  --chrome:#fff;
  --table-head:#eef5f1;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:#edf5f0;
  --muted:#a7b8af;
  --line:#30433a;
  --paper:#101714;
  --card:#19231f;
  --chrome:#17211d;
  --table-head:#22312b;
  --mint:#234d3d;
  --mint-deep:#7bd4ad;
  --coral:#ff9387;
  --shadow:0 18px 50px rgba(0,0,0,.28);
}

.topbar { background:var(--chrome); }

.table-wrap { background:var(--card); }

.brand { color:var(--ink); }

.toolbar input,
.toolbar select,
.login-card input {
  background:var(--card);
  border-color:var(--line);
  color:var(--ink);
}

thead,
th {
  background:var(--table-head);
  color:var(--muted);
}

tbody,
td {
  background:var(--card);
  color:var(--ink);
}

tr.user-row:hover,
tr.user-row:hover td { background:color-mix(in srgb, var(--card) 78%, var(--mint) 22%); }

.brand-mark {
  background:#f1d490;
  object-fit:contain;
  padding:0;
}

.brand-mark:after { display:none; }

.topbar-actions {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.login-card .login-logo {
  background:#f3ead5;
  border:0;
  display:block;
  margin:0 auto 22px;
  max-width:260px;
  padding:0;
}

button.primary {
  background:var(--ink);
  color:var(--paper);
}

button.secondary {
  background:#edf4f0;
  color:var(--ink);
}

button.danger {
  background:#fff0ee;
  color:#aa3d32;
}

input,
select {
  background:var(--card);
  border:1px solid var(--line);
  color:var(--ink);
  min-height:42px;
  padding:9px 12px;
}

input::placeholder { color:var(--muted); }

input:focus,
select:focus,
button:focus-visible {
  outline:3px solid color-mix(in srgb, var(--mint-deep) 35%, transparent);
  outline-offset:2px;
}

table { color:var(--ink); }

th,
td { border-color:var(--line); }

.subtle,
.topbar small,
.stat span,
.meta-box span { color:var(--muted); }

.pill.active { background:#d8f4e5; color:#196542; }
.pill.banned { background:#ffe0dc; color:#9d352c; }

dialog { background:var(--card); color:var(--ink); }

.meta-box,
.secret { background:color-mix(in srgb, var(--card) 72%, var(--mint) 28%); }

.close,
.dialog-head button { background:#edf4f0; color:var(--ink); }

:root[data-theme="dark"] button.secondary,
:root[data-theme="dark"] .close,
:root[data-theme="dark"] .dialog-head button {
  background:#26362f;
  color:var(--ink);
}

:root[data-theme="dark"] button.danger {
  background:#4b2825;
  color:#ffb4ab;
}

:root[data-theme="dark"] .pill.active {
  background:#1f4c39;
  color:#9ae3bb;
}

:root[data-theme="dark"] .pill.banned {
  background:#512b28;
  color:#ffb4ab;
}

:root[data-theme="dark"] .login-card img:not(.login-logo) {
  background:#f7faf8;
}

:root[data-theme="dark"] dialog::backdrop { background:rgba(0,0,0,.65); }