/* Ritma — Neumorphic ice-blue UI */
:root{
  --bg:#E9F1F8;            /* ice blue base */
  --bg-deep:#DDE9F2;
  --ink:#16212B;           /* near-black text */
  --muted:#6B7C8C;
  --accent:#E5484D;        /* red: heart + progress */
  --accent-ink:#C9383D;
  --ok:#2E8B57;
  --shadow-dark:rgba(160,180,200,.55);
  --shadow-light:rgba(255,255,255,.95);
  --radius:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Vazirmatn",Tahoma,sans-serif;
  background:var(--bg);color:var(--ink);
  min-height:100vh;line-height:1.8;
}
[dir="rtl"] .flip{transform:scaleX(-1)}

/* ---------- neumorphic primitives ---------- */
.neu{
  background:var(--bg);border-radius:var(--radius);
  box-shadow:8px 8px 18px var(--shadow-dark),-8px -8px 18px var(--shadow-light);
}
.neu-in{
  background:var(--bg);border-radius:var(--radius);
  box-shadow:inset 6px 6px 12px var(--shadow-dark),inset -6px -6px 12px var(--shadow-light);
}
.nbtn{
  background:var(--bg);border:none;cursor:pointer;color:var(--ink);
  border-radius:50%;width:52px;height:52px;font-size:20px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:6px 6px 12px var(--shadow-dark),-6px -6px 12px var(--shadow-light);
  transition:box-shadow .15s,transform .15s;font-family:inherit;
}
.nbtn:hover{transform:translateY(-1px)}
.nbtn:active,.nbtn.active{
  box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light);
  color:var(--accent);
}
.nbtn.small{width:42px;height:42px;font-size:16px}
.nbtn:focus-visible,.nbtn-primary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.nbtn-primary{
  border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;
  padding:12px 26px;border-radius:999px;color:var(--accent-ink);background:var(--bg);
  box-shadow:6px 6px 12px var(--shadow-dark),-6px -6px 12px var(--shadow-light);
}
.nbtn-primary:active{box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light)}
.nbtn-primary.solid{background:var(--accent);color:#fff;box-shadow:6px 6px 14px rgba(229,72,77,.35)}
input,select,textarea{
  font-family:inherit;font-size:15px;color:var(--ink);border:none;
  background:var(--bg);padding:12px 18px;border-radius:999px;width:100%;
  box-shadow:inset 5px 5px 10px var(--shadow-dark),inset -5px -5px 10px var(--shadow-light);
}
textarea{border-radius:18px;resize:vertical}
label.fld{display:block;margin-bottom:14px;font-size:13px;color:var(--muted)}
label.fld input,label.fld select{margin-top:6px}

/* ---------- layout ---------- */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;
  padding:14px 22px;background:var(--bg);
  box-shadow:0 6px 14px var(--shadow-dark);
}
.brand{font-weight:800;font-size:22px;letter-spacing:.5px;color:var(--ink)}
.brand b{color:var(--accent)}
.topbar nav{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.topnav{
  text-decoration:none;color:var(--muted);font-size:14px;padding:8px 16px;
  border-radius:999px;box-shadow:4px 4px 10px var(--shadow-dark),-4px -4px 10px var(--shadow-light);
}
.topnav.active{color:var(--accent-ink);
  box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light)}
.me-chip{display:flex;align-items:center;gap:10px;font-size:13px}
.me-chip .avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;
  box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light)}
main{max-width:1100px;margin:0 auto;padding:28px 22px 140px}
h2.sec{font-size:20px;margin:34px 0 16px}
h2.sec:first-child{margin-top:0}
.sub{color:var(--muted);font-size:14px}
.card{padding:22px}
.grid{display:grid;gap:20px}
.grid.c2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spread{justify-content:space-between}
.muted{color:var(--muted);font-size:13px}
.err{color:var(--accent-ink);font-size:14px;margin-top:10px}
.ok-msg{color:var(--ok);font-size:14px;margin-top:10px}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{font-size:12px;color:var(--muted);text-align:start;padding:8px 10px;border-bottom:1px solid var(--bg-deep)}
table.tbl td{padding:10px;border-bottom:1px solid var(--bg-deep)}
.num{font-variant-numeric:tabular-nums}
.tag{font-size:12px;padding:3px 12px;border-radius:999px;display:inline-block;
  box-shadow:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light)}
