/* =========================================================
   RAVEN-WISDOM
   COMPLETE STYLE SHEET
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {

  --bg:
    #070709;

  --bg-soft:
    #0b0b0f;

  --panel:
    #101014;

  --panel-2:
    #151519;

  --panel-3:
    #1b1b21;

  --text:
    #f5f5f7;

  --text-soft:
    #d7d7dc;

  --muted:
    #85858f;

  --muted-2:
    #5e5e67;

  --line:
    rgba(255,255,255,.08);

  --line-soft:
    rgba(255,255,255,.05);

  --line-strong:
    rgba(255,255,255,.15);

  --red:
    #e44352;

  --red-light:
    #ff6978;

  --gold:
    #c6a36b;

  --gold-light:
    #e1bf7d;

  --green:
    #00ff9c;

  --green-dark:
    #00a86b;

  --radius-sm:
    10px;

  --radius:
    18px;

  --radius-lg:
    26px;

  --radius-xl:
    30px;

  --shadow:
    0 35px 100px rgba(0,0,0,.58);

  --shadow-soft:
    0 18px 55px rgba(0,0,0,.28);

  --shadow-red:
    0 18px 50px rgba(228,67,82,.14);

  --transition:
    .22s cubic-bezier(.2,.7,.2,1);

}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing:
    border-box;
}

html {

  scroll-behavior:
    smooth;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(255,255,255,.15)
    transparent;
}

body {

  margin:
    0;

  min-height:
    100vh;

  overflow-x:
    hidden;

  color:
    var(--text);

  background:

    radial-gradient(
      circle at 80% -10%,
      rgba(228,67,82,.14),
      transparent 30%
    ),

    radial-gradient(
      circle at 5% 35%,
      rgba(198,163,107,.035),
      transparent 25%
    ),

    var(--bg);

  font-family:
    "DM Sans",
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}

body.modal-open {
  overflow:
    hidden;
}

body::-webkit-scrollbar {
  width:
    8px;
}

body::-webkit-scrollbar-track {
  background:
    transparent;
}

body::-webkit-scrollbar-thumb {

  background:
    rgba(255,255,255,.12);

  border-radius:
    999px;
}

button,
input,
select,
textarea {
  font:
    inherit;
}

button {
  cursor:
    pointer;
}

button:disabled {
  cursor:
    not-allowed;

  opacity:
    .55;
}

a {
  color:
    inherit;

  text-decoration:
    none;
}

img {
  display:
    block;

  max-width:
    100%;
}

[hidden] {
  display:
    none !important;
}

::selection {

  background:
    rgba(228,67,82,.28);

  color:
    #fff;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

  outline:
    2px solid
    rgba(255,105,120,.8);

  outline-offset:
    3px;
}


/* =========================================================
   NOISE
   ========================================================= */

.noise {

  position:
    fixed;

  inset:
    0;

  z-index:
    999;

  pointer-events:
    none;

  opacity:
    .025;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
    );

  mix-blend-mode:
    screen;
}


/* =========================================================
   HEADER
   ========================================================= */

.header {

  position:
    sticky;

  top:
    0;

  z-index:
    100;

  min-height:
    78px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    0 clamp(14px,5vw,75px);

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(7,7,9,.84);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}

.header::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    -1px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(228,67,82,.18),
      transparent
    );

  pointer-events:
    none;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  flex:
    0 0 auto;
}

.brand-icon {

  width:
    37px;

  height:
    37px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    10px;

  background:
    linear-gradient(
      145deg,
      #26262c,
      #08080a
    );

  color:
    #fff;

  font:
    800 17px
    "Manrope",
    sans-serif;

  transform:
    skewX(-7deg);
}

.brand-name {

  color:
    #fff;

  font:
    800 14px
    "Manrope",
    sans-serif;

  letter-spacing:
    .24em;

  white-space:
    nowrap;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.nav {

  display:
    flex;

  align-items:
    center;

  gap:
    2px;

  margin:
    0 auto;
}

.nav-link {

  position:
    relative;

  padding:
    10px 12px;

  color:
    var(--muted);

  font-size:
    12px;

  transition:
    var(--transition);
}

.nav-link:hover,
.nav-link.active {

  color:
    #fff;
}

.nav-link.active::after {

  content:
    "";

  position:
    absolute;

  left:
    12px;

  right:
    12px;

  bottom:
    0;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(--red);

  box-shadow:
    0 0 15px
    rgba(228,67,82,.32);
}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex:
    0 0 auto;
}

.guest-actions,
.authenticated-actions {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


/* =========================================================
   HEADER BUTTONS
   ========================================================= */

.login-header,
.signup-header,
.upload-btn {

  min-height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  border:
    1px solid
    var(--line);

  border-radius:
    999px;

  color:
    #d7d7dc;

  font-size:
    10px;

  font-weight:
    700;

  transition:
    var(--transition);
}

.login-header {

  padding:
    0 13px;

  background:
    transparent;
}

.signup-header {

  padding:
    0 15px;

  background:
    rgba(255,255,255,.03);
}

.upload-btn {

  padding:
    0 15px;

  background:
    rgba(255,255,255,.025);
}

.upload-btn span {

  margin-right:
    4px;

  color:
    var(--red-light);

  font-size:
    14px;
}

.login-header:hover,
.signup-header:hover,
.upload-btn:hover {

  color:
    #fff;

  border-color:
    var(--line-strong);

  transform:
    translateY(-1px);
}

.signup-header:hover {

  background:
    rgba(228,67,82,.07);

  border-color:
    rgba(228,67,82,.3);
}


/* =========================================================
   USER MENU
   ========================================================= */

.user-menu {

  position:
    relative;
}

.user-chip {

  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    4px 10px 4px 5px;

  border:
    1px solid
    var(--line);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.025);

  color:
    #fff;

  transition:
    var(--transition);
}

.user-chip:hover {

  border-color:
    var(--line-strong);

  background:
    rgba(255,255,255,.045);
}

.user-avatar {

  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border-radius:
    50%;

  background:
    linear-gradient(
      145deg,
      #34343b,
      #09090b
    );

  color:
    var(--red-light);

  font:
    800 11px
    "Manrope",
    sans-serif;
}

.user-avatar img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.user-chip-name {

  max-width:
    110px;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    10px;

  font-weight:
    600;
}

.user-chevron {

  display:
    grid;

  place-items:
    center;

  color:
    var(--muted);
}

