:root{
  --accent1:#5b8cc0; --accent2:#2f5d86; --accent-deep:#15395c;
  --ink:#1c1e22; --ink-soft:#7a8088;
  --paper:#fbfbfc;
  --round: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, -apple-system, sans-serif;
  --sys: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
html{ background:#0a1622; }
html,body{ height:100%; overflow:hidden; overscroll-behavior:none; }
body{
  position:fixed; inset:0; width:100%; height:100%;
  background:radial-gradient(55% 38% at 18% 26%, rgba(255,255,255,.30), transparent 62%),radial-gradient(48% 34% at 78% 16%, rgba(255,255,255,.26), transparent 62%),radial-gradient(70% 46% at 62% 82%, rgba(255,255,255,.20), transparent 62%),linear-gradient(180deg,#1a2c40 0%, #33547a 40%, #6f93b6 75%, #aec6d8 100%);
  font-family:var(--sys); color:var(--ink); touch-action:manipulation; -webkit-font-smoothing:antialiased;
}
.stage{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 8px)
          calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 8px);
}
.ipod{ transform-origin:center center; will-change:transform; }

/* ===================== BODY (soft graphite) ===================== */
.ipod{
  position:relative; width:340px; max-width:100%; padding:20px 20px 26px; border-radius:34px;
  background:linear-gradient(162deg, #34568a 0%, #21426b 28%, #0e2237 68%, #28456e 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 -2px 10px rgba(0,0,0,0.5) inset,
    0 0 0 1px rgba(0,0,0,0.55),
    0 34px 80px rgba(0,0,0,0.55), 0 12px 30px rgba(0,0,0,0.4);
}
.ipod::after{ content:none; }

/* ===================== SCREEN ===================== */
.screen{
  position:relative; height:248px; border-radius:16px; overflow:hidden; background:var(--paper);
  box-shadow:0 0 0 6px #2b2c31, 0 0 0 7px rgba(255,255,255,0.06),
    0 12px 26px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.35) inset;
}
.screen::after{ content:none; }
.statusbar{
  position:relative; z-index:6; height:25px; display:flex; align-items:center; justify-content:space-between; padding:0 11px;
  background:linear-gradient(#f6f7f9 0%, #eaecf0 100%); border-bottom:1px solid #e1e4e9;
  font-family:var(--round); font-size:13px; font-weight:600; color:#3b3e44; letter-spacing:0.2px;
}
.sb-right{ display:flex; align-items:center; gap:7px; }
.sb-play{ display:inline-flex; align-items:center; }
.sb-play svg{ width:11px; height:11px; display:block; }
.sb-batt{ width:25px; height:12px; border:1.5px solid #b9bec5; border-radius:3px; position:relative; background:linear-gradient(#bfe0f4,#6fa8d6); box-shadow:0 0 0 1px rgba(255,255,255,0.6) inset; }
.sb-batt::after{ content:""; position:absolute; right:-3px; top:3px; width:2px; height:6px; background:#b9bec5; border-radius:0 2px 2px 0; }

.view{ position:absolute; top:25px; left:0; right:0; bottom:0; }
.hidden{ display:none !important; }

/* ----- menu + art split ----- */
.view-menu{ display:flex; }
.menu-pane{ position:relative; flex:1 1 60%; min-width:0; display:flex; flex-direction:column; overflow:hidden; padding-top:3px; }
.art-pane{ flex:0 0 40%; background:linear-gradient(165deg,#23405f,#0a1626 78%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:11px; }
.art-frame{ width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#1b1b1f;
  box-shadow:0 8px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08) inset; }
.art{ width:100%; height:100%; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; font-size:11px; font-weight:700; padding:7px; text-shadow:0 1px 3px rgba(0,0,0,0.6); font-family:var(--round); }
.art-cap{ color:#eef1f6; font-family:var(--round); font-size:11px; font-weight:600; margin-top:9px; text-align:center; line-height:1.2; max-height:28px; overflow:hidden; }

/* search */
.search-bar{ display:none; align-items:center; gap:7px; margin:4px 6px 2px; padding:5px 10px; border-radius:11px; background:#eef0f3; }
.search-bar.on{ display:flex; }
.search-bar .mag{ color:#9aa0a8; font-size:14px; }
#searchInput{ flex:1; border:none; outline:none; background:transparent; font-size:14px; font-family:inherit; color:#1c1e22; }

/* list — modern rounded pills */
.menu{ list-style:none; flex:1; overflow:hidden; position:relative; padding:1px 0; }
.menu.slide-fwd{ animation:slideFwd .2s cubic-bezier(.22,.61,.36,1); }
.menu.slide-back{ animation:slideBack .2s cubic-bezier(.22,.61,.36,1); }
@keyframes slideFwd{ from{ transform:translateX(30px); opacity:.25; } to{ transform:translateX(0); opacity:1; } }
@keyframes slideBack{ from{ transform:translateX(-30px); opacity:.25; } to{ transform:translateX(0); opacity:1; } }
.row{
  height:30px; display:flex; align-items:center; gap:7px; margin:0 6px; padding:0 9px; border-radius:9px;
  font-size:15px; color:#22242a; white-space:nowrap; overflow:hidden;
}
.row .r-main{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .r-sub{ color:#9398a0; font-size:12px; flex:0 0 auto; max-width:42%; overflow:hidden; text-overflow:ellipsis; }
.row .chev{ color:#cfd3d9; font-weight:700; font-size:16px; line-height:1; }
.row.playing-dot .r-main::before{ content:""; display:inline-block; width:0; height:0; border-left:6px solid var(--accent2); border-top:4px solid transparent; border-bottom:4px solid transparent; margin-right:6px; vertical-align:1px; }
.row.sel{
  color:#fff;
  background:linear-gradient(180deg, var(--accent1) 0%, var(--accent2) 100%);
  box-shadow:0 4px 12px rgba(47,93,134,0.4), 0 1px 0 rgba(255,255,255,0.35) inset;
  text-shadow:0 1px 1px rgba(10,40,70,0.4);
}
.row.sel .r-sub{ color:rgba(255,255,255,0.85); }
.row.sel .chev{ color:rgba(255,255,255,0.9); }
.row.sel.playing-dot .r-main::before{ border-left-color:#fff; }

/* scroll indicator */
.scrollbar{ position:absolute; top:2px; right:2px; width:5px; bottom:2px; background:rgba(0,0,0,0.04); border-radius:3px; display:none; z-index:4; }
.scrollbar.on{ display:block; }
.scroll-thumb{ position:absolute; right:0; width:5px; border-radius:3px; background:linear-gradient(#cfd3da,#aeb4bd); }

/* ----- now playing ----- */
.view-now{ background:linear-gradient(#fdfdfe,#eef0f3); padding:11px 16px 12px; display:flex; flex-direction:column; align-items:center; }
.view-now.enter{ animation:nowEnter .24s ease-out; }
@keyframes nowEnter{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.np-top{ font-size:11px; color:#91979f; margin-bottom:7px; align-self:flex-start; font-weight:500; font-family:var(--round); }
.np-art{ width:120px; height:120px; border-radius:16px; background-size:cover; background-position:center; background-color:#1b1b1f;
  box-shadow:0 12px 26px rgba(0,0,0,0.32), 0 0 0 1px rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; text-align:center; padding:7px; font-family:var(--round); }
.np-info{ text-align:center; margin-top:12px; width:100%; }
.np-title{ font-family:var(--round); font-size:16px; font-weight:600; color:#171717; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-artist{ font-size:13px; color:#41464d; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-album{ font-size:12px; color:#91979f; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-flags{ height:14px; font-size:10px; color:var(--accent2); margin-top:6px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; }
.np-time{ display:flex; align-items:center; gap:9px; width:100%; margin-top:auto; font-size:11px; color:#727880; font-variant-numeric:tabular-nums; }
.np-bar{ flex:1; height:7px; border-radius:4px; background:#d6dadf; overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(0,0,0,0.1) inset; }
.np-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--accent1), var(--accent2)); }

/* ----- cover flow ----- */
.view-cover{ background:radial-gradient(125% 95% at 50% 28%, #1c3147 0%, #050a12 80%); display:flex; flex-direction:column; align-items:center; overflow:hidden; }
.cf-stage{ position:relative; width:100%; height:150px; margin-top:6px; perspective:660px; perspective-origin:50% 42%; }
.cf-cover{
  position:absolute; top:14px; left:50%; width:98px; height:98px; margin-left:-49px;
  background-size:cover; background-position:center; background-color:#202024; border-radius:11px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.10), 0 10px 22px rgba(0,0,0,0.55);
  transition:transform .32s cubic-bezier(.2,.7,.25,1), opacity .25s linear;
  -webkit-box-reflect:below 3px linear-gradient(transparent 54%, rgba(255,255,255,0.28) 100%);
  transform-style:preserve-3d; will-change:transform; backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:9px; font-weight:700; text-align:center; padding:6px; overflow:hidden; text-shadow:0 1px 2px rgba(0,0,0,0.6); font-family:var(--round);
}
.cf-cap{ text-align:center; margin-top:52px; padding:0 14px; color:#fff; }
.cf-title{ font-family:var(--round); font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-artist{ font-size:12px; color:#9aa3b2; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ----- boot splash ----- */
.boot{ position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:radial-gradient(120% 100% at 50% 38%, #24405f, #0a1525 85%); transition:opacity .5s ease; }
.boot.gone{ opacity:0; pointer-events:none; }
.boot-logo{ width:54px; height:54px; border-radius:16px; background:linear-gradient(150deg,var(--accent1),var(--accent-deep)); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(47,93,134,0.5), 0 1px 0 rgba(255,255,255,0.4) inset; }
.boot-logo svg{ width:22px; height:22px; fill:#fff; margin-left:3px; }
.boot-name{ font-family:var(--round); color:#fff; font-size:19px; font-weight:700; letter-spacing:1px; }
.boot-sub{ font-family:var(--round); color:#8b9099; font-size:11px; letter-spacing:2px; margin-top:-6px; }

/* ===================== CLICK WHEEL ===================== */
.wheel{
  position:relative; width:206px; height:206px; margin:26px auto 0; border-radius:50%;
  background:radial-gradient(circle at 50% 34%, #ffffff 0%, #f2f4f7 52%, #e4e8ee 100%);
  box-shadow:0 2px 0 rgba(255,255,255,0.85) inset, 0 -8px 18px rgba(20,40,70,0.12) inset,
    0 6px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.5);
  touch-action:none;
}
.wheel::before{ content:""; position:absolute; inset:9px; border-radius:50%; box-shadow:0 1px 3px rgba(255,255,255,0.16) inset; pointer-events:none; }
.w-label{ position:absolute; background:none; border:none; color:rgba(27,58,92,0.92); font-family:var(--round); font-size:12px; font-weight:700; letter-spacing:1.5px; cursor:pointer; padding:13px 20px; display:flex; align-items:center; justify-content:center; touch-action:none; -webkit-touch-callout:none; }
.w-label:active{ color:#15395c; opacity:0.55; }
.w-label svg{ width:25px; height:16px; display:block; pointer-events:none; filter:drop-shadow(0 1px 1px rgba(20,40,70,0.18)); }
.w-menu{ top:8px; left:50%; transform:translateX(-50%); text-shadow:none; }
.w-prev{ left:8px; top:50%; transform:translateY(-50%); }
.w-next{ right:8px; top:50%; transform:translateY(-50%); }
.w-play{ bottom:9px; left:50%; transform:translateX(-50%); }
.w-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:78px; height:78px; border-radius:50%; cursor:pointer;
  background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTI2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNTAgOCBDNzAgMzUgODYgNjAgODYgODYgQTM2IDM2IDAgMSAxIDE0IDg2IEMxNCA2MCAzMCAzNSA1MCA4IFoiLz48cGF0aCBmaWxsPSIjZDYyYjNhIiBkPSJNNTAuMCA2Ni4wIEw1NS4zIDgwLjcgTDcwLjkgODEuMiBMNTguNiA5MC44IEw2Mi45IDEwNS44IEw1MC4wIDk3LjAgTDM3LjEgMTA1LjggTDQxLjQgOTAuOCBMMjkuMSA4MS4yIEw0NC43IDgwLjcgWiIvPjwvc3ZnPg==") center/30px no-repeat,
    radial-gradient(circle at 50% 36%, #4f86bd 0%, #2f5d86 50%, #173a5c 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.25) inset, 0 -2px 5px rgba(0,0,0,0.4) inset;
}
.w-center:active{ background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTI2Ij48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNTAgOCBDNzAgMzUgODYgNjAgODYgODYgQTM2IDM2IDAgMSAxIDE0IDg2IEMxNCA2MCAzMCAzNSA1MCA4IFoiLz48cGF0aCBmaWxsPSIjZDYyYjNhIiBkPSJNNTAuMCA2Ni4wIEw1NS4zIDgwLjcgTDcwLjkgODEuMiBMNTguNiA5MC44IEw2Mi45IDEwNS44IEw1MC4wIDk3LjAgTDM3LjEgMTA1LjggTDQxLjQgOTAuOCBMMjkuMSA4MS4yIEw0NC43IDgwLjcgWiIvPjwvc3ZnPg==") center/30px no-repeat, radial-gradient(circle at 50% 42%, #27567f, #11304d); box-shadow:0 0 0 1px rgba(255,255,255,0.4), 0 1px 5px rgba(0,0,0,0.5) inset; }

@media (max-width:380px){ .ipod{ width:100%; } }