/* ============================================================================
   VLC media player — web recreation styling
   Classic Qt look: light gray chrome, orange slider fills, crisp 1px borders.
   ========================================================================== */
:root{
  --chrome:#e9e9e9;      /* menubar/footer base */
  --chrome-hi:#f6f6f6;   /* raised panels */
  --deck:#dedede;
  --border:#b4b4b4;
  --border-dk:#909090;
  --ink:#242424;
  --ink-dim:#6a6a6a;
  --accent:#f37b21;      /* cone orange */
  --fill:#e8862c;        /* slider fill */
  --sel:#bfd9f2;         /* qt list selection */
  --sel-deep:#89b7dd;
  --menu-hi:#cce4f7;
  --shadow:0 6px 24px rgba(0,0,0,.28);
  --radius:6px;
  font-size:15px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#1a1a1a}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);
     overflow:hidden;-webkit-font-smoothing:antialiased;user-select:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid #4c9aff;outline-offset:1px;z-index:5}

/* ============================== APP FRAME ================================ */
#app{height:100%;display:flex;flex-direction:column;background:var(--chrome);position:relative}
#app.minimal #menubar,#app.minimal #status-bar{display:none}
#app.view-minimal #playlist-pane{display:none}

/* ============================== MENU BAR ================================= */
#menubar{display:flex;align-items:center;height:30px;padding-left:8px;background:linear-gradient(#efefef,#e2e2e2);
  border-bottom:1px solid var(--border);position:relative;z-index:400;flex:none}
