/* tokens live in tokens.css */
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%; overflow:hidden;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg); color:var(--ink); font-size:var(--fs);
  }
  button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
  input,textarea,select{font:inherit; color:inherit;}
  ::selection{background:var(--accent-soft);}

  /* ---------- layout ---------- */
  /* minmax(0,1fr): the topbar's min-content width must NEVER widen the app
     past the viewport (it silently pushed the Scene info panel off-screen
     on iPad — every row overflows together) */
  #app{display:grid; grid-template-rows:calc(60px + env(safe-area-inset-top)) auto 1fr; grid-template-columns:minmax(0,1fr); height:100%;}
  #topbar{
    display:flex; align-items:center; gap:10px; padding:0 14px;
    background:var(--panel); border-bottom:1px solid var(--border); min-width:0;
  }
  #main{display:grid; grid-template-columns:264px 1fr 266px; min-height:0;}

  .logo{display:flex; align-items:center; gap:8px; font-weight:600; letter-spacing:.2px;}
  .logo .dot{width:10px; height:10px; border-radius:var(--r-sm); background:var(--accent);}
  #shotTitle{
    border:1px solid transparent; border-radius:var(--r-sm); padding:4px 8px;
    width:220px; min-width:70px; max-width:300px; flex:0 1 auto;
    font-weight:600; background:transparent;
  }
  #shotTitle:hover{border-color:var(--border);}
  #shotTitle:focus{outline:none; border-color:var(--accent); background:var(--panel);}
  .topbar-right{margin-left:auto; display:flex; gap:8px; align-items:center;}
  .btn{
    padding:6px 12px; border-radius:var(--r-sm); border:1px solid var(--border);
    background:var(--panel); box-shadow:0 1px 1px rgba(40,38,32,.04);
    transition:background .12s,border-color .12s;
  }
  .btn:hover{background:var(--hover); border-color:var(--border2);}
  .btn.primary{background:var(--accent); border-color:var(--accent); color:var(--panel);}
  .btn.primary:hover{background:var(--accent-ink);}
  .btn:disabled{opacity:.5; cursor:default;}
  #helpBtn{
    width:30px; height:30px; border-radius:50%; border:1px solid var(--border);
    color:var(--ink2); font-weight:700;
  }
  #helpBtn:hover{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  #saveState{color:var(--ink2); font-size:11.5px; min-width:56px; text-align:right;}

  /* ---------- left sidebar ---------- */
  #sidebar{
    background:var(--panel); border-right:1px solid var(--border);
    display:flex; flex-direction:column; min-height:0;
  }
  .side-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 12px 6px; font-size:11px; font-weight:700; letter-spacing:.8px;
    text-transform:uppercase; color:var(--ink2);
  }
  .side-head button{
    width:22px; height:22px; border-radius:var(--r-sm); border:1px solid var(--border);
    font-size:14px; line-height:1; color:var(--ink2);
  }
  .side-head button:hover{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  #shotList{overflow-y:auto; padding:2px 8px 8px; max-height:26%; flex:none;}
  .shot-item{
    display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:var(--r-sm);
    cursor:pointer; user-select:none; border:1px solid transparent;
  }
  .shot-item:hover{background:var(--hover);}
  .shot-item.active{background:var(--accent-soft); border-color:var(--accent-soft);}
  .shot-item .num{
    font-size:11px; font-weight:700; color:var(--ink2); background:var(--soft);
    border-radius:var(--r-sm); padding:2px 6px; flex:none;
  }
  .shot-item.active .num{background:var(--accent-soft); color:var(--accent);}
  .shot-item .nm{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .shot-item .mini{
    opacity:0; flex:none; color:var(--ink2); font-size:13px; width:20px; height:20px; border-radius:var(--r-sm);
  }
  .shot-item:hover .mini{opacity:1;}
  .shot-item .mini:hover{background:var(--soft); color:var(--ink);}
  .shot-item input{
    flex:1; border:1px solid var(--accent); border-radius:var(--r-sm); padding:2px 6px; min-width:0; background:var(--panel);
  }

  #library{flex:1; overflow-y:auto; border-top:1px solid var(--border); padding-bottom:14px;}
  .cat-head{
    display:flex; align-items:center; gap:6px; padding:11px 12px 5px;
    font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
    color:var(--ink2); cursor:pointer; user-select:none;
  }
  .cat-head:hover{color:var(--ink);}
  .cat-head .arr{transition:transform .12s; font-size:9px;}
  .cat-head.closed .arr{transform:rotate(-90deg);}
  .lib-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:2px 10px 4px;}
  .lib-grid.hidden{display:none;}
  .lib-item{
    display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px 6px;
    border:1px solid var(--border); border-radius:var(--r-sm); cursor:grab; background:var(--hover);
    transition:box-shadow .12s,border-color .12s; user-select:none; position:relative;
    touch-action:pan-y; -webkit-user-select:none; -webkit-touch-callout:none;
  }
  .lib-item:hover{border-color:var(--border2); box-shadow:var(--shadow);}
  .lib-item:active{cursor:grabbing;}
  .lib-item canvas{pointer-events:none;}
  .lib-item span{font-size:10.5px; letter-spacing:-.1px; color:var(--ink2); white-space:nowrap; overflow:hidden; max-width:100%; text-align:center;}
  .lib-item .del-custom{
    position:absolute; top:2px; right:2px; width:16px; height:16px; font-size:11px; line-height:1;
    color:var(--ink2); border-radius:var(--r-sm); display:none;
  }
  .lib-item:hover .del-custom{display:block;}
  .lib-item .del-custom:hover{color:var(--danger); background:var(--danger-soft);}
  .lib-item.add-custom{border-style:dashed; color:var(--ink2); justify-content:center; min-height:66px; font-size:12px;}
  .lib-item.add-custom:hover{color:var(--accent); border-color:var(--accent);}

  /* ---------- canvas ---------- */
  #canvasWrap{position:relative; min-width:0; min-height:0; background:var(--bg);}
  #cv{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none;}
  #cv.tool-wall,#cv.tool-room,#cv.tool-poly{cursor:crosshair;}
  #cv.tool-door,#cv.tool-window{cursor:copy;}
  #cv.panning{cursor:grabbing;}
  #sunBtn.active{background:var(--warn-soft); color:var(--warn);}

  /* shot info form */
  #infoForm{padding:12px 14px 20px; display:flex; flex-direction:column;}
  #infoForm label{font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ink2); margin:10px 0 4px;}
  #infoForm input,#infoForm textarea,#infoForm select{
    border:1px solid var(--border); border-radius:var(--r-sm); padding:7px 9px; background:var(--panel); width:100%; resize:vertical;
  }
  #infoForm input:focus,#infoForm textarea:focus,#infoForm select:focus{outline:none; border-color:var(--accent);}
  #infoForm .irow{display:flex; gap:10px;}
  #infoForm .ihint{margin-top:14px; font-size:11px; color:var(--ink2); line-height:1.5; background:var(--hover); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 10px;}

  .hbtn{
    width:30px; height:30px; border-radius:var(--r-sm); border:1px solid var(--border);
    color:var(--ink2); font-size:14px;
  }
  .hbtn:hover:not(:disabled){background:var(--hover); color:var(--ink);}
  .hbtn:disabled{opacity:.35; cursor:default;}
  #toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
    background:var(--toast); color:var(--panel); padding:9px 16px; border-radius:var(--r-sm); font-size:12.5px;
    opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:80;
    box-shadow:0 8px 26px rgba(0,0,0,.28); max-width:70%;
  }
  #toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  #toolbar{
    position:absolute; top:14px; left:50%; transform:translateX(-50%);
    display:flex; gap:2px; padding:4px; background:var(--panel);
    border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--shadow); z-index:5;
  }
  #toolbar button{
    width:34px; height:34px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
    color:var(--ink2); position:relative;
  }
  #toolbar button:hover{background:var(--hover); color:var(--ink);}
  #toolbar button.on{background:var(--accent-soft); color:var(--accent);}
  #toolbar .sep{width:1px; background:var(--border); margin:5px 3px;}
  #toolbar button svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
  #inkBar{
    position:absolute; top:62px; left:50%; transform:translateX(-50%);
    display:none; align-items:center; gap:7px; padding:6px 10px;
    background:var(--panel); border:1px solid var(--border); border-radius:var(--r-sm);
    box-shadow:var(--shadow); z-index:5;
  }
  #inkBar.show{display:flex;}
  #inkBar .ink-w{
    width:30px; height:30px; border-radius:var(--r-sm); display:flex; align-items:center;
    justify-content:center; cursor:pointer; color:var(--ink2);
  }
  #inkBar .ink-w:hover{background:var(--hover);}
  #inkBar .ink-w.on{background:var(--accent-soft);}
  #inkBar .ink-w i{display:block; border-radius:50%; background:currentColor;}
  #inkBar .ink-c{
    width:20px; height:20px; border-radius:50%; cursor:pointer; border:2px solid transparent;
  }
  #inkBar .ink-c.on{border-color:var(--ink); box-shadow:0 0 0 2px var(--panel) inset;}
  #inkBar .ink-sep{width:1px; height:20px; background:var(--border);}
  #toolbar button[data-tip]:hover::after{
    content:attr(data-tip); position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%);
    background:var(--toast); color:var(--panel); padding:4px 8px; border-radius:var(--r-sm); font-size:11px; white-space:nowrap; pointer-events:none; z-index:9;
  }

  #zoomCtl{
    position:absolute; right:14px; bottom:14px; display:flex; align-items:center; gap:0;
    background:var(--panel); border:1px solid var(--border); border-radius:var(--r-sm); box-shadow:var(--shadow); z-index:5; overflow:hidden;
  }
  #zoomCtl button{width:30px; height:30px; color:var(--ink2); font-size:15px;}
  #zoomCtl button:hover{background:var(--hover); color:var(--ink);}
  #zoomPct{font-size:11.5px; color:var(--ink2); width:44px; text-align:center; cursor:pointer;}
  #hint{
    position:absolute; left:14px; bottom:14px; color:var(--ink2); font-size:11.5px;
    background:rgba(255,255,255,.85); border:1px solid var(--border); padding:5px 10px; border-radius:var(--r-sm);
    pointer-events:none; z-index:5; max-width:46%;
  }

  /* floating selection toolbar */
  #selBar{
    position:absolute; display:none; z-index:6; background:var(--panel); border:1px solid var(--border);
    border-radius:var(--r-sm); box-shadow:var(--shadow); padding:5px 6px; gap:5px; align-items:center; flex-wrap:wrap;
    max-width:520px;
  }
  #selBar.show{display:flex;}
  #selBar .sw{width:16px; height:16px; border-radius:var(--r-sm); cursor:pointer; border:2px solid transparent; flex:none;}
  #selBar .sw:hover{transform:scale(1.12);}
  #selBar .sw.on{border-color:var(--ink);}
  #selBar .sbtn{
    padding:4px 8px; border-radius:var(--r-sm); font-size:11.5px; color:var(--ink2); border:1px solid var(--border);
    white-space:nowrap;
  }
  #selBar .sbtn:hover{background:var(--hover); color:var(--ink);}
  #selBar .sbtn.danger:hover{background:var(--danger-soft); color:var(--danger); border-color:var(--danger-line);}
  #selBar input.lbl{
    width:98px; border:1px solid var(--border); border-radius:var(--r-sm); padding:3.5px 7px; font-size:11.5px;
  }
  #selBar input.lbl:focus{outline:none; border-color:var(--accent);}
  #selBar select{
    border:1px solid var(--border); border-radius:var(--r-sm); padding:3px 4px; font-size:11.5px; background:var(--panel);
    max-width:120px; color:var(--ink);
  }
  #selBar .vsep{width:1px; align-self:stretch; background:var(--border); margin:1px 1px;}

  /* sticky note editor */
  .note-ta{
    position:absolute; z-index:7; border:1.5px solid var(--accent); border-radius:var(--r-sm);
    background:transparent; resize:none; line-height:1.3; overflow:hidden; outline:none;
    font-family:inherit; color:var(--body);
  }

  /* custom prop popover */
  #customPop{
    position:absolute; z-index:20; display:none; background:var(--panel); border:1px solid var(--border);
    border-radius:var(--r-sm); box-shadow:0 8px 30px rgba(40,38,32,.16); padding:12px; width:196px;
  }
  #customPop.show{display:block;}
  #customPop label{display:block; font-size:10.5px; color:var(--ink2); margin:8px 0 3px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;}
  #customPop input,#customPop select{
    width:100%; border:1px solid var(--border); border-radius:var(--r-sm); padding:5px 8px;
  }
  #customPop input:focus{outline:none; border-color:var(--accent);}
  #customPop .row{display:flex; gap:8px;}
  #customPop .actions{display:flex; gap:8px; margin-top:12px;}
  #customPop .actions .btn{flex:1; text-align:center;}

  /* ---------- right panel ---------- */
  #rightPanel{
    background:var(--panel); border-left:1px solid var(--border);
    display:flex; flex-direction:column; min-height:0;
  }
  #tabs{display:flex; padding:8px 10px 0; gap:4px; border-bottom:1px solid var(--border);}
  #tabs button{
    padding:7px 12px 9px; font-weight:600; color:var(--ink2); border-radius:var(--r-sm) var(--r-sm) 0 0;
    border-bottom:2px solid transparent; margin-bottom:-1px;
  }
  #tabs button.on{color:var(--ink); border-bottom-color:var(--accent);}
  #tabs button:hover{color:var(--ink);}
  .tabPage{flex:1; overflow-y:auto; display:none; min-height:0;}
  .tabPage.on{display:flex; flex-direction:column;}

  /* stills */
  #stillsGrid{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px;}
  .still{
    position:relative; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--border);
    aspect-ratio:16/10; background:var(--soft); cursor:zoom-in;
  }
  .still img{width:100%; height:100%; object-fit:cover; display:block;}
  .still .x{
    position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:var(--r-sm);
    background:rgba(30,29,26,.55); color:var(--panel); font-size:12px; line-height:1; display:none;
  }
  .still .toB{
    position:absolute; bottom:4px; left:4px; padding:2px 7px; border-radius:var(--r-sm);
    background:rgba(30,29,26,.55); color:var(--panel); font-size:10px; display:none;
  }
  .still:hover .x,.still:hover .toB{display:block;}
  .still .x:hover{background:var(--danger);}
  .still .toB:hover{background:var(--accent);}
  #stillDrop{
    margin:12px 12px 0; padding:16px 10px; border:1.5px dashed var(--border2); border-radius:var(--r-sm);
    color:var(--ink2); text-align:center; cursor:pointer; font-size:12px; transition:border-color .12s,color .12s;
  }
  #stillDrop:hover,#stillDrop.over{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}

  /* comments */
  #commentList{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px;}
  .comment{background:var(--hover); border:1px solid var(--border); border-radius:var(--r-sm); padding:9px 11px;}
  .comment .meta{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px;}
  .comment .who{font-weight:600; font-size:12px;}
  .comment .when{font-size:10.5px; color:var(--ink2);}
  .comment .txt{white-space:pre-wrap; line-height:1.45;}
  .comment .cx{float:right; color:var(--ink2); font-size:11px; margin-left:6px; visibility:hidden;}
  .comment:hover .cx{visibility:visible;}
  .comment .cx:hover{color:var(--danger);}
  #commentForm{border-top:1px solid var(--border); padding:10px 12px 12px; display:flex; flex-direction:column; gap:7px;}
  #commentForm input,#commentForm textarea{
    border:1px solid var(--border); border-radius:var(--r-sm); padding:7px 9px; resize:none; background:var(--panel);
  }
  #commentForm input:focus,#commentForm textarea:focus{outline:none; border-color:var(--accent);}
  .empty-note{color:var(--ink2); text-align:center; padding:26px 14px; font-size:12px; line-height:1.5;}

  /* lightbox */
  #lightbox{
    position:fixed; inset:0; background:rgba(30,29,26,.82); display:none;
    align-items:center; justify-content:center; z-index:50; cursor:zoom-out;
  }
  #lightbox.show{display:flex;}
  #lightbox img{max-width:92%; max-height:92%; border-radius:var(--r-sm); box-shadow:0 20px 60px rgba(0,0,0,.5);}

  /* help overlay */
  #helpOverlay{
    position:fixed; inset:0; background:rgba(30,29,26,.45); display:none;
    align-items:flex-start; justify-content:center; z-index:60; overflow-y:auto; padding:40px 16px;
  }
  #helpOverlay.show{display:flex;}
  #helpCard{
    background:var(--panel); border-radius:var(--r-sm); box-shadow:0 24px 70px rgba(0,0,0,.3);
    max-width:680px; width:100%; padding:26px 30px 30px; position:relative;
  }
  #helpCard h2{font-size:18px; margin-bottom:4px;}
  #helpCard .sub{color:var(--ink2); margin-bottom:18px; font-size:12.5px;}
  #helpCard h3{
    font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--ink2);
    margin:18px 0 8px; padding-top:14px; border-top:1px solid var(--border);
  }
  #helpCard h3:first-of-type{border-top:none; padding-top:0; margin-top:8px;}
  #helpCard p{line-height:1.55; margin-bottom:6px; font-size:12.5px;}
  #helpCard .cols{display:grid; grid-template-columns:1fr 1fr; gap:4px 26px;}
  #helpCard .krow{display:flex; justify-content:space-between; align-items:center; padding:3.5px 0; font-size:12.5px;}
  kbd{
    background:var(--bg); border:1px solid var(--border2); border-bottom-width:2px; border-radius:var(--r-sm);
    padding:1px 6px; font-size:11px; font-family:inherit; color:var(--ink); white-space:nowrap;
  }
  #helpClose{
    position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:var(--r-sm);
    color:var(--ink2); font-size:16px;
  }
  #helpClose:hover{background:var(--bg); color:var(--ink);}

  #loading{
    position:fixed; inset:0; background:var(--bg); z-index:99; display:flex;
    align-items:center; justify-content:center; color:var(--ink2); gap:10px;
  }
  .spin{width:16px; height:16px; border:2px solid var(--border2); border-top-color:var(--accent); border-radius:50%; animation:sp 0.8s linear infinite;}
  @keyframes sp{to{transform:rotate(360deg);}}

  ::-webkit-scrollbar{width:9px; height:9px;}
  ::-webkit-scrollbar-thumb{background:var(--line2); border-radius:var(--r-sm); border:2px solid var(--panel);}
  ::-webkit-scrollbar-track{background:transparent;}
