/* =========================================================
   VERMEIL — NEOBRUTALISM THEME
   Load this AFTER each page's own <style> block so it wins
   the cascade. Flat colors, thick ink-black borders, hard
   offset shadows, zero blur, zero border-radius softness.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* ---- Neobrutalist palette (overrides old glass/gradient vars) ---- */
  --red:#FF2E63 !important;
  --red2:#FF2E63 !important;
  --accent:#FF2E63 !important;
  --dark:#0E0E10 !important;
  --dark2:#151517 !important;
  --dark3:#1C1C1F !important;
  --glass:#1C1C1F !important;
  --border:#F5F5F0 !important;
  --text:#F5F5F0 !important;
  --sub:#B9B9C6 !important;

  --ink:#0E0E10;
  --paper:#F5F5F0;
  --yellow:#FFDE59;
  --lime:#C6FF3D;
  --cyan:#3DE0FF;
  --purple:#B98CFF;
  --pink:#FF2E63;
  --shadow-c:#FFDE59;
  --nb-border:3px;
  --nb-shadow: 6px 6px 0 var(--yellow);
  --nb-shadow-sm: 4px 4px 0 var(--yellow);
  --nb-shadow-lg: 9px 9px 0 var(--yellow);

  /* ---- extra var names used on individual pages (message/admin/profil) ---- */
  --primary:#FF2E63 !important;
  --primary-glow:rgba(255,46,99,.35) !important;
  --bg:#0E0E10 !important;
  --surface:#1C1C1F !important;
  --surface2:#1C1C1F !important;
  --surface3:#232326 !important;
  --border2:#F5F5F0 !important;
  --text2:#B9B9C6 !important;
  --text3:#8888aa !important;
  --grad:#FF2E63 !important;
  --gold:#FFDE59 !important;
  --green:#C6FF3D !important;
  --blue:#3DE0FF !important;
  --purple:#B98CFF !important;
}

/* ---------- Global resets: kill blur / softness / gradients ---------- */
html, body{ background:var(--dark) !important; }
*, *::before, *::after{
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  text-shadow:none !important;
}
body, input, textarea, button, select{
  font-family:'Space Grotesk','Sora',sans-serif !important;
}
::selection{ background:var(--yellow); color:var(--ink); }

/* soft round bits allowed only for perfect circles (avatars/dots/badges) */
.avatar, .u-avatar, .user-avatar, .profile-avatar, .story-avatar,
.nav-badge, .music-thumb, .music-selected-thumb, .toggle, .toggle-track,
.stat-card-icon, .step-dot, img.avatar, img[class*="avatar"]{
  border-radius:50% !important;
}

/* background orbs / grid decorations from old glass theme: hide */
.bg-orbs, .orb, .grid-bg, .orb1, .orb2, .orb3{ display:none !important; }

/* ---------- Headings / brand ---------- */
h1,h2,h3,.brand-logo,.card-title,.top-bar-title,.section-title,
.settings-section-title, .modal-title{
  font-family:'Archivo Black','Space Grotesk',sans-serif !important;
  letter-spacing:-0.5px !important;
}
.brand-logo{
  background:none !important;
  -webkit-text-fill-color:var(--paper) !important;
  color:var(--paper) !important;
  -webkit-text-stroke:2px var(--ink);
  text-shadow:4px 4px 0 var(--red) !important;
}

/* ---------- Top bar / nav ---------- */
.top-bar{
  background:var(--ink) !important;
  border-bottom:var(--nb-border) solid var(--paper) !important;
  backdrop-filter:none !important;
}
.back-btn, .btn-back{
  background:var(--paper) !important;
  color:var(--ink) !important;
  border:2px solid var(--ink) !important;
}
.back-btn:hover, .btn-back:hover{ background:var(--yellow) !important; }

.nav-bottom{
  background:var(--ink) !important;
  border-top:var(--nb-border) solid var(--paper) !important;
  backdrop-filter:none !important;
  box-shadow:0 -6px 0 rgba(0,0,0,0.0) !important;
}
.nav-item{ color:var(--paper) !important; opacity:.65; }
.nav-item:hover, .nav-item.active{ color:var(--yellow) !important; opacity:1; }
.nav-item.active i{ transform:translateY(-2px); }
.nav-create, .nav-btn.nav-create{
  background:var(--pink) !important;
  border:3px solid var(--ink) !important;
  box-shadow:var(--nb-shadow-sm) !important;
  transition:transform .12s, box-shadow .12s;
}
.nav-create:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--yellow) !important; }
.nav-badge{
  background:var(--yellow) !important; color:var(--ink) !important;
  border:2px solid var(--ink) !important; font-weight:800 !important;
}

/* ---------- Cards / containers ---------- */
.card, .section-card, .step-card, .stat-card, .settings-section,
.upload-progress, .success-banner, .music-selected, .owner-note,
.report-opt, .user-row, .modal, .modal-content, .glow-ring{
  background:var(--dark3) !important;
  border:var(--nb-border) solid var(--paper) !important;
  box-shadow:var(--nb-shadow) !important;
}
.section-card-title, .settings-section-title{
  color:var(--yellow) !important;
  text-transform:uppercase;
}

