:root{
  /* Telegram сам прокидывает --tg-theme-*; берём их с фолбэком на тёмную тему. */
  --bg: var(--tg-theme-bg-color, #17161a);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #1f1e24);
  --text: var(--tg-theme-text-color, #f5f4f7);
  --hint: var(--tg-theme-hint-color, #9a97a5);
  --link: var(--tg-theme-link-color, #6ab3f3);
  --accent: #d1462f;          /* фирменный «эфирный» акцент Alem FM */
  --btn-text: #ffffff;
  --section-sep: color-mix(in srgb, var(--text) 12%, transparent);
  --radius: 16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{margin:0; height:100%;}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,'SF Pro Text',Roboto,system-ui,sans-serif;
  font-size:15px; line-height:1.4; overscroll-behavior:none;
}
#app{padding:12px 16px calc(80px + env(safe-area-inset-bottom)); max-width:520px; margin:0 auto;}
.screen{animation:fade .18s ease;}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
h1.h1{font-size:26px; font-weight:700; margin:8px 0 18px;}
.section-label{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--hint); font-weight:600; margin:22px 4px 10px;}

/* ЭФИР */
.cover-wrap{position:relative; margin-top:8px; aspect-ratio:1/1; border-radius:22px; overflow:hidden;}
.cover-bg{position:absolute; inset:-30px; background-size:cover; background-position:center; filter:blur(34px) saturate(1.3); opacity:.6; transform:scale(1.2);}
.cover{position:absolute; inset:0; background-size:cover; background-position:center; background-color:var(--secondary-bg); border-radius:22px;
  box-shadow:0 14px 40px rgba(0,0,0,.4);}
.cover:empty::after,.cover:not([style*="url"])::after{content:"♪"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:64px; color:var(--hint);}
.live-row{display:flex; align-items:center; justify-content:space-between; margin:18px 2px 0;}
.live{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--accent);}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.3}}
.station{font-size:13px; color:var(--hint);}
.np{margin:12px 2px 0;}
.np-title{font-size:22px; font-weight:700; line-height:1.2;}
.np-artist{font-size:15px; color:var(--hint); margin-top:3px;}
.controls{display:flex; align-items:center; justify-content:center; gap:34px; margin:26px 0 18px;}
.play-btn{width:72px; height:72px; border-radius:50%; border:none; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 22px rgba(209,70,47,.4); transition:transform .1s;}
.play-btn:active{transform:scale(.94);}
.play-btn svg{width:34px; height:34px; fill:#fff;}
.icon-btn{width:48px; height:48px; border-radius:50%; border:none; background:var(--secondary-bg); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .1s;}
.icon-btn:active{transform:scale(.92);}
.icon-btn svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8;}
.icon-btn.on .ic-heart{fill:var(--accent); stroke:var(--accent);}
.wish-cta{width:100%; margin-top:4px; padding:15px; border:none; border-radius:14px; background:var(--secondary-bg); color:var(--text); font-size:15px; font-weight:600; cursor:pointer;}
.wish-cta:active{opacity:.7;}

/* СПИСКИ */
.track-list,.wish-list{display:flex; flex-direction:column; gap:8px;}
.track{display:flex; align-items:center; gap:12px; padding:8px; background:var(--secondary-bg); border-radius:12px;}
.track-cov{width:46px; height:46px; border-radius:9px; background-size:cover; background-position:center; background-color:var(--bg); flex:none;}
.track-meta{min-width:0; flex:1;}
.track-t{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.track-a{font-size:13px; color:var(--hint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.track-del{border:none; background:none; color:var(--hint); font-size:20px; padding:8px; cursor:pointer;}
.empty{text-align:center; color:var(--hint); padding:34px 20px; background:var(--secondary-bg); border-radius:14px;}
.empty-ic{font-size:34px; margin-bottom:8px;}

/* ПРОФИЛЬ */
.profile-head{display:flex; align-items:center; gap:14px; margin:14px 4px 8px;}
.avatar{width:64px; height:64px; border-radius:50%; background:var(--secondary-bg) center/cover; flex:none; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; color:var(--hint);}
.profile-name{font-size:20px; font-weight:700;}
.profile-sub{font-size:14px; color:var(--hint);}
.wish-item{background:var(--secondary-bg); border-radius:12px; padding:12px 14px;}
.wish-text{font-size:14px;}
.wish-status{font-size:12px; font-weight:600; margin-top:6px; display:inline-flex; align-items:center; gap:6px;}
.st-approved{color:#3fae6a;} .st-rejected{color:#e0524a;} .st-pending{color:var(--hint);}
.wish-reason{font-size:12px; color:var(--hint); margin-top:2px;}

/* ТАББАР */
.tabbar{position:fixed; left:0; right:0; bottom:0; display:flex; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(12px); border-top:1px solid var(--section-sep); padding-bottom:env(safe-area-inset-bottom); z-index:20;}
.tab{flex:1; border:none; background:none; color:var(--hint); display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 0 7px; font-size:11px; cursor:pointer;}
.tab svg{width:24px; height:24px;}
.tab.active{color:var(--accent);}

/* ШТОРКА */
.sheet-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:flex-end; z-index:40; animation:fade .2s;}
.sheet{width:100%; max-width:520px; margin:0 auto; background:var(--bg); border-radius:20px 20px 0 0; padding:10px 18px calc(20px + env(safe-area-inset-bottom)); animation:slideup .25s ease;}
@keyframes slideup{from{transform:translateY(100%)} to{transform:none}}
.sheet-grabber{width:38px; height:4px; border-radius:2px; background:var(--hint); opacity:.5; margin:2px auto 12px;}
.sheet-title{font-size:18px; font-weight:700;}
.sheet-sub{font-size:13px; color:var(--hint); margin:4px 0 12px;}
textarea{width:100%; background:var(--secondary-bg); color:var(--text); border:none; border-radius:12px; padding:12px; font:inherit; resize:none; outline:none;}
.sheet-row{display:flex; align-items:center; justify-content:space-between; margin:10px 2px 14px;}
.counter{font-size:12px; color:var(--hint);}
.btn-ghost{border:none; background:none; color:var(--link); font-size:15px; cursor:pointer;}
.btn-primary{width:100%; padding:15px; border:none; border-radius:14px; background:var(--accent); color:#fff; font-size:16px; font-weight:600; cursor:pointer;}
.btn-primary:disabled{opacity:.5;}
.wish-result{margin-top:12px; padding:12px 14px; border-radius:12px; font-size:14px; text-align:center;}
.wish-result.ok{background:color-mix(in srgb,#3fae6a 18%,transparent); color:#3fae6a;}
.wish-result.no{background:color-mix(in srgb,#e0524a 18%,transparent); color:#e0524a;}

/* ТОСТ */
.toast{position:fixed; left:50%; bottom:96px; transform:translateX(-50%); background:#000c; color:#fff; padding:10px 18px; border-radius:20px; font-size:14px; z-index:60; animation:fade .2s;}