.user-chevron svg {

  width:
    13px;

  height:
    13px;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu-button {

  display:
    none;

  width:
    40px;

  height:
    40px;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  background:
    rgba(255,255,255,.025);

  color:
    #fff;
}

.mobile-menu-button svg {

  width:
    19px;

  height:
    19px;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu {

  position:
    fixed;

  top:
    78px;

  left:
    10px;

  right:
    10px;

  z-index:
    95;

  border:
    1px solid
    var(--line);

  border-radius:
    18px;

  background:
    rgba(15,15,18,.97);

  box-shadow:
    var(--shadow);

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);
}

.mobile-menu-inner {

  display:
    grid;

  gap:
    4px;

  padding:
    10px;
}

.mobile-nav-link {

  display:
    block;

  padding:
    13px 12px;

  border-radius:
    11px;

  color:
    var(--text-soft);

  font-size:
    12px;

  transition:
    var(--transition);
}

.mobile-nav-link:hover {

  background:
    rgba(255,255,255,.04);

  color:
    #fff;
}

.mobile-auth-actions {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    8px;

  margin-top:
    7px;

  padding-top:
    10px;

  border-top:
    1px solid
    var(--line);
}

.mobile-login-button,
.mobile-signup-button {

  min-height:
    43px;

  border:
    1px solid
    var(--line);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.025);

  color:
    #fff;

  font-size:
    10px;

  font-weight:
    700;

  transition:
    var(--transition);
}

.mobile-login-button:hover {

  border-color:
    var(--line-strong);

  background:
    rgba(255,255,255,.05);
}

.mobile-signup-button {

  background:
    rgba(228,67,82,.1);

  border-color:
    rgba(228,67,82,.28);

  color:
    var(--red-light);
}

.mobile-signup-button:hover {

  background:
    rgba(228,67,82,.15);

  border-color:
    rgba(228,67,82,.4);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {

  width:
    min(1280px,100%);

  min-height:
    calc(100vh - 78px);

  margin:
    auto;

  padding:
    76px 24px 100px;

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  align-items:
    center;

  gap:
    25px;
}

.hero-content {

  position:
    relative;

  z-index:
    10;

  max-width:
    720px;
}

.eyebrow {

  display:
    block;

  margin-bottom:
    17px;

  color:
    var(--gold);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .25em;

  text-transform:
    uppercase;
}

.hero h1 {

  margin:
    0;

  font:
    800 clamp(61px,8.6vw,114px)
    "Manrope",
    sans-serif;

  line-height:
    .86;

  letter-spacing:
    -.07em;
}

.hero h1 span {

  display:
    block;

  color:
    var(--red);

  text-shadow:
    0 15px 45px
    rgba(228,67,82,.1);
}

.hero-text {

  max-width:
    500px;

  margin:
    28px 0 0;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.85;
}

.hero-buttons {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    30px;
}

.button {

  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  padding:
    0 18px;

  border-radius:
    999px;

  font-size:
    11px;

  font-weight:
    700;

  transition:
    var(--transition);
}

.button svg {

  width:
    16px;

  height:
    16px;
}

.button.primary {

  border:
    0;

  background:
    var(--red);

  color:
    #fff;

  box-shadow:
    var(--shadow-red);
}

.button.primary:hover {

  background:
    var(--red-light);

  transform:
    translateY(-2px);
}

.button.secondary {

  border:
    1px solid
    var(--line);

  background:
    rgba(255,255,255,.02);

  color:
    #c9c9cf;
}

.button.secondary:hover {

  border-color:
    var(--line-strong);

  background:
    rgba(255,255,255,.045);

  color:
    #fff;

  transform:
    translateY(-2px);
}

.hero-guest-note {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    18px;

  color:
    var(--muted-2);

  font-size:
    9px;
}

.hero-guest-note span + span::before {

  content:
    "•";

  margin-right:
    10px;

  color:
    var(--red);
}

.hero-stats {

  display:
    flex;

  gap:
    30px;

  margin-top:
    42px;
}

.hero-stats div {

  display:
    grid;

  gap:
    4px;
}

.hero-stats strong {

  font:
    700 17px
    "Manrope",
    sans-serif;
}

.hero-stats span {

  color:
    var(--muted-2);

  font-size:
    8px;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


/* =========================================================
   HERO RAVEN IMAGE
   ========================================================= */

.hero-raven {

  position:
    relative;

  min-height:
    630px;

  display:
    grid;

  place-items:
    center;
}

.raven-glow {

  position:
    absolute;

  width:
    520px;

  aspect-ratio:
    1;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(228,67,82,.2),
      rgba(228,67,82,.04) 43%,
      transparent 72%
    );

  filter:
    blur(9px);

  animation:
    ravenGlow 5s ease-in-out infinite;
}

@keyframes ravenGlow {

  0%,
  100% {

    transform:
      scale(1);

    opacity:
      .85;
  }

  50% {

    transform:
      scale(1.04);

    opacity:
      1;
  }

}

.raven-frame {

  position:
    relative;

  z-index:
    4;

  width:
    min(500px,92%);

  aspect-ratio:
    4 / 5;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:
    19px;

  background:
    #050507;

  box-shadow:
    0 35px 95px
    rgba(0,0,0,.7);

  transform:
    rotate(2deg);

  transition:
    .5s cubic-bezier(.2,.7,.2,1);
}

.raven-frame:hover {

  transform:
    rotate(0)
    scale(1.015);

  border-color:
    rgba(228,67,82,.3);
}

.raven-image {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  filter:
    brightness(.7)
    contrast(1.1)
    saturate(.7);

  transition:
    .5s ease;
}

.raven-frame:hover .raven-image {

  transform:
    scale(1.035);

  filter:
    brightness(.77)
    contrast(1.12)
    saturate(.8);
}

.image-overlay {

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.03),
      rgba(0,0,0,.5)
    );

  pointer-events:
    none;
}

.image-corner {

  position:
    absolute;

  z-index:
    5;

  width:
    34px;

  height:
    34px;

  pointer-events:
    none;
}

.top-left {

  left:
    15px;

  top:
    15px;

  border-top:
    1px solid rgba(255,255,255,.48);

  border-left:
    1px solid rgba(255,255,255,.48);
}

.top-right {

  right:
    15px;

  top:
    15px;

  border-top:
    1px solid rgba(255,255,255,.48);

  border-right:
    1px solid rgba(255,255,255,.48);
}

.bottom-left {

  left:
    15px;

  bottom:
    15px;

  border-left:
    1px solid rgba(255,255,255,.48);

  border-bottom:
    1px solid rgba(255,255,255,.48);
}

