/* Theme Studio page styles */

.navbar {
  background: var(--nav-bg) !important;
  color: var(--nav-text) !important;
  border-color: var(--nav-border) !important;
  border-width: var(--border-width-hairline) !important;
  backdrop-filter: var(--nav-backdrop) !important;
  -webkit-backdrop-filter: var(--nav-backdrop) !important;
}

.nav-back-btn, .nav-right-btn, .nav-icon-btn {
  background: transparent !important;
  color: var(--nav-text) !important;
  border-color: transparent !important;
  border-width: 1px !important;
  border-radius: var(--radius-md) !important;
}

.nav-back-btn:hover,
.nav-right-btn:hover,
.nav-icon-btn:hover,
.nav-back-btn:focus-visible,
.nav-right-btn:focus-visible,
.nav-icon-btn:focus-visible {
  background: rgba(44, 44, 46, 0.5) !important;
  color: var(--nav-text) !important;
  border-color: transparent !important;
}

.nav-back-btn:active,
.nav-right-btn:active,
.nav-icon-btn:active,
.nav-back-btn.active,
.nav-right-btn.active,
.nav-icon-btn.active {
  background: rgba(58, 58, 60, 0.5) !important;
  color: var(--nav-text) !important;
  border-color: transparent !important;
}

.btn.btn-primary {
  background: linear-gradient(135deg, var(--action-primary-bg), var(--action-primary-hover)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  border-width: 1px !important;
  border-radius: 999px !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
  background: linear-gradient(135deg, var(--action-primary-hover), var(--action-primary-bg)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.btn.btn-primary:active,
.btn.btn-primary.active {
  background: var(--action-primary-hover) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.btn.btn-secondary {
  background: var(--surface-elevated) !important;
  color: #ffffff !important;
  border-color: var(--theme-separator) !important;
  border-width: 1px !important;
  border-radius: 999px !important;
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible {
  background: var(--surface-card) !important;
  color: #ffffff !important;
  border-color: var(--theme-separator) !important;
}

.btn.btn-secondary:active,
.btn.btn-secondary.active {
  background: var(--surface-card) !important;
  color: #ffffff !important;
  border-color: var(--theme-separator) !important;
}

.btn.btn-danger, .btn-danger {
  background: var(--color-danger) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  border-width: 1px !important;
  border-radius: 999px !important;
}

.btn.btn-danger:hover,
.btn-danger:hover,
.btn.btn-danger:focus-visible,
.btn-danger:focus-visible {
  background: #e0352b !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.btn.btn-danger:active,
.btn-danger:active,
.btn.btn-danger.active,
.btn-danger.active {
  background: #c92d24 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="date"], input[type="password"], select, textarea, .form-control {
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--theme-separator) !important;
  border-width: var(--border-width-hairline) !important;
  border-radius: var(--radius-md) !important;
}

input[type="text"]:active,
input[type="email"]:active,
input[type="number"]:active,
input[type="tel"]:active,
input[type="date"]:active,
input[type="password"]:active,
select:active,
textarea:active,
.form-control:active,
input[type="text"].active,
input[type="email"].active,
input[type="number"].active,
input[type="tel"].active,
input[type="date"].active,
input[type="password"].active,
select.active,
textarea.active,
.form-control.active {
  border-color: var(--action-primary-bg) !important;
}

.modal-content {
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--theme-separator) !important;
  border-width: var(--border-width-hairline) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.55) !important;
}

.badge, .status-badge {
  background: var(--surface-elevated) !important;
  color: var(--text-muted) !important;
  border-color: transparent !important;
  border-width: 1px !important;
  border-radius: 999px !important;
}

.auth-card {
  background: rgba(28, 28, 30, 0.96) !important;
  color: var(--text-primary) !important;
  border-color: var(--theme-separator) !important;
  border-width: var(--border-width-hairline) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.55) !important;
}

.post-card {
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--theme-separator) !important;
  border-width: 1px !important;
  border-radius: var(--radius-lg) !important;
}

.fab-create-post {
  background: var(--action-primary-bg) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  border-width: 1px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.4) !important;
}

