:root{--primary:#0075bf;--secondary:#0af;--accent:#f47920;--navy:#00273f;--background:#fff;--surface:#f4f6f9;--border:#e4e7eb;--text:#121214;--on-primary:#fff;--on-navy:#fff;--yellow:#fddd16;--green:#39b54a;--mint:#64f0c8;--deep-blue:#00148c;--magenta:#da1c5c;--font-headlines:"Poppins", sans-serif;--font-body:"Inter", sans-serif;--rounded-sm:8px;--rounded-md:12px;--rounded-lg:16px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;box-sizing:border-box}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-body);color:#f3f4f6;background-color:#0b0f19;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;display:flex;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#ffffff0d}::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}#root{flex-direction:row;width:100%;min-height:100vh;display:flex}@media (width<=900px){#root{padding:var(--spacing-md);flex-direction:column}}.app-container{width:100vw;min-height:100vh;display:flex}@media (width<=1024px){.app-container{flex-direction:column}}.brand-dashboard{width:400px;padding:var(--spacing-lg);background-color:#121824;border-right:1px solid #1f2a3d;flex-direction:column;flex-shrink:0;display:flex;overflow-y:auto}@media (width<=1024px){.brand-dashboard{border-bottom:1px solid #1f2a3d;border-right:none;width:100%}}.dashboard-logo{align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);display:flex}.logo-icon{width:32px;height:32px;color:var(--secondary)}.dashboard-title{font-family:var(--font-headlines);color:#fff;margin:0;font-size:20px;font-weight:700}.dashboard-subtitle{color:#9ca3af;margin:2px 0 0;font-size:13px}.dashboard-section{margin-bottom:var(--spacing-lg)}.section-title{font-family:var(--font-headlines);text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin-bottom:var(--spacing-sm);font-size:14px;font-weight:600}.user-cases-list{flex-direction:column;gap:6px;display:flex}.user-case-btn{border-radius:var(--rounded-sm);color:#9ca3af;text-align:left;cursor:pointer;align-items:flex-start;gap:var(--spacing-sm);background:0 0;border:1px solid #1f2a3d;padding:10px 12px;font-size:13px;transition:all .2s;display:flex}.user-case-btn:hover{color:#fff;background-color:#ffffff08}.user-case-btn.active{background-color:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px #0075bf4d}.case-num{background-color:#ffffff1a;border-radius:4px;margin-top:1px;padding:1px 6px;font-size:11px;font-weight:700}.device-canvas{padding:var(--spacing-lg);background-color:#0b0f19;flex:1;justify-content:center;align-items:center;display:flex;overflow:auto}.phone-shell{background-color:#000;border:12px solid #1f242d;border-radius:48px;flex-direction:column;width:390px;height:844px;display:flex;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #00000080,0 0 0 4px #ffffff0d}.phone-notch{z-index:100;background-color:#1f242d;border-bottom-right-radius:18px;border-bottom-left-radius:18px;justify-content:center;align-items:center;width:140px;height:28px;display:flex;position:absolute;top:0;left:50%;transform:translate(-50%)}.phone-notch:before{content:"";background-color:#09090b;border-radius:2px;width:45px;height:4px;margin-bottom:2px}.phone-screen{color:#121214;font-family:var(--font-body);background-color:#fff;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.phone-status-bar{height:44px;padding:0 28px var(--spacing-sm);color:#121214;z-index:90;-webkit-user-select:none;user-select:none;background-color:#fff;justify-content:space-between;align-items:flex-end;font-size:13px;font-weight:600;display:flex}.phone-status-bar.dark-mode{background-color:var(--navy);color:#fff}.status-bar-icons{align-items:center;gap:4px;display:flex}.phone-body{background-color:#fff;flex-direction:column;flex:1;display:flex;position:relative;overflow-y:auto}.phone-nav{border-top:1px solid var(--border);z-index:90;background-color:#fff;justify-content:space-around;align-items:center;height:68px;padding-bottom:12px;display:flex}.nav-item{color:#8a8d93;cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:0;transition:color .2s;display:flex}.nav-item:hover,.nav-item.active{color:var(--primary)}.nav-label{font-size:10px;font-weight:500}.app-header{background-color:var(--navy);color:#fff;height:52px;padding:0 var(--spacing-md);font-family:var(--font-headlines);z-index:80;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.app-header-title{margin:0;font-size:16px;font-weight:700}.header-btn{color:#fff;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex}.btn-primary{background-color:var(--primary);color:var(--on-primary);border-radius:var(--rounded-md);font-family:var(--font-headlines);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 24px;font-size:14px;font-weight:600;transition:background-color .2s;display:flex}.btn-primary:hover{background-color:#005e99}.btn-accent{background-color:var(--accent);color:#fff;border-radius:var(--rounded-md);font-family:var(--font-headlines);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 24px;font-size:14px;font-weight:600;transition:background-color .2s;display:flex}.btn-accent:hover{background-color:#d96214}.btn-secondary{background-color:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--rounded-md);font-family:var(--font-headlines);cursor:pointer;justify-content:center;align-items:center;gap:8px;width:100%;padding:10px 20px;font-size:13px;font-weight:500;transition:all .2s;display:flex}.btn-secondary:hover{background-color:#e5e8ed}.auth-container{padding:var(--spacing-lg);background-color:#fff;flex-direction:column;justify-content:center;height:100%;display:flex}.auth-logo{text-align:center;margin-bottom:var(--spacing-lg)}.auth-logo-text{font-family:var(--font-headlines);color:var(--primary);margin:0;font-size:26px;font-weight:900}.auth-logo-sub{color:var(--accent);text-transform:uppercase;letter-spacing:.1em;margin-top:4px;font-size:12px;font-weight:700}.auth-title{font-family:var(--font-headlines);margin:0 0 var(--spacing-sm) 0;font-size:20px;font-weight:700}.auth-subtitle{color:#6b7280;margin:0 0 var(--spacing-lg) 0;font-size:13px}.form-group{margin-bottom:var(--spacing-md);text-align:left}.form-label{color:#374151;margin-bottom:6px;font-size:12px;font-weight:600;display:block}.input-container{border:1px solid var(--border);border-radius:var(--rounded-md);background-color:var(--surface);align-items:center;display:flex;overflow:hidden}.flag-selector{padding:0 var(--spacing-sm);color:#374151;border-right:1px solid var(--border);align-items:center;gap:4px;height:44px;font-size:13px;font-weight:500;display:flex}.input-field{height:44px;padding:0 var(--spacing-md);color:var(--text);background:0 0;border:none;outline:none;flex:1;font-size:14px}.consent-row{gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);color:#4b5563;text-align:left;align-items:flex-start;font-size:12px;display:flex}.consent-check{margin-top:2px}.map-container{background-color:#e5e7eb;flex:1;position:relative;overflow:hidden}.mock-map-bg{object-fit:cover;width:100%;height:100%}.search-bar-container{top:var(--spacing-md);left:var(--spacing-md);right:var(--spacing-md);align-items:center;gap:var(--spacing-sm);z-index:10;background-color:#fff;border-radius:24px;padding:4px 16px;display:flex;position:absolute;box-shadow:0 4px 15px #0000001a}.search-input{border:none;outline:none;flex:1;height:38px;font-size:13px}.map-pin{cursor:pointer;filter:drop-shadow(0 4px 8px #00000040);z-index:5;flex-direction:column;align-items:center;display:flex;position:absolute;transform:translate(-50%,-100%)}.pin-icon{border:3px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.pin-icon.available{background-color:var(--green);color:#fff}.pin-icon.charging{background-color:var(--secondary);color:#fff}.pin-icon.offline{background-color:var(--magenta);color:#fff}.pin-tail{border-top:8px solid #fff;border-left:8px solid #0000;border-right:8px solid #0000;width:0;height:0;margin-top:-2px}.station-sheet{padding:var(--spacing-md);z-index:20;max-height:50%;color:var(--text);text-align:left;background-color:#fff;border-top-left-radius:24px;border-top-right-radius:24px;animation:.3s cubic-bezier(.16,1,.3,1) slideUp;position:absolute;bottom:0;left:0;right:0;overflow-y:auto;box-shadow:0 -10px 25px #00000026}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sheet-handle{background-color:var(--border);border-radius:3px;width:36px;height:5px;margin:0 auto 12px}.station-title-row{margin-bottom:var(--spacing-sm);justify-content:space-between;align-items:flex-start;display:flex}.station-name{font-family:var(--font-headlines);margin:0;font-size:16px;font-weight:700}.station-status-pill{border-radius:20px;padding:4px 8px;font-size:11px;font-weight:700}.station-status-pill.available{color:var(--green);background-color:#39b54a1a}.station-status-pill.charging{color:var(--secondary);background-color:#00aaff1a}.station-status-pill.offline{color:var(--magenta);background-color:#da1c5c1a}.station-distance{color:#6b7280;margin-bottom:var(--spacing-sm);font-size:12px}.station-amenities{gap:var(--spacing-sm);margin-bottom:var(--spacing-md);display:flex}.amenity-tag{background-color:var(--surface);color:#4b5563;border-radius:4px;align-items:center;gap:4px;padding:4px 8px;font-size:11px;display:flex}.connectors-list{gap:var(--spacing-sm);margin-bottom:var(--spacing-md);flex-direction:column;display:flex}.connector-card{border:1px solid var(--border);border-radius:var(--rounded-md);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--surface);justify-content:space-between;align-items:center;display:flex}.connector-info{align-items:center;gap:var(--spacing-md);display:flex}.connector-type-icon{border:1px solid var(--border);width:40px;height:40px;color:var(--primary);background-color:#fff;border-radius:50%;justify-content:center;align-items:center;display:flex}.connector-label{margin:0;font-size:14px;font-weight:700}.connector-sublabel{color:#6b7280;margin-top:2px;font-size:11px}.connector-price{text-align:right;font-size:13px;font-weight:700}.charging-container{padding:var(--spacing-lg);flex-direction:column;flex:1;justify-content:space-around;align-items:center;width:100%;display:flex}.charging-station-header{text-align:center;margin-bottom:var(--spacing-lg)}.charging-gauge{width:200px;height:200px;margin-bottom:var(--spacing-lg);position:relative}.gauge-circle{border:10px solid var(--surface);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.gauge-progress{border:10px solid #0000;border-top-color:var(--primary);border-right-color:var(--primary);pointer-events:none;border-radius:50%;width:100%;height:100%;position:absolute;top:0;left:0;transform:rotate(45deg)}.gauge-value{font-family:var(--font-headlines);color:var(--primary);margin:0;font-size:38px;font-weight:900}.gauge-label{color:#6b7280;text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:600}.charging-stats-grid{gap:var(--spacing-md);width:100%;margin-bottom:var(--spacing-lg);grid-template-columns:repeat(2,1fr);display:grid}.stat-box{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--rounded-md);padding:var(--spacing-sm) var(--spacing-md);text-align:left}.stat-box-label{color:#6b7280;font-size:11px}.stat-box-val{font-family:var(--font-headlines);color:var(--text);margin-top:4px;font-size:15px;font-weight:700}.slider-container{background-color:var(--surface);border:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:30px;justify-content:center;align-items:center;width:100%;height:54px;display:flex;position:relative;overflow:hidden}.slider-label{color:var(--primary);font-size:13px;font-weight:700}.slider-handle{background-color:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;transition:transform .1s;display:flex;position:absolute;left:4px;box-shadow:0 4px 10px #0075bf4d}.wallet-card-bg{background:linear-gradient(135deg, var(--navy) 0%, var(--primary) 100%);border-radius:var(--rounded-lg);padding:var(--spacing-md) var(--spacing-lg);color:#fff;text-align:left;margin-bottom:var(--spacing-lg);box-shadow:0 10px 20px #00273f33}.wallet-card-title{opacity:.8;text-transform:uppercase;letter-spacing:.15em;margin-bottom:var(--spacing-sm);font-size:12px}.wallet-card-balance{font-family:var(--font-headlines);margin-bottom:var(--spacing-md);font-size:32px;font-weight:700}.wallet-card-number{font-family:var(--font-headlines);letter-spacing:.15em;opacity:.9;font-size:14px}.card-item{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--rounded-md);padding:var(--spacing-md);margin-bottom:var(--spacing-sm);text-align:left;justify-content:space-between;align-items:center;display:flex}.card-item-left{align-items:center;gap:var(--spacing-md);display:flex}.card-brand-icon{border:1px solid var(--border);background-color:#fff;border-radius:4px;justify-content:center;align-items:center;width:42px;height:28px;font-size:10px;font-weight:700;display:flex}.card-brand-icon.visa{color:#1a1f71}.card-brand-icon.mastercard{color:#eb001b}.card-details-label{font-size:14px;font-weight:700}.card-expiry{color:#6b7280;margin-top:2px;font-size:11px}.history-item{border-bottom:1px solid var(--border);padding:var(--spacing-md) 0;text-align:left;cursor:pointer;background:0 0;border-top:none;border-left:none;border-right:none;justify-content:space-between;align-items:center;width:100%;display:flex}.history-left{gap:var(--spacing-md);display:flex}.history-icon-wrapper{background-color:var(--surface);border-radius:var(--rounded-md);width:44px;height:44px;color:var(--primary);justify-content:center;align-items:center;display:flex}.history-item-title{font-size:14px;font-weight:700}.history-item-date{color:#6b7280;margin-top:4px;font-size:11px}.history-right{text-align:right}.history-amount{font-family:var(--font-headlines);font-size:14px;font-weight:700}.history-status{margin-top:4px;font-size:10px;font-weight:600}.history-status.settled{color:var(--green)}.history-status.pending{color:var(--accent)}.profile-impact{border-radius:var(--rounded-lg);padding:var(--spacing-md);margin-bottom:var(--spacing-lg);color:var(--navy);background-color:#e6f7ff;border:1px solid #bae7ff;justify-content:space-around;display:flex}.impact-item{flex-direction:column;align-items:center;gap:4px;display:flex}.impact-value{font-family:var(--font-headlines);font-size:18px;font-weight:700}.impact-label{color:#4b5563;font-size:10px;font-weight:500}.badge{background-color:var(--magenta);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700;position:absolute;top:4px;right:14px}.notification-item{padding:var(--spacing-md);border-bottom:1px solid var(--border);text-align:left;gap:var(--spacing-md);cursor:pointer;display:flex}.notification-item.unread{border-left:3px solid var(--primary);background-color:#0075bf08}.notification-avatar{border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.notification-avatar.alerts{color:var(--magenta);background-color:#da1c5c1a}.notification-avatar.campaigns{color:var(--accent);background-color:#f479201a}.notification-avatar.news{color:var(--primary);background-color:#0075bf1a}.notification-details{flex:1}.notification-title{margin:0;font-size:13px;font-weight:700}.notification-desc{color:#4b5563;margin:4px 0 0;font-size:12px;line-height:140%}.notification-time{color:#9ca3af;margin-top:6px;font-size:10px}.toast-banner{top:54px;left:var(--spacing-md);right:var(--spacing-md);border:1px solid var(--border);border-radius:var(--rounded-md);padding:12px var(--spacing-md);z-index:150;align-items:center;gap:var(--spacing-md);cursor:pointer;color:var(--text);text-align:left;background-color:#fff;animation:.35s cubic-bezier(.16,1,.3,1) slideDownToast;display:flex;position:absolute;box-shadow:0 10px 25px #00000026}@keyframes slideDownToast{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.toast-badge{background-color:var(--primary);border-radius:50%;flex-shrink:0;width:8px;height:8px}.toast-content{flex:1}.toast-title{margin:0;font-size:13px;font-weight:700}.toast-desc{color:#6b7280;white-space:nowrap;text-overflow:ellipsis;max-width:200px;margin:2px 0 0;font-size:11px;overflow:hidden}.notif-dropdown{border:1px solid var(--border);border-radius:var(--rounded-md);z-index:120;width:290px;max-height:380px;color:var(--text);background-color:#fff;flex-direction:column;animation:.2s cubic-bezier(.16,1,.3,1) scaleInDropdown;display:flex;position:absolute;top:60px;right:12px;overflow:hidden;box-shadow:0 10px 30px #0003}@keyframes scaleInDropdown{0%{opacity:0;transform-origin:100% 0;transform:scale(.95)}to{opacity:1;transform-origin:100% 0;transform:scale(1)}}.notif-dropdown-header{border-bottom:1px solid var(--border-light);background-color:var(--surface-light);justify-content:space-between;align-items:center;padding:12px 14px;display:flex}.notif-dropdown-header h4{color:var(--navy);margin:0;font-size:14px;font-weight:700}.notif-clear-btn{color:var(--primary);cursor:pointer;background:0 0;border:none;font-size:11px;font-weight:600}.notif-clear-btn:hover{text-decoration:underline}.notif-dropdown-list{flex-direction:column;flex:1;display:flex;overflow-y:auto}.notif-dropdown-item{border-bottom:1px solid var(--border-light);cursor:pointer;text-align:left;gap:8px;padding:12px;transition:background-color .2s;display:flex}.notif-dropdown-item:hover{background-color:var(--surface-light)}.notif-dropdown-item.unread{background-color:#f0f9ff}.notif-item-dot-container{align-items:flex-start;width:8px;padding-top:4px;display:flex}.notif-item-dot{background-color:var(--primary);border-radius:50%;width:6px;height:6px}.notif-item-body{flex:1}.notif-item-title{color:var(--text);margin-bottom:2px;font-size:12px;font-weight:700}.notif-item-desc{color:#4b5563;margin-bottom:4px;font-size:11px;line-height:130%}.notif-item-time{color:#9ca3af;font-size:9px}.notif-empty{text-align:center;color:#9ca3af;padding:30px;font-size:12px}