/* Final visual layer loaded after style.css */
:root{
  --ui-bg:#f4f7fb;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f3f6fb;
  --ui-border:#dce4f0;
  --ui-text:#172033;
  --ui-muted:#66758d;
  --ui-blue:#1d56db;
  --ui-blue-soft:#eef4ff;
  --ui-danger:#e11d2e;
  --ui-shadow:0 18px 44px rgba(15,23,42,.08);
}

/* Final dark-mode contrast fix: prevent late legacy CSS from forcing bright white fields. */
html[data-theme="dark"] :is(
  input,
  select,
  textarea,
  .ai-support-panel,
  .ai-tip-card,
  .ai-compose-trigger,
  .pro-preview-card,
  .pro-preview-listing,
  .pro-preview-content,
  .wallet-card,
  .wallet-note,
  .info-card,
  .helper-box,
  .chat-panel,
  .conversation-box,
  .empty-state
){
  background-color:#142039 !important;
  background-image:none !important;
  border-color:#314764 !important;
  color:#eaf1ff !important;
  box-shadow:0 14px 34px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] :is(#postSection, .panel, .contact-form) :is(input, select, textarea),
body.dark-mode :is(#postSection, .panel, .contact-form) :is(input, select, textarea){
  background:#16243d !important;
  border:1px solid #435a78 !important;
  color:#f4f8ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 20px rgba(0,0,0,.16) !important;
  caret-color:#fbbf24 !important;
}

html[data-theme="dark"] :is(#postSection, .panel, .contact-form) :is(input, textarea)::placeholder,
body.dark-mode :is(#postSection, .panel, .contact-form) :is(input, textarea)::placeholder{
  color:#8ea1bc !important;
  opacity:1 !important;
}

html[data-theme="dark"] select option,
body.dark-mode select option{
  background:#111a2e !important;
  color:#eef4ff !important;
}

html[data-theme="dark"] #postSection :is(label, .field-hint, .ai-compose-sub, .ai-support-copy),
body.dark-mode #postSection :is(label, .field-hint, .ai-compose-sub, .ai-support-copy){
  color:#c9d6ea !important;
  opacity:1 !important;
}

html[data-theme="dark"] #postSection :is(h2,h3,strong,b),
body.dark-mode #postSection :is(h2,h3,strong,b){
  color:#f8fbff !important;
}

html[data-theme="dark"] #postSection .ai-compose-trigger,
body.dark-mode #postSection .ai-compose-trigger{
  background:#1d2f52 !important;
  border-color:#4b6388 !important;
  color:#f8fbff !important;
}

html[data-theme="dark"] #postSection .ai-trigger-badge,
body.dark-mode #postSection .ai-trigger-badge{
  background:#6d5dfc !important;
  color:#ffffff !important;
}

html[data-theme="dark"] #postSection .ai-support-panel,
body.dark-mode #postSection .ai-support-panel{
  background:#14213a !important;
  border:1px solid #314764 !important;
}

html[data-theme="dark"] #postSection .ai-tip-card,
body.dark-mode #postSection .ai-tip-card{
  background:#101b30 !important;
  border-color:#2f4566 !important;
}

html[data-theme="dark"] .pro-preview-card,
body.dark-mode .pro-preview-card{
  background:#101a2e !important;
  border:1px solid #314764 !important;
}

html[data-theme="dark"] .pro-preview-listing,
body.dark-mode .pro-preview-listing{
  background:#16243d !important;
  border-color:#314764 !important;
}

html[data-theme="dark"] .pro-preview-image.is-empty span,
body.dark-mode .pro-preview-image.is-empty span{
  background:#223554 !important;
  color:#f8fbff !important;
  border:1px solid #4b6388 !important;
}

html[data-theme="dark"] .pro-preview-title,
body.dark-mode .pro-preview-title{
  color:#f8fbff !important;
}

html[data-theme="dark"] .pro-preview-content p,
html[data-theme="dark"] .pro-preview-meta span,
body.dark-mode .pro-preview-content p,
body.dark-mode .pro-preview-meta span{
  color:#d7e2f2 !important;
}

html[data-theme="dark"] .wallet-card .empty-state,
body.dark-mode .wallet-card .empty-state{
  background:#16243d !important;
  color:#eaf1ff !important;
  border:1px solid #314764 !important;
}

