:root{
  --bg: var(--tg-theme-secondary-bg-color, #f0f2f5);
  --card: var(--tg-theme-bg-color, #fff);
  --text: var(--tg-theme-text-color, #1a1a1a);
  --hint: var(--tg-theme-hint-color, #8a8a8e);
  --accent: #1db954;
  --btn: var(--tg-theme-button-color, #1b3c2e);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --border: color-mix(in srgb, var(--hint) 20%, transparent);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.4 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif}
#app{max-width:640px;margin:0 auto;padding-bottom:130px}
header#topbar{padding:20px 18px 6px}
.me{display:flex;flex-direction:column}
#me-name{font-weight:800;font-size:20px}
.role{font-size:13px;color:var(--hint)}

nav#tabs{display:flex;gap:10px;padding:12px 16px}
nav#tabs button{flex:1;padding:12px;border:none;border-radius:14px;background:var(--card);
  color:var(--hint);font-weight:700;font-size:15px;cursor:pointer}
nav#tabs button.active{background:var(--btn);color:var(--btn-text)}

main{padding:0 12px}
.list{display:flex;flex-direction:column;gap:6px}
.empty{color:var(--hint);text-align:center;padding:32px 0;font-size:15px}

/* строка трека/сертификата — крупнее, с плейсхолдером-«обложкой» слева, как в Spotify/Я.Музыке */
.track-row{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:14px;
  padding:12px 14px;cursor:pointer}
.track-row.active{background:color-mix(in srgb, var(--accent) 14%, var(--card))}
.track-note{flex:none;width:48px;height:48px;border-radius:10px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--card)), color-mix(in srgb, var(--btn) 40%, var(--card)));
  display:flex;align-items:center;justify-content:center;font-size:22px}
.track-body{flex:1;min-width:0}
.track-title{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-sub{font-size:13px;color:var(--hint);margin-top:2px}
.track-row.active .track-sub{color:var(--accent);font-weight:600}

/* мини-плеер снизу — тап раскрывает полноэкранный */
#player-bar{position:fixed;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;
  background:var(--card);border-top:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));}
.pb-art{flex:none;width:44px;height:44px;border-radius:9px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--card)), color-mix(in srgb, var(--btn) 40%, var(--card)));
  display:flex;align-items:center;justify-content:center;font-size:20px}
.pb-info{flex:1;min-width:0}
#pb-title{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-sub{font-size:12px;color:var(--hint)}
#pb-toggle{flex:none;width:52px;height:52px;border-radius:50%;border:none;
  background:var(--accent);color:#fff;font-size:19px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}

/* полноэкранный «сейчас играет» — крупные элементы, три большие кнопки по центру */
.now-sheet{position:fixed;inset:0;background:var(--bg);z-index:40;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(16px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom))}
.now-sheet-head{width:100%;display:flex;justify-content:center;margin-bottom:24px}
#now-close{background:var(--card);border:none;border-radius:50%;width:44px;height:44px;
  font-size:22px;color:var(--text);cursor:pointer}
.now-art{width:min(72vw,320px);height:min(72vw,320px);border-radius:24px;margin:8px 0 28px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, var(--card)), color-mix(in srgb, var(--btn) 45%, var(--card)));
  display:flex;align-items:center;justify-content:center;font-size:88px;
  box-shadow:0 12px 40px rgba(0,0,0,.18)}
.now-title{font-size:24px;font-weight:800;text-align:center;padding:0 8px}
.now-sub{font-size:15px;color:var(--hint);margin-top:6px;text-align:center}
.now-controls{margin-top:auto;padding-top:40px;display:flex;align-items:center;justify-content:center;gap:28px}
.now-main-btn{width:76px;height:76px;border-radius:50%;border:none;background:var(--accent);
  color:#fff;font-size:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px color-mix(in srgb, var(--accent) 50%, transparent)}
.now-side-btn{width:52px;height:52px;border-radius:50%;border:none;background:var(--card);
  color:var(--hint);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.now-side-btn.on{color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, var(--card))}

/* вход вне Telegram */
.login{position:fixed;inset:0;background:var(--bg);z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
.login-box{max-width:360px;width:100%;background:var(--card);border-radius:18px;padding:28px 24px;text-align:center}
.login-title{font-size:22px;font-weight:800;margin-bottom:12px}
.login-box p{font-size:14px;color:var(--hint);line-height:1.5}
.login-box input{width:100%;padding:14px;font-size:18px;text-align:center;letter-spacing:.08em;
  border:1px solid var(--border);border-radius:12px;margin:12px 0;background:var(--bg);color:var(--text)}
.btn-primary{width:100%;padding:14px;border:none;border-radius:12px;background:var(--accent);
  color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.login-err{color:#d64545;font-size:13px;margin-top:10px}

#toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);
  background:#222;color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;z-index:50}