/* ============================================
   my.playlist now/ — Main App
   Spotify-level UI
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

:root {
  --bg:       #080810;
  --bg2:      #0d0d1c;
  --bg3:      #111122;
  --bg4:      #16162a;
  --surface:  rgba(255,255,255,0.04);
  --surface2: rgba(255,255,255,0.075);
  --surface3: rgba(255,255,255,0.12);
  --border:   rgba(255,255,255,0.075);
  --border2:  rgba(255,255,255,0.13);
  --p:        #7c3aed;
  --p2:       #9333ea;
  --pl:       #a855f7;
  --c:        #06b6d4;
  --pk:       #ec4899;
  --am:       #f59e0b;
  --g:        #10b981;
  --err:      #ef4444;
  --text:     #f1f5f9;
  --t2:       #94a3b8;
  --t3:       #4a5568;
  --grad:     linear-gradient(135deg,#7c3aed,#06b6d4 50%,#ec4899);
  --grad2:    linear-gradient(135deg,#7c3aed,#ec4899);
  --grad3:    linear-gradient(135deg,#06b6d4,#7c3aed);
  --sb-w:     260px;
  --bar-h:    80px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;overflow:hidden;height:100vh;-webkit-font-smoothing:antialiased;}
@media(max-width:768px){body{overflow:auto;height:auto;}}
::selection{background:rgba(124,58,237,.35);}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;font-family:'Inter',sans-serif;}
input,textarea,select{font-family:'Inter',sans-serif;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px;}

/* NOISE */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");}

/* ======= LAYOUT ======= */
#shell{display:flex;height:100vh;width:100%;}
@media(max-width:768px){#shell{flex-direction:column;height:auto;}}

/* ======= SIDEBAR ======= */
.sidebar{
  width:var(--sb-w);flex-shrink:0;
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  height:100vh;overflow-y:auto;
  position:sticky;top:0;
  transition:transform .3s cubic-bezier(.23,1,.32,1);
  z-index:60;
}
@media(max-width:768px){
  .sidebar{
    position:fixed;left:0;top:0;height:100%;width:280px;
    transform:translateX(-100%);
  }
  .sidebar.open{transform:translateX(0);}
}
.sb-header{padding:1.4rem 1.25rem 1rem;border-bottom:1px solid var(--border);}
.sb-logo img{height:30px;filter:drop-shadow(0 0 12px rgba(124,58,237,.6));}
.sb-user{
  padding:1rem 1.25rem;
  display:flex;align-items:center;gap:.75rem;
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:background .2s;
}
.sb-user:hover{background:var(--surface);}
.user-av{
  width:38px;height:38px;border-radius:50%;
  background:var(--grad2);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;flex-shrink:0;
  box-shadow:0 0 14px rgba(124,58,237,.4);
  border:2px solid rgba(124,58,237,.3);
  overflow:hidden;
}
.user-av img{width:100%;height:100%;object-fit:cover;}
.user-info{flex:1;min-width:0;}
.user-name{font-size:.84rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-handle{font-size:.72rem;color:var(--t3);}
.sb-nav{padding:.6rem .75rem;flex:1;}
.nav-section{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);padding:.7rem .5rem .35rem;margin-top:.4rem;}
.nav-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem .85rem;border-radius:10px;
  color:var(--t2);font-size:.855rem;font-weight:500;
  border:none;background:transparent;width:100%;text-align:left;
  cursor:pointer;transition:all .2s;margin-bottom:2px;
}
.nav-item svg{flex-shrink:0;opacity:.65;}
.nav-item:hover{background:var(--surface2);color:var(--text);}
.nav-item:hover svg{opacity:1;}
.nav-item.active{
  background:rgba(124,58,237,.14);color:var(--pl);
  border:1px solid rgba(124,58,237,.22);
}
.nav-item.active svg{opacity:1;}
.nav-badge{
  margin-left:auto;background:rgba(124,58,237,.25);color:var(--pl);
  padding:1px 7px;border-radius:100px;font-size:.67rem;font-weight:700;
}
.sb-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);}
.signout-btn{
  width:100%;display:flex;align-items:center;gap:.6rem;
  padding:.65rem .9rem;border-radius:10px;border:1px solid var(--border);
  background:transparent;color:var(--t2);font-size:.8rem;font-weight:600;
  transition:all .2s;
}
.signout-btn:hover{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.07);color:#fca5a5;}