html[data-theme="dark"]{
  --ui-bg:#0b1020;
  --ui-surface:#121a2b;
  --ui-surface-soft:#182235;
  --ui-border:#26344e;
  --ui-text:#edf4ff;
  --ui-muted:#aebbd0;
  --ui-blue:#4f8cff;
  --ui-blue-soft:#16274a;
  --ui-danger:#ef4444;
  --ui-shadow:0 18px 48px rgba(0,0,0,.38);
}

body{
  background:
    radial-gradient(circle at 8% 0%, rgba(37,99,235,.10), transparent 26rem),
    linear-gradient(180deg, var(--ui-bg) 0%, #f8fafc 48%, #ffffff 100%) !important;
  color:var(--ui-text) !important;
}

html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 8% 0%, rgba(79,140,255,.18), transparent 28rem),
    radial-gradient(circle at 92% 8%, rgba(245,158,11,.10), transparent 24rem),
    linear-gradient(180deg, #080d19 0%, #0b1020 48%, #0f172a 100%) !important;
}

.top-strip{
  display:none !important;
}

.commercial-hero{
  display:none !important;
}

.site-shell > .topbar,
header.topbar{
  position:relative !important;
  top:auto !important;
  z-index:35 !important;
  display:grid !important;
  grid-template-columns:minmax(360px,430px) minmax(300px,1fr) 46px auto !important;
  align-items:center !important;
  gap:18px !important;
  margin:26px auto 14px !important;
  padding:16px 22px !important;
  border-radius:28px !important;
  background:color-mix(in srgb, var(--ui-surface) 96%, transparent) !important;
  border:1px solid var(--ui-border) !important;
  box-shadow:var(--ui-shadow) !important;
}

.topbar .brand-wrap{
  display:grid !important;
  grid-template-columns:76px minmax(0,1fr) !important;
  align-items:center !important;
  gap:14px !important;
  min-width:0 !important;
}

.topbar .site-logo{
  width:76px !important;
  height:76px !important;
  min-width:76px !important;
  padding:10px !important;
  object-fit:contain !important;
  border-radius:18px !important;
  background:#ffffff !important;
  border:1px solid var(--ui-border) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.10) !important;
}

.topbar .brand,
#siteName{
  color:var(--ui-blue) !important;
  font-family:"Poppins", Arial, sans-serif !important;
  font-size:clamp(22px,1.65vw,27px) !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  letter-spacing:-.025em !important;
  max-width:none !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

.topbar .brand-sub,
#siteSlogan{
  display:block !important;
  margin-top:5px !important;
  color:var(--ui-muted) !important;
  font-size:12.5px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
  max-width:36ch !important;
}

.topbar .search-large{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 128px !important;
  align-items:center !important;
  gap:8px !important;
  min-height:58px !important;
  padding:6px !important;
  border-radius:18px !important;
  background:var(--ui-surface-soft) !important;
  border:1px solid var(--ui-border) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46) !important;
}

.topbar .search-large input{
  width:100% !important;
  min-width:0 !important;
  min-height:44px !important;
  padding:0 18px !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:var(--ui-text) !important;
  font-size:15px !important;
  font-weight:700 !important;
}

.topbar .search-large input::placeholder{
  color:var(--ui-muted) !important;
}

.topbar .search-large .btn{
  width:100% !important;
  min-width:0 !important;
  min-height:44px !important;
  padding:0 18px !important;
  border:0 !important;
  border-radius:12px !important;
  background:var(--ui-blue) !important;
  color:#fff !important;
  box-shadow:0 10px 18px rgba(29,86,219,.24) !important;
  font-size:14px !important;
  font-weight:900 !important;
}

.theme-toggle{
  width:44px !important;
  height:44px !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:999px !important;
  border:1px solid var(--ui-border) !important;
  background:var(--ui-surface) !important;
  color:var(--ui-blue) !important;
  box-shadow:0 10px 22px rgba(15,23,42,.08) !important;
  cursor:pointer !important;
  font-size:17px !important;
}

.topbar .top-actions.hidden,
.topbar #guestActions.hidden,
.topbar #userActions.hidden,
.topbar #adminLink.hidden{
  display:none !important;
}

.topbar .top-actions:not(.hidden),
.topbar #guestActions:not(.hidden),
.topbar #userActions:not(.hidden){
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  min-width:max-content !important;
}

