/* Bell-tone overlay and compact My Info. Screen-only: preserve print, data, auth. */
@media screen {
  /* Prior dark-mode pass gave the image its own square; remove only backing. */
  html[data-oreumup-theme="dark"] body #oreumupInfoBtn.brand,
  html[data-oreumup-theme="dark"] body #mainHero .visual-card,
  html[data-oreumup-theme="dark"] body #oreumupInfoModal .app-info-brand,
  html[data-oreumup-theme="dark"] body #oreumupInfoModal .app-info-brand img {
    background:transparent!important;
    background-color:transparent!important;
    box-shadow:none!important;
  }
  html[data-oreumup-theme="dark"] body #oreumupInfoBtn.brand img,
  html[data-oreumup-theme="dark"] body #mainHero img.hero-logo,
  html[data-oreumup-theme="dark"] body #oreumupInfoModal .app-info-brand img {
    background:transparent!important;
    background-color:transparent!important;
    mix-blend-mode:screen;
    filter:brightness(2.3) saturate(1.4) contrast(1.1);
  }
  /* Keep logos as actual images; no changes to original files/QR. */
  html[data-oreumup-theme="dark"] body #oreumupInfoModal #oreumupInfoTitle{
    color:var(--oreumup-bell-text,#fff)!important;
  }
  #plusModal .plus-folder-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  #plusModal .plus-folder-head strong{flex:1 1 120px;min-width:0;overflow-wrap:anywhere}
  #plusModal .plus-folder-head .plus-folder-rename{min-height:34px;padding:5px 9px;font-size:12px}
  #memberTestModal .member-test-card{padding:12px!important}
  #memberTestModal .modal-head{margin-bottom:6px}
  #memberTestModal .modal-head p{display:none!important}
  #memberTestModal .font-size-settings,
  #memberTestModal #displayThemeSettings{padding:12px!important;margin:8px 0!important;border-radius:12px!important}
  #memberTestModal .font-size-help,
  #memberTestModal .font-size-preview,
  #memberTestModal .font-size-save-note,
  #memberTestModal #displayThemeHelp,
  #memberTestModal #displayToneHelp,
  #memberTestModal #displayThemeSaveNote{display:none!important}
  #memberTestModal .font-size-heading h3,
  #memberTestModal .display-theme-heading h3{font-size:calc(14px * var(--oreumup-font-scale,1))!important}
  #memberTestModal .font-size-heading,
  #memberTestModal .display-theme-heading{margin-bottom:8px!important}
  #memberTestModal .font-size-step{min-height:50px!important;padding:4px 6px!important;border-radius:9px!important}
  #memberTestModal .font-size-symbol{font-size:calc(18px * var(--oreumup-font-scale,1))!important}
  #memberTestModal #fontSizeValue{font-size:calc(18px * var(--oreumup-font-scale,1))!important}
  #memberTestModal .font-size-value{gap:1px}
  #memberTestModal .font-size-bottom{margin-top:7px!important}
  #memberTestModal #fontSizeReset{min-height:36px!important;padding:5px 9px!important}
  #memberTestModal .display-tone-controls{gap:7px!important}
  #memberTestModal .display-tone-step{min-height:46px!important;padding:5px 7px!important}
  #memberTestModal .display-theme-endpoints,
  #memberTestModal .display-theme-note{display:none!important}
  #memberTestModal .myinfo-help{margin:8px 0!important;border:1px solid #667c6d;border-radius:10px;padding:0 10px}
  #memberTestModal .myinfo-help>summary{min-height:36px;display:flex;align-items:center;cursor:pointer;font-size:12px;font-weight:800;list-style:none}
  #memberTestModal .myinfo-help>summary::after{content:"⌄";margin-left:auto}
  #memberTestModal .myinfo-help[open]>summary::after{content:"⌃"}
  #memberTestModal .myinfo-help p{margin:0 0 10px;font-size:12px;line-height:1.5}
  @media(max-width:520px){
    #memberTestModal .member-test-card{padding:10px!important}
    #memberTestModal .font-size-settings,#memberTestModal #displayThemeSettings{padding:9px!important}
    #memberTestModal .font-size-stepper{gap:6px!important}
  }
}
@media print {
  #memberTestModal .myinfo-help{display:none!important}
}