/* Final theme text layer. Loaded after page CSS so every visible text surface is theme-aware. */
html[data-theme] body {
  color: var(--text);
}

html[data-theme] :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  label,
  .section-title,
  .portfolio-title,
  .web-card-title,
  .step-title,
  .admin-main-header h1,
  .admin-topbar-title strong,
  .admin-chart-head h2,
  .admin-chart-head strong,
  .admin-panel-head h2,
  .admin-metrics strong,
  .premium-editor-section-head h2,
  .premium-editor-preview h2,
  .request-card-main h2,
  .request-detail-hero h2,
  .request-detail-list a,
  .delete-confirm-card h2,
  .apply-brief h1,
  .super-login-card h1,
  .footer-inner strong
) {
  color: var(--text-strong) !important;
}

html[data-theme] :where(
  p,
  small,
  li,
  dd,
  span,
  .eyebrow,
  .section-subtitle,
  .web-card-text,
  .step-text,
  .portfolio-section-head p,
  .portfolio-empty-card,
  .footer-inner span,
  .footer-links a,
  .bottom-caption,
  .clean-list,
  .admin-main-header p,
  .admin-topbar-title span,
  .admin-metrics span,
  .admin-chart-card p,
  .admin-panel-head > a,
  .admin-quick-grid span,
  .admin-feed span,
  .admin-feed p,
  .admin-empty-state p,
  .admin-form-field small,
  .request-card-main p,
  .request-card-meta span,
  .request-detail-status small,
  .request-detail-list dt,
  .request-detail-list dd,
  .premium-editor-preview p,
  .premium-editor-preview .music-editor-artist-preview span,
  .apply-brief p,
  .apply-brief-points span,
  .super-login-card p,
  .super-login-meta a
) {
  color: var(--text-muted) !important;
}

html[data-theme] :where(
  .navbar-brand,
  .navbar-brand *,
  .premium-topbar .navbar-brand,
  .premium-topbar .navbar-brand *,
  .admin-sidebar-brand,
  .admin-sidebar-brand *,
  .admin-sidebar-nav a:hover,
  .admin-sidebar-nav a:hover *,
  .admin-sidebar-nav a.active,
  .admin-sidebar-nav a.active *,
  .admin-sidebar-footer a:hover
) {
  color: var(--text-strong) !important;
}

html[data-theme] :where(
  .nav-link,
  .premium-topbar .nav-link,
  .admin-sidebar-nav a,
  .admin-sidebar-footer a
) {
  color: var(--nav-link) !important;
}

html[data-theme] :where(
  .nav-link:hover,
  .nav-link.active,
  .premium-topbar .nav-link:hover,
  .premium-topbar .nav-link:focus
) {
  color: var(--nav-link-strong) !important;
}

html[data-theme] :where(
  .btn-premium,
  .nav-cta,
  .premium-topbar .nav-cta,
  .admin-topbar-actions a:first-of-type,
  .admin-header-actions a,
  .request-card-actions a,
  .admin-form-actions button,
  .delete-card-actions a,
  .inline-admin-form button,
  .admin-cropper-use,
  .super-login-button,
  .step-badge,
  .status-pill,
  .portfolio-content span,
  .hero-active-badge,
  input[type="file"].custom-input::file-selector-button
) {
  background: var(--button-bg) !important;
  color: var(--button-text) !important;
  border-color: var(--button-bg) !important;
}

html[data-theme] :where(
  .btn-secondary-premium,
  .admin-topbar-actions a,
  .admin-header-actions a + a,
  .admin-form-actions a,
  .admin-table-actions a,
  .admin-table-actions button,
  .music-platforms a,
  .theme-toggle,
  .admin-cropper-close,
  .admin-cropper-reset,
  .delete-card-actions button
) {
  background: var(--button-muted-bg) !important;
  color: var(--button-muted-text) !important;
  border-color: var(--border) !important;
}

html[data-theme] :where(.nav-cta:hover, .premium-topbar .nav-cta:hover, .premium-topbar .nav-cta:focus) {
  background: var(--button-bg) !important;
  color: var(--button-text) !important;
  filter: brightness(0.94);
}

html[data-theme] .theme-toggle {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-strong) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-strong) 8%, transparent), var(--shadow-soft);
}

html[data-theme] .premium-topbar .theme-toggle {
  background: var(--button-muted-bg) !important;
  box-shadow: none;
}

html[data-theme] .theme-toggle-track,
html[data-theme] .theme-toggle-track span {
  color: inherit !important;
}

html[data-theme] .theme-toggle-icon {
  color: var(--text-muted) !important;
}

html[data-theme] .theme-toggle-thumb {
  background: var(--button-bg) !important;
}

html[data-theme="light"] .theme-toggle-sun,
html[data-theme="dark"] .theme-toggle-moon {
  color: var(--button-text) !important;
}

html[data-theme] :where(
  .project-card,
  .project-card *,
  .service-card,
  .service-card *,
  .portfolio-mini-card,
  .portfolio-mini-card *,
  .portfolio-card,
  .portfolio-card *,
  .music-portfolio-card,
  .music-portfolio-card *,
  .visual-label,
  .eco-overlay-text,
  .eco-overlay-text *,
  .hero .section-title,
  .hero .section-subtitle,
  .portfolio-hero-copy .section-title,
  .portfolio-hero-copy .section-subtitle,
  .detail-hero .section-title,
  .detail-hero .section-subtitle,
  .hero-admin-card,
  .hero-admin-card *,
  .project-admin-card,
  .project-admin-card *,
  .service-admin-card,
  .service-admin-card *,
  .portfolio-admin-card,
  .portfolio-admin-card *,
  .music-admin-card,
  .music-admin-card *
) {
  color: var(--on-media-text) !important;
}

html[data-theme] :where(
  .project-card p,
  .project-card small,
  .service-card p,
  .service-card span,
  .portfolio-mini-card p,
  .portfolio-mini-card span,
  .portfolio-mini-card small,
  .portfolio-tag,
  .music-portfolio-card p,
  .music-portfolio-card span,
  .music-portfolio-card small,
  .eco-overlay-text p,
  .hero-admin-card p,
  .project-admin-card p,
  .service-admin-card p,
  .portfolio-admin-card p,
  .music-admin-card p,
  .project-admin-card small,
  .service-admin-card small,
  .portfolio-admin-card small,
  .music-admin-card small
) {
  color: var(--on-media-muted) !important;
}

html[data-theme] :where(
  .form-control.custom-input,
  .form-select.custom-input,
  .custom-input,
  input.custom-input,
  select.custom-input,
  textarea.custom-input
) {
  color: var(--text-strong) !important;
}

html[data-theme] :where(
  .form-control.custom-input::placeholder,
  .custom-input::placeholder,
  input.custom-input::placeholder,
  textarea.custom-input::placeholder
) {
  color: var(--field-placeholder) !important;
}

html[data-theme] :where(.site-message, .site-message button) {
  color: var(--text-strong) !important;
}

html[data-theme] :where(.errorlist, .form-alert, .admin-table-row .danger, .admin-table-actions .danger, .request-card-actions .danger, .delete-icon) {
  color: var(--danger-text) !important;
}

html[data-theme] :where(.admin-status-good, .status-new, .crop-selected-note) {
  color: var(--success-text) !important;
}

html[data-theme] :where(.status-reviewing, .status-quoted) {
  color: var(--warning-text) !important;
}

