/* PUBLIC DARK MODE PREVIEW — remove this stylesheet link to revert */
:root {
  --dk-bg: #0b1220;
  --dk-bg-2: #111827;
  --dk-surface: #1a2332;
  --dk-surface-2: #243044;
  --dk-border: #2d3a4f;
  --dk-text: #e5e7eb;
  --dk-text-muted: #9ca3af;
  --dk-accent: #14b8a6;
  --dk-accent-2: #0d9488;
  --dk-link: #38bdf8;
}

html,
body {
  background: var(--dk-bg) !important;
  color: var(--dk-text) !important;
}

.bck-clr-new,
.hm-pg-ht,
.srch-main,
.fullwidth.float-left.bck-clr-new,
.main-header,
.footer-outer,
.footr-bg {
  background: var(--dk-bg) !important;
  background-image: none !important;
}

.bg-white,
.srch-area.bg-white,
.usr-drp,
.menu-drp,
#overflow,
.head-drp-main #drp-ovrflw,
.autocomplete-items,
.autocomplete-items1,
.rslt-out,
.ai-preset-panel,
.ai-preset-card,
.ai-rslt-dv,
.ai-insight-card,
.ai-chat-panel,
.popup-options,
.usr-login,
.email-frnd,
.reg-frm,
.my-pr-outr,
.msg-s,
.msg-c,
.email-sucess,
.email_error,
.cmnt-pop,
.get-drctn-drp,
.lang-drp,
.add-srch-drp,
.main-lang-drp-div,
.cntry-drp-outr,
.fv-drpdwn,
.srch-code-div,
.trnslt-div {
  background: var(--dk-surface) !important;
  background-color: var(--dk-surface) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.text-black,
.head-li a,
.top-hd-cnt,
.drp-mnu-st,
.user-cnt-st,
.language-p,
.ftr-lnk-main,
.ftr-sb,
.lng-lnk,
.wb-rslt-info,
.ai-preset-name,
.ai-preset-desc,
.ai-preset-sub,
.wb-rslt,
.rslt-lnk,
.cmnt-name,
.cmnt-cnt,
.cmnt-date-time,
.radio-cstm {
  color: var(--dk-text) !important;
}

.text-black:hover,
.top-hd-cnt:hover,
.lng-lnk:hover {
  color: #fff !important;
}

.top-hd-cnt.active {
  color: var(--dk-accent) !important;
}

.top-hd-cnt::after {
  background: var(--dk-accent) !important;
  height: 2px !important;
}

.inpt-srch,
.head-inpt,
.reg-txt,
.add-srch-inpt,
.rslt-cmnt-area,
.trnslt-txt,
.trnslt-rslt,
.srch-code,
.map-srch,
.gt-dir-inpt {
  background: transparent !important;
  color: var(--dk-text) !important;
}

.srch-area,
.header-srch,
.ad-srch-bx {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}

/* Keep search input dark after autosuggest selection / browser autofill */
.srch-area .inpt-srch,
.header-srch .head-inpt,
.inpt-srch,
.head-inpt {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--dk-text) !important;
  -webkit-text-fill-color: var(--dk-text) !important;
  caret-color: var(--dk-text) !important;
}

.srch-area .inpt-srch:-webkit-autofill,
.srch-area .inpt-srch:-webkit-autofill:hover,
.srch-area .inpt-srch:-webkit-autofill:focus,
.srch-area .inpt-srch:-webkit-autofill:active,
.header-srch .head-inpt:-webkit-autofill,
.header-srch .head-inpt:-webkit-autofill:hover,
.header-srch .head-inpt:-webkit-autofill:focus,
.header-srch .head-inpt:-webkit-autofill:active,
.inpt-srch:-internal-autofill-selected,
.head-inpt:-internal-autofill-selected {
  -webkit-box-shadow: 0 0 0 1000px var(--dk-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--dk-surface) inset !important;
  -webkit-text-fill-color: var(--dk-text) !important;
  caret-color: var(--dk-text) !important;
  transition: background-color 99999s ease-out;
}

.autocomplete-items,
.autocomplete-items1 {
  background: var(--dk-surface) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border) !important;
}

.autocomplete-items div,
.autocomplete-items1 div {
  color: var(--dk-text) !important;
}

.autocomplete-items div:hover,
.autocomplete-items1 div:hover,
.autocomplete-active,
.autocomplete-items div.autocomplete-active,
.autocomplete-items1 div.autocomplete-active {
  background: var(--dk-surface-2) !important;
  color: #fff !important;
}

.wb-rslt-hd,
.wb-rslt-a,
.result-div,
.fa_color,
.title_itns:hover {
  color: var(--dk-link) !important;
}

.wb-rslt-dmn,
.rslt-img-link,
.video-link,
.video-view,
.video-date,
.language-p,
.ai-preset-sub,
.ai-preset-desc {
  color: var(--dk-text-muted) !important;
}