.mb-cone{width:17px;height:19px;margin-right:8px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M14 6c-.5 5-1.2 9.6-4 13.5C7.6 22.3 5 23.5 5 26c0 2 2.4 3.2 6.2 3.7 1.4.2 3 .3 4.8.3s3.4-.1 4.8-.3C24.6 29.2 27 28 27 26c0-2.5-2.6-3.7-5-6.5-2.8-3.9-3.5-8.5-4-13.5z' fill='%23f37b21' stroke='%23553e22'/%3E%3Cellipse cx='16' cy='5.6' rx='6.4' ry='1.9' fill='%23ffce8a' stroke='%23553e22'/%3E%3C/svg%3E")}
.mb-list{display:flex;list-style:none;height:100%}
.mb-list li{padding:0 11px;display:flex;align-items:center;font-size:.86rem;border-radius:4px;margin:2px 1px;cursor:default}
.mb-list li:hover,.mb-list li.open{background:#cfd8e3}
.mb-list li.open{background:#dae6f3;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
#win-title{margin-left:auto;margin-right:12px;font-size:.78rem;color:#888}

/* popup menus */
.popup{position:absolute;min-width:230px;background:#fbfbfb;border:1px solid var(--border-dk);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:5px;z-index:500;font-size:.85rem;animation:pop-in 90ms ease-out}
@keyframes pop-in{from{opacity:.55;transform:translateY(-3px)}to{opacity:1;transform:none}}
.popup .mi{display:flex;align-items:center;gap:8px;padding:5px 22px 5px 10px;border-radius:4px;white-space:nowrap;position:relative;cursor:default}
.popup .mi .micheck{width:14px;text-align:center;color:#2b6cb0;font-weight:700}
.popup .mi .miradio{width:13px;height:13px;border-radius:50%;border:2px solid #777;display:inline-block;position:relative}
.popup .mi.checked .miradio::after{content:"";position:absolute;inset:2px;background:#2b6cb0;border-radius:50%}
.popup .mi .mihk{margin-left:auto;color:#98989b;padding-left:34px;font-size:.76rem}
.popup .mi.disabled{color:#a9a9ad}
.popup .mi:not(.disabled):hover,.popup .mi.hi{background:var(--menu-hi)}
.popup .msep{height:1px;background:#ddd;margin:5px 9px}
.popup .mhead{font-size:.72rem;color:#8b8b8f;padding:4px 12px 2px;text-transform:uppercase;letter-spacing:.06em}
.popup .misub-arrow{position:absolute;right:8px;color:#666}
.popup .submenu-indicator::after{content:"▸";position:absolute;right:8px;color:#555;font-size:.75rem}

/* ============================== MAIN AREA ================================ */
#main-area{flex:1;display:flex;min-height:0;position:relative;background:#000}

/* -------- playlist pane -------- */
#playlist-pane{width:520px;max-width:46vw;display:flex;background:var(--chrome-hi);border-right:1px solid var(--border);
  transition:none;min-width:0}
.tree-map{position:absolute;inset:0;pointer-events:none;opacity:.5}
#pl-tree{width:172px;flex:none;border-right:1px solid var(--border);padding:6px 4px;overflow:auto;background:
  repeating-linear-gradient(transparent 0 27px,rgba(120,120,120,.07) 27px 28px),linear-gradient(180deg,#f2f2f2,#ebebeb)}
.tree-node .tree-head{display:flex;align-items:center;gap:6px;padding:4px 6px;font-size:.84rem;border-radius:4px;cursor:pointer}
.tree-node .tree-head:hover{background:#e0eaf4}
.twisty{width:12px;height:12px;position:relative;flex:none}
.twisty::before{content:"";position:absolute;left:3px;top:2px;border:5px solid transparent;border-top-color:#5c5c66;transform-origin:50% 25%;transition:transform .16s ease}
.tree-node.expanded .twisty::before{transform:rotate(90deg)}
.tree-body{display:none;margin:1px 0 4px 21px}
.tree-node.expanded .tree-body{display:block}
.tree-sub{padding:3px 8px;font-size:.82rem;color:#33383f;border-radius:4px;display:flex;gap:6px;align-items:center;cursor:pointer}
.tree-sub em{color:#99908a;font-size:.72rem;font-style:normal}
.tree-sub.sel{background:var(--sel);}
.tn-ico{width:14px;height:14px;flex:none;opacity:.75}
.ico-playlist{background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h12v2H2zM2 7h12v2H2zM2 11h8v2H2z' fill='%23555'/%3E%3Ccircle cx='13' cy='12' r='2.4' fill='%23f37b21'/%3E%3C/svg%3E")}
.ico-library{background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h3v12H2zM6 2h3v12H6z' fill='%23555'/%3E%3Cpath d='M10.8 2.6l3-.7 2 11.8-3 .6z' fill='%23f37b21' transform='translate(-1 0)'/%3E%3C/svg%3E")}
.ico-devices{background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3' width='14' height='9' rx='1.4' fill='%23555'/%3E%3Crect x='3' y='5' width='10' height='5' fill='%23fff'/%3E%3Crect x='5' y='13' width='6' height='1.6' fill='%23555'/%3E%3C/svg%3E")}
.ico-network,.ico-internet{background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3Cpath d='M2 8h12M8 2c2.6 2 2.6 10 0 12M8 2c-2.6 2-2.6 10 0 12' stroke='%23555' stroke-width='1.2' fill='none'/%3E%3C/svg%3E")}
.ico-note{background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 1v9.3a3 3 0 1 0 1.6 2.7V4l3-.8V1z' fill='%23555'/%3E%3C/svg%3E")}

#pl-table-wrap{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fdfdfd}
#pl-table{width:100%;border-collapse:collapse;font-size:.83rem}
#pl-table thead th{position:sticky;top:0;background:linear-gradient(#f4f4f4,#e8e8e8);text-align:left;font-weight:600;
  padding:5px 8px;border-bottom:1px solid var(--border);border-right:1px solid #dcdcdc;cursor:pointer;white-space:nowrap;z-index:2}
#pl-table th .sort-arrow{color:#c06a1d;margin-left:3px}
#pl-tbody td{padding:4px 8px;border-bottom:1px solid #eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
#pl-tbody tr:nth-child(even){background:#f4f6f8}
#pl-tbody tr:hover{background:#e8f1fa}
#pl-tbody tr.selrow{background:var(--sel)}
#pl-tbody tr.playing{color:#000;font-weight:600}
#pl-tbody tr.playing td.col-num .num-badge{display:none}
#pl-tbody tr.playing td.col-num::after{content:"▶";color:var(--accent);font-size:.72rem}
#pl-tbody tr.dropmark td{border-top:2px solid var(--accent)}
.col-num{width:34px}.col-dur{width:74px}.col-x{width:26px}
.row-x{visibility:hidden;color:#933}#pl-tbody tr:hover .row-x{visibility:visible}
#pl-empty{padding:22px;color:#777;font-size:.85rem;line-height:1.5}

/* -------- stage -------- */
#stage{flex:1;position:relative;background:#000;min-width:0;overflow:hidden}
#video-box{position:absolute;inset:0}
#video-el{position:absolute;background:#000;display:block}
#video-el.offaudio,#cam-canvas{position:absolute}
#stage.video-mode #video-box{cursor:default}
#video-el.fx-on{filter:url("#vlc-vfx")}
#subtitle-layer{position:absolute;left:0;right:0;bottom:56px;display:flex;justify-content:center;pointer-events:none;z-index:40}
#subtitle-text{font-family:"Helvetica Neue",Arial,sans-serif;font-weight:600;color:#fff;background:rgba(8,8,8,.55);
  padding:6px 16px;border-radius:5px;font-size:clamp(15px,var(--subfs,26px),42px);line-height:1.32;text-align:center;
  max-width:86%;text-wrap:balance;display:none;user-select:text}
#stage-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:#8b8b8b;z-index:20;pointer-events:none}
#idle-cone{width:min(210px,34vw);height:min(210px,34vw);opacity:.22;filter:saturate(.75);
  background:center/contain no-repeat var(--cone-url)}
#idle-title{letter-spacing:.05em;font-size:1.02rem;color:#a7a29d}
#idle-hint{font-size:.8rem;color:#6d6a66;text-align:center;line-height:1.55}
#idle-hint b{color:#c96a12}
#big-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#3c3c3f,#17171a);color:#ffb066;font-size:26px;display:none;z-index:25;
  box-shadow:0 3px 14px rgba(0,0,0,.65),inset 0 1px 2px rgba(255,255,255,.18);transition:transform .12s ease,opacity .2s}
#big-play:hover{transform:translate(-50%,-50%) scale(1.06)}
#stage.idle #big-play{display:block}
#osd-layer{position:absolute;left:0;right:0;top:58%;display:flex;justify-content:center;pointer-events:none;z-index:45}
.osd-msg{background:rgba(12,12,14,.72);color:#f2e9df;font-size:1.28rem;padding:10px 26px;border-radius:24px;letter-spacing:.03em;
  animation:osd-in 160ms ease-out;transition:opacity 260ms ease;font-weight:600}
@keyframes osd-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.osd-msg.fadeout{opacity:0}

/* ======================= ADVANCED CONTROLS STRIP ========================= */
#advanced-strip{display:flex;align-items:center;gap:2px;padding:3px 10px;background:linear-gradient(#efefef,#e4e4e4);
  border-top:1px solid #cdcdcd;flex:none;z-index:60}
#advanced-strip[hidden]{display:none}
#advanced-strip button{display:flex;flex-direction:column;align-items:center;gap:0;width:56px;padding:2px 0;border-radius:5px;color:#3c3c44}
#advanced-strip button:hover{background:#dbe6f2}
#advanced-strip button.active{background:var(--sel-deep);color:#123}
#advanced-strip small{font-size:.62rem;color:inherit;opacity:.85}
.adot{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#ff8f63,#c1272d 68%);display:block;margin:1px auto}
.btn-recording .adot{animation:blink 900ms steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.acam{width:16px;height:12px;margin:1px auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Crect x='0' y='1' width='11' height='10' rx='2' fill='%233c3c44'/%3E%3Cpath d='M11 4l5-2.6v9.2L11 8z' fill='%233c3c44'/%3E%3C/svg%3E") center/contain no-repeat}
.aloop{width:16px;height:14px;margin:0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M4 5h7a3 3 0 0 1 3 3v1h-2V8a1 1 0 0 0-1-1H4v2L1 6l3-3z' fill='%233c3c44'/%3E%3Cpath d='M12 9H5A3 3 0 0 1 2 6V5h2v1a1 1 0 0 0 1 1h7V5l3 3-3 3z' fill='%233c3c44' opacity='.65'/%3E%3C/svg%3E") center/contain no-repeat}
.aframe{width:15px;height:14px;margin:0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 14'%3E%3Crect x='1' y='2' width='9' height='10' rx='1' fill='none' stroke='%233c3c44' stroke-width='1.4'/%3E%3Cpath d='M11 7l4-3v6z' fill='%233c3c44'/%3E%3C/svg%3E") center/contain no-repeat}
#ab-indicator{margin-left:auto;font-size:.72rem;background:#38404a;color:#ffd9ae;padding:2px 10px;border-radius:9px}

/* ========================== CONTROL DECK ================================= */
#controller{background:linear-gradient(#e3e3e3,#d2d2d2);border-top:1px solid var(--border-dk);flex:none;padding:2px 10px 4px;z-index:70;
  box-shadow:0 -1px 0 rgba(255,255,255,.55) inset}
#seek-row{display:flex;align-items:center;gap:9px;padding-top:4px}
.time-lbl{font-variant-numeric:tabular-nums;font-size:.82rem;color:#3a3a3a;width:64px;flex:none;cursor:pointer;text-align:center;
  border-radius:4px;padding:1px 2px}
.time-lbl:hover{background:#c6c6c6}
#time-elapsed{text-align:right}#time-remaining{text-align:left}
#seek-bar{flex:1;height:14px;position:relative;touch-action:none}
#seek-track{position:absolute;left:0;right:0;top:5px;height:5px;border-radius:3px;background:#a9a9ad;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28)}
#seek-buffered{position:absolute;left:0;top:5px;height:5px;border-radius:3px 0 0 3px;background:#8f8f93;width:0;opacity:.6}
#seek-played{position:absolute;left:0;top:5px;height:5px;border-radius:3px;background:linear-gradient(#ffab59,var(--fill));width:0}
#seek-thumb{position:absolute;top:1.5px;width:13px;height:13px;border-radius:50%;margin-left:-6.5px;background:#f7f7f7;
  border:1px solid #7c7c80;box-shadow:0 1px 3px rgba(0,0,0,.4);left:0;pointer-events:none;transform:scale(.75);opacity:0;transition:transform .15s ease,opacity .15s ease}
#seek-bar:hover #seek-thumb,#seek-bar.dragging #seek-thumb{transform:scale(1);opacity:1}
#chapters-layer{position:absolute;inset:0;pointer-events:none}
.chap-mark{position:absolute;top:7px;width:3px;height:6px;background:#7d4b13;border-radius:1px;transform:translateX(-1.5px)}
#seek-tooltip{position:absolute;bottom:20px;transform:translateX(-50%);background:#222;color:#ffe;padding:3px 9px;border-radius:4px;
  font-size:.76rem;font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap;z-index:9;box-shadow:0 2px 8px rgba(0,0,0,.5)}

#deck-row{display:flex;align-items:center;gap:4px;height:46px}
.deck-group{display:flex;align-items:center;gap:4px}
.deck-mid{flex:1;text-align:center;min-width:0;color:#5a5a5f;font-size:.8rem;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbtn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;color:#3d3d43;
  transition:background .12s ease,transform .08s ease}
.qbtn:hover{background:#c9d7e4}
.qbtn:active{transform:scale(.94);background:#b9c9d8}
.qbtn.toggled{background:#aecbe6;box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
.round-play{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#414147,#1c1c20 70%);
  color:#f6f6f6;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.25);
  margin:0 3px;transition:transform .1s ease}
.round-play:hover{background:radial-gradient(circle at 35% 30%,#4c4c53,#242429 70%)}
.round-play:active{transform:scale(.95)}
.round-play .pi{font-size:16px;line-height:1}
#vol-cluster{display:flex;align-items:center;gap:3px}
#vol-icon{display:block;width:19px;height:15px;background:var(--spk-url) center/contain no-repeat}
#vol-icon.muted{--spk-use:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 15'%3E%3Cpath d='M0 5h4l5-4v13l-5-4H0z' fill='%23a33'/%3E%3Cpath d='M12 4l6 7M18 4l-6 7' stroke='%23a33' stroke-width='1.8'/%3E%3C/svg%3E")}
#vol-bar{width:96px;height:14px;position:relative;touch-action:none}
#vol-fill{position:absolute;left:0;top:5px;height:4px;border-radius:2px;background:linear-gradient(90deg,#ffab59,var(--fill));width:100%}
#vol-track-bg{position:absolute;left:0;right:0;top:5px;height:4px;border-radius:2px;background:#a9a9ad;box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}
#vol-bar{background:none}
#vol-fill{z-index:1}
#vol-thumb{position:absolute;top:1px;width:12px;height:12px;border-radius:50%;background:#fafafa;border:1px solid #6f6f73;
  box-shadow:0 1px 2px rgba(0,0,0,.4);margin-left:-6px;z-index:2}
#vol-bar.dim #vol-fill{opacity:.35}

/* ============================= STATUS BAR ================================ */
#status-bar{display:flex;align-items:center;height:22px;background:linear-gradient(#ececec,#dfdfdf);border-top:1px solid var(--border);
  padding:0 10px;font-size:.72rem;color:#666;flex:none;gap:12px}
#status-right{margin-left:auto;font-variant-numeric:tabular-nums}

/* ============================== DIALOGS ================================== */
#dialog-host{position:absolute;inset:0;z-index:800;pointer-events:none}
.dlg-backdrop{position:absolute;inset:0;background:rgba(20,20,22,.35);pointer-events:auto}
.dialog{position:absolute;background:#f2f2f2;border:1px solid #848488;border-radius:8px;box-shadow:var(--shadow);
  min-width:380px;max-width:min(94vw,1100px);max-height:min(88vh,900px);display:flex;flex-direction:column;pointer-events:auto;
  animation:dlg-in 140ms cubic-bezier(.2,.9,.3,1)}
@keyframes dlg-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1}}
.dialog.left-docked{left:14px;top:52px;bottom:120px;width:min(720px,calc(100vw - 28px));min-width:520px;animation:dock-in 220ms cubic-bezier(.22,.9,.28,1)}
@keyframes dock-in{from{transform:translateY(10px)}to{}}
.dlg-titlebar{display:flex;align-items:center;background:linear-gradient(#d9d9d9,#c8c8c8);border-bottom:1px solid var(--border);
  padding:6px 8px;border-radius:8px 8px 0 0;cursor:default;flex:none}
.dlg-title{font-size:.87rem;font-weight:600;flex:1;padding-left:6px}
.dlg-close{width:22px;height:22px;border-radius:5px;font-size:13px;line-height:1;color:#444}
.dlg-close:hover{background:#c0392b;color:#fff}
.dlg-body{padding:14px 16px;overflow:auto;flex:1;min-height:0}
.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid #d3d3d3;flex:none;background:#e7e7e7;border-radius:0 0 8px 8px}
.qt-btn{min-width:84px;padding:5px 14px;border-radius:4px;background:linear-gradient(#fbfbfb,#ececec);border:1px solid #9a9aa0;
  font-size:.83rem;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.qt-btn:hover{background:linear-gradient(#ffffff,#f2f2f2);border-color:#7a7ac0}
.qt-btn.primary{background:linear-gradient(#3f8bd8,#2f6db4);border-color:#2b5e97;color:#fff}
.qt-btn.primary:hover{background:linear-gradient(#4a95e0,#3575bd)}
.fld-row{display:flex;align-items:center;gap:10px;margin:9px 0;font-size:.85rem}
.fld-row label{width:170px;flex:none;color:#333}
.fld-row input[type=text],.fld-row input[type=number],.fld-row select{flex:1;padding:4px 8px;border:1px solid #9a9aa4;border-radius:4px;background:#fff;font:inherit;min-width:0}
.fld-row input[type=range]{flex:1;accent-color:var(--fill)}
.dlg-tabs{display:flex;border-bottom:1px solid var(--border);background:#e2e2e2;border-radius:8px 8px 0 0;flex:none}
.dlg-tab{padding:7px 16px;font-size:.83rem;border:1px solid transparent;border-bottom:none;cursor:pointer;margin:4px 2px -1px 0;border-radius:5px 5px 0 0}
.dlg-tab.on{background:#f2f2f2;border-color:var(--border);font-weight:600}
/* adjustments/effects dialog */
.effects-layout{display:flex;gap:0;min-height:430px;max-height:66vh}
.ef-nav{width:158px;flex:none;border-right:1px solid var(--border);background:#ececec;padding:8px 6px;display:flex;flex-direction:column;gap:3px}
.ef-cat-head{font-size:.7rem;letter-spacing:.09em;color:#77737a;margin:7px 6px 3px;text-transform:uppercase}
.ef-tab{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:5px;font-size:.84rem;cursor:pointer}
.ef-tab:hover{background:#dde7f1}
.ef-tab.on{background:var(--sel);font-weight:600}
.ef-page{flex:1;padding:16px 18px;overflow:auto;position:relative}
/* cartographic annotation typography — territory styling for effect labels */
.carto-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#5d5665;font-weight:600;
  display:flex;align-items:baseline;gap:8px}
.carto-label::before{content:"";width:18px;height:2px;background:linear-gradient(90deg,var(--accent),transparent);transform:translateY(-2px)}
.carto-value{font-variant-numeric:tabular-nums;color:#8a4d16;font-size:.72rem;margin-left:auto;letter-spacing:.05em}
.eq-band-row{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 3px}
.eq-band-row .carto-label{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.2em;font-size:.6rem;color:#7a6f80}
.eq-grid{display:flex;gap:4px;justify-content:space-between;padding:10px 4px 2px}
.eq-grid input[type=range]{writing-mode:vertical-lr;direction:rtl;width:26px;height:132px;accent-color:var(--fill);margin:4px 0}
.eq-preset-select{max-width:190px}
.fx-slider{display:flex;align-items:center;gap:12px;margin:13px 0}
.fx-slider .carto-label{width:150px;flex:none}
.fx-slider input[type=range]{flex:1;accent-color:var(--fill)}
.check-line{display:flex;gap:8px;align-items:center;margin:10px 0;font-size:.87rem}
.check-line input[type=checkbox]{accent-color:#2f6db4;width:15px;height:15px}
.spat-grid{display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;align-items:center;margin-top:8px}
.spat-grid .carto-label{width:110px}
.spat-grid .carto-value{min-width:36px;text-align:right}
/* preferences dialog */
.prefs-switcher{display:flex;gap:0;background:#e4e4e4;border-bottom:1px solid var(--border);border-radius:8px 8px 0 0;flex:none}
.prefs-mode{padding:8px 20px;font-size:.84rem;cursor:pointer;display:flex;align-items:center;gap:8px;color:#555}
.prefs-mode.on{background:#f4f4f4;font-weight:600;color:#111;border-radius:6px 6px 0 0}
.simple-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;padding:6px 0}
.simple-cat{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-radius:8px;border:1px solid transparent;cursor:pointer}
.simple-cat:hover{background:#e9f0f8;border-color:#c5d8ec}
.sc-icon{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#3f4c5c;background:linear-gradient(#fcfcfc,#e8e8ea);border:1px solid #c9c9cf}
.sc-name{font-size:.83rem}
.advanced-layout{display:flex;min-height:420px;max-height:62vh;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#fff}
.adv-tree{width:280px;flex:none;border-right:1px solid var(--border);position:relative;background:#f6f5f4;overflow:auto}
.adv-detail{flex:1;overflow:auto;padding:14px 18px}
.adv-path{font-size:.74rem;color:#7b7580;margin-bottom:10px;letter-spacing:.04em}
.setting-row{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid #eee;font-size:.84rem}
.setting-row .name{width:230px;flex:none;color:#333a41}
.setting-row .ctl{flex:1;display:flex;gap:8px;align-items:center}
.setting-row.ro .val{color:#5c6b7a;font-variant-numeric:tabular-nums}
.hotkey-table{width:100%;border-collapse:collapse;font-size:.82rem}
.hotkey-table th,.hotkey-table td{border:1px solid #ddd;padding:5px 8px;text-align:left}
.hotkey-table td.key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#26405c;cursor:pointer}
.hotkey-table td.key.editing{outline:2px solid #4c9aff;background:#eef6ff}
/* about dialog */
.about-hero{display:flex;gap:20px;align-items:center;padding:6px 4px 14px}
.about-cone{width:118px;height:130px;flex:none;background:var(--cone-url) center/contain no-repeat;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.about-name{font-size:1.5rem;font-weight:700;letter-spacing:.01em}
.about-name span{color:var(--accent)}
.about-meta{font-size:.8rem;color:#666;margin-top:4px;line-height:1.5}
.about-legal{font-size:.72rem;color:#8a8a8a;border-top:1px dashed #ccc;margin-top:10px;padding-top:9px;line-height:1.55}
.info-grid{display:grid;grid-template-columns:170px 1fr;gap:5px 14px;font-size:.84rem}
.info-grid dt{color:#7a7a80}.info-grid dd{user-select:text}
.msglog{font-family:ui-monospace,Menlo,monospace;font-size:.74rem;background:#14161a;color:#c8dce8;min-height:300px;
  border-radius:6px;padding:10px;overflow:auto;white-space:pre-wrap;user-select:text}
.msglog .warn{color:#ffd479}.msglog .err{color:#ff9d8a}
/* goto time + misc inputs */
.goto-grid{display:flex;gap:8px;align-items:center}
.goto-grid input{width:70px;text-align:center}

/* ============================ drop veil ================================== */
#drop-veil{position:absolute;inset:0;background:rgba(18,36,54,.55);z-index:900;display:flex;align-items:center;justify-content:center;pointer-events:none}
#drop-veil div{color:#ffdcae;font-size:1.15rem;background:rgba(0,0,0,.5);padding:18px 34px;border-radius:14px;border:2px dashed rgba(255,190,120,.7)}

/* ============================ scrollbar ================================== */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#b9b9bd;border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:#96969b}
::-webkit-scrollbar-track{background:transparent}

/* ==================== responsive / mobile ================================ */
@media (max-width:760px){
  :root{font-size:14px}
  #controller{padding:2px 6px 4px}
  .qbtn{width:28px;height:28px;font-size:13px;flex:none}
  .round-play{width:34px;height:34px;margin:0 2px}
  .time-lbl{width:42px;font-size:.7rem}
  #vol-bar{width:50px}
  #seek-bar{min-width:60px}
  #playlist-pane{position:absolute;left:0;right:0;top:30px;bottom:0;width:auto;max-width:none;z-index:350;
    background:var(--chrome-hi);flex-direction:column;border-right:none;box-shadow:-8px 0 22px rgba(0,0,0,.25)}
  .view-full #playlist-pane{display:none}
  .view-full.show-mobile-pl #playlist-pane{display:flex}
  #pl-tree{width:auto;display:flex;gap:4px;overflow-x:auto;flex:none;padding:5px;border-right:none;
    border-bottom:1px solid var(--border);background:#f0f0f0}
  .tree-node{min-width:max-content}
  .tree-node.expanded .tree-body{display:inline-flex;gap:4px}
  #pl-table-wrap{flex:1;overflow:auto}
  #win-title{display:none}
  .mb-list li{padding:0 8px;font-size:.8rem}
  #menubar{height:30px;padding-left:6px;overflow:hidden}
  #deck-row{height:42px;gap:2px}
  .deck-mid{display:none}
  #main-area{position:relative}
  .view-full.show-mobile-pl #stage{display:none}
  #advanced-strip button{width:46px}
  #advanced-strip small{display:none}
  #advanced-strip{padding:3px 6px}
  .dialog{min-width:unset;width:calc(100vw - 12px)!important;left:6px!important;right:6px!important;max-height:82vh}
  .dialog.left-docked{top:36px;bottom:104px;width:calc(100vw - 12px)!important;min-width:0}
  .effects-layout{flex-direction:column;min-height:0;max-height:none}
  .ef-nav{width:auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border)}
  .ef-page{max-height:52vh}
  .advanced-layout{flex-direction:column;max-height:none}
  .adv-tree{width:auto;max-height:34vh;border-right:none;border-bottom:1px solid var(--border)}
  .fld-row label{width:112px;font-size:.8rem}
  .setting-row{flex-wrap:wrap}
  .setting-row .name{width:100%}
  #seek-tooltip{font-size:.86rem}
  #idle-cone{width:46vw;height:46vw}
  #status-bar{font-size:.66rem}
}
@media (hover:none){
  #seek-thumb{opacity:1;transform:scale(1)}
  #vol-thumb{transform:scale(1.05)}
  .row-x{visibility:visible}
  .time-lbl{width:56px;font-size:.78rem}
}