html[data-theme] :where(.status-approved) {
  color: var(--info-text) !important;
}

/* Topbar CTA needs higher specificity than Bootstrap/base nav-link rules. */
html[data-theme] .premium-topbar .navbar-nav .nav-link.nav-cta,
html[data-theme] .premium-topbar .navbar-nav .nav-link.nav-cta:hover,
html[data-theme] .premium-topbar .navbar-nav .nav-link.nav-cta:focus {
  background: var(--button-bg) !important;
  border: 1px solid var(--button-bg) !important;
  color: var(--button-text) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--button-bg) 16%, transparent);
}

html[data-theme] .premium-topbar .navbar-nav .nav-link.nav-cta:hover,
html[data-theme] .premium-topbar .navbar-nav .nav-link.nav-cta:focus {
  filter: brightness(0.94);
  transform: translateY(-1px);
}

html[data-theme] .premium-topbar .navbar-nav .nav-link.nav-cta::after {
  display: none !important;
}

/* Toggle also needs explicit selectors so generic span/nav text rules cannot recolor it. */
html[data-theme] .premium-topbar .theme-toggle,
html[data-theme] .admin-topbar .theme-toggle,
html[data-theme] .theme-toggle {
  width: 62px !important;
  height: 34px !important;
  min-width: 62px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--button-muted-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--text-strong) !important;
  overflow: hidden;
}

html[data-theme] .theme-toggle .theme-toggle-track {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 0 5px !important;
}

html[data-theme] .theme-toggle .theme-toggle-icon,
html[data-theme] .theme-toggle .theme-toggle-icon svg {
  color: var(--text-muted) !important;
  fill: currentColor !important;
}

html[data-theme] .theme-toggle .theme-toggle-icon {
  position: relative !important;
  z-index: 2 !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  pointer-events: none;
}

html[data-theme] .theme-toggle .theme-toggle-icon svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
}

html[data-theme] .theme-toggle .theme-toggle-thumb {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  z-index: 1 !important;
  width: 26px !important;
  height: 26px !important;
  background: var(--button-bg) !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  transform: translateX(0) !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.22s ease, box-shadow 0.22s ease !important;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-thumb {
  transform: translateX(28px) !important;
}

html[data-theme="light"] .theme-toggle .theme-toggle-sun,
html[data-theme="light"] .theme-toggle .theme-toggle-sun svg,
html[data-theme="dark"] .theme-toggle .theme-toggle-moon,
html[data-theme="dark"] .theme-toggle .theme-toggle-moon svg {
  color: var(--button-text) !important;
  fill: currentColor !important;
}

html[data-theme] .theme-toggle:hover .theme-toggle-thumb,
html[data-theme] .theme-toggle:focus-visible .theme-toggle-thumb {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

html[data-theme] .theme-toggle:active .theme-toggle-thumb {
  width: 28px !important;
}

html[data-theme="dark"] .theme-toggle:active .theme-toggle-thumb {
  transform: translateX(26px) !important;
}

/* Final interactive control audit: buttons, link-buttons, checkbox inputs, and button-like upload zones. */
html[data-theme] :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  .btn-premium,
  .btn-secondary-premium,
  .nav-cta,
  .admin-topbar-actions a,
  .admin-header-actions a,
  .admin-table-actions a,
  .admin-table-actions button,
  .request-card-actions a,
  .admin-form-actions a,
  .admin-form-actions button,
  .delete-card-actions a,
  .delete-card-actions button,
  .inline-admin-form button,
  .super-login-button,
  .admin-cropper-close,
  .admin-cropper-reset,
  .admin-cropper-use,
  .drag-upload-zone,
  .music-platforms a,
  .theme-toggle,
  input[type="file"].custom-input::file-selector-button
) {
  border-color: var(--border) !important;
  transition:
    background-color 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease,
    filter 0.22s ease;
}

html[data-theme] :where(
  .btn-premium,
  .super-login-button,
  .admin-topbar-actions a:first-of-type,
  .admin-header-actions a:first-child,
  .request-card-actions a:first-child,
  .admin-form-actions button,
  .delete-card-actions a,
  .inline-admin-form button,
  .admin-cropper-use,
  input[type="submit"],
  button[type="submit"]:not(.danger):not(.danger-button),
  input[type="file"].custom-input::file-selector-button
) {
  background: var(--button-bg) !important;
  border-color: var(--button-bg) !important;
  color: var(--button-text) !important;
}

html[data-theme] :where(
  .btn-secondary-premium,
  .admin-topbar-actions a,
  .admin-header-actions a + a,
  .admin-table-actions a,
  .admin-table-actions button,
  .request-card-actions a,
  .admin-form-actions a,
  .admin-cropper-close,
  .admin-cropper-reset,
  .drag-upload-zone,
  .music-platforms a,
  .theme-toggle,
  button[type="button"]:not(.navbar-toggler):not(.theme-toggle):not(.admin-cropper-use),
  input[type="button"],
  input[type="reset"]
) {
  background: var(--button-muted-bg) !important;
  border-color: var(--border) !important;
  color: var(--button-muted-text) !important;
}

html[data-theme] :where(
  .danger,
  .danger-button,
  .request-card-actions .danger,
  .admin-table-actions .danger,
  .admin-form-actions .danger-button,
  .delete-card-actions button,
  button[type="submit"].danger,
  button[type="submit"].danger-button
) {
  background: color-mix(in srgb, var(--button-danger-bg) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--button-danger-bg) 36%, transparent) !important;
  color: var(--danger-text) !important;
}

html[data-theme] .delete-card-actions button,
html[data-theme] .admin-form-actions .danger-button {
  background: var(--button-danger-bg) !important;
  border-color: var(--button-danger-bg) !important;
  color: var(--button-danger-text) !important;
}

html[data-theme] :where(
  .btn-premium:hover,
  .btn-premium:focus-visible,
  .btn-secondary-premium:hover,
  .btn-secondary-premium:focus-visible,
  .admin-topbar-actions a:hover,
  .admin-topbar-actions a:focus-visible,
  .admin-header-actions a:hover,
  .admin-header-actions a:focus-visible,
  .admin-table-actions a:hover,
  .admin-table-actions a:focus-visible,
  .admin-table-actions button:hover,
  .admin-table-actions button:focus-visible,
  .request-card-actions a:hover,
  .request-card-actions a:focus-visible,
  .admin-form-actions a:hover,
  .admin-form-actions a:focus-visible,
  .admin-form-actions button:hover,
  .admin-form-actions button:focus-visible,
  .delete-card-actions a:hover,
  .delete-card-actions a:focus-visible,
  .delete-card-actions button:hover,
  .delete-card-actions button:focus-visible,
  .inline-admin-form button:hover,
  .inline-admin-form button:focus-visible,
  .super-login-button:hover,
  .super-login-button:focus-visible,
  .admin-cropper-close:hover,
  .admin-cropper-close:focus-visible,
  .admin-cropper-reset:hover,
  .admin-cropper-reset:focus-visible,
  .admin-cropper-use:hover,
  .admin-cropper-use:focus-visible,
  .drag-upload-zone:hover,
  .drag-upload-zone:focus-visible,
  .music-platforms a:hover,
  .music-platforms a:focus-visible,
  .theme-toggle:hover,
  .theme-toggle:focus-visible
) {
  box-shadow: 0 0 0 4px var(--control-focus-ring), var(--shadow-soft) !important;
  outline: none !important;
}

