:root { --ink:#f8f5fa; --paper:#312d55; --deep:#272446; --lilac:#cfbddb; --accent:#ad79c2; --line:rgb(207 189 219 / .45); --danger:#ffb5bd; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:Arial,Helvetica,sans-serif; background:var(--deep); }
.manage-page { min-height:100vh; background:radial-gradient(ellipse 55% 65% at 50% 115%,rgb(179 104 196 / .48%),transparent 70%),radial-gradient(ellipse 50% 54% at 100% 0,rgb(90 45 135 / .65%),transparent 75%),linear-gradient(123deg,#242142,#35305c 48%,#2a294f); }
header { max-width:1320px; margin:auto; min-height:92px; padding:18px clamp(22px,4vw,56px); border-bottom:3px solid var(--lilac); display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); text-decoration:none; display:flex; flex-direction:column; line-height:1; }
.brand span,.eyebrow { color:var(--lilac); font-size:11px; font-weight:700; letter-spacing:.16em; }
.brand span { margin-bottom:5px; }.brand strong { font:700 26px Georgia,serif; letter-spacing:.03em; }.display-link { background:var(--lilac); color:#251d3b; padding:14px 17px; text-decoration:none; font-size:13px; font-weight:700; }
main { max-width:1320px; margin:auto; padding:clamp(30px,4vh,48px) clamp(22px,4vw,56px); }.intro { margin-bottom:26px; }.intro>p { max-width:620px; line-height:1.6; color:#eee8f1; margin:0; }
.editor { padding-top:0; }.section-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:24px; }.instructions { max-width:620px; line-height:1.6; color:#eee8f1; margin:0; }.eyebrow { margin:0 0 9px; font-size:12px; }
.primary,.secondary,.card-actions button { border:0; cursor:pointer; font:700 14px Arial; padding:15px 18px; }.primary { background:var(--accent); color:#251d3b; }.primary:hover { background:#c797d7; }.secondary { background:var(--lilac); color:#251d3b; }
.page-list { display:grid; gap:9px; }.page-card { border:1px solid var(--line); background:rgb(49 45 85 / .87); padding:9px 14px 9px 6px; display:flex; align-items:center; gap:15px; transition:.15s; }.page-card.dragging { opacity:.4; }.page-card.drag-over { border-color:var(--ink); transform:translateY(-2px); }.drag { font-size:22px; color:var(--lilac); cursor:grab; padding:10px 5px; }.thumb { width:54px; height:78px; flex:none; background:#272446 center/cover no-repeat; border:1px solid var(--line); }.thumb.no-image { background:repeating-linear-gradient(45deg,#39355d,#39355d 8px,#4d486d 8px,#4d486d 16px); }.page-info { flex:1; min-width:0; }.page-info h3 { font-size:15px; margin:0 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.page-info p { margin:0; color:var(--lilac); font-size:12px; }.card-actions { display:flex; gap:5px; }.card-actions button { padding:8px 9px; background:transparent; color:var(--ink); font-size:12px; }.card-actions .delete { color:var(--danger); }
.empty { text-align:center; padding:64px 20px; border:1px dashed var(--line); color:var(--lilac); }.empty div { font-size:34px; }.empty h3 { color:var(--ink); margin:10px 0 4px; }.empty p { font-size:13px; margin:0; }
dialog { border:1px solid var(--lilac); width:min(500px,calc(100% - 32px)); padding:0; box-shadow:0 22px 70px #130f29cc; background:var(--paper); color:var(--ink); } dialog::backdrop { background:#110e24a8; } dialog form { padding:28px; }.dialog-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }.dialog-head h2 { font:700 26px Georgia,serif; margin:0; }.icon-button { border:0; background:none; font-size:28px; color:var(--lilac); cursor:pointer; } label { display:block; font-size:13px; font-weight:700; margin:15px 0 6px; } label span { font-weight:400; color:var(--lilac); } input { margin-top:7px; width:100%; border:1px solid var(--line); background:#fff; color:#292444; padding:11px 12px; font:14px Arial; } input[type=file] { padding:8px; }.upload-hint { font-size:11px; color:var(--lilac); margin-top:6px; }.current-image { margin-top:15px; }.current-image img { display:block; width:88px; height:130px; object-fit:cover; margin-bottom:7px; }.remove-image { border:0; background:none; color:var(--danger); padding:0; cursor:pointer; }.form-error { color:var(--danger); font-size:13px; min-height:18px; margin:13px 0 0; }.dialog-actions { margin-top:18px; display:flex; justify-content:end; gap:8px; }
.display-page { background:var(--deep); overflow:hidden; }.billboard { width:100vw; height:100vh; position:relative; overflow:hidden; background:radial-gradient(ellipse 60% 80% at 50% 100%,#573c70,#272446 70%); }.slide { position:absolute; inset:0; background:#272446 center/contain no-repeat; transform:translate3d(100%,0,0); transition:transform .8s cubic-bezier(.65,0,.35,1); will-change:transform; backface-visibility:hidden; }.slide.current { transform:translate3d(0,0,0); }.slide.leaving { transform:translate3d(-100%,0,0); }.display-empty { height:100%; display:grid; place-content:center; text-align:center; color:var(--lilac); font:clamp(17px,2vw,28px) Georgia,serif; }.display-empty span { font:55px Arial; color:var(--accent); text-align:center; }.display-meta { position:fixed; bottom:22px; left:28px; right:28px; border-top:2px solid var(--lilac); padding-top:10px; display:flex; justify-content:space-between; color:var(--ink); opacity:0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; transition:opacity .3s; }.display-page:hover .display-meta { opacity:.8; }
@media(max-width:600px) { header { min-height:76px; }.brand strong { font-size:20px; }.section-heading { align-items:start; gap:14px; }.page-card { gap:9px; padding-right:5px; }.thumb { width:42px; height:62px; }.card-actions { flex-direction:column; }.card-actions button { padding:3px 5px; }.drag { display:none; } }