/* =====================================================================
   PlugBio – design system
   Dark, glassy, mint → violet accent. All pages share these tokens.
   ===================================================================== */
:root{
  --bg:        #07070b;
  --surface:   rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.06);
  --solid:     #111118;
  --border:    rgba(255,255,255,.08);
  --border-2:  rgba(255,255,255,.16);
  --text:      #f4f4f6;
  --muted:     #9a9aab;
  --faint:     #6b6b7b;
  --accent:    #6ef2c3;               /* PlugBio mint */
  --accent-2:  #8b7bff;               /* violet */
  --danger:    #ff6b81;
  --ok:        #4ade80;
  --grad:      linear-gradient(135deg, var(--accent) 0%, #5fd0ff 50%, var(--accent-2) 100%);
  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 20px 50px -20px rgba(0,0,0,.7);
  --font:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display:   'Space Grotesk', var(--font);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh;
  background:var(--bg); color:var(--text);
  font:15px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;
}
/* soft aurora glow behind everything (static = no CPU cost) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 40vw at 10% -10%, rgba(110,242,195,.13), transparent 60%),
    radial-gradient(50vw 40vw at 100% 0%,  rgba(139,123,255,.14), transparent 60%),
    radial-gradient(60vw 50vw at 50% 120%, rgba(95,208,255,.07), transparent 60%);
}

h1,h2,h3{font-family:var(--display); letter-spacing:-.02em; line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(26px,3.2vw,34px); font-weight:700}
h2{font-size:22px; font-weight:600}
h3{font-size:16px; font-weight:600}
p{margin:0 0 1em}
a{color:var(--accent); text-decoration:none}
a:hover{color:#a5f8dc}
code{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted)}
hr{border:0; border-top:1px solid var(--border); margin:20px 0}
::selection{background:rgba(110,242,195,.3)}

.muted{color:var(--muted)}
.small{font-size:13px; color:var(--muted)}
.mono{font-family:ui-monospace,monospace; font-size:12.5px; color:var(--muted)}
.gradient-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- Layout ---------- */
.site-main{position:relative; z-index:1}
.wrap{max-width:1100px; margin:32px auto 64px; padding:0 20px}
.narrow{max-width:560px; margin-inline:auto}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.page-head h1{margin:0}
.page-head p{margin:4px 0 0; color:var(--muted)}

/* ---------- Nav (glass) ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px;
  background:rgba(7,7,11,.6);
  backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--border);
}
.brand{display:inline-flex; align-items:center; gap:9px; font:700 17px var(--display); color:var(--text); letter-spacing:-.01em}
.brand:hover{color:var(--text)}
.brand .logo{width:24px; height:24px; color:var(--accent); filter:drop-shadow(0 0 10px rgba(110,242,195,.45))}
.nav-right{display:flex; align-items:center; gap:4px}
.nav a.link{color:var(--muted); font-weight:500; font-size:14px; padding:8px 12px; border-radius:999px; transition:color .15s, background .15s}
.nav a.link:hover{color:var(--text); background:var(--surface-2)}
.nav a.link.active{color:var(--text); background:var(--surface-2)}
.nav-user{position:relative; margin-left:6px}
.avatar-btn{border:0; background:none; padding:0; cursor:pointer; border-radius:999px; display:block}
.avatar-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.avatar-img{width:34px; height:34px; border-radius:999px; object-fit:cover; border:1px solid var(--border-2); background:var(--solid);
  color:var(--text); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px}
.menu{position:absolute; right:0; top:calc(100% + 10px); min-width:210px; padding:6px;
  background:rgba(17,17,24,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow)}
.menu a,.menu button{display:flex; width:100%; padding:10px 12px; border-radius:9px; color:var(--text); font:inherit; font-size:14px;
  background:none; border:0; text-align:left; cursor:pointer}
.menu a:hover,.menu button:hover{background:var(--surface-2); color:var(--text)}
.menu form{margin:0}
.menu hr{margin:6px}
@media (max-width:640px){
  .nav{padding:10px 14px}
  .nav a.link.hide-sm{display:none}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:999px;
  font:600 14px var(--font); white-space:nowrap; cursor:pointer;
  color:var(--text); background:var(--surface-2); border:1px solid var(--border);
  transition:transform .15s ease, background .15s, border-color .15s, box-shadow .2s, filter .15s;
}
.btn:hover{color:var(--text); background:rgba(255,255,255,.1); border-color:var(--border-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn-primary,.btn-cta{color:#06120d; background:var(--grad); border-color:transparent; box-shadow:0 8px 24px -8px rgba(110,242,195,.55)}
.btn-primary:hover,.btn-cta:hover{color:#06120d; background:var(--grad); filter:brightness(1.08); box-shadow:0 10px 30px -8px rgba(110,242,195,.7)}
.btn-danger{color:#fff; background:#e5484d; border-color:transparent}
.btn-danger:hover{background:#f05a5f; color:#fff}
.btn-ghost{background:transparent}
.btn-sm{height:32px; padding:0 12px; font-size:13px}
.btn-lg{height:48px; padding:0 22px; font-size:15px}
.link{color:var(--muted); font-weight:500}
.link:hover{color:var(--text)}
.link.danger{color:#ff8b9a}
.link.danger:hover{color:var(--danger)}

/* ---------- Cards ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.card + .card{margin-top:18px}
.card h2,.card h3{margin-top:0}

/* ---------- Forms ---------- */
label{display:block; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:7px}
.row{margin-bottom:16px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=tel],textarea,select{
  width:100%; padding:11px 14px; border-radius:var(--radius-sm);
  background:rgba(0,0,0,.35); color:var(--text); border:1px solid var(--border);
  font:inherit; font-size:14.5px; transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus,select:focus{outline:none; border-color:rgba(110,242,195,.6); box-shadow:0 0 0 4px rgba(110,242,195,.12); background:rgba(0,0,0,.5)}
input[readonly]{opacity:.65; cursor:not-allowed}
textarea{min-height:120px; resize:vertical}
select{appearance:none; -webkit-appearance:none; cursor:pointer;
  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='%239a9aab' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px}
select option{background:var(--solid)}
input[type=file]{width:100%; font:inherit; font-size:13px; color:var(--muted); padding:10px; border:1px dashed var(--border-2); border-radius:var(--radius-sm); background:rgba(0,0,0,.2); cursor:pointer}
input[type=file]::file-selector-button{font:600 13px var(--font); color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:7px 14px; margin-right:12px; cursor:pointer}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px}
.input-prefix{display:flex; align-items:center; gap:8px}
.inline-pill{display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:42px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border); color:var(--muted); font-weight:600}
.hint{font-size:12.5px; color:var(--faint); margin-top:6px}
@media (max-width:700px){ .form-grid{grid-template-columns:1fr} }

