:root{
  --bg:#f5f7fb;--card:#fff;--soft:#edf1f7;--text:#172033;--muted:#6d7688;--line:#dfe5ee;
  --p:#6f4ee8;--p2:#9a6df0;--a:#27a7c7;--ok:#27a56c;--warn:#f0a84a;--bad:#d95d68;
  --shadow:0 18px 48px rgba(32,38,55,.11)
}
[data-theme=dark]{
  --bg:#0e1320;--card:#171e2d;--soft:#20293b;--text:#f3f5fa;--muted:#a7b0c1;--line:#2b3548;
  --p:#8d72f3;--p2:#ae8dfa;--a:#4bbbd4;--ok:#4fc58c;--warn:#f5bb68;--bad:#ef7b86;
  --shadow:0 18px 48px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 Inter,"Segoe UI",Arial,sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app{padding-bottom:92px}
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.bar{max-width:840px;margin:auto;padding:13px 16px;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;gap:10px;align-items:center;cursor:pointer}
.logo{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--p),var(--a));display:grid;place-items:center;color:#fff;font-weight:900}
.brand small{display:block;color:var(--muted)}
.iconbtn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:var(--card);color:var(--text)}
.wrap{max-width:840px;margin:auto;padding:20px 16px}
.hero{padding:25px;border-radius:28px;color:#fff;background:linear-gradient(135deg,var(--p),var(--p2),var(--a));box-shadow:var(--shadow)}
.hero h1{font-size:2.25rem;line-height:1.05;margin:7px 0 10px}
.hero p{margin:0;color:#ffffffde}
.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:900}
.title{display:flex;justify-content:space-between;align-items:end;margin:25px 0 13px;gap:10px}
.title h2,.head h1{margin:0}
.title span,.head p,.muted{color:var(--muted)}
.notice,.warning,.successbox{padding:14px;border-radius:15px;margin-top:14px}
.notice{background:var(--soft);border:1px solid var(--line)}
.warning{background:#fff6dd;border:1px solid #ecd38b;color:#73560e}
.successbox{background:#eaf9f1;border:1px solid #bfe9d3;color:#176d4a}
[data-theme=dark] .warning{background:#40351d;border-color:#675735;color:#f5daa0}
[data-theme=dark] .successbox{background:#183629;border-color:#2e5f48;color:#aee5ca}
.availability{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:17px;box-shadow:var(--shadow)}
.availability-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.state{display:flex;align-items:center;gap:9px;font-weight:900}
.dot{width:12px;height:12px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 5px color-mix(in srgb,var(--ok) 18%,transparent)}
.state.ride .dot{background:var(--warn);box-shadow:0 0 0 5px color-mix(in srgb,var(--warn) 18%,transparent)}
.state.reserved .dot,.state.offline .dot{background:var(--bad);box-shadow:0 0 0 5px color-mix(in srgb,var(--bad) 18%,transparent)}
.availability-grid,.stats,.dashgrid,.membership-grid,.services,.types{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.availability-grid{grid-template-columns:repeat(3,1fr);margin-top:14px}
.mini,.stat{background:var(--soft);border-radius:15px;padding:13px}
.mini strong,.stat strong{display:block;font-size:1.35rem}
.mini span,.stat span{color:var(--muted);font-size:.8rem}
.card,.service,.type,.item,.membership{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:17px;box-shadow:0 10px 25px rgba(32,38,55,.05)}
.service,.type{cursor:pointer}
.service.disabled{opacity:.5;cursor:not-allowed}
.service .em{font-size:2rem}
.service h3,.type h3{margin:8px 0 4px}
.service p,.type p,.membership p{margin:0;color:var(--muted)}
.type.sel,.membership.current{border-color:var(--p);box-shadow:0 0 0 2px color-mix(in srgb,var(--p) 22%,transparent)}
.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--soft);color:var(--p);font-weight:900;font-size:.72rem}
.badge.ok{background:#e6f8ef;color:#0d7851}
.badge.warn{background:#fff3d6;color:#8a5a00}
.badge.bad{background:#ffe8eb;color:#9d3e48}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.q{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:13px;text-align:center;cursor:pointer;position:relative}
.q b{display:block;margin-top:5px}
.bubble{position:absolute;right:7px;top:6px;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font-size:.72rem;font-weight:900;display:grid;place-items:center}
.screen{display:none}.screen.active{display:block}
.bottom{position:fixed;bottom:0;left:0;right:0;background:color-mix(in srgb,var(--card) 93%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--line);z-index:40}
.bottomin{max-width:840px;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);padding:8px}
.nav{border:0;background:transparent;color:var(--muted);padding:7px 2px;border-radius:11px;font-size:.72rem}
.nav span{display:block;font-size:1.2rem}
.nav.active{color:var(--p);background:var(--soft)}
.head{margin-bottom:17px}.head h1{font-size:2rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:5px}
.full{grid-column:1/-1}
.field label{font-weight:800}
.field input,.field select,.field textarea{padding:12px;border-radius:11px;border:1px solid var(--line);background:var(--bg);color:var(--text)}
textarea{min-height:100px}
.btns{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap}
.btn{border:0;border-radius:13px;padding:12px 15px;font-weight:900}
.primary{background:linear-gradient(135deg,var(--p),var(--a));color:#fff}
.secondary{background:var(--soft);color:var(--text)}
.danger{background:var(--bad);color:#fff}
.success{background:var(--ok);color:#fff}
.list{display:grid;gap:9px}
.item{display:flex;justify-content:space-between;align-items:center;gap:10px}
.left{display:flex;align-items:center;gap:10px}
.circle{width:42px;height:42px;border-radius:13px;background:var(--soft);display:grid;place-items:center}
.profile{background:linear-gradient(135deg,#1a2140,var(--p));color:#fff;border-radius:25px;padding:21px}
.profile h2{margin:0}.profile p{margin:4px 0;color:#ffffffd0}
.account-row{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.big{font-size:1.7rem;font-weight:900}
.timeline{position:relative}
.timeline:before{content:"";position:absolute;left:12px;top:10px;bottom:10px;width:2px;background:var(--line)}
.step{position:relative;padding-left:40px;margin:17px 0}
.tdot{position:absolute;left:0;width:26px;height:26px;border-radius:50%;background:var(--soft);display:grid;place-items:center;border:2px solid var(--line)}
.done .tdot{background:var(--ok);border-color:var(--ok);color:#fff}
.now .tdot{background:var(--p);border-color:var(--p);color:#fff}
.step h4{margin:0}.step p{margin:2px 0;color:var(--muted)}
.price{font-size:2rem;font-weight:900}
.membership.current:before{content:"Current Plan";display:inline-flex;padding:4px 8px;border-radius:999px;background:var(--p);color:#fff;font-size:.7rem;font-weight:900;margin-bottom:9px}
.membership.grandfathered{border-style:dashed;border-color:var(--warn)}
.code-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);padding:5px;border-radius:13px;margin-bottom:12px}
.tabs button{border:0;background:transparent;color:var(--muted);padding:10px;border-radius:9px;font-weight:800}
.tabs button.active{background:var(--card);color:var(--p)}
.hidden{display:none!important}
a.terms{color:var(--p);font-weight:900}
@media(max-width:680px){
  .services,.types,.grid,.membership-grid,.availability-grid{grid-template-columns:1fr}
  .quick{grid-template-columns:repeat(2,1fr)}
  .full{grid-column:auto}
  .hero h1{font-size:1.95rem}
}

/* Official Passenger application extensions */
a{text-decoration:none;color:inherit}.form-alert{padding:12px 14px;border-radius:14px;margin:12px 0;background:#fff2d6;color:#6d4d04;border:1px solid #ead097}
.form-alert.ok{background:#e8f8ef;color:#145f43;border-color:#b6e2ca}.form-alert.bad{background:#ffe8eb;color:#8e2f39;border-color:#edbdc2}
.price-old{text-decoration:line-through;color:var(--muted)}.price-new{font-size:1.2rem;font-weight:900;color:var(--p)}
.empty{padding:22px;text-align:center;color:var(--muted)}.request-actions{display:flex;gap:8px;flex-wrap:wrap}
.navlink{border:0;background:transparent;color:inherit}.list-form{margin:0}
.stop-row{display:grid;grid-template-columns:1fr 110px auto;gap:8px;align-items:end;margin-top:8px}.stop-row button{height:42px}
.message-bubble{max-width:88%;padding:12px 14px;border-radius:18px;margin:8px 0}.message-bubble.user{margin-left:auto;background:linear-gradient(135deg,var(--p),var(--a));color:#fff}.message-bubble.bow{background:var(--card);border:1px solid var(--line)}
.notification.unread{border-left:5px solid var(--p)}.badge-image{width:58px;height:58px;object-fit:contain;border-radius:14px}
@media(max-width:600px){.stop-row{grid-template-columns:1fr}.stop-row button{width:100%}}

/* Passenger v0.2 */
.status-panel{padding:20px;border-radius:22px;border:2px solid var(--line);background:var(--card);box-shadow:var(--shadow);margin:14px 0}
.status-panel.available{border-color:#92dfba;background:#ecfbf3}
.status-panel.busy{border-color:#efd18f;background:#fff8e6}
.status-panel.offline{border-color:#edb0b7;background:#fff0f2}
.status-main{display:flex;align-items:center;gap:14px}
.status-main .status-dot{width:18px;height:18px;border-radius:50%;flex:none}
.status-panel.available .status-dot{background:#16a164;box-shadow:0 0 0 7px rgba(22,161,100,.13)}
.status-panel.busy .status-dot{background:#e09827;box-shadow:0 0 0 7px rgba(224,152,39,.14)}
.status-panel.offline .status-dot{background:#d74957;box-shadow:0 0 0 7px rgba(215,73,87,.14)}
.status-panel h2{margin:0;font-size:1.45rem}.status-panel p{margin:6px 0 0}
.service.disabled{opacity:.45;filter:grayscale(.8);pointer-events:none;border-color:#d8dde7}
.service.open-service{border-color:#7fd4aa;background:#f0fff7}
.service.closed-service{border-color:#e6aeb4;background:#fff3f4}
.notify-wrap{position:relative}.notify-count{position:absolute;right:-7px;top:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#d84250;color:white;font-size:.7rem;font-weight:900;display:grid;place-items:center;border:2px solid white}
.balance-hero{border-radius:22px;padding:20px;color:white;background:linear-gradient(135deg,#6f4ee8,#1aa7c8);margin:14px 0}.balance-hero.owed{background:linear-gradient(135deg,#b73342,#e06c4d)}.balance-hero strong{display:block;font-size:2rem}.balance-hero p{margin:5px 0}
.credit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.credit-box{padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.credit-box strong{display:block;font-size:1.35rem}
.reward-unavailable{opacity:.43;filter:grayscale(.85)}
.quote-card{border:2px solid #8d74ee;background:#f6f3ff}
.queue-position{font-size:2.1rem;font-weight:900;color:var(--p)}
.modal-backdrop{position:fixed;inset:0;background:rgba(14,20,34,.58);display:none;align-items:center;justify-content:center;padding:20px;z-index:999}.modal-backdrop.show{display:flex}.modal-box{max-width:470px;width:100%;background:white;border-radius:22px;padding:20px;box-shadow:0 30px 70px rgba(0,0,0,.25)}
.membership-detail{border-top:5px solid var(--p)}
.addon-card.pending{border-color:#e6bc69;background:#fff9e9}
.addon-card.active{border-color:#80d3ab;background:#effbf5}
.offline-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
@media(max-width:600px){.credit-grid{grid-template-columns:1fr}.status-panel{padding:17px}.status-panel h2{font-size:1.25rem}}

/* Passenger Pre-launch v0.7.1 */
.current-ride-card{border:1px solid #d9deea;box-shadow:0 12px 34px rgba(35,45,75,.09)}
.status-hero{padding-bottom:12px;border-bottom:1px solid #e3e7ef;margin-bottom:14px}
.status-hero h2{margin:10px 0}
.route-line{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:1.05rem}
.history-ride-card{border-left:5px solid #6f4ee8}
.history-ride-card.history-cancelled{border-left-color:#d95360;background:#fff7f8}


/* Passenger Beta Account Portal v0.8.0 */
.beta-banner{
    position:sticky;
    top:0;
    z-index:1200;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    flex-wrap:wrap;
    padding:9px 14px;
    background:linear-gradient(90deg,#ffcf57,#ff9ecf,#a9dcff);
    color:#382600;
    font-size:.84rem;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.beta-banner b{
    border:2px solid currentColor;
    border-radius:999px;
    padding:2px 8px;
    letter-spacing:.08em;
}
.auth-beta-banner{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    padding:11px 16px;
    background:linear-gradient(90deg,#ffcf57,#ff9ecf,#a9dcff);
    color:#382600;
    font-weight:800;
    text-align:center;
}
.auth-beta-banner b{
    border:2px solid currentColor;
    border-radius:999px;
    padding:3px 9px;
    letter-spacing:.1em;
}
.beta-pill{
    display:inline-flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    padding:5px 10px;
    border-radius:999px;
    background:#fff1a9;
    color:#674a00;
    border:1px solid #e7c74b;
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.07em;
}
.beta-notice{
    margin:14px 0;
    padding:14px;
    border:2px solid #e4bb31;
    border-radius:15px;
    background:#fff8d9;
    color:#493900;
}
.beta-notice p{
    margin:6px 0 0;
}
.beta-hero{
    border:2px solid #bb9ef7;
    background:linear-gradient(135deg,#fff,#f4efff);
}
.services-under-construction{
    margin:17px 0;
    padding:24px 18px;
    border:3px dashed #e1aa25;
    border-radius:22px;
    background:linear-gradient(145deg,#fffaf0,#fff3c4);
    text-align:center;
    box-shadow:0 10px 28px rgba(100,75,0,.08);
}
.services-under-construction h2{
    margin:9px 0;
}
.construction-icon{
    font-size:3rem;
    line-height:1;
    margin-bottom:8px;
}
.compact-construction{
    padding:17px;
}
.compact-construction .construction-icon{
    font-size:2rem;
}
.beta-summary-card{
    border:2px solid #c9b4f4;
}
.beta-empty-state{
    border:2px dashed #bbb4ce;
    background:#fbfaff;
}


/* Passenger Beta v0.8.1 fixes */
.beta-hero,
.beta-hero h1,
.beta-hero p,
.beta-hero .kicker{
    color:#1f1835!important;
}
.beta-hero p{
    opacity:1!important;
}

/* Better auth pages */
.auth-body{
    min-height:100vh;
    background:linear-gradient(135deg,#f7f3ff,#eef8ff,#fff8ea);
}
.auth-shell{
    width:min(1100px,calc(100% - 28px));
    margin:35px auto;
    display:grid;
    grid-template-columns:minmax(280px,.85fr) minmax(360px,1.15fr);
    gap:24px;
    align-items:stretch;
}
.auth-side-panel{
    border-radius:26px;
    padding:34px;
    background:linear-gradient(145deg,#6f4ee8,#9c70f4);
    color:#fff;
    box-shadow:0 18px 45px rgba(67,41,134,.22);
}
.auth-side-panel h1{
    color:#fff;
    margin:18px 0 10px;
}
.auth-side-panel p{
    color:#fff;
    opacity:.95;
}
.large-logo{
    width:64px!important;
    height:64px!important;
    font-size:1.3rem!important;
}
.auth-feature-list{
    margin-top:22px;
    display:grid;
    gap:10px;
}
.auth-feature-list div{
    padding:11px 13px;
    border-radius:13px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.28);
    font-weight:800;
}
.modern-auth-card{
    margin:0!important;
    max-width:none!important;
    border:1px solid #dcdfea;
    border-radius:26px!important;
    padding:30px!important;
    box-shadow:0 18px 45px rgba(35,40,70,.13)!important;
    background:#fff!important;
}
.auth-card-head{
    margin-bottom:18px;
}
.auth-card-head h2{
    font-size:1.8rem;
    margin:12px 0 5px;
}
.auth-main-button{
    width:100%;
    margin-top:8px;
}
.auth-switch-box{
    margin-top:18px;
    padding:14px;
    border:1px solid #e0e3eb;
    border-radius:15px;
    background:#f8f9fc;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}
.auth-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.auth-grid .full{
    grid-column:1/-1;
}

/* Rewards */
.reward-balance-card{
    text-align:center;
    background:linear-gradient(145deg,#fff6c7,#fff);
    border:2px solid #e6be37;
}
.reward-balance-card small,
.reward-balance-card span{
    display:block;
    font-weight:800;
}
.reward-balance-card strong{
    display:block;
    font-size:3rem;
    margin:5px 0;
    color:#6f4ee8;
}

/* Status and demo ride */
.demo-ride-card{
    position:relative;
    overflow:hidden;
    border:2px solid #c5b0f5;
    background:linear-gradient(145deg,#fff,#f8f5ff);
}
.demo-ribbon{
    position:absolute;
    top:14px;
    right:-35px;
    transform:rotate(38deg);
    width:140px;
    text-align:center;
    padding:5px;
    background:#ffcf57;
    color:#573d00;
    font-weight:900;
    letter-spacing:.08em;
}
.route-preview{
    margin:16px 0;
    padding:15px;
    border:1px solid #e0e3eb;
    border-radius:16px;
    background:#fafbfe;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:12px;
    align-items:center;
}
.route-preview small{
    display:block;
    color:var(--muted);
    font-weight:800;
    margin-bottom:4px;
}
.route-preview strong{
    display:block;
}
.route-arrow{
    font-size:1.5rem;
    color:#6f4ee8;
}
.ride-progress{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:7px;
    margin:18px 0;
}
.progress-step{
    text-align:center;
    padding:10px 6px;
    border-radius:10px;
    border:1px solid #d9dde7;
    background:#f4f5f8;
    font-size:.78rem;
    font-weight:800;
}
.progress-step.complete{
    background:#e8f8ef;
    border-color:#75c796;
}
.progress-step.active{
    background:#fff3c7;
    border-color:#e3b845;
}

@media(max-width:800px){
    .auth-shell{
        grid-template-columns:1fr;
        margin:20px auto;
    }
    .auth-side-panel{
        padding:24px;
    }
}
@media(max-width:620px){
    .auth-grid{
        grid-template-columns:1fr;
    }
    .route-preview{
        grid-template-columns:1fr;
    }
    .route-arrow{
        transform:rotate(90deg);
        text-align:center;
    }
    .ride-progress{
        grid-template-columns:1fr;
    }
}

/* v0.8.2 preview locks */
.service.disabled.closed-service{pointer-events:auto;filter:grayscale(.25);opacity:.72;border:2px dashed #bbb4ce;background:#f5f4f8}.service.disabled button{cursor:not-allowed}


/* Account Portal Beta v0.8.3 - Ride, Delivery and Order previews */
.demo-service-card{
    position:relative;
    overflow:hidden;
    margin-bottom:18px;
}
.demo-delivery-card{
    border:2px solid #70c6a1;
    background:linear-gradient(145deg,#ffffff,#effcf5);
}
.demo-order-card{
    border:2px solid #72aee8;
    background:linear-gradient(145deg,#ffffff,#eff7ff);
}
.order-preview-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:15px 0;
}
.order-preview-list > div{
    padding:13px;
    border:1px solid #dce2eb;
    border-radius:14px;
    background:rgba(255,255,255,.8);
}
.order-preview-list small{
    display:block;
    color:var(--muted);
    font-weight:800;
    margin-bottom:4px;
}
.order-preview-list strong{
    display:block;
}
.history-filter-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:15px;
}
.history-preview-list{
    display:grid;
    gap:13px;
}
.history-preview-item{
    border-left:5px solid #6f4ee8;
}
.history-preview-item[data-kind="delivery"]{
    border-left-color:#38a878;
}
.history-preview-item[data-kind="order"]{
    border-left-color:#398bd4;
}
@media(max-width:700px){
    .order-preview-list{
        grid-template-columns:1fr;
    }
}


/* Account Portal Beta v0.8.4 */
.membership-preview-card{
    position:relative;
    filter:grayscale(.75);
    opacity:.72!important;
    cursor:not-allowed!important;
    border:2px solid #b9bdc6!important;
    background:#f2f3f5!important;
}
.membership-preview-card:hover{
    transform:none!important;
}
.membership-preview-card .btn[disabled]{
    opacity:.65;
    cursor:not-allowed;
}
.preview-lock{
    position:absolute;
    top:13px;
    right:13px;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#d9dce2;
    border:1px solid #b7bbc4;
}
.membership-preview-price{
    font-size:1.35rem;
    font-weight:900;
}
.password-safety-notice{
    margin:4px 0 13px;
    padding:14px;
    border:2px solid #e0a932;
    border-radius:14px;
    background:#fff7d7;
    color:#4d3900;
}
.password-safety-notice p{
    margin:6px 0 0;
    line-height:1.45;
}