:root {
  --body-background-color: #111111;
  --body-font-color: #DADADA;
  
  --noiz-black: #010101;
  --noiz-light-grey: #464646;
  --noiz-dark-grey: #121212;
  --noiz-dark-orange: #ee6820;
  --noiz-light-orange: #FF8200;
  --noiz-yellow: #FFCF00;

  /* Price reductions - see the note in light.css. Both are lifted for a dark
     background: #D93025 goes muddy on black, and mid grey disappears. */
  --price-drop: #FF6B5E;
  --price-was: #9A9A9A;

  --link-color: #DADADA;
  --link-color-hover: var(--noiz-light-orange);
  --cat-link-color: #989898;
  --cat-link-color-hover: var(--noiz-light-orange);
  --alt-link-color: #deb300;
  --alt-box-bg-color: rgba(120, 104, 137, 0.25);
  --content-background-color: #161616;
  --content-box-table-cell-border-color: #111111;
  --content-box-table-cell-active-text-color: white;
  --highlight-border-color: #4D4D4D;
  --button-color: var(--noiz-dark-orange);
  --button-hover-color: var(--noiz-yellow);
  --button-text-color: white;
  --menu-active-bg: #222222;
  --logo-filter: invert(0.87);
  --category-menu-item-bg-color: #191919;
  --category-menu-view-more-button-bg-color: #222222;
  --form-checked-background-color-active: var(--noiz-light-orange);
  --form-checked-background-color-hover: var(--noiz-yellow); 

  --smart-search-cont-bg-color: #222222;
  --smart-search-icon-stroke: #4D4D4D;
  --smart-search-item-bg-color-hover: #2F2F2F;

  --top-navigation-background-color: #2F2F2F;
  --top-navigation-selector-color: #DADADA;
  --top-navigation-selector-box-shadow-color: rgba(17, 17, 17, 0.1);
  --top-navigation-menu-border-color: #262626;
  --top-navigation-arrow-filter: brightness(0) invert(69%) sepia(7%) saturate(0%) hue-rotate(162deg) brightness(88%) contrast(83%);;
  
  --header-background-color: #111111;
  --header-tabs-icon-active-filter: brightness(1); 
  --header-search-form-title-color: #DADADA;
  --header-icon-fill: var(--noiz-light-orange);

  --form-disabled-background-color: #242424;
  --form-disabled-border-color: #3d3d3d;
  --form-checked-background-color: var(--button-color);
  --form-checked-background-color-hover: var(--noiz-dark-orange);
  --form-checked-background-color-active: var(--noiz-light-orange);
  --form-checked-text-color: #222222;
  --form-background-color: #555555;
  --form-field-line-color: var(--button-color);
  --form-field-line-color-hover: #808080;
  --form-field-line-color-focus: var(--noiz-light-orange);
  --form-error-background-color: #742327;
  /* Light red on the dark red error background; brand orange there is 3.30:1. */
  --form-error-text-color: #FFB4AB;

  /* Listing condition badge. Deliberately not brand orange - that is reserved
     for calls to action, and reusing it here would dilute that signal. Kept
     neutral for every condition rather than colour-coded per grade. */
  --condition-badge-bg: #37373D;
  --condition-badge-text: #C9C9CF;
  --condition-badge-border: #3D3D44;

  --featured-no-sidebar-background-color: #222222;
  --featured-background-color: #222222;
  --featured-title-color: #ffffff;
  --featured-accounts-background-color: #222222;

  --listing-card-icon-color: #ffffff;
  --listing-card-active-icon-color: #b3b3b3;

  --listing-print-icon: url("../img/print-dark.svg");
  --listing-favorite-icon: url("../img/like-dark.svg");
  --listing-favorite-icon-active: url("../img/like-dark-active.svg");
  --listing-compare-icon: url("../img/compare-dark.svg");
  --listing-compare-icon-active: url("../img/compare-dark-active.svg");
  --listing-gallery-media-background-color: #2e2e2e;
  --listing-mask-background-color: rgba(34, 34, 34, 0.6);
  --listing-thumbnail-background-color: #4D4D4D;
  --listing-background-color: #2F2F2F;

  --info-field-color: #999999;
  --empty-category-color: #DADADA;
  --fieldset-header-background-color: #2F2F2F;
  --icon-favorite-fill: #a8a8a8;
  --icon-favorite-fill-active: var(--noiz-dark-orange);
  --icon-filter: brightness(2.5);
  --icon-filter-background: brightness(0) invert(23%) sepia(90%) saturate(0%) hue-rotate(233deg) brightness(101%) contrast(90%);
  --icon-filter-img-background: brightness(0) saturate(100%) invert(17%) sepia(83%) saturate(5615%) hue-rotate(317deg) brightness(73%) contrast(101%);
  --upload-zone-background-color: #222222;
  --plans-border-color: #111111;
  --steps-background-color: var(--noiz-dark-orange);
  --popup-mask-background-color: rgba(0, 0, 0, 0.6);
  --table-list-border-color: #989898;
  --table-list-me-border-color: #989898;
  --tabs-active-background-color: #222222;
  --tabs-side-block-active-background-color: #111111;
  --tabs-side-block-border-color: #111111;
  --favorite-background-color: #222222;
  --listings-box-background-color: #2F2F2F00;
  --placeholder-color: #cccccc;
  --border-color: #111111;
  --menu-shadow: 0 5px 17px rgba(17, 17, 17, 0.2), 0 17px 41px rgba(17, 17, 17, 0.2), 0 47px 80px rgba(17, 17, 17, 0.2);
  --dropdown-arrow: url("../img/dropdown-arrow-dark.svg");

  --card-corner-svg: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017%2016%22%3E%3Cpath%20d%3D%22M0%200c8.837%200%2016%207.163%2016%2016h1V-1H0v1Z%22%20fill%3D%22%23222%22%2F%3E%3C%2Fsvg%3E');

  --footer-background-color: #2F2F2F;
  --footer-text-color: #989898;
  --footer-title-color: #DADADA;
  --footer-link-color: #989898;
  --footer-link-hover-color: #777777;
  --footer-link-active-color: #DADADA;
  --footer-icon-color: #707070;
}