.fab-create-post:hover,
.fab-create-post:focus-visible {
  background: var(--action-primary-hover) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.fab-create-post:active,
.fab-create-post.active {
  background: var(--action-primary-hover) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.profile-contact-card {
  background: rgba(28, 28, 30, 0.96) !important;
  color: var(--text-primary) !important;
  border-color: var(--theme-separator) !important;
  border-width: var(--border-width-hairline) !important;
  border-radius: var(--radius-lg) !important;
}

.filter-pill {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  border-width: 1px !important;
  border-radius: 16px !important;
}

.filter-pill:hover,
.filter-pill:focus-visible {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.filter-pill:active,
.filter-pill.active {
  background: var(--action-primary-bg) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.fab {
  background: var(--action-primary-bg) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  border-width: 1px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.fab:hover,
.fab:focus-visible {
  background: var(--action-primary-hover) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.fab:active,
.fab.active {
  background: var(--action-primary-hover) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.event-card-wrapper .ps-card-parent {
  background: var(--surface-card) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  border-width: 1px !important;
  border-radius: var(--radius-lg) !important;
}

.view-container {
  background: rgba(23, 17, 34, 0.29) !important;
  color: #e9edef !important;
}

.wa-pill {
  background: #1f2c34 !important;
  color: #8696a0 !important;
  border-color: transparent !important;
  border-width: 1px !important;
  border-radius: 20px !important;
}

.wa-pill:hover,
.wa-pill:focus-visible {
  background: rgba(134, 150, 160, 0.2) !important;
  color: #e9edef !important;
  border-color: transparent !important;
}

.wa-pill:active,
.wa-pill.active {
  background: #5f04a9 !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.icon-btn-circle {
  background: transparent !important;
  color: #8696a0 !important;
  border-color: transparent !important;
  border-width: 1px !important;
  border-radius: 50% !important;
}

.icon-btn-circle:hover,
.icon-btn-circle:focus-visible {
  background: #1f2c34 !important;
  color: #e9edef !important;
  border-color: transparent !important;
}

.icon-btn-circle:active,
.icon-btn-circle.active {
  background: #1f2c34 !important;
  color: #e9edef !important;
  border-color: transparent !important;
}

.users-list, .emails-list, .templates-list {
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--theme-separator) !important;
  border-width: var(--border-width-hairline) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.55) !important;
}

.tab-btn {
  background: transparent !important;
  color: var(--text-muted) !important;
  border-color: transparent !important;
  border-width: 1px !important;
  border-radius: 0px !important;
}

.tab-btn:hover,
.tab-btn:focus-visible {
  background: transparent !important;
  color: var(--action-primary-bg) !important;
  border-color: transparent !important;
}

.tab-btn:active,
.tab-btn.active {
  background: transparent !important;
  color: var(--action-primary-bg) !important;
  border-color: var(--action-primary-bg) !important;
}

.bottom-nav {
  background: #000000 !important;
  color: #64748b !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  border-width: 1px !important;
  border-radius: 0px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.34) !important;
}

.bottom-nav__button {
  background: transparent !important;
  color: #64748b !important;
  border-color: transparent !important;
  border-width: 0px !important;
  border-radius: 0px !important;
}

.bottom-nav__button:hover,
.bottom-nav__button:focus-visible {
  background: transparent !important;
  color: #e2e8f0 !important;
  border-color: transparent !important;
}

.bottom-nav__button:active,
.bottom-nav__button.active {
  background: transparent !important;
  color: #6366f1 !important;
  border-color: transparent !important;
}

.bottom-nav__hero-inner {
  background: linear-gradient(to bottom right, #6366f1, #2563eb) !important;
  color: #ffffff !important;
  border-color: #020617 !important;
  border-width: 4px !important;
  border-radius: 50% !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75) !important;
}

.bottom-nav__hero-inner:hover,
.bottom-nav__hero-inner:focus-visible {
  background: linear-gradient(to bottom right, #6366f1, #1d4ed8) !important;
  color: #ffffff !important;
  border-color: #020617 !important;
}

.bottom-nav__hero-inner:active,
.bottom-nav__hero-inner.active {
  background: linear-gradient(to bottom right, #4f46e5, #1e40af) !important;
  color: #ffffff !important;
  border-color: #020617 !important;
}

.app-shell {
  background: var(--daw-shell-bg) !important;
  color: var(--text-primary) !important;
  border-color: transparent !important;
  border-width: 0px !important;
  border-radius: 0px !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

.top-bar {
  background: var(--daw-top-bar-bg) !important;
  color: var(--daw-top-bar-ink) !important;
  border-color: var(--daw-top-bar-border) !important;
  border-width: 0px !important;
  border-radius: 0px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* custom: daw_top_bar */
.top-bar { border-bottom-style: solid !important; border-bottom-width: 5px !important; }

.bottom-bar {
  background: var(--daw-bottom-bar-bg) !important;
  color: var(--daw-bottom-bar-ink) !important;
  border-color: var(--daw-bottom-bar-border) !important;
  border-width: 0px !important;
  border-radius: 0px !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* custom: daw_bottom_bar */
.bottom-bar { border-top-style: solid !important; border-top-width: 3px !important; }

.circle-btn {
  background: var(--daw-circle-btn-bg) !important;
  color: var(--daw-circle-btn-fg) !important;
  border-color: var(--daw-circle-btn-border) !important;
  border-width: 2px !important;
  border-radius: 50% !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.circle-btn:hover,
.circle-btn:focus-visible {
  background: var(--daw-circle-btn-hover-bg) !important;
  color: var(--daw-circle-btn-fg) !important;
  border-color: var(--daw-circle-btn-hover-border) !important;
}

.circle-btn:active,
.circle-btn.active {
  background: var(--daw-circle-btn-active-bg) !important;
  color: var(--daw-circle-btn-fg) !important;
  border-color: var(--daw-circle-btn-active-border) !important;
}

.nav-btn {
  background: transparent !important;
  color: var(--daw-transport-ink) !important;
  border-color: transparent !important;
  border-width: 0px !important;
  border-radius: 0px !important;
  box-shadow: none !important;
}

.nav-btn:hover,
.nav-btn:focus-visible {
  background: var(--daw-nav-btn-hover-bg) !important;
  color: var(--daw-nav-btn-hover-color) !important;
  border-color: transparent !important;
}

.nav-btn:active,
.nav-btn.active {
  background: var(--daw-nav-btn-active-bg) !important;
  color: var(--daw-transport-ink-active) !important;
  border-color: transparent !important;
}

.speed-btn {
  background: var(--daw-speed-btn-bg) !important;
  color: var(--daw-transport-ink) !important;
  border-color: var(--daw-toggle-border) !important;
  border-width: 1px !important;
  border-radius: 10px !important;
}

.speed-btn:hover,
.speed-btn:focus-visible {
  background: var(--daw-speed-btn-hover-bg) !important;
  color: var(--daw-transport-ink) !important;
  border-color: var(--daw-toggle-border) !important;
}

.speed-btn:active,
.speed-btn.active {
  background: var(--daw-speed-btn-active-bg) !important;
  color: var(--daw-speed-btn-active-color) !important;
  border-color: var(--daw-speed-btn-active-bg) !important;
}

.score-container, .piano-roll-wrapper {
  background: var(--daw-score-bg) !important;
  color: var(--text-primary) !important;
}

/* custom: daw_canvas_background */
.piano-roll-wrapper { background: var(--daw-piano-roll-bg) !important; }

body.song-detail-page {
  background: linear-gradient(165deg, #160b3d 0%, #0a1236 45%, #050922 100%) !important;
  color: #f4f6ff !important;
}

/* custom: song_detail_page_shell */
body.song-detail-page { background: radial-gradient(120% 80% at 50% -10%, rgba(132, 56, 255, 0.38), rgba(11, 14, 50, 0) 55%), radial-gradient(140% 90% at 50% 115%, rgba(33, 211, 255, 0.24), rgba(5, 8, 30, 0) 62%), linear-gradient(165deg, #160b3d 0%, #0a1236 45%, #050922 100%) !important; background-attachment: fixed !important; background-size: cover !important; min-height: 100vh !important; }

.song-detail-page .song-detail-player {
  background: radial-gradient(circle at 50% 0%, rgba(255, 224, 135, 0.18), rgba(255, 224, 135, 0) 44%), linear-gradient(180deg, rgba(45, 31, 12, 0.92), rgba(18, 12, 5, 0.88)) !important;
  color: #fff7dc !important;
  border-color: rgba(255, 217, 113, 0.48) !important;
  border-width: 1px !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.34) !important;
}

/* custom: song_detail_player_panel */
.song-detail-page .song-detail-player {
  margin-top: 50px !important; /* increase/decrease this */
}
.song-detail-page .sdp-bar-row {
    top: -40px;
}
.song-detail-page .sdp-bar-counter-wrap {
    background: linear-gradient(160deg, rgba(93, 57, 14, 0.95), rgba(42, 26, 8, 0.94)) !important;
    border-color: rgba(255, 238, 175, 0.86) !important;
    box-shadow: 0 10px 24px rgba(4, 3, 1, 0.55), 0 0 16px rgba(255, 213, 92, 0.46) !important;
}
.song-detail-page .sdp-bar-prefix,
.song-detail-page .sdp-bar-number {
    color: #fff8dd !important;
    text-shadow: 0 0 10px rgba(255, 215, 93, 0.32) !important;
}
.song-detail-page #sdp-bar-slider {
    accent-color: #ffd85d !important;
    border-color: rgba(255, 222, 108, 0.74) !important;
    background: linear-gradient(90deg, #fff0a9, #ffc235 58%, #c87912) 0 / var(--sdp-slider-progress) 100% no-repeat, linear-gradient(90deg, rgba(72, 49, 17, 0.86), rgba(43, 29, 12, 0.86)) 0 / 100% 100% no-repeat !important;
    box-shadow: inset 0 0 0 1px rgba(255, 247, 220, 0.12), 0 0 12px rgba(255, 209, 84, 0.3) !important;
}
.song-detail-page #sdp-bar-slider::-webkit-slider-thumb {
    border-color: rgba(255, 245, 195, 0.95) !important;
    background: radial-gradient(circle at 30% 26%, #fff9d4, #ffd950 65%, #f4b400 100%) !important;
    box-shadow: 0 0 10px rgba(255, 219, 84, 0.72) !important;
}
.song-detail-page #sdp-bar-slider::-moz-range-track {
    border-color: rgba(255, 222, 108, 0.74) !important;
    background: linear-gradient(90deg, rgba(72, 49, 17, 0.86), rgba(43, 29, 12, 0.86)) !important;
}
.song-detail-page #sdp-bar-slider::-moz-range-progress {
    background: linear-gradient(90deg, #fff0a9, #ffc235 58%, #c87912) !important;
}
.song-detail-page #sdp-bar-slider::-moz-range-thumb {
    border-color: rgba(255, 245, 195, 0.95) !important;
    background: radial-gradient(circle at 30% 26%, #fff9d4, #ffd950 65%, #f4b400 100%) !important;
    box-shadow: 0 0 10px rgba(255, 219, 84, 0.72) !important;
}

.song-detail-page .practice-mode-btn, .song-detail-page .sdp-inline-btn {
  background: radial-gradient(circle at 28% 18%, rgba(255, 252, 214, 0.7), rgba(255, 220, 100, 0.42) 52%, rgba(182, 103, 15, 0.24) 100%), linear-gradient(135deg, #ffe680, #d79a22 58%, #9b5a0d) !important;
  color: #1b1204 !important;
  border-color: rgba(255, 239, 176, 0.88) !important;
  border-width: 1px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 18px rgba(255, 211, 90, 0.38), 0 5px 0 rgba(47, 28, 6, 0.72) !important;
}

.song-detail-page .practice-mode-btn:hover,
.song-detail-page .sdp-inline-btn:hover,
.song-detail-page .practice-mode-btn:focus-visible,
.song-detail-page .sdp-inline-btn:focus-visible {
  background: radial-gradient(circle at 32% 18%, #fff7c7, #ffd85d 50%, #b96b0f 100%), linear-gradient(135deg, #ffe680, #d39018) !important;
  color: #1b1204 !important;
  border-color: rgba(255, 245, 195, 0.94) !important;
}

.song-detail-page .practice-mode-btn:active,
.song-detail-page .sdp-inline-btn:active,
.song-detail-page .practice-mode-btn.active,
.song-detail-page .sdp-inline-btn.active {
  background: radial-gradient(circle at 32% 18%, #fff7c7, #ffd85d 50%, #b96b0f 100%), linear-gradient(135deg, #ffe680, #d39018) !important;
  color: #1b1204 !important;
  border-color: rgba(255, 245, 195, 0.94) !important;
}

/* custom: song_detail_primary_buttons */
.song-detail-page #sdp-current-part,
.song-detail-page .sdp-inline-btn .sdp-btn-label,
.song-detail-page .sdp-part-btn .sdp-btn-label,
.song-detail-page .practice-mode-btn span {
    color: #1b1204 !important;
}
.song-detail-page .sdp-inline-btn svg,
.song-detail-page .sdp-part-btn svg {
    stroke: #1b1204 !important;
}

.song-detail-page .sdp-icon-btn, .song-detail-page .sdp-play-btn {
  background: radial-gradient(circle at 32% 18%, rgba(255, 246, 194, 0.7), rgba(255, 214, 92, 0.38) 46%, rgba(173, 100, 16, 0.28) 100%), linear-gradient(135deg, rgba(255, 215, 88, 0.82), rgba(176, 99, 16, 0.78)) !important;
  color: #1b1204 !important;
  border-color: rgba(255, 238, 175, 0.74) !important;
  border-width: 1px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 16px rgba(255, 209, 84, 0.34), 0 5px 0 rgba(47, 28, 6, 0.76) !important;
}

.song-detail-page .sdp-icon-btn:hover,
.song-detail-page .sdp-play-btn:hover,
.song-detail-page .sdp-icon-btn:focus-visible,
.song-detail-page .sdp-play-btn:focus-visible {
  background: radial-gradient(circle at 34% 20%, #fff8ca, #ffd85d 48%, #c47a14 100%), linear-gradient(160deg, rgba(255, 221, 90, 0.95), rgba(175, 96, 11, 0.9)) !important;
  color: #1b1204 !important;
  border-color: rgba(255, 244, 191, 0.92) !important;
}

.song-detail-page .sdp-icon-btn:active,
.song-detail-page .sdp-play-btn:active,
.song-detail-page .sdp-icon-btn.active,
.song-detail-page .sdp-play-btn.active {
  background: radial-gradient(circle at 34% 20%, #fff8ca, #ffd85d 48%, #c47a14 100%), linear-gradient(160deg, rgba(255, 221, 90, 0.95), rgba(175, 96, 11, 0.9)) !important;
  color: #1b1204 !important;
  border-color: rgba(255, 244, 191, 0.92) !important;
}

/* custom: song_detail_transport_buttons */
.song-detail-page .sdp-icon-btn svg,
.song-detail-page .sdp-play-btn svg {
    stroke: #1b1204 !important;
}

.song-detail-page .sdp-chip {
  background: rgba(221, 183, 74, 0.14) !important;
  color: #fff3c8 !important;
  border-color: rgba(221, 183, 74, 0.28) !important;
  border-width: 1px !important;
  border-radius: 999px !important;
}

.stats-contact-card {
  background: linear-gradient(165deg, var(--surface-card), var(--surface-bg)) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-width: 1px !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45) !important;
}

.stats-contact-card .stats-chip {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-width: 1px !important;
  border-radius: 14px !important;
}

.stats-contact-card .stats-streak-bubble {
  background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 198, 90, 0.2) 34%, rgba(93, 42, 0, 0.5) 100%) !important;
  color: #ffd472 !important;
  border-color: rgba(255, 172, 58, 0.5) !important;
  border-width: 1px !important;
  border-radius: 24px !important;
  box-shadow: 0 0 24px rgba(255, 160, 0, 0.32) !important;
}

.stats-contact-card .stats-nudge-pill {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-width: 1px !important;
  border-radius: 12px !important;
}

.wa-search-bar-container.theme-studio-inspector-hover.theme-studio-inspector-selected {
  background: #000000 !important;
  color: rgb(233, 237, 239) !important;
  border-color: rgb(233, 237, 239) !important;
  border-width: 0px !important;
  border-radius: 0px !important;
  box-shadow: rgba(10, 132, 255, 0.08) 0px 0px 0px 9999px !important;
  padding: 8px 16px !important;
  gap: normal !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
}

.conversation-item {
  background: #000000 !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  padding: 0px !important;
}

.conversations-header-extra {
  background: #000000 !important;
}

.stats-level-strip {
  background: linear-gradient(135deg, var(--action-primary-bg) 0%, var(--action-primary-hover) 100%) !important;
}

.stats-level-track {
  background: #396d25 !important;
}

.conversations-list {
  background: #000000 !important;
}

.conversations-container {
  background: #000000 !important;
}

.wa-search-bar {
  background: #1f2c34 !important;
}

.stats-page-btn {
  background: #ffffff !important;
}

.app-shell {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-width: 1px !important;
  border-radius: 22px !important;
}

.stats-hud-choir-brand {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-color: transparent !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(14px, 3.4vw, 20px) !important;
  gap: 14px !important;
}

.stats-hud-choir-brand__logo-frame {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-width: 1px !important;
  border-radius: 18px !important;
  padding: 0.16em !important;
  font-size: clamp(72px, 16vw, 116px) !important;
}

.stats-hud-choir-brand__name {
  color: #fff8fb !important;
  font-size: clamp(1.85rem, 7vw, 3.4rem) !important;
  font-weight: 950 !important;
  line-height: 0.92 !important;
}