/* IDERADIO — Frutiger Aero sky; the whole app lives inside a glossy iPod (screen + click wheel). Chrome type for the name only. */
:root {
  --ink: #0d1b22;
  --ink-2: #4c5f68;
  --ink-3: #8597a0;
  --line: rgba(13, 27, 34, .09);
  --surface: #ffffff;
  --aqua: #1f9fe6;
  --aqua-deep: #0b6fb0;
  --hot: #ff3d6e;
  --ok: #1aa35a;
  --ipod-blue: linear-gradient(180deg, #7cbcf3 0%, #4b9be6 50%, #2f80d8 51%, #3d8de0 100%);
  --aqua-gloss: linear-gradient(180deg, #8fdcff 0%, #35b0f2 48%, #148fe0 52%, #4cc7ff 100%);
  --chrome: linear-gradient(180deg, #ffffff 0%, #eef8fb 28%, #9bb7c0 47%, #34525c 51%, #7fa3ae 62%, #e6f6fb 82%, #ffffff 100%);
  --f-chrome: "Audiowide", "Arial Black", sans-serif;
  --f-body: "Exo 2", "Trebuchet MS", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pop: cubic-bezier(0.045, 0.967, 0.468, 0.998);
  --spring: linear(0, 0.044 0.9%, 0.198 2%, 1.212 6.8%, 1.361 8.1%, 1.398 8.7%, 1.417 9.4%, 1.402 10.4%, 1.34 11.5%, 0.91 16.4%, 0.852 17.6%, 0.826 18.9%, 0.831 19.9%, 0.856 21%, 1.038 26%, 1.062 27.2%, 1.073 28.5%, 1.06 30.6%, 0.984 35.6%, 0.97 38%, 1.013 47.6%, 0.995 57.1%, 1.002 66.6%, 1);
  color-scheme: light;
}
* { box-sizing: border-box }
html { background: #8fd3f7 }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--ink);
  background: linear-gradient(180deg, #5fbff2 0%, #a9defc 32%, #e3f6ff 62%, #d7f5ea 82%, #9fe3cf 100%) fixed;
  font-family: var(--f-body); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit }
button { cursor: pointer }
a { color: inherit }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; border-radius: 4px }
::selection { background: var(--aqua); color: #fff }
[hidden] { display: none !important }

/* ---------- aero sky ---------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden }
.sun { position: absolute; right: -10vmax; top: -14vmax; width: 50vmax; height: 50vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 22%, rgba(255,255,255,0) 60%) }
.rays {
  position: absolute; right: -60vmax; top: -60vmax; width: 140vmax; height: 140vmax; opacity: .22;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.9) 0deg 4deg, rgba(255,255,255,0) 4deg 14deg);
  mask-image: radial-gradient(circle, #000 0%, transparent 45%); animation: turn 120s linear infinite;
}
@keyframes turn { to { transform: rotate(1turn) } }
.cloud { position: absolute; border-radius: 50%; background: #fff; filter: blur(28px); opacity: .75; animation: float 60s linear infinite alternate }
.cloud.c1 { width: 42vmax; height: 10vmax; left: -8vmax; top: 18vh }
.cloud.c2 { width: 30vmax; height: 8vmax; right: 6vmax; top: 44vh; animation-delay: -20s; opacity: .6 }
.cloud.c3 { width: 36vmax; height: 9vmax; left: 30vw; top: 72vh; animation-delay: -40s; opacity: .55 }
@keyframes float { to { transform: translateX(12vmax) } }
.water { position: absolute; left: -10%; right: -10%; bottom: -18vh; height: 40vh; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(120,230,200,.55), rgba(40,170,160,.45)); filter: blur(2px); box-shadow: inset 0 18px 30px rgba(255,255,255,.55) }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none }

/* ---------- chrome type ---------- */
.chrome {
  margin: 0; font-family: var(--f-chrome); font-weight: 400; letter-spacing: .02em; line-height: 1;
  background: var(--chrome); background-size: 100% 220%; -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.9);
  filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 6px 10px rgba(10,70,110,.35));
  animation: shine 6s var(--ease) infinite alternate;
}
@keyframes shine { to { background-position: 0 100% } }
.logo { font-size: clamp(42px, 9vw, 92px); text-align: center; animation: shine 6s var(--ease) infinite alternate, slamIn .9s var(--ease) .6s both }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 16px; background: linear-gradient(180deg, #8fd3f7, #e3f6ff); transition: opacity .5s var(--ease), transform .7s var(--ease), filter .5s }
.intro.out { opacity: 0; transform: scale(1.04); filter: blur(6px); pointer-events: none }
.intro-logo { font-size: clamp(40px, 9vw, 76px) }
.aero-bar { width: min(320px, 72vw); height: 20px; border-radius: 6px; position: relative; overflow: hidden; background: linear-gradient(180deg, #c9d6dc, #f1f6f8 55%, #fff); border: 1px solid rgba(13,27,34,.25); box-shadow: inset 0 2px 4px rgba(13,27,34,.22), 0 1px 0 #fff }
.aero-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 5px; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.32) 0 10px, rgba(255,255,255,0) 10px 20px), var(--aqua-gloss); background-size: 28.28px 28.28px, 100% 100%; box-shadow: inset 0 -3px 5px rgba(0,60,120,.3); animation: stripes .7s linear infinite }
.aero-fill::after { content: ""; position: absolute; left: 5px; right: 5px; top: 2px; height: 40%; border-radius: 3px; background: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.08)) }
@keyframes stripes { to { background-position: 28.28px 0, 0 0 } }
.aero-pct { font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--ink-2); font-variant-numeric: tabular-nums }
.aero-bar.mini { width: min(200px, 60%); height: 12px; margin: 18px auto }
.aero-bar.mini .aero-fill { width: 38%; animation: stripes .7s linear infinite, sweep 1.2s var(--ease) infinite }
@keyframes sweep { from { left: -38% } to { left: 100% } }