/* ======= MAIN AREA ======= */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{
  height:62px;flex-shrink:0;
  display:flex;align-items:center;gap:1rem;
  padding:0 1.75rem;
  background:rgba(8,8,16,.8);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  position:sticky;top:0;z-index:40;
}
.menu-toggle{display:none;width:38px;height:38px;border-radius:9px;background:var(--surface);border:1px solid var(--border);align-items:center;justify-content:center;color:var(--t2);flex-shrink:0;}
@media(max-width:768px){.menu-toggle{display:flex;}}
.topbar-title{font-size:1rem;font-weight:700;white-space:nowrap;}
.search-bar{
  flex:1;max-width:420px;margin:0 auto;
  display:flex;align-items:center;gap:.6rem;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:100px;padding:.45rem .9rem;
  transition:border-color .2s,box-shadow .2s;
}
.search-bar:focus-within{border-color:rgba(124,58,237,.45);box-shadow:0 0 0 3px rgba(124,58,237,.1);}
.search-bar svg{flex-shrink:0;color:var(--t3);}
.search-bar input{background:transparent;border:none;outline:none;color:var(--text);font-size:.875rem;width:100%;}
.search-bar input::placeholder{color:var(--t3);}
.tb-actions{display:flex;align-items:center;gap:.6rem;margin-left:auto;}
.tb-btn{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);
  color:var(--t2);transition:all .2s;
}
.tb-btn:hover{background:var(--surface2);color:var(--text);}
.tb-btn.primary{background:var(--grad2);border:none;color:#fff;box-shadow:0 0 16px rgba(124,58,237,.4);}
.tb-btn.primary:hover{box-shadow:0 0 28px rgba(124,58,237,.7);}

/* ======= CONTENT ======= */
.content{flex:1;overflow-y:auto;padding-bottom:var(--bar-h);}
.page{display:none;padding:2rem 1.75rem;max-width:1300px;margin:0 auto;animation:pageFade .25s ease;}
.page.active{display:block;}
@keyframes pageFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ======= BOTTOM PLAYER BAR ======= */
.player-bar{
  position:fixed;bottom:0;left:0;right:0;height:var(--bar-h);
  background:rgba(8,8,16,.97);border-top:1px solid var(--border);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  display:flex;align-items:center;gap:1.5rem;
  padding:0 1.75rem;z-index:80;
}
.player-info{display:flex;align-items:center;gap:.85rem;flex:1;min-width:0;}
.player-art{
  width:46px;height:46px;border-radius:8px;flex-shrink:0;
  background:var(--grad2);display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  box-shadow:0 0 14px rgba(124,58,237,.35);
}
.player-text{min-width:0;}
.player-title{font-size:.83rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.player-sub{font-size:.72rem;color:var(--t3);}
.player-controls{display:flex;align-items:center;gap:.85rem;flex-shrink:0;}
.pc-btn{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--t2);
  transition:all .2s;
}
.pc-btn:hover{color:var(--text);transform:scale(1.1);}
.pc-btn.play{
  width:44px;height:44px;
  background:var(--grad2);color:#fff;
  box-shadow:0 0 18px rgba(124,58,237,.45);
}
.pc-btn.play:hover{box-shadow:0 0 30px rgba(124,58,237,.7);}
.player-wave-mini{display:flex;align-items:center;gap:2px;flex:1;max-width:300px;}
.pw-bar{width:2px;border-radius:2px;background:var(--p);opacity:.4;animation:pwAnim var(--d,1s) ease-in-out var(--dl,0s) infinite;}
@keyframes pwAnim{0%,100%{height:3px;opacity:.25;}50%{height:var(--h,16px);opacity:.8;}}

/* ======= PAGE HEADER ======= */
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;margin-bottom:2rem;}
.ph h1{font-size:1.75rem;font-weight:900;letter-spacing:-.025em;}
.ph p{color:var(--t2);font-size:.875rem;margin-top:.3rem;}
.ph-actions{display:flex;gap:.75rem;flex-wrap:wrap;}

/* ======= BUTTONS ======= */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.3rem;border-radius:10px;font-weight:600;font-size:.855rem;border:none;transition:all .25s;cursor:pointer;}
.btn-grad{background:var(--grad2);color:#fff;box-shadow:0 4px 18px rgba(124,58,237,.35);}
.btn-grad:hover{box-shadow:0 8px 30px rgba(124,58,237,.6);transform:translateY(-1px);}
.btn-outline{background:transparent;border:1.5px solid var(--border2);color:var(--t2);}
.btn-outline:hover{background:var(--surface2);color:var(--text);}
.btn-ghost{background:transparent;border:none;color:var(--t2);padding:.5rem .75rem;}
.btn-ghost:hover{color:var(--text);}
.btn-sm{padding:.4rem .9rem;font-size:.8rem;}
.btn-danger{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.28);color:#fca5a5;}
.btn-danger:hover{background:rgba(239,68,68,.2);}
.btn-icon-sq{padding:.5rem;border-radius:9px;}

/* ======= CARDS ======= */
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.5rem;transition:all .3s;}
.card:hover{border-color:var(--border2);}
.card-sm{padding:1rem;}

