[hidden] { display: none !important; }

.ui-icon {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.sidebar nav a,
.sidebar-login,
.sidebar-bottom form button {
  display: flex;
  width: 100%;
  min-height: 43px;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  color: #adc4ba;
  font-size: 13px;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.sidebar nav a:hover,
.sidebar-login:hover,
.sidebar-bottom form button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.sidebar nav a.active {
  color: #12372b;
  font-weight: 700;
  background: #c8eadb;
}

.sidebar nav a span,
.sidebar-login span,
.sidebar-bottom form button span { flex: 1; text-align: left; }
.sidebar-bottom form { margin: 0; }
.studio-switch { text-decoration: none; }
.switch-label { color: #8fb2a3; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.storage-fill { width: 38.2%; }

.mobile-brand,
.mobile-nav a,
.text-button,
.auth-link { text-decoration: none; }

.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  color: var(--muted);
  font-size: 9px;
}

.mobile-nav a.active { color: var(--green); font-weight: 700; }

.sidebar-scrim { display: none !important; }

.demo-pill {
  padding: 5px 8px;
  color: #836112;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--yellow-soft);
  border: 1px solid #efda9d;
  border-radius: 4px;
}

.subtle-label { color: var(--muted); font-size: 10px; }
.compact-progress { color: var(--green); font-size: 10px; font-weight: 700; }
.bar-48 { height: 48%; }
.bar-59 { height: 59%; }
.bar-51 { height: 51%; }
.bar-75 { height: 75%; }
.bar-86 { height: 86%; }
.bar-100 { height: 100%; background: var(--green); }

.large-progress {
  display: grid;
  width: 50px;
  height: 50px;
  margin: -20px 0 4px 58px;
  place-items: center;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  background: #fff;
  border: 5px solid #9bd0b8;
  border-radius: 50%;
}

.progress-82 span { width: 82%; }
.progress-58 span { width: 58%; }
.progress-34 span { width: 34%; }
.progress-21 span { width: 21%; }

.modal-backdrop[hidden] { display: none !important; }
.modal-backdrop { overflow-y: auto; }
body.modal-open { overflow: hidden; }

.upload-track {
  width: 100%;
  height: 5px;
  grid-column: 1 / -1;
  overflow: hidden;
  appearance: none;
  background: #dbe5df;
  border: 0;
  border-radius: 3px;
}

.upload-track::-webkit-progress-bar { background: #dbe5df; }
.upload-track::-webkit-progress-value { background: var(--green); border-radius: 3px; }
.upload-track::-moz-progress-bar { background: var(--green); border-radius: 3px; }

.empty-state {
  display: flex;
  min-height: calc(100vh - 190px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.empty-state > span { color: var(--green); font: 700 13px 'DM Sans', sans-serif; }
.empty-state h1 { margin: 8px 0; font: 700 42px 'Fraunces', serif; }
.empty-state p { margin: 0 0 20px; color: var(--muted); }

.search-hidden { display: none !important; }
.is-playing .cover-play { opacity: 1; }
.favorite.active .ui-icon { fill: currentColor; }

.login-page {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(0, 1.25fr) minmax(390px, 0.75fr);
  background: #fff;
}

.login-visual {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.login-visual::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(0deg, rgba(8, 36, 27, 0.88), rgba(8, 36, 27, 0.08) 70%);
}

.login-visual img { width: 100%; height: 100%; object-fit: cover; }
.login-visual > div { position: absolute; right: 8%; bottom: 8%; left: 8%; z-index: 1; color: #fff; }
.login-visual h1 { margin: 8px 0 12px; font: 700 clamp(40px, 5vw, 68px)/1 'Fraunces', serif; letter-spacing: 0; }
.login-visual p { max-width: 500px; margin: 0; color: #d8e9e1; }

.login-panel {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: clamp(30px, 6vw, 80px);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 70px;
  color: var(--green-dark);
  text-decoration: none;
}

.login-brand strong { font: 700 21px 'Fraunces', serif; }
.login-copy h2 { margin: 7px 0; font: 700 31px/1.1 'Fraunces', serif; letter-spacing: 0; }
.login-copy p { margin: 0 0 24px; color: var(--muted); font-size: 12px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label { display: flex; flex-direction: column; gap: 6px; }
.login-form label span { color: #4d5e55; font-size: 10px; font-weight: 700; }
.login-form input { min-height: 44px; padding: 9px 11px; border: 1px solid #d9e1dc; border-radius: 5px; outline: 0; }
.login-form .primary-button { min-height: 46px; margin-top: 3px; }
.back-link { margin-top: 18px; color: var(--green); font-size: 11px; text-align: center; text-decoration: none; }
.login-register { margin: 18px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.login-register a { color: var(--green); font-weight: 700; text-decoration: none; }
.form-error { margin-bottom: 15px; padding: 10px 12px; color: #9c3629; font-size: 11px; background: var(--coral-soft); border-left: 3px solid var(--coral); border-radius: 4px; }

@media (max-width: 900px) {
  .sidebar nav a { min-height: 44px; }
  .sidebar.open + .sidebar-scrim { display: block !important; }
}

@media (max-width: 680px) {
  .demo-pill { display: none; }
  .login-page { grid-template-columns: 1fr; }
  .login-visual { min-height: 34vh; max-height: 310px; }
  .login-visual > div { bottom: 24px; }
  .login-visual h1 { font-size: 35px; }
  .login-visual p { display: none; }
  .login-panel { justify-content: flex-start; padding: 28px 20px; }
  .login-brand { margin-bottom: 35px; }
}