:root{
  --black:#0a0a0a; --panel:#111214; --panel2:#17181c; --line:#2a2c33;
  --gold:#d4af37; --gold-dim:#9a7f2a; --gold-soft:rgba(212,175,55,.12);
  --text:#f2ede0; --muted:#a89f88; --red:#e5484d; --amber:#f5a524; --green:#46a758;
  --radius:10px;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* The `hidden` attribute must always win — author `display` rules (e.g. .modal-backdrop,
   .drawer) otherwise override the UA [hidden]{display:none} rule and render empty overlays. */
[hidden]{display:none!important;}
html,body{height:100%;}
body{
  background:var(--black); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#app{min-height:100vh; display:flex; flex-direction:column;}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px 20px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#101114,#0a0a0a);
  position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{color:var(--gold); font-size:26px; line-height:1;}
.brand-word{font-weight:800; letter-spacing:2px; font-size:14px; color:var(--gold);}
.brand-sub{font-size:11px; color:var(--muted);}
.project-meta{flex:1; min-width:200px;}
.project-meta h1{font-size:20px; letter-spacing:.5px;}
.project-sub{font-size:12px; color:var(--muted);}
.topbar-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.status-pill{
  font-size:11px; font-weight:700; letter-spacing:1.5px;
  border:1px solid var(--gold-dim); color:var(--gold);
  padding:6px 12px; border-radius:999px; background:var(--gold-soft);
}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--line); background:var(--panel2); color:var(--text);
  padding:9px 14px; border-radius:8px; font-size:13px; font-weight:600;
  cursor:pointer; transition:all .15s ease; white-space:nowrap;
}
.btn:hover{border-color:var(--gold-dim); background:#1d1e24;}
.btn b{background:var(--gold); color:#000; border-radius:999px; padding:1px 7px; font-size:11px; margin-left:4px;}
.btn.gold{background:linear-gradient(180deg,#e3c158,#b8912c); border-color:#8a6d1f; color:#111;}
.btn.gold:hover{filter:brightness(1.08);}
.btn.danger{border-color:#5c2326; color:#ff8a8e; background:#1c0f10;}
.btn.danger:hover{background:#2a1415;}
.btn.small{padding:6px 10px; font-size:12px;}
.btn.icon{padding:6px 10px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

/* ---------- toolbar ---------- */
.toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 20px; border-bottom:1px solid var(--line); background:var(--panel);
}
.toolbar-left{display:flex; align-items:center; gap:14px;}
#pageCountLabel{font-weight:700; font-size:14px; color:var(--gold);}
.hint{font-size:12px; color:var(--muted);}
.toolbar-right{display:flex; gap:8px;}

/* ---------- layout ---------- */
.layout{flex:1; display:flex; min-height:0;}
.grid-wrap{flex:1; padding:22px; overflow-y:auto;}

/* ---------- page grid ---------- */
.page-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
}
.page-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; cursor:grab; position:relative;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.page-card:hover{border-color:var(--gold-dim); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.5);}
.page-card.selected{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft);}
.page-card.dragging{opacity:.4; cursor:grabbing;}
.page-card.drop-before::before{
  content:""; position:absolute; left:-9px; top:0; bottom:0; width:4px;
  background:var(--gold); border-radius:2px; z-index:5;
}
.page-card.drop-after::after{
  content:""; position:absolute; right:-9px; top:0; bottom:0; width:4px;
  background:var(--gold); border-radius:2px; z-index:5;
}
.page-thumb{position:relative; aspect-ratio:3/4; background:#000; overflow:hidden;}
.page-thumb img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
.page-num{
  position:absolute; top:8px; left:8px; background:rgba(0,0,0,.75); color:var(--gold);
  font-weight:800; font-size:13px; padding:3px 9px; border-radius:6px; border:1px solid var(--gold-dim);
}
.badge{
  position:absolute; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px;
  display:flex; align-items:center; gap:4px;
}
.badge.err{top:8px; right:8px; background:var(--red); color:#fff;}
.badge.prop{bottom:8px; right:8px; background:var(--amber); color:#111;}
.badge.replaced{bottom:8px; left:8px; background:var(--green); color:#fff;}
.page-info{padding:10px 12px;}
.page-label{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.page-sub{font-size:11px; color:var(--muted); margin-top:2px;}
.page-move{display:flex; gap:6px; padding:0 12px 10px;}
.page-move button{
  flex:1; background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:6px; padding:5px 0; font-size:12px; cursor:pointer;
}
.page-move button:hover{border-color:var(--gold-dim);}

/* ---------- drawer ---------- */
.drawer{
  width:380px; max-width:92vw; border-left:1px solid var(--line); background:var(--panel);
  display:flex; flex-direction:column; overflow:hidden; flex-shrink:0;
}
.drawer-head{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line);}
.drawer-head h2{font-size:16px;}
.drawer-body{padding:16px; overflow-y:auto; flex:1;}
.drawer-preview{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#000; margin-bottom:14px;}
.drawer-preview img{width:100%; display:block;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:11px; font-weight:700; letter-spacing:1px; color:var(--muted); margin-bottom:6px; text-transform:uppercase;}
.field input[type=text], .field textarea, .field select{
  width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:10px 12px; font-size:14px; font-family:inherit;
}
.field textarea{min-height:76px; resize:vertical;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--gold);}
.err-item{
  border:1px solid #5c2326; background:#1c0f10; border-radius:8px; padding:10px 12px; margin-bottom:8px;
}
.err-item .err-cat{font-size:11px; font-weight:700; color:#ff8a8e; letter-spacing:.5px; text-transform:uppercase;}
.err-item .err-text{font-size:13px; margin:4px 0;}
.err-item .err-meta{font-size:11px; color:var(--muted);}
.err-item .err-resolve{margin-top:8px;}
.prop-item{
  border:1px solid var(--line); background:var(--panel2); border-radius:8px; padding:12px; margin-bottom:10px;
}
.prop-item .prop-author{font-size:12px; color:var(--gold); font-weight:700;}
.prop-item .prop-type{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px;}
.prop-item .prop-detail{font-size:13px; margin:6px 0;}
.prop-item .prop-img{width:100%; border-radius:6px; margin:8px 0; border:1px solid var(--line);}
.prop-actions{display:flex; gap:8px; margin-top:8px;}
.action-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.divider{height:1px; background:var(--line); margin:18px 0;}
h3.section{font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--gold); margin-bottom:10px;}
.empty-note{color:var(--muted); font-size:13px; padding:12px; text-align:center; border:1px dashed var(--line); border-radius:8px;}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{
  background:var(--panel); border:1px solid var(--gold-dim); border-radius:14px;
  max-width:560px; width:100%; max-height:88vh; overflow-y:auto; padding:24px;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
}
.modal h2{font-size:18px; margin-bottom:6px; color:var(--gold);}
.modal p{font-size:14px; color:var(--muted); margin-bottom:14px; line-height:1.5;}
.modal .modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap;}
.check-list{list-style:none; margin:12px 0;}
.check-list li{font-size:14px; padding:8px 0; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center;}
.check-list li:last-child{border-bottom:none;}
.check-ok{color:var(--green); font-weight:700;}
.check-warn{color:var(--amber); font-weight:700;}
code.inline{background:var(--panel2); border:1px solid var(--line); padding:2px 8px; border-radius:6px; font-size:12px; color:var(--gold);}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--panel2); border:1px solid var(--gold-dim); color:var(--text);
  padding:12px 22px; border-radius:999px; font-size:14px; z-index:200;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
}

/* ---------- view toggle ---------- */
.view-toggle{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.view-toggle .btn{border:none; border-radius:0; padding:7px 14px;}
.view-toggle .btn.active{background:linear-gradient(180deg,#e3c158,#b8912c); color:#111; font-weight:800;}
.view-toggle .btn:not(.active):hover{background:#1d1e24;}

/* ---------- spread view ---------- */
.page-grid.spread-view{display:block; max-width:1100px; margin:0 auto;}
.spread{margin-bottom:30px;}
.spread-label{
  font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px; padding-left:2px;
}
.spread-pages{display:flex; gap:18px; align-items:stretch;}
.spread-pages .page-card{flex:1 1 0; min-width:0;}
.spread.cover-spread .spread-pages{justify-content:center;}
.spread.cover-spread .page-card{flex:0 1 360px;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .layout{flex-direction:column;}
  .drawer{width:100%; border-left:none; border-top:1px solid var(--line); max-height:60vh;}
  .page-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px;}
  .topbar-actions .btn.ghost span.hide-m{display:none;}
  .spread-pages{flex-direction:column; gap:14px;}
  .spread.cover-spread .page-card{flex:1 1 auto;}
}