/* Ström. Stockholm grisch: cool stone, navy ink, one thread of brass. */

@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: italic; font-display: swap; src: url(../fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: italic; font-display: swap; src: url(../fonts/cormorant-garamond-latin-600-italic.woff2) format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 400; font-display: swap; src: url(../fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 500; font-display: swap; src: url(../fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 600; font-display: swap; src: url(../fonts/hanken-grotesk-latin-600-normal.woff2) format('woff2'); }

:root {
  --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg: #0d1320;
  --bg-2: #141c2d;
  --bg-3: #1c2639;
  --line: rgba(226, 231, 240, 0.09);
  --line-2: rgba(226, 231, 240, 0.18);
  --ink: #ebe8df;
  --ink-2: #a9b2c1;
  --ink-3: #758093;
  --brass: #c4af7e;
  --on-ink: #0d1320;
  --r: 3px;
  --tabs: 58px;
  --mini-h: 68px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
:root[data-theme='linnen'] {
  --bg: #e7e8e6;
  --bg-2: #f3f3f1;
  --bg-3: #dadcda;
  --line: rgba(16, 26, 46, 0.1);
  --line-2: rgba(16, 26, 46, 0.2);
  --ink: #111a2e;
  --ink-2: #4a5468;
  --ink-3: #7a8497;
  --brass: #86723f;
  --on-ink: #f3f3f1;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow: hidden;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.ico { display: inline-flex; flex: none; }
[hidden] { display: none !important; }

/* ---- boot ---- */
#boot { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 20px; background: var(--bg); transition: opacity 0.5s; }
#boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { font: italic 500 58px/1 var(--serif); letter-spacing: -0.01em; }
.boot-bar { width: 84px; height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
.boot-bar i { position: absolute; inset: 0; background: var(--brass); transform: translateX(-100%); animation: slide 1.3s ease-in-out infinite; }
@keyframes slide { to { transform: translateX(100%); } }

/* ---- layout ---- */
#app { position: fixed; inset: 0; display: block; }
#view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: calc(var(--sat) + 4px) 20px calc(var(--tabs) + var(--sab) + 40px); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
body.has-player #view { padding-bottom: calc(var(--tabs) + var(--mini-h) + var(--sab) + 40px); }
#rail { display: none; }

#tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(3, 1fr); height: calc(var(--tabs) + var(--sab)); padding-bottom: var(--sab); background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; letter-spacing: 0.01em; color: var(--ink-3); position: relative; text-align: center; }
.tab.on { color: var(--ink); }
.tab.on::before { content: ''; position: absolute; top: -1px; width: 24px; height: 1px; background: var(--brass); }

/* ---- type ---- */
.wordmark { font: italic 500 28px/1 var(--serif); letter-spacing: -0.005em; }
.h1 { font: 500 clamp(38px, 10vw, 52px)/1 var(--serif); letter-spacing: -0.015em; margin: 8px 0 10px; }
.h2 { font: italic 500 26px/1.1 var(--serif); margin: 36px 0 14px; letter-spacing: -0.005em; }
.h2.sm { font-size: 21px; margin: 26px 0 10px; }
.lede { color: var(--ink-2); max-width: 34ch; font-size: 15.5px; }
.hint { color: var(--ink-3); margin: 26px 0; max-width: 42ch; }
.hint.left { margin: 12px 0; }
.topbar { display: flex; align-items: center; height: 54px; }
.grow { flex: 1; }
.hero { padding: 8px 0 4px; }

/* ---- buttons ---- */
.ibtn { width: 44px; height: 44px; display: inline-grid; place-items: center; color: var(--ink-2); border-radius: 50%; flex: none; transition: color 0.15s; }
.ibtn:hover { color: var(--ink); }
.ibtn.on { color: var(--brass); }
.ibtn.big { width: 56px; height: 56px; color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 99px; border: 1px solid var(--line-2); font-weight: 500; font-size: 14.5px; white-space: nowrap; }
.btn.solid { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.btn.danger { color: #c27a7a; border-color: rgba(194, 122, 122, 0.4); }
.btn.solid.danger { background: #a95858; color: #fff; border-color: transparent; }
.linkbtn { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 14px; padding: 12px 0; }
.linkbtn.inline { padding: 0; font: 400 13px var(--sans); }
.play-btn { width: 70px; height: 70px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: inline-grid; place-items: center; flex: none; }
.play-btn.sm { width: 42px; height: 42px; }
.spin { width: 22px; height: 22px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sp 0.8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ---- covers ---- */
.cv { --s: 48px; position: relative; width: var(--s); aspect-ratio: 1; flex: none; background: linear-gradient(150deg, var(--c1), var(--c2)); border-radius: var(--r); overflow: hidden; container-type: inline-size; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.cv.round { border-radius: 50%; }
.cv-l { position: absolute; inset: 0; display: grid; place-items: center; font: italic 500 1.7em/1 var(--serif); color: rgba(235, 232, 223, 0.84); }
@container (min-width: 20px) { .cv-l { font-size: 56cqw; } }
.cv::after { content: ''; position: absolute; inset: 7%; border: 1px solid rgba(235, 232, 223, 0.14); pointer-events: none; border-radius: inherit; }
.cv.round::after { inset: 4%; }
.cv:has(img.in)::after { display: none; }
.cv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s; }
.cv img.in { opacity: 1; }
.mosaic { --s: 48px; width: var(--s); aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bg-3); border-radius: var(--r); overflow: hidden; flex: none; }
.mosaic .cv { width: 100%; border-radius: 0; box-shadow: none; }
.mosaic .cv::after { display: none; }
.fav-cover { display: grid; place-items: center; background: linear-gradient(150deg, #2a3250, #7d6f4a); color: #ebe8df; }
.fav-cover::after { display: none; }
.cv.plus { display: grid; place-items: center; background: transparent; border: 1px dashed var(--line-2); color: var(--ink-2); box-shadow: none; }
.cv.plus::after { display: none; }

/* ---- rows ---- */
.vl { position: relative; }
.vl .row { position: absolute; left: 0; right: 0; }
.rows .row { position: relative; height: 64px; }
.row { display: grid; grid-template-columns: var(--s, 48px) minmax(0, 1fr) auto auto; gap: 14px; align-items: center; cursor: pointer; --s: 48px; }
.row .cv, .row .mosaic { --s: 48px; }
.row > .ico:last-child { color: var(--ink-3); }
.row .ibtn { margin-right: -10px; }
.tx { min-width: 0; }
.t, .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t { font-weight: 500; font-size: 15px; }
.s { color: var(--ink-2); font-size: 13px; }
.row.now .t, .card.now .ct { color: var(--brass); }
.fav-dot { color: var(--brass); display: inline-flex; }
@media (hover: hover) { .row:hover { background: color-mix(in srgb, var(--bg-2) 70%, transparent); } }

.prow { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; padding: 9px 0; --s: 56px; }
.prow .cv, .prow .mosaic { --s: 56px; }
.plist { margin-top: 4px; }

.rail-x { display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 8px; scroll-snap-type: x proximity; scroll-padding: 0 20px; scrollbar-width: none; }
.rail-x::-webkit-scrollbar { display: none; }
.card { flex: none; width: 148px; text-align: left; scroll-snap-align: start; --s: 148px; }
.card .cv, .card .mosaic { --s: 148px; }
.ct { margin-top: 10px; font-weight: 500; font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { position: relative; aspect-ratio: 1.3; border-radius: var(--r); overflow: hidden; text-align: left; color: #ebe8df; }
.tile .cv { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.tile .cv::after { inset: 8px; }
.tile .cv-l { place-items: start end; padding: 2px 18px; font-size: 38cqw; opacity: 0.2; }
.tile-t { position: absolute; left: 16px; right: 12px; bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.tile-t .n { font: italic 500 25px/1.05 var(--serif); }
.tile-t .s { color: rgba(235, 232, 223, 0.74); font-size: 12px; }

/* ---- list header ---- */
.lhead { padding: 4px 0 8px; }
.lcover { --s: min(62vw, 230px); width: var(--s); margin: 6px 0 22px; box-shadow: 0 30px 50px -32px rgba(0, 0, 0, 0.8); }
.lcover .cv, .lcover .mosaic { --s: min(62vw, 230px); }
.lt { margin: 0 0 6px; }
.lmeta { color: var(--ink-2); margin-bottom: 18px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sortbar { display: flex; justify-content: flex-end; margin-top: 6px; }

/* ---- search, filters, tabs ---- */
.searchwrap { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-2); padding: 6px 0 10px; color: var(--ink-3); }
.searchbox { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: 500 26px/1.2 var(--serif); }
.searchbox::placeholder { color: var(--ink-3); font-style: italic; }
.filter { display: block; width: 100%; margin: 4px 0 6px; background: none; border: 0; border-bottom: 1px solid var(--line-2); padding: 10px 0; outline: 0; font-size: 15px; }
.filter::placeholder, .field::placeholder { color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; margin-top: 12px; }
.chip { border: 1px solid var(--line-2); padding: 8px 15px; border-radius: 99px; margin: 0 8px 8px 0; font-size: 14px; color: var(--ink-2); }
.results { padding-top: 6px; }
.seg { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin: 4px 0 14px; }
.seg button { font: italic 500 25px/1 var(--serif); color: var(--ink-3); padding: 8px 0 12px; position: relative; }
.seg button.on { color: var(--ink); }
.seg button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--brass); }

/* ---- mini player ---- */
#mini { position: fixed; z-index: 30; left: 8px; right: 8px; bottom: calc(var(--tabs) + var(--sab) + 6px); height: var(--mini-h); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; box-shadow: 0 22px 40px -24px rgba(0, 0, 0, 0.8); }
.mini-open { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px; height: 100%; min-width: 0; }
#mini-thumb { width: 96px; height: 54px; background: #05080e; border-radius: 2px; overflow: hidden; position: relative; }
#mini-thumb .cv, #np-slot .cv { position: absolute; top: 0; bottom: 0; left: 50%; width: auto; height: 100%; transform: translateX(-50%); aspect-ratio: 1; border-radius: 0; }
.mini-tx { min-width: 0; }
.mini-tx .t { font-size: 14.5px; }
.mini-ctl { display: flex; align-items: center; gap: 2px; padding-right: 8px; }
.mini-extra { display: none; }
.desk { display: none !important; }
.mini-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.mini-prog i { display: block; height: 100%; width: 0; background: var(--brass); }

/* ---- stage (official players) ---- */
#stage { position: fixed; z-index: 45; left: 0; top: 0; width: 0; height: 0; background: #000; overflow: hidden; pointer-events: none; }
#stage.away { visibility: hidden; }
#stage.tap { pointer-events: auto; }
#stage > div { position: absolute; inset: 0; }
#stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- now playing ---- */
#np { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--bg); padding: calc(var(--sat) + 8px) 22px calc(var(--sab) + 14px); overflow: hidden; isolation: isolate; transform: translateY(100%); visibility: hidden; transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.24, 1), visibility 0s 0.45s; }
#np.open { transform: none; visibility: visible; transition-delay: 0s; }
#np > *:not(.np-bg) { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }
.np-bg { position: absolute; inset: -12%; z-index: -1; max-width: none !important; background: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--np-a, #2d3d63) 75%, transparent), transparent 72%); transition: opacity 0.6s; }
.np-bg.img { background-size: cover; background-position: center; filter: blur(56px) saturate(1.15); opacity: 0.3; }
.np-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center; height: 52px; flex: none; }
.np-ctx { min-width: 0; }
.np-ctx span { display: block; font-size: 12px; color: var(--ink-3); }
.np-ctx b { display: block; font: italic 500 18px/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-main { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.mat { padding: 10px; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 44px 70px -42px rgba(0, 0, 0, 0.85); flex: none; }
#np-slot { position: relative; aspect-ratio: 16 / 9; background: #05080e; overflow: hidden; }
.np-hint { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--brass); color: var(--brass); font-size: 13.5px; text-align: center; }
.np-info { padding-top: 22px; flex: none; }
.np-title { font: 600 clamp(27px, 7.4vw, 36px)/1.06 var(--serif); letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-artist { display: block; margin-top: 6px; font-size: 16px; color: var(--ink-2); text-align: left; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-src { margin-top: 8px; font-size: 12.5px; color: var(--brass); min-height: 1.2em; }
.np-status { font-size: 12.5px; color: var(--ink-3); min-height: 1.2em; }
.np-lyrics { flex: 1; min-height: 0; overflow-y: auto; margin-top: 12px; padding: 18px 0; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); scrollbar-width: none; }
.np-lyrics::-webkit-scrollbar { display: none; }
.ly { font: 500 25px/1.25 var(--serif); color: var(--ink-3); padding: 7px 0; cursor: pointer; transition: color 0.3s; }
.ly.cur { color: var(--ink); }
.ly.plain { cursor: default; color: var(--ink-2); font-size: 22px; }
.ly-note { color: var(--ink-3); font-style: italic; }
#np.lyrics .np-main { justify-content: flex-start; }
#np.lyrics .mat { width: 46%; margin: 4px 0 0; padding: 6px; }
#np.lyrics .np-info { padding-top: 12px; }
#np.lyrics .np-title { font-size: 22px; -webkit-line-clamp: 1; }
#np.lyrics .np-src { display: none; }
.np-seek { padding-top: 14px; flex: none; }
.times { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: -2px; }
.np-ctl { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; flex: none; }
.np-util { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--line); flex: none; }

input[type='range'] { -webkit-appearance: none; appearance: none; background: transparent; width: 100%; height: 28px; cursor: pointer; --p: 0%; }
input[type='range']::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--ink) var(--p), var(--line-2) var(--p)); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); margin-top: -5.5px; border: 0; }
input[type='range']::-moz-range-track { height: 2px; background: var(--line-2); }
input[type='range']::-moz-range-progress { height: 2px; background: var(--ink); }
input[type='range']::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--ink); border: 0; }
input.vol { width: 110px; }
input.vol.wide { width: min(220px, 52vw); }
input.vol::-webkit-slider-runnable-track { background: var(--line-2); }

/* ---- sheets, dialogs, toast ---- */
#overlay { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.sheet-bg { position: fixed; inset: 0; background: rgba(4, 7, 12, 0.58); opacity: 0; transition: opacity 0.25s; pointer-events: auto; }
.sheet-bg.on { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 86vh; overflow-y: auto; background: var(--bg-2); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 14px 14px 0 0; padding: 6px 0 calc(var(--sab) + 12px); transform: translateY(105%); transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: auto; }
.sheet.on { transform: none; }
.sheet::before { content: ''; display: block; width: 38px; height: 3px; border-radius: 2px; background: var(--line-2); margin: 6px auto 4px; }
.sheet-head { display: flex; gap: 14px; align-items: center; padding: 12px 22px 12px; border-bottom: 1px solid var(--line); --s: 48px; }
.sheet-head .txt { min-width: 0; }
.sheet-title { font: 600 21px/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-sub { color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 22px; font-size: 16px; }
.sheet-item .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-item .note { margin-left: auto; color: var(--ink-3); font-size: 13px; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-item.danger { color: #cf8383; }
.sheet-item .ico { color: var(--ink-2); width: 20px; }
@media (hover: hover) { .sheet-item:hover { background: var(--bg-3); } }
.sheet-h { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 22px 6px; font: italic 500 18px var(--serif); color: var(--ink-2); }
.qrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 7px 22px; cursor: pointer; --s: 44px; }
.qrow .cv { --s: 44px; }
.qrow.now .t { color: var(--brass); }
.queue .hint { padding: 0 22px; }
.dialog { position: fixed; left: 50%; top: 50%; width: min(92vw, 400px); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 24px; opacity: 0; transform: translate(-50%, -46%); transition: opacity 0.2s, transform 0.25s; pointer-events: auto; }
.dialog.on { opacity: 1; transform: translate(-50%, -50%); }
.dlg-title { font: 600 24px/1.1 var(--serif); margin-bottom: 14px; }
.dlg-text { color: var(--ink-2); margin-bottom: 8px; }
.dialog input[type='text'] { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line-2); padding: 10px 0; font-size: 18px; outline: 0; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
#toast { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--sab) + 24px); transform: translate(-50%, 10px); opacity: 0; max-width: min(88vw, 460px); background: var(--ink); color: var(--on-ink); padding: 11px 18px; border-radius: 99px; font-size: 14px; pointer-events: none; transition: opacity 0.25s, transform 0.25s; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
body.has-player:not(.np-open) #toast { bottom: calc(var(--tabs) + var(--mini-h) + var(--sab) + 24px); }

/* ---- settings ---- */
.set-group { margin-top: 8px; }
.set-rows { border-top: 1px solid var(--line); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.set-row.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.set-row .l { font-weight: 500; }
.d { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; max-width: 52ch; }
.d.note { padding: 10px 0; color: var(--brass); }
.field { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; outline: 0; font-size: 15px; }
.segc { display: inline-flex; border: 1px solid var(--line-2); border-radius: 99px; padding: 3px; flex: none; }
.segc button { padding: 8px 14px; border-radius: 99px; font-size: 13.5px; color: var(--ink-2); }
.segc button.on { background: var(--ink); color: var(--on-ink); }
.switch { -webkit-appearance: none; appearance: none; flex: none; width: 48px; height: 28px; border-radius: 99px; background: var(--bg-3); border: 1px solid var(--line-2); position: relative; cursor: pointer; transition: background 0.2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-2); transition: transform 0.2s, background 0.2s; }
.switch:checked { background: color-mix(in srgb, var(--brass) 28%, var(--bg-3)); border-color: var(--brass); }
.switch:checked::after { transform: translateX(20px); background: var(--brass); }

/* ---- wide screens ---- */
@media (min-width: 980px) {
  #app { display: grid; grid-template-columns: 268px minmax(0, 1fr); }
  #view { position: relative; inset: auto; grid-column: 2; padding: 14px clamp(28px, 5vw, 72px) 130px; }
  body.has-player #view { padding-bottom: 130px; }
  #view > * { max-width: 980px; margin-left: auto; margin-right: auto; }
  .rail-x { margin: 0 calc(-1 * clamp(28px, 5vw, 72px)) 0 0; padding: 0 20px 8px 0; scroll-padding: 0; }
  #rail { display: flex; flex-direction: column; grid-column: 1; padding: 30px 16px 110px; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; }
  #tabs { display: none; }
  #rail > * { flex: none; }
  .rail-mark { font: italic 500 38px/1 var(--serif); padding: 0 10px 26px; }
  .rail-link { display: flex; align-items: center; gap: 14px; padding: 11px 10px; color: var(--ink-2); width: 100%; font-size: 15.5px; }
  .rail-link.on { color: var(--ink); }
  .rail-link.on .ico { color: var(--brass); }
  .rail-h { font: italic 500 18px var(--serif); color: var(--ink-3); margin: 28px 10px 8px; }
  .rail-pl { display: block; width: 100%; padding: 7px 10px; font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail-pl:hover { color: var(--ink); }
  #mini { left: 0; right: 0; bottom: 0; height: 88px; border-radius: 0; border-width: 1px 0 0; grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr); background: color-mix(in srgb, var(--bg-2) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .mini-open { grid-template-columns: 128px minmax(0, 1fr); padding: 10px 14px; }
  #mini-thumb { width: 128px; height: 72px; }
  .mini-ctl { gap: 6px; padding: 0; }
  .desk { display: inline-grid !important; }
  .mini-extra.desk { display: flex !important; align-items: center; justify-content: flex-end; gap: 10px; padding-right: 22px; color: var(--ink-2); }
  .mini-ctl .play-btn.sm { width: 48px; height: 48px; }
  .mini-prog { top: 0; bottom: auto; }
  #toast, body.has-player:not(.np-open) #toast { bottom: 108px; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tile { aspect-ratio: 1; }
  .lhead { display: grid; grid-template-columns: 230px 1fr; column-gap: 32px; align-items: end; }
  .lcover { grid-row: 1 / span 4; margin: 0; }
  .lt, .lmeta, .lhead .actions { grid-column: 2; }
  .lhead .h1 { align-self: end; }
  .np-ctl { margin-top: 18px; }
}

@media (max-height: 700px) {
  .np-info { padding-top: 14px; }
  .np-title { font-size: 26px; }
  .ibtn.big, .np-ctl .play-btn { transform: scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}