/*
 * MyTropes — Brand Theme Override
 * Light mode: clean, editorial, off-white, pastel rose accent (Bookshop.org-inspired)
 * Dark mode (.dark-mode): "After Dark" — warm-black, deep plum, soft rose-gold
 */

/* ============================================================
   TOKENS — Light Mode
   ============================================================ */
:root {
  --mt-bg:           #FDF6FD;
  --mt-bg-card:      #FFFFFF;
  --mt-bg-soft:      #F2EDE8;
  --mt-border:       #E8E0D8;
  --mt-border-light: #F0EAE4;
  --mt-text:         #2A2118;
  --mt-text-muted:   #7A6B61;
  --mt-text-light:   #A69387;
  --mt-accent:       #C5A6BB;
  --mt-accent-hover: #A888A0;
  --mt-accent-soft:  #F5EEF4;
  --mt-accent-mid:   #D9BDD2;
  --mt-header-bg:    #FFFFFF;
  --mt-header-border:#EDE6DF;
  --mt-shadow:       0 1px 3px rgba(42,33,24,0.07), 0 2px 8px rgba(42,33,24,0.05);
  --mt-shadow-hover: 0 4px 16px rgba(42,33,24,0.12);
  --mt-radius:       8px;
  --mt-radius-sm:    5px;
  --mt-font-head:    'Playfair Display', 'Montserrat', serif;
  --mt-font-body:    'Nunito Sans', sans-serif;
}

/* ============================================================
   TOKENS — After Dark Mode
   ============================================================ */
.dark-mode {
  --mt-bg:           #0C080E;
  --mt-bg-card:      #1A1020;
  --mt-bg-soft:      #150E1C;
  --mt-border:       #3D2848;
  --mt-border-light: #2C1E38;
  --mt-text:         #F2E8EE;
  --mt-text-muted:   #B89EAA;
  --mt-text-light:   #8A6E7A;
  --mt-accent:       #C97885;
  --mt-accent-hover: #E09AA5;
  --mt-accent-soft:  #2E1A22;
  --mt-accent-mid:   #A05060;
  --mt-header-bg:    #0A0610;
  --mt-header-border:#2A1830;
  --mt-shadow:       0 1px 4px rgba(0,0,0,0.4), 0 2px 12px rgba(0,0,0,0.3);
  --mt-shadow-hover: 0 4px 20px rgba(180,80,100,0.15);
}

/* ============================================================
   GOOGLE FONTS — add Playfair Display
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');

/* ============================================================
   BASE
   ============================================================ */
body {
  background: #FDF6FD !important;
  background-color: #FDF6FD !important;
  color: var(--mt-text);
  font-family: var(--mt-font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mt-font-head);
  color: var(--mt-text);
}

p {
  color: var(--mt-text-muted);
}

a {
  color: var(--mt-accent);
}
a:hover {
  color: var(--mt-accent-hover);
}

/* ============================================================
   HEADER
   ============================================================ */
header {
  background: var(--mt-header-bg) !important;
  border-bottom: 1px solid var(--mt-header-border) !important;
  box-shadow: 0 1px 4px rgba(42,33,24,0.06);
  padding: 14px 0 !important;
}

.sticky-header {
  background: var(--mt-header-bg) !important;
  border-bottom: 1px solid var(--mt-header-border) !important;
  box-shadow: 0 2px 8px rgba(42,33,24,0.08);
}

.primary-menu li a {
  color: var(--mt-text) !important;
  font-weight: 600;
  font-size: 15px;
  font-family: var(--mt-font-body);
}

.primary-menu li a:hover {
  color: var(--mt-accent) !important;
}

.primary-menu li a.nav-link-effect::before {
  background-color: var(--mt-accent);
}

.navbar-toggler {
  border: none;
  color: var(--mt-text);
}

/* Dark mode hamburger */
.dark-mode .navbar-toggler,
.dark-mode .custom-toggler i {
  color: var(--mt-text) !important;
}

/* ============================================================
   THEME TOGGLE — relabel to "After Dark"
   ============================================================ */