/* ---------- Buttons ---------- */
button, .btn-primary, .post-btn, .toggle-pw, .action-btn, .action-btn-sm,
.btn-next, .mpbtn, .music-clear{
  transition:transform .12s ease, box-shadow .12s ease !important;
}
.btn-primary, .post-btn, .btn-next{
  background:var(--pink) !important;
  color:var(--ink) !important;
  border:3px solid var(--ink) !important;
  box-shadow:var(--nb-shadow-sm) !important;
  font-weight:800 !important;
  background-image:none !important;
}
.btn-primary:hover, .post-btn:hover, .btn-next:hover{
  background:var(--yellow) !important; transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--pink) !important;
}
.btn-primary:active, .post-btn:active, .btn-next:active{
  transform:translate(3px,3px); box-shadow:1px 1px 0 var(--pink) !important;
}
.btn-primary:disabled, .post-btn:disabled{
  background:var(--dark3) !important; color:var(--sub) !important;
  box-shadow:none !important; border-color:var(--sub) !important;
}
.btn-secondary, .btn-google{
  background:var(--paper) !important; color:var(--ink) !important;
  border:3px solid var(--ink) !important; box-shadow:var(--nb-shadow-sm) !important;
  font-weight:700 !important;
}
.btn-secondary:hover, .btn-google:hover{ background:var(--cyan) !important; transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--pink) !important; }
.btn-secondary:active, .btn-google:active{ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--pink) !important; }

/* ---------- Inputs ---------- */
.form-input, .form-textarea, .form-inp, .form-input-adm, .tags-input,
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=search], textarea, select{
  background:var(--dark2) !important;
  border:3px solid var(--paper) !important;
  color:var(--paper) !important;
  box-shadow:none !important;
  font-weight:600 !important;
}
.form-input:focus, .form-textarea:focus, textarea:focus, input:focus{
  border-color:var(--yellow) !important;
  box-shadow:4px 4px 0 var(--yellow) !important;
  outline:none !important;
  background:var(--dark2) !important;
}
.form-label, .form-lbl{ color:var(--paper) !important; font-weight:800 !important; text-transform:uppercase; font-size:11px !important; }

/* ---------- Upload area ---------- */
.upload-area{
  border:3px dashed var(--paper) !important;
  background:var(--dark2) !important;
}
.upload-area:hover, .upload-area.drag{
  border-color:var(--yellow) !important; background:var(--dark3) !important;
}
.upload-type-badge{
  background:var(--dark2) !important; border:2px solid var(--paper) !important; color:var(--paper) !important;
}
.preview-wrap{ border:3px solid var(--paper) !important; box-shadow:var(--nb-shadow) !important; }

/* ---------- Tags / chips ---------- */
.tag-chip{
  background:var(--lime) !important; color:var(--ink) !important;
  border:2px solid var(--ink) !important; font-weight:800 !important;
}
.tag-chip button{ color:var(--ink) !important; }

/* ---------- Music / sound picker ---------- */
.music-search-results{
  background:var(--dark3) !important; border:3px solid var(--paper) !important;
  box-shadow:var(--nb-shadow) !important;
}
.music-result{ border-bottom:2px solid var(--dark2) !important; }
.music-result:hover{ background:var(--dark2) !important; }
.music-thumb, .music-selected-thumb{ border:2px solid var(--paper) !important; }
.music-yt-tag, .music-yt-link-badge{ color:var(--pink) !important; }
.music-selected{ background:var(--dark2) !important; border:3px solid var(--pink) !important; }
.sound-play-btn{
  width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--yellow);border:2px solid var(--ink);color:var(--ink);cursor:pointer;font-size:12px;
}
.sound-play-btn.playing{ background:var(--pink); color:var(--paper); }

/* ---------- Progress / success ---------- */
.progress-bar{ background:var(--dark2) !important; border:2px solid var(--paper) !important; }
.progress-fill{ background:var(--pink) !important; background-image:none !important; }
.success-banner{ border-color:var(--lime) !important; }
.success-banner i{ color:var(--lime) !important; }

/* ---------- Toast ---------- */
.v-toast{
  background:var(--ink) !important; border:3px solid var(--paper) !important;
  border-left:3px solid var(--paper) !important;
  box-shadow:var(--nb-shadow) !important; font-weight:700 !important;
}

/* ---------- Misc bits reused across pages ---------- */
.stat-card-num, .stat-num{ color:var(--yellow) !important; font-family:'Archivo Black',sans-serif !important; }
.toggle-track{ background:var(--dark2) !important; border:2px solid var(--paper) !important; }
.toggle.on .toggle-track, .toggle-track.on{ background:var(--lime) !important; }
.error-msg{ color:var(--pink) !important; font-weight:700 !important; }
a{ color:var(--cyan); }

/* auth tabs used on login/register page */
.auth-tabs{ display:flex; border:3px solid var(--paper); margin-bottom:20px; }
.auth-tab{ flex:1; text-align:center; padding:12px; cursor:pointer; font-weight:800; background:var(--dark2); color:var(--sub); }
.auth-tab.active{ background:var(--pink); color:var(--ink); }
.auth-tab:first-child{ border-right:3px solid var(--paper); }

.divider-or{ display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--sub); font-weight:700; font-size:12px; text-transform:uppercase; }
.divider-or::before, .divider-or::after{ content:''; flex:1; height:2px; background:var(--paper); opacity:.3; }

#googleSignInBtn{ display:flex; justify-content:center; }