:root{--pd:#0e0618;--pk:#160d24;--pm:#2a1550;--pg:#7c3fbf;--w:#ffffff;--ow:#ede8f5;--mu:#9b87c0;--si:#c8bedd;--go:#d4af6a;--gr:#3ecf8e;}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--pd);color:var(--ow);font-family:'Outfit',sans-serif;font-weight:400;min-height:100vh;}
a{color:inherit;text-decoration:none;}

/* NAV */
nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:var(--pk);border-bottom:1px solid rgba(124,63,191,.2);position:sticky;top:0;z-index:100;}
.nav-logo{font-family:'Playfair Display',serif;font-weight:900;font-size:1.15rem;color:var(--w);}
.nav-logo span{color:var(--pg);}
.nav-actions{display:flex;gap:.75rem;align-items:center;}
.btn-sm{padding:.45rem 1rem;border-radius:8px;font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;border:none;transition:all .2s;}
.btn-back{background:rgba(124,63,191,.15);color:var(--mu);border:1px solid rgba(124,63,191,.3);}
.btn-back:hover{background:rgba(124,63,191,.28);}
.btn-logout{background:transparent;color:var(--si);border:1px solid rgba(200,190,221,.25);}
.btn-logout:hover{background:rgba(200,190,221,.1);}

/* AUTH GATE */
#auth-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;gap:1.5rem;text-align:center;padding:2rem;}
#auth-gate h2{font-family:'Playfair Display',serif;font-size:2rem;}
#auth-gate p{color:var(--mu);max-width:400px;}
.btn-primary{background:var(--pg);color:var(--w);padding:.75rem 2rem;border-radius:10px;font-family:'Outfit',sans-serif;font-weight:600;font-size:1rem;cursor:pointer;border:none;transition:all .2s;}
.btn-primary:hover{background:#6b32a8;transform:translateY(-1px);}

/* MAIN */
#main-content{display:none;padding:2rem;max-width:1280px;margin:0 auto;}
.page-header{margin-bottom:2rem;}
.page-header h1{font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:900;color:var(--w);}
.page-header p{color:var(--mu);margin-top:.5rem;font-size:1rem;}

/* TABS */
.tabs{display:flex;gap:.75rem;margin-bottom:1.75rem;}
.tab{padding:.65rem 1.75rem;border-radius:50px;font-family:'Outfit',sans-serif;font-weight:600;font-size:.95rem;cursor:pointer;border:2px solid rgba(124,63,191,.3);background:transparent;color:var(--mu);transition:all .2s;min-height:48px;touch-action:manipulation;-webkit-tap-highlight-color:rgba(124,63,191,.2);}
.tab.active{background:var(--pg);color:var(--w);border-color:var(--pg);box-shadow:0 0 14px rgba(124,63,191,.4);}
.tab:hover:not(.active){border-color:var(--pg);color:var(--w);}
.tab:active{transform:scale(.97);}

/* FILTERS */
.filter-bar{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.75rem;align-items:center;}
.filter-bar select,.filter-bar input[type="text"]{background:rgba(42,21,80,.5);border:1px solid rgba(124,63,191,.25);color:var(--ow);border-radius:8px;padding:.55rem .9rem;font-family:'Outfit',sans-serif;font-size:.9rem;outline:none;transition:border-color .2s;}
.filter-bar select:focus,.filter-bar input[type="text"]:focus{border-color:var(--pg);}
.filter-bar input[type="text"]{flex:1;min-width:180px;}
.filter-bar select option{background:var(--pk);}

/* GRID */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
@media(max-width:1024px){.cards-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){
  .cards-grid{grid-template-columns:1fr;}
  .tabs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
  .tab{text-align:center;border-radius:10px;padding:.75rem .5rem;font-size:.82rem;}
  .tab.active{border-radius:10px;}
  /* Filter bar: horizontal scroll instead of stacking */
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.35rem;gap:.5rem;scrollbar-width:none;}
  .filter-bar::-webkit-scrollbar{display:none;}
  .filter-bar select,.filter-bar input[type="text"]{min-width:130px;flex-shrink:0;}
  .filter-bar .btn-sm{white-space:nowrap;flex-shrink:0;}
  .batch-bar-fixed{flex-wrap:wrap;white-space:normal;bottom:0;border-radius:12px 12px 0 0;left:0;right:0;transform:none;width:100%;padding:.75rem 1rem;justify-content:center;}
  input,select,textarea{font-size:16px!important;}
  .page-header h1{font-size:1.6rem;}
  .page-header p{font-size:.85rem;}
}