.ai-preset-card {
  background: var(--dk-surface-2) !important;
  border-color: var(--dk-border) !important;
}

.ai-preset-card:hover {
  background: #2a3950 !important;
  border-color: var(--dk-accent) !important;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.18) !important;
}

.ai-preset-panel {
  border: 1px solid var(--dk-border) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

.ai-preset-hint {
  background: rgba(13, 148, 136, 0.14) !important;
  border-color: rgba(45, 212, 191, 0.35) !important;
  color: #5eead4 !important;
}

.ai-preset-hint .hint-num {
  background: #14b8a6 !important;
  color: #042f2e !important;
}

.ai-preset-hint .hint-sep {
  color: rgba(94, 234, 212, 0.45) !important;
}

.site-notice {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;
}

.site-notice-title {
  color: var(--dk-text) !important;
}

.site-notice-msg {
  color: var(--dk-text-muted) !important;
}

.site-notice-icon {
  background: rgba(13, 148, 136, 0.18) !important;
  color: #5eead4 !important;
}

.site-notice-close {
  background: var(--dk-surface-2) !important;
  color: var(--dk-text-muted) !important;
}

.site-notice-close:hover {
  background: #2a3950 !important;
  color: var(--dk-text) !important;
}

.site-notice-btn {
  background: var(--dk-accent-2) !important;
  color: #fff !important;
}

.site-notice-btn:hover {
  background: #0f766e !important;
}

.rslt-out {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28) !important;
}

.grid-inner,
.video-inner {
  background: var(--dk-surface) !important;
  border-color: var(--dk-border) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
}

.related-itm {
  background: var(--dk-surface-2) !important;
  color: var(--dk-text) !important;
}

.pgntn-a {
  color: var(--dk-text) !important;
}

.pgn-arw,
.pgn-actv {
  background: var(--dk-accent-2) !important;
  color: #fff !important;
}

.drp-mnu-st:hover,
.fv-ct-a:hover,
.autocomplete-items div:hover,
.autocomplete-items1 div:hover,
#overflow li a:hover {
  background: var(--dk-surface-2) !important;
}

/* Comments under results */
.rslt-cmnt-drp,
.rslt-cmnt-drp.notlogin {
  background: var(--dk-surface) !important;
  border: 1px solid var(--dk-border) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin-top: 8px !important;
  box-sizing: border-box;
}

.drp-cmnts {
  background: var(--dk-surface-2) !important;
  border: 1px solid var(--dk-border) !important;
  color: var(--dk-text) !important;
}

.cmnt-name,
.cmnt-cnt,
.cmnt-date-time,
.radio-cstm,
.rslt-cmnt-drp .text-black {
  color: var(--dk-text) !important;
}

.cmnt-cnt {
  color: var(--dk-text-muted) !important;
}

.rslt-cmnt-drp span[style*="color: #686868"],
.rslt-cmnt-drp span[style*="color:#686868"] {
  color: var(--dk-text-muted) !important;
}