#exportPop{
  position:absolute; top:40px; right:0; z-index:60;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:0 14px 44px rgba(40,38,32,.16);
  padding:12px 14px; min-width:220px; display:none; text-align:left;
}
#exportPop.show{display:block;}
.topbar-right{position:relative;}
.xp-title{font-weight:600; font-size:12.5px; margin-bottom:8px; color:var(--ink);}
.xp-sub{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); margin:10px 0 4px;}
.xp-docs{display:flex; flex-direction:column; gap:3px; max-height:260px; overflow:auto; margin-bottom:2px;}
.xp-doc{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--ink);}
.xp-doc span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:4px;}
.xp-doc .btn{padding:2px 8px; font-size:11px;}
.xp-row{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink); padding:3px 0; cursor:pointer;}
.xp-btns{display:flex; gap:6px; margin-top:10px;}
.note-ta.plain{background:rgba(255,255,255,.65); border-style:dashed;}
.drawer-btn{display:none; font-size:15px; padding:4px 9px;}
@media (max-width: 900px){
  .drawer-btn{display:inline-flex;}
  #main{grid-template-columns: 1fr !important;}
  #sidebar, #rightPanel{
    position:fixed; top:104px; bottom:0; width:min(300px, 85vw); z-index:45;
    transition:transform .22s ease; box-shadow:0 10px 40px rgba(40,38,32,.22);
    background:var(--panel);
  }
  #sidebar{left:0; transform:translateX(-105%); border-right:1px solid var(--line);}
  #rightPanel{right:0; transform:translateX(105%); border-left:1px solid var(--line);}
  #sidebar.open, #rightPanel.open{transform:none;}
  #hint{display:none;}
  .topbar .proj-title{max-width:110px;}
  #toolbar{gap:1px; padding:4px;}
  #toolbar button{width:32px; height:32px;}
  #selBar{max-width:96vw; flex-wrap:wrap;}
}


