/**
 * SINATABU MONOCHROME DARK MODE STYLESHEET
 *
 * A pure black, white, and gray color scheme for dark mode
 * Provides a minimalist, high-contrast interface
 *
 * Color Palette:
 * - Backgrounds: #000000 (pure black), #0a0a0a, #121212, #1a1a1a, #222222
 * - Text: #ffffff (white), #e0e0e0, #cccccc, #b0b0b0, #999999
 * - Borders: #333333, #444444, #555555
 * - Interactive: #f5f5f5 (hover), #d0d0d0, #a0a0a0
 */

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Ubuntu:wght@300;400&display=swap");

/* Nuclear hidden utility */
.sinatabu-hidden { display: none !important; }

/*
 * Visually-hidden helper. This was defined ONLY in style.css, and since the two
 * stylesheets are alternatives rather than layers (init.php renders both under
 * a system theme and lets a media query pick one; only one ever APPLIES),
 * every .sr-only element rendered as ordinary visible text in dark mode — copy
 * written exclusively for screen readers was being shown to everyone. Ported
 * verbatim from style.css; it is colour-agnostic, so there is nothing to theme.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

input[type="file"].sinatabu-file-hidden {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================
   CSS CUSTOM PROPERTIES — DARK MODE TOKENS
   Design tokens for the monochrome dark theme
   ============================================ */
:root {
  /* Brand color kept as the hero so the site still feels like Sinatabu
     in dark mode — but softened to #e85454 so pure-red on black doesn't
     burn the user's eyes. Soft/shadow variants carry matching desaturation. */
  --color-primary:        #e85454;
  --color-primary-hover:  #ff6b6b;
  --color-primary-soft:   rgba(232, 84, 84, 0.14);
  --color-primary-shadow: rgba(232, 84, 84, 0.22);
  --color-secondary:      #b0b0b0;
  --color-success:        #5cd88a;
  --color-warning:        #ffb454;
  --color-info:           #5fb4ff;
  --color-danger:         #ff6b6b;
  --color-shop-pink:      #f56093;
  --color-ps-teal:        #4ecfc5;

  /* Neutrals — true-black (#000) looks cheap; we lift the base to a
     near-black (#0a0a0a) and then elevate cards via slightly lighter
     surfaces. Depth now comes from contrast, not drop-shadow. */
  --color-text:         #f0f0f0;
  --color-text-muted:   #9a9a9a;
  --color-border:       #2b2b2b;
  --color-bg:           #0a0a0a;
  --color-bg-soft:      #111111;
  --color-bg-gray:      #161616;
  --color-bg-elevated:  #141414;
  --color-bg-card:      #181818;
  --color-bg-surface:   #1e1e1e;

  --font-body:     "Lato", sans-serif;
  --font-heading:  "Ubuntu", sans-serif;
  --font-size-base: 16px;

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Shadows — on dark, drop-shadows don't work as well as 1px borders do
     for elevation. We keep a subtle shadow stack for floating elements
     (toasts, menus) but cards mostly lean on the --color-border scheme. */
  --shadow-xs:            0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md:            0 2px 4px rgba(0, 0, 0, 0.4),  0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg:            0 4px 8px rgba(0, 0, 0, 0.5),  0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl:            0 8px 16px rgba(0, 0, 0, 0.55), 0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-colored:       var(--shadow-md);
  --shadow-colored-hover: var(--shadow-lg);
  --shadow-accent:        0 6px 14px rgba(232, 84, 84, 0.25), 0 1px 3px rgba(232, 84, 84, 0.18);

  --ring-focus:    0 0 0 3px rgba(232, 84, 84, 0.35);
  --lift-hover-y: -2px;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  28px;
  --radius-pill: 9999px;

  /* Numeric scale matches light mode so utilities stay compatible;
     legacy named slots (xs..2xl) preserved too so no existing rule
     suddenly picks up `undefined`. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;
  --space-9:  56px;
  --space-10: 64px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  --fs-xxs:  11px;
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
}

/* ============================================
   SCROLLBAR STYLES
   Custom scrollbar styling for the void aesthetic
   Because even scrollbars deserve to look good
   ============================================ */

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #ffffff #0a0a0a;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: #0a0a0a;
}

*::-webkit-scrollbar-thumb {
  min-height: 50px;
  border: 4px solid #0a0a0a;
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #ffffff;
}

::-webkit-scrollbar-thumb:window-inactive {
  background-color: #0a0a0a;
}

/* ============================================
   COLOR UTILITIES
   Background and text color classes
   50 shades of gray, but tasteful
   ============================================ */

.btn-warning {
  background-color: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(208, 208, 208, 0.3);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.focus {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #000000 !important;
}

.btn-soft-warning {
  background-color: rgba(208, 208, 208, 0.2) !important;
  border: 1px solid rgba(208, 208, 208, 0.2) !important;
  color: #d0d0d0 !important;
  box-shadow: 0 3px 5px 0 rgba(208, 208, 208, 0.3);
}

.btn-soft-warning:hover,
.btn-soft-warning:focus,
.btn-soft-warning:active,
.btn-soft-warning.active,
.btn-soft-warning.focus {
  background-color: #d0d0d0 !important;
  border-color: #d0d0d0 !important;
  color: #000000 !important;
}

.btn-outline-warning {
  border: 1px solid #d0d0d0;
  color: #d0d0d0;
  background-color: transparent;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning.active,
.btn-outline-warning.focus,
.btn-outline-warning:not(:disabled):not(.disabled):active {
  background-color: #d0d0d0;
  border-color: #d0d0d0;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(208, 208, 208, 0.3);
}

.btn-info {
  background-color: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(204, 204, 204, 0.3);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.focus {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #000000 !important;
}

.btn-soft-info {
  background-color: rgba(204, 204, 204, 0.2) !important;
  border: 1px solid rgba(204, 204, 204, 0.2) !important;
  color: #cccccc !important;
  box-shadow: 0 3px 5px 0 rgba(204, 204, 204, 0.3);
}

.btn-soft-info:hover,
.btn-soft-info:focus,
.btn-soft-info:active,
.btn-soft-info.active,
.btn-soft-info.focus {
  background-color: #cccccc !important;
  border-color: #cccccc !important;
  color: #000000 !important;
}

.btn-outline-info {
  border: 1px solid #cccccc;
  color: #cccccc;
  background-color: transparent;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active,
.btn-outline-info.focus,
.btn-outline-info:not(:disabled):not(.disabled):active {
  background-color: #cccccc;
  border-color: #cccccc;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(204, 204, 204, 0.3);
}

.btn-danger {
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(153, 153, 153, 0.3);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger.focus {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #000000 !important;
}

.btn-soft-danger {
  background-color: rgba(153, 153, 153, 0.2) !important;
  border: 1px solid rgba(153, 153, 153, 0.2) !important;
  color: #999999 !important;
  box-shadow: 0 3px 5px 0 rgba(153, 153, 153, 0.3);
}

.btn-soft-danger:hover,
.btn-soft-danger:focus,
.btn-soft-danger:active,
.btn-soft-danger.active,
.btn-soft-danger.focus {
  background-color: #999999 !important;
  border-color: #999999 !important;
  color: #ffffff !important;
}

.btn-outline-danger {
  border: 1px solid #999999;
  color: #999999;
  background-color: transparent;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active,
.btn-outline-danger.focus,
.btn-outline-danger:not(:disabled):not(.disabled):active {
  background-color: #999999;
  border-color: #999999;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(153, 153, 153, 0.3);
}

.btn-dark {
  background-color: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(60, 72, 88, 0.3);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.btn-dark.focus {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #000000 !important;
}

.btn-soft-dark {
  background-color: rgba(102, 102, 102, 0.2) !important;
  border: 1px solid rgba(102, 102, 102, 0.2) !important;
  color: #666666 !important;
  box-shadow: 0 3px 5px 0 rgba(60, 72, 88, 0.3);
}

.btn-soft-dark:hover,
.btn-soft-dark:focus,
.btn-soft-dark:active,
.btn-soft-dark.active,
.btn-soft-dark.focus {
  background-color: #666666 !important;
  border-color: #666666 !important;
  color: #ffffff !important;
}

.btn-outline-dark {
  border: 1px solid #666666;
  color: #666666;
  background-color: transparent;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-outline-dark.active,
.btn-outline-dark.focus,
.btn-outline-dark:not(:disabled):not(.disabled):active {
  background-color: #666666;
  border-color: #666666;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(60, 72, 88, 0.3);
}

.btn-light {
  background-color: #1a1a1a !important;
  border: 1px solid #1a1a1a !important;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(26, 26, 26, 0.3);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light.active,
.btn-light.focus {
  background-color: #d0d0d0 !important;
  border-color: #d0d0d0 !important;
  color: #000000 !important;
}

.btn-soft-light {
  background-color: rgba(26, 26, 26, 0.2) !important;
  border: 1px solid rgba(26, 26, 26, 0.2) !important;
  color: #e0e0e0 !important;
  box-shadow: 0 3px 5px 0 rgba(26, 26, 26, 0.3);
}

.btn-soft-light:hover,
.btn-soft-light:focus,
.btn-soft-light:active,
.btn-soft-light.active,
.btn-soft-light.focus {
  background-color: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #ffffff !important;
}

.btn-outline-light {
  border: 1px solid #999999;
  color: #e0e0e0;
  background-color: transparent;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active,
.btn-outline-light.active,
.btn-outline-light.focus,
.btn-outline-light:not(:disabled):not(.disabled):active {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(26, 26, 26, 0.3);
}

/* Base button styles and sizing */
.btn {
  padding: 8px 20px;
  outline: none;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.5px;
  transition: all 0.3s;
  font-weight: 600;
  border-radius: 6px;
}

.btn:focus {
  box-shadow: none !important;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
  outline: none;
}

/* Accessibility: Visible focus indicators.
   Only keyboard focus (`:focus-visible`) draws a ring; mouse/touch focus is silent. */
*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
button:not(.btn):focus-visible,
a:not(.btn):focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

.btn.btn-sm {
  padding: 7px 16px;
  font-size: 10px;
}

.btn.btn-lg {
  padding: 14px 30px;
  font-size: 16px;
}


.btn.btn-pills {
  border-radius: 30px;
}

.btn.btn-light {
  color: #666666 !important;
  border: 1px solid #e0e0e0 !important;
}

.btn.btn-light:hover,
.btn.btn-light:focus,
.btn.btn-light:active,
.btn.btn-light.active,
.btn.btn-light.focus {
  background-color: #d0d0d0 !important;
  color: #666666 !important;
}

.btn.btn-soft-light {
  color: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid #555555 !important;
}

.btn.btn-soft-light:hover,
.btn.btn-soft-light:focus,
.btn.btn-soft-light:active,
.btn.btn-soft-light.active,
.btn.btn-soft-light.focus {
  color: #ffffff !important;
}

.btn.btn-outline-light {
  border: 1px solid #e0e0e0 !important;
  color: #666666 !important;
  background-color: transparent;
}

.btn.btn-outline-light:hover,
.btn.btn-outline-light:focus,
.btn.btn-outline-light:active,
.btn.btn-outline-light.active,
.btn.btn-outline-light.focus {
  background-color: #1a1a1a !important;
}

.btn.btn-icon {
  height: 36px;
  width: 36px;
  line-height: 34px;
  padding: 0;
}

.btn.btn-icon .icons {
  height: 16px;
  width: 16px;
  font-size: 16px;
}

/* Force circular shape on all modal icon containers */
.icon.rounded-circle {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
}

/* See style.css for rationale — CSP strips inline style="" attributes,
 * so every sized .icon.rounded-circle MUST use a utility class. */
.icon-65 {
  width: 65px !important;
  height: 65px !important;
}

.icon-70 {
  width: 70px !important;
  height: 70px !important;
}

.icon-90 {
  width: 90px !important;
  height: 90px !important;
}

.icon-95 {
  width: 95px !important;
  height: 95px !important;
}

.bg-find-image {
  background-color: #2f2f2f !important;
  /* Darker for monochrome */
}

.find-image-contain {
  max-height: 500px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  cursor: pointer;
}


.initial-hidden {
  display: none;
}

.btn-disabled-look {
  pointer-events: none;
  opacity: 0.6;
}

.font-size-1-1 {
  font-size: 1.1rem !important;
}

.otp-input {
  font-size: 1.5rem !important;
  letter-spacing: 0.5rem !important;
}

.w-15 {
  width: 15% !important;
}


.pl-60 {
  padding-left: 60px !important;
}

.preview-container {
  overflow: hidden;
  width: 160px;
  height: 160px;
  margin: 10px;
  border: 1px solid;
  border-color: #ffffff;
}

.custom-tooltip-inner {
  font-size: 11px;
  background-color: #6c757d;
  padding: 4px 8px;
}


.btn.btn-icon.btn-lg {
  height: 48px;
  width: 48px;
  line-height: 46px;
}

.btn.btn-icon.btn-lg .icons {
  height: 20px;
  width: 20px;
  font-size: 20px;
}

.btn.btn-icon.btn-sm {
  height: 30px;
  width: 30px;
  line-height: 28px;
}

button:not(:disabled):focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ============================================
   SHADOW UTILITIES
   When in doubt, make it darker
   ============================================ */

.shadow {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) !important;
}

/* Route dark-mode shadow utilities to the same layered tokens so the
   elevation system stays consistent across both themes. */
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

.shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* ============================================
   BADGES
   Status indicators and labels in grayscale glory
   ============================================ */

.badge-primary {
  background-color: #ffffff !important;
  color: #000000 !important;
}


.badge-secondary {
  background-color: #b0b0b0 !important;
  color: #000000 !important;
}


.badge-success {
  background-color: #cccccc !important;
  color: #000000 !important;
}


.badge-warning {
  background-color: #d0d0d0 !important;
  color: #000000 !important;
}


.badge-info {
  background-color: #cccccc !important;
  color: #000000 !important;
}


.badge-danger {
  background-color: #ffffff !important;
  color: #000000 !important;
}


.badge-dark {
  background-color: #666666 !important;
  color: #ffffff !important;
}


.badge-light {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}


.badge {
  padding: 5px 8px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

.badge.badge-light {
  color: #666666 !important;
  background-color: #1a1a1a !important;
}


.badge.badge-pill {
  border-radius: 12px;
}

.badge:focus,
.badge.focus {
  box-shadow: none !important;
}

/* ============================================
   DROPDOWN MENUS
   Menus that drop down, monochrome style
   ============================================ */


.btn-group .dropdown-toggle:after {
  content: "";
  position: relative;
  right: -4px;
  top: -2px;
  border: solid #ffffff;
  border-radius: 0.5px;
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(45deg);
  margin-left: 0;
  vertical-align: 0;
}

.btn-group .dropdown-menu {
  margin-top: 10px;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
}

.btn-group .dropdown-menu:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 45px;
  box-sizing: border-box;
  border: 7px solid #666666;
  border-radius: 0.5px;
  border-color: transparent transparent #ffffff #ffffff;
  transform-origin: 0 0;
  transform: rotate(135deg);
  box-shadow: -2px 2px 2px -1px rgba(0, 0, 0, 0.15);
}

/* ============================================
   ALERTS
   Notification boxes for when things happen
   ============================================ */


.alert-light {
  background-color: rgba(26, 26, 26, 0.9);
  color: #ffffff;
  border-color: #1a1a1a;
}

.alert-light .alert-link {
  color: #d0d0d0;
}


.alert {
  padding: 8px 15px;
  border-radius: 6px;
  font-size: 14px;
}

.alert.alert-light {
  background-color: #1a1a1a;
  color: #666666;
  border-color: #e0e0e0;
}

.alert.alert-dismissible {
  padding-right: 30px;
}

.alert.alert-dismissible .close {
  top: -2px;
  right: -10px;
  font-size: 16px !important;
}


/* ============================================
   BREADCRUMB & PAGINATION
   Navigation helpers for finding your way in the dark
   ============================================ */

.breadcrumb {
  background-color: #0a0a0a !important;
  letter-spacing: 0.5px;
  padding: 8px 24px;
  display: block;
  border-radius: 6px;
}

.bg-gray {
  background-color: #0a0a0a !important;
}

.breadcrumb .breadcrumb-item {
  font-size: 14px;
  font-weight: 700;
  padding-left: 0;
  display: inline-flex;
  align-items: center;
}

.breadcrumb .breadcrumb-item a {
  color: #666666;
}

.breadcrumb .breadcrumb-item a:hover {
  color: #ffffff;
}

.breadcrumb .breadcrumb-item.active {
  color: #ffffff;
}

.breadcrumb .breadcrumb-item:before {
  content: "";
}

.breadcrumb .breadcrumb-item:after {
  content: "\F0142" !important;
  font-size: 16px;
  color: #666666;
  font-family: 'Material Design Icons';
  padding-left: 5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.breadcrumb .breadcrumb-item:last-child:after {
  display: none;
}

.pagination .page-item:first-child .page-link {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.pagination .page-item:last-child .page-link {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.pagination .page-item .page-link {
  color: #666666;
  border: 1px solid #e0e0e0;
  padding: 10px 15px;
  font-size: 14px;
}

.pagination .page-item .page-link:focus {
  box-shadow: none;
}

.pagination .page-item .page-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(204, 204, 204, 0.9);
}

.pagination .page-item.active .page-link {
  color: #000000;
  background: #ffffff !important;
  border-color: #ffffff;
  cursor: not-allowed;
}

/* ============================================
   AVATAR SIZES
   Profile pictures from tiny to large
   ============================================ */


.avatar.avatar-md-sm {
  height: 45px;
  width: 45px;
}

.avatar.avatar-small {
  height: 65px;
  width: 65px;
}


.avatar.avatar-medium {
  height: 110px;
  width: 110px;
}


/* ============================================
   FAQ & ACCORDION
   Collapsible content for those burning questions
   ============================================ */


.nav-pills {
  margin-bottom: 15px;
  background: #1a1a1a;
}

.nav-pills .nav-link {
  color: #666666 !important;
  padding: 5px;
  transition: all 0.25s ease;
}

.nav-pills .nav-link.active {
  background: #ffffff;
  color: #000000 !important;
}


.nav-pills a .title {
  font-size: 17px;
  font-weight: 700;
}

/* ============================================
   PROGRESS BARS
   Visual indicators for completion states
   ============================================ */

.progress-box .title {
  font-size: 15px;
}

.progress-box .progress {
  height: 8px;
  overflow: visible;
}

.progress-box .progress .progress-bar {
  border-radius: 6px;
  animation: animate-positive 3s;
  overflow: visible !important;
}


@keyframes animate-positive {
  0% {
    width: 0;
  }
}

.blockquote {
  border-left: 3px solid #e0e0e0;
  border-radius: 6px;
  font-size: 16px;
}

/* ============================================
   FORM CONTROLS
   Inputs, textareas, and all things form-related
   Where user input meets monochrome magic
   ============================================ */

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  font-size: 14px;
  font-weight: 700;
}

.form-group .form-control {
  box-shadow: none;
  background-color: #1a1a1a;
  border: 1px solid #e0e0e0;
  color: #e0e0e0;
  height: 42px;
  font-size: 13px;
  border-radius: 6px;
  transition: all 0.25s ease;
}

.form-group .form-control:focus,
.form-group .form-control.active {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.form-group textarea {
  height: 120px !important;
}

.form-group textarea.form-control {
  line-height: 25px;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: transparent;
  opacity: 1;
}

/* ============================================
   Form Check Input Styling (Bootstrap 5 compatible) - Dark Mode
   Unified styling for radio buttons and checkboxes
   ============================================ */

/* Form check container - provides flexbox layout */
.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
}

.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}

/* Form switch container */
.form-switch {
  padding-left: 2.75em;
}

.form-switch .form-check-input {
  margin-left: -2.75em;
}

/* Inline form checks */
.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}

/* Base styling for form-check-input */
.form-check-input {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
  background-color: #2a2a2a;
  border: 2px solid #666666;
  cursor: pointer;
}

.form-check-input:focus {
  border-color: #808080;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(128, 128, 128, 0.25);
}

.form-check-input:checked {
  background-color: #808080;
  border-color: #808080;
}

.form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-label {
  cursor: pointer;
  color: #cccccc;
}

/* Form switch styling */
.form-switch .form-check-input {
  width: 2.5em;
  height: 1.25em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.35%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em;
  transition: background-position .15s ease-in-out;
}

.form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ============================================
   Legacy Custom Control Styling (Bootstrap 4)
   For backwards compatibility - Dark Mode
   ============================================ */

.custom-control-input:checked~.custom-control-label:before {
  color: #ffffff;
  border-color: #808080;
  background-color: #808080;
}

.custom-control-input:focus~.custom-control-label::before,
.form-control:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
  border-color: #aaaaaa;
}

.custom-control-label {
  cursor: pointer;
  color: #cccccc;
}

.custom-control-label:before,
.custom-control-label:after {
  top: 2px;
}

.custom-switch .custom-control-label:after {
  top: 4px;
}

/* Global Custom Switch - Large Pill Style (Dark Mode) */
.custom-switch {
  padding-left: 3.5rem !important;
  min-height: 1.75rem;
}

.custom-switch .custom-control-label {
  cursor: pointer;
}

.custom-switch .custom-control-label::before {
  width: 3rem !important;
  height: 1.625rem !important;
  border-radius: 1rem !important;
  left: -3.5rem !important;
  top: 0 !important;
  background-color: #2e2e2e !important;
  border: none !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 -1px 1px rgba(255, 255, 255, 0.05) !important;
  transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
}

.custom-switch .custom-control-label::after {
  width: 1.375rem !important;
  height: 1.375rem !important;
  border-radius: 50% !important;
  left: calc(-3.5rem + 2px) !important;
  top: 0.125rem !important;
  background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%) !important;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 1px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.2s ease !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #cc0000 !important;
  border-color: #cc0000 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 -1px 1px rgba(255, 255, 255, 0.15) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(1.375rem) !important;
  background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%) !important;
}

.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 0.2rem rgba(204, 0, 0, 0.4) !important;
}

.custom-switch .custom-control-label:active::after {
  transition: transform 0.1s ease-out !important;
  transform: scale(0.92) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label:active::after {
  transform: translateX(1.375rem) scale(0.92) !important;
}

.custom-control-label::before {
  background-color: #2a2a2a;
  border: 2px solid #666666;
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

/* ============================================
   SUBSCRIBE & INPUT FORMS
   Newsletter and search input styling
   ============================================ */


.question-form input {
  height: 52px;
  padding: 0 48px 0 48px;
  width: 100%;
  color: #ffffff !important;
  border: 1px solid #444;
  outline: none !important;
  background-color: #303134;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(204, 0, 0, 0.18);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.question-form input:hover {
  box-shadow: 0 4px 16px rgba(204, 0, 0, 0.4);
  border-color: #444;
}

.question-form input:focus {
  box-shadow: 0 4px 16px rgba(204, 0, 0, 0.4);
  border-color: #444;
}

/* ============================================
   TRY THIS - Suggestion pills (dark mode)
   ============================================ */

.try-this-label {
  color: #888;
}

.try-this-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
}

.try-this-pill {
  display: inline-block;
  padding: 5px 14px;
  margin: 4px;
  font-size: 12.5px;
  font-weight: 400;
  color: #adb5bd;
  background-color: transparent;
  border: 1px solid #444;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.try-this-pill:hover {
  color: #cc0000;
  border-color: #cc0000;
  background-color: rgba(204, 0, 0, 0.1);
  transform: translateY(-1px);
}

.try-this-pill:active {
  transform: translateY(0);
  background-color: rgba(204, 0, 0, 0.18);
}

.try-this-pill:focus {
  box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.25);
}


.counterpill button {
  position: absolute;
  top: 3px;
  right: 19px;
  outline: none !important;
}

.counterpill input {
  padding: 14px 20px;
  width: 100%;
  color: #0a0a0a !important;
  border: none;
  outline: none !important;
  padding-right: 50px;
  padding-left: 30px;
  background-color: rgba(255, 255, 255, 0.8);
}


.copy-form input {
  padding: 14px 20px;
  width: 100%;
  color: #0a0a0a !important;
  border: none;
  outline: none !important;
  padding-right: 130px;
  padding-left: 20px;
  background-color: rgba(255, 255, 255, 0.8);
}

.copypill button {
  position: absolute;
  top: 37px;
  right: 10px;
  outline: none !important;
}


.copy-form div {
  position: relative;
  max-width: 600px;
  margin: 0px auto;
}

/* ============================================
   TABLES
   Data display in rows and columns
   ============================================ */

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.table-responsive .table td,
.table-responsive .table th {
  vertical-align: middle;
}

.table-responsive .table-center th {
  vertical-align: middle !important;
}

.table-responsive .table-center tbody tr:hover {
  color: #666666;
  background-color: #1a1a1a;
}


/* ============================================
   PRELOADER / LOADING SPINNER
   The waiting game, but make it stylish
   ============================================ */

.modal-open {
  padding-right: 0 !important;
}

#preloader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(8px);
  background-image: linear-gradient(45deg, #121212, #121212);
  z-index: 9999;
}

#preloader #status {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#preloader #status .spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 100px auto;
}

#preloader #status .spinner .double-bounce1,
#preloader #status .spinner .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

#preloader #status .spinner .double-bounce2 {
  animation-delay: -1.0s;
}

@keyframes sk-bounce {

  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

/* ============================================
   SOCIAL ICONS
   Connect with the world, in grayscale
   ============================================ */


/* ============================================
   BACK TO TOP BUTTON
   Scroll salvation, one click away
   ============================================ */

.back-to-top {
  z-index: 99;
  position: fixed;
  bottom: 50px;
  right: 30px;
  display: none;
  transition: all 0.25s ease;
}

.back-to-top .icons {
  transition: all 0.25s ease;
}

.back-to-top:hover {
  transform: rotate(45deg);
}

.back-to-top:hover .icons {
  transform: rotate(-45deg);
}


/* ============================================
   FEATHER ICONS
   SVG icon sizing and stroke settings
   ============================================ */


.fea {
  stroke-width: 1.8;
}

.fea.icon-sm {
  height: 16px;
  width: 16px;
}


.display-1 {
  font-size: 80px !important;
}

.display-2 {
  font-size: 72px !important;
}

.display-3 {
  font-size: 64px !important;
}

.display-4 {
  font-size: 56px !important;
}

[class^=uil-]:before,
[class*=" uil-"]:before {
  margin: 0;
}

.uim-svg {
  vertical-align: 0 !important;
}

@media (max-width: 767.98px) {


  .display-1 {
    font-size: 56px !important;
  }

  .display-2 {
    font-size: 50px !important;
  }

  .display-3 {
    font-size: 42px !important;
  }

  .display-4 {
    font-size: 36px !important;
  }
}

/* ============================================
   BASE TYPOGRAPHY & LAYOUT
   The foundation - pure black canvas
   Embrace the void
   ============================================ */

html {
  height: 100%;
}

body {
  background-color: #000000;
  font-family: "Lato", sans-serif;
  overflow-x: hidden !important;
  font-size: 16px;
  color: #e0e0e0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body>*:not(.footer):not(.footer-bar) {
  flex-shrink: 0;
}

body>.footer {
  margin-top: auto;
}

/* Most pages render only the compact `<footer class="footer footer-bar">`
   with no big `.footer` block above it (Saved Finds, My Bids, billing, admin,
   …). It must still sink to the viewport bottom on short pages, so it inherits
   the `margin-top: auto` above. Only reset that margin when a big `.footer`
   already precedes it on the page (home / about / help), where the two would
   otherwise both claim the auto-margin and open a gap between them. Modals sit
   between the two footers in the DOM, so this uses the general-sibling (`~`)
   combinator rather than the adjacent (`+`) one. */
body>.footer:not(.footer-bar) ~ .footer.footer-bar {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Ubuntu", sans-serif;
  line-height: 1.5;
  font-weight: 600;
}

::-moz-selection {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

::selection {
  background: rgba(204, 0, 0, 0.9);
  color: #ffffff;
}
::-moz-selection {
  background: rgba(204, 0, 0, 0.9);
  color: #ffffff;
}

p {
  line-height: 1.6;
}

.section {
  padding: 100px 0;
  position: relative;
  flex-grow: 1;
}

.section-two {
  padding: 80px 0 60px;
  position: relative;
  flex-grow: 1;
}


.title-heading {
  line-height: 26px;
}

.title-heading .heading {
  font-size: 45px;
  letter-spacing: 1px;
}

.title-heading .para-desc {
  font-size: 18px;
}

.section-title {
  position: relative;
}

.section-title .title {
  letter-spacing: 0.5px;
  font-size: 30px;
}


.para-desc {
  max-width: 600px;
}

/* ============================================
   SPACING & SHAPE UTILITIES
   Margins, shapes, and decorative elements
   ============================================ */


.shape {
  position: absolute;
  pointer-events: none;
  right: 0;
  bottom: -2px;
  left: 0;
}

.shape>svg {
  transform: scale(2);
  width: 100%;
  height: auto;
  transform-origin: top center;
}


@keyframes mover {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(5px);
  }
}


@keyframes spinner-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


@media (max-width: 767.98px) {
  .section {
    padding: 60px 0;
  }

  .title-heading .heading {
    font-size: 35px !important;
  }

  .title-heading .para-desc {
    font-size: 18px;
  }

  .section-title .title {
    font-size: 24px;
  }


}

@media (max-width: 425px) {
  .shape {
    bottom: -4px;
  }
}


/* ============================================
   NAVIGATION / HEADER
   The command center at the top of every page
   Sticky, responsive, and monochrome-magnificent
   ============================================ */

#topnav {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  z-index: 1030;
  background-color: transparent;
  border: 0;
  transition: all .5s ease;
}

#topnav .logo {
  float: left;
  color: #ffffff !important;
}

#topnav .logo .l-dark {
  display: none;
}

#topnav .logo .l-light {
  display: inline-block;
}

#topnav .has-submenu.active a {
  color: #ffffff;
}

#topnav .has-submenu.active .submenu li.active>a {
  color: #ffffff !important;
}

#topnav .has-submenu.active.active .menu-arrow {
  border-color: #ffffff;
}

#topnav .has-submenu {
  position: relative;
}

#topnav .has-submenu .submenu .submenu-arrow {
  border: solid #666666;
  border-radius: 0.5px;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  position: absolute;
  right: 20px;
  top: 14px;
}

#topnav .has-submenu .submenu .has-submenu:hover .submenu-arrow {
  border-color: #ffffff;
}

#topnav .navbar-toggle {
  border: 0;
  position: relative;
  width: 60px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

#topnav .navbar-toggle .lines {
  width: 25px;
  display: block;
  position: relative;
  margin: 28px 20px;
  height: 18px;
}

#topnav .navbar-toggle span {
  height: 2px;
  width: 100%;
  background-color: #666666;
  display: block;
  margin-bottom: 5px;
  transition: transform .5s ease;
}

#topnav .navbar-toggle span:last-child {
  margin-bottom: 0;
}

#topnav .buy-button {
  float: right;
  line-height: 68px;
}

#topnav .buy-button .login-btn-primary {
  display: none;
}

#topnav .buy-button .login-btn-light {
  display: inline-block;
}

#topnav .navbar-toggle.open span {
  position: absolute;
}

#topnav .navbar-toggle.open span:first-child {
  top: 6px;
  transform: rotate(45deg);
}

#topnav .navbar-toggle.open span:nth-child(2) {
  visibility: hidden;
}

#topnav .navbar-toggle.open span:last-child {
  width: 100%;
  top: 6px;
  transform: rotate(-45deg);
}

#topnav .navbar-toggle.open span:hover {
  background-color: #ffffff;
}

#topnav .navbar-toggle:hover,
#topnav .navbar-toggle:focus,
#topnav .navbar-toggle .navigation-menu>li>a:hover,
#topnav .navbar-toggle:focus {
  background-color: transparent;
}

#topnav .navigation-menu {
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
}

#topnav .navigation-menu>li {
  float: left;
  display: block;
  position: relative;
  margin: 0 5px;
}

#topnav .navigation-menu>li:hover>a,
#topnav .navigation-menu>li.active>a {
  color: #ffffff !important;
}

#topnav .navigation-menu>li>a {
  display: block;
  color: #666666;
  font-size: 15px;
  background-color: transparent !important;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 24px;
  transition: all 0.25s;
  font-family: "Ubuntu", sans-serif;
  padding-left: 15px;
  padding-right: 15px;
}

#topnav .navigation-menu>li>a:hover,
#topnav .navigation-menu>li>a:active {
  color: #ffffff;
}

/* Fix Add a Shop button in mobile nav */
#topnav .navigation-menu>li>a.btn-primary {
  background-color: #666666 !important;
  color: #ffffff !important;
  border-color: #666666 !important;
  margin-bottom: 15px !important;
}

#topnav .navigation-menu>li>a.btn-primary:hover {
  background-color: #444444 !important;
  color: #ffffff !important;
  border-color: #444444 !important;
}

#topnav .navigation-menu .has-submenu .menu-arrow {
  border: solid #666666;
  border-radius: 0.5px;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  position: absolute;
  transition: all 0.25s;
  right: -1px;
  top: 30px;
}

#topnav .navigation-menu .has-submenu:hover .menu-arrow {
  transform: rotate(225deg);
}

#topnav .menu-extras {
  float: right;
}

#topnav.scroll {
  background-color: #1a1a1a;
  border: none;
  box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
}

/* Admin pages have no hero behind the nav, so the topnav must always
   carry a solid background — without this rule the transparent default
   lets the page heading show through behind the nav links.
   `getHeaderClass()` returns `bg-white` for explicit light/system mode
   (which dark-CSS remaps to #1a1a1a), but returns '' for explicit dark,
   leaving admin pages without an opaque surface. Apply it directly. */
#topnav.admin-nav {
  background-color: #1a1a1a;
  border: none;
  box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
}

#topnav.scroll .navigation-menu>li>a {
  color: #666666;
}

#topnav.scroll .navigation-menu>li>.menu-arrow {
  border-color: #666666;
}

#topnav.scroll .navigation-menu>li:hover>a,
#topnav.scroll .navigation-menu>li.active>a {
  color: #ffffff;
}

#topnav.scroll .navigation-menu>li:hover>.menu-arrow,
#topnav.scroll .navigation-menu>li.active>.menu-arrow {
  border-color: #ffffff;
}


#topnav.defaultscroll.scroll .logo {
  line-height: 74px;
}


/* Dark-mode sticky header — frosted glass tuned for dark surfaces. */
#topnav.nav-sticky {
  background: rgba(10, 10, 10, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-sm);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #topnav.nav-sticky { background: #0a0a0a; }
}


#topnav.nav-sticky .buy-button .login-btn-primary {
  display: inline-block;
}

#topnav.nav-sticky .buy-button .login-btn-light {
  display: none;
}

#topnav.nav-sticky .logo .l-dark {
  display: inline-block;
}

#topnav.nav-sticky .logo .l-light {
  display: none;
}

.logo {
  font-weight: 700;
  font-size: 24px;
  padding: 0;
  letter-spacing: 1px;
  line-height: 68px;
}

#topnav .logo img {
  height: 24px;
  width: auto;
  display: inline-block;
}

@media (min-width: 992px) {
  #topnav .navigation-menu {
    display: flex;
    justify-content: flex-end;
  }

  #topnav .navigation-menu>.has-submenu>.submenu>.has-submenu>.submenu::before {
    top: 20px;
    margin-left: -35px;
    box-shadow: 1px 1px 0px 0px rgba(60, 72, 88, 0.15);
    border-color: transparent #ffffff #ffffff transparent;
  }

  #topnav .navigation-menu>.has-submenu:hover .menu-arrow {
    top: 33px !important;
  }

  #topnav .navigation-menu>.has-submenu.active .menu-arrow {
    top: 30px;
  }

  #topnav .navigation-menu>li .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    padding: 15px 0;
    list-style: none;
    min-width: 180px;
    visibility: hidden;
    opacity: 0;
    margin-top: 10px;
    transition: all .2s ease;
    border-radius: 6px;
    background-color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  #topnav .navigation-menu>li .submenu:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 45px;
    box-sizing: border-box;
    border: 7px solid #666666;
    border-color: transparent transparent #1a1a1a #1a1a1a;
    transform-origin: 0 0;
    transform: rotate(135deg);
    box-shadow: -2px 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  #topnav .navigation-menu>li .submenu li {
    position: relative;
  }

  #topnav .navigation-menu>li .submenu li a {
    display: block;
    padding: 10px 20px;
    clear: both;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #ffffff !important;
    transition: all 0.3s;
  }

  #topnav .navigation-menu>li .submenu li a:hover {
    color: #ffffff !important;
  }

  #topnav .navigation-menu>li .submenu li ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }


  


  #topnav .navigation-menu>li .submenu>li .submenu {
    left: 106%;
    top: 0;
    margin-left: 10px;
    margin-top: -1px;
  }

  #topnav .navigation-menu>li>a {
    padding-top: 25px;
    padding-bottom: 25px;
    min-height: 62px;
  }

  #topnav .navigation-menu>li:hover>.menu-arrow {
    border-color: #ffffff;
  }

  #topnav .navigation-menu>li:hover>a,
  #topnav .navigation-menu>li.active>a {
    color: #ffffff !important;
  }

  #topnav .navigation-menu>li.last-elements .submenu {
    left: auto;
    right: 0;
  }

  #topnav .navigation-menu>li.last-elements .submenu:before {
    left: auto;
    right: 10px;
  }

  #topnav .navigation-menu>li.last-elements .submenu>li.has-submenu .submenu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 10px;
  }


  


  


  

  #topnav .navigation-menu.nav-right {
    justify-content: flex-end !important;
  }


  


  #topnav .buy-button {
    padding-left: 15px;
    margin-left: 15px;
  }

  #topnav .navbar-toggle {
    display: none;
  }

  #topnav #navigation {
    display: block !important;
  }

  #topnav.scroll {
    top: 0;
  }

  #topnav.scroll .navigation-menu>li>a {
    padding-top: 20px;
    padding-bottom: 20px;
  }


}

@media (max-width: 991px) {
  #topnav {
    background-color: #1a1a1a;
    box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
    min-height: 74px;
  }

  #topnav .logo .l-dark {
    display: inline-block !important;
  }

  #topnav .logo .l-light {
    display: none !important;
  }

  #topnav .container {
    width: auto;
  }

  #topnav #navigation {
    max-height: 500px;
  }

  #topnav .navigation-menu {
    float: none;
  }

  #topnav .navigation-menu>li {
    float: none;
  }

  #topnav .navigation-menu>li .submenu {
    display: none;
    list-style: none;
    padding-left: 20px;
    margin: 0;
  }

  #topnav .navigation-menu>li .submenu li a {
    display: block;
    position: relative;
    padding: 7px 15px;
    font-size: 13px;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: #666666 !important;
    transition: all 0.3s;
  }

  #topnav .navigation-menu>li .submenu.open {
    display: block;
  }

  #topnav .navigation-menu>li .submenu .submenu {
    display: none;
    list-style: none;
  }

  #topnav .navigation-menu>li .submenu .submenu.open {
    display: block;
  }


  

  #topnav .navigation-menu>li>a {
    color: #666666;
    padding: 10px 20px;
  }

  #topnav .navigation-menu>li>a:after {
    position: absolute;
    right: 15px;
  }

  #topnav .navigation-menu>li>a:hover,
  #topnav .navigation-menu>li .submenu li a:hover,
  #topnav .navigation-menu>li.has-submenu.open>a {
    color: #ffffff;
  }

  #topnav .menu-extras .menu-item {
    border-color: #999999;
  }

  #topnav .navbar-header {
    float: left;
  }

  #topnav .buy-button .login-btn-primary {
    display: inline-block !important;
  }

  #topnav .buy-button .login-btn-light {
    display: none;
  }

  #topnav .has-submenu .submenu .submenu-arrow {
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    top: 12px;
  }

  #topnav .has-submenu.active a {
    color: #ffffff;
  }

  #navigation {
    position: absolute;
    top: 74px;
    left: 0;
    width: 100%;
    display: none;
    height: auto;
    padding-bottom: 0;
    overflow: auto;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    background-color: #1a1a1a;
  }

  #navigation.open {
    display: block;
    overflow-y: auto;
  }
}

@media (max-width: 767.98px) {
  #topnav .navigation-menu .has-submenu .menu-arrow {
    right: 16px;
    top: 16px;
  }

  #topnav .buy-button {
    padding: 3px 0;
  }
}

@media (min-width: 768px) {
  #topnav .navigation-menu>li.has-submenu:hover>.submenu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
  }

  #topnav .navigation-menu>li.has-submenu:hover>.submenu>li.has-submenu:hover>.submenu {
    visibility: visible;
    opacity: 1;
    margin-left: 0;
    margin-right: 0;
  }

  .navbar-toggle {
    display: block;
  }
}

@media (max-width: 375px) {
  #topnav .buy-button {
    display: none;
  }


  #topnav .navbar-toggle .lines {
    margin-right: 0 !important;
  }
}

/* ============================================
   HERO & BACKGROUND SECTIONS
   Full-page backgrounds and hero areas
   Where first impressions are made
   ============================================ */

.bg-home {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
  width: 100%;
}


.bg-half-120 {
  padding: 20vh 0 15vh;
  background-size: cover;
  -ms-grid-row-align: center;
  align-self: center;
  position: relative;
  background-position: center center;
}


.bg-half-170 {
  padding: 13vh 0;
  background-size: cover;
  -ms-grid-row-align: center;
  align-self: center;
  position: relative;
  background-position: center center;
}


.gradient {
  background: #ffffff !important;
  background: linear-gradient(45deg, #ffffff, #ffffff) !important;
  opacity: 0.9;
}


.classic-saas-image .bg-saas-shape:after {
  bottom: 3rem;
  left: 0;
  width: 75rem;
  height: 55rem;
  border-radius: 20rem;
  opacity: 0.9;
  transform: rotate(130deg);
}


.classic-saas-image .bg-saas-shape:after {
  content: " ";
  position: absolute;
  z-index: -1;
  box-shadow: 0 0 40px rgba(176, 176, 176, 0.5);
  background-color: #ffffff;
}


@media (max-width: 767.98px) {


  
  .bg-half-170,
  .bg-half-120{
    padding: 20vh 0 15vh;
  }


  

  .classic-saas-image .bg-saas-shape img {
    max-width: 550px;
  }
}

@media (max-width: 767px) {

  .bg-home,
  .bg-half-170,
  .bg-half-120{
    padding: 20vh 0 15vh;
    height: auto;
  }


  .classic-saas-image .bg-saas-shape img {
    max-width: 100%;
    height: auto;
  }

  .classic-saas-image .bg-saas-shape:after {
    bottom: -5rem;
    left: 10rem;
    width: 30rem;
    height: 30rem;
    border-radius: 10rem;
  }
}

/* ============================================
   FEATURES & KEY FEATURES
   Showcase cards for product highlights
   ============================================ */

.features .icon,
.features .icons {
  background: rgba(176, 176, 176, 0.1);
}

.features .icons {
  height: 80px;
  line-height: 80px;
  margin: 0 auto;
}

.features .content {
  left: 1%;
  right: 1%;
}

.features .image:before {
  content: "";
  position: absolute;
  bottom: 5px;
  right: -15px;
  width: 70px;
  height: 70px;
  border-radius: 6px;
  transform: rotate(33.75deg);
  background: linear-gradient(45deg, transparent, rgba(176, 176, 176, 0.09));
  z-index: -1;
}


.features:hover .image:before {
  background: rgba(176, 176, 176, 0.07);
  animation: spinner-border 5s linear infinite;
}


.features .title{
  font-size: 18px;
}

.features .icon{
  height: 45px;
  width: 45px;
  line-height: 45px;
}


.explore-feature {
  transition: all 0.25s ease;
}

.explore-feature .icon {
  height: 80px;
  width: 80px;
  line-height: 80px;
  transition: all 0.25s ease;
}

.explore-feature:hover {
  box-shadow: 0 10px 25px rgba(60, 72, 88, 0.15) !important;
}

.explore-feature:hover .icon,
.explore-feature:hover .title {
  color: #ffffff !important;
}

.explore-feature .card-body {
  padding: 2.5rem !important;
}


/* ============================================
   CAROUSEL / SLIDER STYLES
   OWL Carousel and testimonial sliders
   ============================================ */

.owl-theme .owl-dots .owl-dot span {
  background: #ffffff !important;
}

.customer-testi {
  cursor: e-resize;
}

.customer-testi .content:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  margin-left: 13px;
  box-sizing: border-box;
  border: 8px solid #666666;
  border-color: transparent #ffffff #ffffff transparent;
  transform-origin: 0 0;
  transform: rotate(135deg);
  box-shadow: 2px 2px 2px -1px rgba(60, 72, 88, 0.15);
}

.owl-theme .owl-dots .owl-dot span {
  border-radius: 3px;
  background: rgba(176, 176, 176, 0.5) !important;
  transition: all 0.25s ease;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots.clickable .owl-dot:hover span {
  background: #ffffff !important;
  transform: rotate(45deg);
}

.owl-carousel .owl-item img {
  display: block;
  width: auto;
}

.slick-slider {
  overflow-x: hidden !important;
  cursor: pointer;
}

/* ============================================
   VIDEO & PLAY BUTTONS
   Media player controls and watch icons
   ============================================ */

.invoice-top .logo-invoice {
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 1px;
}


.play-icon {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  right: 0;
  left: 0;
  text-align: center;
}

.play-icon i {
  height: 75px;
  -webkit-text-stroke: 2px #ffffff;
  -webkit-text-fill-color: transparent;
  width: 75px;
  font-size: 25px;
  line-height: 75px;
  display: inline-block;
}

.play-icon i:hover {
  -webkit-text-stroke: 2px #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.mfp-iframe-holder .mfp-content {
  max-width: 1110px;
}

/* ============================================
   BLOG / ARTICLE CARDS
   Content cards for posts and articles
   ============================================ */


/* ============================================
   SIDEBAR & WIDGETS
   Blog sidebars, search, and category widgets
   ============================================ */


.media-list .media .media-heading:hover {
  color: #ffffff !important;
}

.media-list .sub-comment {
  margin-left: 20px;
}

/* ============================================
   JOB LISTINGS
   Career cards and job posting styles
   ============================================ */


/* ============================================
   PORTFOLIO / WORK CONTAINER
   Project showcases and gallery grids
   ============================================ */


.spacing {
  padding-left: 7px;
  padding-right: 7px;
}


/* ============================================
   TIMELINE
   Chronological display for history/process
   ============================================ */


/* ============================================
   TEAM MEMBERS
   People cards and profile displays
   ============================================ */

.team img {
  transition: all 0.25s ease;
}

.team .name:hover {
  color: #ffffff !important;
}


.team:hover img {
  box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
  opacity: 0.2;
}


/* ============================================
   LOGIN / AUTH PAGES
   Authentication and login form styles
   ============================================ */


/* ============================================
   COOKIE CONSENT POPUP
   GDPR compliance never looked so good
   ============================================ */

.cookie-popup {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  margin: 0 auto;
  max-width: 480px;
  z-index: 9999;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #1f2d3d;
}

.cookie-popup .cookie-popup-content {
  display: flex;
  gap: 16px;
  padding: 20px;
  align-items: flex-start;
}

.cookie-popup .cookie-popup-content .cookie-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #cc0000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cookie-popup .cookie-popup-content .cookie-icon i {
  font-size: 24px;
  color: #ffffff;
}

.cookie-popup .cookie-popup-content .cookie-text {
  flex: 1;
}

.cookie-popup .cookie-popup-content .cookie-text h6 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.cookie-popup .cookie-popup-content .cookie-text p {
  font-size: 13px;
  line-height: 1.5;
  color: #9bacc4;
}

.cookie-popup .cookie-popup-actions {
  display: flex;
  gap: 10px;
  padding: 0 20px 20px 20px;
}

.cookie-popup .cookie-popup-actions button {
  flex: 1;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.cookie-popup .cookie-popup-actions button.btn-customize {
  background: transparent;
  color: #adb5bd;
  border: 1px solid #495057;
}

.cookie-popup .cookie-popup-actions button.btn-customize:hover {
  background: #253649;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cookie-popup .cookie-popup-actions button.btn-decline {
  background: #253649;
  color: #ffffff;
  border: 1px solid #495057;
}

.cookie-popup .cookie-popup-actions button.btn-decline:hover {
  background: #2d3e54;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cookie-popup .cookie-popup-actions button.btn-accept {
  background: #ffffff;
  color: #0a0a0a;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.cookie-popup .cookie-popup-actions button.btn-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.4);
  background: #f0f0f0;
}

/* Cookie category styling for settings modal */
.cookie-category {
  padding: 12px;
  background: #1a2635;
  border-radius: 8px;
}

@media (max-width: 767.98px) {
  .cookie-popup {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .cookie-popup .cookie-popup-content {
    flex-direction: column;
    padding: 16px;
    gap: 12px;
  }

  .cookie-popup .cookie-popup-content .cookie-icon {
    width: 40px;
    height: 40px;
  }

  .cookie-popup .cookie-popup-content .cookie-icon i {
    font-size: 20px;
  }

  .cookie-popup .cookie-popup-actions {
    padding: 0 16px 16px 16px;
    flex-direction: column-reverse;
  }

  .cookie-popup .cookie-popup-actions button {
    width: 100%;
  }
}

.cookie-popup-not-accepted {
  display: block;
  animation: cookie-popup-slide-up 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.cookie-popup-accepted {
  animation: cookie-popup-slide-down 0.4s ease forwards;
}

@keyframes cookie-popup-slide-up {
  from {
    transform: translateY(120%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes cookie-popup-slide-down {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  to {
    transform: translateY(120%) scale(0.9);
    opacity: 0;
  }
}

/* ============================================
   CONTACT & MAP
   Contact forms, maps, and success messages
   ============================================ */


.form-group .icons {
  position: absolute;
  top: 10px;
  right: 18px;
  z-index: 2;
}

.form-group .icons.icon-left {
  right: auto;
  left: 18px;
}

.form-control.with-icon-left {
  padding-left: 48px;
}

.honeypot-hidden {
  position: absolute !important;
  left: -9999px !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-group .countchar {
  position: absolute;
  top: 90px;
  left: 10px;
}

.map {
  line-height: 0;
}

.map iframe {
  width: 100%;
  height: 400px;
}

.error {
  margin: 8px 0px;
  display: none;
  color: #999999;
}

#ajaxsuccess {
  font-size: 16px;
  width: 100%;
  display: none;
  clear: both;
  margin: 8px 0px;
}

.error_message {
  padding: 10px;
  margin-bottom: 20px;
  text-align: center;
  border: 2px solid #999999;
  color: #999999;
  border-radius: 6px;
  font-size: 14px;
}


#success_page {
  text-align: center;
  margin-bottom: 50px;
}

#success_page h3 {
  color: #cccccc;
  font-size: 22px;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #ffffff;
  border-color: #ffffff;
}


/* ============================================
   FOOTER
   The bottom of the page, but top-tier styling
   ============================================ */

.footer {
  background: #111111;
  padding: 60px 0;
  position: relative;
  color: #cccccc;
  border-top: 1px solid #2a2a2a;
}

.footer .footer-py-60 {
  padding: 60px 0;
}

.footer .logo-footer {
  font-size: 22px;
}

.footer .footer-head {
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 500;
}

.footer .foot-subscribe .form-control {
  background-color: #333333;
  border: 1px solid #333333;
  color: #e0e0e0;
}

.footer .foot-subscribe .form-control:focus {
  box-shadow: none;
}


.footer .foot-subscribe input::placeholder {
  color: #cccccc;
}

.footer .text-foot {
  color: #cccccc;
}

.footer .footer-list {
  margin-bottom: 0;
}

.footer .footer-list li {
  margin-bottom: 10px;
}

.footer .footer-list li a {
  transition: all 0.25s ease;
}

.footer .footer-list li a:hover {
  color: #f0f0f0;
}

.footer .footer-list li:last-child {
  margin-bottom: 0;
}

.footer.footer-bar {
  padding-top: 30px;
  border-top: 1px solid #333333;
}


.footer .footer-bar {
  border-top: 1px solid #333333;
}

/* ============================================
   DARK MODE COLOR OVERRIDES
   Ensuring everything stays perfectly dark
   ============================================ */

.bg-darkblue {
  background-color: #0a0a0a !important;
}

.text-darkblue {
  color: #0a0a0a !important;
}

a.text-darkblue:hover,
a.text-darkblue:focus {
  color: #ffffff !important;
}

.bg-white {
  background-color: #1a1a1a !important;
}

.text-white {
  color: #ffffff !important;
}

a.text-white:hover,
a.text-white:focus {
  color: #ffffff !important;
}

.bg-primary {
  background-color: #ffffff !important;
}

.text-primary {
  color: #ffffff !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: #e0e0e0 !important;
}

/* Bid-indicator handshake — keep brand-red so the "already connected"
   signal stays visible. The blanket `.text-primary { white }` rule above
   would otherwise wash it into surrounding body text on dark cards. */
.mdi.mdi-handshake.text-primary {
  color: var(--color-primary) !important;
}

.bg-secondary {
  background-color: #b0b0b0 !important;
}

.text-secondary {
  color: #b0b0b0 !important;
}

a.text-secondary:hover,
a.text-secondary:focus {
  color: #999999 !important;
}

.bg-success {
  background-color: #cccccc !important;
}

.text-success {
  color: #5cd85c !important;
}

a.text-success:hover,
a.text-success:focus {
  color: #4ec44e !important;
}

.bg-warning {
  background-color: #d0d0d0 !important;
}

.text-warning {
  color: #ffc107 !important;
}

a.text-warning:hover,
a.text-warning:focus {
  color: #e6ad00 !important;
}

.bg-info {
  background-color: #cccccc !important;
}

.text-info {
  color: #cccccc !important;
}

a.text-info:hover,
a.text-info:focus {
  color: #b0b0b0 !important;
}

.bg-danger {
  background-color: #999999 !important;
}

.text-danger {
  color: #ffffff !important;
}

a.text-danger:hover,
a.text-danger:focus {
  color: #d0d0d0 !important;
}

.text-dark {
  color: #ffffff !important;
}

a.text-dark:hover,
a.text-dark:focus {
  color: #f2f2f2 !important;
}

.text-muted {
  color: #b0b0b0 !important;
}

a.text-muted:hover,
a.text-muted:focus {
  color: #b0b0b0 !important;
}

.bg-light {
  background-color: #222222 !important;
}

.text-light {
  color: #b0b0b0 !important;
}

a.text-light:hover,
a.text-light:focus {
  color: #c0c0c0 !important;
}

/* ============================================
   CARD COMPONENTS
   Content containers and panel styling
   ============================================ */

/* Dark-mode card surfaces — cards one step lighter than bg so elevation
   reads through contrast rather than shadow. Matches light mode's border
   treatment and padding scheme. */
.card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.card:not(.no-lift):hover {
  border-color: rgba(255, 255, 255, 0.14);
}
.card .card-body {
  padding: var(--space-5);
  background-color: var(--color-bg-card);
  border-radius: var(--radius-xl) !important;
}
@media (max-width: 767.98px) {
  .card .card-body {
    padding: var(--space-4);
  }
}

.border {
  border: 1px solid #666666 !important;
}

.border.border-light {
  border-color: #ffffff !important;
}

.border-top {
  border-top: 1px solid #666666 !important;
}

.border-bottom {
  border-bottom: 1px solid #666666 !important;
}

.border-left {
  border-left: 1px solid #666666 !important;
}

.border-right {
  border-right: 1px solid #666666 !important;
}

.btn-white {
  background-color: #0a0a0a !important;
  border: 1px solid #0a0a0a !important;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(10, 10, 10, 0.3);
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white.active,
.btn-white.focus {
  background-color: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
}

.btn-soft-white {
  background-color: rgba(10, 10, 10, 0.2) !important;
  border: 1px solid rgba(10, 10, 10, 0.2) !important;
  color: #0a0a0a !important;
  box-shadow: 0 3px 5px 0 rgba(10, 10, 10, 0.3);
}

.btn-soft-white:hover,
.btn-soft-white:focus,
.btn-soft-white:active,
.btn-soft-white.active,
.btn-soft-white.focus {
  background-color: #0a0a0a !important;
  border-color: #0a0a0a !important;
  color: #ffffff !important;
}

.btn-outline-white {
  border: 1px solid #0a0a0a;
  color: #0a0a0a;
  background-color: transparent;
}

.btn-outline-white:hover,
.btn-outline-white:focus,
.btn-outline-white:active,
.btn-outline-white.active,
.btn-outline-white.focus,
.btn-outline-white:not(:disabled):not(.disabled):active {
  background-color: #0a0a0a;
  border-color: #0a0a0a;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(10, 10, 10, 0.3);
}

.btn-primary {
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(176, 176, 176, 0.3);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.focus {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #000000 !important;
}

.btn-soft-primary {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(176, 176, 176, 0.3);
}

.btn-soft-primary:hover,
.btn-soft-primary:focus,
.btn-soft-primary:active,
.btn-soft-primary.active,
.btn-soft-primary.focus {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}

.btn-outline-primary {
  border: 1px solid #ffffff;
  color: #ffffff;
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(176, 176, 176, 0.3);
}

.btn-secondary {
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(90, 109, 144, 0.3);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary.focus {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #000000 !important;
}

.btn-soft-secondary {
  background-color: rgba(176, 176, 176, 0.2) !important;
  border: 1px solid rgba(176, 176, 176, 0.2) !important;
  color: #b0b0b0 !important;
  box-shadow: 0 3px 5px 0 rgba(90, 109, 144, 0.3);
}

.btn-soft-secondary:hover,
.btn-soft-secondary:focus,
.btn-soft-secondary:active,
.btn-soft-secondary.active,
.btn-soft-secondary.focus {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #000000 !important;
}

.btn-outline-secondary {
  border: 1px solid #b0b0b0;
  color: #b0b0b0;
  background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
  background-color: #b0b0b0;
  border-color: #b0b0b0;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(90, 109, 144, 0.3);
}

.btn-success {
  background-color: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(46, 202, 139, 0.3);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success.focus {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #000000 !important;
}

.btn-soft-success {
  background-color: rgba(204, 204, 204, 0.2) !important;
  border: 1px solid rgba(204, 204, 204, 0.2) !important;
  color: #cccccc !important;
  box-shadow: 0 3px 5px 0 rgba(46, 202, 139, 0.3);
}

.btn-soft-success:hover,
.btn-soft-success:focus,
.btn-soft-success:active,
.btn-soft-success.active,
.btn-soft-success.focus {
  background-color: #cccccc !important;
  border-color: #cccccc !important;
  color: #000000 !important;
}

.btn-outline-success {
  border: 1px solid #cccccc;
  color: #cccccc;
  background-color: transparent;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active,
.btn-outline-success.focus,
.btn-outline-success:not(:disabled):not(.disabled):active {
  background-color: #cccccc;
  border-color: #cccccc;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(46, 202, 139, 0.3);
}

.btn-warning {
  background-color: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(208, 208, 208, 0.3);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.focus {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #000000 !important;
}

.btn-soft-warning {
  background-color: rgba(208, 208, 208, 0.2) !important;
  border: 1px solid rgba(208, 208, 208, 0.2) !important;
  color: #d0d0d0 !important;
  box-shadow: 0 3px 5px 0 rgba(208, 208, 208, 0.3);
}

.btn-soft-warning:hover,
.btn-soft-warning:focus,
.btn-soft-warning:active,
.btn-soft-warning.active,
.btn-soft-warning.focus {
  background-color: #d0d0d0 !important;
  border-color: #d0d0d0 !important;
  color: #000000 !important;
}

.btn-outline-warning {
  border: 1px solid #d0d0d0;
  color: #d0d0d0;
  background-color: transparent;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning.active,
.btn-outline-warning.focus,
.btn-outline-warning:not(:disabled):not(.disabled):active {
  background-color: #d0d0d0;
  border-color: #d0d0d0;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(208, 208, 208, 0.3);
}

.btn-info {
  background-color: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(204, 204, 204, 0.3);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.focus {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #000000 !important;
}

.btn-soft-info {
  background-color: rgba(204, 204, 204, 0.2) !important;
  border: 1px solid rgba(204, 204, 204, 0.2) !important;
  color: #cccccc !important;
  box-shadow: 0 3px 5px 0 rgba(204, 204, 204, 0.3);
}

.btn-soft-info:hover,
.btn-soft-info:focus,
.btn-soft-info:active,
.btn-soft-info.active,
.btn-soft-info.focus {
  background-color: #cccccc !important;
  border-color: #cccccc !important;
  color: #000000 !important;
}

.btn-outline-info {
  border: 1px solid #cccccc;
  color: #cccccc;
  background-color: transparent;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active,
.btn-outline-info.focus,
.btn-outline-info:not(:disabled):not(.disabled):active {
  background-color: #cccccc;
  border-color: #cccccc;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(204, 204, 204, 0.3);
}

.btn-dark {
  background-color: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(255, 255, 255, 0.3);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.btn-dark.focus {
  background-color: #b0b0b0 !important;
  border-color: #b0b0b0 !important;
  color: #000000 !important;
}

.btn-soft-dark {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(255, 255, 255, 0.3);
}

.btn-soft-dark:hover,
.btn-soft-dark:focus,
.btn-soft-dark:active,
.btn-soft-dark.active,
.btn-soft-dark.focus {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}

.btn-outline-dark {
  border: 1px solid #ffffff;
  color: #ffffff;
  background-color: transparent;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-outline-dark.active,
.btn-outline-dark.focus,
.btn-outline-dark:not(:disabled):not(.disabled):active {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000000 !important;
  box-shadow: 0 3px 5px 0 rgba(255, 255, 255, 0.3);
}

.btn-light {
  background-color: #222222 !important;
  border: 1px solid #222222 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(37, 54, 73, 0.3);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light.active,
.btn-light.focus {
  background-color: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #ffffff !important;
}

.btn-soft-light {
  background-color: rgba(37, 54, 73, 0.2) !important;
  border: 1px solid rgba(37, 54, 73, 0.2) !important;
  color: #e0e0e0 !important;
  box-shadow: 0 3px 5px 0 rgba(37, 54, 73, 0.3);
}

.btn-soft-light:hover,
.btn-soft-light:focus,
.btn-soft-light:active,
.btn-soft-light.active,
.btn-soft-light.focus {
  background-color: #222222 !important;
  border-color: #222222 !important;
  color: #ffffff !important;
}

.btn-outline-light {
  border: 1px solid #999999;
  color: #e0e0e0;
  background-color: transparent;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active,
.btn-outline-light.active,
.btn-outline-light.focus,
.btn-outline-light:not(:disabled):not(.disabled):active {
  background-color: #222222;
  border-color: #222222;
  color: #ffffff !important;
  box-shadow: 0 3px 5px 0 rgba(37, 54, 73, 0.3);
}

.btn.btn-dark {
  color: #0a0a0a !important;
  background: #ffffff;
  border: 1px solid #666666 !important;
}

.btn.btn-dark:hover,
.btn.btn-dark:focus,
.btn.btn-dark:active,
.btn.btn-dark.active,
.btn.btn-dark.focus {
  background-color: #f2f2f2 !important;
  color: #0a0a0a !important;
}

.btn.btn-soft-dark {
  color: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid #666666 !important;
}

.btn.btn-soft-dark:hover,
.btn.btn-soft-dark:focus,
.btn.btn-soft-dark:active,
.btn.btn-soft-dark.active,
.btn.btn-soft-dark.focus {
  color: #0a0a0a !important;
}

.btn.btn-outline-dark {
  border: 1px solid #666666 !important;
  color: #ffffff !important;
  background-color: transparent;
}

.btn.btn-outline-dark:hover,
.btn.btn-outline-dark:focus,
.btn.btn-outline-dark:active,
.btn.btn-outline-dark.active,
.btn.btn-outline-dark.focus {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.btn.btn-light {
  color: #ffffff !important;
  border-color: #555555 !important;
}

.btn.btn-light:hover,
.btn.btn-light:focus,
.btn.btn-light:active,
.btn.btn-light.active,
.btn.btn-light.focus {
  background-color: #555555 !important;
  color: #ffffff !important;
}

.btn.btn-soft-light {
  color: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid #555555 !important;
}

.btn.btn-soft-light:hover,
.btn.btn-soft-light:focus,
.btn.btn-soft-light:active,
.btn.btn-soft-light.active,
.btn.btn-soft-light.focus {
  color: #ffffff !important;
}

.btn.btn-outline-light {
  border-color: #555555 !important;
  color: #ffffff !important;
}

.btn.btn-outline-light:hover,
.btn.btn-outline-light:focus,
.btn.btn-outline-light:active,
.btn.btn-outline-light.active,
.btn.btn-outline-light.focus {
  background-color: #555555 !important;
  color: #ffffff !important;
}

button:not(:disabled):focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.shadow {
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.15) !important;
}

.shadow-lg {
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15) !important;
}

.badge-white {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
}

.badge-outline-white {
  background-color: transparent !important;
  color: #0a0a0a !important;
  border: 1px solid #0a0a0a !important;
}

.badge-primary {
  background-color: #ffffff !important;
  color: #000000 !important;
}


.badge-secondary {
  background-color: #b0b0b0 !important;
  color: #000000 !important;
}


.badge-success {
  background-color: #cccccc !important;
  color: #000000 !important;
}


.badge-warning {
  background-color: #d0d0d0 !important;
  color: #000000 !important;
}


.badge-info {
  background-color: #cccccc !important;
  color: #000000 !important;
}


.badge-danger {
  background-color: #ffffff !important;
  color: #000000 !important;
}


.badge-dark {
  background-color: #ffffff !important;
  color: #000000 !important;
}


.badge-light {
  background-color: #222222 !important;
  color: #ffffff !important;
}


.badge.badge-dark {
  color: #0a0a0a !important;
  background-color: #ffffff !important;
}


.badge.badge-light {
  color: #ffffff !important;
  background-color: #222222 !important;
}


/* Glass effect badge color overrides - preserve badge colors with glassmorphism */
/* Adapted for Dark Mode: Increased opacity for better visibility on dark backgrounds */
.badge.glass-effect.badge-danger {
  background: rgba(228, 63, 82, 0.25) !important;
  color: #ff8fa3 !important;
  border: 1px solid rgba(228, 63, 82, 0.4);
}

.badge.glass-effect.badge-primary {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.badge.glass-effect.badge-success {
  background: rgba(40, 167, 69, 0.25) !important;
  color: #75df8a !important;
  border: 1px solid rgba(40, 167, 69, 0.4);
}

.badge.glass-effect.badge-warning {
  background: rgba(255, 193, 7, 0.25) !important;
  color: #ffe69c !important;
  border: 1px solid rgba(255, 193, 7, 0.4);
}

.badge.glass-effect.badge-info {
  background: rgba(23, 162, 184, 0.25) !important;
  color: #6edff6 !important;
  border: 1px solid rgba(23, 162, 184, 0.4);
}

.badge.glass-effect.badge-light {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #e0e0e0 !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.alert-white {
  background-color: #333333;
  color: #ffffff;
  border-color: #0a0a0a;
}

.alert-white .alert-link {
  color: #ffffff;
}

.alert-outline-white {
  background-color: #0a0a0a;
  color: #e0e0e0;
  border-color: #0a0a0a;
}


.alert-success {
  background-color: #cccccc;
  color: #000000;
  border-color: #cccccc;
}

.alert-success .alert-link {
  color: #333333;
}


.alert-warning {
  background-color: #d0d0d0;
  color: #000000;
  border-color: #d0d0d0;
}

.alert-warning .alert-link {
  color: #444444;
}


.alert-info {
  background-color: rgba(95, 180, 255, 0.14);
  color: var(--color-info, #5fb4ff);
  border-color: rgba(95, 180, 255, 0.35);
}

.alert-info .alert-link {
  color: var(--color-info, #5fb4ff);
  text-decoration: underline;
}


.alert-danger {
  background-color: #999999;
  color: #ffffff;
  border-color: #999999;
}

.alert-danger .alert-link {
  color: #333333;
}


.alert-light {
  background-color: #444444;
  color: #ffffff;
  border-color: #222222;
}

.alert-light .alert-link {
  color: #ffffff;
}


/* ==========================================================================
   UPLOAD SUBMENU - MONOCHROME DARK MODE
   Synced with style.css line 5842
   ========================================================================== */

/* upload-icon-wrapper overrides moved to bottom of file */

#upload-submenu {
  background-color: #121212;
  border: 1px solid #333333;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

#upload-submenu li a {
  color: #e0e0e0 !important;
}

#upload-submenu li a i {
  color: #999999 !important;
}

#upload-submenu li a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08);
}

#upload-submenu li a:hover i {
  color: #ffffff !important;
}

/* ==========================================================================
   FILTERS MODAL - MONOCHROME DARK MODE
   Synced with style.css line 5954
   ========================================================================== */

/* Filter modal scrollbar styling - Monochrome */
#filters-modal .modal-body::-webkit-scrollbar {
  width: 8px;
}

#filters-modal .modal-body::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 10px;
}

#filters-modal .modal-body::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 10px;
}

#filters-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #e0e0e0;
}

/* Filter group spacing - slide in gracefully */
.filter-group {
  animation: fadeInSlide 0.3s ease-in;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert.alert-light {
  background-color: #222222;
  color: #ffffff;
  border-color: #222222;
}

.breadcrumb .breadcrumb-item a {
  color: #ffffff;
}

.breadcrumb .breadcrumb-item:after {
  color: #ffffff;
}

.pagination .page-item .page-link {
  color: #ffffff;
  border: 1px solid #666666;
  background: #0a0a0a;
}

.pagination .page-item .page-link:hover {
  color: #ffffff !important;
}

.pagination .active a {
  color: #ffffff;
}


.nav-pills {
  background: #1a1a1a;
}

.nav-pills .nav-link {
  color: #cccccc !important;
}

.nav-pills .nav-link:hover {
  background: #333333;
}

.nav-pills .nav-link.active {
  background: #ffffff !important;
  color: #000000 !important;
}

.progress-box .progress {
  background: #666666;
}

.blockquote {
  border-left: 3px solid #cccccc;
  border-radius: 6px;
  font-size: 16px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  font-size: 14px;
  font-weight: 700;
}

.form-group .form-control {
  background-color: #0a0a0a;
  border: 1px solid #808080;
  color: #cccccc;
}

.form-group .form-control::placeholder {
  color: #cccccc;
}

.custom-radio .custom-control-label::before,
.custom-checkbox .custom-control-label::before,
.custom-switch .custom-control-label::before {
  background-color: #2a2a2a;
  border: 2px solid #888888;
}

.custom-control-input:disabled~.custom-control-label::before,
.custom-control-input[disabled]~.custom-control-label::before {
  background-color: #1a1a1a;
  border-color: #444444;
}


.table-responsive .table {
  color: #ffffff;
}

.table-responsive .table td,
.table-responsive .table th {
  border-top-color: #666666;
}

.table-responsive .table thead th {
  border-bottom-color: #666666;
}

.table-responsive .table-center tbody tr:hover {
  color: #ffffff;
  background-color: #666666;
}

/* ============================================
   MODAL DIALOGS
   Popup windows and overlay content
   ============================================ */

.modal-content {
  background: #0a0a0a;
  border: 1px solid #333333;
}

.modal-content .modal-header button.close {
  color: #ffffff;
}

.modal-content .modal-header,
.modal-content .modal-footer {
  border: none !important;
}

.modal-content .modal-header:has(.modal-title) {
  border-bottom: 1px solid #333333 !important;
}

.modal-content .modal-title {
  color: #e0e0e0;
}

.modal-content .modal-body {
  color: #e0e0e0;
}

.modal-open {
  padding-right: 0 !important;
}

#preloader {
  background-image: linear-gradient(45deg, #0a0a0a, #0a0a0a);
}


.back-to-top {
  color: #ffffff;
  background-color: #666666;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.15);
}

.back-to-top:hover {
  color: #0a0a0a;
}

.media-list .sub-comment {
  border-left: none;
}


/* ============================================
   COUNTDOWN TIMER
   Event countdowns and time displays
   ============================================ */

#countdown .count-down,
#eventdown .count-down {
  color: #ffffff !important;
  border: 4px solid #cccccc;
}

#eventdown .count-down {
  border: 0;
}

#clock {
  color: #ffffff;
}


.footer {
  background: linear-gradient(180deg, #151515 0%, #111111 100%);
  color: #cccccc;
  border-top: 1px solid #2a2a2a;
}

.footer .logo-footer {
  color: #ffffff;
}

.footer .logo-footer img {
  height: 24px;
  opacity: 0.95;
}

.footer .footer-head {
  color: #ffffff !important;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-bottom: 20px;
}

.footer .foot-subscribe .form-control {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  color: #e0e0e0;
}


.footer .foot-subscribe input::placeholder {
  color: #999999;
}

.footer .text-foot {
  color: #b0b0b0;
  line-height: 1.8;
}

.footer .footer-list li a {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.25s ease, color 0.25s ease;
}

.footer .footer-list li a:hover {
  color: #ffffff;
  padding-left: 6px;
}

.footer.footer-bar {
  border-top: 1px solid #222222;
}

.team:hover img {
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.15);
}

.customer-testi .content:before {
  border: 8px solid #ffffff;
  border-color: transparent #0a0a0a #0a0a0a transparent;
  box-shadow: 2px 2px 2px -1px rgba(255, 255, 255, 0.15);
}


body {
  color: #ffffff;
  background: #0a0a0a;
}

::-moz-selection {
  color: #ffffff;
}

::selection {
  color: #ffffff;
}


.title-dark {
  color: #ffffff !important;
}

.para-dark {
  color: #b0b0b0 !important;
}

.title-white {
  color: #0a0a0a !important;
}

.title-bg-dark {
  background: #ffffff !important;
}

#style-switcher .t-dark,
#style-switcher .t-rtl-light,
#style-switcher .t-ltr-dark {
  display: none;
}

#style-switcher .t-light,
#style-switcher .t-rtl-dark {
  display: inline-block;
}

#topnav .logo {
  color: #ffffff !important;
}

#topnav .logo .l-dark {
  display: none !important;
}

#topnav .logo .l-light {
  display: inline-block !important;
}

/* Mobile: show dark logo (readable on light mobile header bg) */
@media (max-width: 991px) {
  #topnav .logo .l-dark {
    display: inline-block !important;
  }
  #topnav .logo .l-light {
    display: none !important;
  }
}

#topnav .has-submenu.active a {
  color: #0a0a0a;
}

#topnav .has-submenu .submenu .submenu-arrow {
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
}

#topnav .navbar-toggle span {
  background-color: #ffffff;
}

#topnav .navigation-menu>li>a {
  color: #ffffff;
}

#topnav .navigation-menu .has-submenu .menu-arrow {
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
}

#topnav.scroll {
  background-color: #1a1a1a;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.15);
}

#topnav.scroll .navigation-menu>li>a {
  color: #ffffff;
}

#topnav.scroll .navigation-menu>li>.menu-arrow {
  border-color: #ffffff;
}

#topnav.nav-sticky {
  background: #1a1a1a;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.15);
}


#topnav.nav-sticky .logo.logo-light {
  color: #ffffff !important;
}

@media (min-width: 992px) {
  #topnav .navigation-menu>.has-submenu>.submenu>.has-submenu>.submenu::before {
    box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.15);
    border-color: transparent #1a1a1a #1a1a1a transparent;
  }

  #topnav .navigation-menu>li .submenu {
    background-color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  #topnav .navigation-menu>li .submenu:before {
    border: 7px solid #666666;
    border-color: transparent transparent #1a1a1a #1a1a1a;
    box-shadow: -2px 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  #topnav .navigation-menu>li .submenu li a {
    color: #ffffff !important;
  }
}

@media (max-width: 991px) {
  #topnav {
    background-color: #1a1a1a;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.15);
  }

  #topnav .navigation-menu>li .submenu li a {
    color: #ffffff !important;
  }


  #topnav .navigation-menu>li>a {
    color: #ffffff;
  }

  #topnav .menu-extras .menu-item {
    border-color: #b0b0b0;
  }

  #navigation {
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222222;
    background-color: #1a1a1a;
  }
}

.hide {
  display: none;
}

.gingeron {
  display: none;
}

.addemail {
  text-decoration: none;
}

.addemail:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.removemail {
  text-decoration: none;
}

.removemail:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.docufile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.docufile+label {
  font-size: 1em;
  font-weight: 600;
  color: white;
  display: inline-block;
}

.docufile:focus+label,
.docufile+label:hover {
  color: #ffffff;
}

.docufile+label {
  cursor: pointer;
  /* "hand" cursor */
}

.docufile+label * {
  pointer-events: none;
}

.docufile:focus+label,
.docufile.has-focus+label,
.docufile+label:hover {
  color: #ffffff;
}

.js .docufile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.docufile+label {
  max-width: 80%;
  font-size: 1rem;
  /* 20px */
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  padding: 0.625rem 1.25rem;
  /* 10px 20px */
}

.no-js .docufile+label {
  display: none;
}

.filter-white {
  filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(269deg) brightness(110%) contrast(101%);
}

/* ============================================
   MISCELLANEOUS UTILITIES
   Title links, progress bars, overlays, and more
   The bits that make everything work
   ============================================ */

/* Title links styling */
h1.title a,
h2.title a,
h3.title a,
h4.title a,
h5.title a,
h6.title a {
  color: #ffffff !important;
}

h1.title a:hover,
h2.title a:hover,
h3.title a:hover,
h4.title a:hover,
h5.title a:hover,
h6.title a:hover {
  color: #cc0000 !important;
}

/* Title with text-secondary links - white in dark mode */
.title a.text-secondary {
  color: #ffffff !important;
}

.title a.text-secondary:hover,
.title a.text-secondary:focus {
  color: #e0e0e0 !important;
}

/* Fix progress bar with title-bg-dark visibility */
.progress.title-bg-dark {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.progress.title-bg-dark .progress-bar {
  background-color: #3c4858 !important;
  color: #ffffff !important;
}

.progress-bar.bg-primary {
  background-color: #000000 !important;
}

/* Text slider animation */


@keyframes moveSlideshow {
  100% {
    transform: translateX(-300%);
  }
}

/* Fix nav-link rounded-pill active text color */
.nav-pills .nav-link.rounded-pill.active,
.nav-link.rounded-pill.active {
  color: #000000 !important;
  background: #ffffff !important;
}

/* Ensure Google Sign in/Sign up buttons have consistent styling */
#googleLoginBtn,
#googleSignupBtn {
  border-color: #999999 !important;
  color: #999999 !important;
}

#googleLoginBtn:hover,
#googleLoginBtn:focus,
#googleLoginBtn:active,
#googleSignupBtn:hover,
#googleSignupBtn:focus,
#googleSignupBtn:active {
  background-color: #999999 !important;
  border-color: #999999 !important;
  color: #000000 !important;
}

/* Special overlay */


/* Pace progress bar - white in dark mode */
.pace .pace-progress {
  background: #ffffff !important;
}

/* ============================================
   TOOLTIPS
   Hover hints and informational popups
   ============================================ */

/* Cursor pointer for time elements with tooltips */
time[title] {
  cursor: pointer;
}

/* Enhanced Bootstrap Tooltip Styling */
.tooltip {
  font-family: inherit;
  font-size: 0.6875rem;
  z-index: 1070;
}

.tooltip-inner {
  max-width: 220px;
  padding: 0.375rem 0.625rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
  font-size: 0.6875rem;
  line-height: 1.3;
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #000;
}

.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #000;
}

.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #000;
}

.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #000;
}

/* ============================================
   COUNTRY-FLAG TOOLTIP (dark theme: inverted light pill)
   Hover / tap / focus a flag → country name. Bound once, delegated
   from <body> in app.js on [data-country-tip] (see
   IsoCountries::flagTipAttrs). Bootstrap tooltip under the hood, with
   its own template class so it can read as a small elegant pill
   rather than the generic gray help tip.
   ============================================ */

/* The flag itself: it's now interactive (focusable), so give it a quiet
   affordance — no hand cursor (it isn't a link), a soft lift on hover, and
   a keyboard-only focus ring. */
[data-country-tip] {
  display: inline-block;
  cursor: default;
  outline: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}
[data-country-tip]:hover,
[data-country-tip]:focus-visible {
  transform: translateY(-1px) scale(1.06);
  filter: brightness(1.05);
}
[data-country-tip]:focus-visible {
  outline: 2px solid var(--color-primary, #e85454);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Tooltip pill */
.tooltip.country-tip {
  font-size: 0.75rem;
  z-index: 1075;
  pointer-events: none;
}
.tooltip.country-tip .tooltip-inner {
  max-width: 260px;
  padding: 0.4rem 0.75rem;
  color: #0a0a0a;
  background: #f0f0f0;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
}
.tooltip.country-tip.bs-tooltip-top .arrow::before,
.tooltip.country-tip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #f0f0f0;
}
.tooltip.country-tip.bs-tooltip-bottom .arrow::before,
.tooltip.country-tip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #f0f0f0;
}
.tooltip.country-tip.bs-tooltip-left .arrow::before,
.tooltip.country-tip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #f0f0f0;
}
.tooltip.country-tip.bs-tooltip-right .arrow::before,
.tooltip.country-tip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #f0f0f0;
}
/* Rise-in: Bootstrap fades opacity; add a 4px lift so it settles into place. */
.tooltip.country-tip.show .tooltip-inner {
  animation: country-tip-rise 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes country-tip-rise {
  from { transform: translateY(4px); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-country-tip],
  .tooltip.country-tip.show .tooltip-inner { transition: none; animation: none; }
}

/* Studio "similar shops" grid: wrap for the flag image so the tooltip
   anchors to a real box. */
.studio-similar-flag {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.studio-similar-flag img {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}

/* Time element hover effect */
time.timeago:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

/* Modern Comments and Replies Styling */
.listcomment {
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}

.listcomment:hover {
  transform: translateX(2px);
}

.commentor-detail {
  background-color: #1a1a1a;
  border-left: 3px solid #2a2a2a;
  transition: all 0.2s ease;
}

.listcomment:hover .commentor-detail {
  background-color: #222222;
  border-left-color: #ffffff;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

.commentor-detail h6 a {
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.commentor-detail h6 a:hover {
  color: #ffffff !important;
  text-decoration: none;
}

.commentor-detail p {
  color: #b0b0b0;
  line-height: 1.6;
  font-size: 0.95rem;
  /* Comments/replies preserve the author's line breaks (server keeps \n);
     anywhere-wrap stops unbroken strings blowing the bubble width. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.commentext {
  margin-top: 0.25rem;
  padding-left: 0.5rem;
}

.commentext p {
  margin-bottom: 0;
  font-size: 0.875rem;
}

.commentext .interpunct {
  color: #3a3a3a;
  font-weight: bold;
}

.commentext .addreply {
  font-weight: 500;
  transition: all 0.2s ease;
}

.commentext .addreply:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Reply Styling */
.sub-comment {
  margin-top: 0.75rem;
  padding-left: 1.5rem;
}

.listreply {
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
}

.listreply:hover {
  transform: translateX(2px);
}

.listreply .commentor-detail {
  background-color: #0f0f0f;
  border-left: 3px solid #2a2a2a;
}

.listreply:hover .commentor-detail {
  background-color: #1a1a1a;
  border-left-color: #ffffff;
  box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
}

.listreply .commentor-detail h6 {
  font-size: 0.85rem;
}

.listreply .commentor-detail p {
  font-size: 0.9rem;
}

/* Time element styling */
time.timeago {
  font-weight: 500;
  color: #808080;
  transition: color 0.2s ease;
}

time.timeago:hover {
  color: #a0a0a0;
}

/* Add spacing between comments list and input box */
.media-list {
  margin-bottom: 1.5rem !important;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .sub-comment {
    padding-left: 1rem;
  }

  .commentor-detail {
    padding: 0.5rem !important;
  }

  .commentor-detail h6 {
    font-size: 0.85rem;
  }

  .commentor-detail p {
    font-size: 0.9rem;
  }
}

/* Automatically add btn-pills border-radius to all btn/button anchors on all screen sizes */
a.btn:not(.btn-lg):not(.btn-icon):not(.btn-pills),
button.btn:not(.btn-lg):not(.btn-icon):not(.btn-pills) {
  border-radius: 30px;
}

/* Round all input and textarea forms — and pair with dark bg/text so the
   Bootstrap white-bg default doesn't leak through on inputs that lack a
   .form-group wrapper. Specific overrides (.form-group .form-control,
   .admin-interface ..., etc.) still win on specificity. */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
  border-radius: 10px !important;
  background-color: #1a1a1a;
  color: #e0e0e0;
  border-color: rgba(255, 255, 255, 0.12);
}

select.form-control {
  border-radius: 10px !important;
  background-color: #1a1a1a;
  color: #e0e0e0;
  border-color: rgba(255, 255, 255, 0.12);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: #777777;
  opacity: 1;
}

/* Mask Chrome/Safari autofill yellow with the dark input bg + light text.
   The 1000px inset shadow + long transition is the standard workaround —
   -webkit doesn't let you override background-color directly on autofill.
   !important is required because `.form-group .form-control:focus` (0,3,0)
   otherwise wins over the autofill rule's selector (0,2,1) and replaces
   the masking inset shadow with a 3px white focus ring — at which point
   the browser's native light-blue autofill bg becomes visible again. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #e0e0e0 !important;
  -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
  caret-color: #e0e0e0 !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Allow rounded-pill class to override the above */
input.rounded-pill,
select.rounded-pill,
textarea.rounded-pill,
.form-control.rounded-pill {
  border-radius: 50rem !important;
}

/* Device icon filter for dark mode */
.device-icon-filter {
  filter: invert(99%) sepia(1%) saturate(2%) hue-rotate(269deg) brightness(110%) contrast(101%) !important;
}

/* Ensure modal buttons are visible in dark mode */
[data-layout-mode="dark"] #duplicate-question-modal .btn-primary {
  color: #ffffff !important;
}

[data-layout-mode="dark"] #duplicate-question-modal .btn-outline-secondary {
  color: #adb5bd !important;
  border-color: #6c757d !important;
}

[data-layout-mode="dark"] #duplicate-question-modal .btn-outline-secondary:hover {
  color: #ffffff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

/* ===================================
   Card Redesign Styles
   =================================== */

/* Card hover effects — dark-mode parity with light. Snappy (0.18s),
   token-driven, reduce-motion aware. */
.hover-lift {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.18s ease;
  will-change: transform;
}
.hover-lift:hover {
  transform: translateY(var(--lift-hover-y));
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(255, 255, 255, 0.12);
}

.hover-card-lift {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.hover-card-lift:hover {
  transform: translateY(var(--lift-hover-y));
  box-shadow: var(--shadow-lg) !important;
}

/* Press-feedback — tactile response on non-card clickables. */
.press-feedback {
  transition: transform 0.12s ease, box-shadow 0.18s ease;
  cursor: pointer;
}
.press-feedback:hover  { transform: translateY(-1px); }
.press-feedback:active { transform: translateY(0) scale(0.97); }

/* Focus ring — branded, keyboard-only. */
:focus-visible{
  outline: none;
  box-shadow: var(--ring-focus);
  transition: box-shadow 0.15s ease;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus), var(--shadow-sm);
}

@media (prefers-reduced-motion: reduce) {
  .hover-lift, .hover-card-lift, .press-feedback {
    transition: none !important;
  }
  .hover-lift:hover, .hover-card-lift:hover,
  .press-feedback:hover, .press-feedback:active {
    transform: none !important;
  }
}

/* Corporate Find Border */
.border-left-corp {
  border-left: 4px solid #ffffff !important;
}

/* Shop Interactions Container - Ensures find cards are properly separated */
#interactions-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Meta Pills Styling */
.find-meta-pills {
  gap: 8px;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.meta-pill i {
  margin-right: 4px;
  font-size: 14px;
}

.doc-pill {
  background: #333333;
  color: #ffffff;
  text-decoration: none;
}

.doc-pill:hover {
  background: #444444;
  color: #ffffff;
  text-decoration: none;
}

.price-pill {
  background: #2a2a2a;
  color: #cccccc;
}

.location-pill {
  background: #1a1a1a;
  color: #b0b0b0;
}

.phone-pill {
  background: #222222;
  color: #cccccc;
}

/* Action Stats */
.action-stat {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #6c757d;
}

.action-stat i {
  margin-right: 4px;
  font-size: 16px;
}

.action-stat strong {
  color: #e0e0e0;
  margin-left: 2px;
}

/* Badge Improvements */


/* Hover primary color for links */
.hover-primary {
  transition: color 0.2s ease;
  text-decoration: none;
}

.hover-primary:hover {
  color: #ffffff !important;
  text-decoration: none;
}

/* Responsive button helper - block on mobile, inline on md+ */
@media (min-width: 768px) {
  .btn-md-inline {
    display: inline-block;
    width: auto;
  }

  .text-md-right {
    text-align: right !important;
  }

  .mr-md-2 {
    margin-right: 0.5rem !important;
  }

  .mb-md-0 {
    margin-bottom: 0 !important;
  }
}

/* Image Container for MyFinds */


/* Find Stats Bar */


/* Find Actions Bar */
/* Find stream search box */
.find-search-wrapper {
  position: relative;
}

.find-search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #8492a6;
  pointer-events: none;
}

.find-actions-bar {
  padding-top: 12px;
}

/* Transition for all elements */


/* Gap utility for flexbox */
.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 1rem;
}

/* Comment form spacing fix */
.comment-form-container {
  margin-top: 0.25rem !important;
}

/* Tighten send button against right edge of the rounded input and
   vertically center it (overrides the legacy .counterpill button rule
   which used right:19px / top:3px for an unrelated layout). */
.comment-form-container .counterpill {
  position: relative;
}
.comment-form-container .counterpill .form-group {
  margin-bottom: 0;
  position: relative;
}
.comment-form-container .counterpill button {
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

/* Reply-mode indicator above the repurposed comment input. */
.comment-form-container .reply-indicator {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #9a9a9a;
  background: rgba(204, 0, 0, 0.1);
  border-radius: 9999px;
}
.comment-form-container.is-replying .reply-indicator {
  display: inline-flex;
}
.comment-form-container .reply-indicator .reply-cancel {
  background: none;
  border: none;
  padding: 0;
  color: #cc0000;
  font-weight: 600;
  cursor: pointer;
}

/* Increase button font sizes in findstream */
.find-actions-bar .btn {
  font-size: 14px !important;
}

/* Increase View Details button font in myfinds */


/* Responsive button sizes for smaller screens */
@media (max-width: 767px) {
  .find-actions-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px;
  }
  .find-actions-bar > div {
    width: 100%;
  }
  .find-actions-bar > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .find-actions-bar .btn {
    font-size: 12px !important;
    padding: 0.25rem 0.75rem !important;
  }
  .find-actions-bar .btn.mr-2 {
    margin-right: 0 !important;
  }


}

/* Border accents */


/* Monochrome text and icons */
.text-danger {
  color: #ffffff !important;
}

/* Buttons - Monochrome theme */
.btn-danger {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}

.btn-danger:hover {
  background-color: #d0d0d0 !important;
  border-color: #d0d0d0 !important;
  color: #000000 !important;
}

.btn-outline-danger {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background-color: transparent !important;
}

.btn-outline-danger:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* Soft danger backgrounds */
.bg-soft-danger {
  background-color: #333333 !important;
  color: #ffffff !important;
}

/* Links */
a.text-danger:hover {
  color: #d0d0d0 !important;
}

/* Comment reply link hover */
.addreply:hover {
  color: #ffffff !important;
}

/* Upload Icon Wrapper - Match light mode positioning and sizing */
.upload-icon-wrapper {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-icon-wrapper:hover {
  background: rgba(204, 0, 0, 0.15);
  transform: translateY(-50%) scale(1.08);
}

.upload-icon-wrapper:active {
  transform: translateY(-50%) scale(0.98);
}

.upload-icon-wrapper i {
  color: #cc0000;
  font-size: 18px;
  transition: color 0.3s ease;
}

.upload-icon-wrapper:hover i {
  color: #ff3333;
}

/* Camera icon on right side of input - dark mode */
.camera-icon-wrapper {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.camera-icon-wrapper:hover {
  background: rgba(204, 0, 0, 0.15);
  transform: translateY(-50%) scale(1.08);
}

.camera-icon-wrapper:active {
  transform: translateY(-50%) scale(0.98);
}

.camera-icon-wrapper i {
  color: #cc0000;
  font-size: 20px;
  transition: color 0.3s ease;
}

.camera-icon-wrapper:hover i {
  color: #ff3333;
}

/* Upload Submenu - Match light mode positioning and spacing */
#upload-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  padding: 8px 0;
  list-style: none;
  min-width: 200px;
  visibility: hidden;
  opacity: 0;
  margin: 0;
  transition: all 0.3s ease;
  border-radius: 5px;
  background-color: #0a0a0a;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  border: 1px solid #333333;
}

#upload-submenu.show {
  visibility: visible;
  opacity: 1;
  margin-top: 8px;
}

#upload-submenu li a {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  clear: both;
  white-space: nowrap;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: #ffffff !important;
  transition: all 0.3s;
  text-decoration: none;
}

#upload-submenu li a i {
  font-size: 18px;
  margin-right: 10px;
}

#upload-submenu li a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1);
  padding-left: 18px;
}


/* ==========================================================================
   BURGER MENU - MONOCHROME DARK MODE
   Synced with style.css line 7671 (Media Query Block)
   ========================================================================== */

@media (max-width: 991px) {
  #topnav {
    background-color: #0a0a0a;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  }

  #topnav .container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
    position: relative;
    min-height: 74px;
  }

  /* Burger menu positioned absolutely on the left */
  #topnav .menu-extras {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    float: none;
    margin: 0;
    z-index: 10;
  }

  #topnav .menu-extras .menu-item {
    margin: 0;
  }

  /* Logo centered */
  #topnav .navbar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  /* Burger icon styling - Monochrome */
  #topnav .navbar-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    position: relative;
  }

  #topnav .navbar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }

  #topnav .navbar-toggle .lines {
    margin: 0;
    width: 18px;
    height: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #topnav .navbar-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 1px;
    background-color: #e0e0e0;
    transition: all 0.3s ease;
    transform-origin: center;
    position: absolute;
    left: 0;
  }

  #topnav .navbar-toggle span:first-child {
    top: 0;
  }

  #topnav .navbar-toggle span:nth-child(2) {
    top: 6px;
  }

  #topnav .navbar-toggle span:last-child {
    top: 12px;
  }

  /* Burger animation to X - Monochrome */
  #topnav .navbar-toggle.open span {
    background-color: #ffffff;
  }

  #topnav .navbar-toggle.open span:first-child {
    top: 6px;
    transform: rotate(45deg);
  }

  #topnav .navbar-toggle.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  #topnav .navbar-toggle.open span:last-child {
    top: 6px;
    transform: rotate(-45deg);
  }

  /* Hide dropdown navigation and buy buttons on mobile */
  #topnav #navigation {
    display: none !important;
  }

  /* Allow admin nav to toggle via jQuery slideToggle */
  #topnav.admin-nav #navigation[style*="block"] {
    display: block !important;
  }

  #topnav .buy-button {
    display: none !important;
  }

  /* Logo positioning - Monochrome */
  #topnav .logo {
    line-height: 56px;
    padding: 0;
    float: none;
  }

  #topnav .logo img {
    height: 22px;
  }

  /* App CTA pinned to the right, mirroring .menu-extras on the left. The
     container is position:relative (above), the logo is centred and out of
     flow-order, so absolute is what keeps all three on one 74px row. */
  #topnav .nav-app-cta {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  /* Burger and CTA are both out of flow, so the logo would centre on the
     whole container and slide straight under the wider one. Reserve the SAME
     gutter on both sides — the logo stays genuinely centred instead of
     optically nudged — and let it scale down on the phones where 375px of
     wordmark no longer fits between them. `.has-app-cta` is set by the header
     only when the CTA renders, so headers without it keep the full width. */
  #topnav.has-app-cta .container {
    padding-left: 124px;
    padding-right: 124px;
  }

  /* Every inline header wraps its logo in a plain <div> and only some of
     them call it `.navbar-header`, so the shrink has to be granted to the
     container's direct div children generally. Safe on mobile: .menu-extras
     and .nav-app-cta are out of flow, .buy-button and #navigation are
     display:none, so the logo wrapper is the only one this reaches. */
  #topnav.has-app-cta .container > div {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  #topnav.has-app-cta .logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 22px;
  }

  /* Prevent body scroll when menu is open */
  body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}

/* ============================================
   MOBILE APP CTA — "Use app" / "Download app"
   Top-right pill in #topnav, balancing the burger
   on the left. Markup: includes/partials/app-cta.php.
   All colours come from the theme tokens, so this
   block is byte-identical in style.css and
   style-monochrome.css (the two are swapped, not
   layered — edit both or dark mode loses it).
   ============================================ */

.nav-app-cta {
  /* Placement is the <992px #topnav block above; on desktop the element is
     display:none !important via Bootstrap's d-lg-none. */
  display: inline-flex;
  align-items: center;
}

.app-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border-radius: 15px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.app-cta-btn:hover,
.app-cta-btn:focus {
  text-decoration: none;
}

.app-cta-btn:active {
  transform: scale(0.96);
}

.app-cta-btn i {
  font-size: 14px;
  line-height: 1;
}

/* "Download app" — the ask, so it carries the fill.
   `:active` and the !important are both load-bearing. A phone has no hover, so
   tapping a link leaves it in a sticky :hover/:active state, and the dark
   theme's blanket `a:not(.btn):hover { color: #ff4d4d !important }` then repaints
   this label red — on the red fill, which is to say invisible. The button looked
   like an empty red pill the moment you pressed it. Nothing here is a .btn, so
   the blanket rule's own escape hatch doesn't cover it; out-important it
   instead. Mirrored byte-for-byte in style-monochrome.css. */
.app-cta-btn--install,
.app-cta-btn--install:hover,
.app-cta-btn--install:focus,
.app-cta-btn--install:active {
  background-color: var(--color-primary);
  color: #fff !important;
}

/* "Use app" — they already have it, so this is a shortcut, not a pitch.
   Outline keeps it quieter than the logo it sits beside. Same pinning as
   above: without it the label drifts to the theme's hover red on tap, which
   on this transparent pill is a colour change nobody asked for. */
.app-cta-btn--open,
.app-cta-btn--open:hover,
.app-cta-btn--open:focus,
.app-cta-btn--open:active {
  background-color: transparent;
  color: var(--color-primary) !important;
}

/* Narrow phones (iPhone SE and down): the centred logo wins, the label goes.
   aria-label on the anchor carries the meaning either way. */
@media (max-width: 359px) {
  .app-cta-btn {
    padding: 0 8px;
  }
  .app-cta-btn__label {
    display: none;
  }
  /* Icon-only pill needs far less room, so the logo gets its width back. */
  #topnav.has-app-cta .container {
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* ============================================
   CAMERA CAPTURE - DARK MODE STYLES
   ============================================ */

/* Camera Capture Modal - Dark Mode */
.camera-capture-area {
  position: relative;
  width: 100%;
  min-height: 300px;
  background: #000000;
  overflow: hidden;
}

.camera-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
}

.camera-placeholder:hover {
  color: rgba(255, 255, 255, 0.9);
}

.camera-placeholder i {
  font-size: 48px;
  margin-bottom: 12px;
}

.camera-placeholder span {
  font-size: 14px;
  font-weight: 500;
}

.camera-webcam {
  position: relative;
  width: 100%;
}

.camera-webcam video {
  width: 100%;
  display: block;
  max-height: 400px;
  object-fit: cover;
}

.camera-controls {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 2;
}

.camera-snap-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.camera-snap-btn:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.5);
}

.camera-snap-btn:active {
  transform: scale(0.95);
}

.camera-switch-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}

.camera-switch-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

.camera-preview {
  position: relative;
  width: 100%;
  text-align: center;
}

.camera-preview img {
  width: 100%;
  display: block;
  max-height: 400px;
  object-fit: contain;
  background: #000000;
}

.camera-retake-btn {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}

.camera-retake-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 576px) {
  .camera-capture-area {
    min-height: 250px;
  }
  .camera-placeholder {
    min-height: 250px;
  }
  .camera-snap-btn {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
}

/* ============================================
   CORPORATE FIND FILTERS - DARK MODE STYLES
   ============================================ */

/* Dark mode support for pills */
.btn-pill-option,
.btn-pill-payment,
.btn-pill-delivery,
.btn-pill-service {
  border-color: #666 !important;
  color: #fff !important;
  background-color: transparent !important;
}

.btn-pill-option i.check-icon,
.btn-pill-option .check-icon,
.btn-pill-payment i.check-icon,
.btn-pill-payment .check-icon,
.btn-pill-delivery i.check-icon,
.btn-pill-delivery .check-icon,
.btn-pill-service i.check-icon,
.btn-pill-service .check-icon {
  display: none !important;
  visibility: hidden !important;
}

.btn-pill-option:hover,
.btn-pill-payment:hover,
.btn-pill-delivery:hover,
.btn-pill-service:hover {
  border-color: #999 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

.btn-pill-option.active,
.btn-pill-payment.active,
.btn-pill-delivery.active,
.btn-pill-service.active {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}

.btn-pill-option.active i.check-icon,
.btn-pill-option.active .check-icon,
.btn-pill-payment.active i.check-icon,
.btn-pill-payment.active .check-icon,
.btn-pill-delivery.active i.check-icon,
.btn-pill-delivery.active .check-icon,
.btn-pill-service.active i.check-icon,
.btn-pill-service.active .check-icon {
  display: inline-block !important;
  visibility: visible !important;
  color: #000 !important;
}

/* Dark mode support for input fields - match login form style */
.filter-form input[type="text"],
.filter-form input[type="tel"],
.filter-form input[type="number"],
.filter-form input[type="date"] {
  box-shadow: none !important;
  background-color: #0a0a0a !important;
  border: 1px solid #808080 !important;
  color: #cccccc !important;
  height: 42px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  transition: all 0.5s ease !important;
}

.filter-form input[type="text"]:focus,
.filter-form input[type="tel"]:focus,
.filter-form input[type="number"]:focus,
.filter-form input[type="date"]:focus {
  border-color: #cc0000 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.filter-form input::placeholder {
  color: #cccccc !important;
}

/* Dark mode saved indicator styling */
.saved-indicator {
  color: #ffffff !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
}

.saved-indicator.show {
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
}

/* Dark mode filter modal scrollbar */
#filters-modal .modal-body::-webkit-scrollbar-track {
  background: #1a1a1a !important;
}

#filters-modal .modal-body::-webkit-scrollbar-thumb {
  background: #fff !important;
}

#filters-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #ccc !important;
}

/* ============================================
   CORPORATE FILTERS MODAL — REDESIGN (DARK)
   Sectioned, card-based layout (#filters-modal)
   Mirrors style.css; this stylesheet is the dark theme.
   ============================================ */

#filters-modal .modal-dialog {
  max-width: 680px;
}

.cf-filters-content {
  border-radius: 18px;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* --- Pinned header: title + jump-nav --- */
.cf-filters-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: #1a1a1a;
  border-bottom: 1px solid #333333;
}

.cf-filters-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px 12px;
}

.cf-filters-heading {
  min-width: 0;
}

.cf-filters-header .modal-title {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
}

.cf-filters-subtitle {
  margin: 3px 0 0;
  font-size: 0.82rem;
  color: #9a9a9a;
}

.cf-filters-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #2e2e2e;
  color: #cccccc;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cf-filters-close:hover {
  background: #ffffff;
  color: #000000;
}

.cf-filters-nav {
  display: flex;
  gap: 8px;
  padding: 4px 22px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.cf-filters-nav::-webkit-scrollbar {
  display: none;
}

.cf-nav-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 13px;
  border: 1px solid #444444;
  border-radius: 9999px;
  background: #202020;
  color: #cccccc;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cf-nav-chip i {
  font-size: 0.95rem;
}

.cf-nav-chip:hover,
.cf-nav-chip:focus {
  border-color: #ffffff;
  background: #2e2e2e;
  color: #ffffff;
  text-decoration: none;
}

.cf-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #ffffff;
  color: #000000;
  font-size: 0.66rem;
  font-weight: 700;
}

/* --- Scrollable body --- */
.cf-filters-body {
  padding: 18px 22px 22px;
  background: #0d0d0d;
  scroll-behavior: smooth;
}

/* --- Section --- */
.cf-section {
  margin-bottom: 26px;
  scroll-margin-top: 8px;
}

.cf-section:last-child {
  margin-bottom: 0;
}

.cf-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.cf-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #f0f0f0;
  color: #111111;
  font-size: 0.95rem;
}

.cf-section-title {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bbbbbb;
}

.cf-section-count {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
}

/* --- Filter card --- */
.cf-card {
  margin-bottom: 10px;
  padding: 15px 16px;
  border: 1px solid #383838;
  border-radius: 14px;
  background: #222222;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cf-card:last-child {
  margin-bottom: 0;
}

.cf-card:hover {
  border-color: #555555;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.cf-card-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 13px;
}

.cf-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  font-size: 1.15rem;
}

.cf-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 1px;
}

.cf-card-title {
  font-family: 'Ubuntu', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  color: #f0f0f0;
}

.cf-card-help {
  margin-top: 1px;
  font-size: 0.78rem;
  color: #9a9a9a;
}

/* --- Pill row --- */
.cf-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#filters-modal .btn-pill-option {
  margin: 0 !important;
  padding: 0.42rem 1rem !important;
  font-size: 0.82rem !important;
  font-weight: 500;
}

/* --- Inputs --- */
#filters-modal .filter-form input[type="text"],
#filters-modal .filter-form input[type="number"],
#filters-modal .filter-form input[type="date"] {
  width: 100% !important;
  height: 46px !important;
  border: 1px solid #555555 !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
}

#filters-modal .filter-form input[type="text"]:focus,
#filters-modal .filter-form input[type="number"]:focus,
#filters-modal .filter-form input[type="date"]:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

/* --- Pinned footer --- */
.cf-filters-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 22px;
  background: #1a1a1a;
  border-top: 1px solid #333333;
}

.cf-filters-foot-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: #9a9a9a;
}

.cf-filters-foot-note i {
  color: #bbbbbb;
  font-size: 0.95rem;
}

.cf-filters-done {
  padding: 0.5rem 2rem;
  border: 1px solid #ffffff;
  border-radius: 9999px;
  background: #ffffff;
  color: #000000;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cf-filters-done:hover,
.cf-filters-done:focus {
  background: #dddddd;
  border-color: #dddddd;
  color: #000000;
}

/* --- Responsive --- */
@media (max-width: 576px) {
  .cf-filters-titlebar { padding: 16px 16px 10px; }
  .cf-filters-nav { padding: 4px 16px 12px; }
  .cf-filters-body { padding: 14px 16px 18px; }
  .cf-filters-footer { padding: 11px 16px; }
  .cf-filters-foot-note { font-size: 0.72rem; }
  .cf-section { margin-bottom: 22px; }
}

/* Flag Find Button - Dark Mode */
.flag-find-btn {
  min-width: 30px;
  flex-shrink: 0;
  cursor: pointer;
  border: none !important;
  background: none !important;
  padding: 0;
  margin-left: 0.5rem;
}

.flag-find-btn:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.flag-find-btn:focus {
  outline: none;
  box-shadow: none;
}

.flag-find-btn i {
  font-size: 0.9rem;
  line-height: 1;
}

/* Flag icon colors - Dark Mode */
.flag-find-btn[data-flagged="0"] i {
  color: #adb5bd;
}

.flag-find-btn[data-flagged="1"] i {
  color: #ffffff !important;
}

.flag-find-btn[data-flagged="0"]:hover i {
  color: #ced4da;
}

.flag-find-btn[data-flagged="1"]:hover i {
  color: #ffffff !important;
}

/* Image Lightbox - Dark Mode */
.image-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  cursor: pointer;
  animation: fadeInOpacity 0.3s ease;
}

.image-lightbox.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-lightbox img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.3);
  cursor: default;
}

.image-lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #ffffff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1060;
  background: rgba(255, 255, 255, 0.2);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.image-lightbox-close:hover {
  color: #cccccc;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

body.lightbox-open {
  overflow: hidden;
}

@keyframes fadeInOpacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Make find images clickable and prevent downloading - Dark Mode */
.find-image img,
.lightbox-trigger,
#lightboxImage {
  cursor: pointer !important;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: auto;
}

/* Heart Bounce Animation */
@keyframes heartBounce {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}


/* Bell Ring Animation */
@keyframes ring {
  0% {
    transform: rotate(0);
  }

  10% {
    transform: rotate(15deg);
  }

  20% {
    transform: rotate(-15deg);
  }

  30% {
    transform: rotate(10deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(5deg);
  }

  60% {
    transform: rotate(-5deg);
  }

  70% {
    transform: rotate(0);
  }
}


/* Custom Validation Overrides for Monochrome */
.invalid-feedback {
  color: #ffffff !important;
}

/* Suppress valid feedback (green check and text) */
.valid-feedback {
  display: none !important;
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #333333 !important;
  background-image: none !important;
}

/* ============================================
   MOBILE MENU STYLES - MONOCHROME DARK MODE
   Complete structural + color styles (style.css not loaded in dark mode)
   ============================================ */

/* Mobile Sidebar Menu Container - Complete Styles */
.mobile-sidebar-menu {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100vh;
  height: 100dvh;
  background-color: #0a0a0a;
  z-index: 1040;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.5);
  border-right: 1px solid #222222;
  display: flex;
  flex-direction: column;
}

.mobile-sidebar-menu.active {
  transform: translateX(280px);
  z-index: 1040;
}

/* Mobile Menu Header - Complete Styles */
.mobile-menu-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #222222;
  background-color: #0a0a0a;
  min-height: 74px;
}

.mobile-menu-header .logo {
  display: flex;
  align-items: center;
  line-height: 1;
}

.mobile-menu-header .logo img {
  height: 22px;
  width: auto;
}

/* In monochrome/dark mode, show white logo, hide dark logo */
.mobile-menu-header .logo .l-dark {
  display: none !important;
}

.mobile-menu-header .logo .l-light {
  display: inline-block !important;
}

/* Mobile Menu Items - Complete Styles */
.mobile-menu-items {
  padding: 8px 0;
  list-style: none;
  margin: 0;
  background-color: #0a0a0a;
}

.mobile-menu-items > li {
  margin: 0;
}

.mobile-menu-items > li > a {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  color: #e0e0e0;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  letter-spacing: 0.01em;
}

.mobile-menu-items > li > a i,
.mobile-menu-items > li > a svg {
  font-size: 22px;
  margin-right: 24px;
  width: 24px;
  text-align: center;
  color: #999999;
  transition: color 0.2s ease;
}

/* Hover state - Brand Color Match */
.mobile-menu-items>li>a:hover {
  background-color: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.mobile-menu-items>li>a:hover i {
  color: #cc0000;
}

/* Active state - Brand Color Match */
.mobile-menu-items>li.active>a {
  background-color: rgba(204, 0, 0, 0.15);
  color: #cc0000;
}

.mobile-menu-items>li.active>a i {
  color: #cc0000;
}

/* Menu Divider - Match style.css dark mode */
.mobile-menu-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 8px 0;
}

/* Menu Section Title */
.mobile-menu-section-title {
  padding: 16px 24px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ==========================================================================
   DESKTOP PROFILE BUTTON - MONOCHROME DARK MODE
   Synced with style.css line 7854
   Circular btn-icon btn-pills btn-outline positioned next to Add a Shop
   ========================================================================== */

/* Profile Button Wrapper */
.profile-btn-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/* Circular Profile Icon Button - Outline Style - Monochrome (white) */
.profile-icon-trigger {
  /* position:relative is load-bearing: the activity badge inside is
     position:absolute and must anchor to this 38px circle. Without it the
     badge anchors to .profile-btn-wrapper, whose box is inflated by the
     header's 68px line-height — the badge floats ~20px above the icon until
     :hover's transform creates a containing block and "fixes" it. */
  position: relative;
  overflow: visible;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background-color: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  transition: all 0.3s ease;
  line-height: 1;
  color: rgba(255, 255, 255, 0.8) !important;
}

.profile-icon-trigger:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

/* The profile trigger uses a uil glyph (uil-user); mirror the notification
   bell's icon treatment so the two header buttons read identically in dark. */
.profile-icon-trigger .uil-user {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease;
}

.profile-icon-trigger:hover .uil-user {
  color: #ffffff;
}

.profile-icon-trigger .fea {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
  color: rgba(255, 255, 255, 0.8) !important;
  stroke: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s ease;
}

.profile-icon-trigger:hover .fea {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Aura hub pill — dark twin of the style.css modifier (both files, always). */
.profile-icon-trigger--aura {
  width: auto !important;
  padding: 0 12px 0 10px !important;
  border-radius: 19px !important;
  gap: 6px;
}

.profile-icon-trigger--aura .aura-pill-count {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  line-height: 1;
  transition: color 0.3s ease;
}

.profile-icon-trigger--aura:hover .aura-pill-count {
  color: #ffffff;
}

.aura-pill-spark {
  font-size: 11px;
}

.aura-pill-bump {
  animation: auraPillBump 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .aura-pill-bump { animation: none; }
}

@keyframes auraPillBump {
  40% { transform: scale(1.12); }
}

/* Profile Submenu Dropdown - Monochrome */
.profile-btn-wrapper .submenu.profile-submenu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 1000;
  padding: 4px 0;
  margin: 0;
  list-style: none;
  min-width: 200px;
  visibility: hidden;
  opacity: 0;
  margin-top: 15px;
  transition: all 0.2s ease;
  border-radius: 8px;
  background-color: #121212;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  border: 1px solid #333333;
}

/* Show dropdown on hover OR keyboard focus (a11y) */
.profile-btn-wrapper:hover .submenu.profile-submenu,
.profile-btn-wrapper:focus-within .submenu.profile-submenu {
  visibility: visible;
  opacity: 1;
  margin-top: 8px;
}

/* Dropdown arrow - Monochrome */
.profile-btn-wrapper .submenu.profile-submenu::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background-color: #121212;
  border-left: 1px solid #333333;
  border-top: 1px solid #333333;
  transform: rotate(45deg);
}

/* Reset li spacing - Monochrome */
.profile-btn-wrapper .submenu.profile-submenu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-btn-wrapper .submenu.profile-submenu li a {
  display: flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: #e0e0e0 !important;
  text-decoration: none;
  transition: all 0.2s ease;
  text-transform: none;
  line-height: 1.4;
  border-radius: 6px;
  margin: 1px 6px;
}

.profile-btn-wrapper .submenu.profile-submenu li a i {
  font-size: 16px;
  margin-right: 8px;
  width: 18px;
  text-align: center;
  color: #999999;
}

.profile-btn-wrapper .submenu.profile-submenu li a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08);
  padding-left: 16px;
  text-decoration: none;
  border-radius: 6px;
  margin: 0 6px;
}

.profile-btn-wrapper .submenu.profile-submenu li a:hover i {
  color: #ffffff;
}

/* Keyboard focus ring inside the account menu - Monochrome */
.profile-btn-wrapper .submenu.profile-submenu li a:focus-visible {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08);
  outline: 2px solid #ffffff;
  outline-offset: -2px;
  text-decoration: none;
}

/* Drag-and-drop active state for file-upload zones (desktop) - Monochrome */
.sntb-drag-active {
  outline: 2px dashed #ffffff !important;
  outline-offset: 4px;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}

/* Deal room "Load earlier messages" control - Monochrome */
.dealroom-history-loader {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}

.profile-btn-wrapper .submenu.profile-submenu li.active a {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08);
}

.profile-btn-wrapper .submenu.profile-submenu li.active a i {
  color: #ffffff;
}

.profile-btn-wrapper .submenu.profile-submenu .dropdown-divider {
  margin: 4px 0;
  border-top: 1px solid #333333;
}

/* Counter Box Cards - Dark Mode (legacy) */
.counter-box {
  background-color: #1a1a1a !important;
  border: 1px solid #333333;
  color: #ffffff;
}

.counter-box h2,
.counter-box h5 {
  color: #ffffff !important;
}

/* ============================================
   DASH STAT CARDS — DARK MODE
   Admin dashboard stat grid
   ============================================ */
/* minmax(0, 1fr) rather than a bare 1fr throughout. `1fr` is minmax(auto, 1fr),
   and `auto` floors every column at its content's min-content width — so a card
   holding "PERSONAL SHOPPERS" refuses to go below the width of the longest word
   plus the icon, the grid grows past the viewport, and the whole admin dashboard
   scrolls sideways on a phone. Mirror of the block in style.css. */
.dash-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.dash-stat-card {
  background: #121212;
  border-radius: var(--radius-lg, 16px);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none !important;
  color: inherit;
}

.dash-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  text-decoration: none !important;
  color: inherit;
}

a.dash-stat-card:hover {
  color: inherit;
}

.dash-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #ffffff;
  flex-shrink: 0;
}

/* Gradient icon backgrounds — same as light mode */
.dash-stat-icon.finds { background: linear-gradient(135deg, #cc0000 0%, #aa0000 100%); }
.dash-stat-icon.bids { background: linear-gradient(135deg, #ff385c 0%, #e31c5f 100%); }
.dash-stat-icon.comments { background: linear-gradient(135deg, #f17425 0%, #d4641e 100%); }
.dash-stat-icon.favourites { background: linear-gradient(135deg, #e31c5f 0%, #c2185b 100%); }
.dash-stat-icon.lists { background: linear-gradient(135deg, #00a699 0%, #008c80 100%); }
.dash-stat-icon.refcodes { background: linear-gradient(135deg, #6c757d 0%, #495057 100%); }
.dash-stat-icon.ps { background: linear-gradient(135deg, #00a699 0%, #00897b 100%); }
.dash-stat-icon.users { background: linear-gradient(135deg, #5a6d90 0%, #475a78 100%); }
/* Mirror of .dash-stat-icon.flags in style.css — keep both in lockstep. */
.dash-stat-icon.flags { background: linear-gradient(135deg, #f0a020 0%, #c77d18 100%); }

.dash-stat-content {
  display: flex;
  flex-direction: column;
  /* Flex items floor at min-content too — without this the column above can
     shrink but the text inside still pushes the card wide. */
  min-width: 0;
}

.dash-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.dash-stat-label {
  font-size: 13px;
  color: #999999;
  margin-top: 2px;
  /* "PERSONAL SHOPPERS" is two long words in a half-viewport card. Let it break
     mid-word rather than force the card — and the grid with it — off-screen. */
  overflow-wrap: anywhere;
}

@media (max-width: 991px) {
  .dash-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .dash-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .dash-stat-card {
    padding: 16px;
  }
  .dash-stat-icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
    border-radius: 12px;
  }
  .dash-stat-value {
    font-size: 18px;
  }
  .dash-stat-label {
    font-size: 12px;
  }
}

/* User Profile Specifics for Admin - Monochrome */
.admin-interface .profile-header {
  background: #121212 !important;
  border: 1px solid #333333;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2);
}

.admin-interface .profile-header p {
  color: #b0b0b0 !important;
}

/* System Status Indicators - Monochrome */


/* Admin Links - Dark Mode */
.admin-interface a:not(.btn):not(.logo):not(.text-foot) {
  color: #ffffff;
  text-decoration: none;
}

.admin-interface a:not(.btn):not(.logo):not(.text-foot):hover {
  color: #cc0000;
  text-decoration: none;
}

/* Footer-bar links (Terms / Privacy) follow the footer's own muted
   colour rather than the global admin link colour, so they read as
   secondary metadata against the dark footer. */
.admin-interface .footer a.text-foot {
  color: #cccccc;
}
.admin-interface .footer a.text-foot:hover {
  color: #ffffff;
}

/* Admin Interface Cards - Dark Mode */
.admin-interface .card {
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid #333333 !important;
  background-color: #1a1a1a !important;
}

.admin-interface .card-header {
  background-color: #252525 !important;
  border-bottom: 1px solid #333333 !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
  color: #ffffff !important;
}

.admin-interface .card-header h5 {
  color: #ffffff !important;
}

.admin-interface .card-body {
  color: #ffffff !important;
  background-color: #1a1a1a !important;
}

.admin-interface .card-body p,
.admin-interface .card-body small,
.admin-interface .card-body label,
.admin-interface .card-body h6 {
  color: #ffffff !important;
}

.admin-interface .text-muted {
  color: #999999 !important;
}

/* Badge Styles - Dark Mode */
.admin-interface .badge-success {
  background-color: #cccccc !important;
  color: #000000 !important;
}

.admin-interface .badge-rights {
  background-color: #333333 !important;
  color: #ffffff !important;
  border: 1px solid #555555;
}

/* Profile Header - Dark Mode */
.admin-interface .profile-header {
  background-color: #0a0a0a !important;
}

.admin-interface .profile-header h2,
.admin-interface .profile-header p {
  color: #ffffff !important;
}

/* Active Sessions List - Dark Mode */
.admin-interface .list-group-item {
  background-color: #0a0a0a !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}

/* Navbar Button Spacing */
.admin-interface .btn {
  margin-left: 0.5rem;
}

/* Form Input Styles - Dark Mode */
.admin-interface .form-control,
.admin-interface .custom-control-input,
.admin-interface .form-check-input {
  background-color: #0a0a0a !important;
  border-color: #808080 !important;
  color: #ffffff !important;
}

.admin-interface .form-control:focus {
  background-color: #0a0a0a !important;
  border-color: #aaaaaa !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(170, 170, 170, 0.25) !important;
}

.admin-interface .form-control::placeholder {
  color: #999999 !important;
}

.admin-interface .custom-control-input:checked~.custom-control-label::before {
  background-color: #808080 !important;
  border-color: #808080 !important;
}

.admin-interface .form-check-input:checked {
  background-color: #808080 !important;
  border-color: #808080 !important;
}

.admin-interface .custom-control-label,
.admin-interface .form-check-label {
  color: #ffffff !important;
}

/* Stats Card - Dark Mode */
.admin-interface .stats-card {
  background-color: #1a1a1a !important;
  border: 1px solid #333333 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  border-radius: 0.5rem !important;
}

/* Chart Container */


/* Empty State */
.empty-state {
  padding: 3rem 2rem;
  text-align: center;
}

.empty-state-icon {
  font-size: 4rem;
  color: #333333;
  margin-bottom: 1rem;
}

.empty-state-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.empty-state-description {
  color: #999999;
}

/* ==========================================================================
   Shop Dashboard Styles - Dark Mode
   ========================================================================== */

.shop-dashboard {
  min-height: 100vh;
  padding-top: 80px;
  padding-bottom: 60px;
}

.shop-hero {
  padding: 40px 0 30px;
}

.shop-welcome-card {
  background: var(--shop-card-bg);
  border-radius: 24px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  padding: 32px 40px;
  margin-bottom: 24px;
}

.shop-welcome-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.shop-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--shop-card-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.shop-welcome-content {
  flex: 1;
  min-width: 0;
}

.shop-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(to right, #e61e4d 0%, #e31c5f 50%, #d70466 100%);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.shop-welcome-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--shop-text-primary);
  margin-bottom: 8px;
}

.shop-welcome-subtitle {
  font-size: 15px;
  color: var(--shop-text-muted);
  margin-bottom: 0;
}

.shop-welcome-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.shop-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--shop-text-muted);
}

.shop-meta-item i {
  font-size: 16px;
}

.shop-welcome-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .shop-welcome-card {
    padding: 24px 20px;
  }

  .shop-welcome-row {
    flex-direction: column;
    text-align: center;
  }

  .shop-welcome-actions {
    flex-direction: column;
    margin-top: 16px;
    width: 100%;
  }

  .shop-welcome-actions .btn {
    width: 100%;
    margin-right: 0 !important;
  }

  .shop-welcome-meta {
    justify-content: center;
  }
}

.shop-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

@media (max-width: 991.98px) {
  .shop-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .shop-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

.shop-stat-card {
  background: var(--shop-card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.shop-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.shop-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.shop-stat-icon.bids {
  background: linear-gradient(135deg, #ff385c 0%, #e31c5f 100%);
  color: #ffffff;
}

.shop-stat-icon.likes {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
  color: #ffffff;
}

.shop-stat-icon.status {
  background: linear-gradient(135deg, #00a699 0%, #008489 100%);
  color: #ffffff;
}

.shop-stat-icon.profile {
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  color: #ffffff;
}

.shop-stat-icon.rating {
  background: linear-gradient(135deg, #f17425 0%, #d4641e 100%);
  color: #ffffff;
}

.shop-stat-icon.reviews {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  color: #ffffff;
}

.shop-stat-icon.response,
.shop-stat-icon.response-time,
.shop-stat-icon.conversion,
.shop-stat-icon.views {
  background: linear-gradient(135deg, #b0b0b0 0%, #cccccc 100%);
  color: #000000;
}

/* Aura tile — a brand emblem: like the Unique badge, the gold stays gold on
   the monochrome theme rather than joining the grayscale ramp. */
.shop-stat-card--aura {
  grid-column: 1 / -1;
}

.shop-stat-icon.aura {
  background: linear-gradient(135deg, #E0A412 0%, #B9830C 100%);
  color: #170909;
}

.skeleton-shimmer {
  display: inline-block;
  min-width: 40px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.shop-stat-info h4 {
  font-size: 24px;
  font-weight: 700;
  color: var(--shop-text-primary);
  margin-bottom: 2px;
}

.shop-stat-info p {
  font-size: 13px;
  color: var(--shop-text-muted);
  margin: 0;
}

.shop-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 991.98px) {
  .shop-content-grid {
    grid-template-columns: 1fr;
  }
}

.shop-main-content {
  min-width: 0;
}

.shop-sidebar {
  min-width: 0;
}

.shop-card {
  background: var(--shop-card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  padding: 28px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.shop-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.shop-card:last-child {
  margin-bottom: 0;
}

.shop-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.shop-card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--shop-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-card-title i {
  font-size: 24px;
  opacity: 0.7;
}

.shop-card p {
  font-size: 15px;
  color: var(--shop-text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.shop-progress-wrapper {
  margin-bottom: 20px;
}

.shop-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.shop-progress-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--shop-text-primary);
}

.shop-progress-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--shop-text-primary);
}

.shop-progress-bar {
  height: 8px;
  background: var(--shop-progress-bg);
  border-radius: 4px;
  overflow: hidden;
}

.shop-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.shop-progress-fill.low {
  background: linear-gradient(to right, #ff6b6b, #ee5a5a);
}

.shop-progress-fill.medium {
  background: linear-gradient(to right, #ffc107, #ffca2c);
}

.shop-progress-fill.high {
  background: linear-gradient(to right, #00a699, #008489);
}

.shop-progress-fill.complete {
  background: linear-gradient(to right, #e61e4d, #d70466);
}


.shop-btn-sm {
  padding: 10px 16px;
  font-size: 14px;
}

/* Find Card - Styled like findstream */


/* Find Card Actions */


/* Your Bids Section */



/* ============================================================
   Sinatabu Pro — owner dashboard treatment (shop.php + psdash.php)
   ============================================================ */
.pro-upsell {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  background: linear-gradient(120deg, #4a0606 0%, #8f0c0c 55%, #cc0000 100%);
  border-radius: 16px; padding: 22px 26px; margin-bottom: 24px;
  box-shadow: 0 8px 28px rgba(140, 12, 12, 0.30);
}
.pro-upsell-glow {
  position: absolute; top: -60%; right: -10%; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(245, 179, 1, 0.35) 0%, rgba(245, 179, 1, 0) 70%);
  pointer-events: none;
}
.pro-upsell-body { position: relative; z-index: 1; flex: 1 1 320px; min-width: 260px; }
.pro-upsell-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffd86e; margin-bottom: 8px; }
.pro-upsell-kicker i { font-size: 15px; }
.pro-upsell-title { color: #fff; font-size: 20px; font-weight: 700; margin: 0 0 6px; line-height: 1.25; }
.pro-upsell-sub { color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.55; margin: 0; max-width: 640px; }
.pro-upsell-cta { position: relative; z-index: 1; flex-shrink: 0; }
.pro-upsell-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #ffd86e 0%, #f5b301 100%);
  color: #3a2410 !important; font-weight: 700; font-size: 15px;
  border: none; border-radius: 12px; padding: 13px 22px;
  box-shadow: 0 6px 18px rgba(245, 179, 1, 0.4);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pro-upsell-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(245,179,1,.5); text-decoration: none; }
.pro-upsell-price { font-weight: 600; opacity: .8; font-size: 13px; }
.pro-chip {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  background: linear-gradient(135deg, #ffd86e 0%, #f5b301 100%);
  color: #3a2410; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(245,179,1,.35);
}
.pro-chip i { font-size: 13px; }
.shop-avatar--pro { box-shadow: 0 0 0 3px #f5b301, 0 0 0 6px rgba(245,179,1,.25); }
.shop-hero--pro .shop-welcome-card, .ps-profile-card--pro { position: relative; }
.shop-hero--pro .shop-welcome-card::before,
.ps-profile-card--pro::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #ffd86e, #f5b301, #e0850c);
  border-radius: 16px 16px 0 0;
}
.shop-insights {
  background: var(--shop-card-bg, #fff);
  border: 1px solid rgba(245,179,1,.35);
  border-radius: 16px; padding: 22px 24px; margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.shop-insights-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.shop-insights-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; margin: 0; color: var(--shop-text-primary, #1a1a2e); }
.shop-insights-title i { color: #e0850c; }
.shop-insights-tag { font-size: 12px; font-weight: 600; color: #e0850c; background: rgba(245,179,1,.12); padding: 4px 12px; border-radius: 999px; }
.shop-insights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.shop-insight-tile { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.shop-insight-label { font-size: 12.5px; font-weight: 600; color: var(--shop-text-secondary, #6b6b83); }
.shop-insight-label small { opacity: .7; font-weight: 500; }
.shop-insight-value-row { display: flex; align-items: baseline; gap: 8px; }
.shop-insight-value { font-size: 26px; font-weight: 800; line-height: 1; color: var(--shop-text-primary, #1a1a2e); }
.shop-insight-trend { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.shop-insight-trend.up { color: #0a7d4f; background: rgba(10,125,79,.1); }
.shop-insight-trend.down { color: #c0392b; background: rgba(192,57,43,.1); }
.shop-insight-trend i { font-size: 13px; }
.shop-insight-sub { font-size: 12px; color: var(--shop-text-secondary, #8a8a9e); }
@media (max-width: 900px) { .shop-insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .shop-insights-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pro-upsell { padding: 20px; }
  .pro-upsell-cta, .pro-upsell-btn { width: 100%; justify-content: center; }
}
.shop-subscription-card--pro { background: linear-gradient(135deg, #7a0a0a 0%, #cc0000 100%); }
.shop-subscription-card--pro h3 { display: flex; align-items: center; }
.pro-perks-list { list-style: none; margin: 14px 0 0; padding: 0; }
.pro-perks-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255,255,255,.92); padding: 5px 0; }
.pro-perks-list li i { color: #ffd86e; font-size: 16px; flex-shrink: 0; }
.pro-manage-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 600; color: #ffd86e; }
.pro-manage-link:hover { color: #fff; text-decoration: none; }

/* Sinatabu Pro — public studio treatment (studio.php) */
.studio-header--pro { position: relative; }
.studio-header--pro::before {
  content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #ffd86e, #f5b301, #e0850c);
  border-radius: 999px;
}
.studio-title .pro-chip { font-size: 12.5px; vertical-align: middle; }
.studio-owner-card .pro-chip { font-size: 11px; padding: 2px 8px; vertical-align: middle; }
.studio-header-avatar img.shop-avatar--pro,
.studio-owner-avatar img.shop-avatar--pro { border-color: #f5b301; }
.studio-trust-item--pro { font-weight: 600; }
.studio-trust-item--pro, .studio-trust-item--pro i { color: #f5c451; }
.studio-owner-card--pro { position: relative; overflow: hidden; }
.studio-owner-card--pro::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #ffd86e, #f5b301, #e0850c);
}

.shop-subscription-card {
  background: linear-gradient(135deg, #3c4858 0%, #2b333f 100%);
  border-radius: 16px;
  padding: 28px;
  color: #ffffff;
  margin-bottom: 24px;
}

.shop-subscription-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.shop-subscription-card p {
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.6;
  margin: 0;
}

.shop-subscription-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 16px;
}

.shop-alert {
  background: var(--shop-card-bg);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 4px solid #ffc107;
}

.shop-alert-icon {
  font-size: 24px;
  color: #ffc107;
}

.shop-alert-content {
  flex: 1;
}

.shop-alert-content p {
  margin: 0;
  font-size: 14px;
  color: var(--shop-text-primary);
}

.shop-alert-content a {
  color: var(--shop-link-color);
  font-weight: 600;
}

.shop-tips-card {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 16px;
  padding: 28px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.shop-tips-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-tips-card ul {
  color: rgba(255, 255, 255, 0.95);
  padding-left: 20px;
  margin: 0;
  line-height: 2;
  font-size: 14px;
}



/* ==========================================================================
   Unified Card Component - MONOCHROME DARK MODE
   Only color overrides - structure inherited from style.css
   ========================================================================== */

/* CSS Custom Properties for Monochrome Cards */
:root {
  --shop-card-bg: #1a1a1a;
  --shop-text-primary: #ffffff;
  --shop-text-muted: #a0a0a0;
  --shop-icon-bg: #2a2a2a;
  --shop-hover-bg: #3a3a3a;
  --shop-border-color: #333333;
  --shop-progress-bg: #333333;
  --shop-preview-bg: #222222;
  --shop-link-color: #ff6b6b;
}

/* uCard Grid - Responsive layout */
.ucard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 991.98px) {
  .ucard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .ucard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Base Card - Structure + Color overrides */
.ucard {
  /* Structure inherited from style.css */
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;

  /* Color overrides */
  background: var(--shop-card-bg, #1a1a1a);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.ucard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(255, 255, 255, 0.08), 0 8px 16px rgba(0, 0, 0, 0.6);
}

/* Image Container - Structure missing in monochrome */
.ucard-image {
  position: relative;
  width: 100%;
  padding-top: 75%;
  /* 4:3 aspect ratio */
  overflow: hidden;
}

.ucard-image>a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ucard-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ucard:hover .ucard-image img {
  transform: scale(1.05);
}

/* Type Badge - Color overrides */
.ucard-type-badge {
  /* Structure */
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ucard-type-badge.shop {
  background: rgba(255, 255, 255, 0.95);
  color: #000000;
}

.ucard-type-badge.ps {
  background: rgba(180, 180, 180, 0.95);
  color: #000000;
}

/* Like/Heart Button - Color overrides */
.ucard-like-btn {
  /* Structure */
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;

  /* Colors */
  background: rgba(30, 30, 30, 0.9);
}

.ucard-like-btn:hover {
  background: #333333;
}

.ucard-like-btn i {
  color: #e0e0e0;
}

.ucard-like-btn.liked i {
  color: #ffffff;
}

/* Sinatabu Verified badge — red scalloped seal + white check.
   A brand emblem like the Unique coin: the red stays red even on the
   monochrome theme. These rules only place it (bottom-right on cards,
   inline on the studio header, avatar corner on the owner card). */
.sinatabu-verified-badge {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

.ucard-verified {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  line-height: 0;
}

.studio-verified-inline {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 0;
}

/* Sinatabu Unique badge — gold coin + white star.
   A brand emblem: the gold stays gold even on the monochrome theme. These
   rules only place it (bottom-left on cards, inline on the studio header). */
.sinatabu-unique-badge {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

.ucard-unique {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 10;
  line-height: 0;
}

.studio-unique-badge {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 0;
}

/* Card Body - Color overrides */
.ucard-body {
  /* Structure */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;

  /* Colors */
  background: var(--shop-card-bg, #1a1a1a);
}

/* Header Row */
.ucard-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Name - Color overrides */
.ucard-name {
  /* Structure */
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;

  /* Colors */
  color: var(--shop-text-primary, #ffffff);
}

.ucard-name a {
  /* Structure */
  text-decoration: none;

  /* Colors */
  color: var(--shop-text-primary, #ffffff);
}

.ucard-name a:hover {
  text-decoration: underline;
  color: #e0e0e0;
}

.ucard-flag {
  flex-shrink: 0;
}

/* Category Tag - Color overrides */
.ucard-category {
  /* Structure */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 12px;
  max-width: fit-content;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Colors */
  color: var(--shop-text-muted, #a0a0a0);
  background: var(--shop-icon-bg, #2a2a2a);
}

.ucard-category i {
  font-size: 12px;
  color: var(--shop-text-muted, #a0a0a0);
}

/* Contact Icons - Color overrides */

/* ── Offer reel on entity cards ───────────────────────────────────────
   The photos a shop/PS attached to its bid, shown inside its card on the
   find owner's "Deal-ready picks" list. Owner-gated server-side — see
   CardHelper::renderOfferReel. Small and horizontal on purpose: this is a
   glance that answers "is this even the right thing", not a gallery. */
.ucard-offer-reel {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 8px 0 2px;
  padding-bottom: 2px;
}
.ucard-offer-reel::-webkit-scrollbar { display: none; }
.ucard-offer-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
}

.ucard-contacts {
  /* Structure */
  display: flex;
  align-items: center;
  padding-top: 10px;
  margin-top: 4px;
  margin-left: -6px;
  flex-wrap: wrap;
  border-top: 1px solid var(--shop-border-color, #dddddd);

  /* Colors */
  border-top-color: var(--shop-border-color, #333333);
}

.ucard-contact-icon {
  /* Structure */
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s ease;

  /* Colors */
  background: var(--shop-icon-bg, #2a2a2a);
}

.ucard-contact-icon:hover {
  transform: translateY(-2px);
  background: var(--shop-hover-bg, #3a3a3a);
  text-decoration: none !important;
}

.ucard-contact-icon i {
  font-size: 18px;
  color: #e0e0e0;
}

/* CTA Button - Color overrides */
.ucard-cta {
  margin-top: 8px;
}

.ucard-cta-btn {
  /* Structure */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--shop-border-color, #dddddd);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;

  /* Colors */
  background: var(--shop-icon-bg, #2a2a2a);
  color: var(--shop-text-primary, #ffffff);
  border-color: #444444;
}

.ucard-cta-btn:hover {
  background: var(--shop-hover-bg, #3a3a3a);
  border-color: #666666;
  text-decoration: none;
  color: var(--shop-text-primary, #ffffff);
}

.ucard-cta-btn i {
  color: #e0e0e0;
}

/* ==========================================================================
   YOUTUBE-STYLE MOBILE SIDEBAR MENU - MONOCHROME DARK MODE
   Pure black, white, and gray color scheme
   ========================================================================== */

/* Mobile Menu Overlay - Complete Styles */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* CTA Button in mobile menu - Monochrome */


/* Badge styling in mobile menu - Monochrome */
.mobile-menu-items .badge {
  margin-left: auto;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  background-color: #ffffff;
  color: #000000;
}

/* Smooth scrollbar for mobile menu - Monochrome */
.mobile-sidebar-menu::-webkit-scrollbar {
  width: 4px;
}

.mobile-sidebar-menu::-webkit-scrollbar-track {
  background: #0a0a0a;
}

.mobile-sidebar-menu::-webkit-scrollbar-thumb {
  background-color: #333333;
  border-radius: 4px;
}

.mobile-sidebar-menu::-webkit-scrollbar-thumb:hover {
  background-color: #444444;
}

/* ==========================================================================
  Commented out - navbar toggle open state styles

  #topnav .navbar-toggle.open span {
    background-color: #333;
  }

  #topnav .navbar-toggle.open span:first-child {
    top: 6px;
    transform: rotate(45deg);
  }

  #topnav .navbar-toggle.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  #topnav .navbar-toggle.open span:last-child {
    top: 6px;
    transform: rotate(-45deg);
  }
========================================================================== */


/* ==========================================================================
   DESKTOP PROFILE BUTTON - MONOCHROME DARK MODE
   Circular btn-icon btn-pills btn-outline positioned next to Add a Shop
   ========================================================================== */


/* ==========================================================================
   NAV-STICKY ADJUSTMENTS - MONOCHROME
   ========================================================================== */

#topnav.nav-sticky {
  background-color: #0a0a0a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.05);
}

#topnav.scroll {
  background-color: #0a0a0a;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}


/* Profile Dropdown Menu - Monochrome */
.profile-dropdown-menu {
  background-color: #121212;
  border: 1px solid #333333;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.profile-dropdown-menu::before {
  background-color: #121212;
  border-left-color: #333333;
  border-top-color: #333333;
}

.profile-dropdown-menu li a {
  color: #e0e0e0 !important;
}

.profile-dropdown-menu li a i {
  color: #999999;
}

.profile-dropdown-menu li a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08);
}

.profile-dropdown-menu li a:hover i {
  color: #ffffff;
}

.profile-dropdown-menu .dropdown-divider {
  border-top-color: #333333;
}

/* ==========================================================================
   LOGIN OUTLINE BUTTON - MONOCHROME DARK MODE
   ========================================================================== */

#topnav .buy-button .btn-outline-primary {
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff !important;
  padding: 5px 14px;
  font-size: 15px;
  text-decoration: none !important;
}

#topnav .buy-button .btn-outline-primary:hover {
  background-color: #ffffff;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
  text-decoration: none !important;
}

#topnav.nav-sticky .buy-button .btn-outline-primary {
  border-color: #ffffff;
  color: #ffffff !important;
}

#topnav.nav-sticky .buy-button .btn-outline-primary:hover {
  background-color: #ffffff;
  color: #000000 !important;
}

/* ==========================================================================
   MOBILE MENU CTA WRAPPER - MONOCHROME DARK MODE
   ========================================================================== */

/* Mobile CTA Wrapper - Scoped to sidebar only */
.mobile-sidebar-menu .mobile-menu-cta-wrapper {
  padding: 16px 24px;
  background-color: #1a1a1a;
  border-top: 1px solid #222222;
  margin-top: auto;
}

.mobile-sidebar-menu .mobile-menu-cta-wrapper .btn {
  display: block;
  width: 100%;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50px;
  margin-bottom: 10px;
  text-align: center;
}

.mobile-sidebar-menu .mobile-menu-cta-wrapper .btn:last-child {
  margin-bottom: 0;
}

.mobile-sidebar-menu .mobile-menu-cta-wrapper .btn-primary {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}

.mobile-sidebar-menu .mobile-menu-cta-wrapper .btn-primary:hover {
  background-color: #e0e0e0 !important;
  border-color: #e0e0e0 !important;
  color: #000000 !important;
}

.mobile-sidebar-menu .mobile-menu-cta-wrapper .btn-outline-primary {
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff !important;
  text-decoration: none !important;
}

.mobile-sidebar-menu .mobile-menu-cta-wrapper .btn-outline-primary:hover {
  background-color: #ffffff;
  color: #000000 !important;
  text-decoration: none !important;
}

/* ==========================================================================
   VISUAL IMPROVEMENTS - JAN 2026
   Glassmorphism, Micro-interactions, Typography, Gradients, Loading
   ========================================================================== */

/* 1. Enhanced Glassmorphism */
/* Adding subtle border and increasing blur for a more premium look */
.glass-effect,
.dropdown-menu,
#topnav.nav-sticky {
  background: rgba(30, 30, 30, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.dropdown-menu .dropdown-item {
  color: var(--color-text);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  color: var(--color-text);
  background-color: rgba(255, 255, 255, 0.06);
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  color: #ffffff;
  background-color: var(--color-primary);
}
.dropdown-menu .dropdown-item.text-danger {
  color: var(--color-danger);
}
.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:focus {
  color: var(--color-danger);
  background-color: rgba(255, 107, 107, 0.10);
}
.dropdown-menu .dropdown-divider {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.ucard-type-badge,
.ucard-like-btn,
.shop-subscription-badge {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  /* Darker shadow for dark mode */
}

/* 2. Micro-interactions: Tactile Button Press */
/* Scale down slightly on click to mimic physical button press */
.btn:active,
.ucard-like-btn:active,
.dash-tile:active,
.ucard-contact-icon:active,
.ucard-cta-btn:active,
.mobile-sidebar-menu .mobile-menu-cta-wrapper .btn:active {
  transform: scale(0.96) !important;
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Modern Typography */
/* Tighter letter spacing for headings - creates a more branded/premium feel */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4 {
  letter-spacing: -0.025em;
}

h1,
.h1 {
  letter-spacing: -0.03em;
}

/* 5. Elevation — dark-mode cards use layered neutral shadows like light
   mode, but lean additionally on the border token (--color-border) so
   cards still feel raised even when the shadow is barely visible on
   pure-dark backgrounds. */
.shadow-colored {
  box-shadow: var(--shadow-md) !important;
  transition: box-shadow 0.25s ease;
}
.btn-primary.shadow-colored:hover,
.shadow-colored:hover {
  box-shadow: var(--shadow-lg) !important;
}


/* Section-title card — dark-theme mirror of style.css. Same tighter
   padding (14px / 20px) and flex-row variant, swapped to dark surface
   tokens. See light-mode block for usage docs. */
.section-title-card {
  padding: 0.875rem 1.25rem;
  background: var(--color-bg-card, #161616);
  border-radius: 0.25rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border, #222);
  text-align: left;
}
.section-title-card > h3,
.section-title-card > h4,
.section-title-card > h5,
.section-title-card > h6 {
  margin: 0;
  line-height: 1.3;
  color: var(--color-text);
}
.section-title-card--row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
/* Text block must be allowed to shrink past its intrinsic min-content size
   (default `min-width: auto` keeps long words from wrapping, which pushes
   the trailing button on top of the description on narrow screens). */
.section-title-card--row > div {
  flex: 1 1 auto;
  min-width: 0;
}
.section-title-card--row > .btn,
.section-title-card--row > button {
  flex-shrink: 0;
}
.section-title-card--row > div h3,
.section-title-card--row > div h4,
.section-title-card--row > div h5,
.section-title-card--row > div h6 {
  margin: 0;
  line-height: 1.25;
  color: var(--color-text);
}
.section-title-card > small,
.section-title-card--row > div small {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.4;
  overflow-wrap: break-word;
}
@media (max-width: 575px) {
  .section-title-card { padding: 0.75rem 1rem; }
  .section-title-card--row { gap: 0.5rem; }
}

/* 6. Skeleton Loading */
.skeleton {
  background: #1a1a1a;
  background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Enhancing Card Hover Shadows */


/* ========================================================================
   Admin Interface Styles (Dark Mode)
   ======================================================================== */

.admin-interface {
  background-color: #000000 !important;
}

.admin-interface .card {
  background-color: #121212 !important;
  border: 1px solid #2a2a2a !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  border-radius: 0.5rem !important;
  transition: all 0.3s ease;
}

.admin-interface .card:hover {
  border-color: #444444 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
  transform: translateY(-2px);
}

.admin-interface .card-header {
  background-color: #1a1a1a !important;
  border-bottom: 1px solid #2a2a2a !important;
  padding: 1.25rem 1.5rem;
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

.admin-interface .card-header h5 {
  font-weight: 600;
  color: #ffffff !important;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.admin-interface .card-body {
  background-color: #121212 !important;
  padding: 1.5rem;
  color: #e0e0e0;
}

.admin-interface .btn {
  border-radius: 0.375rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease-in-out;
}

.admin-interface .btn-primary {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1) !important;
}

.admin-interface .btn-primary:hover {
  background: #e0e0e0 !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 6px 15px rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px);
}

.admin-interface .btn-outline-primary {
  border-color: #ffffff !important;
  color: #ffffff !important;
  background: transparent !important;
}

.admin-interface .btn-outline-primary:hover {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.admin-interface .form-control {
  background-color: #1a1a1a !important;
  border-color: #333333 !important;
  border-radius: 0.375rem;
  padding: 0.6rem 1rem;
  color: #ffffff !important;
  font-size: 0.9375rem;
}

.admin-interface .form-control:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

/* Admin's `.form-control { padding: 0.6rem 1rem }` conflicts with
   Bootstrap's `select.form-control { height: calc(1.5em + .75rem
   + 2px) }` — Bootstrap's height assumes ~6px top/bottom padding, but
   admin uses ~9.6px, leaving only ~17px for a 22.5px line so the
   selected option text gets clipped. Letting selects size to content
   (with a sensible `min-height`) keeps the visual rhythm of the bigger
   inputs without truncating their labels. */
.admin-interface select.form-control,
.admin-interface select.form-select,
.admin-interface .custom-select {
  height: auto;
  min-height: calc(1.5em + 1.2rem + 2px);
  line-height: 1.5;
}

.admin-interface .badge {
  padding: 0.5em 0.8em;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 0.25rem;
}

.admin-interface .text-muted {
  color: #888888 !important;
}

/* Active Session Items */
.admin-interface .list-group-item {
  background-color: #1a1a1a !important;
  border-color: #333333 !important;
  color: #ffffff;
}

/* Admin Login Page Specifics */
body.admin-login-page {
  background-color: #000000 !important;
}

body.admin-login-page>section {
  flex: 1;
  width: 100%;
  /* The login card is centred inside this section, so the section's height
     IS the centring reference. On mobile Safari/Chrome `100vh` is the
     toolbar-LESS viewport, taller than what is actually on screen, which
     pushed the card down behind the address bar — you had to scroll up to
     see it centred. `svh` is the with-toolbars height, i.e. the visible one.
     The `vh` line stays first as the fallback for browsers without `svh`. */
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.admin-login-card {
  background-color: #121212 !important;
  border: 1px solid #333333 !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.admin-login-left {
  background: #0a0a0a !important;
  color: white;
  border-right: 1px solid #333333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
}

.admin-login-card .card-body {
  background-color: #121212 !important;
}

.admin-login-card .card-body h5,
.admin-login-card .card-body label,
.admin-login-card .card-body .modal-title {
  color: #e0e0e0 !important;
}

.admin-login-card .card-body .text-muted,
.admin-login-card .card-body small {
  color: #999999 !important;
}

.admin-login-card .form-control {
  background-color: #1a1a1a !important;
  border-color: #333333 !important;
  color: #e0e0e0 !important;
}

.admin-login-card .form-control::placeholder {
  color: #808080 !important;
}

.admin-login-card .form-control:focus {
  border-color: #ffffff !important;
  background-color: #1a1a1a !important;
}

.admin-login-page .modal-content .form-control {
  background-color: #1a1a1a !important;
  border-color: #333333 !important;
  color: #e0e0e0 !important;
}

.admin-login-page .modal-content .form-control::placeholder {
  color: #808080 !important;
}

.admin-login-page .modal-content .form-control:focus {
  border-color: #ffffff !important;
}

.admin-login-page .modal-content label,
.admin-login-page .modal-content .modal-title {
  color: #e0e0e0 !important;
}

.admin-login-page .modal-content .text-muted,
.admin-login-page .modal-content small {
  color: #999999 !important;
}


/* User Profile Specifics for Admin */
.admin-interface .profile-header {
  background: #121212 !important;
  border: 1px solid #333333 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.admin-interface .profile-header h2,
.admin-interface .profile-header p {
  color: #ffffff !important;
}

/* =============================================
   Location Autocomplete Styles (Dark Mode) - Google Search Style
   ============================================= */

/* Location Search Modal - Dark theme */
.location-search-modal .modal-content {
  background: #1a1a1a;
  border: 1px solid #333333;
  overflow: visible;
}

/* Search container - add padding */
.location-search-container {
  padding: 16px 24px 24px;
}

/* Header padding - space between icon/text and search bar */
.location-search-modal .modal-body > .pt-4.px-4 {
  padding: 24px 24px 16px !important;
}

.location-search-modal .modal-body > .pt-4.px-4 h6 {
  margin-bottom: 0 !important;
}

/* Hide duplicate error messages and clear button */
.invalid-selection-feedback,
.location-clear-btn {
  display: none !important;
}

.location-suggestions-container {
  background: #1a1a1a;
  border-radius: 0 0 24px 24px;
}

/* Custom scrollbar for suggestions - dark theme */
.location-suggestions-container::-webkit-scrollbar {
  width: 8px;
}

.location-suggestions-container::-webkit-scrollbar-track {
  background: transparent;
}

.location-suggestions-container::-webkit-scrollbar-thumb {
  background: #3d3d4a;
  border-radius: 4px;
}

.location-suggestions-container::-webkit-scrollbar-thumb:hover {
  background: #4d4d5a;
}

/* Search box - dark theme */
.location-search-box {
  background: #2d2d3a;
  border: 1px solid #3d3d4a;
}

.location-search-box:hover {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  border-color: #4d4d5a;
}

.location-search-box:focus-within {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  border-color: #4d4d5a;
  background: #2d2d3a;
}

.location-search-icon {
  color: #6c757d;
}

.location-search-box input {
  color: #e0e0e0;
}

.location-search-box input::placeholder {
  color: #6c757d;
}

.location-search-clear {
  color: #6c757d;
}

.location-search-clear:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

/* Suggestions container - dark theme */
.location-suggestions-container.show::before {
  background: #3d3d4a;
}

.location-suggestion-item:hover,
.location-suggestion-item.active {
  background-color: #2d2d3a;
}

.location-suggestion-icon {
  color: #6c757d;
}

.location-suggestion-main {
  color: #e0e0e0;
}

.location-suggestion-secondary {
  color: #9e9e9e;
}

.location-suggestions-loading {
  color: #9e9e9e;
}

.location-suggestions-loading .spinner-border {
  color: #ff4d4d;
}

.location-suggestions-empty {
  color: #9e9e9e;
}

.location-suggestions-empty i {
  color: #4d4d5a;
}

/* Modal footer - dark theme */
.location-search-modal .modal-footer {
  border-top: 1px solid #333333;
  background: #1a1a1a;
  padding: 16px 24px;
  border-radius: 0 0 24px 24px;
}

.location-search-modal .btn-location-cancel {
  background: transparent;
  border: 1px solid #3d3d4a;
  color: #cccccc;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 20px;
  border-radius: 30px;
  transition: all 0.2s ease;
}

.location-search-modal .btn-location-cancel:hover {
  background-color: #2d2d3a;
  border-color: #4d4d5a;
}

.location-search-modal .btn-location-save {
  background: #808080;
  border: 1px solid #808080;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 24px;
  border-radius: 30px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.location-search-modal .btn-location-save:hover {
  background: #6a6a6a;
  border-color: #6a6a6a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.location-search-modal .btn-location-save:disabled {
  background: #2d2d3a;
  border-color: #2d2d3a;
  color: #6c757d;
  box-shadow: none;
}

/* ============================================
   LOCATION AUTOCOMPLETE - MONOCHROME DARK MODE
   Synced with style.css line 8380+
   ============================================ */

/* Search input wrapper - Dark rounded pill */
.location-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 24px;
  padding: 0 16px;
  transition: all 0.2s ease;
  height: 48px;
}

.location-search-box:hover {
  box-shadow: 0 1px 6px rgba(255, 255, 255, 0.1);
  border-color: #444444;
}

.location-search-box:focus-within {
  box-shadow: 0 1px 6px rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  background: #121212;
}

/* Search icon */
.location-search-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #999999;
  margin-right: 12px;
}

/* The input field itself */
.location-search-box input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  color: #ffffff;
  padding: 0;
  outline: none;
  height: 100%;
}

.location-search-box input::placeholder {
  color: #666666;
}

/* Clear button - X icon */
.location-search-clear {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #999999;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}

.location-search-clear:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.location-search-box.has-value .location-search-clear {
  display: flex;
}

/* Suggestions list - contained within modal with proper scrolling */
.location-suggestions-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background: #121212;
  border-radius: 0 0 24px 24px;
  border: 1px solid #333333;
  border-top: none;
  margin-top: -1px;
}

.location-suggestions-container.show {
  max-height: 300px;
  padding: 8px 0 16px;
  overflow-y: auto;
}

/* Divider line between search box and suggestions */
.location-suggestions-container.show::before {
  content: '';
  display: block;
  height: 1px;
  background: #333333;
  margin: 16px 24px 8px;
}

/* Individual suggestion items */
.location-suggestion-item {
  display: flex;
  align-items: flex-start;
  padding: 10px 24px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.location-suggestion-item:hover,
.location-suggestion-item.active {
  background-color: #1f1f1f;
}

/* Location pin icon for each suggestion */
.location-suggestion-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #999999;
  margin-right: 14px;
  margin-top: 2px;
}

/* Suggestion text container */
.location-suggestion-text {
  flex: 1;
  min-width: 0;
}

.location-suggestion-main {
  font-size: 14px;
  font-weight: 500;
  color: #e0e0e0;
  line-height: 1.4;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-suggestion-secondary {
  font-size: 12px;
  color: #999999;
  line-height: 1.4;
  margin-top: 2px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Loading state */
.location-suggestions-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #999999;
}

.location-suggestions-loading .spinner-border {
  width: 20px;
  height: 20px;
  border-width: 2px;
  color: #ffffff;
}

/* Empty state */
.location-suggestions-empty {
  padding: 24px;
  text-align: center;
  color: #999999;
  font-size: 14px;
}

.location-suggestions-empty i {
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
  color: #444444;
}

/* Selected state - dark theme */
.location-search-box.selected {
  border-color: #28a745;
  background: rgba(40, 167, 69, 0.15);
}

.location-search-box.selected .location-search-icon {
  color: #28a745;
}

/* Error state - dark theme */
.location-search-box.error {
  border-color: #dc3545;
  background: rgba(220, 53, 69, 0.15);
}

.location-search-error {
  color: #dc3545;
}

/* Keyboard hint - dark theme */


/* Legacy wrapper support */
.location-autocomplete-wrapper {
  position: relative;
  width: 100%;
}

.location-autocomplete-wrapper .form-control {
  padding-right: 35px;
}

.location-autocomplete-wrapper .location-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  display: none;
}

.location-autocomplete-wrapper .location-clear-btn:hover {
  color: #e0e0e0;
}

.location-autocomplete-wrapper.has-value .location-clear-btn {
  display: block;
}

.location-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #1e1e2d;
  border: 1px solid #2d2d3a;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1060;
  display: none;
}

.location-suggestions.show {
  display: block;
}

/* Validation state for required selection */
.location-autocomplete-wrapper .form-control.is-invalid-selection {
  border-color: #dc3545;
}

.location-autocomplete-wrapper .invalid-selection-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}

.location-autocomplete-wrapper.selection-required .invalid-selection-feedback {
  display: block;
}

/* Link Hover Override - Monochrome */
a:not(.btn):hover {
  color: #ff4d4d !important;
}

/* ============================================
   ONBOARDING MODAL - MONOCHROME
   ============================================ */
.onboarding-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.onboarding-content {
  background: #1a1a1a;
  width: 90%;
  max-width: 450px;
  padding: 2rem;
  border-radius: 20px;
  position: relative;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid #333;
  transform: translateY(20px);
  color: #ffffff;
}

.onboarding-content.animate-up {
  animation: slideUpFade 0.5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideUpFade {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.close-onboarding {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6c757d;
  cursor: pointer;
  z-index: 10;
  transition: color 0.3s;
}

.close-onboarding:hover {
  color: #ffffff;
}

.step-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: inline-block;
  animation: bounce 2s infinite;
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

.onboarding-step {
  display: none;
}

.onboarding-step.active {
  display: block;
  animation: fadeInScale 0.4s;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.onboarding-step h3 {
  font-family: 'Ubuntu', sans-serif;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.onboarding-step p {
  color: #b0b0b0;
  font-size: 1.05rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.step-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 1.5rem;
}

.step-indicators {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.step-indicators .indicator {
  width: 8px;
  height: 8px;
  background: #333;
  border-radius: 50%;
  transition: all 0.3s;
}

.step-indicators .indicator.active {
  background: #ffffff;
  transform: scale(1.2);
}

/* ─── Did You Know Modal (Dark Theme) ────────────────────────────── */

.dyk-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.dyk-content {
  position: relative;
  max-width: 400px;
  width: 90%;
  padding: 24px;
  text-align: center;
  background: #121212 !important;
  border: 1px solid #333333;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.dyk-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  color: #999999;
  transition: color 0.2s;
}

.dyk-close:hover {
  color: #ffffff;
}

.dyk-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.dyk-label {
  display: block;
  font-family: 'Ubuntu', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e0e0e0;
  margin-bottom: 0.5rem;
}

.dyk-title {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.dyk-body {
  font-size: 0.95rem;
  color: #999999;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.dyk-dismiss {
  border-radius: 9999px;
  padding: 6px 24px;
  font-weight: 600;
}

.dyk-content.animate-up {
  animation: dykSlideUp 0.35s ease-out forwards;
}

@keyframes dykSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Utility classes for card images (CSP Fixes) */


.card-img-wrapper-200 {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.card-img-wrapper-200 a{
  display: block;
  width: 100%;
  height: 100%;
}

.obj-cover {
  object-fit: cover;
}

.opacity-90 {
  opacity: 0.9;
}

/* For Work page background - dark mode override */


/* Custom switch toggle - Monochrome White in dark mode */
.custom-control-input:checked~.custom-control-label::before {
  background-color: #ffffff;
  border-color: #ffffff;
}

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: #ffffff;
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
  background-color: #000000;
}

/* Custom switch - unchecked state (dark mode) */
.custom-switch .custom-control-label::before {
  background-color: #333333;
  border-color: #555555;
}

.custom-switch .custom-control-label::after {
  background-color: #999999;
}

/* Custom radio and checkbox - unchecked state (dark mode) */
.custom-radio .custom-control-label::before,
.custom-checkbox .custom-control-label::before {
  background-color: #2a2a2a;
  border: 2px solid #888888;
}

/* Custom radio - checked state */
.custom-radio .custom-control-input:checked~.custom-control-label::before {
  background-color: #ffffff;
  border-color: #ffffff;
}

/* Custom radio - checked state inner dot (dark) */
.custom-radio .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
}

/* Custom checkbox - checked state (white square with black checkmark) */
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
  background-color: #ffffff;
  border-color: #ffffff;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' d='M3 8l3 3l7-7'/%3e%3c/svg%3e");
}

/* Index page hero background - dark mode override */
.index-hero-bg {
  background: url('../images/nyumasana.png') center center / cover no-repeat;
}

/* ============================================
   PERSONAL SHOPPER DASHBOARD (PSDASH) - DARK MODE
   Dashboard styles for personal shoppers
   Monochrome dark theme variant
   ============================================ */

/* Use shop dashboard CSS variables - dark mode overrides */
.ps-dashboard {
  --ps-card-bg: #1a1a1a;
  --ps-text-primary: #ffffff;
  --ps-text-muted: #b0b0b0;
  --ps-border-color: #333333;
  --ps-icon-bg: #222222;
  --ps-hover-bg: #2a2a2a;

  min-height: 100vh;
  padding-top: 80px;
  padding-bottom: 60px;
}

.ps-hero-section {
  padding: 40px 0 60px;
}

.ps-profile-card {
  background: var(--ps-card-bg);
  border-radius: 24px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  padding: 32px;
  margin-bottom: 24px;
  transition: box-shadow 0.3s ease;
}

.ps-profile-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.ps-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--ps-card-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.ps-name {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ps-text-primary);
}

.ps-joined {
  font-size: 14px;
  color: var(--ps-text-muted);
}

.ps-stat-cards .row > [class*="col"] {
  margin-bottom: 16px;
}

.ps-stat-card {
  background: var(--ps-card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}

.ps-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ps-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px;
}

.ps-stat-icon.bids {
  background: linear-gradient(135deg, #e0e0e0 0%, #ffffff 100%);
  color: #000000;
}

.ps-stat-icon.likes {
  background: linear-gradient(135deg, #d0d0d0 0%, #e8e8e8 100%);
  color: #000000;
}

.ps-stat-icon.rating {
  background: linear-gradient(135deg, #c0c0c0 0%, #d8d8d8 100%);
  color: #000000;
}

.ps-stat-icon.reviews {
  background: linear-gradient(135deg, #b0b0b0 0%, #cccccc 100%);
  color: #000000;
}

/* Aura tile — gold stays gold in dark (brand emblem, see shop twin above). */
.ps-stat-icon.aura {
  background: linear-gradient(135deg, #E0A412 0%, #B9830C 100%);
  color: #170909;
}

.ps-stat-icon.response,
.ps-stat-icon.response-time,
.ps-stat-icon.conversion,
.ps-stat-icon.views {
  background: linear-gradient(135deg, #b0b0b0 0%, #cccccc 100%);
  color: #000000;
}

.ps-stat-icon.profile {
  background: linear-gradient(135deg, #b0b0b0 0%, #cccccc 100%);
  color: #000000;
}

.ps-stat-icon.verified {
  background: linear-gradient(135deg, #999999 0%, #b0b0b0 100%);
  color: #000000;
}

.ps-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--ps-text-primary);
  margin-bottom: 4px;
}

.ps-stat-label {
  font-size: 14px;
  color: var(--ps-text-muted);
}

.ps-progress-section {
  background: var(--ps-card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  padding: 28px;
  margin-bottom: 24px;
}

.ps-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.ps-progress-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ps-text-primary);
}

.ps-progress-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--ps-text-primary);
}

.ps-progress-bar {
  height: 8px;
  background: var(--ps-icon-bg);
  border-radius: 4px;
  overflow: hidden;
}

.ps-progress-fill {
  height: 100%;
  background: linear-gradient(to right, #ffffff, #e0e0e0);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.ps-progress-label {
  font-size: 14px;
  color: var(--ps-text-muted);
  margin-top: 12px;
}


/* Tips Card - dark mode with subtle gradient */
.ps-tips-card {
  background: linear-gradient(135deg, #333333 0%, #222222 100%);
  border-radius: 16px;
  padding: 28px;
  border: 1px solid #444444;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  margin-top: 24px;
}

.ps-tips-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ps-tips-card ul {
  color: rgba(255, 255, 255, 0.85);
  padding-left: 20px;
  margin: 0;
  line-height: 2;
  font-size: 14px;
}

.ps-info-section {
  background: var(--ps-card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  padding: 28px;
}

.ps-info-section h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--ps-text-primary);
}

.ps-info-item {
  display: flex;
  align-items: flex-start;
  padding: 16px 0;
}

.ps-info-item:last-child {
  padding-bottom: 0;
}

.ps-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ps-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
  color: var(--ps-text-primary);
}

.ps-info-content {
  flex: 1;
}

.ps-info-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ps-text-muted);
  margin-bottom: 4px;
}

.ps-info-value {
  font-size: 15px;
  color: var(--ps-text-primary);
}

.ps-info-value a {
  color: var(--ps-text-primary);
}


.ps-section-divider {
  height: 1px;
  background: var(--ps-border-color);
  margin: 32px 0;
}

.ps-greeting {
  font-size: 14px;
  color: var(--ps-text-muted);
  margin-bottom: 8px;
}

@media (max-width: 767.98px) {
  .ps-hero-section {
    padding: 24px 0 40px;
  }

  .ps-profile-card {
    padding: 24px;
    text-align: center;
  }

  .ps-avatar {
    width: 100px;
    height: 100px;
  }

  .ps-name {
    font-size: 24px;
  }

  .ps-stat-card {
    padding: 20px;
    margin-bottom: 16px;
  }

  .ps-stat-value {
    font-size: 28px;
  }


  .ps-stat-cards {
    margin-bottom: 24px;
  }

  .ps-info-section {
    margin-bottom: 24px;
  }
}


/* PS Dashboard - Interactions Section (Dark Mode) */

.ps-interactions-card {
  background: var(--ps-card-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  padding: 28px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.ps-interactions-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ps-interactions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.ps-interactions-header h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-interactions-header h3 i {
  font-size: 24px;
  opacity: 0.7;
}

.ps-interactions-badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #f7f7f7;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

.ps-badge-new {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #28a745;
  background-color: rgba(40, 167, 69, 0.15);
  border-radius: 10px;
  vertical-align: middle;
}

/* ============================================
   ADMIN SETTINGS PAGE - DARK MODE
   Profile and settings styles for admin dashboard
   ============================================ */

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #333333;
}

/* Reset CropperJS global img overrides — scoped to cropper container only */
.cropper-container img:not(.cropper-hide) {
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
.profile-pic-thumb {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  min-width: 72px;
  min-height: 72px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #333333;
}

/* Profile picture history — re-select a previously-uploaded avatar.
   Markup lives in personalinfo.php / poster.php / psposter.php.
   Mirror any change in BOTH style.css and style-monochrome.css. */
.avatar-history-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.avatar-history-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-soft, #111111);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.avatar-history-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-history-thumb:hover { transform: translateY(-1px); border-color: var(--color-primary-soft, rgba(232, 84, 84, 0.4)); }
.avatar-history-thumb.is-current { border-color: var(--color-primary, #e85454); cursor: default; }
.avatar-history-thumb:disabled { opacity: 0.55; cursor: default; }
.avatar-history-check {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary, #e85454);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  display: none;
}
.avatar-history-thumb.is-current .avatar-history-check { display: block; }

.profile-picture-container {
  position: relative;
  display: inline-block;
}

.change-picture-btn {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

.profile-picture-container:hover .change-picture-btn {
  opacity: 1;
  pointer-events: auto;
}

.profile-header {
  padding: 3rem 0;
  margin-bottom: 2rem;
  border-radius: 0.5rem;
}

.badge-rights {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
}

.login-item {
  padding: 1rem;
  border-bottom: 1px solid #333333;
  transition: background-color 0.15s ease;
}

.login-item:hover {
  background-color: #2a2a2a;
}

.login-item:last-child {
  border-bottom: none;
}


.section-divider {
  margin: 2rem 0;
  border-top: 2px solid #333333;
}

/* ============================================
   ADMIN FLAG REVIEW PAGE - DARK MODE
   Styles for the flag review center
   ============================================ */

.stats-card {
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.5rem;
  transition: transform 0.2s;
  background: #1a1a1a;
}

.stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.stats-card .stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.stat-icon.pending {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

.stat-icon.flagged {
  background: rgba(255, 255, 255, 0.05);
  color: #cccccc;
}

.stat-icon.hidden {
  background: rgba(255, 255, 255, 0.05);
  color: #999999;
}

.flag-card {
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border-left: 4px solid #e0e0e0;
  background: #1a1a1a;
}

.flag-card.auto-hidden {
  border-left-color: #999999;
}

.flagger-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  background: #222222;
  color: #e0e0e0;
}

.flagger-badge.trusted {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.reputation-bar {
  height: 8px;
  background: #333333;
  border-radius: 4px;
  overflow: hidden;
}

.reputation-fill {
  height: 100%;
  background: linear-gradient(90deg, #666666 0%, #999999 50%, #ffffff 100%);
  transition: width 0.3s;
}

.reason-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
}

.reason-spam {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

.reason-inappropriate {
  background: rgba(255, 255, 255, 0.08);
  color: #cccccc;
}

.reason-scam {
  background: rgba(255, 255, 255, 0.06);
  color: #b0b0b0;
}

.reason-other {
  background: rgba(255, 255, 255, 0.05);
  color: #999999;
}

.action-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.btn-valid {
  background: #ffffff;
  color: #000000;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-valid:hover {
  background: #e0e0e0;
  transform: translateY(-1px);
}

.btn-invalid {
  background: #666666;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-invalid:hover {
  background: #555555;
  transform: translateY(-1px);
}

.btn-view {
  background: #333333;
  color: white;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-view:hover {
  background: #444444;
}

/* Admin decision on the find itself (Hide / Restore) — outlined so the
   flagger verdicts stay the primary actions. */
.btn-hide-find,
.btn-restore-find {
  background: transparent;
  border: 1.5px solid #c4c4c4;
  color: #e0e0e0;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-weight: 500;
  margin-left: auto;
  transition: all 0.3s;
}

.btn-hide-find:hover,
.btn-restore-find:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.notes-textarea {
  width: 100%;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0.5rem;
  resize: vertical;
  min-height: 80px;
  background: #0a0a0a;
  color: #e0e0e0;
}

.weight-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

.weight-high {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.weight-normal {
  background: rgba(255, 255, 255, 0.08);
  color: #b0b0b0;
}

.weight-low {
  background: rgba(255, 255, 255, 0.05);
  color: #808080;
}

/* ============================================
   MFA LOGIN PAGE - DARK MODE
   Multi-factor authentication verification styles
   ============================================ */

.mfa-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}

.mfa-card {
  background: #1a1a1a;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  max-width: 420px;
  width: 100%;
  padding: 40px;
  margin: 20px;
  border: 1px solid #333333;
}

.mfa-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #333333 0%, #222222 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  border: 1px solid #444444;
}

.mfa-icon i {
  font-size: 36px;
  color: white;
}

.otp-input {
  text-align: center;
  font-size: 24px;
  letter-spacing: 8px;
  font-weight: 600;
  padding: 16px;
  border: 2px solid #333333;
  border-radius: 12px;
  transition: border-color 0.3s;
  background: #0a0a0a;
  color: #ffffff;
}

.otp-input:focus {
  border-color: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.mfa-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.mfa-subtitle {
  color: #b0b0b0;
  margin-bottom: 32px;
}

.btn-verify {
  background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
  border: none;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  width: 100%;
  color: #000000;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-verify:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
  color: #000000;
}

.btn-verify:disabled {
  opacity: 0.7;
  transform: none;
}

.resend-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
}

.resend-link:hover {
  text-decoration: underline;
}


.cancel-link {
  color: #b0b0b0;
  text-decoration: none;
}

.cancel-link:hover {
  color: #ffffff;
}

.lockout-message {
  background: #2a2a20;
  border: 1px solid #555555;
  color: #e0e0e0;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
}

.lockout-message i {
  font-size: 48px;
  color: #cccccc;
  margin-bottom: 12px;
}

.lockout-timer {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
}

.attempts-warning {
  background: #2a2a20;
  border: 1px solid #555555;
  color: #e0e0e0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ============================================
   STUDIO PAGE STYLES (Monochrome Dark Mode)
   Synced with style.css line 10331+ - Dark Theme
   ============================================ */

/* Section Background */
.studio-section {
  background-color: #121212;
  padding-top: 100px;
  padding-bottom: 60px;
  min-height: 100vh;
}

@media (max-width: 576px) {
  .studio-section {
    padding-top: 80px;
  }
}

/* Country flag emoji - ensure proper rendering */
.country-flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  font-size: 1.25rem;
  margin-left: 8px;
  vertical-align: middle;
}

/* Gallery Wrapper */
.studio-gallery-wrapper {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* Gallery Overlay */


/* Gallery Button */
.studio-gallery-btn {
  background: rgba(30, 30, 30, 0.9) !important;
  border-color: #444 !important;
  color: #f7f7f7 !important;
  backdrop-filter: blur(4px);
  /* Strict positioning sync with light mode */
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.studio-gallery-btn:hover {
  background: rgba(50, 50, 50, 0.95) !important;
  border-color: #666 !important;
}

/* View Button in Gallery Overlay */
.view-btn {
  background: rgba(40, 40, 40, 0.95);
  color: #fff;
  border: 1px solid #444;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Typography - Headings & Meta */
.studio-header {
  padding-top: 24px;
}

.studio-header > .d-flex {
  flex-wrap: nowrap;
}

.studio-header > .d-flex > .studio-actions {
  margin-left: auto;
  padding-left: 12px;
}

/* Header Avatar */
.studio-header-avatar img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 2px solid #444;
}

/* Open / Closed Status Badge
   The badge only had its two background tints here — the pill geometry, the
   status dot and the pulse keyframes lived solely in style.css. Because the
   themes are SWAPPED copies (one file loads, not both), dark mode rendered the
   badge as bare text with no pill, no dot and no animation. Structure mirrors
   style.css; only the colours are re-tuned for a dark ground. */
.studio-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.studio-status-open {
  background: rgba(40, 167, 69, 0.15);
  color: #4ade80;
}

.studio-status-closed {
  background: rgba(220, 53, 69, 0.15);
  color: #f87171;
}

.studio-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.studio-status-open .studio-status-dot {
  background: #4ade80;
  animation: studioPulse 2s ease-in-out infinite;
}

.studio-status-closed .studio-status-dot {
  background: #f87171;
}

@keyframes studioPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.studio-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #f7f7f7;
  line-height: 1.3;
}

.studio-section h1,
.studio-section h2,
.studio-section h3,
.studio-section h4,
.studio-section h5,
.studio-section h6 {
  color: #f7f7f7;
}

.studio-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.95rem;
  color: #b0b0b0;
}

.studio-rating strong {
  font-weight: 600;
  color: #f7f7f7;
}

.studio-actions {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

.studio-actions .btn-icon {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #333;
  background: #1e1e1e;
  color: #fff;
  transition: all 0.2s;
  flex-shrink: 0;
}

.studio-actions .btn-icon:hover {
  background: #333;
  border-color: #555;
  color: #fff;
}

.studio-actions .btn-icon i {
  font-size: 1.25rem;
}

.studio-actions .ucard-like-btn {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
}


.studio-meta .text-muted {
  color: #888 !important;
}

/* Badges */
.studio-category.badge-soft-primary {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #f7f7f7 !important;
}

/* Description */
.studio-description {
  color: #b0b0b0;
}

/* Description Read More */
.studio-description-wrap.clamped:not(.expanded)::after {
  background: linear-gradient(transparent, #121212);
}

.studio-read-more-btn {
  color: #cc0000;
}

/* Section Divider */
.studio-divider {
  border-color: #333;
}

/* Today Highlight */
.studio-hours-today {
  background: rgba(204, 0, 0, 0.08);
}

.studio-hours-today .studio-hours-day {
  color: #cc0000;
}

.studio-hours-today .studio-hours-time {
  color: #f7f7f7;
}

/* Image count overlay — inherits from style.css */

/* Booking Card */
/* ============================================
   STUDIO GALLERY - MONOCHROME DARK MODE
   Synced with style.css line 10340+
   ============================================ */

.studio-gallery-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.studio-gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: 400px;
}

.studio-gallery-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.studio-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Placeholder tiles carry a centred icon on a flat #e8e8e8 field. Use
   contain (not cover) so the icon stays dead-centre instead of being cropped
   off-centre when the cell aspect differs; the matching background fills the
   letterbox so the cell reads as one seamless grey panel. */
.studio-gallery-item img.studio-gallery-placeholder {
  object-fit: contain;
  object-position: center;
  background: #e8e8e8;
}

.studio-gallery-item:hover img {
  transform: scale(1.08);
}

.studio-gallery-item:first-child {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  height: 100%;
}

/* "+N more" overlay on last gallery thumbnail. Was light-theme-only, so in
   dark mode the count rendered as unstyled text sitting on the thumbnail. */
.studio-gallery-more {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 600;
  pointer-events: none;
}


.view-btn {
  background: rgba(255, 255, 255, 0.95);
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 600;
  color: #000000;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.studio-gallery-item:hover .view-btn {
  transform: translateY(0);
}

/* Mobile Gallery Layout */
@media (max-width: 767.98px) {
  .studio-gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .studio-gallery-item:not(.studio-gallery-primary) {
    display: none;
  }

  .studio-gallery-primary {
    height: 250px;
  }
}

.studio-booking-widget {
  position: sticky;
  top: 100px;
}

.studio-booking-card {
  background-color: #1e1e1e;
  border: 1px solid #333;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
  position: sticky;
  top: 100px;
  z-index: 99;
}

.studio-booking-card .card-body {
  background-color: #1e1e1e;
  border-radius: 12px;
}

.studio-booking-card h5 {
  font-weight: 600;
  color: #f7f7f7;
}

.studio-hours-strip {
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 14px;
  border-left: 3px solid #ff4444;
}

.studio-hours-strip .small {
  color: #ccc;
}

/* Booking Form Elements */
.studio-booking-card .form-control {
  background-color: #1a1a1a;
  border-radius: 8px;
  border: 1px solid #444;
  padding: 12px 16px;
  font-size: 0.95rem;
  color: #f7f7f7;
}

.studio-booking-card .form-control:focus {
  border-color: #888;
  background-color: #1a1a1a;
  box-shadow: none;
}

.studio-booking-card .form-control::placeholder {
  color: #666;
}

/* Booking Type Toggle */
.studio-booking-card .btn-group-toggle .btn {
  border-radius: 8px !important;
  font-size: 0.9rem;
  padding: 10px 16px;
  color: #b0b0b0;
  border-color: #444;
}

.studio-booking-card .btn-group-toggle .btn.active {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

/* Primary Action Button */
.studio-booking-card .btn-primary {
  background: #ffffff;
  border-color: #ffffff;
  border-radius: 8px;
  font-weight: 600;
  padding: 14px 24px;
  color: #000000;
}

.studio-booking-card .btn-primary:hover {
  background: #e0e0e0;
  border-color: #e0e0e0;
}

/* Time Slots */
.studio-time-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-time-slot {
  padding: 8px 16px;
  border: 1px solid #444;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
  background: #2d2d2d;
  color: #e0e0e0;
}

.studio-time-slot:hover {
  border-color: #888;
  background: #3d3d3d;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.studio-time-slot.selected {
  background-color: #f8f9fc;
  color: #000;
  border-color: #fff;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

.studio-time-slot.unavailable {
  background-color: #1a1a1a;
  color: #555;
  border-color: #333;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Quick Stats */
.studio-quick-stats {
  padding: 16px;
  background: #2d2d2d;
  border-radius: 12px;
}

/* Trust Signals */
.studio-trust-signals {
  border-top-color: #333;
}

.studio-trust-item {
  color: #b0b0b0;
}

/* Share Modal */
.studio-share-modal .modal-content {
  background: #1e1e1e;
  border: 1px solid #333;
}

.studio-share-modal .modal-header {
  border-bottom-color: #333;
}

.studio-share-modal .modal-title {
  color: #f7f7f7;
}

.studio-share-modal .close {
  color: #b0b0b0;
}

.studio-share-btn {
  background: #2d2d2d;
  border-color: #444;
  color: #e0e0e0;
}

.studio-share-btn:hover {
  background: #333;
  color: #cc0000;
}

.studio-share-copy input {
  background: #2d2d2d;
  border-color: #444;
  color: #e0e0e0;
}

/* ============================================
   MOBILE ADAPTATIONS - MONOCHROME
   Synced with style.css line 10280+
   ============================================ */

@media (max-width: 991px) {
  .studio-booking-widget {
    position: static;
    margin-top: 32px;
  }

  .studio-booking-card {
    position: static;
    border-radius: 12px;
    z-index: 99;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
  }

  .studio-booking-card .card-body {
    padding: 16px;
  }

  /* Show simplified mobile booking bar */
  .studio-booking-card .btn-primary {
    margin: 0;
  }
}

.studio-quick-stats .h5 {
  color: #f8f9fc;
}

.studio-quick-stats .text-muted {
  color: #b0b0b0 !important;
}

/* Owner Card */
.studio-owner-card {
  border-radius: 12px;
  background: #1e1e1e;
  border-color: #333;
}

.studio-owner-card:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  border-color: #444;
}

.studio-owner-avatar {
  position: relative;
  width: 64px;
  height: 64px;
}

.studio-owner-avatar img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 2px solid #333;
}

/* Verified seal pinned to the avatar corner — the SVG carries its own white
   halo, so no background/border here. */
.studio-verified-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  line-height: 0;
}

/* Reviews */


.studio-review-card {
  border-color: #333;
}

.studio-review-card p {
  color: #ccc;
}

/* Header "N reviews" anchor — parity with style.css (was missing here, so the
   hover colour fell back to Bootstrap's link blue in dark). */
.studio-reviews-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.studio-reviews-link:hover {
  text-decoration: underline;
  color: #cc0000;
}

.studio-review-response {
  background: #2d2d2d;
  color: #ccc;
  border-left-color: #f7f7f7;
}

/* Dividers */
.studio-section hr {
  border-color: #333;
}

/* ============================================
   SIMILAR SHOPS / PS CARDS - DARK MODE
   ============================================ */

/*
 * Similar-shops cards.
 *
 * These rules were originally written as if this file layered ON TOP of
 * style.css — they carried colour only (`border-color` with no `border`,
 * `color` with no box model). It doesn't layer: init.php renders these as
 * alternatives, so exactly one of them ever APPLIES and every
 * structural property has to exist here too. Without them dark mode rendered
 * the avatar at 0×18px with no radius, the card body with no padding, the
 * category as bare inline text and the verified tick in static flow.
 * Structure below is ported verbatim from style.css; only the palette differs.
 */
.studio-similar-card {
  display: block;
  text-decoration: none !important;
}
.studio-similar-card-inner {
  background: #1e1e1e;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #333;
  box-shadow: 0 4px 15px rgba(204, 0, 0, 0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}
.studio-similar-card:hover .studio-similar-card-inner {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(204, 0, 0, 0.3);
}
.studio-similar-card-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 16px;
  background: linear-gradient(135deg, #252525 0%, #1a1a1a 100%);
}
.studio-similar-avatar-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}
.studio-similar-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #1e1e1e;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.studio-similar-avatar-fallback {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #cc0000, #e31c5f);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #1e1e1e;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.studio-similar-verified {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #ff4d4d;
  font-size: 1.1rem;
}
.studio-similar-card-body {
  padding: 16px 20px 24px;
  text-align: center;
}
.studio-similar-name {
  font-family: 'Ubuntu', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 6px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.studio-similar-category {
  display: inline-block;
  font-size: 0.75rem;
  color: #aaa;
  background: rgba(204, 0, 0, 0.12);
  padding: 2px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}
/*
 * Boosted card — paid placement, disclosed. See the matching rule in style.css;
 * this file is a STANDALONE theme (init.php never layers it over style.css),
 * so the full declaration is repeated here rather than inherited. Only the
 * palette differs — a translucent fill and a lighter blue that clears contrast
 * on the dark card.
 */
.studio-similar-boosted {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #7dabf8;
  background: rgba(125, 171, 248, 0.14);
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 10px;
  margin-left: 6px;
  white-space: nowrap;
}
.studio-similar-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.studio-similar-rating {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f5a623;
}
.studio-similar-rating i {
  font-size: 0.85rem;
}

/* ============================================
   FACEBOOK-STYLE GALLERY LIGHTBOX - DARK MODE
   Synced with style.css line 11484+
   ============================================ */

.studio-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.studio-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.studio-lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.96);
  cursor: pointer;
}

.studio-lightbox-content {
  position: relative;
  z-index: 2;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.studio-lightbox-image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  transition: opacity 0.3s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.studio-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.studio-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.studio-lightbox-counter {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1px;
}

.studio-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.studio-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-50%) scale(1.05);
}

.studio-lightbox-prev {
  left: 20px;
}

.studio-lightbox-next {
  right: 20px;
}

@media (max-width: 767.98px) {
  .studio-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .studio-lightbox-prev {
    left: 8px;
  }

  .studio-lightbox-next {
    right: 8px;
  }

  .studio-lightbox-image {
    max-width: 96vw;
    max-height: 80vh;
  }
}

/* ============================================
   STUDIO GALLERY MODAL (Legacy Bootstrap Modal)
   ============================================ */

#galleryModal .modal-content {
  background: #000;
  border: none;
}

#galleryModal .modal-header {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

#galleryModal .close {
  color: white;
  opacity: 1;
  font-size: 2rem;
  padding: 16px;
}

#galleryModal .carousel-item img {
  max-height: 80vh;
  object-fit: contain;
}

#galleryModal .carousel-control-prev,
#galleryModal .carousel-control-next {
  width: 10%;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Mobile Layout (< 991px) */
@media (max-width: 991px) {
  .studio-booking-widget {
    position: static;
    margin-top: 32px;
  }

  .studio-booking-card {
    position: static;
    border-radius: 12px;
    z-index: 99;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
  }

  .studio-booking-card .card-body {
    padding: 16px;
  }

  /* Show simplified mobile booking bar */
  .studio-booking-card .btn-primary {
    margin: 0;
  }
}

@media (max-width: 767.98px) {
  .studio-gallery-grid {
    display: flex;
    overflow-x: auto;
    height: 250px;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
  }

  .studio-gallery-item {
    min-width: 85vw;
    height: 100%;
    scroll-snap-align: center;
    margin-right: 10px;
  }

  .studio-gallery-item:first-child {
    height: 100%;
  }
}

/* Small Mobile Fonts */
@media (max-width: 576px) {
  .studio-section {
    padding-top: 80px;
  }

  .studio-title {
    font-size: 1.5rem !important;
  }

  .studio-meta {
    font-size: 0.875rem !important;
  }
}

/* ============================================
   HEADER NAVIGATION FIX - LARGE SCREENS
   Ensuring desktop layout is preserved and z-index is correct
   ============================================ */

@media (min-width: 992px) {
  #topnav .navigation-menu {
    display: flex !important;
    justify-content: flex-end !important;
  }

  #topnav .navigation-menu>li>a {
    padding-top: 25px;
    padding-bottom: 25px;
    min-height: 62px;
  }

  #topnav .navbar-toggle {
    display: none !important;
  }

  #topnav #navigation {
    display: block !important;
  }
}

/* ============================================
   AVAILABILITY PAGE STYLES - DARK MODE
   Complete structural + color styles
   ============================================ */

.availability-day {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.availability-day:last-child {
  border-bottom: none;
}

.availability-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.availability-day-name {
  font-weight: 600;
  font-size: 1rem;
  color: #f7f7f7;
}

.availability-times {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.availability-times.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.availability-day .availability-times input.availability-time-input,
.availability-day .availability-times input.availability-time-input.form-control,
input.availability-time-input,
.availability-time-input {
  width: 130px !important;
  max-width: 130px !important;
  flex: 0 0 auto !important;
  background-color: #252525 !important;
  border: 1px solid #444 !important;
  border-radius: 6px !important;
  color: #f7f7f7 !important;
  padding: 0.5rem 0.75rem !important;
}

.availability-time-input:focus {
  background-color: #2a2a2a;
  border-color: #cc0000;
  color: #f7f7f7;
  outline: none;
  box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.2);
}

.availability-time-separator {
  color: #888;
  font-weight: 500;
}

.availability-status {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.availability-status.has-schedule {
  background-color: rgba(40, 167, 69, 0.15);
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.availability-status.no-schedule {
  background-color: rgba(255, 193, 7, 0.15);
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.availability-save-btn-container {
  background: transparent;
  padding: 1.25rem;
  margin-top: 1rem;
}

.availability-save-btn-container .btn-primary {
  background-color: #cc0000 !important;
  border-color: #cc0000 !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.availability-save-btn-container .btn-primary:hover {
  background-color: #aa0000 !important;
  border-color: #aa0000 !important;
}

/* Custom Switch Styling for Availability Days - Dark Mode */
.availability-day .custom-switch {
  padding-left: 3.5rem !important;
  min-height: 1.75rem;
}

.availability-day .custom-switch .custom-control-label {
  cursor: pointer;
}

.availability-day .custom-switch .custom-control-label::before {
  width: 3rem !important;
  height: 1.625rem !important;
  border-radius: 1rem !important;
  left: -3.5rem !important;
  top: 0 !important;
  background-color: #444 !important;
  border: none !important;
  transition: background-color 0.2s ease-in-out !important;
}

.availability-day .custom-switch .custom-control-label::after {
  width: 1.375rem !important;
  height: 1.375rem !important;
  border-radius: 50% !important;
  left: calc(-3.5rem + 2px) !important;
  top: calc(0.125rem) !important;
  background-color: #888 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.2s ease-in-out !important;
}

.availability-day .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #cc0000 !important;
}

.availability-day .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(1.375rem) !important;
  background-color: #fff !important;
}

.availability-day .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(204, 0, 0, 0.4) !important;
}

.availability-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 0.875rem;
  color: #f7f7f7;
}

.availability-preview-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
}

/* shop-availability.php's save toast applies `animation: availabilitySlideIn`.
   These keyframes lived only in style.css, so under this sheet the toast
   appeared with no animation. The two files are swapped copies, not layers —
   anything referenced by markup must exist in both. */
@keyframes availabilitySlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ============================================
   DEAL ROOM STYLES - DARK MODE (Twitter DM Style)
   Dark theme for direct messaging interface
   ============================================ */

/* Base structural styles */
.dealroom-section {
    padding-top: 74px;
    height: 100vh;
    overflow: hidden;
    background: #000000;
}

.dealroom-container {
    height: calc(100vh - 74px);
    border-color: #333333;
}

.dealroom-sidebar {
    background: #0a0a0a;
    border-right: 1px solid #333333;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dealroom-sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid #333333;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    gap: 12px;
}


.dealroom-sidebar-header h5 {
    font-weight: 700;
    font-size: 1.1rem;
    color: #f7f9f9;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dealroom-room-list {
    flex: 1;
    overflow-y: auto;
    background: #0a0a0a;
}

.dealroom-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #0a0a0a;
}

.dealroom-chat-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #000000;
    border-bottom: 1px solid #333333;
    position: sticky;
    top: 0;
    z-index: 10;
}

.dealroom-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #000000;
}

.dealroom-input {
    padding: 12px 16px;
    background: #000000;
    border-top: 1px solid #333333;
}

.dealroom-no-chat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #000000;
}

.dealroom-no-chat h5 {
    color: #f7f9f9;
}

.dealroom-no-chat p {
    color: #999999;
}

.dealroom-room-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #333333;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
    position: relative;
}

.dealroom-room-item:hover {
    background: #1a1a1a;
    text-decoration: none;
    color: inherit;
}

.dealroom-room-item.active {
    background: #1a1a1a;
    border-right: 2px solid #ffffff;
    border-left: none;
}

.dealroom-room-item.unread {
    background: #121212;
}

.dealroom-room-item.unread .dealroom-room-name {
    font-weight: 700;
}

.dealroom-room-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 1px solid #333333;
}

/* Composite avatar — find image (rounded square) with the other party's
   profile picture as a circular overlay, à la Airbnb message thumbnails.
   Dark-mode overlay ring matches the list surface so the circle reads as
   a clean cutout against the find thumbnail. */
.dealroom-room-avatar-stack {
    position: relative;
    width: 48px;
    height: 48px;
    margin-right: 12px;
    flex-shrink: 0;
}

.dealroom-room-find-thumb {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    border: 1px solid #333333;
}

.dealroom-room-avatar-overlay {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #000000;
    background: #000000;
}

.dealroom-room-info {
    flex: 1;
    min-width: 0;
}

.dealroom-room-name {
    font-weight: 500;
    color: #f7f9f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

.dealroom-chat-name {
    font-weight: 700;
    color: #f7f9f9;
    font-size: 1rem;
}

/* Clickable find subject at the top of the deal room — opens the find */
.dealroom-chat-find-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.dealroom-chat-find-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.dealroom-chat-find-link i {
    font-size: 0.9em;
    opacity: 0.7;
}

.dealroom-room-preview {
    font-size: 0.85rem;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Find subject (line 2) — the durable "what this room is about" anchor */
.dealroom-room-subject {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: #f7f9f9;
    margin-top: 1px;
}

.dealroom-room-subject i {
    font-size: 0.95rem;
    color: #999999;
    flex-shrink: 0;
}

.dealroom-room-subject span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Tappable subject (customer view) — opens the find */
.dealroom-room-subject-link {
    cursor: pointer;
}

.dealroom-room-subject-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Last-message snippet (line 3) — the "what's the latest" signal */
.dealroom-room-snippet {
    font-size: 0.8rem;
    color: #999999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.dealroom-room-time {
    font-size: 0.75rem;
    color: #999999;
    white-space: nowrap;
}

.dealroom-room-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: 8px;
    flex-shrink: 0;
}

.dealroom-back-btn {
    color: #e0e0e0;
}

.dealroom-back-btn:hover {
    background: #1a1a1a;
}

.dealroom-chat-link {
    color: #999999;
    font-size: 0.8rem;
}

.dealroom-chat-link:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Presence line in the chat header (online / typing / last seen). These rules
   existed only in style.css, so in dark mode the online + typing states lost
   their colours entirely. MIRRORED IN style.css — edit both. */
.dealroom-presence-status {
    font-size: 0.75rem;
    line-height: 1;
}

.dealroom-presence-status.is-online {
    color: #4ade80;
    font-weight: 600;
}

.dealroom-presence-status.is-typing {
    color: #ffffff;
    font-weight: 600;
}

.dealroom-presence-status.is-offline {
    color: #999999;
}

.dealroom-message-bubble {
    background: #1a1a1a;
    color: #e0e0e0;
}

.dealroom-message.mine .dealroom-message-bubble {
    background: #ffffff;
    color: #000000;
}

/* Inline meta inside bubbles */
.dealroom-message-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    font-size: 0.65rem;
    line-height: 1;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

/* Mine (white) bubble: dark meta text */
.dealroom-message.mine .dealroom-message-meta {
    color: rgba(0, 0, 0, 0.45);
}

.dealroom-system-message .badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px 12px;
    background: #1a1a1a;
    color: #999999;
    border-radius: 9999px;
}

/* .dealroom-input-wrapper is now a transparent row; the dark surface moved to
   .dealroom-input-pill in the IG-style composer block further down. */

.dealroom-input textarea {
    color: #e0e0e0;
}

.dealroom-input textarea::placeholder {
    color: #999999;
}

.dealroom-attach-btn {
    color: #999999;
}

.dealroom-attach-btn:hover {
    color: #ffffff;
    background: #1a1a1a;
}

.dealroom-quote-header i {
    color: #cc0000;
}

.dealroom-quote-amount {
    color: #f7f9f9;
}

.dealroom-quote-validity {
    color: #999999;
}

.dealroom-message-file {
    background: #1a1a1a;
}

.dealroom-message-file a {
    color: #e0e0e0;
}

.dealroom-message-file a:hover {
    color: #ffffff;
}

.dealroom-message-file i {
    color: #e0e0e0;
}

.dealroom-message-image {
    border-radius: 16px;
}


.dealroom-unread-badge {
    background: #ffffff;
    color: #000000;
}

.dealroom-chat-actions .btn {
    color: #999999;
}

.dealroom-chat-actions .btn:hover {
    background: #1a1a1a;
    color: #ffffff;
}

/* Send Quote Pill Button */


/* Quote Validity Pills (Dark) */
.quote-validity-pills {
    display: flex;
    gap: 8px;
}

.quote-validity-pill {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #333333;
    border-radius: 9999px;
    background: #1a1a1a;
    color: #999999;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.quote-validity-pill:hover {
    border-color: #00a699;
    color: #00a699;
}

.quote-validity-pill.active {
    background: #00a699;
    border-color: #00a699;
    color: #ffffff;
}

/* Actions Wrapper & Menu (Dark) */
.dealroom-actions-wrapper {
    position: relative;
}

.dealroom-actions-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    flex-direction: column;
    gap: 6px;
    z-index: 100;
    animation: fadeInDown 0.15s ease;
}

.dealroom-action-item i {
    font-size: 1rem;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Actions Toggle & Dropdown (Dark) */
.dealroom-actions-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: none;
    border-radius: 9999px;
    background: #00a699;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 166, 153, 0.25);
}

.dealroom-actions-toggle i {
    font-size: 1rem;
}

.dealroom-actions-toggle:hover {
    background: #00b8aa;
    transform: translateY(-1px);
}

.dealroom-actions-toggle.active {
    background: #00b8aa;
}

.dealroom-action-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: none;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#sendQuoteBtn.dealroom-action-item {
    background: #00a699;
}

#sendQuoteBtn.dealroom-action-item:hover {
    background: #00b8aa;
}

#sendProofBtn.dealroom-action-item {
    background: #28a745;
}

#sendProofBtn.dealroom-action-item:hover {
    background: #34c759;
}

/* Proof Badge (Dark) */
.dealroom-proof-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: rgba(40, 167, 69, 0.2);
    color: #34c759;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.dealroom-proof-badge i {
    font-size: 0.85rem;
}

/* Proof Modal (Dark) */
.proof-capture-area {
    border: 2px dashed #444;
    border-radius: 16px;
    padding: 2rem;
    cursor: pointer;
    transition: border-color 0.2s;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proof-capture-area:hover {
    border-color: #34c759;
}

.proof-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #666;
}

.proof-placeholder i {
    font-size: 3rem;
    color: #34c759;
}

.proof-placeholder span {
    font-size: 0.9rem;
    font-weight: 600;
}

.proof-preview {
    position: relative;
    text-align: center;
}

.proof-preview img {
    max-width: 100%;
    max-height: 250px;
    border-radius: 12px;
    object-fit: contain;
}

.proof-retake {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 0.78rem;
    cursor: pointer;
}

.proof-retake:hover {
    background: rgba(0, 0, 0, 0.8);
}

.proof-webcam {
    position: relative;
    width: 100%;
}

.proof-webcam video {
    width: 100%;
    border-radius: 12px;
    background: #000;
}

.proof-snap-btn {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.proof-snap-btn:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Dark mode markers */
.dealroom-room-marker.marker-deal {
    background: #1a3d2a;
    color: #4ade80;
}

.dealroom-room-marker.marker-booking {
    background: #3d2a1a;
    color: #fb923c;
}

/* ============================================
   ROOM SELECTION UI - DARK MODE
   ============================================ */

.dealroom-select-container {
    background: #000000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.dealroom-select-header {
    background: #0a0a0a;
    border-color: #333333;
}

.dealroom-select-back {
    color: #e0e0e0;
}

.dealroom-select-back:hover {
    background: #1a1a1a;
    color: #ffffff;
}

.dealroom-select-info h5 {
    color: #e0e0e0;
}

.dealroom-select-label {
    color: #999999;
}

.dealroom-select-item {
    border-color: #333333;
}

.dealroom-select-item:hover {
    background: #1a1a1a;
}

.dealroom-select-item-icon {
    background: #1a1a1a;
    color: #e0e0e0;
}

.dealroom-select-item-title {
    color: #e0e0e0;
}

.dealroom-select-item-preview {
    color: #999999;
}

.dealroom-select-item-time {
    color: #999999;
}

.dealroom-select-item-arrow {
    color: #999999;
}

.dealroom-select-footer {
    background: #0a0a0a;
    border-color: #333333;
}

.dealroom-select-footer .btn-light {
    background: #1a1a1a;
    border-color: #333333;
    color: #e0e0e0;
}

.dealroom-select-footer .btn-light:hover {
    background: #333333;
}

/* Additional dark mode dealroom styles */
.dealroom-section {
    background: #000000;
}

.dealroom-container {
    border-color: #333333;
}

.dealroom-room-avatar,
.dealroom-select-avatar {
    border-color: #333333;
}

.dealroom-chat-subtitle {
    color: #999999;
}

.dealroom-quote-actions .btn-success {
    background: #5cd85c;
    border-color: #5cd85c;
    color: #000000;
}

.dealroom-quote-actions .btn-success:hover {
    background: #4cc04c;
    border-color: #4cc04c;
}

.dealroom-quote-actions .btn-outline-secondary {
    color: #999999;
    border-color: #333333;
}

.dealroom-quote-actions .btn-outline-secondary:hover {
    background: #333333;
    color: #e0e0e0;
}

.dealroom-connection-warning {
    background: #3d2a1a;
    color: #fb923c;
    border-color: #5c3d1a;
}

.dealroom-connection-warning-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 8px 0;
    background: #3d2a1a;
    color: #fb923c;
    border-radius: 12px;
    font-size: 0.85rem;
    border: 1px solid #5c3d1a;
}

.dealroom-connection-warning-inline i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Missing structural styles for dealroom */
.dealroom-back-btn {
    margin-right: 16px;
    color: #e0e0e0;
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.dealroom-back-btn:hover {
    background: #1a1a1a;
    text-decoration: none;
    color: #ffffff;
}


.dealroom-chat-info {
    flex: 1;
}

.dealroom-chat-actions .btn {
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
}

.dealroom-chat-actions .btn:hover {
    background: #1a1a1a;
    color: #ffffff;
}

.dealroom-system-message {
    text-align: center;
    padding: 12px 0;
}

.dealroom-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 75%;
    margin-bottom: 2px;
    position: relative;
}

.dealroom-message.mine {
    align-self: flex-end;
    align-items: flex-end;
}

/* Teammate attribution chip — shown on buyer-side bubbles written by a corp
   colleague (not the viewer). Mirrors the desktop teammate label. */
.dealroom-sender-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9a9a9a;
    margin: 2px 6px 1px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dealroom-message-bubble {
    background: #1a1a1a;
    color: #e0e0e0;
    padding: 10px 16px 6px;
    border-radius: 24px;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 4px;
    line-height: 1.4;
    word-break: break-word;
    font-size: 0.95rem;
    min-width: 80px;
}

.dealroom-message.mine .dealroom-message-bubble {
    background: #ffffff;
    color: #000000;
    border-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 24px;
}


.dealroom-message-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    font-size: 0.65rem;
    line-height: 1;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

.dealroom-message.mine .dealroom-message-meta {
    color: rgba(0, 0, 0, 0.45);
}

.dealroom-message-image {
    max-width: 280px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

/* Shimmer placeholder shown until the image finishes loading */
.dealroom-message-image:not(.loaded) {
    width: 200px;
    height: 150px;
    background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.dealroom-message-image img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dealroom-message-image.loaded img {
    opacity: 1;
}

.dealroom-message-file {
    padding: 12px 16px;
    border-radius: 16px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dealroom-message-file i {
    font-size: 1.5rem;
    color: #e0e0e0;
}

.dealroom-message-file a {
    font-weight: 500;
    color: #e0e0e0;
}

.dealroom-message-file a:hover {
    color: #ffffff;
}

.dealroom-quote-card {
    border-radius: 16px;
    padding: 16px;
    min-width: 220px;
    border: 1px solid #333333;
    background: #121212;
}

.dealroom-quote-header {
    font-size: 0.8rem;
    color: #999999;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dealroom-quote-header i {
    color: #999999;
}

.dealroom-quote-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.dealroom-quote-validity {
    margin-top: 4px;
    color: #999999;
}

.dealroom-quote-actions {
    display: flex;
    gap: 8px;
}

/* Instagram-style composer (monochrome) — outlined text pill on the left,
   action icons + counterpart avatar on the right. Mirrors style.css. */
.dealroom-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.dealroom-input-pill {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    background: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 9999px;
    padding: 2px 16px;
    transition: border-color 0.2s;
}

.dealroom-input-pill:focus-within {
    border-color: #ffffff;
}

.dealroom-input-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.dealroom-attach-btn,
.dealroom-send-btn,
.dealroom-mic-btn,
.dealroom-deal-btn {
    background: none;
    border: none;
    padding: 0;
    color: #999999;
    cursor: pointer;
    font-size: 1.2rem;
    transition: color 0.2s, background 0.2s;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dealroom-attach-btn:hover,
.dealroom-send-btn:hover,
.dealroom-mic-btn:hover,
.dealroom-deal-btn:hover {
    color: #ffffff;
    background: #1a1a1a;
}

.dealroom-send-btn,
.dealroom-deal-btn {
    color: #ffffff;
}

/* Compose mode — once the field is focused, the flanking actions
   GLIDE closed (width + opacity) so the pill stretches to fill the bar; the
   send button stays. The base rules carry the transition so it eases both
   ways (collapse on focus, expand on blur). We animate the attach *button*
   (not its position:relative wrapper) so the popup menu is never clipped. */
.dealroom-input-actions {
    transition: gap 0.25s ease;
}

.dealroom-input-actions .dealroom-attach-btn,
.dealroom-input-actions .dealroom-mic-btn,
.dealroom-input-actions .dealroom-deal-btn {
    min-width: 0;
    overflow: hidden;
    transition: width 0.25s ease, margin 0.25s ease, padding 0.25s ease,
                opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.dealroom-input-wrapper:has(#messageInput:focus) .dealroom-input-actions {
    gap: 0;
}

.dealroom-input-wrapper:has(#messageInput:focus) .dealroom-attach-btn,
.dealroom-input-wrapper:has(#messageInput:focus) .dealroom-mic-btn,
.dealroom-input-wrapper:has(#messageInput:focus) .dealroom-deal-btn {
    width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .dealroom-input-actions,
    .dealroom-input-actions .dealroom-attach-btn,
    .dealroom-input-actions .dealroom-mic-btn,
    .dealroom-input-actions .dealroom-deal-btn {
        transition: none;
    }
}

.dealroom-input textarea {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    resize: none;
    padding: 9px 0;
    font-size: 0.95rem;
    max-height: 120px;
    line-height: 1.4;
    color: #e0e0e0;
}

.dealroom-input textarea:focus,
.dealroom-input textarea:focus-visible {
    /* Override the global :focus-visible ring (line ~6455) so the dealroom
       textarea stays clean — the pill border handles focus affordance. */
    outline: none;
    box-shadow: none;
}

.dealroom-input textarea::placeholder {
    color: #999999;
}

.dealroom-unread-badge {
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    min-width: 20px;
    text-align: center;
}

.dealroom-room-marker {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Select container structural styles */
.dealroom-select-container {
    border-radius: 16px;
    margin-top: 100px;
    overflow: hidden;
}

.dealroom-select-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #333333;
}

.dealroom-select-back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
    margin-right: 12px;
    transition: background 0.2s;
}

.dealroom-select-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
}

.dealroom-select-info h5 {
    font-weight: 700;
    font-size: 1.1rem;
}

.dealroom-select-list {
    padding: 16px 20px;
}

.dealroom-select-label {
    font-size: 0.85rem;
    margin-bottom: 12px;
    font-weight: 500;
}

.dealroom-select-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
    margin-bottom: 8px;
    border: 1px solid #333333;
}

.dealroom-select-item:hover {
    text-decoration: none;
    color: inherit;
}

.dealroom-select-item-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
    margin-right: 12px;
    flex-shrink: 0;
}

.dealroom-select-item-content {
    flex: 1;
    min-width: 0;
}

.dealroom-select-item-title {
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dealroom-select-item-preview {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.dealroom-select-item-time {
    font-size: 0.75rem;
    margin-left: 12px;
    flex-shrink: 0;
}

.dealroom-select-item-arrow {
    font-size: 1.25rem;
    margin-left: 8px;
    flex-shrink: 0;
}

.dealroom-select-footer {
    padding: 16px 20px;
    border-top: 1px solid #333333;
}

.dealroom-select-footer .btn {
    border-radius: 9999px;
    font-weight: 600;
}

/* ============================================
   DEALROOM RESPONSIVE - DARK MODE
   ============================================ */

@media (max-width: 991px) {
    .dealroom-section {
        padding-top: 0;
        background: #000000;
    }

    .dealroom-container {
        height: 100vh;
    }

    .dealroom-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        border-right: none;
        background: #0a0a0a;
    }

    .dealroom-sidebar-header {
        padding-top: 80px;
        background: #0a0a0a;
    }

    .dealroom-room-list {
        background: #0a0a0a;
    }

    .dealroom-chat {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1001;
        background: #0a0a0a;
    }

    .dealroom-chat-header {
        padding-top: 80px;
        background: #000000;
    }

    .dealroom-message {
        max-width: 85%;
    }
}

@media (max-width: 576px) {
    .dealroom-message {
        max-width: 90%;
    }

    .dealroom-message-image {
        max-width: 200px;
    }

    .dealroom-summary-bar {
        padding: 6px 12px;
        font-size: 0.78rem;
    }

    .dealroom-summary-item {
        margin-right: 12px;
    }

    .dealroom-select-container {
        margin-top: 80px;
        border-radius: 0;
        box-shadow: none;
    }

    .dealroom-select-item {
        padding: 12px;
    }

    .dealroom-select-item-icon {
        width: 40px;
        height: 40px;
    }


    .dealroom-message-audio audio {
        max-width: 200px;
    }

    .dealroom-gallery-item {
        width: 33.333%;
    }

    .dealroom-gallery-item img {
        height: 90px;
    }

    .dealroom-attach-menu {
        min-width: 140px;
    }
}

/* ============================================
   DEAL ROOM - Chat Features Dark Overrides
   (Replies, Ticks, Voice, Pins, Gallery, etc.)
   ============================================ */

/* Reply reference (inline in message) */
.dealroom-reply-ref {
    border-left: 3px solid #cc0000;
    background: rgba(204, 0, 0, 0.1);
    padding: 6px 10px;
    margin-bottom: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    max-width: 100%;
}

.dealroom-reply-ref-name {
    font-weight: 600;
    color: #cc0000;
    margin-right: 6px;
}

.dealroom-reply-ref-text {
    color: #adb5bd;
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Reply preview bar (above input) */
.dealroom-reply-preview {
    display: none;
    align-items: center;
    padding: 8px 12px;
    background: #1a1a1a;
    border-left: 3px solid #cc0000;
    border-radius: 8px 8px 0 0;
}

.dealroom-reply-preview-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.dealroom-reply-preview-name {
    font-weight: 600;
    color: #cc0000;
    font-size: 0.8rem;
    display: block;
}

.dealroom-reply-preview-text {
    font-size: 0.8rem;
    color: #adb5bd;
    white-space: pre-wrap;
    word-break: break-word;
    display: block;
}

.dealroom-reply-preview-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #adb5bd;
    cursor: pointer;
    padding: 0 0 0 8px;
    line-height: 1;
}

/* Reply/pin hover buttons removed — context menu replaces them */


/* --- Context Menu (long-press / right-click) --- */
/* ─── WhatsApp-style message context menu (dark) ───
   See style.css for the light-theme master + mode notes. */
.dealroom-context-menu {
    display: none;
    flex-direction: column;
    position: fixed;
    z-index: 1202;
    background: #233138;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
    padding: 6px;
    min-width: 232px;
    overflow: hidden;
    transform-origin: top center;
}

.dealroom-context-menu.is-open {
    display: flex;
    animation: dealroomCtxPop 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes dealroomCtxPop {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

.dealroom-ctx-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 11px 14px;
    border: none;
    background: none;
    font-size: 0.95rem;
    color: #e9edef;
    cursor: pointer;
    text-align: left;
    width: 100%;
    border-radius: 9px;
    transition: background 0.12s;
}

.dealroom-ctx-item:hover {
    background: #2a3942;
}

.dealroom-ctx-item:active {
    background: #31424c;
}

.dealroom-ctx-item i {
    font-size: 1.2rem;
    width: 22px;
    text-align: center;
    color: #8696a0;
}

.dealroom-ctx-delete,
.dealroom-ctx-delete i {
    color: #f15c6d;
}

/* ─── Touch mode: lift + blur backdrop (dark) ─── */
.dealroom-ctx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.dealroom-ctx-backdrop.is-open {
    opacity: 1;
}

.dealroom-ctx-lift {
    position: fixed;
    z-index: 1201;
    box-sizing: border-box;
    margin: 0 !important;
    pointer-events: none;
    transform-origin: center;
    animation: dealroomLiftPop 0.18s ease both;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.5));
}

@keyframes dealroomLiftPop {
    from { transform: scale(0.97); }
    to   { transform: scale(1); }
}

/* ─── Mouse mode: hover chevron affordance (dark) ─── */
.dealroom-msg-chevron {
    position: fixed;
    z-index: 1150;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(42, 57, 66, 0.96);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
    color: #cfd9de;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.dealroom-msg-chevron.is-visible {
    display: flex;
    opacity: 1;
}

.dealroom-msg-chevron:hover {
    background: #31424c;
    color: #e9edef;
}

.dealroom-msg-chevron i {
    font-size: 1.15rem;
    line-height: 1;
}

/* ============================================
   DEAL-ROOM BUCKETS + GLANCE + ROW MENU (Dark)
   ============================================ */

.dealroom-bucket-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: #0a0a0a;
    border-bottom: 1px solid #333333;
}

.dealroom-bucket-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 8px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #999999;
    background: transparent;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.dealroom-bucket-tab:hover {
    background: #1a1a1a;
    color: #f7f9f9;
    text-decoration: none;
}

/* Dark: selected segment is a white accent pill (brand red reads poorly on
   black at small sizes; white is the established active accent in this theme). */
.dealroom-bucket-tab.active {
    background: #ffffff;
    color: #000000;
}

.dealroom-bucket-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
}

.dealroom-bucket-tab.active .dealroom-bucket-tab-count {
    background: rgba(0, 0, 0, 0.18);
    color: #000000;
}

.dealroom-room-glance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex-shrink: 0;
    margin-right: 8px;
    align-self: center;
}

.dealroom-room-glance.glance-active::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2eca8b;
}

.dealroom-room-glance.glance-silent::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid #5a6872;
    background: transparent;
    box-sizing: border-box;
}

.dealroom-room-glance.glance-completed i {
    font-size: 1rem;
    color: #5b9bff;
    line-height: 1;
}

.dealroom-room-glance.glance-blocked i {
    font-size: 1rem;
    color: #8696a0;
    line-height: 1;
}

.dealroom-room-item.glance-silent {
    opacity: 0.6;
}

.dealroom-room-item.glance-completed {
    opacity: 0.85;
}

.dealroom-room-muted-icon {
    font-size: 0.85rem;
    color: #8696a0;
    margin-left: 6px;
    flex-shrink: 0;
}

.dealroom-room-kebab {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(42, 57, 66, 0.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    color: #cfd9de;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.dealroom-room-item:hover .dealroom-room-kebab {
    display: inline-flex;
}

.dealroom-room-kebab:hover {
    background: #31424c;
    color: #ffffff;
}

.dealroom-room-kebab i {
    font-size: 1.05rem;
    line-height: 1;
}

@media (pointer: coarse) {
    .dealroom-room-kebab { display: none !important; }
}

.dealroom-row-context-menu .dealroom-ctx-markread {
    color: #e9edef;
}

.dealroom-row-context-menu .dealroom-ctx-markread i {
    color: #8696a0;
}

/* Blocked read-only bar (dark). */
.dealroom-blocked-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #1a0d0d;
    border-top: 1px solid #3a1f1f;
}

.dealroom-blocked-bar-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(204, 0, 0, 0.18);
    color: #ff5a5a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.dealroom-blocked-bar-text {
    flex: 1;
    min-width: 0;
}

.dealroom-blocked-bar-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: #f7f9f9;
}

.dealroom-blocked-bar-sub {
    font-size: 0.82rem;
    color: #999999;
    margin-top: 2px;
}

.dealroom-blocked-bar-btn {
    flex-shrink: 0;
    padding: 8px 18px;
    border: none;
    border-radius: 9999px;
    background: #ffffff;
    color: #000000;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.dealroom-blocked-bar-btn:hover {
    background: #e7e9ea;
}

.dealroom-blocked-bar-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Edit context menu item */
.dealroom-ctx-edit {
    color: #e9edef;
}

.dealroom-ctx-edit i {
    color: #8696a0;
}

/* Edited message indicator */
/* Shopping-agent provenance on a bubble (message.agent_generated). Same
   weight as the "edited" label — visible, never loud. */
.dealroom-agent-label { font-size: 10px; font-weight: 700; letter-spacing: .02em; opacity: .85; margin-right: 2px; }
.dealroom-edited-label {
    font-size: 0.7em;
    color: #777;
    font-style: italic;
    margin-right: 2px;
}

.dealroom-message.mine .dealroom-edited-label {
    color: rgba(255, 255, 255, 0.5);
}

/* Edit mode: highlight message being edited */
.dealroom-message.dealroom-editing .dealroom-message-bubble {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 12px;
}

/* Edit overlay bar */
.dealroom-edit-overlay {
    display: none;
    padding: 8px 12px;
    background: #2a2a2a;
    border-top: 1px solid #444;
    border-left: 3px solid #fff;
    margin: 0 12px 4px;
    border-radius: 4px;
}

.dealroom-edit-bar-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.dealroom-edit-bar-header span {
    flex: 1;
}

.dealroom-edit-cancel {
    background: none;
    border: none;
    color: #777;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 2px 4px;
    line-height: 1;
}

.dealroom-edit-cancel:hover {
    color: #fff;
}

.dealroom-edit-bar-preview {
    font-size: 0.8rem;
    color: #999;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Deleted message stub */
.dealroom-deleted-stub {
    background: transparent !important;
    border: 1px dashed #555;
    color: #777 !important;
    font-style: italic;
    font-size: 0.85rem;
    padding: 8px 16px !important;
    border-radius: 24px;
}

.dealroom-deleted-stub i {
    margin-right: 4px;
    font-style: normal;
}

.dealroom-message.mine .dealroom-deleted-stub {
    border-color: #555;
}

/* Message highlight animation on scroll-to */
.dealroom-message-highlight {
    animation: dealroom-highlight-flash 2s ease;
}

@keyframes dealroom-highlight-flash {
    0%, 100% { background: transparent; }
    20%, 60% { background: rgba(204, 0, 0, 0.15); }
}

/* --- Delivery Status Ticks (4 states) --- */
.dealroom-tick {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
}

.dealroom-tick i {
    font-size: 0.7rem;
}

.dealroom-tick i + i {
    margin-left: -4px;
}

/* Pending (clock) */
.dealroom-tick-pending {
    color: #6b7280;
}

/* Sent (single gray check) */
.dealroom-tick-sent {
    color: #6b7280;
}

/* Delivered (double gray check) */
.dealroom-tick-delivered {
    color: #6b7280;
}

/* Read (double red check) */
.dealroom-tick-read {
    color: #cc0000;
}

/* On mine (white) bubble: adjust for contrast */
.dealroom-message.mine .dealroom-tick-pending {
    color: rgba(0, 0, 0, 0.35);
}

.dealroom-message.mine .dealroom-tick-sent {
    color: rgba(0, 0, 0, 0.4);
}

.dealroom-message.mine .dealroom-tick-delivered {
    color: rgba(0, 0, 0, 0.4);
}

.dealroom-message.mine .dealroom-tick-read {
    color: #cc0000;
}

/* Failed indicator */
.dealroom-tick-failed {
    color: #ff4444;
    cursor: pointer;
}

/* Image/location meta overlay */
.dealroom-message-image .dealroom-message-meta,
.dealroom-message-location .dealroom-message-meta {
    position: absolute;
    bottom: 6px;
    right: 8px;
    float: none;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.6rem;
    margin: 0;
}

.dealroom-message-image .dealroom-message-meta .dealroom-tick,
.dealroom-message-location .dealroom-message-meta .dealroom-tick {
    color: rgba(255, 255, 255, 0.8);
}

.dealroom-message-image .dealroom-message-meta .dealroom-tick-read,
.dealroom-message-location .dealroom-message-meta .dealroom-tick-read {
    color: #ffffff;
}

/* Location container needs relative */
.dealroom-message-location {
    position: relative;
}

/* Audio meta */
.dealroom-message-audio .dealroom-message-meta {
    float: none;
    display: inline-flex;
    margin: 4px 0 0 0;
    padding: 0 4px;
}

/* File meta */
.dealroom-message-file .dealroom-message-meta {
    float: none;
    margin-left: auto;
}

/* Quote meta */
.dealroom-quote-card .dealroom-message-meta {
    float: none;
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    clear: both;
}

/* Typing indicator */
.dealroom-typing-indicator {
    display: flex;
    align-items: center;
    padding: 8px 16px;
}

.dealroom-typing-dots {
    display: flex;
    align-items: center;
    background: #2a2a2a;
    border-radius: 18px;
    padding: 10px 16px;
}

.dealroom-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6b7280;
    margin-left: 3px;
    animation: dealroom-typing-bounce 1.2s infinite;
}

.dealroom-typing-dots span:first-child {
    margin-left: 0;
    animation-delay: 0s;
}

.dealroom-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.dealroom-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dealroom-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* Voice notes */
/* .dealroom-mic-btn appearance is now unified with the other composer action
   icons (attach / send / deal) up in the IG-style composer block. Only the
   recording-state rules remain below. */

.dealroom-recording-ui {
    display: none;
    align-items: center;
    flex: 1;
    padding: 0 8px;
}

.dealroom-recording-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cc0000;
    animation: dealroom-recording-pulse 1s infinite;
    margin-right: 8px;
    flex-shrink: 0;
}

@keyframes dealroom-recording-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.dealroom-recording-timer {
    font-size: 0.85rem;
    color: #cc0000;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex: 1;
}

.dealroom-recording-cancel,
.dealroom-recording-stop {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dealroom-recording-cancel {
    color: #adb5bd;
}

.dealroom-recording-cancel:hover {
    color: #cc0000;
}

.dealroom-recording-stop {
    color: #cc0000;
    background: rgba(204, 0, 0, 0.15);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    margin-left: 8px;
}

.dealroom-recording-stop:hover {
    background: rgba(204, 0, 0, 0.2);
}

.dealroom-message-audio {
    padding: 4px 0;
    width: fit-content;
    max-width: 100%;
}

.dealroom-message.mine .dealroom-message-audio {
    margin-left: auto;
}

.dealroom-message-audio audio {
    max-width: 260px;
    height: 36px;
    border-radius: 18px;
    filter: invert(0.85) hue-rotate(180deg);
}

/* Counter-offer button */
.dealroom-counter-btn {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #fff !important;
    border-radius: 9999px;
    font-size: 0.8rem;
    padding: 3px 12px;
}

.dealroom-counter-btn:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
}

/* Attachment menu & location sharing */
.dealroom-attach-wrapper {
    position: relative;
}

.dealroom-attach-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    padding: 6px 0;
    min-width: 160px;
    z-index: 100;
    margin-bottom: 6px;
}

.dealroom-attach-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: #e4e6ea;
    transition: background 0.15s;
}

.dealroom-attach-option:hover {
    background: #2a2a2a;
}

.dealroom-attach-option i {
    font-size: 18px;
    color: #cc0000;
    margin-right: 10px;
}

.dealroom-message-location {
    border-radius: 12px;
    overflow: hidden;
    max-width: 280px;
}

.dealroom-message-location a {
    display: block;
    text-decoration: none;
}

.dealroom-message-location img {
    width: 100%;
    display: block;
}

.dealroom-location-label {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 6px 12px;
    font-size: 0.8rem;
    margin-top: -1px;
}

.dealroom-location-label i {
    color: #cc0000;
}

.dealroom-location-map-placeholder {
    width: 280px;
    height: 160px;
    background: linear-gradient(135deg, #1a2a1a 0%, #1e2e1e 30%, #223222 60%, #1a2a1a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dealroom-location-map-placeholder i {
    font-size: 2.5rem;
    color: #cc0000;
}

.dealroom-location-map-placeholder span {
    font-size: 0.75rem;
    color: #999999;
    font-family: monospace;
}

/* Pin strip */
.dealroom-pinned-strip {
    background: #1e1a0e;
    border-bottom: 1px solid #3d2e00;
    padding: 0;
    max-height: 120px;
    overflow-y: auto;
}

.dealroom-pinned-header {
    padding: 6px 16px 2px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dealroom-pinned-header i {
    margin-right: 4px;
}

.dealroom-pinned-item {
    display: flex;
    align-items: center;
    padding: 4px 16px 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.dealroom-pinned-item:hover {
    background: rgba(251, 191, 36, 0.06);
}

.dealroom-pinned-text {
    flex: 1;
    font-size: 0.82rem;
    color: #d1d5db;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dealroom-unpin-btn {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0 0 0 8px;
    font-size: 1.1rem;
    line-height: 1;
}

.dealroom-unpin-btn:hover {
    color: #cc0000;
}

/* Deal summary bar */
.dealroom-summary-bar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: #121212;
    border-bottom: 1px solid #333333;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.dealroom-summary-item {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.dealroom-summary-label {
    color: #999999;
    margin-right: 6px;
    font-weight: 600;
}

.dealroom-summary-value {
    font-weight: 600;
    color: #e0e0e0;
}

.dealroom-summary-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 9999px;
    margin-left: 6px;
    font-weight: 600;
}

.dealroom-summary-badge.badge-warning {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.dealroom-summary-badge.badge-success {
    background: rgba(92, 216, 92, 0.15);
    color: #5cd85c;
}

.dealroom-summary-badge.badge-secondary {
    background: rgba(153, 153, 153, 0.15);
    color: #999999;
}

.dealroom-summary-toggle {
    margin-left: auto;
    background: none;
    border: none;
    color: #999999;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
}

.dealroom-summary-toggle:hover {
    color: #ffffff;
}

/* --- Deal lifecycle surfaces (status bar, deal_update / deal_review cards) ---
   Dark counterpart of the block in style.css. These were previously hardcoded
   LIGHT inline styles in dealroom.php / js/dealroom.js, so dark mode showed
   bright white cards with dark text. MIRRORED IN style.css — edit both. */
.dealroom-deal-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #333333;
    cursor: pointer;
}

.dealroom-deal-update,
.dealroom-deal-review {
    display: flex;
    align-items: center;
    margin: 8px 24px;
    border-radius: 14px;
    border-left: 3px solid #8492a6;
    cursor: pointer;
}

.dealroom-deal-update {
    padding: 12px 14px;
    gap: 10px;
    background: #1a1a1a;
}

.dealroom-deal-review {
    padding: 14px;
    gap: 12px;
    background: #1a1a1a;
    border-left-color: #2eca8b;
}

.dealroom-deal-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dealroom-deal-review-icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: rgba(46, 202, 139, 0.16);
}

.dealroom-deal-review-icon i {
    color: #2eca8b;
    font-size: 22px;
}

.dealroom-deal-update-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dealroom-deal-update-text {
    font-size: 13px;
    color: #e0e0e0;
    margin-top: 4px;
}

.dealroom-deal-review-title {
    font-size: 15px;
    font-weight: 700;
    color: #e0e0e0;
}

.dealroom-deal-review-sub {
    font-size: 12px;
    color: #999999;
}

.dealroom-deal-card-chevron {
    color: #999999;
}

/* Deal-card timeline connector between two history dots. */
.dealroom-timeline-connector {
    width: 2px;
    height: 20px;
    background: #333333;
    margin: 2px auto;
}

/* Keyboard focus ring — message bubbles and the room kebab are both keyboard
   entry points into their context menus (dealroom.js).
   MIRRORED IN style.css — edit both. */
.dealroom-message:focus-visible,
.dealroom-room-kebab:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    border-radius: 8px;
}

/* Quick reply chips */
.dealroom-chip {
    flex-shrink: 0;
    border: 1px solid #333333;
    background: #1a1a1a;
    color: #e0e0e0;
    padding: 5px 14px;
    border-radius: 9999px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    margin-left: 8px;
}

.dealroom-chip:first-child {
    margin-left: 0;
}

.dealroom-chip:hover {
    border-color: #ffffff;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Quick reply chips container */
.dealroom-quick-chips {
    display: flex;
    overflow-x: auto;
    padding: 8px 16px 4px;
    scrollbar-width: none;
}

.dealroom-quick-chips::-webkit-scrollbar {
    display: none;
}

/* Media gallery */
.dealroom-gallery-btn {
    background: none;
    border: none;
    color: #999999;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s;
}

.dealroom-gallery-btn:hover {
    color: #ffffff;
}

.dealroom-gallery-tabs {
    display: flex;
    border-bottom: 1px solid #333333;
    margin-bottom: 12px;
}

.dealroom-gallery-tab {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    cursor: pointer;
    color: #999999;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}

.dealroom-gallery-tab.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.dealroom-gallery-tab:hover {
    color: #e0e0e0;
}

.dealroom-gallery-tab i {
    margin-right: 4px;
}

.dealroom-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -3px;
    max-height: 400px;
    overflow-y: auto;
}

.dealroom-gallery-item {
    width: 33.333%;
    padding: 3px;
    position: relative;
}

.dealroom-gallery-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.dealroom-gallery-item img:hover {
    opacity: 0.85;
}

.dealroom-gallery-proof-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(5, 150, 105, 0.85);
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.dealroom-gallery-file-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #333333;
}

.dealroom-gallery-file-item i {
    font-size: 24px;
    color: #999999;
    margin-right: 12px;
    flex-shrink: 0;
}

.dealroom-gallery-file-info {
    flex: 1;
    min-width: 0;
}

.dealroom-gallery-file-info span,
.dealroom-gallery-file-info a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #e0e0e0;
}

.dealroom-gallery-file-info a:hover {
    color: #ffffff;
}

.dealroom-gallery-file-item audio {
    max-width: 200px;
    height: 32px;
    margin-left: 8px;
    filter: invert(0.85) hue-rotate(180deg);
}

/* Loader */
.dealroom-loader {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dealroom-loader span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    margin: 0 3px;
    animation: dealroom-typing-bounce 1.2s infinite;
}

.dealroom-loader span:nth-child(2) {
    animation-delay: 0.2s;
}

.dealroom-loader span:nth-child(3) {
    animation-delay: 0.4s;
}

/* ============================================
   ADDSHOP PAGE - STUDIO HOME CARD
   Hero card styling for dark mode
   ============================================ */


/* Special overlay - same as light mode for consistency */


/* ============================================
   NOUISLIDER - Price Range Slider Styles (Dark Mode)
   ============================================ */

.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

.noUi-target {
  position: relative;
  direction: ltr;
  background: #333333;
  border-radius: 4px;
  border: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.noUi-base {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.noUi-origin {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
}

.noUi-handle {
  position: relative;
  z-index: 1;
}

.noUi-stacking .noUi-handle {
  z-index: 10;
}

.noUi-state-tap .noUi-origin {
  transition: left 0.3s, top 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

/* Horizontal slider */
.noUi-horizontal {
  height: 8px;
}

.noUi-horizontal .noUi-handle {
  width: 22px;
  height: 22px;
  left: -11px;
  top: -7px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #cc0000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 10;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.noUi-horizontal .noUi-handle:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.noUi-horizontal .noUi-handle:active {
  transform: scale(1.15);
}

.noUi-connect {
  background: linear-gradient(90deg, #cc0000, #e43f52);
  border-radius: 4px;
  transition: background 0.3s ease;
}

/* Fix for range slider - only fill between handles */
.noUi-connects {
  border-radius: 4px;
  overflow: hidden;
}

/* Ensure connect doesn't extend past the slider */
.noUi-horizontal .noUi-connect {
  width: auto !important;
  max-width: 100%;
}

.noUi-origin {
  overflow: visible;
}

/* Handle focus state */
.noUi-handle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* Handle inner elements (remove default styling) */
.noUi-handle:before,
.noUi-handle:after {
  display: none;
}

/* Draggable handle styling */
.noUi-draggable {
  cursor: ew-resize;
}

/* Active handle state */
.noUi-active {
  box-shadow: 0 4px 16px rgba(204, 0, 0, 0.5);
}

/* Background origin masks the connect bar after the max handle */
.noUi-background {
  background: #333333;
  border-radius: 0 4px 4px 0;
}

/* Price range modal specific styles */
#price-popup .noUi-target {
  margin: 20px 0;
}

#slider-range {
  margin: 15px 10px;
}

/* Slider labels for dark mode */
.slider-labels {
  margin-top: 10px;
  color: #b0b0b0;
}

/* ==========================================================================
   NOTIFICATIONS PAGE - DARK MODE
   ========================================================================== */
.notifications-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.notifications-page-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #e0e0e0;
}
.notifications-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.notification-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.notification-filter-tab {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #b0b0b0;
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.notification-filter-tab:hover {
    background-color: rgba(204, 0, 0, 0.15);
    color: #ff6666;
    border-color: rgba(204, 0, 0, 0.3);
    text-decoration: none;
}
.notification-filter-tab.active {
    color: #fff;
    background-color: #cc0000;
    border-color: #cc0000;
}
.notification-card {
    display: flex;
    align-items: flex-start;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}
.notification-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.notification-card.unread {
    border-left-color: #cc0000;
    background-color: rgba(204, 0, 0, 0.06);
}
.notification-card.read {
    opacity: 0.75;
}
.notification-card.read:hover {
    opacity: 1;
}
.notification-card-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    font-size: 20px;
}
.notification-card-content {
    flex: 1;
    min-width: 0;
}
.notification-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.notification-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
    line-height: 1.4;
}
.notification-card.unread .notification-card-title {
    font-weight: 700;
}
.notification-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.notification-card-actions button {
    background: none;
    border: none;
    padding: 4px 6px;
    color: #666666;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    font-size: 16px;
    line-height: 1;
}
.notification-card-actions .btn-mark-read:hover {
    color: #2eca8b;
    background-color: rgba(46, 202, 139, 0.15);
}
.notification-card-actions .btn-delete-notification:hover {
    color: #e43f52;
    background-color: rgba(228, 63, 82, 0.15);
}
.notification-card-body {
    font-size: 13px;
    color: #a0a0a0;
    line-height: 1.5;
    margin-top: 4px;
}
.notification-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.notification-card-type {
    font-size: 11px;
    font-weight: 600;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.notification-card-time {
    font-size: 12px;
    color: #777777;
}
#notificationsLoading {
    text-align: center;
    padding: 24px;
}
.notifications-empty {
    text-align: center;
    padding: 60px 20px;
}
.notifications-empty .empty-icon {
    font-size: 48px;
    color: #444444;
    margin-bottom: 16px;
}
.notifications-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 8px;
}
.notifications-empty p {
    font-size: 14px;
    color: #777777;
    margin: 0;
}
@media (max-width: 767px) {
    .notifications-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .notification-card {
        padding: 12px;
    }
    .notification-card-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 16px;
        margin-right: 10px;
    }
    .notification-card-content {
        flex: 1;
        min-width: 0;
    }
    .notification-card-header {
        flex-direction: row;
        gap: 6px;
    }
    .notification-card-actions {
        flex-shrink: 0;
    }
    .notification-card-body {
        font-size: 12.5px;
    }
    .notification-card-meta {
        flex-wrap: wrap;
        gap: 6px 10px;
    }
}

/* Activity Feed Segment Toggle */
.notifications-segment-toggle {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 9999px;
    margin-bottom: 16px;
    width: fit-content;
}

.segment-tab {
    padding: 6px 20px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    color: #b0b0b0;
    text-decoration: none !important;
    transition: all 0.2s ease;
    font-family: 'Ubuntu', sans-serif;
}

.segment-tab:hover {
    color: #e0e0e0;
}

.segment-tab.active {
    background: #2a2a2a;
    color: #ff6666;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Activity card — reuses notification card styles; keeps the icon circular
   (the base .notification-card-icon is a rounded square). */
.activity-card .notification-card-icon {
    border-radius: 50%;
}

/* ==========================================================================
   FAVOURITES HERO, BOOKMARKS & TABS - DARK MODE
   Monochrome overrides for fav.php and myfavs.php redesign
   ========================================================================== */

/* --- Hero Section --- */
.fav-hero {
  position: relative;
  padding: 80px 0 48px;
  overflow: hidden;
}

.fav-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(0.35);
  transform: scale(1.1);
  z-index: 0;
}

.fav-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.85) 100%);
  z-index: 1;
}

.fav-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 50%, #000000 100%);
  z-index: 0;
}

.fav-hero-content {
  position: relative;
  z-index: 2;
}

/* Creator pill - glassmorphism dark */
.fav-hero-creator {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 50px;
  padding: 6px 16px 6px 6px;
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.fav-hero-creator:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  text-decoration: none;
}

.fav-hero-creator img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.fav-hero h1 {
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 16px 0 12px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Meta badges */
.fav-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fav-hero-meta .badge {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #cccccc !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Action buttons row */
.fav-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* Share & Bookmark buttons - dark glassmorphism */
.fav-share-btn,
.fav-bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #d0d0d0;
  cursor: pointer;
  transition: all 0.2s;
}

.fav-share-btn:hover,
.fav-bookmark-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  text-decoration: none;
}

/* Bookmarked active state - inverted monochrome */
.fav-bookmark-btn.bookmarked {
  background: #ffffff;
  color: #000000;
  border-color: transparent;
}

.fav-bookmark-btn.bookmarked:hover {
  background: #e0e0e0;
  color: #000000;
}

/* Copied-to-clipboard toast */
.fav-share-copied {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #ffffff;
  color: #000000;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.fav-share-copied.show {
  transform: translateX(-50%) translateY(0);
}

.fav-share-copied.error {
  background: #d32f2f;
  color: #ffffff;
}

/* --- Bookmarked card creator badge (myfavs.php) --- */
.fav-card-creator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.fav-card-creator img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #333333;
}

.fav-card-creator span {
  font-size: 13px;
  color: #999999;
  font-weight: 400;
}

/* --- Myfavs pill tabs - monochrome --- */
.fav-tabs .nav-link {
  color: #999999;
  font-weight: 500;
  border-radius: 50px;
  padding: 8px 24px;
  font-size: 15px;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.fav-tabs .nav-link.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.fav-tabs .nav-link:not(.active):hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e0e0e0;
  border-color: rgba(255, 255, 255, 0.1);
}

.fav-tabs .nav-link .badge {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #cccccc !important;
}

.fav-tabs .nav-link.active .badge {
  background: rgba(0, 0, 0, 0.12) !important;
  color: #333333 !important;
}

/* --- Responsive --- */
@media (max-width: 767.98px) {
  .fav-hero {
    padding: 60px 0 32px;
  }

  .fav-hero h1 {
    font-size: 1.6rem;
  }

  .fav-hero-actions {
    gap: 8px;
  }

  .fav-share-btn,
  .fav-bookmark-btn {
    padding: 6px 14px;
    font-size: 13px;
  }
}

/* ============================================
   NOTIFICATION ICON, BADGE & DROPDOWN
   Monochrome dark theme overrides
   ============================================ */

/* ── Notification Icon & Badge ── */
.notification-btn-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.notification-icon-trigger {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    transition: all 0.3s ease;
    padding: 0 !important;
    line-height: 1;
    overflow: visible;
}
.notification-icon-trigger .uil-bell {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
}
.notification-icon-trigger:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}
.notification-icon-trigger:hover .uil-bell {
    color: #ffffff;
}
.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 8px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #000;
    background-color: #ffffff;
    border-radius: 10px;
    border: 1.5px solid #0a0a0a;
    pointer-events: none;
    box-sizing: content-box;
    z-index: 2;
}

/* My Finds activity badge — monochrome variant of the notification badge.
   Absolute on the profile icon; inline in the "My Finds" dropdown row. */
.myfinds-activity-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 8px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #000;
    background-color: #ffffff;
    border-radius: 10px;
    border: 1.5px solid #0a0a0a;
    pointer-events: none;
    box-sizing: content-box;
    z-index: 2;
}
.myfinds-activity-badge--inline {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    border: none;
    height: 18px;
    line-height: 18px;
    min-width: 12px;
    border-radius: 9px;
}
/* Mobile hamburger variant. The live toggle is the compact 40×40
   "YouTube-style" burger from the ≤991px media query (it's display:none
   above that), with 18px lines centered in the circle. Two things to undo
   for the badge:
   1. Specificity: the `#topnav .navbar-toggle span` rules (base hamburger
      styling + the ≤991px variants, including the .open X-animation that
      rotates :last-child and fades :nth-child(2) — the badge matches both)
      outrank `.myfinds-activity-badge` and restyle the badge into a line /
      hide it. The span.* selectors below tie or beat them and win on source
      order — keep these AFTER the base badge rules.
   2. Geometry: pin the chip to the burger glyph's top-right corner
      (standard icon-badge overlap) instead of the box-relative default. */
#topnav .navbar-toggle span.myfinds-activity-badge {
    top: -4px;
    right: -4px;
    left: auto;
    width: auto;
    height: 16px;
    min-width: 8px;
    margin: 0;
    display: block;
    background-color: #ffffff;
    transition: none;
    transform: none;
}
#topnav .navbar-toggle.open span.myfinds-activity-badge {
    top: -4px;
    width: auto;
    transform: none;
    visibility: visible;
    opacity: 1;
    background-color: #ffffff;
}

/* ── Notification Dropdown Panel ── */
.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: 360px;
    max-height: 480px;
    z-index: 1000;
    background-color: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notification-dropdown.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
/* Invisible bridge so hover doesn't break crossing the gap */
.notification-btn-wrapper::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 12px;
    background: transparent;
}
.notification-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 14px;
    width: 12px;
    height: 12px;
    background-color: #1a1a1a;
    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
    transform: rotate(45deg);
    z-index: 1;
}
.notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    border-bottom: 1px solid #333333;
}
.notification-dropdown-title-text {
    font-size: 15px;
    font-weight: 700;
    color: #e0e0e0;
}
.notification-dropdown-mark-all {
    font-size: 12px;
    color: #cccccc;
    text-decoration: none;
    font-weight: 600;
}
.notification-dropdown-mark-all:hover {
    text-decoration: underline;
    color: #ffffff;
}
.notification-dropdown-body {
    overflow-y: auto;
    max-height: 350px;
    flex: 1;
}
.notification-dropdown-loading {
    text-align: center;
    padding: 24px;
}
.notification-dropdown-empty {
    text-align: center;
    padding: 32px 16px;
    color: #999999;
}
.notification-dropdown-empty .uil-bell {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}
.notification-dropdown-empty p {
    margin: 0;
    font-size: 13px;
}
.notification-dropdown-footer {
    border-top: 1px solid #333333;
    text-align: center;
    padding: 2px;
}
.notification-dropdown-footer a {
    font-size: 13px;
    font-weight: 600;
    color: #cccccc;
    text-decoration: none;
}
.notification-dropdown-footer a:hover {
    text-decoration: underline;
    color: #ffffff;
}

/* ── Dropdown Notification Items ── */
.notification-dropdown-item {
    display: flex;
    align-items: flex-start;
    padding: 7px 10px;
    text-decoration: none;
    color: #e0e0e0;
    transition: background-color 0.15s ease;
    border-left: 3px solid transparent;
}
.notification-dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    color: #e0e0e0;
}
.notification-dropdown-item.unread {
    background-color: rgba(255, 255, 255, 0.03);
    border-left-color: #ffffff;
}
.notification-dropdown-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 15px;
}
.notification-dropdown-content {
    flex: 1;
    min-width: 0;
}
.notification-dropdown-item .notification-dropdown-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notification-dropdown-item.unread .notification-dropdown-title {
    font-weight: 700;
}
.notification-dropdown-text {
    font-size: 12px;
    color: #999999;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notification-dropdown-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}
.notification-dropdown-time {
    font-size: 10px;
    color: #666666;
    margin-top: 0;
    line-height: 1.2;
}
.notification-entity-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .notification-dropdown {
        width: 300px;
        right: -60px;
    }
    .notification-dropdown::before {
        right: 74px;
    }
}

/* Activity card — reuses notification card styles; keeps the icon circular
   (the base .notification-card-icon is a rounded square). */
.activity-card .notification-card-icon {
    border-radius: 50%;
}

/* ==========================================================================
   Bookings Pages (Dark Mode) — base + dark overrides
   Both manage-bookings.php and my-bookings.php
   Note: style-monochrome.css loads INSTEAD of style.css, so ALL base styles
   must be duplicated here with dark-mode color values.
   ========================================================================== */

.bookings-page-header {
    padding: 100px 0 24px;
    background: #0a0a0a;
}
.bookings-page-header .breadcrumb {
    background-color: transparent !important;
}

/* Stat cards */
.bookings-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.4rem;
}
.bookings-stat-icon.pending { background: rgba(241,116,37,0.12); color: #f17425; }
.bookings-stat-icon.confirmed { background: rgba(46,202,139,0.12); color: #2eca8b; }
.bookings-stat-icon.completed { background: rgba(59,130,246,0.12); color: #3b82f6; }
.bookings-stat-icon.cancelled { background: rgba(228,63,82,0.12); color: #e43f52; }

.bookings-stat-card {
    border: 1px solid rgba(255,255,255,0.08);
}
.bookings-stat-count {
    font-family: 'Ubuntu', sans-serif;
}

/* Status badges */
.booking-badge {
    font-size: 0.75rem;
    padding: 0.35em 0.85em;
    border-radius: 50rem;
}
.booking-badge.pending { background: rgba(241,116,37,0.12); color: #f17425; }
.booking-badge.confirmed { background: rgba(46,202,139,0.12); color: #2eca8b; }
.booking-badge.completed { background: rgba(59,130,246,0.12); color: #3b82f6; }
.booking-badge.cancelled { background: rgba(228,63,82,0.12); color: #e43f52; }

/* Booking card elements */
.booking-card-avatar {
    width: 44px;
    height: 44px;
    object-fit: cover;
}
.booking-customer-msg {
    background: rgba(255,255,255,0.04);
    border-left: 3px solid #cc0000;
}
.booking-meta-row {
    gap: 12px;
}
.booking-actions-row {
    gap: 6px;
}

/* Action buttons */
.booking-btn-confirm {
    background: rgba(46,202,139,0.12);
    color: #2eca8b;
    border: 1px solid rgba(46,202,139,0.3);
}
.booking-btn-confirm:hover {
    background: rgba(46,202,139,0.2);
    color: #2eca8b;
}
.booking-btn-complete {
    background: rgba(59,130,246,0.12);
    color: #3b82f6;
    border: 1px solid rgba(59,130,246,0.3);
}
.booking-btn-complete:hover {
    background: rgba(59,130,246,0.2);
    color: #3b82f6;
}
.booking-btn-cancel {
    background: rgba(228,63,82,0.12);
    color: #e43f52;
    border: 1px solid rgba(228,63,82,0.3);
}
.booking-btn-cancel:hover {
    background: rgba(228,63,82,0.2);
    color: #e43f52;
}

/* Empty state */


/* Success modal */
.success-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(46,202,139,0.12);
}
.success-modal-icon i {
    font-size: 2rem;
    color: #2eca8b;
}

/* Calendar mini view */
.bookings-calendar {
    border: 1px solid rgba(255,255,255,0.08);
}
.bookings-calendar .cal-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bookings-calendar .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 8px;
}
.bookings-calendar .cal-day-label {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #8492a6;
    padding: 4px 0;
    text-transform: uppercase;
}
.bookings-calendar .cal-day {
    text-align: center;
    padding: 6px 2px;
    font-size: 0.8rem;
    border-radius: 8px;
    cursor: default;
    position: relative;
}
.bookings-calendar .cal-day.other-month {
    color: #555;
}
.bookings-calendar .cal-day.today {
    font-weight: 700;
    background: rgba(204,0,0,0.15);
    color: #ff4444;
}
.bookings-calendar .cal-day.has-booking::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #cc0000;
    margin: 2px auto 0;
}
.bookings-calendar .cal-day.has-booking.status-confirmed::after {
    background: #2eca8b;
}
.bookings-calendar .cal-day.has-booking.status-completed::after {
    background: #3b82f6;
}
.bookings-calendar.sticky-top {
    top: 80px;
}

/* Calendar legend dots */
.cal-legend-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
}
.cal-legend-dot.pending { background: #cc0000; }
.cal-legend-dot.confirmed { background: #2eca8b; }
.cal-legend-dot.completed { background: #3b82f6; }

/* Logout modal icon */


/* Calendar day clickable + selected state */
.bookings-calendar .cal-day:not(.other-month) {
    cursor: pointer;
    transition: background 0.15s ease;
}
.bookings-calendar .cal-day:not(.other-month):hover {
    background: rgba(255,255,255,0.05);
}
.bookings-calendar .cal-day.selected {
    background: rgba(204,0,0,0.2);
    color: #ff4444;
    font-weight: 700;
}

/* Calendar day popover */
.cal-day-popover {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}
.cal-popover-header {
    padding: 12px 16px 8px;
    position: sticky;
    top: 0;
    background: #1e1e2d;
    z-index: 1;
}
.cal-popover-item {
    display: block;
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.04);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}
.cal-popover-item:hover {
    background: rgba(255,255,255,0.04);
    text-decoration: none;
    color: inherit;
}
.cal-popover-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cal-popover-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.cal-popover-dot.pending { background: #cc0000; }
.cal-popover-dot.confirmed { background: #2eca8b; }
.cal-popover-dot.completed { background: #3b82f6; }
.cal-popover-dot.cancelled { background: #e43f52; }
.cal-popover-item-meta {
    font-size: 0.75rem;
    color: #8492a6;
    margin-top: 3px;
    padding-left: 14px;
}

/* Highlight animation when scrolling to a card from calendar */
@keyframes calHighlightPulse {
    0%   { box-shadow: 0 0 0 0 rgba(204,0,0,0.3); }
    50%  { box-shadow: 0 0 0 6px rgba(204,0,0,0.1); }
    100% { box-shadow: 0 0 0 0 rgba(204,0,0,0); }
}
.cal-highlight {
    animation: calHighlightPulse 0.6s ease 2;
    border: 1px solid rgba(204,0,0,0.3) !important;
}

/* My Bookings — entity name link */
.booking-entity-link {
    color: #e0e0e0;
    text-decoration: none;
}
.booking-entity-link:hover {
    color: #ff4444;
    text-decoration: none;
}

/* My Bookings — entity type badges */
.badge-soft-primary {
    background: rgba(59,130,246,0.18);
    color: #6ba3ff;
    font-weight: 600;
    font-size: 0.68rem;
    padding: 0.2em 0.6em;
    border-radius: 50rem;
}
/* Reviews — owner-hidden pill (my-reviews.php) */
.badge-soft-secondary {
    background: rgba(173,181,189,0.16);
    color: #adb5bd;
    font-weight: 600;
    font-size: 0.68rem;
    padding: 0.2em 0.6em;
    border-radius: 50rem;
}
.badge-soft-success {
    background: rgba(0,166,153,0.18);
    color: #33c4b8;
    font-weight: 600;
    font-size: 0.68rem;
    padding: 0.2em 0.6em;
    border-radius: 50rem;
}

/* Admin queues — see the note in style.css. Lifted contrast for dark: the
   light-theme text colours are unreadable on a dark ground, so each is the
   same hue moved up in lightness, matching how the three variants above are
   swapped rather than layered. */
.badge-soft-warning {
    background: rgba(240,173,78,0.18);
    color: #f0ad4e;
    font-weight: 600;
    font-size: 0.68rem;
    padding: 0.2em 0.6em;
    border-radius: 50rem;
}
.badge-soft-danger {
    background: rgba(220,53,69,0.18);
    color: #ff6b7a;
    font-weight: 600;
    font-size: 0.68rem;
    padding: 0.2em 0.6em;
    border-radius: 50rem;
}
.badge-soft-info {
    background: rgba(59,130,246,0.18);
    color: #6ba3ff;
    font-weight: 600;
    font-size: 0.68rem;
    padding: 0.2em 0.6em;
    border-radius: 50rem;
}


/* Cancel modal warning & new booking toast in dark mode */
#cancel-booking-modal .alert-warning {
    background: rgba(241,116,37,0.15);
    color: #f5a623;
    border-color: rgba(241,116,37,0.3);
}
#new-booking-toast.alert-success {
    background: rgba(46,202,139,0.15);
    color: #2eca8b;
    border-color: rgba(46,202,139,0.3);
}

@media (max-width: 767px) {
    .bookings-page-header {
        padding: 80px 0 20px;
    }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY — DARK MODE
   Scale headings down on smaller viewports
   ============================================ */
@media (max-width: 991px) {
  h1, .h1 { font-size: 2rem; }
  h2, .h2 { font-size: 1.6rem; }
  h3, .h3 { font-size: 1.3rem; }
  h4, .h4 { font-size: 1.1rem; }
}

@media (max-width: 767.98px) {
  h1, .h1 { font-size: 1.65rem; }
  h2, .h2 { font-size: 1.35rem; }
  h3, .h3 { font-size: 1.15rem; }
  h4, .h4 { font-size: 1rem; }
}

/* ============================================
   PODIUM — Corporate Dashboard Dark Mode
   ============================================ */

.podium-pill {
  border-color: rgba(255, 255, 255, 0.1);
  color: #999;
}

.podium-pill:hover {
  border-color: #cc0000;
  color: #cc0000;
}

.podium-pill.active {
  background: #cc0000;
  border-color: #cc0000;
  color: #fff;
}

.podium-find-card {
  background: #121212;
  border-color: rgba(255, 255, 255, 0.06);
}

.podium-find-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.podium-search-icon {
  color: #888;
}

.podium-search-input {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.podium-search-input::placeholder {
  color: #666;
}

.podium-quick-link {
  color: #ccc;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.podium-quick-link:hover {
  color: #cc0000;
}

.podium-quick-link i:first-child {
  color: #888;
}


.podium-filters {
  background: #121212 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   View Transitions API — Cross-document MPA Morph Transitions
   ========================================================================== */

/* Opt-in: enable cross-document view transitions for all participating pages.
   Respect prefers-reduced-motion, and gate to >=992px (desktop): on mobile a
   snapshot of a tall view-transition-named element (e.g. #podium-find-list)
   can get stuck in the top layer, rendering as a ghost card that overlays the
   real layout (the corporate-home "Quick Access overlaps Post a Find" bug).
   Phones/tablets just navigate instantly — no functional loss. */
@media (prefers-reduced-motion: no-preference) and (min-width: 992px) {
    @view-transition {
        navigation: auto;
    }
}

/* --- Favorite Card → Studio Detail morph targets --- */

/* Card image on source page (fav.php) — set dynamically via JS */
/* .ucard[data-vt-id] .ucard-image img gets view-transition-name: card-image-{id} */
/* .ucard[data-vt-id] .ucard-name a gets view-transition-name: card-name-{id} */

/* Studio hero on destination page (studio.php) */
.studio-gallery-primary img {
    view-transition-name: studio-hero-image;
}

.studio-title {
    view-transition-name: studio-hero-title;
}

/* Default cross-fade for old/new states */
::view-transition-old(studio-hero-image),
::view-transition-new(studio-hero-image) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(studio-hero-title),
::view-transition-new(studio-hero-title) {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth morph group sizing for image transition */
::view-transition-group(studio-hero-image) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-group(studio-hero-title) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Find Stream filter transition --- */

/* Container cross-fade when filters change */
::view-transition-old(find-stream-content),
::view-transition-new(find-stream-content) {
    animation-duration: 0.25s;
}

::view-transition-old(find-stream-content) {
    animation: vt-fade-out 0.15s ease forwards;
}

::view-transition-new(find-stream-content) {
    animation: vt-slide-fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes vt-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes vt-slide-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MORPH UI WAVES 1-8 — dark mode copies of the rules in style.css
   Keep this block in sync with the matching block in style.css.
   ============================================================ */

/* --- Wave 1: Find Card → Find Detail (findview.php) morph targets --- */

.findview-hero img {
    view-transition-name: find-hero-image;
}

.findview-question {
    view-transition-name: find-hero-title;
}

::view-transition-old(find-hero-image),
::view-transition-new(find-hero-image) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(find-hero-title),
::view-transition-new(find-hero-title) {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-group(find-hero-image) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-group(find-hero-title) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Wave 3: Find Stream filter reorder per-row morph --- */

.find-stream-row {
    view-transition-class: fs-row;
}


@keyframes vt-fs-row-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.98); }
}

@keyframes vt-fs-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Wave 4: stable per-ucard position morphs --- */

.ucard[data-vt-entity] {
    view-transition-class: ucard-morph;
}


/* --- Wave 2: Dashboard tile → detail morph (outgoing tile scales & fades) --- */

::view-transition-old(dash-tile-hero) {
    animation: vt-tile-lift 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
::view-transition-new(dash-tile-hero) {
    animation: vt-fade-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
::view-transition-group(dash-tile-icon),
::view-transition-group(dash-tile-value) {
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes vt-tile-lift {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.06); }
}
@keyframes vt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Wave 5: Ucard preview overlay (right-click / long-press) — dark palette --- */

.ucard-preview-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: background 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 16px;
}
.ucard-preview-backdrop.open {
    background: rgba(0, 0, 0, 0.65);
    opacity: 1;
}
.ucard-preview-dialog {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: #1f2937;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    transform: scale(0.9) translateY(12px);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ucard-preview-backdrop.open .ucard-preview-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.ucard-preview-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    color: #cbd5e1;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.ucard-preview-hero {
    height: 80px;
    background: linear-gradient(135deg, rgba(204, 0, 0, 0.25), rgba(204, 0, 0, 0.05));
}
.ucard-preview-body {
    padding: 0 20px 20px;
    margin-top: -40px;
    position: relative;
    text-align: center;
}
.ucard-preview-avatar {
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    object-fit: cover;
    border: 4px solid #1f2937;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    background: #374151;
    display: block;
    margin: 0 auto;
}
.ucard-preview-name {
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #f9fafb;
    margin: 12px 0 6px;
}
.ucard-preview-meta {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ucard-preview-type,
.ucard-preview-category {
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    background: rgba(204, 0, 0, 0.2);
    color: #fca5a5;
    font-weight: 500;
}
.ucard-preview-category {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}
.ucard-preview-contacts {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 16px;
}
.ucard-preview-contacts a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
    text-decoration: none;
}
.ucard-preview-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 9999px;
    background: #cc0000;
    color: #fff !important;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: background 0.2s;
}
.ucard-preview-cta:hover {
    background: #aa0000;
}

/* --- Wave 8: reduced-motion kill-switch --- */
@media (prefers-reduced-motion: reduce) {
    .ucard-preview-backdrop,
    .ucard-preview-dialog {
        transition-duration: 0.001s !important;
    }
    ::view-transition-old(*),
    ::view-transition-new(*),
    ::view-transition-group(*) {
        animation-duration: 0.001s !important;
    }
}

/* ============================================================
   END MORPH UI WAVES 1-8
   ============================================================ */

/* Filter pill active state transition */
.type-pill,
.tag-pill {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.type-pill.active,
.tag-pill.active {
    transform: scale(1.05);
}

/* ─── Find Stream Filters Modal ─── */
.fsm-content {
    border: 1px solid #333333;
    border-radius: 16px;
    overflow: hidden;
    background: #0a0a0a;
}

.fsm-header {
    border-bottom: 1px solid #333333;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #0a0a0a;
}

.fsm-title {
    font-size: 16px;
    font-weight: 700;
    color: #e0e0e0;
    text-align: center;
    margin: 0;
}

.fsm-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #e0e0e0;
    opacity: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease;
    line-height: 1;
}

.fsm-close:hover {
    background: #1a1a1a;
}

.fsm-body {
    padding: 8px 24px 24px;
    max-height: 65vh;
    overflow-y: auto;
    background: #0a0a0a;
}

.fsm-section {
    padding: 20px 0;
    border-bottom: 1px solid #222222;
}

.fsm-section:last-child {
    border-bottom: none;
}

.fsm-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 14px;
}

/* Pill buttons inside modal */
.fsm-pill-btn {
    border: 1px solid #444444;
    background: #121212;
    color: #e0e0e0;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 9999px;
    font-weight: 400;
    transition: all 0.15s ease;
}

.fsm-pill-btn:hover {
    border-color: #e0e0e0;
    color: #e0e0e0;
    background: #121212;
}

.fsm-pill-btn.active,
.fsm-pill-btn.fsm-pill-active {
    border-color: #ffffff;
    background: #ffffff;
    color: #000000;
}

.fsm-pill-btn.active:hover,
.fsm-pill-btn.fsm-pill-active:hover {
    background: #e0e0e0;
    border-color: #e0e0e0;
    color: #000000;
}

/* Inputs inside modal */
.fsm-input-group {
    flex: 1;
}

.fsm-input-label {
    font-size: 12px;
    font-weight: 600;
    color: #999999;
    margin-bottom: 6px;
    display: block;
}

.fsm-input {
    border: 1px solid #444444;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    color: #e0e0e0;
    background: #121212;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fsm-input:focus {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
    outline: none;
    background: #121212;
    color: #e0e0e0;
}

.fsm-input::placeholder {
    color: #666666;
}

/* Footer */
.fsm-footer {
    border-top: 1px solid #333333;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0a0a0a;
}

#clear-all-filters {
    color: #e0e0e0 !important;
}

.fsm-show-btn {
    background: #ffffff;
    color: #000000;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 9999px;
    border: none;
    transition: background 0.15s ease, transform 0.1s ease;
}

.fsm-show-btn:hover {
    background: #e0e0e0;
    color: #000000;
}

.fsm-show-btn:active {
    transform: scale(0.97);
}

/* Filter count badge on the main filter button */
#open-filters-modal {
    white-space: nowrap;
    padding: 0 1.25rem;
    height: calc(1.5em + 0.75rem + 2px);
    line-height: calc(1.5em + 0.75rem);
}

/* Scrollbar inside modal body */
.fsm-body::-webkit-scrollbar {
    width: 6px;
}

.fsm-body::-webkit-scrollbar-track {
    background: transparent;
}

.fsm-body::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 3px;
}

.fsm-body::-webkit-scrollbar-thumb:hover {
    background: #444444;
}

/* Mobile: full-screen modal */
@media (max-width: 575px) {
    #findstream-filters-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    #findstream-filters-modal .fsm-content {
        border-radius: 0;
        min-height: 100vh;
        border: none;
    }
    .fsm-body {
        max-height: calc(100vh - 140px);
    }
    .fsm-footer {
        position: sticky;
        bottom: 0;
    }
}

/* Stagger animation for cards entering after filter */
@keyframes vt-card-enter {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vt-animate-in > .col-lg-8 {
    animation: vt-card-enter 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.vt-animate-in > .col-lg-8:nth-child(2) { animation-delay: 0.04s; }
.vt-animate-in > .col-lg-8:nth-child(3) { animation-delay: 0.08s; }
.vt-animate-in > .col-lg-8:nth-child(4) { animation-delay: 0.12s; }
.vt-animate-in > .col-lg-8:nth-child(5) { animation-delay: 0.16s; }
.vt-animate-in > .col-lg-8:nth-child(6) { animation-delay: 0.20s; }
.vt-animate-in > .col-lg-8:nth-child(7) { animation-delay: 0.24s; }
.vt-animate-in > .col-lg-8:nth-child(8) { animation-delay: 0.28s; }
.vt-animate-in > .col-lg-8:nth-child(9) { animation-delay: 0.32s; }
.vt-animate-in > .col-lg-8:nth-child(10) { animation-delay: 0.36s; }

/* Fav card grid enter animation */
@keyframes vt-ucard-enter {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ucard-grid .ucard {
    animation: vt-ucard-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.ucard-grid .ucard:nth-child(1) { animation-delay: 0.05s; }
.ucard-grid .ucard:nth-child(2) { animation-delay: 0.1s; }
.ucard-grid .ucard:nth-child(3) { animation-delay: 0.15s; }
.ucard-grid .ucard:nth-child(4) { animation-delay: 0.2s; }
.ucard-grid .ucard:nth-child(5) { animation-delay: 0.25s; }
.ucard-grid .ucard:nth-child(6) { animation-delay: 0.3s; }
.ucard-grid .ucard:nth-child(7) { animation-delay: 0.35s; }
.ucard-grid .ucard:nth-child(8) { animation-delay: 0.4s; }
.ucard-grid .ucard:nth-child(9) { animation-delay: 0.45s; }


/* ==========================================================================
 * FINDVIEW — Find Detail Page (Monochrome / Dark Mode)
 * Full structural + dark-themed rules (independent stylesheet)
 * ========================================================================== */

.findview-hero {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
}
.findview-hero-gradient {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.findview-hero-gradient .hero-icon {
    font-size: 64px;
    opacity: 0.3;
}
.findview-hero img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}

.findview-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Ubuntu', sans-serif;
    color: #fff;
    letter-spacing: 0.3px;
}

.findview-card {
    background: #121212;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    border: none;
    margin-bottom: 24px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}
.findview-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.findview-question {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 16px;
}

.findview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    color: #999999;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    margin-bottom: 16px;
}
.findview-meta i {
    margin-right: 4px;
}

.findview-stats-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.findview-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: 12px;
    border: 1px solid #333333;
    background: #1a1a1a;
    transition: all 0.2s ease;
}
.findview-stat-item:hover {
    background: #222222;
    border-color: #444444;
}
.findview-stat-item i {
    font-size: 20px;
    color: #999999;
}
.findview-stat-value {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
}
.findview-stat-label {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    color: #999999;
    text-transform: capitalize;
}

.findview-budget-card {
    background: linear-gradient(135deg, #1a1010 0%, #121212 100%);
    border: 1px solid rgba(204, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.findview-budget-label {
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999999;
    margin-bottom: 4px;
}
.findview-budget-amount {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #cc0000;
}

.findview-detail-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.findview-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-family: 'Lato', sans-serif;
    background: #1a1a1a;
    color: #cccccc;
    border: 1px solid #333333;
    transition: all 0.2s ease;
}
.findview-pill:hover {
    background: #222222;
    border-color: #444444;
}
.findview-pill i {
    color: #999999;
    font-size: 14px;
}

.findview-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Ubuntu', sans-serif;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.findview-status-active {
    background: rgba(0, 166, 153, 0.12);
    color: #00a699;
}
.findview-status-closed {
    background: rgba(132, 146, 166, 0.12);
    color: #8492a6;
}

/* Bid Section */
.findview-bid-section {
    background: #121212;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    padding: 24px;
    margin-bottom: 24px;
    border: none;
}
.findview-bid-section h5 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    margin-bottom: 16px;
}


/* ── Seller offer photos (findview) ───────────────────────────────────
   A seller showing what it can supply, on the connect it has already
   placed. Sits directly under the "Connected" confirmation because that is
   the one moment a seller is looking at its own connect. */
.findview-offer {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-soft);
}
.findview-offer-title {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 14px;
}
.findview-offer-hint { margin: 0 0 10px; }
.findview-offer-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.findview-offer-thumb {
  position: relative;
  width: 56px;
  height: 56px;
}
.findview-offer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.findview-offer-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
.findview-offer-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px dashed var(--color-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
}
/* At the cap the control stays visible and explains itself on click rather
   than vanishing — a disappearing button reads as a bug. */
.findview-offer-add.at-cap {
  color: var(--color-text-muted);
  border-style: solid;
  cursor: not-allowed;
}
.findview-offer-add.is-busy {
  opacity: .6;
  pointer-events: none;
}

.findview-bid-placed {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(0, 166, 153, 0.08);
    border: 1px solid rgba(0, 166, 153, 0.2);
    border-radius: 12px;
}
.findview-bid-placed i {
    font-size: 24px;
    color: #00a699;
}

/* Comments */
.findview-comments-section {
    background: #121212;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    padding: 24px;
    margin-bottom: 24px;
    border: none;
}
.findview-comments-section h5 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    margin-bottom: 20px;
}
.findview-comment {
    padding: 16px 0;
    border-bottom: 1px solid #333333;
}
.findview-comment:last-child {
    border-bottom: none;
}
.findview-comment-author {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
}
.findview-comment-text {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #cccccc;
    margin-top: 4px;
    line-height: 1.5;
}
.findview-comment-meta {
    font-size: 12px;
    color: #777777;
    margin-top: 6px;
}
.findview-context-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Ubuntu', sans-serif;
}
.findview-context-shop {
    background: rgba(227, 28, 95, 0.1);
    color: #e31c5f;
}
.findview-context-ps {
    background: rgba(0, 166, 153, 0.1);
    color: #00a699;
}
.findview-context-user {
    background: rgba(132, 146, 166, 0.1);
    color: #8492a6;
}
.findview-context-corp {
    background: rgba(204, 0, 0, 0.1);
    color: #cc0000;
}

/* Entity poster line — shop/PS procurement finds carry their public identity
   on the find card + findview detail; tapping opens the studio profile. */
.find-card__poster {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    max-width: 100%;
    text-decoration: none;
}
.find-card__poster:hover {
    text-decoration: none;
}
.find-card__poster:hover .find-card__poster-name {
    text-decoration: underline;
}
.find-card__poster-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.find-card__poster-logo--initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(227, 28, 95, 0.15);
    color: #e31c5f;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Ubuntu', sans-serif;
}
.find-card__poster-name {
    font-size: 13px;
    font-weight: 600;
    color: #e0e0e0;
    font-family: 'Ubuntu', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reply threading */
.findview-replies {
    margin-left: 24px;
    padding-left: 16px;
    border-left: 2px solid #333333;
}
.findview-reply {
    padding: 10px 0;
}

/* Comment form — counterpill style */
.findview-comment-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #333333;
}
.findview-comment-form .counterpill {
    position: relative;
}
.findview-comment-form .counterpill .form-group {
    margin-bottom: 0;
    position: relative;
}
.findview-comment-form .counterpill input {
    border-radius: 9999px;
    border: 1px solid #333333;
    padding: 14px 50px 14px 20px;
    width: 100%;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #cccccc;
    background: #1a1a1a;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.findview-comment-form .counterpill input:focus {
    border-color: #cc0000;
    box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.15);
    background: #121212;
}
.findview-comment-form .counterpill button {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    outline: none !important;
    border: none;
}

/* Tags */
.findview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.findview-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-family: 'Lato', sans-serif;
    background: rgba(204, 0, 0, 0.1);
    color: #cc0000;
    border: 1px solid rgba(204, 0, 0, 0.2);
}

/* Corporate indicator */
.findview-corp-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    color: #fff;
    border-radius: 12px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Doc link */
.findview-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px solid #333333;
    color: #cccccc;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    text-decoration: none;
    transition: all 0.2s ease;
}
.findview-doc-link:hover {
    background: #222222;
    color: #cc0000;
    text-decoration: none;
}

/* Breadcrumb — overrides global ::after separator */
.findview-breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 24px;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
}
.findview-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: none;
}

/* Section divider */
.findview-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #333333, transparent);
    margin: 20px 0;
}

/* Animate bid button */
.findview-bid-btn {
    transition: all 0.3s ease;
}
.findview-bid-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.35);
}

/* Reply form inline */
.findview-reply-form {
    margin-top: 8px;
    display: none;
}
.findview-reply-form.show {
    display: block;
}

/* Sticky bid card on desktop */
@media (min-width: 992px) {
    .findview-sidebar-sticky {
        position: sticky;
        top: 90px;
    }
}

/* ===== Findview Mobile Responsive ===== */
@media (max-width: 767px) {
    .findview-hero {
        border-radius: 0;
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: 16px;
    }
    .findview-hero-gradient {
        min-height: 140px;
    }
    .findview-hero-gradient .hero-icon {
        font-size: 48px;
    }
    .findview-hero img {
        max-height: 250px;
        border-radius: 0;
    }
    .findview-question {
        font-size: 1.15rem;
    }
    .findview-card,
    .findview-bid-section,
    .findview-comments-section {
        border-radius: 12px;
        margin-bottom: 16px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    }
    .findview-card .p-4 {
        padding: 16px !important;
    }
    .findview-bid-section,
    .findview-comments-section {
        padding: 16px;
    }
    .findview-meta {
        gap: 10px;
        font-size: 13px;
    }
    .findview-budget-card {
        padding: 14px;
    }
    .findview-budget-amount {
        font-size: 1.2rem;
    }
    .findview-detail-pills {
        gap: 6px;
    }
    .findview-pill {
        padding: 6px 10px;
        font-size: 12px;
    }
    .findview-breadcrumb {
        font-size: 13px;
        margin-bottom: 12px;
    }
    .findview-comment-form .d-flex {
        flex-direction: row;
    }
    .findview-comment-input {
        padding: 8px 14px;
        font-size: 13px;
    }
    .findview-replies {
        margin-left: 12px;
        padding-left: 10px;
    }
    .findview-corp-banner {
        font-size: 12px;
        padding: 8px 12px;
    }
    .findview-divider {
        margin: 14px 0;
    }
}
@media (max-width: 575px) {
    .findview-question {
        font-size: 1.05rem;
    }
    .findview-meta {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }
}


/* ==========================================================================
 * MANAGE STUDIO IMAGES — Image Grid & Upload (Monochrome)
 * ========================================================================== */

.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.image-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #121212;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.image-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.image-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.image-card-body {
    padding: 0.75rem;
}

.image-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.image-card .primary-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: #28a745;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.image-card .btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.upload-zone {
    border: 2px dashed #444444;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #1a1a1a;
}

.upload-zone:hover,
.upload-zone.dragover {
    border-color: #FF385C;
    background: rgba(255, 56, 92, 0.08);
}

.upload-zone i {
    font-size: 3rem;
    color: #777777;
    margin-bottom: 1rem;
}

.upload-zone.dragover i {
    color: #FF385C;
}

.upload-progress {
    display: none;
    margin-top: 1rem;
}

.caption-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #333333;
    border-radius: 6px;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    background: #121212;
    color: #cccccc;
}

.reorder-mode .image-card {
    cursor: grab;
}

.reorder-mode .image-card:active {
    cursor: grabbing;
}

.reorder-mode .image-card.dragging {
    opacity: 0.5;
}


/* ==========================================================================
 * PODIUM — View Transitions & Staggered Animations (Monochrome)
 * ========================================================================== */

#podium-find-list {
    view-transition-name: podium-find-list;
}

::view-transition-old(podium-find-list) {
    animation: podium-fade-out 0.15s ease forwards;
}
::view-transition-new(podium-find-list) {
    animation: podium-fade-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes podium-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes podium-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.podium-find-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.podium-vt-animate .podium-find-card:not(.d-none) {
    animation: podium-card-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.podium-vt-animate .podium-find-card:not(.d-none):nth-child(2) { animation-delay: 0.03s; }
.podium-vt-animate .podium-find-card:not(.d-none):nth-child(3) { animation-delay: 0.06s; }
.podium-vt-animate .podium-find-card:not(.d-none):nth-child(4) { animation-delay: 0.09s; }
.podium-vt-animate .podium-find-card:not(.d-none):nth-child(5) { animation-delay: 0.12s; }
.podium-vt-animate .podium-find-card:not(.d-none):nth-child(6) { animation-delay: 0.15s; }
.podium-vt-animate .podium-find-card:not(.d-none):nth-child(7) { animation-delay: 0.18s; }
.podium-vt-animate .podium-find-card:not(.d-none):nth-child(8) { animation-delay: 0.21s; }

@keyframes podium-card-enter {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.podium-pill {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.podium-pill.active {
    transform: scale(1.05);
}


/* ==========================================================================
 * AVAILABILITY — Duration Picker Pills (Monochrome)
 * ========================================================================== */

.duration-option { cursor: pointer; }
.duration-pill {
    display: inline-block;
    padding: 8px 18px;
    border: 1.5px solid #444444;
    border-radius: 9999px;
    font-size: 0.9rem;
    color: #cccccc;
    background: #121212;
    transition: all 0.2s ease;
}
.duration-option:hover .duration-pill { border-color: #cc0000; color: #cc0000; }
.duration-option.active .duration-pill {
    border-color: #cc0000;
    background: #cc0000;
    color: #fff;
}


/* ==========================================================================
 * FIND DETAIL — Title Edit Icon (Monochrome)
 * ========================================================================== */

.find-title-editable { position: relative; cursor: default; }
.find-title-edit-icon {
    font-size: 0.5em;
    vertical-align: middle;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s;
    color: #999999;
}
.find-title-editable:hover .find-title-edit-icon { opacity: 0.6; }
.find-title-edit-icon:hover { opacity: 1 !important; color: #cc0000; }
/* Touch devices get no hover, so the pen must be permanently visible or the find
   description is uneditable on a phone — and the empty state literally reads
   "Tap the pen to add a description". Same treatment as .vibe-save-btn. */
@media (hover: none) {
    .find-title-edit-icon { opacity: 0.6; }
}


/* ==========================================================================
 * FIND STREAM — View Transition Name (Monochrome)
 * ========================================================================== */

#questions-container {
    view-transition-name: find-stream-content;
}

/* ============================================
   REDUCED MOTION — Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   UCARD HEART BOUNCE — Dark Mode
   Feedback animation when liking an entity
   ============================================ */
@keyframes ucardHeartBounce {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(0.9); }
  75% { transform: scale(1.1); }
}

.ucard-like-btn.animate i {
  animation: ucardHeartBounce 0.4s ease;
}

/* Mirror of the universal "Instagram pop" from style.css so the same
   animation triggers in dark/mono mode. Shared by shop/PS like + the
   handshake connect. */
.pulse-pop {
  animation: ucardHeartBounce 0.4s ease;
}

/* ============================================
   PRINT STYLES — Dark Mode Override
   Force light colors when printing from dark mode
   ============================================ */
@media print {
  #topnav,
  .navbar,
  .navigation,
  .sidebar,
  .mobile-sidebar-menu,
  .back-to-top,
  .cookie-popup,
  .modal,
  .modal-backdrop,
  footer,
  .footer,
  .btn{
    display: none !important;
  }

  body {
    color: #000000 !important;
    background: #ffffff !important;
    font-size: 12pt;
    line-height: 1.5;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #666666;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  .container,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  img {
    max-width: 100% !important;
  }

  .card {
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
}


/* ============================================
   HELP CENTER — DARK MODE (STANDALONE)
   Full structural + visual styles for Help Center
   ============================================ */

/* Hero Section */
.help-hero {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
  padding: 140px 0 40px;
  position: relative;
}

.help-hero-title {
  font-family: var(--font-heading, "Ubuntu", sans-serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: #e0e0e0;
  margin-bottom: 12px;
}

.help-hero-subtitle {
  color: #999999;
  font-size: 1.1rem;
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

/* Search */
.help-search-wrap {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}

.help-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #666666;
  pointer-events: none;
}

.help-search-icon svg {
  width: 20px;
  height: 20px;
}

.help-search-input {
  width: 100%;
  padding: 16px 50px 16px 52px;
  font-size: 1rem;
  border: 2px solid #333333;
  border-radius: 9999px;
  background: #1a1a1a;
  color: #e0e0e0;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  font-family: var(--font-body, "Lato", sans-serif);
}

.help-search-input::placeholder {
  color: #666666;
}

.help-search-input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
}

.help-search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666666;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.help-search-clear:hover {
  background: #333333;
}

.help-search-clear svg {
  width: 18px;
  height: 18px;
}

.help-search-results-count {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #999999;
}

/* Category Pills */
.help-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.help-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 9999px;
  color: #e0e0e0;
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.help-pill svg {
  width: 16px;
  height: 16px;
}

.help-pill:hover {
  border-color: #ffffff;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.06);
}

.help-pill.active {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}

/* FAQ Section */
.help-faq-section {
  padding: 60px 0 40px;
  background: #000000;
  /* Direct-URL anchors (/help#faq) must clear the fixed #topnav, same as
     the per-group 80px offset below. */
  scroll-margin-top: 80px;
}

/* Sidebar */
.help-sidebar {
  position: sticky;
  top: 90px;
  background: #121212;
  border-radius: 12px;
  padding: 24px;
}

.help-sidebar-title {
  font-family: var(--font-heading, "Ubuntu", sans-serif);
  font-weight: 400;
  color: #666666;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.help-sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-sidebar-nav li {
  margin-bottom: 4px;
}

.help-sidebar-link {
  display: block;
  padding: 10px 16px;
  color: #b0b0b0;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.help-sidebar-link:hover {
  background: #1a1a1a;
  color: #ffffff;
  text-decoration: none;
}

.help-sidebar-link.active {
  background: #1a1a1a;
  color: #ffffff;
  font-weight: 400;
  border-left-color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* FAQ Groups */
.help-faq-group {
  margin-bottom: 48px;
  scroll-margin-top: 80px;
}

.help-faq-group-title {
  font-family: var(--font-heading, "Ubuntu", sans-serif);
  font-weight: 400;
  font-size: 1.5rem;
  color: #e0e0e0;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #222222;
}

/* FAQ Items */
.help-faq-item {
  background: #121212;
  border: 1px solid #222222;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.help-faq-item:hover {
  border-color: #333333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.help-faq-item.active {
  border-color: #444444;
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.04);
}

.help-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  font-weight: 400;
  color: #e0e0e0;
  font-family: var(--font-body, "Lato", sans-serif);
  transition: color 0.2s ease;
}

.help-faq-question:hover {
  color: #ffffff;
}

.help-faq-question:focus {
  outline: none;
}

.help-faq-question:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
  border-radius: 8px;
}

.help-faq-question span {
  flex: 1;
  padding-right: 16px;
}

.help-faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #666666;
  transition: transform 0.3s ease, color 0.2s ease;
}

.help-faq-item.active .help-faq-chevron {
  transform: rotate(180deg);
  color: #ffffff;
}

.help-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.help-faq-answer-inner {
  padding: 0 20px 20px;
  color: #999999;
  font-size: 0.95rem;
  line-height: 1.7;
}

.help-faq-answer-inner p:last-child {
  margin-bottom: 0;
}

.help-faq-answer-inner ul,
.help-faq-answer-inner ol {
  padding-left: 20px;
  margin-bottom: 12px;
}

.help-faq-answer-inner li {
  margin-bottom: 8px;
}

.help-faq-answer-inner a.text-primary {
  color: #ffffff !important;
}

.help-faq-hidden {
  display: none !important;
}

/* No Results */


/* Contact Section */
.help-contact-section {
  padding: 60px 0 80px;
  background: #0a0a0a;
  /* In-page "#contact" links bypass the smooth-scroll JS (it only binds
     .help-sidebar-link/.help-pill), so native jumps need the offset too. */
  scroll-margin-top: 80px;
}

.help-section-title {
  font-family: var(--font-heading, "Ubuntu", sans-serif);
  font-weight: 400;
  font-size: 2rem;
  color: #e0e0e0;
  margin-bottom: 8px;
}

.help-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #121212;
  border: 1px solid #222222;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.help-contact-card:hover {
  border-color: #333333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.help-contact-card-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}

.help-contact-card-icon svg,
.help-contact-card-icon i {
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.help-contact-card-icon-whatsapp {
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
}

.help-contact-card-body h5 {
  font-family: var(--font-heading, "Ubuntu", sans-serif);
  font-weight: 400;
  font-size: 1rem;
  color: #e0e0e0;
  margin-bottom: 4px;
}

.help-contact-card-body a {
  color: #ffffff;
  font-size: 0.95rem;
  text-decoration: none;
}

.help-contact-card-body a:hover {
  text-decoration: underline;
}

.help-response-badge {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: #666666;
}

/* Ticket Card */
.help-ticket-card {
  background: #121212;
  border: 1px solid #222222;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.help-ticket-title {
  font-family: var(--font-heading, "Ubuntu", sans-serif);
  font-weight: 400;
  font-size: 1.4rem;
  color: #e0e0e0;
  margin-bottom: 4px;
}

.help-ticket-card .form-control {
  background: #1a1a1a;
  border-color: #333333;
  color: #e0e0e0;
}

.help-ticket-card .form-control:focus {
  border-color: #555555;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.help-ticket-card .form-control::placeholder {
  color: #555555;
}

.help-ticket-card .form-label {
  color: #b0b0b0;
}

.help-identity-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  row-gap: 6px;
}

.help-past-tickets-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff !important;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color 0.15s ease, transform 0.15s ease;
  margin-left: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.help-past-tickets-chip:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.help-past-tickets-chip i {
  font-size: 0.95rem;
  line-height: 1;
}

/* Custom "Choose files" control for the ticket form — the native input stays
   in the DOM (visually hidden) so no-JS submits and the pre-upload script
   keep working. */
.help-file-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.help-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.help-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.help-file-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.help-file-input:focus-visible + .help-file-btn {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.help-file-btn i {
  font-size: 1rem;
  line-height: 1;
}

.help-file-names {
  font-size: 0.82rem;
  color: #b0b0b0;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

#support-attach-progress {
  width: 100%;
}

/* Responsive */
@media (max-width: 991px) {
  .help-hero {
    padding: 80px 0 32px;
  }

  .help-hero-title {
    font-size: 2rem;
  }

  .help-category-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .help-category-pills::-webkit-scrollbar {
    display: none;
  }

  .help-faq-section {
    padding: 40px 0 24px;
  }
}

@media (max-width: 767px) {
  .help-hero-title {
    font-size: 1.6rem;
  }

  .help-hero-subtitle {
    font-size: 1rem;
  }

  .help-search-input {
    padding: 14px 44px 14px 48px;
    font-size: 0.95rem;
  }

  .help-pill {
    padding: 8px 16px;
    font-size: 0.85rem;
  }

  .help-faq-group-title {
    font-size: 1.25rem;
  }

  .help-faq-question {
    padding: 16px;
    font-size: 0.95rem;
  }

  .help-faq-answer-inner {
    padding: 0 16px 16px;
    font-size: 0.9rem;
  }

  .help-ticket-card {
    padding: 24px 20px;
  }

  .help-section-title {
    font-size: 1.6rem;
  }

  .help-contact-section {
    padding: 40px 0 60px;
  }
}

/* ============================================================================
 * CONVERSATIONAL FIND BUILDER — Monochrome Dark Theme
 * Full standalone styles for the chat-based find creation UI
 * ============================================================================ */

/* Container & Layout */
.conv-container {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* See style.css for the rationale on the dvh fallback chain. Keeping
     dark mode in lock-step with light so users on the dark theme don't
     hit the iOS-keyboard regression we already solved for light. */
  height: 70vh;
  height: 70dvh;
  height: var(--conv-height-override, 70dvh);
  min-height: 400px;
  background: #0a0a0a;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
  text-align: left;
}

.conv-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid #222222;
  background: #0a0a0a;
}

.conv-header-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f5f5 0%, #d0d0d0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.08);
}

.conv-header-info h4 {
  margin: 0;
  font-family: "Ubuntu", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #e0e0e0;
}

.conv-header-info span {
  font-family: "Lato", sans-serif;
  font-size: 12px;
  color: #999999;
}

.conv-header-close {
  margin-left: auto;
  background: none;
  border: none;
  color: #999999;
  cursor: pointer;
  padding: 6px;
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
  transition: all 0.2s;
}

.conv-header-close:hover {
  color: #e0e0e0;
  background: rgba(255, 255, 255, 0.06);
}

/* Messages Area */
.conv-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Matches light-mode: smooth scrolling handled in JS so streaming writes
     don't cancel an in-flight CSS smooth scroll (which caused the staccato
     snap during word-by-word reveal). */
  scroll-behavior: auto;
  text-align: left;
  /* Same iOS-keyboard-friendly bottom-padding + overscroll containment as
     light mode — see style.css for rationale. */
  scroll-padding-bottom: 12px;
  overscroll-behavior: contain;
}

.conv-messages::-webkit-scrollbar {
  width: 4px;
}

.conv-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

/* Chat Bubbles */
.conv-bubble {
  max-width: 82%;
  padding: 11px 16px;
  border-radius: 20px;
  font-family: "Lato", sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  animation: convBubbleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  word-wrap: break-word;
  text-align: left;
}

.conv-bubble--bot {
  align-self: flex-start;
  background: #1a1a1a;
  color: #e0e0e0;
  border-bottom-left-radius: 6px;
  margin-right: 15%;
  /* Border + shadow must match .conv-typing exactly so the avatar header
     stays anchored when the typing pill is swapped for the real bubble. */
  border: 1px solid rgba(0, 0, 0, .04);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04);
}

.conv-bubble--user {
  align-self: flex-end;
  background: #f5f5f5;
  color: #000000;
  border-bottom-right-radius: 6px;
  margin-left: 15%;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.06);
}

.conv-bubble--bot .conv-bubble-avatar {
  display: flex;
  align-items: center;
  gap: 7px;
  /* Kept equal to .conv-typing's avatar gap so the title sits at the same
     spot before and after the typing pill is swapped for the real bubble. */
  margin-bottom: 8px;
}

.conv-bubble--bot .conv-bubble-avatar-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  font-family: "Ubuntu", sans-serif;
  flex-shrink: 0;
}

.conv-bubble--bot .conv-bubble-avatar-name {
  font-family: "Ubuntu", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  color: #cccccc;
  letter-spacing: 0.01em;
}

@keyframes convBubbleIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Typing Indicator — mirrors bot bubble layout so the transition is seamless.
 * Padding, border, shadow, and max-width must match .conv-bubble + .conv-bubble--bot
 * exactly — any drift causes the avatar header to shift position when the
 * typing pill is replaced by the real bubble. */
.conv-typing {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 82%;
  margin-right: 15%;
  padding: 11px 16px;
  background: #1a1a1a;
  border: 1px solid rgba(0, 0, 0, .04);
  border-radius: 20px;
  border-bottom-left-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04);
  animation: convBubbleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.conv-typing .conv-bubble-avatar {
  display: flex;
  align-items: center;
  gap: 7px;
  /* Breathing room so the bouncing dots (and the "thinking…" label) don't
     crowd the "Sinatabu Assistant" title. Mirror of the bot-bubble value. */
  margin-bottom: 8px;
}
.conv-typing .conv-bubble-avatar-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  font-family: "Ubuntu", sans-serif;
  flex-shrink: 0;
}
.conv-typing .conv-bubble-avatar-name {
  font-family: "Ubuntu", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  color: #cccccc;
  letter-spacing: 0.01em;
}
/* Reserve body width up-front so the pill doesn't visibly grow when the
 * "Taking a moment to think…" label is injected at 5s — keeps the avatar
 * header anchored at the same position across all typing states. */
.conv-typing .conv-typing-body {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 170px;
}

.conv-typing-dots {
  display: flex;
  gap: 5px;
}

.conv-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #666666;
  animation: convDotBounce 1.4s ease-in-out infinite;
}

.conv-typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.conv-typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes convDotBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Inline bubble-body dots — shown inside the bot bubble while we wait
 * for the AI `done` event so the bubble is never visually empty. See
 * style.css for the full rationale. */
.conv-bubble-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 2px 0;
  min-height: 1em;
}
.conv-bubble-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
  animation: convDotBounce 1.4s ease-in-out infinite;
}
.conv-bubble-dot:nth-child(2) { animation-delay: 0.15s; }
.conv-bubble-dot:nth-child(3) { animation-delay: 0.3s; }

/* Quick Replies */
.conv-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 4px;
  animation: convBubbleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  align-self: flex-start;
}

.conv-quick-reply {
  padding: 8px 18px;
  border: 1.5px solid #444444;
  border-radius: 9999px;
  background: transparent;
  color: #e0e0e0;
  font-family: "Lato", sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.conv-quick-reply:hover {
  background: #f5f5f5;
  color: #000000;
  border-color: #f5f5f5;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.conv-quick-reply:active {
  transform: scale(0.96);
}

/* Review Card — dark parity with the grouped light-mode redesign. */
.conv-review-card {
  align-self: stretch;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 22px);
  padding: 24px;
  margin: 10px 0;
  box-shadow: var(--shadow-md);
  animation: convBubbleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.conv-review-card h5 {
  font-family: "Ubuntu", sans-serif;
  font-size: var(--fs-md, 17px);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.conv-review-subtitle {
  font-family: "Lato", sans-serif;
  font-size: var(--fs-xs, 12px);
  color: var(--color-text-muted);
  margin: 0 0 18px;
}

/* Business (shop/PS procurement) attribution — names the public identity
   the find will be published under, right above the Post button. */
.conv-review-posting-as {
  display: inline-block;
  font-family: "Lato", sans-serif;
  font-size: var(--fs-xs, 12px);
  font-weight: 700;
  color: #e31c5f;
  background: rgba(227, 28, 95, 0.15);
  border-radius: 9999px;
  padding: 2px 10px;
  margin: 0 0 8px;
}

.conv-review-group { margin-bottom: 14px; }
.conv-review-group:last-of-type { margin-bottom: 0; }
.conv-review-group-title {
  font-family: "Lato", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 8px;
  padding-left: 2px;
}
.conv-review-group-body {
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg, 16px);
  padding: 4px 14px;
}

.conv-review-field {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  gap: 12px;
}
.conv-review-field:last-child { border-bottom: none; }

.conv-review-field:last-child {
  border-bottom: none;
}

.conv-review-field-label {
  font-family: "Lato", sans-serif;
  font-size: 13px;
  color: #999999;
  flex-shrink: 0;
  min-width: 100px;
}

.conv-review-field-value {
  font-family: "Lato", sans-serif;
  font-size: 13.5px;
  color: #e0e0e0;
  font-weight: 500;
  text-align: right;
}

.conv-review-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.conv-review-submit {
  flex: 1;
  padding: 12px 24px;
  background: #f5f5f5;
  color: #000000;
  border: none;
  border-radius: 9999px;
  font-family: "Ubuntu", sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.conv-review-submit:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

.conv-review-edit {
  padding: 12px 20px;
  background: transparent;
  color: #999999;
  border: 1.5px solid #444444;
  border-radius: 9999px;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.conv-review-edit:hover {
  border-color: #999999;
  color: #e0e0e0;
}

/* Input Area — matches dealroom-input pattern */
.conv-input-area {
  padding: 12px 16px;
  border-top: 1px solid #222222;
  background: #0a0a0a;
}

.conv-input-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #1a1a1a;
  border-radius: 9999px;
  padding: 4px 6px 4px 6px;
  border: 1.5px solid transparent;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  /* Matches light mode — anchors the absolute-positioned attach menu so
     it isn't clipped by .conv-container's overflow: hidden. */
  position: relative;
}

.conv-input-wrapper:focus-within {
  background: #0a0a0a;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.conv-input {
  flex: 1;
  border: none !important;
  background: none !important;
  padding: 8px 8px;
  font-family: "Lato", sans-serif;
  font-size: 14.5px;
  color: var(--color-text);
  outline: none !important;
  box-shadow: none !important;
  resize: none;
  max-height: 100px;
  min-height: 20px;
  line-height: 1.4;
  text-align: left;
}

.conv-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.conv-input::placeholder {
  color: var(--color-text-muted);
}

.conv-attach-btn,
.conv-send-btn {
  background: none;
  border: none;
  padding: 0;
  color: #b8b8b8;
  cursor: pointer;
  font-size: 1.25rem;
  transition: color 0.2s, background 0.2s;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.conv-attach-btn:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* Send button — use the brand accent (mirrors light mode's red on white).
   The previous near-white `#e0e0e0` blended into the dark input bg and
   was effectively invisible against the wrapper, which is exactly what
   the dark-mode bug report flagged. */
.conv-send-btn {
  color: var(--color-primary);
}

.conv-send-btn:hover {
  background: var(--color-primary-soft);
}

.conv-send-btn:disabled {
  color: var(--color-text-muted);
  opacity: 0.5;
  cursor: not-allowed;
  background: none;
}

/* Switch to Form Link */


/* Index Page Morph Transition */
.index-hero-morphing .title-heading h1,
.index-hero-morphing .title-heading h5,
.index-hero-morphing .title-heading > p {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.index-hero-morphing.bg-half-120 {
  transition: padding 0.5s ease;
}

.index-hero-morphed .title-heading h1,
.index-hero-morphed .title-heading h5,
.index-hero-morphed .title-heading > p:not(.conv-switch-form) {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  position: absolute;
  height: 0;
  overflow: hidden;
}

/* Collapse hero section padding and fix display so conversation sits below navbar.
 * min-height: 100vh guarantees the section fills the viewport so the fixed
 * #topnav never scrolls over the top of the conversation card. */
.index-hero-morphed.bg-half-120 {
  padding: 110px 0 30px !important;
  display: block !important;
  min-height: 100vh !important;
  height: auto !important;
}
.index-hero-morphed.d-table {
  display: block !important;
}
#conv-target {
  scroll-margin-top: 100px;
}

.index-hero-morphing .question-form {
  transition: all 0.5s ease;
}

.index-hero-morphed .question-form {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.index-hero-morphed #subquery {
  display: none;
}

.index-hero-morphed .try-this-section {
  display: none;
}

/* Cap the conversation card so it always fits inside the viewport below the
 * fixed nav + section padding. Sticky positioning keeps it pinned in view. */
.index-hero-morphed .conv-container-wrapper {
  position: sticky;
  top: 100px;
}
.index-hero-morphed .conv-container {
  /* dvh fallback chain — same shape as style.css. Keeps the iOS-keyboard
     fix consistent across light + dark themes. */
  height: calc(100vh - 160px) !important;
  height: calc(100dvh - 160px) !important;
  height: var(--conv-height-override, calc(100dvh - 160px)) !important;
  min-height: 400px;
  max-height: 80vh;
  max-height: 80dvh;
}
@media (max-width: 767px) {
  .index-hero-morphed.bg-half-120 {
    padding: 90px 0 20px !important;
  }
  .index-hero-morphed .conv-container-wrapper {
    top: 80px;
  }
  .index-hero-morphed .conv-container {
    height: calc(100vh - 130px) !important;
    height: calc(100dvh - 130px) !important;
    height: var(--conv-height-override, calc(100dvh - 130px)) !important;
  }
}

.conv-container-wrapper {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

.conv-container-wrapper.conv-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Upload preview in conversation */


/* Progress Bar — dark theme */
.conv-progress {
  background: #0a0a0a;
}

.conv-progress-bar {
  background: #222222;
}

/* Example Pills — dark theme */
.conv-example-pill {
  border-color: #555555;
  color: #999999;
}

.conv-example-pill:hover {
  border-color: #e0e0e0;
  color: #e0e0e0;
}

/* Typing label — dark theme */
.conv-typing-label {
  /* Mirror the light sheet: smaller + lowercase filler treatment. */
  font-size: 10px;
  text-transform: lowercase;
  color: #777777;
}

/* Image Upload Nudge — dark mode. Monochrome replaces (not overrides) the
   light stylesheet, so each rule must restate the structural properties from
   style.css — otherwise the buttons fall back to browser-default <button>
   chrome. */
.conv-image-nudge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 6px 0;
  background: rgba(232, 84, 84, 0.10);
  border: 1px solid rgba(232, 84, 84, 0.22);
  border-radius: 14px;
  font-family: var(--font-body, "Lato", sans-serif);
  font-size: 13px;
  color: #e0e0e0;
  animation: convBubbleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.conv-image-nudge > i {
  font-size: 18px;
  color: #e85454;
  flex-shrink: 0;
}
.conv-image-nudge > span {
  flex: 1;
  line-height: 1.4;
}
.conv-image-nudge-btn {
  background: #e85454;
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  padding: 5px 14px;
  font-family: var(--font-heading, "Ubuntu", sans-serif);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.conv-image-nudge-btn:hover {
  background: #ff6b6b;
}
.conv-image-nudge-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #999999;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.conv-image-nudge-close:hover {
  opacity: 1;
  color: #ffffff;
}

/* Mic active — dark theme uses same animation */

/* Media Strip — dark theme */
.conv-media-doc {
  background: #1a1a1a;
  color: #e0e0e0;
}

/* Attach Menu — dark theme */
.conv-attach-menu {
  background: #1a1a1a;
  border-color: #333333;
}

.conv-attach-option {
  color: #e0e0e0;
}

.conv-attach-option:hover {
  background: #222222;
}

/* Duplicate Warning — dark theme */
.conv-duplicate-warning {
  background: #332b00;
  border-color: #665500;
  color: #ffc107;
}

/* Inline Edit — dark theme */
.conv-review-editable:hover {
  background: #1a1a1a;
}

.conv-inline-edit {
  background: #0a0a0a;
  color: #e0e0e0;
  border-color: #e0e0e0;
}

/* Cursor — dark theme */
.conv-cursor {
  background: #e0e0e0;
}

/* Mic button — dark theme. Same restatement issue as the nudge buttons:
   without the structural rules the icon falls back to a default <button> box. */
.conv-mic-btn {
  background: none;
  border: none;
  padding: 0;
  color: #b8b8b8;
  cursor: pointer;
  font-size: 1.25rem;
  transition: color 0.2s, background 0.2s;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.conv-mic-btn:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* Progress bar label — dark theme */
.conv-progress-label {
  color: #777777;
}

.conv-progress-ready .conv-progress-label {
  color: #e0e0e0;
}

/* Media strip — dark theme */
.conv-media-remove {
  background: rgba(255,255,255,0.3);
}

.conv-media-doc i {
  color: #e0e0e0;
}

/* Responsive */
@media (max-width: 768px) {
  .conv-container {
    height: 80vh;
    height: 80dvh;
    height: var(--conv-height-override, 80dvh);
    border-radius: 16px;
    margin: 0 -4px;
  }

  .conv-bubble {
    max-width: 90%;
    font-size: 14px;
  }

  .conv-quick-reply {
    font-size: 13px;
    padding: 7px 14px;
  }

  .conv-example-pill {
    font-size: 12px;
    padding: 6px 12px;
  }

  .conv-bubble-action {
    width: 30px;
    height: 30px;
    border-radius: 15px;
  }
}

/* ==========================================================================
   Find Conversation — Premium styles (inlined)
   --------------------------------------------------------------------------
   Previously lived in css/find-conversation-premium.css. Inlined here so the
   conversation builder works identically whether or not the separate
   stylesheet loads, and so dark mode (style-monochrome.css) gets the same
   rules without a second include.

   All colors resolve through CSS variables (var(--color-primary), etc.) so
   this block works in both light and dark themes without duplication.
   ========================================================================== */

/* ── Live Avatar ─────────────────────────────────────────────────────── */

.conv-header-avatar {
  position: relative;
  transform-origin: center;
  transition: transform .25s ease-out;
}

/* Outer breathing ring — idle state */
.conv-header-avatar::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  opacity: .35;
  animation: conv-avatar-breathe 4s ease-in-out infinite;
  pointer-events: none;
}

/* Inner gloss highlight */
.conv-header-avatar::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 24%;
  width: 52%;
  height: 18%;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  pointer-events: none;
}

@keyframes conv-avatar-breathe {
  0%,100% { transform: scale(1); opacity: .35; }
  50%     { transform: scale(1.05); opacity: .55; }
}

/* Thinking state — rotating ring */
.conv-header-avatar.conv-avatar-thinking::before {
  animation: conv-avatar-spin 1.4s linear infinite;
  opacity: .85;
  border-color: var(--color-primary);
  border-top-color: transparent;
  border-right-color: transparent;
}
@keyframes conv-avatar-spin {
  to { transform: rotate(360deg); }
}

/* Error state — quick horizontal wiggle */
.conv-header-avatar.conv-avatar-error {
  animation: conv-avatar-wiggle 300ms ease-in-out;
}
@keyframes conv-avatar-wiggle {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-4px); }
  40%     { transform: translateX(4px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px); }
}

/* Success state — one-shot flash + pulse */
.conv-header-avatar.conv-avatar-success::before {
  animation: conv-avatar-success-flash 1s ease-out;
}
.conv-header-avatar.conv-avatar-success {
  animation: conv-avatar-success-pulse 700ms cubic-bezier(.2,.9,.3,1.3);
}
@keyframes conv-avatar-success-flash {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: .8; transform: scale(1.15); }
  100% { opacity: .35; transform: scale(1); }
}
@keyframes conv-avatar-success-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ── Bubble depth + subtle glow ─────────────────────────────────────── */

.conv-bubble--bot {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .04);
}
.conv-bubble--user {
  /* Both layers use the theme shadow token so the glow tint follows the
     primary color in dark mode (where primary is white, not red). */
  box-shadow:
    0 1px 2px var(--color-primary-shadow),
    0 4px 14px var(--color-primary-shadow);
}

/* Animated entrance — soft spring slide */
.conv-bubble {
  animation: conv-bubble-in 320ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes conv-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Streaming swap: the bot bubble that replaces the typing pill must NOT
   replay the entrance slide — it should materialise exactly where the dots
   were, so the message reads as the dots turning into text rather than a
   second bubble popping in from below. Class added by ensureBubble(). */
.conv-bubble.conv-bubble--instant {
  animation: none;
}

/* Cursor marker for streaming messages — subtle pulsing bar */
.conv-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  opacity: .55;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: conv-cursor-blink 1s step-end infinite;
}
@keyframes conv-cursor-blink {
  50% { opacity: 0; }
}

/* ── Bubble action row (rate + regen) ───────────────────────────────── */

.conv-bubble-actions {
  display: flex;
  gap: 6px;
  margin: 8px 0 0 6px;
  opacity: 0;
  animation: conv-fade-in 400ms ease-out 200ms forwards;
}
@keyframes conv-fade-in { to { opacity: 1; } }

.conv-bubble-action {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease-out, border-color .15s, background .15s, color .15s;
}
.conv-bubble-action:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.conv-bubble-action.is-active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.conv-bubble-action[disabled] {
  cursor: default;
  opacity: .5;
}
.conv-bubble-action i {
  font-size: 13px;
  line-height: 1;
}

/* ── Gradient progress bar ─────────────────────────────────────────── */

.conv-progress {
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.conv-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--color-primary-soft);
  position: relative;
  overflow: hidden;
}

.conv-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--conv-progress, 0%);
  /* Gradient uses theme variables so dark mode gets white→teal, not red→teal. */
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary) 40%,
    var(--color-ps-teal) 100%
  );
  border-radius: 3px;
  transition: width 500ms cubic-bezier(.22, 1, .36, 1);
  /* Halo tint follows primary — red in light mode, white in dark mode. */
  box-shadow: 0 0 8px var(--color-primary-shadow);
}

/* Milestone pulse — added briefly via JS when a milestone is crossed */
.conv-progress-bar.conv-progress-pulse {
  animation: conv-progress-pulse 600ms cubic-bezier(.3, 1, .4, 1);
}
@keyframes conv-progress-pulse {
  0%   { transform: scale(1);   }
  30%  { transform: scale(1.04); }
  100% { transform: scale(1);   }
}

.conv-progress-label {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color .3s;
  font-weight: 600;
}
.conv-progress-ready .conv-progress-label {
  color: var(--color-primary);
}

/* ── Completion sparkle burst ─────────────────────────────────────── */

.conv-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 30;
}
.conv-burst-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  left: -4px;
  top: -4px;
  opacity: 0;
  animation: conv-burst-out 1.1s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes conv-burst-out {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.2); }
}

/* ── Review card hero entrance + depth ────────────────────────────── */

.conv-review-card {
  animation: conv-review-in 450ms cubic-bezier(.22, 1, .36, 1) both;
  /* Shadow tints with primary-shadow so dark mode doesn't get a red halo
     around a white-on-black card. */
  box-shadow:
    0 2px 4px var(--color-primary-shadow),
    0 12px 40px var(--color-primary-shadow);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: visible;
}
@keyframes conv-review-in {
  0%   { opacity: 0; transform: translateY(18px) scale(.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

.conv-review-card h5 {
  margin-bottom: 4px;
}
.conv-review-subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 16px 0;
}

/* ── Composer match preview ───────────────────────────────────────────
   "N shops can fill this", on the review card, before the find is posted.
   Rendered hidden and only unhidden when the server returns a real count —
   see fetchMatchPreview() in js/find-conversation.js. It fails closed to
   hidden, never to a zero, so there is no "empty" styling to design for
   beyond the genuine no-matches coaching state. */
.conv-match-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  margin: 0 0 14px;
}
.conv-match-preview[hidden] { display: none; }
.conv-match-preview i { font-size: 14px; flex: 0 0 auto; }
.conv-match-preview.is-positive {
  color: var(--color-ps-teal, #0f766e);
  background: rgba(15, 118, 110, .08);
  border-color: rgba(15, 118, 110, .2);
}
.conv-match-preview.is-empty {
  color: var(--color-text-muted);
  background: rgba(100, 116, 139, .08);
  border-color: rgba(100, 116, 139, .18);
  font-weight: 400;
}

.conv-review-field {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* "Post Find" button shimmer.
   We don't override background here — both style.css and style-monochrome.css
   already define theme-appropriate Post Find backgrounds. We only add the
   shimmer sweep and an adaptive halo. */
.conv-review-submit {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px var(--color-primary-shadow);
}
.conv-review-submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  /* Neutral translucent sweep + mix-blend-mode so the highlight always
     contrasts with the button background in both light and dark modes. */
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, .45) 50%,
    transparent 100%
  );
  mix-blend-mode: overlay;
  animation: conv-shimmer 2.2s ease-in-out infinite;
}
@keyframes conv-shimmer {
  0%   { left: -60%; }
  55%  { left: 120%; }
  100% { left: 120%; }
}

/* ── Confidence chips on review card fields ───────────────────────── */

.conv-confidence-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-body);
  margin-left: 8px;
  cursor: pointer;
  transition: transform .15s ease-out;
}
.conv-confidence-chip:hover {
  transform: translateY(-1px);
}
.conv-confidence-chip i {
  font-size: 11px;
}

/* ── Context card (product hint from AI) ──────────────────────────── */

.conv-context-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  /* Chain: bg-soft (light) → bg-surface (dark) → hard fallback */
  background: var(--color-bg-soft, var(--color-bg-surface, #f8f9fc));
  margin: 0 22px 14px 22px;
  animation: conv-bubble-in 320ms cubic-bezier(.22, 1, .36, 1) both;
}
.conv-context-card-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
  margin: 0;
}
.conv-context-card-subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.conv-context-card-price {
  text-align: right;
  flex-shrink: 0;
}
.conv-context-card-price-label {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.conv-context-card-price-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-primary);
  margin-top: 2px;
  white-space: nowrap;
}

/* ── Undo-send snackbar ───────────────────────────────────────────── */

/* ── Stop-generating button ───────────────────────────────────────── */

.conv-send-btn.is-stop {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.conv-send-btn.is-stop:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ── Autocomplete chips strip ──────────────────────────────────────── */

.conv-autocomplete-strip {
  display: flex;
  gap: 8px;
  padding: 10px 22px 0 22px;
  overflow-x: auto;
  scrollbar-width: none;
  animation: conv-fade-in 200ms ease-out;
}
.conv-autocomplete-strip::-webkit-scrollbar { display: none; }
.conv-autocomplete-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .15s, border-color .15s;
}
.conv-autocomplete-chip:hover {
  transform: translateY(-1px);
  border-color: var(--color-primary);
}

/* ── Ghost-text inline completion (js/ghost-text.js) ──────────────── */
/* Mirror layer drawn OVER the input (pointer-events none): the typed
   portion is an invisible spacer so the grey suffix starts exactly at
   the caret. Metrics (font/padding/position) are copied from the input
   at show-time by the JS; only colours live here. */

.stb-ghost-layer {
  position: absolute;
  display: none; /* JS flips to flex while a ghost is visible */
  pointer-events: none;
  overflow: hidden;
  white-space: pre;
  align-items: center;
  z-index: 2;
  /* Explicit, not inherited from the global reset: the JS sets width to the
     input's offsetWidth (a border-box measurement) and folds the border width
     into padding, so a content-box layer would sit wider than the input and
     the overflow guard would stop clipping. */
  box-sizing: border-box;
}
.stb-ghost-typed {
  visibility: hidden;
}
.stb-ghost-suffix {
  color: var(--color-text-muted);
  opacity: 0.75;
}

/* ── Location chip (inline quick reply) ───────────────────────────── */

.conv-location-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1.5px solid var(--color-primary);
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  margin-right: 8px;
  transition: transform .15s, background .15s;
}
.conv-location-chip:hover {
  transform: translateY(-1px);
  background: var(--color-primary-soft);
}
.conv-location-chip.is-loading {
  opacity: .7;
  cursor: progress;
}

/* ── Offline banner ───────────────────────────────────────────────── */

.conv-offline-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
  border-radius: 9999px;
  background: rgba(241, 116, 37, .08);
}
.conv-offline-pill i { font-size: 11px; }

.conv-bubble-queued {
  position: relative;
}
.conv-bubble-queued::after {
  content: '\f017';  /* clock icon from unicons */
  font-family: "unicons";
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── Container is positioned so pill + snackbar can overlay it ────── */

.conv-container-wrapper,
.conv-container {
  position: relative;
}

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .conv-header-avatar::before,
  .conv-header-avatar.conv-avatar-thinking::before,
  .conv-header-avatar.conv-avatar-error,
  .conv-header-avatar.conv-avatar-success,
  .conv-bubble,
  .conv-progress-bar.conv-progress-pulse,
  .conv-review-card,
  .conv-burst-dot,
  .conv-review-submit::after,
  .conv-context-card,
  .conv-autocomplete-strip,
  .conv-cursor {
    animation: none !important;
    transition: none !important;
  }
  .conv-progress-bar::after {
    transition-duration: 0ms !important;
  }
}

/* ====================================================================
   ABOUT PAGE — ONCE UPON A FIND (monochrome / dark mirror)
   Mirrors style.css block but tuned for dark tokens.
   ==================================================================== */

.sinatabu-about {
  --sa-cream: #0a0a0a;
  --sa-cream-dark: #121212;
  --sa-ink: #ffffff;
  --sa-ink-soft: #b0b0b0;
  --sa-red: #ffffff;
  --sa-teal: #cccccc;
  --sa-pink: #a0a0a0;
  --sa-orange: #e0e0e0;
  --sa-line: rgba(255,255,255,0.12);
  --sa-ease: cubic-bezier(0.68, -0.3, 0.265, 1.4);
  background: #000;
  color: #e0e0e0;
  font-family: "Lato", sans-serif;
  /* `overflow-x: clip` crops horizontal overflow without promoting
   * this element to a scroll container. See style.css for the full
   * rationale — `overflow-x: hidden` was swallowing the first wheel
   * event on page load. */
  overflow-x: hidden;
  overflow-x: clip;
}
.sinatabu-about * { box-sizing: border-box; }
.sinatabu-about h1, .sinatabu-about h2, .sinatabu-about h3 {
  font-family: "Ubuntu", sans-serif;
  color: #ffffff;
}
.sinatabu-about section { padding: 100px 0; position: relative; }

.sinatabu-about .sa-section-label {
  font-family: "Ubuntu", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.7;
}
.sinatabu-about .sa-section-label--light { color: #fff; opacity: 0.85; }
.sinatabu-about .sa-section-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
  color: #fff;
}
.sinatabu-about .sa-section-title--light { color: #fff; }
.sinatabu-about .sa-section-sub {
  font-size: 17px;
  color: #b0b0b0;
  max-width: 620px;
}
.sinatabu-about .sa-section-sub--light { color: rgba(255,255,255,0.85); }
.sinatabu-about .sa-section-head { max-width: 800px; margin-bottom: 56px; }

.sinatabu-about .sa-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}
.sinatabu-about .sa-reveal.is-visible { opacity: 1; transform: none; }

.sinatabu-about .sa-img-wrap { position: relative; overflow: hidden; background: #1a1a1a; }
.sinatabu-about .sa-img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.05); }
.sinatabu-about .sa-img-wrap.is-missing { background: linear-gradient(135deg, #121212 0%, #222 100%); }
.sinatabu-about .sa-img-wrap.is-missing img { display: none; }

/* Elastic button */
.sinatabu-about .btn-sinatabu-elastic {
  position: relative;
  display: inline-block;
  padding: 18px 40px;
  border-radius: 9999px;
  font-family: "Ubuntu", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  border: 1.5px solid #ffffff;
  transition: transform 0.5s var(--sa-ease), box-shadow 0.5s var(--sa-ease);
  min-width: 210px;
  text-align: center;
}
.sinatabu-about .btn-sinatabu-elastic .sa-btn-face,
.sinatabu-about .btn-sinatabu-elastic .sa-btn-back {
  display: block;
  transition: transform 0.5s var(--sa-ease);
}
.sinatabu-about .btn-sinatabu-elastic .sa-btn-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(120%);
}
.sinatabu-about .btn-sinatabu-elastic:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(255,255,255,0.12); }
.sinatabu-about .btn-sinatabu-elastic:hover .sa-btn-face { transform: translateY(-120%); }
.sinatabu-about .btn-sinatabu-elastic:hover .sa-btn-back { transform: translateY(0); }
.sinatabu-about .btn-sinatabu-elastic--primary { background: #ffffff; color: #000000; border-color: #ffffff; }
.sinatabu-about .btn-sinatabu-elastic--primary:hover { background: #e0e0e0; border-color: #e0e0e0; color: #000; }
.sinatabu-about .btn-sinatabu-elastic--ghost { background: transparent; color: #ffffff; }
.sinatabu-about .btn-sinatabu-elastic--ghost:hover { background: #ffffff; color: #000000; }

/* HERO */
.sinatabu-about .sa-hero {
  padding: 60px 0 80px;
  min-height: 100vh;
  background: #000;
  position: relative;
  overflow: hidden;
}
.sinatabu-about .sa-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.sinatabu-about .sa-hero-inner { position: relative; z-index: 2; padding: 0 clamp(20px, 5vw, 80px); max-width: 1600px; margin: 0 auto; }
.sinatabu-about .sa-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  min-height: calc(100vh - 240px);
  padding-top: 60px;
}
.sinatabu-about .sa-eyebrow {
  font-family: "Ubuntu", sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: #ffffff;
  margin-bottom: 32px;
  text-transform: uppercase;
  opacity: 0.7;
}
.sinatabu-about .sa-hero-title {
  font-size: clamp(3rem, 9vw, 8rem);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  color: #ffffff;
}
.sinatabu-about .sa-hero-title .sa-typed { color: #ffffff; font-style: italic; opacity: 0.7; }
.sinatabu-about .sa-hero-sub { font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: #e0e0e0; margin-bottom: 14px; max-width: 560px; line-height: 1.45; }
.sinatabu-about .sa-hero-kicker { font-size: 15px; color: #999999; margin-bottom: 40px; max-width: 520px; font-style: italic; }
.sinatabu-about .sa-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.sinatabu-about .sa-hero-visual { position: relative; height: 560px; will-change: transform; }
.sinatabu-about .sa-hero-visual .sa-img-wrap { position: absolute; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,0.8); }
.sinatabu-about .sa-hero-visual .sa-img-wrap--large { top: 0; right: 40px; width: 75%; height: 58%; transform: rotate(-2deg); z-index: 1; }
.sinatabu-about .sa-hero-visual .sa-img-wrap--tall { bottom: 20px; left: 0; width: 48%; height: 62%; transform: rotate(2.5deg); z-index: 2; border: 8px solid #1a1a1a; }
.sinatabu-about .sa-hero-visual .sa-img-wrap--small { bottom: 40px; right: 0; width: 42%; height: 34%; transform: rotate(-3deg); z-index: 3; border: 6px solid #1a1a1a; }
.sinatabu-about .sa-scroll-hint {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: "Ubuntu", sans-serif; font-size: 11px; letter-spacing: 0.3em;
  color: #999999;
  animation: sa-bob 2.4s ease-in-out infinite;
}
@keyframes sa-bob { 0%,100%{transform: translate(-50%,0);} 50%{transform: translate(-50%,8px);} }

/* TICKER — elevated dark surface (sa-ink navy) so it stays a "showcase strip"
   inside the otherwise near-black page, mirroring the cream→navy contrast
   used in light mode. */
.sinatabu-about .sa-ticker { padding: 80px 0 100px; background: #161c2d; color: #ffffff; scroll-margin-top: 80px; }
.sinatabu-about .sa-ticker-head { text-align: center; margin-bottom: 48px; padding: 0 20px; }
.sinatabu-about .sa-ticker-head .sa-section-label { color: #f17425; opacity: 1; }
.sinatabu-about .sa-ticker-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 300; color: #ffffff; margin: 0; }
.sinatabu-about .sa-ticker-track {
  overflow: hidden; width: 100%;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.sinatabu-about .sa-ticker-move { display: flex; gap: 24px; width: max-content; animation: sa-marquee 90s linear infinite; }
.sinatabu-about .sa-ticker:hover .sa-ticker-move { animation-play-state: paused; }
.sinatabu-about .sa-ticker-item {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9999px;
  white-space: nowrap;
  font-size: 15px;
  color: #ffffff;
}
.sinatabu-about .sa-ticker-q { color: #ffffff; font-style: italic; }

.sinatabu-about .sa-ticker-item .flag-icon { width: 22px; height: 16px; border-radius: 2px; }
@keyframes sa-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* EXHIBITS */
.sinatabu-about .sa-exhibits { background: #000; padding: 120px 0; }
.sinatabu-about .sa-exhibits-carousel .sa-exhibit-card {
  background: #0a0a0a;
  padding: 48px 36px;
  border-radius: 6px;
  min-height: 320px;
  border: 1px solid #333;
  transition: transform 0.5s var(--sa-ease), box-shadow 0.5s var(--sa-ease);
  position: relative;
}
.sinatabu-about .sa-exhibits-carousel .sa-exhibit-card:hover { transform: translateY(-10px) rotate(-0.4deg); box-shadow: 0 30px 60px rgba(0,0,0,0.6); border-color: #555; }
.sinatabu-about .sa-exhibit-numeral { font-family: "Ubuntu", sans-serif; font-size: 72px; line-height: 1; color: #fff; opacity: 0.18; font-weight: 300; margin-bottom: 18px; }
.sinatabu-about .sa-exhibit-title { font-size: 22px; font-weight: 400; line-height: 1.25; margin-bottom: 14px; color: #fff; }
.sinatabu-about .sa-exhibit-body { font-size: 15px; color: #b0b0b0; line-height: 1.6; margin: 0; }
.sinatabu-about .sa-exhibits-carousel .owl-nav button.owl-prev,
.sinatabu-about .sa-exhibits-carousel .owl-nav button.owl-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: #0a0a0a !important; border: 1px solid #333 !important; color: #fff !important;
  font-size: 18px; box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.sinatabu-about .sa-exhibits-carousel .owl-nav .owl-prev { left: -20px; }
.sinatabu-about .sa-exhibits-carousel .owl-nav .owl-next { right: -20px; }

/* STORY (interleaved chapters) */
.sinatabu-about .sa-story { background: #0a0a0a; padding: 140px 0 160px; border-top: 1px solid #222; border-bottom: 1px solid #222; }
.sinatabu-about .sa-story-intro { max-width: 820px; margin: 0 auto 100px; text-align: center; }
.sinatabu-about .sa-story-lede { font-family: "Ubuntu", sans-serif; font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 300; line-height: 1.3; color: #fff; margin: 0; font-style: italic; }
.sinatabu-about .sa-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 140px;
}
.sinatabu-about .sa-chapter:last-child { margin-bottom: 0; }
.sinatabu-about .sa-chapter:nth-child(even) .sa-chapter-visual { order: 2; }
.sinatabu-about .sa-chapter:nth-child(even) .sa-chapter-text { order: 1; }
.sinatabu-about .sa-chapter:nth-child(odd) .sa-chapter-visual { order: 1; }
.sinatabu-about .sa-chapter:nth-child(odd) .sa-chapter-text { order: 2; }
.sinatabu-about .sa-chapter-visual { position: relative; }
.sinatabu-about .sa-chapter-visual .sa-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.7);
  transform: rotate(-0.6deg);
  transition: transform 0.6s var(--sa-ease);
}
.sinatabu-about .sa-chapter:nth-child(even) .sa-chapter-visual .sa-img-wrap { transform: rotate(0.8deg); }
.sinatabu-about .sa-chapter:hover .sa-chapter-visual .sa-img-wrap { transform: rotate(0deg) scale(1.015); }

.sinatabu-about .sa-chapter-text { max-width: 520px; }
.sinatabu-about .sa-chapter-num {
  font-family: "Ubuntu", sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #fff;
  opacity: 0.7;
  margin-bottom: 18px;
  text-transform: uppercase;
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255,255,255,0.5);
}
.sinatabu-about .sa-chapter-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 300; line-height: 1.12; margin-bottom: 20px; color: #fff; }
.sinatabu-about .sa-chapter p { font-size: 17px; color: #b0b0b0; line-height: 1.7; margin: 0; }

/* VOICES */
.sinatabu-about .sa-voices { background: #000; padding: 0 0 120px; }
.sinatabu-about .sa-voices-banner { position: relative; height: 420px; overflow: hidden; margin-bottom: 80px; }
.sinatabu-about .sa-voices-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sinatabu-about .sa-voices-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.85) 60%, #000 100%); }
.sinatabu-about .sa-voices-banner-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; color: #fff; }
.sinatabu-about .sa-voice-card {
  background: #0a0a0a;
  padding: 44px 36px 32px;
  border: 1px solid #333;
  border-radius: 2px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  position: relative;
  min-height: 340px;
  transform: rotate(-0.4deg);
  color: #e0e0e0;
}
.sinatabu-about .sa-voice-card:nth-child(even) { transform: rotate(0.5deg); }
.sinatabu-about .sa-voice-quote-mark { font-family: "Ubuntu", serif; font-size: 72px; line-height: 0.6; color: #fff; opacity: 0.2; margin-bottom: 10px; }
.sinatabu-about .sa-voice-quote { font-family: "Ubuntu", sans-serif; font-size: 17px; line-height: 1.55; color: #fff; margin: 0 0 22px; font-style: italic; font-weight: 300; }
.sinatabu-about .sa-voice-stars { color: #fff; letter-spacing: 2px; margin-bottom: 14px; opacity: 0.8; }
.sinatabu-about .sa-voice-meta { border-top: 1px solid #333; padding-top: 14px; }
.sinatabu-about .sa-voice-name { font-weight: 400; font-size: 15px; color: #fff; }
.sinatabu-about .sa-voice-role { font-size: 13px; color: #999; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sinatabu-about .sa-voice-role .flag-icon { width: 18px; height: 13px; border-radius: 2px; }

/* TIMELINE */
.sinatabu-about .sa-timeline { background: #0a0a0a; padding: 120px 0; border-top: 1px solid #222; }
.sinatabu-about .sa-timeline-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; position: relative; }
.sinatabu-about .sa-timeline-rail::before {
  content: ''; position: absolute; top: 30px; left: 40px; right: 40px; height: 2px;
  background: repeating-linear-gradient(90deg, #fff 0 8px, transparent 8px 16px); opacity: 0.5;
}
.sinatabu-about .sa-milestone { position: relative; padding-top: 56px; }
.sinatabu-about .sa-milestone::before {
  content: ''; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 4px solid #0a0a0a; box-shadow: 0 0 0 2px #fff; z-index: 1;
}
.sinatabu-about .sa-milestone-plaque { background: #000; border: 1px solid #333; border-radius: 4px; padding: 20px 18px; text-align: center; min-height: 180px; }
.sinatabu-about .sa-milestone-date { font-family: "Ubuntu", sans-serif; font-size: 11px; letter-spacing: 0.2em; color: #fff; opacity: 0.6; margin-bottom: 10px; text-transform: uppercase; }
.sinatabu-about .sa-milestone-title { font-family: "Ubuntu", sans-serif; font-size: 16px; font-weight: 400; color: #fff; margin-bottom: 10px; line-height: 1.25; }
.sinatabu-about .sa-milestone-body { font-size: 13px; color: #999; line-height: 1.5; margin: 0; }

/* NUMBERS */


/* MISSION */
.sinatabu-about .sa-mission { position: relative; padding: 160px 0; color: #fff; overflow: hidden; }
.sinatabu-about .sa-mission-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sinatabu-about .sa-mission-bg.is-missing { background: #000; }
.sinatabu-about .sa-mission-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.92) 100%); z-index: 1; }
.sinatabu-about .sa-mission-inner { position: relative; z-index: 2; text-align: center; max-width: 880px; }
.sinatabu-about .sa-mission-quote { font-family: "Ubuntu", sans-serif; font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 300; font-style: italic; line-height: 1.3; color: #fff; margin: 0 0 36px; letter-spacing: -0.01em; }
.sinatabu-about .sa-mission-body { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.75); max-width: 720px; margin: 0 auto; }

/* FINAL CTA */
.sinatabu-about .sa-cta { background: #000; padding: 140px 0; }
.sinatabu-about .sa-cta-title { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 300; line-height: 1; margin-bottom: 18px; letter-spacing: -0.02em; color: #fff; }
.sinatabu-about .sa-cta-sub { font-size: 18px; color: #999; margin-bottom: 40px; font-style: italic; }
.sinatabu-about .sa-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  .sinatabu-about .sa-hero-grid { grid-template-columns: 1fr; gap: 40px; min-height: auto; }
  .sinatabu-about .sa-hero-visual { height: 440px; max-width: 600px; }
  .sinatabu-about .sa-chapter { grid-template-columns: 1fr; gap: 32px; margin-bottom: 90px; }
  .sinatabu-about .sa-chapter:nth-child(even) .sa-chapter-visual,
  .sinatabu-about .sa-chapter:nth-child(odd) .sa-chapter-visual { order: 1; }
  .sinatabu-about .sa-chapter:nth-child(even) .sa-chapter-text,
  .sinatabu-about .sa-chapter:nth-child(odd) .sa-chapter-text { order: 2; }
  .sinatabu-about .sa-chapter-visual .sa-img-wrap{ aspect-ratio: 16 / 11; }
  
  .sinatabu-about .sa-timeline-rail { grid-template-columns: 1fr; gap: 0; }
  .sinatabu-about .sa-timeline-rail::before { display: none; }
  .sinatabu-about .sa-milestone { padding-top: 0; padding-left: 40px; margin-bottom: 24px; }
  .sinatabu-about .sa-milestone::before { top: 24px; left: 8px; transform: none; }
}
@media (max-width: 768px) {
  .sinatabu-about section { padding: 70px 0; }
  .sinatabu-about .sa-hero { padding: 40px 0 60px; min-height: auto; }
  .sinatabu-about .sa-hero-title { font-size: clamp(2.8rem, 12vw, 5rem); }
  .sinatabu-about .sa-hero-visual { height: 360px; }
  .sinatabu-about .sa-hero-actions { flex-direction: column; }
  .sinatabu-about .btn-sinatabu-elastic { width: 100%; min-width: 0; }
  .sinatabu-about .sa-voices-banner { height: 320px; margin-bottom: 50px; }
  .sinatabu-about .sa-story { padding: 80px 0; }
  .sinatabu-about .sa-mission { padding: 100px 0; }
  .sinatabu-about .sa-mission-quote { font-size: 1.6rem; }
  .sinatabu-about .sa-exhibits-carousel .owl-nav { display: none; }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .sinatabu-about *,
  .sinatabu-about *::before,
  .sinatabu-about *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sinatabu-about .sa-reveal { opacity: 1 !important; transform: none !important; }
  .sinatabu-about .sa-ticker-move { animation: none !important; }
  .sinatabu-about .sa-hero-canvas { display: none; }
}

/* ============================================================
   Sinatabu for Work (work.php) — FULL styles for dark mode
   Since style-monochrome.css replaces style.css entirely,
   all component styles must be duplicated here with dark tokens.
   ============================================================ */
.sw-page {
  --sw-bg: #0a0a0a;
  --sw-surface: #121212;
  --sw-surface-2: #1a1a1a;
  --sw-ink: #ffffff;
  --sw-ink-soft: #b0b0b0;
  --sw-line: rgba(255, 255, 255, 0.10);
  --sw-accent: #ffffff;
  --sw-accent-soft: rgba(255, 255, 255, 0.08);
  --sw-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.6);
  --sw-shadow-hover: 0 20px 50px rgba(255, 255, 255, 0.08);
  --sw-img-filter: brightness(1.8) contrast(0.9);

  background: var(--sw-bg);
  color: var(--sw-ink);
  font-family: "Lato", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sw-page h1, .sw-page h2, .sw-page h3, .sw-page h4, .sw-page h5 {
  font-family: "Ubuntu", sans-serif;
  color: var(--sw-ink);
  letter-spacing: -0.01em;
}
.sw-page p { color: var(--sw-ink-soft); }
.sw-page .sw-eyebrow {
  display: inline-block;
  font-family: "Ubuntu", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sw-accent);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--sw-accent-soft);
  margin-bottom: 20px;
}
.sw-page .sw-section { padding: 96px 0; }
.sw-page .sw-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.sw-page .sw-section-head h2 { font-size: 36px; margin-bottom: 14px; }
.sw-page .sw-section-head p { font-size: 17px; line-height: 1.7; }

/* ---------- HERO ---------- */
.sw-hero {
  position: relative;
  padding: 140px 0 100px;
  overflow: hidden;
  background: var(--sw-bg);
}
.sw-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../images/nyumasana.png");
  background-size: cover;
  background-position: center;
  opacity: 0.04;
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.sw-hero-inner { position: relative; text-align: center; max-width: 820px; margin: 0 auto; padding: 0 20px; }
.sw-hero h1 {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: 22px;
}
.sw-hero p.sw-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto 36px;
}
.sw-hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.sw-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: 9999px;
  border: 1px solid var(--sw-line);
  background: transparent;
  color: var(--sw-ink);
  font-weight: 400;
  font-family: "Ubuntu", sans-serif;
  font-size: 15px;
  transition: all 0.25s ease;
  text-decoration: none;
}
.sw-btn-ghost:hover {
  border-color: var(--sw-accent);
  color: var(--sw-accent);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ---------- AUDIENCES ---------- */
.sw-audiences { padding: 40px 0 96px; background: var(--sw-bg); }
.sw-audiences-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 991px) { .sw-audiences-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .sw-audiences-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.sw-audience-card {
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 18px;
  padding: 28px 18px 24px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: default;
}
.sw-audience-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sw-shadow-hover);
  border-color: var(--sw-accent);
}
.sw-audience-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 9999px;
  background: var(--sw-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}
.sw-audience-card:hover .sw-audience-icon { background: var(--sw-accent-soft); }
.sw-audience-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: var(--sw-img-filter);
}
.sw-audience-card h4 {
  font-size: 17px;
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--sw-ink);
}
.sw-audience-card p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  color: var(--sw-ink-soft);
}

/* ---------- PILLARS ---------- */
.sw-pillars { background: var(--sw-surface-2); }
.sw-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 767px) { .sw-pillars-grid { grid-template-columns: 1fr; } }
.sw-pillar-card {
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 20px;
  padding: 36px 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sw-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sw-shadow-card);
}
.sw-pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--sw-accent-soft);
  color: var(--sw-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 22px;
}
.sw-pillar-num {
  display: block;
  font-family: "Ubuntu", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sw-ink-soft);
  margin-bottom: 8px;
}
.sw-pillar-card h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 12px;
}
.sw-pillar-card p { font-size: 15px; line-height: 1.65; margin: 0; }

/* ---------- STORY ---------- */
.sw-story { background: var(--sw-bg); }
.sw-story-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 900px) { .sw-story-grid { grid-template-columns: 1fr; gap: 40px; } }
.sw-img-wrap {
  border-radius: 24px;
  overflow: hidden;
  background: var(--sw-surface-2);
  padding: 20px;
}
.sw-img-wrap img { width: 100%; height: auto; display: block; filter: var(--sw-img-filter); }
.sw-story-text h2 { font-size: 34px; margin-bottom: 22px; }
.sw-story-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--sw-ink) !important;
  font-weight: 400;
  margin-bottom: 18px;
}
.sw-story-text p { font-size: 16px; line-height: 1.75; margin-bottom: 16px; }

/* ---------- HOW IT WORKS ---------- */
.sw-how { background: var(--sw-surface-2); }
.sw-how-card {
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 24px;
  padding: 56px 48px;
  max-width: 1040px;
  margin: 0 auto;
  box-shadow: var(--sw-shadow-card);
}
.sw-how-card > h2 { text-align: center; font-size: 32px; margin-bottom: 10px; }
.sw-how-card > p.sw-how-sub { text-align: center; margin-bottom: 40px; font-size: 16px; }
.sw-how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 767px) { .sw-how-steps { grid-template-columns: 1fr; } }
.sw-step { text-align: left; }
.sw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--sw-accent-soft);
  color: var(--sw-accent);
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px;
}
.sw-step h4 { font-size: 17px; font-weight: 400; margin: 0 0 8px; color: var(--sw-ink); }
.sw-step p { font-size: 14px; line-height: 1.6; margin: 0; }

/* ---------- CATEGORIES ---------- */
.sw-categories { background: var(--sw-bg); }
.sw-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 900px) { .sw-categories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sw-categories-grid { grid-template-columns: 1fr; } }
.sw-category-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 16px;
  padding: 22px 22px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.sw-category-card:hover {
  transform: translateY(-3px);
  border-color: var(--sw-accent);
  box-shadow: var(--sw-shadow-card);
  text-decoration: none;
}
.sw-category-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--sw-accent-soft);
  color: var(--sw-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: background 0.25s ease, color 0.25s ease;
}
.sw-category-card:hover .sw-category-icon { background: var(--sw-accent); color: var(--sw-surface); }
.sw-category-card h4 {
  font-size: 15px;
  font-weight: 400;
  margin: 0;
  color: var(--sw-ink);
  line-height: 1.35;
}

/* ---------- FINAL CTA ---------- */
.sw-cta {
  position: relative;
  text-align: center;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.65)),
    url("../images/forwork.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sw-cta-inner { position: relative; max-width: 720px; margin: 0 auto; padding: 0 20px; }
.sw-cta h2 {
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: 16px;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.sw-cta p {
  font-size: 17px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.sw-cta .btn { padding: 13px 44px; font-size: 15px; }
.sw-cta-reassure {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* ---------- Responsive section padding ---------- */
@media (max-width: 767px) {
  .sw-page .sw-section { padding: 64px 0; }
  .sw-hero { padding: 100px 0 60px; }
  .sw-how-card { padding: 36px 24px; }
  .sw-page .sw-section-head { margin-bottom: 36px; }
  .sw-page .sw-section-head h2 { font-size: 28px; }
}

/* ---------- DESKTOP DOWNLOAD (desktop.php + work.php section) ----------
   Reuses the .sw-* tokens above, so this block is byte-identical in
   style.css and style-monochrome.css — light/dark comes entirely from the
   token values each file defines on .sw-page. Keep the two copies in sync. */
.sw-dl-hero-meta {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--sw-ink-soft);
}
.sw-dl-downloads { background: var(--sw-surface-2); }
.sw-dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: start;
}
@media (max-width: 991px) { .sw-dl-grid { grid-template-columns: 1fr; max-width: 520px; } }

.sw-dl-card {
  position: relative;
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 18px;
  padding: 34px 26px 28px;
  text-align: center;
  box-shadow: var(--sw-shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.sw-dl-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sw-shadow-hover);
  border-color: var(--sw-accent);
}
.sw-dl-card.is-detected { border-color: var(--sw-accent); }
.sw-dl-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Ubuntu", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--sw-accent);
  /* The accent is near-white in dark mode and deep red in light mode, so the
     label has to take its colour from the card rather than a fixed value. */
  color: var(--sw-surface);
}
.sw-dl-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 9999px;
  background: var(--sw-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}
.sw-dl-card:hover .sw-dl-icon { background: var(--sw-accent-soft); }
.sw-dl-icon i { font-size: 30px; color: var(--sw-ink); }
.sw-dl-card h4 { font-size: 20px; font-weight: 400; margin: 0 0 6px; }
.sw-dl-req {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px;
  color: var(--sw-ink-soft);
}
.sw-dl-buttons { display: flex; flex-direction: column; gap: 10px; }
.sw-dl-buttons .btn { padding: 11px 20px; font-size: 14px; }
.sw-dl-alt {
  display: block;
  padding: 9px 16px;
  border-radius: 9999px;
  border: 1px solid var(--sw-line);
  color: var(--sw-ink);
  font-family: "Ubuntu", sans-serif;
  font-size: 13px;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.sw-dl-alt:hover { border-color: var(--sw-accent); color: var(--sw-accent); text-decoration: none; }
.sw-dl-size { opacity: 0.65; margin-left: 6px; font-size: 12px; }
.sw-dl-note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  color: var(--sw-ink-soft);
}
.sw-dl-note i { margin-right: 4px; }
.sw-dl-note code {
  background: var(--sw-surface-2);
  color: var(--sw-ink);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
.sw-dl-account {
  max-width: 640px;
  margin: 40px auto 0;
  padding: 0 20px;
  text-align: center;
  font-size: 14px;
  color: var(--sw-ink-soft);
}
.sw-dl-account i { margin-right: 6px; color: var(--sw-accent); }
.sw-dl-account a { color: var(--sw-accent); text-decoration: underline; }

.sw-dl-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 28px;
  text-align: center;
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 18px;
}
.sw-dl-empty i { font-size: 38px; color: var(--sw-ink-soft); }
.sw-dl-empty h4 { font-size: 21px; font-weight: 400; margin: 14px 0 10px; }
.sw-dl-empty p { font-size: 15px; line-height: 1.6; margin-bottom: 26px; }

/* ---------- Why the desktop app ---------- */
.sw-dl-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 991px) { .sw-dl-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sw-dl-features-grid { grid-template-columns: 1fr; } }
.sw-dl-feature {
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 18px;
  padding: 28px 24px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.sw-dl-feature:hover { transform: translateY(-4px); border-color: var(--sw-accent); }
.sw-dl-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--sw-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.sw-dl-feature-icon i { font-size: 22px; color: var(--sw-accent); }
.sw-dl-feature h4 { font-size: 17px; font-weight: 400; margin: 0 0 8px; }
.sw-dl-feature p { font-size: 14px; line-height: 1.6; margin: 0; }

/* ---------- The other app (consumer) ---------- */
.sw-dl-consumer { background: var(--sw-surface-2); }
.sw-dl-consumer-inner { max-width: 720px; margin: 0 auto; padding: 0 20px; text-align: center; }
.sw-dl-consumer h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
.sw-dl-consumer p { font-size: 16px; line-height: 1.7; margin-bottom: 30px; }
.sw-dl-consumer-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- work.php download strip ---------- */
.sw-dl-strip { background: var(--sw-surface-2); }
.sw-dl-strip-inner {
  display: flex;
  align-items: center;
  gap: 44px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 991px) {
  .sw-dl-strip-inner { flex-direction: column; gap: 30px; text-align: center; }
}
.sw-dl-strip-copy { flex: 1 1 0; }
.sw-dl-strip-copy h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 14px; }
.sw-dl-strip-copy p { font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
.sw-dl-strip-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
@media (max-width: 991px) { .sw-dl-strip-cta { justify-content: center; } }
.sw-dl-strip-os {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
}
.sw-dl-strip-os a,
.sw-dl-strip-os .is-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 104px;
  padding: 22px 10px;
  border-radius: 16px;
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  color: var(--sw-ink);
  font-family: "Ubuntu", sans-serif;
  font-size: 13px;
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.sw-dl-strip-os a:hover {
  transform: translateY(-4px);
  border-color: var(--sw-accent);
  color: var(--sw-accent);
  text-decoration: none;
}
.sw-dl-strip-os .is-soon {
  opacity: 0.55;
  cursor: default;
  border-style: dashed;
}
.sw-dl-soon-pill {
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  border-radius: 9999px;
  border: 1px dashed var(--sw-line);
  background: transparent;
  color: var(--sw-ink-soft);
  font-family: "Ubuntu", sans-serif;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.sw-dl-strip-os i { font-size: 26px; }
@media (max-width: 575px) {
  .sw-dl-strip-os a { width: 92px; padding: 18px 8px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sw-dl-card, .sw-dl-feature, .sw-dl-strip-os a { transition: none; }
  .sw-dl-card:hover, .sw-dl-feature:hover, .sw-dl-strip-os a:hover { transform: none; }
}

/* ============================================================
   Add a Shop (addshop.php) — FULL styles for dark mode
   Since style-monochrome.css replaces style.css entirely,
   all component styles must be duplicated here with dark tokens.
   ============================================================ */
.as-page {
  --as-bg: #0a0a0a;
  --as-surface: #121212;
  --as-surface-2: #1a1a1a;
  --as-ink: #ffffff;
  --as-ink-soft: #b0b0b0;
  --as-line: rgba(255, 255, 255, 0.10);
  --as-accent: #ffffff;
  --as-accent-soft: rgba(255, 255, 255, 0.08);
  --as-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.6);
  --as-shadow-hover: 0 20px 50px rgba(255, 255, 255, 0.08);
  --as-img-filter: brightness(1.8) contrast(0.9);

  background: var(--as-bg);
  color: var(--as-ink);
  font-family: "Lato", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.as-page h1, .as-page h2, .as-page h3, .as-page h4, .as-page h5 {
  font-family: "Ubuntu", sans-serif;
  color: var(--as-ink);
  letter-spacing: -0.01em;
}
.as-page p { color: var(--as-ink-soft); }
.as-page .as-eyebrow {
  display: inline-block;
  font-family: "Ubuntu", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--as-accent);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--as-accent-soft);
  margin-bottom: 20px;
}
.as-page .as-section { padding: 96px 0; }
.as-page .as-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; padding: 0 20px; }
.as-page .as-section-head h2 { font-size: 36px; margin-bottom: 14px; }
.as-page .as-section-head p { font-size: 17px; line-height: 1.7; }

/* ---------- HERO ---------- */
.as-hero {
  position: relative;
  padding: 140px 0 100px;
  overflow: hidden;
  background: var(--as-bg);
}
.as-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../images/nyumasana.png");
  background-size: cover;
  background-position: center;
  opacity: 0.04;
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.as-hero-inner { position: relative; text-align: center; max-width: 820px; margin: 0 auto; padding: 0 20px; }
.as-hero h1 {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: 22px;
}
.as-hero p.as-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto 36px;
}
.as-hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.as-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: 9999px;
  border: 1px solid var(--as-line);
  background: transparent;
  color: var(--as-ink);
  font-weight: 400;
  font-family: "Ubuntu", sans-serif;
  font-size: 15px;
  transition: all 0.25s ease;
  text-decoration: none;
}
.as-btn-ghost:hover {
  border-color: var(--as-accent);
  color: var(--as-accent);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ---------- PILLARS ---------- */
.as-pillars { background: var(--as-surface-2); }
.as-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 767px) { .as-pillars-grid { grid-template-columns: 1fr; } }
.as-pillar-card {
  background: var(--as-surface);
  border: 1px solid var(--as-line);
  border-radius: 20px;
  padding: 36px 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.as-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--as-shadow-card);
}
.as-pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--as-accent-soft);
  color: var(--as-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 22px;
}
.as-pillar-num {
  display: block;
  font-family: "Ubuntu", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--as-ink-soft);
  margin-bottom: 8px;
}
.as-pillar-card h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 12px;
}
.as-pillar-card p { font-size: 15px; line-height: 1.65; margin: 0; }

/* ---------- CATEGORIES ---------- */
.as-categories { background: var(--as-bg); }
.as-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 900px) { .as-categories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .as-categories-grid { grid-template-columns: 1fr; } }
.as-category-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--as-surface);
  border: 1px solid var(--as-line);
  border-radius: 16px;
  padding: 22px 22px;
  text-decoration: none;
  transition: all 0.25s ease;
}
.as-category-card:hover {
  transform: translateY(-3px);
  border-color: var(--as-accent);
  box-shadow: var(--as-shadow-card);
  text-decoration: none;
}
.as-category-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--as-accent-soft);
  color: var(--as-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: background 0.25s ease, color 0.25s ease;
}
.as-category-card:hover .as-category-icon { background: var(--as-accent); color: var(--as-surface); }
.as-category-card h4 {
  font-size: 15px;
  font-weight: 400;
  margin: 0;
  color: var(--as-ink);
  line-height: 1.35;
}

/* ---------- STATS ---------- */
.as-stats { background: var(--as-surface-2); }
.as-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 767px) { .as-stats-grid { grid-template-columns: 1fr; } }
.as-stat-card {
  background: var(--as-surface);
  border: 1px solid var(--as-line);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.as-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--as-shadow-card);
}
.as-stat-num {
  font-family: "Ubuntu", sans-serif;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--as-accent);
  margin-bottom: 8px;
}
.as-stat-num .counter-value { display: inline-block; }
.as-stat-label {
  font-family: "Ubuntu", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--as-ink-soft);
}

/* ---------- HOW IT WORKS ---------- */
.as-how { background: var(--as-bg); }
.as-how-card {
  background: var(--as-surface);
  border: 1px solid var(--as-line);
  border-radius: 24px;
  padding: 56px 48px;
  max-width: 1040px;
  margin: 0 auto;
  box-shadow: var(--as-shadow-card);
}
.as-how-card > h2 { text-align: center; font-size: 32px; margin-bottom: 10px; }
.as-how-card > p.as-how-sub { text-align: center; margin-bottom: 40px; font-size: 16px; }
.as-how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 767px) { .as-how-steps { grid-template-columns: 1fr; } }
.as-step { text-align: left; }
.as-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--as-accent-soft);
  color: var(--as-accent);
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px;
}
.as-step h4 { font-size: 17px; font-weight: 400; margin: 0 0 8px; color: var(--as-ink); }
.as-step p { font-size: 14px; line-height: 1.6; margin: 0; }

/* ---------- FAQ ---------- */
.as-faq { background: var(--as-surface-2); }
.as-faq-grid {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}
.as-faq-card {
  background: var(--as-surface);
  border: 1px solid var(--as-line);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.as-faq-card:hover { border-color: var(--as-accent); }
.as-faq-card .as-faq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  text-decoration: none;
  color: var(--as-ink);
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  transition: color 0.25s ease;
}
.as-faq-card .as-faq-head:hover,
.as-faq-card .as-faq-head[aria-expanded="true"] { color: var(--as-accent); text-decoration: none; }
.as-faq-card .as-faq-head::after {
  content: "\F0140";
  font-family: "Material Design Icons";
  font-size: 22px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.as-faq-card .as-faq-head[aria-expanded="true"]::after { transform: rotate(180deg); }
.as-faq-card .as-faq-body {
  padding: 0 24px 24px;
  color: var(--as-ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
.as-faq-more {
  text-align: center;
  margin-top: 32px;
  margin-bottom: 0;
}
.as-faq-more a {
  color: var(--as-accent);
  font-family: "Ubuntu", sans-serif;
  font-size: 15px;
  text-decoration: none;
}
.as-faq-more a:hover { text-decoration: underline; }

/* ---------- FINAL CTA ---------- */
.as-cta {
  position: relative;
  text-align: center;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.65)),
    url("../images/coveraddatab.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.as-cta-inner { position: relative; max-width: 720px; margin: 0 auto; padding: 0 20px; }
.as-cta h2 {
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: 16px;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.as-cta p {
  font-size: 17px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.as-cta .btn { padding: 13px 44px; font-size: 15px; }
.as-cta-reassure {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* ---------- Responsive section padding ---------- */
@media (max-width: 767px) {
  .as-page .as-section { padding: 64px 0; }
  .as-hero { padding: 100px 0 60px; }
  .as-how-card { padding: 36px 24px; }
  .as-page .as-section-head { margin-bottom: 36px; }
  .as-page .as-section-head h2 { font-size: 28px; }
  .as-stat-card { padding: 32px 22px; }
}

/* ============================================================
   Sinatabu Lifestyle — FULL styles for dark mode
   Since style-monochrome.css replaces style.css entirely,
   all component styles must be duplicated here with dark tokens.
   ============================================================ */
.sl-page {
  --sl-bg: #0a0a0a;
  --sl-surface: #121212;
  --sl-surface-2: #1a1a1a;
  --sl-ink: #ffffff;
  --sl-ink-soft: #b0b0b0;
  --sl-line: rgba(255, 255, 255, 0.10);
  --sl-accent: #00d4c4;
  --sl-accent-soft: rgba(0, 212, 196, 0.08);
  --sl-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.6);
  --sl-shadow-hover: 0 20px 50px rgba(0, 212, 196, 0.12);
  --sl-img-filter: brightness(0.9) contrast(1.1);

  background: var(--sl-bg);
  color: var(--sl-ink);
  font-family: "Lato", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sl-page h1, .sl-page h2, .sl-page h3, .sl-page h4, .sl-page h5 {
  font-family: "Ubuntu", sans-serif;
  color: var(--sl-ink);
  letter-spacing: -0.01em;
}
.sl-page p { color: var(--sl-ink-soft); }
.sl-page .sl-eyebrow {
  display: inline-block;
  font-family: "Ubuntu", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sl-accent);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--sl-accent-soft);
  margin-bottom: 20px;
}
.sl-page .sl-section { padding: 96px 0; }
.sl-page .sl-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.sl-page .sl-section-head h2 { font-size: 36px; margin-bottom: 14px; }
.sl-page .sl-section-head p { font-size: 17px; line-height: 1.7; }

/* ---------- HERO ---------- */
.sl-hero {
  position: relative;
  padding: 140px 0 100px;
  overflow: hidden;
  background: var(--sl-bg);
}
.sl-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../images/nyumasana.png");
  background-size: cover;
  background-position: center;
  opacity: 0.04;
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.sl-hero-inner { position: relative; text-align: center; max-width: 820px; margin: 0 auto; padding: 0 20px; }
.sl-hero h1 {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: 22px;
}
.sl-hero p.sl-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto 36px;
}
.sl-hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.sl-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: 9999px;
  border: 1px solid var(--sl-line);
  background: transparent;
  color: var(--sl-ink);
  font-weight: 400;
  font-family: "Ubuntu", sans-serif;
  font-size: 15px;
  transition: all 0.25s ease;
  text-decoration: none;
}
.sl-btn-ghost:hover {
  border-color: var(--sl-accent);
  color: var(--sl-accent);
  transform: translateY(-2px);
  text-decoration: none;
}
.sl-page .btn-primary {
  background-color: var(--sl-accent);
  border-color: var(--sl-accent);
}
.sl-page .btn-primary:hover, .sl-page .btn-primary:focus {
  background-color: #00b8aa;
  border-color: #00b8aa;
}

/* ---------- STEPS ---------- */
.sl-steps { background: var(--sl-surface-2); }
.sl-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 767px) { .sl-steps-grid { grid-template-columns: 1fr; } }
.sl-step-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-line);
  border-radius: 20px;
  padding: 36px 30px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sl-step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sl-shadow-card);
}
.sl-step-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  border-radius: 9999px;
  background: var(--sl-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sl-step-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: var(--sl-img-filter);
}
.sl-step-num {
  display: block;
  font-family: "Ubuntu", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sl-ink-soft);
  margin-bottom: 8px;
}
.sl-step-card h3 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 10px;
}
.sl-step-card p { font-size: 15px; line-height: 1.65; margin: 0; }

/* ---------- BENEFITS ---------- */
.sl-benefits { background: var(--sl-bg); }
.sl-benefits-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 900px) { .sl-benefits-grid { grid-template-columns: 1fr; gap: 40px; } }
.sl-img-wrap {
  border-radius: 24px;
  overflow: hidden;
  background: var(--sl-surface-2);
  padding: 20px;
}
.sl-img-wrap img { width: 100%; height: auto; display: block; filter: var(--sl-img-filter); }
.sl-benefits-text h2 { font-size: 34px; margin-bottom: 32px; }
.sl-benefit-block { margin-bottom: 28px; display: flex; gap: 16px; align-items: flex-start; }
.sl-benefit-block:last-child { margin-bottom: 0; }
.sl-benefit-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--sl-accent-soft);
  color: var(--sl-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-top: 2px;
}
.sl-benefit-block h4 {
  font-size: 17px;
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--sl-ink);
}
.sl-benefit-block p { font-size: 15px; line-height: 1.65; margin: 0; }

/* ---------- FAQ ---------- */
.sl-faq { background: var(--sl-surface-2); }
.sl-faq-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 900px) { .sl-faq-grid { grid-template-columns: 1fr; } }
.sl-faq-item {
  background: var(--sl-surface);
  border: 1px solid var(--sl-line);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
.sl-faq-item:hover { box-shadow: var(--sl-shadow-card); }
.sl-faq-item .sl-faq-q {
  display: block;
  padding: 20px 48px 20px 24px;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  color: var(--sl-ink);
}
.sl-faq-item .sl-faq-q::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sl-ink-soft);
  transition: transform 0.3s ease;
}
.sl-faq-item .sl-faq-q[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(180deg);
}
.sl-faq-item .sl-faq-q:hover { text-decoration: none; }
.sl-faq-item .sl-faq-q h6 {
  font-size: 15px;
  font-weight: 400;
  margin: 0;
  color: var(--sl-ink);
  font-family: "Ubuntu", sans-serif;
}
.sl-faq-item .sl-faq-body {
  padding: 0 24px 20px;
}
.sl-faq-item .sl-faq-body p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* ---------- FINAL CTA ---------- */
.sl-cta { background: var(--sl-surface-2); text-align: center; }
.sl-cta-inner { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.sl-cta h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 16px; }
.sl-cta p { font-size: 17px; margin-bottom: 32px; }
.sl-cta .btn { padding: 13px 44px; font-size: 15px; }
.sl-cta-reassure {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  color: var(--sl-ink-soft);
  letter-spacing: 0.02em;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .sl-page .sl-section { padding: 64px 0; }
  .sl-hero { padding: 100px 0 60px; }
  .sl-page .sl-section-head { margin-bottom: 36px; }
  .sl-page .sl-section-head h2 { font-size: 28px; }
}

/* Empty state primitive — dark theme.
 * Mirrors the structural styles from style.css so the layout matches light
 * mode 1:1; only the colors/gradients differ. style-monochrome.css is loaded
 * IN PLACE OF style.css (not on top of it), so this block must be complete —
 * width/height/border-radius/padding/font-family must all be redeclared.
 *
 * Earlier versions of this file only redeclared the colors, which left the
 * illustration without dimensions (collapsed to a thin rectangle) and the
 * action without padding/border-radius (looked like a default red block).
 * See empty-state primitive doc in style.css for the markup pattern.
 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-5);
  max-width: 420px;
  margin: 0 auto;
}
.empty-state--compact { padding: var(--space-6) var(--space-5); }

.empty-state-illustration {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  /* Bumped from 0.10/0.18 → 0.18/0.32 so the bubble reads as a clear halo
     on the #0a0a0a page bg. Light mode's 0.05/0.10 on white reads as a
     visible pink halo; dark needs a higher alpha to match that presence. */
  background: linear-gradient(135deg, rgba(232, 84, 84, 0.18), rgba(232, 84, 84, 0.32));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--color-primary);
  font-size: 42px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(232, 84, 84, 0.30);
  animation: emptyStateFloat 3.2s ease-in-out infinite;
}
.empty-state--compact .empty-state-illustration {
  width: 72px;
  height: 72px;
  font-size: 30px;
  margin-bottom: var(--space-4);
}
.empty-state--tinted .empty-state-illustration {
  background: linear-gradient(135deg, rgba(232, 84, 84, 0.28), rgba(232, 84, 84, 0.44));
}
@keyframes emptyStateFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .empty-state-illustration { animation: none; }
}

.empty-state-title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg, 20px);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  line-height: var(--lh-snug, 1.3);
}
.empty-state-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-sm, 13px);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
  line-height: var(--lh-normal, 1.55);
  max-width: 34ch;
}
.empty-state-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm, 13px);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: var(--shadow-sm);
}
.empty-state-action:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus), var(--shadow-md);
}
.empty-state-action:hover {
  background: var(--color-primary-hover);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.empty-state-action:active { transform: translateY(0); }

.empty-state-secondary-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.empty-state-secondary-action:hover {
  color: var(--color-text);
  text-decoration: underline;
}
.empty-state-secondary-action:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* "Anything else on your mind?" — dark theme.
   Inline <style> in find.php / corporatefind.php holds the light variant.
   `!important` defeats those inline rules, which appear after this stylesheet
   in document order and would otherwise win at equal specificity. */
.next-finds-card {
  background: linear-gradient(135deg, #1a1a1a 0%, #261515 100%) !important;
  border-color: rgba(232, 84, 84, 0.28) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45) !important;
}
.next-finds-title    { color: #ff6b6b !important; }
.next-finds-subtitle { color: var(--color-text-muted) !important; }
a.next-finds-pill[data-type="ITEM"]    { --np-color: #60a5fa; --np-bg: rgba(59, 130, 246, 0.15); }
a.next-finds-pill[data-type="SERVICE"] { --np-color: #2dd4bf; --np-bg: rgba(20, 184, 166, 0.15); }
a.next-finds-pill[data-type="PROF"]    { --np-color: #a78bfa; --np-bg: rgba(139, 92, 246, 0.18); }
a.next-finds-pill[data-type="NOTSET"]  { --np-color: #ff6b6b; --np-bg: rgba(204, 0, 0, 0.16); }
a.next-finds-pill:hover {
  color: #0f0f10 !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55) !important;
}

/* Shopping Lists landing + editor — dark theme.
   Inline <style> in shopping-lists.php and add-shopping-list.php holds the
   light palette. Same `!important` pattern as above for source-order reasons. */

/* Shared welcome/hero header (both pages) */
.slist-welcome-header {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
.slist-welcome-icon  { background: rgba(232, 84, 84, 0.14) !important; }
.slist-welcome-icon i { color: var(--color-primary) !important; }
.slist-welcome-title { color: var(--color-text) !important; }
.slist-welcome-sub   { color: var(--color-text-muted) !important; }
.slist-back-link        { color: var(--color-text-muted) !important; }
.slist-back-link:hover  { color: var(--color-primary) !important; }

/* shopping-lists.php — stat tiles, list cards, status pills, filter pills */
.slist-stat-card {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
.slist-stat-card.is-active { outline-color: var(--color-primary) !important; }
.slist-stat-card[role="button"]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55) !important;
}
.slist-stat-icon.active   { background: rgba(78, 207, 197, 0.14) !important; color: var(--color-ps-teal) !important; }
.slist-stat-icon.draft    { background: rgba(232, 84, 84, 0.14)  !important; color: var(--color-primary)  !important; }
.slist-stat-icon.archived { background: rgba(255, 255, 255, 0.06) !important; color: var(--color-text-muted) !important; }
.slist-stat-value { color: var(--color-text) !important; }
.slist-stat-label { color: var(--color-text-muted) !important; }

.slist-card {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  border-left-width: 4px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
.slist-card:hover { box-shadow: 0 8px 24px rgba(232, 84, 84, 0.20) !important; }
.slist-card.status-draft     { border-left-color: #555 !important; }
.slist-card.status-published { border-left-color: var(--color-ps-teal) !important; }
.slist-card.status-fulfilled { border-left-color: var(--color-primary) !important; }
.slist-card.status-archived,
.slist-card.status-cancelled { border-left-color: #444 !important; }
.slist-card-title       { color: var(--color-text) !important; }
.slist-card-title:hover { color: var(--color-primary) !important; }
.slist-card-meta        { color: var(--color-text-muted) !important; }

.slist-status-draft     { background: rgba(154, 154, 154, 0.16) !important; color: var(--color-text-muted) !important; }
.slist-status-published { background: rgba(78, 207, 197, 0.18)  !important; color: var(--color-ps-teal)    !important; }
.slist-status-fulfilled { background: rgba(232, 84, 84, 0.18)   !important; color: var(--color-primary)    !important; }
.slist-status-archived,
.slist-status-cancelled { background: rgba(255, 255, 255, 0.06) !important; color: var(--color-text-muted) !important; }

.slist-actions button       { color: var(--color-text-muted) !important; }
.slist-actions button:hover { color: var(--color-primary) !important; background: rgba(232, 84, 84, 0.14) !important; }

.slist-filter-pill {
  background: var(--color-bg-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}
.slist-filter-pill:hover { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.slist-filter-pill.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}
.slist-filter-pill:not(.active) .badge {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--color-text-muted) !important;
}

.slist-fab { box-shadow: 0 8px 20px rgba(232, 84, 84, 0.32) !important; }

/* Scan-a-list overlay (both pages share this) */
.slist-scan-overlay { background: rgba(0, 0, 0, 0.65) !important; }
.slist-scan-overlay .card {
  background: var(--color-bg-card) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* add-shopping-list.php — section cards, item rows, similar suggestions, save state */
.slist-section-title          { border-bottom-color: var(--color-border) !important; }
.slist-section-title h5       { color: var(--color-text) !important; }
.slist-section-title .uil     { color: var(--color-primary) !important; }

.slist-form .form-group label { color: var(--color-text-muted) !important; }

.slist-item-row .pos          { color: var(--color-text-muted) !important; }
.slist-item-row .remove       { color: var(--color-text-muted) !important; }
.slist-item-row .remove:hover { color: var(--color-primary) !important; }

.slist-item-imgrow            { border-bottom-color: var(--color-border) !important; }
.slist-item-imgrow .img-btn   { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.slist-item-imgrow .img-btn:hover:not([disabled]) { background: rgba(232, 84, 84, 0.10) !important; }
.slist-item-imgrow .row-thumb { border-color: var(--color-border) !important; }
.slist-item-imgrow .img-remove       { color: var(--color-text-muted) !important; }
.slist-item-imgrow .img-remove:hover { color: var(--color-primary) !important; }

.slist-item-row.is-low-conf,
.slist-item-imgrow.is-low-conf,
.slist-item-extras.is-low-conf {
  background: rgba(255, 180, 84, 0.08) !important;
  border-color: var(--color-warning) !important;
}

.slist-item-extras-toggle       { color: var(--color-text-muted) !important; }
.slist-item-extras-toggle:hover { color: var(--color-primary) !important; }
.slist-item-extras {
  background: var(--color-bg-elevated) !important;
  border-bottom-color: var(--color-border) !important;
}
.slist-item-extras label                { color: var(--color-text-muted) !important; }
.slist-item-extras .extras-section-title { color: var(--color-primary) !important; }

.slist-save-state         { color: var(--color-text-muted) !important; }
.slist-save-state.saved   { color: var(--color-ps-teal) !important; }
.slist-save-state.saving  { color: var(--color-warning) !important; }
.slist-save-state.error   { color: var(--color-primary) !important; }

.slist-similar-card {
  background: rgba(78, 207, 197, 0.06) !important;
  border-color: rgba(78, 207, 197, 0.30) !important;
}
.slist-similar-card h6     { color: var(--color-ps-teal) !important; }
.slist-similar-card .reason { color: var(--color-text-muted) !important; }
.slist-similar-chip {
  background: var(--color-bg-card) !important;
  border-color: var(--color-ps-teal) !important;
  color: var(--color-ps-teal) !important;
}
.slist-similar-chip:hover  { background: rgba(78, 207, 197, 0.10) !important; }
.slist-similar-fetch {
  border-color: var(--color-ps-teal) !important;
  color: var(--color-ps-teal) !important;
}

/* shopping-list-matches.php — vendor cards, coverage bars, item pills, bundle rows */
.vendor-card {
  border-color: var(--color-border) !important;
  background: var(--color-bg-card) !important;
}
.vendor-card:hover { box-shadow: 0 8px 24px rgba(232, 84, 84, 0.20) !important; }
.vendor-coverage-bar {
  background: rgba(232, 84, 84, 0.14) !important;
  color: var(--color-primary) !important;
}
.vendor-type-shop { background: var(--color-shop-pink) !important; }
.vendor-type-ps   { background: var(--color-ps-teal) !important; }
.vendor-meta      { color: var(--color-text-muted) !important; }
.item-pill {
  background: var(--color-bg-elevated) !important;
  color: var(--color-text-muted) !important;
}
.vendor-empty { color: var(--color-text-muted) !important; }
.score-line   { color: var(--color-text-muted) !important; }
.bundle-row   { border-top-color: var(--color-border) !important; }
.bundle-status-pending   { background: rgba(255, 180, 84, 0.18) !important; color: var(--color-warning) !important; }
.bundle-status-accepted  { background: var(--color-ps-teal) !important; color: #ffffff !important; }
.bundle-status-withdrawn,
.bundle-status-rejected  { background: rgba(255, 255, 255, 0.08) !important; color: var(--color-text-muted) !important; }

/* shopping-list-bundle.php — item rows, vendor chips, history badges, save state */
.item-row              { border-bottom-color: var(--color-border) !important; }
.item-row .item-meta   { color: var(--color-text-muted) !important; }
.vendor-chip {
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}
.vendor-chip.active {
  background: rgba(232, 84, 84, 0.14) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.bundle-history .badge-pending   { background: rgba(255, 255, 255, 0.06) !important; color: var(--color-text-muted) !important; }
.bundle-history .badge-accepted  { background: var(--color-ps-teal) !important; color: #ffffff !important; }
.bundle-history .badge-withdrawn,
.bundle-history .badge-rejected  { background: rgba(255, 255, 255, 0.08) !important; color: var(--color-text-muted) !important; }
.save-state.error  { color: var(--color-primary) !important; }
.save-state.saving { color: var(--color-warning) !important; }
.save-state.saved  { color: var(--color-ps-teal) !important; }

/* Command palette — dark theme. Matches the layered elevation + subtle
   border approach used on every other floating dark surface. */
.sinatabu-cmdk-overlay {
  background: rgba(0, 0, 0, 0.70);
}
.sinatabu-cmdk-panel {
  background: var(--color-bg-card, #181818);
  border: 1px solid var(--color-border, #2b2b2b);
  box-shadow: var(--shadow-xl);
}
.sinatabu-cmdk-head {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.sinatabu-cmdk-input { color: var(--color-text, #f0f0f0); }
.sinatabu-cmdk-input::placeholder { color: var(--color-text-muted, #9a9a9a); }
.sinatabu-cmdk-esc {
  color: var(--color-text-muted, #9a9a9a);
  background: var(--color-bg-soft, #111111);
  border-color: rgba(255, 255, 255, 0.08);
}
.sinatabu-cmdk-section { color: var(--color-text-muted, #9a9a9a); }
.sinatabu-cmdk-item { color: var(--color-text, #f0f0f0); }
.sinatabu-cmdk-item.is-active {
  background: rgba(232, 84, 84, 0.16);
  color: var(--color-primary, #e85454);
}
.sinatabu-cmdk-item.is-active .sinatabu-cmdk-hint {
  color: var(--color-primary, #e85454);
}
.sinatabu-cmdk-item .uil,
.sinatabu-cmdk-item i { color: var(--color-text-muted, #9a9a9a); }
.sinatabu-cmdk-item.is-active .uil,
.sinatabu-cmdk-item.is-active i { color: var(--color-primary, #e85454); }
.sinatabu-cmdk-hint { color: var(--color-text-muted, #9a9a9a); }
.sinatabu-cmdk-empty { color: var(--color-text-muted, #9a9a9a); }
.sinatabu-cmdk-foot {
  background: var(--color-bg-soft, #111111);
  border-top-color: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted, #9a9a9a);
}
.sinatabu-cmdk-foot kbd {
  background: var(--color-bg-elevated, #141414);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--color-text, #f0f0f0);
}

/* Autosave pill in dark mode — greens hold up better if we lift the
   background a touch for contrast. Layout rules mirror style.css so the pill
   actually renders in dark mode (was previously color-only). No
   margin-left: auto — see find-conversation.js for insertion order, the close
   button's auto margin handles right-alignment. */
.conv-saved-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  background: rgba(92, 216, 138, 0.14);
  color: #5cd88a;
  font-family: var(--font-body, "Lato", sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  white-space: nowrap;
}
.conv-saved-pill i {
  font-size: 13px;
  line-height: 1;
}
.conv-saved-pill.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .conv-saved-pill { transition: opacity 0.12s ease; transform: none; }
  .conv-saved-pill.is-visible { transform: none; }
}

/* Toast in dark mode — the base style lives in style.css and is already
   dark-ish (#111827). Re-tune the background so it sits slightly above
   our dark surfaces and feels native. */
/* Full restatement of the site-wide snackbar (window.sinatabuToast), NOT just
   color overrides. style.css and style-monochrome.css load mutually exclusively
   via the #theme-opt swap (see includes/init.php), so the dark theme needs the
   complete layout — previously it only set colors and silently borrowed its
   layout from the unscoped admin `.sinatabu-toast` rule below. Now that the
   admin block is scoped to #sinatabu-toast-host, this block must stand alone.
   Structure mirrors style.css ~line 20234; only the colors/shadow are dark. */
.sinatabu-toast-stack {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: calc(100% - 48px);
  pointer-events: none;
}
.sinatabu-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 280px;
  max-width: 420px;
  padding: 14px 18px;
  background: #232323;
  color: #f5f5f5;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
  font-family: var(--font-body, "Lato", sans-serif);
  font-size: var(--fs-sm, 13px);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.sinatabu-toast.is-visible { opacity: 1; transform: translateY(0); }
.sinatabu-toast.is-leaving { opacity: 0; transform: translateY(6px); }
.sinatabu-toast--success { background: #14532d; }
.sinatabu-toast--error   { background: #7f1d1d; }
.sinatabu-toast--warning { background: #78350f; }
.sinatabu-toast-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.sinatabu-toast-msg { flex: 1; min-width: 0; }
.sinatabu-toast-undo {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.sinatabu-toast-undo:hover { background: rgba(255, 255, 255, 0.32); }
.sinatabu-toast-undo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}
.sinatabu-toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  margin-right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.sinatabu-toast-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.sinatabu-toast-close:focus-visible {
  outline: none;
  color: #fff;
  box-shadow: 0 0 0 2px #fff;
}
@media (max-width: 575px) {
  .sinatabu-toast-stack {
    left: 12px;
    right: 12px;
    bottom: 16px;
    max-width: none;
  }
  .sinatabu-toast { min-width: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sinatabu-toast { transition: none; }
}

/* ---------- MyFinds draft card — dark theme ----------
 * Mirrors the light-mode structure in style.css. The amber accent is kept
 * (it's the "draft" color) but brought down so it sits well on dark
 * surfaces; chip backgrounds and text swap to dark-friendly values.
 *
 * Structural rules are restated here (not just color overrides) — the two
 * stylesheets load mutually exclusively, so the dark theme needs the full
 * layout or the card collapses into raw, ungoverned content. */
.myfinds-draft-card {
  position: relative;
  background: #1a1a1a;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(241, 116, 37, 0.30);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.myfinds-draft-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(241, 116, 37, 0.18);
}
.myfinds-draft-link {
  display: flex;
  align-items: stretch;
  color: inherit;
  text-decoration: none;
  padding: 0;
}
.myfinds-draft-link:hover,
.myfinds-draft-link:focus { color: inherit; text-decoration: none; }
.myfinds-draft-stripe {
  width: 5px;
  background: linear-gradient(180deg, #f17425, #d85a12);
  flex-shrink: 0;
}
.myfinds-draft-body {
  flex: 1 1 auto;
  padding: 16px 20px 14px;
  min-width: 0;
}
.myfinds-draft-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-right: 28px;
}
.myfinds-draft-pen {
  color: #f17425;
  font-size: 16px;
  flex-shrink: 0;
}
.myfinds-draft-title {
  font-family: var(--font-heading, "Ubuntu", sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: #f5f5f5;
  margin: 0;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.myfinds-draft-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 22px;
}
.myfinds-draft-chip {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(241, 116, 37, 0.18);
  color: #ffb784;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  font-family: var(--font-body, "Lato", sans-serif);
}
.myfinds-draft-chips-empty {
  font-size: 12px;
  color: #888;
  font-style: italic;
  font-family: var(--font-body, "Lato", sans-serif);
}
.myfinds-draft-progress {
  height: 4px;
  background: rgba(241, 116, 37, 0.18);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.myfinds-draft-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #f17425, #ff9a4c);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.myfinds-draft-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.myfinds-draft-saved {
  color: #a0a0a0;
  font-size: 12px;
  font-family: var(--font-body, "Lato", sans-serif);
  display: inline-flex;
  align-items: center;
}
.myfinds-draft-cta {
  color: #ffb784;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-body, "Lato", sans-serif);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.myfinds-draft-card:hover .myfinds-draft-cta i { transform: translateX(2px); }
.myfinds-draft-cta i { transition: transform 0.2s ease; }

.myfinds-draft-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #b0b0b0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  z-index: 2;
  padding: 0;
}
.myfinds-draft-dismiss:hover {
  background: rgba(220, 53, 69, 0.25);
  color: #ff7582;
  transform: scale(1.08);
}
.myfinds-draft-header {
  display: inline-block;
  font-size: 12px;
  color: #8a8a8a;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--font-body, "Lato", sans-serif);
}

@media (max-width: 575px) {
  .myfinds-draft-body { padding: 14px 16px 12px; }
  .myfinds-draft-title { font-size: 15px; }
  .myfinds-draft-footer { flex-wrap: wrap; gap: 6px; }
}

/* =====================================================================
 * ADMIN PREMIUM UX LAYER — dark theme
 *
 * Mirror of the block in style.css (the admin-premium structural layer
 * was merged out of css/admin-premium.css into both theme files so each
 * loads independently). Only `.sticky-filter-bar`'s background diverges
 * — every other rule pulls colors from CSS vars defined at the top of
 * this file. Keep both files in sync when editing.
 * ===================================================================== */

/* ─── Toast notifications ─────────────────────────────────────────────── */
#sinatabu-toast-host {
    position: fixed; bottom: 20px; right: 20px; z-index: 99999;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none; max-width: 380px;
}
/* Scoped under #sinatabu-toast-host — see the matching note in style.css. Both
   this admin block and the site-wide snackbar block (~line 20451) declare a bare
   `.sinatabu-toast` at equal specificity in this one globally-loaded stylesheet;
   without the scope the later (admin) rule wins the cascade everywhere and turns
   the dark snackbar into a left-bordered card. Admin toasts always mount inside
   #sinatabu-toast-host (js/admin-premium.js makeToast). */
#sinatabu-toast-host .sinatabu-toast {
    pointer-events: auto;
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: 8px;
    padding: 12px 14px 12px 12px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
    display: flex; align-items: flex-start; gap: 10px;
    border-left: 4px solid var(--color-primary);
    transform: translateY(12px); opacity: 0;
    transition: transform .25s ease-out, opacity .25s ease-out;
    font-size: 14px; line-height: 1.4;
}
#sinatabu-toast-host .sinatabu-toast.show { transform: translateY(0); opacity: 1; }
#sinatabu-toast-host .sinatabu-toast .t-icon {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; background: var(--color-primary);
}
#sinatabu-toast-host .sinatabu-toast.t-success         { border-left-color: var(--color-success); }
#sinatabu-toast-host .sinatabu-toast.t-success .t-icon { background: var(--color-success); }
#sinatabu-toast-host .sinatabu-toast.t-error           { border-left-color: var(--color-danger); }
#sinatabu-toast-host .sinatabu-toast.t-error .t-icon   { background: var(--color-danger); }
#sinatabu-toast-host .sinatabu-toast.t-warn            { border-left-color: var(--color-warning); }
#sinatabu-toast-host .sinatabu-toast.t-warn .t-icon    { background: var(--color-warning); }
#sinatabu-toast-host .sinatabu-toast.t-info            { border-left-color: var(--color-info, #38bdf8); }
#sinatabu-toast-host .sinatabu-toast.t-info .t-icon    { background: var(--color-info, #38bdf8); }
#sinatabu-toast-host .sinatabu-toast .t-msg { flex: 1; }
#sinatabu-toast-host .sinatabu-toast .t-action {
    margin-left: 8px; padding: 3px 10px; border: 0;
    background: var(--color-primary); color: #fff;
    border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
}
#sinatabu-toast-host .sinatabu-toast .t-close {
    background: transparent; border: 0;
    color: var(--color-text-muted);
    font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
}

/* ─── ⌘K command palette ──────────────────────────────────────────────── */
#cmdk-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .65); backdrop-filter: blur(6px);
    z-index: 99998; display: none;
    align-items: flex-start; justify-content: center;
    padding: 12vh 16px;
}
#cmdk-overlay.show { display: flex; }
.cmdk-modal {
    width: 100%; max-width: 640px;
    background: var(--color-bg); color: var(--color-text);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.cmdk-input-wrap {
    display: flex; align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
}
.cmdk-icon { font-size: 20px; color: var(--color-text-muted); margin-right: 10px; }
.cmdk-input {
    border: 0; outline: 0; background: transparent;
    font-size: 16px; width: 100%;
    color: var(--color-text);
}
.cmdk-results { max-height: 50vh; overflow-y: auto; }
.cmdk-hint    { padding: 18px; color: var(--color-text-muted); font-size: 13px; text-align: center; }
.cmdk-hint.cmdk-err { color: var(--color-danger); }
.cmdk-group-label {
    padding: 10px 18px 4px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-text-muted); font-weight: 600;
}
.cmdk-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px; text-decoration: none;
    color: var(--color-text);
    border-left: 3px solid transparent;
}
.cmdk-item:hover, .cmdk-item.selected {
    background: var(--color-bg-soft);
    border-left-color: var(--color-primary);
    text-decoration: none;
    color: var(--color-text);
}
.cmdk-item-icon {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 6px;
    background: var(--color-bg-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.cmdk-item-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmdk-item-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item-sub   { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item-meta  { font-size: 11px; color: var(--color-text-muted); flex-shrink: 0; }
.cmdk-foot {
    padding: 10px 18px;
    border-top: 1px solid var(--color-border);
    font-size: 11px; color: var(--color-text-muted);
}
.cmdk-foot kbd {
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 4px; padding: 2px 6px;
    font-family: inherit; font-size: 10px; margin: 0 2px;
}

/* ─── Theme toggle button ─────────────────────────────────────────────── */


/* ─── Sticky filter bars (dark theme) ─────────────────────────────────── */


/* ─── Maintenance banner ──────────────────────────────────────────────── */
.sinatabu-maintenance-banner {
    background: var(--color-warning); color: #fff;
    padding: 8px 16px; font-size: 13px;
    text-align: center; font-weight: 500;
}

/* ─── Lucide icon defaults ────────────────────────────────────────────── */
[data-lucide] {
    display: inline-block;
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    stroke-width: 1.75;
}


.lucide-2x { width: 2em;    height: 2em;    vertical-align: -0.3em; }

/* Header nav uses tighter spacing — give icons a small gap */
#topnav .navigation-menu [data-lucide] {
    margin-right: 6px;
    width: 1.05em; height: 1.05em;
    vertical-align: -0.2em;
}

/* Stat cards */
.dash-stat-icon [data-lucide] {
    width: 24px; height: 24px;
    color: #fff; stroke-width: 2;
}

/* ─── Admin nav layout (≥992px) ───────────────────────────────────────────
 * The public header's float-based layout fails here because the admin
 * nav has 8 menu items and the `<div id="navigation">` wrapper is wider
 * than the space alongside the floated logo, so it wraps onto its own
 * row. We force a single-row flex layout instead.
 *
 * `!important` is needed because the legacy theme has high-specificity
 * rules that fight us — most importantly `#topnav #navigation
 * { display:block !important }` which would otherwise prevent
 * `justify-content` from working on #navigation. */
@media (min-width: 992px) {
    #topnav.admin-nav > .container {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        /* Match the public header height: link is 25 + 24 + 25 = 74px. */
        min-height: 74px;
        /* Full-width: Bootstrap caps .container at 1140px, but the menu
           with its count badges (~1000px) plus the 151px logo needs more
           than that, so at the cap the right-aligned UL bled left over
           the logo at EVERY desktop width. The admin pages' content is
           container-fluid anyway, so the header matches. */
        max-width: 100%;
    }
    #topnav.admin-nav > .container > .navbar-header { flex: 0 0 auto; }
    #topnav.admin-nav > .container > .menu-extras   { flex: 0 0 auto; }
    /* Navigation wrapper grows to fill the gap between logo and the
       (desktop-hidden) burger toggle, then aligns its single child UL
       to its right edge. The UL itself stays content-sized so flex-end
       actually moves it — without `flex:0 0 auto` it'd stretch full
       width and `justify-content` on the parent would be a no-op. */
    #topnav.admin-nav > .container > #navigation {
        flex: 1 1 auto;
        min-width: 0;
        display: flex !important;
        justify-content: flex-end;
    }
    #topnav.admin-nav .navigation-menu { flex: 0 0 auto; }
    /* Tighter spacing than the public header. The public nav has 2
       items so 15px link padding + 5px LI margin is fine; admin has 8
       items + a logo, which together overflow Bootstrap's `.container`
       at typical viewports (~1140px). Compressing per-item space lets
       the menu fit alongside the logo without bleeding into it. Also
       prevent "Bulk SMS" from wrapping into a second row. */
    #topnav.admin-nav .navigation-menu > li {
        margin: 0 2px;
    }
    #topnav.admin-nav .navigation-menu > li > a {
        white-space: nowrap;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* 992–1279px: even full-width, the viewport can't hold the logo plus 8
 * labeled-and-iconed items (with badges the UL alone measures ~1000px).
 * The UL can't shrink (`flex:0 0 auto`) and is right-aligned, so any
 * excess bleeds LEFT and paints "Support" over the logo. Hiding the
 * top-level link icons (labels remain; `[data-lucide]` survives lucide's
 * <i>→<svg> swap) and squeezing padding shrinks the UL to ~770px, which
 * fits from 992px up. Icons return at ≥1280px where there's ~55px slack
 * even with three-digit badges. The theme toggle is icon-only, so it
 * keeps its icon. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    #topnav.admin-nav .navigation-menu > li > a:not(.theme-toggle) [data-lucide] {
        display: none;
    }
    #topnav.admin-nav .navigation-menu > li > a {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Breathing room at the window edges. `max-width:100%` above drops the
 * Bootstrap `.container` cap, so on a wide monitor the logo and Logout sit
 * on Bootstrap's bare 15px gutter and read as flush against the bezel.
 *
 * Deliberately NOT applied below 1400px. Measured worst case (three-digit
 * badges on all four counters) leaves only 38px between the logo and the
 * right-aligned UL at 1280px — the UL is `flex:0 0 auto` and can't shrink,
 * so any padding added there pushes it left over the logo, which is the
 * exact bug the 992–1279 block above exists to prevent. At 1400px the same
 * measurement gives 158px of slack, so 24px a side is free; 1700px has
 * ~450px. */
@media (min-width: 1400px) {
    #topnav.admin-nav > .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}
@media (min-width: 1700px) {
    #topnav.admin-nav > .container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* ─── Admin body offset for the fixed header ──────────────────────────────
 * The admin header is `position:fixed` and 74px tall. Modern admin pages
 * use `<section class="container-fluid pt-4 pb-5">` (only 24px top
 * padding) which renders the page heading under the header. Body
 * padding-top pushes everything down by the header's height; legacy
 * pages using `.section-two` (which has its own 80px top padding) get
 * a compensating reduction so they don't end up with double whitespace. */
html.admin-interface body {
    padding-top: 74px;
}
html.admin-interface .section-two {
    padding-top: 8px;
}

/* ─── Admin form controls (dark theme) ─────────────────────────────────────
 * Bare .form-control / .form-select / .custom-select used outside a
 * .form-group default to white-on-light from Bootstrap, which is
 * unreadable on dark surfaces. Scope dark-mode overrides to the
 * .admin-interface class set on <html> by admin-header.php so the public
 * site's existing form styling stays untouched. */
html.admin-interface .form-control,
html.admin-interface .form-select,
html.admin-interface select.form-control,
html.admin-interface .custom-select {
    background-color: var(--color-bg-soft);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
html.admin-interface .form-control:focus,
html.admin-interface .form-select:focus,
html.admin-interface .custom-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
    background-color: var(--color-bg-soft);
    color: var(--color-text);
}
html.admin-interface .form-control::placeholder { color: var(--color-text-muted); opacity: 1; }
html.admin-interface .form-control:disabled,
html.admin-interface .form-control[readonly] {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
}

/* Tables — Bootstrap defaults to dark text on white, illegible on dark. */
html.admin-interface table { color: var(--color-text); }
html.admin-interface table thead th { color: var(--color-text-muted); border-bottom-color: var(--color-border); }
html.admin-interface .table-bordered,
html.admin-interface .table-bordered th,
html.admin-interface .table-bordered td { border-color: var(--color-border); }

/* Card surfaces (bootstrap .card, modals, alerts) */
html.admin-interface .card,
html.admin-interface .modal-content {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}
html.admin-interface .card-header { background: var(--color-bg-soft); border-bottom-color: var(--color-border); }
html.admin-interface .card-body   { color: var(--color-text); }

/* Bootstrap alerts read poorly on dark — use translucent tints + accent text. */
html.admin-interface .alert-success { background: rgba(92, 216, 138, 0.16); color: var(--color-success); border-color: var(--color-success); }
html.admin-interface .alert-danger  { background: rgba(228, 63, 82, 0.18);  color: var(--color-danger);  border-color: var(--color-danger); }
html.admin-interface .alert-warning { background: rgba(241, 116, 37, 0.18); color: var(--color-warning); border-color: var(--color-warning); }
html.admin-interface .alert-info    { background: rgba(56, 189, 248, 0.18); color: var(--color-info, #38bdf8); border-color: var(--color-info, #38bdf8); }


/* Code/Pre — readable on dark instead of pitch-on-pitch */
html.admin-interface code,
html.admin-interface pre {
    background: var(--color-bg-soft);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* text-muted (Bootstrap utility) — Bootstrap hardcodes a grey that vanishes
 * on dark. Realign to the theme's muted color. */
html.admin-interface .text-muted { color: var(--color-text-muted) !important; }

/* btn-light reads white-on-white on light; on dark it should be a soft
 * surface button rather than pure white. */
html.admin-interface .btn-light,
html.admin-interface .btn-outline-secondary {
    background: var(--color-bg-soft);
    color: var(--color-text);
    border-color: var(--color-border);
}
html.admin-interface .btn-light:hover,
html.admin-interface .btn-outline-secondary:hover {
    background: var(--color-bg);
    border-color: var(--color-primary);
}

/* ------------------------------------------------------------------ *
 * Find Card — vertical card used by My Finds, Find Stream, Load Finds
 *
 * Dark-mode mirror of the same block in `style.css`. This stylesheet
 * loads INSTEAD of style.css (not on top of it) — see init.php
 * `renderThemeStylesheet()` — so every structural class the markup
 * uses has to be present here too, not just the colours. Layout
 * properties match the light stylesheet 1:1; only paint values
 * (colour, background, border-color, box-shadow) differ.
 * ------------------------------------------------------------------ */

.find-card {
    background: var(--color-bg-card);
    border-radius: 14px;
    padding: 16px;
    /* Black drop-shadows vanish on a near-black bg, so dark-mode cards
       lean on a subtle border instead of the lifted shadow used in
       light mode. */
    border: 1px solid var(--color-border);
    box-shadow: none;
    transition: transform .18s ease, border-color .18s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* See style.css for the rationale — cards size to their own content
       so short text-only finds don't stretch to match a tall sibling. */
    align-self: flex-start;
}
.find-card:hover,
.find-card:focus-within {
    transform: translateY(-1px);
    border-color: #3a3a3a;
}

/* Owner-only accent for an upgraded find (priority_find + cross_border_find).
   Shown ONLY to the owner as reassurance the KES 59 upgrade is live — sellers
   never see it. Dark-mode brand Pro gold, matching the "Upgrade to Pro" gold
   treatment elsewhere. */
.find-card--upgraded-owner {
    border: 2px solid #f5c451;
}
.find-card--upgraded-owner:hover,
.find-card--upgraded-owner:focus-within {
    border-color: #f5c451;
}

/* ------------------------------------------------------------------ *
 * Interaction card — the find-card shell reused for the dashboard
 * "Your Interactions" lists (psdash.php / shop.php). Connect + comment
 * controls are footer-stats; the comment thread + reply form expand
 * inside the card below the footer.
 * ------------------------------------------------------------------ */
.find-card--interaction {
    /* The base .find-card uses `align-self: flex-start` for the Bootstrap-
       grid context (myfinds / findstream). #interactions-container is a
       flex column, where flex-start shrinks each card to its content
       width — stretch back to full width. Inter-card spacing is the
       container's own `gap`, so no margin is needed here. */
    align-self: stretch;
}
/* The find-card footer already carries a top border, so suppress the
   comment thread's own separator rule — without this the two stack as a
   double line when the thread expands. Scoped to the direct child so
   per-comment borders inside the list are untouched. */
.find-card--interaction .comments-container > .border-top {
    border-top: 0 !important;
    padding-top: 0 !important;
}

/* "Your Interactions" filter bar — status/outcome segmented control, the
   new-activity toggle and the sort select on the shop / PS dashboards. */
.ix-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 4px 0 14px;
}
.ix-filter-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ix-filter-btn {
    border: 1px solid #3a3a3a;
    background: #1f1f1f;
    color: #b0b0b0;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 9999px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.ix-filter-btn:hover {
    border-color: #8a8a8a;
    color: #f0f0f0;
}
.ix-filter-btn.is-active {
    background: #f0f0f0;
    border-color: #f0f0f0;
    color: #1a1a1a;
}
.ix-filter-btn .ix-count {
    display: inline-block;
    margin-left: 5px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    color: #8a8a8a;
    background: #2a2a2a;
    border-radius: 9999px;
    min-width: 18px;
    text-align: center;
}
.ix-filter-btn:hover .ix-count {
    color: #f0f0f0;
    background: #3a3a3a;
}
.ix-filter-btn.is-active .ix-count {
    color: #1a1a1a;
    background: rgba(0, 0, 0, 0.15);
}
.ix-activity-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12.5px;
    color: #b0b0b0;
    cursor: pointer;
}
.ix-sort-select {
    margin-left: auto;
    border: 1px solid #3a3a3a;
    background: #1f1f1f;
    color: #b0b0b0;
    font-size: 12.5px;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.ix-empty {
    font-size: 13.5px;
}

.find-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.find-card__time-icon {
    color: var(--color-text-muted);
    font-size: 13px;
}
.find-card__time {
    font-size: 12px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.find-card__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    line-height: 1.4;
}
.find-card__pill i { font-size: 13px; line-height: 1; }
/* Pastel pill tints from light mode would wash out on a dark surface.
   Each variant becomes a translucent tint over the card bg, with a
   brighter accent foreground that holds contrast against the dark fill. */
.find-card__pill--active   { background: rgba(92, 216, 138, 0.16);  color: #86efac; }
.find-card__pill--featured { background: linear-gradient(90deg, rgba(255,180,84,0.18), rgba(252,211,77,0.18)); color: #fcd34d; }
.find-card__pill--awaiting { background: rgba(95, 180, 255, 0.16);  color: #93c5fd; }
.find-card__pill--accepted { background: rgba(92, 216, 138, 0.16);  color: #86efac; }
.find-card__pill--closed   { background: rgba(255, 180, 84, 0.16);  color: #fcd34d; }
.find-card__pill--deleted  { background: rgba(154, 154, 154, 0.18); color: #c4c4c4; }
.find-card__pill--hidden   { background: rgba(154, 154, 154, 0.18); color: #c4c4c4; }

/* New-activity pill — owner-mode unread indicator. Solid red here too:
   on dark mode the red brand colour reads as a strong unread signal
   against the muted card surface (translucent tints would whisper —
   we want this to shout, same as the mobile pill). */
.find-card__activity-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: #cc0000;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .2px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(204, 0, 0, .35);
}

.find-card__flag {
    width: 14px;
    height: 14px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}

.find-card__menu {
    margin-left: auto;
    position: relative;
}
.find-card__menu-toggle {
    background: none;
    border: 0;
    padding: 4px 6px;
    color: var(--color-text-muted);
    border-radius: 8px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.find-card__menu-toggle:hover,
.find-card__menu-toggle[aria-expanded="true"] {
    background: var(--color-bg-soft);
    color: var(--color-text);
}
.find-card__menu-list {
    min-width: 200px;
    background: var(--color-bg-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 6px;
}
.find-card__menu-list .dropdown-item {
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    color: var(--color-text);
}
.find-card__menu-list .dropdown-item i { color: var(--color-text-muted); font-size: 15px; }
.find-card__menu-list .dropdown-item:hover { background: var(--color-bg-soft); }
.find-card__menu-list .dropdown-item.text-danger { color: var(--color-danger); }
.find-card__menu-list .dropdown-item.text-danger i { color: inherit; }

.find-card__title {
    /* Reverted from Lora to the default sans stack — see style.css note. */
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}
.find-card__title a {
    color: var(--color-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.find-card__title a:hover { color: var(--color-primary); }

.find-card__media {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: var(--color-bg-soft);
    max-height: 320px;
}
.find-card__media img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    display: block;
}
.find-card__media-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Find-card gallery ────────────────────────────────────────────────
   A swipeable strip of a find's photos, replacing the single cover when a
   find has more than one. Paging is CSS scroll-snap, not a carousel
   library: it swipes natively on touch, scrolls with a trackpad, and still
   works with JS off — js/find-card-gallery.js only syncs the dots.

   Dots sit bottom-LEFT with a brand-red active pill rather than centred
   white circles: same interaction as every other marketplace, visibly our
   surface. */
.find-card__gallery {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.find-card__gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.find-card__gallery-track::-webkit-scrollbar { display: none; }
.find-card__gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    border-radius: 0;
}
.find-card__gallery-count {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    pointer-events: none;
}
.find-card__gallery-dots {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    /* Scrim. The active dot is brand red, and a red dot on a red photo — a
       kanga, a crate of Coke, anything — vanishes. The pill guarantees a dark
       ground under the indicator on ANY image without dimming the photo. */
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .5);
}
.find-card__gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .55);
    transition: width .18s ease, background-color .18s ease;
}
.find-card__gallery-dot.is-active {
    width: 18px;
    background: var(--color-primary);
}
@media (prefers-reduced-motion: reduce) {
    .find-card__gallery-dot { transition: none; }
    .find-card__gallery-track { scroll-behavior: auto; }
}

.find-card__chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.find-card__chips .chip {
    font-size: 12.5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1.4;
}
.find-card__chips .chip i { font-size: 13px; color: var(--color-text-muted); }
.find-card__chips .chip--budget {
    background: rgba(255, 180, 84, 0.14);
    color: #fde68a;
    font-weight: 600;
}
.find-card__chips .chip--budget i { color: #fcd34d; }

/* Two-column footer: stats group on the left, status/report/my-find on the right.
   Mirrors mobile FindCard.tsx — `justify-content: space-between` separates the
   left cluster from the right slot. Small horizontal padding pulls the outer
   items inward from the card edge so they don't read as flush with the border. */
.find-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 8px 0;
    border-top: 1px solid var(--color-border);
}
.find-card__footer-stats {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.find-card__footer-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.find-card__footer .footer-stat {
    background: none;
    border: 0;
    padding: 4px 0;
    color: var(--color-text-muted);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: color .15s;
}
/* Icon bigger than the count number so the stat reads as an action
   button rather than a label — see style.css note. */
.find-card__footer .footer-stat i { font-size: 20px; }
.find-card__footer .footer-stat:hover { color: var(--color-primary); }
.find-card__footer .footer-stat.is-active i { color: var(--color-primary); }
/* `.find-card__footer .footer-stat` (0,2,0) outranks `.hide` (0,1,0), so the
   utility `display: none` was being overridden — Connect AND Connected both
   rendered. Targeted override restores .hide semantics for footer stats only. */
.find-card__footer .footer-stat.hide { display: none; }
/* Inert display stats — the eye/views count, plus connect & comment on the
   viewer's own finds (My Finds, or their own rows in the Find Stream). They
   report totals but carry no action, so drop the button affordance: default
   cursor and no hover highlight. */
.find-card__footer .footer-stat--static { cursor: default; }
.find-card__footer .footer-stat--static:hover { color: var(--color-text-muted); }
.find-card__footer .flag-find-btn[data-flagged="1"] i { color: var(--color-danger); }

/* ── Duplicate-find group bar (parity with style.css, theme tokens) ────── */
.find-card__group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 8px;
}
.find-card__group-expand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--color-bg-elevated, #1f2937);
    border: 1px solid var(--color-border, #374151);
    color: var(--color-text-muted, #9ca3af);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.find-card__group-expand:hover,
.find-card__group-expand:focus {
    background: var(--color-bg-soft, #273449);
    border-color: var(--color-border-strong, #4b5563);
    color: var(--color-text, #e5e7eb);
    text-decoration: none;
}
.find-card__group-expand i { font-size: 16px; }
.find-card__group-chev { transition: transform .2s ease; }
.find-card__group-expand.is-open .find-card__group-chev { transform: rotate(180deg); }
.find-card__group-expand.is-loading { opacity: .55; pointer-events: none; }
.find-card__group-connect {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, opacity .15s;
}
.find-card__group-connect:hover:not(:disabled) {
    background: var(--color-primary);
    color: var(--color-bg, #0b1220);
}
.find-card__group-connect i { font-size: 16px; }
.find-card__group-connect.is-busy { opacity: .55; pointer-events: none; }
.find-card__group-connect.is-done,
.find-card__group-connect:disabled {
    background: var(--color-bg-elevated, #1f2937);
    border-color: var(--color-border, #374151);
    color: var(--color-text-muted, #9ca3af);
    cursor: default;
}
.find-group-wrap {
    margin-left: 22px;
    padding-left: 12px;
    border-left: 2px solid var(--color-border, #374151);
}
.find-stream-row--grouped .find-card {
    border-left: 2px solid var(--color-primary);
}
.find-group-enter {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    transition: max-height .28s ease-out, opacity .24s ease-out, transform .24s ease-out;
}
.find-group-enter--in {
    max-height: 1200px;
    opacity: 1;
    transform: none;
    overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
    .find-group-enter { transition: none; max-height: none; opacity: 1; transform: none; overflow: visible; }
    .find-card__group-chev { transition: none; }
}
@media (max-width: 575.98px) {
    .find-card__group { gap: 6px; }
    .find-card__group-connect { padding: 5px 10px; }
    .find-group-wrap { margin-left: 10px; padding-left: 8px; }
}

/* ── Connect celebrations (coin + sparkle) ──────────────────────────────
   Parity with style.css: the light theme carries these, monochrome was
   missing them, so in dark mode the coin rendered unpositioned and the
   sparkle had no styling. Both are anchored to the connect stat, which needs
   position:relative for the absolute children to hang off. */
.find-card__footer .footer-stat[data-action="connect"] { position: relative; }

/* Active-seller flourish: a gold "1" coin pops off the handshake, flips as it
   arcs upward, then fades. Spawned by spawnConnectCoin() on connect only. */
.connect-coin {
    position: absolute;
    left: 50%;
    top: -2px;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-radius: 50%;
    background: #FFCE3A;
    border: 2px solid #D69A17;
    box-shadow: 0 2px 4px rgba(181, 129, 15, .5);
    color: #7A5600;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    pointer-events: none;
    z-index: 20;
    will-change: transform, opacity;
    animation: connectCoinRise .72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes connectCoinRise {
    0%   { transform: translateY(0)     scale(.45) scaleX(1);  opacity: 1; }
    16%  { transform: translateY(-8px)  scale(1.15) scaleX(.35); opacity: 1; }
    40%  { transform: translateY(-28px) scale(1)   scaleX(1);  opacity: 1; }
    62%  { transform: translateY(-42px) scale(1)   scaleX(.35); opacity: 1; }
    80%  { transform: translateY(-50px) scale(1)   scaleX(1);  opacity: 1; }
    100% { transform: translateY(-58px) scale(1)   scaleX(.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .connect-coin { display: none; }
}

/* Pro flourish: a shimmer of purple/pink sparkles fans out around the connect
   stat — no coin, no number, since a Pro Connect spends nothing. Spawned by
   spawnConnectSparkle(); each particle flies to its own --tx/--ty offset. */
.connect-sparkle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 20;
}
.connect-sparkle__p {
    position: absolute;
    left: 0;
    top: 0;
    margin: -7px 0 0 -7px;
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    will-change: transform, opacity;
    animation: connectSparkleFly .62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.connect-sparkle__p--p { color: #7F77DD; } /* purple */
.connect-sparkle__p--k { color: #D4537E; } /* pink */
@keyframes connectSparkleFly {
    0%   { transform: translate(0, 0) scale(.2) rotate(0deg); opacity: 0; }
    30%  { transform: translate(calc(var(--tx) * .5), calc(var(--ty) * .5)) scale(1.1) rotate(90deg); opacity: 1; }
    70%  { transform: translate(var(--tx), var(--ty)) scale(.9) rotate(140deg); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(.35) rotate(180deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .connect-sparkle { display: none; }
}

/* "My find" pill — stream-mode owner indicator. Quiet, low-emphasis: surface
   background, muted text, thin border. Matches the mobile myFindPill style
   token. Reads as a passive context label, not a CTA. */
.find-card__my-find-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
}

/* Header flag — sits inline with the time text in stream mode. Pushed left of
   the auto-margin menu toggle so it ends up between time and 3-dot. */
.find-card__top .find-card__flag {
    margin-right: 2px;
}

@media (max-width: 575px) {
    .find-card { padding: 12px; border-radius: 12px; gap: 8px; }
    .find-card__title { font-size: 16px; }
    .find-card__pill { font-size: 10.5px; padding: 2px 8px; }
    .find-card__chips .chip { font-size: 12px; padding: 3px 8px; }
    .find-card__footer { gap: 8px; }
    .find-card__footer-stats { gap: 12px; }
}

/* ------------------------------------------------------------------ *
 * My Finds — masonry grid (Isotope)
 *
 * Find cards vary wildly in height (image finds vs text-only finds).
 * In a plain flex/grid row every card is stretched to the tallest in
 * its row, leaving dead grey space under the short ones. Isotope packs
 * each card into the shortest column instead — true masonry — so the
 * columns close up while the newest-first card order is preserved.
 *
 * Columns ramp 1 -> 2 -> 3 with viewport width. The 8px item padding
 * is the gutter (16px visual gap); the negative side margins on the
 * container cancel the outer padding so cards sit flush to the edges.
 *
 * `.myfinds-grid__sizer` is a zero-height element Isotope measures for
 * its column width — using it instead of a real card keeps the column
 * width correct even after the first card is deleted/hidden.
 *
 * The flex rules are a no-JS / pre-Isotope fallback so cards still tile
 * instead of stacking full-width; Isotope absolutely-positions the
 * items on top and sets the container height. `data-card-grid` on the
 * container stays for arrow-key traversal. Init lives in myfinds.php.
 * ------------------------------------------------------------------ */
.myfinds-grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 1rem -8px 0;
}
.myfinds-grid__sizer {
    position: absolute;
    width: 100%;
    height: 0;
}
.myfinds-grid__col {
    width: 100%;
    padding: 8px;
}
@media (min-width: 768px) {
    .myfinds-grid__sizer,
    .myfinds-grid__col { width: 50%; }
}
@media (min-width: 1200px) {
    .myfinds-grid__sizer,
    .myfinds-grid__col { width: 33.3333%; }
}

/* ------------------------------------------------------------------ *
 * Mobile (single-column) find lists — wider cards, tighter rhythm.
 *
 * On phones the My Finds masonry and the Find Stream feed are both a
 * single column, so the ~15px Bootstrap gutter down each side plus the
 * 16px inter-card gap left a wide band of page background on show. Here
 * we bleed the cards toward the viewport edge (~8px margin) and shrink
 * the gap to ~8px so the white cards dominate for a more premium,
 * app-like feel. The 2-/3-column layouts (>=768px) are untouched.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* My Finds: pull the masonry grid out into the container gutter
       (-13px against the parent's 15px padding => ~8px side margin) and
       drop the per-column padding to an ~8px vertical gap. */
    .myfinds-grid { margin-left: -13px; margin-right: -13px; }
    .myfinds-grid__col { padding: 4px 6px; }

    /* Find Stream: trim the column padding so cards sit ~8px from the
       edge, and beat Bootstrap's .mt-3 (16px !important) inter-card gap. */
    #questions-container .find-stream-row {
        padding-left: 8px;
        padding-right: 8px;
        margin-top: 8px !important;
    }
}

/* ── Engagement prompts (notification / phone soft-prompts) ── */
.engagement-modal .modal-dialog { max-width: 380px; }
.engagement-modal-content {
    position: relative;
    border: 1px solid #333333;
    border-radius: 20px;
    padding: 30px 24px 20px;
    text-align: center;
    background: #0a0a0a;
}
.engagement-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #8a9099;
    cursor: pointer;
}
.engagement-illustration {
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.engagement-mock-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 262px;
    padding: 14px;
    border: 1px solid #333333;
    border-radius: 16px;
    background: #161616;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
.engagement-mock-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(204, 0, 0, 0.22);
    color: #ff5252;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.engagement-mock-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.engagement-mock-bar {
    height: 7px;
    border-radius: 4px;
    background: #333333;
}
.engagement-mock-send {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #cc0000;
    color: #ffffff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.engagement-phone-badge {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(204, 0, 0, 0.2);
    color: #ff5252;
    font-size: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.engagement-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 4px 0 8px;
}
.engagement-modal-text {
    font-size: 14px;
    line-height: 1.5;
    color: #9aa0a6;
    margin: 0 auto 18px;
    max-width: 300px;
}
.engagement-modal-input {
    width: 100%;
    height: 50px;
    border: 1px solid #333333;
    border-radius: 12px;
    padding: 0 16px;
    font-size: 16px;
    color: #ffffff;
    background: #1a1a1a;
    margin-bottom: 12px;
}
.engagement-modal-input:focus {
    outline: none;
    border-color: #cc0000;
}
.engagement-modal-cta {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 9999px;
    background: #cc0000;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.engagement-modal-cta:disabled { opacity: 0.6; cursor: default; }
.engagement-modal-secondary {
    margin-top: 8px;
    padding: 8px;
    background: none;
    border: none;
    color: #9aa0a6;
    font-size: 14px;
    cursor: pointer;
}

/* ── Admin: Security log page (admin-security.php). Scoped to the page's body
   class so it can't leak elsewhere. Colours come from theme vars, so this same
   block renders correctly in the dark sheet (style-monochrome.css) and the
   light sheet (style.css). Mirror any change into both sheets. ── */
body.admin-security-page { background: var(--color-bg-gray, #f0f0f0); }
.admin-security-page .audit-card { background: var(--color-bg, #fff); border-radius: 12px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 1rem; color: var(--color-text); }
.admin-security-page .audit-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-border, #eef0f3); align-items: flex-start; }
.admin-security-page .audit-row:last-child { border-bottom: 0; }
.admin-security-page .audit-dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; }
.admin-security-page .audit-meta { color: var(--color-text-muted, #94a3b8); font-size: .8rem; }
.admin-security-page .audit-action { font-weight: 600; color: var(--color-text); }
.admin-security-page .audit-target { color: var(--color-text-muted, #94a3b8); font-size: .85rem; font-family: monospace; }
.admin-security-page .audit-details { background: var(--color-bg-soft, #f9fafb); padding: 8px 12px; border-radius: 6px; font-family: monospace; font-size: .8rem; margin-top: 6px; color: var(--color-text); white-space: pre-wrap; word-break: break-word; }
.admin-security-page .filter-pills { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.admin-security-page .filter-pills .form-control { width: auto; }
.admin-security-page .sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.admin-security-page .sig-card { background: var(--color-bg, #fff); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.admin-security-page .sig-num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--color-text); }
.admin-security-page .sig-lbl { color: var(--color-text-muted, #94a3b8); font-size: .78rem; margin-top: .15rem; }
.admin-security-page .sig-num.danger { color: var(--color-danger, #e43f52); }
.admin-security-page .sig-num.warn { color: var(--color-warning, #f17425); }
.admin-security-page .ip-chip { font-family: monospace; }

/* ── Find Stream rails (findstream.php) — mirrors the structural rules in
   style.css. Two complete stylesheets, not layered, so anything added there
   has to be re-themed here. Without these, the left rail avatar inflates to
   container width and quick-nav drops to default browser styles. ── */
.find-stream-shell { align-items: flex-start; }
/* The rails are `position: sticky`, which needs travel inside their column —
   and `align-items: flex-start` collapses each column to its content height,
   so the rails scrolled away with the feed. Stretch the two rail columns back
   to the row height; the feed column keeps its own. */
.find-stream-shell > aside { align-self: stretch; }
.find-stream-left,
.find-stream-right {
    position: sticky;
    top: calc(var(--site-nav-height, 64px) + 16px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - var(--site-nav-height, 64px) - 32px);
    overflow: hidden;
    padding-bottom: 8px;
}
/* Each rail scrolls *inside* .fs-rail-scroll rather than as a whole, so the
   pinned card that follows it ("Make it stand out" on the right, the tip on
   the left) can't be pushed off the bottom on a short viewport. Both partials
   must keep everything above their pinned card inside .fs-rail-scroll — the
   rail itself no longer scrolls. */
.fs-rail-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.fs-rail-card--pinned,
.fs-tip--pinned { flex: 0 0 auto; }
.fs-rail-scroll::-webkit-scrollbar { width: 6px; }
.fs-rail-scroll::-webkit-scrollbar-thumb { background: var(--color-border, #333); border-radius: 3px; }

.fs-rail-card {
    background: var(--color-bg-card, #181818);
    border: 1px solid var(--color-border, #2b2b2b);
    border-radius: 12px;
    padding: 12px;
}
.fs-rail-card__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--color-text-muted, #9a9a9a);
    margin: 0 0 8px;
}

.fs-lens { display: flex; align-items: center; gap: 12px; }
.fs-lens__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-bg-soft, #111);
    object-fit: cover;
    flex-shrink: 0;
}
.fs-lens__meta { min-width: 0; }
.fs-lens__name {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text, #f0f0f0);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fs-lens__role {
    font-size: 12px;
    color: var(--color-text-muted, #9a9a9a);
    margin: 2px 0 0;
}
.fs-lens__switch {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--color-primary, #e85454);
    text-decoration: none;
    font-weight: 600;
}

.fs-quicknav { list-style: none; padding: 0; margin: 0; }
.fs-quicknav li + li { margin-top: 2px; }
.fs-quicknav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--color-text, #f0f0f0);
    font-size: 13.5px;
    text-decoration: none;
    transition: background .15s;
}
.fs-quicknav a:hover { background: var(--color-bg-soft, #111); color: #fff; }
.fs-quicknav a i { color: var(--color-text-muted, #9a9a9a); font-size: 16px; }

.fs-filter { display: flex; flex-direction: column; gap: 8px; }
.fs-filter__row { display: flex; flex-direction: column; gap: 4px; }
.fs-filter__label {
    font-size: 11.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-text-muted, #9a9a9a);
    letter-spacing: .3px;
    /* Bootstrap's `label { margin-bottom: .5rem }` was landing on top of the
       row's own `gap: 4px`, so every filter row carried 8px it never asked
       for — 32px of dead space in a rail whose whole job is to fit the
       viewport without scrolling. */
    margin-bottom: 0;
}
.fs-filter select,
.fs-filter input[type="number"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border, #2b2b2b);
    border-radius: 8px;
    font-size: 13px;
    background: var(--color-bg-soft, #111);
    color: var(--color-text, #f0f0f0);
}
/* Type and Country share a row. Two short selects side by side turn a
   four-row form into three, which is what keeps the right rail inside the
   viewport at the common desktop height so .fs-rail-scroll never has to draw
   a scrollbar. The scroller stays — it is the fallback for genuinely short
   viewports — it just isn't the normal case any more. Field order is
   unchanged, so nothing moves for someone who knows the form. */
.fs-filter__row--pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.fs-filter__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.fs-filter__budget-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.fs-filter__apply {
    margin-top: 4px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--color-primary, #e85454);
    color: #fff;
    border: 0;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.fs-filter__apply:hover { filter: brightness(1.1); }

.fs-suggested-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.fs-suggested-row + .fs-suggested-row { border-top: 1px solid var(--color-border, #2b2b2b); }
.fs-suggested-row__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg-soft, #111);
    flex-shrink: 0;
    object-fit: cover;
}
.fs-suggested-row__meta { min-width: 0; flex: 1; }
.fs-suggested-row__name {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text, #f0f0f0);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fs-suggested-row__sub {
    font-size: 11.5px;
    color: var(--color-text-muted, #9a9a9a);
    margin: 1px 0 0;
}
.fs-suggested-row__follow {
    flex-shrink: 0;
    background: transparent;
    color: var(--color-primary, #e85454);
    border: 1px solid var(--color-primary, #e85454);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.fs-suggested-row__follow:hover { background: var(--color-primary, #e85454); color: #fff; }

.fs-tip {
    background: var(--color-bg-card, #181818);
    border: 1px solid var(--color-border, #2b2b2b);
    border-left: 3px solid var(--color-warning, #ffb454);
    border-radius: 12px;
    padding: 14px;
    color: var(--color-text, #f0f0f0);
    font-size: 13px;
    line-height: 1.5;
}
.fs-tip__icon { font-size: 18px; margin-bottom: 6px; color: var(--color-warning, #ffb454); }
.fs-tip__title { font-weight: 700; margin: 0 0 4px; font-size: 13px; color: var(--color-text, #f0f0f0); }

/* The right-rail "Make it stand out" card has an inline color="#475569" that
   is unreadable on dark surfaces — override it with a higher-priority muted
   tone scoped to the card so we don't touch the partial. */
.find-stream-right .fs-rail-card p[style] { color: var(--color-text-muted, #9a9a9a) !important; }

/* ── Bootstrap-style `.rounded-*` radius utilities — present in style.css but
   missing here, so comment bubbles (`.bg-light.rounded-md`) and other elements
   relying on these utilities rendered with sharp 0-radius corners in dark mode.
   Mirror the light sheet's values (lines 491-502). ── */
.rounded-md { border-radius: 10px !important; }
.rounded-lg { border-radius: 30px !important; }
.rounded-right { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; }
.rounded-left  { border-top-left-radius: 6px !important;  border-bottom-left-radius: 6px !important; }

/* ── Reply form (created in JS via ps-dashboard.js / shop-dashboard.js).
   Uses Bootstrap `.input-group` + `.form-control.reply-input` + `.btn-light`
   cancel. None of those had dark-theme rules, so on a dark page the input
   rendered as a white box and the cancel button as a light-gray pill on
   black — visually broken. ── */
.reply-form-container { margin-left: 0 !important; }
.reply-form-container .input-group { border-radius: 999px; overflow: hidden; background: var(--color-bg-soft, #111); border: 1px solid var(--color-border, #2b2b2b); }
.reply-form-container .reply-input.form-control {
    background: transparent !important;
    color: var(--color-text, #f0f0f0) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 8px 14px;
}
.reply-form-container .reply-input.form-control::placeholder { color: var(--color-text-muted, #9a9a9a); opacity: 1; }
.reply-form-container .input-group-append { display: inline-flex; align-items: center; }
.reply-form-container .input-group-append .btn {
    border-radius: 0 !important;
    border: 0;
    padding: 6px 12px;
    height: 100%;
}
.reply-form-container .input-group-append .btn-primary {
    background: var(--color-primary, #e85454);
    color: #fff;
}
.reply-form-container .input-group-append .btn-primary:hover { filter: brightness(1.1); }
.reply-form-container .input-group-append .btn-light.cancel-reply {
    background: transparent;
    color: var(--color-text-muted, #9a9a9a);
}
.reply-form-container .input-group-append .btn-light.cancel-reply:hover { color: var(--color-text, #f0f0f0); background: var(--color-bg-card, #181818); }

/* The `.bg-light` comment bubble (Bootstrap utility) defaults to a near-white
   background which clashes with the dark page. Re-tint to an elevated surface
   so bubbles read as quoted content on dark. Scoped to comment lists so we
   don't repaint every `.bg-light` site-wide. */
.listcomment .bg-light, .listreply .bg-light, .commentor-detail.bg-light {
    background-color: var(--color-bg-card, #181818) !important;
    color: var(--color-text, #f0f0f0);
}
.listcomment .bg-light .text-dark, .listreply .bg-light .text-dark, .commentor-detail .text-dark {
    color: var(--color-text, #f0f0f0) !important;
}

/* ── Team activity feed (corproles.php / shoproles.php) ─────────────────
   Mirrored from style.css per project convention. CSS vars carry the
   dark-mode palette through automatically. Keep in sync when editing. */
.team-activity-section .team-activity-list { padding: 0; margin: 0; }
.team-activity-section .team-activity-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border, #2b2b2b);
}
.team-activity-section .team-activity-item:first-child { padding-top: 0; }
.team-activity-section .team-activity-item:last-child  { border-bottom: 0; padding-bottom: 0; }

.team-activity-section .team-activity-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--color-bg-soft, #1e1e1e);
    color: var(--color-text-muted, #9a9a9a);
}
.team-activity-section .team-activity-icon--role   { background: rgba(232, 84, 84, 0.16);  color: var(--color-primary, #e85454); }
.team-activity-section .team-activity-icon--add    { background: rgba(92, 216, 138, 0.16); color: var(--color-success, #5cd88a); }
.team-activity-section .team-activity-icon--remove { background: rgba(255, 107, 107, 0.16); color: var(--color-danger, #ff6b6b); }
.team-activity-section .team-activity-icon--owner  { background: rgba(255, 180, 84, 0.18); color: var(--color-warning, #ffb454); }
/* Business actions (appointments) — info tone, distinct from the role tones. */
.team-activity-section .team-activity-icon--booking { background: rgba(96, 165, 250, 0.18); color: var(--color-info, #60a5fa); }

.team-activity-section .team-activity-text { color: var(--color-text, #f0f0f0); line-height: 1.5; }
.team-activity-section .team-activity-text strong { font-weight: 600; }
.team-activity-section .team-activity-text em     { font-style: normal; color: var(--color-text-muted, #9a9a9a); }
.team-activity-section .team-activity-time        { display: inline-block; margin-top: 4px; }

.team-activity-section .team-activity-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-bg-soft, #1e1e1e);
    color: var(--color-text-muted, #9a9a9a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.team-activity-section .team-activity-empty-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f0f0f0;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.team-activity-section .team-activity-empty-action:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #111111;
    text-decoration: none;
    transform: translateY(-1px);
}
.team-activity-section .team-activity-empty-action i {
    font-size: 1rem;
    line-height: 1;
}
.team-activity-section .team-activity-pagination { font-size: .9rem; }

/* ── Team activity polish: avatars, filter chips, export link ──────────
   Mirrored from style.css. Dark palette via CSS vars. */
.team-activity-section .team-activity-avatar-wrap { position: relative; flex: 0 0 40px; width: 40px; height: 40px; }
.team-activity-section .team-activity-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-bg-soft, #1e1e1e);
    display: block;
}
.team-activity-section .team-activity-avatar-fallback { width: 40px; height: 40px; }
.team-activity-section .team-activity-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 2px solid var(--color-bg, #181818);
    color: #fff;
}
.team-activity-section .team-activity-badge--role   { background: var(--color-primary, #e85454); }
.team-activity-section .team-activity-badge--add    { background: var(--color-success, #5cd88a); }
.team-activity-section .team-activity-badge--remove { background: var(--color-danger,  #ff6b6b); }
.team-activity-section .team-activity-badge--owner  { background: var(--color-warning, #ffb454); }
.team-activity-section .team-activity-badge--booking { background: var(--color-info, #60a5fa); }

.team-activity-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.team-activity-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid var(--color-border, #2b2b2b);
    background: var(--color-bg, #181818);
    color: var(--color-text-muted, #9a9a9a);
    font-size: .82rem;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.team-activity-chip:hover {
    background: var(--color-bg-soft, #1e1e1e);
    color: var(--color-text, #f0f0f0);
    text-decoration: none;
}
.team-activity-chip--active,
.team-activity-chip--active:hover {
    background: var(--color-primary, #e85454);
    color: #fff;
    border-color: var(--color-primary, #e85454);
}
.team-activity-export-link { white-space: nowrap; }

/* ── Team activity member filter row (mirrored from style.css) ── */
.team-activity-member-row { color: var(--color-text, #f0f0f0); }
.team-activity-member-select {
    width: auto;
    max-width: 220px;
    display: inline-block;
}
.team-activity-member-active strong { color: var(--color-text, #f0f0f0); }
.team-activity-member-clear {
    color: var(--color-text-muted, #9a9a9a);
    text-decoration: underline;
}
.team-activity-member-clear:hover { color: var(--color-primary, #e85454); }

/* ── Leave Team modal (mirrored from style.css) ─────────────────────── */
.leave-team-breakdown .leave-team-card {
    background: var(--color-bg-soft, #1e1e1e);
    border: 1px solid var(--color-border, #2b2b2b);
    border-radius: 8px;
    padding: 14px 16px;
    color: var(--color-text, #f0f0f0);
}
.leave-team-breakdown .leave-team-card--stays {
    border-left: 3px solid var(--color-primary, #e85454);
}
.leave-team-breakdown .leave-team-card--goes {
    border-left: 3px solid var(--color-success, #5cd88a);
}
.leave-team-breakdown .leave-team-card-head {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text, #f0f0f0);
}
.leave-team-breakdown .leave-team-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 10px;
}
.leave-team-breakdown .leave-team-list li {
    padding: 4px 0;
    color: var(--color-text, #f0f0f0);
    font-size: .9rem;
}
.leave-team-breakdown .leave-team-list li::before {
    content: "•";
    color: var(--color-text-muted, #9a9a9a);
    margin-right: 6px;
}
.leave-team-trigger-wrap { gap: 0; }
.leave-team-button-disabled { cursor: not-allowed; opacity: .65; }

/* ── Leave-team forwarding-consent block (mirrored from style.css) ─── */
.leave-team-consent {
    background: var(--color-bg-soft, #1e1e1e);
    border: 1px solid var(--color-border, #2b2b2b);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.leave-team-consent .custom-control-label {
    color: var(--color-text, #f0f0f0);
    line-height: 1.45;
    padding-left: 6px;
}
.leave-team-consent-help { margin-top: 4px; margin-left: 28px; line-height: 1.4; }

/* ── manage-my-data forwarding-consent list (mirrored from style.css) ── */
.forwarding-consent-item:last-child { border-bottom: 0 !important; }
.forwarding-consent-text { color: var(--color-text, #f0f0f0); }

/* ════════════════════════════════════════════════════════════════════
   Mobile UX hardening (2026-06-12) — mirrored from style.css
   (1) Stop iOS Safari auto-zoom on input focus (controls < 16px)
   (2) Honour the home-indicator safe area on fixed bottom bars
   (3) Dynamic viewport height so full-height sections don't clip/jump
       behind the collapsing mobile URL bar
   ════════════════════════════════════════════════════════════════════ */

/* (1) iOS zooms + re-pans whenever a focused text control renders < 16px.
   Pin the small controls to 16px on phones. Inline-styled large inputs
   (e.g. the 6-digit OTP at 1.5rem) keep their size via higher specificity. */
@media (max-width: 767.98px) {
  .form-group .form-control,
  .conv-input,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="image"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* (2) Keep fixed bottom bars clear of the iOS home indicator. No-ops where
   there is no inset (env() resolves to 0). Needs viewport-fit=cover in the
   page meta, which the top-level pages now carry. */
@supports (padding: env(safe-area-inset-bottom)) {
  .cookie-popup { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .conv-input-area { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* (3) Use the dynamic viewport unit for full-height containers so they track
   the visible area as the mobile URL bar shows/hides. Browsers without dvh
   simply keep their existing 100vh rule. */
@supports (height: 100dvh) {
  body,
  .shop-dashboard,
  .ps-dashboard,
  .studio-section,
  .index-hero-bg,
  .sa-hero,
  .mfa-container { min-height: 100dvh; }
}

/* ════════════════════════════════════════════════════════════════════
   Mobile UX hardening, part 2 (2026-06-12) — mirrored from style.css
   Notch / home-indicator safe areas for the fixed nav, slide-in menu, and the
   dealroom + studio bars. All gated on env(), so they are pure no-ops in normal
   mobile browsers and on desktop (insets resolve to 0); they only bite in an
   installed (standalone) PWA on a device with a notch / home indicator.
   ════════════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-top)) {
  /* Drop the fixed nav's content (logo/burger) below the island and let its
     background fill the island. Body takes the SAME top inset so in-flow page
     content keeps the exact clearance it had below the now-taller nav — without
     it, hero content would slide ~1 inset under the nav. */
  body { padding-top: env(safe-area-inset-top); }
  #topnav { padding-top: env(safe-area-inset-top); }

  /* Admin reuses #topnav (same id) as a 74px header and offsets content via its
     own `html.admin-interface body { padding-top: 74px }` — higher specificity
     (0-1-2) than the body rule above, so it would otherwise keep a flat 74px and
     let content slide ~1 inset under the now-island-padded header. Re-apply the
     offset WITH the inset. Resolves to a plain 74px off-PWA (env() = 0). */
  html.admin-interface body { padding-top: calc(74px + env(safe-area-inset-top)); }

  /* Slide-in menu: header clears the island, bottom CTA clears the indicator. */
  .mobile-sidebar-menu {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Fixed bottom bars clear the home indicator. env() = 0 on desktop, so these
     can stay un-scoped by breakpoint. */
  .dealroom-input { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .studio-booking-card { padding-bottom: env(safe-area-inset-bottom); }
}

/* The dealroom's full-screen mobile panels are position:fixed; their headers
   must also clear the island. Scoped to the same breakpoint that fixes the
   panels (the 80px base only exists there). */
@media (max-width: 991px) {
  @supports (padding: env(safe-area-inset-top)) {
    .dealroom-sidebar-header,
    .dealroom-chat-header { padding-top: calc(80px + env(safe-area-inset-top)); }
  }
}

/* ════════════════════════════════════════════════════════════════════
   Mobile UX hardening, part 3 (2026-06-12) — mirrored from style.css
   Lightbox controls that are anchored to the FULL-SCREEN layer (direct children
   of .image-lightbox / .studio-lightbox) sit ~12-24px from the screen top, which
   lands under the Dynamic Island in a standalone PWA — making the dismiss ✕ hard
   to tap. Drop them below the island. Verified against the DOM:
   studio.php (close/counter are siblings of the overlay) + corporatefind.php.
   NOT included: .studio-lightbox-nav (vertically centered, top:50%), and the
   .dyk-close / .onboarding-modal closes (anchored to centered cards, already
   clear of the island). env() = 0 off-PWA, so these resolve to the base values.
   ════════════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-top)) {
  .image-lightbox-close    { top: calc(20px + env(safe-area-inset-top)); }
  .studio-lightbox-close   { top: calc(16px + env(safe-area-inset-top)); }
  .studio-lightbox-counter { top: calc(24px + env(safe-area-inset-top)); }
}

/* ════════════════════════════════════════════════════════════════════
   Find image gallery (multi-image find detail)
   Cover = first thumbnail; drag to reorder, × to remove, + to add.
   ════════════════════════════════════════════════════════════════════ */
.find-gallery-main {
  max-height: 520px;
  width: 100%;
  object-fit: contain;
  border-radius: 8px;
  cursor: zoom-in;
}
.find-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.find-gallery-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  background: transparent;
  cursor: grab;
  flex: 0 0 auto;
  user-select: none;
}
.find-gallery-thumb:active { cursor: grabbing; }
.find-gallery-thumb.is-cover  { border-color: var(--color-primary, #e85454); }
.find-gallery-thumb.dragging  { opacity: .45; }
.find-gallery-thumb.drag-over { border-color: var(--color-primary, #e85454); }
.find-gallery-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.find-gallery-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.find-gallery-del:hover { background: var(--color-primary, #e85454); }
.find-gallery-cover-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-primary, #e85454);
  color: #fff;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 14px;
  display: none;
}
.find-gallery-thumb.is-cover .find-gallery-cover-badge { display: block; }
.find-gallery-add {
  width: 72px;
  height: 72px;
  margin: 8px auto 0;
  border-radius: 8px;
  border: 2px dashed var(--color-primary, #e85454);
  background: transparent;
  color: var(--color-primary, #e85454);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
}
.find-gallery-add small { font-size: 10px; }
.find-gallery-add.at-cap { display: none; }
.find-gallery-hint { text-align: center; }

/* ============================================================================
 * Pricing page (pricing.php) — dark theme.
 * Structural rules are shared with style.css; the palette below is the only
 * part that differs between themes. Theme is chosen by which of the two
 * stylesheets is loaded (renderThemeStylesheet), so no media queries here.
 * ==========================================================================*/
:root {
  --pr-accent: #cc0000;
  --pr-accent-soft: rgba(255, 90, 90, 0.10);
  --pr-bg: transparent;
  --pr-card: #1f1e1d;
  --pr-card-border: #3a3a38;
  --pr-ink: #f5f3ee;
  --pr-muted: #a7a39b;
  --pr-check: #cc0000;
  --pr-radius: 20px;
  --pr-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  --pr-toast-bg: #33322f;
  --pr-toast-ink: #f5f3ee;
}

.pricing-wrap { max-width: 1080px; margin: 0 auto; padding: 8px 16px 64px; }

.pricing-hero { text-align: center; padding: 28px 8px 8px; }
.pricing-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; color: var(--pr-ink); margin: 0 0 12px; letter-spacing: -0.02em; }
.pricing-hero p { font-size: clamp(15px, 2vw, 18px); color: var(--pr-muted); max-width: 620px; margin: 0 auto; }

/* Entity selector */
.pricing-entity { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 24px auto 8px; color: var(--pr-muted); font-size: 14px; }
.pricing-entity select { border: 1px solid var(--pr-card-border); background: var(--pr-card); color: var(--pr-ink); border-radius: 10px; padding: 8px 12px; font-size: 14px; min-width: 220px; }

/* Cards */
.pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; align-items: stretch; }
@media (max-width: 760px) { .pricing-cards { grid-template-columns: 1fr; } }

.plan-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--pr-card); border: 1px solid var(--pr-card-border);
  border-radius: var(--pr-radius); padding: 32px; box-shadow: var(--pr-shadow);
}
.plan-card.is-pro { border-color: var(--pr-accent); background: linear-gradient(180deg, var(--pr-accent-soft), transparent 160px); }
.plan-badge {
  position: absolute; top: -12px; left: 32px; background: var(--pr-accent); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .03em; padding: 5px 12px; border-radius: 999px;
}
.plan-name { font-size: 22px; font-weight: 700; color: var(--pr-ink); margin: 0 0 4px; }
.plan-tagline { font-size: 14px; color: var(--pr-muted); margin: 0 0 18px; min-height: 38px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.plan-price .was { font-size: 20px; font-weight: 600; color: var(--pr-muted); text-decoration: line-through; text-decoration-thickness: 2px; opacity: .75; }
.plan-price .amt { font-size: 38px; font-weight: 800; color: var(--pr-ink); letter-spacing: -0.02em; }
.plan-price .per { font-size: 15px; color: var(--pr-muted); }
.plan-price .save { align-self: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--pr-accent); border-radius: 999px; padding: 3px 10px; }
.plan-price-note { font-size: 13px; color: var(--pr-muted); margin-bottom: 20px; min-height: 18px; }

/* Pro billing-mode segmented control: One-time (all channels) vs Auto-renew (card). */
.plan-billing-toggle {
  display: flex; gap: 4px; margin: 10px 0 8px; padding: 4px;
  background: var(--pr-accent-soft); border: 1px solid var(--pr-card-border); border-radius: 12px;
}
.plan-billing-toggle .pbt-opt {
  flex: 1; padding: 8px 10px; border: 0; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--pr-muted); border-radius: 9px;
  transition: background .15s, color .15s;
}
.plan-billing-toggle .pbt-opt:hover { color: var(--pr-ink); }
.plan-billing-toggle .pbt-opt.is-active { background: var(--pr-accent); color: #fff; box-shadow: var(--pr-shadow); }
.plan-billing-toggle .pbt-opt.is-active:hover { color: #fff; }

.plan-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 18px; border-radius: 12px; font-size: 15px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: filter .15s, transform .05s;
}
.plan-cta:active { transform: translateY(1px); }
.plan-cta.primary { background: var(--pr-accent); color: #fff; }
.plan-cta.primary:hover { filter: brightness(1.06); color: #fff; }
.plan-cta.ghost { background: transparent; color: var(--pr-ink); border-color: var(--pr-card-border); }
.plan-cta.ghost:hover { border-color: var(--pr-accent); color: var(--pr-accent); }
.plan-cta[disabled], .plan-cta.is-disabled { opacity: .55; cursor: default; pointer-events: none; }

.plan-features { list-style: none; padding: 0; margin: 22px 0 0; }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--pr-ink); padding: 7px 0; }
.plan-features li::before { content: "✓"; color: var(--pr-check); font-weight: 800; flex: 0 0 auto; line-height: 1.4; }
.plan-features .muted { color: var(--pr-muted); }
.plan-features .muted::before { content: "•"; color: var(--pr-muted); }

.plan-state { font-size: 13px; color: var(--pr-accent); font-weight: 600; margin-top: 14px; text-align: center; }

/* Section heads + pack grid */
.pricing-section-h { text-align: center; margin: 56px 0 6px; }
.pricing-section-h h2 { font-size: 24px; font-weight: 700; color: var(--pr-ink); margin: 0 0 6px; }
.pricing-section-h p { color: var(--pr-muted); font-size: 14.5px; margin: 0; }

.pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.pack-grid.boosts { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
/* AI credit packs (shopping agents) — four small tiles like connect packs. */
.pack-grid.ai { grid-template-columns: repeat(4, 1fr); }
.pack-grid.ai .pack-credits { color: var(--pr-ink); }
@media (max-width: 760px) { .pack-grid, .pack-grid.boosts, .pack-grid.ai { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .pack-grid, .pack-grid.boosts, .pack-grid.ai { grid-template-columns: 1fr; } }

.pack-card {
  background: var(--pr-card); border: 1px solid var(--pr-card-border); border-radius: 16px;
  padding: 20px; text-align: center; box-shadow: var(--pr-shadow); display: flex; flex-direction: column;
}
.pack-card .pack-name { font-weight: 700; color: var(--pr-ink); font-size: 15px; }
.pack-card .pack-credits { color: var(--pr-accent); font-weight: 700; font-size: 13px; margin-top: 2px; }
.pack-card .pack-blurb { color: var(--pr-muted); font-size: 12.5px; margin: 8px 0 14px; flex: 1; }
.pack-card .pack-price { font-size: 22px; font-weight: 800; color: var(--pr-ink); margin-bottom: 12px; }
.pack-card .plan-cta { padding: 10px 14px; font-size: 14px; }

/* Comparison matrix */
.compare { margin: 40px auto 0; max-width: 760px; border: 1px solid var(--pr-card-border); border-radius: 16px; overflow: hidden; }
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 12px 16px; font-size: 14px; text-align: left; border-bottom: 1px solid var(--pr-card-border); color: var(--pr-ink); }
.compare thead th { background: var(--pr-accent-soft); font-weight: 700; }
.compare th.col, .compare td.col { text-align: center; width: 90px; color: var(--pr-muted); }
.compare td.col.yes { color: var(--pr-accent); font-weight: 800; }
.compare tr:last-child td { border-bottom: 0; }

/* Upgrade economics note */
.pricing-econ { margin: 36px auto 0; max-width: 720px; text-align: center; color: var(--pr-muted); font-size: 14px; }
.pricing-econ b { color: var(--pr-ink); }

/* Toast / error */
.pricing-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--pr-toast-bg); color: var(--pr-toast-ink); padding: 12px 18px; border-radius: 12px; font-size: 14px; box-shadow: var(--pr-shadow); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 9999; }
.pricing-toast.show { opacity: 1; }

/* ==========================================================================
 * BILLING & PAYMENTS (billing-history.php)  —  DARK palette
 * Structural rules are shared with style.css; only the --bh-* palette below
 * differs between themes. Theme is chosen by which stylesheet is loaded
 * (renderThemeStylesheet), so no media queries / html-class hooks here.
 * ==========================================================================*/
:root {
  --bh-bg: #151413;
  --bh-card: #1f1e1d;
  --bh-border: #3a3a38;
  --bh-border-strong: #45443f;
  --bh-text: #f5f3ee;
  --bh-muted: #9aa4b2;
  --bh-red: #cc0000;
  --bh-red-dark: #aa0000;
  --bh-soft: rgba(204, 0, 0, 0.16);
  --bh-green: #34d17f;
  --bh-green-soft: rgba(52, 209, 127, 0.14);
  --bh-amber: #f0a340;
  --bh-amber-soft: rgba(240, 163, 64, 0.16);
  --bh-slate-soft: rgba(154, 164, 178, 0.16);
  --bh-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
  --bh-hero-a: #cc0000;
  --bh-hero-b: #990000;
}

.bh-section { background: var(--bh-bg); min-height: 70vh; flex: 1 0 auto; padding: 96px 0 72px; }
.bh-wrap { max-width: 940px; margin: 0 auto; padding: 0 20px; font-family: 'Ubuntu', 'Lato', system-ui, sans-serif; color: var(--bh-text); }

/* Hero */
.bh-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 30px 30px 26px; background: linear-gradient(135deg, var(--bh-hero-a), var(--bh-hero-b)); box-shadow: 0 12px 30px rgba(204, 0, 0, 0.22); }
.bh-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%); pointer-events: none; }
.bh-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #ffd9d9; font-size: 12px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; }
.bh-eyebrow svg { width: 15px; height: 15px; }
.bh-hero h1 { color: #fff; font-size: 27px; font-weight: 500; margin: 12px 0 6px; line-height: 1.2; }
.bh-hero p { color: #ffe2e2; font-size: 14.5px; margin: 0; max-width: 560px; }
.bh-hero-stats { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.bh-hero-stat .v { color: #fff; font-size: 24px; font-weight: 700; line-height: 1; }
.bh-hero-stat .k { color: #ffc7c7; font-size: 12.5px; margin-top: 5px; }

/* Section headers */
.bh-h { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: var(--bh-muted); margin: 34px 2px 12px; }
.bh-h:first-of-type { margin-top: 30px; }

/* Balance cards */
.bh-balances { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.bh-bal-card { background: var(--bh-card); border: 1px solid var(--bh-border); border-radius: 16px; padding: 18px; box-shadow: var(--bh-shadow); }
.bh-bal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bh-bal-name { font-weight: 600; font-size: 15px; }
.bh-pill { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.bh-pill.pro { background: var(--bh-red); color: #fff; }
.bh-pill.free { background: var(--bh-slate-soft); color: var(--bh-muted); }
.bh-pill.warn { background: var(--bh-amber-soft); color: var(--bh-amber); }
.bh-bal-metrics { display: flex; gap: 22px; margin-top: 16px; }
.bh-metric .v { font-size: 22px; font-weight: 700; line-height: 1; }
.bh-metric .k { font-size: 12px; color: var(--bh-muted); margin-top: 5px; }
.bh-bal-note { margin-top: 12px; font-size: 12px; color: var(--bh-muted); }

/* Transaction / activity list */
.bh-card { background: var(--bh-card); border: 1px solid var(--bh-border); border-radius: 16px; box-shadow: var(--bh-shadow); overflow: hidden; }
.bh-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-top: 1px solid var(--bh-border); }
.bh-row:first-child { border-top: none; }
.bh-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--bh-soft); color: var(--bh-red); }
.bh-ico svg { width: 20px; height: 20px; }
.bh-row-main { flex: 1; min-width: 0; }
.bh-row-title { font-weight: 600; font-size: 14.5px; }
.bh-row-sub { font-size: 12.5px; color: var(--bh-muted); margin-top: 2px; }
.bh-row-sub a { color: var(--bh-red); text-decoration: none; }
.bh-row-sub a:hover { text-decoration: underline; }
.bh-row-right { text-align: right; flex: none; }
.bh-amt { font-weight: 700; font-size: 14.5px; }
.bh-amt.neg { color: var(--bh-green); }
.bh-status { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; padding: 3px 9px; border-radius: 999px; text-transform: capitalize; }
.bh-status.paid { background: var(--bh-green-soft); color: var(--bh-green); }
.bh-status.refunded { background: var(--bh-slate-soft); color: var(--bh-muted); }
.bh-status.pending { background: var(--bh-amber-soft); color: var(--bh-amber); }
.bh-status.failed, .bh-status.abandoned { background: var(--bh-slate-soft); color: var(--bh-muted); }

/* --- Clickable payment rows + detail modal (billing-history) -------------- */
.bh-row--pay { cursor: pointer; transition: background .12s ease; outline: none; }
.bh-row--pay:hover { background: var(--bh-soft); }
.bh-row--pay:focus-visible { box-shadow: inset 0 0 0 2px var(--bh-red); }
.bh-row-chev { flex: none; margin-left: 2px; color: var(--bh-muted); display: flex; }
.bh-row-chev svg { width: 18px; height: 18px; }

.bh-modal { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bh-modal[hidden] { display: none; }
.bh-modal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.bh-modal-card { position: relative; width: 100%; max-width: 420px; background: var(--bh-card); border: 1px solid var(--bh-border); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); padding: 26px 24px 22px; max-height: 88vh; overflow-y: auto; }
.bh-modal-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: none; background: var(--bh-soft); color: var(--bh-muted); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bh-modal-x svg { width: 18px; height: 18px; }
.bh-modal-amt { font-size: 28px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#bh-modal-status { margin-top: 8px; }
.bh-modal-title { font-size: 14px; color: var(--bh-muted); margin: 6px 0 16px; }
.bh-modal-rows { margin: 0; border: 1px solid var(--bh-border); border-radius: 14px; overflow: hidden; }
.bh-mrow { display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px; font-size: 13.5px; }
.bh-mrow + .bh-mrow { border-top: 1px solid var(--bh-border); }
.bh-mrow dt { color: var(--bh-muted); flex: none; margin: 0; }
.bh-mrow dd { margin: 0; text-align: right; font-weight: 600; color: var(--bh-text); word-break: break-word; }
.bh-mrow dd a { color: var(--bh-red); text-decoration: none; }
.bh-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; font-weight: 600; }
.bh-modal-note { display: flex; gap: 9px; background: var(--bh-slate-soft); border-radius: 12px; padding: 12px 13px; font-size: 12.5px; color: var(--bh-muted); margin-top: 14px; line-height: 1.5; }
.bh-modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.bh-modal-actions:empty { display: none; }
.bh-mbtn { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 700; text-decoration: none; }
.bh-mbtn svg { width: 17px; height: 17px; }
.bh-mbtn.primary { background: var(--bh-red); color: #fff; }
.bh-mbtn.ghost { background: var(--bh-soft); color: var(--bh-text); border: 1px solid var(--bh-border); }
.bh-modal-help { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; font-size: 13px; color: var(--bh-muted); text-decoration: none; }
.bh-modal-help svg { width: 15px; height: 15px; }

.bh-delta { font-weight: 700; font-size: 14.5px; }
.bh-delta.plus { color: var(--bh-green); }
.bh-delta.minus { color: var(--bh-text); }

/* Empty state */
.bh-empty { background: var(--bh-card); border: 1px dashed var(--bh-border-strong); border-radius: 16px; padding: 40px 24px; text-align: center; }
.bh-empty .ico { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: var(--bh-soft); color: var(--bh-red); }
.bh-empty .ico svg { width: 24px; height: 24px; }
.bh-empty h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.bh-empty p { font-size: 13.5px; color: var(--bh-muted); margin: 0 auto; max-width: 380px; }
.bh-empty .cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 10px 18px; border-radius: 11px; background: var(--bh-red); color: #fff; font-weight: 600; font-size: 13.5px; text-decoration: none; }
.bh-empty .cta svg { width: 16px; height: 16px; }
.bh-empty .cta:hover { background: var(--bh-red-dark); color: #fff; }

/* Footer bits */
.bh-more { display: inline-flex; align-items: center; gap: 7px; margin: 16px auto 0; padding: 10px 18px; border: 1px solid var(--bh-border-strong); border-radius: 11px; background: var(--bh-card); color: var(--bh-text); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.bh-more:hover { border-color: var(--bh-red); color: var(--bh-text); }
.bh-more-wrap { text-align: center; }
.bh-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 30px; color: var(--bh-muted); font-size: 12.5px; }
.bh-secure svg { width: 15px; height: 15px; }
.bh-note { margin: 12px 2px 0; font-size: 12.5px; color: var(--bh-muted); }

@media (max-width: 560px) {
  .bh-section { padding-top: 80px; }
  .bh-hero { padding: 24px 22px; }
  .bh-hero h1 { font-size: 23px; }
  .bh-row { padding: 13px 14px; gap: 11px; }
  .bh-ico { width: 36px; height: 36px; }
}

/* ===========================================================================
   STRUCTURAL BACKFILL — dark theme
   ---------------------------------------------------------------------------
   style.css and this file are ALTERNATIVES, not layers: includes/init.php emits
   whichever one applies (under a system theme it emits both and a
   prefers-color-scheme media query picks). Several component families
   here were nonetheless authored as if this file layered on top of style.css —
   they carried colour only (`border-color` with no `border`, `color` with no
   box model). Every structural property those rules relied on lives solely in
   style.css, so in dark mode these components rendered without layout at all:
   the command palette was not a modal, the crop dialog had no overlay, media
   thumbnails had no size, dashboard search icons left their inputs.

   Each rule below is style.css's structure with this file's existing palette
   merged over it, so the dark colours are unchanged and only the box model is
   restored. Appended at the end deliberately: equal specificity means source
   order decides, and these must win over the partial rules further up.

   The real fix is architectural — split into base.css (structure, always
   loaded) + theme-light/theme-dark.css (colour only, swapped) so this class of
   drift becomes impossible. Until then, keep this section in sync when you
   touch the families below.
   =========================================================================== */

/* ---- conv-crop ---- */
/* ABSENT from mono */
.conv-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  padding: 24px;
}
/* ABSENT from mono */
.conv-crop-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(82vw, 720px);
  max-height: 90vh;
  padding: 16px;
  border-radius: 16px;
  background: var(--color-bg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
/* ABSENT from mono */
.conv-crop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
/* ABSENT from mono */
.conv-crop-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text-muted);
  padding: 0;
}
/* ABSENT from mono */
.conv-crop-close:hover {
  color: var(--color-text);
}
/* ABSENT from mono */
.conv-crop-stage {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  user-select: none;
  touch-action: none;
  align-self: center;
}
/* ABSENT from mono */
.conv-crop-img {
  display: block;
  max-width: 100%;
  /* max() floors the vh unit. In any context where the viewport height resolves
     to 0 — an offscreen/zero-height frame, some headless renderers — a bare 58vh
     collapses the image to nothing, and the cropper then measures a 0px stage.
     The JS no longer divides by that (it falls back to naturalWidth), but a
     zero-height image is still an unusable modal, so hold a px floor. */
  max-height: max(58vh, 320px);
  min-height: 1px;
  -webkit-user-drag: none;
}
/* ABSENT from mono */
.conv-crop-rect {
  position: absolute;
  border: 2px solid var(--color-primary);
  cursor: move;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
}
/* ABSENT from mono */
.conv-crop-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: var(--color-bg);
}
/* ABSENT from mono */
.conv-crop-handle[data-corner="nw"] {
  left: -8px;
  top: -8px;
  cursor: nwse-resize;
}
/* ABSENT from mono */
.conv-crop-handle[data-corner="ne"] {
  right: -8px;
  top: -8px;
  cursor: nesw-resize;
}
/* ABSENT from mono */
.conv-crop-handle[data-corner="sw"] {
  left: -8px;
  bottom: -8px;
  cursor: nesw-resize;
}
/* ABSENT from mono */
.conv-crop-handle[data-corner="se"] {
  right: -8px;
  bottom: -8px;
  cursor: nwse-resize;
}
/* ABSENT from mono */
/* Live shape readout in the cropper — only rendered when a caller passes
   ratioBounds (the curated-vibe upload does; the find composer does not), so it
   is absent rather than empty on surfaces that have no shape constraint. */
.conv-crop-ratio {
  font-family: var(--font-body, 'Lato', sans-serif);
  font-size: 12px;
  color: var(--color-text-muted, #9a9a9a);
  text-align: center;
  min-height: 16px;
}
.conv-crop-ratio.is-out-of-range {
  color: #ff6b6b;
  font-weight: 600;
}

.conv-crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
/* ABSENT from mono */
.conv-crop-cancel {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border, rgba(0,0,0,0.12));
  background: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}
/* ABSENT from mono */
.conv-crop-cancel:hover {
  color: var(--color-text);
}
/* ABSENT from mono */
.conv-crop-apply {
  padding: 8px 24px;
  border-radius: 999px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}


/* ---- conv-media ---- */
/* ABSENT from mono */
.conv-media-strip {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px 4px;
}
/* ABSENT from mono */
.conv-media-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
/* ABSENT from mono */
.conv-media-thumb img {
  width: 100%;
  height: 100%;
  /* contain, not cover. This tray is the first look a shopper gets at the photo
     they just attached, and a centre-crop of a portrait photo reads as "the app
     cut my picture up". Letterbox it against the chip instead — the whole frame
     is visible, and the crop tool beside it is the deliberate way to trim. */
  object-fit: contain;
  background: rgba(255, 255, 255, 0.08);
}
/* missing: border-radius, cursor, font-size, height, line-height, padding, position, right, text-align, top, width */
.conv-media-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  padding: 0;
}
/* ABSENT from mono */
.conv-media-crop {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  padding: 0;
}
/* missing: align-items, border-radius, display, font-family, font-size, gap, padding */
.conv-media-doc {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #1a1a1a;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  color: #e0e0e0;
}
/* missing: font-size */
.conv-media-doc i {
  font-size: 18px;
  color: #e0e0e0;
}
/* ABSENT from mono */
.conv-media-doc-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---- conv-bubble ---- */
/* ABSENT from mono */
.conv-bubble-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* ABSENT from mono */
/* Height-constrained, width-free — so a photo keeps the shape it was taken in.
   These used to be hard squares with object-fit:cover, which centre-cropped
   every attachment: a portrait dress shot lost its hem, a wide shelf shot lost
   both ends, and the sender's own copy of the photo in the transcript was not
   the photo they sent. Mirror of the block in style.css. */
.conv-bubble-image {
  width: auto;
  height: 88px;
  max-width: 132px;
  border-radius: 12px;
  object-fit: contain;
  display: block;
}
/* ABSENT from mono */
/* A single photo is the subject of the message, so give it real room — still
   its own aspect ratio, just a bigger box to fill. */
.conv-bubble-images--single .conv-bubble-image {
  width: auto;
  height: auto;
  max-width: min(220px, 100%);
  max-height: 280px;
}
/* ABSENT from mono */
.conv-bubble-caption {
  margin-top: 8px;
}


/* ---- sinatabu-cmdk ---- */
/* missing: align-items, display, inset, justify-content, padding-left, padding-right, padding-top, position, transition, z-index */
.sinatabu-cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  padding-left: 16px;
  padding-right: 16px;
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  opacity: 0;
  transition: opacity 0.18s ease;
}
/* ABSENT from mono */
.sinatabu-cmdk-overlay.is-open {
  display: flex;
  opacity: 1;
}
/* ABSENT from mono */
body.sinatabu-cmdk-open {
  overflow: hidden;
}
/* missing: border-radius, display, flex-direction, max-height, max-width, overflow, transform, transition, width */
.sinatabu-cmdk-panel {
  width: 100%;
  max-width: 620px;
  background: var(--color-bg-card, #181818);
  border-radius: var(--radius-xl, 22px);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease;
  display: flex;
  flex-direction: column;
  max-height: min(560px, 76vh);
  border: 1px solid var(--color-border, #2b2b2b);
}
/* ABSENT from mono */
.sinatabu-cmdk-overlay.is-open .sinatabu-cmdk-panel {
  transform: translateY(0);
  opacity: 1;
}
/* missing: align-items, display, gap, padding */
.sinatabu-cmdk-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
/* ABSENT from mono */
.sinatabu-cmdk-icon {
  font-size: 18px;
  color: var(--color-text-muted, #8492a6);
  line-height: 1;
}
/* missing: flex, font-family, font-size, padding */
.sinatabu-cmdk-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body, "Lato", sans-serif);
  font-size: var(--fs-md, 17px);
  color: var(--color-text, #f0f0f0);
  outline: none;
  padding: 4px 0;
}
/* missing: border-radius, font-family, font-size, font-weight, padding */
.sinatabu-cmdk-esc {
  font-family: var(--font-body, "Lato", sans-serif);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9a9a9a);
  background: var(--color-bg-soft, #111111);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  font-weight: 600;
  border-color: rgba(255, 255, 255, 0.08);
}
/* ABSENT from mono */
.sinatabu-cmdk-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  min-height: 120px;
}
/* missing: font-family, font-size, font-weight, padding */
.sinatabu-cmdk-section {
  padding: 10px 18px 6px;
  font-family: var(--font-body, "Lato", sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9a9a9a);
}
/* missing: align-items, cursor, display, font-family, font-size, gap, padding, text-align, transition, width */
.sinatabu-cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 18px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--color-text, #f0f0f0);
  font-family: var(--font-body, "Lato", sans-serif);
  font-size: var(--fs-sm, 13px);
  transition: background 0.12s ease;
}
/* ABSENT from mono */
.sinatabu-cmdk-item:focus-visible {
  outline: none;
}
/* missing: font-size, text-align, width */
.sinatabu-cmdk-item .uil {
  font-size: 18px;
  color: var(--color-text-muted, #9a9a9a);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
/* missing: font-size, text-align, width */
.sinatabu-cmdk-item i {
  font-size: 18px;
  color: var(--color-text-muted, #9a9a9a);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
/* ABSENT from mono */
.sinatabu-cmdk-iconslot {
  width: 20px;
  flex-shrink: 0;
}
/* ABSENT from mono */
.sinatabu-cmdk-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* missing: font-size, max-width, overflow, white-space */
.sinatabu-cmdk-hint {
  color: var(--color-text-muted, #9a9a9a);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}
/* missing: font-family, font-size, padding, text-align */
.sinatabu-cmdk-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--color-text-muted, #9a9a9a);
  font-family: var(--font-body, "Lato", sans-serif);
  font-size: var(--fs-sm, 13px);
}
/* missing: display, font-family, font-size, gap, padding */
.sinatabu-cmdk-foot {
  display: flex;
  gap: 18px;
  padding: 10px 18px;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
  background: var(--color-bg-soft, #111111);
  font-family: var(--font-body, "Lato", sans-serif);
  font-size: 11.5px;
  color: var(--color-text-muted, #9a9a9a);
  border-top-color: rgba(255, 255, 255, 0.06);
}
/* missing: border-radius, font-family, font-size, margin-right, padding */
.sinatabu-cmdk-foot kbd {
  font-family: inherit;
  background: var(--color-bg-elevated, #141414);
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10.5px;
  margin-right: 4px;
  color: var(--color-text, #f0f0f0);
  border-color: rgba(255, 255, 255, 0.10);
}

@media (max-width: 575px) {
  /* ABSENT from mono */
  .sinatabu-cmdk-overlay {
    padding-top: 8vh;
  }
  /* ABSENT from mono */
  .sinatabu-cmdk-panel {
    max-height: 84vh;
  }
  /* ABSENT from mono */
  .sinatabu-cmdk-esc {
    display: none;
  }
  /* ABSENT from mono */
  .sinatabu-cmdk-hint {
    display: none;
  }
  /* ABSENT from mono */
  .sinatabu-cmdk-foot {
    font-size: 10.5px;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* ABSENT from mono */
  .sinatabu-cmdk-overlay {
    transition: none;
  }
  /* ABSENT from mono */
  .sinatabu-cmdk-panel {
    transition: none;
  }
}


/* ---- studio-share ---- */
/* missing: border-radius */
.studio-share-modal .modal-content {
  border-radius: 12px;
  border: 1px solid #333;
  background: #1e1e1e;
}
/* missing: padding */
.studio-share-modal .modal-header {
  border-bottom: 1px solid #e9ecef;
  padding: 16px 20px;
  border-bottom-color: #333;
}
/* ABSENT from mono */
.studio-share-modal .modal-body {
  padding: 20px;
}
/* ABSENT from mono */
.studio-share-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* missing: align-items, border-radius, cursor, display, flex, font-size, font-weight, gap, justify-content, padding, text-decoration, transition */
.studio-share-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  background: #2d2d2d;
  color: #e0e0e0;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  flex: 1 1 calc(50% - 6px);
  justify-content: center;
  border-color: #444;
}
/* missing: text-decoration */
.studio-share-btn:hover {
  background: #333;
  border-color: #cc0000;
  color: #cc0000;
  text-decoration: none;
}
/* ABSENT from mono */
.studio-share-btn i {
  font-size: 1.1rem;
}
/* ABSENT from mono */
.studio-share-btn svg {
  font-size: 1.1rem;
}
/* ABSENT from mono */
.studio-share-btn.copied {
  background: #28a745;
  border-color: #28a745;
  color: #ffffff;
}
/* ABSENT from mono */
.studio-share-copy {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
/* missing: border-radius, flex, font-size, padding */
.studio-share-copy input {
  flex: 1;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: #e0e0e0;
  background: #2d2d2d;
  border-color: #444;
}
/* ABSENT from mono */
.studio-share-copy button {
  flex-shrink: 0;
}


/* ---- studio-hours ---- */
/* ABSENT from mono */
.studio-hours-list {
  border-radius: 8px;
  overflow: hidden;
}
/* ABSENT from mono */
.studio-hours-row {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.95rem;
}
/* ABSENT from mono */
.studio-hours-row:last-child {
  border-bottom: none;
}
/* ABSENT from mono */
.studio-hours-day {
  font-weight: 500;
  color: #495057;
  min-width: 100px;
}
/* ABSENT from mono */
.studio-hours-time {
  font-weight: 500;
  color: #212529;
}
/* ABSENT from mono */
.studio-hours-closed {
  opacity: 0.6;
}
/* ABSENT from mono */
.studio-hours-closed .studio-hours-day {
  color: #adb5bd;
}
/* missing: border-radius, padding-left */
.studio-hours-today {
  background: rgba(204, 0, 0, 0.08);
  border-left: 3px solid #cc0000;
  padding-left: 12px;
  border-radius: 4px;
}
/* missing: font-weight */
.studio-hours-today .studio-hours-day {
  color: #cc0000;
  font-weight: 600;
}
/* missing: font-weight */
.studio-hours-today .studio-hours-time {
  font-weight: 600;
  color: #f7f7f7;
}

@media (max-width: 576px) {
  /* ABSENT from mono */
  .studio-hours-row {
    padding: 8px 0;
    font-size: 0.9rem;
  }
}


/* ---- podium ---- */
/* ABSENT from mono */
.podium-welcome-header {
  padding: 0;
}
/* ABSENT from mono */
.podium-welcome-header h4 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}
/* ABSENT from mono */
.podium-welcome-actions .btn {
  font-weight: 600;
}
/* ABSENT from mono */
.podium-status-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* missing: font-size, font-weight, padding */
.podium-pill {
  background: transparent;
  border: 1px solid var(--color-border);
  color: #999;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-color: rgba(255, 255, 255, 0.1);
}
/* ABSENT from mono */
.podium-pill .badge {
  font-size: 10px;
  vertical-align: middle;
}
/* ABSENT from mono */
.podium-search-wrapper {
  width: 200px;
}
/* missing: font-size, left, position, top, transform, z-index */
.podium-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  font-size: 16px;
  z-index: 1;
}
/* missing: font-size, padding-left */
.podium-search-input {
  padding-left: 36px !important;
  font-size: 13px;
  border: 1px solid var(--color-border);
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
/* ABSENT from mono */
.podium-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}
/* ABSENT from mono */
.podium-find-card h6 a {
  transition: color var(--transition-fast);
}
/* ABSENT from mono */
.podium-find-card h6 a:hover {
  color: var(--color-primary) !important;
  text-decoration: none;
}
/* ABSENT from mono */
.podium-find-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
}
/* ABSENT from mono */
.podium-find-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* missing: align-items, display, font-size, font-weight, padding, text-decoration, transition */
.podium-quick-link {
  display: flex;
  align-items: center;
  padding: 10px 0;
  color: #ccc;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: all var(--transition-fast);
  font-size: 14px;
  font-weight: 500;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
/* ABSENT from mono */
.podium-quick-link:last-child {
  border-bottom: none;
}
/* missing: padding-left, text-decoration */
.podium-quick-link:hover {
  color: #cc0000;
  text-decoration: none;
  padding-left: 4px;
}
/* missing: font-size, margin-right, transition */
.podium-quick-link i:first-child {
  font-size: 18px;
  margin-right: 10px;
  color: #888;
  transition: color var(--transition-fast);
}
/* ABSENT from mono */
.podium-quick-link:hover i:first-child {
  color: var(--color-primary);
}

@media (max-width: 576px) {
  /* ABSENT from mono */
  .podium-find-thumb {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 767px) {
  /* ABSENT from mono */
  .podium-search-wrapper {
    width: 100%;
    margin-top: 8px;
  }
}

@media (min-width: 992px) {
  /* ABSENT from mono */
  .podium-sidebar {
    position: sticky;
    top: 80px;
  }
}


/* ---- btn-pill / saved-indicator (formerly behind the dead [data-theme] prefix) ---- */
/* missing: border-radius, padding, position, transition */
.btn-pill-option {
  border-radius: 50px !important;
  padding: 0.5rem 1.25rem !important;
  position: relative;
  transition: all 0.3s ease !important;
  border: 1px solid #cc0000 !important;
  background-color: transparent !important;
  color: #fff !important;
  border-color: #666 !important;
}
/* missing: border-radius, padding, position, transition */
.btn-pill-payment {
  border-radius: 50px !important;
  padding: 0.5rem 1.25rem !important;
  position: relative;
  transition: all 0.3s ease !important;
  border: 1px solid #cc0000 !important;
  background-color: transparent !important;
  color: #fff !important;
  border-color: #666 !important;
}
/* missing: border-radius, padding, position, transition */
.btn-pill-delivery {
  border-radius: 50px !important;
  padding: 0.5rem 1.25rem !important;
  position: relative;
  transition: all 0.3s ease !important;
  border: 1px solid #cc0000 !important;
  background-color: transparent !important;
  color: #fff !important;
  border-color: #666 !important;
}
/* missing: border-radius, padding, position, transition */
.btn-pill-service {
  border-radius: 50px !important;
  padding: 0.5rem 1.25rem !important;
  position: relative;
  transition: all 0.3s ease !important;
  border: 1px solid #cc0000 !important;
  background-color: transparent !important;
  color: #fff !important;
  border-color: #666 !important;
}
/* ABSENT from mono */
.btn-outline-primary.btn-pill-option:hover {
  color: #cc0000 !important;
  background-color: transparent !important;
}
/* ABSENT from mono */
.btn-outline-primary.btn-pill-payment:hover {
  color: #cc0000 !important;
  background-color: transparent !important;
}
/* ABSENT from mono */
.btn-outline-primary.btn-pill-delivery:hover {
  color: #cc0000 !important;
  background-color: transparent !important;
}
/* ABSENT from mono */
.btn-outline-primary.btn-pill-service:hover {
  color: #cc0000 !important;
  background-color: transparent !important;
}
/* ABSENT from mono */
.btn-outline-danger.btn-pill-option:hover {
  color: #dc3545 !important;
  background-color: transparent !important;
}
/* ABSENT from mono */
.btn-outline-warning.btn-pill-option:hover {
  color: #ffc107 !important;
  background-color: transparent !important;
}
/* ABSENT from mono */
.btn-outline-secondary.btn-pill-option:hover {
  color: #6c757d !important;
  background-color: transparent !important;
}

/* missing: display, font-size, margin-top, overflow, transform, transition */
.saved-indicator {
  display: block;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  margin-top: 0.5rem !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s !important;
  transform: translateY(-5px);
  height: 0 !important;
  overflow: hidden;
}
/* missing: transform, transition */
.saved-indicator.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s !important;
  height: auto !important;
}


/* ============================================
   ADMIN — VIBE REVIEW QUEUE (dark)
   Full declaration, not an override: this file is a STANDALONE theme
   (init.php never layers it over style.css), so structure lives here too.
   ============================================ */
.vibe-review-card {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.vibe-review-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.vibe-review-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: #2d2d2d;
  color: #aaa;
}
.vibe-review-tag.held     { background: rgba(247, 144, 9, 0.16);  color: #fdb022; }
.vibe-review-tag.reported { background: rgba(240, 68, 56, 0.16);  color: #fda29b; }
.vibe-review-tag.source,
.vibe-review-tag.status   { background: rgba(125, 171, 248, 0.14); color: #7dabf8; }
.vibe-review-body {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.vibe-review-media {
  flex: 0 0 200px;
  max-width: 200px;
}
.vibe-review-media img {
  width: 100%;
  border-radius: 10px;
  display: block;
  object-fit: cover;
}
.vibe-review-nomedia {
  width: 100%;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #2d2d2d;
  color: #777;
  font-size: 12px;
}
.vibe-review-meta {
  flex: 1 1 260px;
  min-width: 0;
}
.vibe-review-prompt summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
}
.vibe-review-prompt pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11.5px;
  background: #141414;
  color: #ccc;
  border-radius: 8px;
  padding: 10px;
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.vibe-review-blocks {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #333;
}
.vibe-review-blocks table {
  width: 100%;
}
@media (max-width: 575px) {
  .vibe-review-media { flex: 1 1 100%; max-width: 100%; }
}

/* ── Curated vibe upload ───────────────────────────────────────────────────
 *
 * The form is where an admin decides whether an image belongs in a VISUAL feed,
 * so the image is the primary control, not an afterthought behind a native
 * "Choose file / No file chosen". A drop zone that becomes the preview means the
 * picture being judged is the biggest thing on screen; the metadata sits beside
 * it rather than pushing it off the top.
 *
 * Palette comes from the theme's own variables so the two stylesheets differ
 * only where they must.
 */
.cv-panel {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}
.cv-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.cv-toggle-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.cv-toggle-text { flex: 1 1 auto; min-width: 0; }
.cv-toggle-text strong { display: block; font-size: 14.5px; font-weight: 600; }
.cv-toggle-text small  { display: block; font-size: 12.5px; margin-top: 1px; }
.cv-toggle-caret { font-size: 20px; transition: transform .2s ease; }
.cv-toggle[aria-expanded="true"] .cv-toggle-caret { transform: rotate(180deg); }

.cv-form { padding: 4px 18px 18px; }

/* Media beside fields, not above them: a stacked layout pushes every field
   below the fold the moment a preview appears. */
.cv-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 767px) { .cv-grid { grid-template-columns: minmax(0, 1fr); } }

.cv-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Portrait, because that is what the feed wants — the shape of the control
     is itself a hint about the shape of a good tile. */
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  margin: 0;
  transition: border-color .16s ease, background .16s ease;
}
/* The input stays in the DOM (it carries the file for FormData) but never
   renders — the label IS the control. */
.cv-file {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cv-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-drop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
}
.cv-drop-empty i { font-size: 30px; opacity: .5; }
.cv-drop-title { font-size: 13px; font-weight: 600; }
.cv-drop-hint  { font-size: 11.5px; }

.cv-media-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cv-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
}
.cv-crop-state { font-size: 11.5px; }
.cv-note { font-size: 11.5px; line-height: 1.45; margin: 10px 0 0; }

.cv-field { margin-bottom: 14px; }
.cv-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 5px;
}
.cv-opt { font-weight: 400; font-size: 11.5px; }
.cv-field input[type="text"],
.cv-field select,
.cv-field textarea {
  width: 100%;
  font-size: 13.5px;
  font-family: inherit;
  padding: 9px 11px;
  border-radius: 9px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cv-field textarea { resize: vertical; min-height: 58px; }
.cv-field small { display: block; font-size: 11.5px; margin-top: 4px; line-height: 1.4; }

.cv-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 575px) { .cv-field-row { grid-template-columns: 1fr; } }

.cv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 14px;
}
.cv-draft-note {
  flex: 1 1 300px;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}
.cv-draft-note i { margin-right: 4px; }
.cv-submit-wrap { display: flex; align-items: center; gap: 10px; }
.cv-status { font-size: 12px; }
.cv-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 20px;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, opacity .15s ease;
}
.cv-submit:disabled { opacity: .55; cursor: default; }

.cv-panel { background: #1e1e1e; border: 1px solid #333; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.cv-toggle { background: #242424; color: #e8e8e8; }
.cv-toggle:hover { background: #2a2a2a; }
.cv-toggle-icon { background: rgba(255,77,77,.14); color: #ff6b6b; }
.cv-toggle-text small { color: #9a9a9a; }
.cv-toggle-caret { color: #9a9a9a; }
.cv-drop { border: 2px dashed rgba(255,255,255,.16); background: #191919; }
.cv-drop:hover, .cv-drop.is-dragover { border-color: #ff6b6b; background: rgba(255,77,77,.05); }
.cv-drop-title { color: #e0e0e0; }
.cv-drop-hint, .cv-note, .cv-crop-state { color: #9a9a9a; }
.cv-mini { background: #2a2a2a; border: 1px solid #3a3a3a; color: #ddd; }
.cv-mini:hover { background: #333; }
.cv-field label { color: #e0e0e0; }
.cv-opt, .cv-field small { color: #9a9a9a; }
.cv-field input[type="text"], .cv-field select, .cv-field textarea {
  background: #161616; border: 1px solid #3a3a3a; color: #e8e8e8;
}
.cv-field input[type="text"]:focus, .cv-field select:focus, .cv-field textarea:focus {
  outline: 0; border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,77,77,.15);
}
.cv-field input::placeholder, .cv-field textarea::placeholder { color: #6a6a6a; }
.cv-footer { border-top: 1px solid #333; }
.cv-draft-note { color: #9a9a9a; }
.cv-submit { background: #cc0000; color: #fff; }
.cv-submit:hover:not(:disabled) { background: #e01414; }

/* [hidden] is only `display: none` in the UA sheet, so any class that sets a
   display value beats it. Both of these are toggled by the hidden attribute in
   js/admin-vibe-review.js, and without this the Crop/Replace row and an empty
   <img> render before a file has been chosen. */
.cv-media-actions[hidden],
.cv-drop-empty[hidden],
.cv-preview[hidden] { display: none; }

/* ── Review queue cards (redesign) ─────────────────────────────────────────
 *
 * Appended after the original .vibe-review-* block, so these win on source
 * order. The class names and the data-vibe-id / #vibe-notes-<id> hooks are
 * unchanged — js/admin-vibe-review.js counts .vibe-review-card to decide when
 * the queue is empty, and app.js delegates the verdict buttons.
 *
 * The moderator's question is "should this picture be public", so the picture is
 * large and the three facts that decide it are labelled cells rather than a
 * pipe-separated run. Matches is called out because it is the one that
 * determines whether approving will actually publish anything.
 */
.vibe-review-card {
  border-radius: 14px;
  padding: 0;
  margin-bottom: 16px;
  overflow: hidden;
  transition: opacity .2s ease, transform .3s ease;
}
.vr-main { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; padding: 16px; }
@media (max-width: 575px) { .vr-main { grid-template-columns: 1fr; } }

.vr-media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
}
.vr-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vr-media-badge {
  position: absolute; right: 7px; bottom: 7px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; background: rgba(0,0,0,.6); color: #fff;
}
.vr-nomedia {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; font-size: 11.5px; text-align: center; padding: 10px;
}
.vr-nomedia i { font-size: 22px; opacity: .5; }

.vr-detail { min-width: 0; }
.vr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.vr-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
.vr-tag i { font-size: 12px; }

.vr-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.vr-caption {
  font-size: 12.5px; line-height: 1.5; margin: 0 0 11px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.vr-facts { display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 11px; }
.vr-facts dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin: 0 0 2px;
}
.vr-facts dd { font-size: 13px; font-weight: 600; margin: 0; }
.vr-facts dd small { font-size: 11px; font-weight: 400; margin-left: 3px; }

.vr-prompt { font-size: 12px; }
.vr-prompt summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; padding: 4px 0;
}
.vr-prompt pre {
  margin: 6px 0 0; padding: 10px 12px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.5; white-space: pre-wrap;
  max-height: 190px; overflow: auto;
}

.vr-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px;
}
.vr-notes {
  flex: 1 1 200px; min-width: 0;
  font-size: 12.5px; font-family: inherit;
  padding: 8px 11px; border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vr-verdicts { display: flex; gap: 7px; flex-wrap: wrap; }
.vr-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  padding: 8px 15px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.vr-btn i { font-size: 14px; }

.vibe-review-card { background: #1e1e1e; border: 1px solid #333; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.vr-media, .vr-nomedia { background: #161616; }
.vr-nomedia { color: #8a8a8a; }
.vr-tag.held     { background: rgba(247,144,9,.16); color: #fdb022; }
.vr-tag.reported { background: rgba(240,68,56,.16); color: #ff8079; }
.vr-tag.neutral  { background: #2a2a2a; color: #b0b0b0; }
.vr-title { color: #ededed; }
.vr-caption { color: #9a9a9a; }
.vr-facts dt { color: #7a7a7a; }
.vr-facts dd { color: #e0e0e0; }
.vr-facts dd.is-ok  { color: #47cd89; }
.vr-facts dd.is-low { color: #fdb022; }
.vr-facts dd small  { color: #7a7a7a; }
.vr-prompt summary { color: #a8a8a8; }
.vr-prompt pre { background: #141414; color: #c8c8c8; }
.vr-actions { background: #242424; border-top: 1px solid #333; }
.vr-notes { background: #161616; border: 1px solid #3a3a3a; color: #e8e8e8; }
.vr-notes::placeholder { color: #6a6a6a; }
.vr-notes:focus { outline: 0; border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,77,77,.15); }
.vr-btn.approve { background: #067647; color: #fff; }
.vr-btn.approve:hover { background: #078a52; }
.vr-btn.hide { background: #2a2a2a; border-color: #3a3a3a; color: #c0c0c0; }
.vr-btn.hide:hover { background: #333; }
.vr-btn.reject { background: rgba(240,68,56,.12); border-color: rgba(240,68,56,.32); color: #ff8079; }
.vr-btn.reject:hover { background: rgba(240,68,56,.2); }

/* ── Blocked-before-generation log ─────────────────────────────────────────
 *
 * A scan list, not a data table. The reader is looking for one pattern — a
 * legitimate trade repeatedly refused by our own deny-list — so the KIND leads
 * each row and the tag sits next to it, since the tag is the thing that would be
 * edited. Category and time are context and recede.
 *
 * Deny-list rows are tinted differently from classifier rows on purpose: only
 * the former are ours to change.
 */
.vb-panel { border-radius: 14px; overflow: hidden; margin-top: 26px; }
.vb-head { padding: 15px 18px 13px; }
.vb-head h5 { font-size: 14.5px; font-weight: 600; margin: 0 0 4px; }
.vb-head p  { font-size: 12px; line-height: 1.55; margin: 0; }
.vb-head code { font-size: 11.5px; padding: 1px 5px; border-radius: 4px; }

.vb-list { list-style: none; margin: 0; padding: 0; }
.vb-row {
  display: grid;
  grid-template-columns: 86px minmax(90px, 170px) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  font-size: 12.5px;
}
@media (max-width: 767px) {
  .vb-row { grid-template-columns: 86px minmax(0, 1fr); row-gap: 4px; }
  .vb-cat, .vb-when { grid-column: 2; }
}
.vb-kind {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-align: center; padding: 4px 0; border-radius: 5px;
}
.vb-tag { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-cat  { font-size: 11.5px; white-space: nowrap; }
.vb-when { font-size: 11px; white-space: nowrap; }

.vb-panel { background: #1e1e1e; border: 1px solid #333; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.vb-head { border-bottom: 1px solid #333; }
.vb-head h5 { color: #ededed; }
.vb-head p  { color: #9a9a9a; }
.vb-head code { background: #2a2a2a; color: #fdb022; }
.vb-row + .vb-row { border-top: 1px solid #2a2a2a; }
.vb-row:hover { background: #242424; }
.vb-kind.deny    { background: rgba(240,68,56,.16); color: #ff8079; }
.vb-kind.flagged { background: #2a2a2a; color: #b0b0b0; }
.vb-kind.other   { background: #2a2a2a; color: #7a7a7a; }
.vb-tag { color: #e8e8e8; }
.vb-subject { color: #9a9a9a; }
.vb-cat, .vb-when { color: #7a7a7a; }

/* Five stat tiles. Bootstrap 4's 12-column grid has no clean fifth, so the row
   is flexed and each tile takes a fifth of the width, wrapping to a half on
   tablet and full width on phones. */
.vr-stat-col { flex: 0 0 20%; max-width: 20%; padding-right: 15px; padding-left: 15px; padding-bottom: 1.5rem; }
@media (max-width: 991px) { .vr-stat-col { flex: 0 0 50%; max-width: 50%; } }
@media (max-width: 575px) { .vr-stat-col { flex: 0 0 100%; max-width: 100%; } }
/* height:100% equalises tile heights within a wrapped row, but it makes the
   card's own margin-bottom escape past the column box — so wrapped rows (2-up
   on tablet, stacked on phone) rendered flush against each other. The gutter
   moves to the column's padding-bottom above; the card's margin is zeroed here
   so it can't double up or leak. */
.vr-stat-col .stats-card { height: 100%; margin-bottom: 0; }
.vr-stat-col .stats-card p small { font-size: 11px; opacity: .8; }

/* Recent-uploads block sits inside .cv-panel, which has no padding of its own —
   only .cv-form does. Without this the heading renders flush against the panel
   border. */
.cv-recent { padding: 16px 18px 18px; }
.cv-recent-head { font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.cv-recent .table { margin-bottom: 0; }
.cv-recent .table td { vertical-align: middle; border-top-width: 1px; }
.cv-recent { border-top: 1px solid #333; }
.cv-recent-head { color: #e0e0e0; }

/* ══════════════════════════════════════════════════════════════════════════
   VIBES — masonry inspiration feed, boards, and the save-to-board picker
   (vibes.php, vibe.php, boards.php, board.php, js/vibe-board-picker.js).

   Formerly css/vibes.css. Like every other section, this block exists in BOTH
   style.css and style-monochrome.css: structure is identical, colours are
   theme-tuned. Any change here must be mirrored into the other file.
   ═══════════════════════════════════════════════════════════════════════ */

/* The rail used to be a 190px column beside the grid. It is now a horizontal
   pill scroller ABOVE it: this page's whole job is showing images, and a
   permanent side column spent ~190px of every viewport on a list of words —
   often a full extra tile column on desktop, and on mobile it pushed the grid
   into two cramped columns. */
.vibes-shell {
    display: block;
}

/* ── Category rail ─────────────────────────────────────────────────────── */
.vibes-rail {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    /* Edge-to-edge scroll on mobile without the pills touching the viewport. */
    padding: 2px 2px 16px;
    margin: 0 0 4px;
    scrollbar-width: none;         /* the pills are the affordance */
    -webkit-overflow-scrolling: touch;
}
.vibes-rail::-webkit-scrollbar { display: none; }

/* Heading is redundant once the pills read as a filter row. */
.vibes-rail-heading { display: none; }

.vibes-rail a {
    flex: 0 0 auto;
    display: inline-block;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--color-bg-soft, #111111);
    border: 1px solid var(--color-border, #2b2b2b);
    color: var(--color-text-muted, #9a9a9a);
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.vibes-rail a:hover {
    color: var(--color-text, #f0f0f0);
    border-color: var(--color-border-strong, var(--color-text-muted, #9a9a9a));
}
.vibes-rail a.active {
    background: var(--color-primary, #e85454);
    border-color: var(--color-primary, #e85454);
    color: #fff;
}
.vibes-rail a:focus-visible {
    outline: 2px solid var(--color-primary, #e85454);
    outline-offset: 2px;
}

.vibes-grid {
    flex: 1 1 auto;
    min-width: 0;
    column-count: 5;
    column-gap: 16px;
}
@media (max-width: 1399px) { .vibes-grid { column-count: 4; } }
@media (max-width: 1199px) { .vibes-grid { column-count: 3; } }
@media (max-width: 767px)  { .vibes-grid { column-count: 2; column-gap: 11px; } }

/* No card. The white panel + shadow made each tile read as a row in a
   directory; dropping it lets the images sit on the page background and BE the
   page. The radius moves to the media element so the image keeps its shape. */
.vibe-tile {
    break-inside: avoid;
    page-break-inside: avoid;   /* older Firefox */
    margin-bottom: 18px;
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
@media (max-width: 767px) { .vibe-tile { margin-bottom: 11px; } }

.vibe-tile:hover { transform: translateY(-3px); }
.vibe-tile:hover .vibe-tile-media {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
}
.vibe-tile:focus-visible {
    outline: 2.5px solid var(--color-primary, #e85454);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .vibe-tile, .vibe-tile:hover { transition: none; transform: none; }
}

/*
 * The image box is reserved from the server-supplied aspect ratio BEFORE the
 * image loads, via an inline aspect-ratio on .vibe-tile-media. Without it every
 * tile would collapse to zero height and the column heights would thrash as
 * images arrive — the single most visible failure mode in a masonry feed, and
 * the reason vibes.width/height exist at all.
 *
 * dominant_hex fills that reserved box, so the page looks composed while
 * loading rather than like a grid of grey holes.
 */
.vibe-tile-media {
    display: block;
    width: 100%;
    background: #1e1e1e;
    aspect-ratio: 1 / 1;         /* overridden inline per tile */
    position: relative;
    /* The tile no longer clips, so the image does its own rounding. */
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .22s ease;
}
.vibe-tile-media img,
.vibe-tile-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Video tiles.
 *
 * The poster is painted by the element itself (poster=""), so the box looks
 * identical to an image tile until the clip is scrolled into view and starts.
 * Nothing here reserves space — .vibe-tile-media already owns the aspect ratio,
 * for stills and clips alike.
 */
.vibe-media-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(12, 12, 14, .62);
    color: #fff;
    font-size: 14px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}
/*
 * The badge stays visible while playing rather than fading out. It is not a
 * play BUTTON — the tile is a link and tapping it opens the detail page — so
 * it reads as "this tile is a clip", which is true whether or not it happens
 * to be moving right now. Hiding it on play would make a muted autoplaying
 * clip indistinguishable from a still that simply moved.
 */

/*
 * display:block is load-bearing, not tidiness. These are <span>s (the tile is
 * an <a>, so its children must be phrasing content), and vertical padding on
 * an INLINE box paints without reserving any height. The tile clips with
 * overflow:hidden, so the caption block was being cut off at the bottom radius.
 *
 * The body holds only the "N shops can source this" line now — the tile title
 * was dropped from every surface (see html/vibes.php for why), so .vibe-tile-title
 * and .vibe-detail-title went with it.
 */
.vibe-tile-body { display: block; padding: 8px 2px 0; }
.vibe-tile-meta {
    display: block;   /* same inline-box reason as .vibe-tile-body */
    font-size: 11px;
    color: var(--color-text-muted, #9a9a9a);
    margin: 3px 0 0;
}

/* AI disclosure chip. Always rendered when ai_model is set — this is a
   compliance surface, not decoration, so it is never conditional on hover or
   viewport. */
.vibe-ai-chip {
    position: absolute;
    left: 8px;
    bottom: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    background: rgba(12, 12, 14, .74);
    color: #fff;
    padding: 3px 7px;
    border-radius: 5px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.vibe-save-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    background: var(--color-primary, #e85454);
    color: #fff;
    /* A heart icon now, not the word "Save" — a fixed circle, sized for the
       icon and a comfortable touch target. */
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(232, 84, 84, .3);
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .18s ease, transform .18s ease;
    cursor: pointer;
}
/* The button now lives in .vibe-tile-wrap as a sibling of the tile <a> (a
   <button> inside an <a> is invalid HTML5), so the hover reveal keys off the
   wrap rather than the anchor. */
.vibe-tile-wrap:hover .vibe-save-btn,
.vibe-save-btn:focus-visible { opacity: 1; transform: translateY(0); }
/* Touch devices get no hover, so the control must be permanently visible or it
   is unreachable. */
@media (hover: none) {
    .vibe-save-btn { opacity: 1; transform: none; }
}
.vibe-save-btn.is-saved { background: #3a3a3a; box-shadow: none; }

/* ── Detail page ───────────────────────────────────────────────────────── */
.vibe-detail-media {
    border-radius: 18px;
    overflow: hidden;
    background: #1e1e1e;
    position: relative;
}
.vibe-detail-media img { display: block; width: 100%; height: auto; }

/* Section heading + the "others" explainer. Sized up from label-chrome to
   readable copy — these introduce the list, they don't decorate it. */
.vibe-matches-heading {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #9a9a9a);
    margin: 30px 0 10px;
}
.vibe-others-note {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted, #9a9a9a);
    margin: -2px 0 12px;
}
/* Theme the inline link — without this it rendered browser-default blue, the
   only blue text on the page. */
.vibe-others-note a {
    color: var(--color-primary, #e85454);
    font-weight: 600;
    text-decoration: none;
}
.vibe-others-note a:hover,
.vibe-others-note a:focus {
    color: var(--color-primary, #e85454);
    text-decoration: underline;
}

/* Each match is a card, matching the panel treatment the rest of the site
   uses (board picker, deal-room lists) — not a divider-separated directory
   row. Colours read from the theme variables so both theme variants work. */
.vibe-match-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--color-bg-card, #181818);
    border: 1px solid var(--color-border, #2b2b2b);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vibe-match-row:last-child { margin-bottom: 0; }
/* The global a:hover underline (style.css / style-monochrome.css) outranks the
   base rule above on specificity, so hover/focus must re-assert none — the name
   turning red is the hover affordance here, not an underline across the card. */
.vibe-match-row:hover,
.vibe-match-row:focus { text-decoration: none; }
.vibe-match-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    border-color: var(--color-border-strong, var(--color-text-muted, #9a9a9a));
}
.vibe-match-row:hover .vibe-match-name { color: var(--color-primary, #e85454); }
.vibe-match-row:focus-visible {
    outline: 2px solid var(--color-primary, #e85454);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .vibe-match-row, .vibe-match-row:hover { transition: none; transform: none; }
}

.vibe-match-avatar {
    width: 46px; height: 46px;
    border-radius: 12px;
    object-fit: cover;
    background: #1e1e1e;
    flex: 0 0 auto;
}
.vibe-match-avatar.is-ps { border-radius: 50%; }

.vibe-match-name {
    font-size: 14px; font-weight: 700;
    color: var(--color-text, #f0f0f0);
    display: flex; align-items: center; gap: 5px;
    transition: color .15s ease;
}
.vibe-match-sub { font-size: 12px; color: var(--color-text-muted, #9a9a9a); margin-top: 1px; }

/*
 * Match bands are qualitative, never a percentage. The score behind them blends
 * IDF tag overlap with embedding cosine; "87% match" would claim a precision it
 * does not have, and one confidently wrong 87% costs more trust than ten honest
 * "Worth asking"s.
 */
.vibe-band {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.vibe-band--top          { background: rgba(232, 84, 84, .16); color: #ff8079; }
.vibe-band--likely       { background: rgba(78, 207, 197, .16); color: #4ecfc5; }
.vibe-band--worth_asking { background: #2a2a2a; color: #9a9a9a; }

/*
 * "Can supply" — the seller-ASSERTED chip, distinct from the matcher's bands.
 * Green is deliberately outside the band palette (red/teal/grey) and the
 * boosted blue: it is a different KIND of claim (the seller's own, not an
 * algorithm's, not a payment's) and must never read as a fourth band.
 */
.vibe-band--supply { background: rgba(111, 211, 146, .16); color: #6fd392; }

/* Supplier rows carry a real Ask <button>, so the row is a <div> and this
   inner link covers avatar + name — same flex geometry the <a> row had. */
.vibe-supplier-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.vibe-supplier-link:hover,
.vibe-supplier-link:focus { text-decoration: none; }
.vibe-supplier-link:hover .vibe-match-name { color: var(--color-primary, #e85454); }
.vibe-supplier-ask { flex: 0 0 auto; margin-left: auto; }
/* The Ask button owns the auto margin, so the chip must not also claim it. */
.vibe-supplier-ask + .vibe-band { margin-left: 6px; }

/* Feed tile: the seller-asserted line under the matcher's "N shops can
   source this". Same meta type ramp, supply green so the two claims scan
   as different kinds at a glance. */
.vibe-tile-supply { color: #6fd392; }

/* Seller-side declare control on the detail page. */
.vibe-supply-declare .vibe-supply-btn { margin-right: 6px; margin-bottom: 4px; }

/*
 * Boosted rows — paid placement, disclosed.
 *
 * A boost lifts a shop's RANK; since the band is now computed from the organic
 * score (VibeMatcher::computeAndStore), it can no longer lift the match-strength
 * claim. This is the other half of that: the shopper is told which rows were
 * paid for rather than left to wonder why the ordering looks odd.
 *
 * Blue is deliberately outside the band palette (red/teal/grey) so it never
 * reads as a fourth, better band.
 *
 * The word "Boosted" is not optional decoration. Colour alone is not a
 * disclosure — it fails WCAG 1.4.1, it is invisible to a screen reader, and a
 * shopper has no way to learn what blue means. The border draws the eye; the
 * label is what actually discloses.
 */
.vibe-match-row--boosted {
    /* The card already has a border; the boosted edge just thickens and
       recolours the left side rather than the old negative-margin gutter
       hack, which the card's own padding has made unnecessary. */
    border-left: 3px solid var(--color-boosted, #60a5fa);
    padding-left: 12px;
}
.vibe-boosted-tag {
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
    flex: 0 0 auto;
    background: rgba(96, 165, 250, .16);
    color: var(--color-boosted, #60a5fa);
    margin-left: auto;
}
/* When a Boosted tag is present it owns the auto margin, so the band must not
   also claim it — otherwise they push apart to opposite ends of the row. */
.vibe-boosted-tag + .vibe-band { margin-left: 6px; }

/* ── Empty / loading ───────────────────────────────────────────────────── */
.vibes-sentinel { height: 1px; }
.vibes-loading {
    text-align: center;
    padding: 30px 0;
    color: var(--color-text-muted, #9a9a9a);
    font-size: 13px;
}
.vibes-empty { text-align: center; padding: 70px 20px; color: var(--color-text-muted, #9a9a9a); }

/* Skeleton tiles for the append-on-scroll state. Page-shaped, and only ever
   shown for loading-more — the first page is server-rendered, so an initial
   skeleton would be a flash of nothing replacing real content. */
.vibe-skel {
    break-inside: avoid;
    margin-bottom: 16px;
    border-radius: 16px;
    background: linear-gradient(100deg, #161616 30%, #202020 50%, #161616 70%);
    background-size: 220% 100%;
    animation: vibeShimmer 1.3s linear infinite;
}
@keyframes vibeShimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .vibe-skel { animation: none; } }

@media (max-width: 991px) {
    .vibes-shell { display: block; }
    .vibes-rail {
        position: static;
        max-height: none;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 12px;
        margin-bottom: 16px;
        flex: none;
    }
    .vibes-rail-heading { display: none; }
    .vibes-rail a {
        white-space: nowrap;
        border: 1px solid #2b2b2b;
        border-radius: 999px;
        padding: 6px 14px;
    }
}

/* ── Matched shops on the tile ─────────────────────────────────────────────
 *
 * The line that makes this feed different from every other inspiration feed:
 * the shopper is looking at a beautiful thing AND at who can actually get it.
 * "7 shops" as grey text is a fact; three faces are a reason to tap.
 *
 * Avatars are decorative — the count beside them carries the meaning, so they
 * are aria-hidden and the row reads as plain text to a screen reader.
 */
.vibe-tile-shops {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 5px 0 0;
}
.vibe-shop-faces {
    display: flex;
    flex: 0 0 auto;
}
.vibe-shop-face {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    /* Ring is the PAGE colour, not white — the tile sits on the page now, and a
       white ring would draw a halo on any non-white theme. */
    border: 1.5px solid var(--color-bg, #0a0a0a);
    background: var(--color-bg-soft, #111111);
    display: block;
}
.vibe-shop-face + .vibe-shop-face { margin-left: -6px; }

/* Fallback when a shop has no picture: its initial, on a stable tint. */
.vibe-shop-face--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: var(--color-text-muted, #9a9a9a);
    text-transform: uppercase;
    line-height: 1;
}

/* ── Overlay tiles ─────────────────────────────────────────────────────────
 *
 * Opt-in per tile (PHP adds the class for dark, high-contrast images). The
 * caption sits ON the image instead of under it, which suits a photograph with
 * its own dark region and saves the vertical space a caption row costs.
 *
 * The scrim is a flat rgba block rather than a gradient — gradients are banned
 * elsewhere in this codebase for streaming/paint reasons and there is no reason
 * to make an exception for one tile variant.
 */
.vibe-tile--overlay .vibe-tile-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 11px 11px;
    background: rgba(18, 20, 28, .55);
    border-radius: 0 0 14px 14px;
}
.vibe-tile--overlay .vibe-tile-meta,
.vibe-tile--overlay .vibe-tile-shops { color: rgba(255, 255, 255, .84); }
.vibe-tile--overlay .vibe-shop-face { border-color: rgba(255, 255, 255, .5); }

/* ══════════════════════════════════════════════════════════════════════════
   BOARDS
   ══════════════════════════════════════════════════════════════════════════

   The wall (boards.php) and one board (board.php).

   Same philosophy as the feed above: no card chrome. A board is described by
   what is on it, so the mosaic IS the card and the name is a caption under it.
   Wrapping that in a white panel would turn a visual wall into a directory
   listing — the exact thing dropping .vibe-tile's panel fixed.
   ═══════════════════════════════════════════════════════════════════════ */

.board-wall {
    display: grid;
    /* auto-fill, not auto-fit: with auto-fit a single board stretches its
       mosaic across the whole viewport, which looks like a bug rather than
       like one board. */
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 26px 20px;
}
@media (max-width: 767px) {
    .board-wall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 12px; }
}

.board-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease;
}
.board-card:hover { transform: translateY(-3px); }
.board-card:focus-visible {
    outline: 2px solid var(--color-primary, #e85454);
    outline-offset: 4px;
    border-radius: 16px;
}

/* ── The mosaic ─────────────────────────────────────────────────────────
   A fixed 4:3 box tiled by a grid whose shape comes from how many covers
   exist. Fixed ratio (rather than letting the images set it) is what keeps
   the wall on a clean baseline — a masonry of mosaics would read as noise. */
.board-cover {
    display: grid;
    aspect-ratio: 4 / 3;
    gap: 3px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-bg-soft, #111111);
    transition: box-shadow .18s ease;
}
.board-card:hover .board-cover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}

.board-cover--solo { grid-template-columns: 1fr; }
.board-cover--duo  { grid-template-columns: 1fr 1fr; }
/* Big cell left, two stacked right — the shape that reads as "a few things"
   without implying a missing fourth. */
.board-cover--trio {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.board-cover--trio .board-cover-cell:first-child { grid-row: span 2; }
.board-cover--quad {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.board-cover-cell {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}
.board-cover-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.board-card:hover .board-cover-cell img { transform: scale(1.045); }

.board-cover-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #9a9a9a);
    font-size: 30px;
    opacity: .4;
}

/* ── Caption ───────────────────────────────────────────────────────────── */
.board-card-meta {
    display: block;
    padding: 11px 3px 0;
}
.board-card-name {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--color-text, #f0f0f0);
    /* One line: board names are user-authored and a two-line name would
       break the wall's baseline. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.board-card-name .uil {
    font-size: 12.5px;
    color: var(--color-text-muted, #9a9a9a);
    vertical-align: baseline;
    margin-left: 2px;
}
.board-card-count {
    display: block;
    font-size: 12.5px;
    color: var(--color-text-muted, #9a9a9a);
    margin-top: 1px;
}

/* ── Board header ──────────────────────────────────────────────────────── */
.board-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}
.board-back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--color-bg-soft, #111111);
    border: 1px solid var(--color-border, #2b2b2b);
    color: var(--color-text, #f0f0f0);
    font-size: 19px;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease;
}
.board-back:hover {
    border-color: var(--color-border-strong, var(--color-text-muted, #9a9a9a));
    color: var(--color-text, #f0f0f0);
}

.board-head-text { flex: 1 1 260px; min-width: 0; }

.board-title {
    font-size: 30px;
    letter-spacing: -.02em;
    margin: 0 0 2px;
    line-height: 1.2;
    word-break: break-word;
}
/* The rename input inherits the title's type so the field reads as the
   heading being edited rather than as a form appearing under it. */
.board-title-input {
    font: inherit;
    letter-spacing: inherit;
    width: 100%;
    max-width: 420px;
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid var(--color-primary, #e85454);
    background: #1a1a1a;
    color: var(--color-text, #f0f0f0);
}
.board-title-input:focus { outline: none; }

.board-sub {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--color-text-muted, #9a9a9a);
    margin: 0;
}
.board-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--color-bg-soft, #111111);
    border: 1px solid var(--color-border, #2b2b2b);
}

.board-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-left: auto;
}
.board-act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--color-bg-soft, #111111);
    border: 1px solid var(--color-border, #2b2b2b);
    color: var(--color-text, #f0f0f0);
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease;
}
.board-act:hover:not(:disabled) {
    border-color: var(--color-border-strong, var(--color-text-muted, #9a9a9a));
}
.board-act:disabled { opacity: .55; cursor: default; }
.board-act--danger { color: var(--color-primary, #e85454); }
.board-act--danger:hover { border-color: var(--color-primary, #e85454); }
.board-act:focus-visible {
    outline: 2px solid var(--color-primary, #e85454);
    outline-offset: 2px;
}

/* ── Remove-from-board ─────────────────────────────────────────────────── */
.vibe-tile-wrap {
    position: relative;
    break-inside: avoid;
    margin-bottom: 16px;
    transition: opacity .18s ease;
}
@media (max-width: 767px) { .vibe-tile-wrap { margin-bottom: 11px; } }
.vibe-tile-wrap .vibe-tile { margin-bottom: 0; }
.vibe-tile-wrap.is-removing { opacity: .4; pointer-events: none; }

.board-remove {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(18, 20, 28, .62);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    /* Hidden until intent is shown. A permanent × on every tile turns a
       scrapbook into a management console. */
    opacity: 0;
    transition: opacity .16s ease, background .16s ease;
}
.vibe-tile-wrap:hover .board-remove { opacity: 1; }
.board-remove:hover { background: var(--color-primary, #e85454); }
/* Touch has no hover, so the affordance must be permanently visible there —
   otherwise remove is simply unreachable on a phone. */
@media (hover: none) {
    .board-remove { opacity: 1; }
}
.board-remove:focus-visible {
    opacity: 1;
    outline: 2px solid #fff;
    outline-offset: -3px;
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.board-empty {
    text-align: center;
    padding: 54px 20px 64px;
    max-width: 420px;
    margin: 0 auto;
}
.board-empty h2 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 7px;
}
.board-empty p {
    font-size: 14px;
    color: var(--color-text-muted, #9a9a9a);
    margin: 0 0 20px;
}
/* Four blocks in the mosaic's own shape — the empty state shows the thing
   that will fill it rather than an unrelated icon. */
.board-empty-art {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 96px;
    aspect-ratio: 4 / 3;
    margin: 0 auto 20px;
    border-radius: 12px;
    overflow: hidden;
    opacity: .5;
}
.board-empty-art span {
    background: var(--color-bg-soft, #111111);
    border: 1px solid var(--color-border, #2b2b2b);
}

/* ══════════════════════════════════════════════════════════════════════════
   SAVE-TO-BOARD PICKER  (js/vibe-board-picker.js)
   ═══════════════════════════════════════════════════════════════════════ */

/* Not a Bootstrap modal: those manage their own backdrop, focus and scroll
   lock through the bundle, and this has to open from a delegated click on a
   feed tile without a data-toggle trigger in the markup. */
.vbp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .62);
}
/* [hidden] loses to `display:flex` on specificity — same collision that has
   bitten the admin panels. State it explicitly. */
.vbp-overlay[hidden] { display: none; }
body.vbp-open { overflow: hidden; }

.vbp-panel {
    width: 100%;
    max-width: 400px;
    max-height: min(78vh, 620px);
    display: flex;
    flex-direction: column;
    background: var(--color-bg-surface, #1e1e1e);
    border: 1px solid var(--color-border, #2b2b2b);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
    overflow: hidden;
}

.vbp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 17px 18px 0;
}
.vbp-head h2 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
}
.vbp-x {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--color-text-muted, #9a9a9a);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.vbp-x:hover { color: var(--color-text, #f0f0f0); }

.vbp-sub {
    font-size: 13px;
    color: var(--color-text-muted, #9a9a9a);
    margin: 3px 18px 12px;
}

/* The scrolling region. The confirm below it is docked rather than trailing
   the list — a board list is unbounded, and the mobile report sheet already
   shipped its CTA below the fold this exact way. */
.vbp-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 12px;
    min-height: 76px;
}

.vbp-loading {
    font-size: 13px;
    color: var(--color-text-muted, #9a9a9a);
    text-align: center;
    padding: 22px 10px;
}

.vbp-row {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 8px;
    margin-bottom: 4px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease;
}
.vbp-row:hover { background: var(--color-bg-soft, #111111); }
.vbp-row.is-sel {
    border-color: var(--color-primary, #e85454);
    background: var(--color-primary-soft, rgba(232, 84, 84, .14));
}
.vbp-row:focus-visible {
    outline: 2px solid var(--color-primary, #e85454);
    outline-offset: 1px;
}

.vbp-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--color-bg-soft, #111111);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted, #9a9a9a);
}
.vbp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vbp-rowtext { flex: 1 1 auto; min-width: 0; }
.vbp-rowname {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text, #f0f0f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vbp-rowname .uil { font-size: 11.5px; color: var(--color-text-muted, #9a9a9a); }
.vbp-rowcount {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted, #9a9a9a);
}

.vbp-tick {
    flex: 0 0 auto;
    font-size: 17px;
    color: var(--color-primary, #e85454);
    opacity: 0;
}
.vbp-row.is-sel .vbp-tick { opacity: 1; }

/* ── Create ────────────────────────────────────────────────────────────── */
.vbp-create {
    padding: 6px 18px 0;
    border-top: 1px solid var(--color-border, #2b2b2b);
    margin-top: 6px;
}
.vbp-newbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 2px;
    border: none;
    background: transparent;
    color: var(--color-primary, #e85454);
    cursor: pointer;
}
.vbp-newbtn[hidden] { display: none; }

.vbp-newrow { display: flex; gap: 8px; padding: 9px 0 3px; }
.vbp-newrow[hidden] { display: none; }
.vbp-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-border, #2b2b2b);
    background: #1a1a1a;
    color: var(--color-text, #f0f0f0);
}
.vbp-input:focus {
    outline: none;
    border-color: var(--color-primary, #e85454);
}
.vbp-mk {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px 15px;
    border-radius: 10px;
    border: 1px solid var(--color-border, #2b2b2b);
    background: var(--color-bg-soft, #111111);
    color: var(--color-text, #f0f0f0);
    cursor: pointer;
}
.vbp-mk:hover { border-color: var(--color-border-strong, var(--color-text-muted, #9a9a9a)); }

.vbp-err {
    font-size: 12.5px;
    color: var(--color-primary, #e85454);
    margin: 7px 0 0;
}
.vbp-err[hidden] { display: none; }

/* ── Docked confirm ────────────────────────────────────────────────────── */
.vbp-foot {
    padding: 13px 18px 16px;
}
.vbp-save {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    padding: 12px;
    border-radius: 999px;
    border: none;
    background: var(--color-primary, #e85454);
    color: #fff;
    cursor: pointer;
    transition: opacity .16s ease;
}
.vbp-save:disabled { opacity: .45; cursor: default; }

/* ─── Web-savings promo (mobile web) ───────────────────────────────────────
   Dark-theme twin of the block in style.css. This theme is a swapped copy, not
   a layer, so any change to the promo modal has to land in BOTH files. */
.wsp-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .68);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .22s ease;
}
.wsp-modal[hidden] { display: none; }
.wsp-modal.is-open { opacity: 1; }

.wsp-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 30px 22px 18px;
    background: #121212;
    border: 1px solid #333;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .5);
    text-align: center;
    transform: translateY(18px);
    transition: transform .22s ease;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.wsp-modal.is-open .wsp-card { transform: translateY(0); }

.wsp-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #999;
    padding: 6px 8px;
    cursor: pointer;
    transition: color .2s;
}
.wsp-close:hover { color: #fff; }

.wsp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin-bottom: 14px;
    padding: 0 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primary, #e85454), #ff8a5c);
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.5px;
}

.wsp-thumb {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 14px;
}

.wsp-title {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin-bottom: .55rem;
}

.wsp-body {
    font-size: .93rem;
    color: #999;
    line-height: 1.6;
    margin-bottom: 1.1rem;
}

.wsp-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wsp-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .16s ease;
}
.wsp-btn:active { opacity: .8; }
.wsp-btn-primary {
    background: var(--color-primary, #e85454);
    color: #fff;
}
.wsp-btn-ghost {
    background: none;
    color: #888;
    font-weight: 500;
}

body.wsp-lock { overflow: hidden; }

@media (min-width: 576px) {
    .wsp-modal { align-items: center; }
    .wsp-card {
        border: 1px solid #333;
        border-radius: 20px;
        padding-bottom: 18px;
        transform: scale(.96);
    }
    .wsp-modal.is-open .wsp-card { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .wsp-modal,
    .wsp-card { transition: none; }
    .wsp-card { transform: none; }
}

/* ── Shopping agents page (agents.php / js/agents.js) ─────────────────────
   Uses the pricing page's --pr-* tokens (defined above in this file for the
   theme) so it inherits light/dark without a second palette. */
.agents-page { padding: 100px 0 60px; background: var(--pr-bg); min-height: 70vh; }
.agents-page .ag-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.agents-page .ag-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.agents-page .ag-head h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: var(--pr-ink); margin: 0 0 6px; letter-spacing: -0.02em; }
.agents-page .ag-head p { color: var(--pr-muted); max-width: 640px; margin: 0; }
.agents-page .ag-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
.agents-page .ag-section h2 { font-size: 18px; font-weight: 700; color: var(--pr-ink); margin: 18px 0 8px; }
.agents-page .ag-section h3 { font-size: 15px; font-weight: 700; color: var(--pr-ink); margin: 0 0 8px; }
.agents-page .ag-card { display: block; background: var(--pr-card); border: 1px solid var(--pr-card-border); border-radius: 16px; padding: 16px; margin-top: 10px; color: var(--pr-ink); text-decoration: none; }
.agents-page a.ag-card:hover { text-decoration: none; border-color: var(--pr-accent); color: var(--pr-ink); }
.agents-page .ag-card.ag-tight { padding: 12px 14px; }
.agents-page .ag-card.ag-soft { background: var(--pr-accent-soft); border-color: transparent; }
.agents-page .ag-row { display: flex; align-items: center; gap: 12px; }
.agents-page .ag-row-main { flex: 1; min-width: 0; }
.agents-page .ag-chev { color: var(--pr-muted); font-size: 22px; line-height: 1; }
.agents-page .ag-group { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--pr-muted); margin: 16px 0 2px; }
.agents-page .ag-muted { color: var(--pr-muted); font-size: 13px; }
.agents-page .ag-small { font-size: 12px; }
.agents-page .ag-warn { color: #b25e09; }
.agents-page .ag-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agents-page .ag-metas { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; }
.agents-page .ag-metas > div { display: flex; flex-direction: column; font-size: 13px; }
.agents-page .ag-metas b { font-size: 15px; }
.agents-page .ag-pill { display: inline-block; font-size: 11px; font-weight: 700; border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.agents-page .ag-pill-shadow { color: var(--pr-muted); }
.agents-page .ag-pill-approve { color: #b25e09; }
.agents-page .ag-pill-auto { color: #1a7f3c; }
.agents-page .ag-count { color: var(--pr-muted); font-weight: 400; }
.agents-page .ag-count-badge { background: var(--pr-accent); color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.agents-page .ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700; border: 1px solid var(--pr-card-border); background: var(--pr-card); color: var(--pr-ink); cursor: pointer; text-decoration: none; }
.agents-page .ag-btn:hover { text-decoration: none; filter: brightness(1.04); }
.agents-page .ag-btn.primary { background: var(--pr-accent); border-color: var(--pr-accent); color: #fff; }
.agents-page .ag-btn.ghost { background: transparent; }
.agents-page .ag-btn.danger { color: #b42318; }
.agents-page .ag-btn[disabled] { opacity: .6; cursor: default; }
.agents-page .ag-actions { display: flex; gap: 10px; margin-top: 12px; }
.agents-page .ag-actions .ag-btn { flex: 1; }
.agents-page .ag-draft { border-color: #f17425; }
.agents-page .ag-draft.is-busy { opacity: .6; pointer-events: none; }
.agents-page .ag-draft-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.agents-page .ag-quote { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--pr-accent); background: var(--pr-accent-soft); border-radius: 8px; font-size: 14px; }
.agents-page .ag-opts { margin: 8px 0 0 18px; padding: 0; color: var(--pr-muted); font-size: 13px; }
.agents-page .ag-levels { padding-left: 18px; margin: 8px 0 12px; color: var(--pr-muted); font-size: 13px; }
.agents-page .ag-levels li { margin-bottom: 6px; }
.agents-page .ag-levels b { color: var(--pr-ink); }
.agents-page .ag-seg { display: flex; gap: 4px; padding: 4px; background: var(--pr-accent-soft); border: 1px solid var(--pr-card-border); border-radius: 12px; }
.agents-page .ag-seg-opt { flex: 1; text-align: center; padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--pr-muted); border-radius: 9px; cursor: pointer; margin: 0; }
.agents-page .ag-seg-opt input { display: none; }
.agents-page .ag-seg-opt.is-active, .agents-page .ag-seg-opt:has(input:checked) { background: var(--pr-accent); color: #fff; }
.agents-page .ag-label { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--pr-muted); margin: 14px 0 6px; }
.agents-page .ag-two { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.agents-page .ag-consent { margin-top: 10px; padding: 12px; border: 1px solid #f17425; border-radius: 12px; font-size: 13px; }
.agents-page .ag-error { margin-top: 10px; color: #b42318; font-size: 13px; }
.agents-page .ag-mode { font-size: 12px; font-weight: 700; color: var(--pr-muted); }
.agents-page .ag-mode-executed { color: #1a7f3c; }
.agents-page .ag-mode-blocked { color: #b42318; }
.agents-page .ag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; margin-right: 6px; background: var(--pr-muted); }
.agents-page .ag-dot-ok { background: #2eca8b; } .agents-page .ag-dot-warn { background: #f17425; } .agents-page .ag-dot-bad { background: #d32f2f; }
.agents-page .ag-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--pr-ink); color: var(--pr-card); padding: 10px 16px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1080; }
.agents-page .ag-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 860px) { .agents-page .ag-grid { grid-template-columns: 1fr; } .agents-page .ag-head { flex-direction: column; } .agents-page .ag-two { grid-template-columns: 1fr; } }

/* ---------- Nudge card ----------
 * A secondary, self-contained way forward that sits below a page's main
 * content: leading icon, a question in the reader's own words, one line of
 * explanation, chevron. Built for "Missing a shop?" on myshops.php, where the
 * same link used to be a grey caption that read as a disclaimer instead of an
 * action. Reusable — keep it generic.
 *
 *   <a href="/somewhere" class="nudge-card">
 *     <span class="nudge-card-icon"><i class="uil uil-mobile-android"></i></span>
 *     <span class="nudge-card-body">
 *       <span class="nudge-card-title">Missing a shop?</span>
 *       <span class="nudge-card-text">Recover shops registered to your phone number</span>
 *     </span>
 *     <i class="uil uil-angle-right-b nudge-card-chevron" aria-hidden="true"></i>
 *   </a>
 *
 * Dashed border on purpose: it keeps the card from being read as one more item
 * in the list above it. Mirrors the app's My Shops screen.
 *
 * Dark theme: the card is FILLED with --color-bg-card rather than left
 * transparent. A bare #2b2b2b dashed outline on the #0a0a0a page all but
 * disappears; the fill is what makes the card readable as a surface here.
 */
.nudge-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 520px;
  margin: var(--space-6) auto 0;
  padding: var(--space-4);
  background: var(--color-bg-card, #ffffff);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.nudge-card:hover {
  text-decoration: none;
  transform: translateY(var(--lift-hover-y));
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}
.nudge-card:active { transform: translateY(0); }
.nudge-card:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-color: var(--color-primary);
}
.nudge-card-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.nudge-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.nudge-card-title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-base, 15px);
  font-weight: 600;
  color: var(--color-text);
  line-height: var(--lh-snug, 1.3);
}
.nudge-card-text {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: var(--fs-sm, 13px);
  color: var(--color-text-muted);
  line-height: var(--lh-normal, 1.5);
}
.nudge-card-chevron {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--color-text-muted);
}
@media (max-width: 575.98px) {
  /* Phone: the icon keeps its tap-target presence, the copy takes the rest. */
  .nudge-card { gap: var(--space-3); padding: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .nudge-card { transition: none; }
  .nudge-card:hover { transform: none; }
}

/* ============================================
   SCHEDULED-DELETION BANNER
   Markup: SoftDeleteStudio::renderDeletionBanner(), emitted directly after
   header-nav.php on shop.php and psdash.php — i.e. as the very first thing in
   <body>. Two things were wrong with that on a phone:

     1. #topnav is position:fixed and reserves no space in the flow. The
        dashboards below carry their own 80px of top padding to clear it; the
        banner, sitting above them, carried none, so the navbar sat on top of
        its first line. The offset moves here and the dashboard immediately
        after a banner gives its own padding up, so the two don't double.
     2. justify-content:space-between + flex-wrap with no gap: the moment the
        row wrapped, "Cancel Deletion" landed hard against the last line of the
        sentence with nothing between them.

   Keep in lockstep with style-monochrome.css — the dark theme is a swapped copy
   of this file, not a layer over it.
   ============================================ */
.deletion-banner {
  margin: 80px 0 0;          /* the same clearance .shop-dashboard / .ps-dashboard
                                already used for the fixed nav — 74px tall on
                                mobile, 68px on desktop, 80px covers both */
  border-radius: 0;
}

/* Hand the top padding over. Without this the banner clears the nav and the
   dashboard then adds another 80px of nothing underneath it. */
.deletion-banner + .shop-dashboard,
.deletion-banner + .ps-dashboard {
  padding-top: 24px;
}

.deletion-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;            /* the row/column gap the old markup never had */
}

.deletion-banner-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;              /* let the sentence wrap instead of widening the row */
}

.deletion-banner-text i {
  flex-shrink: 0;
  line-height: 1.5;
}

.deletion-banner .cancel-deletion-btn {
  flex: 0 0 auto;
}

/* This theme paints .alert-warning as a light-grey chip with black text, but the
   global .btn-outline-dark is white-on-transparent — right against the dark page,
   invisible inside this banner. Scoped to the banner rather than repainting every
   outline-dark button on the site, most of which sit on dark backgrounds where
   white is correct. */
.deletion-banner .cancel-deletion-btn {
  border-color: #555555;
  /* !important because `.btn.btn-outline-dark` already carries one further up
     this sheet — there is no out-specifying it without matching the flag. */
  color: #1a1a1a !important;
}

.deletion-banner .cancel-deletion-btn:hover,
.deletion-banner .cancel-deletion-btn:focus,
.deletion-banner .cancel-deletion-btn:active {
  background-color: #333333;
  border-color: #333333;
  color: #ffffff !important;
}

@media (max-width: 575.98px) {
  /* One line of text and a button beside it never both fit; stop pretending and
     give the button the full width so it's a comfortable tap target. */
  .deletion-banner .cancel-deletion-btn {
    width: 100%;
    text-align: center;
  }
}


/* ============================================
   ACCESSIBILITY DISPLAY SETTINGS
   The control panel at the top of /accessibility. Markup lives in
   accessibility.php; the preferences themselves are read and applied by
   includes/AccessibilityPrefs.php.

   Written entirely in theme tokens, so this block is byte-identical in
   style.css and style-monochrome.css — the two sheets are swapped rather
   than layered, and anything hard-coded here would have to be hand-mirrored
   and would eventually drift. Nothing below sets a literal colour.
   ============================================ */
.a11y-panel {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  background: var(--color-bg-soft, var(--color-bg));
}

.a11y-field {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  min-width: 0;
}

.a11y-legend {
  /* A <legend> is the accessible name of its fieldset, so it stays a legend
     rather than becoming a styled <div> — it just doesn't need to look like
     Bootstrap's 1.5rem heading. */
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  width: auto;
  margin-bottom: 2px;
  padding: 0;
}

.a11y-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.a11y-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  cursor: pointer;
  /* Each option is rendered at its own size (inline, from PHP), so the row has
     to tolerate three different line heights without the pills jumping. */
  line-height: 1.2;
}

/* :has() lets the whole pill show selection without JS. Browsers without it
   still show the radio itself, which is the fallback that matters. */
.a11y-choice:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.a11y-choice:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.a11y-switch {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  cursor: pointer;
}

.a11y-switch input {
  /* 18px, not the browser default 13px. This is a checkbox on the
     accessibility page; it should be comfortably hittable. */
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.a11y-switch strong {
  font-weight: 600;
  color: var(--color-text);
}

.a11y-saved {
  color: var(--color-success);
}

@media (max-width: 575.98px) {
  .a11y-panel {
    padding: 16px;
  }
  /* Full-width pills stack cleanly and stay easy to hit one-handed. */
  .a11y-choice {
    width: 100%;
  }
}

/* Palette for the entity-dashboard block below. DARK theme — mirrors the
   block in style.css, which this file replaces wholesale. The gradient is
   pulled back from the light theme's full-strength red: at #cc0000 on a
   #161616 page the spotlight glows rather than sits. */
:root {
  --dash-surface: #1a1a1a;
  --dash-ink: #ffffff;
  --dash-muted: #a0a0a0;
  --dash-line: #333333;
  --dash-chip: #2a2a2a;
  --dash-shadow-lift: rgba(0, 0, 0, 0.55);
  --dash-glory-bg: linear-gradient(135deg, #a11212 0%, #6d0f1c 55%, #3d0a13 100%);
  --dash-glory-shadow: rgba(0, 0, 0, 0.5);
  --dash-glory-ink: #a11212;
}

/* ============================================================================
   ENTITY DASHBOARD — Find Stream spotlight + always-visible action grid
   Used by shop.php (shop owners) and psdash.php (personal shoppers).

   Why this exists: both dashboards used to keep every action in a 340px
   right-hand rail. Below 992px that rail stacks UNDER the interactions feed,
   so on a phone the only way to reach "Post a find" or "Availability" was to
   scroll past ten find cards and a Load More button. The actions now sit in
   the main column, above the feed, at every width — and the Find Stream, the
   one action that earns money, is promoted out of the list entirely into the
   spotlight below.

   Structural rules live in BOTH style.css and style-monochrome.css: the dark
   theme is a stylesheet SWAP, not a layer, so only one of the two files is
   ever loaded. Keep the two copies identical apart from the :root block.
   ========================================================================= */

/* ── Find Stream spotlight ─────────────────────────────────────────────── */
.dash-spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  padding: 44px 48px;
  margin-bottom: 24px;
  background: var(--dash-glory-bg);
  box-shadow: 0 12px 32px var(--dash-glory-shadow);
  color: #ffffff;
}

/* Concentric rings — a signal spreading out from the right edge. Purely
   decorative: behind the content, and never a click target. */
.dash-spotlight::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -90px;
  width: 460px;
  height: 460px;
  transform: translateY(-50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.15) 0 30%, transparent 31%),
    radial-gradient(circle, rgba(255, 255, 255, 0.10) 0 52%, transparent 53%),
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 74%, transparent 75%);
}

.dash-spotlight-inner {
  position: relative;
  max-width: 640px;
}

.dash-spotlight-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 12px;
}

/* Live dot. It says "this is happening now", which is the whole argument for
   opening the stream. */
.dash-spotlight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: dash-pulse 2.4s ease-out infinite;
}

@keyframes dash-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.dash-spotlight-title {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.14;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 14px;
}

.dash-spotlight-lead {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  max-width: 54ch;
  margin: 0 0 26px;
}

.dash-spotlight-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.dash-btn-glory,
.dash-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.dash-btn-glory {
  padding: 15px 30px;
  font-size: 16px;
  background: #ffffff;
  color: var(--dash-glory-ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* !important, and only here: the monochrome theme carries a blanket
   `a:not(.btn):hover { color: #ff4d4d !important }`, which would repaint the
   label of a white pill on hover. */
.dash-btn-glory:hover,
.dash-btn-glory:focus {
  color: var(--dash-glory-ink) !important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}

.dash-btn-ghost {
  padding: 14px 26px;
  font-size: 15px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.dash-btn-ghost:hover,
.dash-btn-ghost:focus {
  color: #ffffff !important;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.9);
}

/* ── Action grid ───────────────────────────────────────────────────────── */
.dash-actions {
  margin-bottom: 28px;
}

.dash-actions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.dash-actions-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--dash-ink);
  margin: 0;
}

.dash-group + .dash-group {
  margin-top: 22px;
}

/* Same four groups, in the same order, as the app's entity dashboards. The
   heading earns its height by answering "why would I open this?" — see
   mobile/src/components/entity/dashboardActions.tsx. */
.dash-group-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--dash-muted);
  margin: 0 0 10px;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
}

.dash-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dash-tile:hover,
.dash-tile:focus {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px var(--dash-shadow-lift);
}

.dash-tile-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--dash-chip);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: background 0.18s ease, color 0.18s ease;
}

.dash-tile:hover .dash-tile-icon {
  background: var(--color-primary);
  color: #ffffff;
}

.dash-tile-text {
  min-width: 0;
}

/* Explicit colours on the CHILDREN, not the anchor: that is what keeps the
   monochrome theme's blanket link-hover rule off this text. */
.dash-tile-text h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--dash-ink);
  margin: 0 0 2px;
}

.dash-tile-text p {
  font-size: 13px;
  line-height: 1.4;
  color: var(--dash-muted);
  margin: 0;
}

/* ── A feed that has nothing in it yet ─────────────────────────────────── */
/* Replaces the second full-size Find Stream card this branch used to render.
   The spotlight above already made that pitch; saying it twice on one screen
   makes neither copy land. */
.dash-quiet-empty {
  background: var(--dash-surface);
  border: 1px dashed var(--dash-line);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  margin-bottom: 24px;
}

.dash-quiet-empty i {
  font-size: 32px;
  color: var(--dash-muted);
  display: block;
  margin-bottom: 10px;
}

.dash-quiet-empty h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--dash-ink);
  margin: 0 0 6px;
}

.dash-quiet-empty p {
  font-size: 14px;
  color: var(--dash-muted);
  margin: 0;
}

/* ── Narrow screens ────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .dash-spotlight {
    padding: 30px 24px;
    border-radius: 20px;
  }

  .dash-spotlight::before {
    right: -190px;
    opacity: 0.55;
  }

  .dash-spotlight-lead {
    font-size: 15px;
    margin-bottom: 22px;
  }

  .dash-spotlight-cta {
    gap: 10px;
  }

  .dash-spotlight-cta .dash-btn-glory,
  .dash-spotlight-cta .dash-btn-ghost {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  /* Two compact columns, label only. The descriptions are what teach the
     product, so they stay everywhere there is room for them — but at this
     width each one costs two extra lines per tile, and eleven tiles of that
     is another screen and a half between the owner and their feed. Reaching
     the action wins here; the app carries the same descriptions in full. */
  /* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(AUTO, 1fr), so a column
     whose longest word is "Appointments" refuses to shrink to its half and
     takes the width out of its neighbour — two columns that are visibly
     different widths, in one grid, for no reason a reader can see. */
  .dash-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Icon above label, not beside it. Half a phone's width is not enough for
     a 38pt icon AND a two-word label on one line, and the squeezed version
     of the wide row reads as a broken wide row; stacked, it reads as a tile
     that was always meant to be this shape. */
  .dash-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 14px;
    border-radius: 14px;
  }

  .dash-tile-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 18px;
  }

  .dash-tile-text h4 {
    font-size: 14px;
    margin-bottom: 0;
  }

  .dash-tile-text p {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-spotlight-dot {
    animation: none;
  }

  .dash-tile,
  .dash-btn-glory,
  .dash-btn-ghost {
    transition: none;
  }

  .dash-tile:hover,
  .dash-btn-glory:hover {
    transform: none;
  }
}

/* ── The right-hand rail, after the actions moved out of it ─────────────── */
/* All it holds now is Pro Tips (and, for a personal shopper, the Pro card).
   Left static it read as an abandoned column beside a feed ten times its
   height; stuck to the viewport it reads as a companion to whatever the owner
   is reading. Only above the breakpoint where the column exists at all. */
@media (min-width: 992px) {
  .dash-rail {
    position: sticky;
    top: 90px;
  }
}

/* ── Narrow screens put the menu before the numbers ─────────────────────── */
/* On a phone the eight stat cards are four rows, and Pro Insights is another
   two — about 800px of reporting between the spotlight and the actions. The
   numbers are a report; the actions are how you leave this page. Above 992px
   the stats are two tight rows and everything sits above the fold anyway, so
   the source order (which reads better on a wide screen) stands there.
   Ordered rather than duplicated in the markup: one copy of the menu.
   Everything not named here keeps order 1, so alerts, boost cards and
   deletion banners stay at the top in source order — including any added
   later, which is why the default is set on the universal child. */
@media (max-width: 991.98px) {
  #shop-dashboard-body,
  #ps-dashboard-body {
    display: flex;
    flex-direction: column;
  }

  #shop-dashboard-body > *,
  #ps-dashboard-body > * {
    order: 1;
  }

  #shop-dashboard-body > .dash-spotlight,
  #ps-dashboard-body > .dash-spotlight {
    order: 2;
  }

  #shop-dashboard-body > .dash-actions,
  #ps-dashboard-body > .dash-actions {
    order: 3;
  }

  #shop-dashboard-body > .shop-stat-grid,
  #ps-dashboard-body > .ps-stat-cards {
    order: 4;
  }

  #shop-dashboard-body > .shop-insights,
  #ps-dashboard-body > .shop-insights {
    order: 5;
  }

  #shop-dashboard-body > .shop-content-grid,
  #ps-dashboard-body > .row {
    order: 6;
  }
}