/* Face Blur — studio layout, stage boxes, readout.
   Shared rules live in style.css; only this tool's own pieces live here. */

.studio.fb-studio{grid-template-columns:300px minmax(0,1fr) 320px;grid-template-areas:"side stage ext"}
.studio .fb-side{grid-area:side}
.studio .fb-stage{grid-area:stage}
.studio .fb-ext{grid-area:ext}
@media (max-width:1100px){
  .studio.fb-studio{grid-template-columns:1fr 1fr;grid-template-areas:"stage stage" "side ext"}
}
@media (max-width:680px){
  .studio.fb-studio{grid-template-columns:1fr;grid-template-areas:"stage" "side" "ext"}
}

.note.warn{border:1px solid var(--warn-border);background:var(--warn-bg);color:var(--warn);border-radius:9px;padding:9px 12px}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:.92rem;margin:10px 0;cursor:pointer}
.chk input{margin-top:3px}
label.fld{display:block;font-size:.88rem;color:var(--muted);margin:8px 0}
label.fld input[type="range"]{width:100%}
label.fld input[type="color"]{width:52px;height:32px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;vertical-align:middle}
.sb-label{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.fb-side .sb-label:first-child{margin-top:0}
.addrow{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.segrow{display:flex;gap:7px;flex-wrap:wrap;margin:6px 0}
.seg.on{border-color:var(--brand);background:var(--accent);color:var(--brand);font-weight:600}
.save-btn{width:100%;margin:6px 0}

.gatebox{border:1px solid var(--accent-border);background:var(--accent);border-radius:9px;padding:12px 14px;margin-bottom:12px}
.gate-t{font-weight:700;margin:0 0 6px}
.gatebox .bar-track{margin-top:10px}

.fb-drop{cursor:pointer}
.stagebox{position:relative;width:100%;margin:0 auto;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-soft);touch-action:none}
.stagebox canvas{display:block;width:100%;height:100%}
#boxLayer{position:absolute;inset:0}
.fbbox{position:absolute;border:2px solid #e8a33d;border-radius:6px;cursor:pointer;box-sizing:border-box}
.fbbox .fbtag{position:absolute;top:-11px;left:-2px;background:#e8a33d;color:#fff;font-size:11px;font-weight:700;line-height:1;padding:3px 6px;border-radius:5px;white-space:nowrap}
.fbbox.keep{border-color:#1f9d66}
.fbbox.keep .fbtag{background:#1f9d66}
.fbbox.manual{border-style:dashed}
.fbbox .fbx{position:absolute;top:-11px;right:-11px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:#d64545;color:#fff;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.fbbox .fbh{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:var(--brand);cursor:nwse-resize;padding:0}
.fbbox.ellipse{border-radius:50%}
.readout{font-weight:600;font-size:.98rem;margin:12px 0 4px}
.readout .warnbit{color:var(--warn)}
.zoomrow{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.fb-thumb{max-width:170px;width:100%;border:1px solid var(--line);border-radius:8px;display:block;margin:6px 0;background:#fff}