.rslt-cmnt-area,
textarea.rslt-cmnt-area {
  background: var(--dk-bg-2) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.rslt-cmnt-area::placeholder,
textarea.rslt-cmnt-area::placeholder {
  color: var(--dk-text-muted) !important;
  opacity: 1;
}

.rslt-cmnt-btn {
  background: var(--dk-accent-2) !important;
  color: #fff !important;
}

.radio-cstm .checkmark {
  background-color: var(--dk-bg-2) !important;
  border-color: var(--dk-accent) !important;
}

.qlook-controls .rslt-lnk,
.qlook-controls .rslt-lnk-ic {
  color: var(--dk-accent) !important;
}

.qickfrmeifrmae {
  border: 1px solid var(--dk-border) !important;
  border-radius: 8px;
  background: #fff;
}

.menu-drp::after,
.usr-drp::after {
  border-bottom-color: var(--dk-surface) !important;
}

.hm-logo-wrap::before {
  background: radial-gradient(ellipse at center, rgba(20, 184, 166, 0.18) 0%, rgba(56, 189, 248, 0.06) 42%, transparent 72%) !important;
}

/*
 * One logo for both themes: in dark mode sit it on a light plate
 * so any client upload (dark, light, or color) stays readable — no invert filters.
 * Plate width/height follow the image (theme CSS uses a fixed 145px .head-logo).
 */
.hm-logo-wrap .main-lg {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  line-height: 0 !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 10px 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  box-sizing: border-box !important;
}

.hm-logo-wrap .main-lg img,
.hm-logo-img {
  filter: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  max-width: min(320px, 78vw) !important;
  max-height: 88px !important;
  object-fit: contain !important;
}

.head-logo,
.head-logo.float-left {
  width: auto !important;
  max-width: min(280px, 46vw) !important;
  height: auto !important;
  overflow: visible !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  line-height: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
  box-sizing: border-box !important;
}

.head-logo a {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  line-height: 0 !important;
}

.head-logo img,
.head-logo.float-left img {
  filter: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 52px !important;
  object-fit: contain !important;
}

.login-bg-st {
  background-color: var(--dk-surface-2) !important;
}

.log-txt-d,
.log-input,
.lg-ic {
  color: var(--dk-accent) !important;
  border-color: rgba(20, 184, 166, 0.45) !important;
}

.reg-txt {
  border-bottom-color: rgba(94, 234, 212, 0.35) !important;
}

.popup-options-p,
.drp-usrname,
.snd-em-p,
.no-rslt-txt,
.suc-p {
  color: var(--dk-text-muted) !important;
}

.fv-rt,
.fv-twtr,
.brd-bt,
.tr-hd {
  border-color: var(--dk-border) !important;
}

.fv-ct-a {
  color: var(--dk-text) !important;
}

.fv-ct-a:hover {
  background: var(--dk-surface-2) !important;
}

.select2-dropdown,
.select2-container--default .select2-selection--single {
  background: var(--dk-surface-2) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}

/* AI insight / chat cards on dark */
.ai-rslt-dv,
.ai-insight-card,
.wb-ai-insight,
.web-ai-rslt,
.ai-insight-wrap,
.ai-chat-wrap,
.ai-answer-panel,
.ai-style-chip,
.ai-chat-msg,
.ai-chat-composer,
.ai-chat-panel {
  background: var(--dk-surface) !important;
  background-image: none !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

.ai-insight-title,
.wb-ai-insight-title,
.web-ai-rslt h4,
.ai-chat-title,
.ai-format-label {
  color: #5eead4 !important;
}

.ai-insight-query,
.wb-ai-insight-sub,
.ai-chat-sub {
  color: var(--dk-text-muted) !important;
}

.ai-insight-powered,
.wb-ai-powered {
  background: rgba(20, 184, 166, 0.15) !important;
  color: #5eead4 !important;
  border-color: rgba(94, 234, 212, 0.35) !important;
}

.ai-insight-close,
.wb-ai-close,
.ai-chat-close,
.ai-chat-btn-text {
  background: var(--dk-surface-2) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}

/* AI action toolbar — professional outline style on dark */
.ai-action-btn,
.ai-action-quick,
.ai-action-detail,
.ai-action-summary,
.ai-chat-open-btn {
  background: var(--dk-surface) !important;
  background-image: none !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

.ai-action-btn:hover,
.ai-action-quick:hover,
.ai-action-detail:hover,
.ai-action-summary:hover,
.ai-chat-open-btn:hover {
  background: var(--dk-surface-2) !important;
  border-color: rgba(20, 184, 166, 0.55) !important;
  color: #5eead4 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.ai-action-btn:focus {
  border-color: var(--dk-accent) !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.22) !important;
}

.ai-action-btn i {
  background: rgba(20, 184, 166, 0.18) !important;
  color: #5eead4 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ai-action-detail i,
.ai-action-summary i,
.ai-action-quick i,
.ai-chat-open-btn i {
  background: rgba(20, 184, 166, 0.18) !important;
  color: #5eead4 !important;
}

.ai-format-chip {
  background: var(--dk-surface-2) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}

.ai-format-chip:hover {
  border-color: rgba(20, 184, 166, 0.55) !important;
  color: #5eead4 !important;
}

.ai-format-chip.active {
  background: var(--dk-accent-2) !important;
  border-color: var(--dk-accent-2) !important;
  color: #fff !important;
}

.ai-chat-input,
.ai-chat-composer textarea,
.ai-chat-composer input {
  background: var(--dk-bg-2) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}

#answerp,
#answerp iframe,
#myIframe,
.wb-ai-body,
.wb-ai-body iframe {
  color: var(--dk-text) !important;
  background: transparent !important;
}

/* Keep accent buttons readable */
.bt-cntr,
.popup-options-btn,
.reg-btn,
.log-bt,
.usr-drp-lgout,
.rslt-cmnt-btn,
.add-srch-btn {
  background: var(--dk-accent-2) !important;
  color: #fff !important;
}

.bt-cntr:hover,
.popup-options-btn:hover,
.reg-btn:hover,
.log-bt:hover,
.usr-drp-lgout:hover {
  background: #0f766e !important;
}

/* Language / country dropdowns (homepage footer) */
.slct-language,
.lng-spn-1,
.lng-spn-2,
.slct-country,
#cntry_name {
  color: var(--dk-text) !important;
}

.main-lang-drp-div,
.main-lang-drp-div.active,
.main-lang-drp-div-inner,
.cntry-drp-outr,
.cntry-drp-outr.active,
.cntry-drp-inner {
  background: var(--dk-surface) !important;
  background-color: var(--dk-surface) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

.main-lang-drp,
.main-lang-drp.lang-drp-clr,
a.main-lang-drp,
a.lang-drp-clr,
.lang-drp-clr,
.cntry-drp,
a.cntry-drp {
  color: var(--dk-text) !important;
  background: transparent !important;
}

.lng-spn-2:hover .main-lang-drp-div,
.main-lang-drp-div:hover {
  color: var(--dk-text) !important;
}

.main-lang-drp:hover,
.cntry-drp:hover {
  background: var(--dk-surface-2) !important;
  color: #fff !important;
}

.chng-thm,
select.chng-thm,
select.chng-thm option {
  color: var(--dk-text) !important;
  background: var(--dk-surface) !important;
  background-color: var(--dk-surface) !important;
  border-color: var(--dk-border) !important;
}

.lng-spn-2-ic,
.cntry-spn-2-ic {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* Profile / categories / member — colors only (keep original layout + responsive) */
.reg-h,
.fullwidth.float-left.reg-h {
  background: var(--dk-bg) !important;
  background-color: var(--dk-bg) !important;
}

.prfl-sub-hdr,
.prfl-bg {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.sub-hd-lnk {
  background: var(--dk-surface) !important;
  color: var(--dk-text) !important;
  box-shadow: none !important;
  border: 1px solid var(--dk-border);
}

.sub-hd-lnk:hover,
.sub-hd-lnk.active {
  background: var(--dk-surface-2) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-color: var(--dk-accent);
}

.my-pr-outr,
.reg-frm {
  background: var(--dk-surface) !important;
  background-color: var(--dk-surface) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.fv-outr {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  max-width: none !important;
  float: left !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  padding: 0 !important;
}

.fv-lt,
.fv-rt {
  background: transparent !important;
  box-shadow: none !important;
}

.fv-rt {
  border-left-color: var(--dk-border) !important;
}

.fv-rslt {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom-color: var(--dk-border) !important;
}

.mng-ct-brd {
  background: transparent !important;
  border-bottom-color: var(--dk-border) !important;
  box-shadow: none !important;
}

.reg-head,
.my-pr-txt-lt,
.my-pr-txt-rt,
.ctg-lt-txt,
.sb-txt,
.prfl-menu {
  color: var(--dk-text) !important;
}

.my-pr-outr .reg-txt,
.my-pr-outr .ctg-inpt,
.reg-frm .reg-txt,
.chng-pass-lt .reg-txt,
.ctg-inpt {
  background: var(--dk-bg-2) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border) !important;
  border-radius: 8px;
  box-shadow: none !important;
}

.ctg-bt,
.mng-edt,
.pr-btn {
  background: var(--dk-accent-2) !important;
  color: #fff !important;
}

.ctg-bt:hover,
.mng-edt:hover,
.pr-btn:hover {
  background: #0f766e !important;
}

.mng-dlt {
  background: #e11d48 !important;
  color: #fff !important;
}

.mng-dlt:hover {
  background: #be123c !important;
}

.footer-outer,
.foorer-bg,
.footr-bg,
.ftr-bg-res,
.ftr-bing {
  background: var(--dk-bg) !important;
  background-image: none !important;
  border-top: 1px solid var(--dk-border) !important;
}

.footer-outer[style*="border-top"],
div[style*="border-top: 1px solid #dfdfdf"] {
  border-top: 1px solid var(--dk-border) !important;
  background: var(--dk-bg) !important;
}

.ftr-sb,
.cpy-rt,
.ftr-lnk-main,
.bing-ftr-clr {
  color: var(--dk-text-muted) !important;
}

/* Header bar on inner pages */
body > .fullwidth.float-left.position-relative,
.head-div {
  background: var(--dk-bg-2) !important;
  border-bottom-color: var(--dk-border) !important;
  box-shadow: none !important;
}

div[style*="border-bottom: 1px solid #ececec"] {
  background: var(--dk-bg-2) !important;
  border-bottom-color: var(--dk-border) !important;
  box-shadow: none !important;
}

/* Mobile profile drawer — colors only, keep fixed slide-in layout */
@media only screen and (max-width: 767px) {
  .prfl-menu {
    color: var(--dk-text) !important;
  }

  .prfl-sub-inner {
    background: var(--dk-surface) !important;
    border-left: 1px solid var(--dk-border) !important;
  }

  .sub-hd-lnk,
  .sub-hd-lnk:hover,
  .sub-hd-lnk.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--dk-text) !important;
  }

  .sub-hd-lnk.active,
  .sub-hd-lnk:hover {
    background: var(--dk-surface-2) !important;
  }

  .fv-rt {
    border-left: none !important;
  }

  .my-pr-outr,
  .reg-frm {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
    float: left !important;
    box-sizing: border-box;
  }
}