:root {
  --peach: #110a08;
  --peach-mid: #1e1410;
  --sakura: #eba36b;
  --sakura-deep: #d97736;
  --kincha: #d97736;
  --kincha-deep: #a14c16;
  --cream: #1e1410;
  --cream2: #251c16;
  --sumizome: #f9ece0;
  --usucha: #998579;
  --usucha-lt: #6c5a50;
  --glass: rgba(30, 20, 16, 0.85);
  --glass-hi: rgba(45, 30, 24, 0.9);
  --glass-b: rgba(255, 255, 255, 0.05);
  --shadow: rgba(0, 0, 0, 0.6);
}

body.theme-midnight {
  --peach: #0f172a; --peach-mid: #1e1b4b; --sakura: #312e81; --sakura-deep: #4c1d95;
  --kincha: #8b5cf6; --kincha-deep: #a78bfa; --cream: #0f172a; --cream2: #1e293b;
  --sumizome: #f8fafc; --usucha: #cbd5e1; --usucha-lt: #94a3b8;
  --glass: rgba(15,23,42,0.65); --glass-hi: rgba(30,41,59,0.8); --glass-b: rgba(255,255,255,0.1);
  --shadow: rgba(0,0,0,0.4);
}

body.theme-autumn {
  --peach: #fef08a; --peach-mid: #fde047; --sakura: #f97316; --sakura-deep: #ef4444;
  --kincha: #b45309; --kincha-deep: #78350f; --cream: #fffbeb; --cream2: #fef3c7;
  --sumizome: #451a03; --usucha: #78350f; --usucha-lt: #b45309;
  --glass: rgba(255,255,255,0.5); --glass-b: rgba(255,255,255,0.6); --shadow: rgba(120,53,15,0.2);
}

body.theme-matcha {
  --peach: #ecfccb; --peach-mid: #d9f99d; --sakura: #a3e635; --sakura-deep: #65a30d;
  --kincha: #4d7c0f; --kincha-deep: #3f6212; --cream: #f7fee7; --cream2: #ecfccb;
  --sumizome: #14532d; --usucha: #166534; --usucha-lt: #4d7c0f;
  --glass: rgba(255,255,255,0.55); --glass-b: rgba(255,255,255,0.6); --shadow: rgba(20,83,45,0.15);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  width:100%;height:100%;
  overflow:hidden;
  font-family:'Inter',sans-serif;
  background:var(--peach-mid);
  transition: background 1s ease;
}

/* ── BACKGROUND ── */
.bg{position:fixed;inset:0;transition:background 2s ease;}

/* ── NIGHT SCENE (CSS-only, low CPU) ── */
.night-scene {
  position: fixed; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity 1.5s ease; z-index: 0;
}
body.theme-midnight .night-scene {
  opacity: 1; /* Only visible in midnight theme */
}
.stars { position: absolute; top: 0; left: 0; background: transparent; }
.stars1 { width: 1px; height: 1px; border-radius: 50%; animation: starTwinkle 5s ease-in-out infinite alternate; }
.stars2 { width: 2px; height: 2px; border-radius: 50%; animation: starTwinkle 4s ease-in-out infinite alternate-reverse; }
.stars3 { width: 3px; height: 3px; border-radius: 50%; animation: starTwinkle 3s ease-in-out infinite alternate; }
@keyframes starTwinkle {
  0% { opacity: 0.2; transform: scale(0.8) translateY(0); }
  100% { opacity: 1; transform: scale(1.2) translateY(-5px); }
}
.bg-blur{
  position:fixed;inset:-60px;
  filter:blur(70px) saturate(1.5) brightness(1.05);
  opacity:0;transition:opacity 1.8s ease;
  background-size:cover;background-position:center;
  transform:scale(1.15);
}
.bg-blur.on{opacity:0.65;}
.bg-grain{
  position:fixed;inset:0;pointer-events:none;
  opacity:0.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.bg-vig{
  position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 35%,rgba(120,60,30,0.22) 100%);
}

