*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial;background:linear-gradient(135deg,#f7f5ff,#eef7ff 45%,#f5fffb);color:#17212b;min-height:100vh}body:before{content:"";position:fixed;inset:-25%;z-index:-1;background:radial-gradient(circle at 15% 15%,rgba(124,58,237,.16),transparent 28%),radial-gradient(circle at 85% 10%,rgba(6,182,212,.14),transparent 28%),radial-gradient(circle at 70% 85%,rgba(16,185,129,.12),transparent 30%)}header{background:linear-gradient(115deg,#4c1d95,#7c3aed 34%,#0891b2 68%,#059669);color:#fff;box-shadow:0 8px 28px rgba(76,29,149,.24)}nav{background:rgba(255,255,255,.88);backdrop-filter:blur(14px)}nav button.active{background:linear-gradient(135deg,#6d28d9,#0891b2);color:#fff}.card{background:rgba(255,255,255,.88);border:1px solid rgba(124,58,237,.12);border-radius:18px;box-shadow:0 10px 28px rgba(31,41,55,.07)}.btn{background:linear-gradient(135deg,#6d28d9,#0891b2);border-radius:12px;font-weight:700}.btn.alt{background:linear-gradient(135deg,#ede9fe,#cffafe);color:#4338ca}.login .card{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,243,255,.92));box-shadow:0 24px 60px rgba(76,29,149,.14)}
.countdown{font-weight:700;font-variant-numeric:tabular-nums}.countdown.danger{color:#b91c1c}.countdown.success{color:#15803d}

/* Customer Portal layout only */
.customer-portal{max-width:1120px;margin:0 auto;padding:10px 4px 40px}
.cp-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:8px 0 22px;padding:28px;border-radius:22px;background:linear-gradient(135deg,#111827,#243447);color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.12)}
.cp-header h1{margin:5px 0 7px;font-size:28px}.cp-header p{margin:0;opacity:.78}.cp-avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111827;font-size:24px;font-weight:800;flex:none}
.cp-eyebrow{font-size:11px;letter-spacing:.12em;font-weight:800;opacity:.68}
.cp-nav-title{font-weight:800;margin-right:auto;padding:10px 0}
.cp-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.cp-card{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid #e7eaf0;border-radius:18px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.cp-card h3{margin:3px 0 4px;font-size:21px}.cp-card p{margin:0;color:#667085}.cp-card-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#f2f4f7;font-size:21px;flex:none}
.cp-hidden-card{opacity:.82}.cp-section-title{margin:8px 0 13px}.cp-section-title h2{margin:4px 0 0;font-size:21px}
.cp-rental-card,.cp-panel{background:#fff;border:1px solid #e7eaf0;border-radius:18px;padding:20px;margin-bottom:16px;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.cp-rental-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.cp-rental-top h3{margin:4px 0 0;font-size:20px}
.cp-status{padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;background:#e9f8ef;color:#16723b}.cp-status.danger{background:#fff0f0;color:#b42318}
.cp-rental-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.cp-rental-grid div{padding:12px;border-radius:12px;background:#f8fafc}.cp-rental-grid span,.cp-profile-grid span{display:block;font-size:11px;color:#667085;margin-bottom:5px}.cp-rental-grid b{font-size:13px}.cp-alert{margin-top:13px;padding:10px 12px;border-radius:10px;background:#fff6ed;color:#9a3412}
.cp-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.cp-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.cp-panel-head h2{margin:0;font-size:18px}.cp-panel-head p{margin:4px 0 0;color:#667085;font-size:13px}.cp-total{font-size:18px;font-weight:800}
.cp-charge-row,.cp-charge-total{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #eef0f3}.cp-charge-total{border-bottom:0;font-size:17px;padding-top:15px}.cp-primary{width:100%;margin-top:6px}
.cp-list-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #eef0f3}.cp-list-row:last-child{border-bottom:0}.cp-list-row small{display:block;color:#667085;margin-top:4px}.danger{color:#b42318}.success{color:#16723b}
.cp-empty{text-align:center;padding:24px;color:#667085}.cp-empty h3{margin:4px 0 5px;color:#344054}.cp-empty p{margin:0}.cp-empty.compact{padding:18px}.cp-empty-icon{font-size:30px;margin-bottom:7px}
.cp-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.cp-feature{display:flex;gap:12px;align-items:flex-start;padding:18px;border:1px solid #e7eaf0;border-radius:16px;background:#fff}.cp-feature h3{margin:0 0 5px;font-size:16px}.cp-feature p{margin:0;color:#667085;font-size:13px;line-height:1.45}.cp-feature-icon{font-size:22px}
.cp-profile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.cp-profile-grid>div{padding:13px;border-radius:12px;background:#f8fafc}.cp-profile-grid b{font-size:13px;word-break:break-word}.cp-privacy{margin:15px 0 0;padding:11px 13px;border-radius:11px;background:#f2f4f7;color:#475467;font-size:13px}
@media(max-width:800px){.cp-quick-grid,.cp-feature-grid{grid-template-columns:1fr 1fr}.cp-two-col{grid-template-columns:1fr}.cp-rental-grid{grid-template-columns:1fr 1fr}.cp-profile-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.customer-portal{padding:4px 0 28px}.cp-header{padding:21px;border-radius:17px}.cp-header h1{font-size:23px}.cp-avatar{width:48px;height:48px}.cp-quick-grid,.cp-feature-grid,.cp-rental-grid,.cp-profile-grid{grid-template-columns:1fr}.cp-card{padding:16px}.cp-panel,.cp-rental-card{padding:16px}.cp-nav-title{display:none}}

/* Power-bank barcode scan result - staff/owner workflow only. Customer Portal is unchanged. */
.scan-status{margin:14px 0;padding:18px;border-radius:14px;border:2px solid currentColor;text-align:center;background:#101010}
.scan-status.success{color:#16a34a}
.scan-status.danger{color:#dc2626}
.scan-status-code{font-size:28px;font-weight:900;letter-spacing:1px;color:#fff}
.scan-status-label{font-size:18px;font-weight:900;margin-top:5px}
.scan-status p{margin:8px 0 0;color:#ddd}