/**/#dm .dmSocialHub:not(.gapSpacing) .socialHubInnerDiv a:not(:last-child){margin-right:5px}.socialHubIcon{display:flex!important;align-items:center;justify-content:center}.socialHubIcon svg{fill:currentColor;width:80%;height:80%}
.socialHubIcon.style1,.socialHubIcon.style4,.socialHubIcon.style6,.socialHubIcon.style7{background:#617379}.socialHubIcon.style7{box-shadow:0 5px 0 0 #475459}.style1.dmSocialTiktok,.style4.dmSocialTiktok{background:#000}
.style1.dmSocialFacebook,.style4.dmSocialFacebook{background:#1877f2}.style1.dmSocialTwitter,.style4.dmSocialTwitter{background:#0f1419}.style1.dmSocialGooglePlus,.style4.dmSocialGooglePlus{background:#da4835}
.style1.dmSocialInstagram,.style4.dmSocialInstagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)!important}.style1.dmSocialYoutube,.style4.dmSocialYoutube{background:red}
.style1.dmSocialLinkedin,.style4.dmSocialLinkedin{background:#2867b2}.style1.dmSocialYelp,.style4.dmSocialYelp{background:#e43340}.style1.dmSocialPinterest,.style4.dmSocialPinterest{background:#c8232c}
.style1.dmSocialVimeo,.style4.dmSocialVimeo{background:#1ab7ea}.style1.dmSocialPicasa,.style4.dmSocialPicasa{background:#be81d1}.style1.dmSocialFoursquare,.style4.dmSocialFoursquare{background:#ef4b78}
.style1.dmSocialRss,.style4.dmSocialRss{background:#f39200}.style1.dmSocialReddit,.style4.dmSocialReddit{background:#ff4500}.style1.dmSocialEmail,.style4.dmSocialEmail{background:#617379}.style1.dmSocialSnapchat,.style4.dmSocialSnapchat{background:#fffc00}
.style1.dmSocialTripadvisor,.style4.dmSocialTripadvisor{background:#589442}.style1.dmSocialWaze,.style4.dmSocialWaze{background:#56cbe7}.style1.dmSocialGoogleMyBusiness,.style4.dmSocialGoogleMyBusiness{background:#477cdf}
.style1.dmSocialWhatsapp,.style4.dmSocialWhatsapp{background:#25d366}.style1.dmSocialPhone,.style4.dmSocialPhone{background:#616c79}.style1:after{content:"";width:44px;height:28px;display:block;position:absolute;top:0;left:0;z-index:-1;border-radius:10px}
.style1.dmSocialEmail:after,.style1.dmSocialFacebook:after,.style1.dmSocialFoursquare:after,.style1.dmSocialGoogleMyBusiness:after,.style1.dmSocialGooglePlus:after,.style1.dmSocialInstagram:after,.style1.dmSocialLinkedin:after,.style1.dmSocialPhone:after,.style1.dmSocialPicasa:after,.style1.dmSocialPinterest:after,.style1.dmSocialReddit:after,.style1.dmSocialRss:after,.style1.dmSocialSnapchat:after,.style1.dmSocialTripadvisor:after,.style1.dmSocialTwitter:after,.style1.dmSocialVimeo:after,.style1.dmSocialYelp:after,.style1.dmSocialYoutube:after{background:#fff;opacity:.2}
.style2.dmSocialTiktok{color:#000}.style2.dmSocialFacebook{color:#1877f2}.style2.dmSocialTwitter{color:#0f1419}.style2.dmSocialGooglePlus{color:#da4835}.style2.dmSocialInstagram:before{background-image:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)!important;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.style2.dmSocialYoutube{color:red}.style2.dmSocialLinkedin{color:#2867b2}.style2.dmSocialYelp{color:#e43340}.style2.dmSocialPinterest{color:#c8232c}.style2.dmSocialVimeo{color:#1ab7ea}.style2.dmSocialPicasa{color:#be81d1}
.style2.dmSocialFoursquare{color:#ef4b78}.style2.dmSocialRss{color:#f39200}.style2.dmSocialReddit{color:#ff4500}.style2.dmSocialEmail{color:#617379}.style2.dmSocialSnapchat{color:#fffc00}.style2.dmSocialTripadvisor{color:#589442}
.style2.dmSocialGoogleMyBusiness:before{color:#477cdf}.style2.dmSocialWaze:before{color:#56cbe7}.style2.dmSocialWhatsapp:before{color:#25d366}.style2.dmSocialPhone{color:#616c79}.style6.dmSocialTiktok{background:#000}
.style6.dmSocialFacebook{background:#1877f2}.style6.dmSocialTwitter{background:#0f1419}.style6.dmSocialGooglePlus{background:#da4835}.style6.dmSocialInstagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)!important}
.style6.dmSocialYoutube{background:red}.style6.dmSocialLinkedin{background:#2867b2}.style6.dmSocialYelp{background:#e43340}.style6.dmSocialPinterest{background:#c8232c}.style6.dmSocialVimeo{background:#1ab7ea}
.style6.dmSocialPicasa{background:#be81d1}.style6.dmSocialFoursquare{background:#ef4b78}.style6.dmSocialRss{background:#f39200}.style6.dmSocialReddit{background:#ff4500}.style6.dmSocialEmail{background:#617379}
.style6.dmSocialSnapchat{background:#fffc00}.style6.dmSocialTripadvisor{background:#589442}.style6.dmSocialWaze{background:#56cbe7}.style6.dmSocialGoogleMyBusiness{background:#477cdf}.style6.dmSocialWhatsapp{background:#25d366}
.style6.dmSocialPhone{background:#616c79}.style7.dmSocialTiktok{background:#000}.style7.dmSocialFacebook{background:#1877f2;box-shadow:0 5px 0 0 #4b68a5}.style7.dmSocialTwitter{background:#0f1419}.style7.dmSocialGooglePlus{background:#da4835;box-shadow:0 5px 0 0 #c44130}
.style7.dmSocialInstagram{box-shadow:0 5px 0 0 #ad2271;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)!important}.style7.dmSocialYoutube{background:red;box-shadow:0 5px 0 0 #b3392c}
.style7.dmSocialLinkedin{background:#2867b2;box-shadow:0 5px 0 0 #1278b1}.style7.dmSocialYelp{background:#e43340;box-shadow:0 5px 0 0 #b62933}.style7.dmSocialPinterest{background:#c8232c;box-shadow:0 5px 0 0 #a21a2d}
.style7.dmSocialVimeo{background:#1ab7ea;box-shadow:0 5px 0 0 #1592bb}.style7.dmSocialPicasa{background:#be81d1;box-shadow:0 5px 0 0 #9867a7}.style7.dmSocialFoursquare{background:#ef4b78;box-shadow:0 5px 0 0 #da3b67}
.style7.dmSocialRss{background:#f39200;box-shadow:0 5px 0 0 #c27500}.style7.dmSocialReddit{background:#ff4500;box-shadow:0 5px 0 0 #ae5534}.style7.dmSocialEmail{background:#617379;box-shadow:0 5px 0 0 #475459}
.style7.dmSocialSnapchat{background:#fffc00;box-shadow:0 5px 0 0 #d1d05d}.style7.dmSocialTripadvisor{background:#589442;box-shadow:0 5px 0 0 #4e7b3e}.style7.dmSocialWaze{background:#56cbe7;box-shadow:0 5px 0 0 #475459}
.style7.dmSocialGoogleMyBusiness{background:#477cdf;box-shadow:0 5px 0 0 #475459}.style7.dmSocialWhatsapp{background:#25d366;box-shadow:0 5px 0 0 #475459}.style7.dmSocialPhone{background:#616c79;box-shadow:0 5px 0 0 #4a5458}/**/.imageWidget{position:relative}.imageWidget a,.imageWidget span.image-caption{font-style:italic;text-align:center}.imageWidget a[data-caption]::after,.imageWidget span[data-caption]::after{content:attr(data-caption);display:block;line-height:100%}
.imageWidget.with-caption a::after,.imageWidget.with-caption span.image-caption::after{margin-top:12px}.imageWidget img[width][height]{height:auto}[data-flex-site] #fcontainer .imageWidget:after,[data-flex-site] #flex-footer .imageWidget:after,[data-flex-site] #flex-header .imageWidget:after{content:none}
[data-flex-site] #fcontainer .imageWidget:before,[data-flex-site] #flex-footer .imageWidget:before,[data-flex-site] #flex-header .imageWidget:before{font-size:80px;transform:none}.imageWidget.hover img.hover-image,.imageWidget:hover img.hover-image{display:initial}
.imageWidget.hover.hasHover img:not(.hover-image),.imageWidget:hover.hasHover img:not(.hover-image){display:none!important}.imageWidget img.hover-image,.imageWidget img.logo-on-scroll{display:none}/**/@media(max-width:767px){body.dmRoot div[dmtemplateid]:not([dmtemplateid=SlideRightTopFloatM]) .dmHeader .multilingualWidget{position:absolute;top:14px;left:13px;margin-top:0}body.dmRoot div[dmtemplateid][dmtemplateid=SlideRightTopFloatM] .dmHeader .multilingualWidget{position:absolute;top:5px;right:17px}
}@media(min-width:768px) and (max-width:1024px){body:not(.responsiveTablet) #dm div[dmtemplateid=StandardLayoutMultiT] .dmHeader .multilingualWidget{position:absolute!important;top:5px!important;right:17px!important;left:initial!important}
}@media(max-width:767px){body.dmRoot .dmHeader .displayHidden-inner .multilingualWidget{top:0!important}}#dm_content div.dmRespCol div.multilingualWidget,#hcontainer div.dmRespCol div.multilingualWidget{width:auto!important;display:table!important}
.multilingualWidget.displayNone{display:none!important}.multilingualWidget>div{position:relative}.multilingualWidget{clear:both;margin:0;vertical-align:top;display:table!important;font-size:0;font-family:sans-serif}
.multilingualWidget .language{color:#888;display:inline-block}.multilingualWidget .language a{text-align:center;display:inline-block;color:inherit;border:#dadada 1px solid;background-color:#fff}.multilingualWidget .language a img{width:24px;height:26px;min-width:24px;min-height:26px}
.multilingualWidget .language a span{display:none;line-height:initial}.multilingualWidget .language a span.name{margin-top:5px;margin-left:7px;font-size:12px;font-weight:400;text-transform:capitalize}
.multilingualWidget .language a span.short-label{font-size:12px}.multilingualWidget .language a:after{line-height:initial}.multilingualWidget.open .current-language a:after{transform:rotate(-180deg)}.multilingualWidget .current-language a:after{transition:transform .2s}
.multilingualWidget.dropdown .language{width:100%}.multilingualWidget.dropdown .language a{display:block;padding:1px 5px}.multilingualWidget.dropdown .language.other-languages{position:absolute;z-index:800;max-height:0;overflow:hidden;transition:max-height .1s ease-in-out}
.multilingualWidget.dropdown .language.other-languages a{border-top:0!important}.multilingualWidget.dropdown .current-language{position:relative}.multilingualWidget.dropdown .current-language span.name{padding-right:25px}
.multilingualWidget.dropdown .dm-icon{font-size:9px;display:inline-block;position:absolute;top:46%;transform:translateY(-50%);transition:transform .2s;right:8px}.multilingualWidget.dropdown.open .dm-icon{transform:rotate(-180deg) translateY(50%)}
.multilingualWidget.dropdown.open .other-languages{display:block;max-height:300px}.multilingualWidget.dropdown .other-languages,.multilingualWidget.dropdown.flag-only .dm-icon,.multilingualWidget.inline span,.multilingualWidget.no-flag a img{display:none}
.multilingualWidget.dropdown.flag-only a{border:transparent 1px solid;background-color:transparent}.multilingualWidget.dropdown.flag-only.open .language a{background-color:rgba(0,0,0,.3);border:#dadada 1px solid}
.multilingualWidget.dropdown.long-label a{text-align:left;padding:2px 0 2px 5px;position:relative;box-sizing:border-box}.multilingualWidget.dropdown.long-label a span.name,.multilingualWidget.inline.flag-only .language,.multilingualWidget.inline.short-label.no-flag span.short-label{display:inline-block}
.multilingualWidget.dropdown.long-label.no-flag a{padding:7px 10px 9px}.multilingualWidget.dropdown.long-label.no-flag a span.name,.multilingualWidget.dropdown.short-label.no-flag a span.short-label{margin:0;display:inline-block}
.multilingualWidget.dropdown.short-label.no-flag a{padding:8px 22px 9px 10px;font-size:12px;min-height:32px;height:auto;box-sizing:border-box}.multilingualWidget.dropdown.short-label.no-flag .current-language a:after{top:12px}
.multilingualWidget.short-label span.short-label{text-transform:uppercase}.multilingualWidget.inline.flag-only a{padding:2px 5px;height:32px;box-sizing:border-box}.multilingualWidget.inline.flag-only .current-language a{box-shadow:inset 0 0 8px 0 rgba(0,0,0,.6);border-right:0;border-right-width:0!important;border-right-color:transparent!important;border-right-style:none!important}
.multilingualWidget.inline.flag-only .other-languages a:not(:last-child){border-right-width:0!important;border-right-color:transparent!important;border-right-style:none!important}.multilingualWidget.inline.flag-only .dm-icon,.multilingualWidget.inline.short-label.no-flag .dm-icon{display:none}
.multilingualWidget.inline.short-label.no-flag .current-language a{padding-right:0;border-right-width:0!important;border-right-color:transparent!important;border-right-style:none!important}.multilingualWidget.inline.short-label.no-flag .current-language a span.short-label{font-weight:700}
.multilingualWidget.inline.short-label.no-flag .other-languages a{border-left-color:transparent!important;border-left-width:0!important;border-left-style:none!important}.multilingualWidget.inline.short-label.no-flag .other-languages a:not(:last-child){padding-right:0;border-right-color:transparent!important;border-right-width:0!important;border-right-style:none!important}
.multilingualWidget.inline.short-label.no-flag a{position:relative;padding:8px 10px;font-size:12px;min-height:32px;height:auto;text-decoration:none}.multilingualWidget.inline.short-label.no-flag a:after{content:"/";position:absolute;top:8px;right:-7px;z-index:1;pointer-events:none}
.multilingualWidget.inline.short-label.no-flag a:hover .short-label{text-decoration:underline}.multilingualWidget.inline.short-label.no-flag .other-languages a:last-child:after{content:""}/**/.dmNewParagraph[data-version] .text-align-left{text-align:left!important}.dmNewParagraph[data-version] .text-align-center{text-align:center!important}.dmNewParagraph[data-version] .text-align-right{text-align:right!important}
.dmNewParagraph[data-version] .text-align-justify{text-align:justify!important}.dmNewParagraph[data-version] .ql-indent-1{padding:0 1em;padding-inline-end:0;padding-inline-start:3em}.dmNewParagraph[data-version] .ql-indent-2{padding:0 2em;padding-inline-end:0;padding-inline-start:6em}
.dmNewParagraph[data-version] .ql-indent-3{padding:0 3em;padding-inline-end:0;padding-inline-start:9em}.dmNewParagraph[data-version] .ql-indent-4{padding:0 4em;padding-inline-end:0;padding-inline-start:12em}
.dmNewParagraph[data-version] .ql-indent-5{padding:0 5em;padding-inline-end:0;padding-inline-start:15em}.dmNewParagraph[data-version] .ql-indent-6{padding:0 6em;padding-inline-end:0;padding-inline-start:18em}
.dmNewParagraph[data-version] .ql-indent-7{padding:0 7em;padding-inline-end:0;padding-inline-start:21em}.dmNewParagraph[data-version] .ql-indent-8{padding:0 8em;padding-inline-end:0;padding-inline-start:24em}
.dmNewParagraph[data-version] .ql-indent-9{padding:0 9em;padding-inline-end:0;padding-inline-start:27em}.dmNewParagraph[data-version]{line-height:initial}.dmNewParagraph[data-version] [class*=size-]{width:auto!important;height:auto!important}
.dmNewParagraph[data-version] h1,.dmNewParagraph[data-version] h2,.dmNewParagraph[data-version] h3,.dmNewParagraph[data-version] h4,.dmNewParagraph[data-version] h5,.dmNewParagraph[data-version] h6,.dmNewParagraph[data-version] ol,.dmNewParagraph[data-version] p,.dmNewParagraph[data-version] ul{margin-top:0;margin-bottom:0}
.dmNewParagraph[data-version] ol,.dmNewParagraph[data-version] ul{padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.dmNewParagraph[data-version] ol>li,.dmNewParagraph[data-version] ul>li{list-style-type:none;text-indent:-1.5em;margin:0 1em;margin-inline-end:0;margin-inline-start:2em}
.dmNewParagraph[data-version] ol>li:before,.dmNewParagraph[data-version] ul>li:before{min-width:1em;display:inline-block;margin-right:.5em;margin-inline-start:0;margin-inline-end:.5em;text-align:right;text-align:end}
.dmNewParagraph[data-version] ul .ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-1}.dmNewParagraph[data-version] ul .ql-indent-1:before{font-weight:700;content:"○"}
.dmNewParagraph[data-version] ul .ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-2}.dmNewParagraph[data-version] ul .ql-indent-2:before,.dmNewParagraph[data-version] ul .ql-indent-3:before,.dmNewParagraph[data-version] ul .ql-indent-4:before,.dmNewParagraph[data-version] ul .ql-indent-5:before,.dmNewParagraph[data-version] ul .ql-indent-6:before,.dmNewParagraph[data-version] ul .ql-indent-7:before,.dmNewParagraph[data-version] ul .ql-indent-8:before,.dmNewParagraph[data-version] ul .ql-indent-9:before{font-weight:700;content:"■"}
.dmNewParagraph[data-version] ul .ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-3}.dmNewParagraph[data-version] ul .ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9;counter-increment:list-4}
.dmNewParagraph[data-version] ul .ql-indent-5{counter-reset:list-6 list-7 list-8 list-9;counter-increment:list-5}.dmNewParagraph[data-version] ul .ql-indent-6{counter-reset:list-7 list-8 list-9;counter-increment:list-6}
.dmNewParagraph[data-version] ul .ql-indent-7{counter-reset:list-8 list-9;counter-increment:list-7}.dmNewParagraph[data-version] ul .ql-indent-8{counter-reset:list-9;counter-increment:list-8}.dmNewParagraph[data-version] ul .ql-indent-9{counter-reset:list-10 list-9;counter-increment:list-9}
.dmNewParagraph[data-version] ul>li:before{font-weight:700;content:"•";font-family:Arial}.dmNewParagraph[data-version] ul.custom-list-1>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"○";transform:scale(1);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-2>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"★";transform:scale(.7);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-3>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"➞";transform:scale(.8);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-4>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"＋";transform:scale(.7);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-5>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"－";transform:scale(.7);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-6>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"✓";transform:scale(.8);transform-origin:center right}
.dmNewParagraph[data-version] ul.custom-list-7>li:not([class^=ql-indent-]):not([class*=" ql-indent-"]):before{content:"✗";transform:scale(.8);transform-origin:center right}
.dmNewParagraph[data-version] ol .ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-1}.dmNewParagraph[data-version] ol .ql-indent-1:before{content:counter(list-1,lower-alpha) ". "}
.dmNewParagraph[data-version] ol .ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-2}.dmNewParagraph[data-version] ol .ql-indent-2:before{content:counter(list-2,lower-roman) ". "}
.dmNewParagraph[data-version] ol .ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-3}.dmNewParagraph[data-version] ol .ql-indent-3:before{content:counter(list-3,decimal) ". "}
.dmNewParagraph[data-version] ol .ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9;counter-increment:list-4}.dmNewParagraph[data-version] ol .ql-indent-4:before{content:counter(list-4,lower-alpha) ". "}
.dmNewParagraph[data-version] ol .ql-indent-5{counter-reset:list-6 list-7 list-8 list-9;counter-increment:list-5}.dmNewParagraph[data-version] ol .ql-indent-5:before{content:counter(list-5,lower-roman) ". "}
.dmNewParagraph[data-version] ol .ql-indent-6{counter-reset:list-7 list-8 list-9;counter-increment:list-6}.dmNewParagraph[data-version] ol .ql-indent-6:before{content:counter(list-6,decimal) ". "}
.dmNewParagraph[data-version] ol .ql-indent-7{counter-reset:list-8 list-9;counter-increment:list-7}.dmNewParagraph[data-version] ol .ql-indent-7:before{content:counter(list-7,lower-alpha) ". "}
.dmNewParagraph[data-version] ol .ql-indent-8{counter-reset:list-9;counter-increment:list-8}.dmNewParagraph[data-version] ol .ql-indent-8:before{content:counter(list-8,lower-roman) ". "}
.dmNewParagraph[data-version] ol .ql-indent-9{counter-reset:list-10 list-9;counter-increment:list-9}.dmNewParagraph[data-version] ol .ql-indent-9:before{content:counter(list-9,decimal) ". "}
.dmNewParagraph[data-version] ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.dmNewParagraph[data-version] ol li:before{content:counter(list-0,decimal) ". "}
.dmNewParagraph[data-version] a{vertical-align:initial}@media(min-width:768px) and (max-width:1024px){.dmNewParagraph[data-version] .t-text-align-left{text-align:left!important}.dmNewParagraph[data-version] .t-text-align-center{text-align:center!important}
.dmNewParagraph[data-version] .t-text-align-right{text-align:right!important}.dmNewParagraph[data-version] .t-text-align-justify{text-align:justify!important}}@media(max-width:767px){.dmRoot .dmNewParagraph[data-version] .m-text-align-left{text-align:left!important}
.dmRoot .dmNewParagraph[data-version] .m-text-align-center{text-align:center!important}.dmRoot .dmNewParagraph[data-version] .m-text-align-right{text-align:right!important}.dmRoot .dmNewParagraph[data-version] .m-text-align-justify{text-align:justify!important}
}.inlineBindingLink{color:inherit!important;text-decoration:inherit!important}
/* Custom Widgets Styles */
@charset "UTF-8";
/* ── Editor placeholder (Option A) ─────────────────────────────────────────
   Visible by default in the editor (the boot code never runs there).
   Hidden immediately at boot on live/preview pages via #mf-editor-placeholder
   display:none set as the very first act of _mfRegFormBoot().
   All elements are purely decorative divs — no real inputs, no IDs that the
   boot code references, no event listeners. Fully inert.
────────────────────────────────────────────────────────────────────────── */
.mf-editor-placeholder {
  width: 100%;
  max-width: 714px;
  margin: 0 auto;
  padding: 20px 32px 28px;
  box-sizing: border-box;
  /* Keep the container itself clickable so the editor can select the widget,
     but block all interaction on the children so nothing is actually live.
     position + z-index create a stacking context the editor hit-test resolves
     correctly — without these the editor overlay can intercept the click. */
  pointer-events: auto;
  user-select: none;
  cursor: default;
  position: relative;
  z-index: 1;
}

.mf-editor-placeholder * {
  pointer-events: none;
  user-select: none;
}

.mf-ep-header {
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--mfw-border, #e5e7eb);
}

.mf-ep-title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: rgb(255, 0, 117) !important;
  margin: 0 0 3px !important;
  font-family: var(--mfw-font-family-heading, system-ui, sans-serif) !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  font-style: normal !important;
}

.mf-ep-subtitle {
  font-size: 0.8125rem;
  color: var(--mfw-text-subtle, #6b7280);
  margin: 0;
  font-style: italic;
}

.mf-ep-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mf-ep-row {
  display: flex;
  gap: 14px;
  width: 100%;
}

.mf-ep-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}

.mf-ep-field-narrow {
  flex: 0 0 28%;
}

.mf-ep-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mfw-text-subtle, #6b7280);
  line-height: 1.2;
}

.mf-ep-input {
  height: 33px;
  background: var(--mfw-input-bg, #ffffff);
  border: 1px solid var(--mfw-input-border, #c0c5cc);
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 9px;
  font-size: 0.875rem;
  color: var(--mfw-text-subtle, #9ca3af);
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
}

.mf-ep-select {
  color: var(--mfw-text-subtle, #9ca3af);
}

.mf-ep-phone {
  display: flex;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.mf-ep-idd {
  flex: 0 0 64px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mfw-table-col-header-bg, #f3f4f6);
  border-right: 1px solid var(--mfw-input-border, #c0c5cc);
  font-size: 0.8rem;
  color: var(--mfw-text-muted, #374151);
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
  flex-shrink: 0;
  padding: 0 8px;
}

.mf-ep-phone-local {
  flex: 1;
}

.mf-ep-btn-row {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.mf-ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 44px;
  background: rgba(255, 0, 117, 0.28);
  border: 2px solid rgba(255, 0, 117, 0.35);
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
  letter-spacing: 0.01em;
}

.widget-cac361 {
  display: block;
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
  padding: 20px 0;
  position: relative;
  pointer-events: auto;
  z-index: 1;
  background: rgba(255, 255, 255, 0.01);
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
}

/* Monitor Mode styles removed — now injected by __mfMonitorDisplay.renderPlaceholder() v2.0 */
/* ── Default header (verification state only) ──────────────────────────── */
.mf-reg-header {
  padding: 16px 32px 12px;
}

.mf-reg-title {
  font-size: 1.3rem;
  font-weight: var(--mfw-font-weight-heading, 700);
  color: rgb(255, 0, 117);
  margin: 0;
}

/* ── Unified verified identity bar ─────────────────────────────────────── */
/* Replaces both the old header and the floating logged-in badge.
   Shows: ✓ Verified · Name · House · Phone · email        [Log out] */
.mf-verified-bar {
  padding: 0;
  background: #f0fdf4;
  border-bottom: 1px solid #bbf7d0;
}

.mf-verified-bar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 32px;
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body, 400);
  color: var(--mfw-text-muted, #374151);
}

.mf-verified-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #16a34a;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: var(--mfw-font-weight-ui, 700);
  letter-spacing: 0.04em;
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

.mf-verified-chip svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.mf-verified-name {
  font-weight: var(--mfw-font-weight-ui, 700);
  color: var(--mfw-text, #111827);
}

.mf-verified-house,
.mf-verified-phone,
.mf-verified-email {
  color: var(--mfw-text-subtle, #6b7280);
  font-size: 0.8125rem;
}

.mf-verified-sep {
  color: var(--mfw-border, #d1d5db);
  font-size: 0.8125rem;
}

/* Pushes Log out button to the far right */
.mf-verified-bar-right {
  margin-left: auto;
  flex-shrink: 0;
}

.mf-logout-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mfw-text-muted, #166534);
  font-size: 0.75rem;
  font-weight: var(--mfw-font-weight-body, 400);
  padding: 3px 0;
  text-decoration: underline;
  line-height: 1;
  white-space: nowrap;
}

.mf-logout-btn:hover {
  color: var(--mfw-text, #14532d);
}

@media (max-width: 767px) {
  .mf-verified-bar-inner {
    padding: 10px 20px;
  }
  .mf-verified-bar-right {
    margin-left: 0;
    width: 100%;
  }
}
/* ── Container ──────────────────────────────────────────────────────────── */
.mf-reg-container {
  background: rgba(255, 255, 255, 0.01);
  border-radius: 12px;
  box-shadow: none;
  width: 100%;
  max-width: 714px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}

/* ── Form shell ─────────────────────────────────────────────────────────── */
.mf-reg-form {
  padding: 0 32px 24px;
  position: relative;
  z-index: 0;
  min-height: 900px;
}

.mf-form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Profile top block: photo left + heading right ─────────────────────── */
.mf-profile-top-block {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 4px 0 8px;
}

.mf-profile-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mf-photo-label {
  font-size: 0.6875rem;
  font-weight: var(--mfw-font-weight-ui, 700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mfw-text-subtle, #6b7280);
  text-align: center;
  cursor: pointer;
}

.mf-photo-uploading {
  font-size: 0.625rem;
  font-weight: var(--mfw-font-weight-body, 400);
  color: var(--mfw-text-subtle, #6b7280);
  text-align: center;
  font-style: italic;
}

/* ── Validation failure banner ──────────────────────────────────────────── */
.mf-photo-required {
  color: #dc2626;
}

.mf-profile-intro-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 4px;
}

.mf-profile-heading {
  font-size: 1.15rem;
  font-weight: var(--mfw-font-weight-heading, 700);
  font-family: var(--mfw-font-family-heading, system-ui, sans-serif);
  color: var(--mfw-text, #111827);
  margin: 0 0 4px;
}

.mf-profile-subtext {
  font-size: 0.8125rem;
  font-weight: var(--mfw-font-weight-body);
  color: var(--mfw-text-subtle, #6b7280);
  margin: 0;
}

/* ── Profile header: name · house · email + verified chip ───────────────── */
.mf-profile-header {
  padding: 16px 0 12px;
  margin-bottom: 16px;
}

.mf-profile-title {
  font-size: 1.25rem;
  font-weight: var(--mfw-font-weight-heading, 700);
  color: var(--mfw-text, #111827);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  font-family: var(--mfw-font-family-heading, system-ui, sans-serif);
}

.mf-profile-name-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0 0 4px;
}

/* ── Defeat Duda theme h2 overrides on .mf-profile-title ──────────────────
   Duda injects multiple rules targeting #dm div.dmContent h2 (and .dmInner h2)
   that set Poppins/Montserrat, 30px, rgb(51,51,51), font-weight:bold etc.
   These dominate a plain .mf-profile-title rule.
   Adding .widget-cac361 scope + the element tag brings our specificity above
   every Duda rule in the cascade. !important seals it against inline styles. */
.widget-cac361 h2.mf-profile-title,
.widget-cac361 .mf-profile-title {
  font-size: 1.875rem !important;
  font-weight: var(--mfw-font-weight-heading, 700) !important;
  color: var(--mfw-text, #111827) !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.01em !important;
  font-family: var(--mfw-font-family-heading, system-ui, sans-serif) !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  font-style: normal !important;
  direction: ltr !important;
  text-transform: none !important;
}

/* Circular mugshot in header */
.mf-profile-header-mugshot {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--mfw-border, #e5e7eb);
  flex-shrink: 0;
  display: none;
}

/* Name + house stacked column */
.mf-profile-name-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.mf-profile-name {
  font-size: 1.25rem;
  font-weight: var(--mfw-font-weight-heading, 700);
  font-family: var(--mfw-font-family-heading, system-ui, sans-serif);
  color: var(--mfw-text, #111827);
  margin: 0;
  text-align: left;
  line-height: 1.3;
}

.mf-profile-house {
  font-size: 0.75rem;
  font-weight: var(--mfw-font-weight-body, 400);
  color: var(--mfw-text-subtle, #9ca3af);
  margin: 0;
  line-height: 1.4;
}

.mf-profile-email-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.mf-profile-email-text {
  font-size: 0.8125rem;
  font-weight: var(--mfw-font-weight-body);
  color: var(--mfw-text-subtle, #6b7280);
}

.mf-verified-chip-small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #16a34a;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: var(--mfw-font-weight-ui, 700);
  letter-spacing: 0.04em;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

.mf-verified-chip-small svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.mf-email-change-link {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  color: rgb(255, 0, 117);
  text-decoration: none;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

.mf-email-change-link:hover {
  text-decoration: underline;
}

/* ── Email change inline form ──────────────────────────────────────────── */
.widget-cac361 .mf-email-change-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.widget-cac361 .mf-email-change-input {
  font-size: 0.8125rem;
  width: 100%;
  max-width: 320px;
}

.widget-cac361 .mf-email-change-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.widget-cac361 .mf-email-change-save-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  color: rgb(255, 0, 117);
  cursor: pointer;
  font-family: var(--mfw-font-family-body);
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color 0.15s;
}

.widget-cac361 .mf-email-change-save-btn:hover {
  text-decoration: underline;
}

.widget-cac361 .mf-email-change-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.widget-cac361 .mf-email-change-cancel-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  color: var(--mfw-text-subtle, #9ca3af);
  cursor: pointer;
  font-family: var(--mfw-font-family-body);
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color 0.15s;
}

.widget-cac361 .mf-email-change-cancel-btn:hover {
  color: var(--mfw-text-muted, #6b7280);
  text-decoration: underline;
}

.widget-cac361 .mf-email-change-hint {
  font-size: 0.6875rem;
  color: var(--mfw-text-subtle, #6b7280);
  margin: 0;
  font-style: italic;
  line-height: 1.4;
}

/* ── Photo wrap (inline in form) ────────────────────────────────────────── */
.mf-reg-photo-wrap-inline {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: #e2e8f0;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.mf-reg-photo-wrap-inline.mf-error {
  border-color: #dc2626;
  border-width: 3px;
}

.mf-reg-photo-wrap-inline:hover::after {
  content: "Change";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.625rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.mf-reg-photo,
.mf-reg-photo-anon {
  width: 72px;
  height: 72px;
  display: block;
}

.mf-reg-photo {
  object-fit: cover;
}

/* ── Large circular Mug Shot on Page B ──────────────────────────────────── */
.mf-mugshot-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
}

/* ── Page B: Row 1 — Mug Shot (left) + Current Role field (right) ─────── */
.mf-pageb-top-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 4px;
}

.mf-pageb-photo-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
}

.mf-pageb-role-col {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}

.mf-pageb-role-col .mf-form-group {
  width: 100%;
}

/* Large square mug shot with soft rounded corners */
.mf-pageb-photo-wrap {
  width: 160px;
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
  background: #e2e8f0;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}

.mf-pageb-photo-wrap.mf-error {
  border-color: #dc2626;
  border-width: 3px;
}

.mf-pageb-photo-wrap:hover::after {
  content: "Change";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.75rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

.mf-pageb-photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  display: block;
}

.mf-pageb-photo-anon {
  width: 160px;
  height: 160px;
  display: block;
}

@media (max-width: 540px) {
  .mf-pageb-top-row {
    flex-direction: column;
    align-items: center;
  }
  .mf-pageb-photo-col {
    width: 100%;
    align-items: center;
  }
  .mf-pageb-photo-wrap,
  .mf-pageb-photo,
  .mf-pageb-photo-anon {
    width: 140px;
    height: 140px;
  }
  .mf-pageb-role-col {
    width: 100%;
  }
}
/* ── Conversational Page B labels ───────────────────────────────────────── */
/* Reframed questions on Page B use a warmer, more personal typographic      */
/* style to match the informal, reflective tone of the prompts.               */
.mf-convo-label {
  font-size: 0.8125rem !important;
  font-weight: var(--mfw-font-weight-body, 400) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--mfw-text-muted, #374151) !important;
  line-height: 1.5 !important;
  font-style: italic;
  margin-bottom: 6px;
  display: block;
}

/* The parenthetical aside within each conversational label */
.mf-convo-sub {
  font-size: 0.75rem;
  font-weight: var(--mfw-font-weight-body, 400);
  color: var(--mfw-text-subtle, #9ca3af);
  font-style: italic;
  display: inline;
}

/* ── Verification message ───────────────────────────────────────────────── */
.mf-verification-message {
  padding: 12px 16px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  margin-bottom: 8px;
}

.mf-verification-message p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body, 500);
  color: #92400e;
  line-height: 1.5;
}

/* ── Verification error message ─────────────────────────────────────────── */
.mf-verification-error {
  padding: 12px 16px;
  background: #fee2e2;
  border: 1px solid #dc2626;
  border-radius: 8px;
  margin-top: 12px;
  animation: mf-error-fadein 0.3s ease;
}

.mf-verification-error p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body, 500);
  color: #991b1b;
  line-height: 1.5;
}

@keyframes mf-error-fadein {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ── Form rows & groups ─────────────────────────────────────────────────── */
.mf-form-row {
  display: flex;
  gap: 14px;
  width: 100%;
}

.mf-form-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mf-form-label {
  font-size: 0.6875rem;
  font-weight: var(--mfw-font-weight-ui, 700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mfw-text-subtle, #6b7280);
  text-align: left;
  margin-bottom: 0;
  line-height: 1.2;
}

/* Defeat Duda theme overrides on .mf-form-label inside the widget */
.widget-cac361 .mf-form-label {
  font-size: 0.6875rem !important;
  font-weight: var(--mfw-font-weight-ui, 700) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--mfw-text-subtle, #6b7280) !important;
  text-align: left !important;
  line-height: 1.2 !important;
  display: block;
}

/* Required bar indicator — thick red left border on the label */
.mf-req-label {
  /* label no longer carries the red bar — moved to the input itself */
}

/* Required field indicator — left border on the input, not the label */
.mf-form-group:has(.mf-req-label) .mf-form-input,
.mf-form-group:has(.mf-req-label) .mf-form-textarea,
.mf-form-group:has(.mf-req-label) .mf-form-select,
.mf-form-group:has(.mf-req-label) .mf-country-input,
.mf-form-group:has(.mf-req-label) .mf-phone-idd-row {
  border-left: 3px solid #be123c;
}

/* "Fields with a red bar are required" note — bottom of each page */
.mf-req-note {
  font-size: 0.6875rem;
  color: var(--mfw-text-subtle, #9ca3af);
  margin: 16px 0 4px;
  font-style: italic;
  line-height: 1.4;
}

.mf-form-input,
.mf-form-textarea,
.mf-form-select {
  width: 100%;
  padding: 6px 9px;
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body, 400);
  color: var(--mfw-text, #1a1a1a);
  background: var(--mfw-input-bg, #ffffff);
  border: 1px solid var(--mfw-input-border, #c0c5cc);
  border-radius: 6px;
  box-sizing: border-box;
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
  line-height: 1.4;
}

/* Override Duda theme which sets font-size:16px, height:40px etc. on inputs inside div.dmInner */
.widget-cac361 input.mf-form-input,
.widget-cac361 input[type=text].mf-form-input,
.widget-cac361 input[type=email].mf-form-input,
.widget-cac361 input[type=tel].mf-form-input,
.widget-cac361 input[type=number].mf-form-input,
.widget-cac361 input[type=password].mf-form-input,
.widget-cac361 select.mf-form-select {
  font-size: 0.875rem !important;
  font-family: var(--mfw-font-family-body, system-ui, sans-serif) !important;
  color: var(--mfw-text, #1a1a1a) !important;
  background-color: var(--mfw-input-bg, #ffffff) !important;
  border: 1px solid var(--mfw-input-border, #c0c5cc) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 9px !important;
}

.mf-form-input:disabled {
  background: var(--mfw-input-bg-disabled, #f3f4f6);
  color: var(--mfw-text-subtle, #6b7280);
  cursor: not-allowed;
}

.mf-form-input:focus,
.mf-form-textarea:focus,
.mf-form-select:focus {
  border-color: #4a7c59;
  outline: none;
}

/* Error state — high specificity to override Duda theme */
.widget-cac361 .mf-form-input.mf-error,
.widget-cac361 input.mf-form-input.mf-error,
.widget-cac361 input[type=text].mf-error,
.widget-cac361 input[type=tel].mf-error,
.widget-cac361 input[type=email].mf-error,
.widget-cac361 .mf-form-textarea.mf-error,
.widget-cac361 textarea.mf-form-textarea.mf-error,
.widget-cac361 .mf-form-select.mf-error,
.widget-cac361 select.mf-form-select.mf-error {
  border: 2px solid #dc2626 !important;
  border-radius: 6px !important;
}

.widget-cac361 .mf-form-input.mf-error:focus,
.widget-cac361 input.mf-form-input.mf-error:focus,
.widget-cac361 input[type=text].mf-error:focus,
.widget-cac361 input[type=tel].mf-error:focus,
.widget-cac361 input[type=email].mf-error:focus,
.widget-cac361 .mf-form-textarea.mf-error:focus,
.widget-cac361 textarea.mf-form-textarea.mf-error:focus,
.widget-cac361 .mf-form-select.mf-error:focus,
.widget-cac361 select.mf-form-select.mf-error:focus {
  border-color: #dc2626 !important;
}

/* Valid state — full green border on all fields */
.widget-cac361 .mf-form-input.mf-valid,
.widget-cac361 input.mf-form-input.mf-valid,
.widget-cac361 input[type=text].mf-valid,
.widget-cac361 input[type=tel].mf-valid,
.widget-cac361 input[type=email].mf-valid,
.widget-cac361 .mf-form-textarea.mf-valid,
.widget-cac361 textarea.mf-form-textarea.mf-valid,
.widget-cac361 .mf-form-select.mf-valid,
.widget-cac361 select.mf-form-select.mf-valid {
  border: 2px solid #16a34a !important;
  border-radius: 6px !important;
}

.widget-cac361 .mf-form-input.mf-valid:focus,
.widget-cac361 input.mf-form-input.mf-valid:focus,
.widget-cac361 input[type=text].mf-valid:focus,
.widget-cac361 input[type=email].mf-valid:focus,
.widget-cac361 .mf-form-textarea.mf-valid:focus,
.widget-cac361 textarea.mf-form-textarea.mf-valid:focus,
.widget-cac361 .mf-form-select.mf-valid:focus,
.widget-cac361 select.mf-form-select.mf-valid:focus {
  border-color: #16a34a !important;
  outline: none;
}

/* ── Verify button ──────────────────────────────────────────────────────── */
.mf-verify-btn {
  width: 160px;
  padding: 12px 24px;
  font-size: 0.9375rem;
  font-weight: var(--mfw-font-weight-body, 600);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s;
  border: 2px solid rgb(255, 0, 117);
  background: rgb(255, 0, 117);
  color: #ffffff;
}

.mf-verify-btn-row {
  justify-content: center;
  margin-top: 4px;
}

.mf-verify-btn:hover:not(:disabled) {
  background: rgb(220, 0, 100);
  border-color: rgb(220, 0, 100);
}

.mf-verify-btn:disabled {
  cursor: not-allowed;
  background: rgba(255, 0, 117, 0.3);
  border-color: rgba(255, 0, 117, 0.3);
  color: rgba(255, 255, 255, 0.7);
}

/* ── Textareas ──────────────────────────────────────────────────────────── */
.mf-form-textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.5;
}

/* ── Profile form section block spacing ──────────────────────────────── */
.mf-section-block {
  margin-bottom: 30px !important;
}

/* ── Read-only field display ────────────────────────────────────────────── */
.widget-cac361 .mf-ro-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0 10px;
}

.widget-cac361 .mf-ro-field {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.widget-cac361 .mf-ro-field-label {
  font-size: 0.625rem !important;
  font-weight: var(--mfw-font-weight-ui, 700) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mfw-text-subtle, #9ca3af) !important;
  flex-shrink: 0;
  min-width: 90px;
  text-align: left;
  line-height: 1.4;
}

.widget-cac361 .mf-ro-field-value {
  font-size: 0.875rem !important;
  font-weight: var(--mfw-font-weight-body, 400) !important;
  color: var(--mfw-text, #1a1a1a) !important;
  font-family: var(--mfw-font-family-body);
  line-height: 1.5;
  flex: 1;
  min-width: 0;
  word-break: break-word;
  text-align: left;
  white-space: pre-wrap;
}

/* Bio + Social sections: fixed-width label column */
.widget-cac361 [data-section=bio] .mf-ro-field-label,
.widget-cac361 [data-section=social] .mf-ro-field-label {
  width: 35%;
  min-width: 0;
  flex-shrink: 0;
}

.widget-cac361 [data-section=bio] .mf-ro-field-value,
.widget-cac361 [data-section=social] .mf-ro-field-value {
  width: 65%;
  flex: none;
}

/* Contact read-only layout */
.widget-cac361 .mf-ro-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 6px 0 10px;
}

.widget-cac361 .mf-ro-photo-col {
  flex-shrink: 0;
}

.widget-cac361 .mf-ro-photo-col .mf-ro-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--mfw-border, #e5e7eb);
  display: block;
}

.widget-cac361 .mf-ro-contact-row .mf-ro-fields {
  flex: 1;
  padding: 0;
}

.widget-cac361 .mf-ro-address-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.widget-cac361 .mf-ro-address-line,
.widget-cac361 .mf-ro-phone-line {
  font-size: 0.875rem !important;
  font-weight: var(--mfw-font-weight-body, 400) !important;
  color: var(--mfw-text, #1a1a1a) !important;
  font-family: var(--mfw-font-family-body);
  line-height: 1.5;
  text-align: left;
  word-break: break-word;
}

.widget-cac361 .mf-privacy-indicator {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}

.widget-cac361 .mf-privacy-padlock {
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
}

.widget-cac361 .mf-privacy-indicator-text {
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--mfw-text-muted, #374151);
  line-height: 1.4;
}

/* ── Toggle status icons in contact read-only view ──────────────────────── */
.widget-cac361 .mf-ro-toggle-icons {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
}

.widget-cac361 .mf-ro-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  cursor: default;
  opacity: 0.75;
}

/* Per-icon brand colours — matches Directory widget pattern */
.widget-cac361 .mf-ro-toggle-icon.mf-icon-padlock {
  color: #9ca3af;
}

.widget-cac361 .mf-ro-toggle-icon.mf-icon-whatsapp {
  color: #25D366;
}

.widget-cac361 .mf-ro-toggle-icon.mf-icon-chain {
  color: var(--rw-accent, #6366f1);
}

/* OM badge uses the same dark-navy style as the Directory badge */
.widget-cac361 .mf-ro-toggle-icon.mf-icon-om {
  height: 22px;
  padding: 0 6px;
  font-size: 0.5625rem;
  font-weight: var(--mfw-font-weight-ui, 700);
  letter-spacing: 0.04em;
  border-radius: 4px;
  background: #1e3a5f;
  color: #ffffff;
  opacity: 0.75;
}

.widget-cac361 .mf-ro-toggle-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.widget-cac361 .mf-bio-social-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.widget-cac361 .mf-bio-social-row > .mf-section-block {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 600px) {
  .widget-cac361 .mf-bio-social-row {
    flex-direction: column;
  }
  .widget-cac361 .mf-bio-social-row > .mf-section-block {
    width: 100%;
  }
  .widget-cac361 .mf-ro-contact-row {
    flex-direction: column;
    align-items: center;
  }
  .widget-cac361 .mf-ro-contact-row .mf-ro-fields {
    width: 100%;
  }
}
/* ── Section header row (label + Edit/Save/Cancel right-aligned) ──────── */
.widget-cac361 .mf-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--mfw-table-col-header-bg, #d1d5db);
  border-top: 1px solid var(--mfw-table-col-header-bg, #e5e7eb);
  background: var(--mfw-table-col-header-bg, #f3f4f6);
  border-radius: var(--mfw-radius-card, 6px) var(--mfw-radius-card, 6px) 0 0;
  width: 100%;
  box-sizing: border-box;
  gap: 8px;
  color: var(--mfw-table-col-header-text, #374151);
}

/* mf-section-label-inline: always used alongside mf-form-section-label
   on the same element. That rule provides all typography (Georgia, 10px,
   700, uppercase, #374151). This rule provides only the flex-child layout
   needed when the label sits inside a mf-section-header-row. */
.widget-cac361 .mf-section-label-inline {
  flex: 1;
  min-width: 0;
  display: block; /* override display:inline from the injected strip rule */
}

.widget-cac361 .mf-section-edit-link {
  font-size: 0.6875rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  color: var(--mfw-brand-text, rgb(255, 0, 117));
  text-decoration: none;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
  /* Pale ghost frame — visible on dark backgrounds, fades on light */
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 1px 7px;
  transition: background 0.15s, border-color 0.15s;
}

.widget-cac361 .mf-section-edit-link:hover {
  text-decoration: underline;
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
}

.widget-cac361 .mf-section-edit-actions {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin-left: auto;
}

.widget-cac361 .mf-section-save-btn {
  /* Pale ghost frame — visible on dark backgrounds, fades on light */
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 1px 7px;
  margin: 0 0 0 8px;
  font-size: 0.6875rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  color: var(--mfw-brand-text, rgb(255, 0, 117));
  cursor: pointer;
  font-family: var(--mfw-font-family-body);
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s;
}

.widget-cac361 .mf-section-save-btn:hover:not(:disabled) {
  text-decoration: underline;
  color: var(--mfw-brand-text, rgb(220, 0, 100));
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
}

.widget-cac361 .mf-section-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.widget-cac361 .mf-section-cancel-btn {
  /* Pale ghost frame — visible on dark backgrounds, fades on light */
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 1px 7px;
  margin: 0 0 0 6px;
  font-size: 0.6875rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  color: var(--mfw-text-subtle, #9ca3af);
  cursor: pointer;
  font-family: var(--mfw-font-family-body);
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.widget-cac361 .mf-section-cancel-btn:hover {
  color: var(--mfw-text-muted, #6b7280);
  text-decoration: underline;
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── Section divider ────────────────────────────────────────────────────── */
.mf-form-section-divider {
  border: none;
  border-top: 1px solid var(--mfw-border, #d1d5db);
  margin: 8px 0;
}

/* ── Profile form section label ─────────────────────────────────────────── */
/* Standalone use (edit/registration form, not inside a section-header-row) */
.mf-form-section-label {
  font-family: var(--mfw-font-family-heading, Georgia, "Times New Roman", serif);
  font-size: 0.625rem;
  font-weight: var(--mfw-font-weight-heading, 700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mfw-table-col-header-text, #374151);
  margin: 30px 0 12px;
  padding: 7px 10px;
  background: var(--mfw-table-col-header-bg, #f3f4f6);
  border-top: 1px solid var(--mfw-table-col-header-bg, #e5e7eb);
  border-bottom: 1px solid var(--mfw-table-col-header-bg, #d1d5db);
  border-radius: var(--mfw-radius-card, 6px) var(--mfw-radius-card, 6px) 0 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* When the label is inside a section-header-row, strip all its own chrome —
   the row itself provides the background, borders, radius and spacing */
.mf-section-header-row .mf-form-section-label {
  background: none;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  width: auto;
  display: inline;
}

/* ── Section divider ────────────────────────────────────────────────────── */
.mf-contact-whatsapp-row {
  margin-top: 8px;
  margin-bottom: 0;
}

/* ── Phone + IDD side-by-side row ───────────────────────────────────────────── */
.mf-phone-idd-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  position: relative;
}

/* ── IDD Combo dropdown (verification form) ─────────────────────────────────── */
.mf-idd-combo {
  position: relative;
  flex: 0 0 auto;
}

/* The clickable display cell showing flag + code + chevron */
.mf-idd-combo-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  min-width: 72px;
  max-width: 88px;
  padding: 6px 6px 6px 8px;
  background: var(--mfw-input-bg, #ffffff);
  border: 1px solid var(--mfw-input-border, #c0c5cc);
  border-right: none;
  border-radius: 6px 0 0 6px;
  font-size: 0.8rem;
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
  color: var(--mfw-text-muted, #374151);
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  outline: none;
}

.mf-idd-combo-display:hover,
.mf-idd-combo-display:focus {
  background: var(--mfw-table-col-header-bg, #f3f4f6);
  border-color: var(--mfw-text-subtle, #9ca3af);
}

.mf-idd-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--mfw-text-subtle, #9ca3af);
  margin-left: 1px;
  width: 12px;
  height: 12px;
}

/* The floating panel containing search box + option list */
.mf-idd-combo-panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 260px;
  background: var(--mfw-input-bg, #ffffff);
  border: 1px solid var(--mfw-input-border, #c0c5cc);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  z-index: 10001;
  overflow: hidden;
}

.mf-idd-search-wrap {
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--mfw-border, #e5e7eb);
}

.mf-idd-search {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 0.8rem;
  border: 1px solid var(--mfw-input-border, #c0c5cc);
  border-radius: 5px;
  outline: none;
  font-family: var(--mfw-font-family-body);
  color: var(--mfw-text, #1a1a1a);
  background: var(--mfw-input-bg, #ffffff);
}

.mf-idd-search:focus {
  border-color: #4a7c59;
}

.mf-idd-options {
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mf-idd-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 0.8rem;
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
  color: var(--mfw-text, #1a1a1a);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
  text-align: left;
}

.mf-idd-option:hover,
.mf-idd-option.is-active {
  background: var(--mfw-table-col-header-bg, #f3f4f6);
}

.mf-idd-option.is-selected {
  background: var(--mfw-surface-raised, #f0f4ff);
  font-weight: 600;
}

.mf-idd-option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mfw-text-muted, #374151);
  text-align: left !important;
}

.mf-idd-option-code {
  flex-shrink: 0;
  color: var(--mfw-text-subtle, #9ca3af);
  font-size: 0.75rem;
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
}

/* IDD display: flag + dial code — legacy (profile form Page A) */
.mf-idd-display {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  min-width: 64px;
  padding: 6px 8px;
  background: var(--mfw-input-bg, #ffffff);
  border: 1px solid var(--mfw-input-border, #c0c5cc);
  border-right: none;
  border-radius: 6px 0 0 6px;
  font-size: 0.875rem;
  color: var(--mfw-text-muted, #374151);
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}

/* Override underline style inside #additional-fields for IDD display */
#additional-fields .mf-idd-display {
  background: var(--mfw-input-bg-disabled, #f9fafb);
  border: 1px solid var(--mfw-input-border, #c0c5cc);
  border-right: none;
  border-radius: 0;
  padding: 6px 8px;
}

.mf-idd-flag {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.mf-idd-flag .mf-flag-img {
  display: block;
  width: auto;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
}

.mf-idd-code {
  font-size: 0.8rem;
  font-weight: var(--mfw-font-weight-body, 400);
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
  color: var(--mfw-text-muted, #374151);
}

/* Hidden select — profile form Page A (legacy pattern) */
.mf-idd-select-hidden {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 100%;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  border: none;
  -webkit-appearance: menulist;
  appearance: menulist;
}

/* Local phone input: takes remaining space, right-anchored border */
.mf-phone-local {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 0 6px 6px 0 !important;
  border-left: none !important;
}

.mf-phone-local:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

#additional-fields .mf-phone-local {
  border-radius: 0 !important;
  border-left: none !important;
  padding-left: 6px !important;
  border: 1px solid #c0c5cc !important;
  border-left: none !important;
  background: transparent;
}

/* ── Compact filter/toggle rows ───────────────────────────────────────── */
/* Mirror the Directory Widget rw-filter-group-inline pattern.                  */
/* Pair wrapper: Private + WhatsApp side by side on one line */
.mf-filter-row-pair {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
  margin-top: 0;
}

/* Inside the contact column, cancel the 12px column gap above the toggle blocks
   and keep only a small 5px gap between the two toggle pair rows */
.mf-contact-col > .mf-filter-row-pair {
  margin-top: -6px;
}

.mf-contact-col > .mf-filter-row-pair + .mf-filter-row-pair {
  margin-top: 2px;
}

/* Each toggle in a pair takes exactly half the row so columns align across rows */
.mf-filter-row-pair .mf-filter-group {
  margin-top: 0;
  flex-shrink: 1;
  min-width: 0;
  flex: 0 0 calc(50% - 10px);
}

/* Allow the label inside a pair to wrap onto a second line if needed */
.mf-filter-row-pair .mf-filter-label {
  white-space: normal;
}

.mf-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 0;
  margin-bottom: 0;
}

.mf-filter-group.mf-filter-group-inline {
  flex-direction: row;
  align-items: center;
  gap: 7px;
}

.mf-filter-label {
  font-size: 0.75rem;
  font-weight: var(--mfw-font-weight-body, 400);
  color: var(--mfw-text-subtle, #6b7280);
  text-transform: none;
  letter-spacing: 0;
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0;
}

.mf-pill-group {
  display: inline-flex;
  gap: 0;
  border: 1.5px solid var(--mfw-border, #d1d5db);
  border-radius: 5px;
  overflow: hidden;
  background: var(--mfw-input-bg, #ffffff);
  flex-shrink: 0;
}

.mf-pill-btn {
  padding: 1px 8px;
  font-size: 0.75rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  line-height: 1.35;
  border: none;
  border-right: 1.5px solid var(--mfw-border, #d1d5db);
  background: transparent;
  color: var(--mfw-text-subtle, #9ca3af);
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease;
  white-space: nowrap;
  font-family: var(--mfw-font-family-body);
}

.mf-pill-btn:last-child {
  border-right: none;
}

.mf-pill-btn:hover {
  background: var(--mfw-table-col-header-bg, #f3f4f6);
  color: var(--mfw-text-muted, #374151);
}

/* On (✓) active state — green for Yes, and also green for "No" on the Private toggle
   (because "No" = share = positive action on that toggle) */
.mf-pill-btn[data-value=Yes].mf-pill-active {
  background: #111827;
  color: #ffffff;
}

/* Private toggle ✓ pill: data-value="No" (= share = not private in DB) — show green */
#private-pills .mf-pill-btn[data-value=No].mf-pill-active {
  background: #d1fae5;
  color: #065f46;
}

/* Private toggle ✗ pill: data-value="Yes" (= keep private) — show red */
#private-pills .mf-pill-btn[data-value=Yes].mf-pill-active {
  background: #fee2e2;
  color: #991b1b;
}

/* WhatsApp toggle ✓ pill: data-value="Yes" (= on WhatsApp) — show green */
#whatsapp-pills .mf-pill-btn[data-value=Yes].mf-pill-active {
  background: #d1fae5;
  color: #065f46;
}

/* WhatsApp toggle ✗ pill: data-value="No" (= not on WhatsApp) — show red */
#whatsapp-pills .mf-pill-btn[data-value=No].mf-pill-active {
  background: #fee2e2;
  color: #991b1b;
}

/* MalSoc toggle ✓ pill: data-value="Yes" (= on mailing list) — show green */
#malsoc-pills .mf-pill-btn[data-value=Yes].mf-pill-active {
  background: #d1fae5;
  color: #065f46;
}

/* MalSoc toggle ✗ pill: data-value="No" (= not on mailing list) — show red */
#malsoc-pills .mf-pill-btn[data-value=No].mf-pill-active {
  background: #fee2e2;
  color: #991b1b;
}

/* Off (✗) active state for all other pill groups */
.mf-pill-btn[data-value=No].mf-pill-active {
  background: #fee2e2;
  color: #991b1b;
}

/* required-but-unanswered state — red ring on the pill group border */
.mf-filter-group.mf-pill-required .mf-pill-group {
  border-color: #e74c3c;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.15);
}

/* Subscribe pill toggle: ✓ = subscribed (green), ✗ = unsubscribed (red) */
#subscribe-pills .mf-pill-btn[data-value=Yes].mf-pill-active {
  background: #d1fae5;
  color: #065f46;
}

#subscribe-pills .mf-pill-btn[data-value=No].mf-pill-active {
  background: #fee2e2;
  color: #991b1b;
}

/* ── Unsubscribe checkbox (bottom of Page B) ─────────────────────────────── */
.mf-unsubscribe-row {
  margin-top: 20px;
  margin-bottom: 4px;
}

.mf-unsubscribe-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--mfw-text-subtle, #9ca3af);
  line-height: 1.5;
}

.mf-unsubscribe-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: rgb(255, 0, 117);
}

/* ── Role field textarea (Page B, 2-line) ──────────────────────────────── */
.mf-role-textarea {
  min-height: 0;
  height: calc(2.8em + 16px);
  resize: none;
  overflow: hidden;
  line-height: 1.4;
}

/* Page B textarea breathing room */
#profile-page-b .mf-form-textarea {
  line-height: 1.65;
  font-size: 0.9rem;
  color: var(--mfw-text, #1a1a1a);
}

/* Applies ONLY inside #additional-fields — verification inputs are untouched */
#additional-fields .mf-form-input,
#additional-fields .mf-form-select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--mfw-input-border, #c0c5cc);
  border-radius: 0;
  padding-left: 2px;
  padding-right: 2px;
}

/* Restore red left border for required fields — overrides the border:none above */
#additional-fields .mf-form-group:has(.mf-req-label) .mf-form-input,
#additional-fields .mf-form-group:has(.mf-req-label) .mf-form-select {
  border-left: 3px solid #be123c !important;
}

#additional-fields .mf-form-group:has(.mf-req-label) .mf-country-input {
  border-left: 3px solid #be123c !important;
}

#additional-fields .mf-form-group:has(.mf-req-label) .mf-form-textarea {
  border-left: 3px solid #be123c !important;
}

/* Textareas in #additional-fields get a full visible border — underline alone
   is insufficient to signal a multi-line text area to the user */
#additional-fields .mf-form-textarea {
  background: var(--mfw-input-bg, #ffffff);
  border: 1px solid var(--mfw-input-border, #c0c5cc);
  border-radius: 0;
  padding: 8px 10px;
  white-space: pre-wrap;
}

#additional-fields .mf-form-input:focus,
#additional-fields .mf-form-select:focus {
  border-bottom-color: #4a7c59;
  outline: none;
  box-shadow: none;
}

#additional-fields .mf-form-textarea:focus {
  border-color: #4a7c59;
  outline: none;
  box-shadow: none;
}

/* Error state for underline inputs — full red border (overrides underline-only style) */
.widget-cac361 #additional-fields .mf-form-input.mf-error,
.widget-cac361 #additional-fields input.mf-form-input.mf-error,
.widget-cac361 #additional-fields input[type=text].mf-error,
.widget-cac361 #additional-fields input[type=tel].mf-error,
.widget-cac361 #additional-fields input[type=email].mf-error,
.widget-cac361 #additional-fields .mf-form-select.mf-error,
.widget-cac361 #additional-fields select.mf-form-select.mf-error {
  border: 2px solid #dc2626 !important;
  border-radius: 6px !important;
  background: transparent;
}

/* Error state for textareas — full border */
.widget-cac361 #additional-fields .mf-form-textarea.mf-error,
.widget-cac361 #additional-fields textarea.mf-form-textarea.mf-error {
  border: 2px solid #dc2626 !important;
  border-radius: 6px !important;
  background: transparent;
}

/* Valid state for underline inputs — full green border */
.widget-cac361 #additional-fields .mf-form-input.mf-valid,
.widget-cac361 #additional-fields input.mf-form-input.mf-valid,
.widget-cac361 #additional-fields input[type=text].mf-valid,
.widget-cac361 #additional-fields input[type=tel].mf-valid,
.widget-cac361 #additional-fields input[type=email].mf-valid,
.widget-cac361 #additional-fields .mf-form-select.mf-valid,
.widget-cac361 #additional-fields select.mf-form-select.mf-valid {
  border: 2px solid #16a34a !important;
  border-radius: 6px !important;
  background: transparent;
}

/* Valid state for textareas */
.widget-cac361 #additional-fields .mf-form-textarea.mf-valid,
.widget-cac361 #additional-fields textarea.mf-form-textarea.mf-valid {
  border: 2px solid #16a34a !important;
  border-radius: 6px !important;
  background: transparent;
}

/* Country combo underline override */
#additional-fields .mf-country-dropdown {
  background: var(--mfw-input-bg, #ffffff);
  border: 1px solid var(--mfw-input-border, #c0c5cc);
  border-radius: 8px;
}

/* ── Profile wizard navigation buttons ──────────────────────────────────── */
.mf-profile-nav-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--mfw-border, #e5e7eb);
  gap: 12px;
}

.mf-profile-nav-btn-primary {
  padding: 11px 28px;
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body, 600);
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid rgb(255, 0, 117);
  background: rgb(255, 0, 117);
  color: #ffffff;
  font-family: var(--mfw-font-family-body);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.mf-profile-nav-btn-primary:hover {
  background: rgb(220, 0, 100);
  border-color: rgb(220, 0, 100);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 0, 117, 0.3);
}

.mf-profile-nav-btn-secondary {
  padding: 11px 24px;
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body, 600);
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid var(--mfw-border, #d1d5db);
  background: transparent;
  color: var(--mfw-text-subtle, #6b7280);
  font-family: var(--mfw-font-family-body);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.mf-profile-nav-btn-secondary:hover {
  border-color: var(--mfw-text-subtle, #9ca3af);
  color: var(--mfw-text-muted, #374151);
  background: var(--mfw-input-bg-disabled, #f9fafb);
}

/* Next button — secondary style with pink border */
.mf-profile-nav-btn-next {
  border-color: rgb(255, 0, 117);
  color: rgb(255, 0, 117);
}

.mf-profile-nav-btn-next:hover {
  border-color: rgb(220, 0, 100);
  color: rgb(220, 0, 100);
  background: #fff0f6;
}

@media (max-width: 767px) {
  .mf-profile-nav-row {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .mf-profile-nav-btn-primary,
  .mf-profile-nav-btn-secondary {
    width: 100%;
    text-align: center;
  }
}
/* ── Bottom bar: privacy toggle + submit ────────────────────────────────── */
.mf-form-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  padding-top: 0;
  gap: 16px;
  margin-bottom: 40px;
}

/* ── Privacy toggle ─────────────────────────────────────────────────────── */
.mf-privacy-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  flex: 1;
}

.mf-privacy-toggle-inline {
  flex: 1;
}

.mf-privacy-label {
  font-size: 0.6875rem;
  font-weight: var(--mfw-font-weight-body, 400);
  color: var(--mfw-text-subtle, #9ca3af);
  cursor: pointer;
  line-height: 1.4;
}

.mf-privacy-checkbox {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: rgb(255, 0, 117);
  flex-shrink: 0;
}

/* ── Submit button ──────────────────────────────────────────────────────── */
.mf-reg-btn-submit-large {
  padding: 12px 28px;
  font-size: 0.9375rem;
  font-weight: var(--mfw-font-weight-body, 600);
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid rgb(255, 0, 117);
  background: rgb(255, 0, 117);
  color: #ffffff;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.mf-reg-btn-submit-large:hover:not(:disabled) {
  background: rgb(220, 0, 100);
  border-color: rgb(220, 0, 100);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 0, 117, 0.3);
}

.mf-reg-btn-submit-large:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #d1d5db;
  border-color: #d1d5db;
  color: #9ca3af;
  transform: none;
  box-shadow: none;
}

/* ── File input (hidden) ────────────────────────────────────────────────── */
.mf-file-input {
  display: none;
}

/* ── Success state ──────────────────────────────────────────────────────── */
.mf-success {
  text-align: center;
  padding: 40px 24px;
}

.mf-success-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  color: #4a7c59;
}

.mf-success-title {
  font-size: 1.4rem;
  font-weight: var(--mfw-font-weight-heading, 700);
  font-family: var(--mfw-font-family-heading, system-ui, sans-serif);
  color: var(--mfw-text, #222222);
  margin: 0 0 8px;
}

.mf-success-text {
  font-size: 0.95rem;
  color: var(--mfw-text-subtle, #666666);
  line-height: 1.6;
}

/* ── Country fuzzy-match dropdown ───────────────────────────────────────── */
.mf-country-combo {
  position: relative;
  width: 100%;
}

.mf-country-input {
  width: 100%;
}

.mf-country-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--mfw-input-bg, #ffffff);
  border: 1px solid var(--mfw-input-border, #c0c5cc);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: none;
  margin-top: 4px;
}

.mf-country-dropdown.is-open {
  display: block;
}

.mf-country-option {
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body);
  cursor: pointer;
  color: var(--mfw-text, #1a1a1a);
  transition: background 0.15s ease;
  text-align: left;
}

.mf-country-option:hover {
  background: var(--mfw-table-col-header-bg, #f3f4f6);
}

.mf-country-option.is-active {
  background: var(--mfw-table-col-header-bg, #e8eaed);
}

.mf-country-option.is-selected {
  background: var(--mfw-surface-raised, #f0f4ff);
  font-weight: 600;
}

.mf-country-option.no-match {
  color: var(--mfw-text-subtle, #9ca3af);
  font-style: italic;
  cursor: default;
  font-size: 0.75rem;
}

.mf-country-option.no-match:hover {
  background: transparent;
}

/* ── Attending intent modal question ────────────────────────────────────── */
.mf-modal-attending-block {
  width: 100%;
  margin-top: 4px;
}

.mf-modal-attending-question {
  font-size: 0.9375rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
  color: var(--mfw-text-muted, #374151);
  margin: 0 0 14px;
  text-align: center;
}

.mf-modal-attending-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

.mf-attending-choice-btn {
  flex: 1 1 calc(50% - 10px);
  min-width: 120px;
  padding: 12px 16px;
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body, 600);
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid var(--mfw-border, #d1d5db);
  background: var(--mfw-input-bg, #ffffff);
  color: var(--mfw-text-muted, #374151);
  font-family: inherit;
  transition: all 0.2s ease;
  text-align: center;
}

.mf-attending-choice-btn:hover {
  border-color: rgb(255, 0, 117);
  color: rgb(255, 0, 117);
  background: #fff0f6;
  transform: translateY(-1px);
}

.mf-attending-choice-btn.is-selected {
  border-color: rgb(255, 0, 117);
  background: rgb(255, 0, 117);
  color: #ffffff;
}

@media (max-width: 400px) {
  .mf-attending-choice-btn {
    flex: 1 1 100%;
  }
}
/* ── Success modal overlay ──────────────────────────────────────────────── */
.mf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: mf-modal-fadein 0.3s ease;
}

@keyframes mf-modal-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.mf-modal-dialog {
  background: var(--mfw-input-bg, #ffffff);
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: mf-modal-slidein 0.4s ease;
}

@keyframes mf-modal-slidein {
  from {
    opacity: 0;
    margin-top: 30px;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}
.mf-modal-content {
  padding: 40px 32px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.mf-modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #d1fae5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  margin-bottom: 8px;
}

.mf-modal-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 3;
}

.mf-modal-title {
  font-size: 1.75rem;
  font-weight: var(--mfw-font-weight-heading, 700);
  font-family: var(--mfw-font-family-heading, system-ui, sans-serif);
  color: var(--mfw-text, #1a1a1a);
  margin: 0;
  line-height: 1.3;
}

.mf-modal-text {
  font-size: 1rem;
  color: var(--mfw-text-subtle, #6b7280);
  line-height: 1.6;
  margin: 0;
  max-width: 400px;
}

.mf-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

.mf-modal-btn {
  width: 100%;
  padding: 14px 28px;
  font-size: 0.9375rem;
  font-weight: var(--mfw-font-weight-body, 600);
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  font-family: inherit;
}

.mf-modal-btn-primary {
  background: rgb(255, 0, 117);
  color: #ffffff;
  border-color: rgb(255, 0, 117);
}

.mf-modal-btn-primary:hover {
  background: rgb(220, 0, 100);
  border-color: rgb(220, 0, 100);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 0, 117, 0.4);
}

.mf-modal-btn-secondary {
  background: var(--mfw-input-bg, #ffffff);
  color: var(--mfw-text-muted, #4b5563);
  border-color: var(--mfw-border, #d1d5db);
}

.mf-modal-btn-secondary:hover {
  background: var(--mfw-input-bg-disabled, #f9fafb);
  border-color: var(--mfw-text-subtle, #9ca3af);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mf-modal-btn-disabled {
  background: var(--mfw-border, #e5e7eb);
  color: var(--mfw-text-subtle, #9ca3af);
  border-color: var(--mfw-border, #e5e7eb);
  cursor: not-allowed;
  opacity: 0.7;
}

.mf-modal-btn-disabled:hover {
  background: var(--mfw-border, #e5e7eb);
  border-color: var(--mfw-border, #e5e7eb);
  transform: none;
  box-shadow: none;
}

/* ── Modal theme picker wrapper ────────────────────────────────── */
.mf-modal-theme-picker-wrap {
  width: 100%;
  max-width: 360px;
  min-height: 60px;
  margin: 0 auto;
  text-align: left;
}

.mf-modal-theme-picker-wrap .mf-theme-combo {
  max-width: 100%;
}

.mf-modal-theme-picker-wrap .mf-theme-picker-group {
  margin-top: 0;
}

/* ── Tab bar ────────────────────────────────────────────────────────────── */
.mf-tab-bar {
  display: flex;
  border-bottom: 2px solid var(--mfw-border, #e5e7eb);
  margin-bottom: 20px;
  gap: 0;
}

.mf-tab {
  flex: 1;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body, 600);
  color: var(--mfw-text-subtle, #6b7280);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
  letter-spacing: 0.01em;
}

.mf-tab:hover {
  color: var(--mfw-text-muted, #374151);
}

.mf-tab-active {
  color: rgb(255, 0, 117);
  border-bottom-color: rgb(255, 0, 117);
}

.mf-tab-panel {
  display: block;
}

/* ── Maiden name row — offset to align under Last Name ───────────────── */
.mf-maiden-offset {
  margin-left: calc(28% + 14px + 14px + 1px);
  flex: 1 1 0;
  min-width: 0;
}

/* ── Login panel ────────────────────────────────────────────────────────── */
.mf-login-intro {
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body);
  color: var(--mfw-text-subtle, #6b7280);
  margin: 0 0 8px;
  line-height: 1.5;
}

.mf-login-grid {
  max-width: 420px;
  margin: 0 auto;
}

.mf-login-link-message {
  font-size: 0.8125rem;
  font-weight: var(--mfw-font-weight-body);
  padding: 10px 0 4px;
  line-height: 1.5;
}

/* ── Verification success inline message ────────────────────────────────── */
.mf-verify-success-msg {
  padding: 18px 20px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  text-align: center;
}

.mf-verify-success-msg p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--mfw-font-weight-body);
  color: #166534;
  line-height: 1.6;
}

.mf-verify-success-msg strong {
  font-weight: 700;
}

/* ── Boot loader / session-resolving spinner ────────────────────────────── */
/* min-height matches the approximate profile form height so the page layout
   does not collapse while the spinner is visible for logged-in users.       */
.mf-boot-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 900px;
  width: 100%;
}

/* In editor context, give the body AND the widget root a solid, fully opaque
   background. The Duda editor determines which frame areas are selectable by
   performing a paint-layer hit-test on the iframe content. If the background
   is transparent or near-transparent (rgba with very low alpha) the editor
   overlay sees through it and never registers the area as belonging to a
   selectable widget — which is why the cursor stays 'default' instead of
   changing to 'pointer'. A fully opaque background is the minimum requirement
   for the editor's selection chrome to appear. */
.mf-editor-context body {
  min-height: 200px !important;
}

/* In editor context, boot never runs — hide the spinner so it does not
   create a giant transparent hit-area that blocks widget selection.
   The editor-context flag is set on <html> by the inline script. */
.mf-editor-context .mf-boot-loader {
  display: none !important;
}

.mf-boot-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--mfw-border, #e5e7eb);
  border-top-color: rgb(255, 0, 117);
  border-radius: 50%;
  animation: mf-spin 0.75s linear infinite;
}

@keyframes mf-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mf-reg-form {
    padding: 16px 20px;
  }
  .mf-form-row {
    flex-wrap: wrap;
  }
  .mf-form-group {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .mf-profile-top-block {
    flex-direction: column;
    align-items: center;
  }
  .mf-form-bottom-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .mf-reg-btn-submit-large {
    width: 100%;
  }
  .mf-modal-content {
    padding: 32px 24px 24px;
  }
  .mf-modal-title {
    font-size: 1.5rem;
    font-weight: var(--mfw-font-weight-heading, 700);
  }
  .mf-modal-text {
    font-size: 0.95rem;
  }
}
/* ── Theme Preferences Section ─────────────────────────────────────────── */
/* Section chrome: .mf-section-block / .mf-section-header-row /             */
/* .mf-section-edit-link / .mf-section-save-btn — all defined above.        */
/* Read-only rows: .mf-ro-field / .mf-ro-field-label / .mf-ro-field-value   */
/* — defined in the Read-only field display block above. No redeclaration.  */
/* Picker group label: .mf-form-label — defined in Form rows & groups above.*/
/* Only unique theme-content styles live here.                               */
/* Square swatches appended after the theme name in read-only + combo views */
.mf-theme-swatches {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin-left: 4px;
  flex-shrink: 0;
}

.mf-theme-swatch {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* Picker container */
.mf-theme-pickers {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 0 4px;
  margin-top: 14px;
}

.mf-theme-picker-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 14px;
}

.mf-theme-picker-group:first-child {
  margin-top: 0;
}

/* Picker group label — uses shared .mf-form-label class (see Form rows & groups above). */
/* Picker group description — small hint text under each theme type label. */
.mf-theme-picker-desc {
  font-size: 0.75rem;
  font-weight: var(--mfw-font-weight-body, 400);
  color: var(--mfw-text-subtle, #6b7280);
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  display: block;
  white-space: normal;
  margin: 0 0 4px;
  line-height: 1.4;
}

/* Edit actions row — Save/Cancel (via shared .mf-section-save/cancel-btn)  */
/* + optional "Save as Defaults" admin button.                               */
.mf-theme-edit-actions {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 12px;
}

/* "Save as Defaults" admin-only pill ghost, site pink */
.mf-theme-default-btn {
  background: none;
  border: 1px solid rgb(255, 0, 117);
  border-radius: 20px;
  padding: 3px 12px;
  margin-left: 16px;
  font-size: 0.6875rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  color: rgb(255, 0, 117);
  cursor: pointer;
  font-family: var(--mfw-font-family-body);
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.mf-theme-default-btn:hover:not(:disabled) {
  background: rgb(255, 0, 117);
  color: #ffffff;
}

.mf-theme-default-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Colour / Font combo — IDD dropdown pattern ────────────────────── */
.mf-theme-combo {
  position: relative;
  z-index: 10000;
  width: 100%;
  max-width: 380px;
}

.mf-theme-combo-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 9px;
  background: var(--mfw-input-bg, #ffffff);
  border: 1px solid var(--mfw-input-border, #c0c5cc);
  border-radius: 0;
  font-size: 0.875rem;
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
  font-weight: var(--mfw-font-weight-body, 400);
  color: var(--mfw-text, #374151);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1.4;
  transition: border-color 0.15s;
  overflow: hidden;
}

.mf-theme-combo-trigger:hover,
.mf-theme-combo-trigger[aria-expanded=true] {
  background: var(--mfw-table-col-header-bg, #f3f4f6);
  border-color: rgb(255, 0, 117);
}

/* mf-theme-combo-name / placeholder: font-size and font-family inherited
   from parent .mf-theme-combo-trigger (defined above). Colour + layout only. */
.mf-theme-combo-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: var(--mfw-text, #374151);
}

.mf-theme-combo-placeholder {
  flex: 1;
  min-width: 0;
  text-align: left;
  color: var(--mfw-text-subtle, #9ca3af);
}

.mf-theme-combo-swatches {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 2px;
}

/* .mf-theme-combo-arrow — replaced by shared .mf-idd-chevron (see IDD combo styles above) */
.mf-theme-combo-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 100%;
}

/* Portal variant: fixed positioning, appended to document.body to escape stacking contexts */
.mf-theme-combo-dropdown--portal {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  background: var(--mfw-input-bg, #ffffff);
  border: 1px solid var(--mfw-input-border, #c0c5cc);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  z-index: 2147483647;
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
}

.mf-theme-combo-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 0.875rem;
  font-family: var(--mfw-font-family-body, system-ui, sans-serif);
  color: var(--mfw-text, #1a1a1a);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
  text-align: left;
}

.mf-theme-combo-option:hover {
  background: var(--mfw-table-col-header-bg, #f3f4f6);
}

.mf-theme-combo-option--active {
  background: var(--mfw-surface-raised, #f0f4ff);
  font-weight: 600;
}

.mf-theme-combo-option--font {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 10px;
  white-space: normal;
}

.widget-cac361 .mf-theme-combo-sample {
  font-size: 0.6875rem !important;
  color: var(--mfw-text-subtle, #9ca3af) !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* ── Pill group (Badge / Transitions / Surface / Status) ─────────────── */
/* Identical pattern to .mf-pill-group / .mf-pill-btn — no width expansion */
.mf-theme-pill-group {
  display: inline-flex;
  gap: 0;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  background: var(--mfw-input-bg, #ffffff);
  flex-wrap: nowrap;
  flex-shrink: 0;
  width: auto;
  align-self: flex-start;
}

.mf-theme-pill {
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  line-height: 1.35;
  border: 1.5px solid var(--mfw-border, #d1d5db);
  border-right-width: 0;
  background: transparent;
  color: var(--mfw-text-subtle, #9ca3af);
  cursor: pointer;
  font-family: var(--mfw-font-family-body);
  transition: background 0.13s ease, color 0.13s ease;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 0;
}

.mf-theme-pill:first-child {
  border-radius: 5px 0 0 5px;
}

.mf-theme-pill:last-child {
  border-right-width: 1.5px;
  border-radius: 0 5px 5px 0;
}

.mf-theme-pill:hover {
  background: var(--mfw-table-col-header-bg, #f3f4f6);
  color: var(--mfw-text-muted, #374151);
}

.mf-theme-pill--active {
  background: #d1fae5;
  color: #065f46;
}

@charset "UTF-8";
.widget-6dbf3a {
  /* ── Layer 1: Platform token aliases ── */
  --w-bg: var(--mfw-surface, #f5f6fa);
  --w-surface: var(--mfw-surface-raised, #ffffff);
  --w-border: var(--mfw-border, #dde0ec);
  --w-brand: var(--mfw-brand, #2e3a8c);
  --w-brand-hover: var(--mfw-accent, #1a2a6c);
  --w-brand-text: var(--mfw-brand-text, #ffffff);
  --w-text: var(--mfw-text, #1a1f2e);
  --w-text-muted: var(--mfw-text-muted, #5a6278);
  --w-text-subtle: var(--mfw-text-subtle, #8a91a8);
  --w-row-hover: var(--mfw-surface-subtle, #eef3ff);
  --w-chip-bg: var(--mfw-surface-subtle, #f5f7ff);
  --w-chip-text: var(--mfw-brand, #2e3a8c);
  --w-divider: var(--mfw-divider, var(--mfw-border, #dde0ec));
  --w-focus: var(--mfw-focus, var(--mfw-brand, #2e3a8c));
  --w-font: var(--mfw-font-family-body, inherit);
  --w-font-heading: var(--mfw-font-family-heading, var(--mfw-font-family-body, inherit));
  --w-font-ui: var(--mfw-font-family-ui, var(--mfw-font-family-body, inherit));
  --w-radius: var(--mfw-radius, 8px);
  --w-radius-sm: var(--mfw-radius-sm, 6px);
  --w-radius-card: var(--mfw-radius-card, 14px);
  --w-shadow: var(--mfw-shadow, 0 2px 12px rgba(0,0,0,0.05));
  --w-shadow-lg: var(--mfw-shadow-lg, 0 8px 40px rgba(0,0,0,0.22));
  --w-easing: var(--mfw-easing-standard, ease);
  --w-duration-fast: var(--mfw-duration-fast, 0.15s);
  --w-duration-base: var(--mfw-duration-base, 0.2s);
  /* Status tokens */
  --w-success-bg: var(--mfw-status-success, #f3fff7);
  --w-success-text: var(--mfw-status-success-text, #1a6647);
  --w-warning-bg: var(--mfw-status-warning, #fffaf0);
  --w-warning-text: var(--mfw-status-warning-text, #7a4a00);
  --w-danger-bg: var(--mfw-status-danger, #fff3f3);
  --w-danger-text: var(--mfw-status-danger-text, #8c2d2d);
  --w-neutral-bg: var(--mfw-status-neutral, #f5f7ff);
  --w-neutral-text: var(--mfw-status-neutral-text, #4a5268);
  /* Button tokens */
  --w-btn-bg: var(--mfw-btn-bg, var(--mfw-brand, #2e3a8c));
  --w-btn-text: var(--mfw-btn-text, var(--mfw-brand-text, #ffffff));
  --w-btn-border: var(--mfw-btn-border, transparent);
  /* Table header tokens */
  --w-table-hdr-bg: var(--mfw-table-col-header-bg, var(--mfw-brand, #2e3a8c));
  --w-table-hdr-text: var(--mfw-table-col-header-text, #ffffff);
  /* Popup/dialog tokens */
  --w-popup-bg: var(--mfw-popup-bg, var(--mfw-surface-raised, #ffffff));
  --w-popup-overlay: var(--mfw-popup-overlay, rgba(15, 23, 42, 0.5));
  --w-popup-title: var(--mfw-popup-header-text, var(--mfw-text, #1a1f2e));
  /* Input tokens */
  --w-input-bg: var(--mfw-input-bg, #ffffff);
  --w-input-border: var(--mfw-input-border, var(--mfw-border, #dde0ec));
  --w-input-text: var(--mfw-input-text, var(--mfw-text, #1a1f2e));
  /* ── Root-level inheritance ── */
  font-family: var(--w-font) !important;
  font-weight: var(--mfw-font-weight-body);
  color: var(--w-text) !important;
  line-height: 1.6;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  text-align: left;
  /* ── Toolbar (badges + buttons row, dashboard only) ── */
  /* Status row inside toolbar — no bottom margin (toolbar gap handles it) */
  /* ── Dashboard-view alerts sit inside the toolbar padding band ── */
  /* ══════════════════════════════════════════════════
     DASHBOARD SHELL
  ══════════════════════════════════════════════════ */
  /* ── Top bar ── */
  /* ── Tab switcher ── */
  /* ── View switching ── */
  /* ══════════════════════════════════════════════════
     DASHBOARD PANELS
  ══════════════════════════════════════════════════ */
  /* ── Buttons ── */
  /* ── Status badges ── */
  /* hardcoded — semantic status colour for mismatch count badge (danger state) */
  /* ── Alert ── */
  /* ── Carrier presence — Show Panel button ── */
  /* ── Tables ── */
  /* ── Pills ── */
  /* hardcoded — semantic status pill colours; intentionally fixed per status meaning */
  /* ── Replication grid ── */
  /* Tier color coding — hardcoded: semantic tier colours (required/dependent/optional); intentionally fixed */
  /* Grid cell status colours — hardcoded: semantic replication status; intentionally fixed */
  /* Present-but-exempt: object IS carried on this carrier but carrier is in exceptOn list. */
  /* Missing-required: object is effectively required on this carrier but absent */
  /* ── Agent prompt blocks ── */
}
.widget-6dbf3a * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.widget-6dbf3a .sfl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0 16px;
  flex-wrap: wrap;
}
.widget-6dbf3a .sfl-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.widget-6dbf3a .sfl-toolbar .sfl-status-row {
  margin-bottom: 0;
}
.widget-6dbf3a .sfl-view-dashboard > .sfl-alert {
  margin: 0 16px 12px;
}
.widget-6dbf3a .sfl-app {
  max-width: 100%;
  margin: 0;
}
.widget-6dbf3a .sfl-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding: 20px 16px 14px;
  border-bottom: 3px solid var(--w-brand) !important;
  flex-wrap: wrap;
}
.widget-6dbf3a .sfl-title {
  font-size: 1.55rem;
  font-weight: var(--mfw-font-weight-heading, 900);
  color: var(--w-brand) !important;
  font-family: var(--w-font-heading) !important;
  letter-spacing: -0.02em;
}
.widget-6dbf3a .sfl-subtitle {
  font-size: 0.88rem;
  color: var(--w-text-muted) !important;
  margin-top: 4px;
}
.widget-6dbf3a .sfl-view-switch {
  display: inline-flex;
  background: var(--w-surface) !important;
  border: 1px solid var(--w-border) !important;
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  box-shadow: var(--w-shadow) !important;
}
.widget-6dbf3a .sfl-tab {
  border: none;
  background: transparent !important;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.83rem;
  color: var(--w-text-muted) !important;
  cursor: pointer;
  transition: background var(--w-duration-fast) var(--w-easing) !important, color var(--w-duration-fast) var(--w-easing) !important;
  font-family: var(--w-font-ui) !important;
}
.widget-6dbf3a .sfl-tab[aria-selected=true] {
  background: var(--w-btn-bg) !important;
  color: var(--w-btn-text) !important;
}
.widget-6dbf3a .sfl-view {
  display: none;
}
.widget-6dbf3a .sfl-app[data-view=dashboard] .sfl-view-dashboard {
  display: block;
}
.widget-6dbf3a .sfl-panel {
  background: var(--w-surface) !important;
  border: 1px solid var(--w-border) !important;
  border-radius: var(--w-radius-card);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--w-shadow) !important;
}
.widget-6dbf3a .sfl-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.widget-6dbf3a .sfl-panel-title {
  font-size: 1.05rem;
  font-weight: var(--mfw-font-weight-heading, 900);
  color: var(--w-text) !important;
  font-family: var(--w-font-heading) !important;
}
.widget-6dbf3a .sfl-panel-help {
  font-size: 0.84rem;
  color: var(--w-text-muted) !important;
  margin-top: 4px;
  line-height: 1.55;
}
.widget-6dbf3a .sfl-panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.widget-6dbf3a .sfl-btn {
  border: 1.5px solid var(--w-btn-border) !important;
  background: var(--w-btn-bg) !important;
  color: var(--w-btn-text) !important;
  border-radius: var(--w-radius);
  padding: 9px 14px;
  font-weight: 800;
  font-size: 0.84rem;
  cursor: pointer;
  transition: background var(--w-duration-fast) var(--w-easing) !important, opacity var(--w-duration-fast) var(--w-easing) !important;
  font-family: var(--w-font-ui) !important;
}
.widget-6dbf3a .sfl-btn:hover {
  background: var(--mfw-accent, var(--w-brand-hover)) !important;
  opacity: 0.9;
}
.widget-6dbf3a .sfl-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.widget-6dbf3a .sfl-btn-outline {
  background: var(--w-surface) !important;
  color: var(--w-brand) !important;
  border-color: var(--w-brand) !important;
}
.widget-6dbf3a .sfl-status-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.widget-6dbf3a .sfl-badge {
  background: var(--w-chip-bg) !important;
  border: 1px solid var(--w-border) !important;
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 800;
  font-size: 0.84rem;
  color: var(--w-chip-text) !important;
}
.widget-6dbf3a .sfl-badge-mismatch[data-has-mismatches] {
  background: #fff3f3;
  border-color: #f0c0c0;
  color: #8c2d2d;
}
.widget-6dbf3a .sfl-alert {
  /* hardcoded — semantic warning alert; intentionally fixed amber/orange palette */
  background: #fffaf0;
  border: 1px solid #f0d19a;
  border-left: 5px solid #e07a2a;
  border-radius: var(--w-radius);
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #7a3a00;
  margin-bottom: 14px;
}
.widget-6dbf3a .sfl-alert-ok {
  /* hardcoded — semantic success alert; intentionally fixed green palette */
  background: #f3fff7;
  border-color: #b8e6cc;
  border-left-color: #2e9e5c;
  color: #1a6647;
}
.widget-6dbf3a .sfl-alert-silent {
  /* hardcoded — semantic warning (silent carrier) alert; intentionally fixed amber palette */
  background: #fffaf0;
  border-color: #f0d19a;
  border-left-color: #e07a2a;
  color: #7a4a00;
}
.widget-6dbf3a .sfl-show-panel-btn {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-family: var(--w-font-ui) !important;
  font-weight: 600;
  color: var(--w-brand) !important;
  background: var(--w-chip-bg) !important;
  border: 1px solid var(--w-border) !important;
  border-radius: var(--w-radius-sm);
  cursor: pointer;
  vertical-align: middle;
  line-height: 1.6;
  transition: background var(--w-duration-fast) var(--w-easing) !important, border-color var(--w-duration-fast) var(--w-easing) !important;
}
.widget-6dbf3a .sfl-show-panel-btn:hover {
  background: var(--w-row-hover) !important;
  border-color: var(--w-brand) !important;
}
.widget-6dbf3a .sfl-table-wrap {
  overflow-x: auto;
}
.widget-6dbf3a .sfl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.widget-6dbf3a .sfl-table th {
  text-align: left;
  padding: 9px 13px;
  background: var(--w-table-hdr-bg) !important;
  color: var(--w-table-hdr-text) !important;
  font-weight: 900;
  border-bottom: 2px solid var(--w-border) !important;
  white-space: nowrap;
  font-family: var(--w-font-ui) !important;
}
.widget-6dbf3a .sfl-table td {
  padding: 10px 13px;
  border-bottom: 1px solid var(--w-divider) !important;
  vertical-align: top;
  color: var(--w-text) !important;
}
.widget-6dbf3a .sfl-table tr:last-child td {
  border-bottom: none;
}
.widget-6dbf3a .sfl-empty {
  color: var(--w-text-subtle) !important;
  font-style: italic;
  font-size: 0.88rem;
  padding: 18px 13px !important;
}
.widget-6dbf3a .sfl-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.78rem;
  border: 1px solid var(--w-border) !important;
  background: var(--w-chip-bg) !important;
  color: var(--w-neutral-text) !important;
  white-space: nowrap;
  margin: 2px 2px 2px 0;
}
.widget-6dbf3a .sfl-pill-ok {
  background: #f3fff7 !important;
  border-color: #b8e6cc !important;
  color: #1a6647 !important;
}
.widget-6dbf3a .sfl-pill-bad {
  background: #fff3f3 !important;
  border-color: #f0c0c0 !important;
  color: #8c2d2d !important;
}
.widget-6dbf3a .sfl-pill-warn {
  background: #fffaf0 !important;
  border-color: #f0d19a !important;
  color: #7a4a00 !important;
}
.widget-6dbf3a .sfl-pill-dev {
  background: #fff8e6 !important;
  border-color: #f0d19a !important;
  color: #7a4a00 !important;
}
.widget-6dbf3a .sfl-pill-prod {
  background: #f3fff7 !important;
  border-color: #b8e6cc !important;
  color: #1a6647 !important;
}
.widget-6dbf3a .sfl-wname {
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--w-text) !important;
}
.widget-6dbf3a .sfl-wuuid {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  color: var(--w-text-subtle) !important;
}
.widget-6dbf3a .sfl-code {
  font-family: "Courier New", monospace;
  font-size: 0.84rem;
  color: var(--w-brand) !important;
}
.widget-6dbf3a .sfl-small {
  font-size: 0.82rem;
  color: var(--w-text-muted) !important;
  line-height: 1.45;
}
.widget-6dbf3a .sfl-repgrid-wrap {
  overflow-x: auto;
  margin-top: 4px;
  padding: 0 16px 16px;
}
.widget-6dbf3a .sfl-repgrid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(calc(var(--repgrid-cols, 2) - 1), minmax(90px, 1fr));
  gap: 0;
  border: 1px solid var(--w-border) !important;
  border-radius: 0;
  overflow: hidden;
  font-size: 0.82rem;
}
.widget-6dbf3a .sfl-rg-cell {
  padding: 6px 10px;
  border-right: 1px solid var(--w-divider) !important;
  border-bottom: 1px solid var(--w-divider) !important;
  display: flex;
  flex-direction: row;
  gap: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.widget-6dbf3a .sfl-rg-corner {
  background: var(--w-chip-bg) !important;
  border-right: 2px solid var(--w-border) !important;
  border-bottom: 2px solid var(--w-border) !important;
}
.widget-6dbf3a .sfl-rg-hdr {
  background: var(--w-chip-bg) !important;
  border-bottom: 2px solid var(--w-border) !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px 8px;
}
.widget-6dbf3a .sfl-rg-wname {
  font-weight: var(--mfw-font-weight-heading, 900);
  font-size: 0.83rem;
  color: var(--w-text) !important;
  line-height: 1.3;
  word-break: break-word;
  font-family: var(--w-font-heading) !important;
}
.widget-6dbf3a .sfl-rg-wver {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--w-brand) !important;
  font-family: "Courier New", monospace;
}
.widget-6dbf3a .sfl-rg-prompt-btn {
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--w-btn-text) !important;
  background: var(--w-text-muted) !important;
  border: none;
  border-radius: var(--w-radius-sm);
  cursor: pointer;
  transition: background var(--w-duration-base) var(--w-easing) !important, opacity var(--w-duration-base) var(--w-easing) !important;
  white-space: nowrap;
  font-family: var(--w-font-ui) !important;
}
.widget-6dbf3a .sfl-rg-prompt-btn:hover {
  background: var(--w-brand) !important;
}
.widget-6dbf3a .sfl-rg-prompt-btn:disabled {
  /* hardcoded — disabled state; intentionally muted/greyed out */
  background: #c0c4d0 !important;
  cursor: not-allowed;
  opacity: 0.5;
}
.widget-6dbf3a .sfl-rg-prompt-btn:disabled:hover {
  /* hardcoded — disabled hover; no colour change intended */
  background: #c0c4d0 !important;
}
.widget-6dbf3a .sfl-rg-layer-hdr {
  background: var(--w-table-hdr-bg) !important;
  color: var(--w-table-hdr-text) !important;
  padding: 5px 10px;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--w-border) !important;
  justify-content: flex-start;
  text-align: left;
  font-family: var(--w-font-ui) !important;
}
.widget-6dbf3a .sfl-rg-lib {
  background: var(--w-surface) !important;
  border-right: 2px solid var(--w-border) !important;
  align-items: center;
  text-align: left;
  flex-direction: row;
  gap: 6px;
  justify-content: flex-start;
  cursor: help;
}
.widget-6dbf3a .sfl-rg-libname {
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--w-brand) !important;
  cursor: inherit;
  pointer-events: none;
  flex: 1;
}
.widget-6dbf3a .sfl-rg-tier {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--w-text-subtle) !important;
  background: var(--w-chip-bg) !important;
  border: 1px solid var(--w-border) !important;
  padding: 1px 5px;
  pointer-events: none;
  border-radius: var(--w-radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.widget-6dbf3a .sfl-rg-tier[data-tier=required] {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fca5a5;
}
.widget-6dbf3a .sfl-rg-tier[data-tier=dependent] {
  color: #c2410c;
  background: #fed7aa;
  border-color: #fdba74;
}
.widget-6dbf3a .sfl-rg-tier[data-tier=optional] {
  /* hardcoded — optional tier badge; blue semantic distinction, intentionally fixed */
  color: #1e40af;
  background: #dbeafe;
  border-color: #93c5fd;
}
.widget-6dbf3a .sfl-rg-libver {
  font-size: 0.73rem;
  color: var(--w-text-subtle) !important;
  margin-top: 2px;
}
.widget-6dbf3a .sfl-rg-ok {
  background: #f3fff7;
  color: #1a6647;
}
.widget-6dbf3a .sfl-rg-behind {
  background: #fff3f3;
  color: #8c2d2d;
}
.widget-6dbf3a .sfl-rg-na {
  background: #fafafa;
  color: #c0c4d0;
}
.widget-6dbf3a .sfl-rg-exempt {
  background: #f5f0ff;
  color: #9b59b6;
  font-style: italic;
  cursor: default;
}
.widget-6dbf3a .sfl-rg-present-exempt {
  /* hardcoded — semantic present-but-exempt warning state; intentionally fixed amber palette */
  background: #fffbea;
  color: #92400e;
  border-left: 3px solid #f59e0b;
  font-weight: 700;
  cursor: help;
}
.widget-6dbf3a .sfl-rg-present-exempt .sfl-rg-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
}
.widget-6dbf3a .sfl-rg-present-exempt .sfl-rg-ver {
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  /* hardcoded — matches present-exempt amber text; intentionally fixed */
  color: #92400e;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.widget-6dbf3a .sfl-rg-missing-req {
  /* hardcoded — semantic missing-required error state; intentionally fixed red palette */
  background: #fff0f0;
  color: #b91c1c;
  border-left: 3px solid #ef4444;
  font-weight: 700;
  cursor: help;
}
.widget-6dbf3a .sfl-rg-missing-req .sfl-rg-icon {
  /* hardcoded — matches missing-required red; intentionally fixed */
  color: #dc2626;
}
.widget-6dbf3a .sfl-rg-missing-req .sfl-rg-ver {
  font-size: 0.68rem;
  font-family: "Courier New", monospace;
  /* hardcoded — matches missing-required red text; intentionally fixed */
  color: #b91c1c;
  opacity: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.widget-6dbf3a .sfl-rg-icon {
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}
.widget-6dbf3a .sfl-rg-ver {
  font-size: 0.7rem;
  font-family: "Courier New", monospace;
  opacity: 0.85;
  flex-shrink: 0;
}
.widget-6dbf3a .sfl-agent-prompt {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Courier New", monospace;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--w-text) !important;
  background: var(--w-surface) !important;
  border: 1px solid var(--w-border) !important;
  border-left: 4px solid var(--w-brand) !important;
  border-radius: var(--w-radius-card);
  padding: 16px 18px;
  max-height: 420px;
  overflow-y: auto;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 780px) {
  .widget-6dbf3a .sfl-topbar {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 767px) {
  .widget-6dbf3a .sfl-topbar {
    padding: 12px 10px 12px;
  }
  .widget-6dbf3a .sfl-toolbar {
    padding: 0 10px;
    flex-direction: column;
    align-items: flex-start;
  }
  .widget-6dbf3a .sfl-repgrid-wrap {
    padding: 0 10px 12px;
  }
}

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700&display=swap");
/* ── Widget root ──────────────────────────────────────────────────────────── */
.widget-19bbc2 {
  /* ════════════════════════════════════════════════════════════
     LAYER 1 — Platform token aliases (--mfw-* → --w-*)
     ALL --mfw-* references live ONLY here.
     Every --mfw-* var has a hardcoded fallback (Rule 2).
     ALL CSS rules below consume --w-* tokens only (Rule 1).
     ════════════════════════════════════════════════════════════ */
  --w-bg: var(--mfw-surface, #f5f6fa);
  --w-surface: var(--mfw-surface-raised, #ffffff);
  --w-border: var(--mfw-border, #e0e4ef);
  --w-brand: var(--mfw-brand, #2d6cdf);
  --w-brand-hover: var(--mfw-accent, #1a4fb5);
  --w-brand-text: var(--mfw-brand-text, #ffffff);
  --w-text: var(--mfw-text, #1a1f36);
  --w-text-muted: var(--mfw-text-muted, #6b7280);
  --w-text-subtle: var(--mfw-text-subtle, #9ca3af);
  --w-row-hover: var(--mfw-surface-subtle, #eef3ff);
  --w-chip-bg: var(--mfw-surface-subtle, #f0f4ff);
  --w-chip-text: var(--mfw-brand, #2d6cdf);
  --w-divider: var(--mfw-divider, var(--mfw-border, #e0e4ef));
  --w-focus: var(--mfw-focus, var(--mfw-brand, #2d6cdf));
  --w-font: var(--mfw-font-family-ui, "Heebo", system-ui, sans-serif);
  --w-font-heading: var(--mfw-font-family-heading, var(--mfw-font-family-body, inherit));
  --w-font-ui: var(--mfw-font-family-ui, var(--mfw-font-family-body, inherit));
  --w-font-weight-body: var(--mfw-font-weight-body, 400);
  --w-font-weight-heading: var(--mfw-font-weight-heading, 600);
  --w-radius: var(--mfw-radius, 8px);
  --w-radius-sm: var(--mfw-radius-sm, 6px);
  --w-radius-card: var(--mfw-radius-card, 10px);
  --w-shadow: var(--mfw-shadow, 0 2px 12px rgba(0,0,0,0.08));
  --w-shadow-lg: var(--mfw-shadow-lg, 0 8px 40px rgba(0,0,0,0.22));
  --w-easing: var(--mfw-easing-standard, ease);
  --w-duration-fast: var(--mfw-duration-fast, 0.15s);
  --w-duration-base: var(--mfw-duration-base, 0.2s);
  /* Status tokens */
  --w-success-bg: var(--mfw-status-success, #d1fae5);
  --w-success-text: var(--mfw-status-success-text, #065f46);
  --w-warning-bg: var(--mfw-status-warning, #fef3c7);
  --w-warning-text: var(--mfw-status-warning-text, #92400e);
  --w-danger-bg: var(--mfw-status-danger, #fee2e2);
  --w-danger-text: var(--mfw-status-danger-text, #991b1b);
  --w-neutral-bg: var(--mfw-status-neutral, #f3f4f6);
  --w-neutral-text: var(--mfw-status-neutral-text, #6b7280);
  /* Button tokens */
  --w-btn-bg: var(--mfw-btn-bg, var(--mfw-brand, #2d6cdf));
  --w-btn-text: var(--mfw-btn-text, var(--mfw-brand-text, #ffffff));
  --w-btn-border: var(--mfw-btn-border, transparent);
  /* Table header tokens */
  --w-table-hdr-bg: var(--mfw-table-col-header-bg, var(--mfw-brand, #2d6cdf));
  --w-table-hdr-text: var(--mfw-table-col-header-text, #ffffff);
  /* Popup / dialog tokens */
  --w-popup-bg: var(--mfw-popup-bg, var(--mfw-surface-raised, #ffffff));
  --w-popup-overlay: var(--mfw-popup-overlay, rgba(15, 23, 42, 0.5));
  --w-popup-title: var(--mfw-popup-header-text, var(--mfw-text, #1a1f36));
  /* Input tokens */
  --w-input-bg: var(--mfw-input-bg, #ffffff);
  --w-input-border: var(--mfw-input-border, var(--mfw-border, #e0e4ef));
  --w-input-text: var(--mfw-input-text, var(--mfw-text, #1a1f36));
  /* On-brand surface text (Rule 5 — icon / name colour on the navbar) */
  --w-on-brand: var(--mfw-text-on-brand, #ffffff);
  /* ════════════════════════════════════════════════════════════
     RULE 5 — Root-level font + colour inheritance
     ════════════════════════════════════════════════════════════ */
  font-family: var(--w-font) !important;
  color: var(--w-text) !important;
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 160px;
  position: relative;
  margin: 0;
  /* ── Login bar shell ─────────────────────────────────────────────────── */
  /* ── Logged-in panel ─────────────────────────────────────────────────── */
  /* ── Guest panel ─────────────────────────────────────────────────────── */
  /* ── Name + theme label stack ───────────────────────────────────────── */
  /* ── Name stack CSS tooltip ─────────────────────────────────────────── */
  /* ── Display name — uses on-brand text colour ──────────────────────────── */
  /* ── Theme name — dimmed line beneath the display name ──────────────── */
  /* ── Privacy padlock ─────────────────────────────────────────────────── */
  /* ── Account icon button (shared base) ──────────────────────────────── */
  /* ── Solid icon: normal logged-in user — brand primary colour ──────────── */
  /* ── Solid icon: admin — gold ─────────────────────────────────────────── */
  /* Swap icons when admin class is active */
  /* ── Outline icon: guest / not logged in ─────────────────────────────── */
  /* ── Dropdown container ──────────────────────────────────────────────── */
  /* ── Dropdown menu ───────────────────────────────────────────────────── */
  /* ── Menu items (shared for <a> and <button>) ────────────────────────── */
  /* ── Admin divider ───────────────────────────────────────────────────── */
  /* ── Admin menu items ────────────────────────────────────────────────── */
  /* ── Responsive ──────────────────────────────────────────────────────── */
}
.widget-19bbc2 * {
  box-sizing: border-box;
}
.widget-19bbc2 .mf-login-bar {
  width: 100%;
  max-width: 100%;
  min-width: 160px;
  background: transparent;
  font-family: var(--w-font) !important;
  font-size: 13px;
  margin: 0;
}
.widget-19bbc2 .mf-login-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 5px;
  min-height: 38px;
  margin: 0;
}
.widget-19bbc2 .mf-login-bar-auth {
  display: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.widget-19bbc2 .mf-login-bar-guest {
  display: none;
  align-items: center;
  min-width: 0;
}
.widget-19bbc2 .mf-login-bar-name-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
  max-width: 180px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  overflow: visible;
}
.widget-19bbc2 .mf-login-bar-name-stack:hover,
.widget-19bbc2 .mf-login-bar-name-stack:focus {
  text-decoration: none;
  color: inherit;
  outline: none;
}
.widget-19bbc2 .mf-login-bar-name-tip {
  position: relative;
}
.widget-19bbc2 .mf-login-bar-name-tip::after {
  content: "Change your Mood in your User Profile";
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
  background: var(--w-surface) !important;
  color: var(--w-text) !important;
  border: 1px solid var(--w-border);
  box-shadow: var(--w-shadow);
  font-size: 11px;
  line-height: 1.4;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 9999;
}
.widget-19bbc2 .mf-login-bar-name-tip:hover::after {
  opacity: 1;
}
.widget-19bbc2 .mf-login-bar-name {
  font-family: var(--w-font) !important;
  font-weight: 400;
  color: var(--w-on-brand) !important;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.widget-19bbc2 .mf-login-bar-theme {
  font-family: var(--w-font) !important;
  font-weight: 400;
  color: var(--w-on-brand) !important;
  font-size: 10px;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}
.widget-19bbc2 .mf-login-bar-theme:empty {
  display: none;
}
.widget-19bbc2 .mf-login-bar-privacy {
  display: inline-flex;
  align-items: center;
  color: var(--w-on-brand) !important;
  flex-shrink: 0;
  opacity: 0.85;
}
.widget-19bbc2 #mf-login-bar-privacy-locked {
  display: none;
  align-items: center;
  line-height: 1;
}
.widget-19bbc2 .mf-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 6px;
  /* Rule 6 — transitions use duration + easing tokens */
  transition: opacity var(--w-duration-fast) var(--w-easing) !important, background var(--w-duration-fast) var(--w-easing) !important;
  flex-shrink: 0;
  line-height: 1;
}
.widget-19bbc2 .mf-account-btn:hover {
  /* hardcoded — semi-transparent white overlay on a brand-coloured navbar;
     must remain white regardless of theme so it is always visible */
  background: rgba(255, 255, 255, 0.12) !important;
}
.widget-19bbc2 .mf-account-btn:active {
  /* hardcoded — semi-transparent white overlay, same reason as :hover */
  background: rgba(255, 255, 255, 0.2) !important;
}
.widget-19bbc2 .mf-account-icon--solid {
  color: var(--w-brand) !important;
  display: block;
}
.widget-19bbc2 .mf-account-icon--admin {
  /* hardcoded — semantic status colour: gold distinguishes admin from
     regular user at a glance; intentionally not theme-adaptive */
  color: #f5c842 !important;
  display: none;
}
.widget-19bbc2 .mf-account-btn.is-admin .mf-account-icon--solid {
  display: none;
}
.widget-19bbc2 .mf-account-btn.is-admin .mf-account-icon--admin {
  display: block;
}
.widget-19bbc2 .mf-account-icon--outline {
  color: var(--w-brand) !important;
  opacity: 0.65;
}
.widget-19bbc2 .mf-account-btn--guest:hover .mf-account-icon--outline {
  opacity: 1;
}
.widget-19bbc2 .mf-account-dropdown {
  position: relative;
  flex-shrink: 0;
}
.widget-19bbc2 .mf-logout-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 150px;
  background: var(--w-surface) !important;
  border: 1px solid var(--w-border) !important;
  border-radius: var(--w-radius-card);
  box-shadow: var(--w-shadow) !important;
  z-index: 9999;
  overflow: hidden;
  display: none;
  animation: mf-dropdown-in var(--w-duration-fast) var(--w-easing);
}
.widget-19bbc2 .mf-logout-menu.mf-logout-menu--open {
  display: block;
}
.widget-19bbc2 .mf-logout-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--w-font) !important;
  font-size: 13px;
  font-weight: 400;
  color: var(--w-text) !important;
  text-align: left;
  text-decoration: none;
  transition: background var(--w-duration-fast) var(--w-easing) !important;
  white-space: nowrap;
}
.widget-19bbc2 .mf-logout-menu-item:hover {
  background: var(--w-row-hover) !important;
  color: var(--w-text) !important;
}
.widget-19bbc2 .mf-admin-divider {
  height: 1px;
  background: var(--w-divider) !important;
  margin: 4px 0;
}
.widget-19bbc2 .mf-admin-item {
  color: var(--w-brand) !important;
}
.widget-19bbc2 .mf-admin-item:hover {
  color: var(--w-brand) !important;
  background: var(--w-row-hover) !important;
}
@media (max-width: 767px) {
  .widget-19bbc2 {
    /* On mobile: icon comes first, text second — reverse the desktop order */
    /* Left-align the name/theme stack on mobile */
    /* Larger name on mobile */
    /* Theme name — balanced with the larger name */
    /* Dropdown opens above and to the right of the icon on mobile */
  }
  .widget-19bbc2 .mf-login-bar-inner {
    padding: 5px 5px 5px 0;
    justify-content: flex-start;
  }
  .widget-19bbc2 .mf-login-bar-auth {
    flex-direction: row-reverse;
    gap: 9px;
  }
  .widget-19bbc2 .mf-login-bar-guest {
    flex-direction: row-reverse;
  }
  .widget-19bbc2 .mf-login-bar-name-stack {
    max-width: 120px;
    align-items: flex-start;
  }
  .widget-19bbc2 .mf-login-bar-name {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff !important;
  }
  .widget-19bbc2 .mf-login-bar-theme {
    font-size: 12px;
    color: #ffffff !important;
  }
  .widget-19bbc2 .mf-logout-menu {
    right: auto;
    left: 0;
    top: auto;
    bottom: calc(100% + 6px);
  }
  .widget-19bbc2 .mf-account-btn {
    padding-left: 0;
    margin-left: -6px;
  }
  .widget-19bbc2 .mf-login-bar-name-tip::after {
    right: auto;
    left: 0;
  }
}

/* ── Dropdown entrance animation (outside root to avoid nesting quirks) ── */
@keyframes mf-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@charset "UTF-8";
.widget-f28ff9 {
  font-family: var(--mfw-font-family-body, inherit) !important;
  color: var(--mfw-text, #1a1f36) !important;
  box-sizing: border-box;
  /* ── Version Bar ────────────────────────────────── */
  /* ── Contact Icons ───────────────────────────── */
  /* Brand colours for 3rd-party services — kept hardcoded intentionally */
  /* ── Status dot (traffic light) ──────────────── */
  /* STATUS DOTS: intentionally hardcoded — not yet in mfw token set */
  /* ── Search Stage dots ───────────────────────── */
  /* STAGE DOTS: intentionally hardcoded — not yet in mfw token set */
  /* yellow */
  /* green  */
  /* blue   */
  /* red    */
  /* ── Search Status key (inline in top bar) ─────── */
  /* ── Sortable headers ────────────────────────── */
  /* ── Nav Filters ─────────────────────────────── */
  /* ── Search input with magnifier (Directory pattern) ── */
  /* ── Modal icons (detail panel header) ──────── */
  /* ── flagcdn.com flag image ──────────────────── */
  /* ── Wrapper ─────────────────────────────────── */
  /* ── Flag: top-right of header, above Found button ── */
  /* ── Top Bar ─────────────────────────────────── */
  /* ── Main Layout ─────────────────────────────── */
  /* ── Nav Panel ───────────────────────────────── */
  /* Top line: name text + OM badge side by side */
  /* Header Name cell must stay in row direction so label + sort arrow are side-by-side */
  /* OM / MalSoc badges — intentionally hardcoded navy (#1e3a5f): not yet in mfw token set */
  /* ── Detail Panel ────────────────────────────── */
  /* The inner card — gives the popup / card feel */
  /* Ensure save bar and its children are never clipped */
  /* rw-reveal-btn minimum tap target on desktop */
  /* Person Header — tinted band: surface-subtle over the raised card surface */
  /* ── Profile Card (canonical spec) ───────────── */
  /* ── Search Status badge (below name in detail header) ─── */
  /* SEARCH STATUS BADGES: intentionally hardcoded — not yet in mfw token set */
  /* ── Contact icons row (right-side header, left of Found button) ─ */
  /* 3rd-party brand colours — kept hardcoded intentionally */
  /* OM / MalSoc badges — intentionally hardcoded navy (#1e3a5f): not yet in mfw token set */
  /* ── Two-column detail body ───────────────────── */
  /* ── Activity Log entries ─────────────────────── */
  /* LOG STATUS DOTS: intentionally hardcoded — not yet in mfw token set */
  /* ── System log expanded table (below note text) ─ */
  /* ── Submit button (spans full width above columns) ─────── */
  /* ── Form sections (right column) ───────────── */
  /* Field error */
  /* Toggle Switch */
  /* ── Buttons ─────────────────────────────────── */
  /* ── Dialog overlays ─────────────────────────── */
  /* Scrollbar styling */
  /* Mobile detail overlay scrollbar */
  /* ── rw-* contact icon styles (from __mfUtils.buildContactIcons) ───── */
  /* 3rd-party brand colours — kept hardcoded intentionally */
  /* MalSoc badge — intentionally hardcoded navy: not yet in mfw token set */
  /* ── Responsive: Tablet ──────────────────────── */
  /* ── Responsive: Mobile ──────────────────────── */
  /* Hide back button on desktop */
}
.widget-f28ff9 * {
  box-sizing: border-box;
}
.widget-f28ff9 .rrt-version-bar {
  background: var(--mfw-surface-inverse, #1e3a5f);
  color: var(--mfw-text-on-inverse, #a0b4cc);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: right;
  padding: 3px 12px;
  flex-shrink: 0;
}
.widget-f28ff9 .rrt-btn-secondary {
  padding: 10px 22px;
  background: var(--mfw-btn-secondary-bg, var(--mfw-surface-subtle, #f5f6fa)) !important;
  color: var(--mfw-btn-secondary-text, var(--mfw-text, #1a1f36)) !important;
  border: 1px solid var(--mfw-border, #e0e4ef) !important;
  border-radius: var(--mfw-radius, 8px);
  font-size: 0.875rem !important;
  font-weight: var(--mfw-font-weight-body, 600) !important;
  white-space: nowrap;
  padding-right: 10px;
  width: 1%;
  cursor: pointer;
  transition: background var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease) !important;
}
.widget-f28ff9 .rrt-btn-secondary:hover {
  background: var(--mfw-btn-secondary-bg-hover, var(--mfw-border, #e0e4ef)) !important;
}
.widget-f28ff9 .rrt-col-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.widget-f28ff9 .rrt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--mfw-radius-sm, 5px);
  text-decoration: none;
  transition: background var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease), opacity var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease);
  flex-shrink: 0;
  cursor: pointer;
}
.widget-f28ff9 .rrt-icon-btn svg {
  width: 13px;
  height: 13px;
  display: block;
}
.widget-f28ff9 .rrt-icon-btn.rrt-icon-whatsapp {
  color: #25D366;
}
.widget-f28ff9 .rrt-icon-btn.rrt-icon-email {
  color: #2563eb;
}
.widget-f28ff9 .rrt-icon-btn.rrt-icon-linkedin {
  color: #0A66C2;
}
.widget-f28ff9 .rrt-icon-btn.rrt-icon-call {
  color: #16a34a;
}
.widget-f28ff9 .rrt-icon-btn.rrt-icon-sms {
  color: #7c3aed;
}
.widget-f28ff9 .rrt-icon-btn:hover {
  background: var(--mfw-overlay-hover, rgba(0, 0, 0, 0.07));
}
.widget-f28ff9 .rrt-icon-btn.rrt-icon-empty {
  color: var(--mfw-border, #d1d5db);
  pointer-events: none;
  cursor: default;
}
.widget-f28ff9 .rrt-mobile-only {
  display: none;
}
.widget-f28ff9 .rrt-col-status-hdr {
  width: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-f28ff9 .rrt-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  margin: 0 auto;
}
.widget-f28ff9 .rrt-status-dot.status-active {
  background: #22c55e;
}
.widget-f28ff9 .rrt-status-dot.status-pending {
  background: #f59e0b;
}
.widget-f28ff9 .rrt-status-dot.status-blocked {
  background: #ef4444;
}
.widget-f28ff9 .rrt-status-dot.status-abandoned {
  background: #9ca3af;
}
.widget-f28ff9 .rrt-status-dot.status-none {
  background: transparent;
  border: 1.5px solid #d1d5db;
}
.widget-f28ff9 .rrt-stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  margin: 0 auto;
}
.widget-f28ff9 .rrt-stage-dot.stage-not-started {
  background: #f59e0b;
}
.widget-f28ff9 .rrt-stage-dot.stage-in-progress {
  background: #22c55e;
}
.widget-f28ff9 .rrt-stage-dot.stage-successful {
  background: #3b82f6;
}
.widget-f28ff9 .rrt-stage-dot.stage-failed {
  background: #ef4444;
}
.widget-f28ff9 .rrt-search-status-key {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--mfw-surface-raised, #ffffff) !important;
  border: 1px solid var(--mfw-border, #e0e4ef) !important;
  border-radius: 20px;
  padding: 4px 12px;
  box-shadow: var(--mfw-shadow, 0 2px 12px rgba(0, 0, 0, 0.08));
}
.widget-f28ff9 .rrt-ssk-label {
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mfw-text-subtle, #9ca3af) !important;
}
.widget-f28ff9 .rrt-ssk-keys {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.widget-f28ff9 .rrt-ssk-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.widget-f28ff9 .rrt-ssk-text {
  font-size: 11px !important;
  color: var(--mfw-text-muted, #6b7280) !important;
  white-space: nowrap;
}
.widget-f28ff9 .rrt-nav-header .rrt-sortable {
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.widget-f28ff9 .rrt-nav-header span.rrt-sortable.rrt-sort-asc::after {
  content: "▲";
  font-size: 0.65rem !important;
  opacity: 0.9;
  display: inline-block;
  flex-shrink: 0;
}
.widget-f28ff9 .rrt-nav-header span.rrt-sortable.rrt-sort-desc::after {
  content: "▼";
  font-size: 0.65rem !important;
  opacity: 0.9;
  display: inline-block;
  flex-shrink: 0;
}
.widget-f28ff9 .rrt-nav-filters {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
}
.widget-f28ff9 .rrt-search-wrap {
  position: relative;
  width: 100%;
}
.widget-f28ff9 .rrt-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--mfw-brand, #2d6cdf) !important;
  pointer-events: none;
}
.widget-f28ff9 .rrt-search {
  width: 100%;
  padding: 8px 12px 8px 32px !important;
  border: 1px solid var(--mfw-input-border, var(--mfw-border, #e0e4ef)) !important;
  border-radius: var(--mfw-radius-card, 7px);
  font-size: 0.875rem !important;
  font-weight: var(--mfw-font-weight-body, normal);
  outline: none;
  background: var(--mfw-input-bg, var(--mfw-surface, #fff)) !important;
  color: var(--mfw-input-text, var(--mfw-text, #1a1f36)) !important;
  font-family: var(--mfw-font-family-ui, var(--mfw-font-family-body, inherit)) !important;
  box-sizing: border-box !important;
  transition: border-color var(--mfw-duration-base, 0.2s) var(--mfw-easing-standard, ease) !important;
}
.widget-f28ff9 .rrt-search:focus {
  border-color: var(--mfw-focus, var(--mfw-brand, #2d6cdf)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mfw-brand, #2d6cdf) 12%, transparent);
}
.widget-f28ff9 .rrt-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.widget-f28ff9 .rrt-house-filter {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 6px 10px;
}
.widget-f28ff9 .rrt-active-cases-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.widget-f28ff9 .rrt-active-cases-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mfw-text-muted, #6b7280) !important;
  user-select: none;
}
.widget-f28ff9 .rrt-flag-img {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  border-radius: var(--mfw-radius-sm, 2px);
  box-shadow: 0 0 0 1px var(--mfw-overlay-border, rgba(0, 0, 0, 0.1));
  object-fit: cover;
}
.widget-f28ff9 .rrt-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 40px);
  max-height: 900px;
  min-height: 400px;
  background: transparent !important;
  border-radius: var(--mfw-radius-card, 10px) !important;
  overflow: hidden;
  position: relative;
}
.widget-f28ff9 .rrt-header-flag {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-shrink: 0;
  padding-right: 4px;
}
.widget-f28ff9 .rrt-header-flag .rrt-flag-img {
  width: 52px;
  height: auto;
  border-radius: var(--mfw-radius-sm, 4px);
  box-shadow: var(--mfw-shadow, 0 2px 6px rgba(0, 0, 0, 0.22));
  display: block;
}
.widget-f28ff9 .rrt-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  background: transparent !important;
  border-top: 1px solid var(--mfw-border, #e0e4ef) !important;
  border-bottom: 1px solid var(--mfw-border, #e0e4ef) !important;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.widget-f28ff9 .rrt-stats {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.widget-f28ff9 .rrt-stat-badge {
  font-size: 12px !important;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--mfw-surface-subtle, #f0f4ff) !important;
  color: var(--mfw-brand, #2d6cdf) !important;
  border: 1px solid var(--mfw-border, #e0e4ef) !important;
}
.widget-f28ff9 .rrt-stat-badge.rrt-contacted {
  background: var(--mfw-status-success, #d1fae5) !important;
  color: var(--mfw-status-success-text, #065f46) !important;
  border-color: transparent !important;
}
.widget-f28ff9 .rrt-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.widget-f28ff9 .rrt-nav-panel {
  width: 440px;
  min-width: 280px;
  max-width: 520px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--mfw-border, #e0e4ef) !important;
  background: transparent !important;
  overflow: hidden;
}
.widget-f28ff9 .rrt-nav-header {
  display: grid;
  grid-template-columns: 18px 2fr 110px 130px;
  gap: 0;
  padding: 14px 14px;
  background: var(--mfw-table-col-header-bg, var(--mfw-brand, #2d6cdf)) !important;
  border-bottom: 1px solid var(--mfw-border, #e0e4ef) !important;
  font-size: 11px;
  font-weight: var(--mfw-font-weight-body, 700) !important;
  font-family: var(--mfw-font-family-ui, var(--mfw-font-family-body, inherit)) !important;
  color: var(--mfw-table-col-header-text, var(--mfw-brand-text, #ffffff)) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  border-radius: var(--mfw-radius-card, 10px) 0 0 0;
}
.widget-f28ff9 .rrt-nav-header > span {
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.widget-f28ff9 .rrt-nav-body {
  flex: 1;
  overflow-y: auto;
  background: var(--mfw-surface-subtle, #f5f6fa) !important;
  border-left: 1px solid var(--mfw-border, #e0e4ef);
  border-bottom: 1px solid var(--mfw-border, #e0e4ef);
}
.widget-f28ff9 .rrt-loading {
  padding: 28px 20px;
  text-align: center;
  color: var(--mfw-text-subtle, #9ca3af) !important;
  font-size: 0.875rem !important;
  font-weight: var(--mfw-font-weight-body) !important;
}
.widget-f28ff9 .rrt-nav-row {
  display: grid;
  grid-template-columns: 18px 2fr 110px 130px;
  gap: 0;
  padding: 10px 14px;
  min-height: 55px;
  cursor: pointer;
  border-bottom: 1px solid var(--mfw-border, #e0e4ef) !important;
  border-left: 3px solid transparent !important;
  transition: background var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease), border-color var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease);
  align-items: center;
  background: var(--mfw-surface, #ffffff) !important;
}
.widget-f28ff9 .rrt-nav-row:hover {
  background: var(--mfw-surface-subtle, #eef3ff) !important;
}
.widget-f28ff9 .rrt-nav-row.rrt-row-active {
  background: color-mix(in srgb, var(--mfw-brand, #2d6cdf) 15%, transparent) !important;
  border-left-color: var(--mfw-brand, #2d6cdf) !important;
  color: var(--mfw-text, #1a1f36) !important;
}
.widget-f28ff9 .rrt-nav-row.rrt-row-active .rrt-col-name-text,
.widget-f28ff9 .rrt-nav-row.rrt-row-active .rrt-col-name-house,
.widget-f28ff9 .rrt-nav-row.rrt-row-active .rrt-col-name,
.widget-f28ff9 .rrt-nav-row.rrt-row-active .rrt-col-by-name,
.widget-f28ff9 .rrt-nav-row.rrt-row-active .rrt-col-by-date,
.widget-f28ff9 .rrt-nav-row.rrt-row-active .rrt-col-by-count {
  color: var(--mfw-text, #1a1f36) !important;
}
.widget-f28ff9 .rrt-col-name {
  font-size: 13px;
  font-weight: var(--mfw-font-weight-body, 600) !important;
  color: var(--mfw-text, #1a1f36) !important;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
}
.widget-f28ff9 .rrt-col-name-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.widget-f28ff9 .rrt-nav-header .rrt-col-name {
  flex-direction: row;
  align-items: center;
  gap: 3px;
  justify-content: flex-start;
  color: var(--mfw-table-col-header-text, var(--mfw-brand-text, #ffffff)) !important;
}
.widget-f28ff9 .rrt-col-name-text {
  font-size: 0.8125rem !important;
  font-weight: var(--mfw-font-weight-body, 600) !important;
  color: var(--mfw-text, #1a1f36) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-f28ff9 .rrt-col-name-house {
  font-size: 10px;
  font-weight: 400;
  color: var(--mfw-text-subtle, #9ca3af) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.widget-f28ff9 .rrt-col-name-om {
  display: inline-flex;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #1e3a5f;
  color: #ffffff;
  border-radius: 4px;
  padding: 2px 5px;
  line-height: 1.4;
  cursor: default;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  margin-top: 2px;
}
.widget-f28ff9 .rrt-malsoc-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #1e3a5f;
  color: #ffffff;
  border-radius: 4px;
  padding: 2px 5px;
  line-height: 1.4;
  display: inline-block;
}
.widget-f28ff9 .rrt-col-count {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--mfw-brand, #2d6cdf) !important;
}
.widget-f28ff9 .rrt-col-count.rrt-zero {
  color: var(--mfw-text-subtle, #9ca3af) !important;
  font-weight: 400;
}
.widget-f28ff9 .rrt-col-by {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  min-width: 0;
}
.widget-f28ff9 .rrt-col-by-name {
  font-size: 11px;
  font-weight: var(--mfw-font-weight-body, 600) !important;
  color: var(--mfw-text-muted, #6b7280) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-f28ff9 .rrt-col-by-date {
  font-size: 10px;
  font-weight: 400;
  color: var(--mfw-text-subtle, #9ca3af) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-f28ff9 .rrt-col-by-count {
  font-size: 9px;
  font-weight: 400;
  color: var(--mfw-text-subtle, #9ca3af) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.75;
}
.widget-f28ff9 .rrt-detail-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mfw-surface, #f5f6fa) !important;
  padding: 12px;
}
.widget-f28ff9 .rrt-detail-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--mfw-surface-raised, var(--mfw-surface, #ffffff)) !important;
  border-radius: var(--mfw-radius-card, 10px);
  border: 1px solid var(--mfw-border, #e0e4ef);
  box-shadow: var(--mfw-shadow, 0 2px 12px rgba(0, 0, 0, 0.08));
}
.widget-f28ff9 .rrt-save-bar,
.widget-f28ff9 .rrt-save-bar-right,
.widget-f28ff9 .rrt-header-icon-row {
  overflow: visible;
}
.widget-f28ff9 .rw-reveal-btn {
  min-width: 28px;
  min-height: 28px;
}
.widget-f28ff9 .rrt-detail-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--mfw-text-subtle, #9ca3af) !important;
  padding: 40px;
  text-align: center;
}
.widget-f28ff9 .rrt-placeholder-icon {
  font-size: 52px;
  opacity: 0.35;
}
.widget-f28ff9 .rrt-detail-placeholder p {
  font-size: 0.875rem !important;
  font-weight: var(--mfw-font-weight-body) !important;
  max-width: 280px;
  line-height: 1.6;
}
.widget-f28ff9 .rrt-person-header {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: var(--mfw-surface-subtle, #f0f4ff) !important;
  border-bottom: 1px solid var(--mfw-border, #e0e4ef) !important;
  border-radius: var(--mfw-radius-card, 10px) var(--mfw-radius-card, 10px) 0 0;
  flex-shrink: 0;
}
.widget-f28ff9 .rrt-profile-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 20px 12px;
  flex: 1;
  min-width: 0;
}
.widget-f28ff9 .rrt-person-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  color: var(--mfw-brand-text, #ffffff) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.5px;
  overflow: visible;
}
.widget-f28ff9 .rrt-profile-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.widget-f28ff9 .rrt-profile-top-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.widget-f28ff9 .rrt-profile-name-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.widget-f28ff9 .rrt-person-house-label {
  font-size: 0.875rem !important;
  font-weight: var(--mfw-font-weight-body, 500) !important;
  color: var(--mfw-text-subtle, #9ca3af) !important;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-f28ff9 .rrt-person-name {
  margin: 0;
  font-size: 18px;
  font-weight: var(--mfw-font-weight-heading, 700) !important;
  font-family: var(--mfw-font-family-heading, var(--mfw-font-family-body, inherit)) !important;
  color: var(--mfw-text, #1a1f36) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}
.widget-f28ff9 .rrt-profile-location {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
}
.widget-f28ff9 .rrt-profile-city {
  font-size: 12px;
  font-weight: 500;
  color: var(--mfw-text-muted, #6b7280) !important;
  white-space: nowrap;
}
.widget-f28ff9 .rrt-attending-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.widget-f28ff9 .rrt-attending-badge.att-confirmed {
  background: var(--mfw-status-success, #d1fae5) !important;
  color: var(--mfw-status-success-text, #065f46) !important;
}
.widget-f28ff9 .rrt-attending-badge.att-no {
  background: var(--mfw-status-danger, #fee2e2) !important;
  color: var(--mfw-status-danger-text, #991b1b) !important;
}
.widget-f28ff9 .rrt-attending-badge.att-maybe {
  background: var(--mfw-status-warning, #fef3c7) !important;
  color: var(--mfw-status-warning-text, #92400e) !important;
}
.widget-f28ff9 .rrt-attending-badge.att-undecided {
  background: var(--mfw-surface-subtle, #f0f4ff) !important;
  color: var(--mfw-brand, #2d6cdf) !important;
}
.widget-f28ff9 .rrt-search-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  margin-top: 3px;
  width: 150px;
  text-align: center;
  box-sizing: border-box;
}
.widget-f28ff9 .rrt-search-status-badge.rrt-ss-connected {
  background: #dbeafe;
  color: #1e3a8a;
  border: 1px solid #93c5fd;
}
.widget-f28ff9 .rrt-search-status-badge.rrt-ss-refused {
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fca5a5;
}
.widget-f28ff9 .rrt-search-status-badge.rrt-ss-abandoned {
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fca5a5;
}
.widget-f28ff9 .rrt-search-status-badge.rrt-ss-contacted {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}
.widget-f28ff9 .rrt-search-status-badge.rrt-ss-info-found {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}
.widget-f28ff9 .rrt-search-status-badge.rrt-ss-social-found {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}
.widget-f28ff9 .rrt-search-status-badge.rrt-ss-in-progress {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}
.widget-f28ff9 .rrt-search-status-badge.rrt-ss-known-to-malsoc {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fcd34d;
}
.widget-f28ff9 .rrt-search-status-badge.rrt-ss-unknown {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fcd34d;
}
.widget-f28ff9 .rrt-header-icon-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.widget-f28ff9 .rrt-modal-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  text-decoration: none;
  transition: transform var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease), opacity var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease);
  color: inherit;
}
.widget-f28ff9 .rrt-modal-icon-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}
.widget-f28ff9 .rrt-modal-icon-btn.email-link {
  color: #2563eb;
}
.widget-f28ff9 .rrt-modal-icon-btn.whatsapp-link {
  color: #25D366;
}
.widget-f28ff9 .rrt-modal-icon-btn.linkedin-link {
  color: #0A66C2;
}
.widget-f28ff9 .rrt-modal-icon-btn:hover {
  transform: translateY(-2px);
  opacity: 0.75;
}
.widget-f28ff9 .rrt-om-header-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #1e3a5f;
  color: #ffffff;
  border-radius: 4px;
  padding: 3px 7px;
  line-height: 1.4;
  display: inline-block;
  cursor: default;
}
.widget-f28ff9 .rrt-om-grid-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #1e3a5f;
  color: #ffffff;
  border-radius: 4px;
  padding: 3px 7px;
  line-height: 1.4;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease), opacity var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease);
  margin-left: 4px;
}
.widget-f28ff9 .rrt-om-grid-badge:hover {
  background: #2d5f8a;
  opacity: 0.9;
}
.widget-f28ff9 .rrt-om-name-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #1e3a5f;
  color: #ffffff;
  border-radius: 4px;
  padding: 2px 8px;
  line-height: 1.4;
  display: inline-block;
  margin-top: 4px;
}
.widget-f28ff9 .rrt-person-meta {
  display: flex;
  gap: 8px;
  margin-top: 0;
  flex-wrap: wrap;
}
.widget-f28ff9 .rrt-meta-country {
  font-size: 11px;
  font-weight: var(--mfw-font-weight-body, 600) !important;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--mfw-surface-subtle, #f0f4ff) !important;
  color: var(--mfw-brand, #2d6cdf) !important;
}
.widget-f28ff9 .rrt-meta-country:empty {
  display: none;
}
.widget-f28ff9 .rrt-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
  padding: 10px 24px 12px 0;
}
.widget-f28ff9 .rrt-header-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.widget-f28ff9 .rrt-header-bottom-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.widget-f28ff9 .rrt-found-btn-header {
  padding: 6px 14px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.widget-f28ff9 .rrt-close-detail {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--mfw-text-subtle, #9ca3af);
  padding: 4px 6px;
  border-radius: var(--mfw-radius-sm, 6px);
  line-height: 1;
  transition: background var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease), color var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease);
  display: none;
  flex-shrink: 0;
}
.widget-f28ff9 .rrt-close-detail:hover {
  background: var(--mfw-surface-subtle, var(--mfw-border, #e0e4ef));
  color: var(--mfw-text, #1a1f36);
}
.widget-f28ff9 .rrt-back-to-top-btn {
  background: none;
  border: none !important;
  border-radius: var(--mfw-radius-sm, 6px);
  font-size: 16px;
  font-weight: 700;
  color: var(--mfw-text-subtle, #9ca3af);
  cursor: pointer;
  padding: 3px 7px;
  line-height: 1;
  transition: background var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease), color var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease);
  flex-shrink: 0;
}
.widget-f28ff9 .rrt-back-to-top-btn:hover {
  background: var(--mfw-surface-subtle, var(--mfw-border, #e0e4ef));
  color: var(--mfw-text, #1a1f36);
}
.widget-f28ff9 .rrt-detail-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  gap: 0;
}
.widget-f28ff9 .rrt-detail-left {
  width: 46%;
  min-width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--mfw-border, #e0e4ef) !important;
  overflow: hidden;
  padding: 16px 16px 0;
}
.widget-f28ff9 .rrt-left-fixed {
  flex-shrink: 0;
}
.widget-f28ff9 .rrt-left-fixed.rrt-form-row {
  margin-bottom: 4px;
  padding-bottom: 4px;
}
.widget-f28ff9 .rrt-left-fixed.rrt-log-section-title {
  margin-left: 0;
  margin-right: 0;
}
.widget-f28ff9 .rrt-detail-left-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.widget-f28ff9 .rrt-detail-right {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.widget-f28ff9 .rrt-log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.widget-f28ff9 .rrt-log-entry {
  background: var(--mfw-surface, #f9fafb) !important;
  border: 1px solid var(--mfw-border, #e5e7eb) !important;
  border-radius: var(--mfw-radius-card, 8px);
  padding: 12px 14px;
  position: relative;
  text-align: left;
}
.widget-f28ff9 .rrt-log-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.widget-f28ff9 .rrt-log-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.widget-f28ff9 .rrt-log-status-dot.status-active {
  background: #22c55e;
}
.widget-f28ff9 .rrt-log-status-dot.status-pending {
  background: #f59e0b;
}
.widget-f28ff9 .rrt-log-status-dot.status-blocked {
  background: #ef4444;
}
.widget-f28ff9 .rrt-log-status-dot.status-abandoned {
  background: #9ca3af;
}
.widget-f28ff9 .rrt-log-by {
  font-size: 12px;
  font-weight: var(--mfw-font-weight-body, 700) !important;
  color: var(--mfw-text, #1a1f36) !important;
  background: var(--mfw-border, #e0e4ef) !important;
  padding: 2px 8px;
  border-radius: 20px;
}
.widget-f28ff9 .rrt-log-time {
  font-size: 11px;
  font-weight: 400;
  color: var(--mfw-text-subtle, #9ca3af) !important;
  margin-left: 6px;
}
.widget-f28ff9 .rrt-log-status-label {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 150px;
  text-align: center;
  box-sizing: border-box;
  display: inline-block;
}
.widget-f28ff9 .rrt-log-status-label.status-active {
  background: var(--mfw-status-success, #dcfce7) !important;
  color: var(--mfw-status-success-text, #166534) !important;
}
.widget-f28ff9 .rrt-log-status-label.status-pending {
  background: var(--mfw-status-warning, #fef3c7) !important;
  color: var(--mfw-status-warning-text, #92400e) !important;
}
.widget-f28ff9 .rrt-log-status-label.status-blocked {
  background: var(--mfw-status-danger, #fee2e2) !important;
  color: var(--mfw-status-danger-text, #991b1b) !important;
}
.widget-f28ff9 .rrt-log-status-label.status-abandoned {
  background: var(--mfw-status-neutral, #f3f4f6) !important;
  color: var(--mfw-status-neutral-text, #6b7280) !important;
}
.widget-f28ff9 .rrt-log-notes {
  font-size: 0.8125rem !important;
  font-weight: var(--mfw-font-weight-body) !important;
  color: var(--mfw-text, #1a1f36) !important;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}
.widget-f28ff9 .rrt-log-empty {
  color: var(--mfw-text-subtle, #9ca3af) !important;
  font-size: 0.8125rem;
  font-weight: var(--mfw-font-weight-body) !important;
  text-align: center;
  padding: 24px 0;
}
.widget-f28ff9 .rrt-syslog-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--mfw-border, #e0e4ef);
}
.widget-f28ff9 .rrt-syslog-table td {
  font-size: 11px;
  line-height: 1.5;
  padding: 2px 0;
  vertical-align: top;
  text-align: left;
}
.widget-f28ff9 .rrt-syslog-key {
  color: var(--mfw-text-subtle, #9ca3af) !important;
  font-weight: var(--mfw-font-weight-body, 600) !important;
  min-width: 90px;
}
.widget-f28ff9 .rrt-syslog-val {
  color: var(--mfw-text-muted, #6b7280) !important;
  word-break: break-word;
}
.widget-f28ff9 .rrt-save-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--mfw-border, #e0e4ef) !important;
  background: var(--mfw-surface, #ffffff) !important;
  flex-shrink: 0;
  width: 100%;
  flex-wrap: wrap;
  overflow: visible;
}
.widget-f28ff9 .rrt-save-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow: visible;
}
.widget-f28ff9 .rrt-form-status {
  font-size: 0.8125rem !important;
  font-weight: var(--mfw-font-weight-body, 600) !important;
}
.widget-f28ff9 .rrt-form-status.success {
  color: var(--mfw-status-success-text, #065f46) !important;
}
.widget-f28ff9 .rrt-form-status.error {
  color: var(--mfw-status-danger-text, #991b1b) !important;
}
.widget-f28ff9 .rrt-form-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mfw-text-muted, #6b7280) !important;
  margin: 14px 0 8px;
  padding: 5px 8px;
  border-radius: var(--mfw-radius-sm, 4px);
  background: var(--mfw-surface-subtle, #f0f4ff) !important;
  border-bottom: 1px solid var(--mfw-divider, var(--mfw-border, #e0e4ef)) !important;
}
.widget-f28ff9 .rrt-form-section-title:first-child {
  margin-top: 0;
}
.widget-f28ff9 .rrt-form-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding-right: 30px;
}
.widget-f28ff9 .rrt-form-row label {
  font-size: 12px;
  font-weight: var(--mfw-font-weight-body, 600) !important;
  color: var(--mfw-text, #374151) !important;
  white-space: nowrap;
  width: 130px;
  min-width: 130px;
  flex-shrink: 0;
  text-align: right !important;
}
.widget-f28ff9 .rrt-input-wrap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.widget-f28ff9 .rrt-input-wrap .rrt-input {
  width: 100%;
  flex: none;
}
.widget-f28ff9 .rrt-form-row-check {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.widget-f28ff9 .rrt-form-row-toggle {
  max-width: 220px;
  width: fit-content;
}
.widget-f28ff9 .rrt-field-error {
  font-size: 11px;
  color: var(--mfw-status-danger-text, #dc2626);
  min-height: 16px;
  display: block;
}
.widget-f28ff9 .rrt-input.rrt-input-error {
  border-color: var(--mfw-status-danger-text, #dc2626) !important;
  background: var(--mfw-status-danger-bg, #fff8f8) !important;
}
.widget-f28ff9 .rrt-input {
  padding: 8px 12px;
  border: 1px solid var(--mfw-input-border, var(--mfw-border, #e0e4ef)) !important;
  border-radius: var(--mfw-radius-card, 7px);
  font-size: 0.8125rem !important;
  font-weight: var(--mfw-font-weight-body) !important;
  color: var(--mfw-input-text, var(--mfw-text, #1a1f36)) !important;
  background: var(--mfw-input-bg, var(--mfw-surface, #fff)) !important;
  outline: none;
  transition: border-color var(--mfw-duration-base, 0.2s) var(--mfw-easing-standard, ease) !important;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box !important;
  font-family: var(--mfw-font-family-ui, var(--mfw-font-family-body, inherit)) !important;
}
.widget-f28ff9 .rrt-input:focus {
  border-color: var(--mfw-focus, var(--mfw-brand, #2d6cdf)) !important;
}
.widget-f28ff9 .rrt-select {
  cursor: pointer;
  appearance: auto;
}
.widget-f28ff9 .rrt-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
  font-family: var(--mfw-font-family-ui, var(--mfw-font-family-body, inherit)) !important;
}
.widget-f28ff9 .rrt-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  flex-shrink: 0;
  flex-grow: 0;
  height: 24px;
}
.widget-f28ff9 .rrt-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.widget-f28ff9 .rrt-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--mfw-input-border, #d1d5db);
  border-radius: 24px;
  transition: background var(--mfw-duration-base, 0.2s) var(--mfw-easing-standard, ease) !important;
}
.widget-f28ff9 .rrt-toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: var(--mfw-surface, #fff);
  border-radius: 50%;
  transition: transform var(--mfw-duration-base, 0.2s) var(--mfw-easing-standard, ease);
  box-shadow: 0 1px 3px var(--mfw-overlay-shadow, rgba(0, 0, 0, 0.2));
}
.widget-f28ff9 .rrt-toggle-switch input:checked + .rrt-toggle-slider {
  background: var(--mfw-brand, #2d6cdf) !important;
}
.widget-f28ff9 .rrt-toggle-switch input:checked + .rrt-toggle-slider::before {
  transform: translateX(20px);
}
.widget-f28ff9 .rrt-btn-submit {
  padding: 8px 18px;
  background: var(--mfw-btn-bg, var(--mfw-brand, #2d6cdf)) !important;
  color: var(--mfw-btn-text, var(--mfw-brand-text, #ffffff)) !important;
  border: none !important;
  border-radius: var(--mfw-radius, 8px);
  font-size: 13px;
  font-weight: var(--mfw-font-weight-body, 700) !important;
  cursor: pointer;
  transition: background var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease), opacity var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease) !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.widget-f28ff9 .rrt-btn-submit:hover {
  background: var(--mfw-btn-bg-hover, var(--mfw-accent, #1a4fb5)) !important;
}
.widget-f28ff9 .rrt-btn-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.widget-f28ff9 .rrt-dialog-overlay {
  position: absolute;
  inset: 0;
  background: var(--mfw-popup-overlay, rgba(15, 23, 42, 0.5)) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(2px);
  border-radius: var(--mfw-radius-card, 10px);
}
.widget-f28ff9 .rrt-dialog-box {
  background: var(--mfw-popup-bg, var(--mfw-surface, #ffffff)) !important;
  border-radius: var(--mfw-radius-card, 12px);
  padding: 28px 32px 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--mfw-shadow-lg, 0 8px 40px rgba(0, 0, 0, 0.22)) !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.widget-f28ff9 h3.rrt-dialog-title {
  margin: 0;
  font-size: 16px;
  font-weight: var(--mfw-font-weight-heading, 700) !important;
  color: var(--mfw-text, #1a1f36) !important;
}
.widget-f28ff9 h3.rrt-dialog-title--center {
  text-align: center;
}
.widget-f28ff9 .rrt-dialog-subtitle {
  margin: 0 0 4px;
  font-size: 0.8125rem !important;
  font-weight: var(--mfw-font-weight-body) !important;
  color: var(--mfw-text-muted, #6b7280) !important;
}
.widget-f28ff9 .rrt-dialog-subtitle--center {
  text-align: center;
}
.widget-f28ff9 .rrt-dialog-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.widget-f28ff9 .rrt-dialog-actions .rrt-btn-submit {
  flex: 1;
}
.widget-f28ff9 .rrt-dialog-actions .rrt-btn-secondary {
  flex: 1;
}
.widget-f28ff9 .rrt-nav-body::-webkit-scrollbar,
.widget-f28ff9 .rrt-detail-left-scroll::-webkit-scrollbar,
.widget-f28ff9 .rrt-detail-right::-webkit-scrollbar {
  width: 6px;
}
.widget-f28ff9 .rrt-nav-body::-webkit-scrollbar-track,
.widget-f28ff9 .rrt-detail-left-scroll::-webkit-scrollbar-track,
.widget-f28ff9 .rrt-detail-right::-webkit-scrollbar-track {
  background: transparent;
}
.widget-f28ff9 .rrt-nav-body::-webkit-scrollbar-thumb,
.widget-f28ff9 .rrt-detail-left-scroll::-webkit-scrollbar-thumb,
.widget-f28ff9 .rrt-detail-right::-webkit-scrollbar-thumb {
  background: var(--mfw-border, #e0e4ef);
  border-radius: 3px;
}
@media (max-width: 767px) {
  .widget-f28ff9 .rrt-detail-panel::-webkit-scrollbar {
    width: 4px;
  }
  .widget-f28ff9 .rrt-detail-panel::-webkit-scrollbar-track {
    background: transparent;
  }
  .widget-f28ff9 .rrt-detail-panel::-webkit-scrollbar-thumb {
    background: var(--mfw-border, #e0e4ef);
    border-radius: 3px;
  }
  .widget-f28ff9 .rrt-detail-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--mfw-border, #e0e4ef) transparent;
  }
}
.widget-f28ff9 .rw-reveal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: var(--mfw-radius-sm, 4px);
  transition: background var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease), opacity var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease) !important;
  opacity: 0.75;
  vertical-align: middle;
}
.widget-f28ff9 .rw-reveal-btn:hover {
  opacity: 1;
  background: var(--mfw-overlay-hover, rgba(0, 0, 0, 0.06));
}
.widget-f28ff9 .rw-wa-btn {
  color: #25D366;
}
.widget-f28ff9 .rw-email-btn {
  color: var(--mfw-brand, #2563eb) !important;
}
.widget-f28ff9 .rw-linkedin-btn {
  color: #0A66C2;
}
.widget-f28ff9 .rw-facebook-btn {
  color: #1877f2;
}
.widget-f28ff9 .rw-call-btn {
  color: #60a5fa;
}
.widget-f28ff9 .rw-sms-btn {
  color: #7c3aed;
}
.widget-f28ff9 .rw-call-btn svg, .widget-f28ff9 .rw-sms-btn svg {
  width: 16px;
  height: 16px;
}
.widget-f28ff9 .rw-call-btn:hover {
  background: rgba(96, 165, 250, 0.12);
}
.widget-f28ff9 .rw-sms-btn:hover {
  background: rgba(124, 58, 237, 0.1);
}
.widget-f28ff9 .rw-facebook-btn:hover {
  background: rgba(24, 119, 242, 0.1);
}
.widget-f28ff9 .rw-mobile-only {
  display: none !important;
}
.widget-f28ff9 .rw-malsoc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 6px;
  margin-right: 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  border-radius: 4px;
  background: #1e3a5f;
  color: #ffffff;
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
}
.widget-f28ff9 .rw-phone-modal {
  position: fixed;
  z-index: 10300;
  background: var(--mfw-surface, #ffffff) !important;
  border: 1px solid var(--mfw-border, #e2e8f0) !important;
  border-radius: var(--mfw-radius-card, 8px);
  box-shadow: var(--mfw-shadow-lg, 0 8px 40px rgba(0, 0, 0, 0.22)) !important;
  padding: 10px 14px;
  font-size: 0.9rem !important;
  font-weight: var(--mfw-font-weight-body, 600) !important;
  color: var(--mfw-text, #1e293b) !important;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--mfw-duration-fast, 0.15s) var(--mfw-easing-standard, ease) !important;
}
.widget-f28ff9 .rw-phone-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 767px) {
  .widget-f28ff9 .rw-mobile-only {
    display: inline-flex !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .widget-f28ff9 .rrt-nav-panel {
    width: 320px;
  }
  .widget-f28ff9 .rrt-nav-header,
  .widget-f28ff9 .rrt-nav-row {
    grid-template-columns: 18px 2fr 110px 120px;
  }
  .widget-f28ff9 .rrt-detail-left {
    width: 50%;
  }
}
@media (max-width: 767px) {
  .widget-f28ff9 .rrt-main {
    position: relative;
    overflow: hidden;
  }
  .widget-f28ff9 .rrt-nav-panel {
    width: 100%;
    max-width: 100%;
    border-right: none;
    overflow-y: auto;
  }
  .widget-f28ff9 .rrt-nav-header,
  .widget-f28ff9 .rrt-nav-row {
    grid-template-columns: 18px 2fr 0 100px;
  }
  .widget-f28ff9 .rrt-col-name-om {
    display: inline-flex;
  }
  .widget-f28ff9 .rrt-col-by {
    display: none !important;
  }
  .widget-f28ff9 .rrt-mobile-only {
    display: inline-flex;
  }
  .widget-f28ff9 .rrt-detail-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    background: var(--mfw-surface-subtle, #f5f6fa) !important;
    padding: 0;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .widget-f28ff9 .rrt-detail-panel.rrt-detail-open {
    transform: translateX(0);
  }
  .widget-f28ff9 .rrt-detail-inner {
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .widget-f28ff9 .rrt-mobile-back-btn {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--mfw-surface, #ffffff) !important;
    border-bottom: 1px solid var(--mfw-border, #e0e4ef) !important;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 13px;
    font-weight: var(--mfw-font-weight-body, 700) !important;
    color: var(--mfw-brand, #2d6cdf) !important;
    cursor: pointer;
    flex-shrink: 0;
  }
  .widget-f28ff9 .rrt-mobile-back-btn:hover {
    background: var(--mfw-surface-subtle, #eef3ff) !important;
  }
  .widget-f28ff9 .rrt-detail-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 0;
    overflow: hidden;
  }
  .widget-f28ff9 .rrt-detail-body {
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }
  .widget-f28ff9 .rrt-detail-left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--mfw-border, #e0e4ef);
    padding: 12px 16px 0;
    max-height: none;
    overflow: visible;
  }
  .widget-f28ff9 .rrt-detail-left-scroll {
    max-height: none;
    overflow: visible;
  }
  .widget-f28ff9 .rrt-detail-right {
    overflow: visible;
    max-height: none;
    padding: 12px 16px;
  }
  .widget-f28ff9 .rrt-person-name {
    font-size: 15px;
    font-weight: var(--mfw-font-weight-heading, 700);
  }
  .widget-f28ff9 .rrt-login-box {
    padding: 28px 22px 24px;
    margin: 16px;
  }
  .widget-f28ff9 .rrt-filter-row {
    flex-wrap: wrap;
  }
  .widget-f28ff9 .rrt-save-bar {
    gap: 6px;
    padding: 8px 10px;
    flex-wrap: nowrap;
  }
  .widget-f28ff9 .rrt-save-bar-right {
    gap: 4px;
    flex-shrink: 0;
  }
  .widget-f28ff9 .rrt-save-bar .rrt-btn-submit,
  .widget-f28ff9 .rrt-save-bar .rrt-found-btn-header {
    padding: 6px 8px;
    font-size: 11px;
  }
  .widget-f28ff9 .rrt-ssk-label {
    display: none;
  }
  .widget-f28ff9 .rrt-search-status-key {
    margin-left: 0;
  }
  .widget-f28ff9 .rrt-detail-placeholder {
    display: none;
  }
  .widget-f28ff9 .rrt-dialog-overlay {
    position: fixed;
    z-index: 600;
    border-radius: 0;
  }
}
.widget-f28ff9 .rrt-mobile-back-btn {
  display: none;
}

@charset "UTF-8";
.widget-1484b5 {
  /* ══════════════════════════════════════════════════════════════════════
     LAYER 1 — Platform token aliases (--mfw-* → --w-*)
     Every --mfw-* var has a hardcoded fallback (Rule 2).
     All CSS rules below consume --w-* tokens only (Rule 1).
     ══════════════════════════════════════════════════════════════════════ */
  /* Colour / surface */
  --w-bg: var(--mfw-surface, #f5f6fa);
  --w-surface: var(--mfw-surface-raised, #ffffff);
  --w-border: var(--mfw-border, #e0e4ef);
  --w-brand: var(--mfw-brand, #2d6cdf);
  --w-brand-hover: var(--mfw-accent, #1a4fb5);
  --w-brand-text: var(--mfw-brand-text, #ffffff);
  --w-text: var(--mfw-text, #1a1f36);
  --w-text-muted: var(--mfw-text-muted, #6b7280);
  --w-text-subtle: var(--mfw-text-subtle, #9ca3af);
  --w-row-hover: var(--mfw-surface-subtle, #eef3ff);
  --w-chip-bg: var(--mfw-surface-subtle, #f0f4ff);
  --w-chip-text: var(--mfw-brand, #2d6cdf);
  --w-divider: var(--mfw-divider, var(--mfw-border, #e0e4ef));
  --w-focus: var(--mfw-focus, var(--mfw-brand, #2d6cdf));
  --w-font: var(--mfw-font-family-body, inherit);
  --w-font-heading: var(--mfw-font-family-heading, var(--mfw-font-family-body, inherit));
  --w-font-ui: var(--mfw-font-family-ui, var(--mfw-font-family-body, inherit));
  --w-radius: var(--mfw-radius, 8px);
  --w-radius-sm: var(--mfw-radius-sm, 6px);
  --w-radius-card: var(--mfw-radius-card, 10px);
  --w-shadow: var(--mfw-shadow, 0 2px 12px rgba(0,0,0,0.08));
  --w-shadow-lg: var(--mfw-shadow-lg, 0 8px 40px rgba(0,0,0,0.22));
  --w-easing: var(--mfw-easing-standard, ease);
  --w-duration-fast: var(--mfw-duration-fast, 0.15s);
  --w-duration-base: var(--mfw-duration-base, 0.2s);
  /* Status tokens */
  --w-success-bg: var(--mfw-status-success, #d1fae5);
  --w-success-text: var(--mfw-status-success-text, #065f46);
  --w-warning-bg: var(--mfw-status-warning, #fef3c7);
  --w-warning-text: var(--mfw-status-warning-text, #92400e);
  --w-danger-bg: var(--mfw-status-danger, #fee2e2);
  --w-danger-text: var(--mfw-status-danger-text, #991b1b);
  --w-neutral-bg: var(--mfw-status-neutral, #f3f4f6);
  --w-neutral-text: var(--mfw-status-neutral-text, #6b7280);
  /* Button tokens */
  --w-btn-bg: var(--mfw-btn-bg, var(--mfw-brand, #2d6cdf));
  --w-btn-text: var(--mfw-btn-text, var(--mfw-brand-text, #ffffff));
  --w-btn-border: var(--mfw-btn-border, transparent);
  /* Table header tokens */
  --w-table-hdr-bg: var(--mfw-table-col-header-bg, var(--mfw-brand, #2d6cdf));
  --w-table-hdr-text: var(--mfw-table-col-header-text, #ffffff);
  /* Popup / dialog tokens */
  --w-popup-bg: var(--mfw-popup-bg, var(--mfw-surface-raised, #ffffff));
  --w-popup-overlay: var(--mfw-popup-overlay, rgba(15, 23, 42, 0.5));
  --w-popup-title: var(--mfw-popup-header-text, var(--mfw-text, #1a1f36));
  /* Input tokens */
  --w-input-bg: var(--mfw-input-bg, #ffffff);
  --w-input-border: var(--mfw-input-border, var(--mfw-border, #e0e4ef));
  --w-input-text: var(--mfw-input-text, var(--mfw-text, #1a1f36));
  /* ── Rule 5: root-level font and colour inheritance ── */
  font-family: var(--w-font) !important;
  color: var(--w-text) !important;
  box-sizing: border-box;
  /* ══════════════════════════════════════════════════════════════════════
     State messages: loading / error / empty
     ══════════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════════
     List widget wrapper
     ══════════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════════
     Single column layout
     ══════════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════════
     House Photo Section
     ══════════════════════════════════════════════════════════════════════ */
  /* Edit Controls (shown in edit mode) */
  /* ══════════════════════════════════════════════════════════════════════
     Mobile Action Bar — hidden on desktop, shown on mobile above controls
     ══════════════════════════════════════════════════════════════════════ */
  /* Mobile-only buttons: always hidden on desktop */
  /* ══════════════════════════════════════════════════════════════════════
     Configuration Bar — Grid Controls in Photo Container
     ══════════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════════
     Unassigned Badges Area
     ══════════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════════
     Action Buttons
     ══════════════════════════════════════════════════════════════════════ */
  /* Save button — uses btn tokens (Rule 8) */
  /* Cancel button — circular, top-right corner (desktop only) */
  /* ══════════════════════════════════════════════════════════════════════
     Photo Container
     ══════════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════════
     Upload button overlay
     ══════════════════════════════════════════════════════════════════════ */
  /* Upload button uses btn tokens (Rule 8) */
  /* ══════════════════════════════════════════════════════════════════════
     Vertical slider for badge positioning
     ══════════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════════
     Grid cells
     ══════════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════════
     Photo Badges
     ══════════════════════════════════════════════════════════════════════ */
  /* Badge name styling */
  /* Badges in grid cells: absolute positioned */
  /* Display-mode badge: uses theme surface and text tokens */
  /* Badges with a profile: light dark-green outline */
  /* Not-found badges: muted text, slightly dimmed surface */
  /* Edit-mode badges: red tint (unplaced) */
  /* Green: explicitly placed badge */
  /* Red: auto-assigned or displaced badge */
  /* Badges in unassigned area */
  /* ══════════════════════════════════════════════════════════════════════
     Blank state / hint
     Desktop: absolutely positioned inside the photo container, top-right,
     just to the left of the corner edit button — zero extra height.
     Mobile: lives inline inside the action bar right-side — also zero height.
     ══════════════════════════════════════════════════════════════════════ */
  /* Mobile inline hint: hidden on desktop */
  /* ══════════════════════════════════════════════════════════════════════
     Edit button — top-right corner
     ══════════════════════════════════════════════════════════════════════ */
  /* Edit button — top-right corner (desktop only; hidden on mobile via media query) */
  /* Only show when JS marks the user as having edit rights */
  /* Hide pencil button when in edit mode */
  /* ══════════════════════════════════════════════════════════════════════
     Edit positions button — bottom-right corner
     ══════════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════════
     Member list items
     ══════════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════════
     Two-column layout
     ══════════════════════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════════════════════
     Responsive: stack columns on mobile
     ══════════════════════════════════════════════════════════════════════ */
  /* Portrait mobile: 0.6× badge name font sizes and tighter badge padding */
}
.widget-1484b5 * {
  box-sizing: border-box;
}
.widget-1484b5 .monitor-mode-container {
  display: block;
  width: 100%;
  min-height: 100px;
}
.widget-1484b5 .list-loading,
.widget-1484b5 .list-error,
.widget-1484b5 .list-empty {
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body, 400);
  color: var(--w-text-muted) !important;
  padding: 8px 0;
}
.widget-1484b5 .list-error {
  color: var(--w-danger-text) !important;
}
.widget-1484b5 .list-widget {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.widget-1484b5 .house-photo-layout {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.widget-1484b5 .house-photo-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.widget-1484b5 .photo-edit-controls {
  display: none;
}
.widget-1484b5 .photo-mobile-action-bar {
  display: none; /* hidden on desktop */
}
.widget-1484b5 .photo-edit-btn-mobile,
.widget-1484b5 .photo-upload-btn-mobile,
.widget-1484b5 .photo-save-btn-mobile,
.widget-1484b5 .photo-cancel-btn-mobile {
  display: none;
}
.widget-1484b5 .photo-config-bar {
  /* Default: hidden; shown only in edit-mode as a flex bar above the photo */
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  /* hardcoded — dark translucent overlay; must stay dark regardless of theme */
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--w-radius-card);
  box-shadow: var(--w-shadow) !important;
  /* On desktop, float it centred above the photo using relative+margin trick */
  position: relative;
  margin: 0 auto 0;
  width: fit-content;
  max-width: 100%;
}
.widget-1484b5 .house-photo-section.edit-mode .photo-config-bar {
  display: flex;
}
.widget-1484b5 .photo-config-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.widget-1484b5 .photo-config-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.widget-1484b5 .photo-config-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  /* hardcoded — sits inside the dark overlay; white-tint styling is intentional */
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--w-radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.widget-1484b5 .photo-config-label {
  font-size: 0.75rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  font-family: var(--w-font-ui) !important;
  /* hardcoded — white text on the dark overlay is intentional */
  color: #ffffff;
  padding: 0 10px;
  /* hardcoded — white-tint on dark overlay */
  background: rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  height: 32px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.widget-1484b5 .photo-row-minus,
.widget-1484b5 .photo-row-plus,
.widget-1484b5 .photo-col-minus,
.widget-1484b5 .photo-col-plus {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  /* hardcoded — white controls on the dark overlay are intentional */
  color: #ffffff;
  /* hardcoded — white-tint on dark overlay */
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background var(--w-duration-fast) var(--w-easing) !important, color var(--w-duration-fast) var(--w-easing) !important;
  font-family: var(--w-font-ui) !important;
  line-height: 1;
  padding: 0;
  margin: 0;
}
.widget-1484b5 .photo-row-plus,
.widget-1484b5 .photo-col-plus {
  border-right: none;
}
.widget-1484b5 .photo-row-minus:hover,
.widget-1484b5 .photo-row-plus:hover,
.widget-1484b5 .photo-col-minus:hover,
.widget-1484b5 .photo-col-plus:hover {
  /* hardcoded — hover lightens the white tint on the dark overlay */
  background: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
.widget-1484b5 .photo-row-minus:active,
.widget-1484b5 .photo-row-plus:active,
.widget-1484b5 .photo-col-minus:active,
.widget-1484b5 .photo-col-plus:active {
  /* hardcoded — active state on the dark overlay */
  background: rgba(255, 255, 255, 0.4) !important;
}
.widget-1484b5 .photo-row-minus:disabled,
.widget-1484b5 .photo-row-plus:disabled,
.widget-1484b5 .photo-col-minus:disabled,
.widget-1484b5 .photo-col-plus:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.widget-1484b5 .photo-row-value,
.widget-1484b5 .photo-col-value {
  min-width: 32px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  font-family: var(--w-font-ui) !important;
  /* hardcoded — white value display on the dark overlay */
  color: #ffffff;
  padding: 0 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.widget-1484b5 .photo-columns-config {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.widget-1484b5 .photo-columns-config .photo-config-label {
  font-size: 0.75rem;
  /* hardcoded — white text on dark overlay */
  color: #ffffff;
}
.widget-1484b5 .unassigned-badges {
  width: 100%;
  /* hardcoded — dark translucent panel below photo; must stay dark regardless of theme */
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--w-radius-card);
  padding: 12px;
  min-height: 60px;
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
  box-shadow: var(--w-shadow) !important;
  margin-top: -5px;
}
.widget-1484b5 .house-photo-section.edit-mode .unassigned-badges {
  display: flex;
  max-height: 160px;
  overflow-y: auto;
}
.widget-1484b5 .unassigned-badges:empty::after {
  content: "Drag badges here or from grid cells";
  /* hardcoded — semi-transparent white hint text on the dark overlay */
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8125rem;
  font-family: var(--w-font-ui) !important;
  font-style: italic;
  width: 100%;
  text-align: center;
  padding: 8px 0;
}
.widget-1484b5 .photo-save-btn,
.widget-1484b5 .photo-cancel-btn,
.widget-1484b5 .photo-cancel-btn-corner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 0.8125rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  border: none;
  border-radius: var(--w-radius);
  cursor: pointer;
  transition: background var(--w-duration-fast) var(--w-easing) !important;
  font-family: var(--w-font-ui) !important;
}
.widget-1484b5 .photo-save-btn {
  background: var(--w-btn-bg) !important;
  color: var(--w-btn-text) !important;
  border: 1px solid var(--w-btn-border) !important;
  min-width: 120px;
}
.widget-1484b5 .photo-save-btn:hover {
  background: var(--mfw-accent, var(--w-brand-hover)) !important;
}
.widget-1484b5 .photo-save-btn:disabled {
  /* hardcoded — disabled state; neutral grey is semantic, not theme-adaptive */
  background: rgba(156, 163, 175, 0.8) !important;
  cursor: not-allowed;
}
.widget-1484b5 .photo-cancel-btn {
  color: var(--w-text) !important;
  background: var(--w-surface) !important;
  border: 1px solid var(--w-border) !important;
}
.widget-1484b5 .photo-cancel-btn:hover {
  background: var(--w-row-hover) !important;
}
.widget-1484b5 .photo-cancel-btn-corner {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 25;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--w-danger-bg) !important;
  color: var(--w-danger-text) !important;
  border: none;
  box-shadow: var(--w-shadow) !important;
  display: none;
}
.widget-1484b5 .house-photo-section.edit-mode .photo-cancel-btn-corner {
  display: flex;
}
.widget-1484b5 .photo-cancel-btn-corner:hover {
  /* hardcoded — danger button deeper shade on hover; fixed semantic colour */
  background: #b91c1c !important;
  /* hardcoded — white text stays white on the dark danger hover */
  color: #ffffff !important;
  transform: scale(1.08);
}
.widget-1484b5 .photo-cancel-btn-corner:active {
  /* hardcoded — pressed danger state */
  background: #991b1b !important;
  transform: scale(0.98);
}
.widget-1484b5 .photo-cancel-btn-corner svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.widget-1484b5 .photo-save-progress {
  display: none;
}
.widget-1484b5 .house-photo-container {
  position: relative;
  width: 100%;
  min-height: clamp(200px, 56.25vw, 800px);
  background: var(--w-chip-bg) !important;
  border-radius: var(--w-radius-card);
  overflow: hidden;
  max-height: 90vh;
}
.widget-1484b5 .house-photo-container.photo-loaded {
  min-height: unset;
}
.widget-1484b5 .house-photo {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 90vh;
  display: block;
  border-radius: var(--w-radius-card);
  vertical-align: top;
  object-fit: contain;
}
.widget-1484b5 .photo-grid-overlay {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 10;
  pointer-events: none;
}
.widget-1484b5 .photo-upload-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 20;
  pointer-events: none;
}
.widget-1484b5 .house-photo-section.edit-mode .photo-upload-overlay {
  display: block;
  pointer-events: auto;
}
.widget-1484b5 .photo-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 0.9375rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  background: var(--w-btn-bg) !important;
  color: var(--w-btn-text) !important;
  border: 1px solid var(--w-btn-border) !important;
  border-radius: var(--w-radius);
  cursor: pointer;
  transition: background var(--w-duration-fast) var(--w-easing) !important, box-shadow var(--w-duration-fast) var(--w-easing) !important;
  font-family: var(--w-font-ui) !important;
  box-shadow: var(--w-shadow-lg) !important;
}
.widget-1484b5 .photo-upload-btn:hover {
  background: var(--mfw-accent, var(--w-brand-hover)) !important;
  transform: scale(1.05);
}
.widget-1484b5 .photo-upload-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.widget-1484b5 .photo-vertical-slider-container {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 32px;
  height: calc(100% - 8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 30;
  pointer-events: auto;
}
.widget-1484b5 .house-photo-section.edit-mode .photo-grid-cell[data-row="1"][data-col="1"] .photo-vertical-slider-container {
  display: flex;
}
.widget-1484b5 .photo-vertical-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 8px;
  height: 80%;
  /* hardcoded — slider track; near-white on translucent overlay */
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--w-focus) !important;
  border-radius: var(--w-radius-sm);
  cursor: pointer;
  outline: none;
}
.widget-1484b5 .photo-vertical-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 32px;
  background: var(--w-focus) !important;
  border-radius: var(--w-radius-sm);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.widget-1484b5 .photo-vertical-slider::-moz-range-thumb {
  width: 20px;
  height: 32px;
  background: var(--w-focus) !important;
  border-radius: var(--w-radius-sm);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.widget-1484b5 .photo-vertical-slider:hover::-webkit-slider-thumb {
  background: var(--w-brand-hover) !important;
}
.widget-1484b5 .photo-vertical-slider:hover::-moz-range-thumb {
  background: var(--w-brand-hover) !important;
}
.widget-1484b5 .photo-grid-cell {
  position: absolute;
  border: 2px dotted transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--w-duration-base) var(--w-easing) !important, border-color var(--w-duration-base) var(--w-easing) !important;
}
.widget-1484b5 .house-photo-section.edit-mode .photo-grid-cell {
  /* hardcoded — dotted white grid lines on photo overlay; must stay white regardless of theme */
  border: 2px dotted rgba(255, 255, 255, 0.6);
  background: transparent;
}
.widget-1484b5 .photo-grid-cell.drag-over {
  /* hardcoded — white tint drag target on photo overlay */
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  border-style: solid;
  transform: scale(1.05);
}
.widget-1484b5 .photo-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  width: 95%;
  max-width: 140px;
  min-height: 36px;
  border-radius: var(--w-radius-sm);
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  word-wrap: break-word;
  overflow: hidden;
  pointer-events: auto;
  user-select: none;
  z-index: 15;
  transition: background var(--w-duration-base) var(--w-easing) !important, border-color var(--w-duration-base) var(--w-easing) !important, box-shadow var(--w-duration-base) var(--w-easing) !important;
  gap: 1px;
}
.widget-1484b5 .badge-first-name {
  font-size: 0.6875rem;
  font-weight: var(--mfw-font-weight-body, 400);
  font-family: var(--w-font) !important;
  display: block;
}
.widget-1484b5 .badge-last-name {
  font-size: 0.8125rem;
  font-weight: var(--mfw-font-weight-body, 700);
  font-family: var(--w-font) !important;
  display: block;
  letter-spacing: 0.3px;
}
.widget-1484b5 .photo-grid-cell .photo-badge {
  position: absolute;
  overflow: visible;
}
.widget-1484b5 .photo-badge {
  background: var(--w-surface) !important;
  color: var(--w-text) !important;
  border: 1px solid var(--w-border) !important;
  box-shadow: var(--w-shadow) !important;
  cursor: default;
}
.widget-1484b5 .photo-badge.badge-has-profile {
  /* hardcoded — semantic "has profile" indicator; dark-green outline is intentional */
  border: 1.5px solid rgba(20, 83, 45, 0.55) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(20, 83, 45, 0.2) !important;
}
.widget-1484b5 .photo-badge.badge-not-found {
  background: var(--w-chip-bg) !important;
  color: var(--w-text-muted) !important;
  border: 1px solid var(--w-border) !important;
  box-shadow: var(--w-shadow) !important;
}
.widget-1484b5 .house-photo-section.edit-mode .photo-badge {
  cursor: grab;
  /* hardcoded — edit-mode "unplaced" badge; red tint is semantic, not theme-adaptive */
  background: rgba(252, 165, 165, 0.92) !important;
  color: #7f1d1d !important;
  border: 1.5px solid rgba(220, 38, 38, 0.6) !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}
.widget-1484b5 .house-photo-section.edit-mode .photo-badge.badge-green {
  /* hardcoded — "explicitly placed" badge; green is semantic, not theme-adaptive */
  background: rgba(187, 247, 208, 0.92) !important;
  color: #14532d !important;
  border-color: rgba(22, 163, 74, 0.6) !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3) !important;
}
.widget-1484b5 .house-photo-section.edit-mode .photo-badge.badge-red {
  /* hardcoded — "auto-assigned / displaced" badge; red is semantic, not theme-adaptive */
  background: rgba(252, 165, 165, 0.92) !important;
  color: #7f1d1d !important;
  border-color: rgba(220, 38, 38, 0.6) !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}
.widget-1484b5 .house-photo-section.edit-mode .photo-badge:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
  cursor: grab;
  transform: scale(1.05);
}
.widget-1484b5 .house-photo-section.edit-mode .photo-badge.dragging {
  cursor: grabbing;
  opacity: 0.6;
  transform: scale(0.95);
}
.widget-1484b5 .unassigned-badges .photo-badge {
  position: relative;
  display: inline-flex;
  cursor: grab;
  background: var(--w-surface) !important;
  border: 1.5px solid var(--w-border) !important;
  color: var(--w-text) !important;
  box-shadow: var(--w-shadow) !important;
  max-width: 20%;
}
.widget-1484b5 .unassigned-badges .photo-badge:hover {
  background: var(--w-row-hover) !important;
  border-color: var(--w-text-muted) !important;
}
.widget-1484b5 .photo-blank-state {
  position: absolute;
  top: 12px;
  right: 66px; /* clear of the 44px edit button + 12px gap */
  z-index: 24;
  pointer-events: none;
}
.widget-1484b5 .house-photo-section.edit-mode .photo-blank-state {
  display: none !important;
}
.widget-1484b5 .photo-blank-state.hidden {
  display: none !important;
}
.widget-1484b5 .photo-blank-hint {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.widget-1484b5 .photo-blank-hint-text {
  font-size: 0.75rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  color: var(--w-text-muted) !important;
  font-family: var(--w-font-ui) !important;
  white-space: nowrap;
  background: var(--w-surface) !important;
  border: 1px solid var(--w-border) !important;
  border-radius: var(--w-radius-sm);
  padding: 4px 10px;
  box-shadow: var(--w-shadow) !important;
}
.widget-1484b5 .photo-blank-hint-arrow {
  color: var(--w-text-subtle) !important;
  flex-shrink: 0;
}
.widget-1484b5 .photo-blank-hint--mobile {
  display: none;
}
.widget-1484b5 .photo-edit-btn-corner {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 25;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  /* hardcoded — semi-opaque white button overlaid on photo; must stay white-ish */
  background: rgba(255, 255, 255, 0.85) !important;
  color: var(--w-text) !important;
  border: none;
  cursor: pointer;
  transition: background var(--w-duration-fast) var(--w-easing) !important, box-shadow var(--w-duration-fast) var(--w-easing) !important;
  font-family: var(--w-font-ui) !important;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: var(--w-shadow) !important;
}
.widget-1484b5 .photo-edit-btn-corner.photo-edit-btn-corner--active {
  display: flex;
}
.widget-1484b5 .house-photo-section.edit-mode .photo-edit-btn-corner,
.widget-1484b5 .house-photo-section.edit-mode .photo-edit-btn-corner.photo-edit-btn-corner--active {
  display: none !important;
}
.widget-1484b5 .photo-edit-btn-corner:hover {
  /* hardcoded — fully opaque white on hover */
  background: rgb(255, 255, 255) !important;
  transform: scale(1.08);
}
.widget-1484b5 .photo-edit-btn-corner:active {
  transform: scale(0.98);
}
.widget-1484b5 .photo-edit-btn-corner svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.widget-1484b5 .photo-edit-positions-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 25;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  /* hardcoded — semi-opaque white button on photo overlay */
  background: rgba(255, 255, 255, 0.75) !important;
  color: var(--w-text) !important;
  border: none;
  cursor: pointer;
  transition: background var(--w-duration-fast) var(--w-easing) !important, box-shadow var(--w-duration-fast) var(--w-easing) !important;
  font-family: var(--w-font-ui) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: var(--w-shadow) !important;
}
.widget-1484b5 .photo-edit-positions-btn:hover {
  /* hardcoded — fully opaque white on hover */
  background: rgb(255, 255, 255) !important;
  transform: scale(1.08);
}
.widget-1484b5 .photo-edit-positions-btn:active {
  transform: scale(0.98);
}
.widget-1484b5 .house-photo-section.edit-mode .photo-edit-positions-btn {
  display: none;
}
.widget-1484b5 .list-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 2.5px 0;
}
.widget-1484b5 .list-item-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.widget-1484b5 .list-item-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.widget-1484b5 .list-group-divider {
  width: 100%;
  margin: 8px 0 0;
}
.widget-1484b5 .list-group-divider-line {
  display: none;
}
.widget-1484b5 .list-group-label {
  font-size: 0.75rem;
  font-weight: var(--mfw-font-weight-ui, 600);
  font-family: var(--w-font-ui) !important;
  color: var(--w-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 0;
  border-top: 1px solid var(--w-divider) !important;
  border-bottom: 1px solid var(--w-divider) !important;
  margin-bottom: 4px;
}
.widget-1484b5 .list-item-order {
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body, 500);
  color: var(--w-text-muted) !important;
  line-height: 1.4;
  flex-shrink: 0;
  text-align: left;
}
.widget-1484b5 .list-item-title {
  font-size: 0.875rem;
  font-weight: var(--mfw-font-weight-body, 400);
  font-family: var(--w-font) !important;
  color: var(--w-text) !important;
  line-height: 1.4;
}
.widget-1484b5 .list-two-column-layout {
  display: flex;
  flex-direction: row;
  gap: 32px;
  width: 100%;
}
.widget-1484b5 .list-left-column {
  flex: 0 0 25%;
  min-width: 0;
}
.widget-1484b5 .list-right-column {
  flex: 1;
  min-width: 0;
}
@media (max-width: 767px) {
  .widget-1484b5 {
    /* ── Mobile action bar ────────────────────────────────────────────── */
    /* Show the mobile action bar */
    /* Read-only mode: show the mobile edit button above the photo */
    /* Hide the desktop corner edit button on mobile */
    /* Edit mode: show the mobile action bar with upload + save + cancel */
    /* Hide desktop-only overlays and corner buttons on mobile edit mode */
    /* Save button inside config bar: hide on mobile (replaced by mobile action bar) */
    /* Config bar ordering */
    /* Hint: hide the desktop absolute overlay on mobile — the inline action-bar hint takes over */
    /* Show the inline hint inside the mobile action bar */
    /* Hide the inline hint when in edit mode or when photo is loaded */
  }
  .widget-1484b5 .list-two-column-layout {
    flex-direction: column;
  }
  .widget-1484b5 .list-left-column {
    flex: 1;
    width: 100%;
  }
  .widget-1484b5 .list-right-column {
    flex: 1;
    width: 100%;
  }
  .widget-1484b5 .list-item {
    flex-direction: column;
    gap: 12px;
  }
  .widget-1484b5 .photo-mobile-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    /* hidden by default; shown when section has a relevant mode class */
    display: none;
  }
  .widget-1484b5 .photo-mobile-action-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .widget-1484b5 .photo-mobile-action-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .widget-1484b5 .house-photo-section:not(.edit-mode) .photo-mobile-action-bar {
    display: flex;
  }
  .widget-1484b5 .house-photo-section:not(.edit-mode) .photo-edit-btn-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent !important;
    color: var(--w-text-muted) !important;
    border: none !important;
    border-radius: var(--w-radius-sm);
    cursor: pointer;
    box-shadow: none !important;
    transition: color var(--w-duration-fast) var(--w-easing) !important;
  }
  .widget-1484b5 .house-photo-section:not(.edit-mode) .photo-edit-btn-mobile:hover {
    color: var(--w-text) !important;
    background: transparent !important;
  }
  .widget-1484b5 .photo-edit-btn-corner {
    display: none !important;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-mobile-action-bar {
    display: flex;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-upload-btn-mobile {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: var(--mfw-font-weight-ui, 600);
    font-family: var(--w-font-ui) !important;
    background: var(--w-btn-bg) !important;
    color: var(--w-btn-text) !important;
    border: 1px solid var(--w-btn-border) !important;
    border-radius: var(--w-radius);
    cursor: pointer;
    transition: background var(--w-duration-fast) var(--w-easing) !important;
    white-space: nowrap;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-upload-btn-mobile:hover {
    background: var(--mfw-accent, var(--w-brand-hover)) !important;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-save-btn-mobile {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: var(--mfw-font-weight-ui, 600);
    font-family: var(--w-font-ui) !important;
    background: var(--w-btn-bg) !important;
    color: var(--w-btn-text) !important;
    border: 1px solid var(--w-btn-border) !important;
    border-radius: var(--w-radius);
    cursor: pointer;
    transition: background var(--w-duration-fast) var(--w-easing) !important;
    white-space: nowrap;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-save-btn-mobile:hover {
    background: var(--mfw-accent, var(--w-brand-hover)) !important;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-save-btn-mobile:disabled {
    /* hardcoded — disabled state */
    background: rgba(156, 163, 175, 0.8) !important;
    cursor: not-allowed;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-cancel-btn-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: var(--w-danger-bg) !important;
    color: var(--w-danger-text) !important;
    border: none;
    cursor: pointer;
    box-shadow: var(--w-shadow) !important;
    transition: background var(--w-duration-fast) var(--w-easing) !important;
    flex-shrink: 0;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-cancel-btn-mobile:hover {
    /* hardcoded — danger hover */
    background: #b91c1c !important;
    color: #ffffff !important;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-upload-overlay {
    display: none !important;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-cancel-btn-corner {
    display: none !important;
  }
  .widget-1484b5 .photo-save-btn {
    display: none !important;
  }
  .widget-1484b5 .house-photo-section {
    display: flex;
    flex-direction: column;
  }
  .widget-1484b5 .photo-mobile-action-bar {
    order: -3;
  }
  .widget-1484b5 .photo-blank-state {
    display: none !important;
  }
  .widget-1484b5 .photo-blank-hint--mobile {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-blank-hint--mobile,
  .widget-1484b5 .photo-blank-hint--mobile.hidden {
    display: none !important;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-config-bar {
    order: -1;
    width: calc(100% - 10px);
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  .widget-1484b5 .house-photo-section.edit-mode .house-photo-container {
    order: 0;
  }
  .widget-1484b5 .house-photo-section.edit-mode .unassigned-badges {
    order: 1;
  }
}
@media (max-width: 767px) and (orientation: portrait) {
  .widget-1484b5 {
    /* Config bar: compact on portrait — smaller text, tighter padding, max-width */
  }
  .widget-1484b5 .badge-first-name {
    font-size: 0.4125rem; /* 0.6875rem × 0.6 */
  }
  .widget-1484b5 .badge-last-name {
    font-size: 0.4875rem; /* 0.8125rem × 0.6 */
  }
  .widget-1484b5 .photo-badge {
    padding: 2px 8px;
    min-height: 0;
    gap: 0;
  }
  .widget-1484b5 .badge-first-name,
  .widget-1484b5 .badge-last-name {
    line-height: 1.1;
  }
  .widget-1484b5 .house-photo-section.edit-mode .photo-config-bar {
    width: calc(100% - 10px);
    max-width: calc(100% - 10px);
    padding: 6px 8px;
    gap: 6px;
  }
  .widget-1484b5 .photo-config-label {
    font-size: 0.6875rem;
    padding: 0 6px;
    height: 28px;
  }
  .widget-1484b5 .photo-row-minus,
  .widget-1484b5 .photo-row-plus,
  .widget-1484b5 .photo-col-minus,
  .widget-1484b5 .photo-col-plus {
    width: 26px;
    height: 28px;
    font-size: 0.875rem;
  }
  .widget-1484b5 .photo-row-value,
  .widget-1484b5 .photo-col-value {
    min-width: 24px;
    font-size: 0.75rem;
    padding: 0 5px;
  }
  .widget-1484b5 .photo-save-btn {
    font-size: 0.75rem;
    padding: 4px 10px;
    min-width: auto;
  }
}

@charset "UTF-8";
.widget-85ecf1 {
  /* ─────────────────────────────────────────────────────────────────────────
   * LAYER 1: Platform token aliases
   * Map every --mfw-* token to a local --w-* semantic token.
   * All --mfw-* references below MUST have a hardcoded fallback (Rule 2).
   * Only --w-* tokens are used in CSS rules (Rule 1).
   * ───────────────────────────────────────────────────────────────────────── */
  /* Colours / surfaces */
  --w-bg: var(--mfw-surface, #f5f6fa);
  --w-surface: var(--mfw-surface-raised, #ffffff);
  --w-border: var(--mfw-border, #e0e4ef);
  --w-brand: var(--mfw-brand, #2d6cdf);
  --w-brand-hover: var(--mfw-accent, #1a4fb5);
  --w-brand-text: var(--mfw-brand-text, #ffffff);
  --w-text: var(--mfw-text, #1a1f36);
  --w-text-muted: var(--mfw-text-muted, #6b7280);
  --w-text-subtle: var(--mfw-text-subtle, #9ca3af);
  --w-row-hover: var(--mfw-surface-subtle, #eef3ff);
  --w-chip-bg: var(--mfw-surface-subtle, #f0f4ff);
  --w-chip-text: var(--mfw-brand, #2d6cdf);
  --w-divider: var(--mfw-divider, var(--mfw-border, #e0e4ef));
  --w-focus: var(--mfw-focus, var(--mfw-brand, #2d6cdf));
  /* Typography */
  --w-font: var(--mfw-font-family-body, inherit);
  --w-font-heading: var(--mfw-font-family-heading, var(--mfw-font-family-body, inherit));
  --w-font-ui: var(--mfw-font-family-ui, var(--mfw-font-family-body, inherit));
  --w-font-weight: var(--mfw-font-weight-body, 400);
  --w-font-weight-heading: var(--mfw-font-weight-heading, 700);
  /* Radius */
  --w-radius: var(--mfw-radius, 8px);
  --w-radius-sm: var(--mfw-radius-sm, 6px);
  --w-radius-card: var(--mfw-radius-card, 10px);
  /* Shadow */
  --w-shadow: var(--mfw-shadow, 0 2px 12px rgba(0,0,0,0.08));
  --w-shadow-lg: var(--mfw-shadow-lg, 0 8px 40px rgba(0,0,0,0.22));
  /* Motion */
  --w-easing: var(--mfw-easing-standard, ease);
  --w-duration-fast: var(--mfw-duration-fast, 0.15s);
  --w-duration-base: var(--mfw-duration-base, 0.2s);
  /* Status */
  --w-success-bg: var(--mfw-status-success, #d1fae5);
  --w-success-text: var(--mfw-status-success-text, #065f46);
  --w-warning-bg: var(--mfw-status-warning, #fef3c7);
  --w-warning-text: var(--mfw-status-warning-text, #92400e);
  --w-danger-bg: var(--mfw-status-danger, #fee2e2);
  --w-danger-text: var(--mfw-status-danger-text, #991b1b);
  --w-neutral-bg: var(--mfw-status-neutral, #f3f4f6);
  --w-neutral-text: var(--mfw-status-neutral-text, #6b7280);
  /* Buttons */
  --w-btn-bg: var(--mfw-btn-bg, var(--mfw-brand, #2d6cdf));
  --w-btn-text: var(--mfw-btn-text, var(--mfw-brand-text, #ffffff));
  --w-btn-border: var(--mfw-btn-border, transparent);
  /* Table headers */
  --w-table-hdr-bg: var(--mfw-table-col-header-bg, var(--mfw-brand, #2d6cdf));
  --w-table-hdr-text: var(--mfw-table-col-header-text, #ffffff);
  /* Popup / dialog */
  --w-popup-bg: var(--mfw-popup-bg, var(--mfw-surface-raised, #ffffff));
  --w-popup-overlay: var(--mfw-popup-overlay, rgba(15, 23, 42, 0.5));
  --w-popup-title: var(--mfw-popup-header-text, var(--mfw-text, #1a1f36));
  /* Inputs */
  --w-input-bg: var(--mfw-input-bg, #ffffff);
  --w-input-border: var(--mfw-input-border, var(--mfw-border, #e0e4ef));
  --w-input-text: var(--mfw-input-text, var(--mfw-text, #1a1f36));
  /* ─────────────────────────────────────────────────────────────────────────
   * LAYER 2: Root inheritance (Rule 5)
   * font-family and color applied at root so all children inherit.
   * ───────────────────────────────────────────────────────────────────────── */
  font-family: var(--w-font) !important;
  font-weight: var(--w-font-weight);
  color: var(--w-text) !important;
  box-sizing: border-box;
  /* ─────────────────────────────────────────────────────────────────────────
   * SFL Monitor Mode container (dynamically created by JS)
   * ───────────────────────────────────────────────────────────────────────── */
  /* ─────────────────────────────────────────────────────────────────────────
   * SFL header banner + debug panel
   * ───────────────────────────────────────────────────────────────────────── */
  /* ── About-section read-only inline fields ── */
  /* Bold label flows directly into description text; wraps naturally as one paragraph. */
  /* ── Members list container ── */
  /* Mobile portrait: 1 card per row */
  /* Mobile landscape: 2 cards per row */
  /* ── Members wrapper ── */
  /* ── Loading & no-results states ── */
}
.widget-85ecf1 * {
  box-sizing: border-box;
}
.widget-85ecf1 .sfl-monitor-mode-container {
  padding: 0;
  width: 100%;
  text-align: left;
}
.widget-85ecf1 .mf-sfl-header {
  display: none;
  margin-bottom: 18px;
}
.widget-85ecf1 .mf-sfl-header.is-visible {
  display: block;
}
.widget-85ecf1 .mf-sfl-banner {
  border-radius: var(--w-radius-card);
  border: 1px solid var(--w-warning-bg) !important;
  background: var(--w-warning-bg) !important;
  color: var(--w-warning-text) !important;
  padding: 14px;
}
.widget-85ecf1 .mf-sfl-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.widget-85ecf1 .mf-sfl-banner-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.widget-85ecf1 .mf-sfl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* hardcoded — sub-element of the warning banner; inherits warning context colour */
  border: 1px solid rgba(146, 64, 14, 0.35);
  background: rgba(245, 158, 11, 0.12);
}
.widget-85ecf1 .mf-sfl-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.widget-85ecf1 .mf-sfl-btn {
  appearance: none;
  border-radius: var(--w-radius);
  padding: 7px 10px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  /* hardcoded — sub-element of the warning banner; inherits warning context colour */
  border: 1px solid rgba(146, 64, 14, 0.35);
  background: var(--w-surface) !important;
  color: var(--w-warning-text) !important;
  transition: opacity var(--w-duration-base) var(--w-easing) !important;
}
.widget-85ecf1 .mf-sfl-btn:hover {
  opacity: 0.85;
}
.widget-85ecf1 .mf-sfl-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
}
.widget-85ecf1 .mf-sfl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.widget-85ecf1 .mf-sfl-card {
  border-radius: var(--w-radius-card);
  padding: 10px 12px;
  overflow: auto;
  /* hardcoded — sub-element of the warning banner; semi-transparent white card inset */
  border: 1px solid rgba(146, 64, 14, 0.22);
  background: rgba(255, 255, 255, 0.65);
}
.widget-85ecf1 .mf-sfl-card-title {
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  /* hardcoded — sub-element of the warning banner; inherits warning context colour */
  color: rgba(146, 64, 14, 0.9);
}
.widget-85ecf1 .mf-sfl-kv {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 6px 10px;
  min-width: 420px;
}
.widget-85ecf1 .mf-sfl-k {
  font-weight: 800;
  /* hardcoded — sub-element of the warning banner; inherits warning context colour */
  color: rgba(146, 64, 14, 0.9);
}
.widget-85ecf1 .mf-sfl-v {
  word-break: break-word;
  color: var(--w-text) !important;
}
.widget-85ecf1 .mf-sfl-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.widget-85ecf1 .mf-sfl-table th,
.widget-85ecf1 .mf-sfl-table td {
  text-align: left;
  padding: 6px 8px;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--w-divider) !important;
}
.widget-85ecf1 .mf-sfl-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.widget-85ecf1 .mf-sfl-pill.ok {
  color: var(--w-success-text) !important;
  background: var(--w-success-bg) !important;
  /* hardcoded — semantic status accent border for "success" pill, not theme-adaptive */
  border-color: #6ee7b7;
}
.widget-85ecf1 .mf-sfl-pill.bad {
  color: var(--w-danger-text) !important;
  background: var(--w-danger-bg) !important;
  /* hardcoded — semantic status accent border for "danger" pill, not theme-adaptive */
  border-color: #fca5a5;
}
@media (min-width: 768px) {
  .widget-85ecf1 .mf-sfl-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.widget-85ecf1 .mf-ro-field-inline {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--w-text);
}
.widget-85ecf1 .mf-ro-field-inline:last-child {
  margin-bottom: 0;
}
.widget-85ecf1 .mf-ro-field-label-inline {
  font-weight: 700;
}
.widget-85ecf1 .members-list {
  display: grid;
  grid-template-columns: repeat(var(--w-cards-per-row, 3), 1fr);
  gap: 16px;
  width: 100%;
  min-width: 0;
  overflow: visible;
  padding: 5px;
}
@media (max-width: 767px) and (orientation: portrait) {
  .widget-85ecf1 .members-list {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 900px) and (orientation: landscape) {
  .widget-85ecf1 .members-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.widget-85ecf1 .members-wrapper {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.widget-85ecf1 .member-loading,
.widget-85ecf1 .member-no-results {
  padding: 40px 24px;
  text-align: center;
  font-size: 1rem;
  color: var(--w-text-muted) !important;
}
.widget-85ecf1 .no-results-msg {
  margin: 0 0 16px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--w-text) !important;
}

@charset "UTF-8";
.widget-f05985 {
  /* ── Layer 1: Platform token aliases ─────────────────────────────── */
  --w-bg: var(--mfw-surface, #f5f6fa);
  --w-surface: var(--mfw-surface-raised, #ffffff);
  --w-border: var(--mfw-border, #e0e4ef);
  --w-brand: var(--mfw-brand, #2d6cdf);
  --w-brand-hover: var(--mfw-accent, #1a4fb5);
  --w-brand-text: var(--mfw-brand-text, #ffffff);
  --w-text: var(--mfw-text, #1a1f36);
  --w-text-muted: var(--mfw-text-muted, #6b7280);
  --w-text-subtle: var(--mfw-text-subtle, #9ca3af);
  --w-row-hover: var(--mfw-surface-subtle, #eef3ff);
  --w-chip-bg: var(--mfw-surface-subtle, #f0f4ff);
  --w-chip-text: var(--mfw-brand, #2d6cdf);
  --w-divider: var(--mfw-divider, var(--mfw-border, #e0e4ef));
  --w-focus: var(--mfw-focus, var(--mfw-brand, #2d6cdf));
  --w-font: var(--mfw-font-family-body, inherit);
  --w-font-heading: var(--mfw-font-family-heading, var(--mfw-font-family-body, inherit));
  --w-font-ui: var(--mfw-font-family-ui, var(--mfw-font-family-body, inherit));
  --w-radius: var(--mfw-radius, 8px);
  --w-radius-sm: var(--mfw-radius-sm, 6px);
  --w-radius-card: var(--mfw-radius-card, 10px);
  --w-shadow: var(--mfw-shadow, 0 2px 12px rgba(0,0,0,0.08));
  --w-shadow-lg: var(--mfw-shadow-lg, 0 8px 40px rgba(0,0,0,0.22));
  --w-easing: var(--mfw-easing-standard, ease);
  --w-duration-fast: var(--mfw-duration-fast, 0.15s);
  --w-duration-base: var(--mfw-duration-base, 0.2s);
  /* Status tokens */
  --w-success-bg: var(--mfw-status-success, #d1fae5);
  --w-success-text: var(--mfw-status-success-text, #065f46);
  --w-warning-bg: var(--mfw-status-warning, #fef3c7);
  --w-warning-text: var(--mfw-status-warning-text, #92400e);
  --w-danger-bg: var(--mfw-status-danger, #fee2e2);
  --w-danger-text: var(--mfw-status-danger-text, #991b1b);
  --w-neutral-bg: var(--mfw-status-neutral, #f3f4f6);
  --w-neutral-text: var(--mfw-status-neutral-text, #6b7280);
  /* Button tokens */
  --w-btn-bg: var(--mfw-btn-bg, var(--mfw-brand, #2d6cdf));
  --w-btn-text: var(--mfw-btn-text, var(--mfw-brand-text, #ffffff));
  --w-btn-border: var(--mfw-btn-border, transparent);
  /* Table header tokens */
  --w-table-hdr-bg: var(--mfw-table-col-header-bg, var(--mfw-brand, #2d6cdf));
  --w-table-hdr-text: var(--mfw-table-col-header-text, #ffffff);
  /* Popup/dialog tokens */
  --w-popup-bg: var(--mfw-popup-bg, var(--mfw-surface-raised, #ffffff));
  --w-popup-overlay: var(--mfw-popup-overlay, rgba(15, 23, 42, 0.5));
  --w-popup-hdr-bg: var(--mfw-popup-header-bg, var(--mfw-surface-raised, #e8edf4));
  --w-popup-title: var(--mfw-popup-header-text, var(--mfw-text, #1a1f36));
  /* Input tokens */
  --w-input-bg: var(--mfw-input-bg, #ffffff);
  --w-input-border: var(--mfw-input-border, var(--mfw-border, #e0e4ef));
  --w-input-text: var(--mfw-input-text, var(--mfw-text, #1a1f36));
  /* ── Root-level inheritance (Rule 5) ──────────────────────────────── */
  font-family: var(--w-font) !important;
  color: var(--w-text) !important;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  height: auto !important;
  min-height: 0 !important;
  padding: 0;
  /* SFL development header + verification panel */
  /* hardcoded — SFL dev/debug panel, intentionally distinct from site theme */
  /* Monitor mode — collapse to panel only; hide all normal UI and the SFL banner */
  /* Collapse the inner widget wrapper to fit-content in monitor mode */
  /* Monitor container — zero padding, full width, left-aligned */
  /* ── Monitor panel isolation ────────────────────────────────────────────
     The .mf-monitor-panel canonical CSS is injected as a flat page-level
     stylesheet by __mfMonitorDisplay. Because this widget's scoped CSS wraps
     the container, inherited properties (box-sizing, font-size, line-height,
     table cell padding, th transforms, etc.) bleed in and shift the panel's
     appearance vs. other carriers. This block resets them explicitly so the
     panel renders identically regardless of which carrier hosts it.
     hardcoded — monitor panel uses fixed system UI colours, intentionally
     decoupled from the site theme for consistent diagnostic readability.
  */
  /* Header */
  /* Controls */
  /* ── Search Status key ─────────────────────────────────────────────── */
  /* Pill/capsule style matching Contact Log pattern */
  /* Keys group wrapper */
  /* Individual key item: dot + text */
  /* hardcoded — semantic traffic-light status colours, not theme-adaptive */
  /* Unknown / Known to MalSoc */
  /* Active Search */
  /* Connected */
  /* Refused / Abandoned */
  /* ── Collapsible filter panel ────────────────────────────────────────── */
  /* Rotate chevron when panel is open */
  /* Remove bottom margin from .rw-filters when it's inside the panel body */
  /* ── House Pages / Reconnection mode — hide filter panel too ─────────── */
  /* Table-level filters — single row, dropdowns left, pills right */
  /* Left group: dropdowns */
  /* Right group: pill islands + clear icon */
  /* Inline label + dropdown (no island) */
  /* Each pill filter is its own island */
  /* Inline label + pills island */
  /* Clear button in the filter header — hidden until filters are active */
  /* Old pills-area clear button — always hidden (replaced by header button) */
  /* When filters are active: hide chevron, show header clear button */
  /* Pill/toggle filter buttons */
  /* Yes / true pills — green (hardcoded — semantic boolean status colour, not theme-adaptive) */
  /* No / false pills — red (hardcoded — semantic boolean status colour, not theme-adaptive) */
  /* ── House Pages mode — hide all interactive controls ─────────────────── */
  /* ── Reconnection mode — hide filters and sort hint, keep search bar ───── */
  /* Loading */
  /* Error */
  /* Table wrapper — vertically scrollable with sticky header */
  /* Sticky header — stays visible while the body scrolls.
     Must use border-collapse: collapse (not separate) for position:sticky
     to work on th elements across all browsers.
     NOTE: position:sticky is set here AND on the main .rw-header-row th block
     below (where it overrides position:relative). Do not add position:relative
     back to .rw-header-row th or sticky will break. */
  /* Head — use !important on the th cells to beat the injected .rw-thead rule */
  /* Body */
  /* Row divider and cell styling (border-separate means tr border-bottom has no effect) */
  /* Pull the Name cell flush to the photo — gap comes from the photo's margin alone */
  /* Networking Profile link button on Display Name */
  /* Clickable rows (Has Profile) */
  /* Empty message */
  /* Pagination */
  /* Group-by header rows */
  /* Transparent spacer row between groups */
  /* Group label cell — rounded top corners visible because border-separate is set */
  /* Repeated column headers — match main table header style exactly */
  /* Group totals row */
  /* Group-by label styling */
  /* ── On WhatsApp & On MalSoc DB columns — narrow, small header text ── */
  /* ── Display Name and House — force no-wrap ── */
  /* hardcoded — semantic boolean status colours (true=green, false=red), not theme-adaptive */
  /* Edit button — per row in table */
  /* Attending badge — pill shape with colour-coded variants */
  /* Attending field — colour-coded by value (hardcoded — semantic status colours, not theme-adaptive) */
  /* Non-sortable column header */
  /* Location cell — country + town on two lines */
  /* Contact Info cell — icons side by side */
  /* Reveal buttons (WhatsApp / Email) */
  /* hardcoded — WhatsApp brand green, intentionally fixed */
  /* hardcoded — Facebook brand blue, intentionally fixed */
  /* On MalSoc DB badge — shown inline in Contact Info cell */
  /* ── Multi-select dropdown (Attending, Search Status) ───────────────── */
  /* Custom multi-select trigger wrapper */
  /* Traffic-light stage dot — prepended to the Search Status badge */
  /* hardcoded — semantic traffic-light stage colours; yellow/green/blue/red carry fixed meaning */
  /* yellow */
  /* green */
  /* blue */
  /* red */
  /* Stage dot inside Name cell — visible on mobile only */
  /* 3rd line: flag + city — hidden everywhere except portrait mobile */
  /* Dot+pencil column wrapper — transparent on desktop (display:contents
     means children participate in the parent flex as if unwrapped) */
  /* Search status badges — hardcoded semantic colours matching traffic-light model:
     blue=Connected, red=terminal failure, green=active/open, yellow=not-started, grey=unknown */
  /* Call + SMS buttons — hidden on desktop, visible on mobile only */
  /* Mobile-only sub-lines (WhatsApp under Attending) */
  /* Portrait-mobile attending badge shown inside Contact Info cell */
  /* House sub-line under Name — always visible on desktop */
  /* Legacy mobile-only house sub (kept for other contexts) */
  /* Pencil edit icon — hidden on desktop, shown on mobile only */
  /* hardcoded — call action blue, intentionally distinct from brand colour */
  /* Phone number tooltip modal — shown on desktop click-to-call */
  /* hardcoded — SMS action purple, intentionally distinct from brand colour */
  /* Portrait mobile: move Attending badge into Contact Info; hide Attending column and WhatsApp sub-line */
}
.widget-f05985 * {
  box-sizing: border-box;
}
.widget-f05985 .reunion-table-widget {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
}
.widget-f05985 .mf-sfl-header {
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 14px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.widget-f05985 .mf-sfl-header__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.widget-f05985 .mf-sfl-header__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  flex: 1 1 auto;
  min-width: 240px;
}
.widget-f05985 .mf-sfl-header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f59e0b;
  color: #111827;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.widget-f05985 .mf-sfl-header__meta {
  font-size: 0.85rem !important;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}
.widget-f05985 .mf-sfl-header__btn {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #d97706;
  background: #fff;
  color: #92400e;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.widget-f05985 .mf-sfl-header__btn:hover {
  background: #fef3c7;
}
.widget-f05985 .mf-sfl-header__details {
  margin-top: 8px;
  font-size: 0.82rem !important;
  line-height: 1.45;
  color: #78350f;
}
.widget-f05985 .mf-sfl-header__details ul {
  margin: 6px 0 0 18px;
  padding: 0;
}
.widget-f05985 [data-mode=monitor] [data-mf-sfl-header],
.widget-f05985 [data-mode=monitor] .rw-header,
.widget-f05985 [data-mode=monitor] .rw-controls,
.widget-f05985 [data-mode=monitor] .rw-filters,
.widget-f05985 [data-mode=monitor] .rw-sort-hint,
.widget-f05985 [data-mode=monitor] .rw-loading,
.widget-f05985 [data-mode=monitor] .rw-error,
.widget-f05985 [data-mode=monitor] .rw-table-wrap,
.widget-f05985 [data-mode=monitor] .rw-pagination {
  display: none !important;
}
.widget-f05985 [data-mode=monitor].reunion-table-widget,
.widget-f05985 [data-mode=monitor] .reunion-table-widget {
  height: fit-content !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.widget-f05985 .sfl-monitor-mode-container {
  padding: 0;
  width: 100%;
  text-align: left;
}
.widget-f05985 .sfl-monitor-mode-container .mf-monitor-panel,
.widget-f05985 .sfl-monitor-mode-container .mf-monitor-panel * {
  box-sizing: content-box;
}
.widget-f05985 .sfl-monitor-mode-container .mf-monitor-panel {
  font-family: system-ui, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #333 !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.widget-f05985 .sfl-monitor-mode-container .mf-monitor-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  background: #f5f5f5 !important;
  border-bottom: 1px solid #e0e0e0 !important;
}
.widget-f05985 .sfl-monitor-mode-container .mf-monitor-body {
  padding: 8px 10px !important;
}
.widget-f05985 .sfl-monitor-mode-container .mf-monitor-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 10px !important;
  border-top: 1px solid #e0e0e0 !important;
  background: #fafafa !important;
}
.widget-f05985 .sfl-monitor-mode-container .mf-monitor-table {
  width: 100% !important;
  border-collapse: collapse !important;
  min-width: 0 !important;
}
.widget-f05985 .sfl-monitor-mode-container .mf-monitor-table th {
  font-size: 10px !important;
  color: #888 !important;
  text-align: left !important;
  padding: 0 0 4px 0 !important;
  font-weight: 500 !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: normal !important;
}
.widget-f05985 .sfl-monitor-mode-container .mf-monitor-table td {
  padding: 3px 0 !important;
  font-size: 11px !important;
  border: none !important;
  background: transparent !important;
  vertical-align: top !important;
  word-break: normal !important;
}
.widget-f05985 .rw-header {
  margin-bottom: 18px;
}
.widget-f05985 .rw-title {
  font-size: 1.6rem !important;
  font-weight: var(--mfw-font-weight-heading, 700);
  margin: 0 0 4px 0;
  line-height: 1.2;
  font-family: var(--w-font-heading) !important;
  color: var(--w-text) !important;
}
.widget-f05985 .rw-subtitle {
  font-size: 0.95rem !important;
  font-weight: var(--mfw-font-weight-body, normal);
  color: var(--w-brand) !important;
  margin: 0;
}
.widget-f05985 .rw-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.widget-f05985 .rw-search-wrap {
  position: relative;
  flex: 1 1 260px;
  max-width: 420px;
}
.widget-f05985 .rw-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--w-brand) !important;
  pointer-events: none;
}
.widget-f05985 .rw-search {
  width: 100%;
  padding: 9px 12px 9px 34px !important;
  border: 1px solid var(--w-input-border) !important;
  border-radius: var(--w-radius-sm);
  font-size: 0.9rem !important;
  font-weight: var(--mfw-font-weight-body, normal);
  outline: none;
  background: var(--w-input-bg) !important;
  color: var(--w-input-text) !important;
  font-family: var(--w-font-ui) !important;
  box-sizing: border-box !important;
  transition: border-color var(--w-duration-base) var(--w-easing) !important;
}
.widget-f05985 .rw-search:focus {
  border-color: var(--w-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-brand) 12%, transparent);
}
.widget-f05985 .rw-search::placeholder {
  font-style: italic;
  color: var(--w-text-muted) !important;
}
.widget-f05985 .rw-meta {
  font-size: 0.85rem !important;
  font-weight: var(--mfw-font-weight-body, normal);
  white-space: nowrap;
  color: var(--w-text-muted) !important;
}
.widget-f05985 .rw-search-status-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--w-text-muted) !important;
  margin: 0 0 8px 0;
  padding: 5px 12px;
  background: var(--w-surface) !important;
  border: 1px solid var(--w-border) !important;
  border-radius: 20px;
  box-shadow: var(--w-shadow) !important;
}
.widget-f05985 .rw-ssk-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--w-text) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.widget-f05985 .rw-ssk-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.widget-f05985 .rw-ssk-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.widget-f05985 .rw-ssk-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.widget-f05985 .rw-ssk-text {
  font-size: 11px;
  line-height: 1.2;
}
.widget-f05985 .rw-ssk-yellow {
  background: #f59e0b;
}
.widget-f05985 .rw-ssk-green {
  background: #16a34a;
}
.widget-f05985 .rw-ssk-blue {
  background: #2563eb;
}
.widget-f05985 .rw-ssk-red {
  background: #dc2626;
}
.widget-f05985 .rw-sort-hint {
  font-size: 0.83rem !important;
  font-weight: var(--mfw-font-weight-body, normal);
  font-style: italic;
  text-align: left;
  margin: 0 0 8px 0;
  color: var(--w-text-muted) !important;
}
.widget-f05985 .rw-filter-panel {
  margin-bottom: 14px;
  border: 1.5px solid var(--w-border) !important;
  border-radius: var(--w-radius-card);
  overflow: hidden;
  background: var(--w-surface) !important;
}
.widget-f05985 .rw-filter-panel-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--w-row-hover) !important;
  border: none;
  cursor: pointer;
  font-family: var(--w-font-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 700;
  color: var(--w-brand) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  transition: background var(--w-duration-fast) var(--w-easing) !important;
  user-select: none;
  -webkit-user-select: none;
}
.widget-f05985 .rw-filter-panel-toggle:hover {
  background: color-mix(in srgb, var(--w-brand) 6%, var(--w-row-hover)) !important;
}
.widget-f05985 .rw-filter-panel-label {
  flex: 1 1 auto;
}
.widget-f05985 .rw-filter-panel-summary {
  display: none;
  background: var(--w-brand) !important;
  color: var(--w-brand-text) !important;
  font-size: 0.68rem !important;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: none;
}
.widget-f05985 .rw-filter-panel-chevron {
  flex-shrink: 0;
  transition: transform var(--w-duration-base) var(--w-easing) !important;
  color: var(--w-brand) !important;
}
.widget-f05985 .rw-filter-panel-toggle[aria-expanded=true] .rw-filter-panel-chevron {
  transform: rotate(180deg);
}
.widget-f05985 .rw-filter-body {
  padding: 10px 12px 12px;
  border-top: 1.5px solid var(--w-divider) !important;
}
.widget-f05985 .rw-filter-body .rw-filters {
  margin-bottom: 0;
}
.widget-f05985 .rw-mode-house-pages .rw-filter-panel,
.widget-f05985 [data-display-mode=house-pages] .rw-filter-panel,
.widget-f05985 .rw-mode-reconnection .rw-filter-panel,
.widget-f05985 [data-display-mode=reconnection] .rw-filter-panel {
  display: none !important;
}
.widget-f05985 .rw-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.widget-f05985 .rw-filter-dropdowns {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.widget-f05985 .rw-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.widget-f05985 .rw-filter-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}
.widget-f05985 .rw-filter-inline .rw-filter-label {
  white-space: nowrap;
  margin-bottom: 0;
}
.widget-f05985 .rw-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--w-surface) !important;
  border: 1px solid var(--w-border) !important;
  border-radius: var(--w-radius-sm);
  padding: 6px 10px;
  overflow: hidden;
}
.widget-f05985 .rw-filter-group-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.widget-f05985 .rw-filter-group-inline .rw-filter-label {
  white-space: nowrap;
  margin-bottom: 0;
}
.widget-f05985 .rw-filter-label {
  font-size: 0.75rem !important;
  font-weight: 600;
  color: var(--w-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.widget-f05985 .rw-filter-select,
.widget-f05985 .rw-filter-text {
  padding: 0 10px;
  height: 50px;
  border: 1.5px solid var(--w-input-border) !important;
  border-radius: var(--w-radius-sm);
  font-size: 0.85rem !important;
  background: var(--w-input-bg) !important;
  color: var(--w-input-text) !important;
  font-family: var(--w-font-ui) !important;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.widget-f05985 .rw-filter-select:focus,
.widget-f05985 .rw-filter-text:focus {
  border-color: var(--w-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-brand) 12%, transparent);
}
.widget-f05985 .rw-filter-clear-hdr {
  display: none !important;
}
.widget-f05985 .rw-filter-clear-pills {
  display: none !important;
}
.widget-f05985 .rw-filter-panel-toggle.rw-filters-active .rw-filter-panel-chevron {
  display: none !important;
}
.widget-f05985 .rw-filter-panel-toggle.rw-filters-active .rw-filter-clear-hdr {
  display: inline-flex !important;
}
.widget-f05985 .rw-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--w-border) !important;
  border-radius: 50%;
  background: var(--w-row-hover) !important;
  color: var(--w-text-muted) !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--w-duration-fast) var(--w-easing) !important, color var(--w-duration-fast) var(--w-easing) !important, border-color var(--w-duration-fast) var(--w-easing) !important;
}
.widget-f05985 .rw-filter-clear:hover {
  background: var(--w-danger-bg) !important;
  color: var(--w-danger-text) !important;
  border-color: var(--w-danger-bg) !important;
}
.widget-f05985 .rw-pill-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  border: 1.5px solid var(--w-input-border) !important;
  border-radius: var(--w-radius-sm);
  overflow: hidden;
  background: var(--w-surface) !important;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.12);
}
.widget-f05985 .rw-pill {
  flex: 0 0 32px;
  width: 32px;
  padding: 5px 0;
  border: none;
  border-right: 1px solid var(--w-border) !important;
  background: var(--w-surface) !important;
  color: var(--w-text-muted) !important;
  font-size: 1rem !important;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--w-duration-fast) var(--w-easing) !important, color var(--w-duration-fast) var(--w-easing) !important;
  font-family: var(--w-font-ui) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-f05985 .rw-pill:last-child {
  border-right: none;
}
.widget-f05985 .rw-pill:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--w-text) !important;
}
.widget-f05985 .rw-pill.rw-pill-active {
  background: var(--w-brand) !important;
  color: var(--w-brand-text) !important;
  font-weight: 600;
}
.widget-f05985 .rw-pill.rw-pill-active:hover {
  background: var(--w-brand) !important;
  color: var(--w-brand-text) !important;
}
.widget-f05985 .rw-pill[data-value=yes].rw-pill-active,
.widget-f05985 .rw-pill[data-value=true].rw-pill-active {
  background: #16a34a;
  color: #fff;
}
.widget-f05985 .rw-pill[data-value=yes].rw-pill-active:hover,
.widget-f05985 .rw-pill[data-value=true].rw-pill-active:hover {
  background: #15803d;
  color: #fff;
}
.widget-f05985 .rw-pill[data-value=yes]:not(.rw-pill-active):hover,
.widget-f05985 .rw-pill[data-value=true]:not(.rw-pill-active):hover {
  background: rgba(22, 163, 74, 0.08);
  color: #16a34a;
}
.widget-f05985 .rw-pill[data-value=no].rw-pill-active,
.widget-f05985 .rw-pill[data-value=false].rw-pill-active {
  background: #ff1a1a;
  color: #fff;
}
.widget-f05985 .rw-pill[data-value=no].rw-pill-active:hover,
.widget-f05985 .rw-pill[data-value=false].rw-pill-active:hover {
  background: #e60000;
  color: #fff;
}
.widget-f05985 .rw-pill[data-value=no]:not(.rw-pill-active):hover,
.widget-f05985 .rw-pill[data-value=false]:not(.rw-pill-active):hover {
  background: rgba(255, 26, 26, 0.08);
  color: #ff1a1a;
}
.widget-f05985 .rw-mode-house-pages .rw-controls,
.widget-f05985 .rw-mode-house-pages .rw-filters,
.widget-f05985 .rw-mode-house-pages .rw-sort-hint,
.widget-f05985 [data-display-mode=house-pages] .rw-controls,
.widget-f05985 [data-display-mode=house-pages] .rw-filters,
.widget-f05985 [data-display-mode=house-pages] .rw-sort-hint {
  display: none !important;
}
.widget-f05985 .rw-mode-reconnection .rw-filters,
.widget-f05985 .rw-mode-reconnection .rw-sort-hint,
.widget-f05985 [data-display-mode=reconnection] .rw-filters,
.widget-f05985 [data-display-mode=reconnection] .rw-sort-hint {
  display: none !important;
}
.widget-f05985 .rw-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 20px;
  color: var(--w-text-muted) !important;
  font-size: 0.95rem !important;
  font-weight: var(--mfw-font-weight-body, normal);
}
.widget-f05985 .rw-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--w-border) !important;
  border-top-color: var(--w-brand) !important;
  border-radius: 50%;
  animation: rw-spin 0.8s linear infinite;
}
@keyframes rw-spin {
  to {
    transform: rotate(360deg);
  }
}
.widget-f05985 .rw-error {
  padding: 18px;
  background: var(--w-danger-bg) !important;
  border: 1px solid color-mix(in srgb, var(--w-danger-text) 30%, transparent) !important;
  border-radius: var(--w-radius-card);
  color: var(--w-danger-text) !important;
  font-size: 0.9rem !important;
  font-weight: var(--mfw-font-weight-body, normal);
}
.widget-f05985 .rw-table-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  margin-bottom: 75px;
  overflow-y: auto;
  max-height: 560px;
  border-radius: var(--w-radius-card);
  box-shadow: var(--w-shadow) !important;
  border: 1px solid var(--w-border) !important;
  background: var(--w-bg) !important;
}
.widget-f05985 .rw-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.88rem !important;
  font-weight: var(--mfw-font-weight-body, normal);
  min-width: 600px;
  table-layout: auto;
}
.widget-f05985 .rw-thead {
  background: transparent !important;
}
.widget-f05985 .rw-header-row th {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  font-weight: 600;
  color: var(--w-table-hdr-text) !important;
  background-color: var(--w-table-hdr-bg) !important;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--w-font-ui) !important;
  transition: background var(--w-duration-fast) var(--w-easing) !important;
}
.widget-f05985 .rw-header-row th[data-col="Has Profile"],
.widget-f05985 .rw-header-row th[data-col=Found],
.widget-f05985 .rw-header-row th[data-col="On WhatsApp"] {
  text-align: center;
}
.widget-f05985 .rw-header-row th:hover {
  background: rgba(255, 255, 255, 0.12);
}
.widget-f05985 .rw-header-row th.sorted-asc::after {
  content: " ▲";
  font-size: 0.7rem !important;
  opacity: 0.9;
}
.widget-f05985 .rw-header-row th.sorted-desc::after {
  content: " ▼";
  font-size: 0.7rem !important;
  opacity: 0.9;
}
.widget-f05985 .rw-header-row th[data-sort-priority]::before {
  content: attr(data-sort-priority);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  font-size: 0.65rem !important;
  font-weight: 700;
  vertical-align: middle;
}
.widget-f05985 .rw-tbody tr {
  transition: background var(--w-duration-fast) var(--w-easing) !important;
}
.widget-f05985 .rw-tbody td {
  border-bottom: 1px solid var(--w-border) !important;
  padding: 10px 14px;
  vertical-align: top;
  text-align: left;
  line-height: 1.45;
  word-break: break-word;
}
.widget-f05985 .rw-tbody tr {
  background: var(--w-surface) !important;
}
.widget-f05985 .rw-tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--w-brand) 3%, var(--w-surface)) !important;
}
.widget-f05985 .rw-tbody tr:hover {
  background: color-mix(in srgb, var(--w-brand) 8%, var(--w-surface)) !important;
}
.widget-f05985 .rw-tbody td:first-child {
  padding: 0;
  vertical-align: middle;
}
.widget-f05985 .rw-tbody td[data-col="Display Name"] {
  padding-left: 2px !important;
}
.widget-f05985 .rw-tbody td a {
  color: var(--w-brand) !important;
  text-decoration: none;
}
.widget-f05985 .rw-tbody td a:hover {
  text-decoration: underline;
}
.widget-f05985 .rw-profile-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--w-text) !important;
  text-decoration: none;
  font-weight: var(--mfw-font-weight-body, 600);
  font-size: inherit;
  font-family: var(--w-font) !important;
  text-align: left;
  line-height: inherit;
  transition: color var(--w-duration-fast) var(--w-easing) !important;
}
.widget-f05985 .rw-profile-link:hover {
  color: var(--w-brand) !important;
  text-decoration: underline;
}
.widget-f05985 .rw-tbody tr.rw-row-clickable {
  cursor: pointer;
}
.widget-f05985 .rw-tbody tr.rw-row-clickable:hover {
  background: color-mix(in srgb, var(--w-brand) 8%, var(--w-surface)) !important;
}
.widget-f05985 .rw-empty-msg {
  padding: 32px;
  text-align: center;
  font-size: 0.95rem !important;
  font-weight: var(--mfw-font-weight-body, normal);
  color: var(--w-text-muted) !important;
}
.widget-f05985 .rw-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.widget-f05985 .rw-page-btn {
  padding: 7px 18px;
  border: 1px solid var(--w-border) !important;
  border-radius: var(--w-radius);
  background: var(--w-surface) !important;
  color: var(--w-brand) !important;
  font-size: 0.88rem !important;
  cursor: pointer;
  font-weight: 500;
  font-family: var(--w-font-ui) !important;
  transition: background var(--w-duration-fast) var(--w-easing) !important, border-color var(--w-duration-fast) var(--w-easing) !important;
}
.widget-f05985 .rw-page-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--w-brand) 8%, var(--w-surface)) !important;
  border-color: var(--w-brand) !important;
}
.widget-f05985 .rw-page-btn:disabled {
  color: var(--w-text-muted) !important;
  cursor: not-allowed;
  opacity: 0.6;
}
.widget-f05985 .rw-page-info {
  font-size: 0.88rem !important;
  color: var(--w-text-muted) !important;
}
.widget-f05985 .rw-mugshot-wrap {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  overflow: hidden;
  display: block;
  padding: 0;
  margin: 5px 2px 5px 5px;
  border-radius: 50%;
}
.widget-f05985 .rw-mugshot {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  object-fit: cover;
  object-position: center center;
  display: block;
  padding: 0;
  margin: 0;
  border-radius: 50%;
}
.widget-f05985 .rw-group-header-row {
  background: transparent;
}
.widget-f05985 .rw-group-spacer td {
  padding: 10px 0 !important;
  background: transparent !important;
  border: none !important;
}
.widget-f05985 .rw-group-header-cell {
  background-color: var(--w-row-hover) !important;
  border-radius: 8px 8px 0 0;
  padding: 8px 14px !important;
  font-size: 0.8rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--w-text) !important;
  border: none !important;
  text-align: center !important;
}
.widget-f05985 .rw-group-subheader th {
  background-color: var(--w-table-hdr-bg) !important;
  color: var(--w-table-hdr-text) !important;
  padding: 12px 14px !important;
  text-align: left !important;
  vertical-align: top;
  font-weight: 600;
  font-size: 0.82rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: background var(--w-duration-fast) var(--w-easing) !important;
  user-select: none;
}
.widget-f05985 .rw-group-subheader th[data-col="Has Profile"],
.widget-f05985 .rw-group-subheader th[data-col=Found],
.widget-f05985 .rw-group-subheader th[data-col="On WhatsApp"] {
  text-align: center !important;
}
.widget-f05985 .rw-group-subheader th.sorted-asc::after {
  content: " ▲";
  font-size: 0.7rem !important;
  opacity: 0.9;
}
.widget-f05985 .rw-group-subheader th.sorted-desc::after {
  content: " ▼";
  font-size: 0.7rem !important;
  opacity: 0.9;
}
.widget-f05985 .rw-group-subheader th:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}
.widget-f05985 .rw-group-totals-row {
  background: var(--w-surface) !important;
  border-top: 2px solid var(--w-text) !important;
  border-bottom: 2px solid var(--w-text) !important;
}
.widget-f05985 .rw-group-totals-cell {
  padding: 7px 14px !important;
  font-size: 0.92rem !important;
  font-weight: var(--mfw-font-weight-body, 700);
  color: var(--w-text) !important;
  text-align: left !important;
  vertical-align: middle !important;
}
.widget-f05985 .rw-group-totals-cell.rw-totals-bool {
  text-align: center !important;
  color: var(--w-text) !important;
}
.widget-f05985 .rw-groupby-inline {
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--w-border) !important;
}
.widget-f05985 .rw-groupby-label {
  color: var(--w-text-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.widget-f05985 .rw-table th[data-col="On WhatsApp"],
.widget-f05985 .rw-table td.rw-onwa-td {
  max-width: 100px;
  min-width: 85px;
  width: 90px;
  text-align: center;
  overflow: hidden;
}
.widget-f05985 .rw-table th[data-col=Verified],
.widget-f05985 .rw-table td.rw-has-profile-td {
  max-width: 100px;
  min-width: 85px;
  width: 90px;
  text-align: center;
  overflow: hidden;
}
.widget-f05985 .rw-table th[data-col="On WhatsApp"] {
  font-size: 0.6rem !important;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
  padding-left: 2px;
  padding-right: 2px;
}
.widget-f05985 .rw-table th[data-col=Verified] {
  font-size: 0.6rem !important;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
  padding-left: 2px;
  padding-right: 2px;
}
.widget-f05985 .rw-table th[data-col="On MalSoc DB"],
.widget-f05985 .rw-table td[data-col="On MalSoc DB"] {
  max-width: 40px;
  width: 40px;
  min-width: 0;
  text-align: center;
  overflow: hidden;
}
.widget-f05985 .rw-table th[data-col="On MalSoc DB"] {
  font-size: 0.6rem !important;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
  padding-left: 2px;
  padding-right: 2px;
}
.widget-f05985 .rw-table td[data-col="Display Name"],
.widget-f05985 .rw-table td.rw-house-td {
  white-space: nowrap;
}
.widget-f05985 .rw-bool-true,
.widget-f05985 .rw-tbody td.rw-bool-true {
  color: #16a34a !important;
  font-weight: 700;
  font-size: 1.1rem !important;
  text-align: center;
}
.widget-f05985 .rw-bool-false,
.widget-f05985 .rw-tbody td.rw-bool-false {
  color: #ff1a1a !important;
  font-weight: 700;
  font-size: 1.1rem !important;
  text-align: center;
}
.widget-f05985 .rw-edit-cell {
  padding: 6px 10px !important;
  vertical-align: middle !important;
  white-space: nowrap;
  text-align: center;
}
.widget-f05985 .rw-edit-th {
  width: 1%;
  white-space: nowrap;
}
.widget-f05985 .rw-edit-btn {
  display: inline-block;
  padding: 3px 10px;
  border: 1.5px solid var(--w-border) !important;
  border-radius: var(--w-radius-sm);
  background: transparent !important;
  color: var(--w-text-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  font-family: var(--w-font-ui) !important;
  cursor: pointer;
  line-height: 1.4;
  transition: background var(--w-duration-fast) var(--w-easing) !important, color var(--w-duration-fast) var(--w-easing) !important, border-color var(--w-duration-fast) var(--w-easing) !important;
}
.widget-f05985 .rw-edit-btn:hover {
  background: var(--w-btn-bg) !important;
  color: var(--w-btn-text) !important;
  border-color: var(--w-btn-bg) !important;
}
.widget-f05985 .rw-attending-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.5;
  border: 1px solid transparent;
}
.widget-f05985 .rw-attending-registered {
  color: #14532d;
  background: #dcfce7;
  border-color: #86efac;
}
.widget-f05985 .rw-attending-interested {
  color: #1e40af;
  background: #dbeafe;
  border-color: #93c5fd;
}
.widget-f05985 .rw-attending-not-interested {
  color: #7f1d1d;
  background: #fee2e2;
  border-color: #fca5a5;
}
.widget-f05985 .rw-attending-unavailable {
  color: #78350f;
  background: #fef3c7;
  border-color: #fcd34d;
}
.widget-f05985 .rw-attending-unknown {
  color: #6b7280;
  background: #f3f4f6;
  border-color: #d1d5db;
}
.widget-f05985 .rw-header-row th.rw-no-sort {
  cursor: default;
}
.widget-f05985 .rw-header-row th.rw-no-sort:hover {
  background: transparent;
}
.widget-f05985 .rw-location-cell {
  vertical-align: top !important;
}
.widget-f05985 .rw-loc-country,
.widget-f05985 .rw-loc-town {
  display: block;
  line-height: 1.2;
}
.widget-f05985 .rw-loc-country {
  font-size: 0.82rem !important;
  font-weight: var(--mfw-font-weight-body, normal);
}
.widget-f05985 .rw-loc-town {
  font-size: 0.76rem !important;
  font-weight: var(--mfw-font-weight-body, normal);
  margin-top: 1px;
}
.widget-f05985 .rw-contact-info-cell {
  white-space: nowrap;
}
.widget-f05985 .rw-reveal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0.75;
  vertical-align: middle;
}
.widget-f05985 .rw-reveal-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}
.widget-f05985 .rw-wa-btn {
  color: #25D366;
}
.widget-f05985 .rw-email-btn {
  color: var(--w-brand) !important;
}
.widget-f05985 .rw-facebook-btn {
  color: #1877f2;
}
.widget-f05985 .rw-facebook-btn:hover {
  background: rgba(24, 119, 242, 0.1);
  transform: scale(1.12);
}
.widget-f05985 .rw-malsoc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 6px;
  margin-right: 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  border-radius: 4px;
  /* hardcoded — brand identity badge (MalSoc dark navy), intentionally fixed */
  background: #1e3a5f;
  color: #ffffff;
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
}
.widget-f05985 .rw-filter-inline .rw-multiselect {
  height: 50px;
  min-width: 140px;
  padding: 0 4px;
  overflow: hidden;
  cursor: pointer;
}
.widget-f05985 .rw-ms-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 140px;
}
.widget-f05985 .rw-ms-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 50px;
  padding: 0 10px;
  border: 1.5px solid var(--w-input-border) !important;
  border-radius: var(--w-radius-sm);
  background: var(--w-input-bg) !important;
  font-size: 0.85rem !important;
  color: var(--w-input-text) !important;
  cursor: pointer;
  white-space: nowrap;
  min-width: 140px;
  font-family: var(--w-font-ui) !important;
}
.widget-f05985 .rw-ms-btn:focus {
  outline: none;
  border-color: var(--w-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-brand) 12%, transparent);
}
.widget-f05985 .rw-ms-chevron {
  flex-shrink: 0;
  transition: transform var(--w-duration-fast) var(--w-easing) !important;
  color: var(--w-text-muted) !important;
}
.widget-f05985 .rw-ms-wrap.is-open .rw-ms-chevron {
  transform: rotate(180deg);
}
.widget-f05985 .rw-ms-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  z-index: 1000;
  min-width: 100%;
  background: var(--w-surface) !important;
  border: 1.5px solid var(--w-border) !important;
  border-radius: var(--w-radius-sm);
  box-shadow: var(--w-shadow) !important;
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}
.widget-f05985 .rw-ms-wrap.is-open .rw-ms-dropdown {
  display: block;
}
.widget-f05985 .rw-ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.85rem !important;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  transition: background var(--w-duration-fast) var(--w-easing) !important;
  color: var(--w-text) !important;
}
.widget-f05985 .rw-ms-option:hover {
  background: var(--w-row-hover) !important;
}
.widget-f05985 .rw-ms-option.is-selected {
  background: color-mix(in srgb, var(--w-brand) 8%, var(--w-surface)) !important;
  font-weight: 600;
  color: var(--w-brand) !important;
}
.widget-f05985 .rw-ms-option input[type=checkbox] {
  accent-color: var(--w-brand) !important;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}
.widget-f05985 .rw-ms-clear {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  border-top: 1px solid var(--w-divider) !important;
  background: var(--w-row-hover) !important;
  font-size: 0.78rem !important;
  color: var(--w-text-muted) !important;
  cursor: pointer;
  text-align: left;
  font-family: var(--w-font-ui) !important;
}
.widget-f05985 .rw-ms-clear:hover {
  background: var(--w-surface) !important;
  color: var(--w-text) !important;
}
.widget-f05985 .rw-stage-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.widget-f05985 .rw-stage-not-started {
  background: #fbbf24;
  box-shadow: 0 0 0 2px #fef3c7;
}
.widget-f05985 .rw-stage-in-progress {
  background: #22c55e;
  box-shadow: 0 0 0 2px #dcfce7;
}
.widget-f05985 .rw-stage-successful {
  background: #3b82f6;
  box-shadow: 0 0 0 2px #dbeafe;
}
.widget-f05985 .rw-stage-failed {
  background: #ef4444;
  box-shadow: 0 0 0 2px #fee2e2;
}
.widget-f05985 .rw-name-stage-dot {
  display: none !important;
}
.widget-f05985 .rw-name-loc-sub {
  display: none !important;
}
.widget-f05985 .rw-name-dot-pencil-col {
  display: contents;
}
.widget-f05985 .rw-search-status-td {
  white-space: nowrap;
}
.widget-f05985 .rw-search-status-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.5;
}
.widget-f05985 .rw-ss-connected {
  background: #dbeafe;
  color: #1e3a8a;
  border: 1px solid #93c5fd;
}
.widget-f05985 .rw-ss-refused {
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fca5a5;
}
.widget-f05985 .rw-ss-abandoned {
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fca5a5;
}
.widget-f05985 .rw-ss-contacted {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}
.widget-f05985 .rw-ss-info-found {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}
.widget-f05985 .rw-ss-social-found {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}
.widget-f05985 .rw-ss-in-progress {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}
.widget-f05985 .rw-ss-known-to-malsoc {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fcd34d;
}
.widget-f05985 .rw-ss-unknown {
  background: #f9fafb;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
}
.widget-f05985 .rw-mobile-only {
  display: none !important;
}
.widget-f05985 .rw-mobile-wa-sub {
  display: none !important;
}
.widget-f05985 .rw-portrait-attending {
  display: none !important;
}
.widget-f05985 .rw-name-primary {
  display: block;
  font-weight: 600;
}
.widget-f05985 .rw-name-flag {
  display: inline-block;
  width: 9px;
  height: 13px;
  vertical-align: middle;
  margin-left: 5px;
  border-radius: 2px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
}
.widget-f05985 .rw-name-house-sub {
  display: block;
  font-size: 0.72rem !important;
  color: var(--w-text-muted) !important;
  margin-top: 2px;
  line-height: 1.2;
}
.widget-f05985 .rw-mobile-house-sub {
  display: none !important;
  color: var(--w-text-muted) !important;
}
.widget-f05985 .rw-pencil-btn {
  display: none !important;
}
.widget-f05985 .rw-call-btn {
  color: #60a5fa;
}
.widget-f05985 .rw-call-btn svg {
  width: 16px;
  height: 16px;
}
.widget-f05985 .rw-call-btn:hover {
  background: rgba(96, 165, 250, 0.12);
}
.widget-f05985 .rw-phone-modal {
  position: fixed;
  z-index: 10300;
  background: var(--w-surface) !important;
  border: 1px solid var(--w-border) !important;
  border-radius: 8px;
  box-shadow: var(--w-shadow-lg) !important;
  padding: 10px 14px;
  font-size: 0.9rem !important;
  font-weight: var(--mfw-font-weight-body, 600);
  color: var(--w-text) !important;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--w-duration-fast) var(--w-easing) !important;
}
.widget-f05985 .rw-phone-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.widget-f05985 .rw-sms-btn {
  color: #7c3aed;
}
.widget-f05985 .rw-sms-btn:hover {
  background: rgba(124, 58, 237, 0.1);
}
@media (max-width: 767px) {
  .widget-f05985 {
    /* Show mobile sub-lines */
  }
  .widget-f05985 .rw-mobile-only {
    display: inline-flex !important;
  }
  .widget-f05985 .rw-mobile-wa-sub {
    display: block !important;
  }
}
@media (max-width: 767px) and (orientation: portrait) {
  .widget-f05985 {
    /* Hide Attending column on portrait */
    /* Hide WhatsApp sub-line on portrait */
    /* Show the Attending badge embedded inside Contact Info on portrait */
    /* Force table to fill container exactly — no horizontal scroll */
    /* Name and Contact Info columns each take exactly 50% */
    /* Prevent content from overflowing the fixed cells */
    /* Fix Group-by subheader column widths on mobile —
       mirror the same hide + 50/50 rules so grouped rows
       don't squeeze the visible columns */
    /* Portrait: dot+pencil col becomes a flex column — dot on top, pencil below */
    /* On portrait the dot is now inside the col — remove the right margin it had */
    /* Pencil inside col — centred, no extra margin */
    /* Hide 'Search Status:' label and force single line on portrait mobile */
    /* Hide inline flag on line-1 of name on portrait (it moves to line 3) */
    /* Show 3rd line: flag + city */
  }
  .widget-f05985 .rw-table th[data-col=Attending],
  .widget-f05985 .rw-table td.rw-attending-td {
    display: none !important;
  }
  .widget-f05985 .rw-mobile-wa-sub {
    display: none !important;
  }
  .widget-f05985 .rw-portrait-attending {
    display: flex !important;
    align-items: center;
    margin-top: 4px;
  }
  .widget-f05985 .rw-table-wrap {
    overflow-x: hidden !important;
  }
  .widget-f05985 .rw-table {
    width: 100% !important;
    table-layout: fixed !important;
  }
  .widget-f05985 .rw-table th[data-col="Display Name"],
  .widget-f05985 .rw-table td[data-col="Display Name"] {
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
  }
  .widget-f05985 .rw-table th[data-col="Contact Info"],
  .widget-f05985 .rw-table td.rw-contact-info-cell {
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
  }
  .widget-f05985 .rw-table td[data-col="Display Name"],
  .widget-f05985 .rw-table td.rw-contact-info-cell {
    overflow: hidden;
    word-break: break-word;
  }
  .widget-f05985 .rw-group-subheader th[data-col="Search Status"],
  .widget-f05985 .rw-group-subheader th[data-col=Location],
  .widget-f05985 .rw-group-subheader th[data-col="Marital Status"],
  .widget-f05985 .rw-group-subheader th[data-col=Children],
  .widget-f05985 .rw-group-subheader th[data-col="Recent Mug Shot"],
  .widget-f05985 .rw-group-subheader th[data-col=House],
  .widget-f05985 .rw-group-subheader th[data-col=Found],
  .widget-f05985 .rw-group-subheader th[data-col="On WhatsApp"],
  .widget-f05985 .rw-group-subheader th[data-col=Verified],
  .widget-f05985 .rw-group-subheader th[data-col=Attending] {
    display: none !important;
  }
  .widget-f05985 .rw-group-subheader th[data-col="Display Name"] {
    width: 50% !important;
    max-width: 50% !important;
  }
  .widget-f05985 .rw-group-subheader th[data-col="Contact Info"] {
    width: 50% !important;
    max-width: 50% !important;
  }
  .widget-f05985 .rw-name-dot-pencil-col {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    gap: 4px;
    margin-left: 4px;
    margin-right: 6px;
    align-self: flex-start;
    padding-top: 2px;
  }
  .widget-f05985 .rw-name-dot-pencil-col .rw-name-stage-dot {
    margin: 0 !important;
    align-self: center;
  }
  .widget-f05985 .rw-name-dot-pencil-col .rw-pencil-btn {
    margin: 0 !important;
    padding: 1px;
  }
  .widget-f05985 .rw-ssk-label {
    display: none !important;
  }
  .widget-f05985 .rw-search-status-key {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .widget-f05985 .rw-ssk-keys {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .widget-f05985 .rw-name-flag-inline {
    display: none !important;
  }
  .widget-f05985 .rw-name-loc-sub {
    display: flex !important;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.72rem !important;
    color: var(--w-text-muted) !important;
    line-height: 1.2;
  }
  .widget-f05985 .rw-name-loc-sub .rw-name-flag {
    height: 10px;
    width: auto;
    flex-shrink: 0;
  }
}
.widget-f05985 .rw-revealed-link {
  color: var(--w-brand) !important;
  text-decoration: none;
  font-size: 0.85rem !important;
  font-weight: var(--mfw-font-weight-body, normal);
  word-break: break-all;
}
.widget-f05985 .rw-revealed-link:hover {
  text-decoration: underline;
}
@media (max-width: 767px) {
  .widget-f05985 {
    /* Search bar — compact row layout on mobile */
    /* Compact filters */
    /* Lock filter panel flush against key and table — no gap */
    /* Key sits flush against filter panel and table wrap;
       extra padding gives it breathing room instead of margin */
    /* Table wrap also flush against key */
    /* Slightly more padding on header cells to compensate */
    /* Hide the column sort hint on mobile */
    /* Hide Search Status column entirely on mobile — stage dot shown inside Name cell instead */
    /* Show the stage dot inside the Name cell on mobile —
       dot sits as the first flex child, name+house stack to its right */
    /* On landscape mobile the dot+pencil col is also display:contents
       so dot comes first, nameTextWrap second, pencil last — same flex row */
    /* Name cell on mobile: dot | [name / house stacked] | pencil */
    /* Name+house stack: no top margin, lines sit flush */
    /* Hide Location, Marital Status, Children, Photo, House, Found, On WhatsApp, On Website columns on mobile */
    /* Hide the Edit column header and cells — pencil icon used instead */
    /* Name cell pencil icon */
    /* Sub-line under Name (house) — already always-visible via .rw-name-house-sub;
    legacy mobile-only rule kept for backward compat */
    /* Mobile sub-line under Attending (WhatsApp) */
    /* Collapse table min-width on mobile so it fits portrait screens without horizontal scroll */
    /* Slightly shorter scroll area on mobile */
    /* Show pencil icon on mobile */
  }
  .widget-f05985 .rw-title {
    font-size: 1.2rem !important;
  }
  .widget-f05985 .rw-controls {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 2px;
    margin-bottom: 6px;
  }
  .widget-f05985 .rw-search-wrap {
    flex: 0 0 65%;
    max-width: 65%;
    position: relative;
    display: flex;
    align-items: center;
  }
  .widget-f05985 .rw-meta {
    flex: 1 1 auto;
    white-space: normal;
    font-size: 0.78rem !important;
    text-align: right;
  }
  .widget-f05985 .rw-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
  }
  .widget-f05985 .rw-search {
    padding: 8px 10px 8px 32px !important;
    font-size: 0.85rem !important;
    height: 36px;
    box-sizing: border-box !important;
  }
  .widget-f05985 .rw-filters {
    gap: 6px;
    margin-bottom: 10px;
  }
  .widget-f05985 .rw-filter-panel {
    margin-bottom: 0 !important;
  }
  .widget-f05985 .rw-search-status-key {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 7px 12px;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: none !important;
  }
  .widget-f05985 .rw-table-wrap {
    margin-top: 0 !important;
  }
  .widget-f05985 .rw-header-row th {
    padding: 10px 8px;
    font-size: 0.72rem !important;
  }
  .widget-f05985 .rw-filter-dropdowns {
    gap: 6px;
  }
  .widget-f05985 .rw-filter-select,
  .widget-f05985 .rw-filter-text {
    height: 34px;
    font-size: 0.78rem !important;
    padding: 0 6px;
  }
  .widget-f05985 .rw-filter-pills {
    gap: 6px;
  }
  .widget-f05985 .rw-filter-group {
    padding: 4px 8px;
  }
  .widget-f05985 .rw-filter-label {
    font-size: 0.68rem !important;
  }
  .widget-f05985 .rw-pill {
    padding: 3px 7px;
    font-size: 0.85rem !important;
  }
  .widget-f05985 .rw-sort-hint {
    display: none !important;
  }
  .widget-f05985 .rw-table th[data-col="Search Status"],
  .widget-f05985 .rw-table td.rw-search-status-td {
    display: none !important;
  }
  .widget-f05985 .rw-name-stage-dot {
    display: inline-flex !important;
    flex-shrink: 0;
    align-self: center;
    margin: 0 6px 0 0;
    position: static;
    top: auto;
  }
  .widget-f05985 .rw-name-dot-pencil-col {
    display: contents;
  }
  .widget-f05985 .rw-name-cell {
    display: flex;
    align-items: center;
    gap: 0;
  }
  .widget-f05985 .rw-name-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
  }
  .widget-f05985 .rw-name-primary {
    line-height: 1.2;
  }
  .widget-f05985 .rw-name-house-sub {
    margin-top: 1px;
  }
  .widget-f05985 .rw-table th[data-col=Location],
  .widget-f05985 .rw-table td.rw-location-cell,
  .widget-f05985 .rw-table th[data-col="Marital Status"],
  .widget-f05985 .rw-table td.rw-marital-cell,
  .widget-f05985 .rw-table th[data-col=Children],
  .widget-f05985 .rw-table td.rw-children-cell,
  .widget-f05985 .rw-table th[data-col="Recent Mug Shot"],
  .widget-f05985 .rw-table td.rw-mugshot-td,
  .widget-f05985 .rw-table th[data-col=House],
  .widget-f05985 .rw-table td.rw-house-td,
  .widget-f05985 .rw-table th[data-col=Found],
  .widget-f05985 .rw-table td.rw-found-td,
  .widget-f05985 .rw-table th[data-col="On WhatsApp"],
  .widget-f05985 .rw-table td.rw-onwa-td,
  .widget-f05985 .rw-table th[data-col=Verified],
  .widget-f05985 .rw-table td.rw-has-profile-td,
  .widget-f05985 .rw-table td[data-col=Verified] {
    display: none !important;
  }
  .widget-f05985 .rw-edit-th,
  .widget-f05985 .rw-edit-cell {
    display: none !important;
  }
  .widget-f05985 .rw-name-cell {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }
  .widget-f05985 .rw-mobile-house-sub {
    display: block;
    font-size: 0.72rem !important;
    color: var(--w-text-muted) !important;
    margin-top: 2px;
    line-height: 1.2;
  }
  .widget-f05985 .rw-mobile-wa-sub {
    display: block;
    font-size: 0.72rem !important;
    color: var(--w-text-muted) !important;
    margin-top: 2px;
    line-height: 1.2;
  }
  .widget-f05985 .rw-pencil-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #94a3b8;
    opacity: 0.7;
    transition: color 0.15s, opacity 0.15s;
    margin-top: 1px;
  }
  .widget-f05985 .rw-pencil-btn:hover {
    color: var(--w-brand) !important;
    opacity: 1;
  }
  .widget-f05985 .rw-table {
    min-width: 0 !important;
  }
  .widget-f05985 .rw-table-wrap {
    max-height: 420px;
  }
  .widget-f05985 .rw-tbody td {
    padding: 7px 8px;
    font-size: 0.8rem !important;
  }
  .widget-f05985 .rw-mobile-only {
    display: inline-flex !important;
  }
  .widget-f05985 .rw-pencil-btn {
    display: inline-flex !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .widget-f05985 .rw-table {
    font-size: 0.85rem !important;
  }
}

@charset "UTF-8";
/* ── Spec modal overlay — unscoped so it works when moved to document.body ── */
/* Monitor mode placeholder — always inside .mf-theme-cc wrapper */
.monitor-mode-container {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

.mf-theme-cc__spec-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 18, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.mf-theme-cc__spec-modal {
  background: #f0f2f7;
  border-radius: 16px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.28);
  width: 100%;
  max-width: 980px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mf-theme-cc__spec-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: #fff;
  border-bottom: 2px solid #dde0ec;
  flex-shrink: 0;
}

.mf-theme-cc__spec-modal-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: #2e3a8c;
  letter-spacing: -0.01em;
}

.mf-theme-cc__spec-modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #8a91a8;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.mf-theme-cc__spec-modal-close:hover {
  color: #1a1f2e;
  background: #eef0f8;
}

.mf-theme-cc__spec-modal-body {
  overflow-y: auto;
  padding: 24px;
  flex: 1;
}

.widget-7430a6 {
  /* ── Spec modal FAB button ────────────────────────────────────────────── */
  /* ── Spec content (inside modal) ──────────────────────────────────────── */
  /* Governing article */
  /* Layer tags on section headings */
  /* Control cards — §2 */
  /* Technical design decisions — §4 */
  /* Preamble sections */
  /* Critical mandate section */
  /* Cross-reference placeholder sections */
  /* TOC preamble items */
  /* ── Theme editor (hidden) ───────────────────────────────────────────── */
  /* Editor content carries the padding so monitor mode is unaffected */
  /* ── Monitor Mode Preview Styles ────────────────────────────────────── */
  /* Token map table — displays token name, CSS var, computed value */
  /* Swatch strip — horizontal color preview row */
  /* Status band — colored preview bar with text */
  /* Badge preview — small label styles for status badges */
  /* ── End Monitor Mode Preview Styles ────────────────────────────────── */
  /* ── Checkpoint 3: Section layout ───────────────────────────────────── */
  /* ── CP-4e: CRUD toolbar — sits between tab bar and list pane ─────────── */
  /* ── CP-4b: Theme list rows ──────────────────────────────────────────── */
  /* ── Colour tab: palette swatch strip ──────────────────────────────── */
  /* Slightly more padding for font rows that include a specimen card */
  /* Font meta: "H Playfair Display · B Source Sans 3" */
  /* CP-4c: row-level inline error message */
  /* CP-4d: edit form */
  /* ── Palette grid ────────────────────────────────────────────────────── */
  /* ── Preset rows (surface + motion) ─────────────────────────────────── */
  /* ── Platform reference panel ────────────────────────────────────────── */
  /* ── Platform reference guide blurb ─────────────────────────────────── */
  /* ── Palette Matrix — Harmony Tally Summary ──────────────────────── */
  /* Tally cells inherit the badge colour palette per harmony type */
  /* ── CP-A: Palette view switcher toolbar ─────────────────────────────── */
  /* ── Element Table view — 3-column grid layout ──────────────────────────── */
  /* Each palette = one full-width block with a heading row (name + FP swatches)
     and a 3-column section grid below. */
  /* One block per palette */
  /* Palette heading row: name left, fingerprint swatches right */
  /* Fingerprint swatch strip — 7 equal-width colour blocks */
  /* 3-column section grid */
  /* Section header inside a column */
  /* Per-section tints */
  /* An element row inside a section column */
  /* Colour swatch block — left side of each row */
  /* Text details — right side of each row */
  /* Planned badge */
  /* ── Colour tab: Fingerprint Card Grid ──────────────────────────────── */
  /* Swatch strip: flexible row of colour blocks */
  /* Action row */
  /* ── Colour Edit Form: two sub-tab panels ───────────────────────────── */
  /* Sample panel overrides — ensure proper display for each type */
  /* ── Stub placeholder — shown while a view is not yet implemented */
  /* ── CP-D: Fingerprint Cards view ─────────────────────────────────────── */
  /* Card header: name + badge cluster */
  /* Harmony badge — same colour palette as Full Matrix but compact */
  /* Tier badge: T (tweak) / O (overhaul) / D (diagnostic) */
  /* Swatch strip — 6-7 equal-width cells filling the card width */
  /* Optional 7th swatch (Surface-Subtle) — slightly narrower default flex */
  /* Relationship line — badges for derived tokens */
  /* Group header row — spans multiple columns */
  /* Role labels — replace hex when a cell matches a brand colour */
  /* Tertiary-duplicate cell — muted when tertiary ≈ primary or secondary */
  /* Single-column brand group headers (Primary / Secondary / Tertiary) */
  /* rowspan=2 so they span both header rows; add distinct left border */
  /* Theory category header — spans Harmony + Tier + AA (3 cols), follows sticky Palette column */
  /* Harmony sub-header (row 2 — below Theory category header) */
  /* Tier sub-header (row 2 — below Theory category header) */
  /* AA sub-header (row 2 — below Theory category header) */
  /* Harmony cell — was formerly sticky, now scrolls with the table body */
  /* Harmony cell — neutral background, centres the badge (legacy / non-first) */
  /* Prescriptive harmony badge — italic + slightly muted to signal "designed intent" */
  /* Base badge style */
  /* Per-harmony-type badge colours */
  /* Spectrum group separator row */
  /* ── Tier column ────────────────────────────────────────────────────── */
  /* Match-percentage indicator — now a dedicated column */
  /* Quality column — composite health score traffic-light */
  /* Match-percentage badge shown next to Tweak tier badge (legacy — kept for backwards compat) */
  /* Health score traffic light — shown beneath tier badge + match % */
  /* ── Contrast-ratio column ─────────────────────────────────────── */
  /* ── Duda platform column groups ───────────────────────────────────────── */
  /* Amber-tinted group headers distinguish the Duda "platform" zone from the  */
  /* design-system token zone to the left.                                    */
  /* Duda col-th: narrower fixed width, text wraps */
  /* Duda var name label — shown over the swatch */
  /* Duda Classes cells — swatch BG, single-line matrix ref text */
  /* Duda length cell — --btn-border-radius (no swatch) */
}
.widget-7430a6 .mf-theme-cc__spec-fab {
  display: block;
  margin: 8px 0 0 auto;
  padding: 5px 14px;
  background: transparent;
  border: 1.5px solid #b0b8d8;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6a718e;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  letter-spacing: 0.02em;
}
.widget-7430a6 .mf-theme-cc__spec-fab:hover {
  border-color: #2e3a8c;
  color: #2e3a8c;
  background: #f5f7ff;
}
.widget-7430a6 .mf-spec {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #1a1a2e;
  background: transparent;
  max-width: 100%;
}
.widget-7430a6 .mf-spec__header {
  border-bottom: 2px solid #1a1a2e;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.widget-7430a6 .mf-spec__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.widget-7430a6 .mf-spec__meta {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  font-family: ui-monospace, monospace;
}
.widget-7430a6 .mf-spec__toc {
  background: #fff;
  border: 1px solid #dde1ea;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 20px;
}
.widget-7430a6 .mf-spec__toc-title {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 8px;
}
.widget-7430a6 .mf-spec__toc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: #444;
  font-family: ui-monospace, monospace;
}
.widget-7430a6 .mf-spec__section {
  background: #fff;
  border: 1px solid #dde1ea;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}
.widget-7430a6 .mf-spec__section-heading {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a2e;
  border-bottom: 1px solid #eaecf2;
  padding-bottom: 8px;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.widget-7430a6 .mf-spec__section-sub {
  font-size: 11px;
  font-weight: 500;
  color: #888;
}
.widget-7430a6 .mf-spec__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  margin-bottom: 6px;
}
.widget-7430a6 .mf-spec__p {
  margin: 0 0 10px;
  color: #333;
}
.widget-7430a6 .mf-spec__p:last-child {
  margin-bottom: 0;
}
.widget-7430a6 .mf-spec__list {
  margin: 0 0 10px 0;
  padding-left: 18px;
  color: #333;
}
.widget-7430a6 .mf-spec__list li {
  margin-bottom: 4px;
}
.widget-7430a6 .mf-spec__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.widget-7430a6 .mf-spec__pre {
  background: #f1f3f8;
  border: 1px solid #dde1ea;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.7;
  color: #1a1a2e;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}
.widget-7430a6 .mf-spec__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.widget-7430a6 .mf-spec__table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  padding: 6px 10px;
  border-bottom: 2px solid #eaecf2;
  background: #f8f9fc;
}
.widget-7430a6 .mf-spec__table td {
  padding: 7px 10px;
  border-bottom: 1px solid #eaecf2;
  vertical-align: top;
  color: #333;
  line-height: 1.5;
}
.widget-7430a6 .mf-spec__table tr:last-child td {
  border-bottom: none;
}
.widget-7430a6 .mf-spec__palette-table td:first-child {
  white-space: nowrap;
}
.widget-7430a6 .mf-spec__palette-pair td {
  background: rgba(255, 165, 0, 0.06);
}
.widget-7430a6 .mf-spec__layer-block {
  border-radius: 6px;
  border-left: 4px solid #ccc;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #fafbfd;
}
.widget-7430a6 .mf-spec__layer-block--1 {
  border-left-color: #6366f1;
}
.widget-7430a6 .mf-spec__layer-block--2 {
  border-left-color: #0ea5e9;
}
.widget-7430a6 .mf-spec__layer-block--3 {
  border-left-color: #10b981;
}
.widget-7430a6 .mf-spec__layer-block--4 {
  border-left-color: #f59e0b;
}
.widget-7430a6 .mf-spec__layer-title {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 8px;
  color: #1a1a2e;
}
.widget-7430a6 .mf-spec__notice {
  background: #fffbea;
  border: 1px solid #fde68a;
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 12px;
  color: #78350f;
  line-height: 1.5;
}
.widget-7430a6 .mf-spec__status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #555;
  flex-wrap: wrap;
}
.widget-7430a6 .mf-spec__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.widget-7430a6 .mf-spec__badge--live {
  background: #dcfce7;
  color: #166534;
}
.widget-7430a6 .mf-spec__badge--planned {
  background: #fef3c7;
  color: #92400e;
}
.widget-7430a6 .mf-spec__badge--required {
  background: #ede9fe;
  color: #4c1d95;
}
.widget-7430a6 .mf-spec__badge--optional {
  background: #e0f2fe;
  color: #075985;
}
.widget-7430a6 .mf-spec__section--governing {
  background: #f0f4ff;
  border-color: #c7d2fe;
}
.widget-7430a6 .mf-spec__hierarchy {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 12px 0;
}
.widget-7430a6 .mf-spec__hierarchy-layer {
  border-radius: 6px;
  padding: 10px 14px;
  border-left: 5px solid #ccc;
}
.widget-7430a6 .mf-spec__hierarchy-layer--1 {
  background: #fef9ec;
  border-left-color: #f59e0b;
}
.widget-7430a6 .mf-spec__hierarchy-layer--2 {
  background: #f0fdf4;
  border-left-color: #10b981;
}
.widget-7430a6 .mf-spec__hierarchy-layer--3 {
  background: #eff6ff;
  border-left-color: #3b82f6;
}
.widget-7430a6 .mf-spec__hierarchy-layer--4 {
  background: #fdf4ff;
  border-left-color: #a855f7;
}
.widget-7430a6 .mf-spec__hierarchy-label {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 6px;
  color: #1a1a2e;
}
.widget-7430a6 .mf-spec__hierarchy-sections {
  font-size: 11px;
  color: #888;
  font-family: ui-monospace, monospace;
  margin-top: 6px;
}
.widget-7430a6 .mf-spec__hierarchy-arrow {
  text-align: center;
  font-size: 11px;
  color: #aaa;
  padding: 4px 0;
  font-family: ui-monospace, monospace;
}
.widget-7430a6 .mf-spec__delegation-box {
  background: #1a1a2e;
  color: #e8eaf2;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 14px;
}
.widget-7430a6 .mf-spec__delegation-title {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a5b4fc;
}
.widget-7430a6 .mf-spec__delegation-box .mf-spec__p {
  color: #cbd5e1;
}
.widget-7430a6 .mf-spec__delegation-box .mf-spec__list {
  color: #cbd5e1;
}
.widget-7430a6 .mf-spec__delegation-box .mf-spec__list li:last-child {
  color: #fde68a;
  font-weight: 600;
}
.widget-7430a6 .mf-spec__layer-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-right: 4px;
  vertical-align: middle;
}
.widget-7430a6 .mf-spec__layer-tag--1 {
  background: #fef3c7;
  color: #92400e;
}
.widget-7430a6 .mf-spec__layer-tag--2 {
  background: #dcfce7;
  color: #166534;
}
.widget-7430a6 .mf-spec__layer-tag--3 {
  background: #dbeafe;
  color: #1e40af;
}
.widget-7430a6 .mf-spec__layer-tag--4 {
  background: #f3e8ff;
  color: #6b21a8;
}
.widget-7430a6 .mf-spec__control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.widget-7430a6 .mf-spec__control-card {
  border: 1px solid #dde1ea;
  border-radius: 8px;
  padding: 12px;
  background: #fafbfd;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.widget-7430a6 .mf-spec__control-number {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #1a1a2e;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.widget-7430a6 .mf-spec__control-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color: #1a1a2e;
}
.widget-7430a6 .mf-spec__control-example {
  font-size: 11px;
  color: #666;
  font-style: italic;
  margin-top: 6px;
}
.widget-7430a6 .mf-spec__design-decision {
  border: 1px solid #dde1ea;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fafbfd;
}
.widget-7430a6 .mf-spec__design-decision-title {
  font-weight: 700;
  font-size: 12px;
  color: #1a1a2e;
  margin-bottom: 4px;
}
.widget-7430a6 .mf-spec__design-decision-trace {
  font-size: 11px;
  color: #10b981;
  font-style: italic;
  margin-bottom: 8px;
  font-family: ui-monospace, monospace;
}
@media (max-width: 640px) {
  .widget-7430a6 .mf-spec__control-grid {
    grid-template-columns: 1fr;
  }
}
.widget-7430a6 .mf-spec code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background: #f1f3f8;
  border: 1px solid #dde1ea;
  border-radius: 3px;
  padding: 1px 5px;
  color: #1a1a2e;
}
@media (max-width: 640px) {
  .widget-7430a6 .mf-spec__cols {
    grid-template-columns: 1fr;
  }
  .widget-7430a6 .mf-spec__palette-table td:first-child {
    white-space: normal;
  }
}
.widget-7430a6 .mf-spec__section--preamble {
  background: #f0f4ff;
  border-color: #a5b4fc;
  border-width: 2px;
}
.widget-7430a6 .mf-spec__preamble-banner {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #6366f1;
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.widget-7430a6 .mf-spec__section--mandate {
  background: #fff8f8;
  border-color: #dc2626;
  border-width: 2px;
}
.widget-7430a6 .mf-spec__preamble-banner--mandate {
  background: #dc2626;
}
.widget-7430a6 .mf-spec__mandate-alert {
  background: #dc2626;
  color: #fff;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 14px;
}
.widget-7430a6 .mf-spec__layer-tag--mandate {
  background: #fee2e2;
  color: #991b1b;
}
.widget-7430a6 .mf-spec__mandate-rule-block {
  border: 1px solid #fca5a5;
  border-left: 5px solid #dc2626;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}
.widget-7430a6 .mf-spec__mandate-rule-heading {
  font-size: 12px;
  font-weight: 800;
  color: #991b1b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.widget-7430a6 .mf-spec__mandate-halt {
  background: #1a1a2e;
  color: #fca5a5;
  border-radius: 5px;
  padding: 7px 12px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  margin-top: 8px;
  line-height: 1.5;
}
.widget-7430a6 .mf-spec__mandate-summary {
  background: #1a1a2e;
  color: #e8eaf2;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 12px;
}
.widget-7430a6 .mf-spec__mandate-summary-title {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #fca5a5;
  margin-bottom: 8px;
}
.widget-7430a6 .mf-spec__mandate-summary .mf-spec__p {
  color: #cbd5e1;
  font-size: 12px;
}
.widget-7430a6 .mf-spec__section--xref {
  background: #f8f9fc;
  border-color: #c7d2fe;
  border-style: dashed;
}
.widget-7430a6 .mf-spec__xref-notice {
  font-size: 12px;
  color: #555;
  font-style: italic;
  line-height: 1.6;
  padding: 4px 0;
}
.widget-7430a6 .mf-spec__xref-notice--mandate {
  color: #991b1b;
  font-weight: 600;
}
.widget-7430a6 .mf-spec__toc-preamble {
  color: #6366f1;
  font-weight: 700;
}
.widget-7430a6 .mf-spec__toc-note {
  font-size: 11px;
  color: #888;
  font-style: italic;
  margin-top: 8px;
  border-top: 1px solid #eaecf2;
  padding-top: 8px;
}
.widget-7430a6 .mf-theme-cc {
  box-sizing: border-box;
  width: 100%;
  font-family: inherit;
  color: var(--mfw-text, var(--mf-text, #111827));
  background: var(--mfw-surface, var(--mf-surface, #ffffff));
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.16)));
  border-radius: var(--mfw-radius-card, var(--mf-radius, 12px));
  padding: 0;
}
.widget-7430a6 .mf-theme-cc [data-mf-theme-editor] {
  padding: 16px;
}
.widget-7430a6 .mf-theme-cc * {
  box-sizing: border-box;
}
.widget-7430a6 .mf-theme-cc__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.widget-7430a6 .mf-theme-cc__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.widget-7430a6 .mf-theme-cc__base-font-size-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--mfw-border, rgba(17, 24, 39, 0.18));
  border-radius: 5px;
  background: var(--mfw-surface-raised, #f9fafb);
  margin-right: 4px;
}
.widget-7430a6 .mf-theme-cc__base-font-size-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--mfw-text-muted, #6b7280);
  white-space: nowrap;
}
.widget-7430a6 .mf-theme-cc__base-font-size-wrap select {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 6px;
  border: 1px solid var(--mfw-border, rgba(17, 24, 39, 0.16));
  border-radius: 4px;
  background: var(--mfw-surface-raised, #ffffff);
  color: var(--mfw-text, #111827);
  cursor: pointer;
  outline: none;
}
.widget-7430a6 .mf-theme-cc__base-font-size-wrap select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.widget-7430a6 .mf-theme-cc__title--main {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}
.widget-7430a6 .mf-theme-cc__subtitle {
  opacity: 0.85;
  margin-top: 4px;
}
.widget-7430a6 .mf-theme-cc__badge {
  display: none; /* Badge suppressed — element retained for SFL compliance */
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.16)));
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.03);
}
.widget-7430a6 .mf-theme-cc__dev-banner {
  margin: 0 0 12px;
  border: 1px solid rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.12);
  border-radius: calc(var(--mfw-radius-card, var(--mf-radius, 12px)) - 2px);
  overflow: hidden;
}
.widget-7430a6 .mf-theme-cc__dev-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
}
.widget-7430a6 .mf-theme-cc__dev-banner-title {
  font-weight: 800;
}
.widget-7430a6 .mf-theme-cc__dev-banner-body {
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.widget-7430a6 .mf-theme-cc__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  background: rgba(255, 255, 255, 0.6);
}
.widget-7430a6 .mf-theme-cc__pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #16a34a;
}
.widget-7430a6 .mf-theme-cc__pill-dot--bad {
  background: #dc2626;
}
.widget-7430a6 .mf-theme-cc__token-map-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 12px;
}
.widget-7430a6 .mf-theme-cc__token-map-table th {
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(17, 24, 39, 0.7);
  padding: 8px 10px;
  border-bottom: 2px solid var(--mfw-divider, var(--mf-divider, rgba(17, 24, 39, 0.14)));
  background: rgba(0, 0, 0, 0.025);
}
.widget-7430a6 .mf-theme-cc__token-map-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--mfw-divider, var(--mf-divider, rgba(17, 24, 39, 0.1)));
  vertical-align: middle;
  color: var(--mfw-text, var(--mf-text, #111827));
}
.widget-7430a6 .mf-theme-cc__token-map-table tr:last-child td {
  border-bottom: none;
}
.widget-7430a6 .mf-theme-cc__token-map-table .mf-theme-cc__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}
.widget-7430a6 .mf-theme-cc__swatch-strip {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.widget-7430a6 .mf-theme-cc__swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.widget-7430a6 .mf-theme-cc__swatch-box {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.14)));
  background: var(--swatch-color, #ffffff);
}
.widget-7430a6 .mf-theme-cc__swatch-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(17, 24, 39, 0.7);
  text-align: center;
}
.widget-7430a6 .mf-theme-cc__status-band {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: calc(var(--mfw-radius-card, var(--mf-radius, 12px)) - 2px);
  background: var(--band-bg, rgba(0, 0, 0, 0.05));
  color: var(--band-text, var(--mfw-text, var(--mf-text, #111827)));
  font-weight: 600;
  margin-bottom: 12px;
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.14)));
}
.widget-7430a6 .mf-theme-cc__badge-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--badge-bg, rgba(0, 0, 0, 0.08));
  color: var(--badge-text, var(--mfw-text, var(--mf-text, #111827)));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.14)));
}
.widget-7430a6 .mf-theme-cc__badge-preview-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.widget-7430a6 .mf-theme-cc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.widget-7430a6 .mf-theme-cc__category {
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.16)));
  border-radius: calc(var(--mfw-radius-card, var(--mf-radius, 12px)) - 2px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.4);
}
.widget-7430a6 .mf-theme-cc__category-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.16)));
}
.widget-7430a6 .mf-theme-cc__category-title {
  font-weight: 700;
}
.widget-7430a6 .mf-theme-cc__rows {
  display: grid;
  grid-template-columns: 1fr;
}
.widget-7430a6 .mf-theme-cc__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--mfw-divider, var(--mf-divider, rgba(17, 24, 39, 0.1)));
  align-items: center;
}
.widget-7430a6 .mf-theme-cc__row:last-child {
  border-bottom: none;
}
.widget-7430a6 .mf-theme-cc__token-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.widget-7430a6 .mf-theme-cc__token-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-7430a6 .mf-theme-cc__token-var {
  opacity: 0.8;
}
.widget-7430a6 .mf-theme-cc__token-control {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.widget-7430a6 .mf-theme-cc__input {
  width: 220px;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--mfw-input-border, var(--mf-input-border, rgba(17, 24, 39, 0.18)));
  background: var(--mfw-input-bg, var(--mf-input-bg, #ffffff));
  color: var(--mfw-input-text, var(--mf-input-text, #111827));
}
.widget-7430a6 .mf-theme-cc__color {
  width: 42px;
  height: 34px;
  border: 1px solid var(--mfw-input-border, var(--mf-input-border, rgba(17, 24, 39, 0.18)));
  border-radius: 10px;
  padding: 0;
  background: transparent;
}
.widget-7430a6 .mf-theme-cc__swatch {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.18)));
  background: var(--mfw-surface, var(--mf-surface, #ffffff));
}
.widget-7430a6 .mf-theme-cc__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}
.widget-7430a6 .mf-theme-cc__status {
  padding: 12px;
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.16)));
  border-radius: calc(var(--mfw-radius-card, var(--mf-radius, 12px)) - 2px);
  background: rgba(0, 0, 0, 0.02);
}
.widget-7430a6 .mf-theme-cc__status-title {
  margin-bottom: 8px;
}
.widget-7430a6 .mf-theme-cc__loading {
  padding: 10px 0;
  opacity: 0.85;
}
@media (max-width: 767px) {
  .widget-7430a6 .mf-theme-cc {
    padding: 0;
  }
  .widget-7430a6 .mf-theme-cc [data-mf-theme-editor] {
    padding: 14px;
  }
  .widget-7430a6 .mf-theme-cc__row {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .widget-7430a6 .mf-theme-cc__token-control {
    justify-content: flex-start;
  }
}
.widget-7430a6 .mf-crud {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.16)));
  border-radius: calc(var(--mfw-radius-card, var(--mf-radius, 12px)) - 2px);
  overflow: hidden;
  background: var(--mfw-surface, var(--mf-surface, #ffffff));
}
.widget-7430a6 .mf-crud__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.16)));
  padding: 6px 6px 0;
}
.widget-7430a6 .mf-crud__tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mfw-text-muted, var(--mf-text-muted, #6b7280));
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  line-height: 1.3;
  margin-bottom: -1px;
}
.widget-7430a6 .mf-crud__tab:hover {
  color: var(--mfw-text, var(--mf-text, #111827));
  background: rgba(0, 0, 0, 0.04);
}
.widget-7430a6 .mf-crud__tab--active {
  color: var(--mfw-brand, var(--mf-text, #111827));
  border-bottom-color: var(--mfw-brand, var(--mf-text, #111827));
  background: var(--mfw-surface, var(--mf-surface, #ffffff));
}
.widget-7430a6 .mf-crud__tab--active:hover {
  background: var(--mfw-surface, var(--mf-surface, #ffffff));
}
.widget-7430a6 .mf-crud__list {
  padding: 16px;
  min-height: 120px;
}
.widget-7430a6 .mf-crud__empty {
  font-size: 13px;
  color: var(--mfw-text-muted, var(--mf-text-muted, #6b7280));
  font-style: italic;
  margin: 0;
  padding: 24px 0;
  text-align: center;
}
.widget-7430a6 .mf-crud__form {
  padding: 16px;
  border-top: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.16)));
  background: rgba(0, 0, 0, 0.015);
}
@media (max-width: 540px) {
  .widget-7430a6 .mf-crud__tab {
    padding: 7px 10px;
    font-size: 12px;
  }
}
.widget-7430a6 .mf-crud__toolbar {
  display: none;
}
.widget-7430a6 .mf-crud__btn--sync {
  background: transparent;
  color: var(--mfw-text-muted, #6b7280);
  border-color: var(--mfw-border, rgba(17, 24, 39, 0.2));
  padding: 6px 12px;
  font-size: 12px;
}
.widget-7430a6 .mf-crud__btn--sync:hover:not(:disabled) {
  background: var(--mfw-surface-raised, #f5f5f5);
  color: var(--mfw-text, #111827);
  border-color: var(--mfw-border, rgba(17, 24, 39, 0.3));
}
.widget-7430a6 .mf-crud__btn--sync:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.widget-7430a6 .mf-crud__btn--update-defs {
  background: transparent;
  color: var(--mfw-text-muted, #6b7280);
  border-color: var(--mfw-border, rgba(17, 24, 39, 0.2));
  padding: 6px 12px;
  font-size: 12px;
}
.widget-7430a6 .mf-crud__btn--update-defs:hover:not(:disabled) {
  background: var(--mfw-surface-raised, #f5f5f5);
  color: var(--mfw-text, #111827);
  border-color: var(--mfw-border, rgba(17, 24, 39, 0.3));
}
.widget-7430a6 .mf-crud__btn--update-defs:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.widget-7430a6 .mf-crud__loading {
  font-size: 13px;
  color: var(--mfw-text-muted, var(--mf-text-muted, #6b7280));
  font-style: italic;
  margin: 0;
  padding: 24px 0;
  text-align: center;
}
.widget-7430a6 .mf-crud__theme-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.widget-7430a6 .mf-crud__theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--mfw-divider, var(--mf-divider, rgba(17, 24, 39, 0.09)));
  background: var(--mfw-surface, var(--mf-surface, #ffffff));
  transition: background 0.12s;
}
.widget-7430a6 .mf-crud__theme-row:last-child {
  border-bottom: none;
}
.widget-7430a6 .mf-crud__theme-row:hover {
  background: var(--mfw-surface-subtle, var(--mf-surface, rgba(0, 0, 0, 0.025)));
}
.widget-7430a6 .mf-crud__theme-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--mfw-text, var(--mf-text, #111827));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex: 1;
  min-width: 0;
}
.widget-7430a6 .mf-crud__theme-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.widget-7430a6 .mf-crud__default-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--mfw-brand, var(--mf-text, #111827));
  color: var(--mfw-brand-text, #ffffff);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.widget-7430a6 .mf-crud__theme-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.widget-7430a6 .mf-crud__btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.16)));
  background: var(--mfw-surface-raised, var(--mf-surface, #f9fafb));
  color: var(--mfw-text, var(--mf-text, #111827));
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
  white-space: nowrap;
  line-height: 1.3;
}
.widget-7430a6 .mf-crud__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.widget-7430a6 .mf-crud__btn:not(:disabled):hover {
  background: var(--mfw-surface-subtle, rgba(0, 0, 0, 0.04));
  border-color: var(--mfw-brand, var(--mf-text, #111827));
}
.widget-7430a6 .mf-crud__btn--delete:not(:disabled) {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.3);
}
.widget-7430a6 .mf-crud__btn--delete:not(:disabled):hover {
  background: rgba(220, 38, 38, 0.06);
  border-color: #dc2626;
}
.widget-7430a6 .mf-crud__swatch-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 8px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  height: 28px;
  width: fit-content;
  max-width: 100%;
}
.widget-7430a6 .mf-crud__swatch-block {
  display: inline-block;
  width: 36px;
  height: 28px;
  flex-shrink: 0;
  transition: transform 0.12s, z-index 0s;
  position: relative;
  cursor: default;
}
.widget-7430a6 .mf-crud__swatch-block:hover {
  transform: scaleY(1.15);
  z-index: 1;
}
.widget-7430a6 .mf-crud__theme-row--with-preview {
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 14px;
}
.widget-7430a6 .mf-crud__theme-row--with-preview .mf-crud__theme-actions {
  align-self: flex-end;
  margin-top: 8px;
}
.widget-7430a6 .mf-crud__font-preview {
  width: 100%;
  background: var(--mfw-surface-subtle, var(--mf-surface, rgba(0, 0, 0, 0.025)));
  border: 1px solid var(--mfw-divider, var(--mf-divider, rgba(17, 24, 39, 0.09)));
  border-radius: 6px;
  margin-top: 12px;
  padding: 14px 16px 12px;
  box-sizing: border-box;
}
.widget-7430a6 .mf-crud__font-preview-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.widget-7430a6 .mf-crud__font-meta-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mfw-text-muted, var(--mf-text-muted, #9ca3af));
  background: var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.12)));
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.5;
}
.widget-7430a6 .mf-crud__font-meta-value {
  font-size: 11px;
  font-weight: 500;
  color: var(--mfw-text-muted, var(--mf-text-muted, #6b7280));
  font-family: system-ui, sans-serif;
}
.widget-7430a6 .mf-crud__font-meta-sep {
  color: var(--mfw-divider, var(--mf-divider, #d1d5db));
  font-size: 12px;
  line-height: 1;
  margin: 0 3px;
}
.widget-7430a6 .mf-crud__font-preview-heading {
  font-size: 1.625rem;
  font-weight: var(--mfw-font-weight-heading, 700);
  line-height: 1.15;
  color: var(--mfw-text, var(--mf-text, #111827));
  margin-bottom: 9px;
  letter-spacing: -0.01em;
}
.widget-7430a6 .mf-crud__font-preview-body {
  font-size: 0.844rem;
  line-height: 1.65;
  color: var(--mfw-text, var(--mf-text, #374151));
  font-style: italic;
  font-weight: var(--mfw-font-weight-body, 400);
  margin-bottom: 8px;
  max-width: 540px;
}
.widget-7430a6 .mf-crud__font-preview-attr {
  font-size: 11px;
  color: var(--mfw-text-muted, var(--mf-text-muted, #9ca3af));
  font-style: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.widget-7430a6 .mf-crud__row-error {
  font-size: 11px;
  color: #dc2626;
  flex: 1;
  min-width: 0;
  padding: 0 8px;
}
.widget-7430a6 .mf-crud__type-preview {
  width: 100%;
  padding: 8px 0 2px;
  box-sizing: border-box;
}
.widget-7430a6 .mf-crud__form-header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.12)));
}
.widget-7430a6 .mf-crud__form-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mfw-text, var(--mf-text, #111827));
}
.widget-7430a6 .mf-crud__form-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.widget-7430a6 .mf-crud__form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mfw-text-muted, var(--mf-text-muted, #6b7280));
  display: block;
  margin-bottom: 4px;
}
.widget-7430a6 .mf-crud__form-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.2)));
  border-radius: 5px;
  background: var(--mfw-input-bg, var(--mf-input-bg, #ffffff));
  color: var(--mfw-input-text, var(--mf-text, #111827));
  outline: none;
  transition: border-color 0.12s;
}
.widget-7430a6 .mf-crud__form-input:focus {
  border-color: var(--mfw-brand, var(--mf-text, #111827));
}
.widget-7430a6 .mf-crud__form-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 12px;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
  line-height: 1.5;
  min-height: calc(37.5em + 16px);
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.2)));
  border-radius: 5px;
  background: var(--mfw-input-bg, var(--mf-input-bg, #f9fafb));
  color: var(--mfw-input-text, var(--mf-text, #111827));
  resize: vertical;
  outline: none;
  transition: border-color 0.12s;
}
.widget-7430a6 .mf-crud__form-textarea:focus {
  border-color: var(--mfw-brand, var(--mf-text, #111827));
}
.widget-7430a6 .mf-crud__form-error {
  font-size: 12px;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 8px;
}
.widget-7430a6 .mf-crud__form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.1)));
}
.widget-7430a6 .mf-crud__btn--cancel {
  background: transparent;
  color: var(--mfw-text-muted, var(--mf-text-muted, #6b7280));
}
.widget-7430a6 .mf-crud__btn--cancel:hover {
  background: rgba(0, 0, 0, 0.04);
}
.widget-7430a6 .mf-crud__btn--save {
  background: var(--mfw-brand, var(--mf-text, #111827));
  color: var(--mfw-brand-text, #ffffff);
  border-color: var(--mfw-brand, var(--mf-text, #111827));
}
.widget-7430a6 .mf-crud__btn--save:hover:not(:disabled) {
  opacity: 0.88;
}
.widget-7430a6 .mf-crud__btn--save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.widget-7430a6 .mf-crud__btn--reset-theme {
  background: transparent;
  color: var(--mfw-status-danger-text, #7f1d1d);
  border-color: var(--mfw-status-danger, #fca5a5);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
}
.widget-7430a6 .mf-crud__btn--reset-theme:hover:not(:disabled) {
  background: var(--mfw-status-danger, #fee2e2);
  color: var(--mfw-status-danger-text, #7f1d1d);
  border-color: var(--mfw-status-danger-text, #991b1b);
}
.widget-7430a6 .mf-crud__btn--reset-theme:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 540px) {
  .widget-7430a6 .mf-crud__theme-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .widget-7430a6 .mf-crud__theme-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
.widget-7430a6 .mf-theme-cc__section {
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.14)));
  border-radius: calc(var(--mfw-radius-card, var(--mf-radius, 12px)) - 2px);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.02);
}
.widget-7430a6 .mf-theme-cc__section--deferred {
  opacity: 0.55;
}
.widget-7430a6 .mf-theme-cc__section--reference {
  background: rgba(0, 0, 0, 0.015);
  border-style: dashed;
}
.widget-7430a6 .mf-theme-cc__section-header {
  margin-bottom: 12px;
}
.widget-7430a6 .mf-theme-cc__section-title {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.widget-7430a6 .mf-theme-cc__section-desc {
  opacity: 0.75;
  font-size: 12px;
}
.widget-7430a6 .mf-theme-cc__control-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--mfw-brand, var(--mf-text, #111827));
  color: var(--mfw-brand-text, #fff);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.widget-7430a6 .mf-theme-cc__control-num--deferred {
  background: rgba(17, 24, 39, 0.2);
  color: rgba(17, 24, 39, 0.5);
}
.widget-7430a6 .mf-theme-cc__deferred-label {
  font-size: 11px;
  font-style: italic;
  opacity: 0.6;
}
.widget-7430a6 .mf-theme-cc__palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.widget-7430a6 .mf-theme-cc__palette-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px;
  border: 2px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.14)));
  border-radius: calc(var(--mfw-radius-card, var(--mf-radius, 10px)) - 2px);
  background: var(--mfw-surface-raised, var(--mf-surface, #fff));
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.widget-7430a6 .mf-theme-cc__palette-card:hover {
  border-color: var(--mfw-brand, var(--mf-text, #111827));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.widget-7430a6 .mf-theme-cc__palette-card--active {
  border-color: var(--mfw-brand, var(--mf-text, #111827));
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.widget-7430a6 .mf-theme-cc__palette-strip {
  display: flex;
  gap: 3px;
  height: 18px;
}
.widget-7430a6 .mf-theme-cc__palette-dot {
  flex: 1;
  border-radius: 3px;
  display: block;
  min-width: 0;
}
.widget-7430a6 .mf-theme-cc__palette-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mfw-text, var(--mf-text, #111827));
  word-break: break-word;
}
.widget-7430a6 .mf-theme-cc__preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.widget-7430a6 .mf-theme-cc__preset-btn {
  padding: 7px 14px;
  border: 2px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.14)));
  border-radius: calc(var(--mfw-radius-card, var(--mf-radius, 10px)) - 2px);
  background: var(--mfw-surface-raised, var(--mf-surface, #fff));
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--mfw-text, var(--mf-text, #111827));
  transition: border-color 0.15s;
}
.widget-7430a6 .mf-theme-cc__preset-btn:hover {
  border-color: var(--mfw-brand, var(--mf-text, #111827));
}
.widget-7430a6 .mf-theme-cc__preset-btn--active {
  border-color: var(--mfw-brand, var(--mf-text, #111827));
  background: var(--mfw-surface-subtle, rgba(0, 0, 0, 0.04));
}
.widget-7430a6 .mf-theme-cc__ref-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.widget-7430a6 .mf-theme-cc__ref-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
}
.widget-7430a6 .mf-theme-cc__ref-swatch {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.14)));
  flex-shrink: 0;
}
.widget-7430a6 .mf-theme-cc__ref-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.widget-7430a6 .mf-theme-cc__ref-value {
  opacity: 0.75;
  font-size: 11px;
}
.widget-7430a6 .mf-theme-cc__ref-copy {
  padding: 4px 10px;
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.14)));
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.04);
  cursor: pointer;
  font-size: 11px;
  color: var(--mfw-text, var(--mf-text, #111827));
  white-space: nowrap;
}
.widget-7430a6 .mf-theme-cc__ref-copy:hover {
  background: rgba(0, 0, 0, 0.08);
}
.widget-7430a6 .mf-theme-cc__ref-guide {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.1)));
  border-radius: 6px;
}
.widget-7430a6 .mf-theme-cc__ref-guide-label {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mfw-text-muted, var(--mf-text-muted, #555));
  margin-bottom: 6px;
}
.widget-7430a6 .mf-theme-cc__ref-guide-list {
  margin: 0;
  padding-left: 16px;
  font-size: 11px;
  color: var(--mfw-text, var(--mf-text, #333));
  line-height: 1.7;
}
.widget-7430a6 .mf-theme-cc__ref-guide-list li {
  margin-bottom: 2px;
}
.widget-7430a6 .mf-palette-tally-wrap {
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.widget-7430a6 .mf-palette-tally {
  border-collapse: collapse;
  font-size: 11px;
  background: rgba(99, 102, 241, 0.05);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.widget-7430a6 .mf-palette-tally__th {
  padding: 6px 14px 5px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #4338ca;
  text-align: center;
  white-space: nowrap;
  background: rgba(99, 102, 241, 0.1);
  border-right: 1px solid rgba(99, 102, 241, 0.15);
  border-bottom: 1px solid rgba(99, 102, 241, 0.15);
}
.widget-7430a6 .mf-palette-tally__th:last-child {
  border-right: none;
}
.widget-7430a6 .mf-palette-tally__td {
  padding: 7px 14px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid rgba(99, 102, 241, 0.1);
  color: #1e1b4b;
}
.widget-7430a6 .mf-palette-tally__td:last-child {
  border-right: none;
}
.widget-7430a6 .mf-palette-tally__td--monochromatic {
  background: #dbeafe;
  color: #1e40af;
}
.widget-7430a6 .mf-palette-tally__td--analogous {
  background: #dcfce7;
  color: #166534;
}
.widget-7430a6 .mf-palette-tally__td--complementary {
  background: #fce7f3;
  color: #9d174d;
}
.widget-7430a6 .mf-palette-tally__td--near-complementary {
  background: #fdf2f8;
  color: #86198f;
}
.widget-7430a6 .mf-palette-tally__td--split-complementary {
  background: #fef3c7;
  color: #92400e;
}
.widget-7430a6 .mf-palette-tally__td--triadic {
  background: #ede9fe;
  color: #5b21b6;
}
.widget-7430a6 .mf-palette-tally__td--neutral {
  background: #f9fafb;
  color: #6b7280;
}
.widget-7430a6 .mf-palette-tally__td--achromatic {
  background: #f3f4f6;
  color: #4b5563;
}
.widget-7430a6 .mf-palette-tally__td--mixed {
  background: #fff7ed;
  color: #9a3412;
}
.widget-7430a6 .mf-palette-view-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.12)));
  background: rgba(0, 0, 0, 0.02);
}
.widget-7430a6 .mf-palette-view-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mfw-text-muted, var(--mf-text-muted, #6b7280));
  white-space: nowrap;
}
.widget-7430a6 .mf-palette-view-select {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.18)));
  border-radius: 5px;
  background: var(--mfw-surface-raised, var(--mf-surface, #f9fafb));
  color: var(--mfw-text, var(--mf-text, #111827));
  cursor: pointer;
  outline: none;
  transition: border-color 0.12s;
  min-width: 160px;
}
.widget-7430a6 .mf-palette-view-select:focus {
  border-color: var(--mfw-brand, var(--mf-text, #111827));
}
.widget-7430a6 .mf-palette-view-content {
  /* No extra padding — each view manages its own spacing */
}
.widget-7430a6 .mf-etg-container {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.widget-7430a6 .mf-etg__palette-block {
  border: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.14)));
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--mfw-surface-raised, var(--mf-surface, #ffffff));
}
.widget-7430a6 .mf-etg__palette-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.035);
  border-bottom: 2px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.16)));
}
.widget-7430a6 .mf-etg__palette-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--mfw-text, var(--mf-text, #111827));
  white-space: nowrap;
  flex-shrink: 0;
}
.widget-7430a6 .mf-etg__fp-strip {
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  height: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13), inset 0 0 0 1px rgba(0, 0, 0, 0.07);
  flex-shrink: 0;
  min-width: 0;
}
.widget-7430a6 .mf-etg__fp-swatch {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 3px;
  transition: flex 0.13s;
  cursor: default;
  min-width: 24px;
}
.widget-7430a6 .mf-etg__fp-swatch:hover {
  flex: 1.6;
  z-index: 1;
}
.widget-7430a6 .mf-etg__fp-swatch-label {
  font-family: system-ui, sans-serif;
  font-size: 6.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.88;
  pointer-events: none;
  display: block;
  max-width: calc(100% - 2px);
  text-align: center;
}
.widget-7430a6 .mf-etg__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: start;
}
.widget-7430a6 .mf-etg__col {
  border-right: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.12)));
  min-width: 0;
}
.widget-7430a6 .mf-etg__col:last-child {
  border-right: none;
}
.widget-7430a6 .mf-etg__section-header {
  padding: 5px 10px 4px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.12)));
  border-top: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.08)));
  color: var(--mfw-text-muted, #6b7280);
}
.widget-7430a6 .mf-etg__section-header--brand-colours {
  background: rgba(59, 130, 246, 0.07);
  color: #1e40af;
  border-top-color: rgba(59, 130, 246, 0.18);
}
.widget-7430a6 .mf-etg__section-header--typography {
  background: rgba(16, 185, 129, 0.06);
  color: #065f46;
  border-top-color: rgba(16, 185, 129, 0.18);
}
.widget-7430a6 .mf-etg__section-header--buttons {
  background: rgba(245, 158, 11, 0.07);
  color: #78350f;
  border-top-color: rgba(245, 158, 11, 0.2);
}
.widget-7430a6 .mf-etg__section-header--page {
  background: rgba(139, 92, 246, 0.07);
  color: #4c1d95;
  border-top-color: rgba(139, 92, 246, 0.18);
}
.widget-7430a6 .mf-etg__section-header--widget-specific {
  background: rgba(239, 68, 68, 0.06);
  color: #7f1d1d;
  border-top-color: rgba(239, 68, 68, 0.18);
}
.widget-7430a6 .mf-etg__row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--mfw-divider, var(--mf-divider, rgba(17, 24, 39, 0.08)));
  min-height: 34px;
}
.widget-7430a6 .mf-etg__row:last-child {
  border-bottom: none;
}
.widget-7430a6 .mf-etg__row-swatch {
  width: 64px;
  flex-shrink: 0;
  align-self: stretch; /* fill full row height */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 3px;
  cursor: default;
}
.widget-7430a6 .mf-etg__row-swatch--empty {
  background: rgba(0, 0, 0, 0.025);
}
.widget-7430a6 .mf-etg__row-swatch-val {
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.88;
  pointer-events: none;
  display: block;
  text-align: center;
  line-height: 1.2;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-7430a6 .mf-etg__row-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3px 8px 3px 6px;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.widget-7430a6 .mf-etg__row-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--mfw-text, var(--mf-text, #111827));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  display: block;
}
.widget-7430a6 .mf-etg__row-token {
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 8.5px;
  color: var(--mfw-text-muted, #6b7280);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.widget-7430a6 .mf-etg__row-duda {
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 8px;
  color: #a05a00;
  background: rgba(180, 110, 0, 0.06);
  border-radius: 2px;
  padding: 0 3px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.5;
}
.widget-7430a6 .mf-etg__row-classes {
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 7.5px;
  color: var(--mfw-text-muted, #6b7280);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.widget-7430a6 .mf-etg__row-classes em {
  font-style: normal;
  color: #9ca3af;
}
.widget-7430a6 .mf-etg__planned-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: system-ui, sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(0, 0, 0, 0.05);
  color: #9ca3af;
  border: 1px dashed #d1d5db;
  vertical-align: middle;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .widget-7430a6 .mf-etg__cols {
    grid-template-columns: 1fr 1fr;
  }
  .widget-7430a6 .mf-etg__col:nth-child(2) {
    border-right: none;
  }
  .widget-7430a6 .mf-etg__col:nth-child(3) {
    grid-column: 1/-1;
    border-top: 1px solid var(--mfw-border, rgba(17, 24, 39, 0.12));
    border-right: none;
  }
}
@media (max-width: 540px) {
  .widget-7430a6 .mf-etg__cols {
    grid-template-columns: 1fr;
  }
  .widget-7430a6 .mf-etg__col {
    border-right: none;
    border-top: 1px solid var(--mfw-border, rgba(17, 24, 39, 0.12));
  }
  .widget-7430a6 .mf-etg__col:first-child {
    border-top: none;
  }
  .widget-7430a6 .mf-etg__fp-strip {
    display: none;
  }
}
.widget-7430a6 .mf-cfp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px;
}
.widget-7430a6 .mf-cfp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1.5px solid var(--mfw-border, rgba(17, 24, 39, 0.14));
  border-radius: 8px;
  padding: 10px 11px 10px;
  background: var(--mfw-surface-raised, var(--mf-surface, #ffffff));
  transition: box-shadow 0.13s, border-color 0.13s;
}
.widget-7430a6 .mf-cfp-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
  border-color: var(--mfw-brand, rgba(17, 24, 39, 0.28));
}
.widget-7430a6 .mf-cfp-card:active {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  transform: translateY(1px);
}
.widget-7430a6 .mf-cfp-card--default {
  border-color: var(--mfw-brand, rgba(17, 24, 39, 0.4));
  box-shadow: 0 0 0 2px rgba(var(--mfw-brand, 17, 24, 39), 0.08);
}
.widget-7430a6 .mf-cfp-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.widget-7430a6 .mf-cfp-card__name {
  font-size: 12px;
  font-weight: 700;
  color: var(--mfw-text, var(--mf-text, #111827));
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.widget-7430a6 .mf-cfp-card__default-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--mfw-brand, #111827);
  color: var(--mfw-brand-text, #ffffff);
  white-space: nowrap;
  flex-shrink: 0;
}
.widget-7430a6 .mf-cfp-card__swatches {
  display: flex;
  height: 36px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13), inset 0 0 0 1px rgba(0, 0, 0, 0.07);
}
.widget-7430a6 .mf-cfp-swatch {
  flex: 1;
  transition: flex 0.12s;
  cursor: default;
  min-width: 0;
}
.widget-7430a6 .mf-cfp-swatch:hover {
  flex: 1.8;
}
.widget-7430a6 .mf-cfp-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.widget-7430a6 .mf-cfp-card__btn {
  padding: 4px 10px;
  font-size: 11px;
}
.widget-7430a6 .mf-cfp-card__err {
  font-size: 10px;
  color: #dc2626;
  flex: 1;
  min-width: 0;
}
@media (max-width: 600px) {
  .widget-7430a6 .mf-cfp-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    padding: 10px;
  }
}
.widget-7430a6 .mf-cef__subtabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--mfw-border, rgba(17, 24, 39, 0.14));
  background: rgba(0, 0, 0, 0.02);
  padding: 0 12px;
  margin-bottom: 0;
}
.widget-7430a6 .mf-cef__subtab {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mfw-text-muted, #6b7280);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.13s, border-color 0.13s;
  white-space: nowrap;
}
.widget-7430a6 .mf-cef__subtab:hover {
  color: var(--mfw-text, #111827);
}
.widget-7430a6 .mf-cef__subtab--active {
  color: var(--mfw-brand, #111827);
  border-bottom-color: var(--mfw-brand, #111827);
}
.widget-7430a6 .mf-cef__panel {
  overflow-y: auto;
  max-height: 65vh;
}
.widget-7430a6 .mf-cef__panel[data-cef-panel=sample] {
  overflow-y: auto;
  max-height: 65vh;
}
.widget-7430a6 .mf-palette-view-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  color: var(--mfw-text-muted, var(--mf-text-muted, #6b7280));
}
.widget-7430a6 .mf-palette-view-stub__icon {
  font-size: 32px;
  line-height: 1;
  opacity: 0.6;
}
.widget-7430a6 .mf-palette-view-stub__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--mfw-text, var(--mf-text, #374151));
}
.widget-7430a6 .mf-palette-view-stub__desc {
  font-size: 12px;
  line-height: 1.6;
  max-width: 480px;
  color: var(--mfw-text-muted, var(--mf-text-muted, #9ca3af));
}
.widget-7430a6 .mf-fp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 16px;
}
.widget-7430a6 .mf-fp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--mfw-border, rgba(17, 24, 39, 0.14));
  border-radius: 8px;
  padding: 11px 12px 10px;
  background: var(--mfw-surface-raised, var(--mf-surface, #ffffff));
  transition: box-shadow 0.14s, border-color 0.14s;
}
.widget-7430a6 .mf-fp-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-color: var(--mfw-brand, rgba(17, 24, 39, 0.3));
}
.widget-7430a6 .mf-fp-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.widget-7430a6 .mf-fp-card__name {
  font-size: 12px;
  font-weight: 700;
  color: var(--mfw-text, #111827);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.widget-7430a6 .mf-fp-card__badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.widget-7430a6 .mf-fp-card__harmony-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 99px;
  font-family: system-ui, sans-serif;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1.4;
  background: #e5e7eb;
  color: #374151;
}
.widget-7430a6 .mf-fp-card__harmony-badge--mono {
  background: #dbeafe;
  color: #1e40af;
}
.widget-7430a6 .mf-fp-card__harmony-badge--analogous {
  background: #dcfce7;
  color: #166534;
}
.widget-7430a6 .mf-fp-card__harmony-badge--complementary {
  background: #fce7f3;
  color: #9d174d;
}
.widget-7430a6 .mf-fp-card__harmony-badge--near-compl- {
  background: #fdf2f8;
  color: #86198f;
}
.widget-7430a6 .mf-fp-card__harmony-badge--split-compl- {
  background: #fef3c7;
  color: #92400e;
}
.widget-7430a6 .mf-fp-card__harmony-badge--triadic {
  background: #ede9fe;
  color: #5b21b6;
}
.widget-7430a6 .mf-fp-card__harmony-badge--achromatic {
  background: #f3f4f6;
  color: #4b5563;
}
.widget-7430a6 .mf-fp-card__harmony-badge--neutral {
  background: #f9fafb;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}
.widget-7430a6 .mf-fp-card__harmony-badge--compl- {
  background: #fce7f3;
  color: #9d174d;
}
.widget-7430a6 .mf-fp-card__harmony-badge--mixed {
  background: #fff7ed;
  color: #9a3412;
}
.widget-7430a6 .mf-fp-card__tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-family: system-ui, sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}
.widget-7430a6 .mf-fp-card__tier-badge--tweak {
  background: #dcfce7;
  color: #166534;
}
.widget-7430a6 .mf-fp-card__tier-badge--overhaul {
  background: #fef3c7;
  color: #92400e;
}
.widget-7430a6 .mf-fp-card__tier-badge--diagnostic {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}
.widget-7430a6 .mf-fp-card__swatches {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13), inset 0 0 0 1px rgba(0, 0, 0, 0.07);
  height: 42px;
}
.widget-7430a6 .mf-fp-swatch {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  position: relative;
  transition: flex 0.14s;
  cursor: default;
}
.widget-7430a6 .mf-fp-swatch:hover {
  flex: 1.6;
  z-index: 1;
}
.widget-7430a6 .mf-fp-swatch--optional {
  flex: 0.7;
  border-left: 1px dashed rgba(255, 255, 255, 0.3);
}
.widget-7430a6 .mf-fp-swatch__label {
  font-family: system-ui, sans-serif;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
  pointer-events: none;
  display: block;
  max-width: calc(100% - 4px);
  text-align: center;
}
.widget-7430a6 .mf-fp-card__rel-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.widget-7430a6 .mf-fp-card__rel-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 8px;
  font-weight: 600;
  color: var(--mfw-text-muted, #6b7280);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .widget-7430a6 .mf-fp-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    padding: 12px;
  }
  .widget-7430a6 .mf-fp-card__swatches {
    height: 34px;
  }
}
.widget-7430a6 .mf-palette-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.widget-7430a6 .mf-palette-matrix {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-size: 11px;
}
.widget-7430a6 .mf-palette-matrix thead tr {
  background: rgba(0, 0, 0, 0.04);
}
.widget-7430a6 .mf-palette-matrix__name-th {
  text-align: left;
  padding: 8px 14px 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mfw-text-muted, var(--mf-text-muted, #6b7280));
  white-space: nowrap;
  position: sticky;
  left: 0; /* Palette is now the first (leftmost) sticky column */
  background: var(--mfw-surface, var(--mf-surface, #ffffff));
  z-index: 3;
  border-right: 2px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.18)));
  min-width: 180px;
  border-bottom: 2px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.18)));
}
.widget-7430a6 .mf-palette-matrix__group-th {
  padding: 6px 8px 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mfw-text, var(--mf-text, #111827));
  text-align: center;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.055);
  border-left: 2px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.18)));
  border-bottom: 1px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.14)));
}
.widget-7430a6 .mf-palette-matrix__group-th:first-of-type {
  border-left: none;
}
.widget-7430a6 .mf-palette-matrix__col-th {
  padding: 5px 6px 7px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: bottom;
  white-space: normal;
  word-break: break-word;
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  border-bottom: 2px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.18)));
}
.widget-7430a6 .mf-palette-matrix__col-th--first-in-group {
  border-left: 2px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.18)));
}
.widget-7430a6 .mf-palette-matrix__row {
  border-bottom: 1px solid var(--mfw-divider, var(--mf-divider, rgba(17, 24, 39, 0.09)));
  transition: outline 0.1s;
}
.widget-7430a6 .mf-palette-matrix__row:last-child {
  border-bottom: none;
}
.widget-7430a6 .mf-palette-matrix__row:hover .mf-palette-matrix__name {
  background: var(--mfw-surface-subtle, rgba(0, 0, 0, 0.035));
}
.widget-7430a6 .mf-palette-matrix__name {
  padding: 0 14px 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mfw-text, var(--mf-text, #111827));
  white-space: nowrap;
  position: sticky;
  left: 0; /* Palette is now the first (leftmost) sticky column */
  background: var(--mfw-surface, var(--mf-surface, #ffffff));
  z-index: 2;
  border-right: 2px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.18)));
  height: 42px;
  vertical-align: middle;
}
.widget-7430a6 .mf-palette-matrix__cell {
  width: 72px;
  min-width: 72px;
  height: 42px;
  padding: 0 4px;
  text-align: center;
  vertical-align: middle;
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.widget-7430a6 .mf-palette-matrix__cell--first-in-group {
  border-left: 2px solid var(--mfw-border, var(--mf-border, rgba(17, 24, 39, 0.18)));
}
.widget-7430a6 .mf-palette-matrix__hex {
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.85;
  pointer-events: none;
  display: block;
  line-height: 1.2;
}
.widget-7430a6 .mf-palette-matrix__role-label {
  font-family: system-ui, sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 1;
  padding: 1px 3px;
  border-radius: 3px;
  display: inline-block;
  line-height: 1.3;
  background: rgba(255, 255, 255, 0.2);
}
.widget-7430a6 .mf-palette-matrix__role-label--primary {
  background: rgba(255, 255, 255, 0.28);
}
.widget-7430a6 .mf-palette-matrix__role-label--secondary {
  background: rgba(255, 255, 255, 0.18);
}
.widget-7430a6 .mf-palette-matrix__role-label--tertiary {
  background: rgba(255, 255, 255, 0.12);
}
.widget-7430a6 .mf-palette-matrix__cell--tertiary-dupe {
  background: var(--mfw-surface-subtle, #f3f4f6);
  vertical-align: middle;
  text-align: center;
}
.widget-7430a6 .mf-palette-matrix__tertiary-dupe-badge {
  display: inline-block;
  font-family: system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mfw-text-muted, #9ca3af);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  padding: 1px 4px;
  white-space: nowrap;
  line-height: 1.4;
}
.widget-7430a6 .mf-palette-matrix__group-th--brand-single {
  vertical-align: middle;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-left: 2px solid var(--mfw-border, rgba(17, 24, 39, 0.18));
}
.widget-7430a6 .mf-palette-matrix__group-th--harmony {
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
  border-left: 2px solid var(--mfw-border, rgba(17, 24, 39, 0.18));
  border-right: 2px solid rgba(99, 102, 241, 0.3);
}
.widget-7430a6 .mf-palette-matrix__col-th--harmony {
  min-width: 118px;
  color: #4338ca;
  border-left: 2px solid var(--mfw-border, rgba(17, 24, 39, 0.18));
  border-right: none;
  background: rgba(99, 102, 241, 0.06);
}
.widget-7430a6 .mf-palette-matrix__col-th--tier {
  min-width: 72px;
  color: var(--mfw-text-muted, #6b7280);
  border-left: 2px solid var(--mfw-border, rgba(17, 24, 39, 0.18));
  background: rgba(99, 102, 241, 0.06);
  text-align: center;
}
.widget-7430a6 .mf-palette-matrix__col-th--contrast {
  min-width: 68px;
  color: #065f46;
  border-left: 1px solid var(--mfw-border, rgba(17, 24, 39, 0.18));
  border-right: 2px solid rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.06);
  text-align: center;
}
.widget-7430a6 .mf-palette-matrix__cell--harmony-first {
  background: var(--mfw-surface, #fff) !important;
  text-align: center;
  vertical-align: middle;
  padding: 0 6px;
  border-left: none;
  border-right: 2px solid rgba(99, 102, 241, 0.2);
}
.widget-7430a6 .mf-palette-matrix__cell--harmony {
  background: var(--mfw-surface, #fff) !important;
  text-align: center;
  vertical-align: middle;
  padding: 0 6px;
  border-left: 2px solid rgba(99, 102, 241, 0.2);
}
.widget-7430a6 .mf-palette-matrix__harmony-badge--prescriptive {
  font-style: italic;
  opacity: 0.82;
  border: 1px dashed currentColor;
}
.widget-7430a6 .mf-palette-matrix__harmony-badge {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 99px;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1.4;
  /* default (fallback) */
  background: #e5e7eb;
  color: #374151;
}
.widget-7430a6 .mf-palette-matrix__harmony-badge--monochromatic {
  background: #dbeafe;
  color: #1e40af;
}
.widget-7430a6 .mf-palette-matrix__harmony-badge--analogous {
  background: #dcfce7;
  color: #166534;
}
.widget-7430a6 .mf-palette-matrix__harmony-badge--complementary {
  background: #fce7f3;
  color: #9d174d;
}
.widget-7430a6 .mf-palette-matrix__harmony-badge--near-complementary {
  background: #fdf2f8;
  color: #86198f;
}
.widget-7430a6 .mf-palette-matrix__harmony-badge--split-complementary {
  background: #fef3c7;
  color: #92400e;
}
.widget-7430a6 .mf-palette-matrix__harmony-badge--triadic {
  background: #ede9fe;
  color: #5b21b6;
}
.widget-7430a6 .mf-palette-matrix__harmony-badge--achromatic {
  background: #f3f4f6;
  color: #4b5563;
}
.widget-7430a6 .mf-palette-matrix__harmony-badge--neutral {
  background: #f9fafb;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}
.widget-7430a6 .mf-palette-matrix__harmony-badge--mixed {
  background: #fff7ed;
  color: #9a3412;
}
.widget-7430a6 .mf-palette-matrix__band-row {
  background: var(--mfw-surface-subtle, rgba(0, 0, 0, 0.04));
  border-top: 2px solid var(--mfw-border, rgba(17, 24, 39, 0.15));
  border-bottom: 1px solid var(--mfw-border, rgba(17, 24, 39, 0.1));
}
.widget-7430a6 .mf-palette-matrix__group-th--tier {
  background: rgba(99, 102, 241, 0.06);
  color: var(--mfw-text-muted, #6b7280);
  border-left: 2px solid var(--mfw-border, rgba(17, 24, 39, 0.18));
  min-width: 72px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
  vertical-align: middle;
}
.widget-7430a6 .mf-palette-matrix__cell--tier {
  text-align: center;
  vertical-align: middle;
  padding: 0 4px;
  border-left: 2px solid var(--mfw-border, rgba(17, 24, 39, 0.18));
  min-width: 66px;
}
.widget-7430a6 .mf-palette-matrix__tier-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 99px;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1.4;
}
.widget-7430a6 .mf-palette-matrix__tier-badge--tweak {
  background: #dcfce7;
  color: #166534;
}
.widget-7430a6 .mf-palette-matrix__tier-badge--overhaul {
  background: #fef3c7;
  color: #92400e;
}
.widget-7430a6 .mf-palette-matrix__tier-badge--diagnostic {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}
.widget-7430a6 .mf-palette-matrix__col-th--match {
  background: rgba(99, 102, 241, 0.04);
  color: var(--mfw-text-muted, #6b7280);
  min-width: 56px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
  vertical-align: middle;
  border-left: 1px dashed var(--mfw-border, rgba(17, 24, 39, 0.14));
}
.widget-7430a6 .mf-palette-matrix__cell--match {
  text-align: center;
  vertical-align: middle;
  padding: 0 4px;
  min-width: 56px;
  border-left: 1px dashed var(--mfw-border, rgba(17, 24, 39, 0.1));
}
.widget-7430a6 .mf-palette-matrix__match-badge {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 99px;
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.widget-7430a6 .mf-palette-matrix__match-badge--high {
  background: #dcfce7;
  color: #14532d;
}
.widget-7430a6 .mf-palette-matrix__match-badge--mid {
  background: #fef3c7;
  color: #78350f;
}
.widget-7430a6 .mf-palette-matrix__match-badge--low {
  background: #fee2e2;
  color: #991b1b;
}
.widget-7430a6 .mf-palette-matrix__match-badge--na {
  color: #9ca3af;
  background: transparent;
}
.widget-7430a6 .mf-palette-matrix__col-th--quality {
  background: rgba(99, 102, 241, 0.04);
  color: var(--mfw-text-muted, #6b7280);
  min-width: 66px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
  vertical-align: middle;
  border-left: 1px dashed var(--mfw-border, rgba(17, 24, 39, 0.14));
}
.widget-7430a6 .mf-palette-matrix__cell--quality {
  text-align: center;
  vertical-align: middle;
  padding: 0 4px;
  min-width: 66px;
  border-left: 1px dashed var(--mfw-border, rgba(17, 24, 39, 0.1));
}
.widget-7430a6 .mf-palette-matrix__tier-match {
  display: inline-block;
  margin-left: 4px;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #166534;
  opacity: 0.85;
  white-space: nowrap;
  vertical-align: middle;
}
.widget-7430a6 .mf-palette-matrix__health-score {
  display: block;
  margin-top: 3px;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.3;
  padding: 1px 5px;
  border-radius: 99px;
  cursor: default;
  text-align: center;
}
.widget-7430a6 .mf-palette-matrix__health-score--green {
  background: #dcfce7;
  color: #14532d;
}
.widget-7430a6 .mf-palette-matrix__health-score--amber {
  background: #fef3c7;
  color: #78350f;
}
.widget-7430a6 .mf-palette-matrix__health-score--red {
  background: #fee2e2;
  color: #7f1d1d;
}
.widget-7430a6 .mf-palette-matrix__group-th--contrast {
  background: rgba(16, 185, 129, 0.07);
  color: #065f46;
  border-left: 1px solid var(--mfw-border, rgba(17, 24, 39, 0.18));
  min-width: 68px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
  vertical-align: middle;
}
.widget-7430a6 .mf-palette-matrix__cell--contrast {
  text-align: center;
  vertical-align: middle;
  padding: 0 4px;
  border-left: 1px solid var(--mfw-border, rgba(17, 24, 39, 0.1));
  min-width: 68px;
}
.widget-7430a6 .mf-palette-matrix__contrast-badge {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1.4;
}
.widget-7430a6 .mf-palette-matrix__contrast-badge--pass {
  background: #dcfce7;
  color: #166534;
}
.widget-7430a6 .mf-palette-matrix__contrast-badge--fail {
  background: #fee2e2;
  color: #991b1b;
}
.widget-7430a6 .mf-palette-matrix__contrast-badge--na {
  color: #9ca3af;
  background: transparent;
}
.widget-7430a6 .mf-palette-matrix__band-label {
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mfw-text-muted, #6b7280);
  white-space: nowrap;
  position: sticky;
  left: 0; /* band label spans full width, so leftmost sticky works */
  background: var(--mfw-surface-subtle, rgba(0, 0, 0, 0.04));
}
.widget-7430a6 .mf-palette-matrix__group-th--duda {
  background: rgba(180, 110, 0, 0.1);
  color: #7a4800;
  border-left: 2px solid rgba(180, 110, 0, 0.3);
  border-bottom: 1px solid rgba(180, 110, 0, 0.2);
}
.widget-7430a6 .mf-palette-matrix__col-th--duda {
  background: rgba(180, 110, 0, 0.05);
  color: #a05a00;
  border-bottom: 2px solid rgba(180, 110, 0, 0.22);
  width: 62px;
  min-width: 62px;
  max-width: 62px;
  white-space: normal;
  word-break: break-word;
  font-size: 9px;
}
.widget-7430a6 .mf-palette-matrix__col-th--duda.mf-palette-matrix__col-th--first-in-group {
  border-left: 2px solid rgba(180, 110, 0, 0.3);
}
.widget-7430a6 .mf-palette-matrix__cell--duda-mapped {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.widget-7430a6 .mf-palette-matrix__cell--duda-mapped.mf-palette-matrix__cell--first-in-group {
  border-left: 2px solid rgba(180, 110, 0, 0.3);
}
.widget-7430a6 .mf-palette-matrix__duda-var-label {
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.9;
  pointer-events: none;
  display: block;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68px;
}
.widget-7430a6 .mf-palette-matrix__cell--duda-class {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  width: 62px;
  min-width: 62px;
  max-width: 62px;
}
.widget-7430a6 .mf-palette-matrix__cell--duda-class.mf-palette-matrix__cell--first-in-group {
  border-left: 2px solid rgba(180, 110, 0, 0.3);
}
.widget-7430a6 .mf-palette-matrix__duda-class-label {
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 58px;
}
.widget-7430a6 .mf-palette-matrix__cell--duda-length {
  background: rgba(180, 110, 0, 0.06);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.widget-7430a6 .mf-palette-matrix__cell--duda-length.mf-palette-matrix__cell--first-in-group {
  border-left: 2px solid rgba(180, 110, 0, 0.3);
}
.widget-7430a6 .mf-palette-matrix__duda-length-val {
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  color: #7a4800;
  letter-spacing: 0.02em;
  display: block;
}
@media (max-width: 480px) {
  .widget-7430a6 .mf-theme-cc__palette-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
  .widget-7430a6 .mf-crud__font-preview-heading {
    font-size: 1.25rem;
  }
  .widget-7430a6 .mf-crud__font-preview-body {
    font-size: 0.781rem;
  }
  .widget-7430a6 .mf-crud__swatch-block {
    width: 28px;
  }
}