/* Tunes: the look of a 2009 jukebox on Mac OS X (unified graphite toolbar, cream LCD, blue source
   list, zebra rows), drawn in CSS. */

:root {
  --font: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --row: 18px;
  --sel: #3875d7;
  --sel-blur: #d0d0d0;
  --zebra: #edf3fe;
  --src-bg: #d6dde5;
  --src-head: #66727f;
  --line: #d9d9d9;
  --text: #000;
  --muted: #6b6b6b;
  --sidebar: 196px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 11px/1.3 var(--font);
  color: var(--text);
  overflow: hidden;
  background: #2b1d4f;
  background:
    radial-gradient(ellipse 70% 55% at 22% 18%, rgba(173, 94, 214, 0.75), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 75%, rgba(53, 101, 214, 0.8), transparent 70%),
    radial-gradient(ellipse 55% 45% at 60% 30%, rgba(214, 74, 160, 0.45), transparent 70%),
    linear-gradient(160deg, #1b1240 0%, #3a1f63 45%, #13244f 100%);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea { user-select: text; -webkit-user-select: text; }
.hidden { display: none !important; }
svg.ic { display: block; flex: none; }

/* ------------------------------------------------------------------ menu bar */
#menubar {
  position: fixed; top: 0; left: 0; right: 0; height: 22px; z-index: 60;
  display: flex; align-items: center; gap: 0;
  background: linear-gradient(#fdfdfd, #e9e9e9 60%, #d9d9d9);
  border-bottom: 1px solid #9c9c9c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font-size: 14px; color: #000;
  padding: 0 8px;
}
#menubar .m {
  height: 22px; padding: 0 9px; display: flex; align-items: center; cursor: default; position: relative;
}
#menubar .m.app { font-weight: bold; }
#menubar .m.logo { padding: 0 12px 0 8px; }
#menubar .m.open, #menubar .m:active { background: linear-gradient(#6a97f4, #2a63ee); color: #fff; }
#menubar .spacer { flex: 1; }
#menubar .status { font-size: 13px; padding: 0 9px; display: flex; gap: 6px; align-items: center; color: #222; }
#menubar .chip { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.15); }
#menubar .chip.demo { background: #ffe9a6; border-color: #c9a33f; }

.menu {
  position: fixed; z-index: 80; min-width: 210px; padding: 4px 0;
  background: rgba(250, 250, 250, 0.97);
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 0 0 5px 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: 14px; color: #000;
}
.menu.ctx { border-radius: 5px; font-size: 13px; }
.menu .mi {
  height: 20px; padding: 0 22px 0 20px; display: flex; align-items: center; gap: 18px; white-space: nowrap; cursor: default; position: relative;
}
.menu.ctx .mi { height: 19px; }
.menu .mi .k { margin-left: auto; color: #555; font-size: 13px; letter-spacing: 1px; }
.menu .mi .check { position: absolute; left: 6px; font-size: 12px; }
.menu .mi.sub::after { content: "▶"; font-size: 9px; margin-left: auto; color: #444; }
.menu .mi:not(.off):hover, .menu .mi.hot { background: linear-gradient(#6a97f4, #2a63ee); color: #fff; }
.menu .mi:not(.off):hover .k, .menu .mi.hot .k, .menu .mi:not(.off):hover.sub::after { color: #fff; }
.menu .mi.off { color: #a3a3a3; }
.menu .mi.off .k { color: #b8b8b8; }
.menu .sep { height: 1px; background: #e2e2e2; margin: 5px 1px; }
.menu .mh { padding: 2px 20px; font-size: 12px; color: #888; }
.menu .stars { letter-spacing: 2px; }

/* ------------------------------------------------------------------ window */
#window {
  position: fixed; top: 34px; left: 14px; right: 14px; bottom: 14px;
  display: flex; flex-direction: column;
  border-radius: 6px 6px 4px 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 22px 60px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.35);
  background: #fff;
}
@media (min-width: 1500px) {
  #window { left: 40px; right: 40px; top: 40px; bottom: 32px; }
}

/* unified title bar + toolbar */
#titlebar {
  flex: none; position: relative; height: 78px;
  background: linear-gradient(#f0f0f0 0, #e4e4e4 2px, #d0d0d0 45%, #b9b9b9 100%);
  border-bottom: 1px solid #515151;
  box-shadow: inset 0 1px 0 #fafafa;
}
#titlebar .wintitle {
  position: absolute; top: 4px; left: 0; right: 0; text-align: center;
  font-size: 13px; color: #3a3a3a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); pointer-events: none;
}
.traffic { position: absolute; top: 5px; left: 9px; display: flex; gap: 8px; }
.traffic span {
  width: 12px; height: 12px; border-radius: 50%; display: block; position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.55);
}
.traffic span::after { content: ""; position: absolute; left: 3px; right: 3px; top: 1px; height: 5px; border-radius: 6px 6px 3px 3px; background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.1)); }
.traffic .r { background: radial-gradient(circle at 50% 75%, #ff9a8f, #e0443b 55%, #a8251e); }
.traffic .y { background: radial-gradient(circle at 50% 75%, #ffe390, #f2b42c 55%, #b4800f); }
.traffic .g { background: radial-gradient(circle at 50% 75%, #b9f28a, #5ec33a 55%, #2f851a); }

.toolbar {
  position: absolute; left: 0; right: 0; top: 22px; height: 52px;
  display: flex; align-items: center; padding: 0 14px; gap: 16px;
}
.transport { display: flex; align-items: center; }
.tbtn {
  appearance: none; border: 1px solid #5a5a5a; padding: 0; margin: 0; display: grid; place-items: center; color: #303030;
  background: linear-gradient(#ffffff 0%, #f1f1f1 46%, #d9d9d9 52%, #e9e9e9 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.55);
  border-radius: 50%; position: relative;
}
.tbtn svg { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9)); }
.tbtn:active, .tbtn.pressed { background: linear-gradient(#c7c7c7 0%, #d7d7d7 50%, #c2c2c2 52%, #d4d4d4 100%); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); }
.tbtn.small { width: 31px; height: 31px; z-index: 1; }
.tbtn.big { width: 39px; height: 39px; z-index: 2; margin: 0 -3px; }
.tbtn.big svg { width: 14px; height: 16px; }
.tbtn.big .play-ic { margin-left: 3px; }
.tbtn.small svg { width: 17px; height: 11px; }

.volume { display: flex; align-items: center; gap: 5px; color: #333; }
.volume svg { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8)); }
.slider { position: relative; width: 74px; height: 14px; cursor: default; }
.slider .track {
  position: absolute; left: 0; right: 0; top: 5px; height: 5px; border-radius: 3px;
  background: linear-gradient(#5f5f5f, #8c8c8c); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.6);
}
.slider .fill { position: absolute; left: 0; top: 5px; height: 5px; border-radius: 3px; background: linear-gradient(#3a3a3a, #616161); }
.slider .knob {
  position: absolute; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ffffff, #dcdcdc 55%, #a9a9a9);
  border: 1px solid #555; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* the LCD */
.lcd-wrap { flex: 1; display: flex; justify-content: center; min-width: 0; }
.lcd {
  position: relative; width: min(100%, 480px); height: 48px;
  border: 1px solid #686868; border-radius: 6px;
  background: linear-gradient(#f6f7ee 0%, #ebeedc 40%, #dfe3cc 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.5), 0 1px 0 rgba(255, 255, 255, 0.75);
  color: #1d1d1d; text-align: center; overflow: hidden; cursor: default;
}
.lcd .lcd-btn {
  position: absolute; top: 15px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  color: #3a3a3a; border: 1px solid rgba(0, 0, 0, 0.35);
  background: linear-gradient(#fbfbf5, #d8dcc6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.lcd .lcd-btn:active { background: linear-gradient(#c9cdb7, #e2e5d3); }
.lcd .lcd-btn.left { left: 8px; }
.lcd .lcd-btn.right { right: 8px; }
.lcd .lcd-btn svg { width: 9px; height: 9px; }
.lcd .lcd-body { position: absolute; left: 32px; right: 32px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.lcd .l1 { font-weight: bold; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 14px; }
.lcd .l2 { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 14px; color: #2a2a2a; transition: opacity 0.35s; }
.lcd .l2.fade { opacity: 0; }
.lcd .l3 { display: flex; align-items: center; gap: 6px; height: 13px; font-size: 10px; margin-top: 1px; }
.lcd .l3 .t { width: 38px; flex: none; font-variant-numeric: tabular-nums; color: #2a2a2a; }
.lcd .l3 .t.l { text-align: right; }
.lcd .l3 .t.r { text-align: left; }
.lcd .bar { position: relative; flex: 1; height: 9px; border: 1px solid #2d2d2d; border-radius: 1px; background: linear-gradient(#f9faf3, #e3e6d3); }
.lcd .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#7a7a7a, #4b4b4b); }
.lcd .bar .knob { position: absolute; top: -1px; width: 9px; height: 9px; margin-left: -4px; background: #1c1c1c; transform: rotate(45deg) scale(0.82); }
.lcd .bar.indeterminate .fill { width: 100% !important; background: repeating-linear-gradient(-45deg, #9fa38f 0 5px, #c5c9b2 5px 10px); animation: barber 0.9s linear infinite; background-size: 14px 14px; }
@keyframes barber { to { background-position: 14px 0; } }
.lcd .idle { display: flex; align-items: center; justify-content: center; height: 100%; color: #565a4a; gap: 8px; }
.lcd .idle svg { width: 26px; height: 26px; opacity: 0.85; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8)); }
.lcd .idle .word { font-size: 15px; font-weight: bold; letter-spacing: 0.5px; color: #4b4f40; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
.lcd .spectrum { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 24px; margin-top: 2px; }
.lcd .spectrum i { display: block; width: 6px; background: linear-gradient(#383838, #6a6a6a); min-height: 1px; }
.lcd .tag { font-size: 9px; color: #6c705f; text-transform: uppercase; letter-spacing: 0.6px; }

.viewseg, .searchbox { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tlabel { font-size: 11px; color: #222; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }
.seg { display: flex; }
.seg button {
  appearance: none; width: 32px; height: 22px; display: grid; place-items: center; color: #3a3a3a; padding: 0;
  border: 1px solid #686868; border-left-width: 0;
  background: linear-gradient(#fefefe 0%, #f0f0f0 48%, #dcdcdc 52%, #ebebeb 100%);
  box-shadow: inset 0 1px 0 #fff;
}
.seg button:first-child { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.seg button:last-child { border-radius: 0 4px 4px 0; }
.seg button.on { background: linear-gradient(#a9a9a9, #c2c2c2 50%, #b3b3b3 52%, #c9c9c9); color: #111; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45); }
.seg button:active { background: linear-gradient(#bdbdbd, #d0d0d0); }

.search {
  position: relative; width: 170px; height: 21px;
}
.search input {
  width: 100%; height: 21px; border-radius: 11px; border: 1px solid #727272; outline: none;
  padding: 0 20px 0 21px; font-size: 11px; background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6);
}
.search input:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(86, 145, 230, 0.75); }
.search .mag { position: absolute; left: 7px; top: 5px; color: #555; }
.search .clr { position: absolute; right: 4px; top: 4px; display: none; border: 0; padding: 0; background: none; }
.search.has .clr { display: block; }
.mobile-only { display: none !important; }

/* ------------------------------------------------------------------ body */
#main { flex: 1; display: flex; min-height: 0; position: relative; }

#sources {
  flex: none; width: var(--sidebar); background: var(--src-bg); display: flex; flex-direction: column;
  border-right: 1px solid #9b9b9b; position: relative; outline: none;
}
#sourceScroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 12px; }
#sourceScroll::-webkit-scrollbar { width: 10px; }
#sourceScroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); border-radius: 6px; border: 2px solid var(--src-bg); }
.src-h {
  font-size: 11px; font-weight: bold; color: var(--src-head); text-transform: uppercase; letter-spacing: 0.2px;
  padding: 10px 10px 3px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); display: flex; align-items: center; gap: 6px;
}
.src-h .syncic { color: var(--src-head); }
.src-h .syncic.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.src {
  height: 20px; display: flex; align-items: center; gap: 5px; padding: 0 8px 0 19px; white-space: nowrap; cursor: default;
  border-top: 1px solid transparent; position: relative;
}
.src .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.src .cnt { color: #7a8594; font-size: 10px; }
.src.sel { color: #fff; font-weight: bold; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); border-top-color: #8e9db3; background: linear-gradient(#a9b6ca, #8091ab); }
#sources:focus-within .src.sel, #sources.focus .src.sel { border-top-color: #4a84cf; background: linear-gradient(#6aa1e8, #2b6dcb); }
.src.sel .cnt { color: rgba(255, 255, 255, 0.8); }
.src.drop { background: #b8cbe9; box-shadow: inset 0 0 0 2px #3a6ec3; border-radius: 4px; }
.src.nodrop { opacity: 0.55; }
.src.pending .nm { font-style: italic; opacity: 0.75; }
.src.dim { color: #8a93a0; }
.src input.rename {
  flex: 1; height: 17px; font-size: 11px; border: 1px solid #7a8fb0; padding: 0 3px; outline: none; color: #000; font-weight: normal; text-shadow: none;
  box-shadow: 0 0 0 2px rgba(86, 145, 230, 0.7);
}
.pbadge {
  display: inline-grid; place-items: center; min-width: 17px; height: 12px; padding: 0 3px; border-radius: 6px;
  font-size: 8px; font-weight: bold; letter-spacing: 0.2px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  background: linear-gradient(color-mix(in srgb, var(--pc) 85%, white), color-mix(in srgb, var(--pc) 80%, black));
  border: 1px solid color-mix(in srgb, var(--pc) 60%, black);
  flex: none;
}
.src.sel .pbadge { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
.src-drop-hint { margin: 10px 12px; padding: 8px; border: 2px dashed rgba(58, 110, 195, 0.55); border-radius: 6px; color: #3a5e93; text-align: center; display: none; }
#sources.dragging .src-drop-hint { display: block; }
#sources.dragging .src-drop-hint.drop { background: #b8cbe9; border-style: solid; }

#artpane { flex: none; border-top: 1px solid #8c8c8c; background: #000; }
#artpane .ah {
  height: 18px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; color: #333; cursor: default;
  background: linear-gradient(#f2f2f2, #cfcfcf); border-bottom: 1px solid #8c8c8c;
}
#artpane .ah::after { content: "▶"; font-size: 7px; color: #555; }
#artpane .art { width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: #1b1b1b; color: #666; position: relative; overflow: hidden; }
#artpane .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
#artpane .art .none { font-size: 11px; color: #777; padding: 12px; text-align: center; line-height: 1.5; }

#splitter { width: 5px; margin-left: -3px; cursor: col-resize; position: relative; z-index: 5; flex: none; }

#content { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; background: #fff; outline: none; }

/* column browser */
#browser { flex: none; height: 160px; display: flex; border-bottom: 1px solid #8f8f8f; }
#browser .pane { flex: 1; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #b5b5b5; outline: none; }
#browser .pane:last-child { border-right: 0; }
#browser .ph { height: 17px; flex: none; }
#browser .pl { flex: 1; overflow-y: auto; position: relative; }
#browser .pr { height: 16px; line-height: 16px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; left: 0; right: 0; }
#browser .pr.sel { background: var(--sel-blur); }
#browser .pane:focus .pr.sel { background: var(--sel); color: #fff; }
#browserSplit { height: 5px; margin-top: -3px; cursor: row-resize; position: relative; z-index: 4; flex: none; }

/* cover flow */
#coverflow {
  flex: none; height: 46%; min-height: 180px; position: relative; overflow: hidden; outline: none;
  background: linear-gradient(#000 0%, #000 55%, #141414 100%);
  border-bottom: 1px solid #000; perspective: 700px; cursor: default;
}
#coverflow .stage { position: absolute; left: 50%; top: 10%; height: 62%; transform-style: preserve-3d; }
#coverflow .cover {
  position: absolute; top: 0; transform-style: preserve-3d; transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: transform;
}
#coverflow.dragging .cover { transition: transform 0.08s linear; }
#coverflow .cover img.face { display: block; width: 100%; height: 100%; object-fit: cover; background: #222; }
#coverflow .cover .refl {
  position: absolute; left: 0; top: 100%; width: 100%; height: 100%; transform: scaleY(-1); overflow: hidden; pointer-events: none;
}
#coverflow .cover .refl img { width: 100%; height: 100%; object-fit: cover; display: block; }
#coverflow .cover .refl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.95) 45%, #000 70%); }
#coverflow .caption { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; color: #fff; pointer-events: none; }
#coverflow .caption b { display: block; font-size: 12px; }
#coverflow .caption span { color: #a3a3a3; font-size: 11px; }
#coverflow .scroller { position: absolute; left: 22%; right: 22%; bottom: 10px; height: 15px; border-radius: 8px; background: linear-gradient(#0b0b0b, #2b2b2b); border: 1px solid #3c3c3c; }
#coverflow .scroller .thumb { position: absolute; top: 1px; bottom: 1px; min-width: 30px; border-radius: 7px; background: linear-gradient(#9a9a9a, #5a5a5a 50%, #4b4b4b 51%, #6d6d6d); border: 1px solid #222; }
#coverflow .empty { position: absolute; inset: 0; display: grid; place-items: center; color: #777; font-size: 12px; }
#flowSplit { height: 5px; margin-top: -3px; cursor: row-resize; position: relative; z-index: 4; flex: none; }

/* track list */
#tracks { flex: 1; overflow: auto; position: relative; outline: none; min-height: 0; background: #fff; }
#tracks .inner { position: relative; min-height: 100%; }
#tracks .zebra {
  position: absolute; left: 0; right: 0; top: 17px; bottom: 0; pointer-events: none;
  background: repeating-linear-gradient(#fff 0 var(--row), var(--zebra) var(--row) calc(var(--row) * 2));
}
.thead {
  position: sticky; top: 0; z-index: 3; height: 17px; display: grid; white-space: nowrap;
  background: linear-gradient(#ffffff 0%, #f4f4f4 48%, #e7e7e7 52%, #eeeeee 100%);
  border-bottom: 1px solid #a9a9a9;
}
.th {
  position: relative; padding: 0 5px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; cursor: default;
  border-right: 1px solid #c3c3c3; box-shadow: inset -1px 0 0 #fff;
}
.th.right { text-align: right; padding-right: 7px; }
.th.sorted { background: linear-gradient(#cfe0f6 0%, #b2cdee 48%, #9dbde9 52%, #bed6f3 100%); border-right-color: #92a9c8; box-shadow: none; }
.th.sorted::after { content: "▲"; position: absolute; right: 4px; top: 0; font-size: 8px; color: #222; }
.th.sorted.desc::after { content: "▼"; }
.th.sorted.right { padding-right: 16px; }
.th .grip { position: absolute; right: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 2; }
.th.dragging { opacity: 0.6; background: #c9d9ef; }
.th.dropl { box-shadow: inset 2px 0 0 #3875d7; }
.th.dropr { box-shadow: inset -2px 0 0 #3875d7; }
.rows { position: absolute; left: 0; right: 0; top: 17px; }
.tr { position: absolute; left: 0; height: var(--row); display: grid; white-space: nowrap; line-height: var(--row); }
.tr:nth-child(odd) { }
.tr.odd { background: var(--zebra); }
.tr.even { background: #fff; }
.td { padding: 0 5px; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid rgba(0, 0, 0, 0.055); }
.td.right { text-align: right; padding-right: 7px; font-variant-numeric: tabular-nums; }
.td.st { padding: 0; display: grid; place-items: center; color: #2b2b2b; border-right: 0; }
.td.st .spk { width: 13px; height: 11px; }
.tr.sel { background: var(--sel-blur); }
#tracks:focus .tr.sel, #tracks.focus .tr.sel { background: var(--sel); color: #fff; }
#tracks:focus .tr.sel .td, #tracks.focus .tr.sel .td { border-right-color: rgba(255, 255, 255, 0.12); }
#tracks:focus .tr.sel .muted, #tracks.focus .tr.sel .muted { color: rgba(255, 255, 255, 0.75); }
#tracks:focus .tr.sel .td.st, #tracks.focus .tr.sel .td.st { color: #fff; }
.tr.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { box-shadow: inset 0 0 0 999px rgba(255, 214, 79, 0.65); } 100% { box-shadow: inset 0 0 0 999px rgba(255, 214, 79, 0); } }
.tr.pending { color: #777; font-style: italic; }
.tr.missing .nm-txt { color: #8b8b8b; }
.td .withlink { display: flex; align-items: center; gap: 4px; min-width: 0; }
.td .withlink .txt { overflow: hidden; text-overflow: ellipsis; }
.arrowlink { cursor: pointer; opacity: 0; flex: none; }
.tr.sel .arrowlink { opacity: 1; }
.arrowlink:hover circle { fill: #6c737c; }
.stars { letter-spacing: 1px; font-size: 11px; color: #222; cursor: pointer; }
.stars .e { color: transparent; }
.tr.sel .stars .e, .tr:hover .stars .e { color: #9a9a9a; }
#tracks:focus .tr.sel .stars, #tracks.focus .tr.sel .stars { color: #fff; }
#tracks:focus .tr.sel .stars .e, #tracks.focus .tr.sel .stars .e { color: rgba(255, 255, 255, 0.55); }
.stars.tangle { color: #7d4bb8; cursor: help; }
.stars.tangle .ic { display: inline-block; vertical-align: -1px; margin-left: 2px; color: #7d4bb8; }
#tracks:focus .tr.sel .stars.tangle, #tracks:focus .tr.sel .stars.tangle .ic { color: #e9d9ff; }
.muted { color: #8a8a8a; }
.badges { display: flex; gap: 2px; align-items: center; height: 100%; }
.dropline { position: absolute; left: 0; right: 0; height: 2px; background: #3875d7; z-index: 4; pointer-events: none; }
.dropline::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #3875d7; background: #fff; box-sizing: border-box; }

/* album grid */
#grid { flex: 1; overflow-y: auto; position: relative; outline: none; background: #fff; }
#grid .ginner { position: relative; }
.tile { position: absolute; text-align: center; cursor: default; padding: 8px; border-radius: 6px; }
.tile .cv { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); background: #ddd; }
.tile .ttl { margin-top: 7px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .art { color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.sel { background: #c7d8f1; }
#grid:focus .tile.sel { background: #b5cdf0; box-shadow: inset 0 0 0 2px #3875d7; }
.tile .playing { position: absolute; right: 14px; top: 14px; background: rgba(0, 0, 0, 0.65); color: #fff; border-radius: 10px; padding: 3px 6px; }

/* states over the content area */
#state {
  position: absolute; inset: 0; z-index: 6; background: #fff; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto;
}
#state .panel { max-width: 520px; text-align: center; }
#state h1 { font-size: 20px; margin: 14px 0 8px; font-weight: bold; color: #222; letter-spacing: -0.2px; }
#state p { font-size: 12px; color: #555; line-height: 1.6; margin: 8px 0; }
#state .fine { font-size: 11px; color: #888; }
#state .big-ic {
  width: 112px; height: 112px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 35%, #ffffff 0%, #e7eef7 35%, #a9bed8 70%, #6e88ad 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), inset 0 -4px 10px rgba(0, 0, 0, 0.2);
  color: #2f6fd1;
}
#state .big-ic::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.6); }
#state .big-ic svg { width: 56px; height: 56px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
#state .big-ic.warn { color: #d58a00; }
#state .big-ic.off { color: #888; }
#state .actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#state .accounts { margin-top: 22px; padding-top: 14px; border-top: 1px solid #e3e3e3; }
#state .accounts .lbl { font-size: 11px; color: #888; margin-bottom: 8px; }
#state .accounts .row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
#state .err { color: #b3261e; font-size: 12px; margin-top: 10px; }
#state .scopes { text-align: left; margin: 14px auto 0; max-width: 420px; font-size: 11px; color: #555; background: #f5f7fa; border: 1px solid #dde3ea; border-radius: 6px; padding: 8px 12px; }
#state .scopes code { font-size: 10px; background: #e8edf3; padding: 0 3px; border-radius: 3px; }
#state .envs { margin-top: 10px; font-size: 11px; color: #888; }
#state .envs a { color: #2d63c8; margin: 0 4px; }

/* Aqua buttons */
.aqua {
  appearance: none; height: 22px; min-width: 70px; padding: 0 14px; border-radius: 11px; cursor: default; font-size: 13px; color: #000;
  border: 1px solid #7b7b7b;
  background: linear-gradient(#ffffff 0%, #f3f3f3 48%, #e3e3e3 52%, #f8f8f8 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 0 #fff;
  white-space: nowrap;
}
.aqua:active { background: linear-gradient(#cfcfcf, #e3e3e3); }
.aqua.default {
  border-color: #3a64a3;
  background: linear-gradient(#d4e8fd 0%, #9ccaf8 46%, #6bb0f3 52%, #b9dcfd 100%);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { background: linear-gradient(#e4f1fe 0%, #b9d9fa 46%, #8cc3f6 52%, #d3e9fe 100%); } }
.aqua.default:active { background: linear-gradient(#78a9e5, #9fc8f3); animation: none; }
.aqua.big { height: 30px; border-radius: 15px; font-size: 13px; padding: 0 22px; }
.aqua:disabled { color: #9a9a9a; animation: none; background: linear-gradient(#fbfbfb, #ececec); border-color: #a9a9a9; }
.aqua.small { height: 19px; font-size: 11px; min-width: 0; padding: 0 10px; }
.linkish { background: none; border: 0; color: #2d63c8; cursor: pointer; padding: 0; text-decoration: underline; font-size: 12px; }

/* status bar */
#statusbar {
  flex: none; height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 8px; position: relative;
  background: linear-gradient(#dcdcdc 0%, #c6c6c6 100%);
  border-top: 1px solid #5f5f5f; box-shadow: inset 0 1px 0 #efefef;
}
.sbtn {
  appearance: none; width: 30px; height: 23px; display: grid; place-items: center; padding: 0; color: #2e2e2e;
  border: 1px solid #6f6f6f; border-radius: 3px;
  background: linear-gradient(#fefefe 0%, #ececec 48%, #d7d7d7 52%, #e6e6e6 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(255, 255, 255, 0.45);
}
.sbtn svg { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8)); }
.sbtn:active { background: linear-gradient(#b7b7b7, #cfcfcf); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); }
.sbtn.on { color: #1d5fd0; background: linear-gradient(#c6c6c6, #dedede); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); }
.sbtn:disabled { color: #a0a0a0; }
#statusText { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11px; color: #1f1f1f; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); white-space: nowrap; pointer-events: none; }
#statusbar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#syncState { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #444; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
#syncState .syncic { color: #444; }
#syncState.busy .syncic { animation: spin 1s linear infinite; color: #1d5fd0; }
#syncState .dot { width: 7px; height: 7px; border-radius: 50%; background: #5bb946; box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.3); }
#syncState.off .dot { background: #b9b9b9; }
#gridSize { width: 80px; }

/* dialogs */
#layer { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
#layer > * { pointer-events: auto; }
.shade { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.12); }
.sheet {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: min(470px, calc(100vw - 24px));
  background: linear-gradient(#f1f1f1, #e3e3e3); border: 1px solid rgba(0, 0, 0, 0.45); border-top: 0;
  border-radius: 0 0 6px 6px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); padding: 18px 20px 16px; font-size: 13px;
  animation: drop 0.22s ease-out;
}
@keyframes drop { from { transform: translate(-50%, -100%); } to { transform: translate(-50%, 0); } }
.sheet .alert { display: flex; gap: 16px; }
.sheet .alert .aic { width: 56px; height: 56px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 50% 30%, #8cc2ff, #2a6fd0 70%); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); }
.sheet .alert .aic svg { width: 30px; height: 30px; }
.sheet h2 { font-size: 13px; margin: 0 0 8px; font-weight: bold; }
.sheet p { font-size: 11px; margin: 0 0 8px; color: #222; line-height: 1.45; }
.sheet .btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; align-items: center; }
.sheet .btns .lft { margin-right: auto; }

.win {
  position: fixed; background: #ececec; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 18px 50px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; overflow: hidden; font-size: 11px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
}
.win .wt {
  height: 22px; flex: none; position: relative; text-align: center; line-height: 22px; font-size: 13px; color: #333; cursor: default;
  background: linear-gradient(#ededed, #d3d3d3 60%, #c1c1c1); border-bottom: 1px solid #7d7d7d; box-shadow: inset 0 1px 0 #fafafa;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 60px;
}
.win .wt .traffic { top: 5px; }
.win .wt .traffic span { cursor: pointer; }
.win .wb { flex: 1; overflow: auto; padding: 14px 18px; }
.win .wf { flex: none; display: flex; justify-content: flex-end; gap: 10px; padding: 10px 16px 14px; align-items: center; }
.win .wf .lft { margin-right: auto; display: flex; gap: 8px; }
.tabs { display: flex; justify-content: center; margin: 2px 0 14px; }
.tabs button {
  appearance: none; height: 21px; padding: 0 14px; font-size: 11px; border: 1px solid #7a7a7a; border-left-width: 0;
  background: linear-gradient(#fefefe 0%, #f1f1f1 48%, #dfdfdf 52%, #ededed 100%);
}
.tabs button:first-child { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.tabs button:last-child { border-radius: 0 4px 4px 0; }
.tabs button.on { background: linear-gradient(#5f93df 0%, #3f7bd6 48%, #2c69c8 52%, #5f97e3 100%); color: #fff; border-color: #2c5596; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); }
.info-sum { display: flex; gap: 16px; }
.info-sum .cv { width: 160px; height: 160px; flex: none; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); background: #ccc; }
.info-sum h3 { font-size: 13px; margin: 2px 0 2px; }
.info-sum .sub { color: #333; margin-bottom: 2px; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 3px 10px; margin-top: 10px; }
.kv .k { text-align: right; color: #555; font-weight: bold; }
.kv .v { color: #111; overflow-wrap: anywhere; }
.box { background: #fff; border: 1px solid #a8a8a8; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12); }
.copies { width: 100%; border-collapse: collapse; margin-top: 12px; }
.copies th { text-align: left; font-weight: bold; background: linear-gradient(#fff, #e9e9e9); border-bottom: 1px solid #b0b0b0; padding: 2px 6px; }
.copies td { padding: 3px 6px; border-bottom: 1px solid #eee; vertical-align: middle; }
.copies tr:nth-child(even) td { background: var(--zebra); }
.copies a, .win a { color: #2d63c8; }
.field { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; align-items: center; margin: 6px 0; }
.field label { text-align: right; color: #333; }
.field input[type="text"], .field input:not([type]) { height: 20px; border: 1px solid #8f8f8f; padding: 0 4px; font-size: 11px; background: #fafafa; color: #333; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.12); }
.ro-note { margin-top: 12px; padding: 6px 9px; background: #fff8dc; border: 1px solid #e3cf8a; border-radius: 4px; color: #5f4a00; line-height: 1.45; }
.ro-note.blue { background: #eef4fd; border-color: #b9cdef; color: #23426e; }
.info-lists { height: 230px; overflow: auto; }
.info-lists label { display: flex; align-items: center; gap: 6px; padding: 2px 6px; height: 20px; }
.info-lists label:nth-child(even) { background: var(--zebra); }
.info-lists label.off { color: #999; }
.info-lists .pbadge { margin-left: auto; }
.bigstars { font-size: 18px; letter-spacing: 3px; cursor: pointer; color: #333; }
.bigstars .e { color: #c5c5c5; }

select.pop, .pop {
  height: 20px; font-size: 11px; border: 1px solid #7a7a7a; border-radius: 4px; padding: 0 18px 0 6px;
  background: linear-gradient(#fefefe, #e5e5e5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
input.num, input.txt, input.date { height: 19px; border: 1px solid #8f8f8f; padding: 0 4px; font-size: 11px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.18); background: #fff; outline: none; }
input.num { width: 56px; }
input.txt { width: 170px; }
input:focus.num, input:focus.txt, input:focus.date { box-shadow: 0 0 0 3px rgba(86, 145, 230, 0.7); }
.rules { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; padding: 10px; }
.rule { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rule .grow { flex: 1; }
.round {
  width: 19px; height: 19px; border-radius: 50%; border: 1px solid #7a7a7a; display: grid; place-items: center; padding: 0; font-size: 13px; line-height: 1;
  background: linear-gradient(#fff, #e1e1e1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.smart-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.smart-foot label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.smart-count { color: #555; margin-left: auto; }
.problem { color: #b3261e; min-height: 14px; }

.cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; padding: 6px 4px; }
.cols label { display: flex; gap: 6px; align-items: center; }

/* growl-style notices */
#notices { position: fixed; top: 34px; right: 14px; z-index: 75; display: flex; flex-direction: column; gap: 8px; width: min(320px, calc(100vw - 28px)); pointer-events: none; }
.growl {
  pointer-events: auto; background: rgba(20, 20, 20, 0.84); color: #fff; border-radius: 9px; padding: 10px 12px 10px 12px; font-size: 11px; line-height: 1.45;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); display: flex; gap: 10px; animation: growlIn 0.25s ease-out; border: 1px solid rgba(255, 255, 255, 0.15);
}
.growl.err { background: rgba(110, 18, 18, 0.9); }
.growl b { display: block; font-size: 12px; margin-bottom: 2px; }
.growl .gi { width: 28px; height: 28px; flex: none; border-radius: 6px; display: grid; place-items: center; background: linear-gradient(#8cc2ff, #2a6fd0); }
.growl.err .gi { background: linear-gradient(#ff9a8f, #c0312a); }
.growl .gi svg { width: 16px; height: 16px; color: #fff; }
.growl .x { margin-left: auto; cursor: pointer; opacity: 0.6; font-size: 13px; align-self: flex-start; }
.growl.out { opacity: 0; transition: opacity 0.4s; }
@keyframes growlIn { from { opacity: 0; transform: translateY(-8px); } }

/* drag ghost */
.ghost {
  position: fixed; z-index: 90; pointer-events: none; padding: 3px 9px 3px 7px; border-radius: 10px; font-size: 11px; font-weight: bold;
  background: rgba(56, 117, 215, 0.92); color: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.ghost .n { background: #e8322b; border-radius: 8px; padding: 0 5px; min-width: 16px; text-align: center; }
.ghost.no { background: rgba(120, 120, 120, 0.9); }

/* mini player popover */
.popover { position: fixed; z-index: 72; background: #ececec; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 14px 40px rgba(0, 0, 0, 0.45); padding: 10px; width: min(420px, calc(100vw - 20px)); }
.popover::before { content: ""; position: absolute; top: -8px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: #ececec; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.3)); }
.popover .ph { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11px; }
.popover iframe { width: 100%; border: 0; border-radius: 6px; background: #fff; display: block; }
.popover .opts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

/* activity window */
.activity { font-family: Menlo, Monaco, monospace; font-size: 10px; line-height: 1.5; }
.activity .row { padding: 2px 6px; border-bottom: 1px solid #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity .row.own { color: #6a4ab0; }

/* ------------------------------------------------------------------ phones */
@media (max-width: 760px) {
  #menubar { font-size: 13px; padding: 0 2px; overflow-x: auto; scrollbar-width: none; }
  #menubar .m { padding: 0 7px; }
  #menubar .status { display: none; }
  #window { inset: 22px 0 0 0; border-radius: 0; }
  #artpane { display: none; }
  #titlebar { height: auto; padding-bottom: 6px; }
  #titlebar .wintitle, .traffic { display: none; }
  .toolbar { position: static; height: auto; flex-wrap: wrap; gap: 8px; padding: 8px 8px 0; }
  .volume, .viewseg .tlabel, .searchbox .tlabel { display: none; }
  .mobile-only { display: grid !important; }
  .lcd-wrap { order: 3; flex-basis: 100%; }
  .lcd { width: 100%; }
  .searchbox { order: 4; flex: 1; }
  .search { width: 100%; }
  .viewseg { order: 5; }
  #sources { position: absolute; left: 0; top: 0; bottom: 0; z-index: 20; width: min(280px, 82vw); transform: translateX(-102%); transition: transform 0.22s ease; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.35); }
  body.drawer #sources { transform: none; }
  #splitter { display: none; }
  #browser { height: 120px; }
  #statusText { position: static; transform: none; flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
  #statusbar .right #syncLabel, #gridSize { display: none; }
  #coverflow { height: 38%; }
  :root { --row: 34px; }
  .tr { line-height: 1.2; }
  .td { padding-top: 2px; }
}