/* ---------- Notices, pills, badges ---------- */
.notice{padding:12px 14px; border-radius:var(--radius-sm); margin:0 0 16px; font-size:14px; border:1px solid var(--border); background:var(--surface-2)}
.notice.ok{background:rgba(74,222,128,.08); border-color:rgba(74,222,128,.3); color:#bbf7d0}
.notice.err{background:rgba(255,107,129,.08); border-color:rgba(255,107,129,.35); color:#fecdd3; white-space:pre-line}
.notice.warn{background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.3); color:#fde68a}

.pill,.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.4; border:1px solid var(--border); background:var(--surface-2); color:var(--muted)}
.pill::before,.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.published,.status-published,.pill-public{color:var(--accent); background:rgba(110,242,195,.08); border-color:rgba(110,242,195,.28)}
.pill.draft,.status-draft,.pill-private{color:#c4b5fd; background:rgba(139,123,255,.1); border-color:rgba(139,123,255,.3)}
.status-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.status-row label{margin:0}

/* ---------- Tables (dashboard, analytics) ---------- */
.table-wrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.tbl{width:100%; border-collapse:collapse}
.tbl th,.tbl td{padding:14px 16px; text-align:left; vertical-align:middle}
.tbl thead th{font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); background:rgba(255,255,255,.02); border-bottom:1px solid var(--border)}
.tbl tbody tr + tr td{border-top:1px solid var(--border)}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:rgba(255,255,255,.025)}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums}
.tbl .actions{white-space:nowrap; text-align:right}
.tbl .actions .link{margin-left:14px}
.tbl .sep{display:none}
.tbl .empty td{text-align:center; color:var(--muted); padding:48px 16px}
.tbl .title-cell{font-weight:600}
.tbl a.title-cell,.tbl .title-cell a{color:var(--text)}
.tbl a.title-cell:hover,.tbl .title-cell a:hover{color:var(--accent)}
@media (max-width:700px){
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block; width:100%}
  .tbl tr{padding:12px 4px}
  .tbl td{display:flex; justify-content:space-between; gap:12px; padding:6px 14px; border:0 !important; text-align:right}
  .tbl td::before{content:attr(data-label); color:var(--faint); font-size:12px; text-align:left}
  .tbl td.actions{justify-content:flex-start; flex-wrap:wrap; gap:14px; padding-top:10px}
  .tbl td.actions::before{display:none}
  .tbl td.actions .link{margin:0}
}