.bottom-right {

  right:
    15px;

  bottom:
    15px;

  border-right:
    1px solid rgba(255,255,255,.48);

  border-bottom:
    1px solid rgba(255,255,255,.48);
}

.raven-label {

  position:
    absolute;

  right:
    3%;

  bottom:
    5%;

  z-index:
    7;

  display:
    grid;

  text-align:
    right;

  pointer-events:
    none;
}

.raven-label strong {

  color:
    rgba(255,255,255,.25);

  font:
    800 18px
    "Manrope",
    sans-serif;

  letter-spacing:
    .22em;
}

.raven-label span {

  color:
    var(--red);

  font:
    700 8px
    "Manrope",
    sans-serif;

  letter-spacing:
    .37em;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {

  width:
    min(1250px,100%);

  margin:
    auto;

  padding:
    90px 24px;
}

.section-header {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    25px;

  margin-bottom:
    27px;
}

.section-header h2 {

  margin:
    0;

  font:
    800 clamp(34px,5vw,54px)
    "Manrope",
    sans-serif;

  letter-spacing:
    -.055em;
}

.section-description {

  max-width:
    360px;

  margin:
    0;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.75;
}

.accounts-note {

  margin:
    -10px 0 20px;

  color:
    var(--muted-2);

  font-size:
    10px;
}


/* =========================================================
   SEARCH
   ========================================================= */

.search {

  position:
    relative;

  width:
    min(420px,100%);
}

.search svg {

  position:
    absolute;

  left:
    14px;

  top:
    50%;

  width:
    18px;

  height:
    18px;

  transform:
    translateY(-50%);

  color:
    var(--muted);

  pointer-events:
    none;
}

.search input {

  width:
    100%;

  height:
    51px;

  padding:
    0 78px 0 43px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  outline:
    none;

  background:
    var(--panel);

  color:
    #fff;

  font-size:
    12px;

  transition:
    var(--transition);
}

.search input::placeholder {

  color:
    var(--muted-2);
}

.search input:hover {

  border-color:
    rgba(255,255,255,.11);
}

.search input:focus {

  border-color:
    rgba(228,67,82,.55);

  box-shadow:
    0 0 0 4px
    rgba(228,67,82,.07);
}

.search kbd {

  position:
    absolute;

  right:
    9px;

  top:
    50%;

  transform:
    translateY(-50%);

  padding:
    4px 7px;

  border:
    1px solid
    var(--line);

  border-radius:
    6px;

  background:
    rgba(255,255,255,.025);

  color:
    var(--muted);

  font-size:
    8px;

  pointer-events:
    none;
}


/* =========================================================
   STATS
   ========================================================= */

.stats {

  display:
    flex;

  margin-bottom:
    20px;

  overflow-x:
    auto;

  scrollbar-width:
    none;
}

.stats::-webkit-scrollbar {
  display:
    none;
}

.stat {

  min-width:
    120px;

  margin-right:
    29px;

  padding-right:
    29px;

  border-right:
    1px solid
    var(--line);
}

.stat:last-child {
  border:
    0;
}

.stat strong {

  display:
    block;

  font:
    700 26px
    "Manrope",
    sans-serif;
}

.stat span {

  color:
    var(--muted);

  font-size:
    9px;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


/* =========================================================
   LIBRARY FILTER
   ========================================================= */

.library-filter-bar {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  width:
    fit-content;

  max-width:
    100%;

  margin-bottom:
    15px;

  padding:
    7px 8px 7px 11px;

  border:
    1px solid
    var(--line);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.025);

  color:
    var(--muted);

  font-size:
    9px;
}

.library-filter-bar strong {

  max-width:
    240px;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  color:
    var(--text-soft);
}

.library-filter-bar button {

  border:
    0;

  padding:
    4px 8px;

  border-radius:
    999px;

  background:
    rgba(228,67,82,.08);

  color:
    var(--red-light);

  font-size:
    8px;

  transition:
    var(--transition);
}

.library-filter-bar button:hover {

  background:
    rgba(228,67,82,.14);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty-state {

  padding:
    75px 24px;

  border:
    1px dashed
    rgba(255,255,255,.12);

  border-radius:
    var(--radius);

  background:
    rgba(255,255,255,.012);

  text-align:
    center;
}

.empty-mark {

  width:
    64px;

  height:
    64px;

  display:
    grid;

  place-items:
    center;

  margin:
    0 auto 20px;

  border:
    1px solid
    rgba(228,67,82,.25);

  border-radius:
    50%;

  background:
    rgba(228,67,82,.07);

  color:
    var(--red);

  font:
    800 24px
    "Manrope",
    sans-serif;
}

.empty-state h3 {

  margin:
    0;

  font:
    700 23px
    "Manrope",
    sans-serif;
}

.empty-state p {

  max-width:
    500px;

  margin:
    10px auto 24px;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.7;
}


/* =========================================================
   TRACK LIST
   Supports:
   .track
   .track-card
   ========================================================= */

.track-list {

  display:
    grid;

  gap:
    8px;
}

.track,
.track-card {

  position:
    relative;

  min-height:
    82px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    11px 13px;

  border:
    1px solid
    transparent;

  border-radius:
    17px;

  background:
    rgba(255,255,255,.022);

  transition:
    var(--transition);
}

.track:hover,
.track-card:hover {

  border-color:
    var(--line);

  background:
    rgba(255,255,255,.035);

  transform:
    translateY(-1px);
}

.track-main {

  min-width:
    0;

  flex:
    1;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}

.track-play-button {

  width:
    39px;

  height:
    39px;

  min-width:
    39px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    var(--line);

  border-radius:
    50%;

  background:
    rgba(255,255,255,.03);

  color:
    #fff;

  transition:
    var(--transition);
}

.track-play-button:hover {

  color:
    var(--red-light);

  border-color:
    var(--red);

  background:
    rgba(228,67,82,.06);

  transform:
    scale(1.04);
}

.track-play-button svg {

  width:
    16px;

  height:
    16px;
}

.track-info {

  min-width:
    0;

  flex:
    1;
}

.track-title {

  display:
    block;

  max-width:
    100%;

  margin:
    0;

  padding:
    0;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  color:
    #fff;

  font-size:
    14px;

  font-weight:
    700;
}

.track-title:hover {
  color:
    var(--red-light);
}

.track-meta {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin-top:
    7px;
}

.track-meta span {

  padding:
    3px 7px;

  border:
    1px solid
    var(--line);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.012);

  color:
    var(--muted);

  font-size:
    8px;
}

.track-uploader {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  margin-top:
    7px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--muted-2);

  font-size:
    9px;

  transition:
    var(--transition);
}