#theme-switcher-moon {
  display: none;
}

/* highlights - clean design */
.highlight .card-info { border-radius: 6px; padding: 6px 8px 6px 8px; background: transparent; }
section#listings .highlight div.picture img { border: none; }
section#listings .highlight .fields, section#listings .highlight span { color: inherit; }
section#listings .highlight ul.card-info li.useful svg { color: var(--icon-favorite-fill); fill: var(--icon-favorite-fill); }
.listings_box .highlight .fields, .listings_box .highlight span { color: inherit; }
.listings_box .highlight ul.card-info li.useful svg { fill: var(--icon-favorite-fill); }
.listings_box .highlight .card-info a { color: var(--body-font-color); }
li.highlight .card-info { background: transparent; }
li.highlight .card-info a { color: var(--body-font-color); }
li.highlight .fields span { color: inherit; }
li.highlight ul.card-info li.useful svg { fill: var(--icon-favorite-fill); }
li.highlight ul.card-info li.price_tag { color: var(--body-font-color); }
.my-listings .featured { background-color: transparent; }
/* end of highlights */

/* featured - clean minimalistic design */
#listings .featured .card-info { background: transparent; }
section#listings .featured div.picture img { border: none; }
section#listings .featured .fields, section#listings .featured span { color: inherit; }
section#listings .featured ul.card-info li.useful svg { color: var(--icon-favorite-fill); fill: var(--icon-favorite-fill); }
#listings .featured .fields, #listings .featured span { color: inherit; }
#listings .featured ul.card-info li.useful svg { fill: var(--icon-favorite-fill); }
#listings .featured a.link-large { color: var(--body-font-color); }
#listings .highlight a.link-large { color: var(--body-font-color); }
.featured .card-info .link-large { color: var(--body-font-color); }
/* end of featured */


@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1);   opacity: 1; }
}
.filter-icon { background: var(--noiz-dark-orange); stroke: #fff; animation: pulse 1s ease-in-out; }

/* Dark mode for My Listing Card */
/*
    style.css draws every /my-ads/ card with `border: 1px solid #e5e7eb`,
    which is a light grey chosen for a white page. This file used to
    override only the background and the shadow, so on a #111 page each
    card kept a bright grey rectangle round it - the cards read as boxes
    drawn on the dark rather than surfaces sitting in it.

    A white at 8% instead: enough to separate #1e1e1e from #111111, not
    enough to be the first thing the eye lands on. The shadow below does
    most of the lifting anyway.
*/
.my-listing-card {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.my-listing-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.my-listing-card.featured {
    background: linear-gradient(135deg, #3d3520 0%, #2d2815 100%);
    border-color: #6b5a1f;
}
.my-listing-card__image {
    background: #2a2a2a;
}
.my-listing-card__title {
    color: #fff;
}
.my-listing-card .badge--status {
    background: #374151;
    color: #e5e7eb;
}
.my-listing-card .badge--active {
    background: #064e3b;
    color: #6ee7b7;
}
.my-listing-card .badge--pending {
    background: #78350f;
    color: #fcd34d;
}
.my-listing-card .badge--expired {
    background: #7f1d1d;
    color: #fca5a5;
}
.my-listing-card .badge--incomplete,
.my-listing-card .badge--invisible {
    background: #374151;
    color: #9ca3af;
}
.my-listing-card__meta .meta-value {
    color: #e5e7eb;
}
.my-listing-card .action-btn--secondary {
    background: #374151;
    color: #e5e7eb;
}
.my-listing-card .action-btn--secondary:hover {
    background: #4b5563;
}
.my-listing-card .action-btn--upgrade {
    background: #1e3a5f;
    color: #93c5fd;
}
.my-listing-card .action-btn--upgrade:hover {
    background: #1e4080;
}
.my-listing-card .action-btn--danger {
    background: #1e1e1e;
    color: #f87171;
    border-color: #7f1d1d;
}
.my-listing-card .action-btn--danger:hover {
    background: #2d1a1a;
}
.my-listing-card .action-switcher {
    border-color: #374151;
}
.my-listing-card__menu .menu-trigger {
    color: #9ca3af;
}
.my-listing-card__menu .menu-trigger:hover {
    background: #374151;
    color: #e5e7eb;
}
.my-listing-card__menu .menu-dropdown {
    background: #2a2a2a;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.my-listing-card__menu .menu-item {
    color: #e5e7eb;
}
.my-listing-card__menu .menu-item:hover {
    background: #374151;
}
.my-listing-card__menu .menu-item--danger {
    color: #f87171;
}
.my-listing-card__menu .menu-item--danger:hover {
    background: #2d1a1a;
}
.my-listing-card__menu .menu-divider {
    background: #374151;
}
/* Highlight button dark mode */
.my-listing-card .action-btn--highlight {
    background: #3d3520;
    color: #fcd34d;
    border-color: #6b5a1f;
}
.my-listing-card .action-btn--highlight:hover {
    background: #4d4228;
}
.my-listing-card .action-btn--highlight svg {
    stroke: #fcd34d;
}
/* Invisible badge dark mode */
.my-listing-card .badge--sub-invisible {
    background: #78350f;
    color: #fcd34d;
}
/* Sold badge dark mode */
.my-listing-card .badge--sold {
    background: #7f1d1d;
    color: #fca5a5;
}
/* Dark mode support for received messages */
ul#messages_area li {
    background: #252525 !important;
    border: 1px solid #3a3a3a !important;
}

/* Dark mode support for sent messages */
ul#messages_area li.me {
    background: #2a2030 !important;
    border: 1px solid #3d2f47 !important;
}

/*
    Voice-note player in dark mode.

    This is the inversion custom.css deliberately does not carry. There, the
    player is dark-on-light because a light-theme bubble has no background of
    its own; here both bubble kinds are dark (above), so the pill, the track and
    the duration all have to come back up or the control vanishes into the
    bubble. Applies to sent and received alike - the backdrop differs by theme,
    not by who sent the message.

    The play button keeps its orange in both themes: it reads against #252525
    and #2a2030 as well as it does against white, and it is the one part of the
    player that never needed changing.
*/
ul#messages_area .chat-audio {
    background: rgba(255, 255, 255, 0.10);
}

