/* TrendMap shared interface layer — loaded after page-specific styles. */
:root {
  --tm-ui-bg: #070b12;
  --tm-ui-surface: #0d141d;
  --tm-ui-surface-raised: #101923;
  --tm-ui-surface-hover: #16222d;
  --tm-ui-border: rgba(255, 255, 255, .10);
  --tm-ui-border-strong: rgba(255, 255, 255, .17);
  --tm-ui-text: rgba(255, 255, 255, .94);
  --tm-ui-muted: rgba(255, 255, 255, .62);
  --tm-ui-subtle: rgba(255, 255, 255, .44);
  --tm-ui-accent: #00d99a;
  --tm-ui-mint: #12dfcf;
  --tm-ui-accent-soft: rgba(0, 217, 154, .12);
  --tm-ui-danger: #ff8d82;
  --tm-ui-warning: #ffb347;
  --tm-ui-radius-sm: 9px;
  --tm-ui-radius-md: 13px;
  --tm-ui-radius-lg: 18px;
  --tm-ui-shadow: 0 24px 72px rgba(0, 0, 0, .48);
  --tm-ui-gradient: linear-gradient(135deg, #00c985 0%, #00dfa7 38%, #12dfcf 70%, #61e7f4 100%);
}

:where(button, a, input, textarea, select) { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--tm-ui-accent) !important;
  outline-offset: 3px;
}

/* Shared modal shells and scrims. */
:is(.trend-modal__overlay, .tm-analysis-card__overlay, .tm-build, .tm-slot-generator-modal, .modal, .tm-build__result) {
  background: rgba(3, 7, 13, .82) !important;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

:is(.trend-modal__panel, .tm-analysis-card__panel, .tm-build__card, .tm-slot-generator-card, .modal-card, .tm-build__result-card) {
  border-color: var(--tm-ui-border-strong) !important;
  background: linear-gradient(145deg, rgba(16, 24, 35, .99), rgba(10, 16, 25, .99)) !important;
  box-shadow: var(--tm-ui-shadow) !important;
}

:is(.trend-modal__panel, .tm-analysis-card__panel, .tm-build__card) { border-radius: var(--tm-ui-radius-lg) !important; }
:is(.tm-slot-generator-card, .modal-card, .tm-build__result-card) { border-radius: var(--tm-ui-radius-md) !important; }

:is(.tm-analysis-card, .trend-modal, .tm-build, .tm-slot-generator-modal, .modal, .tm-build__result) {
  color: var(--tm-ui-text);
}

:is(.tm-analysis-card__content, .tm-build__content, .tm-build__header, .tm-build__side) {
  background-color: transparent !important;
}

/* Reusable button language. */
:is(.primary, .button.primary, .tm-build__create, .tm-slot-generator-submit, .tm-analysis-card__download-reel, .download) {
  border: 0 !important;
  background: var(--tm-ui-gradient) !important;
  color: #04130f !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 22px rgba(0, 201, 133, .18);
}

:is(.primary, .button.primary, .tm-build__create, .tm-slot-generator-submit, .tm-analysis-card__download-reel, .download):hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

:is(.secondary, .button:not(.primary), .tm-slot-generator-cancel, .tm-build__close, .tm-slot-generator-close, .modal-close, .trend-modal__close, .tm-analysis-card__close, .tm-build__replay, .tm-build__voiceover-btn, .tm-build__audio-btn, .tm-slot-ai-button) {
  border-color: var(--tm-ui-border-strong) !important;
  background: rgba(22, 34, 45, .92) !important;
  color: var(--tm-ui-text) !important;
}

:is(.secondary, .button:not(.primary), .tm-slot-generator-cancel, .tm-build__close, .tm-slot-generator-close, .modal-close, .trend-modal__close, .tm-analysis-card__close, .tm-build__replay, .tm-build__voiceover-btn, .tm-build__audio-btn, .tm-slot-ai-button):hover:not(:disabled) {
  border-color: rgba(0, 217, 154, .5) !important;
  background: rgba(0, 217, 154, .11) !important;
  color: #c5ffeb !important;
}

:is(button, .button, .primary, .secondary, .tm-build__create, .tm-slot-generator-submit, .tm-slot-generator-cancel):disabled {
  cursor: not-allowed !important;
  opacity: .48 !important;
  transform: none !important;
}

/* Fields, labels, and notices use the same contrast and feedback colours. */
:is(.row input, .field input, .field textarea, .field select, .prompt, .tm-slot-generator-select, .tm-slot-generator-prompt, .tm-slot-ai-prompt, .modal textarea) {
  border-color: var(--tm-ui-border-strong) !important;
  background: rgba(7, 11, 18, .88) !important;
  color: var(--tm-ui-text) !important;
}

:is(.row input, .field input, .field textarea, .field select, .prompt, .tm-slot-generator-select, .tm-slot-generator-prompt, .tm-slot-ai-prompt, .modal textarea):focus {
  border-color: var(--tm-ui-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 217, 154, .12) !important;
}

:is(.notice, .message, .modal-error, .tm-slot-generator-error, .tm-build__status.is-error) { color: var(--tm-ui-danger) !important; }
:is(.tm-build__status.is-busy, .tm-slot-ai-state.is-processing) { color: var(--tm-ui-warning) !important; }
:is(.tm-build__status.is-ok, .tm-slot-ai-state.is-success) { color: var(--tm-ui-accent) !important; }

/* Compact loading states stay legible in every surface. */
:is(.tm-analysis-card__loading, .tm-editor__audio-loading, .loader, .loading) {
  color: var(--tm-ui-muted) !important;
}

:is(.tm-missing-toast, .toast, .notification) {
  border-color: rgba(0, 217, 154, .34) !important;
  background: rgba(13, 20, 29, .97) !important;
  color: var(--tm-ui-text) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .45) !important;
}

.tm-missing-toast__icon { background: var(--tm-ui-accent-soft) !important; color: var(--tm-ui-accent) !important; }
:is(.tm-missing-toast span, .tm-slot-generator-scene, .tm-slot-generator-label, .tm-build__title span, .tm-build__intro p) { color: var(--tm-ui-muted) !important; }

/* AI Studio authentication dialog. */
.auth-modal {
  background: rgba(3, 7, 13, .82) !important;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}
.auth-modal-card {
  border-color: var(--tm-ui-border-strong) !important;
  background: linear-gradient(145deg, #101823, #0a1019) !important;
  box-shadow: var(--tm-ui-shadow) !important;
}
.auth-modal-icon { color: var(--tm-ui-accent) !important; }
.auth-modal-primary { background: var(--tm-ui-gradient) !important; color: #04130f !important; }
.auth-modal-secondary { border-color: var(--tm-ui-border-strong) !important; background: rgba(22, 34, 45, .92) !important; color: var(--tm-ui-text) !important; }

/* Nadezhda keeps its content styling, but its overlays use the common shell. */
:is(#nadezhdaLibraryModal, #nadezhdaLibraryModalV6, #savedLectureModalV6, #nadezhdaLectureModal) {
  background-color: rgba(3, 7, 13, .82) !important;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}
.spinner { border-color: rgba(0, 217, 154, .18) !important; border-top-color: var(--tm-ui-accent) !important; }

@media (max-width: 700px) {
  :is(.trend-modal__panel, .tm-analysis-card__panel, .tm-build__card) { border-radius: 14px !important; }
  :is(.tm-analysis-card__close, .trend-modal__close, .tm-build__close) { background: rgba(16, 25, 35, .96) !important; }
}