html[data-theme] :where(
  .form-check-input,
  input[type="checkbox"],
  input[type="radio"]
) {
  accent-color: var(--button-bg);
  background-color: var(--field-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--button-text) !important;
  box-shadow: none !important;
}

html[data-theme] :where(
  .form-check-input:checked,
  input[type="checkbox"]:checked,
  input[type="radio"]:checked
) {
  background-color: var(--button-bg) !important;
  border-color: var(--button-bg) !important;
}

html[data-theme] :where(
  .form-check-input:focus,
  input[type="checkbox"]:focus,
  input[type="radio"]:focus
) {
  border-color: var(--button-bg) !important;
  box-shadow: 0 0 0 4px var(--control-focus-ring) !important;
  outline: none !important;
}

html[data-theme] :where(
  .admin-checkbox-field,
  .remember-row
) {
  color: var(--text) !important;
}

html[data-theme] :where(
  .admin-checkbox-field label,
  .remember-row span
) {
  color: var(--text) !important;
}

html[data-theme] .navbar-toggler {
  background: var(--button-muted-bg) !important;
  border-color: var(--border) !important;
}

/* Hero buttons sit on imagery, so keep them high-contrast in both themes. */
html[data-theme] .hero .hero-buttons .btn-premium,
html[data-theme] .hero .hero-buttons .btn-premium:hover,
html[data-theme] .hero .hero-buttons .btn-premium:focus-visible {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #050505 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme] .hero .hero-buttons .btn-secondary-premium,
html[data-theme] .hero .hero-buttons .btn-secondary-premium:hover,
html[data-theme] .hero .hero-buttons .btn-secondary-premium:focus-visible {
  background: rgba(5, 5, 5, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme] .detail-hero .btn-premium,
html[data-theme] .detail-hero .btn-premium:hover,
html[data-theme] .detail-hero .btn-premium:focus-visible {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #050505 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme] .detail-hero .btn-secondary-premium,
html[data-theme] .detail-hero .btn-secondary-premium:hover,
html[data-theme] .detail-hero .btn-secondary-premium:focus-visible {
  background: rgba(5, 5, 5, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme] .music-detail-hero .btn-premium,
html[data-theme] .music-detail-hero .btn-premium:hover,
html[data-theme] .music-detail-hero .btn-premium:focus-visible {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #050505 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme] .music-detail-hero .btn-secondary-premium,
html[data-theme] .music-detail-hero .btn-secondary-premium:hover,
html[data-theme] .music-detail-hero .btn-secondary-premium:focus-visible,
html[data-theme] .music-detail-hero .music-platforms a,
html[data-theme] .music-detail-hero .music-platforms a:hover,
html[data-theme] .music-detail-hero .music-platforms a:focus-visible {
  background: rgba(5, 5, 5, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme] .music-detail-hero .music-platforms a i,
html[data-theme] .music-detail-hero .music-platforms a small,
html[data-theme] .music-detail-hero .music-platforms a span {
  color: #ffffff !important;
}


/* Light theme elevation pass for cards, panels, and hero/media surfaces. */
html[data-theme="light"] :where(
  .stat-card,
  .case-panel,
  .web-card,
  .ps-card,
  .apply-brief,
  .apply-form-panel,
  .form-step-card,
  .portfolio-hero-proof,
  .portfolio-hero-proof div,
  .portfolio-empty-card,
  .music-empty-card,
  .admin-panel,
  .admin-metrics article,
  .admin-chart-card,
  .admin-quick-grid a,
  .request-admin-card,
  .request-detail-hero,
  .request-detail-panel,
  .request-status-form,
  .premium-editor-preview,
  .premium-editor-panel,
  .delete-confirm-card,
  .site-stat-admin-card,
  .drag-upload-zone,
  .music-editor-artist-preview,
  .super-login-card,
  .site-message
) {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  box-shadow: var(--shadow-sn) !important;
}

html[data-theme="light"] :where(
  .stat-card:hover,
  .case-panel:hover,
  .web-card:hover,
  .ps-card:hover,
  .admin-quick-grid a:hover,
  .drag-upload-zone:hover,
  .drag-upload-zone:focus-visible,
  .drag-upload-zone.is-dragover,
  .admin-form-field.is-dragover .drag-upload-zone
) {
  background: var(--card-bg-strong) !important;
  border-color: color-mix(in srgb, var(--text-strong) 16%, transparent) !important;
  box-shadow: var(--shadow-sn) !important;
}

html[data-theme="light"] :where(
  .visual-large,
  .visual-small,
  .eco-showcase,
  .project-card,
  .service-card,
  .portfolio-mini-card,
  .portfolio-card,
  .music-portfolio-card,
  .hero-admin-card,
  .project-admin-card,
  .service-admin-card,
  .portfolio-admin-card,
  .music-admin-card,
  .album-card img,
  .artist img,
  .music-detail-artist,
  .portfolio-card .portfolio-artist-avatar,
  .music-portfolio-card .music-artist-avatar
) {
  border-color: rgba(255, 255, 255, 0.42) !important;
  box-shadow: var(--shadow-sn) !important;
}

html[data-theme="light"] :where(
  .visual-large:hover,
  .visual-small:hover,
  .eco-showcase:hover,
  .project-card:hover,
  .service-card:hover,
  .portfolio-mini-card:hover,
  .portfolio-card:hover,
  .music-portfolio-card:hover,
  .album-card:hover img,
  .artist:hover img
) {
  border-color: rgba(255, 255, 255, 0.62) !important;
  box-shadow: var(--shadow-sn) !important;
}

html[data-theme] :where(
  .stat-card,
  .case-panel,
  .web-card,
  .ps-card,
  .visual-large,
  .visual-small,
  .eco-showcase,
  .project-card,
  .service-card,
  .portfolio-mini-card,
  .portfolio-card,
  .music-portfolio-card,
  .apply-brief,
  .apply-form-panel,
  .form-step-card,
  .portfolio-hero-proof,
  .portfolio-hero-proof div,
  .portfolio-empty-card,
  .music-empty-card,
  .admin-panel,
  .admin-metrics article,
  .admin-chart-card,
  .admin-quick-grid a,
  .request-admin-card,
  .request-detail-hero,
  .request-detail-panel,
  .request-status-form,
  .premium-editor-preview,
  .premium-editor-panel,
  .delete-confirm-card,
  .site-stat-admin-card,
  .hero-admin-card,
  .project-admin-card,
  .service-admin-card,
  .portfolio-admin-card,
  .music-admin-card,
  .super-login-card,
  .site-message
) {
  box-shadow: var(--shadow-sn) !important;
}

html[data-theme] .hero,
html[data-theme] .hero-overlay {
  box-shadow: none !important;
}

html[data-theme="light"] :where(
  .portfolio-hero,
  .detail-hero,
  .music-detail-hero
) {
  box-shadow: inset 0 -1px 0 var(--card-border);
}

html[data-theme="light"] :where(
  .portfolio-hero-overlay,
  .music-detail-hero .overlay-dark
) {
  box-shadow: inset 0 -120px 120px rgba(247, 245, 239, 0.28);
}

html[data-theme="light"] .detail-hero .overlay-dark {
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.62)),
    linear-gradient(to top, rgba(0, 0, 0, 0.76) 8%, rgba(0, 0, 0, 0.42) 52%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.08)) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .detail-hero .eyebrow,
html[data-theme="light"] .detail-hero .section-title,
html[data-theme="light"] .detail-hero .section-subtitle {
  color: var(--on-media-text) !important;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .detail-hero .eyebrow,
html[data-theme="light"] .detail-hero .section-subtitle {
  color: var(--on-media-muted) !important;
}

html[data-theme="light"] .music-detail-hero .overlay-dark {
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.64)),
    linear-gradient(to top, rgba(0, 0, 0, 0.78) 8%, rgba(0, 0, 0, 0.44) 52%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.08)) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .music-detail-hero .eyebrow,
html[data-theme="light"] .music-detail-hero .section-title,
html[data-theme="light"] .music-detail-hero .section-subtitle,
html[data-theme="light"] .music-detail-hero .music-platforms > span {
  color: var(--on-media-text) !important;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .music-detail-hero .eyebrow,
html[data-theme="light"] .music-detail-hero .section-subtitle,
html[data-theme="light"] .music-detail-hero .music-platforms > span {
  color: var(--on-media-muted) !important;
}

/* Home hero text and image wash are theme-aware. */
html[data-theme="dark"] .hero .eyebrow,
html[data-theme="dark"] .hero .section-title,
html[data-theme="dark"] .hero .section-subtitle {
  color: var(--on-media-text) !important;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .hero .section-subtitle,
html[data-theme="dark"] .hero .eyebrow {
  color: var(--on-media-muted) !important;
}

html[data-theme="light"] .hero-overlay {
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.58)),
    linear-gradient(to top, rgba(0, 0, 0, 0.72) 8%, rgba(0, 0, 0, 0.38) 52%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.08)) !important;
}

html[data-theme="light"] .hero .eyebrow,
html[data-theme="light"] .hero .section-title,
html[data-theme="light"] .hero .section-subtitle {
  color: var(--on-media-text) !important;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .hero .section-subtitle,
html[data-theme="light"] .hero .eyebrow {
  color: var(--on-media-muted) !important;
}

/* Premium admin shell: follows the public theme tokens and font system. */
html[data-theme] .admin-app-shell,
html[data-theme] .admin-app-shell * {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: 0;
}

html[data-theme] .admin-app-shell {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--text-strong) 7%, transparent), transparent 28%),
    linear-gradient(180deg, var(--page-bg), var(--page-bg-alt)) !important;
  color: var(--text) !important;
}