/* Petals */
.petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;}
.petal{
  position:absolute;border-radius:50% 0 50% 0;
  animation:petalfall linear infinite;top:-20px;
}
@keyframes petalfall{
  0%  {transform:translateY(0)    rotate(0deg)   translateX(0);   opacity:.7}
  50% {transform:translateY(50vh) rotate(200deg) translateX(28px);opacity:.4}
  100%{transform:translateY(110vh)rotate(400deg) translateX(-18px);opacity:0}
}

/* Drop ring */
.drop-ring{
  position:fixed;inset:20px;border:2px dashed rgba(247,184,196,0.55);
  border-radius:28px;pointer-events:none;opacity:0;transition:opacity .3s;z-index:200;
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-style:italic;
  font-size:18px;color:rgba(176,112,64,0.75);letter-spacing:3px;
}
.drop-ring.on{opacity:1;}

/* ── STAGE ── */
.stage{
  position:fixed;inset:0;display:flex;
  align-items:center;justify-content:center;gap:14px;
  transition: all 0.4s ease;
}

/* ── PLAYER CARD ── */
.card{
  width:340px;
  background:var(--glass);
  backdrop-filter:blur(30px) saturate(1.7);
  -webkit-backdrop-filter:blur(30px) saturate(1.7);
  border:1.5px solid var(--glass-b);
  border-radius:26px;
  padding:22px 20px 18px;
  box-shadow:
    0 24px 60px var(--shadow),
    0 6px 16px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(255,255,255,0.05);
  position:relative;
  animation:cardIn .65s cubic-bezier(.34,1.5,.64,1) both;
  transition: width 0.4s ease, padding 0.4s ease;
}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}

/* Header for extra controls */
.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  margin-top: -10px;
}
.icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--usucha); opacity: 0.6; transition: 0.2s;
  padding: 5px; border-radius: 5px; display:flex; align-items:center;
}
.icon-btn:hover { opacity: 1; transform: scale(1.1); background: rgba(255,255,255,0.1); }

/* drag handle */
.card::before{
  content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:32px;height:3px;border-radius:2px;background:rgba(255,255,255,.1);
}

/* ── OIL DISC ── */
.disc-section{
  display:flex;justify-content:center;
  margin-bottom:16px;
  transition: all 0.4s ease;
  overflow: hidden;
}
.disc-wrap{
  position:relative;
  width:148px;height:148px;
}

/* outer glow halo */
.disc-halo{
  position:absolute;inset:-14px;border-radius:50%;
  opacity:.8;transition:opacity .5s;
  animation:haloSpin 10s linear infinite;
  background:conic-gradient(
    from 0deg,
    #ffb3c6,#ffd6a5,#ffadad,#caffbf,#9bf6ff,
    #a0c4ff,#bdb2ff,#ffc6ff,#ffb3c6
  );
  filter:blur(14px);
}
.disc-halo.active{opacity:1;}
@keyframes haloSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* disc ring border */
.disc-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,0.15);
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
  overflow:hidden;
  z-index:2;
}

#oilCanvas{
  width:100%;height:100%;
  border-radius:50%;
  display:block;
}

/* center pin with album art support */
.disc-pin{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle,#fff 20%,#ffe8d0 60%,#d4956a 100%);
  background-size: cover;
  background-position: center;
  box-shadow:0 1px 8px rgba(0,0,0,.5);
  border: 2px solid rgba(255,255,255,0.3);
  z-index:5;pointer-events:none;
}
/* inner hole for pin */
.disc-pin::after {
  content: ''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%;
  background:rgba(20,20,20,0.5); box-shadow:inset 0 1px 3px rgba(0,0,0,0.8);
}

