/* ===== Fonts (local, work offline) ===== */
@font-face{font-family:Heebo;font-weight:400;font-display:swap;src:url(fonts/heebo-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Heebo;font-weight:500;font-display:swap;src:url(fonts/heebo-hebrew-500-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Heebo;font-weight:700;font-display:swap;src:url(fonts/heebo-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Heebo;font-weight:800;font-display:swap;src:url(fonts/heebo-hebrew-800-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Heebo;font-weight:900;font-display:swap;src:url(fonts/heebo-hebrew-900-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Heebo;font-weight:400;font-display:swap;src:url(fonts/heebo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Heebo;font-weight:500;font-display:swap;src:url(fonts/heebo-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Heebo;font-weight:700;font-display:swap;src:url(fonts/heebo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Heebo;font-weight:800;font-display:swap;src:url(fonts/heebo-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Heebo;font-weight:900;font-display:swap;src:url(fonts/heebo-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Unbounded;font-weight:500;font-display:swap;src:url(fonts/unbounded-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Unbounded;font-weight:900;font-display:swap;src:url(fonts/unbounded-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}

:root{
  --bg:#0A0A0F;--s1:#15151D;--s2:#1E1E29;--line:#2A2A37;--line2:#23232E;--line3:#34344A;
  --text:#F4F4F7;--muted:#A1A1B0;--dim:#6E6E80;
  --accent:#C8FF4D;--accent-2:#E2FF9E;--coral:#FF6B4A;--violet:#6C5CE7;--navy:#1B1640;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
  --tab-h:calc(64px + var(--sb));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Heebo,system-ui,-apple-system,sans-serif;overflow:hidden;overscroll-behavior:none}
body{-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,textarea{font-family:inherit;-webkit-user-select:text;user-select:text}
a{color:var(--accent)}
svg{display:block;flex-shrink:0}
.num{font-family:"Space Grotesk",Heebo,sans-serif;font-variant-numeric:tabular-nums}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===== Splash ===== */
#splash{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .5s ease,visibility .5s}
#splash.gone{opacity:0;visibility:hidden}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.splash-mark{border-radius:25px;animation:pop .7s cubic-bezier(.2,1.4,.4,1) both;box-shadow:0 0 0 0 rgba(200,255,77,.4);}
.sm-tri{transform-origin:62px 50px;animation:tri .9s .2s ease both}
.splash-word{animation:rise .6s .25s ease both}
@keyframes pop{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes tri{from{transform:translateX(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

.wordmark{font-family:Unbounded,sans-serif;font-weight:900;font-size:30px;letter-spacing:-1px;line-height:1}
.wordmark span{font-weight:500;color:var(--accent)}

/* ===== Main view ===== */
#view{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--st) + 22px) 20px calc(var(--tab-h) + 100px);outline:none}
.page{display:flex;flex-direction:column;gap:26px;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.head-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.brand{display:flex;align-items:center;gap:8px;margin-bottom:4px;align-self:flex-start}
.brand .wordmark{font-size:14px;letter-spacing:0}
h1{margin:0;font-size:34px;font-weight:900;line-height:1.05}
h2{margin:0;font-size:21px;font-weight:800}
.sub{font-size:14px;color:var(--muted)}
.head-r{display:flex;gap:10px}
.icon-btn{width:44px;height:44px;border-radius:22px;border:1px solid var(--line);background:var(--s1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s}
.icon-btn:active{transform:scale(.92)}
.icon-btn.accent{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.back-row{display:flex;align-items:center;gap:12px}

.search{display:flex;align-items:center;gap:10px;height:48px;border-radius:16px;background:var(--s1);border:1px solid var(--line);padding:0 14px;color:var(--muted)}
.search input{flex:1;background:none;border:0;outline:0;color:var(--text);font-size:16px}

.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:0 20px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{height:40px;padding:0 18px;border-radius:20px;font-size:14px;font-weight:700;border:1px solid var(--line);white-space:nowrap;transition:background .2s,color .2s}
.chip.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}

.resume{display:flex;gap:16px;align-items:center;padding:14px;border-radius:24px;background:var(--s1);border:1px solid var(--line2);text-align:right;width:100%}
.resume .cov{width:104px;height:104px;border-radius:18px}
.resume-t{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.kicker{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.5px}
.resume-name{font-size:20px;font-weight:800;line-height:1.15}
.bar{flex:1;height:4px;border-radius:2px;background:var(--line);position:relative;overflow:hidden}
.bar i{position:absolute;top:0;right:0;height:100%;background:var(--accent);border-radius:2px}

.sec{display:flex;flex-direction:column;gap:14px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline}
.link-btn{font-size:14px;font-weight:500;color:var(--accent)}
.hrow{display:flex;gap:12px;overflow-x:auto;margin:0 -20px;padding:0 20px;scrollbar-width:none}
.hrow::-webkit-scrollbar{display:none}
.pl-card{width:150px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;text-align:right}
.pl-card .cov{width:150px;height:150px;border-radius:20px;margin-bottom:4px}
.pl-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-meta{font-size:13px;color:var(--muted)}
.pl-new{width:150px;height:150px;border-radius:20px;border:1.5px dashed var(--line3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--accent);font-weight:700;font-size:14px}
.pl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pl-grid .pl-card,.pl-grid .pl-new{width:auto}
.pl-grid .pl-card .cov,.pl-grid .pl-new{width:100%;height:auto;aspect-ratio:1}

.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:7px 0;min-height:64px;width:100%;text-align:right;border-radius:14px}
.row .cov{width:54px;height:54px;border-radius:12px}
.row-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.row-name{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-meta{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.row.current .row-name{color:var(--accent)}
.row-dur{font-size:13px;color:var(--muted)}
.more-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0;margin-left:-10px}
.tag{font-size:11px;font-weight:700;color:var(--bg);background:var(--muted);border-radius:4px;padding:0 5px;line-height:16px}
.heart-sm{color:var(--coral)}

.cov{position:relative;overflow:hidden;flex-shrink:0;background:var(--s2)}
.cov svg,.cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cov .play-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,15,.4);color:var(--text)}

.empty{border-radius:28px;border:1.5px dashed var(--accent);background:rgba(200,255,77,.06);padding:30px 22px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.empty-ic{width:64px;height:64px;border-radius:32px;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center}
.empty-t{font-size:20px;font-weight:800}
.empty p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.btn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.btn{height:50px;border-radius:16px;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--s2);border:1px solid #2E2E3C;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.danger{background:transparent;border-color:rgba(255,107,74,.5);color:var(--coral)}
.btn.big{height:56px;border-radius:28px;font-size:17px;flex:1}

.dash-btn{display:flex;align-items:center;gap:12px;height:60px;border-radius:16px;border:1.5px dashed var(--line3);padding:0 16px;color:var(--accent);font-size:15px;font-weight:700;width:100%}

/* Playlist page */
.pl-hero{position:relative;margin:calc(-22px - var(--st)) -20px 0;height:calc(300px + var(--st));overflow:hidden}
.pl-hero .cov{position:absolute;inset:0;width:100%;height:100%}
.pl-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(to top,var(--bg),rgba(10,10,15,0))}
.pl-hero-bar{position:absolute;top:calc(var(--st) + 14px);left:20px;right:20px;display:flex;justify-content:space-between;z-index:2}
.glass{background:rgba(10,10,15,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:0;color:var(--text)}
.pill-btn{height:44px;padding:0 16px;border-radius:22px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.pl-title{margin-top:-70px;position:relative;z-index:2;display:flex;flex-direction:column;gap:4px}
.pl-title h1{font-size:38px;line-height:1;word-break:break-word}
.actions{display:flex;gap:12px}
.handle{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--dim);touch-action:none;flex-shrink:0}
.row.dragging{background:var(--s2);box-shadow:0 10px 30px rgba(0,0,0,.5);position:relative;z-index:5}
.row .idx{width:22px;text-align:center;color:var(--muted);font-size:14px;flex-shrink:0}

/* Upload page */
.panel{border-radius:24px;background:var(--s1);border:1px solid var(--line2);padding:18px;display:flex;flex-direction:column;gap:14px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-h h2{font-size:17px}
.small{font-size:12px;color:var(--muted)}
.choice{border-radius:18px;border:1px solid var(--line);background:var(--s2);padding:14px 12px;text-align:right;display:flex;flex-direction:column;gap:4px}
.choice b{font-size:15px;font-weight:800}
.choice span{font-size:12px;color:var(--muted);line-height:1.4}
.choice.hi{border-color:var(--accent);background:rgba(200,255,77,.08)}
.choice.hi b{color:var(--accent)}
.up-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--s1)}
.up-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.up-t{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.up-t .l{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.up-t .l b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar.indet i{width:35%;animation:indet 1.1s ease-in-out infinite}
@keyframes indet{from{right:-35%}to{right:100%}}
.meter{height:8px;border-radius:4px;background:var(--s2);display:flex;overflow:hidden;gap:2px}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:4px;display:inline-block;margin-left:6px}

/* ===== Mini player ===== */
.mini{position:fixed;left:10px;right:10px;bottom:calc(var(--tab-h) + 8px);height:66px;border-radius:20px;background:rgba(30,30,41,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid #2E2E3C;display:flex;align-items:center;gap:12px;padding:0 8px 0 12px;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:20;overflow:hidden;animation:fade .3s ease}
.mini-open{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:right;height:100%}
.mini .cov{width:46px;height:46px;border-radius:12px}
.mini-t{display:flex;flex-direction:column;min-width:0}
.mini-t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-t span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-prog{position:absolute;bottom:0;right:14px;left:14px;height:2px;background:rgba(255,255,255,.08)}
.mini-prog i{position:absolute;right:0;top:0;height:100%;background:var(--accent)}
.play-btn{width:46px;height:46px;border-radius:23px;background:var(--text);color:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s}
.play-btn:active{transform:scale(.9)}
.eq{display:flex;align-items:flex-end;gap:3px;height:18px;margin-right:auto;flex-shrink:0}
.eq i{width:3px;height:18px;background:var(--accent);border-radius:2px;transform-origin:bottom;animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.25s}.eq i:nth-child(3){animation-delay:.5s}.eq i:nth-child(4){animation-delay:.15s}
.eq.paused i{animation-play-state:paused;transform:scaleY(.3)}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ===== Tab bar ===== */
.tabbar{position:fixed;left:0;right:0;bottom:0;height:var(--tab-h);padding-bottom:var(--sb);background:rgba(10,10,15,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--s2);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));z-index:21}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);font-size:11px;font-weight:500}
.tab.on{color:var(--accent);font-weight:700}

/* ===== Full player ===== */
.player{position:fixed;inset:0;z-index:40;background:var(--bg);transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.9,.25,1);overflow:hidden;display:flex;flex-direction:column;gap:20px;padding:calc(var(--st) + 12px) 20px calc(var(--sb) + 20px)}
.player.open{transform:none}
.p-blob1{position:absolute;width:520px;height:520px;border-radius:50%;top:-200px;left:50%;margin-left:-260px;background:var(--p-tint,var(--navy));opacity:.85;transition:background .6s;pointer-events:none}
.p-blob2{position:absolute;width:260px;height:260px;border-radius:50%;top:80px;right:-120px;background:var(--accent);opacity:.07;pointer-events:none}
.p-head{position:relative;display:flex;align-items:center;justify-content:space-between}
.p-head .icon-btn{background:rgba(255,255,255,.08);border:0}
.p-ctx{display:flex;flex-direction:column;align-items:center;min-width:0}
.p-ctx span{font-size:12px;color:var(--muted);font-weight:500}
.p-ctx b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.p-stage{position:relative;flex:1;min-height:200px;display:flex;align-items:center;justify-content:center}
.p-art{width:min(100%,46vh,400px);aspect-ratio:1;border-radius:32px;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);transition:transform .5s cubic-bezier(.2,1.2,.4,1)}
.p-art.small{transform:scale(.86)}
.p-art .spin{transform-origin:50% 50%;animation:spin 18s linear infinite}
.p-art .spin.paused{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}
.p-lyrics{position:absolute;inset:0;border-radius:32px;background:var(--s1);border:1px solid var(--line2);padding:24px;overflow-y:auto;white-space:pre-wrap;font-size:22px;font-weight:800;line-height:1.5;-webkit-user-select:text;user-select:text}
.p-lyrics .small{display:block;margin-bottom:10px;font-size:13px}
.p-lyrics .empty-ly{color:var(--muted);font-size:16px;font-weight:500}
.p-info{position:relative;display:flex;align-items:center;gap:12px}
.p-info .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.p-title{margin:0;font-size:27px;font-weight:900;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-artist{font-size:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.like{width:48px;height:48px;border-radius:24px;border:1px solid var(--line);background:var(--s1);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.like.on{color:var(--coral)}
.like.on svg path{fill:var(--coral)}
.like.pulse{animation:pulse .4s ease}
@keyframes pulse{50%{transform:scale(1.2)}}
.wave{position:relative;height:56px;display:flex;align-items:center;justify-content:space-between;touch-action:none;cursor:pointer}
.wave i{display:block;width:4px;border-radius:2px;background:var(--line3);transition:background .15s}
.wave i.on{background:var(--accent)}
.times{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:6px}
.ctrls{position:relative;display:flex;align-items:center;justify-content:space-between}
.c-btn{width:52px;height:52px;display:flex;align-items:center;justify-content:center;color:var(--text);position:relative;transition:transform .15s}
.c-btn:active{transform:scale(.88)}
.c-btn.mode{color:var(--muted)}
.c-btn.mode.on{color:var(--accent)}
.c-btn .one{position:absolute;top:8px;right:8px;width:15px;height:15px;border-radius:8px;background:var(--accent);color:var(--bg);font:800 10px/15px "Space Grotesk",sans-serif;text-align:center}
.big-play{width:84px;height:84px;border-radius:42px;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px rgba(200,255,77,.12),0 16px 34px rgba(200,255,77,.25);transition:transform .15s}
.big-play:active{transform:scale(.92)}
.p-bottom{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.p-bottom button{height:48px;border-radius:16px;border:1px solid var(--line);background:var(--s1);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
.p-bottom button.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}

/* ===== Video ===== */
.video-view{position:fixed;inset:0;z-index:45;background:var(--bg);transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.9,.25,1);display:flex;flex-direction:column;gap:18px;padding-top:calc(var(--st) + 12px);overflow-y:auto}
.video-view.open{transform:none}
.vv-top{display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.vv-heading{font-size:15px;font-weight:700}
.vv-frame{margin:0 12px;border-radius:24px;overflow:hidden;position:relative;background:#000;aspect-ratio:16/9;flex-shrink:0}
.vv-frame video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.vv-controls{position:absolute;inset:0;background:rgba(10,10,15,.32);transition:opacity .3s}
.vv-controls.off{opacity:0}
.vv-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:34px}
.vv-skip{width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--text)}
.vv-play{width:64px;height:64px;border-radius:32px;background:rgba(244,244,247,.95);color:var(--bg);display:flex;align-items:center;justify-content:center}
.vv-bottom{position:absolute;left:12px;right:12px;bottom:6px;display:flex;align-items:center;gap:10px;font-size:12px}
.vv-small{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--text)}
.vv-info{padding:0 20px calc(var(--sb) + 24px);display:flex;flex-direction:column;gap:18px}
.vv-title{margin:0;font-size:24px;font-weight:900;line-height:1.15}
.vv-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vv-actions button{height:64px;border-radius:16px;border:1px solid var(--line);background:var(--s1);font-size:13px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.vv-actions button.hi{border-color:var(--accent);background:rgba(200,255,77,.1);color:var(--accent)}
.vrow{display:flex;gap:14px;align-items:center;text-align:right;width:100%}
.vrow .cov{width:132px;height:76px;border-radius:14px}
.vrow .dur{position:absolute;bottom:6px;left:6px;font-size:11px;font-weight:700;background:rgba(10,10,15,.8);border-radius:6px;padding:1px 6px;color:var(--text)}

input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:24px;background:transparent;direction:ltr}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--p,0%),rgba(244,244,247,.3) var(--p,0%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:7px;background:var(--accent);margin-top:-5px}

/* ===== Sheet ===== */
.sheet-wrap{position:fixed;inset:0;z-index:60;visibility:hidden}
.sheet-wrap.open{visibility:visible}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s}
.sheet-wrap.open .sheet-backdrop{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:86vh;overflow-y:auto;background:var(--s1);border-radius:28px 28px 0 0;border-top:1px solid var(--line);padding:10px 18px calc(var(--sb) + 18px);transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.9,.25,1)}
.sheet-wrap.open .sheet{transform:none}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line3);margin:0 auto 14px}
.sh-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line2)}
.sh-head .cov{width:52px;height:52px;border-radius:12px}
.sh-head .t{display:flex;flex-direction:column;min-width:0}
.sh-head b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-head span{font-size:13px;color:var(--muted)}
.sh-item{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;font-size:16px;font-weight:500;text-align:right;border-radius:12px;padding:0 4px}
.sh-item:active{background:var(--s2)}
.sh-item svg{color:var(--muted)}
.sh-item.danger,.sh-item.danger svg{color:var(--coral)}
.sh-title{font-size:20px;font-weight:800;margin:0 0 14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;color:var(--muted);font-weight:500}
.field input,.field textarea{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:var(--text);font-size:16px;outline:0}
.field textarea{min-height:140px;resize:vertical;line-height:1.5}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.sh-btns{display:flex;gap:10px;margin-top:6px}
.sh-btns .btn{flex:1}

/* ===== Toast ===== */
.toast{position:fixed;left:50%;top:calc(var(--st) + 14px);transform:translate(-50%,-140%);z-index:90;background:var(--text);color:var(--bg);font-weight:700;font-size:14px;padding:12px 18px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.2,1.2,.4,1);max-width:calc(100% - 40px);text-align:center}
.toast.show{transform:translate(-50%,0)}