:root{
  --bg:#17131f; --card:#221c2c; --ink:#f4ecdc; --soft:#c9bfae; --gold:#e7c07a; --gold-d:#b9914a;
  --line:rgba(231,192,122,.28); --err:#ff8a80; --ok:#9be3a4; --field:#15111c; --btn-ink:#1b1622;
  box-sizing:border-box;
}
*,*::before,*::after{ box-sizing:inherit; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --bg:#f5efe4; --card:#fffaf1; --ink:#2a2118; --soft:#6b5d4b; --gold:#8a5a14; --gold-d:#6b440c; --line:rgba(138,90,20,.25); --err:#b3261e; --ok:#1e7a33; --field:#fff; --btn-ink:#fff; }
}
:root[data-theme="dark"]{ --bg:#17131f; --card:#221c2c; --ink:#f4ecdc; --soft:#c9bfae; --gold:#e7c07a; --gold-d:#b9914a; --line:rgba(231,192,122,.28); --err:#ff8a80; --ok:#9be3a4; --field:#15111c; --btn-ink:#1b1622; }
html,body{ margin:0; min-height:100%; background:var(--bg); color:var(--ink); font:17px/1.55 "Alegreya Sans", "Segoe UI", system-ui, sans-serif; }
body{ padding:32px 16px 48px; }
.card{ max-width:460px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px 26px; }
.card.wide{ max-width:980px; }
h1{ font-family:"Cinzel", Georgia, serif; font-weight:600; font-size:22px; letter-spacing:.04em; color:var(--gold); margin:0 0 4px; text-align:center; }
h2{ font-family:"Cinzel", Georgia, serif; font-size:19px; margin:0 0 14px; }
.lead{ color:var(--soft); text-align:center; margin:0 0 22px; }
label{ display:block; font-weight:600; margin:14px 0 6px; }
input[type=email],input[type=password],input[type=text]{ width:100%; padding:12px 14px; font:inherit; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:10px; }
input:focus-visible,button:focus-visible,a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.hint{ font-size:14px; color:var(--soft); margin:6px 0 0; }
.check{ display:flex; gap:10px; align-items:flex-start; margin:18px 0 4px; font-weight:400; }
.check input{ margin-top:4px; width:18px; height:18px; flex:none; }
button.primary{ width:100%; margin-top:20px; padding:13px; font:inherit; font-weight:700; color:var(--btn-ink); background:var(--gold); border:0; border-radius:999px; cursor:pointer; }
button.primary:hover{ background:var(--gold-d); color:#fff; }
button.primary:disabled{ opacity:.6; cursor:default; }
button.small{ font:inherit; font-size:15px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; }
button.small.go{ background:var(--gold); color:var(--btn-ink); border-color:transparent; font-weight:700; }
.msg{ margin:16px 0 0; padding:12px 14px; border-radius:10px; font-size:16px; display:none; }
.msg.show{ display:block; }
.msg.err{ background:rgba(255,138,128,.12); color:var(--err); border:1px solid rgba(255,138,128,.35); }
.msg.ok{ background:rgba(155,227,164,.12); color:var(--ok); border:1px solid rgba(155,227,164,.35); }
.links{ text-align:center; margin-top:18px; font-size:15px; }
.links a{ color:var(--gold); }
.badge{ display:inline-block; padding:3px 12px; border-radius:999px; font-size:14px; font-weight:700; }
.badge.pending{ background:rgba(231,192,122,.18); color:var(--gold); }
.badge.approved{ background:rgba(155,227,164,.16); color:var(--ok); }
.badge.suspended{ background:rgba(255,138,128,.16); color:var(--err); }
.row{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:15px; }
th,td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
th{ color:var(--soft); font-weight:600; }
td .actions{ display:flex; gap:6px; flex-wrap:wrap; }
.note{ font-size:14px; color:var(--soft); }
button.small:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- dashboard ---------- */
.dash{ max-width:1080px; margin:0 auto; }
.topbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:18px; }
.topbar h1{ text-align:left; margin:0; }
.topbar .right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.topbar a.small{ font-size:15px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); color:var(--ink); text-decoration:none; }
.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px; }
.tabs button{ font:inherit; font-size:16px; padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; }
.tabs button[aria-selected="true"]{ background:var(--gold); color:var(--btn-ink); border-color:transparent; font-weight:700; }
.panel{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; margin-bottom:18px; }
.panel h2{ margin:0 0 6px; }
.panel .sub{ color:var(--soft); margin:0 0 14px; font-size:15px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media (max-width:700px){ .grid2{ grid-template-columns:1fr; } }
select,textarea{ width:100%; padding:12px 14px; font:inherit; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:10px; }
textarea{ min-height:130px; resize:vertical; }
.count{ font-size:13px; color:var(--soft); text-align:right; margin-top:4px; }
.btnrow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px; }
button.primary.inline{ width:auto; margin-top:0; padding:11px 22px; }
button.danger{ font:inherit; font-size:15px; padding:9px 16px; border-radius:999px; border:1px solid rgba(255,138,128,.5); background:transparent; color:var(--err); cursor:pointer; }
.books{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; }
.bookcard{ border:1px solid var(--line); border-radius:14px; padding:10px; background:var(--field); cursor:pointer; text-align:left; font:inherit; color:var(--ink); display:flex; flex-direction:column; gap:8px; }
.bookcard:hover{ border-color:var(--gold); }
.bookcard .thumb{ aspect-ratio:2/3; border-radius:6px; background:linear-gradient(135deg,rgba(231,192,122,.18),rgba(231,192,122,.04)); display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--soft); font-size:14px; text-align:center; padding:6px; }
.bookcard .thumb img{ width:100%; height:100%; object-fit:cover; }
.bookcard .t{ font-weight:700; line-height:1.3; }
.badge.draft{ background:rgba(201,191,174,.16); color:var(--soft); }
.badge.submitted{ background:rgba(127,180,255,.16); color:#8fc0ff; }
.badge.rejected{ background:rgba(255,138,128,.16); color:var(--err); }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .badge.submitted{ color:#1f5fae; } }
.note-box{ padding:12px 14px; border-radius:10px; background:rgba(255,138,128,.1); border:1px solid rgba(255,138,128,.35); color:var(--err); margin:10px 0; }
.drop{ border:2px dashed var(--line); border-radius:14px; padding:18px; text-align:center; }
.drop input[type=file]{ margin-top:8px; font:inherit; max-width:100%; }
.cover-stage{ margin-top:14px; }
.cover-stage canvas{ width:100%; height:auto; border-radius:8px; display:block; background:#000; }
.pieces{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-top:12px; }
.pieces figure{ margin:0; text-align:center; font-size:13px; color:var(--soft); }
.pieces img{ height:180px; width:auto; border-radius:4px; display:block; margin-bottom:4px; box-shadow:0 4px 12px rgba(0,0,0,.35); }
.warn{ padding:10px 14px; border-radius:10px; background:rgba(231,192,122,.12); border:1px solid var(--line); margin-top:10px; font-size:15px; }
.progress{ height:8px; border-radius:99px; background:rgba(231,192,122,.15); overflow:hidden; margin-top:10px; display:none; }
.progress.show{ display:block; }
.progress i{ display:block; height:100%; width:0; background:var(--gold); transition:width .2s; }
.items{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px; }
.items li{ display:flex; gap:12px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--field); }
.items .pv{ width:96px; height:54px; border-radius:6px; overflow:hidden; flex:none; background:#000; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; }
.items .pv img,.items .pv video{ width:100%; height:100%; object-fit:cover; }
.items .info{ flex:1; min-width:0; }
.items .info .n{ font-weight:600; overflow-wrap:anywhere; }
.items .info .s{ font-size:13px; color:var(--soft); }
.subhead{ font-family:"Cinzel", Georgia, serif; font-size:17px; margin:22px 0 4px; }
.radios{ display:flex; gap:16px; flex-wrap:wrap; margin:8px 0 4px; }
.radios label{ font-weight:400; display:flex; gap:8px; align-items:center; margin:0; }
.photo-row{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.photo-row .ph{ width:110px; height:110px; border-radius:50%; overflow:hidden; background:var(--field); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--soft); font-size:13px; }
.photo-row .ph img{ width:100%; height:100%; object-fit:cover; }
input[type=range]{ width:100%; accent-color:var(--gold); }
.inline-fields{ display:flex; gap:10px; flex-wrap:wrap; }
.inline-fields > *{ flex:1 1 220px; }