.track-uploader:hover {

  color:
    var(--gold);
}

.track-uploader svg {

  width:
    12px;

  height:
    12px;
}

.track-actions {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  flex:
    0 0 auto;
}

.track-actions .icon-button {

  width:
    37px;

  height:
    37px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    var(--line);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.03);

  color:
    var(--muted);

  transition:
    var(--transition);
}

.track-actions .icon-button:hover {

  border-color:
    rgba(228,67,82,.3);

  background:
    rgba(228,67,82,.06);

  color:
    #fff;

  transform:
    translateY(-1px);
}

.track-actions
.icon-button.danger:hover {

  border-color:
    rgba(228,67,82,.35);

  background:
    rgba(228,67,82,.08);

  color:
    var(--red-light);
}

.track-actions .icon-button svg {

  width:
    16px;

  height:
    16px;
}


/* =========================================================
   ALPHABET
   ========================================================= */

#alphabet,
.alphabet {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    7px;

  margin:
    24px auto 28px;
}

#alphabet button,
.alphabet button,
.letter {

  appearance:
    none;

  width:
    40px;

  height:
    40px;

  min-width:
    40px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    var(--line);

  border-radius:
    10px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );

  color:
    var(--muted);

  font:
    700 11px
    "Manrope",
    sans-serif;

  transition:
    var(--transition);
}

#alphabet button:hover,
.alphabet button:hover,
.letter:hover {

  color:
    #fff;

  border-color:
    rgba(228,67,82,.34);

  background:
    rgba(228,67,82,.065);

  transform:
    translateY(-2px);
}

#alphabet button.active,
.alphabet button.active,
.letter.active {

  color:
    #fff;

  border-color:
    var(--red);

  background:
    var(--red);

  box-shadow:
    0 10px 25px
    rgba(228,67,82,.13);
}

#alphabet button:first-child {

  width:
    60px;

  min-width:
    60px;
}

#alphabet button:last-child {

  font-size:
    14px;
}


/* =========================================================
   BANDS
   ========================================================= */

.bands-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    10px;
}

.band-card {

  position:
    relative;

  width:
    100%;

  min-height:
    145px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    13px;

  padding:
    18px;

  border:
    1px solid
    var(--line);

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.008)
    );

  color:
    #fff;

  text-align:
    left;

  overflow:
    hidden;

  transition:
    var(--transition);
}

.band-card::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  width:
    40px;

  height:
    2px;

  background:
    var(--red);

  opacity:
    .75;
}

.band-card:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(228,67,82,.28);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(228,67,82,.018)
    );

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.22);
}

.band-card-letter,
.band-initial {

  width:
    40px;

  height:
    40px;

  min-width:
    40px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(228,67,82,.28);

  border-radius:
    11px;

  background:
    rgba(228,67,82,.045);

  color:
    var(--red-light);

  font:
    800 13px
    "Manrope",
    sans-serif;
}

.band-card-info {

  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}

.band-card-info strong,
.band-name {

  display:
    block;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  color:
    #fff;

  font:
    700 15px
    "Manrope",
    sans-serif;
}

.band-card-info span {

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  color:
    var(--muted);

  font-size:
    10px;
}

.band-card-info small,
.band-count {

  margin-top:
    5px;

  color:
    var(--muted-2);

  font-size:
    9px;
}


/* =========================================================
   ACCOUNTS
   ========================================================= */

.account-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    10px;
}

.account-card {

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    16px;

  border:
    1px solid
    var(--line);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.02);

  color:
    #fff;

  text-align:
    left;

  transition:
    var(--transition);
}

.account-card:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(228,67,82,.24);

  background:
    rgba(255,255,255,.03);

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.18);
}

.account-avatar {

  width:
    47px;

  height:
    47px;

  flex:
    0 0 auto;

  overflow:
    hidden;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    linear-gradient(
      145deg,
      #313139,
      #09090b
    );

  color:
    var(--red-light);

  font:
    800 14px
    "Manrope",
    sans-serif;
}

.account-avatar img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.account-info,
.account-text {

  min-width:
    0;

  flex:
    1;
}

.account-info strong,
.account-name {

  display:
    block;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  color:
    #fff;

  font:
    700 13px
    "Manrope",
    sans-serif;
}

.account-info span,
.account-username {

  display:
    block;

  margin-top:
    4px;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  color:
    var(--muted);

  font-size:
    10px;
}

.account-card > svg {

  width:
    15px;

  height:
    15px;

  flex:
    0 0 auto;

  color:
    var(--muted-2);
}


/* =========================================================
   MY PLAYLISTS
   ========================================================= */

.playlist-grid,
#playlistGrid {

  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    14px;

  margin-top:
    24px;
}

.playlist-card {

  position:
    relative;

  min-height:
    180px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    15px;

  padding:
    20px;

  border:
    1px solid
    var(--line);

  border-radius:
    20px;

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(228,67,82,.075),
      transparent 38%
    ),

    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.008)
    );

  overflow:
    hidden;

  transition:
    var(--transition);
}

.playlist-card::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  width:
    55px;

  height:
    2px;

  background:
    var(--red);

  box-shadow:
    0 0 18px
    rgba(228,67,82,.22);

  opacity:
    .8;
}

.playlist-card:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(228,67,82,.25);

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(228,67,82,.105),
      transparent 40%
    ),

    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.01)
    );

  box-shadow:
    0 20px 55px
    rgba(0,0,0,.28);
}

.playlist-card-icon {

  width:
    55px;

  height:
    55px;

  min-width:
    55px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(228,67,82,.2);

  border-radius:
    15px;

  background:

    radial-gradient(
      circle at 30% 20%,
      rgba(228,67,82,.18),
      transparent 42%
    ),

    linear-gradient(
      145deg,
      #25252b,
      #09090b
    );

  color:
    var(--red-light);

  transition:
    var(--transition);
}

.playlist-card:hover
.playlist-card-icon {

  transform:
    scale(1.035);

  border-color:
    rgba(228,67,82,.36);
}

.playlist-card-icon svg {

  width:
    23px;

  height:
    23px;

  stroke-width:
    1.8;
}

.playlist-card-content {

  min-width:
    0;

  flex:
    1;

  padding-top:
    2px;
}