html[data-theme] .admin-sidebar {
  padding: 18px 14px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 78%, transparent), color-mix(in srgb, var(--surface) 72%, transparent)),
    var(--admin-sidebar-bg) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: 4px 0 14px color-mix(in srgb, #000000 7%, transparent) !important;
  backdrop-filter: saturate(150%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(150%) blur(22px) !important;
}

html[data-theme] .admin-sidebar-brand {
  min-height: 54px;
  padding: 8px 10px 18px !important;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-strong) !important;
  font-size: 0.82rem;
  font-weight: 850 !important;
  letter-spacing: 0.16rem !important;
}

html[data-theme] .admin-sidebar-brand img {
  width: 36px !important;
  height: 36px !important;
  padding: 4px;
  border-radius: 12px;
  background: var(--button-muted-bg);
  border: 1px solid var(--border);
  box-shadow: none !important;
}

html[data-theme] .admin-sidebar-nav {
  gap: 7px !important;
}

html[data-theme] .admin-sidebar-nav a,
html[data-theme] .admin-sidebar-footer a {
  position: relative;
  min-height: 46px !important;
  padding: 0 13px !important;
  border: 1px solid transparent;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 0.92rem;
  font-weight: 720 !important;
  overflow: hidden;
  isolation: isolate;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
}

html[data-theme] .admin-sidebar-nav a::before,
html[data-theme] .admin-sidebar-footer a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--button-bg) 12%, transparent), transparent 54%),
    var(--button-muted-bg);
  opacity: 0;
  transition: opacity 0.22s ease;
}

html[data-theme] .admin-sidebar-nav a::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: var(--button-bg);
  opacity: 0;
  transform: scaleY(0.45);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

html[data-theme] .admin-sidebar-nav a:hover,
html[data-theme] .admin-sidebar-nav a:focus-visible,
html[data-theme] .admin-sidebar-nav a.active,
html[data-theme] .admin-sidebar-footer a:hover,
html[data-theme] .admin-sidebar-footer a:focus-visible {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-strong) !important;
  box-shadow: var(--shadow-sn) !important;
  transform: translateX(2px);
  outline: none !important;
}

html[data-theme] .admin-sidebar-nav a:hover::before,
html[data-theme] .admin-sidebar-nav a:focus-visible::before,
html[data-theme] .admin-sidebar-nav a.active::before,
html[data-theme] .admin-sidebar-footer a:hover::before,
html[data-theme] .admin-sidebar-footer a:focus-visible::before {
  opacity: 1;
}

html[data-theme] .admin-sidebar-nav a:hover::after,
html[data-theme] .admin-sidebar-nav a:focus-visible::after,
html[data-theme] .admin-sidebar-nav a.active::after {
  opacity: 1;
  transform: scaleY(1);
}

