:root{
  --bg:#f5f6f8; --panel:#fff; --ink:#151823; --ink2:#4a5063; --mute:#646b7d; --line:#e6e8ee; --line2:#eef0f4;
  --side:#11131b; --side2:#1b1e29; --sideink:#c9cdda;
  --acc:#4f46e5; --acc2:#eef0ff; --ok:#16a34a; --okbg:#e8f7ee; --warn:#b45309; --warnbg:#fdf3e4;
  --bad:#dc2626; --badbg:#fdecec; --info:#0369a1; --infobg:#e6f3fb;
  --stem:#7c3aed; --stembg:#f1ebff; --midi:#b45309; --midibg:#fdf1df; --mem:#0f766e; --membg:#e3f5f2;
  --rep:#be185d; --repbg:#fceaf3;
  --r:10px; --sh:0 1px 2px rgba(16,20,34,.05),0 1px 1px rgba(16,20,34,.03);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", "Arial Hebrew", "Noto Sans", Arial, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{font:14px/1.45 var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.ic{width:18px;height:18px;flex:none;vertical-align:middle}
.title-cell .heb,.song-hd .heb{text-align:left}
.he{font-family:"Noto Sans Hebrew","Arial Hebrew","Taamey Frank CLM","David",var(--font);unicode-bidi:plaintext}
[dir=rtl]{text-align:right}

/* shell */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--side);color:var(--sideink);padding:18px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:10px;align-items:center;padding:4px 8px;color:#fff}
.brand b{display:block;font-size:16px;letter-spacing:.2px}
.brand small{display:block;color:#8d93a8;font-size:12px;margin-top:-2px}
.logo{width:32px;height:32px;border-radius:9px;background:var(--acc);position:relative;flex:none}
.logo:before{content:"";position:absolute;inset:7px 8px 8px 9px;border:2.2px solid #fff;border-left:none;border-bottom:none;border-radius:0 3px 0 0;transform:skewY(-12deg)}
.logo:after{content:"";position:absolute;left:7px;bottom:7px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:9px -2px 0 #fff}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--sideink);font-weight:500}
.side nav a:hover{background:var(--side2)}
.side nav a.on{background:var(--side2);color:#fff}
.side nav a.on .ic{color:#a5b4fc}
.badge{margin-left:auto;background:var(--acc);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px;font-weight:600}
.side-stats{margin-top:auto;border-top:1px solid #23273a;padding:14px 8px 4px;display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;font-size:12px;color:#8d93a8}
.side-stats b{display:block;color:#fff;font-size:16px;font-weight:600}
main{padding:26px 32px 60px;min-width:0}

/* page header */
.ph{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.ph h1{margin:0;font-size:22px;letter-spacing:-.2px}
.ph .sub{color:var(--mute);font-size:13px;margin-top:2px}
.ph .grow{flex:1}
.crumb{display:inline-flex;align-items:center;gap:4px;color:var(--mute);font-size:13px;margin-bottom:8px}
.crumb:hover{color:var(--acc)}

/* controls */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;font-weight:500;cursor:pointer;white-space:nowrap;box-shadow:var(--sh)}
.btn:hover{border-color:#cfd3de;background:#fafbfc}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.pri:hover{background:#4338ca}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent}
.btn.ghost:hover{background:#eef0f4}
.btn.sm{padding:5px 9px;font-size:13px;gap:5px}
.btn.sm .ic{width:16px;height:16px}
.btn.danger{color:var(--bad)}
.btn[disabled]{opacity:.5;cursor:default}
.iconbtn{width:30px;height:30px;display:inline-grid;place-items:center;border-radius:7px;border:1px solid transparent;background:transparent;cursor:pointer;color:var(--ink2)}
.iconbtn:hover{background:#eef0f4}
.input,select.input,textarea.input{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 10px;outline:none;min-width:0}
.input:focus{border-color:#a5b4fc;box-shadow:0 0 0 3px #e0e7ff}
.search{position:relative;flex:1;min-width:240px;max-width:460px}
.search .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--mute)}
.search input{width:100%;padding-left:34px;height:38px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.seg{display:inline-flex;background:#eceef3;border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:5px 10px;border-radius:7px;cursor:pointer;color:var(--ink2);font-weight:500;font-size:13px}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--sh)}

/* cards & tables */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card h3{margin:0;font-size:14px}
.card .hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.card .bd{padding:14px 16px}
table.t{width:100%;border-collapse:separate;border-spacing:0}
.t th{font-size:12px;font-weight:600;color:var(--mute);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:#fafbfc;position:sticky;top:0;white-space:nowrap}
.t td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tbody tr.link{cursor:pointer}
.t tbody tr.link:hover td{background:#f8f9ff}
.t .num{text-align:right;font-variant-numeric:tabular-nums}
.title-cell{display:flex;flex-direction:column;gap:1px;min-width:220px}
.title-cell .lat{font-weight:600}
.title-cell .heb{font-size:15px;color:var(--ink2)}
.muted{color:var(--mute)}
.small{font-size:12px}
.nowrap{white-space:nowrap}
.count{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-variant-numeric:tabular-nums}
.count .ic{width:15px;height:15px;color:var(--mute)}

/* chips */
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;background:#eef0f4;color:var(--ink2)}
.chip .ic{width:13px;height:13px}
.chip.stem{background:var(--stembg);color:var(--stem)}
.chip.midi{background:var(--midibg);color:var(--midi)}
.chip.mem{background:var(--membg);color:var(--mem)}
.chip.rep{background:var(--repbg);color:var(--rep)}
.chip.run{background:var(--infobg);color:var(--info)}
.chip.ok{background:var(--okbg);color:var(--ok)}
.chip.bad{background:var(--badbg);color:var(--bad)}
.chip.warn{background:var(--warnbg);color:var(--warn)}
.chip.off{background:transparent;border:1px dashed #d5d9e3;color:#a3a9b9;font-weight:500}
.chip.tag{background:#fff;border:1px solid var(--line);color:var(--ink2);font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.run .dot{animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.25}}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh)}
.stat b{display:block;font-size:20px;font-weight:650;letter-spacing:-.3px}
.stat span{color:var(--mute);font-size:12px;display:flex;align-items:center;gap:5px}
.stat span .ic{width:14px;height:14px}

/* song page */
.song-hd{display:flex;gap:18px;align-items:flex-start;margin-bottom:18px}
.song-art{width:72px;height:72px;border-radius:14px;background:linear-gradient(135deg,#4f46e5,#7c3aed);display:grid;place-items:center;color:#fff;flex:none}
.song-art .ic{width:34px;height:34px}
.song-hd h1{margin:0;font-size:24px;letter-spacing:-.3px}
.song-hd .heb{font-size:22px;color:var(--ink2);margin-top:2px}
.meta-row{display:flex;gap:14px;flex-wrap:wrap;color:var(--ink2);margin-top:8px;font-size:13px}
.meta-row span{display:inline-flex;align-items:center;gap:5px}
.meta-row .ic{width:15px;height:15px;color:var(--mute)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
.side-card .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line2);font-size:13px}
.side-card .row:last-child{border:0}

/* recording card */
.rec{border-bottom:1px solid var(--line2)}
.rec:last-child{border-bottom:0}
.rec-top{display:grid;grid-template-columns:40px minmax(0,1fr) auto;row-gap:6px;gap:14px;align-items:center;padding:12px 16px}
.play{width:38px;height:38px;border-radius:50%;border:0;background:var(--acc);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(79,70,229,.3)}
.play .ic{width:16px;height:16px}
.play.sec{background:#eef0f4;color:var(--ink);box-shadow:none}
.rec-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-sub{color:var(--mute);font-size:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wave{height:38px;width:100%;cursor:pointer;display:block;grid-column:2/-1;grid-row:2}
.rec-facts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.fact{font-size:12px;color:var(--ink2);background:#f3f4f7;border-radius:6px;padding:2px 7px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ref-btn{color:#c4c8d4}
.ref-btn.on{color:#f59e0b}
.rec-actions{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 12px 70px;align-items:center}
.rec-actions .sep{flex:1}
.rec-more{padding:4px 16px 16px 70px;display:grid;gap:12px}
.jobbar{display:flex;align-items:center;gap:10px;padding:0 16px 12px 70px;font-size:12px;color:var(--info)}
.prog{flex:1;height:6px;border-radius:99px;background:#e6eef7;overflow:hidden;max-width:360px}
.prog i{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#4f46e5);border-radius:99px;transition:width .4s}
.errline{margin:0 16px 12px 70px;font-size:12px;color:var(--bad);background:var(--badbg);border-radius:7px;padding:6px 10px}

/* stems mixer */
.mixer{border:1px solid var(--line);border-radius:10px;background:#fbfbfd}
.mixer-hd{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line2)}
.mixer-hd .time{font-variant-numeric:tabular-nums;color:var(--ink2);font-size:12px;min-width:86px}
.mixer-hd input[type=range]{flex:1}
.strip{display:grid;grid-template-columns:24px 110px 64px minmax(80px,1fr) 34px;gap:10px;align-items:center;padding:7px 12px;border-bottom:1px solid var(--line2)}
.strip:last-child{border:0}
.strip .nm{font-weight:600;font-size:13px}
.strip .ms{display:flex;gap:4px}
.tgl{width:26px;height:24px;border-radius:6px;border:1px solid var(--line);background:#fff;font-size:11px;font-weight:700;cursor:pointer;color:var(--ink2)}
.tgl.m.on{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}
.tgl.s.on{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.meter{height:6px;border-radius:99px;background:#eceef3;overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:99px;transition:width .08s}
input[type=range]{accent-color:var(--acc);height:4px}
.strip .ic{color:var(--mute)}

/* midi / chart */
.assetbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.asset{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;gap:10px;align-items:center;background:#fff}
.asset .ai{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none}
.asset .ai.stem{background:var(--stembg);color:var(--stem)}
.asset .ai.midi{background:var(--midibg);color:var(--midi)}
.asset .ai.mem{background:var(--membg);color:var(--mem)}
.asset .ai.rep{background:var(--repbg);color:var(--rep)}
.asset .nm{font-weight:600;font-size:13px}
.asset .grow{flex:1;min-width:0}
.roll{width:100%;height:120px;display:block;background:#fff;border:1px solid var(--line);border-radius:10px}
.chords{display:flex;gap:3px;overflow:auto;padding-bottom:4px}
.chord{flex:none;border-radius:6px;background:var(--membg);color:var(--mem);font-weight:700;font-size:12px;padding:5px 8px;min-width:34px;text-align:center}
.chord.min{background:#e8ecfb;color:#3730a3}
.section-title{font-size:12px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px;display:flex;align-items:center;gap:8px}

/* upload */
.drop{display:block;width:100%;border:2px dashed #c9cede;border-radius:14px;background:#fff;padding:38px;text-align:center;color:var(--ink2);cursor:pointer;transition:.15s}
.drop.over{border-color:var(--acc);background:#f5f5ff}
.drop .big{width:54px;height:54px;border-radius:14px;background:var(--acc2);color:var(--acc);display:grid;place-items:center;margin:0 auto 12px}
.drop .big .ic{width:26px;height:26px}
.drop h2{margin:0 0 4px;font-size:18px;color:var(--ink)}
.group{margin-top:14px}
.group .hd{gap:12px;flex-wrap:wrap}
.group .hd .input{min-width:260px}
.match{font-size:12px;display:inline-flex;align-items:center;gap:5px}
.files{table-layout:fixed}
.files th:nth-child(1){width:30%}.files th:nth-child(2){width:17%}.files th:nth-child(3){width:19%}.files th:nth-child(4){width:15%}.files th:nth-child(5){width:6%}.files th:nth-child(6){width:13%}
.files td .input{width:100%}
.files .fn{font-weight:500;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* jobs */
.jobkind{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.jobkind .ic{width:16px;height:16px;color:var(--acc)}
pre.log{margin:0;background:#0f1220;color:#cbd2e6;border-radius:8px;padding:10px 12px;font-size:12px;max-height:220px;overflow:auto;white-space:pre-wrap}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.tool{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;background:#fff}
.tool .ic{width:16px;height:16px}
.tool.y .ic{color:var(--ok)}
.tool.n .ic{color:#c0c4cf}

/* modal / toast */
.modal{position:fixed;inset:0;background:rgba(17,19,27,.45);display:grid;place-items:center;z-index:50;padding:20px}
.modal .box{background:#fff;border-radius:14px;width:min(620px,100%);max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal .box .hd{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line2)}
.modal .box .hd h3{margin:0;flex:1}
.modal .box .bd{padding:16px 18px;display:grid;gap:12px}
.modal .box .ft{padding:12px 18px;border-top:1px solid var(--line2);display:flex;justify-content:flex-end;gap:8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid label,.fld{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--ink2)}
.form-grid .full{grid-column:1/-1}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#151823;color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;z-index:60;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.empty{padding:40px;text-align:center;color:var(--mute)}
.banner{display:flex;gap:10px;align-items:center;background:var(--acc2);color:#3730a3;border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:13px}
.kbd{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#f1f2f6;border-radius:5px;padding:1px 6px}

@media (max-width:1100px){.grid2{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){
  .shell{grid-template-columns:minmax(0,1fr)}.side{min-width:0;width:100%;position:static;height:auto;flex-direction:row;align-items:center;padding:10px 12px;gap:10px;overflow-x:auto}
  .side nav{flex-direction:row;overflow:auto}.side nav a{padding:7px 9px}.side-stats,.brand small{display:none}
  main{padding:16px}.rec-top{grid-template-columns:40px 1fr;}.rec-facts{grid-column:1/-1;justify-content:flex-start}
  .rec-actions,.rec-more,.jobbar{padding-left:16px}.hide-sm{display:none}
}
/* Library editing, public sign-in, and constrained recording panels. */
.card,.rec,.rec-more,.grid2>*,.rec-more>*,.mixer{min-width:0;max-width:100%}
.chords{max-width:100%;flex-wrap:wrap;overflow-x:auto}
.rec-actions,.card>.hd,.editor-toolbar{flex-wrap:wrap}
.recording-context{grid-column:2/-1;min-width:0;font-size:12px;color:var(--ink2)}
.recording-context>a{color:var(--acc)}
.export-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.report-list>div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line)}
@media(max-width:820px){.export-grid{grid-template-columns:minmax(0,1fr)}}
.rec-facts{grid-column:3;grid-row:1}
.recording-context{grid-row:3}
.rec[data-missing="1"] .wave{display:none}
.rec .play:disabled{opacity:.4;cursor:default}
.segments-lane{position:relative;height:23px;background:#edf0f7;border-radius:5px;overflow:hidden;margin-top:7px}
.segment{position:absolute;top:0;height:100%;background:#d8e8e6;border-right:1px solid #fff;font-size:10px;white-space:nowrap;overflow:hidden;color:#246965;padding:3px}
.segment.excluded,.timeline-cell.excluded{background:#dfe1e6;color:#616776}
.editor-toolbar{display:flex;gap:12px;align-items:center;margin:12px 0}
.editor-toolbar audio{max-width:100%;width:360px}
.editor-toolbar label{display:flex;gap:7px;align-items:center;font-size:13px}
.timeline-scroll{overflow-x:auto;margin:18px 0;background:#f5f5fa;border-radius:8px;border:1px solid var(--line)}
.editor-timeline{position:relative;height:74px;min-width:900px;width:100%}
.timeline-cell{position:absolute;top:8px;height:58px;border:1px solid #fff;background:#e6e1fc;color:#493d97;font-weight:650;text-align:left;overflow:hidden;cursor:pointer;padding:4px;border-radius:4px;min-width:2px}
.timeline-cell.playing{background:var(--acc);color:white}
.boundary{position:absolute;right:0;top:0;width:8px;height:100%;cursor:ew-resize;background:#5441cc33;touch-action:none}
.table-scroll{overflow-x:auto;max-width:100%}
.editor-table{width:100%;border-collapse:collapse;min-width:520px}
.editor-table th,.editor-table td{padding:8px;border-bottom:1px solid var(--line);text-align:left}
.editor-table th{font-size:12px;color:var(--mute)}
.editor-table input{width:100%;min-width:65px;max-width:150px}
.editor-table .chord-input{font-weight:650;color:var(--acc)}
.section-edit{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:8px;margin:8px 0}
.section-edit input{width:100%}
.repertoire-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.repertoire-card{padding:24px;transition:box-shadow .15s}
.repertoire-card:hover{box-shadow:0 4px 18px #30235e18}
.report-list>div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line)}
.side-logout{color:#a7a9b7;justify-content:flex-start;font-size:12px;margin-top:12px}
.login-page{min-height:100vh;display:grid;place-items:center;background:#f4f4fa;padding:24px}
.login-card{width:min(430px,100%);padding:38px;box-shadow:0 18px 65px #21163910}
.login-card h1{font-size:27px;letter-spacing:-.8px;margin-top:25px}
.login-note{display:grid;place-items:center;background:var(--acc);color:#fff;border-radius:14px;width:55px;height:55px;font-size:32px}
.login-card .fld{margin:30px 0 12px;display:grid;gap:7px}
.login-card .btn{width:100%;justify-content:center;padding:12px}
.login-card small{display:block;margin-top:28px;text-align:center}
#error{color:#bc283e;font-size:13px}
.connection-status{position:fixed;top:12px;right:16px;max-width:calc(100% - 32px);z-index:100;padding:12px 16px;border:1px solid #f3cd84;border-radius:10px;background:#fff7e5;color:#74501a;font-size:13px;box-shadow:0 3px 14px #21163914}
@media(max-width:820px){.song-hd{flex-wrap:wrap}.rec-top{padding:12px;column-gap:8px}.rec-facts{grid-column:2/-1;grid-row:2}.wave{grid-row:3}.rec-actions{padding:8px 12px;gap:6px}.rec-more{padding:12px}.card>.hd{gap:8px}.card>.bd{padding:16px}.song-hd>div:last-child{width:100%}.section-edit{grid-template-columns:1fr 1fr}.editor-toolbar audio{width:100%}.side-logout{margin:0}.recording-context{grid-column:1/-1;grid-row:4}.ph{flex-wrap:wrap;gap:14px}.form-grid{grid-template-columns:1fr}.repertoire-grid{grid-template-columns:1fr}.editor-toolbar select{max-width:100%}.files .fn{max-width:180px}}
/* Refreshed library pages: top bar, progress tiles, filter pills, pipeline steps, inline play, persistent player. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.badge.new{background:#2a2f45;color:#c7d2fe}
.topbar{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin:-26px -32px 22px;padding:14px 32px;background:#fff;border-bottom:1px solid var(--line)}
.search.big{max-width:560px;flex:1 1 320px}.search.big input{height:44px;border-radius:10px;background:var(--bg);padding-right:40px}
.search .slash{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:#fff;border:1px solid var(--line)}
.topbar .grow{flex:1}
.topbar .btn{height:42px;border-radius:10px}
.stats2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.stat2{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;box-shadow:var(--sh)}
.stat2>span{color:var(--ink2);font-size:12px;font-weight:600}
.stat2>div{display:flex;align-items:baseline;gap:8px;margin-top:3px}
.stat2 b{font-size:22px;letter-spacing:-.4px}.stat2 em{font-style:normal;color:var(--mute);font-size:12px}
.stat2 .bar{display:block;height:6px;border-radius:99px;background:#eef0f4;margin-top:9px;overflow:hidden}
.stat2 .bar i{display:block;height:100%;background:var(--acc);border-radius:99px}
.pills{display:flex;gap:7px;flex-wrap:wrap}
.pills button{height:36px;padding:0 13px;border-radius:99px;border:1px solid #d9dde6;background:#fff;color:var(--ink);font-weight:600;font-size:13px;cursor:pointer}
.pills button span{color:var(--mute);font-weight:500;margin-left:2px}
.pills button.on{background:var(--ink);border-color:var(--ink);color:#fff}.pills button.on span{color:#c9cdda}
.toolbar .grow{flex:1}
.songs-t td{padding-top:9px;padding-bottom:9px}
.songs-t tr.playing td{background:#f5f6ff}
.rowplay{width:36px;height:36px;border-radius:50%;border:0;background:#eef0f4;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.rowplay .ic{width:14px;height:14px}.rowplay:hover{background:#e0e3ff}
tr.playing .rowplay{background:var(--acc);color:#fff}
.pipes{display:flex;gap:4px;flex-wrap:wrap}
.pipe{height:24px;display:inline-flex;align-items:center;gap:3px;padding:0 8px;border-radius:99px;font-size:12px;font-weight:600;border:1px dashed #c9ceda;color:var(--mute);white-space:nowrap}
.pipe.on{border:1px solid #c7d2fe;background:#eef0ff;color:#3730a3}
.pipe .ic{width:12px;height:12px}
.pipes.sm .pipe{height:22px;font-size:11px;padding:0 7px}
.song-actions{display:flex;gap:8px;flex-wrap:wrap}
.studio-btn{background:#eef0ff;border-color:#c7d2fe;color:#3730a3}.studio-btn:hover{background:#e0e3ff}
.menu-wrap{position:relative;display:inline-flex}
.menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(16,20,34,.16);padding:5px;display:flex;flex-direction:column}
.menu>button,.menu>a{display:flex;gap:10px;align-items:flex-start;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:500;color:var(--ink)}
.menu>button:hover,.menu>a:hover{background:#f3f4f8}.menu>button[disabled]{opacity:.45;cursor:default}
.menu .ic{width:16px;height:16px;color:var(--acc);margin-top:1px}
.menu small{display:block;color:var(--mute);font-size:11px;font-weight:400}
.edit-list{display:flex;flex-direction:column;gap:2px;margin:-6px -8px}
.edit-list a{display:flex;gap:10px;align-items:center;padding:8px;border-radius:8px}
.edit-list a:hover{background:#f5f6ff}
.edit-list b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.edit-list .ai{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none}
.edit-list .ai.e{background:#eef0ff;color:#3730a3}.edit-list .ai.r{background:var(--okbg);color:var(--ok)}
.edit-list .ai .ic{width:16px;height:16px}
.pbar{position:fixed;left:232px;right:0;bottom:0;z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 28px;background:#12141c;color:#e8eaf0;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.pbar-play{width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#12141c;display:grid;place-items:center;cursor:pointer;flex:none}
.pbar-play .ic{width:16px;height:16px}
.pbar-meta{display:flex;flex-direction:column;min-width:160px;max-width:300px}
.pbar-meta a{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pbar-meta a:hover{text-decoration:underline}
.pbar-meta span{color:#9aa1b2;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar-seek{flex:1 1 240px;display:flex;align-items:center;gap:10px;font:12px "JetBrains Mono",ui-monospace,monospace;color:#c3c8d4}
.pbar-seek input{flex:1;accent-color:#818cf8}
.pbar-studio{height:38px;padding:0 13px;border-radius:9px;background:#2a2f45;color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:7px}
.pbar-studio:hover{background:#363c58}.pbar-x{color:#9aa1b2}.pbar-x:hover{background:#2a2f45}
body:has(.pbar:not([hidden])) main{padding-bottom:110px}
@media(max-width:820px){.topbar{margin:-16px -16px 16px;padding:12px 16px}.pbar{left:0;padding:10px 16px}.pbar-meta{max-width:calc(100% - 60px)}.pbar-studio{display:none}}