/* topbar */
.topbar{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#fff;border:1.5px solid #e0e0e0;border-radius:8px 8px 0 0;flex-wrap:wrap}
.tb-btn{background:#fff;border:1.5px solid #e0e0e0;color:#555;padding:5px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-family:inherit;font-weight:500;transition:all .12s;white-space:nowrap}
.tb-btn:hover{border-color:var(--accent);color:var(--accent)}
.tb-btn.active{background:var(--accent-tint);border-color:var(--accent);color:var(--accent);font-weight:700}
.tb-tog{background:#fff;border:1.5px solid #e0e0e0;color:#888;padding:3px 9px;border-radius:5px;cursor:pointer;font-size:11px;font-family:'Courier New',monospace;transition:all .12s;white-space:nowrap}
.tb-tog:hover{border-color:var(--accent);color:var(--accent)}
.tb-tog.on{background:var(--accent-tint);border-color:var(--accent);color:var(--accent);font-weight:700}
.tb-lbl{font-size:10px;color:#bbb;letter-spacing:.08em;text-transform:uppercase}
.tb-div{width:1px;height:22px;background:#e0e0e0;flex-shrink:0}

/* popovers */
.pop{position:absolute;top:0;left:0;right:0;z-index:50;background:#fff;border:1.5px solid #e0e0e0;border-top:none;border-radius:0 0 8px 8px;box-shadow:0 8px 24px rgba(0,0,0,.10);padding:16px 18px 18px;max-height:72vh;overflow-y:auto}
.pop-hdr{display:flex;align-items:flex-start;margin-bottom:14px;gap:8px}
.pop-title{font-size:12px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase;font-weight:700}
.pop-sub{font-size:11px;color:#888;margin-top:2px}
.blk2{font-size:10px;letter-spacing:.1em;color:#bbb;text-transform:uppercase;margin-bottom:7px;margin-top:14px}
.blk2:first-child{margin-top:0}
.close-btn{background:#fff;border:1px solid #e0e0e0;color:#888;padding:3px 9px;border-radius:4px;cursor:pointer;font-size:11px;font-family:inherit;margin-left:auto;white-space:nowrap;flex-shrink:0}
.close-btn:hover{border-color:var(--accent);color:var(--accent)}

/* misc */
.hbtn{font-size:11px;cursor:pointer;padding:3px 10px;border-radius:5px;border:1.5px solid #e0e0e0;background:#fff;color:#888;font-family:inherit;transition:all .12s}
.hbtn:hover{border-color:var(--accent);color:var(--accent)}
.hbtn.on{background:var(--accent-tint);border-color:var(--accent);color:var(--accent);font-weight:700}
input.mock-slider{opacity:0;position:absolute;top:18px;left:0;width:100%;cursor:pointer;margin:0}
.msr{font-family:'Material Symbols Rounded';font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;line-height:1;vertical-align:middle;font-size:16px;font-style:normal;display:inline-block;user-select:none}

/* mock */
.mock{display:flex;border-left:1.5px solid #e0e0e0;border-right:1.5px solid #e0e0e0;border-bottom:1.5px solid #e0e0e0;border-radius:0 0 8px 8px;overflow:hidden;min-height:680px}