html[data-theme] .admin-sidebar-nav svg {
  width: 19px !important;
  height: 19px !important;
  padding: 2px;
  border-radius: 8px;
  color: inherit !important;
  fill: currentColor !important;
  opacity: 0.82 !important;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

html[data-theme] .admin-sidebar-nav a:hover svg,
html[data-theme] .admin-sidebar-nav a:focus-visible svg,
html[data-theme] .admin-sidebar-nav a.active svg {
  opacity: 1 !important;
  transform: scale(1.04);
}

html[data-theme] .admin-sidebar-footer {
  border-top: 1px solid var(--border);
}

html[data-theme] .admin-topbar {
  background: var(--nav-bg) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, #000000 7%, transparent) !important;
  backdrop-filter: saturate(150%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(150%) blur(22px) !important;
}

@media (max-width: 1100px) {
  html[data-theme] .admin-sidebar {
    box-shadow: 0 4px 12px color-mix(in srgb, #000000 7%, transparent) !important;
  }

  html[data-theme] .admin-sidebar-nav a:hover,
  html[data-theme] .admin-sidebar-nav a:focus-visible,
  html[data-theme] .admin-sidebar-nav a.active,
  html[data-theme] .admin-sidebar-footer a:hover,
  html[data-theme] .admin-sidebar-footer a:focus-visible {
    transform: translateY(-1px);
  }

  html[data-theme] .admin-sidebar-nav a::after {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 5px;
    width: auto;
    height: 2px;
    transform: scaleX(0.45);
  }

  html[data-theme] .admin-sidebar-nav a:hover::after,
  html[data-theme] .admin-sidebar-nav a:focus-visible::after,
  html[data-theme] .admin-sidebar-nav a.active::after {
    transform: scaleX(1);
  }
}

html[data-theme] .admin-menu-toggle,
html[data-theme] .admin-sidebar-backdrop {
  display: none;
}

@media (max-width: 1100px) {
  html[data-theme] body.admin-body {
    padding-top: 0 !important;
  }

  html[data-theme] .admin-menu-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1400;
    width: 44px;
    height: 44px;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: 1px solid var(--border) !important;
    border-radius: 14px;
    background: var(--nav-bg) !important;
    color: var(--text-strong) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, #000000 8%, transparent) !important;
    backdrop-filter: saturate(150%) blur(18px);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
  }

  html[data-theme] .admin-menu-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  html[data-theme] .admin-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  html[data-theme] .admin-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  html[data-theme] .admin-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  html[data-theme] .admin-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: block;
    background: rgba(0, 0, 0, 0.44);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  html[data-theme] body.admin-menu-open .admin-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  html[data-theme] .admin-app-shell {
    display: block !important;
  }

  html[data-theme] .admin-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1300 !important;
    width: min(82vw, 310px) !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-y: auto !important;
    padding: 72px 16px 18px !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: 0 !important;
    transform: translateX(-104%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  html[data-theme] .admin-sidebar.is-open,
  html[data-theme] body.admin-menu-open .admin-sidebar {
    transform: translateX(0);
  }

  html[data-theme] .admin-sidebar-brand {
    min-width: 0 !important;
    padding: 0 10px 18px !important;
    margin-bottom: 10px;
  }

  html[data-theme] .admin-sidebar-brand span {
    display: inline !important;
  }

  html[data-theme] .admin-sidebar-nav {
    display: grid !important;
    min-width: 0 !important;
    gap: 7px !important;
  }

  html[data-theme] .admin-sidebar-nav a,
  html[data-theme] .admin-sidebar-footer a {
    min-height: 46px !important;
    justify-content: flex-start !important;
    border-radius: 14px !important;
    background: transparent !important;
  }

  html[data-theme] .admin-sidebar-footer {
    margin-top: auto !important;
    margin-left: 0 !important;
    padding-top: 14px !important;
  }

  html[data-theme] .admin-main {
    padding-top: 78px !important;
  }

  html[data-theme] .admin-topbar {
    margin-top: -78px !important;
    padding-left: 72px !important;
  }
}

/* Keep admin surfaces flatter than public showcase cards. */
html[data-theme] :where(
  .admin-panel,
  .admin-metrics article,
  .admin-chart-card,
  .admin-quick-grid a,
  .request-admin-card,
  .request-detail-hero,
  .request-detail-panel,
  .request-status-form,
  .premium-editor-preview,
  .premium-editor-panel,
  .delete-confirm-card,
  .site-stat-admin-card,
  .hero-admin-card,
  .project-admin-card,
  .service-admin-card,
  .portfolio-admin-card,
  .music-admin-card
) {
  box-shadow: 0 6px 16px color-mix(in srgb, #000000 8%, transparent) !important;
}

html[data-theme] :where(
  .admin-quick-grid a:hover,
  .admin-sidebar-nav a:hover,
  .admin-sidebar-nav a:focus-visible,
  .admin-sidebar-nav a.active,
  .admin-sidebar-footer a:hover,
  .admin-sidebar-footer a:focus-visible
) {
  box-shadow: 0 6px 16px color-mix(in srgb, #000000 9%, transparent) !important;
}

/* Admin topbar Public Site action: explicit theme-aware primary button. */
html[data-theme] .admin-topbar-actions .admin-public-site-link,
html[data-theme] .admin-topbar-actions .admin-public-site-link:hover,
html[data-theme] .admin-topbar-actions .admin-public-site-link:focus-visible {
  background: var(--button-bg) !important;
  border: 1px solid var(--button-bg) !important;
  color: var(--button-text) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, #000000 8%, transparent) !important;
}

html[data-theme] .admin-topbar-actions .admin-public-site-link:hover,
html[data-theme] .admin-topbar-actions .admin-public-site-link:focus-visible {
  filter: brightness(0.94);
  transform: translateY(-1px);
  outline: none !important;
}

/* SVG logo is black artwork; invert it in dark theme and keep it native in light. */
html[data-theme] .theme-logo {
  transition: filter 0.22s ease, opacity 0.22s ease, transform 0.22s ease;
}

html[data-theme="light"] .theme-logo {
  filter: none;
}

html[data-theme="dark"] .theme-logo {
  filter: invert(1) brightness(1.08) contrast(1.04);
}

html[data-theme] .premium-topbar .brand-logo.theme-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

html[data-theme] .footer-logo.theme-logo {
  object-fit: contain;
}

/* Music detail light theme uses the standard light button palette. */
html[data-theme="light"] .music-detail-hero .btn-premium,
html[data-theme="light"] .music-detail-hero .btn-premium:hover,
html[data-theme="light"] .music-detail-hero .btn-premium:focus-visible {
  background: var(--button-bg) !important;
  border-color: var(--button-bg) !important;
  color: var(--button-text) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, #000000 10%, transparent) !important;
}

html[data-theme="light"] .music-detail-hero .btn-secondary-premium,
html[data-theme="light"] .music-detail-hero .btn-secondary-premium:hover,
html[data-theme="light"] .music-detail-hero .btn-secondary-premium:focus-visible,
html[data-theme="light"] .music-detail-hero .music-platforms a,
html[data-theme="light"] .music-detail-hero .music-platforms a:hover,
html[data-theme="light"] .music-detail-hero .music-platforms a:focus-visible {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #050505 !important;
  box-shadow: 0 6px 16px color-mix(in srgb, #000000 8%, transparent) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme="light"] .music-detail-hero .music-platforms a i,
html[data-theme="light"] .music-detail-hero .music-platforms a small,
html[data-theme="light"] .music-detail-hero .music-platforms a span {
  color: #050505 !important;
}

/* Project image-card badges invert with the active theme. */
html[data-theme="dark"] .project-card .status-pill,
html[data-theme="dark"] .project-card .status-pill:hover {
  background: #050505 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .project-card .status-pill,
html[data-theme="light"] .project-card .status-pill:hover {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  color: #050505 !important;
}

/* Portfolio/detail hero buttons use white buttons with black text on light theme. */
html[data-theme="light"] .detail-hero .btn-premium,
html[data-theme="light"] .detail-hero .btn-premium:hover,
html[data-theme="light"] .detail-hero .btn-premium:focus-visible,
html[data-theme="light"] .detail-hero .btn-secondary-premium,
html[data-theme="light"] .detail-hero .btn-secondary-premium:hover,
html[data-theme="light"] .detail-hero .btn-secondary-premium:focus-visible {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #050505 !important;
  box-shadow: 0 6px 16px color-mix(in srgb, #000000 8%, transparent) !important;
}

/* Premium theme-aware dashboard charts. */
html[data-theme] .admin-chart-card {
  position: relative;
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--chart-accent) 7%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 82%, transparent), color-mix(in srgb, var(--surface) 72%, transparent)) !important;
  border-color: color-mix(in srgb, var(--chart-accent) 10%, var(--border)) !important;
}

html[data-theme] .admin-line-chart,
html[data-theme] .admin-bar-chart {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(var(--chart-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px),
    radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--chart-accent) 6%, transparent), transparent 32%),
    color-mix(in srgb, var(--surface-soft) 82%, transparent) !important;
  background-size: 100% 34px, 52px 100%, 100% 100%, 100% 100% !important;
  border-color: color-mix(in srgb, var(--chart-accent) 18%, var(--border)) !important;
}

html[data-theme] .admin-line-chart::after,
html[data-theme] .admin-bar-chart::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, #ffffff 8%, transparent), transparent 40%);
}

html[data-theme] .chart-fill-start {
  stop-color: var(--chart-fill);
}

html[data-theme] .chart-fill-end {
  stop-color: var(--chart-fill-end);
}

html[data-theme] .chart-area {
  fill: url(#viewsFill) !important;
}

html[data-theme] .chart-line {
  stroke: var(--chart-accent) !important;
  stroke-width: 4.5;
  filter: drop-shadow(0 0 10px var(--chart-glow)) drop-shadow(0 8px 16px color-mix(in srgb, var(--chart-accent) 18%, transparent)) !important;
}

html[data-theme] .admin-bar-chart span {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chart-accent) 78%, transparent), var(--chart-accent)) !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--chart-accent) 12%, transparent) !important;
}