/* ---------------- app tabs ---------------- */
#tabbar{
  display:flex; gap:2px; padding:5px 10px 0;
  background:var(--panel); border-bottom:1px solid var(--line);
}
#tabbar button{
  border:none; background:none; cursor:pointer;
  font:600 12.5px -apple-system,Segoe UI,sans-serif; color:var(--ink2);
  padding:8px 13px 9px; border-radius:var(--r-sm) var(--r-sm) 0 0; position:relative;
}
#tabbar button:hover{ color:var(--ink); background:var(--hover); }
#tabbar button.on{ color:var(--accent); }
#tabbar button.on::after{
  content:''; position:absolute; left:10px; right:10px; bottom:0; height:2.5px;
  background:var(--accent); border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.tabPageFull{
  display:none; overflow:auto; min-height:0;
  background:var(--bg);
}
body.tab-script #tabScript, body.tab-story #tabStory, body.tab-org #tabOrg{ display:block; }
body.tab-script #main, body.tab-story #main, body.tab-org #main{ display:none !important; }
body.tab-script #toolbar, body.tab-story #toolbar, body.tab-org #toolbar,
body.tab-script #hint, body.tab-story #hint, body.tab-org #hint{ display:none !important; }
/* moodboard mode: canvas stays, scene chrome goes */
body.tab-mood #shotList, body.tab-mood .side-head:first-child, body.tab-mood #rightPanel,
body.tab-mood #panelToggle{ display:none !important; }
body.tab-mood #main{ grid-template-columns: 264px 1fr; }
body.tab-mood #toolbar button[data-tool="wall"], body.tab-mood #toolbar button[data-tool="room"],
body.tab-mood #toolbar button[data-tool="door"], body.tab-mood #toolbar button[data-tool="window"],
body.tab-mood #toolbar button[data-tool="gap"],
body.tab-mood #sunBtn, body.tab-mood #playBtn{ display:none !important; }
.tp-inner{ max-width:1000px; margin:0 auto; padding:26px 26px 60px; }
.tp-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.tp-head h2{ font-size:17px; font-weight:650; color:var(--ink); margin:0; }
.tp-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tp-hint{ font-size:11px; color:var(--ink2); }
.tp-note{ margin-top:22px; font-size:11.5px; color:var(--ink2); background:var(--panel);
  border:1px dashed var(--line); border-radius:var(--r-sm); padding:12px 14px; }
