:root { --bg:#141414; --panel:#1e1e1e; --line:#333; --text:#eee; --dim:#999; --accent:#f5a623; --ok:#3ecf8e; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px system-ui,sans-serif; }
button { font:inherit; color:inherit; background:#2a2a2a; border:1px solid var(--line); border-radius:6px; padding:6px 10px; cursor:pointer; }
button:hover { background:#333; }
input { font:inherit; color:inherit; background:#111; border:1px solid var(--line); border-radius:6px; padding:6px 8px; }
header { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line); }
header h1 { font-size:16px; margin:0; }
.tabs { display:none; gap:6px; margin-left:auto; }
.tabs button.on { background:var(--accent); color:#000; }
main { display:grid; grid-template-columns:var(--lib-w, 340px) 6px minmax(0,1fr); height:calc(100vh - 49px); }
#library {  display:flex; flex-direction:column; min-height:0; }
#library .bar { padding:10px; display:flex; gap:8px; align-items:center; }
#library .bar input { flex:1; min-width:0; }
#grid { overflow:auto; padding:0 10px 10px; display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:6px; align-content:start; grid-auto-rows:max-content; flex:1; }
.tile { position:relative; aspect-ratio:9/16; background:#000; border-radius:6px; overflow:hidden; border:2px solid transparent; }
.tile img, .slot .box img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.tile .label { position:absolute; left:0; right:0; bottom:0; font-size:9px; padding:2px 3px; background:#000a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.tile.armed, .slot .box.armed { border-color:var(--accent); }
.live-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; pointer-events:none; }
#reel { overflow:auto; padding:14px; }
.reelbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.reelbar h2 { margin:0; font-size:16px; }
.total { color:var(--dim); }
.total.over { color:#ff6b6b; }
#playbtn { background:var(--accent); color:#000; border:0; font-weight:600; }
.section { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px; margin-bottom:10px; }
.section h3 { margin:0 0 8px; font-size:13px; color:var(--dim); font-weight:600; }
.slot .box { background:#111; border:2px dashed var(--line); }
.slot .box.filled { border-style:solid; }
.slot .box.dragover { border-color:var(--accent); }
.slot .stackbtn { z-index:2; position:absolute; top:3px; right:3px; background:#000c; border-radius:10px; padding:1px 6px; font-size:11px; border:0; }
.slot .meta { display:flex; gap:4px; align-items:center; margin-top:4px; color:var(--dim); font-size:11px; }
.slot .meta input { width:50px; padding:2px 4px; }
.stackpanel { margin-top:8px; padding:8px; background:#111; border-radius:6px; display:flex; flex-wrap:wrap; gap:8px; }
.stackpanel .item { width:70px; font-size:11px; }
.stackpanel .item .tile { margin-bottom:3px; }
.stackpanel button { padding:2px 5px; font-size:11px; }
.stackpanel .primary { color:var(--ok); }
.note { width:100%; }
#dock { display:none; position:fixed; left:0; right:0; bottom:0; padding:10px; background:var(--panel); border-top:1px solid var(--accent); align-items:center; gap:10px; }
#overlay { position:fixed; inset:0; background:#000e; display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px; z-index:10; }
#overlay.on { display:flex; }
#stage { position:relative; height:min(78vh,640px); aspect-ratio:9/16; background:#000; border-radius:8px; overflow:hidden; }
#overlay .info { color:var(--dim); }
@media (max-width:760px) {
  .tabs { display:flex; }
  main { grid-template-columns:1fr; height:auto; }
  #resizer { display:none; }
  #library, #reel { display:none; height:calc(100dvh - 49px); }
  body[data-tab="library"] #library { display:flex; border:0; }
  body[data-tab="reel"] #reel { display:block; }
  body.armed #dock { display:flex; }
  #reel, #grid { padding-bottom:70px; }
}

/* ---- Horizontal timeline ---- */
.tl-scroll { overflow-x:auto; padding-bottom:10px; }
.tl { display:inline-flex; gap:22px; align-items:flex-start; min-width:100%; padding-top:4px; }
.tl-main { display:flex; flex-direction:column; }
.groups { display:flex; gap:0; }
.group { padding:0 10px 0 6px; border-left:1px dashed #666; }
.thumbgroup { border-left:0; padding:0; }
.marker { display:inline-block; background:#2a2a2a; border:1px dashed #666; border-radius:4px; padding:3px 8px; margin-bottom:8px; font-size:12px; white-space:nowrap; }
.group { display:flex; flex-direction:column; }
.slots { display:flex; gap:6px; align-items:flex-end; margin-top:auto; }
.slot .box { position:relative; overflow:hidden; border-radius:6px; background:#111; border:2px dashed var(--line); }
.slot .box.filled { border-style:solid; border-color:#444; }
.slot .box.main { height:150px; }
.slot .box.over { margin-bottom:5px; }
.slot .box.over.filled { height:150px; }
.slot .box.over.empty { height:22px; width:100%; }
.slot .box.over .hint { position:absolute; inset:0; display:grid; place-items:center; color:#888; font-size:16px; line-height:1; pointer-events:none; }
.slot .box.dragover { border-color:var(--accent); }
.slot .modebtn { position:absolute; left:2px; bottom:2px; z-index:2; padding:0 5px; font-size:10px; background:#000c; border:0; border-radius:8px; }
.axis { position:relative; height:2px; background:#ddd; margin:10px 0 12px; }
.axis::after { content:""; position:absolute; right:-2px; top:-5px; border-left:10px solid #ddd; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.lane { display:flex; align-items:center; gap:8px; border:1px solid; border-radius:4px; padding:4px 6px; margin-bottom:8px; min-height:44px; }
.lane .lname { font-size:11px; font-weight:600; width:44px; }
.lane input { flex:1; min-width:0; background:transparent; border:0; }
.lane.voice { background:#f5a62318; border-color:#f5a62380; }
.lane.music { background:#4f7cff18; border-color:#4f7cff80; }
/* ▶ Play reel stage: overlay shown as a still */
#stage .host { position:absolute; inset:0; }
#stage[data-mode="split"] .host { top:50%; }
#stage[data-mode="split"] .ov { position:absolute; left:0; right:0; top:0; height:50%; width:100%; object-fit:cover; }
#stage[data-mode="insert"] .ov { position:absolute; left:50%; bottom:8%; width:42%; transform:translateX(-50%); border-radius:6px; box-shadow:0 2px 10px #000a; }
.slot .rmbtn { position:absolute; top:3px; right:3px; z-index:2; width:22px; height:22px; padding:0; line-height:20px; border:0; border-radius:11px; background:#000c; }
.slot .rmbtn:hover { background:#c33; }
.marker { display:flex; align-items:center; gap:6px; }
.marker span { flex:1; }
.marker button { padding:0 7px; line-height:18px; font-size:13px; }
/* Thumbnail: one tall block from the top of the timeline down to the bottom of the Music lane */
.tl { align-items:stretch; }
.thumbgroup { align-self:stretch; display:flex; flex-direction:column; }
.thumbgroup .slots { flex:1; align-items:stretch; margin-top:0; }
.slot.tall { display:flex; flex-direction:column; height:100%; }
.slot.tall .box.main { flex:1; height:auto; min-height:150px; }

/* Thin dark scrollbars everywhere */
* { scrollbar-width:thin; scrollbar-color:#555 transparent; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-thumb { background:#555; border-radius:4px; }
*::-webkit-scrollbar-track { background:transparent; }
/* Draggable divider between library and reel */
#resizer { cursor:col-resize; background:var(--line); touch-action:none; }
#resizer:hover, #resizer.drag { background:var(--accent); }
body.resizing { user-select:none; cursor:col-resize; }
.reelblock { margin-bottom:26px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.reelbar h2 { cursor:text; }
.addreel { background:var(--accent); color:#000; border:0; font-weight:600; padding:8px 16px; margin-bottom:30px; }
.reelname { font-size:16px; font-weight:700; width:min(220px, 40vw); background:transparent; border:1px solid transparent; padding:4px 6px; }
.reelname:hover { border-color:var(--line); }
.reelname:focus { border-color:var(--accent); background:#111; outline:0; }
/* Section editing */
.group { position:relative; }
.marker .secname { flex:1; min-width:0; width:100%; background:transparent; border:0; padding:0; font-size:12px; color:inherit; }
.marker .secname:focus { outline:1px solid var(--accent); border-radius:3px; }
.marker .secmore { padding:0 6px; line-height:18px; }
.secpanel { position:absolute; top:34px; left:4px; z-index:20; width:210px; background:#262626; border:1px solid #555; border-radius:8px; padding:10px; box-shadow:0 6px 24px #000a; display:flex; flex-direction:column; gap:8px; font-size:12px; }
.secpanel .prow { display:flex; align-items:center; gap:6px; }
.secpanel .prow input { width:62px; padding:2px 4px; }
.secpanel .prow > :first-child { flex:1; }
.secpanel button:disabled { opacity:.35; cursor:default; }
.addsec { align-self:flex-start; margin:0 0 0 10px; padding:3px 8px; font-size:12px; background:transparent; border:1px dashed #666; }
/* phone: thumbnail stays a normal-size tile (must come after the desktop thumbnail rules) */
@media (max-width:760px) {
  .thumbgroup .slots { align-items:flex-start; }
  .slot.tall { height:auto; }
  .slot.tall .box.main { flex:none; height:150px; min-height:0; }
}