.playlist-card-content h3,
.playlist-name {

  margin:
    0;

  color:
    #fff;

  font:
    700 16px
    "Manrope",
    sans-serif;

  line-height:
    1.45;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

.playlist-card-content p,
.playlist-description {

  margin:
    7px 0 12px;

  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.65;

  display:
    -webkit-box;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:2;

  overflow:
    hidden;
}

.playlist-card-content > span,
.playlist-count {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--gold);

  font-size:
    9px;

  font-weight:
    600;
}

.playlist-card-content > span::before {

  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--red-light);

  box-shadow:
    0 0 9px
    rgba(255,105,120,.38);
}

.playlist-card-actions,
.playlist-actions {

  position:
    relative;

  z-index:
    3;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}

.playlist-card-actions
.icon-button {

  width:
    37px;

  height:
    37px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    var(--line);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.025);

  color:
    var(--muted);

  transition:
    var(--transition);
}

.playlist-card-actions
.icon-button:hover {

  color:
    #fff;

  border-color:
    rgba(228,67,82,.32);

  background:
    rgba(228,67,82,.07);

  transform:
    translateY(-1px);
}

.playlist-card-actions
.icon-button.danger:hover {

  color:
    var(--red-light);

  border-color:
    rgba(228,67,82,.34);

  background:
    rgba(228,67,67,.08);
}

.playlist-card-actions
.icon-button svg {

  width:
    16px;

  height:
    16px;
}


/* Legacy-compatible playlist buttons */

.playlist-open,
.playlist-delete {

  min-height:
    37px;

  flex:
    1;

  border:
    1px solid
    var(--line);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.025);

  color:
    #d4d4d9;

  font-size:
    9px;

  font-weight:
    700;

  transition:
    var(--transition);
}

.playlist-open:hover {

  border-color:
    rgba(228,67,82,.3);

  background:
    rgba(228,67,82,.06);

  color:
    #fff;
}

.playlist-delete {

  color:
    var(--muted-2);

  background:
    transparent;
}

.playlist-delete:hover {

  color:
    var(--red-light);

  border-color:
    rgba(228,67,82,.28);

  background:
    rgba(228,67,82,.045);
}


/* =========================================================
   CREATE PLAYLIST BUTTON
   ========================================================= */

#createPlaylistButton {

  min-height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(228,67,82,.25);

  border-radius:
    11px;

  background:
    rgba(228,67,82,.06);

  color:
    var(--red-light);

  font-size:
    10px;

  font-weight:
    700;

  transition:
    var(--transition);
}

#createPlaylistButton:hover {

  transform:
    translateY(-2px);

  border-color:
    rgba(228,67,82,.42);

  background:
    rgba(228,67,82,.1);

  box-shadow:
    0 10px 25px
    rgba(228,67,82,.08);
}

#createPlaylistButton svg {

  width:
    16px;

  height:
    16px;
}


/* =========================================================
   EMPTY PLAYLIST
   ========================================================= */

#playlistGrid .empty-inline {

  grid-column:
    1 / -1;

  min-height:
    190px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    30px;

  border:
    1px dashed
    rgba(255,255,255,.11);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.012);

  color:
    var(--muted);

  text-align:
    center;
}

#playlistGrid .empty-inline svg {

  width:
    29px;

  height:
    29px;

  margin-bottom:
    3px;

  color:
    var(--red-light);
}

#playlistGrid .empty-inline p {

  margin:
    0;

  font-size:
    11px;
}


/* =========================================================
   PLAYLIST PICKER
   ========================================================= */

.playlist-picker,
#playlistPicker {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  margin:
    20px 0;

  max-height:
    340px;

  overflow-y:
    auto;
}

#playlistPicker::-webkit-scrollbar {

  width:
    6px;
}

#playlistPicker::-webkit-scrollbar-thumb {

  background:
    rgba(255,255,255,.1);

  border-radius:
    999px;
}

.playlist-picker-item,
.playlist-option {

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    12px 13px;

  border:
    1px solid
    var(--line);

  border-radius:
    13px;

  background:
    rgba(255,255,255,.025);

  color:
    #fff;

  text-align:
    left;

  transition:
    var(--transition);
}

.playlist-picker-item:hover,
.playlist-option:hover {

  transform:
    translateX(2px);

  border-color:
    rgba(228,67,82,.3);

  background:
    rgba(228,67,82,.045);
}

.playlist-picker-item
> span:first-child {

  width:
    38px;

  height:
    38px;

  min-width:
    38px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    10px;

  background:
    rgba(228,67,82,.065);

  color:
    var(--red-light);
}

.playlist-picker-item
> span:last-child {

  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.playlist-picker-item strong,
.playlist-option strong {

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  font-size:
    12px;
}

.playlist-picker-item small,
.playlist-option span {

  color:
    var(--muted);

  font-size:
    9px;
}


/* =========================================================
   PLAYLIST VIEW MODAL
   ========================================================= */

.playlist-view-modal {

  width:
    min(760px,100%);

  max-height:
    94vh;
}

.playlist-view-modal h2 {

  max-width:
    calc(100% - 50px);

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

.playlist-tracks-list,
#playlistTracksList {

  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;

  max-height:
    61vh;

  overflow-y:
    auto;

  margin-top:
    20px;

  padding-right:
    3px;
}

.playlist-tracks-list::-webkit-scrollbar,
#playlistTracksList::-webkit-scrollbar {

  width:
    6px;
}

.playlist-tracks-list::-webkit-scrollbar-thumb,
#playlistTracksList::-webkit-scrollbar-thumb {

  background:
    rgba(255,255,255,.1);

  border-radius:
    999px;
}

.playlist-track-row {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    11px 12px;

  border:
    1px solid
    var(--line);

  border-radius:
    15px;

  background:
    rgba(255,255,255,.025);

  transition:
    var(--transition);
}

.playlist-track-row:hover {

  border-color:
    rgba(255,255,255,.12);

  background:
    rgba(255,255,255,.04);

  transform:
    translateY(-1px);
}

.playlist-track-row
.track-play-button {

  width:
    38px;

  height:
    38px;

  min-width:
    38px;

  border:
    1px solid
    rgba(228,67,82,.2);

  border-radius:
    10px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  color:
    var(--red-light);

  background:
    rgba(228,67,82,.055);

  transition:
    var(--transition);
}

.playlist-track-row
.track-play-button:hover {

  transform:
    scale(1.04);

  background:
    rgba(228,67,82,.1);
}