#scriptText{
  width:100%; min-height:52vh; resize:vertical;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel);
  padding:18px 20px; font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink);
}
#breakdownResult{ margin-top:14px; }
.bd-scene{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 13px; margin-bottom:7px; font-size:12.5px; }
.bd-scene b{ font-weight:650; }
.bd-scene .bd-meta{ color:var(--ink2); font-size:11px; margin-top:2px; }
#storyTable table{ width:100%; border-collapse:collapse; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
#storyTable th{ text-align:left; font:600 10.5px -apple-system,sans-serif; color:var(--ink2);
  text-transform:uppercase; letter-spacing:.4px; padding:9px 11px; background:var(--panel);
  border-bottom:1px solid var(--line); }
#storyTable td{ padding:8px 11px; border-bottom:1px solid var(--line); font-size:12.5px; vertical-align:middle; }
#storyTable tr.sceneRow td{ background:var(--panel); font-weight:650; }
#storyTable input, #storyTable textarea{
  width:100%; border:1px solid transparent; background:transparent; font-size:12.5px;
  padding:4px 6px; border-radius:var(--r-sm); resize:none; font-family:inherit;
}
#storyTable input:focus, #storyTable textarea:focus{ border-color:var(--line); background:var(--panel); outline:none; }
.sb-ref{ width:76px; height:46px; border-radius:var(--r-sm); object-fit:cover; display:block; cursor:pointer;
  border:1px solid var(--line); background:var(--panel); }
.sb-refBtn{ width:76px; height:46px; border:1.5px dashed var(--line); border-radius:var(--r-sm);
  background:none; color:var(--ink2); cursor:pointer; font-size:16px; }

/* ---------------- topbar v2 ---------------- */
.logo-txt{ display:flex; flex-direction:column; line-height:1.05; }
.logo-name{ font-weight:750; font-size:16px; letter-spacing:.5px; }
.logo-tag{ font-weight:400; font-size:9.5px; color:var(--ink2); letter-spacing:.3px; font-style:italic; }
#sceneLbl{ font-size:9px; font-weight:700; letter-spacing:.8px; color:var(--ink2); margin-left:14px; }
body.tab-script #sceneLbl, body.tab-story #sceneLbl,
body.tab-script #shotTitle, body.tab-story #shotTitle{ display:none !important; }
body.tab-mood #sceneLbl, body.tab-org #sceneLbl{ display:none !important; }
/* ---------------- tabbar v2 ---------------- */
#tabbar{ padding:6px 12px 0; overflow-x:auto; scrollbar-width:none; }
#tabbar button{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; padding:10px 16px 11px;
}
#tabbar button svg{ width:16px; height:16px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* ---------------- production board mode ---------------- */
/* full-width canvas — production data lives on the board (People registry cards) */
body.tab-org #main{ display:grid !important; grid-template-columns:264px 1fr; }
body.tab-org #toolbar, body.tab-org #hint{ display:flex !important; }
body.tab-org #shotList, body.tab-org #sidebar > .side-head:first-child{ display:none !important; }
body.tab-org #rightPanel, body.tab-org #panelToggle{ display:none !important; }
body.tab-org #toolbar button[data-tool="wall"], body.tab-org #toolbar button[data-tool="room"],
body.tab-org #toolbar button[data-tool="door"], body.tab-org #toolbar button[data-tool="window"],
body.tab-org #toolbar button[data-tool="gap"],
body.tab-org #sunBtn, body.tab-org #playBtn{ display:none !important; }
/* storyboard scene thumbnails */
.sb-thumb{ width:120px; height:72px; object-fit:cover; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--panel); float:left; margin-right:12px; }
.sb-excerpt{ font-weight:400; font-size:11px; color:var(--ink2); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60ch; }