/* ---------- Stats (analytics) ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:18px}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px}
.stat .label{font-size:12.5px; color:var(--muted)}
.stat .value{font:700 30px/1.1 var(--display); margin-top:6px; letter-spacing:-.02em}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px}
.two-col .card{margin:0}
@media (max-width:760px){ .two-col{grid-template-columns:1fr} }
.rank{list-style:none; margin:0; padding:0}
.rank li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--border)}
.rank li:first-child{border-top:0}
.rank .count{font-variant-numeric:tabular-nums; font-weight:600}

/* ---------- Hero (home, logged out) ---------- */
.hero{text-align:center; padding:56px 0 40px}
.hero .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:13px; margin-bottom:22px}
.hero .eyebrow b{color:var(--accent); font-weight:600}
.hero h1{font-size:clamp(38px,6.5vw,68px); font-weight:700; letter-spacing:-.035em; margin:0 auto 18px; max-width:820px}
.hero p{font-size:clamp(16px,1.6vw,18px); color:var(--muted); max-width:560px; margin:0 auto 30px}
.hero .cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero .services{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:44px; color:var(--faint); font-size:13px}
.hero .services span{display:inline-flex; align-items:center; gap:7px}
.hero .services svg{width:16px; height:16px; fill:currentColor}

/* ---------- Feed ---------- */
.section-head{display:flex; align-items:end; justify-content:space-between; gap:12px; margin:8px 0 18px}
.section-head h2{margin:0}
.grid-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px}
.card-link{display:block; color:inherit; border-radius:var(--radius); padding:10px; background:var(--surface); border:1px solid var(--border);
  transition:transform .2s ease, border-color .2s, background .2s, box-shadow .2s}
