body { padding-top: 4.5rem; }
.navbar-brand { font-weight: 700; padding-top: .2rem; padding-bottom: .2rem; }
.form-signin { max-width: 380px; }

/* CSP-friendly helper widths */
.w-10rem { width: 10rem; }

/* Mini-player */
#vu { display: block; border-radius: .75rem; box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05); }
#vuStyle { min-width: 8rem; }

/* Epongo icon sizing */
.epongo-icon { width: 1.25rem; height: 1.25rem; margin-right: .05rem; vertical-align: middle; display: inline-block; }

/* Make it appear larger visually without changing layout height: keep a small layout size and scale it. */
.navbar-brand .epongo-icon {
	width: 1.25rem;
	height: 1.25rem;
	transform: scale(3.0); /* visually larger */
	transform-origin: left center;
	display: inline-block;
	vertical-align: middle;
	margin-right: 2.05rem;
}

/* Stream Player Styles */
.stream-mini-card:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Remove internal scrolling; rely on page scroll */
.stream-cards-container { max-height:none; overflow:visible; }

.stream-cards-container.stream-cards-scroll { /* neutralized to avoid inner scrollbar */
  max-height: none;
  overflow: visible;
}

.stream-artwork {
  width: 30px;
  height: 30px;
  object-fit: cover;
}

.audio-hidden {
  visibility: hidden;
}

.vu-canvas {
  background: #000;
  cursor: pointer;
  width: 100%; /* mobile-first full width */
  height: auto;
  aspect-ratio: 5 / 2; /* maintain ~250x100 ratio while allowing scaling */
  max-width: 420px; /* prevent it from stretching too wide on large screens */
  display: block;
}

/* Audio player error states */
#current-stream.error {
  color: #ff6b6b !important;
}

#current-stream.loading {
  color: #ffa500 !important;
}

#elapsed-time { font-variant-numeric: tabular-nums; }

/* Responsive adjustments for VU meter and controls */
@media (max-width: 767.98px) {
  .stream-cards-container { max-height: 200px; }
  #elapsed-time { font-size: .75rem; }
  .card .btn-lg { padding: .4rem .9rem; font-size: .95rem; }
  .vu-canvas { max-width: 100%; }
}

.vu-test-canvas { max-width: 100%; width: 100%; }
.f2-gauge-canvas { max-width: 100%; }

