:root{
  --face:#c0c0c0; --hi:#ffffff; --lo:#808080; --dk:#404040; --ink:#000;
  --navy:#000080; --navy2:#1084d0; --sel:#000080; --selink:#fff;
  --well:#fff; --led:#00ff66; --ledbg:#001a0a; --muted:#555;
  --font: Tahoma, Verdana, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--face);font:11px/1.3 var(--font);color:var(--ink);padding:0}
button{font:inherit;color:inherit}

/* bevels */
.raised{background:var(--face);border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--lo),inset 1px 1px #dfdfdf}
.sunken{border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);box-shadow:inset 1px 1px var(--dk),inset -1px -1px #dfdfdf}
.btn{background:var(--face);border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--lo),inset 1px 1px #dfdfdf;padding:3px 8px;cursor:pointer;min-height:23px}
.btn:active,.btn.on{border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:inset 1px 1px var(--lo);padding:4px 7px 2px 9px}
.btn:focus-visible{outline:1px dotted #000;outline-offset:-4px}

/* window */
.win{width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:3px}
.titlebar{background:linear-gradient(90deg,var(--navy),var(--navy2));color:#fff;font-weight:bold;padding:3px 4px 3px 6px;display:flex;align-items:center;gap:6px;height:22px}
.titlebar .logo{width:14px;height:14px;background:#fff;border-radius:50%;display:grid;place-items:center;color:var(--navy);font-size:9px}
.titlebar .ctl{margin-left:auto;display:flex;gap:2px}
.titlebar .ctl span{width:16px;height:14px;font-size:9px;line-height:12px;text-align:center;color:#000}
.menubar{display:flex;gap:2px;padding:2px 2px}
.menubar span{padding:2px 6px}
.menubar span u{text-decoration:underline}
.menubar a{color:inherit;text-decoration:none;padding:2px 6px}
.menubar a:hover{background:var(--navy);color:#fff}
.menubar .note{margin-left:auto;color:var(--muted);padding:2px 6px}

.tabs{display:flex;gap:2px;padding:4px 4px 0}
.tab{padding:4px 12px;border:1px solid;border-color:var(--hi) var(--dk) transparent var(--hi);background:var(--face);position:relative;top:1px;cursor:pointer}
.tab.on{padding-bottom:6px;top:2px;font-weight:bold;z-index:1}
.body{flex:1;display:flex;gap:0;padding:4px;min-height:0;border-top:1px solid var(--hi)}

/* sidebar */
.side{width:var(--sidew,190px);flex:none;display:flex;flex-direction:column;gap:6px;overflow:auto;min-width:0}
fieldset{border:1px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);margin:0;padding:6px 8px 8px}
legend{padding:0 3px}
.side label{display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer}
.side label .n{margin-left:auto;color:var(--muted)}
.side input{margin:0}
.search{width:100%;padding:3px 4px;font:inherit;background:var(--well)}

/* list */
.main{flex:1;display:flex;flex-direction:column;gap:0;min-width:0;min-height:0}
.btn:disabled{color:#999;cursor:default;text-decoration:line-through}
.listwrap{flex:1;background:var(--well);overflow:auto;min-height:0}
table{border-collapse:collapse;width:100%;white-space:nowrap}
thead th{position:sticky;top:0;background:var(--face);font-weight:normal;text-align:left;padding:2px 6px;border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);cursor:pointer;user-select:none}
thead th.sorted::after{content:" ▾"}
thead th.sorted.asc::after{content:" ▴"}
tbody td{padding:2px 6px;border-bottom:1px dotted #d8d8d8;overflow:hidden;text-overflow:ellipsis;max-width:220px}
tbody tr{cursor:default}
tbody tr:hover td{background:#e8e8ff}
tbody tr.sel td{background:var(--sel);color:var(--selink)}
tbody tr.sel .badge{border-color:#fff}
tbody tr.playing td:first-child{font-weight:bold}
td.c{text-align:center}
td.r{text-align:right;font-variant-numeric:tabular-nums}
.heart{cursor:pointer;color:#b00;font-size:12px}
tr.sel .heart{color:#fff}
.own{color:#a07000}
tr.sel .own{color:#ffe08a}
.badge{display:inline-block;border:1px solid #888;padding:0 4px;font-size:10px}
.b-in{background:#d8f5d8}.b-fc{background:#fff4c2}.b-pre{background:#e4e0ff}.b-out{background:#eee;color:#777}
.b-used{background:#ffd9b3;border-color:#c06000;font-weight:bold}
.price{font-weight:bold}
.yt{width:100%;flex:1;border:0;min-height:0;background:#000}
tr.sel .badge{color:#000}

/* tracks pane */
.tracks{height:var(--paneh,185px);flex:none;display:flex;gap:6px;padding:6px;min-height:0}
.tinner{flex:1;display:flex;gap:6px;min-width:0;min-height:0}
.tracks img{width:136px;height:136px;max-height:100%;object-fit:cover;background:#999;flex:none}
.tinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tinfo h2{font-size:12px;margin:0}
.tinfo .sub{color:var(--muted)}
.tlist{flex:1;overflow:auto;background:var(--well);padding:2px}
.trow{display:flex;gap:8px;padding:2px 4px;cursor:pointer}
.trow:hover{background:#e8e8ff}
.trow.on{background:var(--sel);color:#fff}
.trow .p{width:24px;font-weight:bold}
.trow .b{margin-left:auto;color:var(--muted)}
.trow.on .b{color:#ddd}
.links{display:flex;gap:4px;flex-wrap:wrap}
.links a{color:var(--navy)}

/* player */
.player{display:flex;align-items:center;gap:6px;padding:5px 6px}
.transport{display:flex;gap:2px}
.transport .btn{width:30px;padding:0;font-size:12px}
.lcd{flex:1;min-width:0;background:var(--ledbg);color:var(--led);font:11px/1.2 "Lucida Console",Monaco,monospace;padding:4px 8px;display:flex;flex-direction:column;gap:3px}
.lcd .row{display:flex;gap:10px;white-space:nowrap;overflow:hidden}
.lcd .now{overflow:hidden;text-overflow:ellipsis;flex:1}
.wave{height:14px;cursor:pointer;background:#0a3a1a;border:1px solid #0a5a2a;position:relative}
.wave .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--led)}
.vol{display:flex;align-items:center;gap:4px}
.vol input{width:80px}
.statusbar{display:flex;gap:2px;padding:2px 0 0}
.statusbar span{padding:2px 6px}
.statusbar span:first-child{flex:1}

.chips,.mlist{display:none}

/* ---------- phone ---------- */
@media (max-width:700px){
  body{padding:0;background:var(--face);display:block}
  .win{width:100%;height:100vh;height:100dvh;padding:0;border:0;box-shadow:none}
  .menubar,.side,.statusbar,.tracks,.tabs .tab.hideph{display:none}
  .body{padding:0 0 0;flex-direction:column;gap:0}
  .chips{display:flex;flex:none;gap:4px;overflow-x:auto;padding:6px 8px;border-bottom:1px solid var(--lo)}
  .chips .btn{white-space:nowrap;min-height:30px}
  .listwrap table{display:none}
  .mlist{display:block}
  .mrow{display:flex;gap:8px;padding:8px;border-bottom:1px solid #ddd;align-items:center}
  .mrow.playing{background:#e8e8ff}
  .mrow img{width:52px;height:52px;object-fit:cover;flex:none;background:#999}
  .mrow .t{flex:1;min-width:0}
  .mrow .t b,.mrow .t div{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mrow .t div{color:var(--muted);margin-top:2px}
  .mrow .heart{font-size:18px;padding:6px}
  .mrow .playb{width:40px;height:40px;font-size:15px;padding:0}
  .mrow .mtracks{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
  .mrow .mtracks .btn{min-height:26px;padding:2px 7px}
  .player{flex-wrap:wrap;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .lcd{order:-1;flex-basis:100%}
  .vol{display:none}
  .transport{flex:1;justify-content:space-between}
  .transport .btn{flex:1;height:38px;font-size:15px}
  .titlebar{height:auto;padding:calc(6px + env(safe-area-inset-top)) 8px 6px}
  .titlebar .ctl{display:none}
  .tabs{padding:4px 8px 0}
}

/* app additions */
.body.raised{border-top:0}
th.col-heart{width:22px}
.heart{background:none;border:0;padding:0}
.tlist .status-text{color:var(--muted);padding:2px 4px;font-style:italic}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#ffffe1;border:1px solid #000;padding:4px 8px;display:none;z-index:5}
.toast.show{display:block}
.trow.noclip{color:#999;cursor:default}
@media (max-width:700px){
  .menubar .note{display:none}
  .mrow .t div.st{font-style:italic}
}
.empty{padding:12px 16px;color:#777}
/* fixed column widths: Price, BPM and Trk stay in view; long text ends in … */
#maintable{table-layout:fixed}
thead th{overflow:hidden;text-overflow:ellipsis}
tbody td{max-width:none}

/* step 3: shops, videos */
.shopline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopline a{color:var(--navy)}
.trow .x{border:1px solid #888;background:var(--face);font-size:9px;padding:0 3px;cursor:pointer;margin-left:4px}
.phonevideo{display:none}
@media (max-width:700px){
  .phonevideo:not([hidden]){display:flex;flex-direction:column;gap:4px;padding:4px;position:fixed;left:0;right:0;bottom:118px;z-index:4}
  .phonevideo .yt{height:200px;flex:none}
}
.yt.sc{min-height:120px}
/* public privacy page */
body.privacy .privacy-page{height:auto;max-width:720px}
.privacy-text{background:var(--well);padding:12px 16px;font-size:13px;line-height:1.5}

/* resizable panels: drag the bars (sizes are remembered in this browser) */
.vsplit{width:7px;flex:none;cursor:col-resize;position:relative}
.hsplit{height:7px;flex:none;cursor:row-resize;position:relative}
.vsplit::after{content:"";position:absolute;top:50%;left:2px;width:3px;height:28px;margin-top:-14px;border-left:1px dotted var(--dk);border-right:1px dotted var(--dk)}
.hsplit::after{content:"";position:absolute;left:50%;top:2px;height:3px;width:28px;margin-left:-14px;border-top:1px dotted var(--dk);border-bottom:1px dotted var(--dk)}
.vsplit:hover,.hsplit:hover,.dragging .vsplit,.dragging .hsplit{background:#a8a8d8}
.dragging{user-select:none}
.dragging iframe{pointer-events:none}
/* video sits on the right of the record panel, sized by the panel height */
.videobox{flex:none;height:100%;aspect-ratio:16/9;max-width:60%;display:flex;flex-direction:column;gap:2px}
.videobox[hidden]{display:none}
.videobox .yt{flex:1;min-height:0}
.videobox .vbar{display:flex;gap:4px;align-items:center}
.videobox .vbar span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.videobox .vbar .btn{min-height:18px;padding:0 6px}
.allnone{font-size:10px;color:var(--muted)}
.allnone button{background:none;border:0;padding:0;color:var(--navy);text-decoration:underline;cursor:pointer;font-size:10px}
@media (max-width:700px){.vsplit,.hsplit,.videobox{display:none}}

/* follows and release date */
.follows{max-height:160px;overflow:auto}
.follows .f{display:flex;gap:4px;align-items:center;padding:1px 0}
.follows .f span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.follows .f small{color:var(--muted)}
.follows .f button{background:none;border:0;padding:0 2px;cursor:pointer;color:var(--muted)}
.follows .hint{color:var(--muted)}
.fol{color:#b00}
tr.sel .fol{color:#ffb0b0}
.followbar{display:flex;gap:4px;flex-wrap:wrap}
.followbar .btn{min-height:18px;padding:0 6px}

/* ---------- settings menu ---------- */
.menubar{position:relative;align-items:center}
.setbtn{min-height:20px;padding:1px 8px}
.setpanel{position:absolute;top:100%;left:2px;z-index:6;padding:8px 10px;display:flex;flex-direction:column;gap:4px;min-width:250px}
.setpanel[hidden]{display:none}
.setpanel label{display:flex;gap:6px;align-items:baseline;cursor:pointer}
.setpanel small{color:var(--muted)}

/* ---------- themes: same layout, other colours and shapes ---------- */
[data-theme] .badge{color:#111}
[data-theme] .raised,[data-theme] .sunken,[data-theme] .btn,[data-theme] fieldset,[data-theme] .tab,[data-theme] thead th{box-shadow:none}

/* Crate: a record shop at night. Dark wood, cream paper, amber light. */
[data-theme="crate"]{
  --face:#2b2019; --hi:#4a3829; --lo:#15100b; --dk:#15100b; --ink:#f1e6d2;
  --navy:#e2a33b; --navy2:#c4572e; --sel:#e2a33b; --selink:#1a120c;
  --well:#1d1611; --led:#e2a33b; --ledbg:#140e0a; --muted:#b5a183;
  --font:"Avenir Next","Helvetica Neue",Arial,sans-serif;
}
[data-theme="crate"] body{font-size:12px}
[data-theme="crate"] .raised,[data-theme="crate"] .sunken,[data-theme="crate"] fieldset{border:1px solid #47362a;border-radius:6px}
[data-theme="crate"] .btn{border:1px solid #5a4533;border-radius:14px;background:#3a2b20;padding:3px 10px}
[data-theme="crate"] .btn:active,[data-theme="crate"] .btn.on{background:var(--navy);color:var(--selink);border-color:var(--navy);padding:3px 10px}
[data-theme="crate"] .titlebar{background:#1a120c;color:var(--navy);font:600 15px/1 Georgia,"Iowan Old Style",serif;letter-spacing:.02em;height:28px;border-radius:6px 6px 0 0}
[data-theme="crate"] .titlebar .ctl{display:none}
[data-theme="crate"] .titlebar .logo{background:var(--navy);color:#1a120c}
[data-theme="crate"] .tab{border:1px solid #47362a;border-bottom:0;border-radius:8px 8px 0 0}
[data-theme="crate"] .tab.on{background:var(--navy);color:var(--selink)}
[data-theme="crate"] thead th{background:#2b2019;border:0;border-bottom:1px solid #5a4533;text-transform:uppercase;font-size:10px;letter-spacing:.08em;color:var(--muted)}
[data-theme="crate"] tbody td{border-bottom:1px solid #2f241b}
[data-theme="crate"] tbody tr:hover td,[data-theme="crate"] .trow:hover{background:rgba(226,163,59,.13)}
[data-theme="crate"] .tinfo h2{font:600 17px/1.2 Georgia,"Iowan Old Style",serif;color:var(--navy)}
[data-theme="crate"] .tracks img{width:auto;height:100%;aspect-ratio:1;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
[data-theme="crate"] .lcd{border-radius:6px;font-family:var(--font)}
[data-theme="crate"] .wave{background:#3a2b20;border-color:#5a4533;border-radius:7px;overflow:hidden}
[data-theme="crate"] .own{color:#f3c86b}
[data-theme="crate"] .heart,[data-theme="crate"] .fol{color:#e8735a}
[data-theme="crate"] .search{background:#140e0a;color:var(--ink);border-radius:14px;padding:4px 10px}
[data-theme="crate"] .links a,[data-theme="crate"] .shopline a,[data-theme="crate"] .allnone button{color:var(--navy)}
[data-theme="crate"] .toast{background:#3a2b20;color:var(--ink);border-color:var(--navy)}
[data-theme="crate"] .vsplit:hover,[data-theme="crate"] .hsplit:hover{background:rgba(226,163,59,.3)}

/* Club: black room, one neon colour, small capitals. */
[data-theme="club"]{
  --face:#0a0a0a; --hi:#1f1f1f; --lo:#000; --dk:#000; --ink:#e6e6e6;
  --navy:#c6ff00; --navy2:#c6ff00; --sel:#c6ff00; --selink:#000;
  --well:#000; --led:#c6ff00; --ledbg:#000; --muted:#6f6f6f;
  --font:"SF Mono",Menlo,Consolas,monospace;
}
[data-theme="club"] body{font-size:11px;letter-spacing:.02em}
[data-theme="club"] .raised,[data-theme="club"] .sunken,[data-theme="club"] fieldset,[data-theme="club"] .btn,[data-theme="club"] .tab{border:1px solid #262626;border-radius:0}
[data-theme="club"] .btn{background:#000;text-transform:uppercase}
[data-theme="club"] .btn:hover{border-color:var(--navy);color:var(--navy)}
[data-theme="club"] .btn:active,[data-theme="club"] .btn.on{background:var(--navy);color:#000;border-color:var(--navy);padding:3px 8px}
[data-theme="club"] .titlebar{background:#000;color:var(--navy);text-transform:uppercase;letter-spacing:.3em;font-weight:normal;border-bottom:1px solid var(--navy)}
[data-theme="club"] .titlebar .ctl{display:none}
[data-theme="club"] .titlebar .logo{background:var(--navy);color:#000;border-radius:0}
[data-theme="club"] legend,[data-theme="club"] .tab,[data-theme="club"] thead th{text-transform:uppercase;letter-spacing:.12em;font-size:10px}
[data-theme="club"] .tab.on{color:var(--navy);border-color:var(--navy)}
[data-theme="club"] thead th{background:#000;border:0;border-bottom:1px solid #262626;color:var(--muted)}
[data-theme="club"] tbody td{border-bottom:1px solid #141414}
[data-theme="club"] tbody tr:hover td,[data-theme="club"] .trow:hover{background:#121a00}
[data-theme="club"] .tinfo h2{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--navy)}
[data-theme="club"] .tracks img{filter:grayscale(1) contrast(1.15)}
[data-theme="club"] .tracks img:hover{filter:none}
[data-theme="club"] .lcd{border:1px solid #262626}
[data-theme="club"] .wave{background:#111;border-color:#262626;height:4px;margin-top:5px}
[data-theme="club"] .own{color:var(--navy)}
[data-theme="club"] .heart,[data-theme="club"] .fol{color:#ff3d7f}
[data-theme="club"] .search{background:#000;color:var(--ink);border:1px solid #262626}
[data-theme="club"] .links a,[data-theme="club"] .shopline a,[data-theme="club"] .allnone button{color:var(--navy)}
[data-theme="club"] .toast{background:#000;color:var(--navy);border-color:var(--navy)}
[data-theme="club"] .vsplit:hover,[data-theme="club"] .hsplit:hover{background:#2a3a00}
[data-theme] .vsplit::after,[data-theme] .hsplit::after{border-color:var(--muted)}
[data-theme] tbody tr.sel td{background:var(--sel);color:var(--selink)}
[data-theme] .trow.on{background:var(--sel);color:var(--selink)}

/* My records */
#minetable[hidden],#maintable[hidden]{display:none}
#minetable td{border-bottom:1px dotted #d8d8d8;padding:2px 6px;overflow:hidden;text-overflow:ellipsis;max-width:240px}
#minetable .x{border:1px solid #888;background:var(--face);font-size:9px;padding:0 4px;cursor:pointer;color:inherit}
#minetable tr.nolink td{color:var(--muted)}
.mine{color:#1a8a2a;font-weight:bold}
tr.sel .mine{color:#9cff9c}
[data-theme] #minetable td{border-bottom-color:rgba(128,128,128,.25)}
.heart.mine-b{color:#1a8a2a}

/* fast dig */
.fastb.on{background:#ffd84a}
[data-theme] .fastb.on{background:var(--navy);color:var(--selink)}
.fastsecs{font:inherit;height:23px;margin-left:2px}
@media (max-width:700px){.fastsecs{display:none}}

/* stars, notes, tags */
.stars{display:inline-flex;margin-left:6px}
.stars button{background:none;border:0;padding:0 1px;cursor:pointer;color:#c08a00;font-size:12px;line-height:1}
.trow.on .stars button{color:#ffe08a}
.tag{display:inline-block;border:1px solid #888;border-radius:8px;padding:0 5px;font-size:9px;margin-left:2px;background:#f4f4ff;color:#333}
.nt{color:var(--muted);cursor:help}
.noteed{padding:4px 6px 6px 32px;display:flex;flex-direction:column;gap:4px;background:var(--well)}
.tagpick{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.tagpick .btn{min-height:18px;padding:0 6px}
.tagpick input{width:110px}
.trow .x{margin-left:4px}

/* crates and cart */
.link{background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;text-align:left}
.follows .f.on{font-weight:bold}
.crateline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:4px 6px}
.crateline[hidden]{display:none}
.crateline .btn{min-height:20px;padding:0 8px}
.sharelink{width:320px;max-width:100%}
.crsel{font:inherit;height:20px}
.cart{padding:6px 8px;max-height:45vh;overflow:auto}
.cart[hidden]{display:none}
.cartbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.cartbar small{color:var(--muted)}
.cartshops{display:flex;gap:8px;flex-wrap:wrap}
.cartshop{flex:1;min-width:220px;background:var(--well);padding:6px;border:1px solid var(--lo)}
.cartshop div{padding:1px 0}
.cartshop a{color:var(--navy)}
.evt{color:#0a8a2a;font-weight:bold}

/* mix test: two 90s turntables, left and right, with the mixer between them (always side by side) */
.mixer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;padding:6px;align-items:stretch}
.mixer[hidden]{display:none}
.deck90{padding:5px 7px;display:flex;flex-direction:column;gap:4px;min-width:0}
.deck90.live{outline:2px solid #2e9c3f;outline-offset:-2px}
[data-theme] .deck90.live{outline-color:var(--navy)}
.dhead{display:flex;gap:8px;align-items:baseline;background:linear-gradient(90deg,var(--navy),var(--navy2));color:#fff;padding:1px 6px;margin:-2px -4px 0}
.dname{font-weight:bold;letter-spacing:.12em}
.dsub{opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
[data-theme] .dhead{background:transparent;color:var(--navy);border-bottom:1px solid var(--navy)}
.turn{display:flex;gap:8px;align-items:center}
#cardB .turn{flex-direction:row-reverse}
/* the turntable: dark platter, record with grooves, cover as the label, a tonearm */
.platter{--size:min(96px,20vw);--spin:1.8s;position:relative;width:var(--size);height:var(--size);flex:none;border-radius:6px;
  background:linear-gradient(145deg,#d8d8d8,#9a9a9a);border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);cursor:grab;touch-action:none}
.platter.held{cursor:grabbing}
.vinyl{position:absolute;inset:7%;border-radius:50%;
  background:repeating-radial-gradient(circle,#111 0 1px,#1d1d1d 1px 3px),#111;box-shadow:0 0 0 2px #333,0 2px 4px rgba(0,0,0,.5);
  display:grid;place-items:center}
.vinyl img{width:38%;height:38%;border-radius:50%;object-fit:cover;background:#c33}
.vinyl img[hidden]{display:block;visibility:hidden}
.vinyl::before{content:"";position:absolute;width:38%;height:38%;border-radius:50%;background:radial-gradient(circle,#e8e8e8 0 30%,#c43 31%)}
.vinyl img{position:relative;z-index:1}
.spindle{position:absolute;width:6%;height:6%;border-radius:50%;background:#ddd;z-index:2;box-shadow:0 0 0 1px #555}
.platter.spin .vinyl{animation:spin var(--spin) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.arm{position:absolute;right:6%;top:6%;width:8%;height:62%;border-right:3px solid #eee;border-radius:0 0 40% 0;transform:rotate(18deg);transform-origin:top right;filter:drop-shadow(1px 1px 0 #555);pointer-events:none}
.platter.spin .arm{transform:rotate(26deg)}
/* the pitch fader: vertical, like on a Technics */
.pitch{display:flex;flex-direction:column;align-items:center;gap:2px}
.vfader{writing-mode:vertical-lr;direction:rtl;height:min(86px,18vw);width:22px;margin:0}
.plab{font-size:8px;letter-spacing:.15em;color:var(--muted)}
.pval{font:10px "Lucida Console",Monaco,monospace}
.dtext{display:flex;flex-direction:column;gap:1px;min-width:0}
.dtext b,.dtext span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtext b{font-size:12px}
.lcdline{background:var(--ledbg);color:var(--led);font:12px/1.2 "Lucida Console",Monaco,monospace;padding:2px 6px;display:flex;justify-content:space-between}
.dbpm{color:var(--led)}
.tapv{color:var(--led);opacity:.8}
.dctl{display:flex;gap:3px;flex-wrap:wrap}
.dctl .btn{min-height:20px;padding:1px 6px;font-size:10px;letter-spacing:.05em}
.startb{min-width:72px;font-weight:bold}
/* the mixer in the middle */
.mix90{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;padding:4px 8px;min-width:170px}
.xlab{font-size:9px;letter-spacing:.2em;color:var(--muted)}
.xrow{display:flex;gap:4px;align-items:center}
.xf{width:120px}
.kl{display:flex;gap:4px;align-items:center;font-size:10px}
.mix90 .btn{min-height:20px;padding:1px 8px;font-size:10px}
.tapbox{grid-column:1/-1}
@media (max-width:700px){.mixer{gap:3px;padding:3px}.mix90{min-width:96px;padding:3px}.xf{width:80px}.dctl .btn{padding:1px 4px}.startb{min-width:0}}
#mixbtn.on{background:#ffd84a}
[data-theme] #mixbtn.on{background:var(--navy);color:var(--selink)}
.setbtn[hidden]{display:none}
#statpanel{left:2px;min-width:240px}
#statpanel[hidden]{display:none}

/* shared crate: listen only */
body.ro .rw,body.ro .followbar,body.ro .heart,body.ro .mine-b,body.ro #love,body.ro #hide,body.ro .stars,body.ro [data-noteedit]{display:none!important}
@media (max-width:700px){.mixer .deck{min-width:100%}.sharelink{width:100%}}

/* tidy record panel: one row of actions */
.actions{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin:2px 0}
.actions .btn{min-height:22px;padding:1px 8px;text-decoration:none;color:inherit;display:inline-flex;align-items:center}
.actions .btn.on{font-weight:bold}
.actions .buy{background:#2e9c3f;color:#fff;border-color:#7fdc8c #145a20 #145a20 #7fdc8c;font-weight:bold}
[data-theme] .actions .buy{background:var(--navy);color:var(--selink);border-color:var(--navy)}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menubox{position:absolute;z-index:7;top:100%;left:0;display:flex;flex-direction:column;gap:2px;padding:4px;min-width:220px}
.menubox .btn{justify-content:flex-start;white-space:nowrap}
.buylink{color:var(--navy);text-decoration:none;white-space:nowrap}
.buylink:hover{text-decoration:underline}
tr.sel .buylink{color:#fff}
.fastmenu{position:absolute;bottom:calc(100% + 4px);left:6px;z-index:8;display:flex;gap:6px;align-items:center;padding:6px 8px}
.fastmenu[hidden]{display:none}
.player{position:relative}

/* send to Rekordbox */
#rbpanel[hidden]{display:none}
.rbsteps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.rbsteps small{color:var(--muted)}
.rbsteps input.search{width:min(460px,100%)}
.setpanel label.col{flex-direction:column;align-items:stretch;gap:2px}

.tapbox{flex-basis:100%;display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px;background:var(--well)}
.tapbox[hidden]{display:none}
.tapbox span{color:var(--muted)}
.tapbox b{flex-basis:100%}

/* record panel: the cover shrinks with the panel; long content scrolls inside it */
.tracks{overflow:hidden}
.tinner{min-height:0;overflow:hidden;align-items:flex-start;height:100%}
.tracks .tinner > img{height:auto;width:auto;max-height:100%;max-width:min(136px,30%);aspect-ratio:1;object-fit:cover;flex:none}
[data-theme] .tracks .tinner > img{max-width:min(220px,30%)}
.tinfo{height:100%;overflow:auto;min-height:0}
/* drag a track onto a deck */
.trow[draggable=true]{cursor:grab}
.deckcard.drop{outline:2px dashed #2e9c3f;outline-offset:-4px}
[data-theme] .deckcard.drop{outline-color:var(--navy)}
.dhint{color:var(--muted);font-size:10px}

/* the record panel never spills out of its area (e.g. when the mix test opens) */
.body{overflow:hidden}
.main{overflow:hidden}
.tracks{max-height:calc(100% - 70px)}
.tracks .tinner > img{max-height:100%}

.dragghost{position:fixed;left:0;top:0;z-index:50;pointer-events:none;background:var(--sel);color:var(--selink);padding:3px 8px;border:1px solid var(--dk);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
body.dragging-track{user-select:none;cursor:grabbing}
body.dragging-track iframe{pointer-events:none}

/* the mixer: two channel strips with EQ knobs, VU meters and volume faders */
.mixtitle{font-weight:bold;letter-spacing:.3em;font-size:10px;background:linear-gradient(90deg,var(--navy),var(--navy2));color:#fff;align-self:stretch;text-align:center;padding:1px 0}
[data-theme] .mixtitle{background:transparent;color:var(--navy)}
.chans{display:flex;gap:10px}
.chan{display:flex;flex-direction:column;align-items:center;gap:2px}
.clab{font-size:9px;font-weight:bold;letter-spacing:.1em}
.kn{display:flex;flex-direction:column;align-items:center}
.kn small{font-size:7px;color:var(--muted);letter-spacing:.1em}
.knob{--a:0deg;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fafafa,#9a9a9a 60%,#666);border:1px solid #444;position:relative;cursor:ns-resize;touch-action:none}
.knob::after{content:"";position:absolute;left:50%;top:2px;width:2px;height:6px;margin-left:-1px;background:#222;transform:rotate(var(--a));transform-origin:50% 7px}
.fadwrap{display:flex;gap:3px;align-items:flex-end}
.chf{height:70px}
.vu{display:flex;flex-direction:column-reverse;gap:1px;width:6px}
.vu i{display:block;width:6px;height:6px;background:#2a3a2a}
.vu.on i{animation:vu .35s ease-in-out infinite alternate}
.vu.on i:nth-child(n+6){animation-name:vuhi}
.vu.on i:nth-child(2){animation-delay:.05s}.vu.on i:nth-child(3){animation-delay:.1s}.vu.on i:nth-child(4){animation-delay:.15s}
.vu.on i:nth-child(5){animation-delay:.2s}.vu.on i:nth-child(6){animation-delay:.25s}.vu.on i:nth-child(7){animation-delay:.3s}.vu.on i:nth-child(8){animation-delay:.35s}
@keyframes vu{from{background:#2a3a2a}to{background:#3cdc50}}
@keyframes vuhi{from{background:#2a3a2a}to{background:#ffcf33}}
.syncb{font-weight:bold;letter-spacing:.15em;min-width:90px}

.deck90.focus{box-shadow:0 0 0 2px #ffd84a inset}
[data-theme] .deck90.focus{box-shadow:0 0 0 2px var(--navy) inset}
.syncb.on{background:#ffd84a;font-weight:bold}
[data-theme] .syncb.on{background:var(--navy);color:var(--selink)}
.acct{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.acct form{margin:0}

/* column widths (13 columns: ♥ … Released … Trk) */
#maintable thead th:nth-child(1){width:24px}
#maintable thead th:nth-child(2){width:12%}
#maintable thead th:nth-child(3){width:14%}
#maintable thead th:nth-child(4){width:10%}
#maintable thead th:nth-child(5){width:7%}
#maintable thead th:nth-child(6){width:8%}
#maintable thead th:nth-child(7){width:7%}
#maintable thead th:nth-child(8){width:7%}
#maintable thead th:nth-child(9){width:7%}
#maintable thead th:nth-child(10){width:7%}
#maintable thead th:nth-child(11){width:6%}
#maintable thead th:nth-child(12){width:4%}
#maintable thead th:nth-child(13){width:3%}
.rel{white-space:nowrap;font-variant-numeric:tabular-nums}
.soon{color:#0a6a2a;font-weight:bold}
tr.sel .soon{color:#9cff9c}
[data-theme] .soon{color:var(--navy)}
.muted{color:var(--muted)}

/* Find any record + Wanted */
.findbox{position:relative}
.findbox .search{width:min(320px,40vw)}
.findpanel{position:absolute;top:calc(100% + 2px);left:0;z-index:9;width:min(560px,92vw);max-height:60vh;overflow:auto;padding:4px;display:flex;flex-direction:column;gap:2px}
.findpanel[hidden]{display:none}
.fres{display:flex;gap:6px;align-items:center;padding:3px;border-bottom:1px dotted #bbb}
.fres img,.fres .nocover{width:40px;height:40px;object-fit:cover;flex:none;background:#999}
.ftext{flex:1;min-width:0;display:flex;flex-direction:column}
.ftext b,.ftext span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftext span{color:var(--muted)}
.fres .btn{min-height:20px;padding:1px 6px;text-decoration:none;color:inherit;white-space:nowrap}
.findpanel .hint{padding:6px;color:var(--muted)}
#wanttable[hidden]{display:none}
#wanttable td{border-bottom:1px dotted #d8d8d8;padding:2px 6px;overflow:hidden;text-overflow:ellipsis;max-width:220px}
#wanttable a{color:var(--navy)}
#wanttable tr.nolink td{opacity:.95}
.wcover{width:28px;height:28px;object-fit:cover;display:block}
@media (max-width:700px){.findbox .search{width:46vw}}

.fhead{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:4px 3px 1px}
.addself{padding:4px 3px}
.addself summary{cursor:pointer;color:var(--navy)}
.addform{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.addform .search{width:calc(50% - 4px)}
.addself small{color:var(--muted)}

/* Overview */
.overview{padding:8px;display:flex;flex-direction:column;gap:8px;overflow:auto;height:100%}
.overview[hidden]{display:none}
.orange{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.orange .btn{min-height:22px}
.orange .hint,.overview .hint{color:var(--muted)}
.ogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px;align-items:start}
.ocard{background:var(--face);padding:8px 10px;border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);min-width:0}
.ocard.wide{grid-column:1/-1}
.ocard h3{margin:0 0 6px;font-size:13px}
.ocard h4{margin:8px 0 3px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.obig{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:4px}
.obig b{display:block;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
.obig small{color:var(--muted)}
.obar{display:grid;grid-template-columns:110px 1fr auto auto;gap:6px;align-items:center;padding:1px 0}
.olab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.otrack{height:10px;background:var(--well);border:1px solid var(--lo);display:block}
.otrack i{display:block;height:100%;background:var(--navy)}
.onum{font-variant-numeric:tabular-nums;text-align:right;min-width:2ch}
.oextra{color:var(--muted);min-width:7ch;text-align:right;font-size:10px}
.omonths{display:flex;gap:4px;align-items:flex-end;height:70px}
.omonth{flex:1;min-width:14px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px}
.omonth i{display:block;width:100%;background:var(--navy);min-height:2px}
.omonth small{font-size:8px;color:var(--muted)}
.ocols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.orow{display:flex;gap:6px;align-items:baseline;padding:1px 0}
.orow > span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orank{width:16px;color:var(--muted);text-align:right}
.ofacts{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.ofacts b{font-weight:bold}
@media (max-width:700px){.ogrid{grid-template-columns:1fr}.obar{grid-template-columns:90px 1fr auto}.oextra{display:none}}

.resetb{width:100%;font-weight:bold}
.resetb[hidden]{display:none}
.side label .n{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}

.vbadge{font-size:10px;padding:1px 6px;border:1px solid #888;white-space:nowrap}
.vbadge.no{color:var(--muted);background:var(--well)}
.fres .btn.vin{font-weight:bold;border-color:#2e9c3f}

/* Library */
.library{display:flex;flex-direction:column;height:100%;min-height:0}
.library[hidden]{display:none}
.libbar{display:flex;gap:4px;flex-wrap:wrap;padding:4px;align-items:center}
.libbar .search{width:min(260px,100%)}
.libbar select{font:inherit;height:22px;max-width:190px}
.libinfo{display:flex;justify-content:space-between;align-items:center;padding:2px 6px;color:var(--muted)}
.libpager{display:flex;gap:6px;align-items:center}
.libpager .btn{min-height:20px;padding:0 8px}
#libtable{width:100%;table-layout:fixed}
.libscroll{overflow:auto;flex:1;min-height:0}
#libtable th{position:sticky;top:0}
#libtable td{padding:2px 6px;border-bottom:1px dotted #d8d8d8;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#libtable a{color:var(--navy)}
#libtable .btn{min-height:18px;padding:0 6px}
.vbadge.yes{color:#0a6a2a;border-color:#2e9c3f}
[data-theme] .vbadge.yes{color:var(--navy);border-color:var(--navy)}

/* owner report */
.otable{border-collapse:collapse;width:100%;margin:6px 0 12px}
.otable th,.otable td{text-align:left;padding:3px 8px 3px 0;vertical-align:top;font-size:12px}
.owner h2{font-size:14px;margin:14px 0 4px}.owner h3{font-size:13px;margin:10px 0 2px}

/* front page: email login */
.mailform{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}.mailform .search{flex:1 1 220px}
.landing .notice{background:var(--well);padding:4px 8px}

/* Library has no side filters (they are for shop records): the table gets the full width */
.body.libview .side,.body.libview .vsplit{display:none}
/* every table: fixed columns that can be dragged wider or narrower (widths kept in this browser) */
#libtable thead th:nth-child(1){width:3%}#libtable thead th:nth-child(2){width:18%}#libtable thead th:nth-child(3){width:25%}
#libtable thead th:nth-child(4){width:18%}#libtable thead th:nth-child(5){width:9%}#libtable thead th:nth-child(6){width:6%}
#libtable thead th:nth-child(7){width:8%}#libtable thead th:nth-child(8){width:13%}
#minetable,#wanttable{table-layout:fixed}
#minetable td,#wanttable td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#minetable thead th:nth-child(1){width:15%}#minetable thead th:nth-child(2){width:18%}#minetable thead th:nth-child(3){width:13%}
#minetable thead th:nth-child(4){width:9%}#minetable thead th:nth-child(5){width:10%}#minetable thead th:nth-child(6){width:8%}
#minetable thead th:nth-child(7){width:7%}#minetable thead th:nth-child(8){width:7%}#minetable thead th:nth-child(9){width:8%}#minetable thead th:nth-child(10){width:5%}
#wanttable thead th:nth-child(1){width:4%}#wanttable thead th:nth-child(2){width:13%}#wanttable thead th:nth-child(3){width:15%}
#wanttable thead th:nth-child(4){width:11%}#wanttable thead th:nth-child(5){width:8%}#wanttable thead th:nth-child(6){width:5%}
#wanttable thead th:nth-child(7){width:17%}#wanttable thead th:nth-child(8){width:11%}#wanttable thead th:nth-child(9){width:13%}#wanttable thead th:nth-child(10){width:3%}
.colgrip{position:absolute;top:0;right:0;bottom:0;width:7px;cursor:col-resize;touch-action:none}
.colgrip:hover,.dragging-col .colgrip{background:var(--navy,#000080);opacity:.35}

.dgnote{font-size:11px;padding:0 6px 2px;color:var(--muted)}.dgnote a{color:inherit}

/* Today's 3 */
.picks{flex:none;padding:4px 6px 6px}.picks[hidden]{display:none}
.pickhead{font-weight:bold;margin:2px 0 4px}.pickhead small{font-weight:normal;color:var(--muted)}
.pickrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pick{display:flex;gap:8px;align-items:center;padding:6px;cursor:pointer;background:var(--well);border:1px solid var(--lo);min-width:0}
.pick img,.pick .nocover{width:56px;height:56px;flex:none;object-fit:cover;display:flex;align-items:center;justify-content:center}
.pick .pt{display:flex;flex-direction:column;min-width:0;flex:1}
.pick .pt b,.pick .pt span,.pick .pt small,.pick .pt em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick .pt em{font-size:11px;color:var(--muted)}
.pick .pb{display:flex;flex-direction:column;gap:2px}
@media (max-width:700px){.pickrow{grid-template-columns:1fr}}
/* People */
.people{overflow:auto;flex:1;min-height:0;padding:8px}.people[hidden]{display:none}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pgrid .wide{grid-column:1/-1}
.pgrid .ocard{display:flex;flex-direction:column;gap:6px}
.feedrow{padding:3px 0;border-bottom:1px dotted var(--lo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){.pgrid{grid-template-columns:1fr}}

.have{cursor:help}.havenote{font-size:12px;color:var(--muted);margin:2px 0}
.hlpcode{font-family:monospace;letter-spacing:.15em;font-size:14px}
.vinylmark{white-space:nowrap}.novinyl{color:var(--muted);font-size:11px;white-space:nowrap}

/* Premiere request form */
.premiereform{display:grid;gap:8px;max-width:520px}
.premiereform label{display:grid;gap:2px}
.premiereform label.check{display:flex;gap:6px;align-items:flex-start}
.premiereform input.search,.premiereform textarea{width:100%;box-sizing:border-box;font:inherit}
.premiereform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.prem{font-weight:bold;white-space:nowrap;margin-right:4px}
/* titlebar: first name + Log out, next to the window buttons */
.titlebar .who{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:normal}
.titlebar .who form{margin:0}
.titlebar .who .btn{min-height:16px;padding:0 6px;font-size:11px;color:var(--ink);letter-spacing:normal}
.titlebar .who + .ctl{margin-left:6px}
/* Settings: a menu, then one section at a time */
.setmenu{display:flex;flex-direction:column;gap:4px;min-width:220px}
.setmenu .btn{display:flex;justify-content:space-between;text-align:left;padding:4px 8px}
.setsec{display:flex;flex-direction:column;gap:6px}
.setsec[hidden],.setmenu[hidden]{display:none}
.sethead{display:flex;align-items:center;gap:8px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--muted)}
.setsec .sub{margin-top:8px}
.hlpout:empty{display:none}
.hlpout{display:flex;flex-direction:column;gap:4px;max-width:420px}
.hlpout code{display:block;user-select:all;word-break:break-all;padding:4px;background:var(--paper,#fff);color:#000;border:1px solid var(--muted)}
[data-theme="club"] .titlebar .who .btn{border-color:var(--navy)}
.titlebar .who .btn,.titlebar .who span{white-space:nowrap}
/* label page */
.lnk{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.lnk.on{font-weight:bold}
.labelpage{position:fixed;inset:5% 5%;z-index:20;display:flex;flex-direction:column;gap:6px;padding:8px}
.labelpage[hidden]{display:none}
.lphead{display:flex;align-items:baseline;gap:10px}.lphead b{font-size:15px}.lphead .lpv{margin-left:auto;display:flex;gap:4px;align-items:center}
.lpbody{flex:1;min-height:0;display:flex;gap:8px}
.lprel{flex:3;overflow:auto;background:var(--well)}
.lprel table{width:100%;border-collapse:collapse}.lprel th,.lprel td{text-align:left;padding:2px 6px;border-bottom:1px solid var(--face);white-space:nowrap}
.lprel thead th{position:sticky;top:0;background:var(--face)}
.lpart{flex:1;overflow:auto;padding:6px;display:flex;flex-direction:column;gap:3px;align-items:flex-start;background:var(--well)}
@media (max-width:700px){.labelpage{inset:0}.lpbody{flex-direction:column}.lpart{flex:none;max-height:30%}}
.lphead .btn{margin-left:auto}.lphead .lpv + .btn{margin-left:0}
.lpname{display:flex;gap:4px;align-items:baseline}.tinfo h2 .lnk{text-decoration:none}.tinfo h2 .lnk:hover{text-decoration:underline}