.theme-icon {
  color: var(--mt-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border-radius: var(--mt-radius-sm);
  border: 1px solid var(--mt-border);
  transition: all 0.2s ease;
  margin-left: 12px;
  white-space: nowrap;
}

.theme-icon:hover {
  background: var(--mt-accent-soft);
  border-color: var(--mt-accent-mid);
  color: var(--mt-accent);
}

#theme-icon {
  font-size: 15px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-sign-up {
  background: var(--mt-accent) !important;
  color: #FFF !important;
  border: 1px solid var(--mt-accent) !important;
  border-radius: var(--mt-radius-sm) !important;
  font-size: 14px !important;
  padding: 7px 16px !important;
  font-weight: 600 !important;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.btn-sign-up:hover {
  background: var(--mt-accent-hover) !important;
  border-color: var(--mt-accent-hover) !important;
  box-shadow: 0 2px 8px rgba(181,115,122,0.3) !important;
}

.btn-sign-in {
  background: transparent !important;
  color: var(--mt-text) !important;
  border: 1px solid var(--mt-border) !important;
  border-radius: var(--mt-radius-sm) !important;
  font-size: 14px !important;
  padding: 7px 16px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease;
}

.btn-sign-in:hover {
  background: var(--mt-accent-soft) !important;
  border-color: var(--mt-accent-mid) !important;
  color: var(--mt-accent) !important;
}

.btn-primary, .btn-send-chat,
.card-ai .btn, .card-ai .btn-primary,
.start-chat {
  background: #C5A6BB !important;
  background-color: #C5A6BB !important;
  border: 1px solid #C5A6BB !important;
  border-radius: var(--mt-radius-sm) !important;
  color: #FFF !important;
}
.btn-primary:hover, .btn-send-chat:hover,
.card-ai .btn:hover, .start-chat:hover {
  background: #A888A0 !important;
  background-color: #A888A0 !important;
  border-color: #A888A0 !important;
  color: #FFF !important;
}

/* ============================================================
   CARDS (bot/character cards from original)
   ============================================================ */
.card-ai {
  background: var(--mt-bg-card) !important;
  border: 1px solid var(--mt-border-light) !important;
  box-shadow: var(--mt-shadow);
  border-radius: var(--mt-radius) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-ai:hover {
  box-shadow: var(--mt-shadow-hover) !important;
  transform: translateY(-2px);
}
.card-ai-name h3 {
  color: var(--mt-text) !important;
  font-family: var(--mt-font-head) !important;
  font-size: 17px !important;
}
.card-ai-job span {
  color: var(--mt-text-muted) !important;
}
.card-ai .btn {
  background: var(--mt-accent) !important;
  color: #FFF !important;
  border: 0 !important;
  border-radius: var(--mt-radius-sm) !important;
}
.card-ai .btn:hover {
  background: var(--mt-accent-hover) !important;
}

/* ============================================================
   NOVEL CARDS (Phase 3 homepage)
   ============================================================ */
.mt-novel-card {
  min-width: 198px;
  max-width: 198px;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: #302A2F !important;
  border: 1px solid var(--mt-border-light);
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
@media (max-width: 576px) {
  .mt-novel-card { min-width: 175px; max-width: 175px; }
}
.mt-novel-card:hover {
  box-shadow: var(--mt-shadow-hover);
  transform: translateY(-3px);
}
.mt-novel-card__title {
  font-family: var(--mt-font-head);
  color: var(--mt-text);
  font-size: 16px;
  font-weight: 600;
}
.mt-novel-card__author {
  color: #C5A6BB !important;
  font-size: 13px;
}
.mt-novel-card__heat {
  font-size: 12px;
  color: var(--mt-text-light);
}

/* ============================================================
   CHARACTER CARDS (Phase 3 homepage)
   ============================================================ */
.mt-character-card {
  background: #302A2F !important;
  border: 1px solid var(--mt-border-light);
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}
.mt-character-card:hover {
  box-shadow: var(--mt-shadow-hover);
  transform: translateY(-3px);
}
.mt-character-card__name {
  font-family: var(--mt-font-head);
  color: var(--mt-text);
  font-weight: 600;
}
.mt-character-card__desc {
  color: var(--mt-text-muted);
  font-size: 13px;
}

/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */
.mt-homepage {
  background: var(--mt-bg);
}

.mt-hero {
  background: #302A2F !important;
  border-bottom: 1px solid var(--mt-border);
}

.mt-hero__title {
  font-family: var(--mt-font-head);
  color: #FEE9FA !important;
  font-size: clamp(28px, 4vw, 52px);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.4);
}

.mt-hero__subtitle {
  color: var(--mt-text-muted) !important;
}

.mt-hero__cta {
  background: var(--mt-accent) !important;
  color: #FFF !important;
  border: 0 !important;
  border-radius: var(--mt-radius-sm) !important;
  padding: 11px 28px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.mt-hero__cta:hover {
  background: var(--mt-accent-hover) !important;
  box-shadow: 0 3px 12px rgba(181,115,122,0.35) !important;
}

.mt-shelf__heading {
  font-family: var(--mt-font-head);
  color: var(--mt-text);
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid var(--mt-border);
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.mt-shelf__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mt-accent);
  margin-bottom: 4px;
  display: block;
}

.mt-shelf__view-all {
  font-size: 13px;
  color: var(--mt-accent);
  font-weight: 600;
  text-decoration: none;
}
.mt-shelf__view-all:hover {
  color: var(--mt-accent-hover);
}

/* Trope badge pills */
.mt-trope-badge {
  background: var(--mt-accent-soft);
  color: var(--mt-accent);
  border: 1px solid var(--mt-accent-mid);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  display: inline-block;
  transition: background 0.15s ease;
}
.mt-trope-badge:hover {
  background: var(--mt-accent-mid);
  color: #FFF;
}

/* ============================================================
   ONBOARDING
   ============================================================ */
.mt-onboarding {
  background: var(--mt-bg) !important;
}
.mt-onboarding-card {
  background: var(--mt-bg-card) !important;
  border: 1px solid var(--mt-border) !important;
  box-shadow: var(--mt-shadow) !important;
}
.mt-onboarding__trope-btn {
  border: 1.5px solid var(--mt-border) !important;
  background: var(--mt-bg-card) !important;
  color: var(--mt-text) !important;
  border-radius: var(--mt-radius) !important;
  transition: all 0.18s ease;
}
.mt-onboarding__trope-btn:hover,
.mt-onboarding__trope-btn.selected {
  border-color: var(--mt-accent) !important;
  background: var(--mt-accent-soft) !important;
  color: var(--mt-accent) !important;
}
.mt-onboarding__progress {
  background: var(--mt-accent) !important;
}

/* ============================================================
   READER
   ============================================================ */
.mt-reader {
  background: var(--mt-bg) !important;
}
.mt-reader__sidebar {
  background: var(--mt-bg-card) !important;
  border-right: 1px solid var(--mt-border) !important;
}
.mt-reader__content {
  color: var(--mt-text);
  font-size: 18px;
  line-height: 1.85;
}
.mt-reader__chapter-title {
  font-family: var(--mt-font-head);
  color: var(--mt-text);
}
.mt-reader__chat-panel {
  background: var(--mt-bg-card) !important;
  border-left: 1px solid var(--mt-border) !important;
}

/* ============================================================
   CHAT
   ============================================================ */
.chat-background {
  background: var(--mt-bg-card) !important;
  border: 1px solid var(--mt-border) !important;
}

.chat-frame {
  background: var(--mt-bg-soft) !important;
}

.message-container {
  background: var(--mt-bg-card) !important;
  border: 1px solid var(--mt-border-light) !important;
  border-bottom: 3px solid var(--mt-border) !important;
}

.thread-user .message-container {
  background: var(--mt-accent-soft) !important;
  border-color: var(--mt-accent-mid) !important;
  border-bottom-color: var(--mt-accent-mid) !important;
}

.message-container .user-name h5 {
  color: var(--mt-accent) !important;
}

.message-container::before {
  border-right-color: var(--mt-bg-card) !important;
}

.chat-input textarea, .chat-input input {
  border: 1px solid var(--mt-border) !important;
  background: var(--mt-bg) !important;
  color: var(--mt-text) !important;
  border-radius: var(--mt-radius) !important;
}

.chat-input textarea:focus, .chat-input input:focus {
  border-color: var(--mt-accent-mid) !important;
  outline: none;
}

.message-area-bottom {
  background: var(--mt-bg-card) !important;
  border-top: 1px solid var(--mt-border) !important;
}

.ai-chat-top {
  background: var(--mt-bg-card) !important;
  border-bottom: 1px solid var(--mt-border) !important;
}

.ai-chat-top-name h4 {
  color: var(--mt-text) !important;
  font-family: var(--mt-font-head) !important;
}

.ai-chat-top-job {
  color: var(--mt-text-muted) !important;
}

.ai-contacts-top strong {
  color: var(--mt-text) !important;
}

.ai-contacts-top span {
  color: var(--mt-text-muted) !important;
}

.ai-contacts-item {
  border-bottom: 1px solid var(--mt-border-light) !important;
}

.ai-contacts-item:hover {
  background: var(--mt-bg-soft) !important;
}

.ai-contacts-item-active {
  background: var(--mt-accent-soft) !important;
  border-left: 3px solid var(--mt-accent) !important;
}

.ai-contacts-name {
  color: var(--mt-text) !important;
}

.ai-contacts-job {
  color: var(--mt-text-muted) !important;
}

.col-contacts-border {
  border-right: 1px solid var(--mt-border) !important;
}

.col-main-chat {
  box-shadow: -8px 0 16px rgba(42,33,24,0.04) !important;
}

/* ============================================================
   FORMS & PANELS
   ============================================================ */
.white-card {
  background: var(--mt-bg-card) !important;
  border: 1px solid var(--mt-border) !important;
  box-shadow: var(--mt-shadow) !important;
  border-radius: var(--mt-radius) !important;
}

.form-control, .form-select {
  border: 1px solid var(--mt-border) !important;
  background: var(--mt-bg) !important;
  color: var(--mt-text) !important;
  border-radius: var(--mt-radius-sm) !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--mt-accent-mid) !important;
  box-shadow: 0 0 0 3px rgba(181,115,122,0.12) !important;
}

.form-floating > label {
  color: var(--mt-text-muted) !important;
}

.default-title {
  color: var(--mt-accent) !important;
}

#inner-page {
  background: #302A2F !important;
}
#inner-page h1, #inner-page h2, #inner-page h3,
#inner-page h4, #inner-page h5, #inner-page p {
  color: #FEE9FA !important;
}