.playlist-track-row
.track-play-button svg {

  width:
    16px;

  height:
    16px;
}

.playlist-track-info {

  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}

.playlist-track-info strong {

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  color:
    #fff;

  font-size:
    13px;

  font-weight:
    700;
}

.playlist-track-info span {

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;

  color:
    var(--muted);

  font-size:
    10px;
}

.playlist-track-row
> .icon-button {

  width:
    35px;

  height:
    35px;

  min-width:
    35px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    var(--line);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.025);

  color:
    var(--muted);

  transition:
    var(--transition);
}

.playlist-track-row
> .icon-button:hover {

  color:
    #fff;

  border-color:
    var(--line-strong);

  background:
    rgba(255,255,255,.05);
}

.playlist-track-row
> .icon-button.danger:hover {

  color:
    var(--red-light);

  border-color:
    rgba(228,67,82,.3);

  background:
    rgba(228,67,82,.07);
}


/* =========================================================
   PROFILE
   ========================================================= */

.profile-panel {

  display:
    flex;

  align-items:
    center;

  gap:
    22px;

  padding:
    27px;

  border:
    1px solid
    var(--line);

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.008)
    );
}

.profile-avatar {

  width:
    100px;

  height:
    100px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  flex:
    0 0 auto;

  border:
    1px solid
    rgba(228,67,82,.25);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle at 35% 25%,
      #3d3d45,
      #09090b
    );

  color:
    var(--red-light);

  font:
    800 30px
    "Manrope",
    sans-serif;
}

.profile-avatar img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.profile-main {

  min-width:
    0;
}

.profile-main h2 {

  margin:
    0;

  font:
    800 31px
    "Manrope",
    sans-serif;
}

.profile-main p {

  margin:
    7px 0 16px;

  color:
    var(--muted);

  font-size:
    11px;
}

.profile-logout {

  min-height:
    35px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(228,67,82,.24);

  border-radius:
    999px;

  background:
    transparent;

  color:
    var(--red-light);

  font-size:
    10px;

  transition:
    var(--transition);
}

.profile-logout:hover {

  background:
    rgba(228,67,82,.06);

  border-color:
    rgba(228,67,82,.4);
}


/* =========================================================
   PLAYER
   ========================================================= */

.player {

  position:
    fixed;

  left:
    50%;

  bottom:
    17px;

  z-index:
    130;

  transform:
    translateX(-50%);

  width:
    min(1120px,calc(100% - 24px));

  min-height:
    78px;

  display:
    grid;

  grid-template-columns:
    minmax(180px,1fr)
    auto
    minmax(250px,1.35fr)
    auto;

  align-items:
    center;

  gap:
    18px;

  padding:
    10px 14px 10px 11px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:
    21px;

  background:
    rgba(13,13,16,.96);

  box-shadow:
    var(--shadow);

  backdrop-filter:
    blur(25px);

  -webkit-backdrop-filter:
    blur(25px);
}

.player-song {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}

.player-cover {

  width:
    52px;

  height:
    52px;

  min-width:
    52px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  border-radius:
    13px;

  background:
    linear-gradient(
      145deg,
      #2a2a30,
      #08080a
    );

  font:
    800 17px
    "Manrope",
    sans-serif;
}

.player-cover img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.player-info {

  min-width:
    0;
}

.player-info strong,
.player-info span {

  display:
    block;

  overflow:
    hidden;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}

.player-info strong {

  font-size:
    12px;
}

.player-info span {

  margin-top:
    3px;

  color:
    var(--muted);

  font-size:
    10px;
}

.player-controls {

  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}

.player-btn,
.player-main {

  width:
    39px;

  height:
    39px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  transition:
    var(--transition);
}

.player-btn {

  background:
    rgba(255,255,255,.04);

  color:
    #c8c8cd;
}

.player-btn:hover {

  background:
    rgba(255,255,255,.08);

  color:
    #fff;
}

.player-main {

  background:
    var(--red);

  color:
    #fff;

  box-shadow:
    0 10px 28px
    rgba(228,67,82,.18);
}

.player-main:hover {

  background:
    var(--red-light);

  transform:
    scale(1.04);
}

.player-progress {

  display:
    grid;

  grid-template-columns:
    35px 1fr 35px;

  gap:
    8px;

  align-items:
    center;

  color:
    var(--muted);

  font-size:
    9px;
}

.player-progress input {

  width:
    100%;

  accent-color:
    var(--red);

  cursor:
    pointer;
}

.player-close {

  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    transparent;

  border-radius:
    50%;

  background:
    transparent;

  color:
    var(--muted-2);

  transition:
    var(--transition);
}

.player-close:hover {

  border-color:
    var(--line);

  background:
    rgba(255,255,255,.03);

  color:
    #fff;
}


/* =========================================================
   MODALS
   ========================================================= */

.modal-backdrop {

  position:
    fixed;

  inset:
    0;

  z-index:
    200;

  display:
    grid;

  place-items:
    center;

  padding:
    18px;

  background:
    rgba(0,0,0,.79);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  animation:
    modalBackdropIn .18s ease;
}

@keyframes modalBackdropIn {

  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }

}

.modal {

  position:
    relative;

  width:
    min(610px,100%);

  max-height:
    94vh;

  overflow-y:
    auto;

  padding:
    29px;

  border:
    1px solid
    var(--line);

  border-radius:
    28px;

  background:
    linear-gradient(
      145deg,
      #111114,
      #0d0d10
    );

  box-shadow:
    var(--shadow);

  animation:
    modalIn .22s cubic-bezier(.2,.7,.2,1);
}

@keyframes modalIn {

  from {

    opacity:
      0;

    transform:
      translateY(9px)
      scale(.985);
  }

  to {

    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }

}

.modal::-webkit-scrollbar {
  width:
    6px;
}

.modal::-webkit-scrollbar-thumb {

  background:
    rgba(255,255,255,.1);

  border-radius:
    999px;
}

.modal-close {

  position:
    absolute;

  top:
    15px;

  right:
    15px;

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    var(--line);

  border-radius:
    50%;

  background:
    transparent;

  color:
    #aaaab0;

  transition:
    var(--transition);
}

.modal-close:hover {

  border-color:
    rgba(228,67,82,.25);

  background:
    rgba(228,67,82,.05);

  color:
    var(--red-light);
}

.modal h2 {

  margin:
    0;

  font:
    800 38px
    "Manrope",
    sans-serif;

  letter-spacing:
    -.05em;
}