/* trash can */
#trashCan{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) scale(.7);
  width:52px; height:52px; border-radius:var(--r-sm); z-index:80;
  background:var(--panel); border:1.5px solid var(--line); box-shadow:0 10px 34px rgba(40,38,32,.18);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s, background .12s;
}
#trashCan.show{ opacity:1; transform:translateX(-50%) scale(1); }
#trashCan.hot{ background:var(--danger-soft); border-color:var(--danger); }
#trashCan svg{ width:22px; height:22px; stroke:var(--ink2); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#trashCan.hot svg{ stroke:var(--danger); }
/* production switcher */
#projBtn{ font-weight:600; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#projPop{
  position:fixed; top:64px; left:150px; z-index:120; display:none;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:0 16px 50px rgba(40,38,32,.18); padding:12px; min-width:240px;
}
#projPop.show{ display:block; }
/* day planner */
#planPop{
  position:fixed; top:64px; left:150px; z-index:120; display:none;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:0 16px 50px rgba(40,38,32,.18); padding:14px; width:350px;
  max-height:74vh; overflow:auto;
}
#planPop.show{ display:block; }
.plan-row{ display:flex; align-items:center; gap:7px; padding:5px 2px; font-size:12.5px; }
.plan-row.off{ opacity:.45; }
.plan-gap{ display:flex; align-items:center; gap:5px; margin-left:24px; padding:2px 0; font-size:10.5px; color:var(--ink2); }
.plan-gap input{ width:46px; border:1px solid var(--line); border-radius:var(--r-sm); padding:2px 4px; font-size:11px; text-align:right; }
.plan-time{ font-variant-numeric:tabular-nums; font-weight:650; width:42px; flex:none; }
.plan-ud{ border:1px solid var(--border); border-radius:var(--r-sm); width:19px; height:19px; font-size:10px; color:var(--ink2); line-height:1; flex:none; }
.plan-ud:hover{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
/* ---------------- sharing ---------------- */
#sharePop{
  position:fixed; top:64px; right:130px; z-index:120; display:none;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:0 16px 50px rgba(40,38,32,.18); padding:14px; width:390px;
  max-height:70vh; overflow:auto;
}
#sharePop.show{ display:block; }
.sh-row{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; padding:4px 2px; font-size:11.5px; }
.sh-name{ flex:1 1 150px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-role{ color:var(--ink2); font-size:10.5px; white-space:nowrap; }
.sh-sel{ font-size:10.5px; padding:1px 3px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); }
.sh-chips{ display:inline-flex; gap:2px; }
.sh-chip{ font:700 8.5px -apple-system,Segoe UI,sans-serif; letter-spacing:.3px; padding:2px 4px; border-radius:999px; cursor:pointer; border:1px solid var(--line); background:var(--panel); color:var(--ink3); }
.sh-chip.on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.sh-x{ padding:1px 6px; }
.sh-form{ margin-top:10px; padding:10px; border:1px dashed var(--border2); border-radius:var(--r-sm); display:flex; flex-direction:column; gap:7px; }
.sh-sub{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
.sh-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } .sh-grid .fb-inp{ margin:0; font-size:12px; padding:6px 8px; }
.sh-line{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:11.5px; } .sh-line label{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.sh-floors{ gap:6px; } .sh-floors label{ font:700 9.5px -apple-system,Segoe UI,sans-serif; letter-spacing:.3px; color:var(--ink2); }
.sh-preset{ margin-left:auto; font-size:10px; padding:1px 7px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--accent); cursor:pointer; }
.sh-hint{ font-size:10px; color:var(--ink2); line-height:1.5; margin-top:4px; }
/* read-only member: browse, zoom, export — no drawing tools, no library, no bin */
body.read-only #toolbar, body.read-only #sidebar, body.read-only #libToggle, body.read-only #trashCan,
body.read-only #undoBtn, body.read-only #redoBtn, body.read-only #selBar, body.read-only #shareBtn, body.read-only #mediaBtn,
body.read-only .scriptbtn, body.read-only #roomLibBtn{ display:none !important; }
body.read-only #saveState{ color:var(--accent); font-weight:700; }
#viewerBar{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:110;
  display:flex; align-items:center; gap:12px; padding:8px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:0 10px 34px rgba(40,38,32,.16); font-size:12.5px;
}
#cmtPop{
  position:fixed; z-index:130; width:260px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:0 16px 50px rgba(40,38,32,.2); padding:12px;
  max-height:300px; overflow:auto;
}
#cmtPop input, #cmtPop textarea{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 8px;
  font-size:12px; font-family:inherit; resize:vertical;
}
/* locked viewer: canvas + tabs + zoom, nothing that edits */
body.view-only #toolbar, body.view-only #sidebar, body.view-only #rightPanel,
body.view-only #panelToggle, body.view-only #libToggle, body.view-only #projBtn,
body.view-only #undoBtn, body.view-only #redoBtn, body.view-only #exportBtn,
body.view-only #shareBtn, body.view-only #installBtn, body.view-only #trashCan,
body.view-only #shotTitle, body.view-only #sceneLbl, body.view-only #hint,
body.view-only #selBar{ display:none !important; }
body.view-board #tabbar, body.view-board #vScene{ display:none !important; }
#viewerLight{ position:fixed; inset:0; z-index:400; background:rgba(12,12,14,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; cursor:zoom-out; }
#viewerLight img{ max-width:min(96vw, 1600px); max-height:82vh; object-fit:contain; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
#viewerLight .vl-cap{ color:#F2F1EC; font-size:14px; max-width:70ch; text-align:center; white-space:pre-wrap; line-height:1.5; }
#viewerLight .vl-x{ position:absolute; top:14px; right:16px; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; font-size:22px; cursor:pointer; }
body.view-only #cv{ cursor:grab; }
body.view-only #main, body.view-only.tab-org #main, body.view-only.tab-mood #main,
body.view-only.tab-write #main{ display:grid !important; grid-template-columns:1fr !important; }
.proj-row{
  display:block; width:100%; text-align:left; padding:8px 10px; border-radius:var(--r-sm);
  font-size:12.5px; cursor:pointer;
}
.proj-row:hover{ background:var(--hover); }
.proj-row.on{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
/* write board: same chrome as moodboard */
body.tab-write #shotList, body.tab-write #sidebar > .side-head:first-child,
body.tab-write #rightPanel, body.tab-write #panelToggle{ display:none !important; }
body.tab-write #main{ grid-template-columns:264px 1fr; }
body.tab-write #toolbar button[data-tool="wall"], body.tab-write #toolbar button[data-tool="room"],
body.tab-write #toolbar button[data-tool="door"], body.tab-write #toolbar button[data-tool="window"],
body.tab-write #toolbar button[data-tool="gap"],
body.tab-write #sunBtn, body.tab-write #playBtn{ display:none !important; }
body.tab-write #sceneLbl{ display:none !important; }

/* ---------------- FLOOR Studio lockup ---------------- */
.logo-mark{ width:24px; height:24px; stroke:var(--accent); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }
.logo-name{ display:flex; align-items:baseline; gap:5px; }
.logo-sub{ font-size:9px; font-weight:650; letter-spacing:2.5px; color:var(--ink2); }
.proj-name{ width:100%; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:8px 10px; font-size:13px; font-weight:600; background:var(--panel); }
.proj-name:focus{ outline:none; border-color:var(--accent); }

.note-ta.solid{ background:var(--panel); }

/* the scene name field belongs to the shot designer only */
body.tab-mood #shotTitle, body.tab-write #shotTitle, body.tab-org #shotTitle{ display:none !important; }

.helpSec{ display:none; }
.helpSec.on{ display:block; }
#verChip{ font-size:10px; color:var(--ink2); letter-spacing:.6px; align-self:center; margin-right:4px; }

/* ---------------- phone (iPhone) — VIEW mode ----------------
   Small screens reorganise around reading & browsing: compact chrome,
   icon-only tabs, no drawing toolbar. Pan, pinch, tap and the drawers
   all keep working; nothing changes for desktop or iPad.
   (Lives at the END of the file so it wins the cascade.) */
@media (max-width: 600px){
  /* the single grid column must never grow past the viewport — otherwise the
     topbar's min-content width (~460px) widens EVERY row and the whole app
     scrolls sideways on a 375px phone */
  #app{ grid-template-columns:minmax(0,1fr); }
  #topbar{
    gap:6px; padding:0 8px; overflow:hidden;
    padding-top:env(safe-area-inset-top); /* PWA under the notch */
  }
  .logo, #sceneLbl, #verChip, #helpBtn, #installBtn,
  #undoBtn, #redoBtn{ display:none !important; }
  #shotTitle{ flex:1 1 50px; min-width:0; max-width:none; font-size:13px; }
  #projBtn{
    padding:5px 8px; font-size:11.5px; max-width:30vw;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:none;
  }
  #saveState{ font-size:9.5px; max-width:64px; overflow:hidden; white-space:nowrap; }
  #shareBtn, #exportBtn{ display:none !important; } /* phones are for viewing */
  /* icon-only app tabs */
  #tabbar{ padding:4px 4px 0; justify-content:space-around; }
  #tabbar button{ font-size:0; padding:9px 12px; flex:1; }
  #tabbar button svg{ width:21px; height:21px; }
  /* no drawing tools on a phone — look, pan, zoom, tap */
  #toolbar, #inkBar{ display:none !important; }
  /* selection bar: one scrollable strip instead of a half-screen block */
  #selBar{
    max-width:100vw; left:0; right:0; border-radius:0;
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
  #selBar .sbtn{ flex:none; }
  /* drawers span (almost) the whole phone screen */
  #sidebar, #rightPanel{ width:88vw; top:96px; }
  #zoomCtl{ bottom:calc(10px + env(safe-area-inset-bottom)); }
  #boardCrumb{ max-width:80% !important; }
}

/* ---------------- touch & iPad ----------------
   body.touch = any multi-touch device, body.pad = tablet-sized.
   The topbar drawer buttons become panel COLLAPSE toggles above 900px,
   and every fiddly control grows into a proper fingertip target. */