.offcanvas-custom {
  background: var(--mt-bg-card) !important;
}

/* Dropdown */
.dropdown-menu {
  background: var(--mt-bg-card) !important;
  border: 1px solid var(--mt-border) !important;
  box-shadow: var(--mt-shadow-hover) !important;
}
.dropdown-item {
  color: var(--mt-text) !important;
}
.dropdown-item:hover {
  background: var(--mt-accent-soft) !important;
  color: var(--mt-accent) !important;
}

/* Modals */
.modal-content {
  background: var(--mt-bg-card) !important;
  border: 1px solid var(--mt-border) !important;
}
.modal-header {
  border-bottom: 1px solid var(--mt-border) !important;
}
.modal-footer {
  border-top: 1px solid var(--mt-border) !important;
}

/* Tables */
.table > :not(caption) > * > * {
  border-color: var(--mt-border) !important;
  color: var(--mt-text);
}

/* Alerts */
.alert-warning {
  background: var(--mt-accent-soft) !important;
  border: 1px solid var(--mt-accent-mid) !important;
  color: var(--mt-text) !important;
}

/* My credits badge */
.my-credits {
  background: var(--mt-accent-soft);
  color: var(--mt-accent);
  border: 1px solid var(--mt-accent-mid);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  margin-left: 8px;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--mt-bg-card) !important;
  border-top: 1px solid var(--mt-border) !important;
}
footer ul li,
footer ul li a,
footer p {
  color: var(--mt-text-muted) !important;
}
footer ul li a:hover {
  color: var(--mt-accent) !important;
}