html[data-theme] .admin-bar-chart span:nth-child(3n + 1) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--chart-accent) 66%, transparent), var(--chart-accent)) !important;
}

html[data-theme] .admin-bar-chart span:nth-child(3n + 2) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--chart-accent) 82%, transparent), var(--chart-accent)) !important;
}

html[data-theme] .admin-bar-chart span:nth-child(3n) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--chart-accent) 54%, transparent), var(--chart-accent)) !important;
}

/* Final admin surface pass: flatter shadows and solid card backgrounds. */
html[data-theme] :where(
  .admin-action-card,
  .admin-panel,
  .admin-metrics article,
  .admin-chart-card,
  .admin-quick-grid a,
  .request-admin-card,
  .request-detail-hero,
  .request-detail-panel,
  .request-status-form,
  .premium-editor-preview,
  .premium-editor-panel,
  .delete-confirm-card,
  .site-stat-admin-card,
  .drag-upload-zone,
  .music-editor-artist-preview,
  .hero-admin-card,
  .project-admin-card,
  .service-admin-card,
  .portfolio-admin-card,
  .music-admin-card
) {
  box-shadow: 0 2px 8px color-mix(in srgb, #000000 6%, transparent) !important;
}

html[data-theme="light"] :where(
  .admin-action-card,
  .admin-panel,
  .admin-metrics article,
  .admin-chart-card,
  .admin-quick-grid a,
  .request-admin-card,
  .request-detail-hero,
  .request-detail-panel,
  .request-status-form,
  .premium-editor-preview,
  .premium-editor-panel,
  .delete-confirm-card,
  .site-stat-admin-card,
  .drag-upload-zone,
  .music-editor-artist-preview
) {
  background: #ffffff !important;
  border-color: rgba(22, 22, 20, 0.1) !important;
}

html[data-theme="dark"] :where(
  .admin-action-card,
  .admin-panel,
  .admin-metrics article,
  .admin-chart-card,
  .admin-quick-grid a,
  .request-admin-card,
  .request-detail-hero,
  .request-detail-panel,
  .request-status-form,
  .premium-editor-preview,
  .premium-editor-panel,
  .delete-confirm-card,
  .site-stat-admin-card,
  .drag-upload-zone,
  .music-editor-artist-preview
) {
  background: #101010 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme] :where(
  .admin-action-card:hover,
  .admin-quick-grid a:hover,
  .admin-quick-grid a:focus-visible,
  .drag-upload-zone:hover,
  .drag-upload-zone:focus-visible,
  .drag-upload-zone.is-dragover,
  .admin-form-field.is-dragover .drag-upload-zone
) {
  box-shadow: 0 4px 10px color-mix(in srgb, #000000 7%, transparent) !important;
}

/* Final dashboard chart palette: Seeny-inspired, colorful, and theme-aware. */
html[data-theme] .admin-chart-grid {
  gap: clamp(16px, 2vw, 22px) !important;
}

html[data-theme] .admin-chart-card {
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2vw, 24px) !important;
  border-radius: 24px !important;
  background: var(--admin-chart-card-bg, var(--surface-strong)) !important;
  border-color: var(--border) !important;
  box-shadow: var(--admin-chart-shadow, 0 14px 34px rgba(15, 23, 42, 0.08)) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

html[data-theme] .admin-chart-card:hover {
  transform: translateY(-2px);
  border-color: var(--border) !important;
  box-shadow: var(--admin-chart-shadow-hover, 0 20px 46px rgba(15, 23, 42, 0.12)) !important;
}

html[data-theme] .admin-chart-card::before {
  display: none !important;
}

html[data-theme] .admin-chart-head {
  margin-bottom: 0 !important;
  align-items: flex-start;
}

html[data-theme] .admin-chart-head h2 {
  font-size: 1.08rem !important;
  line-height: 1.25;
}

html[data-theme] .admin-chart-stat {
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}

html[data-theme] .admin-chart-stat strong {
  color: var(--text-strong) !important;
  font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
  letter-spacing: -0.03em;
}

html[data-theme] .admin-chart-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

html[data-theme] .admin-chart-meta span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--chart-accent) 20%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--chart-accent) 10%, var(--admin-chart-card-bg, transparent));
  color: var(--chart-accent) !important;
  font-size: 0.72rem;
  font-weight: 800;
}

html[data-theme] .admin-chart-card > p {
  margin: 0 !important;
  padding-top: 2px;
  color: var(--text-muted) !important;
  font-size: 0.88rem;
  line-height: 1.55;
}

html[data-theme] .admin-line-chart,
html[data-theme] .admin-bar-chart {
  position: relative;
  display: block !important;
  background: var(--admin-chart-stage-bg, var(--surface-soft)) !important;
  background-size: auto !important;
  border-color: var(--border) !important;
  min-height: 240px;
  height: min(34vh, 300px);
  margin-top: 0;
  padding: 14px;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme] .admin-line-chart svg {
  overflow: visible;
}

html[data-theme] .admin-line-chart canvas,
html[data-theme] .admin-bar-chart canvas {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

html[data-theme] .admin-line-chart::after,
html[data-theme] .admin-bar-chart::after {
  display: none !important;
}

html[data-theme] .chart-fill-start {
  stop-color: var(--chart-fill) !important;
}

html[data-theme] .chart-fill-mid {
  stop-color: var(--chart-fill-mid) !important;
}

html[data-theme] .chart-fill-end {
  stop-color: var(--chart-fill-end) !important;
}

html[data-theme] .chart-line {
  stroke: var(--chart-accent) !important;
  stroke-width: 4.5;
  filter:
    drop-shadow(0 0 10px var(--chart-glow))
    drop-shadow(0 8px 18px color-mix(in srgb, var(--chart-accent) 18%, transparent)) !important;
}

html[data-theme] .admin-bar-chart span {
  min-width: 16px;
  border-radius: 999px 999px 8px 8px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chart-accent) 12%, #ffffff), var(--chart-accent)) !important;
  box-shadow: 0 10px 18px color-mix(in srgb, var(--chart-accent) 20%, transparent) !important;
  transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}

html[data-theme] .admin-bar-chart span:hover {
  transform: translateY(-3px);
  filter: saturate(1.08) brightness(1.03);
}

html[data-theme] .admin-bar-chart span:nth-child(4n + 1) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--chart-accent) 12%, #ffffff), var(--chart-accent)) !important;
}

html[data-theme] .admin-bar-chart span:nth-child(4n + 2) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--chart-accent-2) 12%, #ffffff), var(--chart-accent-2)) !important;
  box-shadow: 0 10px 18px color-mix(in srgb, var(--chart-accent-2) 20%, transparent) !important;
}

html[data-theme] .admin-bar-chart span:nth-child(4n + 3) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--chart-accent-3) 12%, #ffffff), var(--chart-accent-3)) !important;
  box-shadow: 0 10px 18px color-mix(in srgb, var(--chart-accent-3) 20%, transparent) !important;
}