#cv{ -webkit-touch-callout:none; -webkit-user-select:none; }
body.touch .drawer-btn{ display:inline-flex; }
@media (min-width: 901px){
  body.hideL #sidebar{ display:none !important; }
  body.hideR #rightPanel{ display:none !important; }
  body.hideL #main{ grid-template-columns:1fr 266px !important; }
  body.hideR #main{ grid-template-columns:264px 1fr !important; }
  body.hideL.hideR #main, body.tab-mood.hideL #main{ grid-template-columns:1fr !important; }
}
body.touch #toolbar button{ width:40px; height:40px; }
body.touch .hbtn{ width:36px; height:36px; }
body.touch #selBar .sbtn{ padding:8px 12px; font-size:12.5px; }
body.touch #selBar .sw{ width:22px; height:22px; border-radius:var(--r-md); }
body.touch #selBar select{ padding:6px 8px; font-size:12px; }
body.touch #selBar input.lbl{ padding:7px 9px; }
/* hover doesn't exist on glass: the per-row buttons stay softly visible */
body.touch .shot-item .mini{ opacity:.55; }
body.touch .lib-item .del-custom{ display:block; opacity:.6; }
body.touch .side-head button{ min-width:26px; min-height:26px; }

/* ---------------- medium screens (iPad & small laptops) ----------------
   The full topbar wants ~1100px; below that the decorative bits go so the
   whole interface — Scene info included — always fits the screen. */
@media (max-width: 1180px){
  #topbar{ gap:6px; }
  .logo-txt, #sceneLbl, #verChip{ display:none !important; }
  #projBtn{ max-width:130px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:none; }
  #saveState{ min-width:0; }
}
/* the panel toggles read as pressed while their panel is hidden */
body.hideL #libToggle, body.hideR #panelToggle{
  background:var(--accent-soft); color:var(--accent); border-color:var(--accent);
}

/* ---------------- LITE mode: Shot designer only ----------------
   ?mode=shot (or config.mode) — the iPad spin-off. One tab, no share/
   co-edit chrome, a Load-script button instead of the Script tab. */
body.lite #tabbar, body.lite #shareBtn, body.lite #installBtn{ display:none !important; }
.scriptbtn{ display:none; }
body.lite .scriptbtn, body.tab-write .scriptbtn{ display:inline-flex; }
body.lite #app{ grid-template-rows:calc(60px + env(safe-area-inset-top)) 1fr; } /* tabbar is display:none → it leaves the grid, so TWO rows */

/* touch: no drop-to-delete target (fingers land on the bottom edge constantly) */
body.touch #trashCan{ display:none !important; }

/* ---------------- colour in the chrome (FloorBoard) ----------------
   Each floor has a hue; the icon carries it, the label stays ink. */
#tabbar button svg{ color:var(--ink3); }
#tabbar button[data-tab="mood"] svg{ color:var(--pal-lilac); }
#tabbar button[data-tab="write"] svg{ color:var(--pal-sky); }
#tabbar button[data-tab="design"] svg{ color:var(--pal-coral); }
#tabbar button[data-tab="org"] svg{ color:var(--pal-olive); }
#tabbar button.on svg{ filter:saturate(1.15); }
/* library category headers get a small hue dot */
.cat-head .dot{ width:8px; height:8px; border-radius:50%; flex:none; margin-right:2px; }
/* tool buttons: soft tinted pill when active */
#toolbar button.on, #toolbar button.active{ background:var(--accent-soft); color:var(--accent); border-radius:var(--r-sm); }

/* ---------------- floors (the tabbar as a building) ----------------
   Each floor: hue-tinted icon · small level pill · clear name. */
#tabbar button{ display:inline-flex; align-items:center; gap:7px; }
#tabbar .fl{
  font-size:9.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
  color:var(--ink3); background:var(--soft); padding:2px 7px; border-radius:var(--r-pill);
}
#tabbar button.on .fl{ background:var(--accent-soft); color:var(--accent); }
#tabbar button[data-tab="budget"] svg{ color:var(--pal-sand); }
@media (max-width:600px){ #tabbar .fl, #tabbar .nm{ display:none; } }
.logo-name{ font-weight:800; letter-spacing:-.2px; font-size:15px; }

/* ---------------- 3rd floor: budget page ---------------- */
#tabBudget{ grid-column:1 / -1; overflow:auto; background:var(--bg); }
body.tab-budget #sidebar, body.tab-budget #canvasWrap, body.tab-budget #rightPanel,
body.tab-budget #toolbar, body.tab-budget #selBar, body.tab-budget #zoomCtl, body.tab-budget #hint,
body.tab-budget #panelToggle, body.tab-budget #libToggle{ display:none !important; }
body.tab-budget #main{ grid-template-columns:1fr !important; }
body.tab-budget #tabBudget{ display:block; }
.bud-wrap{ max-width:1180px; margin:0 auto; padding:26px 28px 60px; }
.bud-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.bud-head h2{ font-size:22px; letter-spacing:-.3px; margin:0 0 4px; }
.bud-lead{ color:var(--ink2); margin:0; max-width:560px; }
.bud-headactions{ display:flex; gap:10px; align-items:center; }
.bud-cur{ font-size:12px; color:var(--ink2); display:flex; gap:6px; align-items:center; }
.bud-cur select, .bud-cat select, .bud-cat input, .bud-phase input{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); color:var(--ink);
  padding:6px 8px; font-size:13px; min-height:30px;
}
.bud-phases{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px 0 26px; }
.bud-phase{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; }
.bud-phase.total{ border-color:var(--accent-soft); background:var(--accent-soft); }
.bud-phase.over .bud-bar i{ background:var(--danger); }
.bud-phase.over .bud-phase-num b{ color:var(--danger); }
.bud-phase-top{ display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:700;
  letter-spacing:.7px; text-transform:uppercase; color:var(--ink2); gap:8px; }
.bud-phase-top label{ font-weight:600; letter-spacing:0; text-transform:none; display:flex; gap:6px; align-items:center; }
.bud-phase-top input{ width:96px; text-align:right; }
.bud-bar{ height:6px; border-radius:var(--r-pill); background:var(--soft); margin:12px 0 8px; overflow:hidden; }
.bud-bar i{ display:block; height:100%; background:var(--accent); border-radius:var(--r-pill); transition:width .2s; }
.bud-phase-num{ display:flex; justify-content:space-between; align-items:baseline; }
.bud-phase-num b{ font-size:19px; letter-spacing:-.3px; }
.bud-phase-num span, .bud-delta{ font-size:12px; color:var(--ink2); }
.bud-cat{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:16px; overflow:hidden; }
.bud-cat header{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.bud-cat h3{ margin:0; font-size:14px; display:flex; align-items:center; gap:8px; }
.bud-cat h3 .dot{ width:9px; height:9px; border-radius:50%; }
.bud-sum{ font-weight:700; color:var(--ink2); }
.bud-actions{ margin-left:auto; display:flex; gap:8px; }
.bud-cat table{ width:100%; border-collapse:collapse; font-size:13px; }
.bud-cat th{ text-align:left; font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--ink2);
  padding:8px 10px; border-bottom:1px solid var(--line); font-weight:700; }
