/* honkr dark mode */

/* === CSS Variables === */
.dark-mode {
  --dm-bg: #121212;
  --dm-surface: #1e1e1e;
  --dm-surface-raised: #2a2a2a;
  --dm-surface-overlay: #333333;
  --dm-border: rgba(255, 255, 255, 0.08);
  --dm-border-hover: rgba(255, 255, 255, 0.15);
  --dm-border-darker: rgba(255, 255, 255, 0.04);
  --dm-text: #e0e0e0;
  --dm-text-secondary: #999;
  --dm-text-muted: #666;
  --dm-accent: var(--accent-color, #cc6f7e);
  --dm-accent-dark: var(--accent-color, #cc6f7e);
  --dm-accent-bg: rgba(255, 139, 157, 0.1);
  --dm-hover: rgba(255, 255, 255, 0.05);
  --dm-shadow: rgba(0, 0, 0, 0.4);
}

/* === Body & Page Background === */
html.dark-mode {
  color: var(--dm-text) !important;
}

.dark-mode body {
  background-color: transparent !important;
}

/* === Dashboard / Main Layout === */
.dark-mode .t1,
.dark-mode #doc,
.dark-mode .dashboard,
.dark-mode .content-main,
.dark-mode #page-outer,
.dark-mode #page-container,
.dark-mode .wrapper {
  background-color: transparent !important;
}

.dark-mode #page-container.wrapper.wrapper-profile.white {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

.dark-mode [style*="background: rgba(255, 255, 255, 0.95)"],
.dark-mode [style*="background: rgb(255, 255, 255)"],
.dark-mode [style*="background: #fff"] {
  background-color: var(--dm-surface) !important;
  background: var(--dm-surface) !important;
}

.dark-mode [style*="color: #14171a"],
.dark-mode [style*="color: rgb(20, 23, 26)"] {
  color: var(--dm-text) !important;
}

.dark-mode [style*="border-bottom: 1px solid rgba(0, 0, 0, 0.06)"],
.dark-mode [style*="border-bottom: 1px solid rgba(0, 0, 0, 0.04)"] {
  border-bottom-color: var(--dm-border) !important;
}

/* === Search shit === */
.dark-mode #search-query {
  background: transparent !important;
}

/* === Topbar / Navigation === */
.dark-mode .topbar,
.dark-mode .global-nav {
  background-color: #0d0d0d !important;
  border-bottom: 1px solid var(--dm-border) !important;
}

.dark-mode .global-nav-inner {
  background-color: #0d0d0d !important;
}

.dark-mode #navbar-accounts {
  background-color: rgba(13, 13, 13, 0.85) !important;
}

.dark-mode .nav-text {
  color: #bbb !important;
}

.dark-mode #navbar-links a {
  color: #ccc !important;
}

.dark-mode #navbar-links a:hover,
.dark-mode #navbar-links a.menu-active {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* === Content Modules & Cards === */
.dark-mode .module,
.dark-mode .trends,
.dark-mode .wtf-module,
.dark-mode .profile-card,
.dark-mode .dashboard-profile-card,
.dark-mode .module-edge,
.dark-mode .module .flex-module,
.dark-mode .header-module,
.dark-mode .content-header,
.dark-mode .header-inner,
.dark-mode .no-header-inner {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

.dark-mode .module h3,
.dark-mode .module-header h3 {
  color: var(--dm-text) !important;
  border-bottom-color: var(--dm-border) !important;
}

/* === Timeline / Stream === */
.dark-mode .stream-container,
.dark-mode #timeline {
  background-color: transparent !important;
}

.dark-mode .stream-item,
.dark-mode .stream-item .tweet {
  border-bottom-color: var(--dm-border) !important;
}

.dark-mode .stream-item:hover {
  background-color: var(--dm-hover) !important;
}

.dark-mode .stream-end-inner {
  color: var(--dm-text-secondary) !important;
}

/* === Tweet Styling === */
.dark-mode .tweet {
  color: var(--dm-text) !important;
  background-color: #000000 !important;
}

.dark-mode .tweet:not(.disable-hover-change):hover {
  background-color: #111111 !important;
}

.dark-mode div.tweet.disable-hover-change:hover {
  background-color: #000000 !important;
}

.dark-mode .tweet .fullname {
  color: #fff !important;
}

.dark-mode .tweet .username,
.dark-mode .tweet .time a {
  color: var(--dm-text-secondary) !important;
}