/* needle */
.needle{
  position:absolute;top:-4px;right:-22px;
  width:52px;height:84px;
  transform-origin:9px 9px;
  transform:rotate(-30deg);
  transition:transform .9s cubic-bezier(.34,1.2,.64,1);
  z-index:10;
}
.needle.on{transform:rotate(-6deg);}
.needle-ball{
  position:absolute;top:2px;left:0;
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(135deg,#f0d8c0,#c4906a);
  box-shadow:0 2px 7px rgba(0,0,0,.28);
}
.needle-arm{
  position:absolute;top:10px;left:8px;
  width:2px;height:72px;
  background:linear-gradient(180deg,#c0a080,#8a6040);
  border-radius:1px;transform:rotate(4deg);transform-origin:top;
}

/* ── TRACK INFO ── */
.track-info{text-align:center;margin-bottom:14px;}
.track-name{
  font-family:'Inter',sans-serif;
  font-size:18px;font-weight:600;
  color:var(--sumizome);letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:3px;
}
.track-name.idle{font-style:italic;color:var(--usucha);font-weight:400;}
.track-sub{
  font-size:10px;color:var(--usucha-lt);
  font-family:'DM Mono',monospace;letter-spacing:1.5px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fmt-badge{
  display:inline-block;
  background:var(--kincha);color:#000;
  font-size:8px;padding:1px 7px;border-radius:99px;
  letter-spacing:1px;opacity:0;transition:opacity .3s;
}
.fmt-badge.on{opacity:1;}

/* ── WAVEFORM ── */
.wave-wrap{
  height:32px;cursor:pointer;margin-bottom:5px;
  border-radius:6px;overflow:hidden;position:relative;
  transition: height 0.3s ease;
}
#waveCanvas{width:100%;height:100%;display:block;filter: saturate(1.5);}
.time-row{
  display:flex;justify-content:space-between;
  margin-bottom:13px;padding:0 1px;
}
.time-val{
  font-family:'DM Mono',monospace;font-size:10px;
  color:var(--usucha-lt);
}
.time-val.now{color:var(--kincha-deep);}

/* ── CONTROLS ── */
.ctrl-row{
  display:flex;align-items:center;justify-content:center;
  gap:6px;margin-bottom:13px;
}
.ctrl{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--usucha);
  transition:all .18s;box-shadow:0 2px 7px rgba(0,0,0,.1);
}
.ctrl:hover{background:rgba(255,255,255,.1);color:var(--sumizome);transform:translateY(-1px);}
.ctrl:active{transform:scale(.92);}
.ctrl.active{color:var(--sakura-deep);background:rgba(247,184,196,.1);border-color:rgba(247,184,196,.2);}
.ctrl svg{width:14px;height:14px;}

.play-btn{
  width:52px;height:52px;border-radius:16px;
  background:linear-gradient(145deg,var(--glass-hi),var(--glass-b));
  border:1.5px solid rgba(255,255,255,.1);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 18px var(--shadow),inset 0 1px 0 rgba(255,255,255,0.1);
  transition:all .18s;color:var(--kincha-deep);
}
.play-btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 9px 26px var(--shadow);}
.play-btn:active{transform:scale(.95);}
.play-btn svg{width:20px;height:20px;fill:var(--kincha-deep);}

/* ── VOLUME ── */
.vol-row{
  display:flex;align-items:center;gap:9px;
  padding:0 1px;margin-bottom:13px;
}
.vol-icon{color:var(--usucha-lt);cursor:pointer;flex-shrink:0;}
.vol-icon:hover{color:var(--kincha);}
.vol-icon svg{width:13px;height:13px;}
input.vol{
  flex:1;-webkit-appearance:none;appearance:none;
  height:2px;border-radius:99px;outline:none;cursor:pointer;
}
input.vol::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--cream);border:2px solid var(--kincha);
  box-shadow:0 1px 5px rgba(0,0,0,.5);cursor:pointer;
}
.vol-pct{
  font-family:'DM Mono',monospace;font-size:10px;
  color:var(--usucha-lt);min-width:26px;text-align:right;
}