/* ============================================================
   SCROLLBARS
   ============================================================ */
#overflow-chat::-webkit-scrollbar-thumb,
.ai-contacts-scroll::-webkit-scrollbar-thumb {
  background-color: var(--mt-accent-mid);
}
#overflow-chat::-webkit-scrollbar-track,
.ai-contacts-scroll::-webkit-scrollbar-track {
  background-color: var(--mt-bg-soft);
}

/* ============================================================
   AFTER DARK MODE — extensions beyond base tokens
   ============================================================ */
.dark-mode body {
  background: var(--mt-bg) !important;
  color: var(--mt-text);
}

.dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode h4, .dark-mode h5, .dark-mode h6 {
  color: var(--mt-text) !important;
}

.dark-mode p, .dark-mode .default-title,
.dark-mode .card-ai-job span {
  color: var(--mt-text-muted) !important;
}

.dark-mode header {
  background: var(--mt-header-bg) !important;
  border-bottom: 1px solid var(--mt-header-border) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

.dark-mode .sticky-header {
  background: var(--mt-header-bg) !important;
  border-bottom: 1px solid var(--mt-header-border) !important;
}

.dark-mode footer {
  background: var(--mt-header-bg) !important;
  border-top: 1px solid var(--mt-header-border) !important;
}

.dark-mode .card-ai {
  background: var(--mt-bg-card) !important;
  border: 1px solid var(--mt-border) !important;
  box-shadow: var(--mt-shadow);
}

.dark-mode .card-ai:hover {
  box-shadow: var(--mt-shadow-hover) !important;
}

.dark-mode .white-card {
  background: var(--mt-bg-card) !important;
  border: 1px solid var(--mt-border) !important;
}

.dark-mode .chat-background {
  background: var(--mt-bg-card) !important;
  border-color: var(--mt-border) !important;
}

.dark-mode .chat-frame {
  background: var(--mt-bg-soft) !important;
}

.dark-mode .message-container {
  background: var(--mt-bg-card) !important;
  border-color: var(--mt-border) !important;
}

.dark-mode .thread-user .message-container {
  background: var(--mt-accent-soft) !important;
  border-color: var(--mt-accent-mid) !important;
}

.dark-mode .message-container::before {
  border-right-color: var(--mt-bg-card) !important;
}

.dark-mode .chat-input textarea,
.dark-mode .chat-input input {
  background: var(--mt-bg) !important;
  border-color: var(--mt-border) !important;
  color: var(--mt-text) !important;
}

.dark-mode .message-area-bottom,
.dark-mode .col-options-input {
  background: var(--mt-bg-soft) !important;
  border-top-color: var(--mt-border) !important;
}

.dark-mode .ai-chat-top {
  background: var(--mt-header-bg) !important;
  border-bottom-color: var(--mt-border) !important;
  box-shadow: none;
}

.dark-mode .ai-contacts-scroll {
  background: var(--mt-bg) !important;
}

.dark-mode .ai-contacts-item {
  border-bottom-color: var(--mt-border-light) !important;
}

.dark-mode .ai-contacts-item:hover {
  background: var(--mt-bg-soft) !important;
}

.dark-mode .ai-contacts-item-active {
  background: var(--mt-accent-soft) !important;
  border-left: 3px solid var(--mt-accent) !important;
}

.dark-mode .col-contacts-border {
  border-right-color: var(--mt-border) !important;
}

.dark-mode .form-control,
.dark-mode .form-select,
.dark-mode .form-floating>.form-control,
.dark-mode .form-floating>.form-control-plaintext,
.dark-mode .form-floating>.form-select {
  background: var(--mt-bg) !important;
  border-color: var(--mt-border) !important;
  color: var(--mt-text) !important;
}

.dark-mode .dropdown-menu.show {
  background: var(--mt-bg-card) !important;
  border-color: var(--mt-border) !important;
}

.dark-mode .dropdown-item {
  color: var(--mt-text) !important;
}

.dark-mode .dropdown-item:hover {
  background: var(--mt-accent-soft) !important;
  color: var(--mt-accent) !important;
}

.dark-mode .modal-content {
  background: var(--mt-bg-card) !important;
  border-color: var(--mt-border) !important;
}

.dark-mode .modal-header {
  border-bottom-color: var(--mt-border) !important;
}

.dark-mode .modal-footer {
  border-top-color: var(--mt-border) !important;
}

.dark-mode .offcanvas-custom {
  background: var(--mt-bg-card) !important;
}

.dark-mode #inner-page {
  background: #302A2F !important;
}

