:root{
  --bg:#FCF7F1;
  --bg-2:#F6EFE6;
  --card:#FFFFFF;
  --ink:#4A413A;
  --ink-soft:#8C8077;
  --ink-faint:#B6ABA1;
  --line:#EDE4D8;
  --line-2:#E4D8C8;
  --accent:#E08D7B;       /* dusty coral, primary action */
  --accent-deep:#C9745F;
  --shadow:0 10px 30px -12px rgba(120,90,70,.28);
  --shadow-soft:0 6px 18px -10px rgba(120,90,70,.22);
  /* pastel cover tints */
  --p1:#F4B8C0; --p1b:#F7D6CE;
  --p2:#AFCDEC; --p2b:#D2E4F4;
  --p3:#BFE3C0; --p3b:#DCEFD7;
  --p4:#D2C0EC; --p4b:#E6DCF4;
  --p5:#F7D6A6; --p5b:#FBE8C9;
  --p6:#F2B6A3; --p6b:#F9D8C9;
  --p7:#A9DCD3; --p7b:#CFEDE6;
  --p8:#E7C3D6; --p8b:#F3DCE8;
  --maxw:480px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Mali',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
.app-shell{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:100svh;
  position:relative;
  background:
    radial-gradient(120% 60% at 50% -10%, #FFFDFA 0%, var(--bg) 55%);
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--p1b);}

/* ============ GATE ============ */
#gate{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 26px calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(130% 70% at 50% 12%, #FFFEFC 0%, var(--bg) 50%, var(--bg-2) 100%);
  transition:opacity .5s ease, transform .5s ease;
}
#gate.hide{opacity:0;transform:scale(1.02);pointer-events:none;}
.gate-inner{width:100%;max-width:360px;text-align:center;}
.moon{
  width:96px;height:96px;margin:0 auto 22px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%, #FBE7C7 0%, #F6D6A6 55%, #EFC487 100%);
  box-shadow:0 14px 36px -10px rgba(220,170,110,.6), inset -10px -12px 0 -4px rgba(255,255,255,.35);
  position:relative;
}
.moon::after,.moon::before{content:"";position:absolute;border-radius:50%;background:rgba(220,180,120,.28);}
.moon::after{width:16px;height:16px;top:26px;left:30px;}
.moon::before{width:10px;height:10px;top:52px;left:56px;box-shadow:14px -28px 0 -2px rgba(220,180,120,.22);}
.gate-title{font-family:'Itim',cursive;font-size:31px;line-height:1.2;margin:0 0 6px;color:var(--ink);}
.gate-sub{font-size:14.5px;color:var(--ink-soft);margin:0 0 30px;font-weight:300;}
.pw-wrap{position:relative;display:flex;flex-direction:column;gap:12px;}
.pw-field{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1.5px solid var(--line-2);border-radius:18px;
  padding:4px 6px 4px 18px;box-shadow:var(--shadow-soft);transition:border-color .2s,box-shadow .2s;
}
.pw-field.err{animation:shake .4s;border-color:#E08D7B;}
.pw-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(224,141,123,.14);}
.pw-field input{
  flex:1;border:none;outline:none;background:none;font-family:inherit;
  font-size:18px;color:var(--ink);letter-spacing:.14em;padding:14px 0;min-width:0;
}
.pw-field input::placeholder{color:var(--ink-faint);letter-spacing:0;font-weight:300;}
.pw-go{
  width:50px;height:50px;border-radius:14px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:transform .15s, background .2s;box-shadow:0 8px 18px -8px rgba(201,116,95,.7);
}
.pw-go:active{transform:scale(.92);}
.pw-go svg{width:22px;height:22px;}
.pw-go.busy{opacity:.6;pointer-events:none;}
.pw-hint{font-size:12.5px;color:var(--ink-faint);margin-top:14px;font-weight:300;min-height:18px;}
.pw-hint.show-err{color:var(--accent-deep);}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(7px);}60%{transform:translateX(-5px);}80%{transform:translateX(3px);}}

