/* Mbongo+ dashboard — compact green and gold reference interface */
.mobile-top-brand{display:none}
.top-notification{width:41px;height:41px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--green);display:grid;place-items:center;position:relative;text-decoration:none}
.top-notification .bell-icon{width:22px;height:22px}
.top-notification>span{position:absolute;right:-4px;top:-5px;min-width:17px;height:17px;padding:0 4px;border:2px solid var(--bg);border-radius:999px;background:#df3434;color:#fff;font-size:8px;font-weight:900;display:grid;place-items:center}

.reference-dashboard{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important;padding:22px 0 42px!important;max-width:1120px;margin:0 auto}
.reference-dashboard>.reference-hero{order:1;grid-row:auto!important}
.reference-dashboard>.reference-wallets{order:2;grid-row:auto!important}
.reference-dashboard>.services-panel{order:3;grid-row:auto!important}
.reference-dashboard>.reference-summary{order:4;grid-row:auto!important}

.reference-hero{min-height:154px;border:1px solid #dfe7e3;border-radius:24px;padding:24px 28px;background:linear-gradient(105deg,rgba(255,255,255,.99),rgba(247,238,213,.84));box-shadow:0 18px 44px rgba(7,31,26,.08);display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative}
.reference-hero:after{content:"";position:absolute;width:280px;height:280px;border:55px solid rgba(11,61,49,.045);border-radius:50%;right:-100px;top:-135px}
.reference-hero>div{position:relative;z-index:2}
.reference-hero p{margin:0 0 4px;color:#0b6548;font-size:13px;font-weight:800}
.reference-hero h2{margin:0;color:#102d25;font-size:clamp(27px,3vw,39px);letter-spacing:-.045em}
.reference-hero span{display:block;margin-top:8px;color:#576a62;font-size:13px}
.growth-visual{width:min(42%,360px);height:130px;position:relative;z-index:1;filter:drop-shadow(0 10px 12px rgba(61,93,56,.1))}

.reference-wallets{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.reference-wallet{min-height:194px;border:0;border-radius:22px;padding:20px;color:#fff;text-align:left;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 18px 40px rgba(7,31,26,.14)}
.reference-wallet:after{content:"";position:absolute;width:175px;height:175px;border:34px solid rgba(255,255,255,.05);border-radius:50%;right:-78px;top:-82px}
.reference-wallet.cdf{background:linear-gradient(145deg,#098859,#07553d 72%,#063d31)}
.reference-wallet.usd{background:linear-gradient(145deg,#d8a124,#b67909 72%,#8d5902)}
.reference-wallet>div{display:flex;align-items:center;gap:9px;position:relative;z-index:2}
.reference-wallet>div strong{font-size:13px}
.reference-wallet>div i{margin-left:auto;font-style:normal;color:rgba(255,255,255,.88)}
.wallet-flag{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);font-size:18px}
.reference-wallet>b{margin-top:20px;font-size:31px;letter-spacing:-.04em;position:relative;z-index:2}
.reference-wallet>small{margin-top:5px;color:rgba(255,255,255,.76);font-size:9px;position:relative;z-index:2}
.reference-wallet>em{margin-top:auto;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.11);border-radius:12px;padding:10px 13px;text-align:center;font-size:10px;font-weight:800;font-style:normal;position:relative;z-index:2}

.reference-dashboard .services-panel{grid-column:1!important;grid-row:auto!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important}
.reference-dashboard .services-panel .section-head{display:none}
.reference-dashboard .services-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important;margin:0!important}
.reference-dashboard .services-grid button,.reference-dashboard .services-grid a{min-height:108px;border:1px solid #e0e7e3!important;border-radius:18px!important;background:#fff!important;color:#123d31!important;padding:12px 8px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:9px!important;text-decoration:none!important;text-align:center!important;box-shadow:0 10px 28px rgba(13,53,42,.055)!important;font-size:11px!important;font-weight:800!important}
.reference-dashboard .services-grid .ui-icon{width:41px!important;height:41px!important;padding:8px!important;border-radius:14px!important;background:#e7f3ee!important;color:#08734a!important}
.reference-dashboard .services-grid>*:nth-child(2) .ui-icon,.reference-dashboard .services-grid>*:nth-child(3) .ui-icon,.reference-dashboard .services-grid>*:nth-child(5) .ui-icon,.reference-dashboard .services-grid>*:nth-child(8) .ui-icon{background:#fbf0d4!important;color:#b47905!important}
.reference-dashboard .services-panel>.account-note{margin:12px 0 0;text-align:center;color:#77847f;font-size:9px}
.reference-summary{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.reference-summary .group-overview,.reference-summary .activity{grid-column:auto}

@media(max-width:800px){
 body{background:#f5f7f4!important}
 .workspace{background:#f5f7f4!important;padding:0 10px 100px!important}
 .topbar{min-height:88px;margin:0 -10px;padding:7px 14px;background:linear-gradient(115deg,#064d39,#012d23)!important;border-bottom:0!important;color:#fff;gap:8px;flex-wrap:nowrap}
 .topbar .desktop-top-copy{display:none!important}
 .mobile-top-brand{min-width:0;display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:0;color:#fff;text-align:left}
 .mobile-top-brand .congo-mark{width:53px;height:57px;flex:0 0 53px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.22))}
 .mobile-top-brand>span{display:grid;min-width:0}
 .mobile-top-brand strong{font-size:25px;line-height:1;background:linear-gradient(180deg,#ffe894,#c8911a);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-1px;white-space:nowrap}
 .mobile-top-brand strong span{color:#f0bd42}
 .mobile-top-brand small{font-size:8.5px;color:#fff;line-height:1.15;margin-top:5px;white-space:nowrap}
 .top-actions{margin-left:auto;gap:0!important}
 .topbar .top-language,.topbar .secondary,.topbar .avatar{display:none!important}
 .top-notification{width:38px;height:38px;flex:0 0 38px;border:0;background:transparent;color:#fff}
 .top-notification .bell-icon{width:26px;height:26px}
 .top-notification>span{right:-1px;top:0;border-color:#073b2e}
 .reference-dashboard{gap:8px!important;padding:10px 0 16px!important}
 .reference-hero{min-height:108px;border-radius:17px;padding:14px 15px;box-shadow:0 8px 22px rgba(7,31,26,.07)}
 .reference-hero:after{width:150px;height:150px;border-width:34px;right:-72px;top:-67px}
 .reference-hero>div{max-width:62%}
 .reference-hero p{font-size:10px;margin-bottom:3px}
 .reference-hero h2{font-size:18px;line-height:1.1;letter-spacing:-.45px;white-space:nowrap}
 .reference-hero span{font-size:9px;margin-top:6px}
 .growth-visual{position:absolute;right:-2px;bottom:0;width:45%;height:105px}
 .reference-wallets{gap:8px}
 .reference-wallet{min-height:144px;border-radius:16px;padding:12px}
 .wallet-flag{width:27px;height:27px;font-size:14px}
 .reference-wallet>div{gap:6px}
 .reference-wallet>div strong{font-size:9.5px}
 .reference-wallet>div i{font-size:12px}
 .reference-wallet>b{font-size:22px;margin-top:13px;line-height:1.05}
 .reference-wallet>small{display:none}
 .reference-wallet>em{font-size:8px;padding:8px 4px;border-radius:10px}
 .reference-wallet:after{width:130px;height:130px;border-width:26px;right:-62px;top:-64px}
 .reference-dashboard .services-panel{grid-row:auto!important;order:3!important}
 .reference-dashboard .services-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
 .reference-dashboard .services-grid button,.reference-dashboard .services-grid a{min-height:82px!important;border-radius:14px!important;padding:8px 4px!important;gap:6px!important;font-size:9px!important;line-height:1.15!important;box-shadow:0 4px 14px rgba(13,53,42,.045)!important}
 .reference-dashboard .services-grid .ui-icon{width:33px!important;height:33px!important;padding:6px!important;border-radius:11px!important}
 .reference-dashboard .services-panel>.account-note{display:none!important}
 .reference-summary{grid-template-columns:1fr;gap:8px}
 .reference-summary .panel{padding:15px}
}
@media(max-width:370px){
 .mobile-top-brand .congo-mark{width:47px;height:51px;flex-basis:47px}
 .mobile-top-brand strong{font-size:22px}
 .mobile-top-brand small{font-size:7.5px}
 .reference-hero>div{max-width:66%}
 .reference-hero h2{font-size:16.5px}
 .growth-visual{width:42%}
 .reference-wallet{padding:10px}
 .reference-wallet>b{font-size:19px}
 .reference-wallet>em{font-size:7.5px}
 .reference-dashboard .services-grid button,.reference-dashboard .services-grid a{font-size:8px!important}
}

/* Fine alignment with the approved Mbongo+ mobile reference */
.mobile-brand-footer{display:none}
.reference-wallet>div i .ui-icon{width:20px;height:20px}
.reference-wallet>.wallet-unit{display:block;color:rgba(255,255,255,.9);font-size:11px;font-weight:800;line-height:1;margin-top:2px;position:relative;z-index:2}
.reference-dashboard .services-grid .ui-icon{padding:0!important;border-radius:0!important;background:transparent!important;color:#08734a!important}
.reference-dashboard .services-grid>*:nth-child(2) .ui-icon,.reference-dashboard .services-grid>*:nth-child(3) .ui-icon,.reference-dashboard .services-grid>*:nth-child(5) .ui-icon{background:transparent!important;color:#b77900!important}
.reference-dashboard .services-grid>*:nth-child(8) .ui-icon{background:transparent!important;color:#08734a!important}

@media(max-width:800px){
 .workspace{padding-bottom:154px!important}
 .topbar{min-height:100px!important;padding:8px 14px!important}
 .mobile-top-brand{gap:10px!important}
 .mobile-top-brand .congo-mark{width:65px!important;height:68px!important;flex:0 0 65px!important;object-fit:contain;filter:drop-shadow(0 0 1px #f2c75c) drop-shadow(0 3px 4px rgba(0,0,0,.24))!important}
 .mobile-top-brand strong{font-size:30px!important;letter-spacing:-1.2px!important}
 .mobile-top-brand small{font-size:9.5px!important;margin-top:5px!important}
 .reference-hero{background:linear-gradient(100deg,#fff 0%,#fffdf8 48%,#eaf3f1 76%,#dce9e5 100%)!important}
 .reference-hero p{color:#102d25!important}
 .reference-hero h2{font-size:19px!important}
 .reference-wallet>div strong{font-size:11.5px!important}
 .reference-wallet>div i .ui-icon{width:18px!important;height:18px!important}
 .reference-wallet>b{font-size:23px!important}
 .reference-wallet>.wallet-unit{display:block!important;font-size:9px!important;margin-top:2px!important}
 .reference-wallet>em{font-size:9.5px!important;font-weight:800!important}
 .reference-dashboard .services-grid button,.reference-dashboard .services-grid a{font-size:10.5px!important;line-height:1.15!important;gap:7px!important}
 .reference-dashboard .services-grid button>span:last-child,.reference-dashboard .services-grid a>span:last-child{max-width:92px}
 .reference-dashboard .services-grid .ui-icon{width:36px!important;height:36px!important;padding:0!important}
 .reference-summary{display:none!important}
 .mobile-brand-footer{position:fixed;display:flex;left:0;right:0;bottom:0;z-index:79;height:calc(58px + env(safe-area-inset-bottom));padding:6px 10px max(6px,env(safe-area-inset-bottom));box-sizing:border-box;background:linear-gradient(110deg,#064c38,#022e25);color:#fff;align-items:center;justify-content:center;flex-direction:column;text-align:center}
 .mobile-brand-footer strong{font-size:18px;line-height:1;color:#e9bd4e;letter-spacing:-.5px}
 .mobile-brand-footer span{font-size:9px;line-height:1.15;margin-top:4px;color:#fff}
}
@media(max-width:370px){
 .mobile-top-brand .congo-mark{width:56px!important;height:59px!important;flex-basis:56px!important}
 .mobile-top-brand strong{font-size:26px!important}
 .mobile-top-brand small{font-size:8.5px!important}
}