:root{color-scheme:dark;--bg:#0b1014;--surface:#141c22;--raised:#1b252d;--border:#28353e;--text:#f2f6f8;--muted:#a6b6bf;--karaoke:#1ed7be;--music:#ff716f;--video:#69adff;--celebration:#bd91f9;--mix:#e3b966;--success:#abeb82;--danger:#ff807a;--radius:18px;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:16px;line-height:1.45;padding:env(safe-area-inset-top) 0 calc(100px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.38;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--karaoke);outline-offset:4px}input,select{width:100%;min-width:0;font-size:16px;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px;min-height:52px}input::placeholder{color:var(--muted)}button{color:var(--text)}[hidden]{display:none!important}.shell{max-width:660px;margin:0 auto;padding:0 20px}.header{height:82px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}.brand{min-height:48px;display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800;font-size:14px;letter-spacing:1px;white-space:nowrap}.brand b{color:var(--karaoke);font-weight:500}.connection{font-size:10px;letter-spacing:1px;font-weight:700;display:flex;align-items:center;gap:6px;white-space:nowrap}.connection::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--muted)}.connection.online{color:var(--success)}.connection.online::before{background:var(--success)}.connection.reconnecting{color:var(--mix)}.connection.reconnecting::before{background:var(--mix)}.connection.offline{color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:1.9px;font-weight:700;margin:0;color:var(--muted)}.installation{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:22px 0 17px}.installation #box-name{margin:2px 0 0;font-size:15px;font-weight:600}.text-button{min-width:48px;min-height:48px;border:0;background:transparent;padding:8px;color:var(--muted);font-size:12px;font-weight:600}.box-picker{display:block;color:var(--muted);font-size:13px;margin-bottom:16px}.box-picker select{margin-top:8px}.access-note{border:1px solid var(--border);background:var(--surface);padding:12px;border-radius:12px;font-size:13px;color:var(--mix)}.now-card{border:1px solid var(--border);background:radial-gradient(ellipse at 0 0,#1a3434 0,transparent 75%),var(--surface);border-radius:22px;padding:21px}.now-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.now-top>.eyebrow{color:var(--karaoke)}.type{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--muted)}h1,h2,p{overflow-wrap:anywhere}.now-card h1{font-size:24px;line-height:1.22;letter-spacing:-.65px;margin:19px 0 8px;font-weight:650;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.artist{color:var(--muted);font-size:13px;margin:0}.singer{font-size:12px;color:var(--karaoke);margin:13px 0 0;font-weight:700}.singer::before{content:"CANTA ";font-size:9px;letter-spacing:1px;color:var(--muted);margin-right:8px}.clock{margin-top:21px}.clock>div{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:7px}progress{display:block;width:100%;height:4px;border:0;border-radius:4px;overflow:hidden;background:var(--border);accent-color:var(--karaoke)}progress::-webkit-progress-bar{background:var(--border)}progress::-webkit-progress-value{background:var(--karaoke)}progress::-moz-progress-bar{background:var(--karaoke)}.now-footer{display:flex;justify-content:space-between;gap:12px;margin-top:21px;font-size:9px;letter-spacing:1.2px;color:var(--muted)}.primary{width:100%;height:68px;margin-top:15px;border:1px solid var(--karaoke);border-radius:16px;display:flex;justify-content:center;align-items:center;gap:13px;background:var(--karaoke);color:var(--bg);font-size:17px;font-weight:800;letter-spacing:2px}.primary.stop{background:var(--raised);border-color:var(--border);color:var(--text)}#primary-icon{font-size:18px}.primary-note{text-align:center;font-size:11px;color:var(--muted);margin:10px 0 21px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 12px}.section-heading h2{font-size:20px;letter-spacing:-.5px;font-weight:650;margin:0}.count{font-size:11px;letter-spacing:0;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:7px;padding:2px 7px;margin-left:7px;vertical-align:middle}.rows{display:flex;flex-direction:column;gap:10px}.playlist-row,.result-row{--type-color:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:15px;background:var(--surface);min-width:0}.karaoke{--type-color:var(--karaoke)}.music{--type-color:var(--music)}.video{--type-color:var(--video)}.celebration{--type-color:var(--celebration)}.mix{--type-color:var(--mix)}.playlist-row.active{border-color:var(--type-color);background:linear-gradient(110deg,#1b2a2c,var(--surface))}.row-body{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px}.row-position{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);padding-top:1px}.row-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}.row-meta .type{color:var(--type-color)}.active-label{font-size:8px;font-weight:800;color:var(--text);letter-spacing:.6px;border:1px solid var(--border);border-radius:4px;padding:2px 4px}.row-title{font-size:14px;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:650}.row-artist{font-size:12px;color:var(--muted);margin:5px 0 0}.row-singer{font-size:11px;color:var(--type-color);margin:6px 0 0}.row-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:11px}.row-actions button{height:48px;min-width:48px;border:1px solid var(--border);border-radius:10px;background:var(--raised);font-size:20px}.row-actions .delete{font-size:11px;color:var(--muted);padding:0 13px;margin-left:4px}.empty{padding:25px 20px;border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);text-align:center;font-size:13px;line-height:1.7}.bottom-nav{position:fixed;z-index:5;bottom:0;left:0;right:0;display:flex;justify-content:center;background:#10171df5;backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:9px 20px calc(9px + env(safe-area-inset-bottom));gap:10px}.nav-item{width:160px;height:55px;background:transparent;border:0;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:var(--muted);font-size:9px;letter-spacing:1.5px;font-weight:700}.nav-item span{font-size:23px;line-height:1.15}.nav-item.selected{color:var(--karaoke);background:#17332f}.search-input{display:flex;align-items:center;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding-left:14px;gap:7px}.search-input>span{font-size:27px;color:var(--muted)}.search-input input{border:0;background:transparent;padding:16px 0;outline-offset:0}.search-submit{height:52px;min-width:48px;background:transparent;border:0;color:var(--karaoke);font-size:20px}.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:12px}.filters button{height:46px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:9px;letter-spacing:.4px;font-weight:700;padding:0 4px;color:var(--muted)}.filters button[aria-pressed=true]{background:#17332f;border-color:#2c7369;color:var(--karaoke)}.search-status{font-size:11px;color:var(--muted);min-height:17px;margin:14px 0}.result-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.result-row .add{height:48px;border:1px solid var(--border);border-radius:10px;background:var(--raised);font-size:10px;font-weight:750;padding:0 12px;color:var(--karaoke)}.button{min-height:52px;border-radius:12px;padding:12px 16px;font-size:11px;letter-spacing:1px;font-weight:750;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:16px}.accent{background:var(--karaoke);color:var(--bg);border-color:var(--karaoke)}.secondary{background:var(--raised);color:var(--text)}#more{width:100%;margin-top:16px}.server-detail{font-size:10px;color:var(--muted);text-align:center;margin:23px 0}.login{padding-top:44px}.login>.eyebrow{color:var(--karaoke)}.login h1{font-size:34px;line-height:1.15;letter-spacing:-1px;font-weight:650;margin:16px 0}.muted{color:var(--muted);font-size:13px}.pair-card{padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:22px;margin-top:30px}.pair-card label,.sheet label{display:block;font-size:12px;font-weight:650;margin:17px 0 8px}.pair-card label:first-child{margin-top:0}.pair-card .button{width:100%;margin-top:24px}.pair-card #login-message{margin-bottom:0;font-size:11px;line-height:1.65}.login-foot{font-size:11px;line-height:1.8;color:var(--muted);margin-top:24px;text-align:center}.sheet{position:fixed;inset:auto 0 0;width:min(100%,660px);max-height:85dvh;margin:0 auto;border:1px solid var(--border);border-radius:24px 24px 0 0;padding:12px 24px calc(24px + env(safe-area-inset-bottom));background:var(--surface);color:var(--text);overflow-y:auto;overscroll-behavior:contain}.sheet::backdrop{background:#0009;backdrop-filter:blur(3px)}.sheet-handle{width:36px;height:4px;margin:0 auto 26px;background:var(--border);border-radius:4px}.sheet h2{font-size:27px;letter-spacing:-.8px;margin:8px 0}.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.toast{position:fixed;z-index:20;left:20px;right:20px;bottom:calc(92px + env(safe-area-inset-bottom));max-width:620px;margin:auto;padding:15px 18px;background:var(--text);color:var(--bg);border-radius:14px;box-shadow:0 8px 35px #0005;font-size:12px;font-weight:650;text-align:center}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:700px){.shell{padding-left:30px;padding-right:30px}.header{height:90px}.now-card{padding:26px}.now-card h1{font-size:30px}.login{padding-top:70px}.login h1{font-size:43px}.sheet{bottom:28px;border-radius:24px;padding-bottom:28px}.bottom-nav{max-width:660px;left:50%;transform:translateX(-50%);border-left:1px solid var(--border);border-right:1px solid var(--border);border-radius:18px 18px 0 0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.row-select { width:100%; text-align:left; color:inherit; background:transparent; border:0; cursor:pointer; }
.selected-item { outline:2px solid #e8bf59; outline-offset:2px; }
.selected-label { color:#e8bf59; font-size:12px; font-weight:800; }
.singer-section-title { margin:20px 0 10px; font-size:12px; font-weight:650; color:var(--muted); }
.singer-chips { display:flex; flex-wrap:wrap; gap:8px; max-height:min(192px,28dvh); overflow-y:auto; overscroll-behavior:contain; padding:4px; }
.singer-chip { min-height:48px; max-width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:var(--raised); color:var(--text); overflow-wrap:anywhere; text-align:left; }
.singer-chip[aria-pressed=true] { border-color:var(--karaoke); background:#17332f; color:var(--karaoke); }
.singer-validation { margin:10px 0 0; font-size:12px; color:var(--mix); }
.row-actions { flex-wrap: wrap; }

.row-actions .drag-handle { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:grab; margin-right:auto; font-size:26px; }
.playlist-row { position:relative; }
.playlist-row.drag-pending .drag-handle { border-color:var(--karaoke); }
.playlist-row.drag-source { border-color:var(--karaoke); box-shadow:0 8px 24px #0008,0 0 0 2px var(--karaoke); transform:none; z-index:1; }
.dragging, .dragging .drag-handle { cursor:grabbing; user-select:none; -webkit-user-select:none; }
.drop-before::before, .drop-after::after { content:""; position:absolute; left:0; right:0; height:4px; border-radius:4px; background:var(--karaoke); box-shadow:0 0 8px #1ed7be80; pointer-events:none; }
.drop-before::before { top:-8px; }
.drop-after::after { bottom:-8px; }
.artwork-frame { display:inline-flex; position:relative; flex:none; width:64px; height:36px; align-items:center; justify-content:center; border-radius:5px; background:var(--raised); color:var(--muted); font-size:9px; overflow:hidden; }
.artwork-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--raised); }
.playlist-row .row-body { grid-template-columns:24px 64px minmax(0,1fr); }
.result-row { grid-template-columns:64px minmax(0,1fr) auto; }
.now-artwork { float:right; margin:0 0 10px 12px; }

/* Mobile DJ: four focused views; all actions retain their existing handlers. */
:root { --nav-height:76px; --radius:16px; }
html { scrollbar-gutter:stable; }
body { padding-bottom:calc(var(--nav-height) + 24px + env(safe-area-inset-bottom)); }
.shell { width:100%; max-width:560px; padding-inline:16px; }
.header { height:64px; border-bottom:0; }
.brand { font-size:12px; letter-spacing:.5px; gap:8px; }
.brand img { width:30px; height:30px; }
.connection { font-size:9px; letter-spacing:.4px; }
.header-actions { display:flex; align-items:center; gap:8px; min-width:0; }
.account-menu { position:relative; }
.account-menu summary { list-style:none; display:grid; place-items:center; width:44px; height:44px; border:1px solid transparent; border-radius:12px; color:var(--muted); cursor:pointer; }
.account-menu summary::-webkit-details-marker { display:none; }
.account-menu summary svg { width:20px; height:20px; }
.account-menu[open] summary { background:var(--raised); border-color:var(--border); color:var(--text); }
.account-menu summary:focus-visible { outline:2px solid var(--karaoke); outline-offset:2px; }
.account-popover { position:absolute; z-index:15; top:calc(100% + 6px); right:0; width:256px; max-width:calc(100vw - 32px); padding:18px; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:0 12px 35px #0008; }
.account-popover .eyebrow { margin:0 0 10px; }
.account-installation { font-size:13px; margin:0 0 16px; overflow-wrap:anywhere; }
.account-popover .button { width:100%; margin-top:16px; }
.installation { padding:0 0 16px; }
.installation #box-name { color:var(--muted); font-size:12px; margin:0; }
.view { min-width:0; }
.section-heading { margin-bottom:16px; }
.section-heading h2 { font-size:26px; font-weight:750; }
.section-heading .eyebrow { font-size:9px; letter-spacing:1px; }
.access-note { margin:0 0 16px; padding:10px 12px; font-size:12px; }
.now-card { padding:20px; border-radius:22px; background:radial-gradient(ellipse at 50% 0,#153e3d,transparent 70%),var(--surface); text-align:center; }
.now-artwork { float:none; margin:0 auto 20px; display:flex; justify-content:center; }
.now-artwork .artwork-frame { width:min(240px,100%); height:auto; aspect-ratio:16/9; border-radius:12px; font-size:18px; box-shadow:0 10px 28px #0004; }
.now-top { justify-content:center; }
.now-top .type { color:var(--type-color,var(--muted)); background:var(--raised); padding:5px 10px; border-radius:6px; }
.now-card h1 { font-size:24px; line-height:1.25; margin:14px 0 8px; -webkit-line-clamp:3; font-weight:750; }
.artist { font-size:14px; }
.singer { margin-top:10px; }
.clock { margin-top:20px; }
.now-footer { margin-top:16px; font-size:9px; letter-spacing:.5px; }
.primary { height:64px; border-radius:16px; margin-top:16px; letter-spacing:1px; }
.primary.stop { border-color:#3c6663; background:#17312e; color:var(--karaoke); }
.primary-note { font-size:12px; margin:10px 0 20px; }
.now-empty { text-align:center; color:var(--muted); font-size:14px; }
.empty-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bottom-nav { height:calc(var(--nav-height) + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); max-width:560px; left:50%; right:auto; width:100%; transform:translateX(-50%); border-radius:18px 18px 0 0; }
.nav-item { width:100%; height:56px; font-size:9px; letter-spacing:.5px; gap:3px; border-radius:12px; }
.nav-item span { font-size:22px; }
.nav-item.selected { color:var(--karaoke); background:#163530; }
.rows { gap:12px; }
.playlist-row { display:grid; grid-template-columns:minmax(0,1fr) 48px; gap:8px; padding:12px; }
.playlist-row .row-body { grid-template-columns:16px 56px minmax(0,1fr); gap:8px; align-items:center; padding:0; min-height:60px; }
.playlist-row .artwork-frame { width:56px; height:36px; }
.row-position { font-size:11px; }
.row-meta { gap:5px; margin-bottom:5px; }
.row-meta .type { font-size:8px; letter-spacing:.5px; }
.row-title { font-size:14px; font-weight:650; }
.row-artist { font-size:12px; margin-top:4px; overflow-wrap:anywhere; }
.row-singer { font-size:10px; margin-top:4px; }
.playlist-row.active { border-color:var(--karaoke); background:linear-gradient(110deg,#16312e,var(--surface)); }
.active-label { color:var(--karaoke); border:0; padding:0; font-size:8px; letter-spacing:0; }
.selected-item { outline:2px solid #e8bf59; outline-offset:1px; }
.selected-label { grid-column:3; font-size:9px; letter-spacing:.3px; }
.playlist-row > .drag-handle { align-self:start; min-width:48px; min-height:48px; padding:0; border:1px solid var(--border); border-radius:12px; background:var(--raised); color:var(--muted); font-size:26px; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:grab; }
.dragging .playlist-row > .drag-handle { cursor:grabbing; }
.row-actions .delete { color:var(--danger); }
.search-input { position:relative; background:var(--surface); border-radius:16px; }
.search-input input { padding-block:16px; }
.result-row { grid-template-columns:56px minmax(0,1fr) 48px; gap:10px; padding:12px; }
.result-row .artwork-frame { width:56px; height:36px; }
.result-row .add { width:48px; height:48px; padding:0; font-size:26px; border-radius:12px; background:#17332f; color:var(--karaoke); }
.result-row.youtube, #now-type.youtube { --type-color:#ff716f; }
.result-row > div { min-width:0; }
.result-row .row-meta { margin-bottom:3px; flex-wrap:nowrap; }
.result-row .row-meta .type { font-size:11px; line-height:14px; font-weight:750; }
.result-row .row-title { display:block; font-size:16px; line-height:21px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-row .row-artist { margin-top:3px; font-size:13px; line-height:18px; color:#d4dfe4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; }
.search-status { font-size:12px; margin:14px 0; }
.control-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px; margin-bottom:14px; }
.control-card h3 { margin:0 0 12px; font-size:14px; font-weight:700; }
.control-card p { margin:0; color:var(--muted); font-size:13px; }
.control-card .button { width:100%; margin-top:16px; }
.control-card .server-detail { text-align:left; line-height:1.7; }
.box-picker { margin:16px 0 0; font-size:12px; }
.permissions { list-style:none; margin:0; padding:0; }
.permissions li { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.permissions li:last-child { border:0; padding-bottom:0; }
.permissions b { flex:none; font-size:11px; color:var(--karaoke); }
.logout { width:100%; color:var(--danger); margin-top:24px; }
.toast { bottom:calc(var(--nav-height) + 96px + env(safe-area-inset-bottom)); font-size:13px; }
.sheet { width:min(100%,560px); padding-inline:20px; }
.sheet h2 { font-size:25px; }
.login { padding-top:24px; }
.login h1 { font-size:32px; }
.pair-card { margin-top:24px; padding:20px; }
@media(min-width:700px) { .header { height:72px; } .now-card h1 { font-size:26px; } .bottom-nav { max-width:560px; } .sheet { bottom:20px; } }

/* Compact playlist: primary text, discreet badges, body swipe and dedicated reorder handle. */
.playlist-row { display:block; position:relative; padding:0; overflow:hidden; isolation:isolate; background:#ad343c; }
.row-front { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 48px; gap:0 8px; padding:10px 12px; min-width:0; background:var(--surface); transform:translateX(var(--swipe-offset,0px)); transition:transform .18s ease-out; }
.playlist-row.active .row-front { background:linear-gradient(110deg,#16312e,var(--surface)); }
.playlist-row .row-body { grid-column:1; grid-row:1; min-height:96px; touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.playlist-row .row-title { font-size:16px; font-weight:750; line-height:1.25; }
.playlist-row .row-artist { color:#d4dfe4; font-size:13px; line-height:1.35; margin-top:5px; }
.playlist-row .row-singer { color:#a7c8c3; font-size:12px; line-height:1.35; font-weight:550; margin-top:5px; }
.singer-slot { display:block; height:32px; margin-top:3px; }
.singer-action { grid-column:1; grid-row:1; align-self:end; margin-left:88px; min-width:0; min-height:32px; padding:4px 0; text-align:left; color:#91d0c4; background:transparent; border:0; font-size:12px; line-height:1.35; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; touch-action:pan-y pinch-zoom; z-index:1; }
.singer-action:focus-visible { outline-offset:1px; }
.playlist-row .row-meta { gap:5px; margin-bottom:4px; }
.playlist-row .row-meta .type { font-size:7px; letter-spacing:.45px; font-weight:650; opacity:.85; }
.playlist-row .active-label { font-size:7px; font-weight:700; }
.playlist-row .selected-label { font-size:8px; margin-top:3px; }
.row-front > .drag-handle { grid-column:2; grid-row:1; align-self:start; width:48px; height:48px; padding:0; border:0; border-radius:10px; background:transparent; color:#7f969e; font-size:24px; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:grab; }
.dragging .row-front > .drag-handle { cursor:grabbing; }
.swipe-delete { position:absolute; z-index:0; left:0; top:0; bottom:0; width:88px; border:0; border-radius:0; background:#ad343c; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:10px; font-weight:800; letter-spacing:.4px; pointer-events:none; }
.swipe-open .swipe-delete { pointer-events:auto; }
.trash-icon { font-size:25px; line-height:1; }
.is-swiping .row-front { transition:none; }
.playlist-row.drop-before::before { top:0; z-index:3; }
.playlist-row.drop-after::after { bottom:0; z-index:3; }
@media(prefers-reduced-motion:reduce) { .row-front { transition:none; } }

.search-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0 4px}.search-filters button{min-width:0;min-height:44px;padding:7px 3px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.3px}.search-filters button[aria-pressed="true"]{border-color:var(--karaoke);background:#173536;color:var(--karaoke)}

/* Singer sheet: scroll content independently while touch actions stay reachable. */
.sheet.singer-sheet { bottom:var(--sheet-bottom,0px); max-height:min(85dvh,var(--sheet-height,85dvh)); padding:0; overflow:hidden; }
.sheet.singer-sheet #sheet-form { display:flex; flex-direction:column; max-height:calc(min(85dvh,var(--sheet-height,85dvh)) - 2px); min-height:0; }
.sheet.singer-sheet .sheet-content { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px 20px 16px; -webkit-overflow-scrolling:touch; }
.sheet.singer-sheet .sheet-actions { flex:none; margin:0; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--surface); }
.sheet.singer-sheet .sheet-actions button { min-width:0; min-height:52px; }
.sheet.singer-sheet .singer-chips { max-height:none; overflow:visible; }
.sheet.singer-sheet #singer-create { width:100%; margin-top:12px; color:var(--karaoke); }
.sheet.singer-sheet .singer-chip[data-current-singer=true] { box-shadow:inset 3px 0 var(--karaoke); }
.sheet.singer-sheet .sheet-handle { margin-bottom:16px; }
.sheet.singer-sheet h2 { font-size:23px; }

.sheet.singer-sheet .sheet-footer { flex:none; background:var(--surface); border-top:1px solid var(--border); }
.sheet.singer-sheet #singer-selection { margin:10px 20px 0; color:var(--karaoke); }
.sheet.singer-sheet .sheet-actions { border-top:0; }

/* Search bar only: consistent inset icons and a reserved, touch-sized clear target. */
.search-input { display:grid; grid-template-columns:20px minmax(0,1fr) 44px; gap:10px; padding:4px 6px 4px 16px; min-height:56px; align-items:center; }
.search-input .search-icon { width:20px; height:20px; color:var(--muted); pointer-events:none; }
.search-input input { width:100%; min-width:0; min-height:44px; padding:8px 0; line-height:1.4; border:0; border-radius:0; }
.search-input input:focus-visible { outline:none; }
.search-input:focus-within { border-color:var(--karaoke); }
.search-input input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.search-clear { grid-column:3; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:10px; background:transparent; color:var(--muted); }
.search-clear svg { width:20px; height:20px; pointer-events:none; }

/* One playlist layout, including while dragging. */
.add-flight { position:fixed; z-index:30; margin:0; pointer-events:none; overflow:hidden; transform-origin:center; will-change:transform,opacity; grid-template-columns:64px minmax(0,1fr); box-shadow:0 8px 22px #0006; }
.rows > .playlist-row .row-front { padding:8px; grid-template-columns:minmax(0,1fr) 44px; gap:0 6px; }
.rows > .playlist-row .row-body { min-height:52px; height:52px; grid-template-columns:64px minmax(0,1fr); gap:8px; }
.rows > .playlist-row .row-position,
.rows > .playlist-row .row-meta,
.rows > .playlist-row .singer-slot,
.rows > .playlist-row .selected-label { display:none; }
.rows > .playlist-row .artwork-frame { width:64px; height:36px; aspect-ratio:16/9; }
.rows > .playlist-row .row-body { position:relative; }
.rows > .playlist-row.active .row-body { grid-template-columns:26px 64px minmax(0,1fr); gap:6px; }
.rows > .playlist-row.active .artwork-frame { grid-column:2; grid-row:1; }
.rows > .playlist-row.active .row-copy { grid-column:3; grid-row:1; }
.row-playing-indicator { grid-column:1; grid-row:1; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid #54dca5; border-radius:50%; background:#102923; transform:translateX(-2px); pointer-events:none; }
.row-playing-triangle { width:10.4px; height:12.1333px; background:#54dca5; clip-path:polygon(0 0,100% 50%,0 100%); transform:translateX(1.7333px); }
.rows > .playlist-row .row-copy { min-width:0; height:37px; }
.rows > .playlist-row .row-title { display:flex; align-items:center; min-width:0; font-size:14px; line-height:18px; font-weight:750; white-space:nowrap; letter-spacing:0; }
.normal-prefix { flex:none; max-width:clamp(88px,24vw,104px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--type-color); }
.normal-separator { flex:none; padding:0 4px; color:var(--muted); }
.normal-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rows > .karaoke .normal-prefix { visibility:hidden; }
.rows > .playlist-row .row-artist { margin-top:3px; font-size:11px; line-height:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal; }
.rows > .playlist-row .singer-action { align-self:center; justify-self:start; margin-left:72px; transform:translateY(-9.5px); width:fit-content; max-width:clamp(88px,24vw,104px); min-height:44px; height:44px; padding:0; font-size:14px; line-height:18px; font-weight:750; letter-spacing:0; color:var(--karaoke); }
.rows > .playlist-row.active .singer-action { margin-left:102px; }
.rows > .playlist-row .drag-handle { grid-column:2; align-self:center; width:44px; height:48px; }

.rows > .playlist-row .drag-handle { font-size:0; }
.rows > .playlist-row .drag-handle::before { content:'≡'; font-size:25px; }

.playlist-row.youtube .normal-prefix { color:#ff716f; }

/* The main action stays reachable while scrolling; scroll never changes selection. */
.primary-control { position:sticky; top:env(safe-area-inset-top,0px); z-index:5; padding:6px 0 10px; background:var(--bg); display:flex; flex-direction:column; align-items:center; }
.primary-control .primary { width:112px; max-width:100%; height:52px; margin:0; padding:0 14px; border-radius:999px; gap:9px; font-size:11px; letter-spacing:1px; box-shadow:0 3px 12px #0004; }
.primary-control #primary-icon { font-size:24px; line-height:1; }
.primary-control .primary.stop > span { transform:translateY(2px); }
.primary-control .primary.stop #primary-icon { color:#ff716f; transform:translateY(0); }
.primary-control .primary-note { margin:6px 0 0; font-size:11px; }
.primary-control.with-pitch { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:6px 24px; }
.primary-control.with-pitch .primary-note { flex-basis:100%; text-align:center; }
.live-pitch { display:flex; align-items:center; gap:2px; border:1px solid var(--border); border-radius:16px; padding:2px; background:var(--surface); }
.live-pitch button { width:44px; height:48px; padding:0; border:0; background:transparent; border-radius:12px; color:var(--karaoke); font-size:24px; }
.live-pitch .pitch-reset { position:relative; width:58px; display:grid; grid-template-columns:1fr; align-content:center; justify-items:center; padding:0 4px; }
.pitch-label { grid-column:1/-1; font-size:9px; line-height:12px; letter-spacing:1px; color:var(--muted); }
#pitch-value { font-size:18px; line-height:24px; font-weight:750; font-variant-numeric:tabular-nums; }
.pitch-reset-icon { position:absolute; right:1px; bottom:6px; width:12px; font-size:14px; line-height:24px; }
.live-pitch .pitch-reset:disabled { opacity:1; }
.pitch-reset:disabled .pitch-reset-icon { opacity:.38; }

.audio-panel { margin:0 0 16px; padding:14px 10px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.audio-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 2px 16px; }
.audio-heading h3 { margin:0; font-size:14px; letter-spacing:1px; }
.audio-connection { font-size:0; color:#ff716f; white-space:nowrap; }
.audio-connection::before { content:''; display:block; width:7px; height:7px; border-radius:50%; background:currentColor; }
.audio-connection.connected { color:#75e0a7; }
.audio-faders { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.audio-channel { min-width:0; text-align:center; padding:10px 0; border:1px solid var(--border); border-radius:12px; background:#10202b; }
.audio-master { border-color:#3e9274; background:#11251f; }
.audio-label { display:block; font-size:11px; font-weight:700; }
.audio-channel output { display:block; margin:6px 0 10px; font-size:25px; line-height:30px; font-weight:650; color:#75e0a7; font-variant-numeric:tabular-nums; }
.audio-travel { position:relative; width:48px; height:240px; margin:0 auto; }
.audio-track { position:absolute; width:12px; top:19px; bottom:19px; left:18px; overflow:hidden; border:1px solid #314a64; border-radius:6px; background:#20344a; pointer-events:none; }
.audio-fill { position:absolute; bottom:0; width:100%; height:var(--audio-level); background:#28b891; }
.audio-thumb { position:absolute; top:calc(202px - 2.02px * var(--audio-value,0)); width:48px; height:38px; display:grid; place-items:center; border:2px solid #d5ffe9; border-radius:10px; background:#75e0a7; touch-action:none; user-select:none; cursor:grab; }
.audio-thumb span { width:18px; height:3px; border-radius:2px; background:#176b58; pointer-events:none; }
.audio-thumb.held { cursor:grabbing; box-shadow:0 0 0 3px #75e0a730; }
.audio-thumb[aria-disabled="true"] { opacity:.38; cursor:default; }
.audio-thumb:focus-visible { outline:2px solid var(--karaoke); outline-offset:3px; }
.audio-range { display:block; margin-top:12px; font-size:10px; color:var(--muted); }

/* The real row keeps pointer capture; only the gap participates in list layout. */
#playlist.dragging { position:relative; }
#playlist .playlist-row.drag-origin-hidden { position:absolute; top:0; left:0; width:100%; opacity:0; pointer-events:none; }
.playlist-drag-placeholder { flex:none; min-width:0; border:1px dashed #1ed7be80; border-radius:12px; background:#1ed7be0c; }
.playlist-drag-overlay { position:fixed; top:0; z-index:12; pointer-events:none; will-change:transform; }
.playlist-drag-overlay .playlist-row.drag-floating { margin:0; transform:scaleX(.90); transform-origin:center; box-shadow:0 12px 28px #0009,0 0 0 1px var(--karaoke); border-color:var(--karaoke); }
.playlist-drag-overlay.is-dropping .drag-floating { transform:scaleX(1); transition:transform 140ms ease-out; }
.playlist-drag-overlay .row-front { transform:none; transition:none; }
@media (prefers-reduced-motion:reduce) { .playlist-drag-overlay.is-dropping .drag-floating { transition:none; } }
/* Transient QR entry uses the existing login card and its touch controls. */
.qr-notice { padding: 12px 14px; border: 1px solid #21606a; border-radius: 12px; color: #aeeaf0; background: #10292e; line-height: 1.45; overflow-wrap: anywhere; }