/* CARD */
.card{background:rgba(42,21,80,.3);border:1px solid rgba(124,63,191,.18);border-radius:12px;padding:1.5rem;transition:all .25s;display:flex;flex-direction:column;gap:.85rem;position:relative;}
.card:hover{transform:translateY(-3px);border-color:rgba(124,63,191,.5);}
.card.batch-sel{outline:2px solid var(--pg);background:rgba(124,63,191,.15);}
.card-top{display:flex;align-items:flex-start;gap:1rem;}
.avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--pg),var(--go));display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;font-size:1.2rem;color:var(--w);flex-shrink:0;}
.card-info{flex:1;min-width:0;}
.card-name{font-family:'Playfair Display',serif;font-weight:700;font-size:1.05rem;color:var(--w);}
.card-sub{color:var(--go);font-style:italic;font-size:.85rem;margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.platform-badge{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.72rem;font-weight:600;margin-top:.4rem;}
.badge-tiktok{background:rgba(255,0,80,.2);color:#ff5080;border:1px solid rgba(255,0,80,.3);}
.badge-spotify{background:rgba(62,207,142,.15);color:var(--gr);border:1px solid rgba(62,207,142,.3);}
.badge-apple{background:rgba(255,60,60,.15);color:#ff6060;border:1px solid rgba(255,60,60,.3);}
.badge-youtube{background:rgba(255,60,60,.15);color:#ff6060;border:1px solid rgba(255,60,60,.3);}
.badge-instagram{background:linear-gradient(135deg,rgba(233,88,142,.2),rgba(131,58,180,.2));color:#e9588e;border:1px solid rgba(233,88,142,.3);}
.badge-other{background:rgba(124,63,191,.2);color:var(--mu);border:1px solid rgba(124,63,191,.3);}

.followers{font-size:.82rem;color:var(--si);}
.genres{display:flex;flex-wrap:wrap;gap:.4rem;}
.genre-chip{background:rgba(124,63,191,.15);border:1px solid rgba(124,63,191,.3);color:var(--mu);border-radius:20px;padding:.15rem .6rem;font-size:.75rem;}
.fee{font-size:.88rem;font-weight:600;}
.fee.free{color:var(--gr);}
.fee.paid{color:var(--go);}
.bio{font-size:.85rem;color:var(--mu);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;}
.handle-link{color:var(--pg);font-size:.85rem;}
.handle-link:hover{color:var(--go);}
.card-btn{width:100%;padding:.65rem;border-radius:8px;font-family:'Outfit',sans-serif;font-weight:600;font-size:.9rem;cursor:pointer;border:none;transition:all .2s;margin-top:auto;}
.card-btn.submit{background:var(--pg);color:var(--w);}
.card-btn.submit:hover{background:#6b32a8;}
.card-btn.submitted{background:rgba(62,207,142,.15);color:var(--gr);border:1px solid rgba(62,207,142,.3);cursor:default;}
.card-btn.cooldown{background:rgba(155,135,192,.1);color:var(--mu);border:1px solid rgba(155,135,192,.2);cursor:default;}
.card-btn.closed{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2);cursor:default;}

/* VERIFIED + ACCEPT RATE + CLOSED BADGES */
.verified-badge{display:inline-flex;align-items:center;gap:.2rem;background:rgba(62,207,142,.12);color:var(--gr);border:1px solid rgba(62,207,142,.3);border-radius:20px;padding:.1rem .5rem;font-size:.68rem;font-weight:700;letter-spacing:.02em;flex-shrink:0;}
.closed-pill{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.25);border-radius:20px;padding:.1rem .5rem;font-size:.68rem;font-weight:600;display:inline-block;flex-shrink:0;}
.accept-chip{border-radius:99px;padding:.15rem .55rem;font-size:.73rem;font-weight:600;border:1px solid;display:inline-block;}

/* BATCH MODE */
.batch-cb{position:absolute;top:.75rem;right:.75rem;width:18px;height:18px;cursor:pointer;accent-color:var(--pg);display:none;}
.batch-mode .batch-cb{display:block;}
.batch-bar-fixed{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--pk);border:1px solid rgba(124,63,191,.45);border-radius:12px;padding:.9rem 1.75rem;display:flex;align-items:center;gap:1.25rem;z-index:150;box-shadow:0 8px 32px rgba(0,0,0,.6);white-space:nowrap;}

/* EMPTY STATE */
.empty-state{grid-column:1/-1;text-align:center;padding:4rem 2rem;color:var(--mu);}
.empty-state .icon{font-size:3rem;margin-bottom:1rem;opacity:.5;}
.empty-state h3{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--si);margin-bottom:.75rem;}
.empty-state a{color:var(--pg);font-weight:500;}
.empty-state a:hover{color:var(--go);}

/* RECOMMENDED SECTION */
#recommended-section{margin-bottom:2rem;}
.rec-header{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;}
.rec-header h2{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;color:var(--w);}
.rec-badge{background:linear-gradient(135deg,rgba(212,175,106,.25),rgba(212,175,106,.08));border:1px solid rgba(212,175,106,.4);color:var(--go);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .7rem;border-radius:20px;}
.rec-scroll{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:none;}
.rec-scroll::-webkit-scrollbar{display:none;}
.rec-card{flex:0 0 220px;background:rgba(42,21,80,.4);border:1px solid rgba(212,175,106,.28);border-radius:12px;padding:1.1rem;cursor:pointer;transition:all .25s;position:relative;}
.rec-card:hover{border-color:var(--go);transform:translateY(-3px);box-shadow:0 8px 24px rgba(212,175,106,.12);}
.rec-star{position:absolute;top:.6rem;right:.6rem;font-size:.85rem;}
.rec-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--pg),var(--go));display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:.65rem;overflow:hidden;flex-shrink:0;}
.rec-avatar img{width:100%;height:100%;object-fit:cover;}
.rec-name{font-family:'Playfair Display',serif;font-size:.92rem;font-weight:700;color:var(--w);margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rec-type-pill{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .5rem;border-radius:4px;margin-bottom:.35rem;}
.rec-type-curator{background:rgba(62,207,142,.12);color:var(--gr);}
.rec-type-clipper{background:rgba(124,63,191,.15);color:#bf7fff;}
.rec-type-influencer{background:rgba(212,175,106,.12);color:var(--go);}
.rec-meta{font-size:.72rem;color:var(--mu);margin-bottom:.4rem;}
.rec-caption{font-size:.75rem;color:var(--si);line-height:1.5;border-left:2px solid rgba(212,175,106,.4);padding-left:.5rem;margin-top:.5rem;font-style:italic;}
@media(max-width:640px){.rec-card{flex:0 0 180px;}}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(14,6,24,.85);z-index:200;align-items:center;justify-content:center;padding:1rem;}
.modal-overlay.open{display:flex;}
.modal{background:var(--pk);border:1px solid rgba(124,63,191,.3);border-radius:14px;padding:2rem;width:100%;max-width:520px;position:relative;max-height:92vh;overflow-y:auto;}
.modal h3{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--w);margin-bottom:1.25rem;}
.modal-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:var(--mu);font-size:1.3rem;cursor:pointer;line-height:1;}
.modal-close:hover{color:var(--w);}
.form-group{margin-bottom:1rem;}
.form-group label{display:block;font-size:.85rem;color:var(--si);margin-bottom:.4rem;font-weight:500;}
.form-group select,.form-group textarea,.form-group input[type="url"]{width:100%;background:rgba(42,21,80,.5);border:1px solid rgba(124,63,191,.25);color:var(--ow);border-radius:8px;padding:.65rem .9rem;font-family:'Outfit',sans-serif;font-size:.9rem;outline:none;transition:border-color .2s;}
.form-group select:focus,.form-group textarea:focus,.form-group input[type="url"]:focus{border-color:var(--pg);}
.form-group select option{background:var(--pk);}
.form-group textarea{resize:vertical;min-height:80px;}
.toggle-link{font-size:.82rem;color:var(--pg);cursor:pointer;margin-top:.4rem;display:inline-block;}
.toggle-link:hover{color:var(--go);}
.no-songs-msg{font-size:.85rem;color:var(--mu);}
.no-songs-msg a{color:var(--pg);}
.modal-actions{display:flex;gap:.75rem;margin-top:1.25rem;}
.btn-send{flex:1;padding:.75rem;border-radius:8px;background:var(--pg);color:var(--w);font-family:'Outfit',sans-serif;font-weight:600;font-size:.95rem;cursor:pointer;border:none;transition:all .2s;}
.btn-send:hover{background:#6b32a8;}
.btn-send:disabled{opacity:.5;cursor:default;}
.btn-cancel{padding:.75rem 1.25rem;border-radius:8px;background:transparent;color:var(--mu);border:1px solid rgba(124,63,191,.25);font-family:'Outfit',sans-serif;font-weight:500;cursor:pointer;}
.btn-cancel:hover{background:rgba(124,63,191,.1);}
.listen-wrap{padding:.65rem .9rem;background:rgba(124,63,191,.08);border:1px solid rgba(124,63,191,.2);border-radius:8px;margin-bottom:.75rem;}

/* TOAST */
.toast{position:fixed;bottom:2rem;right:2rem;background:var(--gr);color:#0a2e1f;padding:.85rem 1.5rem;border-radius:10px;font-weight:600;font-size:.95rem;z-index:300;transform:translateY(100px);opacity:0;transition:all .35s;}
.toast.show{transform:translateY(0);opacity:1;}

/* LOADING */
.loading{grid-column:1/-1;text-align:center;padding:3rem;color:var(--mu);}

/* PROFILE MODAL */
.profile-modal-content{background:var(--pk);border:1px solid rgba(124,63,191,.3);border-radius:16px;width:100%;max-width:480px;position:relative;overflow:hidden;max-height:90vh;overflow-y:auto;}
.profile-modal-hero{height:120px;background:linear-gradient(135deg,#1a0d35,var(--pg));position:relative;flex-shrink:0;}
.pma-wrap{position:absolute;bottom:-44px;left:50%;transform:translateX(-50%);}
.pma-img{width:90px;height:90px;border-radius:50%;border:3px solid var(--pk);object-fit:cover;display:block;}
.pma-init{width:90px;height:90px;border-radius:50%;border:3px solid var(--pk);background:linear-gradient(135deg,var(--pg),var(--go));display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;font-size:2rem;color:var(--w);}
.pm-body{padding:3.25rem 1.75rem 1.75rem;text-align:center;}
.pm-name{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:900;color:var(--w);}
.pm-sub{color:var(--mu);font-size:.84rem;margin-top:.2rem;}
.pm-badges{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-top:.6rem;}
.pm-followers{font-size:.82rem;color:var(--si);margin-top:.35rem;}
.pm-genres{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem;margin-top:.6rem;}
.pm-bio{font-size:.87rem;color:var(--mu);line-height:1.7;margin-top:1rem;text-align:left;border-top:1px solid rgba(124,63,191,.12);padding-top:.9rem;}
.pm-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem;}
.pl-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .85rem;border-radius:8px;font-size:.8rem;font-weight:600;text-decoration:none;border:1px solid;transition:opacity .2s;}
.pl-btn:hover{opacity:.75;}
.pl-playlist{background:rgba(62,207,142,.12);color:var(--gr);border-color:rgba(62,207,142,.3);}
.pl-profile{background:rgba(124,63,191,.15);color:var(--mu);border-color:rgba(124,63,191,.3);}
.pl-instagram{background:rgba(233,88,142,.1);color:#e9588e;border-color:rgba(233,88,142,.25);}
.pl-tiktok{background:rgba(105,201,208,.1);color:#69c9d0;border-color:rgba(105,201,208,.25);}
.pl-youtube{background:rgba(255,60,60,.1);color:#ff6060;border-color:rgba(255,60,60,.2);}
.pl-share{background:rgba(212,175,106,.1);color:var(--go);border-color:rgba(212,175,106,.25);cursor:pointer;}

/* FAVORITE / BLACKLIST */
.fav-btn,.block-btn{position:absolute;background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;padding:.25rem;border-radius:5px;transition:transform .15s;z-index:2;opacity:.55;}
.fav-btn{top:.65rem;right:2.4rem;}
.block-btn{top:.65rem;right:.65rem;}
.fav-btn:hover,.block-btn:hover{opacity:1;transform:scale(1.15);}
.fav-btn.active{opacity:1;}
.block-btn.active{opacity:1;}
.card.blocked-card{opacity:.35;filter:grayscale(.5);}

/* ── MOBILE FIXES ── */

/* Increase badge font sizes to legible minimum */
.verified-badge,.closed-pill{font-size:.75rem!important;}

/* Bigger tap targets on card buttons */
.card-btn{padding:.8rem!important;min-height:44px;}
.btn-sm{padding:.65rem 1.1rem;min-height:40px;}
.btn-send,.btn-cancel{min-height:44px;}

/* iOS input auto-zoom prevention — unconditional (not just ≤640px) */
.form-group select,
.form-group textarea,
.form-group input[type="url"],
.form-group input[type="text"],
.filter-bar select,
.filter-bar input[type="text"] {
  font-size:16px!important;
}

/* Fav/block buttons shift left when batch checkbox is visible */
.batch-mode .fav-btn{right:3.6rem;}
.batch-mode .block-btn{right:1.9rem;}

/* Toast: center on mobile, no overflow */
@media(max-width:640px){
  .toast{right:1rem;left:1rem;bottom:1.5rem;text-align:center;font-size:.85rem;padding:.75rem 1rem;}
}

/* Batch bar safe area for iOS/Android gesture bar */
@media(max-width:640px){
  .batch-bar-fixed{
    padding-bottom:calc(.75rem + env(safe-area-inset-bottom));
  }
}

/* 900px tablet breakpoint — fix filter row and nav */
@media(max-width:900px){
  .filter-bar select{min-width:120px;flex:1;}
  nav{padding:1rem 1.25rem;}
  .nav-logo{font-size:1rem;}
}

/* Nav on very small phones */
@media(max-width:420px){
  .nav-logo{display:none;}
  nav{padding:.75rem 1rem;}
}

/* Mobile hamburger */
.disc-hamburger{display:none;background:none;border:1px solid rgba(124,63,191,.4);color:var(--ow);font-size:1.15rem;padding:.35rem .7rem;border-radius:6px;cursor:pointer;line-height:1;transition:all .2s;flex-shrink:0;}
.disc-hamburger:hover{border-color:var(--pg);color:var(--w);}
.disc-mob-menu{display:none;position:fixed;top:57px;left:0;right:0;background:var(--pk);border-bottom:2px solid rgba(124,63,191,.25);z-index:99;padding:.85rem 1.25rem;flex-direction:column;gap:.5rem;box-shadow:0 6px 24px rgba(0,0,0,.4);}
.disc-mob-menu.open{display:flex;}
.disc-mob-link{padding:.75rem 1rem;border-radius:8px;color:var(--ow);font-size:.95rem;font-weight:500;background:rgba(124,63,191,.08);border:1px solid rgba(124,63,191,.2);text-align:left;cursor:pointer;font-family:'Outfit',sans-serif;width:100%;text-decoration:none;display:block;transition:background .2s;}
.disc-mob-link:hover{background:rgba(124,63,191,.2);}
button.disc-mob-link{appearance:none;-webkit-appearance:none;}
@media(max-width:700px){
  .nav-actions{display:none;}
  .disc-hamburger{display:flex;align-items:center;}
}

/* Similar curators panel — responsive width */
@media(max-width:600px){
  #similar-panel{
    right:.75rem!important;
    left:.75rem!important;
    width:auto!important;
    font-size:.82rem!important;
  }
}