.bud-cat td{ padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.bud-cat tr:last-child td{ border-bottom:none; }
.bud-cat th.n, .bud-cat td.n{ text-align:right; }
.bud-cat td.n input{ text-align:right; width:84px; }
.bud-cat td input:not([type=number]){ width:100%; min-width:120px; }
.bud-amt{ font-weight:700; white-space:nowrap; }
.bud-empty td{ color:var(--ink2); padding:16px 12px; font-size:12.5px; }
.bud-cat .mini{ width:24px; height:24px; border-radius:var(--r-sm); color:var(--ink3); font-size:14px; }
.bud-cat .mini:hover{ background:var(--danger-soft); color:var(--danger); }
@media (max-width:900px){ .bud-phases{ grid-template-columns:repeat(2,1fr); } .bud-wrap{ padding:16px; } }
body.tab-budget #sceneLbl, body.tab-budget #shotTitle{ display:none !important; }
/* 4th floor · Documents (every script / AV script + budget, exportable in one click) */
.docs-list{ padding:2px 10px 6px; display:flex; flex-direction:column; gap:6px; }
.doc-row{ border:1px solid var(--border); border-radius:var(--r-sm); background:var(--hover); padding:8px 9px; display:flex; flex-direction:column; gap:6px; }
.doc-t{ display:flex; flex-direction:column; min-width:0; }
.doc-t b{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-t span{ font-size:10.5px; color:var(--ink2); }
.doc-b{ display:flex; gap:4px; }
.doc-b .btn{ padding:3px 8px; font-size:11px; }
.doc-empty{ font-size:11px; color:var(--ink2); line-height:1.5; padding:4px 2px; }
.bud-phase-top{ flex-wrap:wrap; }
.bud-delta{ white-space:nowrap; }

/* ---------------- overlays (document style, prop picker) ---------------- */
.fb-ov{ position:fixed; inset:0; z-index:210; background:rgba(40,38,32,.35); display:flex; align-items:center; justify-content:center; }
.fb-ov-box{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg,16px); padding:22px 26px; max-width:94vw; max-height:90vh; overflow:auto; box-shadow:0 18px 60px rgba(40,38,32,.2); color:var(--ink); }
.fb-ov-title{ font-weight:700; font-size:15px; }
.fb-ov-sub{ color:var(--ink2); font-size:12px; margin:6px 0 12px; line-height:1.5; }
.fb-lab{ display:block; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ink2); margin:12px 0 6px; }
.fb-inp{ width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; font-size:13px; background:var(--panel); color:var(--ink); }
.fb-row{ display:flex; gap:8px; align-items:center; }
.fb-dim{ color:var(--ink2); font-size:12px; flex:1; }
.fb-swatches{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fb-sw{ width:28px; height:28px; border-radius:50%; border:2px solid transparent; box-shadow:0 0 0 1px var(--line); cursor:pointer; }
.fb-sw.on{ border-color:var(--panel); box-shadow:0 0 0 2px var(--ink); }
.fb-sw-custom{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink2); cursor:pointer; }
.fb-sw-custom input{ width:28px; height:28px; border:none; background:none; padding:0; cursor:pointer; }
.fb-seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.fb-seg button{ padding:6px 12px; font-size:12px; color:var(--ink2); }
.fb-seg button.on{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.fb-ov-actions{ display:flex; gap:8px; margin-top:18px; align-items:center; }
.fb-pick-scene{ margin:10px 0 4px; }
.fb-pick-scene b{ display:block; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--ink2); margin-bottom:4px; }
.fb-pick{ display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:var(--r-sm); font-size:13px; cursor:pointer; }
.fb-pick:hover{ background:var(--hover); }
.fb-pick i{ font-style:normal; color:var(--ink2); font-size:11.5px; }
.btn.danger-ghost{ color:var(--danger); }
.btn.danger-ghost:hover{ background:var(--danger-soft); border-color:var(--danger); }

