:root{ --bg:#f3f6f3; --panel:#ffffff; --panel-2:#f8faf8; --surface:rgba(255,255,255,.88); --surface-2:rgba(255,255,255,.72); --text:#172f27; --muted:#62756d; --brand:#075043; --brand-2:#0a6a56; --danger:#c43d42; --success:#198754; --warning:#b47d12; --border:#dce4df; --ring:rgba(7,80,67,.18); --shadow:0 16px 40px rgba(19,58,46,.08); --shadow-sm:0 5px 18px rgba(19,58,46,.055); --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --ease:cubic-bezier(.4,0,.2,1); --transition:200ms var(--ease); } html[data-theme="dark"]{ color-scheme:dark; --bg:#091612; --panel:#10231c; --panel-2:#132a22; --surface:rgba(255,255,255,.06); --surface-2:rgba(255,255,255,.04); --text:#edf5f1; --muted:#a8bdb5; --brand:#61cda6; --brand-2:#8de0c1; --danger:#ff6666; --success:#31d67e; --warning:#ffbf5a; --border:#29463b; --ring:rgba(97,205,166,.28); --shadow:0 14px 34px rgba(0,0,0,.42); --shadow-sm:0 10px 22px rgba(0,0,0,.32); } html[data-theme="light"]{color-scheme:light} :root{ --admin-brand:#064e3b; --admin-brand-light:#d1fae5; --admin-brand-dark:#05654a; --admin-accent:#d4af37; --admin-accent-light:#fef3c7; } html[data-theme="dark"]{ --admin-brand:#10b981; --admin-brand-light:rgba(16,185,129,.15); --admin-brand-dark:#34d399; --admin-accent:#fbbf24; --admin-accent-light:rgba(251,191,36,.15); } *{box-sizing:border-box} html{scrollbar-gutter:stable;scroll-behavior:smooth} body{ margin:0; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.5; background:linear-gradient(180deg,#f8faf8 0,#f3f6f3 360px,var(--bg) 100%); color:var(--text); transition:background .3s var(--ease),color .3s var(--ease) } h1,h2,h3,h4,h5,h6{font-family:Manrope,Inter,system-ui,-apple-system,sans-serif;font-weight:800;line-height:1.2;margin:0} h1{font-size:28px;letter-spacing:-.02em} h2{font-size:22px;letter-spacing:-.015em} h3{font-size:18px;letter-spacing:-.01em} h4{font-size:16px} p{margin:0 0 8px} body.landing{ background:radial-gradient(900px 620px at 15% 45%, rgba(22,96,255,.10), transparent 62%),radial-gradient(720px 520px at 85% 35%, rgba(27,168,90,.10), transparent 60%),var(--bg) } body.auth{ background:var(--bg) } html[data-theme="dark"] body.landing{ background:radial-gradient(900px 620px at 15% 45%, rgba(61,126,255,.18), transparent 62%),radial-gradient(720px 520px at 85% 35%, rgba(49,214,126,.14), transparent 60%),var(--bg) } html[data-theme="dark"] body.auth{background:var(--bg)} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto} img.lp-hero-img{max-width:none} .container{max-width:1280px;width:100%;margin:0 auto;padding:0 20px} .app-shell{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:260px 1fr;width:100%} .app-shell.no-sidebar{grid-template-columns:1fr;width:100%} .sidebar{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) , var(--panel);border-right:1px solid var(--border);position:sticky;top:0;height:100vh;display:flex;flex-direction:column} .sidebar-header{padding:18px 16px;border-bottom:1px solid var(--border)} .sidebar-title{font-weight:700;color:var(--brand)} .sidebar-nav{padding:10px} .nav-item{padding:10px 12px;border-radius:12px;color:var(--muted);display:flex;align-items:center;gap:10px;transition:background var(--transition),color var(--transition),transform var(--transition)} .nav-item:hover{background:rgba(22,96,255,.10);color:var(--text);transform:translateY(-1px)} .nav-item.active{background:rgba(22,96,255,.14);color:var(--brand);font-weight:700} .nav-groups{display:flex;flex-direction:column;gap:10px} .nav-flat{display:none} .nav-flat--always{display:flex;flex-direction:column;gap:6px} .nav-drop{border:1px solid var(--border);border-radius:14px;padding:8px 10px;background:rgba(255,255,255,.02)} .nav-drop > summary{cursor:pointer;font-weight:900;color:var(--text);list-style:none} .nav-drop > summary::-webkit-details-marker{display:none} .nav-drop > summary:after{content:"▾";float:right;color:var(--muted)} .nav-drop[open] > summary:after{content:"▴"} .nav-drop-body{margin-top:8px;display:flex;flex-direction:column;gap:6px} .ui-details{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.02)} .ui-details > summary{cursor:pointer;font-weight:700;color:var(--text);list-style:none} .ui-details > summary::-webkit-details-marker{display:none} .ui-details > summary:after{content:"▾";float:right;color:var(--muted)} .ui-details[open] > summary:after{content:"▴"} .ui-details .ui-details-body{margin-top:10px} .app-main{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;width:100%} .topbar{background:var(--surface-2);border-bottom:1px solid var(--border);padding:10px 0;display:flex;align-items:center;backdrop-filter:saturate(1.2) blur(12px);position:sticky;top:0;z-index:1000} .topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px} .topbar-left,.topbar-right{display:flex;align-items:center;gap:10px} .brand{display:flex;align-items:center;gap:10px} .brand-dot{width:12px;height:12px;border-radius:4px;background:var(--brand);box-shadow:0 0 0 6px rgba(22,96,255,.14)} .brand-logo{width:28px;height:28px;border-radius:8px;object-fit:contain;border:1px solid var(--border);background:rgba(255,255,255,.02)} .brand-text{font-weight:800} .brand-text,.sidebar-title,.page-title{font-family:Manrope,Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif} .content{padding:20px 0;flex:1;width:100%} body.landing .content{width:100%} body.landing{overflow-x:hidden} body.landing .app-shell{display:block} body.landing .app-main{display:block;width:100%;min-height:auto;animation:none} body.landing .app-main .content{display:block;width:100%} .footer{padding:14px 0;color:var(--muted);border-top:1px solid var(--border);background:var(--panel)} .user-menu{position:relative} .user-menu-btn{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease} .user-menu-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)} .user-menu-btn:active{transform:translateY(0)} .user-menu-btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring),var(--shadow)} .user-menu-btn::after{content:"▾";font-size:12px;color:var(--muted);margin-left:2px} .user-menu-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px} .user-menu-name{font-weight:800;font-size:13px;line-height:1} .user-menu-role{font-size:12px;color:var(--muted);line-height:1} .user-menu-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;border-radius:14px;border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);padding:6px;display:none;z-index:9999} .user-menu.drop-up .user-menu-pop{top:auto;bottom:calc(100% + 8px)} .user-menu.menu-floating .user-menu-pop{position:fixed;top:var(--menu-top);left:var(--menu-left);right:auto;bottom:auto} .sa-topnav-user.menu-floating .sa-topnav-pop{position:fixed;top:var(--menu-top);left:var(--menu-left);right:auto;bottom:auto} .admin-topnav-user.menu-floating .admin-topnav-pop{position:fixed;top:var(--menu-top);left:var(--menu-left);right:auto;bottom:auto} .user-menu.open .user-menu-pop{display:block} .user-menu.open:focus-within .user-menu-pop{display:block} @media (hover:hover) and (pointer:fine){ .user-menu.open:hover .user-menu-pop{display:block} } .menu-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-decoration:none;padding:10px 12px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer;font-weight:600;font-size:14px;font-family:inherit;transition:all .15s ease;-webkit-appearance:none;appearance:none;outline:none;line-height:1.4} .menu-item:hover{background:rgba(6,78,59,.05);color:var(--admin-brand)} .menu-item:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(6,78,59,.15)} .menu-item.danger{color:#fff;background:var(--danger);border-color:var(--danger);font-weight:700} .menu-item.danger:hover{background:#c53030;transform:translateY(-1px);box-shadow:0 4px 12px rgba(214,69,69,.25)} .user-menu-pop .menu-item{display:block;width:100%;padding:8px 12px;border:none;border-radius:8px;text-align:left;color:var(--text);background:transparent;font-size:13px;font-weight:500;font-family:inherit;-webkit-appearance:none;appearance:none} .user-menu-pop .menu-item:hover{background:var(--surface);color:var(--admin-brand)} .card{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);transition:box-shadow .2s,border-color .2s} .card:hover{box-shadow:var(--shadow)} .card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px} .header-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end} .card-body{padding:20px} .cashbook-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 14px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .cashbook-summary-tile{min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel);box-shadow:0 1px 2px rgba(15,51,40,.035)} .cashbook-summary-label{display:block;margin-bottom:4px;color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.01em;line-height:1.2} .cashbook-summary-tile strong{display:block;overflow:hidden;color:var(--text);font-size:14px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap} .cashbook-summary-in{border-left:3px solid #08764e}.cashbook-summary-in strong{color:#08764e} .cashbook-summary-out{border-left:3px solid #a7542d}.cashbook-summary-out strong{color:#a7542d} .cashbook-summary-closing{border-left:3px solid var(--admin-brand)} .cashbook-summary-reconcile{border-left:3px solid var(--warning)} @media(max-width:1100px){.cashbook-summary{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:620px){.cashbook-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.cashbook-summary-tile{padding:9px 10px}.cashbook-summary-tile strong{font-size:13px}.cashbook-summary-reconcile{grid-column:span 2}} .cashbook-filter-bar{display:grid;grid-template-columns:minmax(130px,.8fr) minmax(130px,.8fr) minmax(220px,1fr) minmax(220px,1fr) auto;gap:14px;align-items:end;margin:0 0 14px} .cashbook-filter-bar label{display:block;margin:0}.cashbook-filter-bar input,.cashbook-filter-bar select{width:100%}.cashbook-filter-bar .btn{min-height:46px;white-space:nowrap} @media(max-width:1100px){.cashbook-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.cashbook-filter-bar .btn{width:max-content}} @media(max-width:620px){.cashbook-filter-bar{grid-template-columns:1fr;gap:10px}.cashbook-filter-bar .btn{width:100%}} .bank-recon-filter-bar{display:grid;grid-template-columns:minmax(260px,1.25fr) minmax(300px,1.2fr) auto;gap:14px;align-items:end;margin:0} .bank-recon-filter-bar label{display:block;margin:0}.bank-recon-filter-bar input,.bank-recon-filter-bar select{width:100%}.bank-recon-filter-bar .btn{min-height:46px;white-space:nowrap} .bank-recon-period-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px} .bank-recon-hero{overflow:hidden;border-color:color-mix(in srgb,var(--admin-brand) 18%,var(--border));background:linear-gradient(130deg,color-mix(in srgb,var(--panel) 94%,var(--admin-brand) 6%),var(--panel) 58%)} .bank-recon-hero-header{min-height:112px;padding:24px clamp(20px,3vw,30px);border-bottom:0;align-items:center}.bank-recon-hero .page-title{font-size:clamp(30px,3.1vw,42px);letter-spacing:-.045em}.bank-recon-hero .page-subtitle{max-width:700px;font-size:14px} .bank-recon-hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto}.bank-recon-history-link{padding:8px 4px;color:var(--admin-brand);font-size:13px;font-weight:800;text-decoration:underline;text-underline-offset:3px}.bank-recon-history-link:hover{color:var(--admin-accent)} .bank-recon-more{position:relative}.bank-recon-more>summary{display:inline-flex;min-height:36px;align-items:center;padding:0 12px;border:1px solid var(--border);border-radius:9px;color:var(--admin-brand);font-size:12px;font-weight:800;cursor:pointer;list-style:none}.bank-recon-more>summary::-webkit-details-marker{display:none}.bank-recon-more>summary::after{content:"⌄";margin-left:7px;font-size:13px}.bank-recon-more-menu{position:absolute;top:calc(100% + 7px);right:0;z-index:20;display:grid;min-width:150px;padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--panel);box-shadow:0 16px 30px rgba(15,61,48,.16)}.bank-recon-more-menu a{padding:9px 10px;border-radius:7px;color:var(--admin-brand);font-size:12px;font-weight:750;text-decoration:none}.bank-recon-more-menu a:hover{background:var(--admin-brand-light)} .bank-recon-command-card{overflow:visible;border-color:color-mix(in srgb,var(--admin-brand) 18%,var(--border));background:linear-gradient(110deg,color-mix(in srgb,var(--panel) 96%,var(--admin-brand) 4%),var(--panel))}.bank-recon-command-card-body{padding:18px clamp(18px,2.2vw,26px)!important} .bank-recon-summary{display:grid;grid-template-columns:1.15fr .82fr 1fr 1fr 1.25fr;gap:0;margin-top:18px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--admin-brand) 16%,var(--border))} .bank-recon-summary .stat{min-width:0;padding:8px 15px;border-left:1px solid color-mix(in srgb,var(--admin-brand) 18%,var(--border));background:transparent}.bank-recon-summary .stat:first-child{padding-left:0;border-left:0}.bank-recon-summary .stat:nth-child(2),.bank-recon-summary .stat:nth-child(3),.bank-recon-summary .stat:nth-child(4){margin:0 8px;border:1px solid color-mix(in srgb,var(--admin-brand) 14%,var(--border));border-radius:8px;background:color-mix(in srgb,var(--admin-brand) 5%,var(--panel))}.bank-recon-summary .stat:nth-child(4){background:color-mix(in srgb,var(--admin-accent) 11%,var(--panel));border-color:color-mix(in srgb,var(--admin-accent) 30%,var(--border))}.bank-recon-summary .stat-value{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bank-recon-summary .stat-sub{margin-top:4px;font-size:11px}.bank-recon-summary .stat-sub.success{color:var(--success);font-weight:750} .bank-recon-list-title{color:var(--text);font-family:Manrope,Inter,system-ui,sans-serif;font-size:22px;font-weight:850;letter-spacing:-.035em} .bank-recon-items-card .table thead th{background:color-mix(in srgb,var(--admin-brand) 6%,var(--panel));color:var(--text);font-size:12px}.bank-recon-items-card .pill:not(.warning){border-color:transparent;background:#e5f3e8;color:#08764e;font-weight:800}.bank-recon-row-links{display:flex;gap:10px;margin-top:4px}.bank-recon-row-links a{color:var(--admin-brand);font-size:11px;font-weight:750}.bank-recon-status-cell{min-width:135px}.bank-recon-status-cell .btn{margin-top:6px}.bank-recon-status-note{margin-top:5px;color:var(--muted);font-size:11px}.bank-recon-select{display:inline-flex!important;align-items:center;gap:5px;margin:0 7px 0 0!important;color:var(--admin-brand);font-size:11px;font-weight:800;cursor:pointer}.bank-recon-select input{width:15px;height:15px;accent-color:var(--admin-brand)} @media(max-width:1100px){.bank-recon-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.bank-recon-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.bank-recon-summary .stat{padding:10px;border:1px solid color-mix(in srgb,var(--admin-brand) 13%,var(--border));border-radius:8px}.bank-recon-summary .stat:first-child{padding:10px;border-left:1px solid color-mix(in srgb,var(--admin-brand) 13%,var(--border))}.bank-recon-hero-header{align-items:flex-start;flex-direction:column}.bank-recon-hero-actions{margin-left:0}} @media(max-width:620px){.bank-recon-filter-bar{grid-template-columns:1fr;gap:10px}.bank-recon-filter-bar .btn{width:100%}.bank-recon-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.bank-recon-summary .stat{margin:0!important}.bank-recon-summary .stat:last-child{grid-column:span 2}.bank-recon-hero-header{padding:20px 18px}.bank-recon-hero .page-title{font-size:30px}} .grid{display:grid;gap:14px} .grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))} .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .loans-grid{grid-template-columns:1.35fr 1fr;align-items:start} .loans-grid.single{grid-template-columns:1fr} .table-wrap{overflow:auto;-webkit-overflow-scrolling:touch} .table-wrap.no-vscroll{overflow-x:auto;overflow-y:visible} .stats-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .page-head{display:flex;flex-direction:column;gap:6px;min-width:0} .page-title{font-family:Manrope,Inter,system-ui;font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.02em;color:var(--text)} .page-subtitle{color:var(--muted);font-size:14px;line-height:1.4} .section-title{font-weight:800} .section-sub{color:var(--muted);font-size:13px} .stat-card{position:relative;overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)} .stat-card:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:rgba(22,96,255,.30)} .stat-card .card-body{padding:0} .stat-card-link{display:block;padding:16px} .stat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .stat-icon{width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(22,96,255,.22);background:rgba(22,96,255,.10);color:var(--brand);flex-shrink:0} .stat-icon.success{border-color:rgba(27,168,90,.22);background:rgba(27,168,90,.10);color:var(--success)} .stat-icon.warning{border-color:rgba(244,167,54,.24);background:rgba(244,167,54,.10);color:var(--warning)} .stat-icon.danger{border-color:rgba(214,69,69,.24);background:rgba(214,69,69,.10);color:var(--danger)} .stat-sub{margin-top:8px;color:var(--muted);font-size:12px} .stat-value.big{font-size:26px} .stat{display:flex;flex-direction:column;gap:6px;min-width:0} .stat-label{color:var(--muted);font-size:12px} .stat-value{font-weight:900;font-size:clamp(18px,2vw,22px);line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px} .kpi-card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:none} .kpi-left{display:flex;flex-direction:column;gap:6px;min-width:0} .kpi-label{color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase} .kpi-value{font-weight:900;font-size:26px;line-height:1.05;font-variant-numeric:tabular-nums} .kpi-accent{width:10px;height:38px;border-radius:999px;background:rgba(22,96,255,.35)} .kpi-accent.pending{background:rgba(244,167,54,.38)} .kpi-accent.approved{background:rgba(27,168,90,.35)} .kpi-accent.overdue{background:rgba(214,69,69,.45)} /* ===== Button Base ===== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:10px;border:1px solid transparent;background:var(--admin-brand);color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;position:relative;overflow:hidden;text-decoration:none;white-space:nowrap;transition:all .2s ease;box-shadow:0 1px 3px rgba(6,78,59,.18),0 1px 2px rgba(6,78,59,.12);line-height:1.4} .btn:hover{background:var(--admin-brand-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(6,78,59,.22),0 2px 4px rgba(6,78,59,.12)} .btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(6,78,59,.15)} .btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(6,78,59,.2)} .btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none} /* ===== Button Sizes ===== */ .btn-xs{padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;gap:4px} .btn-sm{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600} .btn-md{padding:10px 20px;border-radius:10px;font-size:14px} .btn-lg{padding:12px 24px;border-radius:12px;font-size:15px;font-weight:700;gap:10px} .btn-xl{padding:14px 32px;border-radius:14px;font-size:16px;font-weight:700;gap:10px} /* ===== Button Variants ===== */ .btn-outline{background:var(--panel);color:var(--admin-brand);border-color:rgba(6,78,59,.25);box-shadow:none} .btn-outline:hover{background:rgba(6,78,59,.06);border-color:var(--admin-brand);box-shadow:0 1px 3px rgba(6,78,59,.08)} .btn-outline:active{background:rgba(6,78,59,.1)} .btn-danger{background:var(--danger);color:#fff;box-shadow:0 1px 3px rgba(214,69,69,.18),0 1px 2px rgba(214,69,69,.12)} .btn-danger:hover{background:#c53030;transform:translateY(-1px);box-shadow:0 4px 12px rgba(214,69,69,.22),0 2px 4px rgba(214,69,69,.12)} .btn-danger:active{transform:translateY(0);box-shadow:0 1px 2px rgba(214,69,69,.15)} .btn-gold{background:linear-gradient(180deg,#f5d46a,#d6a71e);color:#1a1a1a;border-color:rgba(255,255,255,.08);box-shadow:0 1px 3px rgba(212,175,55,.2),0 1px 2px rgba(212,175,55,.12)} .btn-gold:hover{filter:brightness(.95);transform:translateY(-1px);box-shadow:0 4px 12px rgba(212,175,55,.28),0 2px 4px rgba(212,175,55,.12)} .btn-gold:active{transform:translateY(0);filter:brightness(.92)} .btn-ghost{background:transparent;color:var(--text);border-color:transparent;box-shadow:none} .btn-ghost:hover{background:rgba(6,78,59,.06);color:var(--admin-brand)} .btn-ghost:active{background:rgba(6,78,59,.1)} .btn-success{background:var(--admin-brand);color:#fff;box-shadow:0 1px 3px rgba(6,78,59,.18)} .btn-success:hover{background:var(--admin-brand-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(6,78,59,.22)} .btn-white{background:#fff;color:var(--admin-brand);border-color:rgba(6,78,59,.2);box-shadow:none} .btn-white:hover{background:rgba(6,78,59,.04);border-color:var(--admin-brand)} .btn-link{background:none;border:none;color:var(--admin-brand);padding:0;font-weight:600;text-decoration:none;box-shadow:none} .btn-link:hover{text-decoration:underline;transform:none;box-shadow:none} /* ===== Button Icon ===== */ .btn-icon{width:36px;height:36px;padding:0;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease;flex-shrink:0} .btn-icon:hover{border-color:var(--admin-brand);color:var(--admin-brand);background:rgba(6,78,59,.05);transform:none;box-shadow:none} .btn-icon:active{background:rgba(6,78,59,.1)} .btn-icon-xs{width:28px;height:28px;border-radius:6px;font-size:12px} .btn-icon-sm{width:32px;height:32px;border-radius:8px} .btn-icon-lg{width:40px;height:40px;border-radius:12px} .btn-icon-xl{width:48px;height:48px;border-radius:14px} .btn-icon.danger{border-color:rgba(214,69,69,.25);color:var(--danger);background:rgba(214,69,69,.04)} .btn-icon.danger:hover{border-color:var(--danger);color:var(--danger);background:rgba(214,69,69,.08)} .btn-icon.impersonate{border-color:rgba(245,158,11,.3);color:var(--warning);background:rgba(245,158,11,.04)} .btn-icon.impersonate:hover{border-color:var(--warning);background:rgba(245,158,11,.08)} .btn-icon.edit{border-color:rgba(6,78,59,.25);color:var(--admin-brand);background:rgba(6,78,59,.04)} .btn-icon.edit:hover{border-color:var(--admin-brand);background:rgba(6,78,59,.08)} /* ===== Ripple Effect ===== */ .ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.35);transform:scale(0);animation:btnRipple .5s ease-out forwards} @keyframes btnRipple{to{transform:scale(3);opacity:0}} .sp-10{height:10px} .sp-14{height:14px} .muted{color:var(--muted)} .list{display:flex;flex-direction:column;gap:10px} .list-item{border:1px solid var(--border);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:space-between;gap:10px} .list-main{display:flex;flex-direction:column;gap:4px;min-width:0} .list-title{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .list-sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .list-right{display:flex;align-items:center;gap:10px;flex-shrink:0} .empty{border:1px dashed var(--border);border-radius:14px;padding:32px 16px;color:var(--muted);text-align:center;font-size:14px} .empty svg{width:32px;height:32px;margin:0 auto 10px;opacity:.4} .pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--muted);background:var(--panel);transition:all .15s} .pill.success{border-color:rgba(6,78,59,.25);color:var(--admin-brand);background:rgba(6,78,59,.06)} .pill.warning{border-color:rgba(245,158,11,.25);color:var(--warning);background:rgba(245,158,11,.06)} .pill.danger{border-color:rgba(214,69,69,.25);color:var(--danger);background:rgba(214,69,69,.06)} .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:24px;z-index:1100;transition:opacity .3s ease} .modal-overlay.open{display:flex;animation:modalBgIn .3s ease} .modal{width:min(860px,100%);max-height:min(90vh,880px);overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:20px;box-shadow:0 25px 60px rgba(0,0,0,.3);animation:modalIn .3s cubic-bezier(.16,1,.3,1);transform-origin:center center} .modal-header{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);position:sticky;top:0;z-index:1;border-radius:20px 20px 0 0} .modal-title{font-family:Manrope,Inter,system-ui;font-weight:800;font-size:18px;color:var(--text)} .modal-body{padding:24px} .modal-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:10px;cursor:pointer;font-weight:700;transition:all .15s ease;flex-shrink:0;font-size:16px} .modal-close:hover{background:rgba(214,69,69,.06);color:var(--danger);border-color:rgba(214,69,69,.3);transform:scale(1.05)} .modal-close:active{transform:scale(.95)} body.modal-open{overflow:hidden} .confirm-modal{max-width:500px;overflow:hidden;border:1px solid color-mix(in srgb,var(--admin-brand) 17%,var(--border));border-radius:22px;box-shadow:0 30px 80px rgba(8,30,24,.28),0 8px 24px rgba(8,30,24,.14)} .confirm-modal .modal-header{position:static;align-items:flex-start;padding:22px 24px 18px;border-bottom:0;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel) 94%,var(--admin-brand) 6%))}.confirm-heading{display:flex;min-width:0;flex-direction:column;gap:4px}.confirm-kicker{color:var(--admin-brand);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.confirm-modal .modal-title{font-size:21px;letter-spacing:-.02em}.confirm-modal .modal-close{width:34px;height:34px;border-color:transparent;border-radius:999px;background:color-mix(in srgb,var(--admin-brand) 7%,var(--panel));font:400 23px/1 Inter,system-ui}.confirm-modal .modal-close:hover{border-color:color-mix(in srgb,var(--danger) 22%,transparent);background:color-mix(in srgb,var(--danger) 8%,var(--panel))} .confirm-modal .modal-body{padding:8px 24px 22px;background:var(--panel)}.confirm-message-layout{display:grid;grid-template-columns:auto 1fr;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--admin-brand) 3%,var(--panel))}.confirm-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff;background:var(--admin-brand);font-size:16px;font-weight:900;box-shadow:0 7px 16px color-mix(in srgb,var(--admin-brand) 22%,transparent)}.confirm-message-copy{min-width:0}.confirm-modal .confirm-message-copy>p{margin:0;color:var(--text);font-size:14px;font-weight:750;line-height:1.45}.confirm-message-copy small{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.5} .confirm-modal .modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 20px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--bg) 45%,var(--panel))}.confirm-modal .modal-footer .btn{min-width:108px;min-height:40px;justify-content:center;border-radius:10px}.confirm-submit{border:1px solid var(--admin-brand);background:var(--admin-brand);color:#fff;box-shadow:0 7px 16px color-mix(in srgb,var(--admin-brand) 22%,transparent)}.confirm-submit:hover{transform:translateY(-1px);filter:brightness(1.06)}.confirm-submit:disabled{cursor:not-allowed;opacity:.48;transform:none;box-shadow:none} .modal-overlay[data-confirm-tone="impersonate"] .confirm-modal{max-width:810px;border-color:#dce5df;border-radius:14px;box-shadow:0 28px 76px rgba(4,38,29,.26),0 6px 20px rgba(4,38,29,.12)}.modal-overlay[data-confirm-tone="impersonate"] .confirm-modal .modal-header{min-height:134px;padding:30px 40px 22px;border-bottom:1px solid #dce5df;background:#fff}.modal-overlay[data-confirm-tone="impersonate"] .confirm-kicker{color:#bd7800;font-size:11px;letter-spacing:.15em}.modal-overlay[data-confirm-tone="impersonate"] .modal-title{margin-top:5px;font-size:32px;letter-spacing:-.035em;color:#10372b}.modal-overlay[data-confirm-tone="impersonate"] .modal-close{width:48px;height:48px;background:#f1f6f3;color:#5d746b;font-size:28px}.modal-overlay[data-confirm-tone="impersonate"] .modal-body{padding:24px 40px 26px}.modal-overlay[data-confirm-tone="impersonate"] .confirm-message-layout{grid-template-columns:72px 1fr;gap:20px;padding:24px;border-color:#f0d8a4;border-radius:15px;background:linear-gradient(135deg,#fffdfa,#fff7e9)}.modal-overlay[data-confirm-tone="impersonate"] .confirm-symbol{width:66px;height:66px;border-radius:50%;background:#f8dfad;color:#143d30;box-shadow:none;font-size:0}.modal-overlay[data-confirm-tone="impersonate"] .confirm-symbol::before{content:"→";font:500 35px/1 Inter,system-ui,sans-serif}.modal-overlay[data-confirm-tone="impersonate"] .confirm-message-copy>p{font-size:19px;font-weight:800;line-height:1.35;color:#163a2e}.modal-overlay[data-confirm-tone="impersonate"] .confirm-message-copy small{max-width:none;margin-top:8px;color:#3e5d51;font-size:15px;line-height:1.45}.modal-overlay[data-confirm-tone="impersonate"] .confirm-security-note{align-items:center;gap:18px;margin-top:16px;padding:20px 24px;border-color:#d9e8e1;border-radius:14px;background:linear-gradient(135deg,#f5faf7,#fbfcfb);color:#14392d;font-size:16px;font-weight:800}.modal-overlay[data-confirm-tone="impersonate"] .confirm-security-icon{width:56px;height:56px;flex-basis:56px;background:#dcefe5;color:#0e5b43;font-size:0}.modal-overlay[data-confirm-tone="impersonate"] .confirm-security-icon::before{content:"♢";font:700 36px/1 Georgia,serif}.modal-overlay[data-confirm-tone="impersonate"] .modal-footer{min-height:112px;padding:22px 40px;border-top:1px solid #dce5df;background:#fff}.modal-overlay[data-confirm-tone="impersonate"] .modal-footer .btn{min-width:164px;min-height:60px;border-radius:11px;font-size:17px}.modal-overlay[data-confirm-tone="impersonate"] .confirm-cancel{border-color:#a8c7b9;color:#164638;background:#fff}.modal-overlay[data-confirm-tone="impersonate"] .confirm-submit{min-width:254px;border-color:#cf9000;background:#d49300;color:#fff;box-shadow:none}.modal-overlay[data-confirm-tone="impersonate"] .confirm-submit:hover{background:#bb8100} @media(max-width:650px){.modal-overlay[data-confirm-tone="impersonate"] .confirm-modal .modal-header{min-height:auto;padding:24px 22px 18px}.modal-overlay[data-confirm-tone="impersonate"] .modal-title{font-size:25px}.modal-overlay[data-confirm-tone="impersonate"] .modal-body{padding:18px 22px}.modal-overlay[data-confirm-tone="impersonate"] .confirm-message-layout{grid-template-columns:52px 1fr;gap:14px;padding:18px}.modal-overlay[data-confirm-tone="impersonate"] .confirm-symbol{width:52px;height:52px}.modal-overlay[data-confirm-tone="impersonate"] .confirm-symbol::before{font-size:27px}.modal-overlay[data-confirm-tone="impersonate"] .confirm-message-copy>p{font-size:16px}.modal-overlay[data-confirm-tone="impersonate"] .confirm-message-copy small{font-size:13px}.modal-overlay[data-confirm-tone="impersonate"] .confirm-security-note{padding:16px;font-size:14px}.modal-overlay[data-confirm-tone="impersonate"] .modal-footer{padding:16px 22px}.modal-overlay[data-confirm-tone="impersonate"] .confirm-submit{min-width:0}} @media(max-width:520px){.confirm-modal .modal-footer{flex-direction:column-reverse}.confirm-modal .modal-footer .btn{width:100%}.modal-overlay[data-confirm-tone="impersonate"] .confirm-submit{min-width:0}} .modal-overlay[data-confirm-tone="danger"] .confirm-kicker{color:var(--danger)}.modal-overlay[data-confirm-tone="danger"] .confirm-symbol,.modal-overlay[data-confirm-tone="danger"] .confirm-submit{border-color:var(--danger);background:var(--danger);box-shadow:0 7px 16px color-mix(in srgb,var(--danger) 22%,transparent)}.modal-overlay[data-confirm-tone="danger"] .confirm-message-layout{border-color:color-mix(in srgb,var(--danger) 25%,var(--border));background:color-mix(in srgb,var(--danger) 5%,var(--panel))} .confirm-impact{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:10px;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.24);color:var(--muted);font-size:12px} .confirm-impact strong{color:var(--text);font-size:13px} .confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px} .table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px} .table th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);text-align:left;padding:10px 14px;position:sticky;top:0;z-index:2;background:var(--panel);border-bottom:2px solid var(--border);font-weight:700;white-space:nowrap} .table td{padding:14px;border-bottom:1px solid var(--border);color:var(--text);transition:background .15s,border-color .15s;vertical-align:middle} .table tbody tr{transition:background .15s} .table tbody tr:hover{background:rgba(6,78,59,.04)} html[data-theme="dark"] .table tbody tr:hover{background:rgba(255,255,255,.04)} .table tbody tr:last-child td{border-bottom:none} .table .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600} .table .subtle{color:var(--muted);font-weight:500} .table-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .form{display:grid;gap:14px} .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} label{font-size:13px;font-weight:600;color:var(--text);display:block;margin-bottom:6px} input,select,textarea{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s,background .2s} input:focus,select:focus,textarea:focus{border-color:var(--admin-brand);box-shadow:0 0 0 3px rgba(6,78,59,.12)} html[data-theme="dark"] input:focus,html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{box-shadow:0 0 0 3px rgba(16,185,129,.15)} select,select option,select optgroup{color:var(--text)} select option,select optgroup{background:var(--panel)} textarea{min-height:90px;resize:vertical} .input-group{display:flex;align-items:stretch} .input-group input{flex:1;border-top-right-radius:0;border-bottom-right-radius:0} .input-suffix{display:flex;align-items:center;padding:0 12px;background:var(--surface);border:1px solid var(--border);border-left:none;border-top-right-radius:12px;border-bottom-right-radius:12px;color:var(--muted);font-size:13px;font-weight:700} .switch{position:relative;display:inline-block;width:44px;height:24px} .switch input{opacity:0;width:0;height:0} .slider{position:absolute;cursor:pointer;inset:0;background-color:var(--border);transition:.4s;border-radius:24px} .slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:white;transition:.4s;border-radius:50%} input:checked + .slider{background-color:var(--success)} input:checked + .slider:before{transform:translateX(20px)} .tab-nav{display:flex;gap:10px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;padding-bottom:2px} .tab-item{display:flex;align-items:center;gap:8px;padding:10px 16px;color:var(--muted);font-weight:700;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s} .tab-item:hover{color:var(--text);background:rgba(6,78,59,.04)} .tab-item.active{color:var(--admin-brand);border-bottom-color:var(--admin-brand)} .reports-empty{text-align:center;padding:48px 24px;color:var(--muted)} .reports-empty-title{font-family:Manrope,Inter,system-ui;font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px} .reports-empty-desc{font-size:13px;line-height:1.6;max-width:420px;margin:0 auto} .segmented{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end} .segmented-item{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-weight:700;font-size:13px;transition:all .2s} .segmented-item:hover{background:var(--surface);color:var(--text)} .segmented-item.active{border-color:var(--admin-brand);background:rgba(6,78,59,.08);color:var(--admin-brand)} html[data-theme="dark"] .segmented-item{background:var(--panel);color:var(--muted)} html[data-theme="dark"] .segmented-item.active{background:rgba(16,185,129,.1);border-color:var(--admin-brand);color:var(--admin-brand)} .alert{padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.04);margin:0 0 14px} .alert-info{border-color:rgba(22,96,255,.35);box-shadow:inset 4px 0 0 rgba(22,96,255,.30)} .alert-success{border-color:rgba(27,168,90,.35);box-shadow:inset 4px 0 0 rgba(27,168,90,.30)} .alert-danger{border-color:rgba(214,69,69,.45);box-shadow:inset 4px 0 0 rgba(214,69,69,.30)} .alert-warning{border-color:rgba(244,167,54,.35);box-shadow:inset 4px 0 0 rgba(244,167,54,.30)} /* Premium system notices */ .notice{--notice-accent:#2563eb;--notice-soft:rgba(37,99,235,.1);position:relative;isolation:isolate;display:grid;grid-template-columns:48px minmax(0,1fr) 36px;align-items:center;gap:14px;margin:0 0 20px;padding:17px 16px 17px 18px;overflow:hidden;border:1px solid color-mix(in srgb,var(--notice-accent) 24%,var(--border));border-radius:18px;background:linear-gradient(115deg,color-mix(in srgb,var(--notice-accent) 7%,var(--surface)) 0%,var(--surface) 52%,color-mix(in srgb,var(--notice-accent) 3%,var(--surface)) 100%);box-shadow:0 12px 32px rgba(15,23,42,.07),inset 0 1px 0 rgba(255,255,255,.72);animation:notice-enter .34s cubic-bezier(.22,.8,.32,1) both} .notice::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,color-mix(in srgb,var(--notice-accent) 55%,#fff),var(--notice-accent))} .notice::after{content:"";position:absolute;z-index:-1;width:180px;height:180px;right:52px;top:-115px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--notice-accent) 10%,transparent),transparent 68%);pointer-events:none} .notice-success{--notice-accent:#059669;--notice-soft:rgba(5,150,105,.11)} .notice-warning{--notice-accent:#d97706;--notice-soft:rgba(217,119,6,.11)} .notice-danger{--notice-accent:#dc2626;--notice-soft:rgba(220,38,38,.1)} .notice-info{--notice-accent:#2563eb;--notice-soft:rgba(37,99,235,.1)} .notice-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid color-mix(in srgb,var(--notice-accent) 19%,transparent);border-radius:14px;background:var(--notice-soft);color:var(--notice-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)} .notice-icon svg{width:22px;height:22px} .notice-copy{min-width:0} .notice-eyebrow{margin:0 0 3px;color:var(--notice-accent);font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase} .notice-title{color:var(--text);font-family:Manrope,Inter,system-ui,sans-serif;font-size:15px;font-weight:850;line-height:1.3;letter-spacing:-.01em} .notice-message{margin-top:3px;color:var(--muted);font-size:12.5px;line-height:1.5} .notice-dismiss{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease} .notice-dismiss:hover{background:var(--notice-soft);color:var(--notice-accent);transform:scale(1.04)} .notice-dismiss svg{width:17px;height:17px} .notice-welcome{padding-block:19px;background:linear-gradient(120deg,color-mix(in srgb,var(--notice-accent) 9%,var(--surface)),var(--surface) 46%,color-mix(in srgb,#d4af37 6%,var(--surface)));box-shadow:0 16px 38px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.76)} .notice-welcome .notice-icon{border-radius:15px;background:linear-gradient(145deg,var(--notice-accent),color-mix(in srgb,var(--notice-accent) 70%,#0f172a));color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--notice-accent) 24%,transparent)} .notice-welcome .notice-title{font-size:17px} html[data-theme="dark"] .notice{box-shadow:0 15px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04)} html[data-theme="dark"] .notice-icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} @keyframes notice-enter{from{opacity:0;transform:translateY(-7px) scale(.992)}to{opacity:1;transform:none}} @media(max-width:640px){.notice{grid-template-columns:42px minmax(0,1fr) 32px;gap:11px;padding:14px 12px 14px 14px;border-radius:15px}.notice-icon{width:40px;height:40px;border-radius:12px}.notice-welcome .notice-title{font-size:15px}.notice-message{font-size:12px}} .logo-thumb{width:36px;height:36px;border-radius:10px;object-fit:contain;border:1px solid var(--border);background:rgba(255,255,255,.02)} .auth-shell{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px} .auth-card{max-width:460px;width:100%;overflow:hidden} .auth-header{padding:18px;background:linear-gradient(135deg,rgba(22,96,255,.14),rgba(27,168,90,.10));border-bottom:1px solid var(--border)} .auth-title{font-size:20px;font-weight:900;margin:0} .auth-sub{margin:6px 0 0;color:var(--muted)} .auth-body{padding:18px} .lp-nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;transition:background .3s var(--ease),padding .3s var(--ease),box-shadow .3s var(--ease)} .lp-nav.scrolled{background:rgba(11,18,32,.9);-webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.1);padding:10px 0} html[data-theme="dark"] .lp-nav.scrolled{background:rgba(11,18,32,.9)} .lp-nav-inner{max-width:1280px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:16px} .lp-brand{display:flex;align-items:center;gap:10px;font-family:Manrope,Inter,system-ui;font-weight:900;font-size:18px;letter-spacing:-.02em;color:#fff} .lp-brand-logo{display:flex;align-items:center;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.3)} .lp-links{display:flex;gap:28px;align-items:center} .lp-links a{color:rgba(255,255,255,.85);font-weight:600;font-size:14px;transition:color var(--transition);text-shadow:0 1px 4px rgba(0,0,0,.4)} .lp-links a:hover{color:#fff} .lp-nav-actions{display:flex;gap:10px;align-items:center} /* Old blue landing page CSS removed - replaced by modern emerald green rules below */ .auth-split{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr 1fr} .auth-brand{display:flex;flex-direction:column;justify-content:center;padding:60px;position:relative;overflow:hidden;min-height:100vh;min-height:100dvh} .auth-brand-bg{position:absolute;width:100%;height:100%;object-fit:cover;opacity:1} .auth-brand-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(6,78,59,.8),rgba(6,78,59,.6))} .auth-brand-content{position:relative;z-index:1} .auth-brand-logo{display:flex;align-items:center;gap:14px;margin-bottom:40px} .auth-brand-name{font-family:Manrope,Inter,system-ui;font-weight:900;font-size:24px;color:#fff;letter-spacing:-.02em;text-shadow:0 2px 8px rgba(0,0,0,.4)} .auth-brand-h1{font-family:Manrope,Inter,system-ui;font-size:clamp(32px,4vw,48px);font-weight:900;color:#fff;line-height:1.1;letter-spacing:-.03em;text-shadow:0 2px 12px rgba(0,0,0,.5);margin:0} .auth-brand-p{color:rgba(255,255,255,.9);font-size:17px;line-height:1.6;margin-top:16px;max-width:44ch;text-shadow:0 1px 6px rgba(0,0,0,.4)} .auth-brand-features{display:flex;flex-direction:column;gap:16px;margin-top:40px} .auth-brand-feat{display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.9);font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.3)} .auth-feat-icon{width:36px;height:36px;border-radius:10px;background:rgba(212,175,55,.2);border:1px solid rgba(212,175,55,.3);display:flex;align-items:center;justify-content:center;color:#d4af37;flex-shrink:0} .auth-brand-footer{margin-top:auto;padding-top:40px;display:flex;flex-direction:column;gap:12px} .auth-footer-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(255,255,255,.15);border-radius:8px;font-size:12px;font-weight:600;color:#d1fae5;width:fit-content;backdrop-filter:blur(4px)} .auth-brand-footer p{color:rgba(255,255,255,.6);font-size:13px;margin:0} .auth-form{display:flex;flex-direction:column;justify-content:center;padding:60px;max-width:480px;margin:0 auto;width:100%} .auth-form-inner{width:100%} .auth-form-logo{margin-bottom:32px} .auth-form-header{margin-bottom:32px} .auth-form-title{font-family:Manrope,Inter,system-ui;font-weight:900;font-size:32px;color:#064e3b;letter-spacing:-.03em;margin:0} .auth-form-sub{color:#6b7280;font-size:15px;margin-top:8px} .auth-field{margin-bottom:20px} .auth-label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:8px} .auth-input-wrap{position:relative} .auth-input-wrap .input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#9ca3af;pointer-events:none} .auth-input-wrap input{padding:14px 14px 14px 46px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;color:#1f2937;width:100%;outline:none;transition:all .2s;font-size:15px} .auth-input-wrap input:focus{border-color:#064e3b;box-shadow:0 0 0 4px rgba(6,78,59,.1)} .auth-input-wrap input::placeholder{color:#9ca3af} .auth-password-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:#9ca3af;cursor:pointer;padding:6px;border-radius:6px;display:flex;align-items:center;transition:all .15s ease} .auth-password-toggle:hover{color:#374151;background:rgba(0,0,0,.04)} .auth-password-toggle:active{transform:translateY(-50%) scale(.9)} .auth-options{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:24px} .auth-remember{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:#6b7280} .auth-remember input[type="checkbox"]{width:16px;height:16px;accent-color:#064e3b} .auth-forgot{font-size:14px;color:#064e3b;font-weight:600;text-decoration:none} .auth-forgot:hover{text-decoration:underline} .auth-error{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:#fef2f2;border:1px solid #fecaca;color:#dc2626;font-size:14px;margin-bottom:20px} .auth-error svg{width:18px;height:18px;flex-shrink:0} .auth-sacco-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:#d1fae5;border:1px solid #a7f3d0;color:#065f46;font-size:13px;font-weight:600;margin-bottom:20px} .auth-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 24px;border-radius:12px;background:#064e3b;color:#fff;font-family:inherit;font-size:15px;font-weight:700;border:none;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px rgba(6,78,59,.25);line-height:1.4} .auth-submit:hover{background:#065f46;transform:translateY(-1px);box-shadow:0 6px 20px rgba(6,78,59,.3)} .auth-submit:active{transform:translateY(0);box-shadow:0 2px 6px rgba(6,78,59,.2)} .auth-submit:disabled{opacity:.5;cursor:not-allowed;pointer-events:none} .auth-divider{display:flex;align-items:center;gap:16px;margin:24px 0;color:#9ca3af;font-size:13px} .auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:#e5e7eb} .auth-back-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 24px;border-radius:12px;background:#fff;color:#374151;font-family:inherit;font-size:15px;font-weight:700;border:1px solid #e5e7eb;cursor:pointer;text-decoration:none;transition:all .2s ease;line-height:1.4} .auth-back-btn:hover{background:#f9fafb;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)} .auth-back-btn:active{transform:translateY(0)} .auth-theme-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;background:transparent;color:#6b7280;font-family:inherit;font-size:13px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:all .15s ease} .auth-theme-btn:hover{background:rgba(0,0,0,.04);color:#374151;border-color:rgba(0,0,0,.08)} .auth-theme-btn:active{transform:scale(.97)} .auth-footer-link{text-align:center;margin-top:24px} .otp-boxes{display:flex;gap:12px;justify-content:center;margin-bottom:20px} .otp-box{width:52px;height:60px;text-align:center;font-family:Manrope,Inter,system-ui;font-size:24px;font-weight:900;border-radius:12px;border:2px solid var(--border);background:var(--surface);color:var(--text);outline:none;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)} .otp-box:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring);transform:translateY(-2px)} .otp-box.filled{border-color:var(--success);background:rgba(27,168,90,.06)} .otp-box.error{border-color:var(--danger);box-shadow:0 0 0 4px rgba(214,69,69,.15)} .reveal{opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .reveal.revealed{opacity:1;transform:translateY(0)} .reveal-delay-1{transition-delay:.1s} .reveal-delay-2{transition-delay:.2s} .reveal-delay-3{transition-delay:.3s} .reveal-delay-4{transition-delay:.4s} .reveal-delay-5{transition-delay:.5s} @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} @keyframes modalBgIn{from{opacity:0}to{opacity:1}} @keyframes modalBgIn{from{opacity:0}to{opacity:1}} @keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}} .animate-in{animation:fadeIn .5s var(--ease) forwards} /* ===== Super Admin - Users ===== */ .sa-role-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap} .sa-role-badge.super-admin{background:rgba(22,96,255,.14);color:var(--brand);border:1px solid rgba(22,96,255,.30)} .sa-role-badge.sacco-admin{background:rgba(27,168,90,.14);color:var(--success);border:1px solid rgba(27,168,90,.30)} .sa-role-badge.sacco-input{background:rgba(244,167,54,.14);color:var(--warning);border:1px solid rgba(244,167,54,.30)} .sa-role-badge.sacco-approver{background:rgba(139,92,246,.14);color:#8b5cf6;border:1px solid rgba(139,92,246,.30)} .sa-role-badge.member{background:rgba(13,148,136,.14);color:#0d9488;border:1px solid rgba(13,148,136,.30)} .sa-role-badge.prospect{background:rgba(98,125,152,.14);color:var(--muted);border:1px solid rgba(98,125,152,.25)} .sa-accent-card{overflow:hidden} .sa-accent-card .card-header{position:relative} .sa-accent-card .card-header:before{content:"";position:absolute;top:0;left:0;right:0;height:3px} .sa-accent-card.accent-amber .card-header:before{background:linear-gradient(90deg,var(--warning),rgba(244,167,54,.3))} .sa-accent-card.accent-green .card-header:before{background:linear-gradient(90deg,var(--success),rgba(27,168,90,.3))} .sa-accent-card.accent-blue .card-header:before{background:linear-gradient(90deg,var(--brand),rgba(22,96,255,.3))} .sa-search-wrap{position:relative;display:flex;align-items:center} .sa-search-wrap .sa-search-icon{position:absolute;left:12px;width:16px;height:16px;color:var(--muted);pointer-events:none;opacity:.6} .sa-search-wrap input{padding-left:36px;padding-right:12px;min-width:200px} .sa-action-dots{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease;font-size:16px} .sa-action-dots:hover{border-color:var(--admin-brand);color:var(--admin-brand);background:rgba(6,78,59,.05);transform:scale(1.05)} .sa-action-dots:active{transform:scale(.95)} .sa-action-dots:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(6,78,59,.15)} .sa-code-display{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;font-size:13px;font-weight:700;letter-spacing:.04em;padding:6px 10px;border-radius:8px;background:rgba(22,96,255,.06);border:1px solid rgba(22,96,255,.15);color:var(--brand);display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums} .sa-summary-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .sa-summary-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel);font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .15s ease} .sa-summary-chip:hover{border-color:var(--admin-brand);color:var(--admin-brand);background:rgba(6,78,59,.04)} .sa-summary-chip:active{transform:scale(.97)} .sa-summary-chip .chip-dot{width:8px;height:8px;border-radius:50%} .sa-summary-chip .chip-dot.blue{background:var(--brand)} .sa-summary-chip .chip-dot.green{background:var(--success)} .sa-summary-chip .chip-dot.amber{background:var(--warning)} .sa-summary-chip .chip-dot.purple{background:#8b5cf6} .sa-summary-chip .chip-dot.teal{background:#0d9488} .sa-summary-chip .chip-dot.gray{background:var(--muted)} .sa-reset-actions{display:flex;gap:6px;flex-wrap:wrap} .sa-reset-actions .btn{padding:6px 12px;font-size:11px;border-radius:6px;font-weight:700} /* ===== Super Admin - Dashboard ===== */ .sa-dash-welcome{position:relative;border-radius:20px;overflow:hidden;margin-bottom:24px} .sa-dash-welcome-bg{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.2} .sa-dash-welcome-overlay{position:absolute;inset:0;background:linear-gradient(135deg,var(--admin-brand),var(--admin-brand-dark));opacity:.9} .sa-dash-welcome-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:32px 36px} .sa-dash-welcome-left{display:flex;align-items:center;gap:16px} .sa-dash-welcome-logo{flex-shrink:0} .sa-dash-welcome-h1{font-family:Manrope,Inter,system-ui;font-size:clamp(22px,3vw,28px);font-weight:900;color:#fff;letter-spacing:-.02em;margin:0} .sa-dash-welcome-sub{color:rgba(255,255,255,.7);font-size:14px;margin-top:4px} .sa-dash-welcome-badges{display:flex;gap:8px;flex-wrap:wrap} .sa-dash-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .sa-dash-badge.production{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);color:#d1fae5;backdrop-filter:blur(4px)} .sa-dash-badge.development{background:rgba(212,175,55,.2);border:1px solid rgba(212,175,55,.3);color:#fbbf24;backdrop-filter:blur(4px)} .sa-dash-badge.php{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);backdrop-filter:blur(4px)} .sa-dash-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--success);animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} .sa-dash-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px} .sa-dash-kpi-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;align-items:flex-start;gap:16px;transition:transform .2s,box-shadow .2s} .sa-dash-kpi-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)} .sa-dash-kpi-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .sa-dash-kpi-icon.emerald{background:rgba(6,78,59,.12);color:var(--admin-brand)} .sa-dash-kpi-icon.blue{background:rgba(22,96,255,.12);color:var(--brand)} .sa-dash-kpi-icon.gold{background:rgba(212,175,55,.12);color:var(--admin-accent)} .sa-dash-kpi-icon.purple{background:rgba(124,58,237,.12);color:#7c3aed} .sa-dash-kpi-content{flex:1;min-width:0} .sa-dash-kpi-label{font-size:13px;color:var(--muted);font-weight:500} .sa-dash-kpi-value{font-family:Manrope,Inter,system-ui;font-size:28px;font-weight:900;color:var(--admin-brand);margin:4px 0;font-variant-numeric:tabular-nums} .sa-dash-kpi-text{font-size:20px} .sa-dash-kpi-sub{font-size:12px;color:var(--muted)} .sa-dash-two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px} .sa-dash-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px} .sa-dash-panel-header{display:flex;align-items:center;gap:10px;margin-bottom:20px} .sa-dash-panel-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .sa-dash-panel-icon.emerald{background:rgba(6,78,59,.12);color:var(--admin-brand)} .sa-dash-panel-icon.blue{background:rgba(22,96,255,.12);color:var(--brand)} .sa-dash-panel-title{font-size:16px;font-weight:800;color:var(--admin-brand);margin:0} .sa-dash-health-live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--admin-brand)} .sa-dash-live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 2s infinite} .sa-dash-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .sa-dash-action-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);text-decoration:none;transition:all .2s;cursor:pointer} .sa-dash-action-card:hover{border-color:var(--admin-brand);box-shadow:0 4px 12px rgba(6,78,59,.1);transform:translateY(-2px)} .sa-dash-action-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .sa-dash-action-icon.blue{background:rgba(22,96,255,.12);color:var(--brand)} .sa-dash-action-icon.emerald{background:rgba(6,78,59,.12);color:var(--admin-brand)} .sa-dash-action-icon.gold{background:rgba(212,175,55,.12);color:var(--admin-accent)} .sa-dash-action-icon.purple{background:rgba(124,58,237,.12);color:#7c3aed} .sa-dash-action-text{flex:1;min-width:0} .sa-dash-action-title{font-weight:700;font-size:13px;color:var(--text)} .sa-dash-action-sub{font-size:11px;color:var(--muted);margin-top:2px} .sa-dash-action-arrow{color:var(--muted);flex-shrink:0;transition:color .2s} .sa-dash-action-card:hover .sa-dash-action-arrow{color:var(--admin-brand)} .sa-dash-health-list{display:flex;flex-direction:column;gap:0} .sa-dash-health-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)} .sa-dash-health-row:last-child{border-bottom:none} .sa-dash-health-left{display:flex;align-items:center;gap:10px} .sa-dash-health-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .sa-dash-health-dot.green{background:var(--success)} .sa-dash-health-dot.amber{background:var(--warning)} .sa-dash-health-dot.red{background:var(--danger)} .sa-dash-health-label{font-size:13px;color:var(--muted)} .sa-dash-health-value{font-weight:700;font-size:13px;color:var(--text)} .sa-dash-health-pill{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700} .sa-dash-health-pill.green{background:rgba(6,78,59,.12);color:var(--admin-brand)} .sa-dash-health-pill.amber{background:rgba(245,158,11,.12);color:var(--warning)} .sa-dash-health-tip{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 14px;border-radius:10px;background:rgba(6,78,59,.06);border:1px solid rgba(6,78,59,.15);font-size:12px;color:var(--admin-brand);line-height:1.5} .sa-dash-health-tip svg{flex-shrink:0;margin-top:1px} /* ===== Super Admin - Requests ===== */ .sa-kpi-chips{display:flex;gap:10px;flex-wrap:wrap} .sa-kpi-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:14px;border:1px solid var(--border);background:var(--surface);transition:transform var(--transition),box-shadow var(--transition);cursor:default} .sa-kpi-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)} .sa-kpi-chip .chip-value{font-family:Manrope,Inter,system-ui;font-weight:900;font-size:22px;line-height:1;font-variant-numeric:tabular-nums} .sa-kpi-chip .chip-label{font-size:12px;color:var(--muted)} .sa-kpi-chip.pending{border-color:rgba(244,167,54,.30)} .sa-kpi-chip.pending .chip-value{color:var(--warning)} .sa-kpi-chip.approved{border-color:rgba(27,168,90,.30)} .sa-kpi-chip.approved .chip-value{color:var(--success)} .sa-kpi-chip.rejected{border-color:rgba(214,69,69,.30)} .sa-kpi-chip.rejected .chip-value{color:var(--danger)} .sa-status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800} .sa-status-badge.pending{background:rgba(244,167,54,.14);color:var(--warning);border:1px solid rgba(244,167,54,.30)} .sa-status-badge.approved{background:rgba(27,168,90,.14);color:var(--success);border:1px solid rgba(27,168,90,.30)} .sa-status-badge.rejected{background:rgba(214,69,69,.14);color:var(--danger);border:1px solid rgba(214,69,69,.30)} /* ===== Super Admin - Settings ===== */ .sa-settings-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap} .sa-settings-title{font-size:28px;font-weight:700;color:var(--admin-brand);margin:0} .sa-settings-subtitle{color:var(--muted);font-size:15px;margin:4px 0 0} .sa-settings-dropdown{position:relative} .sa-settings-select{appearance:none;padding:10px 40px 10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--panel);font-size:14px;font-weight:600;color:var(--text);cursor:pointer;outline:none;transition:all .2s;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center} .sa-settings-select:focus{border-color:var(--admin-brand);box-shadow:0 0 0 3px rgba(6,78,59,.1)} .sa-settings-select:hover{border-color:var(--muted)} .sa-settings-nav{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:24px;overflow-x:auto;padding-bottom:0;-webkit-overflow-scrolling:touch} .sa-settings-nav-item{display:flex;align-items:center;gap:6px;padding:10px 16px;color:var(--muted);font-weight:600;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s ease;border-radius:0;text-decoration:none;font-family:inherit} .sa-settings-nav-item:hover{color:var(--text);background:rgba(6,78,59,.04)} .sa-settings-nav-item.active{color:var(--admin-brand);border-bottom-color:var(--admin-accent);font-weight:700} .sa-section-card{overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--panel)} .sa-section-card.section-blue{border-top:3px solid var(--brand)} .sa-section-card.section-green{border-top:3px solid var(--admin-brand)} .sa-section-card.section-amber{border-top:3px solid var(--admin-accent)} .sa-section-card.section-red{border-top:3px solid var(--danger)} .sa-section-card.section-purple{border-top:3px solid #7c3aed} .sa-section-card .sa-section-header{display:flex;align-items:center;gap:10px;margin-bottom:0} .sa-section-card .sa-section-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .sa-section-card .sa-section-icon.blue{background:rgba(22,96,255,.12);color:var(--brand)} .sa-section-card .sa-section-icon.green{background:rgba(6,78,59,.12);color:var(--admin-brand)} .sa-section-card .sa-section-icon.amber{background:rgba(212,175,55,.12);color:var(--admin-accent)} .sa-section-card .sa-section-icon.red{background:rgba(214,69,69,.12);color:var(--danger)} .sa-section-card .sa-section-title{font-weight:700;font-size:15px;color:var(--text)} .sa-section-card .sa-section-sub{font-size:12px;color:var(--muted)} .sa-section-card .card-header{padding:16px 20px;border-bottom:1px solid var(--border)} .sa-section-card .card-body{padding:20px} .sa-settings-save{display:flex;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--border)} .sa-backup-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .sa-backup-card{border:1px solid var(--border);border-radius:16px;padding:20px;background:var(--panel);display:flex;flex-direction:column;gap:12px} /* Settings Section Visibility */ .settings-section{display:none} .settings-section.active{display:block} /* ===== Toast Notifications ===== */ .toast-container{position:fixed;bottom:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:10px;pointer-events:none} .toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);font-size:13px;font-weight:600;animation:toastIn .35s ease;max-width:380px} .toast.removing{animation:toastOut .3s ease forwards} .toast-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center} .toast-success .toast-icon{background:rgba(27,168,90,.12);color:var(--success)} .toast-error .toast-icon{background:rgba(214,69,69,.12);color:var(--danger)} .toast-info .toast-icon{background:rgba(22,96,255,.12);color:var(--brand)} .toast-success{border-left:3px solid var(--success)} .toast-error{border-left:3px solid var(--danger)} .toast-info{border-left:3px solid var(--brand)} @keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}} @keyframes toastOut{to{opacity:0;transform:translateX(40px)}} /* ===== Breadcrumbs ===== */ .breadcrumbs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);flex-wrap:wrap} .breadcrumbs a{color:var(--muted);transition:color var(--transition)} .breadcrumbs a:hover{color:var(--brand)} .breadcrumbs .sep{opacity:.4;font-size:11px} .breadcrumbs .current{color:var(--text);font-weight:600} /* ===== Nav Badge ===== */ .nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:800;background:var(--danger);color:#fff;margin-left:auto} .nav-badge.warn{background:var(--warning);color:#1a1a1a} /* ===== Impersonation Banner ===== */ .impersonation-banner{background:linear-gradient(90deg,rgba(244,167,54,.15),rgba(244,167,54,.05));border-bottom:1px solid rgba(244,167,54,.3);padding:8px 20px;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;color:var(--warning);gap:12px;flex-wrap:wrap} .impersonation-banner .stop-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--danger);color:#fff;border:none;border-radius:8px;padding:6px 16px;font-weight:700;cursor:pointer;font-size:12px;font-family:inherit;transition:all .15s ease;box-shadow:0 1px 3px rgba(214,69,69,.2)} .impersonation-banner .stop-btn:hover{background:#c53030;transform:translateY(-1px);box-shadow:0 4px 12px rgba(214,69,69,.25)} .impersonation-banner .stop-btn:active{transform:translateY(0)} /* ===== Table Inline Actions ===== */ .table-row-actions{display:flex;gap:4px;align-items:center;justify-content:flex-end} /* ===== Drawer ===== */ .drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1200;display:none;align-items:stretch;justify-content:flex-end} .drawer-overlay.open{display:flex;animation:modalBgIn .25s ease} .drawer{width:min(600px,90vw);background:var(--panel);border-left:1px solid var(--border);box-shadow:-8px 0 30px rgba(0,0,0,.15);overflow:auto;animation:drawerIn .3s ease} .drawer-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--panel);z-index:1} .drawer-title{font-weight:900;font-size:16px} .drawer-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .15s ease;font-size:18px} .drawer-close:hover{color:var(--danger);background:rgba(214,69,69,.06)} .drawer-close:active{transform:scale(.9)} .drawer-body{padding:20px} @keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}} /* ===== Nav Sidebar Groups (always open) ===== */ .nav-group-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;padding:12px 12px 4px;cursor:default} .nav-group-items{display:flex;flex-direction:column;gap:2px;padding:0 0 4px} /* ===== Inline Toggle ===== */ .inline-toggle{position:relative;width:40px;height:22px;display:inline-block} .inline-toggle input{opacity:0;width:0;height:0;position:absolute} .inline-toggle .toggle-track{position:absolute;inset:0;background:var(--border);border-radius:22px;cursor:pointer;transition:background .3s ease} .inline-toggle input:checked + .toggle-track{background:var(--success)} .inline-toggle .toggle-track:before{content:"";position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:white;border-radius:50%;transition:transform .3s ease} .inline-toggle input:checked + .toggle-track:before{transform:translateX(18px)} /* ===== Skeleton Loader ===== */ .skeleton{background:linear-gradient(90deg,var(--surface) 25%,rgba(22,96,255,.06) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px} .skeleton-text{height:14px;margin-bottom:8px} .skeleton-text:last-child{width:60%} .skeleton-card{height:80px;border-radius:14px} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} /* ===== Delta Indicators ===== */ .kpi-delta{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700} .kpi-delta.up{color:var(--success)} .kpi-delta.down{color:var(--danger)} .kpi-delta.flat{color:var(--muted)} /* ===== Pending Action Cards ===== */ .pending-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .pending-card{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--surface);display:flex;align-items:center;gap:14px;text-decoration:none;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);cursor:pointer} .pending-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:rgba(22,96,255,.25)} .pending-count{font-family:Manrope,Inter,system-ui;font-weight:900;font-size:28px;line-height:1;font-variant-numeric:tabular-nums} .pending-label{font-size:13px;color:var(--muted);font-weight:600} .pending-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .pending-icon.blue{background:rgba(22,96,255,.12);color:var(--brand)} .pending-icon.green{background:rgba(27,168,90,.12);color:var(--success)} .pending-icon.amber{background:rgba(244,167,54,.12);color:var(--warning)} /* ===== Focus Visible ===== */ *:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px} .nav-item:focus-visible{outline-offset:4px} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none} /* ─── Member Top Navigation ─── */ .member-topnav{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:100;height:60px;box-shadow:0 1px 3px rgba(0,0,0,.03)} .member-topnav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:100%} .member-topnav-left{display:flex;align-items:center} .member-topnav-brand{display:flex;align-items:center;gap:10px;text-decoration:none} .member-topnav-logo{height:36px;width:auto;object-fit:contain} .member-topnav-logo-dot{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#064e3b,#065f46)} .member-topnav-brand-text{font-size:18px;font-weight:700;color:#064e3b} .member-topnav-links{display:flex;gap:8px;align-items:center} .member-topnav-link{padding:8px 16px;font-size:14px;font-weight:500;color:#6b7280;text-decoration:none;border-radius:8px;transition:all .2s;position:relative} .member-topnav-link:hover{color:#064e3b;background:#f3f4f6} .member-topnav-link.active{color:#064e3b;font-weight:600;background:#d1fae5} .member-topnav-link.active::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:20px;height:2px;background:#064e3b;border-radius:1px} .member-topnav-right{display:flex;align-items:center;gap:12px} .member-topnav-profile{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:500;color:#374151;text-decoration:none;border-radius:8px;border:1px solid #e5e7eb;transition:all .2s} .member-topnav-profile:hover{background:#f9fafb;border-color:#d1d5db} .member-topnav-signout{padding:8px 18px;font-size:13px;font-weight:600;color:#fff;background:#064e3b;border:none;border-radius:8px;text-decoration:none;transition:all .2s} .member-topnav-signout:hover{background:#065f46;transform:scale(.98)} .member-shell{grid-template-columns:1fr} .member-shell .app-main{margin:0;padding:0} @media(max-width:820px){ .member-topnav-inner{padding:0 16px} .member-topnav-links{display:none} .member-topnav-brand-text{font-size:15px} } @media(min-width:821px){ .member-shell .bottom-nav{display:none !important} } /* ─── Super Admin Shell & Topnav ─── */ .sa-shell{grid-template-columns:1fr} .sa-shell .app-main{margin:0;padding:0} .sa-topnav{position:sticky;top:0;z-index:100;background:var(--admin-brand);border-bottom:1px solid rgba(255,255,255,.1);height:60px} .sa-topnav-inner{max-width:1280px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px} .sa-topnav-left{display:flex;align-items:center} .sa-topnav-brand{display:flex;align-items:center;gap:10px;text-decoration:none} .sa-topnav-brand-text{font-family:Inter,Manrope,system-ui;font-weight:800;font-size:18px;color:#064e3b;letter-spacing:-.02em} .sa-topnav-links{display:flex;gap:4px;align-items:center} .sa-topnav-link{padding:8px 16px;font-size:14px;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;border-radius:8px;transition:all .2s} .sa-topnav-link:hover{background:rgba(255,255,255,.12);color:#fff} .sa-topnav-link.active{background:rgba(255,255,255,.15);color:#fff;font-weight:600;border-bottom:2px solid #d4af37} .sa-topnav-right{display:flex;align-items:center;gap:8px} .sa-topnav-theme{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);cursor:pointer;transition:all .15s ease} .sa-topnav-theme:hover{background:rgba(255,255,255,.15);color:#fff;transform:scale(1.05)} .sa-topnav-theme:active{transform:scale(.95)} .sa-topnav-signout{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;font-size:13px;font-weight:700;color:#fff;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:10px;text-decoration:none;transition:all .15s ease;font-family:inherit;cursor:pointer} .sa-topnav-signout:hover{background:rgba(255,255,255,.25);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)} .sa-topnav-signout:active{transform:translateY(0)} .sa-topnav-dropdown{position:relative} .sa-topnav-dropdown-toggle{display:flex;align-items:center;gap:4px;background:none;border:none;font:inherit;cursor:pointer;padding:8px 16px;font-size:14px;font-weight:600;color:rgba(255,255,255,.8);border-radius:10px;transition:all .15s ease} .sa-topnav-dropdown-toggle:hover,.sa-topnav-dropdown-toggle.active{background:rgba(255,255,255,.12);color:#fff} .sa-topnav-dropdown-toggle.active{font-weight:700;border-bottom:2px solid #d4af37} .sa-topnav-dropdown-toggle svg{transition:transform .2s} .sa-topnav-dropdown.open .sa-topnav-dropdown-toggle svg{transform:rotate(180deg)} .sa-topnav-dropdown-toggle svg{transition:transform .2s} .sa-topnav-dropdown.open .sa-topnav-dropdown-toggle svg{transform:rotate(180deg)} .sa-topnav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;z-index:9999;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s} .sa-topnav-dropdown.open .sa-topnav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)} .sa-topnav-dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--text);text-decoration:none;transition:all .15s ease} .sa-topnav-dropdown-item:hover{background:rgba(6,78,59,.06);color:var(--admin-brand)} .sa-topnav-dropdown-item svg{color:var(--muted);flex-shrink:0;transition:color .15s} .sa-topnav-dropdown-item:hover svg{color:var(--admin-brand)} .sa-topnav-hamburger,.member-topnav-hamburger{display:none} .member-topnav-mobile-signout{display:none} @media(max-width:820px){ .sa-topnav-inner{padding:0 16px} .sa-topnav-links{display:none} .sa-topnav-brand-text{font-size:15px} } @media(min-width:821px){ .sa-shell .bottom-nav{display:none !important} } /* ─── Member Page Components ─── */ .m-page{max-width:1280px;margin:0 auto;padding:24px 40px} .m-page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:28px;flex-wrap:wrap} .m-page-title{font-size:28px;font-weight:700;color:#064e3b;margin:0 0 4px;line-height:1.2} .m-page-subtitle{color:#6b7280;font-size:15px;margin:0} .m-page-actions{display:flex;gap:10px} .m-page-grid{display:grid;grid-template-columns:1fr 340px;gap:24px} .m-page-main{display:flex;flex-direction:column;gap:24px} .m-page-sidebar{display:flex;flex-direction:column;gap:20px} /* Balance Card */ .m-balance-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:24px;position:relative;overflow:hidden} .m-balance-card.gold .m-balance-gold{background:linear-gradient(90deg,#d4af37,#f4d03f)} .m-balance-gold{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#064e3b,#065f46)} .m-balance-content{display:flex;gap:16px;align-items:flex-start} .m-balance-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#d1fae5;color:#065f46;flex-shrink:0} .m-balance-icon.gold{background:#fef3c7;color:#92400e} .m-balance-label{font-size:13px;color:#6b7280;margin:0 0 4px;font-weight:500} .m-balance-amount{font-size:28px;font-weight:700;color:#064e3b;margin:0 0 6px} .m-balance-sub{font-size:13px;color:#9ca3af;margin:0} /* Sections */ .m-section{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden} .m-section-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #f3f4f6} .m-section-title{font-size:16px;font-weight:700;color:#064e3b;margin:0} /* Tables */ .m-table-wrap{overflow-x:auto} .m-table{width:100%;text-left;border-collapse:collapse} .m-table th{padding:10px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;background:#f9fafb;border-bottom:1px solid #e5e7eb} .m-table td{padding:12px 16px;font-size:13px;color:#374151;border-bottom:1px solid #f3f4f6} .m-table tr:hover td{background:#f9fafb} .m-table .text-right{text-align:right} .m-table .green{color:#064e3b;font-weight:600} .m-table .red{color:#dc2626} .m-table .mono{font-family:monospace;font-size:12px;color:#9ca3af} /* Empty State */ .m-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center} .m-empty p{color:#9ca3af;margin:12px 0 0;font-size:14px} .m-empty.small{padding:20px} /* Buttons */ .m-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:10px;font-size:14px;font-weight:700;font-family:inherit;text-decoration:none;transition:all .2s ease;border:none;cursor:pointer;line-height:1.4} .m-btn:hover{transform:translateY(-1px)} .m-btn:active{transform:translateY(0)} .m-btn.outline{background:var(--panel);color:var(--admin-brand);border:1px solid rgba(6,78,59,.25);box-shadow:none} .m-btn.outline:hover{background:rgba(6,78,59,.06);border-color:var(--admin-brand)} .m-btn.green{background:var(--admin-brand);color:#fff;box-shadow:0 1px 3px rgba(6,78,59,.18)} .m-btn.green:hover{background:var(--admin-brand-dark);box-shadow:0 4px 12px rgba(6,78,59,.22)} .m-btn.gold{background:linear-gradient(180deg,#f5d46a,#d6a71e);color:#1a1a1a;border-color:rgba(255,255,255,.08);box-shadow:0 1px 3px rgba(212,175,55,.2)} .m-btn.gold:hover{filter:brightness(.95);box-shadow:0 4px 12px rgba(212,175,55,.28)} .m-btn.full{width:100%;justify-content:center} .m-btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;font-family:inherit;text-decoration:none;transition:all .15s ease;border:none;cursor:pointer} .m-btn-sm:hover{transform:translateY(-1px)} .m-btn-sm:active{transform:translateY(0)} .m-btn-sm.outline{background:transparent;color:#064e3b;border:1px solid #e5e7eb} .m-btn-sm.outline:hover{background:#f3f4f6} /* Forms */ .m-form{padding:16px 20px} .m-form-group{margin-bottom:14px} .m-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .m-label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:6px} .m-input{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;color:#374151;background:#fff;transition:border-color .2s} .m-input:focus{outline:none;border-color:#064e3b;box-shadow:0 0 0 3px rgba(6,78,59,.1)} .m-form-help{font-size:12px;color:#9ca3af;margin:8px 0 0;padding:0 20px} /* Tags */ .m-tag{display:inline-block;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em} .m-tag.green{background:#d1fae5;color:#065f46} .m-tag.red{background:#fee2e2;color:#991b1b} .m-tag.blue{background:#dbeafe;color:#1e40af} /* Badges */ .m-badge{display:inline-block;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;background:#d1fae5;color:#065f46} /* Status */ .m-status{display:inline-block;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em} .m-status.active,.m-status.disbursed,.m-status.paid,.m-status.completed,.m-status.approved,.m-status.sent{background:#d1fae5;color:#065f46} .m-status.pending,.m-status.queued,.m-status.processing{background:#fef3c7;color:#92400e} .m-status.rejected,.m-status.failed,.m-status.overdue{background:#fee2e2;color:#991b1b} /* Loan List */ .m-loan-list{display:flex;flex-direction:column;gap:10px;padding:16px 20px} .m-loan-item{border:1px solid #e5e7eb;border-radius:10px;padding:16px;transition:all .2s} .m-loan-item:hover{border-color:#d1d5db;box-shadow:0 2px 8px rgba(0,0,0,.04)} .m-loan-item.active{border-color:#064e3b;background:#f0fdf4} .m-loan-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .m-loan-id{font-weight:700;color:#374151;font-size:14px} .m-loan-amount{font-size:20px;font-weight:700;color:#064e3b;margin-bottom:8px} .m-loan-meta{display:flex;gap:12px;font-size:12px;color:#6b7280;margin-bottom:12px} .m-loan-actions{display:flex;gap:8px} /* Request List */ .m-request-list{display:flex;flex-direction:column;gap:8px;padding:16px 20px} .m-request-item{border:1px solid #e5e7eb;border-radius:8px;padding:12px} .m-request-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px} .m-request-amount{font-weight:600;color:#374151} .m-request-meta{display:flex;justify-content:space-between;align-items:center} .m-request-date{font-size:12px;color:#9ca3af} .m-request-ref{font-size:12px;color:#6b7280} /* Doc List */ .m-doc-list{display:flex;flex-direction:column;gap:6px;padding:12px 20px} .m-doc-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#f9fafb;border-radius:6px} .m-doc-info{display:flex;flex-direction:column;gap:2px} .m-doc-type{font-size:11px;font-weight:600;color:#064e3b;text-transform:uppercase} .m-doc-name{font-size:12px;color:#374151} /* Employment Badge */ .m-emp-badge{display:flex;align-items:center;gap:6px;padding:8px 12px;margin:0 20px 12px;background:#f0fdf4;border-radius:8px;font-size:12px;color:#065f46;font-weight:500} .m-emp-date{color:#6b7280;font-weight:400} /* ─── Member Dashboard (Umozi Wealth style) ─── */ .m-dash{max-width:1280px;margin:0 auto;padding:24px 40px} .m-dash-header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap} .m-dash-welcome{font-size:28px;font-weight:700;color:#064e3b;margin:0 0 4px;line-height:1.2} .m-dash-subtitle{color:#6b7280;font-size:15px;margin:0} .m-dash-totals{display:flex;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 24px;box-shadow:0 1px 3px rgba(0,0,0,.04)} .m-dash-total-item{display:flex;flex-direction:column;padding:0 20px} .m-dash-total-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin-bottom:4px} .m-dash-total-value{font-size:20px;font-weight:700} .m-dash-total-value.green{color:#064e3b} .m-dash-total-value.red{color:#dc2626} .m-dash-total-divider{width:1px;background:#e5e7eb} .m-dash-grid{display:grid;grid-template-columns:1fr 340px;gap:24px} .m-dash-main{display:flex;flex-direction:column;gap:24px} .m-dash-sidebar{display:flex;flex-direction:column;gap:20px} .m-dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .m-dash-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s} .m-dash-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-2px)} .m-dash-card-gold{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#d4af37,#f4d03f)} .m-dash-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px} .m-dash-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center} .m-dash-card-icon svg{width:20px;height:20px} .green-bg{background:#d1fae5;color:#065f46} .red-bg{background:#fee2e2;color:#991b1b} .gold-bg{background:#fef3c7;color:#92400e} .m-dash-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;letter-spacing:.02em} .green-badge{background:#d1fae5;color:#065f46} .red-badge{background:#fee2e2;color:#991b1b} .gold-badge{background:#fef3c7;color:#92400e} .m-dash-card-title{font-size:13px;color:#6b7280;margin:0 0 6px;font-weight:500} .m-dash-card-amount{font-size:22px;font-weight:700;color:#064e3b;margin:0 0 6px} .m-dash-card-meta{font-size:12px;color:#9ca3af;margin:0 0 16px} .m-dash-btn{display:block;text-align:center;padding:10px;border-radius:10px;font-size:13px;font-weight:700;font-family:inherit;text-decoration:none;transition:all .15s ease;line-height:1.4} .m-dash-btn:hover{transform:translateY(-1px)} .m-dash-btn:active{transform:translateY(0)} .green-btn{background:var(--admin-brand);color:#fff;border:none;box-shadow:0 1px 3px rgba(6,78,59,.18)} .green-btn:hover{background:var(--admin-brand-dark);box-shadow:0 4px 12px rgba(6,78,59,.22)} .outline-btn{background:transparent;color:var(--admin-brand);border:1px solid rgba(6,78,59,.25);box-shadow:none} .outline-btn:hover{background:rgba(6,78,59,.06);border-color:var(--admin-brand)} .gold-btn{background:linear-gradient(180deg,#f5d46a,#d6a71e);color:#1a1a1a;border:none;box-shadow:0 1px 3px rgba(212,175,55,.2)} .gold-btn:hover{filter:brightness(.95);box-shadow:0 4px 12px rgba(212,175,55,.28)} .gold-btn:hover{background:#b8960b} .m-dash-chart-section{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:24px} .m-dash-chart-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:12px} .m-dash-section-title{font-size:18px;font-weight:700;color:#064e3b;margin:0} .m-dash-section-sub{font-size:13px;color:#6b7280;margin:4px 0 0} .m-dash-chart-legend{display:flex;gap:16px} .m-dash-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7280;font-weight:500} .m-dash-dot{width:8px;height:8px;border-radius:50%} .m-dash-dot.green{background:#064e3b} .m-dash-dot.gold{background:#d4af37} .m-dash-chart{display:flex;align-items:flex-end;gap:12px;height:200px;padding:0 8px} .m-dash-bar{flex:1;background:#e5e7eb;border-radius:6px 6px 0 0;height:var(--h,50%);transition:all .3s;position:relative;cursor:pointer} .m-dash-bar:hover{background:#065f4680} .m-dash-bar.filled{background:#064e3b} .m-dash-bar.filled:hover{background:#065f46} .m-dash-bar-tooltip{position:absolute;top:-32px;left:50%;transform:translateX(-50%);background:#1f2937;color:#fff;font-size:10px;padding:4px 8px;border-radius:4px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none} .m-dash-bar:hover .m-dash-bar-tooltip{opacity:1} .m-dash-chart-labels{display:flex;justify-content:space-between;padding:10px 8px 0;font-size:12px;color:#6b7280;font-weight:500} .m-dash-transactions{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden} .m-dash-transactions-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e5e7eb} .m-dash-view-all{display:flex;align-items:center;gap:4px;color:#064e3b;font-size:13px;font-weight:600;text-decoration:none;transition:color .2s} .m-dash-view-all:hover{color:#065f46} .m-dash-table-wrap{overflow-x:auto} .m-dash-table{width:100%;text-left;border-collapse:collapse} .m-dash-table th{padding:12px 24px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;background:#f9fafb;border-bottom:1px solid #e5e7eb} .m-dash-table td{padding:14px 24px;font-size:14px;color:#374151;border-bottom:1px solid #f3f4f6} .m-dash-table tr:hover td{background:#f9fafb} .m-dash-table .text-right{text-align:right} .m-dash-table .green{color:#064e3b;font-weight:600} .m-dash-table .mono{font-family:monospace;font-size:12px;color:#9ca3af} .m-dash-status{display:inline-block;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em} .m-dash-status.completed{background:#d1fae5;color:#065f46} .m-dash-quick-actions{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px} .m-dash-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .m-dash-action-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 8px;background:#f9fafb;border-radius:10px;text-decoration:none;color:#374151;font-size:12px;font-weight:500;transition:all .2s;text-align:center;gap:8px} .m-dash-action-item:hover{background:#d1fae5;transform:translateY(-2px)} .m-dash-action-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#064e3b} .m-dash-action-icon svg{width:22px;height:22px} .m-dash-loan-tracker{background:linear-gradient(135deg,#003527 0%,#064e3b 100%);color:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 12px rgba(6,78,59,.3)} .m-dash-tracker-header{display:flex;align-items:center;gap:8px;margin-bottom:16px} .m-dash-tracker-header svg{color:#d4af37} .m-dash-tracker-header .m-dash-section-title{color:#fff} .m-dash-tracker-content{display:flex;flex-direction:column;gap:16px} .m-dash-tracker-item{display:flex;flex-direction:column;gap:8px} .m-dash-tracker-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:500} .m-dash-tracker-row .gold{color:#d4af37;font-weight:700} .m-dash-progress-bar{width:100%;height:8px;background:rgba(255,255,255,.15);border-radius:4px;overflow:hidden} .m-dash-progress-fill{height:100%;background:linear-gradient(90deg,#d4af37,#f4d03f);border-radius:4px;box-shadow:0 0 10px rgba(212,175,55,.4);transition:width .5s} .m-dash-tracker-note{font-size:12px;opacity:.7;font-style:italic;margin:0} .m-dash-tracker-footer{display:flex;justify-content:space-between;align-items:flex-end;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)} .m-dash-tracker-label{font-size:11px;color:#d4af37;margin:0 0 4px;font-weight:600} .m-dash-tracker-value{font-size:14px;font-weight:600;margin:0} .m-dash-tracker-empty{text-align:center;padding:20px 0} .m-dash-tracker-empty p{margin:0 0 10px;opacity:.8} .m-dash-tracker-link{color:#d4af37;font-weight:600;text-decoration:none;font-size:13px} .m-dash-tracker-link:hover{text-decoration:underline} .m-dash-support{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;position:relative;overflow:hidden} .m-dash-support::before{content:'';position:absolute;top:0;right:0;width:120px;height:120px;background:radial-gradient(circle,rgba(6,78,59,.06) 0%,transparent 70%);border-radius:0 0 0 100%} .m-dash-support-text{font-size:14px;color:#6b7280;margin:8px 0 16px;line-height:1.5} .m-dash-support-actions{display:flex;flex-direction:column;gap:8px} .m-dash-support-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:700;font-family:inherit;text-decoration:none;transition:all .15s ease;line-height:1.4} .m-dash-support-btn:hover{transform:translateY(-1px)} .m-dash-support-btn:active{transform:translateY(0)} .m-dash-support-btn.primary{background:linear-gradient(180deg,#f5d46a,#d6a71e);color:#1a1a1a;border:none;box-shadow:0 1px 3px rgba(212,175,55,.2)} .m-dash-support-btn.primary:hover{filter:brightness(.95);box-shadow:0 4px 12px rgba(212,175,55,.28)} .m-dash-support-btn.outline{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none} .m-dash-support-btn.outline:hover{background:var(--surface);border-color:var(--muted)} /* ─── Modern Landing Page (Umozi Wealth style) ─── */ .lp-hero{width:100%;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:120px 40px 80px;position:relative;overflow-x:hidden;background:transparent} .lp-hero-bg{position:absolute;top:0;left:0;width:100%;height:100vh;height:100dvh;pointer-events:none;z-index:0;overflow:hidden} .lp-hero-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:1} .lp-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(248,250,246,.30) 0%,rgba(248,250,246,.20) 50%,rgba(248,250,246,.30) 100%)} .lp-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.25;animation:orbFloat 20s ease-in-out infinite} .lp-orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(6,78,59,.3),transparent 70%);top:-15%;left:-10%} .lp-orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(212,175,55,.2),transparent 70%);bottom:-10%;right:-5%;animation-delay:-7s} .lp-orb-3{width:400px;height:400px;background:radial-gradient(circle,rgba(6,78,59,.15),transparent 70%);top:40%;left:55%;animation-delay:-14s} .lp-hero-content{position:relative;z-index:1;text-align:center;max-width:800px;margin:0 auto} .lp-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(6,78,59,.85);border:1px solid rgba(167,243,208,.4);color:#d1fae5;font-weight:600;font-size:13px;letter-spacing:.03em;box-shadow:0 2px 8px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .lp-hero-h1{font-family:Inter,Manrope,system-ui;font-size:clamp(36px,5vw,64px);line-height:1.08;margin:24px 0 0;font-weight:800;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.3)} .lp-accent{background:linear-gradient(135deg,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 6px rgba(251,191,36,.5))} .lp-hero-p{color:rgba(255,255,255,.92);font-size:18px;line-height:1.6;margin:20px auto 0;max-width:600px;text-shadow:0 2px 8px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.3)} .lp-hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px} .lp-hero-code{margin-top:40px;max-width:480px;margin-left:auto;margin-right:auto} .lp-code-input{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:6px 6px 6px 16px;box-shadow:0 4px 16px rgba(0,0,0,.3)} .lp-code-input svg{color:#9ca3af;flex-shrink:0} .lp-code-input input{flex:1;border:none;background:none;padding:10px 8px;font-size:14px;color:#374151;outline:none;min-width:0} .lp-code-input input::placeholder{color:#9ca3af} .lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 24px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;text-decoration:none;transition:all .2s ease;border:none;cursor:pointer;line-height:1.4} .lp-btn:hover{transform:translateY(-1px)} .lp-btn:active{transform:translateY(0)} .lp-btn-primary{background:#064e3b;color:#fff;box-shadow:0 2px 8px rgba(6,78,59,.25)} .lp-btn-primary:hover{background:#065f46;box-shadow:0 6px 20px rgba(6,78,59,.3)} .lp-btn-outline{background:transparent;color:#064e3b;border:1px solid #d1d5db;box-shadow:none} .lp-btn-outline:hover{background:rgba(6,78,59,.04);border-color:#064e3b;box-shadow:0 2px 8px rgba(6,78,59,.1)} .lp-btn-outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:none} .lp-btn-outline-light:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)} .lp-btn-sm{padding:8px 16px;font-size:13px;border-radius:8px} .lp-btn-ghost{background:transparent;color:#064e3b;border:none;box-shadow:none} .lp-btn-ghost:hover{background:rgba(6,78,59,.06)} .lp-btn-ghost:active{background:rgba(6,78,59,.1)} .lp-stats{padding:60px 0;background:#fff;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb} .lp-container{max-width:1200px;margin:0 auto;padding:0 40px} .lp-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px} .lp-stat-item{text-align:center} .lp-stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;background:#d1fae5;color:#065f46} .lp-stat-icon.green{background:#d1fae5;color:#065f46} .lp-stat-icon.gold{background:#fef3c7;color:#92400e} .lp-stat-icon.purple{background:#ede9fe;color:#7c3aed} .lp-stat-num{font-family:Inter,Manrope,system-ui;font-weight:800;font-size:clamp(32px,3.5vw,48px);color:#064e3b;font-variant-numeric:tabular-nums} .lp-stat-label{color:#6b7280;font-size:14px;margin-top:4px;font-weight:500} .lp-section{padding:80px 0} .lp-section-head{text-align:center;margin-bottom:48px} .lp-section-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#d1fae5;border:1px solid #a7f3d0;color:#065f46;font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase} .lp-section-title{font-family:Inter,Manrope,system-ui;font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.02em;margin-top:12px;color:#064e3b} .lp-section-sub{color:#6b7280;font-size:16px;margin-top:8px;max-width:60ch;margin-left:auto;margin-right:auto} .lp-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .lp-feature-card{border:1px solid #e5e7eb;border-radius:16px;padding:28px;background:#fff;transition:transform .2s,box-shadow .2s} .lp-feature-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)} .lp-feature-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:16px} .lp-feature-icon.emerald{background:linear-gradient(135deg,#064e3b,#065f46)} .lp-feature-icon.green{background:linear-gradient(135deg,#059669,#10b981)} .lp-feature-icon.gold{background:linear-gradient(135deg,#d4af37,#f4d03f)} .lp-feature-icon.blue{background:linear-gradient(135deg,#1e40af,#3b82f6)} .lp-feature-icon.purple{background:linear-gradient(135deg,#7c3aed,#a78bfa)} .lp-feature-icon.teal{background:linear-gradient(135deg,#0d9488,#14b8a6)} .lp-feature-title{font-weight:700;font-size:18px;color:#064e3b;margin:0} .lp-feature-desc{color:#6b7280;font-size:14px;line-height:1.6;margin-top:8px} .lp-roles-section{background:#f9fafb} .lp-roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .lp-role-card{border:1px solid #e5e7eb;border-radius:16px;padding:28px;background:#fff;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s} .lp-role-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)} .lp-role-stripe{position:absolute;top:0;left:0;width:4px;height:100%} .lp-role-stripe.blue{background:#064e3b} .lp-role-stripe.green{background:#059669} .lp-role-stripe.gold{background:#d4af37} .lp-role-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px} .lp-role-icon.blue{background:#d1fae5;color:#065f46} .lp-role-icon.green{background:#d1fae5;color:#059669} .lp-role-icon.gold{background:#fef3c7;color:#92400e} .lp-role-title{font-weight:700;font-size:18px;color:#064e3b;margin:0} .lp-role-desc{color:#6b7280;font-size:14px;line-height:1.6;margin-top:8px;flex:1} .lp-role-btn{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:8px 16px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:700;color:#064e3b;border:1px solid #d1d5db;text-decoration:none;transition:all .15s ease} .lp-role-btn:hover{background:#064e3b;color:#fff;border-color:#064e3b;transform:translateY(-1px);box-shadow:0 4px 12px rgba(6,78,59,.25)} .lp-role-btn:active{transform:translateY(0)} .lp-steps{display:flex;align-items:flex-start;justify-content:center;gap:0;position:relative} .lp-step{flex:1;max-width:280px;text-align:center;position:relative;padding:0 20px} .lp-step-num{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;font-family:Inter,Manrope,system-ui;font-weight:800;font-size:20px;background:#064e3b;color:#fff;box-shadow:0 4px 12px rgba(6,78,59,.25)} .lp-step-content{margin-top:16px} .lp-step-title{font-weight:700;font-size:16px;color:#064e3b;margin:0} .lp-step-desc{color:#6b7280;font-size:14px;line-height:1.5;margin-top:6px} .lp-step-connector{width:60px;height:2px;background:#d1d5db;margin-top:28px;flex-shrink:0} .lp-cta-section{padding:0 0 80px} .lp-cta-card{background:linear-gradient(135deg,#064e3b 0%,#065f46 100%);border-radius:20px;padding:60px 48px;text-align:center;position:relative;overflow:hidden} .lp-cta-content{position:relative;z-index:1} .lp-cta-title{font-family:Inter,Manrope,system-ui;font-size:clamp(24px,3vw,36px);font-weight:800;color:#fff;margin:0} .lp-cta-p{color:rgba(255,255,255,.8);font-size:16px;margin-top:8px} .lp-cta-actions{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap} .lp-cta-card .lp-btn-primary{background:#fff;color:#064e3b;box-shadow:0 2px 8px rgba(0,0,0,.15)} .lp-cta-card .lp-btn-primary:hover{background:#f9fafb;box-shadow:0 6px 20px rgba(0,0,0,.2)} .lp-cta-decoration{position:absolute;top:-40px;right:-40px;width:200px;height:200px;pointer-events:none} .lp-cta-circle{width:200px;height:200px;border-radius:50%;border:2px solid rgba(255,255,255,.1);position:absolute;top:0;right:0} .lp-cta-circle-2{width:140px;height:140px;border-color:rgba(212,175,55,.2);top:30px;right:30px} .lp-footer{padding:60px 0 30px;background:#fff;border-top:1px solid #e5e7eb} .lp-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px} .lp-footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px} .lp-footer-logo svg{border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.1)} .lp-footer-logo span{font-size:18px;font-weight:700;color:#064e3b} .lp-footer-desc{color:#6b7280;font-size:14px;line-height:1.6;margin:0 0 16px} .lp-footer-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#d1fae5;border-radius:8px;font-size:12px;font-weight:600;color:#065f46} .lp-footer-heading{font-size:13px;font-weight:700;color:#064e3b;text-transform:uppercase;letter-spacing:.05em;margin:0 0 16px} .lp-footer-links{list-style:none;padding:0;margin:0} .lp-footer-links li{margin-bottom:10px} .lp-footer-links a{display:flex;align-items:center;gap:6px;color:#6b7280;font-size:14px;text-decoration:none;transition:color .2s} .lp-footer-links a:hover{color:#064e3b} .lp-footer-links svg{flex-shrink:0} .lp-footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;margin-top:40px;border-top:1px solid #e5e7eb;font-size:13px;color:#9ca3af} /* ===== Bottom Nav (Mobile) ===== */ .bottom-nav{display:none} @media(max-width:980px){ .app-shell{grid-template-columns:1fr} .sidebar{position:relative;height:auto} .sidebar-nav{padding:12px} .nav-groups{display:none} .nav-flat{display:flex;flex-direction:row;flex-wrap:nowrap;overflow:auto;gap:10px} .nav-flat--always{display:flex;flex-direction:row;flex-wrap:nowrap;overflow:auto;gap:10px} .nav-group-label{display:none} .nav-group-items{flex-direction:row;flex-wrap:nowrap;overflow:auto;gap:10px;padding:0} .nav-item{white-space:nowrap} .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--border);z-index:1000;padding:6px 0 env(safe-area-inset-bottom);justify-content:space-around} .bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;color:var(--muted);font-size:10px;text-decoration:none;font-weight:600;transition:color var(--transition)} .bottom-nav-item.active{color:var(--brand)} .bottom-nav-item svg{width:20px;height:20px} .app-main{padding-bottom:60px} .btn-icon{width:40px;height:40px} .lp-hero-grid{grid-template-columns:1fr;gap:32px} .lp-visual{order:-1} .lp-features-grid{grid-template-columns:repeat(2,1fr)} .lp-roles-grid{grid-template-columns:repeat(2,1fr)} .lp-stats-grid{grid-template-columns:repeat(2,1fr);gap:20px} .lp-steps{grid-template-columns:1fr;gap:24px} .lp-steps:before{display:none} .lp-step{display:flex;align-items:center;gap:20px;text-align:left} .lp-step-num{flex-shrink:0;margin:0} .auth-split{grid-template-columns:1fr} .auth-brand{min-height:auto;padding:40px 28px;display:none} .auth-form{padding:32px 20px;max-width:100%} .container{padding:0 16px} .content{padding:16px 0} .landing-links{display:none} } @media(max-width:980px){ .m-page-grid{grid-template-columns:1fr} .m-page-sidebar{order:-1} .m-dash-grid{grid-template-columns:1fr} } @media(max-width:980px){ .lp-features-grid{grid-template-columns:repeat(2,1fr)} .lp-roles-grid{grid-template-columns:repeat(2,1fr)} .lp-footer-grid{grid-template-columns:1fr 1fr} } @media(max-width:820px){ .grid.cols-2{grid-template-columns:1fr} .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.cols-5{grid-template-columns:repeat(2,minmax(0,1fr))} .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .row{grid-template-columns:1fr} .m-dash-cards{grid-template-columns:repeat(2,1fr)} .m-page{padding:20px} .m-dash{padding:20px} .member-topnav-profile span{display:none} .m-page-header{flex-direction:column} .lp-hero{padding:100px 20px 60px} .lp-container{padding:0 20px} .lp-hero-h1{font-size:clamp(28px,7vw,42px)} .lp-features-grid{grid-template-columns:1fr} .lp-roles-grid{grid-template-columns:1fr} .lp-stats-grid{grid-template-columns:repeat(2,1fr);gap:20px} .lp-steps{flex-direction:column;align-items:center;gap:20px} .lp-step-connector{width:2px;height:30px;margin:0} .lp-footer-grid{grid-template-columns:1fr} .lp-footer-bottom{flex-direction:column;gap:8px;text-align:center} } @media(max-width:640px){ .m-dash-cards{grid-template-columns:1fr} .m-dash-header{flex-direction:column;align-items:flex-start} .m-dash-totals{width:100%} .m-page{padding:16px} .m-dash{padding:16px} .m-dash-welcome{font-size:22px} .m-dash-chart{height:140px;gap:6px} .m-dash-bar-tooltip{display:none} .m-page-title{font-size:22px} .m-form-row{grid-template-columns:1fr} .member-topnav-signout{padding:6px 12px;font-size:12px} .member-topnav-profile{padding:6px 10px;font-size:12px} } @media(max-width:640px){ .lp-features-grid{grid-template-columns:1fr} .lp-roles-grid{grid-template-columns:1fr} .lp-nav-actions .lp-btn-label{display:none} .lp-hero{padding-top:70px} .lp-hero-h1{font-size:clamp(28px,8vw,36px)} .lp-section{padding:40px 0} .lp-cta{padding:40px 24px;border-radius:16px} .lp-stats-grid{grid-template-columns:repeat(2,1fr);gap:16px} .lp-nav-inner{padding:0 16px} } /* ─── Landing Page Dark Mode ─── */ html[data-theme="dark"] .lp-stats{background:var(--panel);border-color:var(--border)} html[data-theme="dark"] .lp-stat-num{color:#10b981} html[data-theme="dark"] .lp-stat-label{color:var(--muted)} html[data-theme="dark"] .lp-section-title{color:#10b981} html[data-theme="dark"] .lp-section-sub{color:var(--muted)} html[data-theme="dark"] .lp-section-badge{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.3);color:#6ee7b7} html[data-theme="dark"] .lp-feature-card{background:var(--panel);border-color:var(--border)} html[data-theme="dark"] .lp-feature-title{color:#6ee7b7} html[data-theme="dark"] .lp-feature-desc{color:var(--muted)} html[data-theme="dark"] .lp-roles-section{background:var(--bg)} html[data-theme="dark"] .lp-role-card{background:var(--panel);border-color:var(--border)} html[data-theme="dark"] .lp-role-title{color:#6ee7b7} html[data-theme="dark"] .lp-role-desc{color:var(--muted)} html[data-theme="dark"] .lp-role-btn{color:#6ee7b7;border-color:var(--border)} html[data-theme="dark"] .lp-role-btn:hover{background:#064e3b;color:#fff;border-color:#064e3b} html[data-theme="dark"] .lp-step-num{background:#064e3b;color:#fff} html[data-theme="dark"] .lp-step-title{color:#6ee7b7} html[data-theme="dark"] .lp-step-desc{color:var(--muted)} html[data-theme="dark"] .lp-step-connector{background:var(--border)} html[data-theme="dark"] .lp-footer{background:var(--panel);border-color:var(--border)} html[data-theme="dark"] .lp-footer-logo span{color:#6ee7b7} html[data-theme="dark"] .lp-footer-desc{color:var(--muted)} html[data-theme="dark"] .lp-footer-badge{background:rgba(16,185,129,.15);color:#6ee7b7} html[data-theme="dark"] .lp-footer-heading{color:#6ee7b7} html[data-theme="dark"] .lp-footer-links a{color:var(--muted)} html[data-theme="dark"] .lp-footer-links a:hover{color:#6ee7b7} html[data-theme="dark"] .lp-footer-bottom{border-color:var(--border);color:var(--muted)} /* ===== Admin Dashboard (Umozi Wealth style) ===== */ /* ===== Admin Dashboard (Umozi Wealth style) ===== */ .admin-shell{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:100vh;min-height:100dvh} .admin-shell .app-main{display:flex;flex-direction:column} .admin-topnav{background:var(--admin-brand);padding:0 24px;height:56px;display:flex;align-items:center;position:sticky;top:0;z-index:1000} .admin-topnav-inner{display:flex;align-items:center;width:100%;gap:20px} .admin-topnav-left{flex-shrink:0} .admin-topnav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:700;font-size:15px;font-family:Manrope,Inter,system-ui} .admin-topnav-brand-logo{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;overflow:hidden} .admin-topnav-brand-logo img{width:100%;height:100%;object-fit:cover} .admin-topnav-brand-dot{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#d4af37,#b8960b);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px} .admin-topnav-hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.1);border:none;color:#fff;cursor:pointer;transition:all .15s ease;flex-shrink:0} .admin-topnav-hamburger:hover{background:rgba(255,255,255,.2)} .admin-topnav-links{display:flex;gap:2px} .admin-topnav-link{color:rgba(255,255,255,.7);text-decoration:none;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;transition:all .2s;white-space:nowrap} .admin-topnav-link:hover{color:#fff;background:rgba(255,255,255,.1)} .admin-topnav-link.active{color:#fff;background:rgba(255,255,255,.12);font-weight:600} .admin-topnav-dropdown{position:relative} .admin-topnav-dropdown-toggle{display:flex;align-items:center;gap:4px;background:none;border:none;font:inherit;cursor:pointer;padding:8px 14px;font-size:14px;font-weight:500;color:rgba(255,255,255,.7);border-radius:8px;transition:all .2s;white-space:nowrap} .admin-topnav-dropdown-toggle:hover{color:#fff;background:rgba(255,255,255,.1)} .admin-topnav-dropdown-toggle.active{color:#fff;background:rgba(255,255,255,.12);font-weight:600} .admin-topnav-dropdown-toggle svg{transition:transform .2s} .admin-topnav-dropdown.open .admin-topnav-dropdown-toggle svg{transform:rotate(180deg)} .admin-topnav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;z-index:9999;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s} .admin-topnav-dropdown.open .admin-topnav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)} .admin-topnav-dropdown-item{display:block;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;color:var(--text);text-decoration:none;transition:all .15s ease;-webkit-appearance:none;appearance:none} .admin-topnav-dropdown-item:hover{background:rgba(6,78,59,.06);color:var(--admin-brand)} .admin-topnav-dropdown-item.active{background:rgba(6,78,59,.08);color:var(--admin-brand);font-weight:600} .admin-topnav-search{flex:1;max-width:420px;margin:0 auto} .admin-topnav-search-wrap{position:relative;display:flex;align-items:center} .admin-topnav-search-wrap svg{position:absolute;left:12px;color:rgba(255,255,255,.45);pointer-events:none} .admin-topnav-search input{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:8px 12px 8px 38px;color:#fff;font-size:13px;font-family:inherit;outline:none;transition:all .15s ease} .admin-topnav-search input::placeholder{color:rgba(255,255,255,.45)} .admin-topnav-search input:focus{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.15);box-shadow:0 0 0 3px rgba(255,255,255,.08)} .admin-topnav-right{display:flex;align-items:center;gap:14px;flex-shrink:0} .admin-topnav-location{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.75);font-size:13px;font-weight:500} .admin-topnav-location svg{opacity:.6} .admin-topnav-user{position:relative} .admin-topnav-user-btn{display:flex;align-items:center;gap:8px;color:#fff;cursor:pointer;background:none;border:none;padding:4px 8px;border-radius:10px;transition:all .15s ease;font:inherit} .admin-topnav-user-btn:hover{background:rgba(255,255,255,.1)} .admin-topnav-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;border:2px solid rgba(255,255,255,.3);flex-shrink:0} .admin-topnav-username{font-size:13px;font-weight:600} .admin-topnav-role{font-size:11px;color:rgba(255,255,255,.6)} .admin-topnav-user-info{text-align:right;line-height:1.3} .admin-topnav-dropdown-arrow{color:rgba(255,255,255,.5);margin-left:4px;transition:transform .2s} .admin-topnav-user.open .admin-topnav-dropdown-arrow{transform:rotate(180deg)} .admin-topnav-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;z-index:9999;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s} .admin-topnav-user.open .admin-topnav-pop{opacity:1;visibility:visible;transform:translateY(0)} .admin-topnav-pop .menu-item{display:block;width:100%;padding:8px 12px;border:none;background:none;text-align:left;font-size:13px;font-weight:500;color:var(--text);border-radius:8px;cursor:pointer;transition:all .15s ease} .admin-topnav-pop .menu-item:hover{background:var(--surface)} .admin-topnav-pop .menu-item.danger{color:var(--danger)} .admin-content{padding:28px 32px;flex:1;background:var(--bg);min-width:0} .admin-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:20px} .admin-breadcrumb a{color:var(--muted);text-decoration:none;transition:color .15s} .admin-breadcrumb a:hover{color:var(--admin-brand)} .admin-breadcrumb .current{color:var(--text);font-weight:600} .admin-breadcrumb svg{color:var(--border)} .admin-page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px} .admin-page-title{font-family:Manrope,Inter,system-ui;font-size:26px;font-weight:800;color:var(--text);letter-spacing:-.02em;margin:0} .admin-page-subtitle{font-size:14px;color:var(--muted);margin:4px 0 0} .admin-page-actions{display:flex;gap:8px} .admin-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid transparent;transition:all .15s ease;text-decoration:none;white-space:nowrap} .admin-btn:hover{transform:translateY(-1px)} .admin-btn:active{transform:translateY(0)} .admin-btn-outline{background:var(--panel);color:var(--text);border-color:var(--border);box-shadow:none} .admin-btn-outline:hover{background:var(--surface);border-color:var(--muted);box-shadow:0 1px 3px rgba(0,0,0,.06)} .admin-btn-primary{background:var(--admin-brand);color:#fff;border-color:var(--admin-brand);box-shadow:0 1px 3px rgba(6,78,59,.18)} .admin-btn-primary:hover{background:var(--admin-brand-dark);box-shadow:0 4px 12px rgba(6,78,59,.22)} .admin-btn-danger{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:0 1px 3px rgba(214,69,69,.18)} .admin-btn-danger:hover{background:#c53030;box-shadow:0 4px 12px rgba(214,69,69,.22)} .admin-btn-gold{background:linear-gradient(180deg,#f5d46a,#d6a71e);color:#1a1a1a;border-color:rgba(255,255,255,.08);box-shadow:0 1px 3px rgba(212,175,55,.2)} .admin-btn-gold:hover{filter:brightness(.95);box-shadow:0 4px 12px rgba(212,175,55,.28)} .admin-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px} .admin-kpi-card{display:block;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;transition:all .2s;position:relative;overflow:hidden;text-decoration:none;color:inherit} .admin-kpi-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);border-color:var(--muted);transform:translateY(-1px)} .admin-kpi-label{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:6px} .admin-kpi-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .admin-kpi-value{font-family:Manrope,Inter,system-ui;font-size:28px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1} .admin-kpi-change{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:6px;white-space:nowrap} .admin-kpi-change.positive{background:rgba(6,78,59,.12);color:var(--admin-brand)} .admin-kpi-change.negative{background:rgba(220,38,38,.12);color:var(--danger)} .admin-kpi-change.neutral{background:var(--surface);color:var(--muted)} .admin-kpi-change.attention{background:rgba(245,158,11,.12);color:#8a5b00} html[data-theme="dark"] .admin-kpi-change.positive{color:var(--success)} html[data-theme="dark"] .admin-kpi-change.negative{color:var(--danger)} .admin-kpi-change svg{width:12px;height:12px} .admin-kpi-context{margin-top:8px;color:var(--muted);font-size:12px} .admin-kpi-drill{display:block;margin-top:8px;color:var(--admin-brand);font-size:12px;font-weight:700;opacity:0;transform:translateY(3px);transition:all .15s ease} .admin-kpi-card:hover .admin-kpi-drill,.admin-kpi-card:focus-visible .admin-kpi-drill{opacity:1;transform:none} .admin-kpi-card:focus-visible,.admin-btn:focus-visible,.admin-queue-btn:focus-visible,.admin-queue-viewall:focus-visible,.admin-chart-link:focus-visible{outline:3px solid var(--ring);outline-offset:2px} .admin-status-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:-10px 0 18px;padding:10px 14px;background:var(--panel);border:1px solid var(--border);border-radius:10px;color:var(--muted);font-size:12px} .admin-status-strip strong{color:var(--text);font-weight:700} .admin-status-live{display:flex;align-items:center;gap:7px;color:var(--admin-brand);font-weight:700} .admin-status-live span{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(27,168,90,.12)} .admin-attention{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:18px 20px;border:1px solid rgba(245,158,11,.28);border-left:4px solid var(--warning);border-radius:12px;background:linear-gradient(90deg,rgba(245,158,11,.09),rgba(245,158,11,.02))} .admin-attention h2{font-size:17px;margin:2px 0 4px} .admin-attention p{margin:0;color:var(--muted);font-size:13px} .admin-attention-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .admin-eyebrow{display:block;margin-bottom:3px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .admin-two-col{display:grid;grid-template-columns:1fr 380px;gap:20px;margin-bottom:24px} .admin-chart-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px} .admin-chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px} .admin-chart-title{font-family:Manrope,Inter,system-ui;font-size:16px;font-weight:700;color:var(--text);margin:0} .admin-period-chip{padding:5px 9px;border-radius:7px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap} .admin-chart-insight{margin:-6px 0 10px;padding:10px 12px;border-radius:9px;background:rgba(6,78,59,.06);color:var(--muted);font-size:12px} .admin-chart-insight strong{color:var(--text)} .admin-chart-link{display:inline-flex;margin-top:8px;color:var(--admin-brand);font-size:12px;font-weight:700} .admin-chart-legend{display:flex;gap:16px;font-size:12px;color:var(--muted);font-weight:500} .admin-chart-legend-item{display:flex;align-items:center;gap:6px} .admin-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .admin-legend-dot.deposits{background:var(--admin-brand)} .admin-legend-dot.disbursements{background:var(--admin-accent)} .admin-chart-area{height:260px;display:flex;align-items:flex-end;gap:12px;padding:10px 0} .admin-chart-bar-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px} .admin-chart-bars{display:flex;align-items:flex-end;gap:4px;height:200px;width:100%} .admin-chart-bar{flex:1;border-radius:4px 4px 0 0;transition:opacity .2s;min-height:4px} .admin-chart-bar.deposits{background:var(--admin-brand)} .admin-chart-bar.disbursements{background:var(--admin-accent)} .admin-chart-bar:hover{opacity:.8} .admin-chart-label{font-size:12px;color:var(--muted);font-weight:500} .admin-queue-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;display:flex;flex-direction:column} .admin-queue-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .admin-queue-title{font-family:Manrope,Inter,system-ui;font-size:16px;font-weight:700;color:var(--text);margin:0} .admin-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:5px;padding:0 6px;border-radius:999px;background:var(--admin-brand);color:#fff;font-size:11px;vertical-align:middle} .admin-queue-viewall{font-size:13px;color:var(--admin-brand);text-decoration:none;font-weight:600} .admin-queue-viewall:hover{text-decoration:underline} .admin-queue-list{display:flex;flex-direction:column;gap:12px;flex:1} .admin-queue-item{padding:14px;border:1px solid var(--border);border-radius:10px;transition:border-color .15s} .admin-queue-item:hover{border-color:var(--muted)} .admin-queue-item-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px} .admin-queue-item-type{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} .admin-queue-item-type.savings{background:rgba(59,130,246,.12);color:var(--brand)} .admin-queue-item-type.loan{background:rgba(245,158,11,.12);color:var(--warning)} .admin-queue-item-type.membership{background:rgba(6,78,59,.12);color:var(--admin-brand)} .admin-queue-item-time{font-size:12px;color:var(--muted)} .admin-queue-item-name{font-size:14px;font-weight:600;color:var(--text);margin-bottom:2px} .admin-queue-item-detail{font-size:13px;color:var(--muted)} .admin-queue-item-actions{display:flex;gap:6px;margin-top:10px} .admin-queue-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:32px;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid transparent;transition:all .15s ease;white-space:nowrap;text-decoration:none} .admin-queue-btn:hover{transform:translateY(-1px)} .admin-queue-btn:active{transform:translateY(0)} .admin-queue-btn.primary{background:var(--admin-brand);color:#fff;border-color:var(--admin-brand);box-shadow:0 1px 3px rgba(6,78,59,.18)} .admin-queue-btn.primary:hover{background:var(--admin-brand-dark);box-shadow:0 4px 12px rgba(6,78,59,.22)} .admin-queue-btn.ghost{background:var(--panel);color:var(--text);border-color:var(--border);box-shadow:none} .admin-queue-btn.ghost:hover{background:var(--surface);border-color:var(--muted)} .admin-queue-btn.danger{background:rgba(214,69,69,.06);color:var(--danger);border-color:rgba(214,69,69,.25);box-shadow:none} .admin-queue-btn.danger:hover{background:rgba(214,69,69,.1);border-color:var(--danger)} .admin-table-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px} .admin-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .admin-table-title{font-family:Manrope,Inter,system-ui;font-size:16px;font-weight:700;color:var(--text);margin:0} .admin-tabs{display:flex;gap:4px;background:var(--surface);padding:3px;border-radius:10px} .admin-tab{padding:7px 16px;border:none;background:transparent;font-size:13px;font-weight:600;font-family:inherit;color:var(--muted);cursor:pointer;border-radius:8px;transition:all .15s ease;white-space:nowrap} .admin-tab:hover{color:var(--text);background:rgba(0,0,0,.03)} .admin-tab.active{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08);font-weight:700} .admin-table{width:100%;border-collapse:collapse;font-size:14px} .admin-table thead th{text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:10px 14px;border-bottom:2px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:2} .admin-table tbody td{padding:14px;border-bottom:1px solid var(--border);font-size:14px;color:var(--text);vertical-align:middle;transition:background .15s} .admin-table tbody tr{transition:background .15s} .admin-table tbody tr:hover{background:rgba(6,78,59,.03)} html[data-theme="dark"] .admin-table tbody tr:hover{background:rgba(255,255,255,.03)} .admin-table tbody tr:last-child td{border-bottom:none} .admin-table-member{display:flex;align-items:center;gap:10px} .admin-table-avatar{width:36px;height:36px;border-radius:50%;background:rgba(6,78,59,.08);color:var(--admin-brand);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0} .admin-table-member-info{line-height:1.3} .admin-table-member-name{font-weight:600;color:var(--text)} .admin-table-member-email{font-size:12px;color:var(--muted)} .admin-status-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600} .admin-status-badge.verified{background:rgba(6,78,59,.1);color:var(--admin-brand)} .admin-status-badge.pending{background:rgba(245,158,11,.1);color:var(--warning)} .admin-status-badge.rejected{background:rgba(220,38,38,.1);color:var(--danger)} .admin-table-actions{display:flex;gap:8px} .admin-table-actions a{font-size:13px;font-weight:600;text-decoration:none;color:var(--admin-brand);transition:opacity .15s} .admin-table-actions a:hover{opacity:.7} .admin-table-footer{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--border);margin-top:8px} .admin-table-info{font-size:13px;color:var(--muted)} .admin-pagination{display:flex;align-items:center;gap:4px} .admin-pagination span,.admin-pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text);text-decoration:none;transition:all .15s} .admin-pagination a:hover{background:var(--surface)} .admin-pagination .active{background:var(--admin-brand);color:#fff;font-weight:600} .admin-pagination .disabled{color:var(--border);pointer-events:none} .admin-footer{background:var(--panel);border-top:1px solid var(--border);padding:16px 32px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)} .admin-footer-links{display:flex;gap:20px} .admin-footer-links a{color:var(--muted);text-decoration:none;transition:color .15s} .admin-footer-links a:hover{color:var(--admin-brand)} @media(max-width:1200px){ .admin-kpi-grid{grid-template-columns:repeat(2,1fr)} .admin-two-col{grid-template-columns:1fr} .admin-topnav-search{display:none} } @media(max-width:820px){ html{scrollbar-gutter:auto} body{overflow-x:hidden} .app-main,.admin-topnav,.admin-topnav-inner,.admin-content,.admin-footer{width:100%;max-width:100%;min-width:0} .admin-topnav-hamburger{display:flex} .admin-topnav-links{display:none;position:absolute;top:56px;left:0;right:0;background:var(--admin-brand);flex-direction:column;padding:8px 16px;border-top:1px solid rgba(255,255,255,.1);max-height:70vh;overflow-y:auto;gap:2px;z-index:999} .admin-topnav-links.open{display:flex} .admin-topnav-dropdown-menu{position:static;box-shadow:none;border:none;background:rgba(255,255,255,.06);margin:2px 0 2px 16px} .admin-topnav-location{display:none} .admin-topnav{padding:0 12px} .admin-topnav-inner{padding:0;gap:10px} .admin-topnav-user-info{display:none} .admin-topnav-right{gap:6px;margin-left:auto} .admin-attention{align-items:flex-start;flex-direction:column} } @media(max-width:640px){ .admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .admin-content{padding:16px 12px 86px} .admin-page-header{flex-direction:column;gap:12px} .admin-page-title{font-size:22px} .admin-page-subtitle{font-size:13px;overflow-wrap:anywhere} .admin-status-strip{gap:8px 14px;margin-top:-4px} .admin-status-strip > div{flex:1 1 42%} .admin-attention{padding:15px} .admin-attention-actions{width:100%} .admin-attention-actions .admin-btn{flex:1;justify-content:center} .admin-kpi-card{padding:15px;min-width:0} .admin-kpi-value{font-size:22px;overflow-wrap:anywhere} .admin-kpi-row{display:block} .admin-kpi-change{margin-top:7px} .admin-kpi-drill{opacity:1;transform:none} .kpi-sparkline{height:20px} .admin-two-col{display:flex;flex-direction:column} .admin-queue-card{order:1} .admin-chart-card{order:2;padding:15px} .admin-chart-header{align-items:flex-start;gap:10px} .admin-chart-header>.flex-c{align-items:flex-end;gap:7px;flex-direction:column-reverse} .admin-chart-legend{gap:8px} .admin-chart-area{gap:5px;min-width:0} .admin-chart-yaxis{min-width:34px;font-size:10px} .admin-table-card{padding:15px} .admin-table-header{align-items:flex-start;gap:12px} .admin-table{font-size:13px} .admin-table thead{display:none} .admin-table tbody tr{display:flex;flex-direction:column;padding:12px;border:1px solid var(--border);border-radius:10px;margin-bottom:10px} .admin-table tbody td{display:grid;grid-template-columns:105px minmax(0,1fr);align-items:center;gap:8px;padding:5px 0;border:none} .admin-table tbody td::before{content:attr(data-label);font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .admin-table tbody td.admin-table-empty{display:block} .admin-table tbody td.admin-table-empty::before{content:none} .admin-table-footer{flex-direction:column;gap:10px;align-items:flex-start} .admin-topnav-brand span{display:none} .admin-footer{padding:14px 12px;flex-direction:column;align-items:flex-start;gap:8px} .impersonation-banner{padding:8px 12px} } @media(max-width:380px){ .admin-kpi-grid{grid-template-columns:1fr} .admin-status-strip > div{flex-basis:100%} } @media(max-width:520px){ .grid.cols-4{grid-template-columns:1fr} .grid.cols-5{grid-template-columns:1fr} .kpi-grid{grid-template-columns:1fr} .topbar{padding:12px 14px;flex-wrap:wrap} .user-menu-meta{align-items:flex-start} .table{display:block;overflow:auto;-webkit-overflow-scrolling:touch} } /* ===== Utility Classes ===== */ .sp-6{height:6px} .sp-8{height:8px} .sp-10{height:10px} .sp-12{height:12px} .sp-14{height:14px} .sp-16{height:16px} .sp-20{height:20px} .sp-24{height:24px} .flex-c{display:flex;align-items:center} .flex-sb{display:flex;justify-content:space-between;align-items:center} .flex-e{display:flex;justify-content:flex-end;align-items:center} .flex-col{display:flex;flex-direction:column} .gap-6{gap:6px} .gap-8{gap:8px} .gap-10{gap:10px} .gap-12{gap:12px} .gap-14{gap:14px} .gap-16{gap:16px} .gap-20{gap:20px} .hidden{display:none} .muted-text{color:var(--muted)} .card-nested{box-shadow:none;border:1px solid var(--border)} /* ===== Global Search ===== */ .admin-topnav-search,.sa-topnav-search{position:relative} .global-search-results{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:360px;max-height:420px;overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.15),0 4px 12px rgba(0,0,0,.08);z-index:1000;padding:6px} .search-shortcut{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:2px 5px;border:1px solid rgba(255,255,255,.25);border-radius:5px;background:rgba(255,255,255,.08);color:inherit;font:600 10px/1.2 inherit;pointer-events:none} .admin-topnav-search-wrap input,.sa-topnav-search-wrap input{padding-right:52px} .global-search-results.open{display:block} .global-search-category{padding:8px 12px 4px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em} .global-search-item{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--text);transition:background .12s ease;cursor:pointer} .global-search-item:hover{background:rgba(6,78,59,.06)} .global-search-item-label{font-size:14px;font-weight:600;color:var(--text);line-height:1.3} .global-search-item-sub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.3} .global-search-loading{display:flex;align-items:center;gap:10px;padding:16px 12px;font-size:13px;color:var(--muted)} .global-search-spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--admin-brand);border-radius:50%;animation:gsSpin .6s linear infinite;flex-shrink:0} @keyframes gsSpin{to{transform:rotate(360deg)}} .global-search-empty{padding:20px 12px;text-align:center;font-size:13px;color:var(--muted)} /* ===== Super Admin responsive user management ===== */ .sa-user-search-form{display:flex;gap:8px;align-items:center} .confirm-modal{max-width:500px} .confirm-phrase-wrap{margin-top:18px} .confirm-phrase-wrap label{display:block;margin-bottom:7px;color:var(--muted)} .confirm-phrase-wrap input{width:100%} @media(max-width:560px){.modal-overlay{align-items:flex-end;padding:12px}.confirm-modal{max-width:none;border-radius:20px}.confirm-modal .modal-header{padding:20px 18px 15px}.confirm-modal .modal-body{padding:6px 18px 18px}.confirm-message-layout{padding:14px}.confirm-modal .modal-footer{display:grid;grid-template-columns:1fr 1fr;padding:14px 18px 18px}.confirm-modal .modal-footer .btn{width:100%;min-width:0}.confirm-modal .modal-title{font-size:19px}} @media (max-width:700px){ .sa-user-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%} .sa-user-search-form .sa-search-wrap,.sa-user-search-form .sa-search-wrap input{width:100%;min-width:0!important} .sa-accent-card .header-actions{width:100%;justify-content:stretch} .sa-accent-card .header-actions>.btn{flex:1} .sa-responsive-user-table,.sa-responsive-user-table tbody,.sa-responsive-user-table tr,.sa-responsive-user-table td{display:block;width:100%} .sa-responsive-user-table thead{display:none} .sa-responsive-user-table tr{padding:10px 14px;border:1px solid var(--border);border-radius:12px;margin-bottom:10px;background:var(--panel)} .sa-responsive-user-table td{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:start;padding:7px 0!important;border:0!important;text-align:left!important;overflow-wrap:anywhere} .sa-responsive-user-table td::before{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .sa-responsive-user-table td:nth-child(1)::before{content:"ID"} .sa-responsive-user-table td:nth-child(2)::before{content:"Role"} .sa-responsive-user-table td:nth-child(3)::before{content:"Username"} .sa-responsive-user-table td:nth-child(4)::before{content:"Email"} .sa-responsive-user-table td:nth-child(5)::before{content:"SACCO"} .sa-responsive-user-table td:nth-child(6)::before{content:"Branch"} .sa-responsive-user-table td:nth-child(7)::before{content:"Status"} .sa-responsive-user-table td:nth-child(8)::before{content:"Created"} .sa-responsive-user-table td:nth-child(9){display:block;padding-top:10px!important;border-top:1px solid var(--border)!important} .sa-responsive-user-table td:nth-child(9)::before{content:none} .sa-responsive-user-table .table-row-actions,.sa-responsive-user-table .table-actions{justify-content:flex-end} } /* ===== Notification Bell ===== */ .notif-bell{position:relative;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);border:none;cursor:pointer;transition:all .15s ease} .notif-bell:hover{background:rgba(255,255,255,.18);color:#fff;transform:scale(1.05)} .notif-bell:active{transform:scale(.95)} .notif-bell-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--admin-brand);line-height:1} .notif-bell-count:empty{display:none} /* ===== SA Topnav User Profile ===== */ .sa-topnav-user{position:relative} .sa-topnav-user-btn{display:flex;align-items:center;gap:8px;color:#fff;cursor:pointer;background:none;border:none;padding:4px 8px;border-radius:10px;transition:all .15s ease;font:inherit} .sa-topnav-user-btn:hover{background:rgba(255,255,255,.1)} .sa-topnav-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;border:2px solid rgba(255,255,255,.3);flex-shrink:0} .sa-topnav-user-info{text-align:right;line-height:1.3} .sa-topnav-username{font-size:13px;font-weight:600;color:#fff} .sa-topnav-role{font-size:11px;color:rgba(255,255,255,.6)} .sa-topnav-dropdown-arrow{color:rgba(255,255,255,.5);margin-left:4px;transition:transform .2s} .sa-topnav-user.open .sa-topnav-dropdown-arrow{transform:rotate(180deg)} .sa-topnav-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;z-index:9999;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s} .sa-topnav-user.open .sa-topnav-pop{opacity:1;visibility:visible;transform:translateY(0)} .sa-topnav-pop .menu-item{display:block;width:100%;padding:8px 12px;border:none;background:none;text-align:left;font-size:13px;font-weight:500;color:var(--text);border-radius:8px;cursor:pointer;transition:all .15s ease} .sa-topnav-pop .menu-item:hover{background:var(--surface)} .sa-topnav-pop .menu-item.danger{color:var(--danger)} /* ===== SA Topnav Search ===== */ .sa-topnav-search{flex:1;max-width:360px;margin:0 auto} .sa-topnav-search-wrap{position:relative;display:flex;align-items:center} .sa-topnav-search-wrap svg{position:absolute;left:12px;color:rgba(255,255,255,.45);pointer-events:none} .sa-topnav-search input{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:8px 12px 8px 38px;color:#fff;font-size:13px;outline:none;transition:border-color .2s} .sa-topnav-search input::placeholder{color:rgba(255,255,255,.45)} .sa-topnav-search input:focus{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.15)} /* ===== SA Topnav Dark Mode ===== */ html[data-theme="dark"] .sa-topnav{background:#0f1a2e;border-bottom-color:#243556} html[data-theme="dark"] .sa-topnav-dropdown-menu{background:#0f1a2e;border-color:#243556} html[data-theme="dark"] .sa-topnav-dropdown-item:hover{background:rgba(255,255,255,.06)} html[data-theme="dark"] .sa-topnav-pop{background:#0f1a2e;border-color:#243556} html[data-theme="dark"] .sa-topnav-search input{border-color:rgba(255,255,255,.12)} html[data-theme="dark"] .sa-topnav-search input:focus{border-color:rgba(255,255,255,.25)} html[data-theme="dark"] .notif-bell{background:rgba(255,255,255,.06);color:rgba(255,255,255,.6)} html[data-theme="dark"] .notif-bell:hover{background:rgba(255,255,255,.1);color:#fff} html[data-theme="dark"] .notif-bell-count{border-color:#0f1a2e} /* ===== SA Topnav Responsive ===== */ @media(max-width:980px){ .sa-topnav-search{display:none} } @media(max-width:820px){ .sa-topnav-inner{padding:0 16px} .sa-topnav-links{display:none} .sa-topnav-brand-text{font-size:15px} } /* ===== Admin Topnav Dark Mode ===== */ html[data-theme="dark"] .admin-topnav{background:#0f1a2e} html[data-theme="dark"] .admin-topnav-dropdown-menu{background:#0f1a2e} html[data-theme="dark"] .admin-topnav-dropdown-item{color:var(--text)} html[data-theme="dark"] .admin-topnav-dropdown-item:hover{background:rgba(255,255,255,.06)} html[data-theme="dark"] .admin-topnav-pop{background:#0f1a2e} html[data-theme="dark"] .user-menu-pop{background:var(--panel);border-color:var(--border)} html[data-theme="dark"] .user-menu-pop .menu-item{color:var(--text)} html[data-theme="dark"] .user-menu-pop .menu-item:hover{background:var(--surface);color:var(--admin-brand)} /* ===== SA Dashboard Dark Mode ===== */ html[data-theme="dark"] .sa-dash-kpi-card{background:var(--panel);border-color:var(--border)} html[data-theme="dark"] .sa-dash-kpi-value{color:var(--text)} html[data-theme="dark"] .sa-dash-kpi-label{color:var(--muted)} html[data-theme="dark"] .sa-dash-panel{background:var(--panel);border-color:var(--border)} html[data-theme="dark"] .sa-dash-panel-title{color:var(--text)} html[data-theme="dark"] .sa-dash-action-card{background:var(--panel);border-color:var(--border)} html[data-theme="dark"] .sa-dash-action-card:hover{border-color:var(--admin-brand)} html[data-theme="dark"] .sa-dash-action-title{color:var(--text)} html[data-theme="dark"] .sa-dash-health-row{border-bottom-color:var(--border)} html[data-theme="dark"] .sa-dash-health-label{color:var(--muted)} html[data-theme="dark"] .sa-dash-health-value{color:var(--text)} html[data-theme="dark"] .sa-dash-health-tip{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.2);color:var(--success)} html[data-theme="dark"] .sa-settings-title{color:var(--text)} html[data-theme="dark"] .sa-settings-subtitle{color:var(--muted)} html[data-theme="dark"] .sa-settings-select{background:var(--panel);border-color:var(--border);color:var(--text)} html[data-theme="dark"] .sa-settings-nav{border-bottom-color:var(--border)} html[data-theme="dark"] .sa-settings-nav-item{color:var(--muted)} html[data-theme="dark"] .sa-settings-nav-item:hover{background:var(--surface);color:var(--text)} html[data-theme="dark"] .sa-settings-nav-item.active{color:var(--admin-brand)} html[data-theme="dark"] .sa-section-card{background:var(--panel);border-color:var(--border)} html[data-theme="dark"] .sa-section-card .sa-section-title{color:var(--text)} html[data-theme="dark"] .sa-section-card .sa-section-sub{color:var(--muted)} html[data-theme="dark"] .sa-section-card .card-header{border-bottom-color:var(--border)} html[data-theme="dark"] .sa-backup-card{background:var(--panel);border-color:var(--border)} /* ===== SA Dashboard Responsive ===== */ @media(max-width:1200px){ .sa-dash-kpi-grid{grid-template-columns:repeat(2,1fr)} .sa-dash-two-col{grid-template-columns:1fr} } @media(max-width:640px){ .sa-dash-kpi-grid{grid-template-columns:1fr} .sa-dash-welcome-content{flex-direction:column;text-align:center} .sa-dash-welcome-badges{justify-content:center} .sa-dash-actions-grid{grid-template-columns:1fr} } /* ===== KPI Sparkline ===== */ .kpi-sparkline{display:flex;align-items:flex-end;gap:2px;height:32px;margin-top:8px} .kpi-sparkline-bar{flex:1;border-radius:2px 2px 0 0;background:var(--admin-brand);opacity:.25;transition:opacity .2s;min-height:3px} .kpi-sparkline-bar:last-child{opacity:.6} .kpi-sparkline-bar:hover{opacity:1} /* ===== Admin KPI Card Enhancement ===== */ .admin-kpi-card::after{content:'';position:absolute;top:0;right:0;width:80px;height:80px;border-radius:50%;opacity:.04;transform:translate(20px,-20px)} .admin-kpi-card.brand-accent::after{background:var(--admin-brand)} .admin-kpi-card.gold-accent::after{background:var(--admin-accent)} .admin-kpi-card.danger-accent::after{background:var(--danger)} .admin-kpi-card.success-accent::after{background:var(--success)} /* ===== Admin Chart Enhancement ===== */ .admin-chart-yaxis{display:flex;flex-direction:column;justify-content:space-between;height:200px;padding-right:8px;font-size:11px;color:var(--muted);text-align:right;min-width:40px} .admin-chart-time-selector{display:flex;gap:4px;background:var(--surface);padding:3px;border-radius:8px} .admin-chart-time-btn{padding:5px 12px;border:none;background:transparent;font-size:12px;font-weight:600;font-family:inherit;color:var(--muted);cursor:pointer;border-radius:6px;transition:all .15s ease} .admin-chart-time-btn:hover{color:var(--text);background:rgba(0,0,0,.03)} .admin-chart-time-btn.active{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08);font-weight:700} /* ===== Admin Queue Enhancement ===== */ .admin-queue-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0} .admin-queue-avatar.green{background:rgba(6,78,59,.1);color:#065f46} .admin-queue-avatar.gold{background:rgba(212,175,55,.12);color:#92400e} html[data-theme="dark"] .admin-queue-avatar.green{background:rgba(16,185,129,.15);color:#34d399} html[data-theme="dark"] .admin-queue-avatar.gold{background:rgba(251,191,36,.15);color:#fbbf24} /* ===== Admin Table Enhancement ===== */ .admin-table tbody tr{transition:background .15s} .admin-table tbody tr:hover{background:var(--surface)} .admin-table-sort{cursor:pointer;user-select:none} .admin-table-sort:hover{color:var(--text)} .admin-table-empty{text-align:center;padding:32px;color:var(--muted)} /* ===== Admin portal unified experience ===== */ .admin-portal-modern .admin-content>.card{border-color:rgba(98,125,152,.18);box-shadow:0 3px 14px rgba(16,42,67,.045)} .admin-portal-modern .admin-content>.card:first-of-type{overflow:visible} .admin-portal-modern .admin-content>.card:first-of-type>.card-header{padding:20px 22px;background:linear-gradient(135deg,rgba(6,78,59,.045),rgba(212,175,55,.035));border-radius:16px} .admin-portal-modern .page-title{font-size:22px;color:var(--text)} .admin-portal-modern .page-subtitle{max-width:720px;line-height:1.55} .admin-portal-modern .card-header{min-height:64px} .admin-portal-modern .card-header>div:first-child:not(.page-head):not(.header-actions){font-family:Manrope,Inter,system-ui;font-weight:800;color:var(--text)} .admin-portal-modern .form label{font-weight:700;color:var(--text)} .admin-portal-modern input,.admin-portal-modern select,.admin-portal-modern textarea{min-height:42px} .admin-portal-modern .table-wrap{border-radius:10px;outline:none} .admin-portal-modern .table-wrap:focus-visible{box-shadow:0 0 0 3px var(--ring)} .admin-portal-modern .table th{background:color-mix(in srgb,var(--panel) 94%,var(--admin-brand) 6%)} .admin-portal-modern .table tbody tr:focus-within{background:rgba(6,78,59,.055)} .admin-portal-modern .table a:not(.btn):not(.btn-icon):not(.menu-item){color:var(--admin-brand);font-weight:650} .admin-portal-modern .pill{text-transform:capitalize} .admin-portal-modern .muted{line-height:1.55} .admin-smart-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .admin-workspace-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px} .admin-workspace-stat{padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--panel)} .admin-workspace-stat-label{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .admin-workspace-stat-value{margin-top:4px;font:800 22px/1.2 Manrope,Inter,system-ui;color:var(--text)} .admin-workspace-stat-sub{margin-top:4px;font-size:12px;color:var(--muted)} .admin-section-nav{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:3px 0 8px;scrollbar-width:thin} .data-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);color:var(--muted);font-size:13px} .data-pagination>div{display:flex;align-items:center;gap:7px} .report-library{margin-top:14px;padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--panel)} .report-library-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px} .report-library-head h2{font-size:20px} .report-library-head p{max-width:520px;margin:0;color:var(--muted)} .report-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .report-library-card{padding:17px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--panel) 96%,var(--admin-brand) 4%)} .report-library-card h3{margin-bottom:10px;font-size:15px} .report-library-links{display:flex;flex-direction:column;gap:3px} .report-library-links a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:600;transition:all .15s ease} .report-library-links a:hover,.report-library-links a:focus-visible{background:rgba(6,78,59,.07);color:var(--admin-brand);outline:none} .work-queue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} .work-queue-section{scroll-margin-top:76px;overflow:hidden} .work-queue-section .card-header{min-height:68px} .work-item-list{display:flex;flex-direction:column;gap:9px} .work-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--panel) 97%,var(--admin-brand) 3%);transition:border-color .15s ease,transform .15s ease} .work-item:hover{border-color:color-mix(in srgb,var(--border) 55%,var(--admin-brand) 45%);transform:translateY(-1px)} .work-item>div{min-width:0} .work-item strong{display:block;color:var(--text);font-size:13px;overflow-wrap:anywhere} .work-item span{display:block;margin-top:2px;color:var(--muted);font-size:12px} .work-item .btn{flex-shrink:0} .work-empty{padding:22px 10px;text-align:center;color:var(--muted);font-size:13px} .admin-workspace-stat[href]{display:block;color:inherit;text-decoration:none;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease} .admin-workspace-stat[href]:hover,.admin-workspace-stat[href]:focus-visible{border-color:var(--admin-brand);box-shadow:0 5px 16px rgba(6,78,59,.08);outline:none;transform:translateY(-1px)} @media(max-width:980px){ .admin-portal-modern .card-header{align-items:flex-start;flex-direction:column} .admin-portal-modern .header-actions{width:100%;justify-content:flex-start} .admin-portal-modern .header-actions>.form,.admin-portal-modern .header-actions>form{flex:1 1 320px} .admin-workspace-summary{grid-template-columns:repeat(2,minmax(0,1fr))} .report-library-grid{grid-template-columns:1fr} .work-queue-grid{grid-template-columns:1fr} } @media(max-width:640px){ .admin-portal-modern .admin-content>.card:first-of-type>.card-header{padding:16px} .admin-portal-modern .page-title{font-size:20px} .admin-portal-modern .header-actions{gap:7px} .admin-portal-modern .header-actions .btn{flex:1 1 auto} .admin-portal-modern .header-actions input{width:100%;min-width:0} .admin-portal-modern .card-body{padding:14px} .admin-portal-modern .table:not(.admin-table) thead{display:none} .admin-portal-modern .table:not(.admin-table),.admin-portal-modern .table:not(.admin-table) tbody{display:block;width:100%} .admin-portal-modern .table:not(.admin-table) tbody tr{display:block;margin-bottom:10px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;background:var(--panel)} .admin-portal-modern .table:not(.admin-table) tbody td{display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);gap:10px;align-items:start;padding:7px 0;border:0;overflow-wrap:anywhere} .admin-portal-modern .table:not(.admin-table) tbody td::before{content:attr(data-label);color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.045em;text-transform:uppercase} .admin-portal-modern .table:not(.admin-table) tbody td[colspan]{display:block;text-align:center} .admin-portal-modern .table:not(.admin-table) tbody td[colspan]::before{content:none} .admin-portal-modern .table-actions,.admin-portal-modern .table-row-actions{justify-content:flex-start} .admin-portal-modern .table-actions .btn,.admin-portal-modern .table-row-actions .btn{min-height:40px} .admin-workspace-summary{grid-template-columns:1fr} .report-library{padding:15px} .report-library-head{flex-direction:column;gap:6px} .data-pagination{align-items:flex-start;flex-direction:column} .confirm-actions{flex-direction:column-reverse} .confirm-actions .btn{width:100%} .app-confirm-overlay{padding:14px} .work-item{align-items:flex-start;flex-direction:column} .work-item .btn{width:100%} } /* ===== Public experience refresh ===== */ .lp-mobile-menu{display:none;width:44px;height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer} .lp-mobile-menu span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s} .lp-mobile-menu.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .lp-mobile-menu.open span:nth-child(2){opacity:0} .lp-mobile-menu.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .lp-btn-lg{min-height:50px;padding:14px 24px;font-size:15px} .lp-hero-v2{min-height:760px;padding:132px 0 86px;align-items:center} .lp-hero-v2 .lp-hero-bg{height:100%} .lp-hero-v2 .lp-hero-overlay{background:linear-gradient(90deg,rgba(3,32,25,.96) 0%,rgba(4,45,34,.91) 44%,rgba(4,45,34,.70) 100%),linear-gradient(0deg,rgba(3,24,19,.22),rgba(3,24,19,.22))} .lp-hero-grid-v2{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);align-items:center;gap:64px} .lp-hero-copy{text-align:left} .lp-hero-v2 .lp-hero-h1{font-size:clamp(42px,4.8vw,68px);max-width:760px;margin-top:22px;line-height:1.02;text-wrap:balance} .lp-hero-v2 .lp-hero-p{max-width:650px;margin:22px 0 0;font-size:18px;text-shadow:none} .lp-hero-v2 .lp-hero-actions{justify-content:flex-start;margin-top:30px} .lp-hero-v2 .lp-accent{-webkit-text-fill-color:initial;background:none;color:#f6cf62;filter:none} .lp-hero-signin{margin-top:18px;color:rgba(255,255,255,.76);font-size:14px} .lp-hero-signin a{color:#fff;text-decoration:underline;text-underline-offset:4px;font-weight:700} .lp-product-window{border:1px solid rgba(255,255,255,.2);border-radius:20px;background:#f7faf8;box-shadow:0 36px 90px rgba(0,0,0,.42);overflow:hidden;transform:perspective(1400px) rotateY(-2deg) rotateX(1deg)} .lp-window-bar{height:42px;padding:0 14px;display:flex;align-items:center;gap:7px;background:#e8efeb;border-bottom:1px solid #dce6e0;color:#64756c;font-size:11px} .lp-window-bar span{width:8px;height:8px;border-radius:50%;background:#9eb0a6} .lp-window-bar strong{margin-left:7px;font-weight:700} .lp-window-body{padding:24px;color:#18362c} .lp-preview-top,.lp-preview-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px} .lp-preview-top small{color:#718079}.lp-preview-top h2{font-size:21px;margin-top:3px}.lp-preview-status{font-size:10px;font-weight:800;color:#08754d;background:#dff5e9;border-radius:999px;padding:7px 10px} .lp-preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px} .lp-preview-metrics>div{background:#fff;border:1px solid #e0e8e3;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px}.lp-preview-metrics span,.lp-preview-metrics small{font-size:10px;color:#728179}.lp-preview-metrics strong{font-size:19px;color:#124f3c} .lp-preview-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:10px;margin-top:10px}.lp-preview-panel{background:#fff;border:1px solid #e0e8e3;border-radius:12px;padding:14px}.lp-preview-panel-head{font-size:11px;margin-bottom:10px}.lp-preview-panel-head span{color:#08754d;font-weight:700} .lp-activity{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:9px;padding:9px 0;border-top:1px solid #edf1ee}.lp-activity i{width:7px;height:7px;border-radius:50%}.lp-activity i.green{background:#059669}.lp-activity i.gold{background:#d4af37}.lp-activity i.blue{background:#3b82f6}.lp-activity div{display:flex;flex-direction:column}.lp-activity strong{font-size:10px}.lp-activity small,.lp-activity time{font-size:9px;color:#7c8b83} .lp-queue-bar{height:7px;background:#e7eee9;border-radius:999px;overflow:hidden;margin:18px 0 14px}.lp-queue-bar span{display:block;height:100%;background:#d4af37;border-radius:inherit}.lp-queue p{font-size:10px;color:#718079;line-height:1.5}.lp-queue button{width:100%;border:0;border-radius:7px;background:#064e3b;color:#fff;padding:8px;font:700 10px inherit;margin-top:9px} .lp-proof{background:#fff;border-bottom:1px solid #e2e8e4}.lp-proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.lp-proof-grid>div{padding:28px 30px;border-left:1px solid #e2e8e4;display:flex;flex-direction:column;gap:6px}.lp-proof-grid>div:last-child{border-right:1px solid #e2e8e4}.lp-proof strong{color:#064e3b;font-size:15px}.lp-proof span{color:#52665c;font-size:13px;line-height:1.55} .lp-product-section{background:#f7faf8}.lp-outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lp-outcome-card{background:#fff;border:1px solid #dfe8e2;border-radius:18px;padding:30px;box-shadow:0 10px 30px rgba(6,78,59,.04)}.lp-outcome-kicker{color:#08754d;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.lp-outcome-card h3{color:#123c30;font-size:23px;margin-top:18px}.lp-outcome-card p{color:#52665c;line-height:1.7;margin-top:12px}.lp-outcome-card ul{padding:18px 0 0;margin:18px 0 0;border-top:1px solid #e7ece9;list-style:none;display:grid;gap:9px}.lp-outcome-card li{font-weight:700;color:#284d41;font-size:13px}.lp-outcome-card li:before{content:'✓';color:#0b8c5b;margin-right:9px} .lp-role-experience{background:#0b2f25;color:#fff}.lp-role-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:start}.lp-role-experience .lp-section-title{color:#fff;text-align:left}.lp-role-experience .lp-section-sub{color:#c8d8d1;margin-left:0}.lp-text-link{display:inline-block;margin-top:22px;color:#f2cf68;font-weight:800;text-decoration:underline;text-underline-offset:5px}.lp-role-list{display:grid}.lp-role-list article{display:grid;grid-template-columns:48px 1fr;gap:22px;padding:25px 0;border-top:1px solid rgba(255,255,255,.16)}.lp-role-list article:last-child{border-bottom:1px solid rgba(255,255,255,.16)}.lp-role-list article>span{color:#f2cf68;font-weight:800}.lp-role-list h3{font-size:20px;color:#fff}.lp-role-list p{color:#c8d8d1;margin-top:7px;line-height:1.6} .lp-governance{background:#fff}.lp-governance-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.lp-governance-grid .lp-section-title{text-align:left}.lp-governance-grid .lp-section-sub{margin-left:0}.lp-governance-list{border:1px solid #dde7e1;border-radius:18px;overflow:hidden}.lp-governance-list>div{padding:20px 22px;display:grid;grid-template-columns:1fr 1.3fr;gap:24px;border-bottom:1px solid #e5ece8}.lp-governance-list>div:last-child{border:0}.lp-governance-list strong{color:#164a39}.lp-governance-list span{color:#607269;font-size:13px} .lp-cta-eyebrow{color:#f5d875;text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:800;margin-bottom:12px}.lp-cta-card{padding:64px max(28px,8vw)}.lp-cta-title{max-width:820px;margin:0 auto}.lp-footer-grid-v2{grid-template-columns:1.6fr .7fr .7fr} .lp-btn:focus-visible,.lp-links a:focus-visible,.lp-text-link:focus-visible,.lp-footer a:focus-visible,.auth-submit:focus-visible,.auth-back-btn:focus-visible,.auth-theme-btn:focus-visible,.auth-password-toggle:focus-visible{outline:3px solid #f4c84f;outline-offset:3px} .auth-password-toggle{width:44px;height:44px;right:4px;justify-content:center}.auth-input-wrap input[type="password"],.auth-input-wrap input#loginPassword{padding-right:50px}.auth-remember{min-height:44px}.auth-remember input[type="checkbox"]{width:20px;height:20px}.auth-form-sub{color:#52606d}.auth-input-wrap input::placeholder{color:#6b7280} @media (max-width:1100px){.lp-hero-grid-v2{grid-template-columns:1fr;gap:44px}.lp-hero-v2{padding-top:130px}.lp-hero-copy{text-align:center}.lp-hero-v2 .lp-hero-p{margin-left:auto;margin-right:auto}.lp-hero-v2 .lp-hero-actions{justify-content:center}.lp-product-window{max-width:780px;margin:0 auto;transform:none}.lp-role-layout,.lp-governance-grid{gap:44px}} @media (max-width:900px){.lp-nav{padding:10px 0;background:rgba(6,38,29,.94);backdrop-filter:blur(14px)}.lp-mobile-menu{display:flex;order:3}.lp-nav-actions{margin-left:auto}.lp-nav-actions [data-theme-toggle],.lp-nav-login{display:none}.lp-links{display:none;position:absolute;top:64px;left:16px;right:16px;padding:10px;background:#fff;border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.25);flex-direction:column;align-items:stretch;gap:0}.lp-links.open{display:flex}.lp-links a{padding:13px 14px;color:#16392e;text-shadow:none;border-radius:9px}.lp-links a:hover{color:#064e3b;background:#eef6f2}.lp-outcome-grid{grid-template-columns:1fr}.lp-role-layout,.lp-governance-grid{grid-template-columns:1fr}.lp-role-experience .lp-section-title,.lp-governance-grid .lp-section-title{text-align:left}.lp-proof-grid{grid-template-columns:1fr}.lp-proof-grid>div,.lp-proof-grid>div:last-child{border:0;border-bottom:1px solid #e2e8e4;padding:20px 0}.lp-footer-grid-v2{grid-template-columns:1fr 1fr}} @media (max-width:640px){.lp-brand span{font-size:15px}.lp-brand-logo svg{width:32px;height:32px}.lp-nav-actions .lp-btn-primary{padding:9px 12px;font-size:12px}.lp-hero-v2{min-height:auto;padding:116px 0 58px}.lp-hero-v2 .lp-hero-h1{font-size:clamp(34px,10.5vw,48px);line-height:1.06}.lp-hero-v2 .lp-hero-p{font-size:16px}.lp-hero-v2 .lp-hero-actions{display:grid}.lp-hero-v2 .lp-btn{width:100%}.lp-product-window{margin-left:-8px;margin-right:-8px}.lp-window-body{padding:14px}.lp-preview-status{display:none}.lp-preview-metrics{grid-template-columns:1fr 1fr}.lp-preview-metrics>div:last-child{display:none}.lp-preview-grid{grid-template-columns:1fr}.lp-queue{display:none}.lp-proof-grid{padding-left:20px;padding-right:20px}.lp-role-layout,.lp-governance-grid{gap:34px}.lp-governance-list>div{grid-template-columns:1fr;gap:5px}.lp-footer-grid-v2{grid-template-columns:1fr}.lp-footer-links-group{padding-top:8px}.lp-cta-card{padding:44px 24px}.lp-cta-actions{display:grid}.lp-cta-actions .lp-btn{width:100%}.auth-options{align-items:center}.auth-forgot{min-height:44px;display:inline-flex;align-items:center}.auth-form{padding-top:48px;padding-bottom:48px}} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.lp-product-window,.lp-btn,.lp-feature-card,.lp-role-card{transition:none;transform:none}} /* ===== Super Admin operational UX ===== */ .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .sa-attention-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px 24px;margin-bottom:24px} .sa-attention-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:17px}.sa-attention-head h2{font-size:19px;color:var(--text);margin-top:3px}.sa-attention-eyebrow{display:block;color:var(--admin-brand);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.sa-attention-time{font-size:12px;color:var(--muted)} .sa-attention-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.sa-attention-item{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:15px;border:1px solid var(--border);border-radius:12px;background:var(--surface);transition:border-color .15s,transform .15s}.sa-attention-item:hover{transform:translateY(-1px);border-color:var(--admin-brand)}.sa-attention-item span{font-size:12px;color:var(--muted);font-weight:700}.sa-attention-item strong{grid-row:1/3;grid-column:2;font-size:25px;color:var(--text);font-variant-numeric:tabular-nums}.sa-attention-item small{font-size:11px;color:var(--muted)}.sa-attention-item.warning{border-left:4px solid var(--warning)}.sa-attention-item.danger{border-left:4px solid var(--danger)}.sa-attention-item.clear{border-left:4px solid var(--success)} .sa-activity-panel{margin-top:20px}.sa-activity-panel .sa-dash-panel-header{justify-content:space-between}.sa-panel-link{font-size:12px;color:var(--admin-brand);font-weight:800}.sa-activity-list{display:grid}.sa-activity-row{display:grid;grid-template-columns:10px minmax(170px,1fr) minmax(100px,.5fr) auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)}.sa-activity-mark{width:8px;height:8px;border-radius:50%;background:var(--success)}.sa-activity-row div{display:flex;flex-direction:column}.sa-activity-row strong{font-size:13px}.sa-activity-row small,.sa-activity-row>span,.sa-activity-row time{font-size:11px;color:var(--muted)} .sa-settings-nav{position:sticky;top:64px;z-index:20;display:flex;gap:6px;overflow-x:auto;margin:-10px 0 22px;padding:8px;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);scrollbar-width:thin}.sa-settings-nav a{white-space:nowrap;padding:9px 13px;border-radius:9px;color:var(--muted);font-size:12px;font-weight:800}.sa-settings-nav a:hover{background:var(--surface);color:var(--text)}.sa-settings-nav a.active{background:var(--admin-brand);color:#fff} .sa-empty-state{text-align:center;padding:42px 20px;border:1px dashed var(--border);border-radius:14px;background:var(--surface)}.sa-empty-state strong{display:block;font-size:17px;color:var(--text)}.sa-empty-state p{max-width:480px;margin:7px auto 17px;color:var(--muted)} @media(max-width:900px){.sa-attention-grid{grid-template-columns:1fr 1fr}.sa-settings-nav{top:58px}.sa-activity-row{grid-template-columns:10px 1fr auto}.sa-activity-row>span{display:none}} @media(max-width:560px){.sa-attention-head{display:block}.sa-attention-time{display:block;margin-top:6px}.sa-attention-grid{grid-template-columns:1fr}.sa-attention-panel{padding:18px}.sa-activity-row{grid-template-columns:10px 1fr}.sa-activity-row time{grid-column:2}.sa-settings-nav{margin-left:-6px;margin-right:-6px}} /* ===== Super Admin control-centre redesign ===== */ .sa-shell{grid-template-columns:232px minmax(0,1fr);grid-template-rows:60px minmax(0,1fr);background:#f5f7fa} .sa-shell>.sa-topnav{grid-column:1/-1;grid-row:1} .sa-shell>.sa-rail{grid-column:1;grid-row:2} .sa-shell>.app-main{grid-column:2;grid-row:2;min-width:0} .sa-topnav-inner{max-width:none;padding:0 24px} .sa-topnav-links{display:none} .sa-rail{position:sticky;top:60px;height:calc(100vh - 60px);display:flex;flex-direction:column;padding:18px 14px;background:var(--panel);border-right:1px solid var(--border);z-index:30;overflow-y:auto} .sa-rail-scope{padding:13px 14px;margin-bottom:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)} .sa-rail-scope span,.sa-rail-scope small{display:block;color:var(--muted);font-size:10px;line-height:1.35}.sa-rail-scope span{text-transform:uppercase;letter-spacing:.08em;font-weight:800}.sa-rail-scope strong{display:block;margin:4px 0 2px;font-size:13px;color:var(--text)} .sa-rail-nav{display:grid;gap:4px}.sa-rail-link{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;color:var(--muted);font-size:12px;font-weight:700;text-decoration:none;transition:background .15s,color .15s}.sa-rail-link:hover{background:var(--surface);color:var(--text)}.sa-rail-link.active{background:rgba(6,78,59,.1);color:var(--admin-brand)} .sa-rail-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:var(--surface);font-size:15px;line-height:1}.sa-rail-link.active .sa-rail-icon{background:var(--admin-brand);color:#fff} .sa-rail-foot{margin-top:auto;display:flex;align-items:center;gap:9px;padding:12px 10px;border-top:1px solid var(--border)}.sa-rail-foot div{display:flex;flex-direction:column}.sa-rail-foot strong{font-size:11px;color:var(--text)}.sa-rail-foot small{font-size:9px;color:var(--muted)} .sa-health-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(16,185,129,.12);flex:0 0 auto} .sa-workspace{max-width:1180px;padding:28px 34px 46px}.sa-page-eyebrow{margin-bottom:5px;color:var(--admin-brand);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.sa-workspace .m-page-title{font-size:26px;letter-spacing:-.025em}.sa-workspace .m-page-subtitle{max-width:680px;font-size:13px} .sa-scope-chip{display:flex;align-items:center;gap:11px;min-width:155px;padding:10px 13px;border:1px solid var(--border);border-radius:11px;background:var(--panel)}.sa-scope-chip div{display:flex;flex-direction:column}.sa-scope-chip small{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.sa-scope-chip strong{font-size:12px;color:var(--text)} .sa-workspace .sa-settings-nav{position:static;margin:0 0 20px;padding:5px;border-radius:11px;box-shadow:none;background:var(--panel)} .sa-workspace .grid.cols-2{gap:14px}.sa-workspace .card{box-shadow:0 1px 2px rgba(15,23,42,.035)}.sa-workspace .sa-section-card{border-top-width:1px}.sa-workspace .card-header{min-height:54px}.sa-workspace .card-body{padding:18px} .sa-dash-welcome{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow-sm)}.sa-dash-welcome-content{position:relative;background:none!important;color:var(--text)!important;padding:22px 24px!important}.sa-dash-welcome-h1{color:var(--text)!important;font-size:26px!important}.sa-dash-welcome-sub{color:var(--muted)!important}.sa-dash-welcome-logo{display:none}.sa-dash-welcome-badges{align-items:center;flex-wrap:wrap}.sa-dash-badge{box-shadow:none} .sa-audit-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.sa-audit-stat{padding:16px;border:1px solid var(--border);border-left:3px solid var(--success);border-radius:12px;background:var(--panel)}.sa-audit-stat.danger{border-left-color:var(--danger)}.sa-audit-stat span,.sa-audit-stat small{display:block;color:var(--muted);font-size:10px}.sa-audit-stat span{font-weight:800;text-transform:uppercase;letter-spacing:.06em}.sa-audit-stat strong{display:block;margin:5px 0 3px;font-size:23px;color:var(--text)} .sa-filter-card{margin-bottom:16px}.sa-audit-filters{display:grid;grid-template-columns:minmax(220px,1fr) 200px auto auto;gap:10px;align-items:end;padding:14px}.sa-audit-filters label{font-size:10px;text-transform:uppercase;letter-spacing:.06em}.sa-audit-list{display:grid}.sa-audit-event{display:grid;grid-template-columns:10px minmax(240px,1.3fr) minmax(180px,.8fr) auto;align-items:center;gap:12px;padding:14px 2px;border-top:1px solid var(--border)}.sa-audit-event:first-child{border-top:0}.sa-audit-event-main,.sa-audit-event-scope{display:flex;min-width:0;flex-direction:column}.sa-audit-event strong{font-size:12px;color:var(--text)}.sa-audit-event small,.sa-audit-event time{font-size:10px;color:var(--muted)}.sa-audit-event-main small{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html[data-theme="dark"] .sa-shell{background:var(--bg)} @media(max-width:980px){ .sa-shell{display:grid;grid-template-columns:1fr;grid-template-rows:60px 1fr}.sa-shell>.sa-topnav{grid-column:1;grid-row:1}.sa-shell>.sa-rail{display:none}.sa-shell>.app-main{grid-column:1;grid-row:2}.sa-topnav-links{display:none}.sa-workspace{padding:20px 16px 78px}.sa-audit-summary{grid-template-columns:1fr 1fr}.sa-audit-filters{grid-template-columns:1fr 1fr}.sa-audit-event{grid-template-columns:10px 1fr auto}.sa-audit-event-scope{grid-column:2}.sa-audit-event time{grid-column:3;grid-row:1}} @media(max-width:600px){.sa-audit-summary{grid-template-columns:1fr}.sa-audit-filters{grid-template-columns:1fr}.sa-audit-event{grid-template-columns:10px 1fr}.sa-audit-event time{grid-column:2;grid-row:auto}.sa-scope-chip{width:100%}.sa-dash-welcome-content{padding:18px!important}} .sa-work-queue-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.sa-work-queue-item{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:14px;border:1px solid var(--border);border-left:3px solid var(--success);border-radius:11px;background:var(--panel);text-decoration:none}.sa-work-queue-item.warning{border-left-color:var(--warning)}.sa-work-queue-item.danger{border-left-color:var(--danger)}.sa-work-queue-item span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.sa-work-queue-item strong{grid-row:1/3;grid-column:2;font-size:22px;color:var(--text)}.sa-work-queue-item small{font-size:10px;color:var(--muted)} @media(max-width:800px){.sa-work-queue-grid{grid-template-columns:1fr 1fr}}@media(max-width:500px){.sa-work-queue-grid{grid-template-columns:1fr}} /* Report discovery: fast, keyboard-friendly, and usable on narrow screens. */ .report-command{margin:16px 0;padding:18px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--primary) 5%,var(--surface)))} .report-command>label{display:block;font-weight:750;margin-bottom:8px} .report-command-input{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)} .report-command-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)} .report-command-input input{flex:1;min-width:0;border:0!important;box-shadow:none!important;background:transparent!important;padding:10px 0!important} .report-command-input kbd{padding:2px 7px;border:1px solid var(--border);border-radius:6px;background:var(--bg);font:inherit;font-size:12px} .report-command .muted{min-height:20px;margin:7px 0 0} .report-library-card[hidden],.report-library-links a[hidden]{display:none!important} @media(max-width:700px){.report-command{padding:14px}.report-command-input kbd{display:none}} /* ===== Premium reporting centre ===== */ .report-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:16px;padding:30px 32px;border:1px solid rgba(212,175,55,.34);border-radius:20px;color:#fff;background:radial-gradient(circle at 82% 12%,rgba(212,175,55,.22),transparent 30%),linear-gradient(125deg,#033a2c 0%,#075c47 58%,#064e3b 100%);box-shadow:0 18px 45px rgba(6,78,59,.16)} .report-hero-copy{max-width:720px}.report-overline,.member-report-overline{display:block;margin-bottom:7px;color:#b88c11;font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.report-hero .report-overline{color:#f1d679}.report-hero h1{margin:0 0 8px;color:#fff;font:800 30px/1.15 Manrope,Inter,system-ui;letter-spacing:-.03em}.report-hero p{max-width:700px;margin:0;color:rgba(255,255,255,.76);line-height:1.65}.report-trust-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:19px;color:rgba(255,255,255,.78);font-size:11px;font-weight:700}.report-trust-row span{display:flex;align-items:center;gap:7px}.report-trust-row i{width:7px;height:7px;border-radius:50%;background:#5ee3ad;box-shadow:0 0 0 4px rgba(94,227,173,.14)} .report-benchmark-compact{display:flex;align-items:center;gap:15px;min-width:280px;padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(2,40,30,.35);backdrop-filter:blur(10px)}.report-benchmark-compact>div:last-child{display:flex;flex-direction:column}.report-benchmark-compact>div:last-child>strong{font-size:18px}.report-benchmark-compact small{margin-top:3px;color:rgba(255,255,255,.6);font-size:10px}.report-score-ring{width:72px;height:72px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at center,#07503e 57%,transparent 58%),conic-gradient(#e1bd4d calc(var(--score)*1%),rgba(255,255,255,.13) 0)}.report-score-ring strong{font-size:20px;line-height:1}.report-score-ring span{font-size:9px;color:rgba(255,255,255,.66)} .report-filter-card{overflow:visible}.report-filter-card .card-header{padding:18px 20px}.report-library-premium{padding:24px}.report-library-premium .report-library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.report-library-premium .report-library-card{padding:0;overflow:hidden;background:var(--panel);box-shadow:0 8px 24px rgba(10,53,40,.04)}.report-library-card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--panel) 92%,var(--admin-brand) 8%)}.report-library-card-head h3{margin:0}.report-library-card-head span{display:grid;place-content:center;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:rgba(6,78,59,.1);color:var(--admin-brand);font-size:11px;font-weight:900}.report-library-premium .report-library-links{gap:0}.report-library-premium .report-library-links a{align-items:center;padding:14px 16px;border-radius:0;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}.report-library-premium .report-library-links a:last-child{border-bottom:0}.report-link-copy{display:flex;min-width:0;flex-direction:column;gap:3px}.report-link-copy strong{color:var(--text);font-size:13px}.report-link-copy small{max-width:480px;color:var(--muted);font-size:11px;font-weight:500;line-height:1.35}.report-link-score{display:flex;min-width:54px;flex-direction:column;align-items:flex-end}.report-link-score b{color:var(--admin-brand);font-size:17px}.report-link-score small{color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.07em} .report-improvement-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:16px;padding:22px 24px;border:1px solid var(--border);border-radius:16px;background:var(--panel)}.report-improvement-panel h2{margin:0 0 5px;font-size:19px}.report-improvement-panel p{max-width:600px;margin:0;color:var(--muted);font-size:12px;line-height:1.5}.report-roadmap{display:flex;align-items:stretch}.report-roadmap>div{position:relative;min-width:112px;padding:10px 14px;border-left:1px solid var(--border);display:flex;flex-direction:column}.report-roadmap span,.report-roadmap small{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em}.report-roadmap strong{margin:3px 0;color:var(--text);font-size:22px}.report-roadmap .current strong{color:var(--admin-brand)} .report-active-summary{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:16px 0;padding:22px 24px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(115deg,var(--panel),color-mix(in srgb,var(--panel) 91%,var(--admin-brand) 9%))}.report-active-summary h2{margin:0 0 5px;font-size:22px}.report-active-summary p{max-width:650px;margin:0;color:var(--muted)}.report-quality-card{display:flex;align-items:center;gap:13px;max-width:390px}.report-quality-score{display:flex;align-items:baseline;color:var(--admin-brand)}.report-quality-score strong{font-size:32px}.report-quality-score span{font-size:11px}.report-quality-card>div:last-child{display:flex;flex-direction:column}.report-quality-card b{font-size:12px}.report-quality-card span{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.07em}.report-quality-card small{max-width:250px;color:var(--muted);font-size:10px;line-height:1.35}.report-metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}.report-metric{padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:0 4px 14px rgba(10,53,40,.03)}.report-metric span{display:block;margin-bottom:6px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.report-metric strong{color:var(--text);font-size:15px}.report-result-card{overflow:hidden}.report-generated{margin-top:3px;font-size:10px}.report-table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.report-table-toolbar>div{display:flex;flex-direction:column}.report-table-toolbar span{color:var(--muted);font-size:10px}.report-table-search input{width:230px;min-height:38px}.report-table-shell{width:100%;overflow:auto;border:1px solid var(--border);border-radius:12px}.report-data-table{min-width:720px;margin:0}.report-data-table th{position:sticky;top:0;z-index:2;background:#edf5f2;color:#315a4d;font-size:10px;letter-spacing:.055em;text-transform:uppercase}.report-data-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--panel) 97%,var(--admin-brand) 3%)}.report-data-table tbody tr:hover td{background:color-mix(in srgb,var(--panel) 91%,var(--admin-brand) 9%)}.report-number{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}.report-table-status{min-height:16px;margin:8px 0 0;font-size:10px} .report-metric-grid--control .report-metric{position:relative;overflow:hidden;border-top:3px solid var(--admin-brand);background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel) 92%,var(--admin-brand) 8%))}.report-metric-grid--control .report-metric:nth-child(3){border-top-color:var(--admin-gold)}.report-metric-grid--control .report-metric:nth-child(4){border-top-color:var(--success)} .report-control-banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:0 0 16px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--panel);box-shadow:0 8px 24px rgba(15,23,42,.04)}.report-control-banner.is-balanced{border-color:color-mix(in srgb,var(--success) 38%,var(--border));background:linear-gradient(110deg,color-mix(in srgb,var(--success) 7%,var(--panel)),var(--panel))}.report-control-banner.is-warning{border-color:color-mix(in srgb,var(--danger) 38%,var(--border));background:linear-gradient(110deg,color-mix(in srgb,var(--danger) 7%,var(--panel)),var(--panel))}.report-control-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:#fff;background:var(--success);font-size:18px;font-weight:900;box-shadow:0 7px 16px color-mix(in srgb,var(--success) 24%,transparent)}.report-control-banner.is-warning .report-control-icon{background:var(--danger)}.report-control-banner>div:nth-child(2){display:flex;flex-direction:column}.report-control-banner span{color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.report-control-banner strong{color:var(--text);font-size:14px}.report-control-banner small{margin-top:2px;color:var(--muted);font-size:10px}.report-control-difference{display:flex;min-width:140px;flex-direction:column;align-items:flex-end;padding-left:18px;border-left:1px solid var(--border)}.report-control-difference strong{margin-top:3px;color:var(--admin-brand);font-size:20px;font-variant-numeric:tabular-nums} .report-data-table tfoot th{position:sticky;bottom:0;z-index:3;padding-top:13px;padding-bottom:13px;border-top:2px solid var(--admin-brand);background:#e2f0eb;color:var(--admin-brand);font-size:11px;font-weight:900;text-transform:uppercase}.report-total-row td{border-top:2px solid var(--admin-brand)!important;background:color-mix(in srgb,var(--admin-brand) 9%,var(--panel))!important;color:var(--admin-brand);font-weight:900}.report-total-row:hover td{background:color-mix(in srgb,var(--admin-brand) 13%,var(--panel))!important} .report-metric-grid--transactions{grid-template-columns:repeat(6,minmax(0,1fr))}.report-metric-grid--transactions .report-metric{border-top:3px solid var(--admin-brand)}.report-metric-grid--transactions .report-metric:nth-child(3){border-top-color:var(--danger)}.report-metric-grid--transactions .report-metric:nth-child(4){border-top-color:var(--admin-gold)} .transaction-insight-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:center;gap:0;margin-bottom:16px;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--panel);box-shadow:0 8px 24px rgba(15,23,42,.04)}.transaction-insight-bar>div{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:2px 9px;min-height:66px;padding:13px 16px;border-right:1px solid var(--border)}.transaction-insight-bar strong{color:var(--text);font-size:12px}.transaction-insight-bar small{grid-column:2;color:var(--muted);font-size:9px}.transaction-insight-bar>a{display:flex;align-items:center;gap:10px;height:100%;padding:0 18px;color:#fff;background:var(--admin-brand);font-size:11px;font-weight:800;white-space:nowrap}.transaction-insight-bar>a span{font-size:18px}.transaction-status-dot{grid-row:1/3;width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 12%,transparent)}.transaction-status-dot.is-reversed{background:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 12%,transparent)}.transaction-status-dot.is-journal{background:var(--admin-gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--admin-gold) 15%,transparent)} .transaction-row td{vertical-align:middle}.transaction-row.is-reversed td{color:var(--muted)}.transaction-id-link{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;font-weight:850;white-space:nowrap}.transaction-status,.transaction-type{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:850;white-space:nowrap}.transaction-status{background:color-mix(in srgb,var(--success) 10%,var(--panel));color:var(--success)}.transaction-status i{width:6px;height:6px;border-radius:50%;background:currentColor}.transaction-status.is-reversed{background:color-mix(in srgb,var(--danger) 10%,var(--panel));color:var(--danger)}.transaction-type{border:1px solid color-mix(in srgb,var(--admin-brand) 14%,var(--border));background:color-mix(in srgb,var(--admin-brand) 7%,var(--panel));color:var(--admin-brand)}.transaction-reference{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--text);font-size:10px}.report-data-table:has(.transaction-row){min-width:1480px}.report-data-table:has(.transaction-row) th:nth-child(5),.report-data-table:has(.transaction-row) td:nth-child(5){position:sticky;right:0;z-index:1;background:var(--panel);box-shadow:-8px 0 14px rgba(15,23,42,.04)}.report-data-table:has(.transaction-row) th:nth-child(5){z-index:4;background:#edf5f2}.report-data-table:has(.transaction-row) tbody tr:nth-child(even) td:nth-child(5){background:color-mix(in srgb,var(--panel) 97%,var(--admin-brand) 3%)}.report-data-table:has(.transaction-row) tbody tr:hover td:nth-child(5){background:color-mix(in srgb,var(--panel) 91%,var(--admin-brand) 9%)} .report-table-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px}.report-table-tools select{min-width:130px;min-height:38px;padding:7px 28px 7px 10px;font-size:10px}.report-data-table.is-compact td{padding-top:6px;padding-bottom:6px;font-size:10px}.report-data-table.is-compact .transaction-status,.report-data-table.is-compact .transaction-type{padding:3px 6px} .dashboard-report-launcher{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:18px 0;padding:20px 22px;border:1px solid rgba(212,175,55,.35);border-radius:16px;background:linear-gradient(115deg,#fffdf5,#fff);box-shadow:0 8px 28px rgba(88,70,8,.05)}.dashboard-report-launcher h2{margin:0 0 4px;color:var(--admin-brand);font-size:19px}.dashboard-report-launcher p{margin:0;color:var(--muted);font-size:12px}.dashboard-report-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.dashboard-report-links a{display:flex;min-width:125px;flex-direction:column;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff}.dashboard-report-links span{color:var(--muted);font-size:9px;text-transform:uppercase}.dashboard-report-links strong{margin-top:2px;color:var(--text);font-size:11px}.dashboard-report-links a.all{border-color:var(--admin-brand);background:var(--admin-brand)}.dashboard-report-links a.all span,.dashboard-report-links a.all strong{color:#fff} .member-statement-launcher{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:24px;padding:22px 24px;border-radius:16px;color:#fff;background:radial-gradient(circle at 8% 0,rgba(212,175,55,.2),transparent 34%),linear-gradient(120deg,#043f30,#08745a);box-shadow:0 15px 36px rgba(6,78,59,.18)}.member-statement-launcher h2{margin:0 0 5px;color:#fff;font-size:21px}.member-statement-launcher p{margin:0;color:rgba(255,255,255,.7);font-size:12px}.member-statement-launcher .member-report-overline{color:#efd36e}.member-statement-actions{display:flex;gap:8px}.member-statement-actions a{display:flex;min-width:135px;flex-direction:column;padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:10px;color:#fff;background:rgba(255,255,255,.06)}.member-statement-actions a:hover{background:rgba(255,255,255,.12)}.member-statement-actions span{color:rgba(255,255,255,.6);font-size:9px;text-transform:uppercase;letter-spacing:.05em}.member-statement-actions strong{margin-top:3px;font-size:11px} .member-report-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px;padding:28px 30px;border-radius:18px;color:#fff;background:radial-gradient(circle at 88% 0,rgba(212,175,55,.24),transparent 35%),linear-gradient(120deg,#043f30,#08745a)}.member-report-hero h1{margin:0 0 6px;color:#fff;font-size:27px}.member-report-hero p{margin:0;color:rgba(255,255,255,.72)}.member-report-hero .member-report-overline{color:#efd36e}.member-report-actions{display:flex;gap:8px}.member-report-actions .btn{white-space:nowrap}.member-report-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.member-report-kpis>div{padding:16px;border:1px solid var(--border);border-top:3px solid var(--admin-gold);border-radius:12px;background:var(--panel)}.member-report-kpis span,.member-report-kpis small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em}.member-report-kpis strong{display:block;margin:5px 0 3px;color:var(--admin-brand);font-size:19px}.member-period-form{display:grid!important;grid-template-columns:1fr 1fr auto;align-items:end;gap:12px}.member-period-submit{display:flex}.member-period-submit .btn{min-height:42px}.member-report-table-card{overflow:hidden}.member-tx-type{display:inline-block;padding:4px 8px;border-radius:999px;background:#e8f3ef;color:var(--admin-brand);font-size:10px;font-weight:800}.member-reference{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);font-size:11px} @media(max-width:1050px){.report-metric-grid{grid-template-columns:repeat(3,1fr)}.report-library-premium .report-library-grid{grid-template-columns:1fr}.report-benchmark-compact{min-width:250px}.dashboard-report-launcher,.member-statement-launcher{align-items:flex-start;flex-direction:column}.dashboard-report-links,.member-statement-actions{width:100%;justify-content:flex-start}.dashboard-report-links a,.member-statement-actions a{flex:1}.transaction-insight-bar{grid-template-columns:repeat(3,1fr)}.transaction-insight-bar>a{grid-column:1/-1;justify-content:center;min-height:44px}} @media(max-width:720px){.report-hero,.report-active-summary,.report-improvement-panel,.member-report-hero{align-items:flex-start;flex-direction:column;padding:20px}.report-benchmark-compact,.report-quality-card{width:100%;min-width:0}.report-metric-grid,.member-report-kpis{grid-template-columns:repeat(2,1fr)}.report-roadmap{width:100%;overflow:auto}.report-roadmap>div{min-width:100px}.report-table-toolbar{align-items:stretch;flex-direction:column}.report-table-tools{display:grid;grid-template-columns:1fr 1fr;width:100%}.report-table-tools select,.report-table-tools .btn,.report-table-tools .report-table-search,.report-table-tools .report-table-search input{width:100%}.report-table-tools .report-table-search{grid-column:1/-1}.report-table-search input{width:100%}.member-statement-actions{flex-direction:column}.member-statement-actions a{width:100%}.member-period-form{grid-template-columns:1fr!important}.member-report-actions{width:100%;flex-wrap:wrap}.member-report-actions .btn{flex:1}.dashboard-report-links{display:grid;grid-template-columns:1fr 1fr}.report-filter-card .header-actions form{width:100%}.report-filter-card select{width:100%!important}.report-filter-card input[type=date]{flex:1;width:auto!important}.report-control-banner{grid-template-columns:auto 1fr}.report-control-difference{grid-column:1/-1;align-items:flex-start;padding:11px 0 0;border-top:1px solid var(--border);border-left:0}.transaction-insight-bar{grid-template-columns:1fr}.transaction-insight-bar>div{border-right:0;border-bottom:1px solid var(--border)}.transaction-insight-bar>a{grid-column:auto}} .skip-link{position:fixed;left:16px;top:12px;z-index:100000;transform:translateY(-160%);padding:10px 14px;border-radius:10px;background:#fff;color:#111827;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.22)} .skip-link:focus{transform:translateY(0);outline:3px solid #d4af37;outline-offset:2px} :focus-visible{outline:3px solid color-mix(in srgb,var(--primary,#1660ff) 72%,#fff);outline-offset:3px} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* ===== Premium role-aware global search ===== */ .global-search{position:relative;min-width:0} .global-search-control{position:relative;display:flex;align-items:center;min-height:38px;border-radius:12px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease} .global-search-control .global-search-icon{position:absolute;left:13px;z-index:1;color:rgba(255,255,255,.68);pointer-events:none;transition:color .18s ease,transform .18s ease} .global-search-control input{width:100%;height:38px;padding:0 65px 0 40px!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:12px!important;background:rgba(255,255,255,.1)!important;color:#fff!important;font-family:Inter,Manrope,system-ui,sans-serif!important;font-size:13px!important;font-weight:550;letter-spacing:.005em;outline:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease!important;-webkit-appearance:none;appearance:none} .global-search-control input::-webkit-search-cancel-button{display:none} .global-search-control input::placeholder{color:rgba(255,255,255,.56)!important;opacity:1} .global-search-control:focus-within{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.13)} .global-search-control:focus-within input{border-color:rgba(255,255,255,.55)!important;background:rgba(255,255,255,.17)!important;box-shadow:0 0 0 3px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.08)!important} .global-search-control:focus-within .global-search-icon{color:#fff;transform:scale(1.06)} .global-search .search-shortcut{right:9px;min-width:43px;padding:3px 6px;border-color:rgba(255,255,255,.2);border-radius:6px;background:rgba(0,0,0,.12);color:rgba(255,255,255,.72);font-size:9px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .member-topnav-search{flex:1;max-width:300px;margin:0 18px} .member-topnav-search-wrap .global-search-icon{color:#64748b} .member-topnav-search-wrap input{border-color:#dbe3ea!important;background:#f7f9fb!important;color:#0f172a!important;box-shadow:inset 0 1px 2px rgba(15,23,42,.025)!important} .member-topnav-search-wrap input::placeholder{color:#7b8797!important} .member-topnav-search-wrap:focus-within{box-shadow:0 8px 22px rgba(15,23,42,.09)} .member-topnav-search-wrap:focus-within input{border-color:#0f766e!important;background:#fff!important;box-shadow:0 0 0 3px rgba(15,118,110,.11)!important} .member-topnav-search-wrap:focus-within .global-search-icon{color:#0f766e} .member-topnav-search .search-shortcut{border-color:#dbe3ea;background:#fff;color:#64748b;box-shadow:0 1px 2px rgba(15,23,42,.04)} .global-search-results{display:none;position:absolute;top:calc(100% + 12px);left:50%;right:auto;width:min(560px,calc(100vw - 32px));min-width:0;max-height:min(620px,calc(100vh - 90px));padding:0;overflow-y:auto;overscroll-behavior:contain;border:1px solid rgba(148,163,184,.26);border-radius:18px;background:rgba(255,255,255,.985);color:#0f172a;box-shadow:0 24px 65px rgba(15,23,42,.22),0 8px 24px rgba(15,23,42,.11);z-index:10000;transform:translateX(-50%);transform-origin:top center;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent} .global-search-results.open{display:block;animation:globalSearchIn .18s cubic-bezier(.2,.7,.2,1)} @keyframes globalSearchIn{from{opacity:0;transform:translateX(-50%) translateY(-6px) scale(.985)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}} .global-search-panel-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:16px 17px 12px;border-bottom:1px solid #edf1f4;background:rgba(255,255,255,.96);backdrop-filter:blur(12px)} .global-search-panel-head>div{display:flex;align-items:baseline;gap:8px}.global-search-panel-head strong{font-size:14px;color:#0f172a}.global-search-panel-head>div span{font-size:11px;color:#7c8999} .global-search-secure{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid #cce9df;border-radius:999px;background:#edf9f4;color:#08705a;font-size:9px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.global-search-secure:before{content:"";width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.12)} .global-search-group{padding:8px 10px 2px}.global-search-group+.global-search-group{border-top:1px solid #f0f3f5} .global-search-category{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 5px;color:#718096;font-size:10px;font-weight:850;letter-spacing:.075em;text-transform:uppercase}.global-search-category span:last-child{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:9px;letter-spacing:0} .global-search-item{display:flex;align-items:center;gap:11px;min-height:56px;padding:8px 9px;border:1px solid transparent;border-radius:12px;color:#0f172a;text-decoration:none;transition:background .12s ease,border-color .12s ease,transform .12s ease;cursor:pointer} .global-search-item:hover,.global-search-item.is-active{border-color:#d7ebe5;background:linear-gradient(90deg,#eef9f5,#f8fbfa);transform:translateX(2px)} .global-search-item.is-active{box-shadow:inset 3px 0 0 #0f766e}.global-search-item-mark{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border:1px solid #dce9e5;border-radius:10px;background:linear-gradient(145deg,#f0faf6,#e2f4ed);color:#0b6b56;font-size:11px;font-weight:900;box-shadow:0 2px 5px rgba(15,118,110,.07)} .global-search-item-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}.global-search-item-label{overflow:hidden;color:#172033;font-size:13px;font-weight:720;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.global-search-item-sub{overflow:hidden;margin:0;color:#778395;font-size:11px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap} .global-search-item-arrow{flex:0 0 auto;color:#b2bdc9;transition:color .12s ease,transform .12s ease}.global-search-item:hover .global-search-item-arrow,.global-search-item.is-active .global-search-item-arrow{color:#0f766e;transform:translateX(2px)} .global-search-loading{display:flex;align-items:center;gap:12px;padding:25px 20px;color:#64748b}.global-search-loading>div:last-child{display:flex;flex-direction:column;gap:2px}.global-search-loading strong{color:#172033;font-size:13px}.global-search-loading span{font-size:11px}.global-search-spinner{width:20px;height:20px;border:2px solid #dbe8e4;border-top-color:#0f766e} .global-search-intro,.global-search-empty{display:flex;align-items:center;gap:13px;padding:24px 20px}.global-search-intro>div,.global-search-empty{color:#64748b}.global-search-intro>div{display:flex;flex-direction:column;gap:3px}.global-search-intro strong,.global-search-empty strong{color:#172033;font-size:13px}.global-search-intro span,.global-search-empty>span:last-child{font-size:11px} .global-search-intro-icon,.global-search-empty-icon{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:#edf9f4;color:#0f766e;font-size:21px;font-weight:800}.global-search-empty{flex-direction:column;justify-content:center;text-align:center;gap:5px;padding:34px 20px}.global-search-empty-icon{margin-bottom:4px}.global-search-empty-icon.error{background:#fff1f2;color:#dc2626} .global-search-footer{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:15px;padding:9px 14px;border-top:1px solid #edf1f4;background:rgba(248,250,252,.97);color:#8491a1;font-size:9px;backdrop-filter:blur(12px)}.global-search-footer span{display:flex;align-items:center;gap:4px}.global-search-footer kbd{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border:1px solid #d8e0e8;border-bottom-width:2px;border-radius:5px;background:#fff;color:#5d6876;font:700 9px/1 Inter,system-ui;box-shadow:0 1px 1px rgba(15,23,42,.03)} html[data-theme="dark"] .global-search-results{border-color:#2b3a51;background:rgba(15,26,46,.99);color:#e5edf6;box-shadow:0 28px 70px rgba(0,0,0,.5)} html[data-theme="dark"] .global-search-panel-head,html[data-theme="dark"] .global-search-footer{border-color:#26364c;background:rgba(15,26,46,.97)} html[data-theme="dark"] .global-search-panel-head strong,html[data-theme="dark"] .global-search-item-label,html[data-theme="dark"] .global-search-intro strong,html[data-theme="dark"] .global-search-empty strong,html[data-theme="dark"] .global-search-loading strong{color:#f3f7fb} html[data-theme="dark"] .global-search-group+.global-search-group{border-color:#24334a}html[data-theme="dark"] .global-search-category span:last-child{background:#213148;color:#a9b7c8}html[data-theme="dark"] .global-search-item{color:#e5edf6}html[data-theme="dark"] .global-search-item:hover,html[data-theme="dark"] .global-search-item.is-active{border-color:#285647;background:#172f2b}html[data-theme="dark"] .global-search-item-mark{border-color:#285647;background:#183a32;color:#6ee7b7}html[data-theme="dark"] .global-search-footer kbd{border-color:#36465b;background:#1b2a40;color:#cbd5e1} @media(max-width:1200px){.admin-topnav-search{display:block;max-width:280px}.admin-topnav-location{display:none}.member-topnav-links{display:none}} @media(max-width:980px){.sa-topnav-search{display:block;max-width:280px}.sa-topnav-user-info{display:none}} @media(max-width:820px){.admin-topnav-search,.sa-topnav-search,.member-topnav-search{display:block;flex:1;max-width:none;margin:0}.admin-topnav-search{min-width:120px}.global-search-control input{padding-right:42px!important}.global-search .search-shortcut{display:none}.member-topnav-inner,.sa-topnav-inner{gap:10px}.member-topnav-right{gap:6px}.member-topnav-profile{display:none}} @media(max-width:620px){.global-search-results{position:fixed;top:66px;left:12px;right:12px;width:auto;max-height:calc(100vh - 82px);transform:none;border-radius:16px}.global-search-results.open{animation:globalSearchMobileIn .18s cubic-bezier(.2,.7,.2,1)}@keyframes globalSearchMobileIn{from{opacity:0;transform:translateY(-6px) scale(.99)}to{opacity:1;transform:none}}.member-topnav-brand-text,.sa-topnav-brand-text,.admin-topnav-brand>span{display:none}.member-topnav-left,.sa-topnav-left,.admin-topnav-left{flex:0 0 auto}.member-topnav-signout{padding:7px 10px}.global-search-footer{justify-content:space-between;gap:8px}.global-search-footer span:nth-child(2){display:none}} /* ===== Premium administrator workspace header ===== */ .admin-topnav{height:auto;min-height:108px;padding:0;background:linear-gradient(115deg,#073f34 0%,#075343 52%,#06483c 100%);border-top:3px solid #b99724;border-bottom:1px solid rgba(3,31,26,.65);box-shadow:0 8px 24px rgba(2,44,36,.13);align-items:stretch} .admin-topnav:before{content:"";position:absolute;inset:3px 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);pointer-events:none} .admin-topnav-inner{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(360px,1.25fr) minmax(360px,.9fr);grid-template-rows:63px 42px;grid-template-areas:"brand search actions" "nav nav nav";align-items:center;width:100%;gap:0 28px;padding:0 24px} .admin-topnav-left{grid-area:brand;min-width:0} .admin-topnav-brand{gap:12px;min-width:0} .admin-topnav-brand-logo,.admin-topnav-brand-dot{width:38px;height:38px;border-radius:11px;box-shadow:0 5px 14px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.3)} .admin-topnav-brand-dot{background:linear-gradient(145deg,#e3c34b,#b98d0a);font-size:14px;letter-spacing:-.02em} .admin-topnav-brand-copy{display:flex;min-width:0;flex-direction:column;gap:2px;line-height:1.1} .admin-topnav-brand-copy strong{overflow:hidden;color:#fff;font-size:15px;font-weight:800;letter-spacing:-.015em;text-overflow:ellipsis;white-space:nowrap} .admin-topnav-brand-copy small{color:rgba(216,238,230,.6);font-size:8px;font-weight:800;letter-spacing:.105em;text-transform:uppercase} .admin-topnav-search{grid-area:search;justify-self:center;width:100%;max-width:560px;margin:0} .admin-topnav .global-search-control{min-height:42px} .admin-topnav .global-search-control input{height:42px!important;border-color:rgba(255,255,255,.19)!important;border-radius:13px!important;background:rgba(255,255,255,.095)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 4px 12px rgba(0,0,0,.08)!important} .admin-topnav .global-search-control input::placeholder{color:rgba(226,239,235,.62)!important} .admin-topnav .global-search-control:focus-within input{border-color:rgba(227,195,75,.68)!important;background:rgba(255,255,255,.145)!important;box-shadow:0 0 0 3px rgba(227,195,75,.11),0 8px 20px rgba(0,0,0,.12)!important} .admin-topnav .global-search-control:focus-within .global-search-icon{color:#f0d66b} .admin-topnav .search-shortcut{border-color:rgba(227,195,75,.24);background:rgba(2,40,33,.28);color:rgba(255,244,196,.75)} .admin-topnav-right{grid-area:actions;justify-self:end;gap:10px;min-width:0} .admin-topnav .notif-bell{width:40px;height:40px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(255,255,255,.075);color:rgba(235,247,243,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.055)} .admin-topnav .notif-bell:hover{border-color:rgba(227,195,75,.32);background:rgba(255,255,255,.13);color:#fff} .admin-topnav-location{display:flex;align-items:center;gap:9px;max-width:230px;min-height:40px;padding:6px 11px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.055);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)} .admin-topnav-location>svg{flex:0 0 auto;color:#d8bd55;opacity:1} .admin-topnav-location>span{display:flex;min-width:0;flex-direction:column;gap:1px;line-height:1.1} .admin-topnav-location small{color:rgba(218,237,231,.55);font-size:8px;font-weight:750;letter-spacing:.065em;text-transform:uppercase} .admin-topnav-location strong{overflow:hidden;color:rgba(255,255,255,.9);font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap} .admin-topnav-user-btn{min-height:44px;padding:4px 6px 4px 5px;border:1px solid transparent;border-radius:13px} .admin-topnav-user-btn:hover,.admin-topnav-user.open .admin-topnav-user-btn{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.075)} .admin-topnav-avatar{position:relative;width:38px;height:38px;border:1px solid rgba(255,255,255,.28);background:linear-gradient(145deg,rgba(255,255,255,.19),rgba(255,255,255,.1));font-size:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)} .admin-topnav-avatar i{position:absolute;right:-1px;bottom:1px;width:8px;height:8px;border:2px solid #075043;border-radius:50%;background:#56d88b;box-shadow:0 0 0 2px rgba(86,216,139,.08)} .admin-topnav-user-info{text-align:left} .admin-topnav-username{max-width:110px;overflow:hidden;color:#fff;font-size:12px;font-weight:750;text-overflow:ellipsis;white-space:nowrap} .admin-topnav-role{margin-top:2px;color:rgba(219,237,231,.6);font-size:9px;font-weight:650;letter-spacing:.02em} .admin-topnav-dropdown-arrow{margin-left:0;color:rgba(255,255,255,.48)} .admin-topnav-pop{top:calc(100% + 9px);min-width:210px;border-radius:14px;box-shadow:0 18px 42px rgba(15,23,42,.2)} .admin-topnav-links{grid-area:nav;align-self:stretch;display:flex;align-items:center;justify-content:flex-start;gap:4px;padding:0;border-top:1px solid rgba(255,255,255,.085)} .admin-topnav-link,.admin-topnav-dropdown-toggle{position:relative;display:flex;align-items:center;gap:7px;height:100%;padding:0 13px;border-radius:0;background:none;color:rgba(221,237,232,.7);font-size:11px;font-weight:680;letter-spacing:.01em} .admin-topnav-link:hover,.admin-topnav-dropdown-toggle:hover{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));color:#fff} .admin-topnav-link.active,.admin-topnav-dropdown-toggle.active{background:linear-gradient(180deg,rgba(227,195,75,.1),rgba(227,195,75,.035));color:#fff;font-weight:760} .admin-topnav-link.active:after,.admin-topnav-dropdown-toggle.active:after{content:"";position:absolute;right:12px;bottom:0;left:12px;height:2px;border-radius:2px 2px 0 0;background:linear-gradient(90deg,#e5c851,#fff0a5);box-shadow:0 -2px 8px rgba(229,200,81,.24)} .admin-topnav-link-icon{display:grid;place-items:center;flex:0 0 auto;width:18px;height:18px;color:rgba(218,236,230,.55)} .admin-topnav-link-icon svg{width:15px;height:15px}.admin-topnav-link:hover .admin-topnav-link-icon,.admin-topnav-link.active .admin-topnav-link-icon{color:#e7cc61} .admin-topnav-chevron{margin-left:2px;opacity:.62} .admin-topnav-dropdown-toggle>svg.admin-topnav-chevron{transition:transform .2s ease} .admin-topnav-dropdown.open .admin-topnav-chevron{transform:rotate(180deg)} .admin-topnav-dropdown{height:100%} .admin-topnav-dropdown-menu{top:calc(100% + 9px);min-width:250px;max-height:min(68vh,560px);padding:7px;overflow-y:auto;border:1px solid rgba(148,163,184,.23);border-radius:14px;box-shadow:0 20px 50px rgba(15,23,42,.2),0 6px 18px rgba(15,23,42,.09)} .admin-topnav-dropdown-menu:before{content:"";position:absolute;top:-5px;left:24px;width:9px;height:9px;border-top:1px solid var(--border);border-left:1px solid var(--border);background:var(--panel);transform:rotate(45deg)} .admin-topnav-dropdown-item{padding:10px 11px;border-radius:9px;font-size:12px} .admin-topnav-hamburger{grid-area:hamburger} @media(max-width:1280px){.admin-topnav-inner{grid-template-columns:minmax(210px,.7fr) minmax(300px,1.15fr) auto;gap:0 18px}.admin-topnav-location{display:none}.admin-topnav-search{max-width:480px}} @media(max-width:1100px){.admin-topnav{min-height:64px;border-top-width:2px}.admin-topnav-inner{position:relative;display:grid;grid-template-columns:auto 40px minmax(140px,1fr) auto;grid-template-rows:62px;grid-template-areas:"brand hamburger search actions";gap:0 10px;padding:0 14px}.admin-topnav-hamburger{display:flex}.admin-topnav-links{display:none;position:absolute;top:62px;right:0;left:0;z-index:1001;grid-area:auto;height:auto;max-height:calc(100vh - 76px);padding:9px 14px 14px;overflow-y:auto;border-top:1px solid rgba(255,255,255,.1);background:#07473a;box-shadow:0 20px 35px rgba(2,35,29,.2);flex-direction:column;align-items:stretch}.admin-topnav-links.open{display:flex}.admin-topnav-link,.admin-topnav-dropdown-toggle{width:100%;height:42px;padding:0 12px;border-radius:9px}.admin-topnav-link.active:after,.admin-topnav-dropdown-toggle.active:after{top:9px;right:auto;bottom:9px;left:0;width:2px;height:auto}.admin-topnav-dropdown{height:auto}.admin-topnav-dropdown-menu{position:static;max-height:none;margin:2px 0 5px 24px;border:0;border-radius:10px;background:rgba(255,255,255,.055);box-shadow:none}.admin-topnav-dropdown-menu:before{display:none}.admin-topnav-dropdown-item{color:rgba(255,255,255,.75)}.admin-topnav-dropdown-item:hover,.admin-topnav-dropdown-item.active{background:rgba(255,255,255,.08);color:#fff}.admin-topnav-search{display:block;max-width:none}.admin-topnav-right{gap:6px}.admin-topnav-user-info{display:none}} @media(max-width:620px){.admin-topnav-inner{grid-template-columns:auto 38px minmax(90px,1fr) auto;gap:0 7px;padding:0 10px}.admin-topnav-brand-copy{display:none}.admin-topnav-brand-logo,.admin-topnav-brand-dot{width:36px;height:36px}.admin-topnav .notif-bell{width:36px;height:36px}.admin-topnav-user-btn{min-height:38px;padding:0}.admin-topnav-avatar{width:36px;height:36px}.admin-topnav-dropdown-arrow{display:none}.admin-topnav .global-search-results{top:66px}} @media(max-width:440px){.admin-topnav .notif-bell{display:none}.admin-topnav-inner{grid-template-columns:auto 38px minmax(90px,1fr) auto}} /* Umozi Wealth public experience */ :root{--uw-green:#063f34;--uw-green-2:#0b5949;--uw-gold:#d6ad37;--uw-ink:#11281f;--uw-cream:#f4f0e7;--uw-line:#dce3dd} body.landing{background:#fff;color:var(--uw-ink)} .lp-nav,.lp-nav.scrolled{height:82px;padding:0;border:0;background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(10,55,44,.1);backdrop-filter:blur(16px)} .lp-nav-inner{max-width:1240px;height:100%}.lp-brand img{width:158px;height:58px;object-fit:contain}.lp-links a{color:#315047;font-size:13px;font-weight:750}.lp-links a:hover{color:var(--uw-green)} .lp-btn-primary,.uw-button-gold{border-color:var(--uw-gold)!important;background:var(--uw-gold)!important;color:#14251f!important}.lp-btn-outline{border-color:#b6c7bf;color:var(--uw-green)} .uw-site{overflow:hidden}.uw-container{width:min(1180px,calc(100% - 48px));margin:0 auto}.uw-hero{position:relative;display:flex;min-height:690px;align-items:center;background:var(--uw-green);color:#fff}.uw-hero-media,.uw-hero-overlay{position:absolute;inset:0}.uw-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 36%}.uw-hero-overlay{background:linear-gradient(90deg,rgba(3,42,34,.97) 0%,rgba(3,42,34,.86) 45%,rgba(3,42,34,.24) 78%,rgba(3,42,34,.12))}.uw-hero-content{position:relative;z-index:1;padding:90px 0 70px}.uw-eyebrow,.uw-kicker{display:flex;align-items:center;gap:12px;color:#afc7bd;font-size:11px;font-weight:850;letter-spacing:.19em;text-transform:uppercase}.uw-eyebrow span{width:34px;height:2px;background:var(--uw-gold)}.uw-hero h1{max-width:850px;margin:27px 0 20px;font-family:Georgia,serif;font-size:clamp(48px,6vw,84px);font-weight:400;line-height:1.02;letter-spacing:-.045em}.uw-hero h1 em{color:#f0cb5e;font-style:normal}.uw-hero>div p,.uw-hero-content>p{max-width:650px;color:#d9e6e0;font-size:17px;line-height:1.75}.uw-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:33px}.uw-button{display:inline-flex;min-height:50px;align-items:center;justify-content:center;gap:16px;padding:0 24px;border:1px solid transparent;border-radius:6px;font-size:13px;font-weight:850;letter-spacing:.015em}.uw-button-quiet{border-color:rgba(255,255,255,.35);color:#fff}.uw-button-outline{min-height:42px;border-color:#b8c9c1;color:var(--uw-green)}.uw-hero-trust{display:flex;flex-wrap:wrap;gap:25px;margin-top:48px;color:#cbdad4;font-size:12px}.uw-hero-trust span:first-letter{color:var(--uw-gold)} .uw-statement{padding:92px 0;background:var(--uw-cream)}.uw-statement-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:100px;align-items:end}.uw-kicker{color:#4d7567}.uw-statement h2,.uw-section h2,.uw-governance h2{margin:14px 0 0;font-family:Georgia,serif;font-size:clamp(34px,4.3vw,58px);font-weight:400;line-height:1.1;letter-spacing:-.035em}.uw-statement p,.uw-section-heading>p,.uw-governance p{margin:0;color:#587169;font-size:15px;line-height:1.8}.uw-statement a{display:inline-block;margin-top:22px;color:var(--uw-green);font-size:13px;font-weight:850} .uw-section{padding:105px 0}.uw-section-heading{display:grid;grid-template-columns:1fr 360px;gap:80px;align-items:end;margin-bottom:48px}.uw-service-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--uw-line)}.uw-service-card{position:relative;min-height:370px;padding:36px;border-right:1px solid var(--uw-line);background:#fff}.uw-service-card:last-child{border:0}.uw-service-featured{background:var(--uw-green);color:#fff}.uw-card-number{color:#8aa398;font-size:11px;font-weight:850;letter-spacing:.16em}.uw-card-icon{display:grid;width:52px;height:52px;margin:43px 0 29px;border:1px solid #cad7d1;border-radius:50%;place-items:center;color:var(--uw-green);font-size:22px}.uw-service-featured .uw-card-icon{border-color:rgba(255,255,255,.28);color:var(--uw-gold)}.uw-service-card h3{font-family:Georgia,serif;font-size:25px;font-weight:400}.uw-service-card p{min-height:70px;color:#657970;font-size:13px;line-height:1.7}.uw-service-featured p{color:#c7d9d1}.uw-service-card a{color:var(--uw-green);font-size:12px;font-weight:850}.uw-service-featured a{color:var(--uw-gold)} .uw-section-dark{background:var(--uw-green);color:#fff}.uw-kicker-light{color:#c6d8d1}.uw-loans-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:110px}.uw-loans-copy{position:sticky;top:120px;align-self:start}.uw-loans-copy p{margin:24px 0;color:#bdcec7;line-height:1.8}.uw-loan-item{display:flex;align-items:center;justify-content:space-between;padding:25px 5px;border-bottom:1px solid rgba(255,255,255,.16)}.uw-loan-item:first-child{border-top:1px solid rgba(255,255,255,.16)}.uw-loan-item h3{margin:0 0 6px;font-family:Georgia,serif;font-size:21px;font-weight:400}.uw-loan-item p{margin:0;color:#a9bdb5;font-size:12px}.uw-loan-item>span{color:var(--uw-gold);font-size:22px} .uw-journey{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px}.uw-journey-step{position:relative;padding:0 28px;border-left:1px solid var(--uw-line)}.uw-journey-step:first-child{padding-left:0;border:0}.uw-journey-step span{display:grid;width:38px;height:38px;border-radius:50%;background:#eaf0ec;place-items:center;color:var(--uw-green);font-weight:850}.uw-journey-step h3{margin:22px 0 8px;font-size:16px}.uw-journey-step p{color:#687b73;font-size:12px;line-height:1.7}.uw-fees{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;padding:30px;background:var(--uw-cream)}.uw-fees>div{display:flex;flex-direction:column;padding:5px 28px;border-right:1px solid #d8d2c5}.uw-fees>div:last-child{border:0}.uw-fees span{color:#68776f;font-size:11px;text-transform:uppercase}.uw-fees strong{margin:7px 0;font-family:Georgia,serif;color:var(--uw-green);font-size:28px;font-weight:400}.uw-fees small{color:#7c8983} .uw-impact{display:grid;grid-template-columns:1fr 1fr;min-height:600px;background:#0a4d40;color:#fff}.uw-impact>img{width:100%;height:100%;object-fit:cover}.uw-impact-panel{display:flex;flex-direction:column;justify-content:center;padding:70px clamp(45px,7vw,110px)}.uw-impact h2{margin:14px 0 23px;font-family:Georgia,serif;font-size:44px;font-weight:400;line-height:1.12}.uw-impact p{color:#c4d4cd;line-height:1.8}.uw-sdgs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:30px}.uw-sdgs span{padding:13px;border-left:2px solid var(--uw-gold);color:#e8d98e;font-size:10px}.uw-sdgs b{color:#fff;font-size:12px} .uw-governance{background:#f8faf8}.uw-governance-grid{display:grid;grid-template-columns:1fr 1fr;gap:120px}.uw-governance p{margin-top:25px}.uw-principles>div{display:flex;gap:24px;padding:24px 0;border-bottom:1px solid var(--uw-line)}.uw-principles b{color:#ac8420;font-family:Georgia,serif}.uw-principles span{display:flex;flex-direction:column;gap:6px;color:#62756d;font-size:12px}.uw-principles strong{color:var(--uw-ink);font-size:15px} .uw-cta{padding:90px 0;background:var(--uw-cream);text-align:center}.uw-cta img{width:165px}.uw-cta h2{margin:24px 0 10px;font-family:Georgia,serif;font-size:46px;font-weight:400}.uw-cta p{color:#677970}.uw-cta .uw-actions{justify-content:center}.uw-cta .uw-button-quiet{border-color:#9db0a7;color:var(--uw-green)}.uw-footer{padding:65px 0 24px;background:#032e27;color:#fff}.uw-footer-main{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:60px}.uw-footer img{width:160px;filter:brightness(0) invert(1)}.uw-footer p,.uw-footer a,.uw-footer span{color:#a9c0b7;font-size:12px}.uw-footer-main>div{display:flex;flex-direction:column;gap:11px}.uw-footer-main b{margin-bottom:7px;font-size:12px}.uw-footer-bottom{display:flex;justify-content:space-between;margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)} /* Membership application */ .uw-application-page{min-height:100vh;background:#f1f3ef;color:var(--uw-ink)}.uw-application-header{display:flex;height:82px;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,80px);border-bottom:1px solid #d9e0db;background:#fff}.uw-application-header img{width:150px;height:58px;object-fit:contain}.uw-application-header>div{display:flex;align-items:center;gap:20px}.uw-application-header>div>a:first-child{color:#557067;font-size:12px;font-weight:750}.uw-application-main{display:grid;grid-template-columns:minmax(330px,.7fr) minmax(620px,1.3fr);min-height:calc(100vh - 82px)}.uw-application-aside{padding:80px clamp(40px,6vw,90px);background:linear-gradient(rgba(5,61,50,.94),rgba(5,61,50,.97)),url('../images/umozi/growth.png') center/cover;color:#fff}.uw-application-aside h1{margin:18px 0;font-family:Georgia,serif;font-size:48px;font-weight:400;line-height:1.08}.uw-application-aside>p{color:#c5d7cf;line-height:1.8}.uw-app-progress{margin:50px 0}.uw-app-progress>div{display:flex;align-items:center;gap:14px;padding:14px 0;color:#c6d6cf}.uw-app-progress span{display:grid;width:30px;height:30px;border:1px solid rgba(255,255,255,.3);border-radius:50%;place-items:center;font-size:11px}.uw-app-progress .active span{border-color:var(--uw-gold);color:var(--uw-gold)}.uw-app-progress b{font-size:12px}.uw-app-help{display:flex;flex-direction:column;gap:7px;padding-top:25px;border-top:1px solid rgba(255,255,255,.15);color:#bdcfc7;font-size:12px}.uw-app-help b{color:#fff}.uw-application-card{padding:60px clamp(30px,5vw,75px) 90px;background:#fff}.uw-application-title>span{color:#907220;font-size:11px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}.uw-application-title h2{margin:9px 0 6px;font-family:Georgia,serif;font-size:38px;font-weight:400}.uw-application-title p{color:#6a7c74;font-size:12px}.uw-application-form fieldset{margin:40px 0 0;padding:0;border:0}.uw-application-form legend{width:100%;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid #dce3de;font-size:13px;font-weight:850}.uw-application-form legend span{margin-right:12px;color:#a17e20}.uw-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.uw-form-grid label,.uw-application-form label{display:flex;flex-direction:column;gap:8px;color:#263c34;font-size:11px;font-weight:800}.uw-form-grid input,.uw-form-grid select,.uw-form-grid textarea,.uw-review-form textarea{width:100%;min-height:45px;border:1px solid #cfdad4;border-radius:5px;background:#fff;color:#172c25}.uw-full{grid-column:1/-1}.uw-form-grid small{color:#788980;font-size:10px;font-weight:500}.uw-upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.uw-upload-grid label{padding:18px;border:1px dashed #adbbb4;border-radius:7px;background:#f9faf8}.uw-upload-grid span{min-height:30px;color:#778880;font-size:10px;font-weight:500;line-height:1.4}.uw-upload-grid input{font-size:10px}.uw-declaration{display:flex!important;flex-direction:row!important;align-items:flex-start;margin-top:22px;padding:17px;border-radius:6px;background:#f2f5f2;line-height:1.6}.uw-declaration input{margin-top:3px}.uw-form-submit{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:35px;padding-top:25px;border-top:1px solid #dce3de}.uw-form-submit>div{display:flex;flex-direction:column;color:#73847c;font-size:11px}.uw-form-submit b{color:#234036}.uw-app-success{display:flex;flex-direction:column;gap:12px;margin-top:30px;padding:28px;border-left:4px solid var(--uw-gold);background:#edf6f1}.uw-app-success strong{font-family:Georgia,serif;font-size:25px}.uw-app-success span{color:#49675d;line-height:1.6}.uw-app-success a{color:var(--uw-green);font-weight:850} /* Premium application review queue */ .ma-shell{max-width:1320px;margin:0 auto}.ma-header{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding:10px 0 25px}.ma-eyebrow{color:#a17e20;font-size:10px;font-weight:850;letter-spacing:.17em;text-transform:uppercase}.ma-header h1{margin:7px 0;font-size:30px}.ma-header p{max-width:700px;margin:0;color:var(--muted);font-size:13px}.ma-header-metric{display:flex;min-width:190px;flex-direction:column;padding:18px 22px;border-radius:12px;background:#073f34;color:#fff}.ma-header-metric span,.ma-header-metric small{color:#adc9bf;font-size:10px}.ma-header-metric strong{font-size:30px}.ma-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.ma-stat{position:relative;display:flex;min-height:88px;flex-direction:column;justify-content:center;padding:17px 20px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:var(--shadow-sm)}.ma-stat.active{border-color:#9fb8ae;box-shadow:0 0 0 2px rgba(7,79,65,.08)}.ma-stat span{color:var(--muted);font-size:10px;font-weight:750;text-transform:uppercase}.ma-stat strong{font-size:24px}.ma-dot{position:absolute;top:18px;right:18px;width:8px;height:8px;border-radius:50%}.ma-dot-pending{background:#dfa91d}.ma-dot-under_review{background:#4285da}.ma-dot-approved{background:#23a56c}.ma-dot-rejected{background:#d65252}.ma-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.ma-search{display:flex;flex:1;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--border);border-radius:8px}.ma-search input{width:100%;border:0;background:transparent}.ma-toolbar>a{padding:0 8px;color:var(--brand);font-size:11px;font-weight:750}.ma-list{display:flex;flex-direction:column;gap:12px}.ma-card{border:1px solid var(--border);border-radius:13px;background:var(--panel);box-shadow:var(--shadow-sm);overflow:hidden}.ma-card-head{display:flex;align-items:center;gap:13px;padding:18px 20px}.ma-avatar{display:grid;width:43px;height:43px;flex:0 0 43px;border-radius:11px;background:#e6efeb;place-items:center;color:#075043;font-size:12px;font-weight:850}.ma-person{flex:1}.ma-person>div{display:flex;align-items:center;gap:10px}.ma-person h2{margin:0;font-size:15px}.ma-person p{margin:3px 0 0;color:var(--muted);font-size:10px}.ma-status{padding:4px 8px;border-radius:999px;font-size:9px;font-weight:850;text-transform:uppercase}.ma-status-pending{background:#fff4d6;color:#856000}.ma-status-under_review{background:#e7f0ff;color:#2861a7}.ma-status-approved{background:#e1f6eb;color:#13744a}.ma-status-rejected{background:#fde8e8;color:#9e3434}.ma-expand{border:0;background:transparent;color:var(--brand);font-size:11px;font-weight:800}.ma-quick{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);background:var(--panel-2)}.ma-quick>div{display:flex;flex-direction:column;padding:12px 20px;border-right:1px solid var(--border)}.ma-quick>div:last-child{border:0}.ma-quick span{color:var(--muted);font-size:9px;text-transform:uppercase}.ma-quick b{margin-top:3px;font-size:11px}.ma-details{padding:23px;border-top:1px solid var(--border)}.ma-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.ma-details h3{margin:0 0 15px;font-size:12px;text-transform:uppercase}.ma-details dl{display:grid;grid-template-columns:130px 1fr;gap:8px;margin:0;font-size:11px}.ma-details dt{color:var(--muted)}.ma-details dd{margin:0;font-weight:650}.ma-docs{margin-top:24px}.ma-docs>div{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.ma-docs a{display:grid;grid-template-columns:30px 1fr;gap:1px 8px;padding:12px;border:1px solid var(--border);border-radius:8px}.ma-docs a>span{grid-row:1/3;display:grid;width:30px;height:30px;border-radius:7px;background:#e8f1ed;place-items:center;color:var(--brand)}.ma-docs b{font-size:10px}.ma-docs small{color:var(--muted);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ma-review-form{margin-top:23px;padding:18px;border-radius:10px;background:var(--panel-2)}.ma-review-form label{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:750}.ma-review-form textarea{width:100%;border:1px solid var(--border);background:var(--panel)}.ma-review-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:12px}.ma-outcome{margin-top:20px;padding:15px;border-radius:8px;font-size:11px}.ma-outcome span,.ma-outcome p{display:block;margin:4px 0 0}.ma-outcome-approved{background:#e6f5ed;color:#176947}.ma-outcome-rejected{background:#fbeaea;color:#943939}.ma-empty{padding:80px 20px;border:1px dashed var(--border);border-radius:14px;text-align:center}.ma-empty>div{display:grid;width:50px;height:50px;margin:0 auto 15px;border-radius:50%;background:#e2f3eb;place-items:center;color:#16724c}.ma-empty h2{font-size:18px}.ma-empty p{color:var(--muted);font-size:12px} @media(max-width:900px){.lp-links{background:#fff}.uw-statement-grid,.uw-section-heading,.uw-loans-layout,.uw-governance-grid,.uw-impact,.uw-application-main{grid-template-columns:1fr}.uw-statement-grid,.uw-section-heading,.uw-loans-layout,.uw-governance-grid{gap:35px}.uw-service-grid,.uw-journey,.uw-fees{grid-template-columns:1fr 1fr}.uw-service-card:nth-child(2){border-right:0}.uw-loans-copy{position:static}.uw-impact>img{max-height:450px}.uw-application-aside{padding:55px 35px}.uw-app-progress{display:none}.ma-summary,.ma-quick{grid-template-columns:1fr 1fr}.ma-detail-grid{grid-template-columns:1fr}.ma-docs>div{grid-template-columns:1fr 1fr}} @media(max-width:620px){.uw-container{width:min(100% - 28px,1180px)}.lp-brand img{width:120px}.uw-hero{min-height:650px}.uw-hero h1{font-size:43px}.uw-hero-overlay{background:rgba(3,42,34,.84)}.uw-statement,.uw-section{padding:70px 0}.uw-service-grid,.uw-journey,.uw-fees,.uw-footer-main,.uw-form-grid,.uw-upload-grid,.ma-summary,.ma-quick,.ma-docs>div{grid-template-columns:1fr}.uw-service-card{border-right:0;border-bottom:1px solid var(--uw-line)}.uw-journey-step{margin-bottom:25px;padding:0 0 0 25px}.uw-fees>div{border-right:0;border-bottom:1px solid #d8d2c5}.uw-impact-panel{padding:50px 28px}.uw-footer-main{gap:32px}.uw-footer-bottom,.uw-form-submit,.ma-header{align-items:flex-start;flex-direction:column}.uw-application-header{padding:0 16px}.uw-application-header>div>a:first-child{display:none}.uw-application-card{padding:42px 20px 70px}.uw-application-aside h1{font-size:39px}.ma-card-head{align-items:flex-start;flex-wrap:wrap}.ma-expand{margin-left:56px}.ma-quick>div{border-right:0;border-bottom:1px solid var(--border)}.ma-details dl{grid-template-columns:100px 1fr}.ma-review-actions{flex-wrap:wrap;justify-content:flex-start}} /* 9/10 benchmark polish: shared portal usability and accessibility */ body.portal-premium{background:#f4f6f4}.portal-premium .app-main{scroll-padding-top:110px}.portal-premium .content>.container{max-width:1440px}.portal-premium .card,.portal-premium .panel{border-color:#dce4df;box-shadow:0 1px 2px rgba(15,51,40,.03),0 8px 26px rgba(15,51,40,.035)} .portal-premium button,.portal-premium [role="button"],.portal-premium .btn,.portal-premium input:not([type="checkbox"]):not([type="radio"]),.portal-premium select{min-height:44px}.portal-premium .bottom-nav-item{min-height:52px}.portal-premium a:focus-visible,.portal-premium button:focus-visible,.portal-premium input:focus-visible,.portal-premium select:focus-visible,.portal-premium textarea:focus-visible{outline:3px solid #d1ad3e;outline-offset:3px}.portal-premium [aria-invalid="true"]{border-color:#c93f3f!important;background:#fff8f8!important;box-shadow:0 0 0 3px rgba(201,63,63,.12)!important}.portal-premium .field-has-error{color:#a82f2f!important} .portal-premium button.is-loading{pointer-events:none;opacity:.72}.portal-premium button.is-loading:after{content:"";width:14px;height:14px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .75s linear infinite}.portal-premium .table-wrap{border:1px solid var(--border);border-radius:12px;background:var(--panel)}.portal-premium .table{font-size:12px;font-variant-numeric:tabular-nums}.portal-premium .table thead th{position:sticky;top:0;z-index:2;padding:12px 14px;background:color-mix(in srgb,var(--panel) 94%,var(--admin-brand) 6%);color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}.portal-premium .table tbody td{padding:12px 14px;border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent);vertical-align:middle}.portal-premium .table tbody tr:nth-child(even){background:color-mix(in srgb,var(--panel) 96%,var(--admin-brand) 4%)}.portal-premium .table tbody tr:hover{background:color-mix(in srgb,var(--panel) 91%,var(--admin-brand) 9%)}.portal-premium .empty,.portal-premium .empty-state,.portal-premium .admin-table-empty{min-height:130px;padding:30px;border:1px dashed var(--border);border-radius:12px;background:color-mix(in srgb,var(--panel) 95%,var(--admin-brand) 5%);color:var(--muted);text-align:center}.portal-premium .alert,.portal-premium [data-flash-notice]{border-radius:10px;box-shadow:0 8px 24px rgba(15,23,42,.07)} .portal-premium .member-topnav,.portal-premium .admin-topnav,.portal-premium .sa-topnav{box-shadow:0 8px 28px rgba(3,49,39,.09)}.portal-premium .member-topnav-link,.portal-premium .admin-topnav-link,.portal-premium .sa-topnav-link{min-height:44px}.portal-premium .member-topnav-logo{width:46px;height:46px;object-fit:contain}.portal-premium .global-search-control input{font-size:12px}.portal-premium .search-shortcut{min-width:46px;text-align:center;font-size:9px}.portal-premium .global-search-results{border:1px solid rgba(122,149,138,.3);box-shadow:0 22px 60px rgba(15,23,42,.2)} .m-dash{max-width:1360px;padding:32px 40px}.m-dash-header{padding:26px 28px;border:1px solid #dce5e0;border-radius:16px;background:radial-gradient(circle at 96% 0,rgba(212,175,55,.13),transparent 34%),linear-gradient(140deg,#fff,#f7faf8);box-shadow:0 12px 35px rgba(15,61,48,.06)}.m-dash-welcome{font-family:Georgia,serif;font-size:31px;font-weight:400;letter-spacing:-.02em}.m-dash-totals{padding:14px 12px}.m-dash-total-item{min-width:145px}.m-dash-cards{gap:18px}.m-dash-card{min-height:250px;padding:23px;border-radius:14px;box-shadow:0 8px 28px rgba(15,61,48,.045)}.m-dash-card-amount{font-size:25px;font-variant-numeric:tabular-nums}.m-dash-chart-section,.m-dash-transactions,.m-dash-quick-actions,.m-dash-support{border-color:#dce5e0;border-radius:14px;box-shadow:0 8px 28px rgba(15,61,48,.04)}.m-dash-bar:focus-visible .m-dash-bar-tooltip,.m-dash-bar:hover .m-dash-bar-tooltip{opacity:1}.m-dash-status.reversed{background:#fee2e2;color:#991b1b}.m-dash-empty{display:flex;min-height:220px;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center}.m-dash-empty>span{display:grid;width:42px;height:42px;border-radius:50%;background:#e6f1ec;place-items:center;color:#075043}.m-dash-empty h3{margin:12px 0 4px;color:#173d31;font-size:15px}.m-dash-empty p{max-width:430px;margin:0;color:#6b7d76;font-size:12px;line-height:1.6}.m-dash-empty a{margin-top:12px;color:#075043;font-size:11px;font-weight:800}.m-dash-table td,.m-dash-table th{font-variant-numeric:tabular-nums} .sa-dash-welcome-logo{width:74px!important;height:58px!important;background:#fff!important}.sa-dash-welcome-logo img{width:100%;height:100%} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} @media(max-width:900px){.portal-premium .table-wrap{max-width:100%;overflow:auto}.m-dash{padding:22px 18px}.m-dash-header{align-items:flex-start;padding:22px}.m-dash-totals{width:100%;overflow:auto}.m-dash-total-item{min-width:135px;padding:0 14px}} @media(max-width:620px){body.portal-premium{padding-bottom:72px}.portal-premium .content{padding-top:12px}.portal-premium .bottom-nav{padding-bottom:max(6px,env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(14px)}.portal-premium .table thead{display:table-header-group}.portal-premium .table{min-width:680px}.m-dash{padding:14px 12px}.m-dash-header{margin-bottom:15px}.m-dash-welcome{font-size:25px}.m-dash-totals{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:0;background:#dce5e0}.m-dash-total-item{min-width:0;padding:14px;background:#fff}.m-dash-total-divider{display:none}.m-dash-total-item:last-child{grid-column:1/-1}.m-dash-card{min-height:0}.m-dash-table{min-width:680px}.member-statement-launcher{border-radius:14px}} /* ===== Umozi professional clarity pass ===== */ html[data-theme="dark"] body{background:linear-gradient(180deg,#0d1c17 0,var(--bg) 420px)} body.portal-premium{background:linear-gradient(180deg,#f8faf8 0,#f2f5f2 380px,#f3f6f3 100%);color:var(--text)} .portal-premium .admin-content{width:100%;max-width:1480px;margin:0 auto;padding:32px clamp(20px,2.8vw,44px) 52px;background:transparent} .portal-premium .content{padding:30px 0 48px} .portal-premium .content>.container{width:100%;padding-inline:clamp(18px,3vw,42px)} .portal-premium .footer,.portal-premium .admin-footer{border-color:var(--border);background:color-mix(in srgb,var(--panel) 88%,transparent);color:var(--muted);font-size:12px} .portal-premium .card,.portal-premium .panel,.portal-premium .m-section,.portal-premium .m-balance-card{border:1px solid var(--border);border-radius:14px;background:var(--panel);box-shadow:0 1px 2px rgba(17,47,39,.025),0 9px 26px rgba(17,47,39,.04)} .portal-premium .card-header,.portal-premium .m-section-header{padding:18px 20px;border-bottom:1px solid var(--border);background:transparent} .portal-premium .card-body{padding:20px} .portal-premium .page-title,.portal-premium .admin-page-title,.portal-premium .m-page-title{color:var(--text);font-weight:800;letter-spacing:-.025em} .portal-premium .page-subtitle,.portal-premium .admin-page-subtitle,.portal-premium .m-page-subtitle{max-width:760px;color:var(--muted);line-height:1.6} .portal-premium .muted{color:var(--muted)} .portal-premium .grid{gap:18px} .portal-premium .btn,.portal-premium .admin-btn{min-height:42px;padding:9px 16px;border-radius:9px;font-size:13px;font-weight:750;box-shadow:none;transform:none;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease} .portal-premium .btn:hover,.portal-premium .admin-btn:hover{transform:none;box-shadow:0 5px 14px rgba(7,80,67,.12)} .portal-premium .btn:active,.portal-premium .admin-btn:active{transform:translateY(1px);box-shadow:none} .portal-premium .btn-outline,.portal-premium .admin-btn-secondary{border-color:#cbd8d1;background:var(--panel);color:var(--text)} .portal-premium .btn-outline:hover,.portal-premium .admin-btn-secondary:hover{border-color:#9fb6ab;background:color-mix(in srgb,var(--panel) 92%,var(--brand) 8%);color:var(--brand)} .portal-premium .btn-danger{background:#b9353a;border-color:#b9353a} .portal-premium .form label,.portal-premium .field>label{display:block;margin-bottom:7px;color:var(--text);font-size:12px;font-weight:750;letter-spacing:.005em} .portal-premium input:not([type="checkbox"]):not([type="radio"]),.portal-premium select,.portal-premium textarea{min-height:44px;border:1px solid #cfdad4;border-radius:9px;background:var(--panel);font-size:13px;box-shadow:inset 0 1px 1px rgba(17,47,39,.02)} .portal-premium input::placeholder,.portal-premium textarea::placeholder{color:#84958d} .portal-premium input:focus,.portal-premium select:focus,.portal-premium textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)} .portal-premium input[type="checkbox"],.portal-premium input[type="radio"]{accent-color:#075043} .portal-premium .table-wrap{overflow:auto;border-radius:11px;box-shadow:none} .portal-premium .table{width:100%;border-collapse:separate;border-spacing:0;color:var(--text)} .portal-premium .table thead th{padding:13px 15px;background:#f3f7f4;color:#53675e;font-size:10px;font-weight:800;letter-spacing:.06em} .portal-premium .table tbody td{padding:13px 15px;background:transparent;font-size:12px} .portal-premium .table tbody tr:nth-child(even){background:#fbfcfb} .portal-premium .table tbody tr:hover{background:#f0f6f2} .portal-premium .pill,.portal-premium .badge{border-radius:999px;font-weight:750;letter-spacing:.01em} /* A common, calm navigation language for all three portals. */ .portal-premium .member-topnav,.portal-premium .sa-topnav{height:70px;border-bottom:1px solid rgba(9,54,43,.12);box-shadow:0 8px 24px rgba(3,49,39,.07)} .portal-premium .member-topnav{background:rgba(255,255,255,.96);backdrop-filter:blur(18px)} .portal-premium .sa-topnav{background:#07473a} .portal-premium .member-topnav-inner,.portal-premium .sa-topnav-inner{width:100%;max-width:1480px;padding:0 clamp(18px,2.8vw,42px);gap:22px} .portal-premium .member-topnav-brand,.portal-premium .sa-topnav-brand{gap:12px} .portal-premium .member-topnav-logo{width:44px;height:44px} .portal-premium .member-topnav-brand-text{color:#173d31;font-size:15px;font-weight:800} .portal-premium .sa-topnav-brand-text{color:#fff;font-size:14px;letter-spacing:.025em} .portal-premium .member-topnav-links,.portal-premium .sa-topnav-links{gap:4px} .portal-premium .member-topnav-link,.portal-premium .sa-topnav-link,.portal-premium .sa-topnav-dropdown-toggle{display:inline-flex;min-height:40px;align-items:center;padding:0 13px;border-radius:8px;font-size:12px;font-weight:650} .portal-premium .member-topnav-link.active{background:#e7f1ec;color:#075043} .portal-premium .member-topnav-link.active:after{display:none} .portal-premium .sa-topnav-link.active,.portal-premium .sa-topnav-dropdown-toggle.active{border:0;background:rgba(255,255,255,.13);box-shadow:inset 0 -2px #d6ad37} .portal-premium .member-topnav-profile,.portal-premium .member-topnav-signout{display:inline-flex;min-height:40px;align-items:center;padding:0 14px;border-radius:9px;font-size:12px} .portal-premium .member-topnav-signout:hover{transform:none} .portal-premium .sa-topnav-theme,.portal-premium .notif-bell{width:40px;height:40px;border-radius:10px} .portal-premium .global-search-control{position:relative;display:flex;align-items:center} .portal-premium .member-topnav-search,.portal-premium .sa-topnav-search{width:min(30vw,380px);margin-left:auto} .portal-premium .member-topnav-search-wrap input{height:42px;border-color:#d4dfd9;background:#f7f9f7;color:#173d31} .portal-premium .member-topnav-search-wrap .global-search-icon{color:#667a71} .portal-premium .sa-topnav-search-wrap input{height:42px;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.09);color:#fff} .portal-premium .sa-topnav-search-wrap input::placeholder{color:rgba(255,255,255,.58)} .portal-premium .sa-topnav-search-wrap .global-search-icon{color:rgba(255,255,255,.62)} .portal-premium .global-search-results{overflow:hidden;border-radius:12px;background:var(--panel)} .portal-premium .global-search-item{border-radius:8px} .portal-premium .admin-topnav{min-height:98px;background:#064a3c;border-top:3px solid #c29a28;box-shadow:0 9px 25px rgba(3,49,39,.12)} .portal-premium .admin-topnav-inner{grid-template-rows:58px 37px;grid-template-columns:minmax(220px,.78fr) minmax(320px,1.25fr) minmax(330px,.9fr);max-width:1680px;margin:0 auto;padding:0 clamp(18px,2.2vw,34px);gap:0 24px} .portal-premium .admin-topnav-brand-logo,.portal-premium .admin-topnav-brand-dot{width:38px;height:38px;border-radius:10px} .portal-premium .admin-topnav-brand-copy strong{font-size:14px} .portal-premium .admin-topnav-links{gap:2px} .portal-premium .admin-topnav-link,.portal-premium .admin-topnav-dropdown-toggle{min-height:37px;padding:0 12px;font-size:11px} .portal-premium .admin-topnav .global-search-control input{height:40px!important;border-radius:10px!important;background:rgba(255,255,255,.09)!important;box-shadow:none!important} .portal-premium .admin-topnav-location,.portal-premium .admin-topnav .notif-bell{border-radius:10px;box-shadow:none} .portal-premium .admin-topnav-user-btn{border-radius:10px} /* Professional sign-in: focused form, strong trust cues, no visual clutter. */ body.auth{background:#f2f5f2} body.auth .content{padding:0} .auth-split{grid-template-columns:minmax(520px,1.08fr) minmax(480px,.92fr);background:#fff} .auth-brand{padding:clamp(48px,6vw,92px);background:#063f34} .auth-brand-bg{inset:0;object-position:center;filter:saturate(.72) contrast(1.04)} .auth-brand-overlay{background:linear-gradient(112deg,rgba(3,43,34,.96),rgba(4,60,47,.82) 62%,rgba(4,60,47,.7)),linear-gradient(0deg,rgba(1,24,18,.22),rgba(1,24,18,.22))} .auth-brand-content{display:flex;width:min(100%,650px);min-height:calc(100vh - clamp(96px,12vw,184px));flex-direction:column;justify-content:center} .auth-brand-logo{margin-bottom:clamp(38px,7vh,72px)} .auth-brand-logo img{width:180px!important;filter:brightness(0) invert(1)!important} .auth-brand-eyebrow,.auth-login-eyebrow{margin-bottom:13px;color:#e1bf4e;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase} .auth-brand-h1{max-width:600px;font-size:clamp(38px,4.2vw,62px);font-weight:800;line-height:1.04;text-shadow:0 2px 20px rgba(0,0,0,.18)} .auth-brand-p{max-width:530px;margin-top:20px;color:#d6e4de;font-size:16px;line-height:1.75;text-shadow:none} .auth-brand-features{display:grid;grid-template-columns:1fr;gap:0;max-width:510px;margin-top:42px;border-top:1px solid rgba(255,255,255,.16)} .auth-brand-feat{gap:13px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.13);color:#e0ebe6;font-size:13px;text-shadow:none} .auth-feat-icon{width:30px;height:30px;border:0;border-radius:50%;background:rgba(214,173,55,.14);color:#efd56e} .auth-feat-icon svg{width:16px;height:16px} .auth-brand-footer{padding-top:34px} .auth-footer-badge{border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.08);color:#d8e7e1} .auth-form{max-width:none;margin:0;padding:64px clamp(44px,7vw,110px);background:#fff} .auth-form-inner{width:min(100%,430px);margin:0 auto} .auth-form-logo{margin-bottom:46px} .auth-form-logo img{width:146px!important} .auth-form-header{margin-bottom:30px} .auth-login-eyebrow{margin-bottom:9px;color:#8c6b12} .auth-form-title{color:#173d31;font-size:34px;font-weight:800} .auth-form-sub{max-width:410px;margin-top:10px;color:#64766e;line-height:1.65} .auth-field{margin-bottom:19px} .auth-label{margin-bottom:8px;color:#243f36;font-size:12px;font-weight:750} .auth-input-wrap input{min-height:50px;border-color:#cdd9d3;border-radius:9px;background:#fff;color:#172f27;box-shadow:inset 0 1px 1px rgba(17,47,39,.025)} .auth-input-wrap input:hover{border-color:#aebfb6} .auth-input-wrap input:focus{border-color:#075043;box-shadow:0 0 0 3px rgba(7,80,67,.12)} .auth-input-wrap .input-icon{color:#74887f} .auth-options{margin:2px 0 23px} .auth-remember{color:#586c63;font-size:13px} .auth-forgot{color:#075043;font-size:13px;text-underline-offset:3px} .auth-submit{min-height:50px;border-radius:9px;background:#075043;box-shadow:0 6px 16px rgba(7,80,67,.16)} .auth-submit:hover{background:#09604f;transform:none;box-shadow:0 8px 22px rgba(7,80,67,.2)} .auth-security-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:13px;color:#72847c;font-size:11px} .auth-security-note svg{flex:0 0 auto;color:#28785e} .auth-divider{margin:22px 0;color:#8b9993} .auth-divider:before,.auth-divider:after{background:#e1e7e3} .auth-back-btn{min-height:48px;border-color:#d4ddd8;border-radius:9px;color:#29463c;box-shadow:none} .auth-back-btn:hover{border-color:#aebfb6;background:#f6f8f6;transform:none;box-shadow:none} .auth-membership-prompt{margin:18px 0 0;text-align:center;color:#65776f;font-size:12px} .auth-membership-prompt a{color:#075043;font-weight:750;text-decoration:underline;text-underline-offset:3px} .auth-footer-link{margin-top:13px} .auth-theme-btn{min-height:40px;color:#71827b;font-size:11px} /* Public navigation stays legible against the white Umozi header. */ .lp-mobile-menu{border:1px solid #d6e0da;background:#f3f7f4;color:#075043} .lp-outcome-card li:before{content:'✓'} html[data-theme="dark"] body.portal-premium{background:linear-gradient(180deg,#0d1c17 0,#091612 420px)} html[data-theme="dark"] .portal-premium .member-topnav{background:rgba(16,35,28,.96);border-color:var(--border)} html[data-theme="dark"] .portal-premium .member-topnav-brand-text{color:var(--text)} html[data-theme="dark"] .portal-premium .member-topnav-link.active{background:rgba(97,205,166,.12);color:var(--brand)} html[data-theme="dark"] .portal-premium .member-topnav-search-wrap input{border-color:var(--border);background:var(--panel);color:var(--text)} html[data-theme="dark"] .portal-premium .table thead th{background:#183027;color:#b6c9c1} html[data-theme="dark"] .portal-premium .table tbody tr:nth-child(even){background:#12271f} html[data-theme="dark"] .portal-premium .table tbody tr:hover{background:#19352a} html[data-theme="dark"] .portal-premium input:not([type="checkbox"]):not([type="radio"]),html[data-theme="dark"] .portal-premium select,html[data-theme="dark"] .portal-premium textarea{border-color:var(--border);background:var(--panel);color:var(--text)} html[data-theme="dark"] body.auth,html[data-theme="dark"] .auth-form{background:#0d1c17} html[data-theme="dark"] .auth-form-title,html[data-theme="dark"] .auth-label{color:var(--text)} html[data-theme="dark"] .auth-form-sub,html[data-theme="dark"] .auth-remember,html[data-theme="dark"] .auth-membership-prompt{color:var(--muted)} html[data-theme="dark"] .auth-input-wrap input,html[data-theme="dark"] .auth-back-btn{border-color:var(--border);background:var(--panel);color:var(--text)} html[data-theme="dark"] .auth-divider:before,html[data-theme="dark"] .auth-divider:after{background:var(--border)} @media(max-width:1100px){ .portal-premium .admin-topnav{min-height:64px} .portal-premium .admin-topnav-inner{grid-template-rows:62px;grid-template-columns:auto 40px minmax(160px,1fr) auto} .portal-premium .admin-topnav-links{top:62px} .portal-premium .member-topnav-search,.portal-premium .sa-topnav-search{width:min(28vw,300px)} } @media(max-width:980px){ .auth-split{display:block;min-height:100vh;background:#f3f6f3} .auth-brand{display:none} .auth-form{min-height:100vh;padding:50px 24px} .auth-form-inner{padding:30px;border:1px solid #dce4df;border-radius:16px;background:#fff;box-shadow:0 18px 55px rgba(15,61,48,.08)} html[data-theme="dark"] .auth-split{background:#091612} html[data-theme="dark"] .auth-form-inner{border-color:var(--border);background:var(--panel)} } @media(max-width:820px){ .portal-premium .member-topnav,.portal-premium .sa-topnav{height:64px} .portal-premium .member-topnav-inner,.portal-premium .sa-topnav-inner{padding:0 14px;gap:9px} .portal-premium .member-topnav-search,.portal-premium .sa-topnav-search{display:block;flex:1;width:auto;max-width:none} .portal-premium .member-topnav-right,.portal-premium .sa-topnav-right{gap:5px} .portal-premium .admin-content{padding:22px 16px 40px} .portal-premium .content>.container{padding-inline:16px} } @media(max-width:620px){ .auth-form{padding:0;background:#fff} .auth-form-inner{min-height:100vh;padding:36px 22px;border:0;border-radius:0;box-shadow:none} .auth-form-logo{margin-bottom:34px} .auth-form-title{font-size:30px} .auth-options{align-items:center} .auth-membership-prompt{line-height:1.6} html[data-theme="dark"] .auth-form{background:var(--panel)} .portal-premium .card-header,.portal-premium .m-section-header{padding:16px} .portal-premium .card-body{padding:16px} .portal-premium .member-topnav-logo{width:38px;height:38px} .portal-premium .member-topnav-signout{padding:0 10px} .portal-premium .sa-topnav-theme{display:none} } /* Accessibility and clarity pass: Bootstrap-compatible form, table and utility conventions without importing a second framework over the existing design. */ :root{ --text-strong:#10281f; --text-readable:#385047; --link-readable:#075043; --focus-visible:#0b7a64; } html[data-theme="dark"] body{ background:linear-gradient(180deg,#101c19 0,#0d1715 360px,var(--bg) 100%); } html[data-theme="dark"]{ --text-strong:#eef8f2; --text-readable:#c4d3cc; --link-readable:#81ddc6; } body.portal-premium :is(.page-title,.section-title,.card-header,.modal-title,th,label,.form-label){color:var(--text-strong)} body.portal-premium :is(.page-subtitle,.muted,.help-text,.form-text,.table-empty,.empty-state p){color:var(--text-readable)} body.portal-premium :is(a:not(.btn):not(.menu-item):not(.bottom-nav-item)){color:var(--link-readable)} body.portal-premium :is(input,select,textarea){color:var(--text-strong);background:var(--panel);border-color:color-mix(in srgb,var(--border) 78%,var(--text));} body.portal-premium :is(input,select,textarea)::placeholder{color:color-mix(in srgb,var(--muted) 82%,var(--text));opacity:1} body.portal-premium :is(input,select,textarea):focus{border-color:var(--focus-visible);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus-visible) 20%,transparent)} body.portal-premium .table :is(th,td){border-color:color-mix(in srgb,var(--border) 88%,var(--text));} body.portal-premium .table th{background:color-mix(in srgb,var(--surface) 92%,var(--admin-brand));font-weight:800;letter-spacing:.01em} body.portal-premium .table td{color:var(--text-strong)} body.portal-premium .badge,.pill,.status-badge{font-weight:750;border:1px solid color-mix(in srgb,currentColor 20%,var(--border))} [hidden]{display:none!important} /* Prevent expensive motion from competing with data entry, and respect OS preference. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important} } /* Member portal brand layer: polished, calm, and consistent across every dialog. */ body.member-portal .modal-overlay{ background:rgba(8,35,28,.58); backdrop-filter:blur(14px) saturate(125%); -webkit-backdrop-filter:blur(14px) saturate(125%); padding:clamp(14px,3vw,32px); } body.member-portal .modal-overlay.open{animation:memberModalBackdrop .24s ease both} body.member-portal .modal-overlay .modal{ width:min(680px,100%); max-height:min(88vh,760px); overflow:auto; border:1px solid rgba(7,80,67,.16); border-radius:22px; background:linear-gradient(145deg,#fff 0%,#fbfdfb 100%); box-shadow:0 30px 90px rgba(3,39,31,.28),0 8px 24px rgba(3,39,31,.12); animation:memberModalIn .3s cubic-bezier(.16,1,.3,1) both; } body.member-portal .modal-overlay .modal-header{ min-height:72px; padding:20px 24px; border-bottom:1px solid #e2ebe6; background:linear-gradient(135deg,#f8fbf9,#fff); } body.member-portal .modal-overlay .modal-header:before{ content:"";width:4px;height:28px;margin-right:2px;border-radius:99px;background:linear-gradient(180deg,#d4ad3a,#075043);flex:none; } body.member-portal .modal-overlay .modal-title{font-size:19px;letter-spacing:-.025em;color:#173d31} body.member-portal .modal-overlay .modal-body{padding:24px;background:#fff} body.member-portal .modal-overlay .modal-footer{padding:16px 24px 20px;border-top:1px solid #e2ebe6;background:#f8fbf9} body.member-portal .modal-overlay .modal-close{width:36px;height:36px;border-radius:999px;border-color:#d8e4dd;background:#f4f8f5;color:#527066;font-size:0} body.member-portal .modal-overlay .modal-close:after{content:"×";font-size:22px;line-height:1;font-weight:400} body.member-portal .modal-overlay .modal-close:hover{background:#e9f3ed;border-color:#9dbbad;color:#075043;transform:rotate(4deg)} body.member-portal .modal-overlay .form label{color:#31584b;font-weight:750} body.member-portal .modal-overlay input:not([type=checkbox]):not([type=radio]),body.member-portal .modal-overlay select,body.member-portal .modal-overlay textarea{border-color:#d3e0d9;border-radius:10px;background:#fbfdfb} body.member-portal .modal-overlay .btn{border-radius:10px;min-height:42px} @keyframes memberModalIn{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}} @keyframes memberModalBackdrop{from{opacity:0}to{opacity:1}} @media(max-width:560px){body.member-portal .modal-overlay{align-items:flex-end;padding:10px}body.member-portal .modal-overlay .modal{max-height:92vh;border-radius:20px}body.member-portal .modal-overlay .modal-header{padding:18px 18px;min-height:64px}body.member-portal .modal-overlay .modal-body{padding:18px}body.member-portal .modal-overlay .modal-footer{padding:14px 18px 18px}} /* ===== Enterprise migration centre ===== */ .migration-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:18px;padding:30px;border:1px solid color-mix(in srgb,var(--admin-brand) 18%,var(--border));border-radius:20px;background:linear-gradient(125deg,#073f33 0%,#0b5a48 68%,#987414 150%);color:#fff;box-shadow:0 18px 45px rgba(5,57,45,.17)} .migration-hero h1{margin:3px 0 8px;font:850 clamp(27px,3vw,39px)/1.1 Manrope,Inter,sans-serif;letter-spacing:-.04em}.migration-hero p{max-width:680px;margin:0;color:rgba(255,255,255,.76);font-size:14px;line-height:1.6}.migration-eyebrow{color:var(--admin-accent);font-size:10px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}.migration-trust{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.migration-trust span{padding:8px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.07);font-size:10px;font-weight:750;white-space:nowrap} .migration-steps{display:grid;grid-template-columns:repeat(5,1fr);margin:0 0 18px;padding:0;list-style:none;border:1px solid var(--border);border-radius:16px;background:var(--panel);overflow:hidden}.migration-steps li{position:relative;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:14px 17px;border-right:1px solid var(--border)}.migration-steps li:last-child{border-right:0}.migration-steps span{grid-row:1/3;display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:var(--panel-2);color:var(--muted);font-size:11px;font-weight:850}.migration-steps b{font-size:12px}.migration-steps small{color:var(--muted);font-size:10px}.migration-steps .active{background:color-mix(in srgb,var(--admin-brand) 5%,var(--panel))}.migration-steps .active span{background:var(--admin-brand);color:#fff} .migration-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}.migration-main{display:grid;gap:18px}.migration-upload-card,.migration-review-card,.migration-history{overflow:hidden}.migration-dataset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.migration-dataset-card{position:relative;display:flex;min-height:122px;flex-direction:column;gap:7px;padding:17px;border:1px solid var(--border);border-radius:14px;background:var(--panel);cursor:pointer;transition:border-color .16s,box-shadow .16s,transform .16s}.migration-dataset-card:hover{border-color:color-mix(in srgb,var(--admin-brand) 55%,var(--border));box-shadow:0 8px 20px rgba(5,68,52,.08);transform:translateY(-1px)}.migration-dataset-card input{position:absolute;opacity:0}.migration-dataset-card:has(input:checked){border-color:var(--admin-brand);background:color-mix(in srgb,var(--admin-brand) 5%,var(--panel));box-shadow:0 0 0 3px color-mix(in srgb,var(--admin-brand) 12%,transparent)}.migration-dataset-check{position:absolute;top:13px;right:13px;display:grid;width:22px;height:22px;place-items:center;border:1px solid var(--border);border-radius:50%;color:transparent;font-size:11px}.migration-dataset-card:has(input:checked) .migration-dataset-check{border-color:var(--admin-brand);background:var(--admin-brand);color:#fff}.migration-dataset-card strong{padding-right:30px;font-size:13px}.migration-dataset-card small{color:var(--muted);font-size:11px;line-height:1.45}.migration-dataset-card a{margin-top:auto;color:var(--admin-brand);font-size:10px;font-weight:800;text-decoration:none} .migration-dropzone{display:flex;min-height:160px;align-items:center;justify-content:center;flex-direction:column;gap:6px;margin-top:14px;padding:24px;border:1.5px dashed color-mix(in srgb,var(--admin-brand) 42%,var(--border));border-radius:15px;background:color-mix(in srgb,var(--admin-brand) 3%,var(--panel));cursor:pointer;text-align:center;transition:.16s}.migration-dropzone:hover{border-color:var(--admin-brand);background:color-mix(in srgb,var(--admin-brand) 6%,var(--panel))}.migration-dropzone input{position:absolute;width:1px;height:1px;opacity:0}.migration-drop-icon{display:grid;width:39px;height:39px;place-items:center;border-radius:12px;background:var(--admin-brand);color:#fff;font-size:21px}.migration-dropzone strong{font-size:13px}.migration-dropzone small{color:var(--muted);font-size:10px}.migration-file-name{margin-top:5px;padding:6px 10px;border-radius:8px;background:var(--panel);color:var(--admin-brand);font-size:10px;font-weight:750}.migration-form-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:15px}.migration-form-footer p{max-width:560px;margin:0;color:var(--muted);font-size:10px;line-height:1.5} .migration-history{position:sticky;top:82px}.migration-history-list{max-height:720px;overflow:auto}.migration-history-item{display:flex;flex-direction:column;gap:5px;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none;transition:background .15s}.migration-history-item:hover,.migration-history-item.active{background:color-mix(in srgb,var(--admin-brand) 6%,var(--panel))}.migration-history-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.migration-history-top b{font-size:11px}.migration-history-top .pill{font-size:8px;white-space:nowrap}.migration-history-item small{color:var(--muted);font-size:9px} .migration-steps .complete span{background:var(--success);color:#fff}.migration-steps .complete b{color:var(--success)} .migration-dropzone.is-dragging{border-color:var(--admin-accent);background:color-mix(in srgb,var(--admin-accent) 13%,var(--panel));box-shadow:0 0 0 4px color-mix(in srgb,var(--admin-accent) 15%,transparent);transform:scale(1.005)} .migration-history-filters{display:grid;gap:7px;padding:12px;border-bottom:1px solid var(--border);background:var(--panel-2)}.migration-history-filters input,.migration-history-filters select{width:100%;min-height:34px;padding:6px 9px;font-size:10px}.migration-history-filters .btn{width:100%} .migration-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.migration-metrics>div{display:flex;flex-direction:column;gap:4px;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}.migration-metrics span{color:var(--muted);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.08em}.migration-metrics strong{font-size:21px}.migration-metrics .success strong{color:var(--success)}.migration-metrics .danger strong{color:var(--danger)}.migration-metrics .warning strong{color:var(--warning)}.migration-mapping{display:grid;grid-template-columns:190px 1fr;gap:15px;margin-bottom:14px;padding:14px;border:1px solid var(--border);border-radius:12px}.migration-mapping>div:first-child{display:flex;flex-direction:column;gap:4px}.migration-mapping b{font-size:11px}.migration-mapping small{color:var(--muted);font-size:9px}.migration-map-chips{display:flex;flex-wrap:wrap;gap:5px}.migration-map-chips span{padding:5px 7px;border-radius:7px;background:var(--panel-2);font-size:9px}.migration-map-chips i{padding-inline:3px;color:var(--admin-accent);font-style:normal}.migration-preview{max-height:440px;margin-top:13px;border:1px solid var(--border)}.migration-row-data{display:flex;max-width:520px;flex-wrap:wrap;gap:4px 10px}.migration-row-data span{font-size:9px}.migration-review-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.text-success{color:var(--success);font-weight:700} @media(max-width:1100px){.migration-layout{grid-template-columns:1fr}.migration-history{position:static}.migration-history-list{max-height:360px}} @media(max-width:760px){.migration-hero{align-items:flex-start;flex-direction:column;padding:23px}.migration-trust{justify-content:flex-start}.migration-steps{grid-template-columns:1fr}.migration-steps li{border-right:0;border-bottom:1px solid var(--border)}.migration-dataset-grid{grid-template-columns:1fr}.migration-form-footer{align-items:stretch;flex-direction:column}.migration-form-footer .btn{width:100%}.migration-metrics{grid-template-columns:repeat(2,1fr)}.migration-mapping{grid-template-columns:1fr}.migration-review-actions{align-items:stretch;flex-direction:column}.migration-review-actions form,.migration-review-actions .btn{width:100%}} /* ===== Premium member loan application ===== */ .m-page:has(.m-loan-application-card){max-width:1380px} .m-page:has(.m-loan-application-card) .m-page-grid{grid-template-columns:minmax(0,1fr) minmax(390px,430px);gap:28px} .m-loan-application-card{ position:relative; overflow:hidden; border:1px solid #d5e0da; border-radius:18px; background:linear-gradient(180deg,#fff 0%,#fbfcfb 100%); box-shadow:0 20px 55px rgba(14,63,49,.1),0 3px 10px rgba(14,63,49,.04); } .m-loan-application-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#075043 0 72%,#d4af37 72% 100%)} .m-loan-application-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:13px;padding:25px 24px 20px;background:radial-gradient(circle at 95% 0,rgba(212,175,55,.13),transparent 38%),linear-gradient(145deg,#f8fbf9,#fff);border-bottom:1px solid #e4ebe7} .m-loan-application-icon{display:grid;width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,#075043,#096653);place-items:center;color:#f0d46f;box-shadow:0 8px 18px rgba(7,80,67,.2)} .m-loan-application-kicker{display:block;margin:1px 0 4px;color:#9a781b;font-size:9px;font-weight:850;letter-spacing:.14em;text-transform:uppercase} .m-loan-application-head .m-section-title{color:#153d31;font-family:Manrope,Inter,sans-serif;font-size:20px;letter-spacing:-.025em} .m-loan-application-head p{margin:5px 0 0;color:#71827b;font-size:11px;line-height:1.55} .m-loan-step{padding:5px 9px;border:1px solid #d9e3de;border-radius:999px;background:#fff;color:#708079;font-size:9px;font-weight:800;white-space:nowrap} .m-loan-eligibility{display:flex;align-items:center;gap:9px;margin:17px 24px 0;padding:11px 13px;border:1px solid #cfe3d8;border-radius:11px;background:#f0f8f4;color:#164b39} .m-loan-eligibility-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#28a36a;box-shadow:0 0 0 4px rgba(40,163,106,.12)} .m-loan-eligibility>span:not(.m-loan-eligibility-dot){display:flex;min-width:0;flex-direction:column;line-height:1.2} .m-loan-eligibility small{color:#688078;font-size:8px;font-weight:750;letter-spacing:.06em;text-transform:uppercase} .m-loan-eligibility strong{margin-top:3px;font-size:11px;font-weight:800} .m-loan-eligibility-date{margin-left:auto;padding-left:13px;border-left:1px solid #cfe3d8} .m-loan-premium-form{padding:20px 24px 24px} .m-loan-premium-form .m-form-group{margin-bottom:16px} .m-loan-premium-form .m-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;color:#29463c;font-size:11px;font-weight:750} .m-loan-premium-form .m-label span{color:#91a099;font-size:8px;font-weight:750;letter-spacing:.04em;text-transform:uppercase} .m-loan-premium-form .m-input{min-height:46px;padding:11px 13px;border-color:#ccd9d2;border-radius:10px;background:#fff;color:#1d3d32;font-size:13px;box-shadow:0 1px 2px rgba(15,61,48,.025)} .m-loan-premium-form .m-input:hover{border-color:#aebfb6} .m-loan-premium-form .m-input:focus{border-color:#075043;box-shadow:0 0 0 3px rgba(7,80,67,.11),0 4px 12px rgba(15,61,48,.05)} .m-loan-premium-form .m-input[readonly],.m-loan-premium-form .m-input:disabled{background:#f3f6f4;color:#63766e} .m-field-hint{margin:6px 2px 0;color:#8a9a93;font-size:9px;line-height:1.5} .m-loan-form-divider{display:flex;align-items:center;gap:10px;margin:3px 0 16px;color:#8a9a93;font-size:8px;font-weight:850;letter-spacing:.1em;text-transform:uppercase} .m-loan-form-divider:after{content:"";height:1px;flex:1;background:#e2e9e5} .m-input-affix{position:relative;display:flex;align-items:center} .m-input-affix>span{position:absolute;left:12px;z-index:1;color:#60766d;font-size:11px;font-weight:800;pointer-events:none} .m-input-affix>.m-input{padding-left:31px} .m-input-affix.affix-right>span{right:12px;left:auto;color:#75877f;font-size:9px;text-transform:uppercase} .m-input-affix.affix-right>.m-input{padding-right:56px;padding-left:13px} .m-contract-note textarea{min-height:72px;line-height:1.45;resize:vertical} .m-loan-estimate{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:3px 0 18px;overflow:hidden;border:1px solid #d8e4de;border-radius:13px;background:linear-gradient(145deg,#f3f8f5,#fff)} .m-loan-estimate>div{padding:14px 13px} .m-loan-estimate>div+div{border-left:1px solid #dce6e1} .m-loan-estimate span{display:block;color:#778a82;font-size:8px;font-weight:750;letter-spacing:.045em;text-transform:uppercase} .m-loan-estimate strong{display:block;margin-top:5px;color:#075043;font-size:16px;font-weight:850;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .m-loan-estimate p{grid-column:1/-1;margin:0;padding:9px 13px;border-top:1px solid #dce6e1;background:rgba(7,80,67,.035);color:#7a8d85;font-size:8px;line-height:1.45} .m-loan-submit-area{padding-top:2px} .m-loan-submit-area .m-btn{min-height:50px;justify-content:space-between;padding:0 18px;background:linear-gradient(135deg,#075043,#096a56);box-shadow:0 10px 24px rgba(7,80,67,.21)} .m-loan-submit-area .m-btn:hover{background:linear-gradient(135deg,#09614f,#08755e);box-shadow:0 13px 28px rgba(7,80,67,.25)} .m-loan-submit-area>p{display:flex;align-items:center;justify-content:center;gap:5px;margin:9px 0 0;color:#8a9993;font-size:8px} .m-loan-submit-area>p svg{color:#4b8b70} html[data-theme="dark"] .m-loan-application-card{border-color:var(--border);background:var(--panel);box-shadow:0 20px 55px rgba(0,0,0,.24)} html[data-theme="dark"] .m-loan-application-head{border-color:var(--border);background:linear-gradient(145deg,var(--panel-2),var(--panel))} html[data-theme="dark"] .m-loan-application-head .m-section-title{color:var(--text)} html[data-theme="dark"] .m-loan-application-head p,html[data-theme="dark"] .m-field-hint{color:var(--muted)} html[data-theme="dark"] .m-loan-eligibility{border-color:color-mix(in srgb,var(--success) 32%,var(--border));background:color-mix(in srgb,var(--success) 10%,var(--panel));color:var(--text)} html[data-theme="dark"] .m-loan-premium-form .m-label{color:var(--text)} html[data-theme="dark"] .m-loan-premium-form .m-input{border-color:var(--border);background:var(--panel-2);color:var(--text)} html[data-theme="dark"] .m-loan-estimate{border-color:var(--border);background:linear-gradient(145deg,var(--panel-2),var(--panel))} html[data-theme="dark"] .m-loan-estimate>div+div,html[data-theme="dark"] .m-loan-estimate p{border-color:var(--border)} html[data-theme="dark"] .m-loan-estimate p{background:rgba(255,255,255,.025)} @media(max-width:1050px){.m-page:has(.m-loan-application-card) .m-page-grid{grid-template-columns:1fr}.m-page:has(.m-loan-application-card) .m-page-sidebar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.m-loan-application-card{grid-column:1/-1}} @media(max-width:700px){.m-page:has(.m-loan-application-card) .m-page-sidebar{display:flex}.m-loan-application-head{padding:23px 18px 18px}.m-loan-eligibility{margin-inline:18px}.m-loan-premium-form{padding:18px}.m-loan-premium-form .m-form-row{grid-template-columns:1fr}.m-loan-estimate strong{font-size:15px}} /* ===== Premium web loan offset form ===== */ .offset-page{width:min(1180px,calc(100% - 36px));margin:0 auto;padding:8px 0 48px} .offset-page-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px} .offset-page-toolbar h1{margin:7px 0 3px;color:var(--text);font-size:clamp(25px,3vw,34px);letter-spacing:-.035em} .offset-page-toolbar p{margin:0;color:var(--muted);font-size:13px} .offset-back{color:var(--admin-brand);font-size:11px;font-weight:800} .offset-toolbar-actions{display:flex;gap:9px;flex-wrap:wrap} .uw-download-grid:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))} .offset-document{overflow:hidden;border:1px solid #d2ded8;border-radius:19px;background:#fff;color:#173d31;box-shadow:0 24px 65px rgba(13,62,48,.11)} .offset-brandbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;padding:20px 30px;background:#075043;color:#fff} .offset-brandbar img{width:56px;height:56px;object-fit:contain;filter:brightness(0) invert(1)} .offset-brandbar>div:not(.offset-doc-meta){display:flex;flex-direction:column}.offset-brandbar strong{font-size:20px;letter-spacing:.01em}.offset-brandbar span{color:#c7ddd5;font-size:8px;font-weight:750;letter-spacing:.05em;text-transform:uppercase} .offset-doc-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px}.offset-doc-meta b{color:#f0d36b;font-size:11px;letter-spacing:.12em}.offset-gold-rule{height:4px;background:#d4af37} .offset-document-intro{padding:30px 36px 25px;background:radial-gradient(circle at 95% 0,rgba(212,175,55,.12),transparent 35%),#f9fbf9;border-bottom:1px solid #e2e9e5} .offset-document-intro>span{color:#9a781b;font-size:8px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}.offset-document-intro h2{margin:7px 0 6px;color:#123a2e;font-family:Georgia,serif;font-size:30px;font-weight:400;letter-spacing:-.025em}.offset-document-intro p{max-width:700px;margin:0;color:#677a72;font-size:12px;line-height:1.6} .offset-section{position:relative;margin:24px 30px;padding:26px;border:1px solid #dce5e0;border-radius:15px;background:#fff} .offset-section-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}.offset-section-head>span{display:grid;width:32px;height:32px;flex:0 0 auto;border-radius:10px;background:#075043;place-items:center;color:#f0d36b;font-size:10px;font-weight:850}.offset-section-head h3{margin:0;color:#173d31;font-size:17px;letter-spacing:-.02em}.offset-section-head p{margin:3px 0 0;color:#82928c;font-size:10px} .offset-fields{display:grid;grid-template-columns:1fr;gap:16px}.offset-fields.cols-2{grid-template-columns:1fr 1fr}.offset-fields label,.offset-summary-grid label,.offset-reason,.offset-approval-grid label{display:flex;min-width:0;flex-direction:column;gap:7px}.offset-fields label>span,.offset-summary-grid label>span,.offset-reason>span,.offset-approval-grid label>span{color:#526b62;font-size:9px;font-weight:800;letter-spacing:.055em;text-transform:uppercase} .offset-document :is(input,select,textarea){width:100%;min-height:44px;padding:10px 12px;border:1px solid #cddad3;border-radius:9px;background:#fbfcfb;color:#173d31;font:600 12px/1.35 Inter,sans-serif;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.offset-document :is(input,select,textarea):focus{border-color:#075043;background:#fff;box-shadow:0 0 0 3px rgba(7,80,67,.11)}.offset-document textarea{resize:vertical} .offset-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0;padding:0;border:0}.offset-methods legend{margin-bottom:9px;color:#526b62;font-size:9px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.offset-methods label{position:relative;display:flex;align-items:center;gap:10px;padding:14px;border:1px solid #d5e1db;border-radius:11px;background:#fafcfb;cursor:pointer}.offset-methods input{width:17px;min-height:17px;height:17px;padding:0;accent-color:#075043}.offset-methods label:has(input:checked){border-color:#5a907b;background:#eef7f2;box-shadow:0 0 0 2px rgba(7,80,67,.07)}.offset-methods span{display:flex;flex-direction:column}.offset-methods b{font-size:12px}.offset-methods small{margin-top:2px;color:#7d8f88;font-size:8px} .offset-sign-row{padding-top:18px;border-top:1px solid #e5ebe8} .offset-official{padding-top:31px;background:#fbfcfb}.offset-official-tag{position:absolute;top:0;right:22px;padding:7px 12px;border-radius:0 0 8px 8px;background:#d4af37;color:#18382e;font-size:8px;font-weight:900;letter-spacing:.09em;text-transform:uppercase} .offset-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:22px}.offset-summary-grid>label{padding:15px;border:1px solid #d9e4de;border-radius:11px;background:#f4f8f5}.offset-summary-grid small{color:#85958f;font-size:8px;line-height:1.45} .offset-money{position:relative;display:flex;align-items:center}.offset-money b{position:absolute;left:11px;color:#075043;font-size:11px}.offset-money input{padding-left:30px!important;font-variant-numeric:tabular-nums}.offset-money.compact input{min-height:36px} .offset-table-wrap{margin-bottom:20px;overflow:auto;border:1px solid #d9e3de;border-radius:11px}.offset-table{width:100%;border-collapse:collapse}.offset-table th{padding:10px 12px;background:#075043;color:#fff;font-size:8px;letter-spacing:.06em;text-align:left;text-transform:uppercase}.offset-table td{padding:7px;border-top:1px solid #e2e9e5}.offset-table td+td,.offset-table th+th{border-left:1px solid rgba(213,225,219,.5)}.offset-table input{min-height:36px;background:#fff} .offset-reason{margin-top:18px}.offset-approval-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;padding-top:22px;border-top:1px solid #dfe7e3}.offset-approval-grid>div{display:grid;grid-template-columns:1fr 1fr;gap:13px}.offset-approval-grid h4{grid-column:1/-1;margin:0 0 2px;color:#075043;font-size:11px;text-transform:uppercase}.offset-approval-grid label:first-of-type{grid-column:1/-1} .offset-document-footer{display:flex;justify-content:space-between;gap:20px;padding:15px 30px;background:#f3f7f4;border-top:1px solid #dce5e0;color:#71837b;font-size:8px}.offset-document-footer b{color:#075043;text-transform:uppercase} html[data-theme="dark"] .offset-document{border-color:var(--border);background:var(--panel);color:var(--text)}html[data-theme="dark"] .offset-document-intro,html[data-theme="dark"] .offset-section,html[data-theme="dark"] .offset-official{border-color:var(--border);background:var(--panel)}html[data-theme="dark"] .offset-document-intro h2,html[data-theme="dark"] .offset-section-head h3{color:var(--text)}html[data-theme="dark"] .offset-document :is(input,select,textarea){border-color:var(--border);background:var(--panel-2);color:var(--text)}html[data-theme="dark"] .offset-methods label,html[data-theme="dark"] .offset-summary-grid>label{border-color:var(--border);background:var(--panel-2)} @media(max-width:780px){.offset-page{width:min(100% - 24px,1180px)}.offset-page-toolbar{align-items:flex-start;flex-direction:column}.offset-toolbar-actions{width:100%}.offset-toolbar-actions>*{flex:1}.offset-brandbar{padding:17px 18px}.offset-brandbar img{width:45px;height:45px}.offset-brandbar strong{font-size:16px}.offset-doc-meta{display:none}.offset-document-intro{padding:25px 20px}.offset-document-intro h2{font-size:25px}.offset-section{margin:15px 13px;padding:20px 16px}.offset-fields.cols-2,.offset-summary-grid,.offset-methods,.offset-approval-grid{grid-template-columns:1fr}.offset-approval-grid{gap:16px}.offset-approval-grid>div{grid-template-columns:1fr}.offset-approval-grid label:first-of-type,.offset-approval-grid h4{grid-column:auto}} @media print{ @page{size:A4 portrait;margin:8mm} body{background:#fff!important;color:#173d31!important} .no-print,.member-topnav,.admin-topnav,.sa-topnav,.footer,.bottom-nav{display:none!important} .content{padding:0!important}.offset-page{width:100%;padding:0}.offset-document{border:0;border-radius:0;box-shadow:none}.offset-brandbar{padding:12px 18px}.offset-brandbar img{width:42px;height:42px}.offset-document-intro{padding:15px 20px}.offset-document-intro h2{font-size:23px}.offset-section{break-inside:avoid;margin:11px 0;padding:15px 18px;border-radius:8px}.offset-section-head{margin-bottom:12px}.offset-document :is(input,select,textarea){min-height:30px;padding:5px 7px;background:#fff!important;font-size:9px}.offset-methods{margin:12px 0}.offset-methods label{padding:8px}.offset-summary-grid>label{padding:9px}.offset-table input,.offset-money.compact input{min-height:28px}.offset-approval-grid{margin-top:12px;padding-top:12px}.offset-document-footer{padding:9px 18px} } /* ===== Dynamic public website motion ===== */ .uw-hero-dynamic{isolation:isolate;min-height:760px;padding:132px 0 78px;overflow:hidden;background:linear-gradient(118deg,#032f27 0%,#064d3e 55%,#0a624d 100%)} .uw-hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr);align-items:center;gap:clamp(48px,7vw,104px)} .uw-hero-dynamic .uw-hero-content{padding:28px 0} .uw-hero-dynamic .uw-hero-content>p{max-width:590px} .uw-hero-dynamic .uw-hero-trust{margin-top:38px} .uw-hero-atmosphere{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .uw-hero-atmosphere:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 26%,rgba(246,207,98,.13),transparent 26%),radial-gradient(circle at 9% 92%,rgba(118,216,179,.12),transparent 27%),linear-gradient(100deg,rgba(0,0,0,.14),transparent 54%)} .uw-hero-atmosphere span{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;animation:uwFloat 13s ease-in-out infinite} .uw-hero-atmosphere span:nth-child(1){top:10%;right:3%;width:360px;height:360px} .uw-hero-atmosphere span:nth-child(2){right:23%;bottom:-160px;width:440px;height:440px;animation-delay:-4s} .uw-hero-atmosphere span:nth-child(3){top:37%;left:-130px;width:280px;height:280px;animation-delay:-8s} .uw-hero-visual{position:relative;width:100%;min-height:535px;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:#173e33;box-shadow:0 38px 90px rgba(0,0,0,.35);overflow:hidden} .uw-hero-slides{position:absolute;inset:0} .uw-hero-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform:scale(1.035);transition:opacity 1s ease,visibility 1s ease,transform 6.5s ease} .uw-hero-slide.active{opacity:1;visibility:visible;transform:scale(1)} .uw-hero-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(2,28,22,.88) 100%),linear-gradient(90deg,rgba(4,43,34,.12),transparent 40%)} .uw-hero-slide img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.03);transform:scale(1);animation:uwHeroDrift 8s ease-in-out alternate infinite} .uw-hero-slide:nth-child(even) img{animation-direction:alternate-reverse} .uw-hero-slide figcaption{position:absolute;right:34px;bottom:84px;left:34px;z-index:2;display:flex;flex-direction:column;gap:7px;color:#fff;transform:translateY(15px);opacity:0;transition:transform .7s .28s ease,opacity .7s .28s ease} .uw-hero-slide.active figcaption{transform:none;opacity:1} .uw-hero-slide figcaption small{color:#f3cf65;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .uw-hero-slide figcaption strong{max-width:460px;font-family:Georgia,serif;font-size:clamp(24px,2.25vw,34px);font-weight:400;line-height:1.16} .uw-hero-controls{position:absolute;right:25px;bottom:22px;left:25px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:18px} .uw-hero-dots{display:flex;align-items:center;gap:8px} .uw-hero-dots button{width:23px;height:3px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.35);cursor:pointer;transition:width .25s ease,background .25s ease} .uw-hero-dots button.active{width:44px;background:#f0ca55} .uw-hero-control-buttons{display:flex;align-items:center;gap:6px} .uw-hero-control-buttons button{display:inline-flex;min-width:38px;height:38px;align-items:center;justify-content:center;padding:0 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(3,39,31,.45);color:#fff;font:700 10px Inter,system-ui;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s ease,border-color .2s ease} .uw-hero-control-buttons button:hover{border-color:rgba(240,202,85,.65);background:rgba(3,39,31,.75)} .uw-hero-progress{position:absolute;right:0;bottom:0;left:0;z-index:5;height:3px;background:rgba(255,255,255,.12)} .uw-hero-progress span{display:block;width:0;height:100%;background:#d6ad37} .uw-hero-visual.is-playing .uw-hero-progress span{animation:uwProgress 6.5s linear forwards} .uw-scroll-cue{position:absolute;bottom:24px;left:50%;z-index:3;display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.62);font-size:9px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;transform:translateX(-50%)} .uw-scroll-cue span{position:relative;width:17px;height:27px;border:1px solid rgba(255,255,255,.42);border-radius:999px} .uw-scroll-cue span:after{content:"";position:absolute;top:6px;left:7px;width:2px;height:5px;border-radius:2px;background:#f0ca55;animation:uwScroll 1.8s ease-in-out infinite} .uw-life{padding:100px 0;background:#f7f9f7;overflow:hidden} .uw-life-heading{display:grid;grid-template-columns:1fr 370px;align-items:end;gap:80px;margin-bottom:42px} .uw-life-heading h2{max-width:760px;margin:14px 0 0;font-family:Georgia,serif;font-size:clamp(36px,4vw,58px);font-weight:400;line-height:1.08;letter-spacing:-.035em} .uw-life-heading p{margin:0;color:#587169;font-size:14px;line-height:1.75} .uw-life-window{width:100%;overflow:hidden} .uw-life-track{display:flex;width:max-content;animation:uwMarquee 42s linear infinite;will-change:transform} .uw-life-window:hover .uw-life-track,.uw-life-window:focus-within .uw-life-track{animation-play-state:paused} .uw-life-set{display:flex;gap:16px;padding-right:16px} .uw-life-set figure{position:relative;width:clamp(250px,26vw,390px);height:420px;margin:0;overflow:hidden;background:#123e32} .uw-life-set figure:nth-child(even){height:350px;margin-top:70px} .uw-life-set img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform .75s ease,filter .75s ease} .uw-life-set figure:hover img{transform:scale(1.045);filter:saturate(1)} .uw-life-set figure:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(2,33,26,.84))} .uw-life-set figcaption{position:absolute;right:23px;bottom:23px;left:23px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;color:#fff} .uw-life-set figcaption span{color:#f0cb5e;font-size:10px;font-weight:800;letter-spacing:.14em} .uw-life-set figcaption strong{max-width:210px;font-family:Georgia,serif;font-size:22px;font-weight:400;text-align:right} .uw-service-card{transition:transform .35s ease,box-shadow .35s ease} .uw-service-card:hover{z-index:2;transform:translateY(-7px);box-shadow:0 24px 50px rgba(6,63,52,.13)} .uw-loan-item{transition:padding .28s ease,background .28s ease} .uw-loan-item:hover{padding-right:15px;padding-left:15px;background:rgba(255,255,255,.045)} .uw-loan-item>span{transition:transform .28s ease} .uw-loan-item:hover>span{transform:translateX(5px)} .uw-impact-image{min-height:600px;overflow:hidden} .uw-impact-image img{width:100%;height:110%;object-fit:cover;animation:uwImpactDrift 13s ease-in-out alternate infinite} .uw-journey-step span{transition:background .3s ease,color .3s ease,transform .3s ease} .uw-journey-step:hover span{background:#075043;color:#fff;transform:translateY(-4px)} @keyframes uwFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,-20px,0)}} @keyframes uwHeroDrift{from{transform:scale(1.03) translate3d(-.5%,0,0)}to{transform:scale(1.085) translate3d(.8%,-.8%,0)}} @keyframes uwProgress{from{width:0}to{width:100%}} @keyframes uwScroll{0%{opacity:0;transform:translateY(-1px)}45%{opacity:1}100%{opacity:0;transform:translateY(8px)}} @keyframes uwMarquee{to{transform:translateX(-50%)}} @keyframes uwImpactDrift{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.08) translateY(-3%)}} @media(max-width:1050px){ .uw-hero-dynamic{min-height:auto;padding:120px 0 70px} .uw-hero-layout{grid-template-columns:1fr;gap:48px} .uw-hero-dynamic .uw-hero-content{text-align:center} .uw-hero-dynamic .uw-eyebrow,.uw-hero-dynamic .uw-actions,.uw-hero-dynamic .uw-hero-trust{justify-content:center} .uw-hero-dynamic .uw-hero-content>p{margin-right:auto;margin-left:auto} .uw-hero-visual{width:min(100%,760px);min-height:520px;margin:0 auto} .uw-scroll-cue{display:none} .uw-life-heading{grid-template-columns:1fr;gap:18px} } @media(max-width:620px){ .uw-hero-dynamic{padding:100px 0 48px} .uw-hero-layout{gap:34px} .uw-hero-dynamic .uw-hero-content{padding:15px 0} .uw-hero-dynamic .uw-hero-trust{display:grid;gap:9px;margin-top:28px} .uw-hero-visual{min-height:460px} .uw-hero-slide figcaption{right:20px;bottom:84px;left:20px} .uw-hero-slide figcaption strong{font-size:25px} .uw-hero-controls{right:16px;bottom:18px;left:16px} .uw-hero-dots button{width:13px}.uw-hero-dots button.active{width:28px} .uw-hero-control-buttons [data-hero-toggle]{min-width:38px;width:38px;padding:0;font-size:0}.uw-hero-control-buttons [data-hero-toggle]:after{content:"Ⅱ";font-size:10px} .uw-hero-control-buttons [data-hero-toggle][aria-pressed="true"]:after{content:"▶"} .uw-life{padding:70px 0} .uw-life-heading{margin-bottom:28px} .uw-life-set figure{width:260px;height:350px}.uw-life-set figure:nth-child(even){height:300px;margin-top:50px} .uw-life-track{animation-duration:34s} .uw-impact-image{min-height:420px} } @media(prefers-reduced-motion:reduce){ .uw-hero-atmosphere span,.uw-hero-slide img,.uw-hero-progress span,.uw-scroll-cue span:after,.uw-life-track,.uw-impact-image img{animation:none!important;transform:none!important} .uw-life-window{overflow-x:auto;scroll-snap-type:x mandatory} .uw-life-set[aria-hidden="true"]{display:none} .uw-life-set figure{scroll-snap-align:start} .uw-hero-slide{transition:none} } /* ===== Full-bleed hero refinement ===== */ .uw-hero-dynamic{min-height:calc(100vh - 82px);min-height:calc(100svh - 82px);padding:0;background:#04362c} .uw-hero-dynamic .uw-hero-visual{position:absolute;inset:0;width:100%;min-height:0;border:0;border-radius:0;background:#04362c;box-shadow:none;overflow:hidden} .uw-hero-dynamic .uw-hero-slides{position:absolute;inset:0} .uw-hero-dynamic .uw-hero-slide:after{background:linear-gradient(90deg,rgba(1,32,25,.95) 0%,rgba(2,43,34,.86) 35%,rgba(2,43,34,.42) 62%,rgba(2,36,29,.19) 100%),linear-gradient(0deg,rgba(2,29,23,.72) 0%,transparent 42%,rgba(2,29,23,.12) 100%)} .uw-hero-dynamic .uw-hero-slide img{object-position:center;filter:saturate(.85) contrast(1.06);animation-duration:9s} .uw-hero-dynamic .uw-hero-slide:first-child img{object-position:center 66%} .uw-hero-dynamic .uw-hero-slide:nth-child(2) img,.uw-hero-dynamic .uw-hero-slide:nth-child(3) img{image-rendering:auto} .uw-hero-dynamic .uw-hero-slide:nth-child(4) img{object-position:center 57%} .uw-hero-dynamic .uw-hero-slide:nth-child(5) img{object-position:72% center} .uw-hero-dynamic .uw-hero-slide figcaption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .uw-hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 88% 18%,rgba(240,202,85,.12),transparent 27%),linear-gradient(180deg,rgba(0,0,0,.06),transparent 60%,rgba(2,30,24,.22))} .uw-hero-dynamic .uw-hero-atmosphere{z-index:2} .uw-hero-dynamic .uw-hero-layout{z-index:3;display:grid;grid-template-columns:minmax(0,720px) minmax(280px,1fr);min-height:calc(100vh - 82px);min-height:calc(100svh - 82px);align-items:center;gap:clamp(42px,7vw,110px);padding-top:clamp(54px,8vh,92px);padding-bottom:clamp(88px,12vh,130px)} .uw-hero-dynamic .uw-hero-content{align-self:center;padding:0} .uw-hero-dynamic .uw-eyebrow{color:#d2e2dc;text-shadow:0 2px 12px rgba(0,0,0,.25)} .uw-hero-dynamic .uw-hero-content h1{max-width:720px;margin-top:23px;font-size:clamp(55px,6.3vw,94px);text-shadow:0 4px 30px rgba(0,0,0,.25)} .uw-hero-dynamic .uw-hero-content>p{max-width:610px;color:#e1ebe7;text-shadow:0 2px 15px rgba(0,0,0,.28)} .uw-hero-dynamic .uw-button-quiet{background:rgba(2,45,35,.23);backdrop-filter:blur(8px)} .uw-hero-dynamic .uw-hero-trust{color:#d9e5e0;text-shadow:0 1px 12px rgba(0,0,0,.34)} .uw-hero-story{position:relative;align-self:end;justify-self:end;width:min(100%,380px);margin-bottom:8px;padding:24px 24px 18px;border-top:1px solid rgba(255,255,255,.34);background:linear-gradient(135deg,rgba(3,48,38,.74),rgba(3,48,38,.35));color:#fff;backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(0,0,0,.16)} .uw-hero-story>small{display:block;margin-bottom:9px;color:#f2ce5f;font-size:9px;font-weight:850;letter-spacing:.18em;text-transform:uppercase} .uw-hero-story>strong{display:block;min-height:70px;font-family:Georgia,serif;font-size:clamp(22px,2vw,30px);font-weight:400;line-height:1.17} .uw-hero-story .uw-hero-controls{position:static;margin-top:20px} .uw-hero-story .uw-hero-progress{position:absolute;right:0;bottom:0;left:0} .uw-hero-dynamic.is-playing .uw-hero-progress span{animation:uwProgress 6.5s linear forwards} .uw-hero-story .uw-hero-control-buttons button{background:rgba(1,32,25,.52)} .uw-hero-dynamic .uw-scroll-cue{z-index:4} @media(max-width:1050px){ .uw-hero-dynamic{min-height:auto} .uw-hero-dynamic .uw-hero-layout{grid-template-columns:minmax(0,1fr) minmax(260px,.62fr);min-height:700px;gap:34px;padding-top:74px;padding-bottom:102px} .uw-hero-dynamic .uw-hero-content{text-align:left} .uw-hero-dynamic .uw-eyebrow,.uw-hero-dynamic .uw-actions,.uw-hero-dynamic .uw-hero-trust{justify-content:flex-start} .uw-hero-dynamic .uw-hero-content>p{margin-left:0} } @media(max-width:760px){ .uw-hero-dynamic .uw-hero-slide:after{background:linear-gradient(90deg,rgba(1,31,24,.9),rgba(2,42,33,.62)),linear-gradient(0deg,rgba(1,28,22,.82),transparent 62%)} .uw-hero-dynamic .uw-hero-layout{grid-template-columns:1fr;min-height:760px;align-content:end;gap:32px;padding-top:88px;padding-bottom:58px} .uw-hero-dynamic .uw-hero-content{align-self:end} .uw-hero-dynamic .uw-hero-content h1{font-size:clamp(46px,12vw,68px)} .uw-hero-story{justify-self:start;width:min(100%,430px);margin:0;padding:17px 18px 13px} .uw-hero-story>strong{min-height:0;font-size:20px} .uw-hero-story .uw-hero-controls{margin-top:15px} .uw-hero-dynamic .uw-scroll-cue{display:none} } @media(max-width:480px){ .uw-hero-dynamic .uw-hero-layout{min-height:780px;padding-top:70px;padding-bottom:32px} .uw-hero-dynamic .uw-actions{display:grid;grid-template-columns:1fr} .uw-hero-dynamic .uw-button{width:100%} .uw-hero-dynamic .uw-hero-trust{display:none} .uw-hero-story .uw-hero-dots button{width:11px}.uw-hero-story .uw-hero-dots button.active{width:24px} } /* ===== Approved landing-page concept match ===== */ body.landing .lp-nav,body.landing .lp-nav.scrolled{height:96px;border:0;background:transparent;box-shadow:none;transition:height .25s ease,background .25s ease,box-shadow .25s ease} body.landing .lp-nav{position:absolute;top:0} body.landing .lp-nav.scrolled{position:fixed;height:76px;background:rgba(3,47,38,.94);box-shadow:0 8px 28px rgba(0,0,0,.14)} body.landing .lp-nav-inner{width:min(100% - 72px,1540px);max-width:none;padding:0} body.landing .lp-brand{gap:13px;color:#fff} body.landing .lp-brand img{width:70px;height:70px;filter:brightness(0) invert(1);object-fit:contain} body.landing .lp-brand span{display:block;color:#fff;font-size:22px;font-weight:850;letter-spacing:.018em;white-space:nowrap} body.landing .lp-links{gap:clamp(25px,3.3vw,56px)} body.landing .lp-links a{color:rgba(255,255,255,.88);font-size:14px;font-weight:650;text-shadow:0 2px 14px rgba(0,0,0,.28)} body.landing .lp-links a:hover{color:#f2cd5f} body.landing .lp-nav-actions{gap:14px} body.landing .lp-nav-actions [data-theme-toggle]{display:none} body.landing .lp-nav-actions .lp-btn{min-height:48px;padding:0 22px;border-radius:7px;font-size:13px;font-weight:750} body.landing .lp-nav-login{border-color:rgba(255,255,255,.75);background:rgba(2,38,30,.16);color:#fff;backdrop-filter:blur(6px)} body.landing .lp-nav-actions .lp-btn-primary{border-color:#dcb33b!important;background:#dcb33b!important;color:#10261f!important;box-shadow:0 7px 18px rgba(0,0,0,.16)} body.landing .lp-nav-actions .lp-nav-mobile-login{display:none} @media(max-width:900px){body.landing .lp-nav-actions .lp-nav-join{display:none}body.landing .lp-nav-actions .lp-nav-mobile-login{display:inline-flex}} .uw-hero-dynamic{min-height:685px} .uw-hero-dynamic .uw-hero-layout{width:min(100% - 72px,1540px);min-height:685px;grid-template-columns:minmax(0,760px) minmax(360px,1fr);padding-top:124px;padding-bottom:60px} .uw-hero-dynamic .uw-hero-slide:after{background:linear-gradient(90deg,rgba(1,48,38,.98) 0%,rgba(2,53,42,.86) 31%,rgba(2,52,41,.43) 54%,rgba(2,35,28,.06) 80%),linear-gradient(0deg,rgba(1,25,20,.34),transparent 48%)} .uw-hero-dynamic .uw-hero-slide:first-child img{object-position:center 42%} .uw-hero-dynamic .uw-hero-content h1{max-width:760px;margin:20px 0 21px;font-size:clamp(58px,5.5vw,88px);line-height:.98;letter-spacing:-.043em} .uw-hero-dynamic .uw-hero-content h1 em{color:#fff} .uw-hero-dynamic .uw-hero-content h1 em:after{content:".";color:#e1b637} .uw-hero-dynamic .uw-hero-content>p{max-width:515px;font-size:17px;line-height:1.55} .uw-hero-dynamic .uw-eyebrow{color:#e5ba3c;font-size:11px;letter-spacing:.14em} .uw-hero-dynamic .uw-eyebrow span{display:none} .uw-hero-dynamic .uw-actions{margin-top:30px} .uw-hero-form-download{display:inline-flex;align-items:center;gap:9px;margin-top:17px;color:rgba(255,255,255,.8);font-size:11px;font-weight:700;text-decoration:underline;text-decoration-color:rgba(214,173,55,.65);text-underline-offset:4px;text-shadow:0 2px 12px rgba(0,0,0,.25)} .uw-hero-form-download span{display:grid;width:22px;height:22px;border:1px solid rgba(255,255,255,.36);border-radius:50%;place-items:center;color:#e5bb40;text-decoration:none} .uw-hero-form-download:hover{color:#fff} .uw-hero-dynamic .uw-button{min-height:52px;border-radius:6px;padding:0 24px;font-size:13px} .uw-hero-dynamic .uw-button-quiet{border-color:rgba(255,255,255,.72);background:rgba(1,38,30,.2)} .uw-hero-dynamic .uw-hero-trust{display:none} .uw-hero-story{align-self:end;width:min(100%,540px);margin-bottom:0;padding:21px 24px 17px;border:1px solid rgba(255,255,255,.64);border-radius:9px;background:rgba(10,34,28,.46);box-shadow:0 16px 45px rgba(0,0,0,.18)} .uw-hero-story>small{margin-bottom:6px;font-size:9px} .uw-hero-story>strong{min-height:0;font-family:Inter,system-ui;font-size:14px;font-weight:750} .uw-hero-story .uw-hero-controls{position:absolute;right:17px;bottom:12px;margin:0} .uw-hero-story .uw-hero-dots{order:2;margin-left:12px} .uw-hero-story .uw-hero-dots button{width:9px;height:9px;border:1px solid rgba(255,255,255,.85);background:transparent} .uw-hero-story .uw-hero-dots button.active{width:9px;background:#edbb35;box-shadow:0 0 0 3px rgba(237,187,53,.13)} .uw-hero-story .uw-hero-control-buttons{order:1} .uw-hero-story .uw-hero-control-buttons [data-hero-prev],.uw-hero-story .uw-hero-control-buttons [data-hero-next]{display:none} .uw-hero-story .uw-hero-control-buttons button{width:42px;height:42px;min-width:42px;padding:0;border-color:rgba(255,255,255,.72);background:rgba(5,28,23,.3);font-size:0} .uw-hero-story .uw-hero-control-buttons [data-hero-toggle]:after{content:"Ⅱ";font-size:14px;font-weight:800;letter-spacing:2px} .uw-hero-story .uw-hero-control-buttons [data-hero-toggle][aria-pressed="true"]:after{content:"▶";font-size:12px;letter-spacing:0} .uw-hero-story .uw-hero-progress{height:2px;border-radius:0 0 9px 9px;overflow:hidden} .uw-hero-dynamic .uw-scroll-cue{display:none} .uw-opportunity{padding:42px 0 48px;background:#f6f2e9;color:#153d31} .uw-opportunity .uw-container{width:min(1180px,calc(100% - 48px))} .uw-opportunity h2{margin:0;text-align:center;font-family:Georgia,serif;font-size:27px;font-weight:600;letter-spacing:-.02em} .uw-opportunity-rule{display:block;width:43px;height:2px;margin:18px auto 24px;background:#d7ad32} .uw-opportunity-grid{display:grid;grid-template-columns:repeat(3,1fr)} .uw-opportunity-grid article{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:20px;padding:0 30px;border-right:1px solid #d8d2c7} .uw-opportunity-grid article:first-child{padding-left:0}.uw-opportunity-grid article:last-child{padding-right:0;border:0} .uw-opportunity-icon{display:grid;width:72px;height:72px;border-radius:50%;background:#064b3c;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .uw-opportunity-icon span{display:grid;width:43px;height:43px;border:2px solid #d8ad31;border-radius:50%;place-items:center;color:#e3ba40;font-size:10px;font-weight:850;letter-spacing:-.03em} .uw-opportunity-grid article:nth-child(2) .uw-opportunity-icon span{font-family:Georgia,serif;font-size:23px}.uw-opportunity-grid article:nth-child(3) .uw-opportunity-icon span{font-size:18px} .uw-opportunity h3{margin:0 0 6px;font-family:Georgia,serif;font-size:16px;font-weight:700} .uw-opportunity p{margin:0;color:#3f504a;font-size:12px;line-height:1.55} .uw-section-download{display:inline-flex;align-items:center;gap:8px;margin-top:15px;color:#075043;font-size:12px;font-weight:800;text-decoration:underline;text-decoration-color:#d6ad37;text-underline-offset:4px} .uw-section-download span{display:grid;width:25px;height:25px;border-radius:50%;background:#075043;place-items:center;color:#f2ca56;text-decoration:none} .uw-loan-form-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.uw-loan-form-links a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.28);border-radius:5px;color:#e6f0ec;font-size:10px;font-weight:800}.uw-loan-form-links a:hover{border-color:#e1b637;background:rgba(255,255,255,.06);color:#fff}.uw-loan-form-links span{color:#e4bb42;font-size:13px} .uw-downloads{padding:92px 0;background:#eef3ef}.uw-downloads-heading{display:grid;grid-template-columns:1fr 440px;gap:80px;align-items:end}.uw-downloads h2{max-width:680px;margin:14px 0 0;font-family:Georgia,serif;font-size:clamp(34px,4.3vw,54px);font-weight:400;line-height:1.08;letter-spacing:-.035em}.uw-downloads-heading>p{margin:0;color:#587169;font-size:14px;line-height:1.75}.uw-download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:42px}.uw-download-card{position:relative;display:grid;grid-template-columns:54px 1fr auto;align-items:start;gap:16px;min-height:178px;padding:26px;border:1px solid #d5dfd8;border-radius:10px;background:#fff;color:#16392e;box-shadow:0 7px 24px rgba(8,60,47,.04);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.uw-download-card:hover{border-color:#ad8c2e;box-shadow:0 15px 36px rgba(8,60,47,.1);transform:translateY(-3px)}.uw-download-icon{display:grid;width:50px;height:50px;border-radius:50%;background:#074b3d;place-items:center;color:#e0b73d;font-family:Georgia,serif;font-size:15px}.uw-download-card>span:nth-child(2){display:flex;min-width:0;flex-direction:column}.uw-download-card small{color:#9a7921;font-size:9px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.uw-download-card strong{margin:9px 0 8px;font-family:Georgia,serif;font-size:21px;font-weight:600}.uw-download-card em{color:#60756c;font-size:11px;font-style:normal;line-height:1.55}.uw-download-card b{color:#075043;font-size:10px}.uw-download-note{margin:23px 0 0;color:#5d7169;font-size:11px;text-align:center}.uw-download-note a{color:#075043;font-weight:800;text-decoration:underline;text-decoration-color:#d6ad37;text-underline-offset:3px} .uw-application-download{display:inline-flex;min-height:42px;align-items:center;gap:7px;padding:0 14px;border:1px solid #b9c9c1;border-radius:6px;color:#075043;font-size:11px;font-weight:800} .uw-application-download:hover{border-color:#075043;background:#edf4f0} .uw-application-form-option{position:relative;display:flex;max-width:520px;flex-direction:column;gap:2px;margin-top:19px;padding:13px 76px 13px 15px;border:1px solid #d7e1db;border-left:3px solid #d6ad37;border-radius:6px;background:#f6f8f6;color:#244138} .uw-application-form-option b{font-size:11px}.uw-application-form-option span{color:#687a72;font-size:10px;line-height:1.45}.uw-application-form-option i{position:absolute;top:50%;right:14px;color:#075043;font-size:10px;font-style:normal;font-weight:850;transform:translateY(-50%)} @media(max-width:1050px){ body.landing .lp-nav-inner{width:min(100% - 36px,1540px)} body.landing .lp-brand span{font-size:17px} body.landing .lp-links{gap:18px} .uw-hero-dynamic .uw-hero-layout{width:min(100% - 40px,1540px);grid-template-columns:minmax(0,1fr) minmax(280px,.7fr)} .uw-opportunity-grid article{grid-template-columns:1fr;text-align:center}.uw-opportunity-icon{margin:0 auto} .uw-downloads-heading{grid-template-columns:1fr 360px;gap:45px}.uw-download-grid{grid-template-columns:1fr 1fr}.uw-download-card:last-child{grid-column:1/-1} } @media(max-width:900px){ body.landing .lp-nav,body.landing .lp-nav.scrolled{height:72px;background:rgba(3,47,38,.94)} body.landing .lp-brand img{width:48px;height:48px} body.landing .lp-brand span{font-size:16px} body.landing .lp-links{top:65px;background:#fff;border:1px solid #d6e0da} body.landing .lp-links a{color:#16392e;text-shadow:none} body.landing .lp-links a:hover{color:#064e3b;background:#eef6f2} .uw-hero-dynamic .uw-hero-layout{grid-template-columns:1fr;min-height:760px;align-content:end;padding-top:105px;padding-bottom:38px} .uw-hero-story{justify-self:start;width:min(100%,520px)} .uw-downloads-heading{grid-template-columns:1fr;gap:22px} } @media(max-width:620px){.uw-downloads{padding:68px 0}.uw-download-grid{grid-template-columns:1fr}.uw-download-card:last-child{grid-column:auto}.uw-download-card{min-height:0;padding:21px;grid-template-columns:46px 1fr}.uw-download-card>span:nth-child(2){padding-right:0}.uw-download-card>b{grid-column:2}.uw-download-icon{width:43px;height:43px}.m-page-actions{width:100%}.m-page-actions .m-btn{flex:1;white-space:nowrap}} @media(max-width:680px){ body.landing .lp-nav-inner{width:calc(100% - 28px)} body.landing .lp-brand span{display:none} body.landing .lp-nav-actions .lp-btn-primary{min-height:42px;padding:0 13px;font-size:11px} .uw-hero-dynamic .uw-hero-layout{width:calc(100% - 28px);min-height:780px} .uw-hero-dynamic .uw-hero-slide:first-child img{object-position:58% center} .uw-hero-dynamic .uw-hero-slide:after{background:linear-gradient(90deg,rgba(1,42,33,.91),rgba(2,45,36,.45)),linear-gradient(0deg,rgba(1,28,22,.86),transparent 65%)} .uw-hero-dynamic .uw-hero-content h1{font-size:clamp(48px,14vw,66px)} .uw-hero-story{padding-right:128px} .uw-opportunity{padding:38px 0}.uw-opportunity h2{font-size:24px}.uw-opportunity-grid{grid-template-columns:1fr;gap:0}.uw-opportunity-grid article{grid-template-columns:64px 1fr;padding:22px 0;border-right:0;border-bottom:1px solid #d8d2c7;text-align:left}.uw-opportunity-grid article:last-child{border:0}.uw-opportunity-icon{width:58px;height:58px;margin:0}.uw-opportunity-icon span{width:35px;height:35px;font-size:8px}.uw-opportunity-grid article:nth-child(2) .uw-opportunity-icon span{font-size:18px} .uw-application-download{display:none} } /* ===== App-wide UX refresh — August 2026 ===== */ body.portal-premium{ --portal-line:color-mix(in srgb,var(--border) 82%,transparent); --portal-soft:color-mix(in srgb,var(--admin-brand) 4%,var(--panel)); --portal-hover:color-mix(in srgb,var(--admin-brand) 6%,var(--panel)); background: radial-gradient(900px 360px at 50% -120px,color-mix(in srgb,var(--admin-brand) 9%,transparent),transparent 72%), var(--bg); } body.portal-premium .content{padding-block:clamp(18px,2.4vw,34px)} body.portal-premium .admin-content, body.portal-premium .sa-content, body.portal-premium .member-content{width:min(100%,1680px);margin-inline:auto} body.portal-premium .page-title{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.035em} body.portal-premium .page-subtitle{max-width:72ch;font-size:13px;line-height:1.65} body.portal-premium .card{ border-color:var(--portal-line); border-radius:18px; box-shadow:0 1px 2px rgba(15,61,48,.025),0 10px 32px rgba(15,61,48,.045); } body.portal-premium .card:hover{border-color:color-mix(in srgb,var(--admin-brand) 16%,var(--border));box-shadow:0 16px 42px rgba(15,61,48,.075)} body.portal-premium .card-header{min-height:62px;padding:17px clamp(17px,2vw,24px)} body.portal-premium .card-body{padding:clamp(17px,2vw,24px)} body.portal-premium .section-title{letter-spacing:-.018em} /* Forms: clearer grouping, predictable controls and stronger validation states. */ body.portal-premium label{font-weight:700;letter-spacing:-.005em} body.portal-premium input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), body.portal-premium select, body.portal-premium textarea{ min-height:44px; border-color:color-mix(in srgb,var(--border) 94%,var(--text)); border-radius:10px; background:var(--panel); color:var(--text); transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; } body.portal-premium textarea{min-height:108px;resize:vertical} body.portal-premium input:not([type="checkbox"]):not([type="radio"]):focus, body.portal-premium select:focus, body.portal-premium textarea:focus{ border-color:var(--admin-brand); outline:0; box-shadow:0 0 0 3px color-mix(in srgb,var(--admin-brand) 15%,transparent); } body.portal-premium :is(input,select,textarea):disabled{cursor:not-allowed;opacity:.66;background:var(--panel-2)} body.portal-premium :is(input,select,textarea):user-invalid{border-color:var(--danger)} /* Tables: preserve context on long lists and expose horizontal overflow. */ body.portal-premium .table-wrap{ position:relative; max-width:100%; border-radius:12px; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--admin-brand) 32%,transparent) transparent; } body.portal-premium .table-wrap:focus-visible{outline:3px solid var(--ring);outline-offset:3px} body.portal-premium .table thead th{position:sticky;top:0;z-index:2;background:var(--panel-2);box-shadow:inset 0 -1px var(--border)} body.portal-premium .table tbody tr{transition:background .14s ease} body.portal-premium .table tbody tr:hover{background:var(--portal-hover)} body.portal-premium .table td,body.portal-premium .table th{vertical-align:middle} body.portal-premium .table :is(td,th):first-child{padding-left:clamp(14px,1.7vw,22px)} body.portal-premium .table :is(td,th):last-child{padding-right:clamp(14px,1.7vw,22px)} /* Consistent interactive feedback and accessible focus across every portal role. */ body.portal-premium :is(a,button,input,select,textarea,summary):focus-visible{ outline:3px solid var(--ring); outline-offset:2px; } body.portal-premium .btn{min-height:42px;border-radius:10px} body.portal-premium .btn-sm{min-height:36px} body.portal-premium .btn-icon{min-width:38px;min-height:38px} body.portal-premium .pill{min-height:24px;padding-inline:10px;font-weight:700} body.portal-premium .empty{padding:clamp(30px,5vw,56px) 20px;background:var(--portal-soft)} /* Normalize legacy member dashboard colors so the shared dark theme is complete. */ html[data-theme="dark"] body.portal-premium :is(.m-dash-card,.m-dash-chart-section,.m-dash-transactions,.m-dash-quick-actions,.m-dash-support,.m-dash-totals,.m-dash-total-item,.m-dash-header){background:var(--panel);border-color:var(--border);color:var(--text)} html[data-theme="dark"] body.portal-premium :is(.m-dash-welcome,.m-dash-section-title,.m-dash-card-amount,.m-dash-empty h3){color:var(--text)} html[data-theme="dark"] body.portal-premium :is(.m-dash-subtitle,.m-dash-card-title,.m-dash-card-meta,.m-dash-section-sub,.m-dash-support-text,.m-dash-table td,.m-dash-empty p){color:var(--muted)} html[data-theme="dark"] body.portal-premium .m-dash-table th{background:var(--panel-2);border-color:var(--border);color:var(--muted)} html[data-theme="dark"] body.portal-premium .m-dash-table td{border-color:var(--border)} html[data-theme="dark"] body.portal-premium .m-dash-table tr:hover td{background:var(--portal-hover)} html[data-theme="dark"] body.portal-premium .m-dash-action-item{background:var(--panel-2);color:var(--text)} @media(max-width:760px){ body.portal-premium .content{padding-top:14px} body.portal-premium .container{padding-inline:14px} body.portal-premium .card{border-radius:14px} body.portal-premium .card-header{align-items:flex-start;flex-direction:column} body.portal-premium .header-actions{width:100%;justify-content:flex-start} body.portal-premium .header-actions>.btn{flex:1 1 auto} body.portal-premium input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), body.portal-premium select,body.portal-premium textarea{font-size:16px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } @media(prefers-contrast:more){ :root{--border:#9bada4;--muted:#40574e} body.portal-premium .card,body.portal-premium .table-wrap{box-shadow:none} } /* ===== Unified button system — all application surfaces ===== */ :root{ --button-radius:10px; --button-height:42px; --button-height-sm:36px; --button-height-lg:50px; --button-shadow:0 2px 5px rgba(5,68,52,.14),0 1px 2px rgba(5,68,52,.1); --button-shadow-hover:0 8px 20px rgba(5,68,52,.19),0 2px 5px rgba(5,68,52,.1); } :is(.btn,.admin-btn,.admin-queue-btn,.m-btn,.m-btn-sm,.m-dash-btn,.m-dash-support-btn,.lp-btn,.lp-role-btn,.auth-submit,.auth-back-btn,.uw-button,.member-topnav-signout,.sa-topnav-signout){ min-height:var(--button-height); align-items:center; justify-content:center; gap:8px; border-radius:var(--button-radius); font-family:Inter,system-ui,-apple-system,sans-serif; font-size:13px; font-weight:750; line-height:1.15; letter-spacing:0; text-align:center; text-decoration:none; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; transition:transform .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,filter .16s ease; } :is(.btn,.admin-btn,.m-btn,.m-dash-btn,.m-dash-support-btn,.lp-btn,.lp-role-btn,.auth-submit,.auth-back-btn,.uw-button,.member-topnav-signout,.sa-topnav-signout):hover{ transform:translateY(-1px); } :is(.btn,.admin-btn,.admin-queue-btn,.m-btn,.m-btn-sm,.m-dash-btn,.m-dash-support-btn,.lp-btn,.lp-role-btn,.auth-submit,.auth-back-btn,.uw-button,.member-topnav-signout,.sa-topnav-signout):active{ transform:translateY(0) scale(.985); box-shadow:none; } :is(.btn,.admin-btn,.admin-queue-btn,.m-btn,.m-btn-sm,.m-dash-btn,.m-dash-support-btn,.lp-btn,.lp-role-btn,.auth-submit,.auth-back-btn,.uw-button,.member-topnav-signout,.sa-topnav-signout):focus-visible{ outline:3px solid color-mix(in srgb,var(--admin-accent) 70%,white); outline-offset:3px; } :is(.btn,.admin-btn,.admin-queue-btn,.m-btn,.m-btn-sm,.m-dash-btn,.m-dash-support-btn,.lp-btn,.lp-role-btn,.auth-submit,.auth-back-btn,.uw-button):is(:disabled,.disabled,[aria-disabled="true"]){ cursor:not-allowed; opacity:.48; filter:saturate(.55); pointer-events:none; transform:none; box-shadow:none; } /* Shared dimensions */ :is(.btn-sm,.admin-queue-btn,.m-btn-sm,.lp-btn-sm){min-height:var(--button-height-sm);padding:0 14px;border-radius:9px;font-size:12px} .btn-xs{min-height:30px;padding:0 10px;border-radius:8px;font-size:11px} :is(.btn-lg,.lp-btn-lg){min-height:var(--button-height-lg);padding:0 24px;border-radius:12px;font-size:14px} .btn-xl{min-height:56px;padding:0 30px;border-radius:13px;font-size:15px} /* Primary, success and premium actions */ :is(.btn,.btn-primary,.admin-btn-primary,.admin-queue-btn.primary,.m-btn.green,.green-btn,.auth-submit){ border:1px solid color-mix(in srgb,var(--admin-brand) 82%,#000); background:linear-gradient(180deg,color-mix(in srgb,var(--admin-brand) 90%,#fff),var(--admin-brand)); color:#fff; box-shadow:var(--button-shadow); } :is(.btn,.btn-primary,.admin-btn-primary,.admin-queue-btn.primary,.m-btn.green,.green-btn,.auth-submit):hover{ border-color:var(--admin-brand-dark); background:linear-gradient(180deg,var(--admin-brand-dark),color-mix(in srgb,var(--admin-brand-dark) 88%,#000)); color:#fff; box-shadow:var(--button-shadow-hover); } :is(.btn-gold,.admin-btn-gold,.m-btn.gold,.gold-btn,.m-dash-support-btn.primary,.lp-btn-primary,.uw-button-gold){ border:1px solid #b78d15!important; background:linear-gradient(180deg,#f1d36e 0%,#d4af37 100%)!important; color:#183028!important; text-shadow:0 1px rgba(255,255,255,.3); box-shadow:0 2px 5px rgba(155,117,12,.18),0 1px 2px rgba(155,117,12,.12)!important; } :is(.btn-gold,.admin-btn-gold,.m-btn.gold,.gold-btn,.m-dash-support-btn.primary,.lp-btn-primary,.uw-button-gold):hover{ border-color:#9d7710!important; background:linear-gradient(180deg,#f5dc82 0%,#c99f27 100%)!important; filter:none; box-shadow:0 8px 20px rgba(155,117,12,.24),0 2px 5px rgba(155,117,12,.13)!important; } /* Secondary and legacy Bootstrap-outline variants */ :is(.btn-outline,.admin-btn-outline,.admin-queue-btn.ghost,.m-btn.outline,.m-btn-sm.outline,.outline-btn,.m-dash-support-btn.outline,.lp-btn-outline,.auth-back-btn, .btn-outline-primary,.btn-outline-secondary,.btn-outline-dark,.btn-outline-light){ border:1px solid color-mix(in srgb,var(--admin-brand) 25%,var(--border)); background:var(--panel); color:var(--admin-brand); box-shadow:0 1px 2px rgba(15,61,48,.035); } :is(.btn-outline,.admin-btn-outline,.admin-queue-btn.ghost,.m-btn.outline,.m-btn-sm.outline,.outline-btn,.m-dash-support-btn.outline,.lp-btn-outline,.auth-back-btn, .btn-outline-primary,.btn-outline-secondary,.btn-outline-dark,.btn-outline-light):hover{ border-color:color-mix(in srgb,var(--admin-brand) 58%,var(--border)); background:color-mix(in srgb,var(--admin-brand) 7%,var(--panel)); color:var(--admin-brand); box-shadow:0 5px 14px rgba(15,61,48,.09); } /* Semantic states used throughout reports and accounting. */ :is(.btn-success,.btn-outline-success){border-color:color-mix(in srgb,var(--success) 55%,var(--border));color:var(--success)} .btn-success{background:var(--success);color:#fff;box-shadow:0 2px 5px rgba(25,135,84,.16)} .btn-outline-success{background:color-mix(in srgb,var(--success) 5%,var(--panel))} :is(.btn-success,.btn-outline-success):hover{border-color:var(--success);background:var(--success);color:#fff} :is(.btn-danger,.admin-btn-danger,.admin-queue-btn.danger,.btn-outline-danger){border-color:color-mix(in srgb,var(--danger) 60%,var(--border));color:var(--danger)} :is(.btn-danger,.admin-btn-danger){background:linear-gradient(180deg,color-mix(in srgb,var(--danger) 88%,#fff),var(--danger));color:#fff;box-shadow:0 2px 5px rgba(196,61,66,.17)} :is(.btn-outline-danger,.admin-queue-btn.danger){background:color-mix(in srgb,var(--danger) 5%,var(--panel))} :is(.btn-danger,.admin-btn-danger,.admin-queue-btn.danger,.btn-outline-danger):hover{border-color:var(--danger);background:var(--danger);color:#fff;box-shadow:0 7px 17px rgba(196,61,66,.2)} .btn-outline-warning{border-color:color-mix(in srgb,var(--warning) 60%,var(--border));background:color-mix(in srgb,var(--warning) 6%,var(--panel));color:var(--warning)} .btn-outline-warning:hover{border-color:var(--warning);background:var(--warning);color:#fff} /* Quiet/link actions should feel deliberate without looking like filled buttons. */ :is(.btn-ghost,.btn-link,.auth-theme-btn){box-shadow:none} .btn-link{min-height:auto;padding:3px 2px;border-radius:4px;background:transparent;color:var(--admin-brand)} .btn-link:hover{background:transparent;box-shadow:none;transform:none;text-decoration:underline;text-underline-offset:3px} /* Icon-only actions share one accessible hit area and circular visual language. */ :is(.btn-icon,.modal-close,.auth-password-toggle,.sa-topnav-theme,.notif-bell){ width:40px; min-width:40px; height:40px; min-height:40px; padding:0; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; transition:transform .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease; } :is(.btn-icon,.modal-close,.auth-password-toggle,.sa-topnav-theme,.notif-bell):hover{transform:translateY(-1px)} :is(.btn-icon,.modal-close,.auth-password-toggle,.sa-topnav-theme,.notif-bell):active{transform:scale(.94)} :is(.btn-icon,.modal-close,.auth-password-toggle,.sa-topnav-theme,.notif-bell):focus-visible{outline:3px solid color-mix(in srgb,var(--admin-accent) 70%,white);outline-offset:3px} /* Public-site buttons keep their premium character while matching the system. */ :is(.lp-btn,.uw-button){min-height:var(--button-height-lg);padding:0 22px;border-radius:var(--button-radius)} .uw-button-quiet{border-color:rgba(255,255,255,.55);background:rgba(3,39,31,.28);color:#fff;backdrop-filter:blur(9px)} .uw-button-quiet:hover{border-color:#f1d36e;background:rgba(3,39,31,.58);color:#fff} .lp-role-btn{min-height:var(--button-height);margin-top:16px;padding:0 17px} /* Make accidental unclassed portal buttons match the secondary system. */ body.portal-premium button:not([class]){ min-height:var(--button-height); padding:0 17px; border:1px solid color-mix(in srgb,var(--admin-brand) 25%,var(--border)); border-radius:var(--button-radius); background:var(--panel); color:var(--admin-brand); font:750 13px/1.15 Inter,system-ui,sans-serif; cursor:pointer; } @media(max-width:620px){ :is(.btn,.admin-btn,.m-btn,.m-dash-btn,.m-dash-support-btn,.lp-btn,.uw-button,.auth-submit,.auth-back-btn){min-height:46px} :is(.btn-sm,.admin-queue-btn,.m-btn-sm,.lp-btn-sm){min-height:38px} .table-actions :is(.btn,.admin-btn,.admin-queue-btn){min-height:36px;padding-inline:12px} } /* Savings command bar */ body.portal-premium .savings-command-card{ position:relative; overflow:hidden; border-color:color-mix(in srgb,var(--admin-brand) 14%,var(--border)); background: radial-gradient(circle at 96% 0%,color-mix(in srgb,var(--admin-accent) 10%,transparent),transparent 29%), linear-gradient(135deg,color-mix(in srgb,var(--panel) 96%,var(--admin-brand) 4%),var(--panel) 55%); box-shadow:0 16px 40px rgba(11,57,45,.07),0 2px 8px rgba(11,57,45,.04); } body.portal-premium .savings-command-card:hover{box-shadow:0 18px 44px rgba(11,57,45,.09),0 2px 8px rgba(11,57,45,.04)} body.portal-premium .savings-command-header{ min-height:132px; padding:24px 26px; align-items:center; gap:30px; border-bottom:0; } .savings-command-title{flex:0 1 410px;padding-left:14px;border-left:3px solid var(--admin-accent)} .savings-command-eyebrow{color:var(--admin-brand);font-size:10px;font-weight:850;letter-spacing:.14em;text-transform:uppercase} .savings-command-title .page-title{font-size:clamp(28px,2.4vw,36px);letter-spacing:-.045em} .savings-command-title .page-subtitle{max-width:390px;font-size:13px;line-height:1.55} .savings-command-actions{display:flex;flex:1 1 680px;min-width:0;flex-direction:column;align-items:flex-end;gap:13px} .savings-command-primary{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px} body.portal-premium .savings-command-primary .btn{min-height:44px;padding-inline:17px;border-radius:11px;font-size:12px} body.portal-premium .savings-command-primary .savings-primary-action{padding-inline:19px} .savings-action-icon{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:rgba(24,48,40,.11);font-size:17px;font-weight:500;line-height:1} .savings-pending-action{gap:10px!important} .savings-count{display:inline-grid;min-width:24px;height:24px;padding:0 7px;place-items:center;border:1px solid color-mix(in srgb,var(--admin-brand) 15%,var(--border));border-radius:999px;background:var(--panel-2);color:var(--muted);font-size:11px;font-weight:850} .savings-export-group{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--panel) 88%,transparent);box-shadow:0 1px 3px rgba(11,57,45,.035)} .savings-export-label{padding:0 9px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .savings-export-link{display:inline-flex;min-height:31px;align-items:center;gap:5px;padding:0 11px;border-radius:8px;color:var(--admin-brand);font-size:11px;font-weight:850;text-decoration:none;transition:background .16s ease,color .16s ease,transform .16s ease} .savings-export-link:hover{background:color-mix(in srgb,var(--admin-brand) 8%,var(--panel));transform:translateY(-1px)} .savings-export-link:focus-visible{outline:3px solid var(--ring);outline-offset:2px} @media(max-width:1180px){ body.portal-premium .savings-command-header{align-items:flex-start;flex-direction:column} .savings-command-title{flex-basis:auto} .savings-command-actions{width:100%;flex-basis:auto;align-items:flex-start} .savings-command-primary{justify-content:flex-start} } @media(max-width:620px){ body.portal-premium .savings-command-header{padding:20px 17px;gap:22px} .savings-command-title{padding-left:11px} .savings-command-primary{display:grid;width:100%;grid-template-columns:1fr} body.portal-premium .savings-command-primary .btn{width:100%;justify-content:center} .savings-export-group{width:100%;justify-content:flex-end} .savings-export-label{margin-right:auto} } /* Keep every portal function discoverable on tablets and phones. This comes last so older responsive rules cannot hide the all-functions menus. */ @media(min-width:821px) and (max-width:1100px){ .portal-premium .member-topnav-inner{position:relative;justify-content:flex-start} .portal-premium .member-topnav-hamburger{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;flex:0 0 40px;padding:0;border:1px solid #c9d8d1;border-radius:10px;background:#f3f7f4;color:#075043;cursor:pointer} .portal-premium .member-topnav-links{display:none;position:absolute;top:calc(100% + 1px);right:0;left:0;max-height:calc(100dvh - 124px);padding:10px 18px 14px;overflow-y:auto;flex-direction:column;align-items:stretch;gap:4px;border-bottom:1px solid #d9e5de;background:#fff;box-shadow:0 18px 28px rgba(15,61,48,.14);z-index:1001} .portal-premium .member-topnav-links.open{display:flex} .portal-premium .member-topnav-link,.portal-premium .member-topnav-mobile-signout{display:flex;min-height:46px;align-items:center;width:100%;padding:0 14px;border-radius:9px;font-size:14px;text-decoration:none} .portal-premium .member-topnav-link{color:#173d31} .portal-premium .member-topnav-link.active{background:#e7f1ec;color:#075043} .portal-premium .member-topnav-mobile-signout{display:flex;margin-top:4px;border:1px solid #f0c9c9;background:#fff7f7;color:#a42d2d;font-weight:750} } @media(max-width:820px){ .portal-premium .sa-topnav,.portal-premium .member-topnav{position:sticky;overflow:visible} .portal-premium .sa-topnav-inner,.portal-premium .member-topnav-inner{position:relative;justify-content:flex-start} .portal-premium .sa-topnav-hamburger,.portal-premium .member-topnav-hamburger{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;flex:0 0 40px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer} .portal-premium .member-topnav-hamburger{border-color:#c9d8d1;background:#f3f7f4;color:#075043} .portal-premium .sa-topnav-links,.portal-premium .member-topnav-links{display:none;position:absolute;top:calc(100% + 1px);right:0;left:0;max-height:calc(100dvh - 124px);padding:10px 14px 14px;overflow-y:auto;flex-direction:column;align-items:stretch;gap:4px;border-bottom:1px solid rgba(255,255,255,.16);background:#075043;box-shadow:0 18px 28px rgba(3,49,39,.22);z-index:1001} .portal-premium .member-topnav-links{border-color:#d9e5de;background:#fff;box-shadow:0 18px 28px rgba(15,61,48,.14)} .portal-premium .sa-topnav-links.open,.portal-premium .member-topnav-links.open{display:flex} .portal-premium .sa-topnav-link,.portal-premium .member-topnav-link,.portal-premium .member-topnav-mobile-signout{display:flex;min-height:46px;align-items:center;width:100%;padding:0 14px;border-radius:9px;font-size:14px;text-decoration:none} .portal-premium .sa-topnav-link{color:#fff} .portal-premium .sa-topnav-link.active{border-bottom:0;background:rgba(255,255,255,.16)} .portal-premium .member-topnav-link{color:#173d31} .portal-premium .member-topnav-link.active{background:#e7f1ec;color:#075043} .portal-premium .member-topnav-mobile-signout{display:flex;margin-top:4px;border:1px solid #f0c9c9;background:#fff7f7;color:#a42d2d;font-weight:750} .portal-premium .sa-topnav-dropdown{width:100%} .portal-premium .sa-topnav-dropdown-toggle{justify-content:space-between;width:100%;min-height:46px;padding:0 14px;color:#fff} .portal-premium .sa-topnav-dropdown-menu{display:none;position:static;min-width:0;margin:2px 0 2px 12px;padding:4px;border-color:rgba(255,255,255,.2);background:#fff;box-shadow:none;opacity:1;visibility:visible;transform:none} .portal-premium .sa-topnav-dropdown.open .sa-topnav-dropdown-menu{display:block} .portal-premium .sa-topnav-dropdown-item{min-height:42px;color:#173d31} } @media(max-width:620px){ .portal-premium .sa-topnav-search,.portal-premium .member-topnav-search{display:none} .portal-premium .sa-topnav-right,.portal-premium .member-topnav-right{margin-left:auto} .portal-premium .member-topnav-signout,.portal-premium .sa-topnav-brand-text{display:none} } /* Admin navigation drawer: desktop navigation uses full-height dropdowns, but those dimensions must never leak into the compact hamburger menu. */ @media(max-width:1100px){ .portal-premium .admin-topnav{position:sticky;overflow:visible;z-index:1100} .portal-premium .admin-topnav-inner{position:relative} .portal-premium .admin-topnav-links.open{ display:flex!important; /* The desktop nav is a stretched grid item. Reset that behaviour here so the compact drawer ends after its last menu group. */ align-self:start!important; height:auto!important; block-size:max-content!important; min-height:0!important; max-height:min(72dvh,640px)!important; padding:10px 12px 14px!important; gap:4px!important; align-content:flex-start!important; justify-content:flex-start!important; overflow-y:auto!important; } .portal-premium .admin-topnav-links.open>.admin-topnav-link, .portal-premium .admin-topnav-links.open>.admin-topnav-dropdown{ align-self:stretch!important; height:auto!important; block-size:auto!important; min-height:0!important; flex:0 0 auto!important; } .portal-premium .admin-topnav-links.open .admin-topnav-link, .portal-premium .admin-topnav-links.open .admin-topnav-dropdown-toggle{ display:flex!important; min-height:46px!important; height:46px!important; color:#fff!important; font-size:14px!important; font-weight:700!important; } .portal-premium .admin-topnav-links.open .admin-topnav-link-icon, .portal-premium .admin-topnav-links.open .admin-topnav-link-icon svg, .portal-premium .admin-topnav-links.open .admin-topnav-chevron{ color:rgba(255,255,255,.88)!important; opacity:1!important; } .portal-premium .admin-topnav-links.open .admin-topnav-link.active, .portal-premium .admin-topnav-links.open .admin-topnav-dropdown-toggle.active{ background:rgba(255,255,255,.13)!important; color:#fff!important; } .portal-premium .admin-topnav-links.open .admin-topnav-link:not(.active), .portal-premium .admin-topnav-links.open .admin-topnav-dropdown-toggle:not(.active){ color:rgba(255,255,255,.94)!important; } .portal-premium .admin-topnav-links.open .admin-topnav-dropdown-menu{ /* Hidden mobile submenus must not reserve space in the drawer. */ display:none!important; height:auto!important; min-height:0!important; overflow:visible!important; } .portal-premium .admin-topnav-links.open .admin-topnav-dropdown.open .admin-topnav-dropdown-menu{ display:block!important; opacity:1!important; visibility:visible!important; transform:none!important; } .portal-premium .admin-topnav-links.open .admin-topnav-dropdown-item{ display:flex!important; min-height:42px!important; align-items:center!important; color:rgba(255,255,255,.94)!important; font-size:13px!important; font-weight:650!important; } .portal-premium .sa-topnav-links.open{ display:flex!important; align-self:start!important; height:auto!important; block-size:max-content!important; min-height:0!important; max-height:min(72dvh,640px)!important; padding:10px 12px 14px!important; gap:4px!important; align-content:flex-start!important; justify-content:flex-start!important; overflow-y:auto!important; } .portal-premium .sa-topnav-links.open>.sa-topnav-link, .portal-premium .sa-topnav-links.open>.sa-topnav-dropdown{ align-self:stretch!important; height:auto!important; block-size:auto!important; min-height:0!important; flex:0 0 auto!important; } .portal-premium .sa-topnav-links.open .sa-topnav-link, .portal-premium .sa-topnav-links.open .sa-topnav-dropdown-toggle{ display:flex!important; min-height:46px!important; height:46px!important; color:rgba(255,255,255,.94)!important; font-size:14px!important; font-weight:700!important; } .portal-premium .sa-topnav-links.open .sa-topnav-link.active, .portal-premium .sa-topnav-links.open .sa-topnav-dropdown-toggle.active{ background:rgba(255,255,255,.13)!important; color:#fff!important; } .portal-premium .sa-topnav-links.open .sa-topnav-dropdown-toggle svg{ color:rgba(255,255,255,.88)!important; opacity:1!important; } .portal-premium .sa-topnav-links.open .sa-topnav-dropdown-menu{ display:none!important; height:auto!important; min-height:0!important; overflow:visible!important; } .portal-premium .sa-topnav-links.open .sa-topnav-dropdown.open .sa-topnav-dropdown-menu{ display:block!important; opacity:1!important; visibility:visible!important; transform:none!important; } .portal-premium .sa-topnav-links.open .sa-topnav-dropdown-item{ display:flex!important; min-height:42px!important; align-items:center!important; color:rgba(255,255,255,.94)!important; font-size:13px!important; font-weight:650!important; } } /* Impersonation confirmation: intentionally tuned layouts for desktop, tablet and phone screens. These rules sit last so unrelated modal breakpoints cannot change the approved composition. */ @media (min-width:1000px){ .modal-overlay[data-confirm-tone="impersonate"]{padding:32px} .modal-overlay[data-confirm-tone="impersonate"] .confirm-modal{width:min(810px,100%)} } @media (min-width:651px) and (max-width:999px){ .modal-overlay[data-confirm-tone="impersonate"]{padding:24px} .modal-overlay[data-confirm-tone="impersonate"] .confirm-modal{width:min(700px,100%)} .modal-overlay[data-confirm-tone="impersonate"] .confirm-modal .modal-header{padding-inline:32px} .modal-overlay[data-confirm-tone="impersonate"] .modal-body{padding-inline:32px} .modal-overlay[data-confirm-tone="impersonate"] .modal-footer{padding-inline:32px} } @media (max-width:650px){ .modal-overlay[data-confirm-tone="impersonate"]{align-items:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))} .modal-overlay[data-confirm-tone="impersonate"] .confirm-modal{width:100%;max-height:calc(100dvh - 24px);border-radius:16px} .modal-overlay[data-confirm-tone="impersonate"] .modal-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px;min-height:0} .modal-overlay[data-confirm-tone="impersonate"] .modal-footer .btn{width:100%;min-width:0;min-height:52px;font-size:15px} .modal-overlay[data-confirm-tone="impersonate"] .confirm-security-note{line-height:1.4} } @media (max-width:420px){ .modal-overlay[data-confirm-tone="impersonate"] .modal-title{font-size:23px} .modal-overlay[data-confirm-tone="impersonate"] .modal-footer{grid-template-columns:1fr;gap:8px} .modal-overlay[data-confirm-tone="impersonate"] .modal-footer .btn{min-height:48px} .modal-overlay[data-confirm-tone="impersonate"] .confirm-security-note{align-items:flex-start} } /* Keep the account-switch confirmation proportionate to the standard dialog. */ .modal-overlay[data-confirm-tone="impersonate"]{padding:20px} .modal-overlay[data-confirm-tone="impersonate"] .confirm-modal{width:min(500px,100%);max-width:500px;border-radius:18px;box-shadow:0 24px 52px rgba(8,30,24,.22)} .modal-overlay[data-confirm-tone="impersonate"] .modal-header{min-height:0;padding:20px 22px 14px;border-bottom:0;background:var(--panel)} .modal-overlay[data-confirm-tone="impersonate"] .modal-kicker{font-size:9px} .modal-overlay[data-confirm-tone="impersonate"] .modal-title{margin-top:0;font-size:20px;letter-spacing:-.02em;color:var(--text)} .modal-overlay[data-confirm-tone="impersonate"] .modal-close{width:34px;height:34px;font-size:23px} .modal-overlay[data-confirm-tone="impersonate"] .modal-body{padding:8px 22px 20px} .modal-overlay[data-confirm-tone="impersonate"] .confirm-message{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px;border-radius:12px} .modal-overlay[data-confirm-tone="impersonate"] .confirm-message-symbol{width:34px;height:34px;border-radius:10px;font-size:16px} .modal-overlay[data-confirm-tone="impersonate"] .confirm-message-symbol::before{content:"→";font:700 16px/1 Inter,Arial,sans-serif} .modal-overlay[data-confirm-tone="impersonate"] .confirm-message p{font-size:14px;line-height:1.45} .modal-overlay[data-confirm-tone="impersonate"] .confirm-security-note{gap:12px;margin-top:12px;padding:12px 14px;border-radius:10px;font-size:12px;line-height:1.4} .modal-overlay[data-confirm-tone="impersonate"] .confirm-security-icon{width:34px;height:34px;border-radius:9px} .modal-overlay[data-confirm-tone="impersonate"] .confirm-security-icon::before{content:"◇";font:700 20px/1 Inter,Arial,sans-serif} .modal-overlay[data-confirm-tone="impersonate"] .modal-footer{min-height:0;padding:14px 22px 18px} .modal-overlay[data-confirm-tone="impersonate"] .modal-footer .btn{min-width:108px;min-height:40px;font-size:14px} @media (max-width:520px){ .modal-overlay[data-confirm-tone="impersonate"]{padding:12px} .modal-overlay[data-confirm-tone="impersonate"] .modal-footer{display:flex;flex-direction:column-reverse;gap:8px} .modal-overlay[data-confirm-tone="impersonate"] .modal-footer .btn{width:100%} } /* Phone and tablet workspace: preserve every function without forcing the desktop layout into a narrow viewport. */ .loan-export-menu{position:relative;margin:0} .loan-export-menu>summary{list-style:none} .loan-export-menu>summary::-webkit-details-marker{display:none} .loan-export-menu>summary::after{content:"⌄";margin-left:2px;font-size:14px;line-height:1} .loan-export-menu[open]>summary::after{content:"⌃"} .loan-export-menu-items{position:absolute;top:calc(100% + 7px);right:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;min-width:260px;padding:7px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:0 14px 30px rgba(15,61,48,.18)} .loan-export-menu-items a{padding:10px 11px;border-radius:8px;color:var(--admin-brand);font-size:12px;font-weight:700} .loan-export-menu-items a:hover{background:var(--admin-brand-light)} @media(max-width:1100px){ body.portal-premium .content{padding-top:16px} .loans-grid{grid-template-columns:1fr} .loans-grid>.card{min-width:0} #accountingTop .acc-segmented{overflow-x:auto;flex-wrap:nowrap;padding:5px;-webkit-overflow-scrolling:touch} #accountingTop .acc-segmented a{flex:0 0 auto;white-space:nowrap} #accountingTop .mfula-filter-bar{position:static} } @media(max-width:760px){ body.portal-premium .container{padding-inline:12px} body.portal-premium .content{padding-top:12px;padding-bottom:20px} body.portal-premium .card-header{padding:15px;gap:13px} body.portal-premium .card-body{padding:15px} .page-title{font-size:22px} .page-subtitle{font-size:13px} .loans-grid .header-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px} .loans-grid .header-actions .btn,.loans-grid .header-actions .loan-export-menu{width:100%;min-width:0} .loans-grid .header-actions .loan-export-menu>summary{width:100%} .loan-export-menu-items{right:0;left:0;grid-template-columns:1fr;min-width:0} .loans-grid .segmented{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch} .loans-grid .segmented-item{flex:0 0 auto;min-height:40px;white-space:nowrap} .loans-grid .table-wrap{margin-inline:-15px;padding-inline:15px} #accountingTop{border-radius:14px!important} #accountingTop .card-header{padding:15px} #accountingTop .card-body{padding:15px!important} #accountingTop> .card-body > div[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr 1fr!important} #accountingTop> .card-body > .card > .card-body > div[style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr!important} #accountingTop> .card-body > div[style*="grid-template-columns:repeat(2"]{grid-template-columns:1fr!important} #accountingTop .mfula-presets{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} #accountingTop .mfula-presets a{flex:0 0 auto;white-space:nowrap} #accountingTop .table-wrap{margin-inline:-15px;padding-inline:15px} #accountingTop .form{min-width:0} } @media(max-width:480px){ body.portal-premium .container{padding-inline:10px} .loans-grid .header-actions{grid-template-columns:1fr} .admin-workspace-summary{grid-template-columns:1fr!important} #accountingTop> .card-body > div[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr!important} #accountingTop .acc-kpi-value{font-size:21px} #accountingTop .acc-quick{padding:12px} } @media(max-width:560px){ #loan-edit-modal{align-items:flex-end;padding:10px} #loan-edit-modal .modal{width:100%;max-height:calc(100dvh - 20px);border-radius:18px} #loan-edit-modal .modal-header{padding:16px 18px;border-radius:18px 18px 0 0} #loan-edit-modal .modal-body{padding:18px} #loan-edit-modal .row{grid-template-columns:1fr} #loan-edit-modal .btn[type="submit"]{width:100%} }