.topbar .top-actions .btn,
.topbar #guestActions .btn,
.topbar #userActions .btn,
.topbar #userActions a,
.topbar .welcome-pill{
  width:auto !important;
  min-width:108px !important;
  min-height:44px !important;
  padding:0 16px !important;
  border-radius:13px !important;
  font-size:14px !important;
  font-weight:900 !important;
  line-height:1 !important;
  justify-content:center !important;
  box-shadow:none !important;
}

.topbar #guestActions .btn-light,
.topbar #userActions .welcome-pill{
  background:var(--ui-blue-soft) !important;
  border:1px solid transparent !important;
  color:var(--ui-blue) !important;
}

.topbar #guestActions .btn-primary,
.topbar #userActions .btn.btn-light{
  background:var(--ui-surface) !important;
  border:1px solid var(--ui-border) !important;
  color:var(--ui-text) !important;
}

.topbar #adminLink{
  background:#fff7db !important;
  border:1px solid #f2d271 !important;
  color:#7a5200 !important;
}

html[data-theme="dark"] .topbar #adminLink{
  background:#322912 !important;
  border-color:#6f5817 !important;
  color:#f8d36b !important;
}

.topbar #userActions .btn.btn-danger{
  background:var(--ui-danger) !important;
  border:1px solid var(--ui-danger) !important;
  color:#fff !important;
}

.main-nav{
  position:relative !important;
  top:auto !important;
  z-index:30 !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px 24px !important;
  margin:0 auto 18px !important;
  padding:16px 28px !important;
  border-radius:18px !important;
  background:color-mix(in srgb, var(--ui-surface) 96%, transparent) !important;
  border:1px solid var(--ui-border) !important;
  box-shadow:0 12px 30px rgba(15,23,42,.07) !important;
  overflow:visible !important;
}

.main-nav a,
.main-nav a.nav-cta{
  width:auto !important;
  min-width:0 !important;
  min-height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--ui-text) !important;
  font-size:14px !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  transform:none !important;
}

