/* ===========================================================================
   PostSlate, dark filmic theme (ScrollX-inspired, our own look)
   =========================================================================== */
:root{
  --bg:#000000;
  --panel:#0d0d0d;
  --panel-2:#141414;
  --elev:#1b1b1b;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#ECECF2;
  --muted:#8B8B9A;
  --muted-2:#63636f;
  --accent:#15894f;
  --accent-2:#0c5e37;
  --accent-grad:linear-gradient(135deg,#15894f 0%,#0c5e37 100%);
  --good:#2ED175;
  --radius:14px;
  --radius-sm:9px;
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-credits:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);background-clip:padding-box}

/* ---- Brand mark ---------------------------------------------------------- */
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
.brand .logo{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
}
.brand .logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.brand .logo svg{width:17px;height:17px}
.brand .name{font-size:15.5px}
.brand .name .x{color:var(--accent)}

/* ===========================  EDITOR LAYOUT  ============================== */
.editor{display:grid;grid-template-rows:56px 1fr 54px;height:100vh;overflow:hidden}

.topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0d0d15,#0a0a11);
}
.topbar .left{display:flex;align-items:center;gap:14px}
.topbar .center{font-weight:600;letter-spacing:.14em;font-size:13px;color:#d7d7e2;text-transform:uppercase}
.topbar .right{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.iconbtn{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--muted);
  border:1px solid transparent;transition:.15s;
}
.iconbtn:hover{background:var(--panel-2);color:var(--text);border-color:var(--line)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-grad);display:grid;place-items:center;font-weight:700;color:#fff;font-size:13px}

.main{display:grid;grid-template-columns:220px 1fr 312px;min-height:0}

/* ---- Left: credit blocks nav -------------------------------------------- */
.blocks-panel{border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px}
.panel-head h3{margin:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.panel-head .hint{width:16px;height:16px;border-radius:50%;border:1px solid var(--line-2);color:var(--muted);font-size:10px;display:grid;place-items:center}
.blocks-list{overflow-y:auto;padding:4px 10px 16px;flex:1;min-height:0}
.block-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);
  color:var(--muted);font-weight:500;letter-spacing:.04em;font-size:12.5px;text-transform:uppercase;
  transition:.13s;border:1px solid transparent;user-select:none;
}
.block-item .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.block-item .count{margin-left:auto;font-size:10.5px;color:var(--muted-2);letter-spacing:0}
.block-item:hover{background:var(--panel-2);color:#cfcfdb}
.block-item.active{background:rgba(21,137,79,.14);color:#fff;border-color:rgba(21,137,79,.35)}
.block-item.active .dot{opacity:1;background:var(--accent)}

/* ---- Center: preview stage ---------------------------------------------- */
.stage{
  position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:26px;
  background:
    radial-gradient(1200px 500px at 50% -10%,rgba(21,137,79,.10),transparent 60%),
    var(--bg);
}
.screen-wrap{position:relative;width:100%;height:100%;display:grid;place-items:center}
.screen{
  position:relative;background:var(--canvas-bg,#000);overflow:hidden;border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  aspect-ratio:16/9;width:min(100%, calc((100vh - 56px - 54px - 52px) * 16 / 9));
  max-height:100%;
}
.roll{position:absolute;left:0;right:0;will-change:transform}
.title-safe{position:absolute;inset:5% 5%;border:1px dashed rgba(255,255,255,.22);border-radius:4px;pointer-events:none;display:none}
.title-safe.on{display:block}
.title-safe::after{content:"TITLE SAFE";position:absolute;top:6px;left:8px;font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.3)}

/* credits content */
.roll{font-family:var(--font-credits);color:var(--canvas-fg,#fff)}
.roll.upper{text-transform:uppercase}
.credit-block{padding:0 8%}
.credit-block.sep{border-top:1px dashed rgba(255,255,255,.16);margin-top:1.5em;padding-top:0}
.credit-block.sep.no-guides{border-top:none}
.block-heading{text-align:center;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  font-size:.92em;margin:0 0 .55em;color:var(--canvas-fg,#fff)}
.block-sub{text-align:center;color:rgba(255,255,255,.6);font-size:.62em;letter-spacing:.1em;margin:-.3em 0 .85em}
.credit-row{display:grid;align-items:baseline;margin:.13em 0;line-height:1.42}
.credit-row.double{grid-template-columns:1fr var(--gutter,64px) 1fr}
.credit-row.double .role{text-align:right;color:var(--role-color,#9a9aa2);font-weight:var(--role-weight,300)}
.credit-row.double .name{text-align:left;color:var(--name-color,#fff);font-weight:var(--name-weight,700)}
.credit-row.double .gap{}
.credit-row.center{grid-template-columns:1fr;text-align:center}
.credit-row.center .name{color:var(--name-color,#fff);font-weight:var(--name-weight,700)}
.credit-row.center .role{color:var(--role-color,#9a9aa2);font-weight:var(--role-weight,400)}
.credit-row.names-first.double .role{order:3}
.credit-row.names-first.double .name{order:1;text-align:right}
.role,.name{font-size:1em}
.credit-blurb{white-space:pre-line;text-align:center;color:var(--role-color,#9a9aa2);
  font-size:.92em;letter-spacing:.02em;line-height:1.5;max-width:72%;margin:0 auto}
.block-active-ring{outline:2px solid rgba(21,137,79,.7);outline-offset:6px;border-radius:6px}

/* selected-block highlight in preview */
.credit-block[data-selected="true"]{position:relative}
.credit-block[data-selected="true"]::before{
  content:"";position:absolute;inset:-6px 4%;border:1.5px solid rgba(21,137,79,.55);
  border-radius:8px;background:rgba(21,137,79,.05);pointer-events:none;
}

/* preview floating controls (play/restart) */
.preview-controls{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;
  background:rgba(12,12,18,.8);backdrop-filter:blur(10px);border:1px solid var(--line);
  padding:7px;border-radius:12px;z-index:5;
}
.preview-controls button{width:36px;height:36px;border-radius:8px;color:var(--text);display:grid;place-items:center}
.preview-controls button:hover{background:var(--panel-2)}
.preview-controls .play{background:var(--accent-grad);color:#fff;width:auto;padding:0 16px;gap:8px;font-weight:600;font-size:13px;display:flex;align-items:center}

/* ---- Right: inspector --------------------------------------------------- */
.inspector{border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;gap:4px;padding:14px 16px 0}
.tab{padding:8px 16px;border-radius:9px 9px 0 0;color:var(--muted);font-weight:600;font-size:13px}
.tab.active{color:#fff;background:rgba(21,137,79,.14)}
.inspector-body{overflow-y:auto;padding:18px 16px 24px;flex:1;min-height:0}
.field{margin-bottom:18px}
.field > label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.row-field{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px;margin-bottom:14px}
.row-field > label{font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.input,.select{
  width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:9px 11px;border-radius:9px;font-size:13px;transition:.13s;
}
.input:focus,.select:focus{outline:none;border-color:rgba(21,137,79,.6);background:#181822}
.input::placeholder{color:var(--muted-2)}
.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px}
.seg button{flex:1;padding:7px 8px;border-radius:7px;color:var(--muted);font-size:12px;font-weight:600;transition:.12s}
.seg button.active{background:rgba(21,137,79,.22);color:#fff}
.stepper{display:flex;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.stepper input{flex:1;background:none;border:none;color:var(--text);text-align:center;padding:9px;font-size:13px}
.stepper input:focus{outline:none}
.stepper button{width:34px;align-self:stretch;color:var(--muted);font-size:15px}
.stepper button:hover{background:#181822;color:var(--text)}
.field-note{font-size:11px;color:var(--muted-2);margin-top:6px;line-height:1.4}

/* ---- Bottom bar --------------------------------------------------------- */
.bottombar{
  display:flex;align-items:center;gap:22px;padding:0 18px;border-top:1px solid var(--line);
  background:linear-gradient(0deg,#0d0d15,#0a0a11);
}
.bottombar .group{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}
.bottombar .group label{letter-spacing:.04em}
.bottombar .mini{width:64px}
.bottombar .spacer{flex:1}
.check{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.check input{appearance:none;width:18px;height:18px;border-radius:5px;border:1px solid var(--line-2);background:var(--panel-2);display:grid;place-items:center;transition:.12s}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"✓";color:#fff;font-size:12px;font-weight:800}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;font-weight:600;font-size:13px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);transition:.14s}
.btn:hover{background:var(--elev);border-color:var(--line-2)}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--accent-grad);border:none;color:#fff;box-shadow:0 6px 18px rgba(21,137,79,.4)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent}

/* ---- Toast -------------------------------------------------------------- */
.toast-wrap{position:fixed;bottom:74px;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--elev);border:1px solid var(--line-2);padding:11px 16px;border-radius:11px;font-size:13px;display:flex;align-items:center;gap:10px;box-shadow:0 12px 30px rgba(0,0,0,.5);animation:toastin .25s ease}
.toast .ic{width:18px;height:18px;border-radius:50%;background:var(--good);display:grid;place-items:center;color:#04210f;font-weight:800;font-size:11px}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- Modal (render settings) ------------------------------------------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(4,4,8,.66);backdrop-filter:blur(4px);z-index:80;display:none;place-items:center;padding:24px}
.modal-backdrop.open{display:grid}
.modal{background:var(--panel);border:1px solid var(--line-2);border-radius:18px;width:min(760px,100%);max-height:90vh;overflow:auto;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:18px}
.modal-body{padding:22px 24px}
.modal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 20px}
.summary-line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px;color:var(--muted)}
.summary-line b{color:var(--text);font-weight:600}
.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-top:1px solid var(--line);background:var(--panel-2)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:4px 9px;border-radius:20px;background:rgba(21,137,79,.16);color:#8fe6b8;border:1px solid rgba(21,137,79,.3)}

/* ---------- logo panel (editor inspector) ---------- */
.logo-slots{display:flex;flex-wrap:wrap;gap:8px}
.logo-slot{position:relative;width:62px;height:62px;border-radius:10px;border:1px dashed var(--line-2);
  background:var(--panel-2);display:grid;place-items:center;cursor:pointer;transition:.12s;overflow:hidden}
.logo-slot:hover{border-color:var(--accent)}
.logo-slot.over{border-style:solid;border-color:var(--accent);background:rgba(21,137,79,.14)}
.logo-slot.filled{border-style:solid;border-color:var(--line);background:#0c0c12}
.logo-slot.editing{border-color:var(--accent);box-shadow:0 0 0 2px rgba(21,137,79,.4)}
.logo-slot img{max-width:86%;max-height:86%;object-fit:contain}
.logo-slot-ph{font-size:8.5px;line-height:1.25;letter-spacing:.1em;font-weight:700;color:var(--muted-2);text-align:center}
.logo-slot-x{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.65);
  color:#fff;font-size:12px;line-height:1;display:grid;place-items:center;opacity:0;transition:.12s}
.logo-slot.filled:hover .logo-slot-x{opacity:1}
.logo-slot.add{border-style:solid;border-color:var(--line);color:var(--muted);font-size:22px;font-weight:300}
.logo-slot.add:hover{color:var(--text);border-color:var(--accent)}
.logo-tools{display:flex;gap:8px;margin:14px 0 10px}
.logo-tools .logo-search{flex:1}
.logo-upload{display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:9px;background:var(--panel-2);
  border:1px solid var(--line-2);color:var(--text);font-size:12.5px;font-weight:600;white-space:nowrap;transition:.12s}
.logo-upload:hover{border-color:var(--accent);background:var(--elev)}
.logo-upload span{color:var(--accent);font-size:14px}
.logo-pool{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:10px;min-height:96px}
.logo-cell{position:relative;aspect-ratio:1;border-radius:9px;background:#0c0c12;border:1px solid var(--line);
  display:grid;place-items:center;cursor:grab;transition:.12s}
.logo-cell:hover{border-color:var(--accent)}
.logo-cell:active{cursor:grabbing}
.logo-cell img{max-width:78%;max-height:78%;object-fit:contain;pointer-events:none}
.logo-cell-x{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.65);
  color:#fff;font-size:12px;line-height:1;display:grid;place-items:center;opacity:0;transition:.12s}
.logo-cell:hover .logo-cell-x{opacity:1}
.logo-pool-empty{grid-column:1/-1;color:var(--muted-2);font-size:12px;line-height:1.5;text-align:center;padding:14px 6px}
.logo-adjust{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;margin:0 0 14px}
.logo-adjust-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;font-weight:700}
.logo-adjust-done{width:100%;margin-top:6px;padding:8px;border-radius:8px;background:rgba(21,137,79,.18);color:#fff;font-size:12px;font-weight:600;transition:.12s}
.logo-adjust-done:hover{background:rgba(21,137,79,.3)}

/* logos rendered in the credit roll */
.logo-roll-row{display:flex;justify-content:center;align-items:center;gap:6%;flex-wrap:wrap;padding:.4em 0}
.logo-roll-img{height:7.6em;width:auto;max-width:42%;object-fit:contain;transform-origin:center}
.logo-roll-empty{margin:.5em auto;width:9em;height:4em;border:1px dashed rgba(255,255,255,.3);border-radius:8px;
  display:grid;place-items:center;color:rgba(255,255,255,.5);font-size:.7em;letter-spacing:.16em}

/* ---------- spell / consistency guard banner ---------- */
.lint-banner{position:fixed;top:64px;left:50%;transform:translateX(-50%);width:min(560px,92vw);z-index:50;
  background:#0e0e10;border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.lint-head{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-bottom:1px solid var(--line)}
.lint-title{font-size:13.5px;font-weight:600;color:var(--text)}
.lint-x{color:var(--muted);font-size:15px;line-height:1;padding:2px 6px}
.lint-x:hover{color:var(--text)}
.lint-row{display:flex;align-items:flex-start;gap:10px;padding:9px 15px;font-size:13px;color:#d9d9e3;border-top:1px solid rgba(255,255,255,.04)}
.lint-row:first-of-type{border-top:none}
.lint-dot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:none}
.lint-foot{padding:9px 15px;border-top:1px solid var(--line);background:#0b0b0d;font-size:11.5px;color:var(--muted-2)}

/* ---------- match-to-music (render dialog) ---------- */
.song-btn{display:flex;align-items:center;gap:5px;padding:0 13px;border-radius:9px;background:var(--panel-2);border:1px solid rgba(21,137,79,.5);color:#5fd89a;font-size:12.5px;font-weight:600;white-space:nowrap}
.song-btn:hover{background:var(--elev);border-color:var(--accent)}
.song-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;background:#121212;border:1px solid rgba(21,137,79,.32);border-radius:9px;padding:8px 12px;font-size:12.5px}
.song-chip .song-name{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song-chip .song-len{color:var(--muted);white-space:nowrap;flex:none}

/* ---------- locked-version bar ---------- */
.lock-bar{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(21,137,79,.16);border-bottom:1px solid rgba(21,137,79,.4);color:#5fd89a;font-size:12.5px;text-align:center;padding:6px 12px;font-weight:500}
.block-item .hold-mark{margin-left:auto;color:#5fd89a;font-size:9px;letter-spacing:-1px}
.block-item .hold-mark + .count{margin-left:8px}

/* ---------- static cards mode (editor preview) ---------- */
.screen.cards-mode .roll{top:50%;transform-origin:center center;transition:opacity .45s ease}
.screen.cards-mode .credit-block{padding:0 9%}
.credit-block.as-card{border-top:none!important;margin-top:0;padding-top:0}