.dark-mode .tweet .tweet-text {
  color: var(--dm-text) !important;
}

.dark-mode .tweet .context,
.dark-mode .tweet .metadata {
  color: var(--dm-text-muted) !important;
}

.dark-mode .tweet .card2 {
  background-color: var(--dm-surface-raised) !important;
  border-color: var(--dm-border) !important;
}

.dark-mode .tweet .card2 .card-body {
  color: var(--dm-text) !important;
}

.dark-mode .tweet .media-preview {
  border-color: var(--dm-border) !important;
}

/* === Compose Box === */
.dark-mode .tweet-form .tweet-box,
.dark-mode .compose-text,
.dark-mode .RichEditor-root,
.dark-mode textarea {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

.dark-mode .tweet-form {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

.dark-mode .tweet-box-shadow {
  box-shadow: none !important;
}

/* === Input Fields === */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="search"],
.dark-mode input[type="url"],
.dark-mode input[type="number"],
.dark-mode textarea,
.dark-mode select,
.dark-mode .text-input {
  background-color: var(--dm-surface-raised) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
  box-shadow: none !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: var(--dm-text-muted) !important;
}

/* === Buttons (non-primary) === */
.dark-mode
  .btn:not(.primary-btn):not(.caution-btn):not(.signup-btn):not(.voteBtn):not(
    .content-header .btn
  ) {
  background-color: #333 !important;
  background-image: -moz-linear-gradient(#444, #222) !important;
  background-image: -ms-linear-gradient(#444, #222) !important;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #444),
    color-stop(100%, #222)
  ) !important;
  background-image: -webkit-linear-gradient(#444, #222) !important;
  background-image: -o-linear-gradient(#444, #222) !important;
  background-image: linear-gradient(#444, #222) !important;
  border-color: #111 !important;
  color: var(--dm-text) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode
  .btn:not(.primary-btn):not(.caution-btn):not(.signup-btn):not(.voteBtn):not(
    .content-header .btn
  ):hover,
.dark-mode
  .btn:not(.primary-btn):not(.caution-btn):not(.signup-btn):not(.voteBtn):not(
    .content-header .btn
  ):focus {
  background-color: #444 !important;
  background-image: -moz-linear-gradient(#555, #333) !important;
  background-image: -ms-linear-gradient(#555, #333) !important;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #555),
    color-stop(100%, #333)
  ) !important;
  background-image: -webkit-linear-gradient(#555, #333) !important;
  background-image: -o-linear-gradient(#555, #333) !important;
  background-image: linear-gradient(#555, #333) !important;
  border-color: #000 !important;
}

.dark-mode .js-more-btn .voteBtn-text img {
  filter: invert(1) brightness(2);
}

/* Feed header buttons transparency */
.dark-mode .content-header .btn {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--dm-border) !important;
  color: var(--dm-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.dark-mode .content-header .btn:hover {
  background-color: var(--dm-hover) !important;
}

/* Primary buttons keep their accent colors (handled by UserTheme) */
.dark-mode .btn.primary-btn {
  color: #fff !important;
}

/* === Profile Page === */
.dark-mode .profile-header {
  background-color: var(--dm-surface) !important;
}

.dark-mode .profile-header-inner {
  border-bottom-color: var(--dm-border) !important;
}

.dark-mode .stats a,
.dark-mode .stats a:visited {
  color: inherit !important;
}

.dark-mode .stats a strong,
.dark-mode .stats a:visited strong {
  color: var(--dm-text) !important;
}

.dark-mode .stats a span,
.dark-mode .stats a:visited span,
.dark-mode .stats a .stat-label,
.dark-mode .stats a:visited .stat-label {
  color: var(--dm-text-secondary) !important;
}

.dark-mode .stats a:hover,
.dark-mode .stats a:focus,
.dark-mode .stats a:hover strong,
.dark-mode .stats a:focus strong,
.dark-mode .stats a:hover span,
.dark-mode .stats a:focus span,
.dark-mode .stats a:hover .stat-label,
.dark-mode .stats a:focus .stat-label {
  color: var(--accent-color, #ff8b9d) !important;
}

.dark-mode .slide-down-behind {
  background-color: var(--dm-surface) !important;
}

/* === Sidebar / Dashboard Right === */
.dark-mode .dashboard-right,
.dark-mode .dashboard-left {
  color: var(--dm-text) !important;
}

.dark-mode .trends li,
.dark-mode .trend-item {
  border-bottom-color: var(--dm-border) !important;
}

.dark-mode .trend-name {
  color: var(--dm-text) !important;
}

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

.dark-mode .wtf-module .content {
  border-bottom-color: var(--dm-border) !important;
}

/* === Settings Pages === */
.dark-mode .SettingsTemplate,
.dark-mode .settings-container,
.dark-mode .settings-content {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

.dark-mode .settings-content h3,
.dark-mode .settings-content label,
.dark-mode .settings-content span {
  color: var(--dm-text) !important;
}

.dark-mode .settings-content hr {
  border-color: var(--dm-border) !important;
}

/* === Sidebar Lists (e.g. Settings, Profile Nav) === */
.dark-mode .module .list-link,
.dark-mode .profile-nav .list-link {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

.dark-mode .module .active .list-link,
.dark-mode .profile-nav .active .list-link {
  background-color: var(--dm-surface-raised) !important;
  color: var(--dm-text) !important;
  border-left: 2px solid var(--accent-color, #cc6f7e) !important;
}

.dark-mode .module .list-link:hover,
.dark-mode .module .list-link:focus,
.dark-mode .profile-nav .list-link:hover,
.dark-mode .profile-nav .list-link:focus {
  background-color: var(--dm-hover) !important;
  color: var(--dm-text) !important;
  text-decoration: none !important;
}

/* === Modals & Overlays === */
.dark-mode .modal,
.dark-mode .modal-content {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

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

.dark-mode .modal-header h3 {
  color: var(--dm-text) !important;
}

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

.dark-mode .modal-overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* === Dropdown Menus === */
.dark-mode .dropdown-menu {
  background-color: var(--dm-surface-raised) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 4px 16px var(--dm-shadow) !important;
}

.dark-mode .dropdown-menu li a,
.dark-mode .dropdown-menu li button,
.dark-mode .dropdown-menu li.dropdown-item {
  color: var(--dm-text) !important;
}

.dark-mode .dropdown-menu li a:hover,
.dark-mode .dropdown-menu li button:hover,
.dark-mode .dropdown-menu li.dropdown-item:hover {
  background-color: var(--user-accent-color, var(--dm-hover)) !important;
}

/* Ensure icons in dropdown pick up the color */
.dark-mode .dropdown-menu li svg,
.dark-mode .dropdown-menu li img,
.dark-mode .dropdown-menu li.dropdown-item svg,
.dark-mode .dropdown-menu li.dropdown-item img {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
  /* Some SVGs might have default fills */
}

/* Specific fix for some icons that might need fill instead of stroke or both */
.dark-mode .dropdown-menu li.dropdown-item svg path {
  stroke: currentColor;
}

/* === Tab Navigation === */
.dark-mode .timelines-navigation,
.dark-mode .profile-nav {
  background-color: var(--dm-surface) !important;
  border-bottom-color: var(--dm-border) !important;
}

.dark-mode .timelines-navigation .profile-nav-link,
.dark-mode .profile-nav-link {
  color: var(--dm-text-secondary) !important;
}

.dark-mode .timelines-navigation .active .profile-nav-label,
.dark-mode .profile-nav-link.active {
  color: var(--dm-text) !important;
}

/* === Links (preserve accent) === */
.dark-mode .pretty-link b {
  color: var(--dm-accent) !important;
}

/* === Notifications === */
.dark-mode .notification,
.dark-mode .activity-item {
  border-bottom-color: var(--dm-border) !important;
}

.dark-mode .notification:hover,
.dark-mode .activity-item:hover {
  background-color: var(--dm-hover) !important;
}

/* === Lists & Account Items === */
.dark-mode .account-group .fullname {
  color: var(--dm-text) !important;
}

.dark-mode .account-group .username {
  color: var(--dm-text-secondary) !important;
}

.dark-mode .account-summary {
  border-bottom-color: var(--dm-border) !important;
}

/* === Scrollbar (webkit) === */
.dark-mode ::-webkit-scrollbar {
  width: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--dm-bg);
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--dm-surface-overlay);
  border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* === Misc === */
.dark-mode hr {
  border-color: var(--dm-border) !important;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode .module,
.dark-mode .module *,
.dark-mode .module .list-link,
.dark-mode .content-header .header-inner,
.dark-mode .content-no-header .no-header-inner,
.dark-mode .profile-nav,
.dark-mode .holding .holder,
.dark-mode .trend-location {
  text-shadow: none !important;
}

.dark-mode .content-header h2,
.dark-mode .content-no-header h2,
.dark-mode .flex-module-header h2,
.dark-mode .flex-module-header h3 {
  color: var(--dm-text) !important;
}

.dark-mode .alert-messages .message {
  background-color: var(--dm-surface-raised) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

.dark-mode .media-thumbnails {
  border-color: var(--dm-border) !important;
}

.dark-mode .footer-links,
.dark-mode .stream-footer {
  color: var(--dm-text-muted) !important;
}

.dark-mode .new-tweets-bar {
  background-color: var(--dm-accent-bg) !important;
  color: var(--dm-accent) !important;
  border-color: var(--dm-border) !important;
}

/* === Vote System === */
.dark-mode .voteHTML,
.dark-mode .voteoption,
.dark-mode .vote-btn-container,
.dark-mode .vote-count {
  background-color: transparent !important;
}

/* === Onboarding / Who to follow === */
.dark-mode .gwtf-module,
.dark-mode .who-to-follow {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

/* === Loading Spinners === */
.dark-mode .spinner-bigger,
.dark-mode .loading {
  filter: invert(1) !important;
}

/* === Feed containers === */
.dark-mode #new-honkr-feed {
  background-color: transparent !important;
}

.dark-mode .honk-post,
.dark-mode .reply-container {
  border-color: var(--dm-border) !important;
}

/* === Reply box === */
.dark-mode .reply-box,
.dark-mode .reply-form {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

/* === Help pages / About pages === */
.dark-mode .about-container,
.dark-mode .help-container {
  color: var(--dm-text) !important;
}

/* === Search results === */
.dark-mode .search-results-module {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

/* === Selection highlight === */
.dark-mode ::selection {
  background-color: rgba(204, 111, 126, 0.4);
  color: #fff;
}

.dark-mode .stream-footer.stream-end,
.dark-mode .stream-end-inner,
.dark-mode .stream-item.stream-loading-item {
  background-color: #000;
}

.dark-mode .stream-footer.stream-end i.goose-etched,
.dark-mode .stream-end-inner i.goose-etched {
  filter: invert(1) !important;
}

.dark-mode .hoveroverHighlight.honkMoreBtn {
  filter: none !important;
  color: var(--dm-text-muted) !important;
}

.dark-mode .hoveroverHighlight.honkMoreBtn .button-text {
  color: inherit !important;
}

.dark-mode .hoveroverHighlight.honkMoreBtn:hover {
  background-color: var(--dm-hover) !important;
  color: var(--accent-color, #1da1f2) !important;
}

.dark-mode .hoveroverHighlight.honkMoreBtn:active {
  background-color: rgba(255,255,255,0.1) !important;
}

.dark-mode .stream-item-footer .details.with-icn.js-details,
.dark-mode .stream-item-footer .actionsRedesign {
  text-shadow: none;
  border-color: #222 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.dark-mode .stream-item-footer .voteHTML {
  text-shadow: none;
  border-color: #222 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.dark-mode .votedByAvatar {
  border-color: #000 !important;
}

.dark-mode .slide-down-behind {
  mask-image: linear-gradient(transparent 0%, black 20px) !important;
}

.dark-mode .settingsAppsContainer {
  border-color: #333333 !important;
  background-color: #111111 !important;
}

.dark-mode .settingsWarning {
  background-color: #ffb3006a;
  border: 1px solid #e2c822aa;
  color: #fff;
}

.dark-mode .settingsWarning a {
  color: #ffc400;
}

/* === StatusHonk / Details Page === */
.dark-mode .expanded-honk-inner {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

.dark-mode .status-honk-text {
    color: var(--dm-text) !important;
}

.dark-mode .expanded-honk-inner .fullname {
    color: #fff !important;
}

.dark-mode .status-honk-meta,
.dark-mode .expanded-honk-inner .username {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .status-honk-stats {
    color: var(--dm-text-secondary) !important;
    border-color: var(--dm-border) !important;
}

.dark-mode .status-honk-stat-value {
    color: var(--dm-text) !important;
}

.dark-mode .status-honk-actions {
    border-color: var(--dm-border) !important;
}

.dark-mode .status-honk-action-btn {
    color: var(--dm-text-secondary) !important;
}

.dark-mode .status-honk-reply-box {
    border-color: var(--dm-border) !important;
}

.dark-mode .status-honk-divider {
    color: var(--dm-text-secondary) !important;
    border-color: var(--dm-border) !important;
}

.dark-mode .honk.expanded-honk {
    border-color: var(--dm-border) !important;
}

/* General input fallback (inputs without explicit type attribute) */
.dark-mode input:not([type]) {
    background-color: var(--dm-surface-raised) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* === Vote Button (mainVote) - Dark default state === */
.dark-mode .voteBtn {
  background-color: #333 !important;
  background-image: linear-gradient(#444, #222) !important;
  border-color: #111 !important;
  color: var(--dm-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.dark-mode .voteBtn:hover {
  background-color: #444 !important;
  background-image: linear-gradient(#555, #333) !important;
  border-color: #000 !important;
}

.dark-mode .voteBtn.expanded {
  background-color: var(--dm-surface-raised) !important;
  background-image: none !important;
  border-color: var(--dm-border) !important;
}

.dark-mode .voteBtn.expanded .vote-options {
  background-color: var(--dm-surface-raised) !important;
  color: var(--dm-text) !important;
}

.dark-mode .voteBtn.expanded .vote-options div[style*="background: #cfd9de"],
.dark-mode .voteBtn.expanded div[style*="background: #cfd9de"] {
  background: var(--dm-border) !important;
}

/* === Trending Module === */
.dark-mode .trend-item {
  border-bottom-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

.dark-mode .trend-item:hover {
  background-color: var(--dm-hover) !important;
}

.dark-mode .trend-rank {
  color: var(--dm-text-secondary) !important;
}

.dark-mode .trend-content {
  color: var(--dm-text) !important;
}

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

/* === Who to Vote For Module === */
.dark-mode .wtf-item {
  border-bottom-color: var(--dm-border) !important;
}

.dark-mode .wtf-name {
  color: var(--dm-text) !important;
}

.dark-mode .wtf-username {
  color: var(--dm-text-secondary) !important;
}

.dark-mode .search-container {
  border-bottom-color: var(--dm-border) !important;
}

.dark-mode .search-input {
  background-color: var(--dm-surface-raised) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

.dark-mode .search-input:focus {
  background-color: var(--dm-surface-overlay) !important;
}

.dark-mode .wtf-fade-overlay {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--dm-surface) 60%,
    var(--dm-surface) 100%
  ) !important;
}

.dark-mode .flex-module-header {
  border-bottom-color: var(--dm-border) !important;
}

/* === Reply Box (CSS Module overrides) === */
.dark-mode [class*="ReplyBox_inputWrapper"] {
  background: var(--dm-surface-raised) !important;
  border-color: var(--dm-border) !important;
}

.dark-mode [class*="ReplyBox_textarea"] {
  color: var(--dm-text) !important;
}

.dark-mode [class*="ReplyBox_textarea"]::placeholder {
  color: var(--dm-text-muted) !important;
}

.dark-mode [class*="Reply_reply"]:hover {
  background-color: var(--dm-hover) !important;
}

.dark-mode [class*="Reply_name"] {
  color: var(--dm-text) !important;
}

.dark-mode [class*="Reply_content"] {
  color: var(--dm-text) !important;
}

.dark-mode [class*="Reply_username"] {
  color: var(--dm-text-secondary) !important;
}

.dark-mode [class*="Reply_dot"],
.dark-mode [class*="Reply_timestamp"] {
  color: var(--dm-text-muted) !important;
}

.dark-mode [class*="Reply_actionButton"] {
  color: var(--dm-text-muted) !important;
}

.dark-mode [class*="Reply_voteWrapper"] {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode [class*="Reply_voteCount"] {
  color: var(--dm-text) !important;
}

.dark-mode [class*="Reply_charCount"] {
  color: var(--dm-text-muted) !important;
}

.dark-mode .honkrHelpCenterArticleContent.help-content {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
}

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

.dark-mode .honkrHelpCenterArticleContent.help-content p {
  color: var(--dm-text) !important;
}
/* === Button Tactile Polish === */
.dark-mode .btn:active,
.dark-mode .primary-btn:active,
.dark-mode .button:active,
.dark-mode button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* === dark mode profile === */
.dark-mode .honk.expanded-honk .expanded-honk-inner .profileHeaderWithAccent,
.dark-mode .honk.expanded-honk .status-honk-content,
.dark-mode .honk.expanded-honk .status-honk-stats,
.dark-mode .honk.expanded-honk .status-honk-actions,
.dark-mode .honk.expanded-honk .status-honk-reply-box,
.dark-mode .honk.expanded-honk .status-honk-divider {
  background-color: var(--dm-surface) !important;
}