:root{
  --bg:#0C0D0D;
  --panel:#1A1C1B;
  --panel-2:#202322;
  --panel-3:#282C2A;
  --border:rgba(255,255,255,0.075);
  --border-strong:rgba(255,255,255,0.13);
  --teal:#2FD8C3;
  --teal-dim:#1C8C7F;
  --teal-deep:#124B45;
  --coral:#F0785B;
  --text:#ECEFEC;
  --muted:#828B86;
  --muted-2:#5E6662;
  --r-lg:18px; --r-md:12px; --r-sm:9px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Poppins',sans-serif;line-height:1.5;padding-bottom:72px;}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-0.02em;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

.label{font-size:0.68rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
.wrap{width:100%;margin:0 auto;padding:0 16px;}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(12,13,13,0.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;}
.logo{display:flex;align-items:center;gap:9px;}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:var(--teal);}
.logo-word{font-size:1.3rem;font-weight:800;letter-spacing:-0.03em;}
.logo-word b{color:var(--teal);}
.pill{font-size:0.62rem;font-weight:700;letter-spacing:0.09em;color:var(--teal);border:1px solid var(--teal-dim);padding:3px 8px;border-radius:20px;text-transform:uppercase;}

.avatar{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.78rem;background:hsl(var(--hue,175) 30% 26%);color:var(--text);}
.avatar{overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.avatar-sm{width:24px;height:24px;border-radius:7px;font-size:0.62rem;}

.page{padding-top:22px;}

/* profile */
.profile-card{background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden;}
.cover{height:84px;background:linear-gradient(120deg,var(--panel-3),var(--teal-deep));}
.profile-inner{padding:0 18px 20px;}
.profile-head{display:flex;gap:14px;align-items:flex-end;margin-top:-30px;}
.profile-head .avatar{width:66px;height:66px;border-radius:16px;font-size:1.25rem;border:4px solid var(--panel);}
.profile-name{padding-bottom:4px;}
.profile-name h2{font-size:1.3rem;}
.profile-name span{color:var(--muted);font-size:0.88rem;font-weight:500;}
.profile-bio{color:var(--muted);font-size:0.9rem;margin:16px 0 18px;}
.profile-stats{display:flex;gap:28px;margin-bottom:20px;}
.profile-stats .value{font-size:1.25rem;font-weight:800;color:var(--teal);}
.profile-stats .value.plain{color:var(--text);}

.tabs{display:flex;gap:22px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{background:none;border:none;color:var(--muted);padding:11px 2px;font-size:0.9rem;font-weight:600;border-bottom:2px solid transparent;white-space:nowrap;}
.tab.active{color:var(--text);border-color:var(--teal);}

.panel{padding-top:20px;}
.panel[hidden]{display:none;}
.empty{color:var(--muted);font-size:0.9rem;padding:28px 4px;border:1px dashed var(--border-strong);border-radius:var(--r-md);text-align:center;}

/* cards */
.grid{display:grid;grid-template-columns:1fr;gap:14px;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s;}
.card:hover{border-color:var(--border-strong);}
.card-top{padding:15px 16px 11px;}
.waveform{height:48px;display:flex;align-items:flex-end;gap:2px;}
.waveform{cursor:pointer;}
.waveform span{flex:1;background:var(--teal-deep);border-radius:2px;min-width:2px;transition:background .1s;}
.waveform span.played{background:var(--teal);}
.card.playing .waveform span.played{animation:pulse .85s ease-in-out infinite alternate;}
.track-time{display:flex;justify-content:space-between;margin-top:7px;font-size:0.7rem;
  color:var(--muted);font-variant-numeric:tabular-nums;}
.card.audio-error .waveform span{background:var(--panel-3);}
.card.audio-error .track-time{color:var(--coral);}
.play-btn[disabled]{opacity:0.4;cursor:not-allowed;}
.play-btn[disabled]:hover{background:var(--panel-3);color:var(--teal);border-color:var(--border-strong);}
@keyframes pulse{from{transform:scaleY(.8);}to{transform:scaleY(1.15);}}
.card-body{padding:14px 16px;flex:1;}
.play-btn{width:34px;height:34px;border-radius:10px;background:var(--panel-3);border:1px solid var(--border-strong);color:var(--teal);display:flex;align-items:center;justify-content:center;transition:all .12s;margin-bottom:12px;}
.play-btn:hover{background:var(--teal);color:#08211E;border-color:var(--teal);}
.play-btn svg{width:13px;height:13px;}
.play-btn .i-play{margin-left:2px;}
.card-body h3{font-size:1.02rem;font-weight:700;margin-bottom:9px;letter-spacing:-0.02em;}
.uploader{display:flex;align-items:center;gap:8px;font-size:0.84rem;color:var(--muted);font-weight:500;margin-bottom:12px;}
.tags{display:flex;gap:6px;flex-wrap:wrap;}
.tag{font-size:0.72rem;font-weight:600;padding:5px 10px;border-radius:20px;background:var(--panel-2);border:1px solid var(--border);color:var(--muted);}
.tag-mono{color:var(--text);font-variant-numeric:tabular-nums;}
.tag-license.free{color:var(--teal);border-color:var(--teal-dim);}
.tag-license.credit{color:var(--text);}
.tag-license.licensed{color:var(--coral);border-color:rgba(240,120,91,0.4);}
.card-footer{border-top:1px solid var(--border);padding:11px 16px;display:flex;justify-content:space-between;align-items:center;}
.card-actions{display:flex;align-items:center;gap:6px;}
.icon-btn-danger{color:var(--muted);font-size:1.1rem;line-height:1;}
.icon-btn-danger:hover{color:var(--coral);}
.wrap-narrow{max-width:620px;}
.file-input{font-size:0.85rem;color:var(--muted);max-width:100%;}
.file-input::file-selector-button{font-family:inherit;font-weight:600;font-size:0.85rem;
  padding:8px 13px;margin-right:10px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--border-strong);background:var(--panel-2);color:var(--text);}
.file-input::file-selector-button:hover{border-color:var(--teal);color:var(--teal);}
.settings-form select{width:100%;font-family:inherit;font-size:0.9rem;padding:11px 13px;
  border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:var(--panel-2);color:var(--text);}
.settings-form select:focus{outline:2px solid var(--teal);outline-offset:1px;}
.lineage{font-size:0.78rem;color:var(--muted);font-weight:500;}
.icon-btn{width:30px;height:30px;border-radius:9px;background:transparent;border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;transition:all .12s;}
.icon-btn svg{width:16px;height:16px;}
.icon-btn:hover{border-color:var(--teal);color:var(--teal);}

/* bottom tab bar */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:30;background:rgba(12,13,13,0.96);backdrop-filter:blur(10px);border-top:1px solid var(--border);display:flex;height:64px;padding-bottom:env(safe-area-inset-bottom);}
.tabbar a,.tabbar button{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:0.68rem;font-weight:600;}
.tabbar .ic{display:flex;align-items:center;justify-content:center;}
.tabbar .ic svg{width:22px;height:22px;}
.tabbar .active{color:var(--text);}
.tabbar .up{color:var(--teal);}
.tabbar .up .ic{width:38px;height:38px;border-radius:12px;background:var(--teal);color:#08211E;display:flex;align-items:center;justify-content:center;margin-bottom:1px;}

footer{border-top:1px solid var(--border);padding:22px 0;}

@media (min-width:600px){
  .wrap{max-width:720px;padding:0 22px;}
  body{padding-bottom:0;}
  .tabbar{display:none;}
  .nav-wide{display:flex;}
  .grid{grid-template-columns:1fr 1fr;gap:16px;}
}
@media (min-width:960px){
  .wrap{max-width:1120px;}
  .profile-inner{padding:0 26px 26px;}
  .grid{grid-template-columns:1fr 1fr 1fr;gap:18px;}
}

/* ---------- nav items ---------- */
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-item{font-size:0.88rem;font-weight:500;color:var(--muted);}
.nav-item:hover{color:var(--text);}
.nav-item.active{color:var(--text);}
/* Browse/Upload live in the bottom tab bar on phones, so the nav copies hide
   below the breakpoint where that bar disappears. */
.nav-wide{display:none;}
.nav-upload{align-items:center;gap:7px;background:var(--teal);color:#08211E;
  padding:8px 14px;border-radius:var(--r-sm);font-size:0.86rem;font-weight:700;
  transition:filter .15s;}
.nav-upload:hover{filter:brightness(1.08);}
.nav-upload .ic{display:flex;}
.nav-upload .ic svg{width:15px;height:15px;}

.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:16px;flex-wrap:wrap;}
.panel-head .muted{font-size:0.85rem;}
.link{color:var(--teal);font-weight:600;}
.link:hover{text-decoration:underline;}

/* ---------- section head ---------- */
.section-head{margin:4px 0 18px;}
.section-head h2{font-size:1.25rem;}
.section-head p{color:var(--muted);font-size:0.9rem;margin-top:5px;}

/* ---------- flash messages ---------- */
.flashes{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.flash{padding:11px 14px;border-radius:var(--r-sm);font-size:0.88rem;font-weight:500;border:1px solid var(--border-strong);}
.flash-error{color:var(--coral);border-color:rgba(240,120,91,0.4);background:rgba(240,120,91,0.08);}
.flash-success{color:var(--teal);border-color:var(--teal-dim);background:rgba(47,216,195,0.08);}
/* A generated password is meant to be read and copied, so it gets monospace
   and room to breathe rather than sentence styling. */
.flash-password{color:var(--text);border-color:var(--teal-dim);background:rgba(47,216,195,0.10);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.95rem;
  letter-spacing:0.02em;user-select:all;padding:14px;}

/* ---------- auth ---------- */
.auth-wrap{min-height:calc(100dvh - 58px);display:flex;align-items:center;justify-content:center;padding-top:20px;padding-bottom:40px;}
.auth-card{background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:26px 22px;width:100%;max-width:400px;}
.auth-title{font-size:1.5rem;}
.auth-sub{color:var(--muted);font-size:0.9rem;margin:8px 0 22px;}
.auth-form .form-field{margin-bottom:14px;}
.form-field .label{display:block;margin-bottom:6px;}
.auth-form input{width:100%;background:var(--bg);border:1px solid var(--border-strong);color:var(--text);padding:12px;border-radius:var(--r-sm);font-size:0.92rem;font-family:inherit;}
.auth-form input::placeholder{color:var(--muted-2);}
.btn-primary{width:100%;border:none;background:var(--teal);color:#08211E;padding:13px;border-radius:var(--r-sm);font-size:0.95rem;font-weight:700;font-family:inherit;cursor:pointer;transition:filter .15s,transform .05s;margin-top:6px;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-primary:active{transform:translateY(1px);}
.btn-primary.sm{width:auto;padding:9px 16px;font-size:0.88rem;margin-top:0;}
.auth-alt{margin-top:18px;font-size:0.88rem;color:var(--muted);text-align:center;}
.auth-alt a{color:var(--teal);}

/* ---------- admin ---------- */
.admin-block{background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:18px;margin-bottom:16px;}
.admin-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.admin-block h3{font-size:1.05rem;margin-bottom:14px;}
.admin-block-head h3{margin-bottom:0;}
.inline-form{display:flex;gap:8px;align-items:center;}
.count-input{width:64px;background:var(--bg);border:1px solid var(--border-strong);color:var(--text);padding:9px;border-radius:var(--r-sm);font-family:inherit;font-size:0.9rem;}
.table{display:flex;flex-direction:column;}
.tr{display:grid;grid-template-columns:1.3fr 0.8fr 1fr auto;gap:10px;padding:11px 4px;border-top:1px solid var(--border);font-size:0.88rem;align-items:center;}
.tr.tr-invites{grid-template-columns:26px 1.3fr 0.8fr 1fr;}
.tr input[type=checkbox]{accent-color:var(--teal);margin:0;}
.bulk-actions{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap;}
.bulk-actions .btn-danger[disabled]{opacity:0.45;cursor:not-allowed;}
.bulk-actions .btn-danger[disabled]:hover{border-color:var(--border-strong);color:var(--muted);}
.bulk-count{font-size:0.82rem;}
.tr.tr-2{grid-template-columns:1fr 2fr;}
.tr.th{border-top:none;color:var(--muted);font-size:0.72rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;}
.mono{font-variant-numeric:tabular-nums;font-weight:600;}
.muted{color:var(--muted);}
.badge{display:inline-block;font-size:0.7rem;font-weight:700;padding:3px 9px;border-radius:20px;}
.badge.open{color:var(--teal);border:1px solid var(--teal-dim);}
.badge.used{color:var(--muted);border:1px solid var(--border-strong);}
.badge.admin{color:#08211E;background:var(--teal);}

/* admin tab accent */
.tab.tab-admin{color:var(--teal);}
.tab.tab-admin.active{color:var(--teal);border-color:var(--teal);}

/* verify-email banner */
.banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:rgba(240,120,91,0.10);border:1px solid rgba(240,120,91,0.4);color:var(--coral);
  padding:11px 14px;border-radius:var(--r-sm);font-size:0.86rem;font-weight:500;margin-bottom:16px;}
.banner form{margin:0;}
.banner-link{background:none;border:none;color:var(--coral);font-weight:700;text-decoration:underline;font-size:0.86rem;cursor:pointer;font-family:inherit;}

/* technician / settings form */
.block-note{color:var(--muted);font-size:0.85rem;margin-bottom:16px;line-height:1.5;}
.settings-form .form-field{margin-bottom:14px;}
.settings-form input[type=text],.settings-form input[type=number],.settings-form input[type=email],.settings-form input[type=password]{
  width:100%;background:var(--bg);border:1px solid var(--border-strong);color:var(--text);
  padding:11px;border-radius:var(--r-sm);font-family:inherit;font-size:0.9rem;}
.settings-form input::placeholder{color:var(--muted-2);}
.settings-row{display:flex;gap:14px;}
.check-row{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:0.9rem;margin-bottom:14px;}
.check-row input,.radio-inline input{accent-color:var(--teal);}
.radio-inline{display:flex;gap:18px;margin-bottom:16px;color:var(--muted);font-size:0.9rem;}
.radio-inline label{display:flex;align-items:center;gap:7px;}
.form-actions{display:flex;gap:10px;align-items:center;}
.test-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.btn-ghost{border:1px solid var(--border-strong);background:transparent;color:var(--text);
  padding:11px 16px;border-radius:var(--r-sm);font-weight:600;font-size:0.9rem;font-family:inherit;cursor:pointer;transition:all .12s;}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);}
.btn-ghost.sm{padding:9px 14px;font-size:0.86rem;}
.btn-danger{border:1px solid var(--border-strong);background:transparent;color:var(--muted);
  padding:11px 16px;border-radius:var(--r-sm);font-weight:600;font-size:0.9rem;font-family:inherit;cursor:pointer;transition:all .12s;}
.btn-danger:hover{border-color:var(--coral);color:var(--coral);}
.btn-danger.sm{padding:5px 11px;font-size:0.78rem;}
@media (max-width:520px){.settings-row{flex-direction:column;gap:0;}
  .tr{grid-template-columns:1fr 0.6fr 0.7fr auto;gap:6px;font-size:0.8rem;}
  .tr.tr-invites{grid-template-columns:22px 1fr 0.6fr 0.7fr;}
  .member-link-badges{width:100%;justify-content:flex-start;margin-left:0;}}

.field-hint{display:block;margin-top:6px;font-size:0.78rem;color:var(--muted-2);}
.settings-form textarea{width:100%;resize:vertical;min-height:72px;font-family:inherit;font-size:0.9rem;
  padding:11px 13px;border-radius:var(--r-sm);border:1px solid var(--border-strong);
  background:var(--panel-2);color:var(--text);}
.settings-form textarea:focus{outline:2px solid var(--teal);outline-offset:1px;}
.settings-form textarea::placeholder{color:var(--muted-2);}

/* member roles list */
.member-list{display:flex;flex-direction:column;}
.member-link{display:flex;align-items:center;gap:12px;padding:12px 8px;border-radius:var(--r-md);
  transition:background .12s;}
.member-link:not(:first-child){border-top:1px solid var(--border);}
.member-link:hover{background:var(--panel-2);}
.member-link-text{display:flex;flex-direction:column;min-width:0;}
.member-link-name{font-weight:600;font-size:0.92rem;}
.member-link-text .mono{font-size:0.78rem;}
.member-link-badges{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
.member-link-go{color:var(--muted);font-size:1.3rem;line-height:1;}
.badge.tech{color:var(--teal);background:var(--teal-deep);}
.role-toggles{margin-top:2px;}
.badge.you{color:var(--text);border:1px solid var(--border-strong);background:var(--panel-2);}
.role-form{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.badge.unverified{color:var(--coral);border:1px solid var(--coral);}

/* settings: profile image editor */
.avatar-editor{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.avatar-lg{width:88px;height:88px;border-radius:20px;font-size:1.6rem;}
.avatar-editor-forms{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.avatar-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.avatar-form input[type=file]{font-size:0.82rem;color:var(--muted);max-width:100%;}
.avatar-form input[type=file]::file-selector-button{font-family:inherit;font-weight:600;font-size:0.82rem;
  padding:7px 12px;margin-right:10px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--border-strong);background:var(--panel-2);color:var(--text);}
.avatar-form input[type=file]::file-selector-button:hover{border-color:var(--teal);color:var(--teal);}
.role-check{display:flex;align-items:center;gap:7px;font-size:0.86rem;color:var(--muted);}
.role-check input{accent-color:var(--teal);}