/* ---------- layout ---------- */
.wrap {
  position: relative; z-index: 1; max-width: 1000px; margin: 0 auto;
  padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px));
  padding-block: max(22px, env(safe-area-inset-top, 0px)) 110px;
  display: flex; flex-direction: column; gap: 18px;
}
@keyframes slamIn { from { opacity: 0; transform: translateY(-16px) } }

/* ---------- the device ---------- */
.device {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 22px; align-items: start;
  padding: 16px; border-radius: 30px;
  background: linear-gradient(160deg, #ffffff 0%, #f2f6f8 40%, #dbe4e9 100%);
  box-shadow: inset 0 2px 0 #fff, inset 0 -4px 12px rgba(13,27,34,.08), 0 0 0 1px rgba(13,27,34,.12), 0 30px 70px rgba(10,80,130,.28);
  animation: deviceIn .8s var(--ease) .5s both;
}
@keyframes deviceIn { from { opacity: 0; transform: translateY(24px) scale(.98) } }
.screen {
  position: relative; min-width: 0; border-radius: 14px; overflow: hidden; background: #fff;
  border: 3px solid #1d2b31; box-shadow: 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.7);
}
.screen::after { /* glass glare */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 11px;
  background: linear-gradient(115deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 28%);
}
.ibar { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; padding: 5px 10px; background: linear-gradient(180deg, #fbfdfe, #cdd9e1); border-bottom: 1px solid #8ea4b0; font-weight: 800; font-size: 13px }
.ibar-title { text-align: center }
.ipod-state { font-size: 10px }
.batt { width: 22px; height: 11px; border: 1px solid #1d2b31; border-radius: 2px; position: relative; padding: 1px; justify-self: end }
.batt::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 3px; background: #1d2b31 }
.batt i { display: block; height: 100%; width: 80%; background: linear-gradient(180deg, #b6f27a, #4caf1a) }
.itabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line) }
.itabs button { border: 0; background: #fff; padding: 11px 6px; font-weight: 700; font-size: 14px; color: var(--ink-2); transition: color .15s }
.itabs button + button { box-shadow: -1px 0 0 var(--line) }
.itabs button:hover { color: var(--ink) }
.itabs button[aria-current="page"] { background: var(--ipod-blue); color: #fff; text-shadow: 0 1px 1px rgba(0,40,90,.4) }

/* now playing strip */
.np { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 16px; background: linear-gradient(180deg, #eaf5fc, #d6e9f5); border-bottom: 1px solid #b7cfdc; animation: npIn .4s var(--ease) both }
@keyframes npIn { from { opacity: 0; transform: translateY(-8px) } }
.np-art { width: 56px; height: 56px; border-radius: 6px; background: #cfe3ef center / cover; box-shadow: 0 2px 6px rgba(13,40,60,.25); -webkit-box-reflect: below 1px linear-gradient(transparent 60%, rgba(255,255,255,.35)) }
.np-meta { min-width: 0 }
.np-t { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.np-s { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.np-prog { margin-top: 6px; height: 7px; border: 1px solid #1d2b31; background: #fff; overflow: hidden }
.np-prog i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #8fd0ff, #1f7fd0) }
.np-time { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums }

/* click wheel */
.wheel-col { position: sticky; top: 24px; display: flex; justify-content: center; padding-top: 6px }
.wheel {
  position: relative; width: 196px; height: 196px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ffffff, #eef2f4 55%, #d5dde2);
  box-shadow: inset 0 2px 3px #fff, inset 0 -5px 12px rgba(13,27,34,.14), 0 0 0 1px rgba(13,27,34,.14), 0 6px 16px rgba(13,40,60,.12);
}
.wheel button { position: absolute; border: 0; background: transparent; color: #8a9aa1; padding: 0; font-weight: 800; letter-spacing: .1em; transition: color .15s, transform .2s var(--ease) }
.wheel button:hover { color: var(--ink) }
.wheel button:active { transform: scale(.9) }
.w-menu { top: 10px; left: 50%; translate: -50% 0; width: 80px; height: 36px; font-size: 13px }
.w-prev { left: 8px; top: 50%; translate: 0 -50%; width: 40px; height: 60px; font-size: 18px }
.w-next { right: 8px; top: 50%; translate: 0 -50%; width: 40px; height: 60px; font-size: 18px }
.w-pp { bottom: 10px; left: 50%; translate: -50% 0; width: 80px; height: 36px; font-size: 13px; letter-spacing: -1px }
.w-center {
  left: 50%; top: 50%; translate: -50% -50%; width: 78px; height: 78px; border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #e2e8eb) !important;
  box-shadow: 0 0 0 1px rgba(13,27,34,.16), 0 3px 6px rgba(13,27,34,.16), inset 0 1px 0 #fff;
}
.w-center:active { transform: none; background: linear-gradient(180deg, #dfe6ea, #f5f8f9) !important }
.playing .w-center { box-shadow: 0 0 0 1px rgba(13,27,34,.16), 0 0 0 6px rgba(31,159,230,.18), 0 3px 6px rgba(13,27,34,.16), inset 0 1px 0 #fff }

/* ---------- screen content ---------- */
.card { display: flex; flex-direction: column; gap: 18px; padding: clamp(16px, 2.6vw, 24px); animation: cardIn .5s var(--ease) both; min-width: 0 }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px) } }
.card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end }
.month-title { margin: 0; font-family: var(--f-chrome); font-weight: 400; font-size: clamp(24px, 4vw, 38px); line-height: 1; color: var(--ink) }
.meta { margin-top: 8px; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums }
.meta b { color: var(--ink); font-weight: 700 }
.meta .sep { margin: 0 8px; color: var(--ink-3) }
.countdown { text-align: right; line-height: 1 }
.countdown .n { display: block; font-weight: 900; font-size: clamp(38px, 6vw, 56px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink) }
.countdown .u { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2) }
.countdown.urgent .n { color: var(--hot); animation: pulse 1.6s ease-in-out infinite }
.countdown.urgent .u { color: var(--hot) }
@keyframes pulse { 50% { transform: scale(1.06) } }

/* call to action */
.cta { display: flex; flex-direction: column; gap: 10px }
.cta-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: 15px }
.cta-line .flag { display: inline-flex; align-items: center; gap: 6px; color: var(--hot); text-transform: uppercase; letter-spacing: .08em; font-size: 12px }
.cta-line .flag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 0 rgba(255,61,110,.6); animation: ping 1.6s infinite }
.cta-line.done .flag { color: var(--ok) }
.cta-line.done .flag::before { background: var(--ok); animation: none }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(255,61,110,0) } 100% { box-shadow: 0 0 0 0 rgba(255,61,110,0) } }
.slots { display: inline-flex; gap: 4px; margin-left: auto }
.slot { width: 22px; height: 6px; border-radius: 2px; background: rgba(13,27,34,.1); transition: background .3s }
.slot.on { background: var(--aqua) }
.slot.crate { background: repeating-linear-gradient(-45deg, var(--aqua) 0 3px, #bfe6fb 3px 6px) }

/* the one pill */
.searchbox {
  display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%;
  background: #fff; border: 1px solid rgba(13,27,34,.16); border-radius: 999px;
  padding: 4px 6px 4px 18px; box-shadow: inset 0 2px 5px rgba(13,27,34,.06);
  transition: box-shadow .2s var(--ease), border-color .2s;
}
.searchbox:focus-within { border-color: var(--aqua); box-shadow: 0 0 0 4px rgba(31,159,230,.18) }
.searchbox input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 17px; padding: 11px 0 }
.searchbox input::placeholder { color: var(--ink-3) }
.searchbox .ico { color: var(--ink-3); font-size: 18px }
.searchbox .go { border: 0; background: var(--aqua); color: #fff; width: 38px; height: 38px; border-radius: 50%; font-weight: 900; font-size: 18px; display: grid; place-items: center }

/* toolbar */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 0 }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0 }
.tabs::-webkit-scrollbar { display: none }
.tabs button {
  flex: none; border: 0; background: none; color: var(--ink-2); font-weight: 600; font-size: 14px;
  padding: 10px 10px 11px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.tabs button:hover { color: var(--ink) }
.tabs button[aria-pressed="true"], .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--aqua) }
.tabs .lbl { color: var(--ink-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 10px 6px 11px 0; align-self: center }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1ed760; margin-right: 6px; vertical-align: 1px }
.actions { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 8px }

/* buttons: squared */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
  padding: 9px 14px; border-radius: 8px; border: 1px solid rgba(13,27,34,.14);
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 0 rgba(13,27,34,.05);
  transition: transform .15s var(--ease), background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { border-color: rgba(13,27,34,.3); transform: translateY(-1px) }
.btn:active { transform: translateY(0) scale(.98) }
.btn.primary { background: var(--aqua-gloss); border-color: var(--aqua-deep); color: #fff; text-shadow: 0 1px 1px rgba(0,40,80,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 10px rgba(11,111,176,.25) }
.btn.primary:hover { filter: brightness(1.05) }
.btn.hot { background: linear-gradient(180deg, #ff7a9a, var(--hot) 55%, #e92a5c); border-color: #c81f4d; color: #fff; text-shadow: 0 1px 1px rgba(100,0,30,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(255,61,110,.3) }
.btn.spotify { background: #1ed760; border-color: #17b852; color: #04260f }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2) }
.btn.ghost:hover { color: var(--ink); background: rgba(13,27,34,.05) }
.btn.icon { width: 36px; height: 36px; padding: 0 }
.btn[disabled] { opacity: .45; pointer-events: none }
.btn.lg { font-size: 15px; padding: 12px 18px }

/* ---------- song rows (shared by list + picker) ---------- */
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.row {
  position: relative; display: grid; grid-template-columns: 26px 48px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 9px 6px; border-radius: 10px; transition: background .15s;
}
.row + .row { box-shadow: 0 -1px 0 var(--line) }
.row:hover { background: rgba(13,27,34,.035) }
.row.new { animation: rowIn .7s var(--pop) both }
@keyframes rowIn { from { opacity: 0; transform: translateX(28px) } }
.no { font-size: 14px; font-weight: 700; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums }
.art {
  position: relative; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; border: 0; padding: 0; flex: none;
  background: linear-gradient(135deg, #d9eef5, #bfe3f2); box-shadow: 0 1px 3px rgba(13,40,60,.2);
}
.art img { width: 100%; height: 100%; object-fit: cover; display: block }
.art .pv { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13,27,34,.45); color: #fff; font-size: 14px; opacity: 0; transition: opacity .15s }
.art:hover .pv, .art:focus-visible .pv, .playing .art .pv { opacity: 1 }
.r-main { min-width: 0; display: flex; flex-direction: column; gap: 1px }
.r-t { font-weight: 700; font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.r-a { font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.r-by { font-size: 12px; font-weight: 600; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; margin-top: 2px }
.r-by::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--aqua)) }
.r-act { display: flex; gap: 6px; align-items: center }
.x { width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink-3); font-size: 18px; display: grid; place-items: center; transition: background .15s, color .15s }
.x:hover { background: rgba(255,61,110,.1); color: var(--hot) }
.prog { position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; background: transparent; overflow: hidden; border-radius: 2px }
.prog i { display: block; height: 100%; width: 0; background: var(--aqua) }
.row.playing .prog { background: rgba(31,159,230,.15) }
.bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; margin-left: 6px; vertical-align: -1px }
.bars i { width: 3px; background: var(--aqua); animation: eqs 1s ease-in-out infinite alternate }
.bars i:nth-child(2) { animation-delay: -.4s } .bars i:nth-child(3) { animation-delay: -.7s }

.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 36px 16px; color: var(--ink-2) }
.empty strong { font-family: var(--f-chrome); font-weight: 400; font-size: 26px; color: var(--ink); text-transform: uppercase }

/* ---------- picker sheet (story-style) ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(13,40,60,.3); backdrop-filter: blur(4px) }
.scrim.anim { animation: fade .25s ease both }
@keyframes fade { from { opacity: 0 } }
.sheet {
  position: fixed; z-index: 41; left: 50%; bottom: 0; translate: -50% 0;
  width: min(640px, 100%); height: min(86vh, 820px);
  background: var(--surface); border-radius: 18px 18px 0 0;
  box-shadow: 0 -20px 60px rgba(13,27,34,.25);
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sheet.anim { animation: sheetUp .45s var(--ease) both }
@keyframes sheetUp { from { transform: translateY(100%) } }
@media (min-width: 760px) { .sheet { bottom: 4vh; border-radius: 18px; height: min(84vh, 780px) } }
.grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(13,27,34,.18); margin: 8px auto 0; flex: none }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px 0 }
.sheet-head h3 { margin: 0; font-family: var(--f-chrome); font-weight: 400; font-size: 24px; text-transform: uppercase; letter-spacing: .02em }
.sheet-search { padding: 12px 18px 0 }
.sheet .tabs { padding: 0 14px; border-bottom: 1px solid var(--line); margin-top: 8px }
.sheet-body { flex: 1; overflow-y: auto; padding: 6px 12px 12px; overscroll-behavior: contain }
.group-h { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 14px 6px 4px }
.add {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(13,27,34,.16); background: #fff;
  font-size: 20px; font-weight: 700; color: var(--ink); display: grid; place-items: center; transition: all .2s var(--ease);
}
.add:hover { border-color: var(--aqua); color: var(--aqua) }
.add.in { background: var(--aqua); border-color: var(--aqua-deep); color: #fff }
.add.in:active { transform: scale(.92) }
.add[disabled] { opacity: .35 }
.note { padding: 18px 6px; color: var(--ink-2); font-size: 14px }

/* crate (checkout) */
.crate-bar {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-top: 1px solid var(--line); background: #fbfdfe; border-radius: 0 0 18px 18px;
}
.stack { display: flex; align-items: center }
.stack span { width: 34px; height: 34px; border-radius: 6px; margin-left: -10px; border: 2px solid #fff; background: #d9eef5 center / cover; box-shadow: 0 2px 6px rgba(13,40,60,.2); animation: drop .5s var(--spring) both }
.stack span:first-child { margin-left: 0 }
@keyframes drop { from { transform: translateY(-14px) scale(.6); opacity: 0 } }
.crate-txt { flex: 1; min-width: 0; font-size: 14px; color: var(--ink-2); line-height: 1.25 }
.crate-txt b { color: var(--ink); display: block; font-size: 15px }
.namefield {
  width: 100%; border: 1px solid rgba(13,27,34,.16); border-radius: 8px; padding: 11px 12px; font-size: 16px; background: #fff;
}
.namefield:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(31,159,230,.18) }
.checkout { display: flex; flex-direction: column; gap: 12px; padding: 6px 6px 0 }

/* floating crate bar on the page */
.dock {
  position: fixed; z-index: 30; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  width: min(560px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px;
  background: var(--ink); color: #fff; border-radius: 14px; box-shadow: 0 16px 40px rgba(13,27,34,.35);
  animation: dockUp .5s var(--spring) both;
}
@keyframes dockUp { from { transform: translateY(120%) } }
.dock .crate-txt { color: rgba(255,255,255,.75) }
.dock .crate-txt b { color: #fff }
.dock .stack span { border-color: var(--ink) }

/* ---------- archive ---------- */
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px }
.month {
  text-align: left; border: 0; background: #fff; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(13,40,60,.06); transition: transform .25s var(--ease), box-shadow .25s;
  animation: rowIn .7s var(--pop) both;
}
.month:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 14px 28px rgba(13,40,60,.12) }
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; border-radius: 8px; overflow: hidden; aspect-ratio: 1; max-width: 100% }
.mosaic span { background: linear-gradient(135deg, #d9eef5, #bfe3f2) center / cover }
.month .m { font-family: var(--f-chrome); font-size: 20px; text-transform: uppercase; line-height: 1 }
.month .s { font-size: 13px; color: var(--ink-2) }
.month.cur { box-shadow: 0 0 0 2px var(--aqua), 0 6px 18px rgba(13,40,60,.06) }


/* ---------- iPod menu feel for rows ---------- */
.row:hover { background: rgba(31,159,230,.08) }
.row.playing { background: var(--ipod-blue); color: #fff }
.row.playing .r-a, .row.playing .r-by, .row.playing .no { color: rgba(255,255,255,.88) }
.row.playing .bars i { background: #fff }
.row.playing .x { color: rgba(255,255,255,.8) }
.toolbar { border-bottom: 1px solid var(--line) }

/* ---------- footer / toast ---------- */
footer { display: flex; justify-content: center }
.version { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgba(13,27,34,.55) }
.toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); z-index: 60; translate: -50% 0; max-width: calc(100% - 32px); display: flex; gap: 10px; align-items: center; background: rgba(13,27,34,.9); backdrop-filter: blur(8px); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(13,27,34,.3); animation: toastIn .45s var(--spring) both }
.toast a { color: #9be7ff; font-weight: 700 }
@keyframes toastIn { from { transform: translateY(-20px); opacity: 0 } }

@media (max-width: 760px) {
  .device { grid-template-columns: minmax(0, 1fr); padding: 10px 10px 18px; border-radius: 24px; gap: 16px }
  .wheel-col { position: static; padding-top: 0 }
  .wheel { width: 176px; height: 176px }
  .w-center { width: 68px; height: 68px }
}
@media (max-width: 640px) {
  .row { grid-template-columns: 44px minmax(0,1fr) auto }
  .row .no { display: none }
  .art { width: 44px; height: 44px }
  .actions { width: 100% }
  .btn .lbl { display: none }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}

@media (pointer: fine) {
  html, body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d4f3ff'/%3E%3Cstop offset='.48' stop-color='%2345b8f5'/%3E%3Cstop offset='.52' stop-color='%231590e0'/%3E%3Cstop offset='1' stop-color='%236ad6ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3.5 2.5v17.2l4.6-4.3 3.2 6.8 3-1.3-3.1-6.6h6.4z' fill='url(%23g)' stroke='%230d1b22' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M5 5.6v6.6l4.9-2.8z' fill='%23fff' opacity='.75'/%3E%3C/svg%3E") 3 2, auto }
  a, button, .art, .r-main, .month, .searchbox, .stack { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.35' stop-color='%23bdeeff'/%3E%3Cstop offset='.8' stop-color='%232aa7f0'/%3E%3Cstop offset='1' stop-color='%230a6aa8'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='13' cy='13' r='9' fill='url(%23b)' fill-opacity='.85' stroke='%230d1b22' stroke-width='1.3'/%3E%3Cellipse cx='11' cy='9' rx='4.2' ry='2.2' fill='%23fff' opacity='.8'/%3E%3Ccircle cx='13' cy='13' r='1.6' fill='%230d1b22'/%3E%3C/svg%3E") 13 13, pointer }
  input:not([readonly]) { cursor: text }
}

.tabs .lbl { white-space: nowrap }
.btn.yt { background: #ff0033; border-color: #d1002a; color: #fff }
.btn.apple { background: linear-gradient(180deg, #ff5f78, #fa233b); border-color: #d81b32; color: #fff }

/* ---------- crate bar lives at the bottom of the iPod screen ---------- */
#dockRoot:empty { display: none }
.dock {
  position: sticky; bottom: 0; left: auto; translate: none; width: auto; z-index: 3;
  margin: 0; border-radius: 0; box-shadow: 0 -8px 20px rgba(13,27,34,.18);
}

/* ---------- phones: the iPod fills the screen and the page never scrolls ---------- */
@media (max-width: 760px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none }
  body { position: fixed; inset: 0 }
  .wrap {
    height: 100dvh; max-width: none; gap: 8px;
    padding-block: calc(env(safe-area-inset-top, 0px) + 8px) calc(env(safe-area-inset-bottom, 0px) + 10px);
  }
  .logo { font-size: clamp(26px, 8vw, 36px); flex: none }
  footer { display: none }
  .device {
    flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px;
    padding: 10px 10px 12px; border-radius: 26px;
  }
  .screen { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 12px }
  .ibar, .itabs, .np { flex: none }
  .itabs button { padding: 9px 4px; font-size: 13px }
  .np { padding: 8px 12px; grid-template-columns: 44px minmax(0,1fr); gap: 10px }
  .np-art { width: 44px; height: 44px; -webkit-box-reflect: unset }
  #view { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch }
  .card { padding: 14px 14px 18px; gap: 14px }
  .month-title { font-size: 22px }
  .countdown .n { font-size: 36px }
  .meta { font-size: 14px; margin-top: 6px }
  .toolbar { gap: 6px }
  .wheel-col { flex: none; padding: 0 }
  .wheel { --w: min(46vw, 24dvh, 178px); width: var(--w); height: var(--w) }
  .w-center { width: 38%; height: 38% }
  .w-menu { top: 6%; font-size: 11px }
  .w-pp { bottom: 6%; font-size: 11px }
  .w-prev { left: 4% } .w-next { right: 4% }
  .dock { padding: 8px 8px 8px 10px; gap: 8px }
  .dock .stack span { width: 28px; height: 28px }
  .sheet { height: 90dvh }
}
@media (max-width: 760px) {
  .wrap > * { min-width: 0 }
  .device, .screen, #view, .card { min-width: 0; width: 100%; max-width: 100% }
  .wheel-col { display: flex; justify-content: center; width: 100% }
}