/* ======= GRID LAYOUTS ======= */
.grid-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.25rem;}
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem;}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem;}
@media(max-width:600px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr 1fr;}}
@media(max-width:400px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

/* ======= PLAYLIST CARDS (Discover) ======= */
.pl-card{
  background:var(--bg2);border-radius:16px;overflow:hidden;
  border:1px solid var(--border);
  transition:all .35s cubic-bezier(.23,1,.32,1);cursor:pointer;
  position:relative;
}
.pl-card:hover{transform:translateY(-6px);border-color:rgba(124,58,237,.3);box-shadow:0 20px 60px rgba(0,0,0,.5);}
.pl-card-art{
  height:150px;
  display:flex;align-items:center;justify-content:center;font-size:2.8rem;
  position:relative;overflow:hidden;
}
.pl-card-art .art-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 40%,rgba(8,8,16,.9));
}
.pl-card-art .play-overlay{
  position:absolute;bottom:.85rem;right:.85rem;
  width:42px;height:42px;border-radius:50%;
  background:var(--grad2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;
  box-shadow:0 0 18px rgba(124,58,237,.5);
  opacity:0;transform:translateY(6px);transition:all .3s;
}
.pl-card:hover .play-overlay{opacity:1;transform:translateY(0);}
.pl-card-body{padding:1rem;}
.pl-card-title{font-size:.93rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.3rem;}
.pl-card-desc{font-size:.78rem;color:var(--t2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;margin-bottom:.65rem;}
.pl-card-meta{display:flex;align-items:center;gap:.65rem;font-size:.73rem;color:var(--t3);}
.mini-av{width:18px;height:18px;border-radius:50%;background:var(--grad2);display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:700;}

/* ======= MY PLAYLISTS LIST ======= */
.pl-row{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  display:flex;align-items:center;gap:1.1rem;padding:1.1rem;
  transition:all .3s;cursor:pointer;margin-bottom:.75rem;
}
.pl-row:hover{background:var(--surface2);border-color:var(--border2);transform:translateX(3px);}
.pl-icon{
  width:52px;height:52px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.pl-row-info{flex:1;min-width:0;}
.pl-row-name{font-size:.95rem;font-weight:700;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl-row-meta{font-size:.775rem;color:var(--t3);}
.pl-row-actions{display:flex;gap:.5rem;flex-shrink:0;}

/* ======= SIGNATURE ITEMS ======= */
.sig-list{display:flex;flex-direction:column;gap:.75rem;}
.sig-item{
  background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:1.1rem;
  transition:all .25s;
}
.sig-item:hover{border-color:var(--border2);background:var(--bg4);}
.sig-head{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.5rem;}
.sig-num{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:var(--pl);
}
.sig-title{font-size:.93rem;font-weight:700;flex:1;}
.sig-desc{font-size:.8rem;color:var(--t2);line-height:1.6;margin-bottom:.5rem;}
.sig-more{font-size:.77rem;color:var(--t3);line-height:1.6;margin-bottom:.5rem;padding:.5rem .75rem;background:var(--surface);border-radius:8px;}
.sig-links{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem;}
.sig-link{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.25rem .75rem;border-radius:100px;
  font-size:.73rem;font-weight:600;transition:all .2s;
}
.sig-link.primary{background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.28);color:var(--pl);}
.sig-link.secondary{background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.22);color:var(--c);}
.sig-link:hover{filter:brightness(1.2);}
.sig-item-actions{display:flex;gap:.5rem;margin-top:.75rem;}

/* ======= PROFILE ======= */
.profile-banner{
  border-radius:20px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#0d0021,#160040,#001529);
  border:1px solid var(--border);margin-bottom:1.5rem;padding:3rem 2.25rem 2.25rem;
}
.banner-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(124,58,237,.2),transparent 60%),
             radial-gradient(ellipse at 70% 50%,rgba(6,182,212,.12),transparent 60%);
}
.banner-grid{position:relative;display:flex;align-items:flex-end;gap:2rem;flex-wrap:wrap;}
.big-av{
  width:110px;height:110px;border-radius:50%;flex-shrink:0;
  background:var(--grad2);display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;font-weight:700;
  box-shadow:0 0 40px rgba(124,58,237,.5);
  border:4px solid rgba(124,58,237,.35);overflow:hidden;
}
.big-av img{width:100%;height:100%;object-fit:cover;}
.banner-info{flex:1;min-width:0;}
.banner-name{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:900;letter-spacing:-.02em;margin-bottom:.2rem;}
.banner-handle{color:var(--pl);font-size:.9rem;font-weight:600;margin-bottom:.6rem;}
.banner-bio{color:rgba(255,255,255,.6);font-size:.875rem;line-height:1.65;margin-bottom:1.25rem;max-width:500px;}
.banner-stats{display:flex;gap:2.5rem;flex-wrap:wrap;}
.bstat{text-align:left;}
.bstat-num{font-size:1.5rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;}
.bstat-label{font-size:.7rem;color:rgba(255,255,255,.4);margin-top:.2rem;text-transform:uppercase;letter-spacing:.06em;}
.banner-actions{display:flex;gap:.75rem;flex-shrink:0;}