html[data-theme] .admin-bar-chart span:nth-child(4n) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--chart-accent-4) 12%, #ffffff), var(--chart-accent-4)) !important;
  box-shadow: 0 10px 18px color-mix(in srgb, var(--chart-accent-4) 20%, transparent) !important;
}

@media (max-width: 767px) {
  html[data-theme] .admin-chart-head {
    display: grid;
    gap: 12px;
  }

  html[data-theme] .admin-chart-stat,
  html[data-theme] .admin-chart-meta {
    justify-items: start;
    justify-content: flex-start;
    text-align: left;
  }

  html[data-theme] .admin-line-chart,
  html[data-theme] .admin-bar-chart {
    min-height: 220px;
    height: 220px;
  }
}

html[data-theme="light"] {
  --admin-chart-card-bg: #ffffff;
  --admin-chart-stage-bg: #f8fbff;
  --admin-chart-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  --admin-chart-shadow-hover: 0 20px 46px rgba(15, 23, 42, 0.12);
}

html[data-theme="dark"] {
  --admin-chart-card-bg: #101010;
  --admin-chart-stage-bg: #0b1220;
  --admin-chart-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
  --admin-chart-shadow-hover: 0 22px 48px rgba(0, 0, 0, 0.38);
}

/* Public mobile topbar: match the cleaner admin mobile header treatment. */
@media (max-width: 767px) {
  html[data-theme] body:not(.admin-body) {
    padding-top: 64px !important;
  }

  html[data-theme] .premium-topbar.navbar,
  html[data-theme] .navbar.premium-topbar {
    min-height: 64px !important;
    padding: 0 !important;
    background: var(--mobile-nav-solid-bg, var(--page-bg)) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, #000000 10%, transparent) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  html[data-theme] .premium-topbar .container-fluid {
    min-height: 64px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 12px !important;
  }

  html[data-theme] .premium-topbar .navbar-brand {
    min-width: 0;
    max-width: calc(100vw - 86px);
    gap: 9px;
    font-size: 0.78rem !important;
    letter-spacing: 0.08rem !important;
    white-space: nowrap;
  }

  html[data-theme] .premium-topbar .navbar-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html[data-theme] .premium-topbar .brand-logo.theme-logo {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px;
  }

  html[data-theme] .premium-topbar .navbar-toggler {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: var(--mobile-nav-toggle-bg, var(--surface-strong)) !important;
    color: var(--mobile-nav-toggle-icon, var(--text-strong)) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, #000000 8%, transparent) !important;
    transition:
      background-color 0.22s ease,
      border-color 0.22s ease,
      color 0.22s ease,
      box-shadow 0.22s ease,
      transform 0.22s ease;
  }

  html[data-theme] .premium-topbar .navbar-toggler:hover,
  html[data-theme] .premium-topbar .navbar-toggler:focus-visible,
  html[data-theme] .premium-topbar .navbar-toggler[aria-expanded="true"] {
    background: var(--button-bg) !important;
    border-color: var(--button-bg) !important;
    color: var(--mobile-nav-toggle-active-icon, var(--button-text)) !important;
    box-shadow: 0 0 0 4px var(--control-focus-ring), 0 8px 18px color-mix(in srgb, #000000 10%, transparent) !important;
    outline: none !important;
  }

  html[data-theme] .premium-topbar .navbar-toggler-icon {
    position: relative;
    width: 18px !important;
    height: 14px !important;
    background-image: none !important;
    color: var(--mobile-nav-toggle-icon, var(--text-strong)) !important;
    border-top: 2px solid var(--mobile-nav-toggle-icon, var(--text-strong)) !important;
    border-bottom: 2px solid var(--mobile-nav-toggle-icon, var(--text-strong)) !important;
    transition: border-color 0.2s ease;
  }

  html[data-theme] .premium-topbar .navbar-toggler-icon::before,
  html[data-theme] .premium-topbar .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--mobile-nav-toggle-icon, var(--text-strong)) !important;
    transform-origin: center;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  html[data-theme] .premium-topbar .navbar-toggler-icon::before {
    top: 4px;
  }

  html[data-theme] .premium-topbar .navbar-toggler-icon::after {
    top: 4px;
    opacity: 0;
  }

  html[data-theme] .premium-topbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    color: var(--mobile-nav-toggle-active-icon, var(--button-text)) !important;
    border-color: transparent !important;
  }

  html[data-theme] .premium-topbar .navbar-toggler:hover .navbar-toggler-icon,
  html[data-theme] .premium-topbar .navbar-toggler:focus-visible .navbar-toggler-icon {
    color: var(--mobile-nav-toggle-active-icon, var(--button-text)) !important;
    border-top-color: var(--mobile-nav-toggle-active-icon, var(--button-text)) !important;
    border-bottom-color: var(--mobile-nav-toggle-active-icon, var(--button-text)) !important;
  }

  html[data-theme] .premium-topbar .navbar-toggler:hover .navbar-toggler-icon::before,
  html[data-theme] .premium-topbar .navbar-toggler:hover .navbar-toggler-icon::after,
  html[data-theme] .premium-topbar .navbar-toggler:focus-visible .navbar-toggler-icon::before,
  html[data-theme] .premium-topbar .navbar-toggler:focus-visible .navbar-toggler-icon::after {
    background: var(--mobile-nav-toggle-active-icon, var(--button-text)) !important;
  }

  html[data-theme] .premium-topbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
  html[data-theme] .premium-topbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    background: var(--mobile-nav-toggle-active-icon, var(--button-text)) !important;
  }

  html[data-theme] .premium-topbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: rotate(45deg);
  }

  html[data-theme] .premium-topbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    opacity: 1;
    transform: rotate(-45deg);
  }

  html[data-theme] .premium-topbar .navbar-collapse {
    position: fixed !important;
    top: 72px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    flex-basis: auto !important;
    margin-top: 0 !important;
    box-sizing: border-box;
    z-index: 1040;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    background: var(--mobile-nav-panel-bg, var(--surface-strong)) !important;
    box-shadow: 0 18px 40px color-mix(in srgb, #000000 16%, transparent) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  html[data-theme] .premium-topbar .navbar-collapse.collapsing {
    height: auto !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
  }

  html[data-theme] .premium-topbar .navbar-collapse.show,
  html[data-theme] .premium-topbar .navbar-collapse.collapsing {
    transform: translateY(0);
    opacity: 1;
  }

  html[data-theme] .premium-topbar .navbar-nav {
    width: 100%;
    display: grid !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  html[data-theme] .premium-topbar .nav-item {
    width: 100%;
  }

  html[data-theme] .premium-topbar .nav-link {
    min-height: 46px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 13px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    line-height: 1.1 !important;
    color: var(--text) !important;
  }

  html[data-theme] .premium-topbar .nav-link:hover,
  html[data-theme] .premium-topbar .nav-link:focus-visible,
  html[data-theme] .premium-topbar .nav-link.active {
    background: var(--mobile-nav-link-hover-bg, var(--surface-soft)) !important;
    border-color: var(--border) !important;
    color: var(--text-strong) !important;
    outline: none !important;
  }

  html[data-theme] .premium-topbar .nav-link::after {
    display: none !important;
  }

  html[data-theme] .premium-topbar .nav-theme-item {
    min-height: 46px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 6px 13px !important;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--mobile-nav-row-bg, var(--surface-soft)) !important;
  }

  html[data-theme] .premium-topbar .nav-theme-item::before {
    content: "Theme";
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
  }

  html[data-theme] .premium-topbar .nav-theme-item .theme-toggle {
    width: 62px !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html[data-theme] .premium-topbar .navbar-nav .nav-link.nav-cta,
  html[data-theme] .premium-topbar .navbar-nav .nav-link.nav-cta:hover,
  html[data-theme] .premium-topbar .navbar-nav .nav-link.nav-cta:focus-visible {
    min-height: 46px !important;
    justify-content: center !important;
    margin: 2px 0 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 18px color-mix(in srgb, #000000 10%, transparent) !important;
  }
}

html[data-theme="dark"] {
  --mobile-nav-solid-bg: #080808;
  --mobile-nav-panel-bg: #101010;
  --mobile-nav-toggle-bg: #151515;
  --mobile-nav-toggle-icon: #ffffff;
  --mobile-nav-toggle-active-icon: #000000;
  --mobile-nav-link-hover-bg: #171717;
  --mobile-nav-row-bg: #151515;
}

html[data-theme="light"] {
  --mobile-nav-solid-bg: #faf8f2;
  --mobile-nav-panel-bg: #ffffff;
  --mobile-nav-toggle-bg: #ffffff;
  --mobile-nav-toggle-icon: #11110f;
  --mobile-nav-toggle-active-icon: #ffffff;
  --mobile-nav-link-hover-bg: #f1eee6;
  --mobile-nav-row-bg: #f7f5ef;
}

/* Final admin Edit/Delete action buttons. */
html[data-theme] :where(
  .admin-table-actions a,
  .admin-table-actions button,
  .request-card-actions a,
  .inline-admin-form button
) {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--button-bg) !important;
  border-radius: 999px !important;
  background: var(--button-bg) !important;
  color: var(--button-text) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, #000000 8%, transparent) !important;
  text-shadow: none !important;
}

html[data-theme] :where(
  .admin-table-actions a:not(.danger):hover,
  .admin-table-actions a:not(.danger):focus-visible,
  .admin-table-actions button:hover,
  .admin-table-actions button:focus-visible,
  .request-card-actions a:not(.danger):hover,
  .request-card-actions a:not(.danger):focus-visible,
  .inline-admin-form button:hover,
  .inline-admin-form button:focus-visible
) {
  background: var(--button-bg) !important;
  border-color: var(--button-bg) !important;
  color: var(--button-text) !important;
  filter: brightness(0.94);
  box-shadow: 0 0 0 4px var(--control-focus-ring), 0 4px 10px color-mix(in srgb, #000000 9%, transparent) !important;
  outline: none !important;
}

html[data-theme] :where(
  .admin-table-actions a.danger,
  .request-card-actions a.danger,
  .delete-card-actions button,
  .delete-card-actions a,
  .admin-form-actions .danger-button,
  button[type="submit"].danger,
  button[type="submit"].danger-button
) {
  border-color: var(--button-danger-bg) !important;
  background: var(--button-danger-bg) !important;
  color: var(--button-danger-text) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--button-danger-bg) 18%, transparent) !important;
  text-shadow: none !important;
}

