/* --- find bar --- */
  .findbar{
    top:76px; left:50%; transform:translateX(-50%) translateY(-8px); opacity:0; pointer-events:none;
    display:flex; align-items:center; gap:var(--s-xxs); padding:var(--s-xs);
    background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-lg);
    transition:opacity .18s var(--ez), transform .18s var(--ez);
  }
  body.finding .findbar{opacity:1; pointer-events:auto; transform:translateX(-50%)}
  .findbar input{
    width:260px; height:36px; padding:0 var(--s-sm); border:1px solid var(--hairline);
    border-radius:var(--r-md); background:var(--surface-elevated); color:var(--on-dark);
    font-family:var(--sans); font-size:14px;
  }
  .findbar input:focus{outline:none; border-color:var(--primary)}
  .findbar input::-webkit-search-cancel-button{display:none}
  .find-count{
    font-family:var(--mono); font-size:12px; color:var(--muted); min-width:74px;
    text-align:center; white-space:nowrap;
  }
  .tick.hit{background:var(--primary); opacity:.55; height:12px}

  /* --- password --- */
  .pwd{position:fixed; inset:0; z-index:57; display:none; align-items:center; justify-content:center;
    background:rgba(10,10,10,.92); padding:var(--s-lg)}
  body.pwd-open .pwd{display:flex}
  .pwd-card{width:min(420px,100%); background:var(--surface-card); border:1px solid var(--hairline);
    border-radius:var(--r-lg); padding:var(--s-xl)}
  .pwd-card h2{margin:0 0 var(--s-xs); font-size:20px; font-weight:700; letter-spacing:-.4px}
  .pwd-card p{margin:0 0 var(--s-lg); font-size:14px; line-height:1.6; color:var(--body); word-break:keep-all}
  .pwd-card input{width:100%; height:44px; padding:0 var(--s-sm); border:1px solid var(--hairline-strong);
    border-radius:var(--r-md); background:var(--surface-elevated); color:var(--on-dark);
    font-family:var(--mono); font-size:15px; letter-spacing:2px}
  .pwd-card input:focus{outline:none; border-color:var(--primary)}
  .pwd-card.wrong input{border-color:var(--rose)}
  .pwd-foot{display:flex; gap:var(--s-xs); margin-top:var(--s-md)}

  /* --- draw dock --- */
  .dock{
    left:50%; bottom:84px; transform:translateX(-50%) translateY(12px); opacity:0; pointer-events:none;
    display:flex; align-items:center; gap:var(--s-xxs); padding:var(--s-xs);
    background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-lg);
    transition:opacity .18s var(--ez), transform .18s var(--ez);
  }
  body.drawing .dock{opacity:1; pointer-events:auto; transform:translateX(-50%)}
  .tool{
    width:36px; height:36px; border:0; border-radius:var(--r-md); background:transparent;
    cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--muted);
  }
  .tool:hover{background:var(--surface-elevated); color:var(--on-dark)}
  .tool[aria-pressed="true"]{background:var(--primary); color:var(--on-primary)}
  .tool svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round}
  .swatches{display:flex; gap:var(--s-xxs); padding:0 var(--s-xs); margin:0 var(--s-xxs);
    border-left:1px solid var(--hairline); border-right:1px solid var(--hairline)}
  .sw{width:22px; height:22px; border-radius:var(--r-pill); border:2px solid transparent; cursor:pointer; padding:0}
  .sw[aria-pressed="true"]{border-color:var(--on-dark)}

  /* --- review drawer --- */
  .notes{
    top:0; right:0; bottom:0; width:360px; max-width:90vw; z-index:30;
    background:var(--surface-card); border-left:1px solid var(--hairline);
    display:flex; flex-direction:column; transform:translateX(100%);
    transition:transform .26s var(--ez);
  }
  body.notes-open .notes{transform:none}
  body.notes-open #stage{padding-right:392px}
  .notes-head{padding:var(--s-lg) var(--s-lg) var(--s-md); border-bottom:1px solid var(--hairline)}
  .notes-head .row{display:flex; align-items:center; gap:var(--s-xs)}
  .notes-head h2{margin:0; font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted)}
  .notes-head .pg{margin-left:auto; font-family:var(--mono); font-size:14px; font-weight:700; color:var(--primary)}
  .tags{display:flex; gap:var(--s-xs); margin-top:var(--s-md)}
  .tag{
    flex:1; height:36px; border:1px solid var(--hairline); border-radius:var(--r-md);
    background:var(--surface-elevated); font-size:14px; font-weight:600; cursor:pointer; color:var(--body);
  }
  .tag:hover{border-color:var(--hairline-strong); color:var(--on-dark)}
  .tag[aria-pressed="true"]{color:#0a0a0a}
  .tag.ok[aria-pressed="true"]{background:var(--emerald); border-color:var(--emerald)}
  .tag.hold[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
  .tag.fix[aria-pressed="true"]{background:var(--rose); border-color:var(--rose); color:#fff}
  .notes textarea{
    flex:1; width:100%; resize:none; border:0; background:transparent; color:var(--body-strong);
    padding:var(--s-md) var(--s-lg); font-family:var(--serif); font-size:16px; line-height:1.55;
  }
  .notes textarea:focus{outline:none}
  .notes textarea::placeholder{color:var(--muted-soft)}
  .notes-foot{padding:var(--s-sm) var(--s-md); border-top:1px solid var(--hairline);
    display:flex; gap:var(--s-xs); align-items:center; flex-wrap:wrap}
  .notes-foot .count{font-family:var(--mono); font-size:12px; color:var(--muted);
    width:100%; margin-bottom:var(--s-xxs)}

  /* --- overview --- */
  .overview{position:fixed; inset:0; z-index:40; background:var(--canvas);
    overflow:auto; padding:88px var(--s-lg) var(--s-xl); display:none}
  body.overview-open .overview{display:block}
  .ov-head{position:fixed; top:0; left:0; right:0; height:64px; display:flex; align-items:center;
    gap:var(--s-xs); padding:0 var(--s-md); background:var(--canvas);
    border-bottom:1px solid var(--hairline); z-index:2}
  .ov-head h2{margin:0; font-size:12px; font-weight:600; letter-spacing:1.5px;
    text-transform:uppercase; color:var(--muted)}
  .ov-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:var(--s-md); max-width:1280px; margin:0 auto}
  .thumb{
    border:1px solid var(--hairline); border-radius:var(--r-lg); background:var(--surface-card);
    padding:0; cursor:pointer; position:relative; overflow:hidden; aspect-ratio:4/3;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .14s, transform .14s var(--ez);
  }
  .thumb:hover{border-color:var(--hairline-strong); transform:translateY(-2px)}
  .thumb.current{border-color:var(--primary)}
  .thumb canvas{max-width:100%; max-height:100%; background:#fff}
  .thumb .num{position:absolute; left:var(--s-xs); bottom:var(--s-xs); font-family:var(--mono);
    font-size:12px; font-weight:600; background:var(--canvas); color:var(--on-dark);
    padding:2px 8px; border-radius:var(--r-pill)}
  .thumb .meta{position:absolute; right:var(--s-xs); bottom:var(--s-xs); font-family:var(--mono);
    font-size:12px; background:var(--canvas); color:var(--muted); padding:2px 8px; border-radius:var(--r-pill)}
  .thumb .flag{position:absolute; left:0; top:0; width:100%; height:3px}
  .thumb .flag.ok{background:var(--emerald)}
  .thumb .flag.hold{background:var(--blue)}
  .thumb .flag.fix{background:var(--rose)}
  .thumb .ink{position:absolute; right:var(--s-xs); top:var(--s-xs); width:8px; height:8px;
    border-radius:50%; background:var(--primary)}