:root{--forest:#1b4332;--leaf:#2d6a4f;--fresh:#52b788;--soil:#8b4513;--gold:#d4a017;--parchment:#f8f5f0;--surface:#fff;--text:#1a1a1a;--muted:#6b7280;--amber-warn:#d97706;--zebra-a:#fafaf5;--zebra-b:#fff;--header-bg:#fff;--header-border:#0000000f;--font-display:"Plus Jakarta Sans", system-ui, sans-serif;--font-body:"DM Sans", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace}[data-theme=dark]{--forest:#152a20;--leaf:#2d6a4f;--fresh:#6bc49a;--soil:#c4a574;--gold:#e4b42a;--parchment:#121a16;--surface:#1a2620;--text:#f0f4f1;--muted:#9ca3af;--zebra-a:#1e2a22;--zebra-b:#162018;--header-bg:#1a2620;--header-border:#ffffff14}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;font-family:var(--font-body);color:var(--text);background:var(--parchment);margin:0;font-size:15px;font-weight:450;line-height:1.45}.shell-layout{min-height:100vh;display:flex}.shell-sidebar{background-color:var(--forest);color:#fff;z-index:60;flex-direction:column;flex-shrink:0;width:240px;height:100vh;transition:transform .22s,box-shadow .22s;display:flex;position:sticky;top:0}.shell-backdrop{z-index:55;cursor:pointer;appearance:none;background:#00000073;border:none;padding:0;display:none;position:fixed;inset:0}.shell-hamburger{border:1px solid var(--header-border);background:var(--surface);cursor:pointer;width:44px;height:44px;color:var(--text);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;line-height:1;display:none}@media (width<=900px){.shell-sidebar{box-shadow:none;position:fixed;top:0;left:0;transform:translate(-100%)}.shell-sidebar.shell-sidebar-open{transform:translate(0);box-shadow:8px 0 32px #00000040}.shell-backdrop.shell-backdrop-visible{display:block}.shell-hamburger{display:inline-flex}.shell-main-wrap{width:100%}}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;margin:0 0 .35em;font-weight:800}a{color:var(--leaf);text-decoration:none}a:hover{text-decoration:underline}.mono,.money{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.page-enter{animation:.15s ease-out both pageIn}@keyframes pageIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseDot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.35)}}@keyframes shimmer{to{transform:translate(100%)}}.skeleton{background:linear-gradient(90deg,#ede8df 0%,#f5f0e8 40%,#ede8df 80%);border-radius:8px;position:relative;overflow:hidden}.skeleton:after{content:"";background:linear-gradient(90deg,#0000,#d4a0171f,#52b7881f,#0000);animation:1.2s infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}.table-zebra tbody tr:nth-child(odd){background:var(--zebra-a)}.table-zebra tbody tr:nth-child(2n){background:var(--zebra-b)}.btn{background:var(--surface);font-family:var(--font-display);cursor:pointer;color:var(--text);border:1px solid #00000014;border-radius:10px;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:700;transition:transform .12s,box-shadow .12s,background .12s;display:inline-flex}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px #00000014}.btn-primary{background:var(--leaf);color:#fff;border-color:var(--leaf)}.btn-gold{background:var(--gold);color:#1a1203;border-color:#b8890d}.btn-ghost{background:0 0}.chip{font-size:12px;font-weight:700;font-family:var(--font-display);border-radius:999px;align-items:center;gap:6px;padding:4px 10px;display:inline-flex}.chip-paid{color:#1b4332;background:#52b78833}.chip-pending{color:#92400e;background:#d9770626}.chip-pending .dot{background:var(--amber-warn);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite pulseDot}.chip-failed{color:var(--soil);background:#8b451326}.chip-overdue{color:#5c2e0c;background:#8b451338}.card-surface{background:var(--surface);border:1px solid #0000000f;border-radius:16px;box-shadow:0 1px 3px #0000000f}.input{width:100%;font-family:var(--font-body);background:var(--surface);color:var(--text);border:1px solid #0000001f;border-radius:10px;padding:10px 12px;font-size:14px}[data-theme=dark] .input{border-color:#ffffff1f}label{font-size:12px;font-weight:700;font-family:var(--font-display);color:var(--muted);margin-bottom:6px;display:block}.mpesa-badge{color:#fff;width:18px;height:18px;font-size:10px;font-weight:900;font-family:var(--font-display);background:#00a550;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex}.portal-nav{background:var(--surface);border-top:1px solid var(--header-border);z-index:50;height:56px;display:flex;position:fixed;bottom:0;left:0;right:0}.portal-nav a{color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:10px;font-weight:700;text-decoration:none;display:flex}.portal-nav a.active{color:var(--forest);background:linear-gradient(#52b7881f 0%,#0000 100%);position:relative}[data-theme=dark] .portal-nav a.active{color:var(--fresh)}.portal-nav a.active:before{content:"";background:var(--fresh);border-radius:0 0 4px 4px;width:28px;height:3px;position:absolute;top:0;left:50%;transform:translate(-50%)}.portal-header-shell{background-color:var(--forest);color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath fill='%23ffffff' fill-opacity='0.04' d='M48 10c-10 18-20 28-20 38 0 12 9 22 20 27 11-5 20-15 20-27 0-10-10-20-20-38z'/%3E%3C/svg%3E");border-bottom:1px solid #ffffff14;padding:12px 14px}.portal-pill-sandbox{color:#fef3c7;white-space:nowrap;background:#d9770640;border:1px solid #fde68a59;border-radius:999px;padding:4px 10px;font-size:10px;font-weight:800}.portal-daraja-dot{background:var(--fresh);border-radius:50%;width:8px;height:8px;animation:2s ease-in-out infinite pulseDot}@media (width<=520px){body.portal-body{padding-bottom:64px;font-size:18px}}@media (width<=400px){.portal-nav a span:last-child{letter-spacing:0;font-size:9px}}[data-theme=dark] .chip-paid{color:var(--fresh)}[data-theme=dark] .skeleton{background:linear-gradient(90deg,#243029 0%,#2a3830 40%,#243029 80%)}