@font-face{font-family:'Lalezar';src:url('../font/Lalezar.woff2') format('woff2');font-weight:99 990;font-display:swap}
:root{
--bg0:#0a2547;--bg1:#1c86f2;--bg2:#0f66cc;--bg3:#0b4fa3;--deep:#083a80;
--p1:#1876d6;--p2:#0e56a8;--line:rgba(255,255,255,.35);--sh:rgba(6,32,68,.35);
--y:#ffb700;--ys:#a86e00;--g:#5cc400;--gs:#327200;
--p:#ff2a8d;--ps:#9e0d52;--cy:#7dd3fc;
--txt:#fff;--mut:#c2dcff;--r:20px;--nav-h:100px;--ok:#22c55e;--bad:#ff4d4f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--bg0);color:var(--txt);font-family:'Lalezar',Tahoma,IRANSans,'Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.9;font-weight:700}
::selection{background:var(--y);color:#000}
a{color:var(--cy);text-decoration:none}
h1,h2,h3{margin:10px 0 8px;line-height:1.6}
h2{font-size:17px;color:var(--y)}
h3{font-size:15px;color:#fff}
[hidden]{display:none!important}
#app{max-width:480px;margin:0 auto;min-height:100dvh;padding-bottom:calc(var(--nav-h) + 18px);background:linear-gradient(180deg,#1c86f2 0%,#0f66cc 62%,#0b4fa3 100%)}
#app.bare{min-height:100dvh;padding-bottom:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:#1474dd;border-bottom:1px solid rgba(255,255,255,.25)}
.topbar.hidden{display:none!important}
body[data-page="perform"] .topbar,body[data-page="result"] .topbar,body[data-page="academy_practice"] .topbar,body[data-page="academy_component_practice"] .topbar,body[data-page="song"] .topbar{display:none!important}
.back-topbar{position:sticky;top:12px;z-index:15;display:flex;align-items:center;justify-content:flex-end;padding:0;margin:0 0 12px;background:transparent;border:none;pointer-events:none}
.back-topbar .back-btn{pointer-events:auto}
.btn-comp{background:linear-gradient(135deg,#f59e0b,#d97706)!important;color:#fff!important;font-weight:900}
.notif-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.3);color:#fff;text-decoration:none}
.notif-count{position:absolute;top:-7px;left:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#f5222d;color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid #fff;line-height:1}
.back-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;font-size:13px;font-weight:900;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(6,30,64,.35);color:#fff;cursor:pointer;text-decoration:none}
.back-btn:active{transform:translateY(2px)}
.user-box{display:flex;align-items:center;gap:10px;min-width:0}
.level-badge{min-width:46px;height:46px;padding:0 6px;background:linear-gradient(180deg,#ffd21f 0%,#ff9d00 100%);border-radius:16px;transform:rotate(-6deg);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;color:#4a2c00;box-shadow:0 3px 0 #8a5a00}
.user-meta{min-width:0}
.user-name{font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.xp-bar{width:84px;height:10px;background:rgba(0,0,0,.45);border-radius:10px;overflow:hidden;margin-top:3px;border:1px solid rgba(255,255,255,.3)}
.xp-bar>div{height:100%;background:linear-gradient(90deg,var(--cy),#7df9ff);border-radius:10px}
.top-actions{display:flex;align-items:center;gap:8px}
.credit-pill{background:rgba(0,0,0,.3);border:2px solid #597ef7;border-radius:20px;padding:4px 12px 4px 6px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:900;color:#fff;box-shadow:inset 0 2px 5px rgba(0,0,0,.5)}
.credit-pill small{color:var(--mut);font-weight:700}
.page{padding:14px 14px 0}
.page.nonav{padding-bottom:60px}
#shell section.shell-page{display:block}
#dynamic{display:block}
.bottomnav{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:min(calc(100% - 24px),462px);height:84px;background:#0f66cc;border:1px solid rgba(255,255,255,.3);border-radius:26px;display:flex;justify-content:space-around;align-items:center;z-index:100;box-shadow:0 4px 12px rgba(6,32,68,.4);padding:4px 6px}
.bottomnav a{color:#d6e9ff;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:3px;width:66px;background:none;border:none;cursor:pointer}
.bottomnav a i{font-style:normal;width:48px;height:48px;background:#fff;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#0d3a63;transition:transform .15s;box-shadow:0 3px 0 rgba(6,30,64,.35)}
.bottomnav a span{font-size:12px;font-weight:900;color:#d6e9ff}
.bottomnav a.on i{background:var(--y);color:#4a2c00;transform:translateY(-9px);box-shadow:0 5px 0 rgba(6,30,64,.45)}
.bottomnav a.on span{color:var(--y)}
.bottomnav a.fab i{width:60px;height:60px;border-radius:50%;font-size:24px;background:#ff4d4f;color:#fff;transform:translateY(0)}
.bottomnav a.fab.on i{background:#f5222d;transform:translateY(-4px)}
.card{background:linear-gradient(180deg,#1f83e2 0%,#0f5fb8 100%);border:1px solid rgba(255,255,255,.28);border-radius:20px;padding:16px;margin-bottom:16px}
body[data-page="result"] .card{background:linear-gradient(135deg,#002c8c 0%,#0d6efd 100%);border-color:rgba(125,211,252,.45)}
.note{background:rgba(0,0,0,.3);border:2px solid var(--p);border-radius:16px;padding:12px;font-size:13.5px;margin-bottom:12px}
.row{display:flex;gap:10px;align-items:center}
.grow{flex:1;min-width:0}
.small{font-size:12.5px}
.muted{color:var(--mut)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:18px;font-weight:900;font-family:inherit;cursor:pointer;text-decoration:none;color:#4a2c00;background:linear-gradient(180deg,#ffd21f 0%,var(--y) 100%);box-shadow:0 4px 0 #8a5a00,inset 0 2px 0 rgba(255,255,255,.5);padding:12px 22px;font-size:16px;min-height:54px;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a5a00}
.btn.small{min-height:44px;padding:8px 16px;font-size:13px;border-radius:14px}
.btn.block{width:100%}
.btn.big{min-height:62px;font-size:18px;border-radius:20px}
.btn.ghost{background:linear-gradient(180deg,#2d98ff 0%,#0f6fe0 100%);color:#fff;box-shadow:0 4px 0 #0a3f83,inset 0 2px 0 rgba(255,255,255,.45)}
.btn.ghost:active{box-shadow:0 1px 0 #0a3f83}
.btn.ok{background:linear-gradient(180deg,#71d600 0%,#4da300 100%);color:#fff;text-shadow:0 1px 2px rgba(20,60,0,.5);box-shadow:0 4px 0 #2c5f00,inset 0 2px 0 rgba(255,255,255,.45)}
.btn.ok:active{box-shadow:0 1px 0 #2c5f00}
.btn:disabled{opacity:.55;filter:grayscale(.4)}
input,select,textarea{width:100%;background:rgba(6,30,64,.35);border:1px solid rgba(255,255,255,.3);border-radius:14px;color:#fff;padding:12px 14px;font-size:15px;font-family:inherit;font-weight:700}
input::placeholder,textarea::placeholder{color:#9dbfe9;font-weight:700}
input:focus,select:focus,textarea:focus{outline:none;border-color:#fff}
select option{color:#000}
label{display:block;font-size:13.5px;font-weight:900;margin:10px 0 4px;color:#fff}
.top-nav-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;width:100%}
.top-nav-tab{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:10px 12px;border-radius:16px;font-size:15px;font-weight:900;text-decoration:none;border:1px solid rgba(255,255,255,.25);background:rgba(6,30,64,.28);color:#fff;transition:transform .08s,box-shadow .08s}
.top-nav-tab:active{transform:translateY(2px)}
.top-nav-tab.on{background:linear-gradient(180deg,#ffd21f 0%,var(--y) 100%);color:#4a2c00;border:0;box-shadow:0 4px 0 #8a5a00}
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:18px 0 10px}
.page-link{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:42px;padding:0 10px;border-radius:12px;font-size:13px;font-weight:900;text-decoration:none;border:1px solid rgba(255,255,255,.25);background:rgba(6,30,64,.28);color:#fff;transition:all .1s}
.page-link:active{transform:translateY(2px)}
.page-link.on{background:var(--y);color:#4a2c00;border:0;box-shadow:0 3px 0 #8a5a00}
.page-link.dots{border:none;background:none;box-shadow:none;min-width:20px;color:var(--mut)}
.page-link.prev,.page-link.next{font-size:12px;padding:0 12px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:rgba(6,30,64,.28);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:14px;padding:7px 14px;font-size:12.5px;font-weight:900}
.chip.on{background:var(--y);color:#4a2c00;border:0}
.badge{display:inline-block;border-radius:10px;padding:2px 12px;font-size:11.5px;font-weight:900}
.badge.free{background:#4da300;color:#fff}
.badge.pay{background:var(--y);color:#4a2c00}
.badge.diff-easy{background:#20ce66;color:#fff}
.badge.diff-medium{background:#1890ff;color:#fff}
.badge.diff-hard{background:#ff7a00;color:#fff}
.badge.diff-extreme{background:#ff2a8d;color:#fff}
.song-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(180deg,#3aa5ff 0%,#0d5ec9 100%);border:1px solid rgba(255,255,255,.45);border-radius:18px;padding:10px 12px;margin-bottom:12px;color:#fff}
.song-row .grow a{color:#fff}
.song-info-box{display:flex;align-items:center;gap:12px;min-width:0}
.song-info-box img{width:52px;height:52px;border-radius:14px;object-fit:cover;flex:none;background:linear-gradient(135deg,#a855f7 0%,#ec4899 100%)}
.song-row .t{font-size:14px;font-weight:900}
.chest-scroll{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
.chest-scroll::-webkit-scrollbar{display:none}
.song-chest{min-width:138px;width:138px;background:linear-gradient(180deg,#3aa5ff 0%,#0d5ec9 100%);border:1px solid rgba(255,255,255,.45);border-radius:18px;padding:10px;text-align:center;color:#fff;flex:none}
.song-chest img{width:100%;height:108px;border-radius:14px;object-fit:cover;background:linear-gradient(135deg,#a855f7 0%,#ec4899 100%)}
.song-chest .t{font-size:13px;font-weight:900;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-chest .a{font-size:10.5px;color:var(--mut)}
.event-banner{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.3);border-radius:22px;padding:22px 16px;margin-bottom:18px;text-align:center;background:linear-gradient(135deg,#1c86f2 0%,#7a3cff 100%)}
.event-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.event-banner .in{position:relative}
.event-tag{background:var(--y);color:#4a2c00;font-size:11px;font-weight:900;padding:4px 14px;border-radius:10px;display:inline-block;margin-bottom:8px}
.trophy-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(180deg,#3aa5ff 0%,#0d5ec9 100%);border:1px solid rgba(255,255,255,.45);border-radius:18px;padding:12px 14px;margin-bottom:12px}
.rank-shield{min-width:38px;height:38px;background:var(--y);color:#4a2c00;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;flex:none}
.rank-shield.silver{background:#e6f7ff}
.score-num{color:var(--y);font-weight:900;white-space:nowrap}
.rec-box-left{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.rec-header-row{display:flex;align-items:center;gap:6px}
.badge.step-badge{background:rgba(0,0,0,.35);border-color:var(--cy);color:#fff;font-size:11px;padding:2px 8px}
.rec-actions-row{display:flex;align-items:center;gap:5px}
.rec-stat-view{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:#fff;font-weight:900}
.rec-action-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:6px 13px;font-size:12.5px;font-weight:900;border-radius:99px;gap:4px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.2);color:#fff;cursor:pointer;text-decoration:none}
.rec-action-btn:active{transform:translateY(2px)}
.rec-action-btn.playbtn{background:#fff;color:#0d5ec9}
.rec-action-btn.playbtn.playing{background:#e11d2e!important;color:#fff!important}
.rec-action-btn.liked{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);color:#fff}
.svg-3d{width:14px;height:14px;display:inline-block;vertical-align:middle;fill:#fff;stroke:none;filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.45))}
.svg-heart.filled{fill:#ff3366!important;filter:drop-shadow(0 2px 3px rgba(255,42,100,.6))}
.svg-heart.outline{fill:none!important;stroke:#fff!important;filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.4))}
.svg-eye{fill:#fff!important}
.svg-flag{fill:#ff3344!important}
.avz-modal-backdrop{position:fixed;inset:0;background:rgba(4,20,45,.7);z-index:900;display:flex;align-items:center;justify-content:center;padding:16px}
.avz-modal{width:min(100%,380px);max-height:calc(100dvh - 24px);background:#fff;border:0;border-radius:24px;padding:0;box-shadow:0 8px 20px rgba(4,20,45,.4);color:#173a5e;overflow-y:auto}
.avz-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;margin-bottom:0;background:linear-gradient(180deg,#2d98ff 0%,#1474dd 100%);color:#fff;border-bottom:3px solid #0d55a5}
.avz-modal-head h3{margin:0;font-size:19px;color:#fffefe;display:flex;align-items:center;gap:6px;text-shadow:0 2px 0 rgba(8,40,85,.55)}
.avz-modal-close{width:34px;height:34px;border-radius:50%;border:0;background:#f5222d;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;box-shadow:0 3px 0 #8c0e16}
.avz-modal-opts{display:flex;flex-direction:column;gap:8px;margin:14px 20px 16px}
.avz-modal-opt{display:flex;align-items:center;gap:8px;background:#eef4ff;border:1px solid #c9dcff;border-radius:14px;padding:10px 12px;cursor:pointer;font-size:13.5px;font-weight:700;color:#153b66}
.avz-modal-opt input{width:auto;margin:0}
.avz-modal-foot{display:flex;gap:10px;padding:0 20px 20px}
.avz-modal>p,.avz-modal>div:not(.avz-modal-head):not(.avz-modal-foot):not(.avz-modal-opts){margin-inline:20px}
.avz-modal .avz-modal-foot{margin-inline:0}
.avz-modal p.muted{color:#5b7ea6}
.avz-modal textarea,.avz-modal input{background:#f1f7ff;border-color:#c9e2ff;color:#153b66;box-shadow:inset 0 2px 5px rgba(21,59,102,.12)}
.avz-modal textarea::placeholder{color:#8aa9c9}
#bazaarPayModalCard .spinner{border-color:#d3e6ff;border-top-color:#1e88e5}
.game-search{background:rgba(6,30,64,.3);border:1px solid rgba(255,255,255,.25);border-radius:18px;padding:10px 16px;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.game-search input{border:none;background:transparent;box-shadow:none;padding:4px 0}
.game-search input:focus{box-shadow:none}
.game-search .sic{color:var(--cy);font-size:17px}
.stars{color:var(--y);font-size:26px;letter-spacing:2px;text-align:center;text-shadow:0 2px 0 var(--ys),0 4px 10px rgba(0,0,0,.4)}
.score-bars{display:flex;flex-direction:column;gap:8px}
.score-bars .r{display:grid;grid-template-columns:86px 1fr 46px;gap:8px;align-items:center;font-size:13px}
.score-bars.small .r{grid-template-columns:76px 1fr 40px;font-size:12px}
.meter{height:10px;border-radius:99px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);overflow:hidden}
.meter>div{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cy),#52c41a);transition:width .15s}
canvas.timeline{width:100%;height:190px;background:rgba(0,12,35,.62);border:2px solid var(--line);border-radius:14px}
.tl-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin-top:6px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.score-live{font-size:32px;font-weight:900;text-align:center;color:var(--y);text-shadow:0 2px 0 var(--ys)}
.playbtn.playing{background:#e11d2e!important;color:#fff!important}
#toast{position:fixed;bottom:calc(var(--nav-h) + 12px);left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:92vw}
#toast div{background:rgba(0,20,50,.94);border:2px solid var(--line);padding:10px 18px;border-radius:14px;font-size:14px;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.rec{display:none;align-items:center;gap:6px;font-size:13px;font-weight:900;color:#ff6b81}
.rec.on{display:inline-flex}
.rec i{width:12px;height:12px;border-radius:50%;background:#ff2a4d;display:inline-block;animation:pulse 1s infinite;box-shadow:0 0 8px rgba(255,42,77,.8)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.prog{height:10px;border-radius:99px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);overflow:hidden;margin:6px 0}
.prog>div{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#34d399,var(--cy));transition:width .25s}
.elapsed{font-variant-numeric:tabular-nums;font-weight:900}
.spinner{width:54px;height:54px;margin:6px auto;border-radius:50%;border:5px solid rgba(255,255,255,.2);border-top-color:var(--cy);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage{display:flex;flex-direction:column;gap:12px}
.arena{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:24px;padding:22px 16px;text-align:center}
.mic-stage{width:110px;height:110px;background:linear-gradient(180deg,#ff4d8d 0%,#c2145b 100%);border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:46px;box-shadow:0 8px 20px rgba(120,10,60,.4)}
@keyframes micpulse{from{transform:scale(1)}to{transform:scale(1.08)}}
.lyric3{text-align:center;padding:8px 0;min-height:124px;display:flex;flex-direction:column;gap:2px;justify-content:center}
.lyric3 .lp,.lyric3 .ln{color:var(--mut);opacity:.75;font-size:15px;min-height:22px}
.lyric3 .lc{font-size:24px;font-weight:900;min-height:34px;color:var(--y);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.lyric3.swap .lc{animation:lyrIn .3s ease}
@keyframes lyrIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#finalRow{display:flex;gap:8px;align-items:stretch}
#finalRow .btn{white-space:nowrap;padding:12px 10px;font-size:14px;min-height:52px}
#finalRow #vis{max-width:118px;font-size:13px}
#finalRow .grow{flex:1}
.grid2 .btn{white-space:nowrap;font-size:13.5px}
.upnotif{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:300;width:min(480px,92vw);display:flex;gap:10px;align-items:center;background:rgba(0,25,60,.96);border:2px solid var(--line);border-radius:16px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5);color:#fff}
.upbar{height:8px;border-radius:99px;background:rgba(0,0,0,.45);overflow:hidden;margin-top:6px}
.upbar>div{height:100%;width:0;background:linear-gradient(90deg,#34d399,var(--cy));transition:width .2s}
.uppct{font-weight:900;white-space:nowrap}
.sticky-cta{position:sticky;bottom:14px;z-index:15;margin-top:10px}
[data-offline-btn]{margin-bottom:16px}
code{color:var(--y);font-size:12.5px}
.auth-wrap{position:relative;min-height:96dvh;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:30px 18px 40px;margin:0;border-radius:0;overflow:hidden}
.auth-stars span{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;opacity:.8;animation:tw 2.6s ease-in-out infinite}
.auth-stars span:nth-child(1){width:6px;height:6px;top:12%;right:16%}
.auth-stars span:nth-child(2){width:4px;height:4px;top:26%;right:78%;animation-delay:.7s}
.auth-stars span:nth-child(3){width:5px;height:5px;top:58%;right:10%;animation-delay:1.2s}
.auth-stars span:nth-child(4){width:4px;height:4px;top:74%;right:66%;animation-delay:1.8s}
.auth-stars span:nth-child(5){width:6px;height:6px;top:40%;right:44%;animation-delay:2.2s}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:.95;transform:scale(1.15)}}
.astep.on{animation:astepIn .38s cubic-bezier(.2,.9,.3,1.15)}
@keyframes astepIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.auth-logo{font-size:80px;text-align:center;line-height:1;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4));animation:float 3s ease-in-out infinite}
.auth-logo.small{font-size:60px}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.auth-title{text-align:center;font-size:46px;font-weight:900;margin:2px 0;color:#fff;text-shadow:0 4px 0 var(--sh),0 8px 20px rgba(0,0,0,.4)}
.auth-title.small{font-size:30px}
.auth-h{text-align:center;font-size:23px;font-weight:900;margin:4px 0;color:var(--y)}
.auth-sub{text-align:center;color:var(--mut);margin:0 0 12px}
.auth-sub.small{font-size:13px}
.choice-col{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.choice-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:88px;line-height:1.7;font-family:inherit;font-size:15px;cursor:pointer;text-align:right;border-radius:18px;padding:16px;color:#4a2c00;background:linear-gradient(180deg,#ffd21f 0%,var(--y) 100%);border:0;box-shadow:0 4px 0 #8a5a00}
.choice-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a5a00}
.choice-btn.in{background:linear-gradient(180deg,#71d600 0%,#4da300 100%);color:#fff;box-shadow:0 4px 0 #2c5f00}
.cb-emoji{font-size:36px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.2))}
.cb-emoji svg{width:38px;height:38px;display:block}
.cb-t{display:block;font-size:19px;font-weight:900}
.cb-s{display:block;font-size:12px;opacity:.8}
.dots{display:flex;gap:8px;justify-content:center;margin:2px 0 12px}
.dots span{width:26px;height:8px;border-radius:99px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.3);transition:background .3s,width .3s}
.dots span.on{background:linear-gradient(90deg,#ffec3d,var(--y));width:40px;box-shadow:0 0 10px rgba(255,204,0,.6)}
.dots span.done{background:var(--g)}
.ferr{background:rgba(120,0,20,.5);border:2px solid #ff6b81;color:#ffd7dd;border-radius:12px;padding:8px 12px;font-size:13.5px}
.ferr.on{animation:shk .35s}
@keyframes shk{0%,100%{transform:none}25%{transform:translateX(6px)}50%{transform:translateX(-6px)}75%{transform:translateX(3px)}}
.pw-meter{height:12px;border-radius:99px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);overflow:hidden;margin-top:10px}
#pwFill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#ef4444,#f59e0b);transition:width .3s ease}
#pwFill.m{background:linear-gradient(90deg,#f59e0b,#eab308)}
#pwFill.s{background:linear-gradient(90deg,#10b981,var(--cy));box-shadow:0 0 12px rgba(16,185,129,.7)}
#pwFill.w{background:linear-gradient(90deg,#ef4444,#f87171);box-shadow:0 0 12px rgba(239,68,68,.7)}
.pw-msg{font-size:13px;color:var(--mut);margin-top:6px;min-height:24px}
.auth-trophy{font-size:84px;text-align:center;line-height:1.2;animation:trophy .7s cubic-bezier(.2,.9,.3,1.4)}
@keyframes trophy{0%{opacity:0;transform:scale(.3) rotate(-14deg)}60%{opacity:1;transform:scale(1.15) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.tab-enter{animation:popIn .22s cubic-bezier(.175,.885,.32,1.275)}
@keyframes popIn{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}
@media(min-width:560px){body{font-size:15.5px}}
@media(prefers-reduced-motion:reduce){.astep.on,.tab-enter,.auth-logo,.auth-stars span,.auth-trophy,.mic-stage,.rec i,.spinner{animation:none}}

/* Coin Store Package Cards */
.coin-pkg-grid,.capacity-pkg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;box-sizing:border-box}
.coin-pkg-card,.capacity-pkg-card{box-sizing:border-box;width:100%;min-width:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:14px 10px;border:2px solid rgba(255,255,255,.18);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(0,0,0,.35) 100%);cursor:pointer;position:relative;overflow:hidden;transition:transform .12s ease,border-color .15s ease,box-shadow .15s ease}
.coin-pkg-card:active,.capacity-pkg-card:active{transform:scale(.97)}
.coin-pkg-img-wrap{width:56px;height:56px;border-radius:18px;background:rgba(255,204,0,.12);border:1.5px solid rgba(255,204,0,.3);display:flex;align-items:center;justify-content:center;margin-top:2px;margin-bottom:6px;flex-shrink:0}
.coin-pkg-img{width:42px;height:42px;object-fit:contain;display:block}
.coin-pkg-title,.capacity-pkg-title{font-weight:800;font-size:13.5px;color:#fff;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.coin-pkg-amount,.capacity-pkg-amount{font-size:20px;font-weight:900;color:var(--y);margin:2px 0 10px;line-height:1}
.coin-pkg-amount small{font-size:12px;color:rgba(255,255,255,.75);font-weight:700}
.coin-pkg-btn,.capacity-pkg-btn{width:100%;min-height:36px;padding:6px 8px;font-size:12.5px;border-radius:12px;font-weight:900;white-space:nowrap}

/* BazaarPay Modal & Backdrop */
#bazaarPayModalBackdrop{position:fixed;inset:0;background:rgba(4,20,45,.8);z-index:999999;display:none;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;direction:rtl}
#bazaarPayModalCard{width:min(100%,340px);background:#fff;border:0;border-radius:24px;padding:32px 20px;text-align:center;color:#173a5e;box-shadow:0 8px 20px rgba(4,20,45,.4);box-sizing:border-box}

/* ==== Avaze icon system (external sprite, no inline SVG in HTML) ==== */
/* Standard subtle depth: one soft shadow only (cheap to paint). */
.ic{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.24em;flex:none;fill:currentColor}
.ic-16{width:16px;height:16px}.ic-18{width:18px;height:18px}.ic-20{width:20px;height:20px}.ic-22{width:22px;height:22px}.ic-24{width:24px;height:24px}.ic-28{width:28px;height:28px}.ic-32{width:32px;height:32px}.ic-40{width:40px;height:40px}.ic-48{width:48px;height:48px}.ic-56{width:56px;height:56px}
/* Bottom nav: 3D full-color icons (explicit fills inside sprite, never black) */
.bottomnav a i .ic{width:30px;height:30px}
.bottomnav a.fab i .ic{width:35px;height:35px}
/* Tabs / inline rows */
.top-nav-tab .ic{width:20px;height:20px;vertical-align:-.28em}
.btn .ic{width:20px;height:20px}
h2 .ic,h3 .ic,h4 .ic{width:22px;height:22px}
.small .ic{width:16px;height:16px}
.credit-pill .ic{width:20px;height:20px}
.game-search .sic .ic{width:18px;height:18px}
/* Semantic colors (icons use currentColor) */
.ic-verified{color:#2ee56b}
.ic-star-fill{color:var(--y)}
.ic-star{color:#cfe6ff}
.ic-bell{color:#ffd84d}
.ic-heart{color:#e08cff}
.ic-fire{color:#fb923c}
.ic-warn{color:#fbbf24}
.ic-info{color:#7dd3fc}
.ic-x{color:#ff6b81}
/* Auth hero icons */
.auth-logo .ic{width:84px;height:84px}
.auth-logo.small .ic{width:64px;height:64px}
.auth-trophy .ic{width:88px;height:88px}
/* mic-stage: 3D mic from sprite, keep tile gradient */
.mic-stage{display:flex;align-items:center;justify-content:center}
.mic-stage .ic-mic3d{width:76px;height:76px;display:block;margin:0 auto;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
/* Star rating row built from SVG */
.stars-svg{display:flex;align-items:center;justify-content:center;gap:2px;margin:6px 0}
.stars-svg .ic{width:26px;height:26px}
@media(prefers-reduced-motion:reduce){.ic,.mic-stage .ic-mic3d{filter:none}}
@media(max-width:420px){.grid2{grid-template-columns:1fr}.grid2 .btn{white-space:normal}#finalRow{flex-wrap:wrap}#finalRow #vis{max-width:none;width:100%}}
body[data-page="support"] .topbar,body[data-page="support"] .bottomnav{display:none!important}
body[data-page="support"] #app{max-width:480px;width:100%;height:100dvh;min-height:100dvh;padding-bottom:0;overflow:hidden}
body[data-page="support"] .page{position:relative;width:100%;height:100dvh;padding:0;overflow:hidden}
.support-back-row{position:fixed;top:12px;left:50%;transform:translateX(-50%);width:min(calc(100% - 24px),456px);z-index:30;direction:ltr;display:flex;justify-content:flex-start;margin:0}
.support-chat-card{position:absolute;inset:0;display:flex;flex-direction:column;background:transparent;color:#fff;padding:64px 12px 100px}
.support-messages{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow:auto;padding:4px 4px 90px}
.support-message{max-width:84%;padding:10px 12px;border-radius:16px;line-height:1.7;overflow-wrap:anywhere;color:#fff}
.support-message>div{white-space:pre-wrap}
.support-message.user{align-self:flex-start;background:#0d47a1}
.support-message.admin{align-self:flex-end;background:#166534}
.support-message small{display:block;margin-top:5px;font-size:10px;opacity:.7}
body[data-page="support"] .support-form{position:fixed;left:50%;right:auto;transform:translateX(-50%);bottom:12px;z-index:40;width:min(calc(100% - 24px),456px);margin:0;padding:10px 0 0;border-top:1px solid rgba(255,255,255,.25);background:transparent}
.support-form{display:flex;direction:ltr;flex-direction:row;align-items:center;gap:8px;flex-shrink:0}
.support-form textarea{flex:1;min-width:0;height:72px;min-height:72px;max-height:160px;resize:none;background:rgba(255,255,255,.94);border:1px solid #c9e2ff;color:#153b66;box-shadow:inset 0 2px 5px rgba(21,59,102,.08);direction:rtl;text-align:right}
.support-form textarea::placeholder{color:#7d9bb8}
.support-form .btn{flex:none;min-height:44px;padding:8px 16px}
@media(max-width:560px){.support-form{flex-direction:row}.support-form .btn{width:auto}}
.private-song-request-item{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:1px solid #f59e0b;color:#713f12}
.song-request-rejected{background:#dc2626!important;color:#fff!important}
.private-song-request-row{display:flex;flex-direction:column;gap:6px;padding:10px 12px;margin-bottom:8px;background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:1px solid #f59e0b;border-radius:14px;color:#713f12;box-shadow:0 4px 12px rgba(146,64,14,.12)}
.private-song-request-main{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:14px;line-height:1.6}
.private-song-request-main b{font-weight:900}
.private-song-request-main span{color:#92400e}
.private-song-request-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:12px}
.private-song-review-note{color:#78350f;line-height:1.7;overflow-wrap:anywhere}
.private-song-request-meta .btn{min-height:32px;padding:4px 10px;font-size:11px}
.sponsor-ad{width:min(100%,520px);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:22px;padding:14px;box-shadow:0 8px 20px rgba(4,20,45,.4);overflow-y:auto}
.sponsor-ad-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:900;color:#0d47a1}
.sponsor-ad-time{color:#64748b;font-weight:700}
.sponsor-ad-media{border-radius:16px;overflow:hidden;background:#04142d}
.sponsor-ad-media img,.sponsor-ad-media video{width:100%;max-height:60vh;display:block;object-fit:contain;background:#04142d}
.sponsor-ad-done{text-align:center;font-size:13px;font-weight:900;color:#16a34a}
.sponsor-ad-cta{display:flex;justify-content:center}
.sponsor-ad-cta .btn{min-width:180px;justify-content:center;text-align:center}
.sponsor-ad-foot{display:flex;justify-content:center}
.sponsor-ad-foot .btn{min-width:140px;justify-content:center}
.reward-ad-btn{position:relative;width:100%;min-height:58px;margin:0 0 14px;padding:12px 18px;display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;border:0;border-radius:18px;font-family:inherit;font-size:16px;font-weight:900;cursor:pointer;color:#4a2c00;background:linear-gradient(135deg,#ffe45e 0%,#ffc400 45%,#ff9d00 100%);box-shadow:0 4px 0 #8a5a00,inset 0 2px 0 rgba(255,255,255,.6),0 6px 18px rgba(255,180,0,.35)}
.reward-ad-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a5a00}
.reward-ad-btn.off{background:linear-gradient(135deg,#8a8f98 0%,#5b6068 100%);color:#e5e7eb;box-shadow:0 4px 0 #2f3339,inset 0 2px 0 rgba(255,255,255,.25);cursor:default}
.reward-ad-btn.off .reward-ad-shine{display:none}
.reward-ad-shine{position:absolute;top:0;bottom:0;width:60px;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.75) 50%,transparent 100%);animation:rewardAdShine 2.2s ease-in-out infinite;pointer-events:none}
@keyframes rewardAdShine{0%{right:-80px}60%,100%{right:calc(100% + 20px)}}
@media(prefers-reduced-motion:reduce){.reward-ad-shine{display:none}}