.card-link:hover{color:inherit; transform:translateY(-4px); border-color:var(--border-2); background:var(--surface-2); box-shadow:var(--shadow)}
.card-media{position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--solid)}
.card-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.card-link:hover .card-media img{transform:scale(1.05)}
.card-media .play{position:absolute; right:10px; bottom:10px; width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#06120d; box-shadow:0 8px 20px rgba(0,0,0,.4); opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s}
.card-media .play svg{width:16px; height:16px; fill:currentColor; margin-left:2px}
.card-link:hover .card-media .play{opacity:1; transform:none}
.card-media.placeholder{display:flex; align-items:center; justify-content:center; font:700 44px var(--display); color:rgba(255,255,255,.85);
  background:linear-gradient(135deg, rgba(110,242,195,.35), rgba(139,123,255,.35))}
.card-body{padding:12px 4px 4px}
.card-title{font-weight:600; font-size:15px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card-meta{font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px}
.empty-state{text-align:center; padding:56px 20px; border:1px dashed var(--border-2); border-radius:var(--radius); color:var(--muted)}
.empty-state h3{color:var(--text)}

/* ---------- Public song page ---------- */
.song-bg{position:fixed; inset:-10%; z-index:-1; background-size:cover; background-position:center; filter:blur(70px) saturate(1.4) brightness(.45); transform:scale(1.1)}
.song-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,7,11,.2), rgba(7,7,11,.85))}
.song{max-width:420px; margin:12px auto 40px; text-align:center}
.song .cover-wrap{aspect-ratio:1/1; border-radius:20px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); background:var(--solid)}
.song .cover-wrap img{width:100%; height:100%; object-fit:cover; display:block}
.song .cover-wrap.placeholder{display:flex; align-items:center; justify-content:center; font:700 72px var(--display); background:linear-gradient(135deg, rgba(110,242,195,.4), rgba(139,123,255,.4))}
.song h1{font-size:28px; margin:24px 0 4px}
.song .artist{color:var(--muted); font-size:15px; margin:0 0 24px}
.song .artist a{color:var(--muted)}
.song .artist a:hover{color:var(--text)}
.svc-list{display:flex; flex-direction:column; gap:10px; text-align:left}
.svc-btn{display:flex; align-items:center; gap:14px; padding:12px 12px 12px 14px; border-radius:14px; color:var(--text);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .15s ease, background .15s, border-color .15s}
.svc-btn:hover{color:var(--text); background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.2); transform:translateY(-1px)}
.svc-btn .svc-icon{width:38px; height:38px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--svc,#334); color:var(--svc-fg,#fff)}
.svc-btn .svc-icon svg{width:20px; height:20px; fill:currentColor}
.svc-btn .svc-name{flex:1; font-weight:600}
.svc-btn .svc-cta{font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.1)}
.svc-btn:hover .svc-cta{background:var(--accent); color:#06120d}
.svc-spotify   {--svc:#1DB954; --svc-fg:#06120d}
.svc-apple     {--svc:linear-gradient(135deg,#fa233b,#fb5c74)}
.svc-soundcloud{--svc:#ff5500}
.svc-amazon    {--svc:#25d1da; --svc-fg:#06120d}
.svc-youtube   {--svc:#ff0033}
.svc-tidal     {--svc:#000; --svc-fg:#fff}
.svc-deezer    {--svc:#a238ff}
.svc-bandcamp  {--svc:#1da0c3}
.svc-audiomack {--svc:#ffa200; --svc-fg:#06120d}
.svc-default   {--svc:var(--surface-2)}
.song-foot{margin-top:28px; font-size:12.5px; color:var(--faint)}
.song-foot a{color:var(--muted)}
.draft-banner{margin-bottom:18px}

/* ---------- Profile ---------- */
.profile-head{display:flex; gap:22px; align-items:center; flex-wrap:wrap; padding:28px; margin-bottom:28px}
.profile-head .pfp{width:96px; height:96px; border-radius:999px; object-fit:cover; border:2px solid var(--border-2); box-shadow:0 0 0 6px rgba(110,242,195,.08); background:var(--solid)}
.profile-head .who{flex:1; min-width:200px}
.profile-head h1{margin:0 0 2px}
.profile-head .bio{margin:12px 0 0; white-space:pre-line; color:#d6d6de; max-width:620px}
.socials{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.sbtn{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:500; color:var(--text); background:var(--surface-2); border:1px solid var(--border)}
.sbtn:hover{color:var(--text); border-color:var(--border-2); background:rgba(255,255,255,.1)}
.sicon{width:16px; height:16px}
.pfp-edit{display:flex; align-items:center; gap:18px}
.pfp-edit img{width:80px; height:80px; border-radius:999px; object-fit:cover; border:1px solid var(--border-2); background:var(--solid)}

/* ---------- Auth ---------- */
.auth{max-width:420px; margin:48px auto}
.auth .card{padding:32px}
.auth h1{text-align:center; margin-bottom:6px}
.auth .sub{text-align:center; color:var(--muted); margin-bottom:26px}
.auth .btn-primary{width:100%; height:46px; margin-top:6px}
.auth .alt{text-align:center; margin-top:18px; font-size:14px; color:var(--muted)}

/* ---------- Page editor (new/edit) ---------- */
.titlebar{display:flex; align-items:center; gap:12px; margin-bottom:22px; flex-wrap:wrap}
.titlebar h1{margin:0; flex:1}
.backlink{display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px 0 10px; border-radius:999px; color:var(--muted); background:var(--surface); border:1px solid var(--border); font-size:14px}
.backlink:hover{color:var(--text); border-color:var(--border-2)}
.backlink .icon{width:16px; height:16px}
.editor-section{margin-top:22px}
.editor-section > label{margin-bottom:10px}
.link-row{display:grid; grid-template-columns:118px 1fr auto; align-items:center; gap:10px; margin-bottom:10px}
.link-row .svc{height:42px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); font-size:12.5px; font-weight:600; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); white-space:nowrap}
.link-row input[type=url]{min-width:0}
.link-row .remove{height:42px; padding:0 14px; border-radius:var(--radius-sm); font:500 13px var(--font); color:var(--muted); background:transparent; border:1px solid var(--border); cursor:pointer}
.link-row .remove:hover{color:var(--danger); border-color:rgba(255,107,129,.4)}
.btn-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px}
.cover-preview{width:120px; height:120px; border-radius:12px; object-fit:cover; display:block; margin-bottom:10px; border:1px solid var(--border)}
@media (max-width:520px){
  .link-row{grid-template-columns:1fr auto}
  .link-row .svc{grid-column:1 / -1; height:30px; justify-content:flex-start; padding:0 10px; width:max-content}
}

/* ---------- Settings ---------- */
.sets-wrap{max-width:720px; margin:0 auto}

/* ---------- Footer ---------- */
.site-footer{max-width:1100px; margin:0 auto; padding:28px 20px 40px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--faint); font-size:13px; border-top:1px solid var(--border)}
.site-footer a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* ---------- Dashboard rows ---------- */
.page-cell{display:flex; align-items:center; gap:14px; min-width:0}
.thumb{width:48px; height:48px; border-radius:10px; object-fit:cover; flex:none; background:var(--solid); border:1px solid var(--border)}
.thumb.placeholder{display:flex; align-items:center; justify-content:center; color:var(--muted); background:linear-gradient(135deg, rgba(110,242,195,.2), rgba(139,123,255,.2))}
@media (max-width:700px){ .tbl td[data-label="Page"]{display:block} .tbl td[data-label="Page"]::before{display:none} }