/* Simple alert styles (CSP-friendly; replaces inline color styles) */
.alert-error { color: #b00020; font-weight: 600; margin:.25rem 0; }
.alert-success { color: #0a7d32; font-weight: 600; margin:.25rem 0; }

/* Avatar sizes */
.avatar-lg { width:64px; height:64px; object-fit:cover; }

/* Track badge (replaces inline style) */
.track-badge { width:34px; height:34px; background:#222; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; font-weight:600; }
.track-cover { width:42px; height:42px; object-fit:cover; border-radius:6px; display:block; cursor:pointer; }

/* Cover art modal */
.cover-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:1050; display:flex; align-items:center; justify-content:center; padding:1rem; }
.cover-modal-dialog { background:#111; border-radius:10px; padding:1rem 1.25rem 1.25rem; max-width:420px; width:100%; box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 30px rgba(0,0,0,.6); }
.cover-modal-dialog h6 { font-weight:600; margin-bottom:.75rem; }
.cover-modal-img-wrapper { text-align:center; }
.cover-modal-img-wrapper img { max-width:100%; height:auto; border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.5); }
.cover-modal-close { position:absolute; top:.25rem; right:.5rem; background:transparent; border:0; color:#fff; font-size:1.25rem; line-height:1; cursor:pointer; }

/* Curate progress bar extracted from inline styles */
#track-progress.track-progress { height:6px; }
.track-progress-bar { width:0%; transition:width .25s linear; }

/* Curate list mode styling */
.mw-0 { min-width:0 !important; }
.curate-track-list-wrapper { max-height:none; overflow:visible; }
.curate-list-row .track-meta { flex:1 1 auto; min-width:0; }
.curate-list-row .vote-ratio { flex-shrink:0; }
.curate-list-row .vote-ratio .vr-like { color:#198754; }
.curate-list-row .vote-ratio .vr-dislike { color:#dc3545; }
.curate-list-row { background:#ffffff; border:1px solid #e2e5e9; cursor:pointer; color:#222; transition:background-color .15s ease, box-shadow .15s ease; }
.curate-list-row:hover {
  background:
    linear-gradient(45deg, #2b3034 25%, transparent 25%, transparent 75%, #2b3034 75%, #2b3034),
    linear-gradient(45deg, #2b3034 25%, transparent 25%, transparent 75%, #2b3034 75%, #2b3034),
    linear-gradient(90deg, rgba(255,255,255,0.05), rgba(0,0,0,0));
  background-position: 0 0, 3px 3px, 0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
}
.curate-list-row.playing { background:#eaf3ff; border-color:#66a3ff; box-shadow:0 0 0 2px rgba(102,163,255,.35); }
.curate-list-cover { width:38px; height:38px; object-fit:cover; border-radius:5px; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.curate-list-row.playing .curate-list-cover { box-shadow:0 0 0 2px rgba(102,163,255,.55); }
.curate-list-row .track-artist { color:#555; font-size:.65rem; opacity:.85; }
.curate-list-row .track-title { font-size:.75rem; }
.curate-list-row .btn-group .btn.active-like { background:#198754; color:#fff; }
.curate-list-row .btn-group .btn.active-dislike { background:#dc3545; color:#fff; }
.curate-list-row .btn-group .btn.btn-play.playing { background:#0d6efd; color:#fff; }
.curate-list-row .vote-ratio { font-size:.65rem; letter-spacing:.5px; }
.curate-list-row.active-track { border:2px solid #0d6efd !important; box-shadow:0 0 0 .15rem rgba(13,110,253,.25); }
.curate-list-row.active-track.playing { border-color:#0a58ca; }

/* Carbon fiber pattern (Option 1) applied to curate list rows */
/* Tighter carbon fiber pattern (6px grid) */
.curate-list-row {
  position: relative;
  background:
    linear-gradient(45deg, #25282b 25%, transparent 25%, transparent 75%, #25282b 75%, #25282b),
    linear-gradient(45deg, #25282b 25%, transparent 25%, transparent 75%, #25282b 75%, #25282b),
    linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); /* subtle vertical sheen */
  background-position: 0 0, 3px 3px, 0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-color: #16181a; /* fallback */
  color: #e3e6e9;
  border-color: #1f2428;
}
/* Brighter + slightly bluer when playing */
.curate-list-row.playing {
  background:
    linear-gradient(45deg, #2d3136 25%, transparent 25%, transparent 75%, #2d3136 75%, #2d3136),
    linear-gradient(45deg, #2d3136 25%, transparent 25%, transparent 75%, #2d3136 75%, #2d3136),
    linear-gradient(120deg, rgba(102,163,255,0.15), rgba(0,0,0,0) 65%);
  background-position: 0 0, 3px 3px, 0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-color: #1c2227;
}
/* Maintain readable text */
.curate-list-row .track-title { color:#f1f3f5; }
.curate-list-row .track-artist { color:#b5bcc2; }

/* Title / artist truncation widths (replacing inline max-width attributes) */
.track-title, .track-artist { max-width:160px; }

/* Notification dropdown extracted from inline style */
.notif-menu { min-width:300px; max-height:420px; overflow:auto; }

/* Avatar nav size (was inline) */
.avatar-nav { width:28px; height:28px; object-fit:cover; }

/* Curate countdown badge */
.curate-countdown-badge {
  font-size: 0.70rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 2px 4px rgba(0,0,0,0.4);
  letter-spacing: .5px;
  min-width: 1.5rem;
  text-align: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  user-select: none;
}
.curate-countdown-badge { transition: background-color .15s ease, color .15s ease; }

/* Wizard progress (replacing inline styles) */
.progress-thin { height:6px; }
.wizard-progress { width:25%; transition: width .25s ease; }

/* Scroll utility for agreement text blocks (replaces inline style attributes) */
.scroll-y-50 { max-height:50vh; overflow:auto; }