ul#messages_area .chat-audio__track {
    background: rgba(255, 255, 255, 0.26);
}

ul#messages_area .chat-audio__time {
    color: rgba(255, 255, 255, 0.72);
}

/* Suspicious message warning in dark mode */
ul#messages_area li.suspicious-msg {
    background: #2d1a1a !important;
    border: 1px solid #5a2a2a !important;
}

ul#messages_area li.suspicious-msg .suspicious-warning {
    background: #3d2020;
    border-left-color: #ff5722;
    color: #ffccbc;
}

/* Message text and date colors in dark mode */
.message-text {
    color: #e0e0e0;
}

ul#messages_area li .date {
    color: #999999;
}

.sender-name {
    color: #b0b0b0;
}

/* Message listing reference in dark mode */
.message-listing-ref {
    background: rgba(255, 255, 255, 0.05) !important;
}

.message-listing-ref a {
    color: var(--noiz-light-orange) !important;
}

/* Messaging user info box in dark mode */
.messaging-user-info {
    background: #222222;
    border-color: #3a3a3a;
}

.user-info-header {
    border-bottom-color: #3a3a3a;
}

.user-name {
    color: #e0e0e0;
}

.user-name:hover {
    color: var(--noiz-light-orange);
}

.admin-badge {
    background: #3a3a3a;
    color: #b0b0b0;
}

.visitor-badge {
    background: #1a2a3a;
    color: #64b5f6;
}

.user-membership,
.rating-value,
.detail-label,
.detail-value {
    color: #b0b0b0;
}

.detail-value a {
    color: var(--noiz-light-orange);
}