html[data-theme] :where(
  .admin-table-actions a.danger:hover,
  .admin-table-actions a.danger:focus-visible,
  .request-card-actions a.danger:hover,
  .request-card-actions a.danger:focus-visible,
  .delete-card-actions button:hover,
  .delete-card-actions button:focus-visible,
  .delete-card-actions a:hover,
  .delete-card-actions a:focus-visible,
  .admin-form-actions .danger-button:hover,
  .admin-form-actions .danger-button:focus-visible,
  button[type="submit"].danger:hover,
  button[type="submit"].danger:focus-visible,
  button[type="submit"].danger-button:hover,
  button[type="submit"].danger-button:focus-visible
) {
  border-color: var(--button-danger-bg) !important;
  background: var(--button-danger-bg) !important;
  color: var(--button-danger-text) !important;
  filter: brightness(0.94);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--button-danger-bg) 18%, transparent), 0 4px 10px color-mix(in srgb, var(--button-danger-bg) 20%, transparent) !important;
  outline: none !important;
}

/* Final admin Save/Cancel action bar. */
html[data-theme] .admin-form-actions {
  background: var(--admin-actions-bg, var(--surface-strong)) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, #000000 8%, transparent) !important;
  text-shadow: none !important;
}

html[data-theme] .admin-form-actions button:not(.danger):not(.danger-button),
html[data-theme] .admin-form-actions button[type="submit"]:not(.danger):not(.danger-button) {
  background: var(--button-bg) !important;
  border: 1px solid var(--button-bg) !important;
  color: var(--button-text) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, #000000 8%, transparent) !important;
  text-shadow: none !important;
}

html[data-theme] .admin-form-actions a {
  background: var(--button-muted-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--button-muted-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-theme] .admin-form-actions button:not(.danger):not(.danger-button):hover,
html[data-theme] .admin-form-actions button:not(.danger):not(.danger-button):focus-visible {
  background: var(--button-bg) !important;
  border-color: var(--button-bg) !important;
  color: var(--button-text) !important;
  filter: brightness(0.94);
  box-shadow: 0 0 0 4px var(--control-focus-ring), 0 4px 10px color-mix(in srgb, #000000 9%, transparent) !important;
  outline: none !important;
}

html[data-theme] .admin-form-actions a:hover,
html[data-theme] .admin-form-actions a:focus-visible {
  background: var(--button-muted-bg) !important;
  border-color: var(--border) !important;
  color: var(--button-muted-text) !important;
  filter: brightness(0.96);
  box-shadow: 0 0 0 4px var(--control-focus-ring) !important;
  outline: none !important;
}

html[data-theme="light"] {
  --admin-actions-bg: #ffffff;
}

html[data-theme="dark"] {
  --admin-actions-bg: #101010;
}

@media (max-width: 380px) {
  html[data-theme] .premium-topbar .navbar-brand {
    font-size: 0.72rem !important;
    letter-spacing: 0.06rem !important;
  }
}

/* Centered admin spinner loader. */
html[data-theme] .admin-main {
  position: relative;
}

html[data-theme] .admin-main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: color-mix(in srgb, var(--admin-bg, var(--page-bg)) 76%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 260ms ease,
    visibility 0s linear 260ms;
}

html[data-theme] .admin-main::after {
  content: "";
  position: fixed;
  top: 50%;
  left: calc(260px + ((100vw - 260px) / 2));
  z-index: 1091;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border: 4px solid color-mix(in srgb, var(--text-strong) 16%, transparent);
  border-top-color: var(--text-strong);
  border-radius: 50%;
  animation: adminSpinner 0.82s linear infinite;
  box-shadow: 0 14px 34px color-mix(in srgb, #000000 22%, transparent);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 220ms ease,
    visibility 0s linear 220ms;
}

html[data-theme] .admin-main.is-loading {
  pointer-events: none;
}

html[data-theme] .admin-main.is-loading::before,
html[data-theme] .admin-main.is-loading::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@keyframes adminSpinner {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .admin-main.is-loading::after {
    animation-duration: 1.8s;
  }
}

@media (max-width: 1100px) {
  html[data-theme] .admin-main.is-loading::after {
    left: 50%;
  }
}