@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap";:root{--bg-primary:#0a0a0a;--bg-secondary:#0f0f14;--primary-green:#00d084;--primary-green-light:#00f5a0;--primary-gradient:linear-gradient(135deg, #00d084 0%, #00f5a0 100%);--card-bg:#141419bf;--card-bg-hover:#1c1c23d9;--card-border:#ffffff14;--card-border-glow:#00d08440;--text-primary:#fff;--text-secondary:#888;--text-muted:#555;--status-paid:#00d084;--status-paid-bg:#00d0841f;--status-pending:#ffe66d;--status-pending-bg:#ffe66d1f;--status-overdue:#f44;--status-overdue-bg:#ff44441f;--font-heading:"Outfit", sans-serif;--font-body:"Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}.bg-ambient{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.ambient-orb{filter:blur(120px);opacity:.15;border-radius:50%;position:absolute}.orb-1{background:var(--primary-green);width:450px;height:450px;top:-100px;right:-50px}.orb-2{background:#00f5a0;width:350px;height:350px;bottom:10%;left:-80px}.portal-container{z-index:1;width:100%;max-width:1100px;margin:0 auto;padding:24px 20px 60px;position:relative}.portal-header{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:20px;justify-content:space-between;align-items:center;margin-bottom:28px;padding:20px 24px;display:flex;box-shadow:0 8px 32px #0006}.brand-section{align-items:center;gap:14px;display:flex}.brand-logo{background:var(--primary-gradient);color:#0a0a0a;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;display:flex;box-shadow:0 4px 20px #00d08459}.brand-title{font-family:var(--font-heading);background:var(--primary-gradient);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;font-size:22px;font-weight:800}.brand-subtitle{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.5px;font-size:11px;font-weight:600}.customer-badge{text-align:right;background:#ffffff0a;border:1px solid #ffffff0f;border-radius:12px;padding:8px 16px}.customer-name{font-family:var(--font-heading);color:var(--text-primary);font-size:17px;font-weight:700}.customer-contact{color:var(--text-secondary);font-size:12px}.glass-card{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:24px;margin-bottom:24px;padding:28px;transition:border-color .3s,box-shadow .3s;box-shadow:0 8px 32px #00000059}.glass-card:hover{border-color:var(--card-border-glow)}.hero-stat-card{border:1px solid var(--card-border-glow);background:linear-gradient(145deg,#141916d9 0%,#0c120fe6 100%);position:relative;overflow:hidden}.hero-stat-card:before{content:"";background:var(--primary-gradient);height:3px;position:absolute;top:0;left:0;right:0}.stat-label{text-transform:uppercase;letter-spacing:1.2px;color:var(--text-secondary);align-items:center;gap:8px;margin-bottom:8px;font-size:13px;font-weight:600;display:flex}.hero-amount{font-family:var(--font-heading);color:var(--primary-green);letter-spacing:-1px;text-shadow:0 0 30px #00d0844d;margin-bottom:6px;font-size:42px;font-weight:800}.hero-subtext{color:var(--text-secondary);font-size:13px}.summary-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px;display:grid}.summary-card{background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:18px;flex-direction:column;gap:6px;padding:20px;display:flex}.summary-card.paid{border-left:4px solid var(--status-paid)}.summary-card.pending{border-left:4px solid var(--status-pending)}.summary-card.overdue{border-left:4px solid var(--status-overdue)}.summary-card.total{border-left:4px solid #3b82f6}.summary-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;font-size:12px;font-weight:600}.summary-value{font-family:var(--font-heading);font-size:22px;font-weight:700}.summary-value.paid{color:var(--status-paid)}.summary-value.pending{color:var(--status-pending)}.summary-value.overdue{color:var(--status-overdue)}.summary-value.total{color:var(--text-primary)}.section-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.section-title{font-family:var(--font-heading);align-items:center;gap:10px;font-size:20px;font-weight:700;display:flex}.live-indicator{color:var(--primary-green);background:var(--status-paid-bg);border-radius:20px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:600;display:flex}.live-dot{background:var(--primary-green);width:8px;height:8px;box-shadow:0 0 8px var(--primary-green);border-radius:50%;animation:2s infinite pulse}@keyframes pulse{0%{opacity:.8;transform:scale(.95)}50%{opacity:1;transform:scale(1.2)}to{opacity:.8;transform:scale(.95)}}.table-responsive{border-radius:16px;width:100%;overflow-x:auto}.payments-table{border-collapse:collapse;text-align:left;width:100%}.payments-table th{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);border-bottom:1px solid var(--card-border);background:#ffffff08;padding:16px 20px;font-size:12px;font-weight:600}.payments-table td{color:var(--text-primary);border-bottom:1px solid #ffffff0a;padding:18px 20px;font-size:14px}.payments-table tr:last-child td{border-bottom:none}.payments-table tr{transition:background-color .2s}.payments-table tr:hover{background:#ffffff05}.amount-col{font-family:var(--font-heading);font-size:16px;font-weight:700}.status-pill{border-radius:20px;align-items:center;gap:6px;padding:5px 12px;font-size:12px;font-weight:600;display:inline-flex}.status-pill.paid{color:var(--status-paid);background:var(--status-paid-bg);border:1px solid #00d08433}.status-pill.pending{color:var(--status-pending);background:var(--status-pending-bg);border:1px solid #ffe66d33}.status-pill.overdue{color:var(--status-overdue);background:var(--status-overdue-bg);border:1px solid #f443}.error-card{text-align:center;margin-top:40px;padding:60px 24px}.error-icon{width:64px;height:64px;color:var(--status-overdue);background:#ff44441a;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 20px;display:flex}.error-title{font-family:var(--font-heading);margin-bottom:10px;font-size:24px;font-weight:700}.error-desc{color:var(--text-secondary);max-width:400px;margin:0 auto;font-size:14px}.loading-wrapper{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:400px;display:flex}.spinner{border:3px solid #00d08426;border-top-color:var(--primary-green);border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.footer-credits{text-align:center;color:var(--text-muted);padding-top:30px;font-size:12px}@media (width<=768px){.portal-container{padding:16px 12px 40px}.portal-header{flex-direction:column;align-items:flex-start;gap:14px;padding:16px}.customer-badge{text-align:left;width:100%}.hero-amount{font-size:32px}.glass-card{border-radius:18px;padding:18px}.payments-table th,.payments-table td{padding:12px 14px}}
