/* wg-brand.css — D401: one colour scheme for every page (member portal, admin, 收款看板, 数据报表), taken from
   the WG团购 logo: blue #0C5BA6 → sky #087EBE → teal #2BB3A3, orange #F79534 accent. Loaded after each page's
   Tailwind file, so the pages keep their class names; the emerald utilities they use are remapped here
   (generated from the classes actually present). Success boxes that must read as "OK" use their own CSS. */
:root{--wg-b50:#eef6fc;--wg-b100:#d6eaf8;--wg-b200:#aed4f0;--wg-b300:#7cb9e6;--wg-b400:#3f97d4;--wg-b500:#087EBE;--wg-b600:#0C5BA6;--wg-b700:#0E4679;--wg-b800:#0b3a64;--wg-b900:#0a2f52;--wg-b950:#071f38;--wg-teal:#2BB3A3;--wg-orange:#F79534;
  --wg-bar:linear-gradient(100deg,#0C5BA6 0%,#087EBE 55%,#2BB3A3 100%);--wg-edge:linear-gradient(90deg,#2BB3A3,#F79534)}
/* the top bar on every page */
.wg-brandbar,.banner{background-color:#0C5BA6!important;background-image:var(--wg-bar)!important}
.wg-brandbar::after,.banner::after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--wg-edge)}
.wg-brandbar,.banner{position:sticky}
/* remapped utilities (44) */
html .active\:bg-emerald-50:active{background-color:#eef6fc}
html .active\:bg-emerald-800:active{background-color:#0b3a64}
html .bg-emerald-100{background-color:#d6eaf8}
html .bg-emerald-50{background-color:#eef6fc}
html .bg-emerald-50\/40{background-color:rgb(238 246 252 / 0.4)}
html .bg-emerald-500{background-color:#087EBE}
html .bg-emerald-500\/20{background-color:rgb(8 126 190 / 0.2)}
html .bg-emerald-600{background-color:#0C5BA6}
html .bg-emerald-700{background-color:#0E4679}
html .bg-emerald-800{background-color:#0b3a64}
html .bg-emerald-900{background-color:#0a2f52}
html .bg-emerald-950{background-color:#071f38}
html .bg-emerald-950\/40{background-color:rgb(7 31 56 / 0.4)}
html .border-emerald-200{border-color:#aed4f0}
html .border-emerald-300{border-color:#7cb9e6}
html .border-emerald-500{border-color:#087EBE}
html .border-emerald-500\/30{border-color:rgb(8 126 190 / 0.3)}
html .border-emerald-600{border-color:#0C5BA6}
html .border-emerald-700{border-color:#0E4679}
html.dark .dark\:active\:bg-emerald-900\/20:active{background-color:rgb(10 47 82 / 0.2)}
html.dark .dark\:bg-emerald-900\/10{background-color:rgb(10 47 82 / 0.1)}
html.dark .dark\:bg-emerald-900\/30{background-color:rgb(10 47 82 / 0.3)}
html.dark .dark\:bg-emerald-900\/40{background-color:rgb(10 47 82 / 0.4)}
html.dark .dark\:border-emerald-700{border-color:#0E4679}
html.dark .dark\:border-emerald-800{border-color:#0b3a64}
html.dark .dark\:hover\:text-emerald-300:hover{color:#7cb9e6}
html.dark .dark\:text-emerald-200{color:#aed4f0}
html.dark .dark\:text-emerald-300{color:#7cb9e6}
html.dark .dark\:text-emerald-400{color:#3f97d4}
html.dark .dark\:to-emerald-900\/10{--tw-gradient-to:rgb(10 47 82 / 0.1) var(--tw-gradient-to-position)}
html .focus\:ring-emerald-500:focus{--tw-ring-color:#087EBE}
html .hover\:bg-emerald-700:hover{background-color:#0E4679}
html .hover\:border-emerald-400:hover{border-color:#3f97d4}
html .hover\:text-emerald-800:hover{color:#0b3a64}
html .ring-emerald-500{--tw-ring-color:#087EBE}
html .text-emerald-100{color:#d6eaf8}
html .text-emerald-300{color:#7cb9e6}
html .text-emerald-400{color:#3f97d4}
html .text-emerald-500{color:#087EBE}
html .text-emerald-600{color:#0C5BA6}
html .text-emerald-700{color:#0E4679}
html .text-emerald-800{color:#0b3a64}
html .to-emerald-50\/30{--tw-gradient-to:rgb(238 246 252 / 0.3) var(--tw-gradient-to-position)}
html .to-emerald-50\/40{--tw-gradient-to:rgb(238 246 252 / 0.4) var(--tw-gradient-to-position)}
/* inside the top bars: light-on-blue */
.wg-brandbar .text-slate-400,.wg-brandbar .text-slate-300,.banner .text-slate-400{color:rgb(255 255 255 / .82)!important}
.wg-brandbar a.bg-slate-800,.wg-brandbar button.bg-slate-800,.wg-brandbar .bg-slate-800,.wg-brandbar .bg-slate-700,.banner .bg-slate-800,.banner .bg-slate-700{background-color:rgb(255 255 255 / .16)!important;border-color:rgb(255 255 255 / .30)!important;color:#fff!important}
.wg-brandbar .hover\:bg-slate-700:hover,.wg-brandbar .hover\:bg-slate-600:hover,.banner .hover\:bg-slate-700:hover{background-color:rgb(255 255 255 / .26)!important}
.wg-brandbar .border-slate-700,.wg-brandbar .border-slate-600{border-color:rgb(255 255 255 / .30)!important}
/* status pills in a bar keep their meaning (green = live, red = none) on a white pill */
.wg-brandbar .bg-emerald-500\/20{background-color:#fff!important;color:#047857!important;border-color:transparent!important;font-weight:700!important}
.wg-brandbar .bg-red-500\/20{background-color:#fff!important;color:#b91c1c!important;border-color:transparent!important;font-weight:700!important}