/* ======= PEOPLE CARDS ======= */
.person-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:18px;overflow:hidden;
  transition:all .35s;cursor:pointer;
}
.person-card:hover{transform:translateY(-4px);border-color:rgba(124,58,237,.25);box-shadow:0 16px 48px rgba(0,0,0,.45);}
.person-cover{height:80px;position:relative;}
.person-av-wrap{position:absolute;bottom:-24px;left:1.25rem;}
.person-av{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;
  border:3px solid var(--bg2);box-shadow:0 0 16px rgba(124,58,237,.4);overflow:hidden;
}
.person-av img{width:100%;height:100%;object-fit:cover;}
.person-body{padding:1.75rem 1.25rem 1.25rem;}
.person-name{font-size:.9rem;font-weight:700;margin-bottom:.15rem;}
.person-handle{color:var(--t3);font-size:.75rem;margin-bottom:.5rem;}
.person-bio{color:var(--t2);font-size:.78rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.85rem;}
.person-meta{display:flex;align-items:center;justify-content:space-between;font-size:.73rem;color:var(--t3);}
.sub-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.4rem 1rem;border-radius:100px;
  font-size:.78rem;font-weight:700;border:none;
  background:var(--grad2);color:#fff;
  box-shadow:0 3px 12px rgba(124,58,237,.35);
  transition:all .25s;
}
.sub-btn:hover{box-shadow:0 6px 22px rgba(124,58,237,.6);transform:translateY(-1px);}
.sub-btn.subbed{background:var(--surface2);color:var(--t2);box-shadow:none;border:1.5px solid var(--border2);}

/* ======= SETTINGS ======= */
.settings-wrap{max-width:720px;}
.s-section{margin-bottom:2.5rem;}
.s-section-title{font-size:.88rem;font-weight:700;padding-bottom:.75rem;border-bottom:1px solid var(--border);margin-bottom:1.25rem;color:var(--text);}
.s-row{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;border-bottom:1px solid var(--border);gap:1rem;}
.s-row:last-child{border-bottom:none;}
.s-row-label{font-size:.875rem;font-weight:600;}
.s-row-desc{font-size:.78rem;color:var(--t3);margin-top:.15rem;}
.toggle-wrap{position:relative;width:44px;height:24px;flex-shrink:0;}
.toggle-wrap input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{position:absolute;cursor:pointer;inset:0;background:var(--border2);border-radius:100px;transition:.3s;}
.toggle-track::before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;bottom:3px;left:3px;transition:.3s;}
.toggle-wrap input:checked+.toggle-track{background:var(--p);}
.toggle-wrap input:checked+.toggle-track::before{transform:translateX(20px);}

/* ======= FORM ======= */
.fgroup{margin-bottom:1.2rem;}
.flabel{display:block;font-size:.73rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t2);margin-bottom:.5rem;}
.flabel .opt{font-size:.62rem;background:var(--surface2);color:var(--t3);padding:1px 5px;border-radius:4px;margin-left:.35rem;text-transform:lowercase;letter-spacing:0;vertical-align:middle;}
.finput,.ftextarea,.fselect{
  width:100%;background:var(--bg3);border:1.5px solid var(--border);
  border-radius:12px;padding:.75rem 1rem;color:var(--text);font-size:.875rem;
  outline:none;transition:all .2s;-webkit-appearance:none;
}
.finput:focus,.ftextarea:focus,.fselect:focus{border-color:rgba(124,58,237,.5);box-shadow:0 0 0 3px rgba(124,58,237,.1);}
.finput::placeholder,.ftextarea::placeholder{color:var(--t3);}
.finput.err{border-color:var(--err);}
.ftextarea{resize:vertical;min-height:80px;line-height:1.65;}
.fselect{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.5rem;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:560px){.frow{grid-template-columns:1fr;}}