/* ============ HEADER ============ */
.topbar{
  padding:calc(24px + env(safe-area-inset-top)) 22px 12px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.brand{min-width:0;}
.brand h1{font-family:'Itim',cursive;font-size:25px;margin:0;line-height:1.1;color:var(--ink);white-space:nowrap;}
.brand p{margin:3px 0 0;font-size:13px;color:var(--ink-soft);font-weight:300;}
.top-right{display:flex;align-items:center;gap:8px;flex:none;}
.count-pill{
  font-size:12.5px;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow-soft);font-weight:500;
}
.lock-btn{
  width:34px;height:34px;border-radius:50%;background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);box-shadow:var(--shadow-soft);
  transition:transform .12s,color .2s;
}
.lock-btn:active{transform:scale(.9);color:var(--accent-deep);}
.lock-btn svg{width:16px;height:16px;}

/* ============ GRID ============ */
.grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  padding:10px 18px 220px;
}
.card{
  background:var(--card);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-soft);border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:active{transform:scale(.975);}
.card.playing{border-color:var(--accent);box-shadow:0 0 0 2px rgba(224,141,123,.35),var(--shadow);}
.cover{
  aspect-ratio:1/1;position:relative;cursor:pointer;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.cover .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.cover .ph-ring{
  width:52%;height:52%;border-radius:50%;
  border:2px dashed rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;
}
.cover .ph-ring span{font-size:11px;color:rgba(90,70,55,.5);font-weight:500;font-family:'Mali';}
.cover .play-badge{
  position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 6px 14px -5px rgba(80,50,30,.45);
  display:flex;align-items:center;justify-content:center;color:var(--accent-deep);
  transition:transform .15s;
}
.cover:active .play-badge{transform:scale(.9);}
.cover .play-badge svg{width:18px;height:18px;}
.cover .now-eq{position:absolute;left:10px;top:10px;display:none;gap:2px;align-items:flex-end;height:16px;
  background:rgba(255,255,255,.92);padding:5px 7px;border-radius:999px;box-shadow:0 4px 10px -4px rgba(80,50,30,.4);}
.card.playing .cover .now-eq{display:flex;}
.now-eq i{width:3px;background:var(--accent-deep);border-radius:2px;animation:eq 1s ease-in-out infinite;}
.now-eq i:nth-child(1){height:6px;animation-delay:0s;}
.now-eq i:nth-child(2){height:13px;animation-delay:.2s;}
.now-eq i:nth-child(3){height:9px;animation-delay:.4s;}
.card.playing.paused .now-eq i{animation-play-state:paused;}
@keyframes eq{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}

.card-body{padding:12px 13px 13px;display:flex;flex-direction:column;gap:9px;flex:1;}
.card-title{font-size:15px;font-weight:600;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px;}
.card-meta{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);font-weight:300;margin-top:-2px;}
.card-meta svg{width:13px;height:13px;opacity:.7;}
.card-actions{display:flex;gap:8px;margin-top:auto;}
.btn-play{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--accent);color:#fff;border-radius:12px;padding:9px;font-size:13.5px;font-weight:600;
  transition:transform .12s,background .2s;
}
.btn-play:active{transform:scale(.95);background:var(--accent-deep);}
.btn-play svg{width:15px;height:15px;}
.btn-dl{
  width:40px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);color:var(--ink-soft);border-radius:12px;border:1px solid var(--line);
  transition:transform .12s,color .2s,background .2s;
}
.btn-dl:active{transform:scale(.92);color:var(--accent-deep);background:#F7E9DF;}
.btn-dl svg{width:17px;height:17px;}

/* ============ MINI PLAYER ============ */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  max-width:var(--maxw);margin:0 auto;
  padding:0 12px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(140%);transition:transform .42s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.player.show{transform:translateY(0);}
.player-inner{
  background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(231,219,205,.9);border-radius:22px;
  box-shadow:0 16px 40px -14px rgba(110,80,55,.4);
  padding:12px 13px 13px;pointer-events:auto;position:relative;overflow:hidden;
}

/* resume bar */
.resume-bar{
  display:none;align-items:center;gap:10px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;
  padding:8px 9px 8px 13px;margin-bottom:11px;
}
.resume-bar.show{display:flex;}
.resume-bar .r-txt{flex:1;font-size:12.5px;line-height:1.3;color:var(--ink);font-weight:300;}
.resume-bar .r-txt b{font-weight:600;color:var(--accent-deep);font-variant-numeric:tabular-nums;}
.resume-bar .r-btn{font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:10px;white-space:nowrap;transition:transform .12s;}
.resume-bar .r-btn:active{transform:scale(.93);}
.r-cont{background:var(--accent);color:#fff;}
.r-new{background:#fff;color:var(--ink-soft);border:1px solid var(--line-2);}

.pl-top{display:flex;align-items:center;gap:12px;}
.pl-cover{width:48px;height:48px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pl-cover img{width:100%;height:100%;object-fit:cover;}
.pl-info{flex:1;min-width:0;}
.pl-title{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-status{font-size:11.5px;color:var(--ink-soft);font-weight:300;margin-top:1px;}
.pl-dl{width:38px;height:38px;flex:none;border-radius:11px;background:var(--bg-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:transform .12s,color .2s;}
.pl-dl:active{transform:scale(.9);color:var(--accent-deep);}
.pl-dl svg{width:17px;height:17px;}
.pl-close{width:30px;height:30px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);transition:transform .12s,color .2s;}
.pl-close:active{transform:scale(.85);color:var(--ink);}
.pl-close svg{width:15px;height:15px;}

.pl-controls{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:11px;}
.ctl{display:flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:transform .14s,color .2s;position:relative;}
.ctl:active{transform:scale(.9);}
.ctl.skip{width:42px;height:42px;}
.ctl.skip svg{width:25px;height:25px;}
.ctl.skip .num{position:absolute;font-size:8.5px;font-weight:700;color:var(--ink-soft);top:50%;left:50%;transform:translate(-50%,-42%);}
.ctl-play{
  width:58px;height:58px;border-radius:50%;background:var(--accent);color:#fff;flex:none;
  box-shadow:0 10px 22px -8px rgba(201,116,95,.75);transition:transform .14s,background .2s;
}
.ctl-play:active{transform:scale(.93);background:var(--accent-deep);}
.ctl-play svg{width:26px;height:26px;}

.pl-scrub{display:flex;align-items:center;gap:10px;margin-top:10px;}
.t-cur,.t-dur{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums;width:38px;text-align:center;font-weight:400;flex:none;}
.track{
  flex:1;height:22px;display:flex;align-items:center;cursor:pointer;position:relative;touch-action:none;
}
.track-rail{position:absolute;left:0;right:0;height:6px;border-radius:6px;background:var(--line-2);overflow:hidden;}
.track-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-deep));border-radius:6px;}
.track-knob{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;border:2.5px solid var(--accent);
  box-shadow:0 2px 6px -1px rgba(120,80,55,.5);transform:translateX(-50%);left:0;transition:transform .1s;}
.track:active .track-knob{transform:translateX(-50%) scale(1.18);}

.toast{
  position:fixed;left:50%;bottom:calc(220px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px);
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:300;padding:9px 16px;border-radius:999px;
  z-index:80;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;max-width:90vw;
}
.toast.show{opacity:.96;transform:translateX(-50%) translateY(0);}

.empty-note{grid-column:1/-1;text-align:center;color:var(--ink-faint);font-size:13px;padding:30px 0;font-weight:300;}
@media (min-width:430px){.brand h1{font-size:27px;}}