/* Send message controls in dark mode */
div.send-controls textarea {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

/* Messages list (inbox) in dark mode */
.messages-list-modern {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.message-list-item {
    background: #1a1a1a !important;
    border-bottom-color: #2a2a2a !important;
}

.message-list-item:nth-child(even) {
    background: #1f1f1f !important;
}

.message-list-item:hover {
    background: #252830 !important;
}

.message-list-item.unread {
    background: #1a2530 !important;
    border-left-color: #2196f3 !important;
}

.message-list-item.unread:nth-child(even) {
    background: #1e2a38 !important;
}

.message-list-item.unread:hover {
    background: #243040 !important;
}

.message-item-name {
    color: #e0e0e0 !important;
}

.message-item-date,
.user-type-badge {
    color: #999999 !important;
}

.message-item-preview {
    color: #b0b0b0 !important;
}

.message-list-item.unread .message-item-preview {
    color: #e0e0e0 !important;
}

.message-item-arrow {
    color: #999999 !important;
}

.unread-badge {
    background: #f44336 !important;
    border-color: #1a1a1a !important;
}

.account-menu-content a.active { color: var(--noiz-dark-orange); }

/* User Dropdown Menu - Dark Mode */
#user-navbar span.content.a-menu {
    background: #242424;
    border-color: #333;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Header */
.udm-header { border-bottom-color: #334155; }
.udm-user-name { color: #f1f5f9; }
.udm-view-profile { color: #64748b; }
.udm-profile-link:hover .udm-view-profile { color: #fb923c; }
.udm-avatar .avatar-initials { background: #334155; color: #94a3b8; }

/* Credits Bar */
.udm-credits-bar { background: rgba(249, 115, 22, 0.08); border: 1px solid rgba(249, 115, 22, 0.15); }
.udm-credits-info svg { fill: #fb923c; }
.udm-credits-amount { color: #f1f5f9; }
.udm-buy-btn { background: #f97316; color: #fff !important; }
.udm-buy-btn:hover { background: #ea580c; }

/* Menu Items */
.udm-menu-item a,
.sidebar-menu-item a { color: #cbd5e1; }
.udm-menu-item a:hover,
.sidebar-menu-item a:hover { background: rgba(255, 255, 255, 0.06); color: #f1f5f9; }
.udm-menu-item a.active,
.sidebar-menu-item a.active { background: rgba(249, 115, 22, 0.1); color: #fb923c; }

/* Menu Icons - stroke icons */
.udm-menu-icon svg,
.sidebar-menu-item .udm-menu-icon svg { stroke: #64748b; }
.udm-menu-item a:hover .udm-menu-icon svg,
.sidebar-menu-item a:hover .udm-menu-icon svg { stroke: #94a3b8; }
.udm-menu-item a.active .udm-menu-icon svg,
.sidebar-menu-item a.active .udm-menu-icon svg { stroke: #fb923c; }

/* Menu Icons - fill icons */
.udm-menu-icon svg[fill="currentColor"],
.sidebar-menu-item .udm-menu-icon svg[fill="currentColor"] { fill: #64748b; stroke: none; }
.udm-menu-item a:hover .udm-menu-icon svg[fill="currentColor"],
.sidebar-menu-item a:hover .udm-menu-icon svg[fill="currentColor"] { fill: #94a3b8; stroke: none; }
.udm-menu-item a.active .udm-menu-icon svg[fill="currentColor"],
.sidebar-menu-item a.active .udm-menu-icon svg[fill="currentColor"] { fill: #fb923c; stroke: none; }

/* Divider & Logout */
.udm-menu-divider { border-top-color: #334155; }
.udm-menu-logout a.logout { color: #f87171 !important; }
.udm-menu-logout a.logout .udm-menu-icon svg { stroke: #f87171; }
.udm-menu-logout a.logout:hover { background: rgba(239, 68, 68, 0.1); }
.udm-menu-logout a.logout:hover .udm-menu-icon svg { stroke: #ef4444; }

/* Badge */
.udm-badge { background: #ef4444; color: #fff; }

ul.card-info > li.price_tag > div > span { color: var(--noiz-light-orange); }

/* ========== List View - Dark Mode ========== */
section#listings.list article.item {
    background: #1e1e1e;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
section#listings.list article.item:hover {
    border-color: #3a3a3a;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
section#listings.list article.item.featured {
    border-color: #3d3520;
    background: linear-gradient(135deg, #262015 0%, #1e1e1e 100%);
}
section#listings.list article.item.highlight {
    border-color: #3d3520;
    background: linear-gradient(135deg, #262015 0%, #1e1e1e 100%);
}
section#listings.list .list-view-price .price-value {
    color: #f1f5f9;
}
section#listings.list .list-view-actions .btn-contact {
    background: #f1f5f9;
    color: #111;
    border-color: #f1f5f9;
}
section#listings.list .list-view-actions .btn-contact:hover {
    background: #d1d5db;
    border-color: #d1d5db;
}
section#listings.list .list-view-actions .btn-watch {
    background: transparent;
    color: #d1d5db;
    border-color: #444;
}
section#listings.list .list-view-actions .btn-watch:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #666;
}
section#listings.list .list-view-actions .btn-watch.remove {
    border-color: var(--noiz-dark-orange);
    color: var(--noiz-dark-orange);
}
section#listings.list .list-view-actions .btn-watch.remove:hover {
    background: rgba(238, 104, 32, 0.1);
}
.featured-badge span {
    background: rgba(255, 215, 0, 0.12);
    color: #fcd34d;
}
section#listings.list .card-info_posted-date .date-icon svg {
    color: #6b7280;
}
section#listings.list .card-info_posted-date .date-item {
    color: #9ca3af;
}

#plan_40 .colored, #plan_24 .colored, #plan_42 .colored { background: none !important }

.add-video-link a { color: var(--noiz-dark-orange) !important; }

a[data-key="forum"] {
  border-bottom: 1px dotted var(--noiz-dark-grey);
  border-left: 1px solid var(--noiz-light-grey);
  height: 40% !important;
  padding-left: 10px !important;
}

 .restricted-content .button { background-color: var(--noiz-light-grey); color: #ffffff !important; }
 
 .ElementsApp:not(.is-autofilled) .InputElement:-webkit-autofill {
   color: #ffffff;
   -webkit-text-fill-color: #ffffff;
   
  }
  
  #paygc_not_sufficient, .required_amount_not_sufficient { color: var( --noiz-yellow) !important; }
  
  #plan_29 .frame { background: none !important; }
  
  .my-listings .text_button { color: var(--noiz-light-orange); }
  
  #form-checkout .fieldset { background: var(--content-background-color) !important; }
  #form-checkout .fieldset header { font-size: 1rem; }

/* ========== Payment Gateways - Dark Mode ========== */
ul#payment_gateways li.gateway-item { background: #1e1e1e; border-color: #333; }
ul#payment_gateways li.gateway-item:hover { border-color: #6366f1; background: #1e1e1e; }
ul#payment_gateways li.gateway-item.active { border-color: #6366f1; background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, #1e1e1e 100%); }
ul#payment_gateways li .radio-circle { border-color: #4a4a4a; }
ul#payment_gateways li .gateway-title { color: #f1f5f9; }
ul#payment_gateways li .gateway-desc { color: #9ca3af; }
ul#payment_gateways li .card-icon { border-color: #333; }

/* Credits Payment Option - Dark */
#payment_gateways .my_paygc_credits { background: #1e1e1e; border-color: #333; }
#payment_gateways .my_paygc_credits:hover { border-color: #f59e0b; }
#payment_gateways .my_paygc_credits.active { border-color: #f59e0b; background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, #1e1e1e 100%); }
#payment_gateways .my_paygc_credits .gateway-radio { border-color: #4a4a4a; }
#payment_gateways .my_paygc_credits .gateway-title { color: #f1f5f9; }
#payment_gateways .my_paygc_credits .gateway-desc { color: #9ca3af; }
#payment_gateways .my_paygc_credits .credits-info-box { color: #9ca3af; }
#payment_gateways #paygc_not_sufficient { background: rgba(220, 38, 38, 0.1); color: #fca5a5; }

/* Checkout Page - Dark */
.checkout-page .fieldset { border-color: #333; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.checkout-page .fieldset header { background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%); color: #e2e8f0; border-bottom-color: #333; }
.checkout-page .fieldset .body { background: #1e1e1e; }
.checkout-page .table-cell { border-bottom-color: #2a2a2a; }
.checkout-page .table-cell .name { color: #9ca3af; }
.checkout-page .table-cell .value { color: #f1f5f9; }
.checkout-page .order-total .value { color: #818cf8; }

/* Gateway Info Messages - Dark */
.gateway-info { background: #2a2a2a; border-color: #333; }
.gateway-info p { color: #cbd5e1; }
.gateway-info .secure-badge { background: #1e1e1e; border-color: #333; color: #4ade80; }
.gateway-info.paypal-info { background: linear-gradient(135deg, rgba(0, 48, 135, 0.1) 0%, #1e1e1e 100%); border-color: #1e3a5f; }
.gateway-info.credits-info { background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, #1e1e1e 100%); border-color: #4a3d1a; }
.gateway-info.credits-info p { color: #fde68a; }

/* Stripe Checkout Info - Dark */
.stripe-checkout-info { background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, #1e1e1e 100%); border-color: #3730a3; }
.stripe-checkout-info p { color: #c4b5fd; }
.stripe-secure-badge { background: #1e1e1e; border-color: #333; }

/* ========== Order Details Card - Dark Mode ========== */
.order-details-card { background: #1e1e1e; border-color: #333; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); }
.order-details-header { background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%); border-bottom-color: #333; }
.order-header-icon { background: linear-gradient(135deg, #333 0%, #2a2a2a 100%); }
.order-header-text h3 { color: #f1f5f9; }
.order-id { color: #9ca3af; }

.order-listing-preview { background: #2a2a2a; border-color: #333; }
.listing-thumb { background: #333; }
.listing-thumb .no-thumb { background: #333; }
.listing-thumb .no-thumb svg { color: #6b7280; }
.listing-label { color: #9ca3af; }
.listing-title { color: #f1f5f9; }
.listing-category { color: #9ca3af; }

.order-plan-details { background: #2a2a2a; border-color: #333; }
.plan-label { color: #9ca3af; }
.plan-name { color: #f1f5f9; }
.plan-description { color: #9ca3af; }
.plan-feature { background: #333; color: #cbd5e1; }
.plan-feature svg { color: #6b7280; }
.plan-feature strong { color: #f1f5f9; }
.plan-feature.bonus { color: #4ade80; }
.plan-feature.bonus strong { color: #4ade80; }
.auto-badge { background: rgba(22, 163, 74, 0.15); color: #4ade80; }

.order-plan-item { background: #2a2a2a; border-color: #333; }
.plan-item-price { color: #f1f5f9; }
.plan-item-name { color: #f1f5f9; }
.plan-item-features .feature-tag { background: #333; color: #cbd5e1; }
.plan-item-features .feature-tag svg { color: #6b7280; }
.plan-item-remove { background: #2a2a2a; border-color: rgba(220, 38, 38, 0.3); color: #fca5a5; }
.plan-item-remove:hover { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.5); }
.plan-item-remove svg { color: #fca5a5; }
.plan-item-price-row { border-top-color: #333; }

/* Confirm Modal - Dark */
.confirm-modal { background: #1e1e1e; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.confirm-modal-icon { background: rgba(220, 38, 38, 0.15); }
.confirm-modal-title { color: #f1f5f9; }
.confirm-modal-text { color: #9ca3af; }
.confirm-modal-btn.cancel { background: #333; color: #e2e8f0; }
.confirm-modal-btn.cancel:hover { background: #404040; }

/* Price Summary - Dark */
.order-price-summary { background: #2a2a2a; }
.price-row.subtotal { color: #9ca3af; border-bottom-color: #333; }
.price-row.total { background: #1e1e1e; color: #f1f5f9; }
.price-row.total .total-amount { color: #a78bfa; }

/* Paid Footer - Dark */
.order-details-footer.paid { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%); border-top-color: #333; }
.txn-label { color: #9ca3af; }
.txn-value { color: #f1f5f9; }

/* ========== Coupon Block - Dark Mode ========== */
.coupon-block { background: #1e1e1e; border-color: #333; }
.coupon-block:hover { border-color: #444; }
.coupon-block.expanded { border-color: #555; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.coupon-block.has-coupon { border-color: #10b981; background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, #1e1e1e 100%); }
.coupon-header:hover { background: #2a2a2a; }
.coupon-header-icon { background: linear-gradient(135deg, #555 0%, #444 100%); }
.coupon-block.has-coupon .coupon-header-icon { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.coupon-title { color: #f1f5f9; }
.coupon-subtitle { color: #9ca3af; }
.coupon-header-arrow svg { color: #6b7280; }
.coupon-input-group input { border-color: #444; color: #f1f5f9; background: #2a2a2a; }
.coupon-input-group input:focus { border-color: #6b7280; background: #333; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05); }
.coupon-input-group input.error { border-color: #ef4444; }
.coupon-input-group input::placeholder { color: #6b7280; }
.coupon-apply-btn { background: linear-gradient(135deg, #555 0%, #444 100%); color: #fff; }
.coupon-apply-btn:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.coupon-applied-badge { background: #10b981; color: #fff; }
.coupon-applied-code { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.4); }
.coupon-applied-code .code-label { color: #9ca3af; }
.coupon-applied-code .code-value { color: #4ade80; }
.coupon-applied-breakdown { background: #2a2a2a; }
.breakdown-row:not(:last-child) { border-bottom-color: #333; }
.breakdown-label { color: #9ca3af; }
.breakdown-value { color: #f1f5f9; }
.breakdown-value.original { color: #6b7280; }
.breakdown-row.discount .breakdown-value { color: #4ade80; }
.breakdown-row.total { background: #1e1e1e; }
.breakdown-row.total .breakdown-label { color: #f1f5f9; }
.breakdown-row.total .breakdown-value { color: #a78bfa; }
.coupon-remove-btn { background: rgba(239, 68, 68, 0.1); }
.coupon-remove-btn:hover { background: #ef4444; }
.coupon-remove-btn svg { color: #f87171; }
.coupon-remove-btn:hover svg { color: #fff; }

/* ========== Grid Navbar / View Modes / Sort / Buttons - Dark Mode ========== */
.listings-count { color: #9ca3af; }
.listings-count .count-number { color: #f1f5f9; }

/* View mode switcher */
.grid_navbar .switcher .buttons { background: #2a2a2a; }
.grid_navbar .buttons > div:hover { background: rgba(255, 255, 255, 0.08); }
.grid_navbar .buttons > div.active { background: #444; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.grid_navbar .buttons > div > svg { color: #6b7280; }
.grid_navbar .buttons > div.active > svg,
.grid_navbar .buttons > div:hover > svg { color: #f1f5f9; }
.grid_navbar .buttons > div > div > span { border-color: #6b7280; }
.grid_navbar div.active div > span { border-color: #f1f5f9; }
.grid_navbar .buttons div:not(.active):hover div > span { border-color: #f1f5f9; }

/* Sort dropdown */
.grid_navbar .current { background: #2a2a2a; color: #9ca3af; }
.grid_navbar .current:hover { background: #333; }
.grid_navbar .current .link { color: #f1f5f9; }
.grid_navbar .current .sort-icon { color: #6b7280; }
.grid_navbar .current:hover .sort-icon { color: #9ca3af; }
.grid_navbar ul.fields { background: #2a2a2a; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); border: 1px solid #333; }
.grid_navbar ul.fields > li a { color: #9ca3af; }
.grid_navbar ul.fields > li a:hover,
.grid_navbar ul.fields > li a.active { color: #f1f5f9; }

/* Clear Filters button */
.navbar-btn-clear { background: rgba(220, 38, 38, 0.1); color: #fca5a5; border-color: rgba(220, 38, 38, 0.25); }
.navbar-btn-clear:hover { background: rgba(220, 38, 38, 0.2); border-color: rgba(220, 38, 38, 0.4); color: #f87171; }

/* Save Search button */
.navbar-btn-save { background: rgba(99, 102, 241, 0.1); color: #a5b4fc; border-color: rgba(99, 102, 241, 0.25); }
.navbar-btn-save:hover { background: rgba(99, 102, 241, 0.2); border-color: rgba(99, 102, 241, 0.4); color: #c7d2fe; }

/* Pagination */
.pagination-nav .pagination-link { background: #2a2a2a; border-color: #333; color: #cbd5e1; }
.pagination-nav .pagination-link:hover { background: #333; border-color: #444; color: #f1f5f9; }
.pagination-nav .pagination-item.active .pagination-link { background: var(--noiz-dark-orange); border-color: var(--noiz-dark-orange); color: #fff; }
.pagination-nav .pagination-ellipsis { background: #2a2a2a; border-color: #333; color: #6b7280; }
.pagination-nav .pagination-ellipsis:hover { background: #333; border-color: #444; color: #f1f5f9; }
.pagination-jump-dropdown { background: #2a2a2a; border-color: #333; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
.pagination-jump-dropdown::after { border-top-color: #2a2a2a; }
.pagination-jump-dropdown::before { border-top-color: #333; }
.pagination-jump-header { color: #9ca3af; }
.pagination-jump-btn { background: #333; border-color: #444; color: #f1f5f9; }
.pagination-jump-btn:hover { background: #444; border-color: #555; }
.pagination-jump-input { background: #1e1e1e; border-color: #444; color: #f1f5f9; }
.pagination-jump-input:focus { border-color: var(--noiz-dark-orange); }

/* Payment History */
.ph-card { background: #1e1e1e; border-color: #2a2a2a; }
.ph-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.ph-card--unpaid { border-left-color: #dc2626; }
.ph-card-header { border-bottom-color: #2a2a2a; }
.ph-card-date { color: #777; }
.ph-card-listing-title { color: #e0e0e0; }
a.ph-card-listing-title:hover { color: var(--link-color-hover, #FF8200); }
.ph-card-listing-title--na { color: #ef4444; }
.ph-card-subtitle { color: #888; }
.ph-card-amount { color: #e0e0e0; }
.ph-card-amount--paid { color: #34d399; }
.ph-card-thumb { background: #2a2a2a; }
.ph-card-thumb--empty { color: #555; }
.ph-card-thumb--icon { color: #34d399; }
.ph-badge--listing { background: #333; color: #ccc; }
.ph-badge--default { background: #333; color: #ccc; }
.ph-badge--status-paid { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.ph-badge--status-unpaid { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.ph-items-list { background: #161616; }
.ph-item-row { color: #ccc; }
.ph-item-row:not(:last-child) { border-bottom-color: rgba(255, 255, 255, 0.05); }
.ph-item-days { color: #888; background: rgba(255, 255, 255, 0.06); }
.ph-item-price { color: #ddd; }
.ph-items-totals { border-top-color: #333; }
.ph-totals-row { color: #999; }
.ph-totals-row--discount { color: #34d399; }
.ph-totals-row--total { color: #e0e0e0; border-top-color: #333; }
.ph-card-footer { background: #161616; border-top-color: #2a2a2a; }
.ph-meta-item { color: #777; }
.ph-meta-coupon { color: #34d399; }
.ph-meta-coupon svg { color: #34d399; }

/* ==========================================================================
   MUSICIANS PROMO BAND
   ========================================================================== */

/*
    ONE NAME, NO RULES.

    The band is dark in both themes, so unlike most of this file there is
    almost nothing to undo - the eleven custom properties in custom.css were
    already chosen against a near-black ground and every contrast pair holds
    here unchanged.

    What does not hold is the ground itself. #1a1a1c against a white page is a
    panel; against this theme's #111111 page it is 1.05:1, near enough to
    invisible that the band would read as a hole in the page rather than a
    thing on it. It lifts to #242426, which is 1.22:1 against the page - the
    same order of separation the listing cards get here - and the edge below
    does the rest of the work.

    White on #242426 is 15.5:1 and the orange is 4.9:1, so nothing else moves.

    THE SELECTOR CARRIES `body` BECAUSE THIS FILE LOADS BEFORE custom.css.

    Every other override in this file wins on document order - the page emits
    style.css, light.css, dark.css, and the theme rules land after the rules
    they undo. custom.css is the exception: head.tpl links it by hand, LAST,
    so it comes after this file and a plain `section.noiz-musicians` here ties
    with the one there on specificity and loses on order.

    The symptom is quiet, which is what makes it worth writing down: the
    `border` below took effect, because custom.css sets no border on the band,
    while `--nm-ground` silently did not - so the band rendered its light
    ground in both themes and only the edge changed. Read off the computed
    style; nothing errors.

    `body ` takes this to (0,2,2) against custom.css's (0,1,1), which wins on
    specificity and no longer depends on order. ANY future dark override of a
    custom.css rule needs the same, or it will not apply.
*/
body section.noiz-musicians {
    --nm-ground: #242426;

    /*
        AND THE SMALL ORANGE GOES A SHADE LIGHTER. --nm-ink-faint is the chip
        count and the card's kind label, both 12-13px, and both sit on a fill
        that is itself lighter here than on the light theme's ground. At
        #ee6820 they measured 3.98 and 4.34 against those fills - under the
        4.5 small text needs, on the one theme where the ground moved. The
        lighter orange is 5.9 and 6.4 on the same two fills.
    */
    --nm-ink-faint: var(--noiz-light-orange, #ff8200);

    /* The chips lift off a ground that has itself lifted, so the same 7% would
       read weaker here than it does on white's #1a1a1c. */
    --nm-chip:       rgba(255, 255, 255, 0.09);
    --nm-chip-hover: rgba(255, 255, 255, 0.16);

    /* On white the ground was its own edge. Here it needs one. */
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   CHAT COMPOSER
   ========================================================================== */

/*
    Six names, no rules - the composer's rules all live in custom.css and read
    from these.

    `body ` is on the selector for the reason recorded above the musicians
    band: head.tpl links custom.css by hand, LAST, so this file loses a tie on
    document order. (0,2,2) against (0,1,1) wins on specificity instead.

    WHAT ACTUALLY MOVES. The box's ground is the page's own surface in both
    themes, so most of it inherits correctly through --content-background-color
    already; what does not is the wash behind the recording strip and the mic's
    hover, which is the accent at 10% - fine on white, nearly invisible on
    #161616. It goes to 18% here, and the strip's text lightens to the orange
    the rest of this theme uses on dark grounds, since #ee6820 on that wash is
    3.4:1 and the strip is 13-14px.
*/
body .noiz-composer,
body .noiz-composer__actions {
    --nc-edge:      #333333;
    --nc-wash:      color-mix(in srgb, var(--noiz-dark-orange, #ee6820) 18%, transparent);
    --nc-accent:    var(--noiz-light-orange, #ff8200);
    --nc-accent-2:  var(--noiz-dark-orange, #ee6820);

    /* The burnt orange the light theme needs for text on its near-white wash
       would be nearly black on this one; here the ground is dark, so the
       accent can be the accent again. Measured 7.5:1 on the strip. */
    --nc-accent-ink:   var(--noiz-light-orange, #ff8200);
    --nc-muted-strong: #b9b9b9;
    --nc-muted:        #a0a0a0;

    /* The filled buttons keep white text here too. On this theme the fill can
       be the brand orange rather than the deeper one the light theme needs -
       white on #ee6820 against a dark surround reads as a lit control rather
       than as body text, and it is the same fill the rest of the dark UI
       uses for its primary action. */
    --nc-fill:       var(--noiz-dark-orange, #ee6820);
    --nc-fill-hover: var(--noiz-light-orange, #ff8200);
    --nc-on-accent:  #ffffff;
}

/* ==========================================================================
   CHAT LISTING PREVIEW
   ========================================================================== */

/*
    `body ` for the reason recorded above the musicians band: custom.css is
    hand-linked last in head.tpl, so this file loses a tie on document order
    and has to win on specificity instead.
*/
body .listing-preview {
    --lp-edge:   #333333;
    --lp-muted:  #a0a0a0;
    --lp-accent: var(--noiz-light-orange, #ff8200);

    /* On a dark card the accent can be the accent: the burnt orange the light
       theme needs for text would be nearly invisible here. */
    --lp-ink:    var(--noiz-light-orange, #ff8200);
}

/* ==========================================================================
   MESSAGE LIKES
   ========================================================================== */

/* `body` for the reason recorded above the musicians band: custom.css is
   hand-linked last, so this file wins on specificity or not at all. */
body .message-like {
    --ml-ink:  #a0a0a0;
    --ml-on:   var(--noiz-light-orange, #ff8200);
    --ml-chip: #242426;
    --ml-edge: #3a3a3a;
}

/* ==========================================================================
   MESSAGE LIST
   ========================================================================== */

/* `body` so this beats custom.css, which head.tpl links last. */
/*
    The two rules above at ~line 294 paint the sent/received bubbles, and they
    are !important, so the flat list's own reset in custom.css cannot undo them
    - dark mode kept drawing a grey box and a purple box behind rows that are
    meant to sit flat on the page. Undone here rather than there because that
    is where the !important is. `.suspicious-msg` is deliberately spared: its
    red tint marks a scam warning and is the one row that SHOULD be a block.
*/
body ul#messages_area > li:not(.suspicious-msg),
body ul#messages_area > li.me:not(.suspicious-msg) {
    background: none !important;
    border: 0 !important;
}

body ul#messages_area {
    /* Light's greys are dark-on-white; on #161616 they fall to ~3:1, so the
       muted control and the time are re-picked as light-on-dark here. */
    --ml-muted: #9a9491;
    --ml-time: #8b8683;

    /* Light's #c11439 is a dark-on-white red; on #111 it reads as almost
       black, so the liked heart is lifted to one that stays legible there. */
    --ml-accent: #ff5a76;
    --ml-deep: #ff8098;
    --ml-soft: color-mix(in srgb, #ff5a76 16%, transparent);
}

/* The initials circle is white text on a mid-tone hue in both themes; only the
   lightness moves, so it stays clear of the darker page behind it. */
body .message-avatar .avatar-initials { background: hsl(var(--avatar-hue, 18) 55% 30%); }

/*
    CHAT HEADER (design of 2026-08-30).

    Tokens only - the structure is in custom.css. Every value here is one the
    light theme picks dark-on-white, which on #161616 falls to around 3:1, so
    the muted text, the dividers and the hover fill are re-picked rather than
    inherited. `body ` prefixes because custom.css is linked after this file
    and would otherwise win every tie.
*/
body .chat-header {
    --ch-muted:   #9a9491;
    --ch-divider: #3a3a3a;
    --ch-hover:   #2a2a2a;
    --ch-thumb:   #262626;
    --ch-surface: #1c1c1c;
    --ch-accent:  var(--noiz-light-orange, #ff8200);
    --ch-deep:    var(--noiz-light-orange, #ff8200);
    --ch-soft:    color-mix(in srgb, var(--noiz-light-orange, #ff8200) 16%, transparent);
}

body .chat-header__avatar .avatar-initials[data-name] {
    background: hsl(var(--avatar-hue, 18) 55% 30%);
}