*{box-sizing:border-box}
:root{
  --bg:#0b1220; --bg2:#0e1526; --panel:#0f1a2b; --text:#e2e8f0; --muted:#94a3b8;
  --blue:#3b82f6; --blue2:#2563eb; --danger:#ef4444; --guide:#93c5fd66;
}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #13223d;background:var(--bg2);position:sticky;top:0;z-index:50}
.brand{font-weight:700}.ver{opacity:.6;font-weight:500;margin-left:6px}
.actions .btn{margin-left:8px}

.layout{display:grid;grid-template-columns:280px 1fr 340px;gap:16px;padding:16px;align-items:start}
.sidebar-left,.sidebar-right{background:var(--panel);border:1px solid #13223d;border-radius:12px;padding:12px;position:sticky;top:64px;max-height:calc(100vh - 80px);overflow:auto}
.left-head{display:flex;align-items:baseline;justify-content:space-between}
.hint{color:var(--muted);font-size:12px}
.block-btn{display:block;width:100%;margin-bottom:8px;padding:10px;border-radius:10px;background:#12213a;border:1px solid #1b2a44;color:#e2e8f0;cursor:pointer}
.block-btn:hover{background:#152746}

.blocks .item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:#0b1427;border:1px solid #1e2b47;margin-bottom:8px}
.blocks .ttl{font-weight:600}
.block-actions{display:flex;gap:6px;margin-left:auto;opacity:.85}
.block-actions .act{border:0;background:#1f2a44;color:#cdd7ff;padding:4px 6px;border-radius:8px;cursor:pointer}
.block-actions .act:hover{background:#2a3758}

.page-canvas{display:flex;flex-direction:column;gap:20px}
.block{background:var(--panel);border:1px solid #13223d;border-radius:16px;padding:12px}
.block .title{font-weight:700;margin:2px 4px 10px}

.btn{background:var(--blue);border:none;color:white;padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{background:var(--blue2)}
.btn.small{padding:6px 8px}.btn.xsmall{padding:4px 6px;font-size:12px}
.btn-danger{background:var(--danger)}

.panel details{margin-bottom:10px}
.panel summary{cursor:pointer;color:#cbd5e1;margin-bottom:6px}
.panel label{display:flex;flex-direction:column;font-size:12px;color:#a7b7cf;margin-bottom:8px}
.panel input, .panel select{margin-top:6px;background:#0b1427;border:1px solid #20304d;border-radius:8px;color:#e2e8f0;padding:8px}

.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.hf{position:relative;border-radius:12px;overflow:hidden;background:#0a0f1d;border:1px solid #16233f}
.hf-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.95}
.hf-canvas{position:relative;min-height:320px;padding:16px}
.hf-item{position:absolute;user-select:none}
.hf-item.selected{outline:2px solid #60a5fa88;border-radius:8px}
.hf-text{padding:4px 6px;font-weight:700;letter-spacing:.2px}
.hf-btn{padding:10px 14px;background:var(--blue);border-radius:12px;box-shadow:0 6px 18px #1e3a8a55}
.hf-btn:hover{filter:brightness(1.05)}
.hf-img img{display:block;max-width:100%;height:100%;width:100%;object-fit:var(--fit,cover)}
.hf-rating{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:#0c172a;border:1px solid #1d2d4a}
.hf-rating .val{color:#86efac}
.hf-bottom{position:absolute;left:16px;right:16px;bottom:12px;display:flex;align-items:center;gap:14px}
.hf-bottom .hf-btn{margin-right:auto}

.guides{position:absolute;inset:0;pointer-events:none}
.guides .gline{position:absolute;background:var(--guide)}
.guides .gline.h{height:1px;left:0;right:0}
.guides .gline.v{width:1px;top:0;bottom:0}

.popular{padding:8px}
.popular .row{display:flex;gap:12px;overflow:auto;padding-bottom:8px}
.pop-card{min-width:280px;background:#0a1324;border:1px solid #16233f;border-radius:14px;padding:12px}
.pop-media{height:160px;background:#000;border-radius:10px;margin-bottom:8px}
.pop-title{font-weight:700}
.pop-by{color:#9fb0c8;font-size:12px}

.anim{opacity:0;transform:translate3d(0,6px,0);animation:fade .6s ease forwards}
.anim.fade{animation-name:fade}
.anim.slide{animation-name:slide}
.anim.zoom{animation-name:zoom}
@keyframes fade{to{opacity:1;transform:none}}
@keyframes slide{to{opacity:1;transform:none}}
@keyframes zoom{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

.palette{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.swatch{width:22px;height:22px;border-radius:6px;border:1px solid #1f2c45;cursor:pointer}