/* ---------------- budget v2 ---------------- */
.bud-cat h3 small{ font-weight:500; color:var(--ink2); font-size:11.5px; margin-left:8px; }
.bud-cur input{ width:64px; }
.bud-dim{ font-size:11px; color:var(--ink3); font-weight:500; letter-spacing:0; text-transform:none; }
.bud-tot-lines{ display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink2); gap:8px; flex-wrap:wrap; }
.bud-tot-lines b{ color:var(--ink); font-size:13px; }
.bud-phases{ grid-template-columns:repeat(5,minmax(0,1fr)); }
@media (max-width:1100px){ .bud-phases{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .bud-phases{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.bud-cat tr.dragging{ opacity:.4; }
.bud-cat tr.drop-before td{ box-shadow:inset 0 2px 0 var(--accent); }
.bud-cat.drop-before{ outline:2px solid var(--accent); }
.bud-cat tbody tr{ cursor:grab; }
.bud-cat td.n input{ width:76px; }
#tabbar button[data-tab="shots"] svg{ color:var(--pal-coral); }

#tabbar .nm{ white-space:nowrap; }
@media (max-width:1100px){ #tabbar .fl{ display:none; } #tabbar button{ gap:6px; } }

/* ---------------- 3rd floor: shot list = a board (canvas), like Production ---------------- */
body.tab-shots #main{ grid-template-columns:264px 1fr; }
body.tab-shots #shotList, body.tab-shots #sidebar > .side-head:first-child{ display:none !important; }
body.tab-shots #rightPanel, body.tab-shots #panelToggle, body.tab-shots #sceneLbl, body.tab-shots #shotTitle{ display:none !important; }
body.tab-shots #toolbar button[data-tool="wall"], body.tab-shots #toolbar button[data-tool="room"],
body.tab-shots #toolbar button[data-tool="door"], body.tab-shots #toolbar button[data-tool="window"],
body.tab-shots #toolbar button[data-tool="gap"], body.tab-shots #sunBtn, body.tab-shots #playBtn{ display:none !important; }

/* ---------------- native iPad / PWA: never under the status bar, fingertip topbar ---------------- */
#topbar{ padding-top:env(safe-area-inset-top); }
body.touch #app{ grid-template-rows:calc(68px + env(safe-area-inset-top)) auto 1fr; }
body.touch.lite #app{ grid-template-rows:calc(68px + env(safe-area-inset-top)) 1fr; }
body.touch #topbar{ gap:10px; }
body.touch #topbar .btn{ min-height:42px; padding:9px 15px; font-size:14.5px; border-radius:var(--r-md); white-space:nowrap; }
body.touch #topbar .hbtn, body.touch #helpBtn{ width:42px; height:42px; font-size:18px; border-radius:var(--r-md); }
body.touch #topbar .drawer-btn{ font-size:19px; }
body.touch #shotTitle{ font-size:15.5px; padding:8px 10px; }
body.touch #saveState{ font-size:12.5px; }
body.touch #verChip{ display:none; }
body.touch .logo-mark{ width:30px; height:30px; }
/* the media layer: animated GIFs / playing videos ride on top of the canvas */
#mediaLayer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; } /* after #cv in the DOM, before the toolbar & bars */
#mediaLayer .media-el{ position:absolute; left:0; top:0; transform-origin:center center; object-fit:fill; border-radius:2px; }

/* ---------------- room library ---------------- */
.rm-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; max-height:56vh; overflow:auto; padding:2px; }
.rm-card{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel); overflow:hidden; display:flex; flex-direction:column; }
.rm-thumb{ aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); }
.rm-thumb img{ width:100%; height:100%; object-fit:contain; }
.rm-meta{ padding:9px 10px 6px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.rm-meta b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rm-meta span{ font-size:11.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:14px; }
.rm-meta small{ font-size:10.5px; color:var(--ink3); }
.rm-src{ font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-pill); background:var(--soft); color:var(--ink2); align-self:flex-start; margin-top:4px; }
.rm-src.rm-roomplan{ background:var(--accent-soft); color:var(--accent); }
.rm-src.rm-arkit{ background:var(--warn-soft); color:var(--warn); }
.rm-actions{ display:flex; gap:6px; padding:0 10px 10px; }
.rm-actions .btn{ padding:5px 10px; font-size:12px; }
.rm-actions .btn.primary{ flex:1; }

/* ---------------- help: floor tabs; hint: foldable on touch ---------------- */
.help-nav{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.help-nav button{ padding:6px 11px; border:1px solid var(--line); border-radius:var(--r-pill); font-size:12px; color:var(--ink2); background:var(--panel); }
.help-nav button.on{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft); font-weight:600; }
.help-nav .touch-only, .help-nav .kbd-only{ display:none; }
body.touch .help-nav .touch-only{ display:inline-block; }
body:not(.touch) .help-nav .kbd-only, body.kbd .help-nav .kbd-only{ display:inline-block; }
#helpCard .helpSec{ display:none; }
#helpCard .helpSec.on{ display:block; }
#helpCard h3{ margin-top:8px; }
#hintToggle{ display:none; position:absolute; left:14px; bottom:14px; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--panel); color:var(--ink2); font-size:16px; z-index:5; }
#hintToggle.on{ color:var(--accent); border-color:var(--accent); }
body.touch #hintToggle{ display:inline-flex; align-items:center; justify-content:center; }
body.touch #hint{ display:none; left:56px; bottom:16px; max-width:60%; }
body.touch.hint-open #hint{ display:block; }
body.touch #roomLibBtn svg{ width:20px; height:20px; }

/* scan method chooser */
.rm-methods{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rm-method{ text-align:left; display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel); color:var(--ink); }
.rm-method:hover{ border-color:var(--accent); }
.rm-method b{ font-size:14px; }
.rm-method span{ font-size:12px; color:var(--ink2); line-height:1.45; }
.rm-method i{ font-style:normal; font-size:11px; color:var(--ok); font-weight:600; margin-top:4px; }
.rm-method.off{ opacity:.6; }
.rm-method.off i{ color:var(--danger); }
@media (max-width:600px){ .rm-methods{ grid-template-columns:1fr; } }

/* setups: A · B chips + utility buttons — round, centred, one size */
#setupChips{ gap:6px !important; }
.side-head .setup-chip, .setup-chip{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border-radius:50%;
  border:1px solid var(--line); background:var(--panel); color:var(--ink2); font:600 11px -apple-system,"Segoe UI",sans-serif; line-height:1; cursor:pointer; }
.side-head .setup-chip.on, .setup-chip.on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.side-head .setup-chip.util, .setup-chip.util{ font-size:14px; font-weight:500; }
.setup-chip:hover{ border-color:var(--accent); color:var(--accent); }
body.touch .side-head .setup-chip{ width:32px; height:32px; font-size:12px; }

/* new production: templates */
.tpl-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; }
.tpl{ text-align:left; display:flex; flex-direction:column; gap:4px; padding:12px 13px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel); color:var(--ink); cursor:pointer; }
.tpl b{ font-size:13.5px; } .tpl span{ font-size:11.5px; color:var(--ink2); line-height:1.4; }
.tpl:hover{ border-color:var(--border2); } .tpl.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:var(--accent-soft); }
.tpl-examples{ margin-top:14px; padding:12px 14px; border:1px dashed var(--border2); border-radius:var(--r-md); display:flex; flex-direction:column; gap:8px; }
.tpl-exhead{ display:flex; flex-direction:column; gap:2px; margin-bottom:2px; } .tpl-exhead b{ font-size:13px; } .tpl-exhead span{ font-size:11.5px; color:var(--ink2); }
.tpl-ex{ display:flex; gap:12px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); }
.tpl-ex > div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; } .tpl-ex b{ font-size:12.5px; } .tpl-ex i{ font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); } .tpl-ex span{ font-size:11.5px; color:var(--ink2); line-height:1.4; }
.tpl-example{ display:flex; gap:14px; align-items:center; margin-top:14px; padding:12px 14px; border:1px dashed var(--border2); border-radius:var(--r-md); }
.tpl-example > div{ flex:1; display:flex; flex-direction:column; gap:2px; } .tpl-example b{ font-size:13px; } .tpl-example span{ font-size:11.5px; color:var(--ink2); line-height:1.45; }

/* room library: grouped by location */
.rm-groups{ max-height:56vh; overflow:auto; padding:2px; display:flex; flex-direction:column; gap:10px; }
.rm-group-head{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--hover); color:var(--ink); font-size:13px; }
.rm-group-head b{ flex:1; } .rm-group-head span{ font-size:11.5px; color:var(--ink2); } .rm-group-head .arr{ flex:none; font-size:10px; color:var(--ink3); transition:transform .12s; }
.rm-group.closed .rm-group-head .arr{ transform:rotate(-90deg); }
.rm-group-body{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; padding:10px 2px 2px; }
.rm-group.closed .rm-group-body{ display:none; }

/* plan panel */
.plan-cards{ display:grid; grid-template-columns:1.2fr 1fr; gap:12px; }
.plan-card{ border:1px solid var(--line); border-radius:var(--r-md); padding:16px; display:flex; flex-direction:column; gap:8px; background:var(--panel); }
.plan-card.pro{ border-color:var(--accent); box-shadow:0 10px 30px rgba(75,107,251,.12); }
.plan-card .tag{ align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); }
.plan-card b{ font-size:20px; letter-spacing:-.4px; } .plan-card ul{ margin:0; padding-left:16px; font-size:12.5px; color:var(--body); } .plan-card li{ margin:3px 0; }
.plan-card p{ margin:0; font-size:12.5px; color:var(--body); } .plan-card small{ font-size:11px; color:var(--ink3); }
@media (max-width:600px){ .plan-cards{ grid-template-columns:1fr; } }

/* ---- guided tour (16-tour.js) */
#tourDim{ position:fixed; inset:0; z-index:300; background:rgba(20,19,17,.42); }
#tourRing{ position:fixed; z-index:301; border-radius:12px; box-shadow:0 0 0 3px var(--accent), 0 0 0 9999px rgba(20,19,17,.42); pointer-events:none; transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
#tourDim:has(+ #tourRing[style*="display: block"]){ background:transparent; }
#tourCard{ position:fixed; z-index:302; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px 14px; box-shadow:0 18px 60px rgba(40,38,32,.28); transition:left .25s ease, top .25s ease; }
#tourCard h3{ margin:2px 0 6px; font-size:16px; letter-spacing:-.2px; }
#tourCard p{ margin:0; font-size:13px; line-height:1.55; color:var(--ink2); }
#tourCard .tour-n{ font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--accent); }
#tourCard .tour-b{ display:flex; gap:6px; margin-top:14px; align-items:center; }
.help-nav .tour-start{ margin-left:auto; color:var(--accent) !important; border-color:var(--accent-soft) !important; background:var(--accent-soft) !important; font-weight:600; }

/* the iPad / shot-designer build: no floors, so no floor templates — Blank + the examples only */
body.lite .tpl-grid, body.lite .tpl-exhead span{ display:none; }