.dark-mode .list-group-item {
  background: var(--mt-bg-card) !important;
  border-color: var(--mt-border) !important;
  color: var(--mt-text) !important;
}

.dark-mode .list-group-item:hover {
  background: var(--mt-bg-soft) !important;
}

.dark-mode .table > :not(caption) > * > * {
  border-color: var(--mt-border) !important;
}

.dark-mode .alert-warning {
  background: var(--mt-accent-soft) !important;
  border-color: var(--mt-accent-mid) !important;
}

.dark-mode hr {
  color: var(--mt-border);
}

.dark-mode .text-muted {
  color: var(--mt-text-muted) !important;
}

.dark-mode .pricing .card {
  background: var(--mt-bg-card) !important;
  border-color: var(--mt-border) !important;
}

.dark-mode .wrapper-vip-message {
  background: var(--mt-bg-card) !important;
}

.dark-mode .wrapper-vip-credit-pack {
  background: var(--mt-bg-card) !important;
  border: 1px solid var(--mt-border) !important;
  border-bottom: 4px solid var(--mt-accent-mid) !important;
}

.dark-mode .wrapper-vip-credit-pack:hover {
  box-shadow: var(--mt-shadow-hover) !important;
}

.dark-mode .panel-ai-chat {
  background: var(--mt-bg-card) !important;
  border-color: var(--mt-border) !important;
}