/* ======= TABS ======= */
.tabs{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:4px;margin-bottom:1.75rem;}
.tab-btn{flex:1;padding:.58rem;border-radius:11px;border:none;background:transparent;color:var(--t2);font-family:'Inter',sans-serif;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .2s;}
.tab-btn.active{background:var(--surface2);color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,.35);}

/* ======= ALERT ======= */
.alert{padding:.75rem 1rem;border-radius:10px;font-size:.83rem;margin-bottom:1rem;display:none;}
.alert.err{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.28);color:#fca5a5;display:block;}
.alert.ok{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.28);color:#6ee7b7;display:block;}
.alert.info{background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.22);color:var(--pl);display:block;}

/* ======= BADGE ======= */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .65rem;border-radius:100px;font-size:.7rem;font-weight:600;}
.badge-p{background:rgba(124,58,237,.18);color:var(--pl);}
.badge-c{background:rgba(6,182,212,.18);color:var(--c);}
.badge-pk{background:rgba(236,72,153,.18);color:var(--pk);}
.badge-g{background:rgba(16,185,129,.18);color:var(--g);}

/* ======= MODALS ======= */
.modal-bg{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:1rem;
}
.modal-bg.open{display:flex;}
.modal{
  background:var(--bg2);border:1px solid var(--border);border-radius:22px;
  width:100%;max-width:560px;max-height:90vh;overflow-y:auto;padding:2.25rem;
  animation:modalPop .28s cubic-bezier(.34,1.56,.64,1);
}
.modal-sm{max-width:420px;}
.modal-lg{max-width:720px;}
@keyframes modalPop{from{transform:scale(.92) translateY(12px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;}
.modal-hd h3{font-size:1.15rem;font-weight:800;}
.modal-close{width:34px;height:34px;border-radius:50%;background:var(--surface2);border:none;color:var(--t2);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .2s;}
.modal-close:hover{background:var(--surface3);color:var(--text);}
.modal-footer{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem;}

/* ======= EMPTY STATE ======= */
.empty{text-align:center;padding:4rem 2rem;}
.empty-ico{font-size:3rem;margin-bottom:1.25rem;opacity:.35;}
.empty-title{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;}
.empty-sub{color:var(--t2);font-size:.85rem;margin-bottom:1.75rem;line-height:1.6;}

/* ======= LOADING ======= */
.skel{background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);background-size:200% 100%;border-radius:8px;animation:skel 1.6s ease infinite;}
@keyframes skel{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .75s linear infinite;vertical-align:middle;margin-right:5px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ======= SECTION LABEL ======= */
.section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;}
.section-hd h2{font-size:1.2rem;font-weight:800;}
.see-all{font-size:.8rem;color:var(--t2);font-weight:600;cursor:pointer;transition:color .2s;}
.see-all:hover{color:var(--text);}

/* ======= DRIVE CARD ======= */
.drive-card{display:flex;align-items:center;gap:1.25rem;padding:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:16px;}
.drive-ico{font-size:2.5rem;flex-shrink:0;}
.drive-info h4{font-size:.9rem;font-weight:700;margin-bottom:.3rem;}
.drive-info p{font-size:.8rem;color:var(--t2);}
.drive-connected{color:var(--g);font-size:.78rem;font-weight:600;margin-top:.25rem;}

/* ======= NOTIFICATION TOAST ======= */
.toast{
  position:fixed;bottom:calc(var(--bar-h) + 1.25rem);right:1.5rem;z-index:300;
  background:var(--bg2);border:1px solid var(--border2);border-radius:14px;padding:1rem 1.25rem;
  min-width:280px;max-width:360px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:flex;align-items:flex-start;gap:.75rem;
  transform:translateX(120%);transition:transform .4s cubic-bezier(.23,1,.32,1);
}
.toast.show{transform:translateX(0);}
.toast-ico{font-size:1.2rem;flex-shrink:0;}
.toast-title{font-size:.83rem;font-weight:700;margin-bottom:.15rem;}
.toast-sub{font-size:.75rem;color:var(--t2);}

@media(max-width:768px){
  .page{padding:1.25rem;}
  .player-bar{padding:0 1rem;}
  .player-wave-mini{display:none;}
  .profile-banner{padding:2rem 1.25rem 1.5rem;}
  .big-av{width:80px;height:80px;font-size:1.8rem;}
  .banner-name{font-size:1.4rem;}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}