.modal-description {

  margin:
    10px 0 22px;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.7;
}


/* =========================================================
   AUTH
   ========================================================= */

.auth-panel {
  padding-top:
    4px;
}


/* =========================================================
   FORMS
   ========================================================= */

.form-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    12px;

  margin-top:
    13px;
}

.field {

  display:
    grid;

  gap:
    7px;

  margin-top:
    13px;
}

.form-grid .field {
  margin-top:
    0;
}

.field > span {

  color:
    #9797a0;

  font-size:
    10px;

  font-weight:
    600;
}

.field input,
.field select,
.field textarea {

  width:
    100%;

  min-height:
    45px;

  padding:
    10px 12px;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  outline:
    none;

  resize:
    vertical;

  background:
    #0b0b0d;

  color:
    #fff;

  font-size:
    12px;

  transition:
    var(--transition);
}

.field input::placeholder,
.field textarea::placeholder {

  color:
    var(--muted-2);
}

.field input:focus,
.field select:focus,
.field textarea:focus {

  border-color:
    rgba(228,67,82,.55);

  box-shadow:
    0 0 0 3px
    rgba(228,67,82,.06);
}

.field select option {

  background:
    #111114;

  color:
    #fff;
}

.auth-submit {

  width:
    100%;

  margin-top:
    16px;
}

.auth-submit:disabled {

  opacity:
    .55;

  cursor:
    wait;
}

.auth-switch {

  margin:
    18px 0 0;

  text-align:
    center;

  color:
    var(--muted);

  font-size:
    11px;
}

.auth-switch button {

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--red-light);

  font-weight:
    700;
}

.storage-note {

  margin:
    11px 0 0;

  text-align:
    center;

  color:
    #575760;

  font-size:
    9px;

  letter-spacing:
    .08em;
}


/* =========================================================
   DROP ZONE
   ========================================================= */

.drop-zone {

  min-height:
    170px;

  display:
    grid;

  place-items:
    center;

  gap:
    8px;

  padding:
    18px;

  border:
    1px dashed
    rgba(255,255,255,.16);

  border-radius:
    19px;

  background:
    rgba(255,255,255,.014);

  text-align:
    center;

  transition:
    var(--transition);
}

.drop-zone:hover,
.drop-zone.is-dragging,
.drop-zone.dragging {

  border-color:
    rgba(228,67,82,.65);

  background:
    rgba(228,67,82,.035);
}

.drop-icon {

  width:
    49px;

  height:
    49px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(228,67,82,.15);

  border-radius:
    15px;

  background:
    rgba(228,67,82,.08);

  color:
    var(--red);
}


/* =========================================================
   USER DROPDOWN
   ========================================================= */

.user-dropdown {

  position:
    fixed;

  top:
    68px;

  right:
    25px;

  z-index:
    230;

  min-width:
    190px;

  padding:
    7px;

  border:
    1px solid
    var(--line);

  border-radius:
    15px;

  background:
    rgba(17,17,20,.97);

  box-shadow:
    var(--shadow);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}

.user-dropdown a,
.user-dropdown button {

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    10px;

  border:
    0;

  border-radius:
    9px;

  background:
    transparent;

  color:
    #bdbdc4;

  text-align:
    left;

  font-size:
    11px;

  transition:
    var(--transition);
}

.user-dropdown svg {

  width:
    15px;

  height:
    15px;
}

.user-dropdown a:hover,
.user-dropdown button:hover {

  background:
    rgba(255,255,255,.04);

  color:
    #fff;
}

.user-dropdown button {
  color:
    var(--red-light);
}


/* =========================================================
   UTILITY / INLINE EMPTY
   ========================================================= */

.empty-inline {

  min-height:
    150px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    var(--muted);

  text-align:
    center;
}

.empty-inline svg {

  width:
    28px;

  height:
    28px;

  color:
    rgba(228,67,82,.6);
}

.empty-inline p {

  margin:
    0;

  font-size:
    11px;
}


/* =========================================================
   TOAST
   ========================================================= */

.raven-toast {

  font-family:
    "DM Sans",
    sans-serif;

  animation:
    toastIn .22s ease;
}