.tag.red{color:var(--accent-ink)} .tag.green{color:var(--ok)}

/* ---------- explore ---------- */
.ranking{display:flex;gap:22px;overflow-x:auto;padding:10px 4px 18px}
.rank{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:86px;cursor:pointer}
.rank .avatar{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;color:var(--muted);
  box-shadow:7px 7px 14px var(--shadow-dark),-7px -7px 14px var(--shadow-light)}
.rank .avatar.filled{background:linear-gradient(135deg,#22303C,#3C5065);color:#fff}
.rank span{font-size:12px;color:var(--muted);text-align:center}
.tracklist{display:flex;flex-direction:column;gap:14px}
.trackrow{display:flex;align-items:center;gap:14px;padding:12px 18px;cursor:pointer}
.trackrow .cov{width:52px;height:52px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light)}
.trackrow .meta{flex:1;min-width:0}
.trackrow .meta b{font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trackrow .meta span{font-size:12px;color:var(--muted)}
.playlists{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px}
.plcard{padding:18px;text-align:center;cursor:pointer}
.plcard .cov{height:110px;border-radius:20px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:34px;
  box-shadow:inset 5px 5px 12px var(--shadow-dark),inset -5px -5px 12px var(--shadow-light)}
.plcard b{font-size:14px}
.price-chip{font-size:12px;color:var(--accent-ink)}

/* ---------- player bar ---------- */
.player{
  position:fixed;bottom:0;inset-inline:0;z-index:30;background:var(--bg);
  box-shadow:0 -8px 20px var(--shadow-dark);
  padding:12px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.player .disc{width:54px;height:54px;border-radius:50%;position:relative;flex-shrink:0;
  background:repeating-radial-gradient(circle at 50% 50%,#2A3642 0 3px,#1C2631 3px 6px);
  box-shadow:5px 5px 10px var(--shadow-dark),-5px -5px 10px var(--shadow-light)}
.player .disc::after{content:"";position:absolute;inset:38%;border-radius:50%;background:var(--accent)}
.player.playing .disc{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.player .now{flex:1;min-width:160px}
.player .now b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .now span{font-size:12px;color:var(--muted)}
.pbar{height:8px;border-radius:999px;box-shadow:inset 3px 3px 6px var(--shadow-dark),inset -3px -3px 6px var(--shadow-light);
  overflow:hidden;flex:2 1 260px;cursor:pointer;min-width:180px}
.pbar>div{height:100%;background:var(--accent);width:0%;border-radius:999px}
.player .time{font-size:12px;color:var(--muted);min-width:44px;text-align:center}
.player .heart.active{color:var(--accent)}

/* ---------- fullpage player (from mockup) ---------- */
.pstage{position:fixed;inset:0;z-index:40;background:var(--bg);display:none;padding:26px;overflow:auto}
.pstage.open{display:block}
.pstage .wrap{max-width:920px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;min-height:calc(100vh - 60px)}
.pstage h1{font-size:26px;margin-bottom:4px}
.pstage .artist{color:var(--muted);font-size:15px}
.lyrics{margin-top:26px;padding:20px 24px;font-size:15px;color:var(--muted);max-width:420px}
.vinyl{width:min(380px,80vw);aspect-ratio:1;border-radius:50%;position:relative;margin-inline:auto;
  background:repeating-radial-gradient(circle at 50% 50%,#2A3642 0 5px,#1C2631 5px 10px);
  box-shadow:14px 14px 30px var(--shadow-dark),-14px -14px 30px var(--shadow-light);
  display:flex;align-items:center;justify-content:center}
.vinyl .label{width:34%;aspect-ratio:1;border-radius:50%;background:var(--bg);
  box-shadow:inset 4px 4px 10px var(--shadow-dark),inset -4px -4px 10px var(--shadow-light);
  display:flex;align-items:center;justify-content:center;font-size:38px;color:var(--accent)}
.pstage.playing .vinyl{animation:spin 8s linear infinite}
.vring{position:absolute;inset:8px;border-radius:50%;border:3px solid transparent;
  background:conic-gradient(var(--accent) var(--p,0%),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
.vside{display:flex;flex-direction:column;gap:18px}
.vcontrols{display:flex;flex-direction:column;gap:14px;align-items:center;margin:8px auto;width:fit-content;
  padding:18px 22px;border-radius:34px}
.vcontrols .big{width:66px;height:66px;font-size:26px}
.pclose{position:absolute;top:22px;inset-inline-start:22px}
.buybox{padding:16px 20px;border-radius:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:50;background:rgba(20,30,40,.35);display:none;
  align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal .box{background:var(--bg);border-radius:28px;padding:28px;max-width:440px;width:100%;
  box-shadow:14px 14px 34px rgba(90,110,130,.5);max-height:90vh;overflow:auto}
.modal h3{margin-bottom:16px;font-size:18px}

/* ---------- panels ---------- */
.stat{padding:18px 22px}
.stat .v{font-size:24px;font-weight:800}
.stat .l{font-size:12px;color:var(--muted)}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--bg-deep);font-size:14px}
.kv:last-child{border:none}
.tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.tab{padding:9px 20px;border-radius:999px;cursor:pointer;font-size:14px;color:var(--muted);
  box-shadow:5px 5px 10px var(--shadow-dark),-5px -5px 10px var(--shadow-light);border:none;background:var(--bg);font-family:inherit}
.tab.active{color:var(--accent-ink);box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light)}

/* ---------- auth ---------- */
.authwrap{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;padding:30px 16px}
.authbox{width:100%;max-width:400px;padding:34px}
.authbox h2{text-align:center;margin-bottom:24px}
.authbox .nbtn-primary{width:100%;margin-top:8px}
.hint{font-size:12px;color:var(--muted);text-align:center;margin-top:18px;line-height:2}

/* دکمه همبرگری — فقط موبایل */
.burger{display:none;width:44px;height:44px;border-radius:14px;font-size:20px;line-height:1;order:2;margin-inline-start:auto}
.player.playing #btnPlay,.pstage.playing #stagePlay{color:var(--accent)}

@media (max-width:820px){
  .pstage .wrap{grid-template-columns:1fr;gap:24px;padding-top:60px}
  main{padding:20px 14px 190px}
  .topbar{flex-wrap:nowrap;padding:10px 14px;gap:10px}
  .brand{font-size:19px}
  .burger{display:flex;align-items:center;justify-content:center}
  /* منوی همبرگری: درایور کشویی از سمت راست */
  .topbar nav{
    position:fixed;inset:0 0 0 auto;width:min(78vw,320px);z-index:60;
    flex-direction:column;gap:4px;margin:0;padding:78px 18px 24px;
    background:var(--bg);box-shadow:-14px 0 34px var(--shadow-dark);
    transform:translateX(105%);transition:transform .3s ease;overflow-y:auto;
  }
  .topbar nav.open{transform:translateX(0)}
  .topnav{
    display:block;padding:14px 18px;border-radius:16px;font-size:16px;
    box-shadow:5px 5px 12px var(--shadow-dark),-5px -5px 12px var(--shadow-light);
  }
  .topnav.active{color:var(--accent-ink);
    box-shadow:inset 4px 4px 8px var(--shadow-dark),inset -4px -4px 8px var(--shadow-light)}
  .me-chip{margin-inline-start:0}
  .me-chip > div{display:none}   /* در موبایل فقط آواتار + دکمه‌ها */
  .nav-mask{position:fixed;inset:0;z-index:15;background:rgba(20,30,40,.25);opacity:0;pointer-events:none;transition:opacity .3s}
  .nav-mask.on{opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){
  .player.playing .disc,.pstage.playing .vinyl{animation:none}
  *{transition:none!important}
}

/* دکمه پخش بزرگ‌تر و متمایز */
#btnPlay{width:48px;height:48px;font-size:19px;color:var(--ink);flex:none}
#stagePlay{width:56px;height:56px;font-size:22px}
#btnPlay,#stagePlay{transition:box-shadow .2s,color .2s}
.player.playing #btnPlay,.pstage.playing #stagePlay{
  color:var(--accent);
  box-shadow:inset 4px 4px 9px var(--shadow-dark),inset -4px -4px 9px var(--shadow-light)}

/* lyrics karaoke */
.lyrics{min-height:120px;max-height:38vh;overflow-y:auto;line-height:2.4;font-size:16px}
.l-line{opacity:.45;transition:all .35s ease;font-weight:400}
.l-line.on{opacity:1;font-weight:800;font-size:18px;transform:scale(1.02)}