.main-nav a:hover,
.main-nav a.nav-cta:hover{
  color:var(--ui-blue) !important;
  background:transparent !important;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .market-card,
html[data-theme="dark"] .showcase-panel,
html[data-theme="dark"] .pricing-group,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .admin-card{
  background:#121a2b !important;
  border-color:#26344e !important;
  color:var(--ui-text) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#0f172a !important;
  border-color:#2a3954 !important;
  color:#edf4ff !important;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] .post-location,
html[data-theme="dark"] .post-meta,
html[data-theme="dark"] .section-header p,
html[data-theme="dark"] .empty-state{
  color:#aebbd0 !important;
}

/* Dark mode readability pass */
html[data-theme="dark"],
html[data-theme="dark"] body{
  color:#eef4ff !important;
  font-family:"Poppins", Arial, sans-serif !important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .panel h3,
html[data-theme="dark"] .post-title,
html[data-theme="dark"] .showcase-title,
html[data-theme="dark"] .pricing-title,
html[data-theme="dark"] .modal-content h2,
html[data-theme="dark"] .modal-content h3{
  color:#f8fbff !important;
  font-family:"Poppins", Arial, sans-serif !important;
  font-weight:850 !important;
  letter-spacing:-.018em !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] .post-desc,
html[data-theme="dark"] .post-location,
html[data-theme="dark"] .post-meta,
html[data-theme="dark"] .section-header p,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .field-hint,
html[data-theme="dark"] .ai-tip-copy,
html[data-theme="dark"] .contact-copy{
  color:#d7e2f2 !important;
  font-family:"Poppins", Arial, sans-serif !important;
  font-weight:550 !important;
}

html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] .tiny-title,
html[data-theme="dark"] .mini-badge,
html[data-theme="dark"] .soft-badge,
html[data-theme="dark"] .filter-pill,
html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .btn,
html[data-theme="dark"] button{
  color:#f4f8ff !important;
  font-family:"Poppins", Arial, sans-serif !important;
  font-weight:800 !important;
}

html[data-theme="dark"] a{
  color:#93c5fd !important;
}

html[data-theme="dark"] a:hover{
  color:#bfdbfe !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .main-nav,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .market-card,
html[data-theme="dark"] .showcase-panel,
html[data-theme="dark"] .pricing-group,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .account-card{
  background:#111a2e !important;
  border-color:#30405e !important;
  color:#eef4ff !important;
}

html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .main-nav a.nav-cta{
  color:#e7eefb !important;
}

html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .main-nav a.nav-cta:hover{
  color:#93c5fd !important;
}

html[data-theme="dark"] .post-price,
html[data-theme="dark"] .showcase-price,
html[data-theme="dark"] .price,
html[data-theme="dark"] .price-value,
html[data-theme="dark"] .money{
  color:#ff6b88 !important;
  font-weight:900 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#0b1324 !important;
  border-color:#33445f !important;
  color:#f6f9ff !important;
  font-family:"Poppins", Arial, sans-serif !important;
  font-weight:650 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:#9fb0c9 !important;
  opacity:1 !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .admin-table,
html[data-theme="dark"] .data-table{
  background:#111a2e !important;
  color:#eef4ff !important;
}

html[data-theme="dark"] th{
  background:#17223a !important;
  color:#dbeafe !important;
  border-color:#30405e !important;
}

html[data-theme="dark"] td{
  background:#111a2e !important;
  border-color:#263751 !important;
}

html[data-theme="dark"] tr:hover td{
  background:#16223a !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] button.btn-primary{
  background:#3b82f6 !important;
  border-color:#3b82f6 !important;
  color:#ffffff !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] button.btn-light{
  background:#1c2940 !important;
  border-color:#354864 !important;
  color:#f4f8ff !important;
}

html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] button.btn-danger{
  background:#ef4444 !important;
  border-color:#ef4444 !important;
  color:#ffffff !important;
}

html[data-theme="dark"] .filter-pill,
html[data-theme="dark"] .soft-badge,
html[data-theme="dark"] .mini-badge,
html[data-theme="dark"] .tiny-title{
  background:#1b2942 !important;
  border-color:#3a4f72 !important;
  color:#f6d78a !important;
}

html[data-theme="dark"] .toast,
html[data-theme="dark"] .custom-alert,
html[data-theme="dark"] .notification,
html[data-theme="dark"] .announcement-popup-card{
  background:#111a2e !important;
  border:1px solid #30405e !important;
  color:#eef4ff !important;
  box-shadow:0 22px 60px rgba(0,0,0,.48) !important;
}

/* Dark mode: fix unreadable white blocks from legacy CSS */
html[data-theme="dark"] #marketSection,
html[data-theme="dark"] .market-section,
html[data-theme="dark"] .showcase-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] #postSection,
html[data-theme="dark"] #packagesSection,
html[data-theme="dark"] .payment-panel,
html[data-theme="dark"] .contact-section,
html[data-theme="dark"] .contact-copy,
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .pricing-wrap-pro,
html[data-theme="dark"] .pricing-hero,
html[data-theme="dark"] .pricing-copy,
html[data-theme="dark"] .pricing-group,
html[data-theme="dark"] .pricing-notice,
html[data-theme="dark"] .notice-box,
html[data-theme="dark"] .payment-box-pro,
html[data-theme="dark"] .payment-info,
html[data-theme="dark"] .payment-qr-wrap,
html[data-theme="dark"] .ai-support-panel,
html[data-theme="dark"] .quick-stats,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .chat-panel{
  background:#111a2e !important;
  background-image:none !important;
  border-color:#31425f !important;
  color:#eef4ff !important;
  box-shadow:0 18px 44px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .package-card,
html[data-theme="dark"] .listing-card,
html[data-theme="dark"] .payment-card,
html[data-theme="dark"] .wallet-card,
html[data-theme="dark"] .helper-box,
html[data-theme="dark"] .wallet-note,
html[data-theme="dark"] .conversation-box,
html[data-theme="dark"] .mini-list > *,
html[data-theme="dark"] .my-list > *,
html[data-theme="dark"] .info-list > *{
  background:#16223a !important;
  background-image:none !important;
  border:1px solid #344763 !important;
  color:#eef4ff !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] :is(
  #marketSection,
  .market-section,
  .showcase-panel,
  .panel,
  #postSection,
  #packagesSection,
  .payment-panel,
  .contact-section,
  .contact-copy,
  .contact-form,
  .site-footer,
  .pricing-group,
  .plan-card,
  .price-card,
  .payment-info,
  .payment-qr-wrap,
  .ai-support-panel,
  .stat-box,
  .faq-item
) :where(h1,h2,h3,h4,h5,h6,strong,b,label,div,p,span,small,li){
  color:#eaf1ff !important;
  font-family:"Poppins", Arial, sans-serif !important;
}

html[data-theme="dark"] :is(
  #marketSection,
  .market-section,
  .showcase-panel,
  .panel,
  #postSection,
  #packagesSection,
  .payment-panel,
  .contact-section,
  .contact-copy,
  .contact-form,
  .site-footer,
  .pricing-group,
  .plan-card,
  .price-card,
  .payment-info,
  .payment-qr-wrap,
  .ai-support-panel,
  .stat-box,
  .faq-item
) :where(p,small,.muted,.muted-text,.field-hint,.section-header p,.contact-copy p,.footer-brand p,.footer-cols a,.footer-cols span,.ai-support-copy,.pricing-copy p,.notice-box span){
  color:#cbd8ec !important;
  font-weight:600 !important;
}

html[data-theme="dark"] .plan-price,
html[data-theme="dark"] .pricing-price,
html[data-theme="dark"] .post-price,
html[data-theme="dark"] .showcase-price,
html[data-theme="dark"] .price-card strong{
  color:#fbbf24 !important;
  font-weight:900 !important;
}

html[data-theme="dark"] .plan-badge,
html[data-theme="dark"] .tiny-title,
html[data-theme="dark"] .mini-badge,
html[data-theme="dark"] .soft-badge,
html[data-theme="dark"] .panel-badge,
html[data-theme="dark"] .section-chip{
  background:#253554 !important;
  border:1px solid #4b6388 !important;
  color:#ffe08a !important;
  font-weight:900 !important;
}

html[data-theme="dark"] .filter-pill,
html[data-theme="dark"] .quick-locations button,
html[data-theme="dark"] .contact-points span{
  background:#17243d !important;
  border:1px solid #344763 !important;
  color:#eaf1ff !important;
}

html[data-theme="dark"] .filter-pill.active,
html[data-theme="dark"] .quick-locations button.active{
  background:#f4b400 !important;
  border-color:#f4b400 !important;
  color:#111827 !important;
}

html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form select,
html[data-theme="dark"] .contact-form textarea,
html[data-theme="dark"] #postSection input,
html[data-theme="dark"] #postSection select,
html[data-theme="dark"] #postSection textarea,
html[data-theme="dark"] .panel input,
html[data-theme="dark"] .panel select,
html[data-theme="dark"] .panel textarea{
  background:#0b1324 !important;
  border:1px solid #40536f !important;
  color:#f8fbff !important;
}

html[data-theme="dark"] .contact-form input::placeholder,
html[data-theme="dark"] .contact-form textarea::placeholder,
html[data-theme="dark"] #postSection input::placeholder,
html[data-theme="dark"] #postSection textarea::placeholder,
html[data-theme="dark"] .panel input::placeholder,
html[data-theme="dark"] .panel textarea::placeholder{
  color:#aebbd0 !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .contact-actions .btn-primary,
html[data-theme="dark"] .form-actions .btn-primary,
html[data-theme="dark"] .plan-card .btn,
html[data-theme="dark"] .price-card .btn{
  background:#2f7df6 !important;
  border-color:#2f7df6 !important;
  color:#ffffff !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .form-actions .btn-light{
  background:#22314d !important;
  border-color:#40536f !important;
  color:#ffffff !important;
}

html[data-theme="dark"] .site-footer .footer-logo{
  background:#ffffff !important;
  border-color:#dbe5f2 !important;
}

/* Dark mode popup readability */
html[data-theme="dark"] .announcement-popup{
  background:rgba(2,6,23,.68) !important;
  backdrop-filter:blur(8px) !important;
}

html[data-theme="dark"] .announcement-popup-card,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .custom-alert{
  background:#101a2e !important;
  border:1px solid #3a4d6c !important;
  color:#f8fbff !important;
  box-shadow:0 28px 80px rgba(0,0,0,.58) !important;
}

html[data-theme="dark"] .announcement-popup-card *,
html[data-theme="dark"] .custom-alert *,
html[data-theme="dark"] .modal-box *{
  color:#f8fbff !important;
  font-family:"Poppins", Arial, sans-serif !important;
}

html[data-theme="dark"] .announcement-popup-message,
html[data-theme="dark"] #announcementPopupText,
html[data-theme="dark"] .custom-alert-message,
html[data-theme="dark"] .modal-box p{
  color:#e8f0ff !important;
  font-size:clamp(18px,2vw,24px) !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  text-shadow:none !important;
  opacity:1 !important;
}

html[data-theme="dark"] .announcement-popup-badge{
  background:#fff2c2 !important;
  border:1px solid #f5c84b !important;
  color:#8a5a00 !important;
  font-weight:900 !important;
}

html[data-theme="dark"] .announcement-popup-close{
  color:#ffffff !important;
  background:transparent !important;
  border:0 !important;
  opacity:1 !important;
}

html[data-theme="dark"] .announcement-popup-action,
html[data-theme="dark"] .custom-alert button,
html[data-theme="dark"] .modal-box button[type="submit"]{
  background:#fbbf24 !important;
  border-color:#fbbf24 !important;
  color:#111827 !important;
  font-weight:900 !important;
}

/* Showcase carousel controls */
.showcase-dots,
#showcaseDots,
.showcase-dot{
  display:none !important;
}

.showcase-carousel-shell{
  position:relative !important;
  display:block !important;
  padding:0 28px !important;
}

.showcase-viewport{
  overflow:hidden !important;
  width:100% !important;
}

.showcase-track{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:calc((100% - 28px) / 3) !important;
  gap:14px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-behavior:smooth !important;
  scroll-snap-type:x mandatory !important;
  scrollbar-width:none !important;
  padding-bottom:4px !important;
}

.showcase-track::-webkit-scrollbar{
  display:none !important;
}

.showcase-card{
  scroll-snap-align:start !important;
}

.showcase-nav,
.showcase-prev,
.showcase-next{
  position:absolute !important;
  top:118px !important;
  z-index:40 !important;
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  border:1px solid rgba(226,232,240,.96) !important;
  background:#ffffff !important;
  color:#111827 !important;
  box-shadow:0 14px 30px rgba(15,23,42,.18) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  font-size:30px !important;
  line-height:1 !important;
}

.showcase-prev{
  left:0 !important;
}

.showcase-next{
  right:0 !important;
}

.showcase-nav:hover,
.showcase-prev:hover,
.showcase-next:hover{
  background:#fbbf24 !important;
  border-color:#fbbf24 !important;
  color:#111827 !important;
  transform:none !important;
}

html[data-theme="dark"] .showcase-nav,
html[data-theme="dark"] .showcase-prev,
html[data-theme="dark"] .showcase-next{
  background:#f8fafc !important;
  border-color:#dbe5f2 !important;
  color:#111827 !important;
}

@media (max-width:1100px){
  .site-shell > .topbar,
  header.topbar{
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:14px !important;
  }

  .theme-toggle{
    position:absolute !important;
    right:14px !important;
    top:14px !important;
  }

  .topbar .brand-wrap{
    padding-right:54px !important;
  }

  .topbar .brand,
  #siteName{
    white-space:normal !important;
  }

  .topbar .top-actions:not(.hidden),
  .topbar #guestActions:not(.hidden),
  .topbar #userActions:not(.hidden){
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
  }

  .topbar #userActions .welcome-pill{
    grid-column:1 / -1 !important;
  }

  .topbar .top-actions .btn,
  .topbar #guestActions .btn,
  .topbar #userActions .btn,
  .topbar #userActions a,
  .topbar .welcome-pill{
    width:100% !important;
    min-width:0 !important;
  }
}

@media (max-width:760px){
  .site-shell > .topbar,
  header.topbar{
    margin:12px auto 10px !important;
    border-radius:22px !important;
  }

  .topbar .brand-wrap{
    grid-template-columns:62px minmax(0,1fr) !important;
  }

  .topbar .site-logo{
    width:62px !important;
    height:62px !important;
    min-width:62px !important;
    border-radius:16px !important;
  }

  .topbar .brand,
  #siteName{
    font-size:20px !important;
    line-height:1.12 !important;
    white-space:normal !important;
  }

  .topbar .brand-sub,
  #siteSlogan{
    font-size:12px !important;
    max-width:30ch !important;
  }

  .topbar .search-large{
    grid-template-columns:1fr !important;
    border-radius:18px !important;
  }

  .main-nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:18px !important;
    margin-bottom:14px !important;
    padding:12px 16px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  .main-nav::-webkit-scrollbar{
    display:none !important;
  }

  .main-nav a,
  .main-nav a.nav-cta{
    flex:0 0 auto !important;
    font-size:13.5px !important;
  }

  .showcase-carousel-shell{
    padding:0 26px !important;
  }

  .showcase-track{
    grid-auto-columns:82vw !important;
    gap:12px !important;
  }

  .showcase-nav,
  .showcase-prev,
  .showcase-next{
    top:104px !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    font-size:26px !important;
  }
}