@keyframes toastIn {

  from {

    opacity:
      0;

    transform:
      translateY(8px);
  }

  to {

    opacity:
      1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   RESPONSIVE — 1150
   ========================================================= */

@media (max-width: 1150px) {

  .hero {

    grid-template-columns:
      1fr 1fr;

    gap:
      15px;
  }

  .hero h1 {

    font-size:
      clamp(56px,8vw,90px);
  }

  .player {

    grid-template-columns:
      minmax(160px,1fr)
      auto
      minmax(220px,1.2fr)
      auto;

    gap:
      12px;
  }

}


/* =========================================================
   RESPONSIVE — 1050
   ========================================================= */

@media (max-width: 1050px) {

  .nav-link:nth-child(4) {
    display:
      none;
  }

  .hero {

    grid-template-columns:
      1fr;

    min-height:
      auto;

    padding-top:
      70px;
  }

  .hero-content {

    max-width:
      850px;
  }

  .hero-raven {

    min-height:
      560px;
  }

  .section-header {

    flex-direction:
      column;

    align-items:
      stretch;
  }

  .search {

    width:
      100%;
  }

  .bands-grid,
  .account-grid,
  .playlist-grid,
  #playlistGrid {

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .player {

    grid-template-columns:
      1fr auto;
  }

  .player-progress {

    grid-column:
      1 / -1;
  }

}


/* =========================================================
   RESPONSIVE — 780
   ========================================================= */

@media (max-width: 780px) {

  .bands-grid,
  .account-grid,
  .playlist-grid,
  #playlistGrid {

    grid-template-columns:
      1fr;
  }

  .playlist-card {

    min-height:
      160px;

    padding:
      17px;
  }

  .playlist-card-icon {

    width:
      49px;

    height:
      49px;

    min-width:
      49px;
  }

}


/* =========================================================
   RESPONSIVE — 680
   ========================================================= */

@media (max-width: 680px) {

  .header {

    min-height:
      67px;

    padding:
      0 12px;
  }

  .brand-name {

    max-width:
      145px;

    overflow:
      hidden;

    white-space:
      nowrap;

    text-overflow:
      ellipsis;

    font-size:
      12px;

    letter-spacing:
      .16em;
  }

  .nav {
    display:
      none;
  }

  .header-actions {

    gap:
      6px;
  }

  .guest-actions,
  .authenticated-actions {

    gap:
      5px;
  }

  .login-header,
  .signup-header,
  .upload-btn {

    min-height:
      38px;

    padding:
      0 10px;
  }

  /*
     Sign Up stays visible on normal mobile widths.
     It is hidden only on very narrow screens below.
  */

  .mobile-menu-button {

    display:
      grid;
  }

  .mobile-menu {

    top:
      67px;
  }

  .hero {

    padding:
      62px 18px 55px;
  }

  .hero h1 {

    font-size:
      clamp(52px,16vw,82px);
  }

  .hero-text {

    font-size:
      13px;
  }

  .hero-buttons {

    flex-direction:
      column;

    align-items:
      stretch;
  }

  .button {

    width:
      100%;
  }

  .hero-guest-note {

    line-height:
      1.8;
  }

  .hero-guest-note span + span::before {
    display:
      none;
  }

  .hero-stats {

    gap:
      20px;

    margin-top:
      35px;
  }

  .hero-raven {

    min-height:
      430px;
  }

  .raven-frame {

    width:
      95%;
  }

  .raven-glow {

    width:
      390px;
  }

  .section {

    padding:
      63px 18px;
  }

  .section-header h2 {

    font-size:
      38px;
  }

  .stat {

    min-width:
      90px;

    margin-right:
      20px;

    padding-right:
      20px;
  }

  .track,
  .track-card {

    padding:
      10px;

    min-height:
      76px;

    gap:
      8px;
  }

  .track-main {

    gap:
      9px;
  }

  .track-play-button {

    width:
      35px;

    height:
      35px;

    min-width:
      35px;
  }

  .track-title {

    font-size:
      12px;
  }

  .track-meta {

    display:
      none;
  }

  .track-uploader {

    font-size:
      8px;
  }

  .track-actions .icon-button {

    width:
      33px;

    height:
      33px;
  }

  #alphabet,
  .alphabet {

    justify-content:
      center;

    gap:
      6px;
  }

  #alphabet button,
  .alphabet button,
  .letter {

    width:
      36px;

    height:
      36px;

    min-width:
      36px;

    font-size:
      10px;
  }

  #alphabet button:first-child {

    width:
      52px;

    min-width:
      52px;
  }

  .form-grid {

    grid-template-columns:
      1fr;
  }

  .modal {

    width:
      100%;

    padding:
      24px 17px;

    border-radius:
      22px;
  }

  .modal h2 {

    font-size:
      31px;
  }

  .playlist-view-modal {

    width:
      calc(100% - 4px);
  }

  .playlist-track-row {

    gap:
      9px;

    padding:
      9px;
  }

  .playlist-track-row
  .track-play-button {

    width:
      36px;

    height:
      36px;

    min-width:
      36px;
  }

  .playlist-track-info strong {

    font-size:
      12px;
  }

  .playlist-track-info span {

    font-size:
      10px;
  }

  .profile-panel {

    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .profile-avatar {

    width:
      76px;

    height:
      76px;

    font-size:
      24px;
  }

  .player {

    left:
      6px;

    right:
      6px;

    bottom:
      8px;

    transform:
      none;

    width:
      auto;

    min-height:
      68px;

    grid-template-columns:
      minmax(0,1fr)
      auto;

    border-radius:
      17px;

    gap:
      8px;

    padding:
      8px;
  }

  .player-btn {

    display:
      none;
  }

  .player-cover {

    width:
      44px;

    height:
      44px;

    min-width:
      44px;
  }

  .player-info strong {

    max-width:
      150px;
  }

  .player-progress {

    grid-column:
      1 / -1;

    grid-template-columns:
      30px 1fr 30px;

    gap:
      6px;
  }

  .player-close {

    width:
      30px;

    height:
      30px;
  }

  .user-dropdown {

    top:
      59px;

    right:
      10px;
  }

}


/* =========================================================
   RESPONSIVE — 560
   ========================================================= */

@media (max-width: 560px) {

  .playlist-card {

    gap:
      12px;

    padding:
      16px;
  }

  .playlist-card-content h3 {

    font-size:
      14px;
  }

  .playlist-card-content p {

    font-size:
      10px;
  }

  .playlist-card-actions {

    gap:
      5px;
  }

  .playlist-card-actions
  .icon-button {

    width:
      34px;

    height:
      34px;
  }

  #createPlaylistButton {

    width:
      100%;
  }

}


/* =========================================================
   RESPONSIVE — 430
   ========================================================= */

@media (max-width: 430px) {

  .brand-icon {

    width:
      34px;

    height:
      34px;
  }

  .brand-name {

    max-width:
      106px;

    font-size:
      10px;

    letter-spacing:
      .13em;
  }

  /*
     Ultra narrow header:
     Keep Login visible and move Sign Up into mobile menu.
  */

  .signup-header {

    display:
      none;
  }

  .upload-btn {

    padding:
      0 9px;
  }

  .hero {

    padding-top:
      55px;
  }

  .section {

    padding:
      52px 14px;
  }

  .track,
  .track-card {

    min-height:
      72px;

    padding:
      8px;

    border-radius:
      14px;
  }

  .track-play-button {

    width:
      32px;

    height:
      32px;

    min-width:
      32px;
  }

  .track-actions .icon-button {

    width:
      31px;

    height:
      31px;
  }

  .track-uploader {

    max-width:
      130px;

    overflow:
      hidden;

    white-space:
      nowrap;

    text-overflow:
      ellipsis;
  }

  #alphabet,
  .alphabet {

    gap:
      5px;

    margin-top:
      18px;
  }

  #alphabet button,
  .alphabet button,
  .letter {

    width:
      33px;

    height:
      33px;

    min-width:
      33px;

    border-radius:
      8px;

    font-size:
      9px;
  }

  #alphabet button:first-child {

    width:
      47px;

    min-width:
      47px;
  }

  .playlist-card {

    display:
      grid;

    grid-template-columns:
      auto minmax(0,1fr);

    gap:
      12px;
  }

  .playlist-card-actions {

    grid-column:
      1 / -1;

    justify-content:
      flex-end;

    padding-top:
      2px;
  }

  .playlist-track-row {

    grid-template-columns:
      auto minmax(0,1fr) auto;
  }

  .playlist-track-row
  .track-play-button {

    width:
      33px;

    height:
      33px;

    min-width:
      33px;
  }

  .playlist-track-row
  > .icon-button {

    width:
      31px;

    height:
      31px;

    min-width:
      31px;
  }

  .mobile-auth-actions {

    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }

  *,
  *::before,
  *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}