/* 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(3, 8, 28, 0.34), inset 0 0 0 1px rgba(180, 130, 255, 0.14) !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: linear-gradient(180deg, rgba(18, 15, 55, 0.38), rgba(8, 9, 28, 0.18)) !important;
  color: #e6f0ff !important;
  border-color: rgba(99, 114, 248, 0.25) !important;
  border-width: 1px !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 45px rgba(3, 8, 28, 0.34), inset 0 0 0 1px rgba(180, 130, 255, 0.14) !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 .practice-mode-btn, .song-detail-page .sdp-inline-btn {
  background: linear-gradient(135deg, rgba(45, 120, 255, 0.55), rgba(113, 73, 252, 0.52)) !important;
  color: #f5f8ff !important;
  border-color: rgba(72, 239, 255, 0.55) !important;
  border-width: 1px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 16px rgba(53, 226, 255, 0.36), 0 0 18px rgba(202, 94, 255, 0.24) !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: linear-gradient(135deg, rgba(16, 207, 238, 0.9), rgba(96, 92, 253, 0.95)) !important;
  color: #f2fffc !important;
  border-color: rgba(105, 248, 255, 0.9) !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: linear-gradient(135deg, rgba(16, 207, 238, 0.9), rgba(96, 92, 253, 0.95)) !important;
  color: #f2fffc !important;
  border-color: rgba(105, 248, 255, 0.9) !important;
}

.song-detail-page .sdp-icon-btn, .song-detail-page .sdp-play-btn {
  background: radial-gradient(circle at 30% 20%, rgba(101, 244, 255, 0.62), rgba(51, 196, 255, 0.35) 62%, rgba(29, 156, 255, 0.26) 100%) !important;
  color: #f4f8ff !important;
  border-color: rgba(103, 244, 255, 0.8) !important;
  border-width: 1px !important;
  border-radius: 999px !important;
  box-shadow: 0 0 18px rgba(57, 228, 255, 0.48) !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 35% 20%, rgba(118, 255, 255, 0.82), rgba(60, 230, 255, 0.68) 48%, rgba(40, 181, 255, 0.54) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(103, 244, 255, 0.9) !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 35% 20%, rgba(118, 255, 255, 0.82), rgba(60, 230, 255, 0.68) 48%, rgba(40, 181, 255, 0.54) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(103, 244, 255, 0.9) !important;
}

.song-detail-page .sdp-chip {
  background: rgba(20, 34, 66, 0.8) !important;
  color: #dbe9ff !important;
  border-color: rgba(134, 176, 255, 0.25) !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: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-width: 1px !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 34px rgba(8, 3, 24, 0.32) !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;
}