/* ── BOTTOM BUTTONS ── */
.bottom-row{
  display:flex;align-items:center;gap:7px;justify-content:center;
}
.pill{
  display:flex;align-items:center;gap:5px;
  border:none;border-radius:99px;padding:6px 14px;
  cursor:pointer;font-family:'Inter',sans-serif;
  font-size:11px;font-weight:500;transition:all .18s;
}
.pill svg{width:11px;height:11px;}
.pill-folder{
  background:linear-gradient(135deg,var(--kincha),var(--kincha-deep));
  color:#000;box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.pill-folder:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,0,0,.4);}
.pill-files{
  background:linear-gradient(135deg,var(--sakura),var(--peach-mid));
  color:#000;box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.pill-files:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,0,0,.4);}

/* Toast */
.toast{
  position:absolute;bottom:-40px;left:50%;
  transform:translateX(-50%) translateY(6px);
  background:var(--sumizome);color:#000;
  font-family:'DM Mono',monospace;font-size:10px;
  padding:5px 14px;border-radius:99px;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;letter-spacing:.5px;font-weight:bold;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── SIDEBAR QUEUE ── */
.sidebar{
  width:230px;
  height:min(520px, 80vh);
  background:var(--glass);
  backdrop-filter:blur(30px) saturate(1.7);
  -webkit-backdrop-filter:blur(30px) saturate(1.7);
  border:1.5px solid var(--glass-b);
  border-radius:22px;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:
    0 24px 60px var(--shadow),
    0 6px 16px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.1);
  animation:cardIn .65s .08s cubic-bezier(.34,1.5,.64,1) both;
  transition: all 0.4s ease;
}

.sb-head{
  padding:16px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
}
.sb-title{
  font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;color:var(--usucha);
  letter-spacing:.5px;
}
.sb-meta{
  display:flex;align-items:center;gap:8px;
}
.sb-count{
  font-family:'DM Mono',monospace;font-size:9px;
  color:var(--usucha-lt);letter-spacing:1px;
}
.sb-clear{
  background:none;border:none;cursor:pointer;
  color:var(--usucha-lt);padding:3px;border-radius:6px;
  transition:color .2s,background .2s;
}
.sb-clear:hover{color:var(--sakura-deep);background:rgba(255,255,255,.1);}
.sb-clear svg{width:12px;height:12px;}

.queue-list{
  flex:1;overflow-y:auto;padding:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.05) transparent;
}
.queue-list::-webkit-scrollbar{width:3px;}
.queue-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:99px;}

.qi{
  display:flex;align-items:center;gap:9px;
  padding:7px 8px;border-radius:10px;cursor:pointer;
  transition:background .15s;border:1px solid transparent;
  animation:qiIn .2s ease both;
}
@keyframes qiIn{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
.qi:hover{background:rgba(255,255,255,.05);}
.qi.active{
  background:rgba(217, 119, 54, 0.1);
  border-color:rgba(217, 119, 54, 0.2);
}

.qi-num{
  font-family:'DM Mono',monospace;font-size:10px;
  color:var(--usucha-lt);width:18px;text-align:center;flex-shrink:0;
}
.qi.active .qi-num{color:var(--sakura-deep);}

/* mini EQ bars */
.qi-eq{display:flex;align-items:flex-end;gap:1.5px;height:11px;width:16px;}
.qi-eq span{flex:1;background:var(--sakura-deep);border-radius:1px;}
.qi-eq.play span:nth-child(1){animation:qb .45s ease-in-out infinite alternate;height:50%;}
.qi-eq.play span:nth-child(2){animation:qb .35s ease-in-out infinite alternate .1s;height:100%;}
.qi-eq.play span:nth-child(3){animation:qb .55s ease-in-out infinite alternate .05s;height:70%;}
.qi-eq.pause span{height:40%;}
@keyframes qb{from{transform:scaleY(.2)}to{transform:scaleY(1)}}

.qi-info{flex:1;overflow:hidden;}
.qi-name{
  font-size:11px;font-weight:600;color:var(--sumizome);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qi.active .qi-name{color:var(--kincha-deep);}
.qi-ext{
  font-family:'DM Mono',monospace;font-size:9px;color:var(--usucha-lt);
  margin-top:1px;
}
.qi-dur{
  font-family:'DM Mono',monospace;font-size:9px;
  color:var(--usucha-lt);flex-shrink:0;
}

.queue-empty{
  padding:28px 12px;text-align:center;
  font-family:'Inter',sans-serif;
  font-size:12px;color:var(--usucha-lt);
  line-height:1.6;
}

/* hidden inputs */
#fileInput,#folderInput{display:none;}

/* ── MINI MODE ── */
.stage.mini-mode {
  align-items: flex-end;
  padding-bottom: 30px;
}
.stage.mini-mode .sidebar {
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  position: absolute;
}
.card.mini-mode {
  width: 310px;
  padding: 15px 20px;
}
.card.mini-mode .disc-section {
  height: 0;
  margin-bottom: 0;
  opacity: 0;
}
.card.mini-mode .wave-wrap {
  height: 18px;
}