.dark-mode .chat-action-buttons {
  background: var(--mt-bg-soft) !important;
}

.dark-mode .chat-action-buttons:hover {
  background: var(--mt-bg-card) !important;
}

.dark-mode .form-filter {
  background: var(--mt-bg-soft) !important;
  border-color: var(--mt-border) !important;
}

.dark-mode .section-maintenance {
  background: var(--mt-bg) !important;
}

.dark-mode .blog-sidebar {
  background: var(--mt-bg-card) !important;
}

.dark-mode .wrapper-card-post {
  background: var(--mt-bg-soft) !important;
}

.dark-mode .card-post-title h2 a {
  color: var(--mt-text) !important;
}

.dark-mode .deposit-info-area {
  border-color: var(--mt-border) !important;
}

.dark-mode .share-post {
  border-bottom-color: var(--mt-border) !important;
}

.dark-mode .wrapper-image-ia {
  border-color: var(--mt-border) !important;
}

.dark-mode .wrapper-category-item {
  background: var(--mt-bg-card) !important;
  border: 1px solid var(--mt-border) !important;
  border-bottom: 5px solid var(--mt-accent-mid) !important;
}

.dark-mode .wrapper-category-item:hover {
  box-shadow: var(--mt-shadow-hover) !important;
}

.dark-mode .wrapper-category-item span {
  color: var(--mt-text-muted) !important;
}

/* After Dark reading panel */
.dark-mode .mt-reader__sidebar {
  background: var(--mt-bg-card) !important;
  border-right-color: var(--mt-border) !important;
}

.dark-mode .mt-reader__chat-panel {
  background: var(--mt-bg-card) !important;
  border-left-color: var(--mt-border) !important;
}

/* After Dark onboarding */
.dark-mode .mt-onboarding,
.dark-mode .onboarding-screen {
  background: var(--mt-bg) !important;
}

.dark-mode .mt-onboarding-card,
.dark-mode .onboarding-card {
  background: var(--mt-bg-card) !important;
  border-color: var(--mt-border) !important;
}

/* After Dark hero */
.dark-mode .mt-hero {
  background: var(--mt-bg-soft) !important;
  border-bottom-color: var(--mt-border) !important;
}

.dark-mode .mt-hero__title {
  color: var(--mt-text) !important;
}

/* After Dark: subtle warm glow on accent elements */
.dark-mode .btn-sign-up,
.dark-mode .btn-primary,
.dark-mode .btn-send-chat {
  box-shadow: 0 0 12px rgba(201,120,133,0.2);
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-accent { color: var(--mt-accent) !important; }
.bg-accent-soft { background: var(--mt-accent-soft) !important; }
.border-accent { border-color: var(--mt-accent-mid) !important; }