/* Customer dashboard visual layer 2026-08-25 */
:root{--c-navy:#0b1930;--c-blue:#1f6feb;--c-ink:#172033;--c-muted:#718096;--c-line:#e5eaf1;--c-bg:#f4f7fb}
#appScreen.app-screen{min-height:100vh;padding:32px 36px 48px 286px;color:var(--c-ink);background:radial-gradient(circle at 82% -10%,rgba(31,111,235,.09),transparent 28%),var(--c-bg)}
#appScreen .app-shell{width:min(1440px,100%);margin:0 auto}
#appScreen .topbar{position:fixed;z-index:40;inset:0 auto auto 0;width:250px;height:106px;padding:23px 25px;display:flex;align-items:center;gap:11px;border:0;background:var(--c-navy)}
#appScreen .topbar-logo{width:45px;height:45px;object-fit:contain;filter:brightness(0) invert(1)}
#appScreen .topbar-brand-copy{display:grid;gap:2px}.topbar-brand-copy strong{color:#fff;font-size:15px;font-weight:950;letter-spacing:.09em}.topbar-brand-copy span{color:#7f95b2;font-size:10px}
#appScreen .topbar h1,#appScreen .menu-toggle{display:none}
#appScreen .bottom-nav{position:fixed;z-index:39;inset:106px auto 0 0;width:250px;height:auto;padding:20px 15px 18px;display:flex;flex-direction:column;align-items:stretch;gap:6px;border:0;border-radius:0;overflow:visible;transform:none;background:var(--c-navy);box-shadow:16px 0 36px rgba(11,25,48,.08)}
#appScreen .bottom-nav::before{content:"WORKSPACE";margin:0 14px 10px;color:#607795;font-size:9px;font-weight:900;letter-spacing:.16em}
#appScreen .nav-item{position:relative;width:100%;min-width:0;min-height:49px;padding:0 14px;display:flex;flex:0 0 auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:13px;border:1px solid transparent;border-radius:11px;color:#9fb0c6;background:transparent;font-size:13px;font-weight:750;text-align:left;transition:.18s ease}
#appScreen .nav-item strong{width:24px;margin:0;color:#7389a5;font-size:20px;text-align:center}
#appScreen .nav-item:hover{color:#e8f1ff;background:rgba(255,255,255,.055);transform:translateX(2px)}
#appScreen .nav-item.active{color:#fff;border-color:rgba(93,158,255,.25);background:linear-gradient(100deg,rgba(31,111,235,.36),rgba(31,111,235,.12));box-shadow:inset 3px 0 0 #4b91ff}
#appScreen .nav-item.active strong{color:#68a5ff}#appScreen .nav-item.active::after{display:none}#appScreen #logoutButton{margin:auto 0 0;border-top:1px solid rgba(255,255,255,.08);border-radius:0}
#appScreen .hero{position:relative;min-height:264px;margin:0 0 24px;padding:34px 38px 30px;overflow:hidden;border:0;border-radius:22px;color:#fff;background:radial-gradient(circle at 87% 15%,rgba(91,154,255,.42),transparent 26%),linear-gradient(128deg,#0d2340,#11386c 62%,#1f6feb 145%);box-shadow:0 18px 42px rgba(20,54,96,.18)}
#appScreen .hero::before{content:"";position:absolute;inset:0;width:auto;height:auto;opacity:.42;border-radius:inherit;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(90deg,transparent 28%,#000)}
#appScreen .hero::after{content:"";position:absolute;right:-72px;bottom:-136px;width:390px;height:390px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 42px rgba(255,255,255,.025),0 0 0 84px rgba(255,255,255,.018);background:transparent}
#appScreen .hero-heading{position:relative;z-index:2}
#appScreen .hero-eyebrow,#appScreen .panel-title-group>span,#appScreen .section-heading span{display:block;margin-bottom:7px;color:#6ba6ff;font-size:10px;font-weight:950;letter-spacing:.16em}
#appScreen .hero h2{margin:0 0 9px;color:#fff;font-size:clamp(22px,2vw,30px);line-height:1.3}#appScreen .hero h2 strong{color:#fff;font-size:inherit}#appScreen .hero-heading>p{position:relative;z-index:2;margin:0;color:#afc4dd;font-size:13px}
#appScreen .service-live{position:absolute;z-index:3;top:34px;right:35px;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#d9e8f8;background:rgba(5,18,36,.28);font-size:11px;font-weight:750;backdrop-filter:blur(8px)}
#appScreen .service-live i{width:7px;height:7px;border-radius:50%;background:#3bd58a;box-shadow:0 0 0 4px rgba(59,213,138,.14)}#appScreen .truck-art,#appScreen .pin{display:none}
#appScreen .stats{position:absolute;z-index:3;right:34px;bottom:30px;left:34px;width:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
#appScreen .stat{min-height:92px;padding:14px 16px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:1fr 1fr;align-items:center;gap:0 11px;border:1px solid rgba(255,255,255,.13);border-radius:13px;color:#fff;background:rgba(255,255,255,.09);box-shadow:none;backdrop-filter:blur(9px);transition:.18s ease}
#appScreen .stat:hover,#appScreen .stat:focus-visible{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.15);transform:translateY(-2px);outline:0}
#appScreen .stat-icon{grid-row:1/3;width:40px;height:40px;margin:0;display:grid;place-items:center;border-radius:11px;color:#dceaff;background:rgba(255,255,255,.11);font-size:17px}
#appScreen .stat span{align-self:end;color:#a9bfd7;font-size:11px;font-weight:750}#appScreen .stat strong,#appScreen .stat.orange strong,#appScreen .stat.green strong{align-self:start;margin:0;color:#fff;font-size:25px;line-height:1.15}
#appScreen .cta-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;margin:0 0 24px}
#appScreen .section-heading{grid-column:1/-1;display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 2px 1px}
#appScreen .section-heading h3{margin:0;color:var(--c-ink);font-size:20px;letter-spacing:-.025em}#appScreen .section-heading p{margin:0 0 2px;color:var(--c-muted);font-size:12px}
#appScreen .main-cta,#appScreen .receipt-cta{position:relative;min-height:112px;padding:22px;display:grid;grid-template-columns:52px 1fr auto;gap:15px;align-items:center;overflow:hidden;border:1px solid var(--c-line);border-radius:16px;color:var(--c-ink);text-align:left;background:#fff;box-shadow:0 7px 24px rgba(17,35,61,.055);transition:.18s ease}
#appScreen .main-cta{border-color:#1f6feb;background:linear-gradient(120deg,#1b63d2,#207df3);box-shadow:0 13px 28px rgba(31,111,235,.22)}
#appScreen .main-cta:hover,#appScreen .receipt-cta:hover{transform:translateY(-3px);box-shadow:0 15px 34px rgba(17,35,61,.12)}
#appScreen .main-cta::after{content:"";position:absolute;right:-28px;bottom:-55px;width:130px;height:130px;border:22px solid rgba(255,255,255,.06);border-radius:50%}
#appScreen .cta-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;color:#2569c7;background:#edf4ff;font-size:25px}#appScreen .main-cta .cta-icon{color:#fff;background:rgba(255,255,255,.16)}
#appScreen .cta-title{color:var(--c-ink);font-size:16px;font-weight:900}#appScreen .main-cta .cta-title{color:#fff}#appScreen .cta-sub{margin-top:5px;color:#8190a4;font-size:11px}#appScreen .main-cta .cta-sub{color:#c8dcfa}#appScreen .chevron{position:relative;z-index:2;color:#9ba8b8;font-size:28px}#appScreen .main-cta .chevron{color:#fff}
#appScreen #progressPanel{margin:0 0 20px;padding:23px 24px;border:1px solid var(--c-line);border-radius:17px;color:var(--c-ink);background:#fff;box-shadow:0 7px 24px rgba(17,35,61,.045)}
#appScreen .panel-head{margin:0 0 17px;padding:0;border:0;background:transparent}#appScreen .panel-title-group h3{margin:0;color:var(--c-ink);font-size:19px}#appScreen .panel-title-group>span{margin-bottom:4px}
#appScreen .text-link{color:#52709a;font-size:12px;font-weight:800}#appScreen .search-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}
#appScreen .search-row input{min-height:44px;padding-left:42px;border:1px solid var(--c-line);border-radius:11px;color:var(--c-ink);background:#f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238190a4' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 14px center/17px no-repeat}
#appScreen .filter-button{min-height:44px;border-radius:11px;border-color:var(--c-line);color:#53657d;background:#fff}#appScreen .chips{margin-top:12px}#appScreen .chip{min-height:32px;border-radius:999px;border-color:var(--c-line);color:#64748b;background:#fff}#appScreen .chip.active{border-color:#1f6feb;color:#1c64cc;background:#edf5ff;box-shadow:none}
#appScreen .order-card{border-color:var(--c-line);border-radius:13px;background:#fff}
#appScreen .quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#appScreen .quick{min-height:92px;padding:16px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:1fr 1fr;align-items:center;gap:0 12px;border:1px solid var(--c-line);border-radius:15px;text-align:left;background:#fff;box-shadow:0 6px 18px rgba(17,35,61,.04);transition:.18s ease}
#appScreen .quick:hover{border-color:#b7ccec;transform:translateY(-2px)}#appScreen .quick-icon{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:#276bc8;background:#edf4ff;font-size:20px}#appScreen .quick strong{align-self:end;color:var(--c-ink);font-size:13px}#appScreen .quick>span:last-child{align-self:start;color:#8a97a8;font-size:10px}#appScreen .quick.receipt-arrival strong,#appScreen .quick.receipt-arrival .receipt-count{color:var(--c-ink)}
#appScreen button:focus-visible,#appScreen [role=button]:focus-visible,#appScreen input:focus-visible{outline:3px solid rgba(31,111,235,.22);outline-offset:2px}
@media(max-width:1120px){#appScreen.app-screen{padding:28px 24px 40px 234px}#appScreen .topbar,#appScreen .bottom-nav{width:210px}#appScreen .hero{min-height:330px}#appScreen .stat{grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;gap:4px;padding:10px 5px;text-align:center}#appScreen .stat-icon{grid-row:auto;width:34px;height:34px;font-size:14px}#appScreen .cta-grid{grid-template-columns:1fr 1fr}#appScreen .main-cta{grid-column:1/-1}#appScreen .quick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
#appScreen.app-screen{padding:76px 12px 28px;background:#f4f7fb}#appScreen .topbar{inset:0 0 auto 0;width:100%;height:62px;padding:9px 14px;justify-content:flex-start;box-shadow:0 5px 18px rgba(5,18,36,.16)}#appScreen .topbar-logo{width:36px;height:36px}#appScreen .topbar-brand-copy strong{font-size:13px}#appScreen .topbar-brand-copy span{font-size:9px}
#appScreen .menu-toggle{width:38px;height:38px;margin-left:auto;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);border-radius:10px;color:#fff;background:rgba(255,255,255,.07)}
#appScreen .bottom-nav{display:none;inset:68px 12px auto auto;width:min(288px,calc(100% - 24px));height:auto;padding:10px;gap:4px;border:1px solid #213b5d;border-radius:15px;background:rgba(11,25,48,.985);box-shadow:0 20px 44px rgba(7,20,39,.3)}#appScreen.menu-open .bottom-nav{display:flex}#appScreen .nav-item{min-height:43px;padding:0 12px}
#appScreen .hero{min-height:0;margin-bottom:18px;padding:22px 14px 14px;display:grid;align-content:start;gap:18px;border-radius:18px}
#appScreen .hero-heading{padding-right:34px}
#appScreen .hero h2{font-size:21px;line-height:1.28}#appScreen .hero-heading>p{max-width:280px;font-size:11px;line-height:1.55}#appScreen .service-live{top:19px;right:17px;padding:6px 8px}#appScreen .service-live span{display:none}
#appScreen .stats{position:relative;right:auto;bottom:auto;left:auto;width:100%;gap:5px}
#appScreen .stat{min-height:86px;padding:8px 2px;display:flex;flex-direction:column;justify-content:center;gap:4px;border-radius:11px}
#appScreen .stat-icon{width:29px;height:29px;font-size:12px}#appScreen .stat span{font-size:9px;line-height:1.15;white-space:nowrap}#appScreen .stat strong,#appScreen .stat.orange strong,#appScreen .stat.green strong{font-size:19px;line-height:1}
#appScreen .cta-grid{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}#appScreen .section-heading{align-items:start}#appScreen .section-heading h3{font-size:18px}#appScreen .section-heading>p{display:none}#appScreen .main-cta{grid-column:1/-1}
#appScreen .main-cta,#appScreen .receipt-cta{min-height:86px;padding:14px;display:grid;grid-template-columns:40px 1fr auto;gap:10px;text-align:left}#appScreen .main-cta .cta-icon,#appScreen .receipt-cta .cta-icon{width:40px;height:40px;border-radius:11px;font-size:19px}#appScreen .main-cta .cta-title,#appScreen .receipt-cta .cta-title{font-size:12px}#appScreen .main-cta .cta-sub,#appScreen .receipt-cta .cta-sub{display:block;margin-top:3px;font-size:9px;line-height:1.35}#appScreen .main-cta .chevron,#appScreen .receipt-cta .chevron{display:block;font-size:22px}
#appScreen #progressPanel{padding:18px 14px}#appScreen .search-row{grid-template-columns:1fr}#appScreen .filter-button{width:100%}#appScreen .chips{display:flex;overflow-x:auto;flex-wrap:nowrap}#appScreen .chip{flex:0 0 auto}
#appScreen .quick-grid{grid-template-columns:1fr 1fr;gap:8px}#appScreen .quick{min-height:82px;padding:12px;grid-template-columns:34px 1fr;gap:0 9px}#appScreen .quick-icon{width:34px;height:34px;font-size:16px}#appScreen .quick strong{font-size:11px}}
@media(max-width:420px){#appScreen .hero{min-height:0;padding-left:12px;padding-right:12px;gap:15px}#appScreen .stat{min-height:82px}#appScreen .stat span{font-size:8px;letter-spacing:-.04em}#appScreen .receipt-cta .cta-sub{display:none}}

/* Quick actions and live delivery: refined customer workspace */
#appScreen .cta-grid{gap:12px;margin-bottom:18px}
#appScreen .section-heading{margin:0 2px 2px;align-items:center}
#appScreen .section-heading span{margin-bottom:5px;color:#4b87ed;font-size:9px;letter-spacing:.19em}
#appScreen .section-heading h3{font-size:19px;font-weight:950;letter-spacing:-.035em}
#appScreen .main-cta,#appScreen .receipt-cta{
  isolation:isolate;border-radius:18px;box-shadow:0 8px 24px rgba(20,42,75,.07);
  transform:translateZ(0);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease
}
#appScreen .main-cta{
  border-color:#1769df;background:linear-gradient(125deg,#175cc8 0%,#247df0 58%,#2589f6 100%);
  box-shadow:0 14px 30px rgba(30,111,226,.24)
}
#appScreen .main-cta::before{
  content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 42%);pointer-events:none
}
#appScreen .main-cta::after{right:-42px;bottom:-74px;width:165px;height:165px;border-width:28px}
#appScreen .receipt-cta{border-color:#e2e8f1;background:linear-gradient(145deg,#fff,#fbfcff)}
#appScreen .receipt-cta::before{
  content:"";position:absolute;inset:12px auto 12px 0;width:3px;border-radius:0 4px 4px 0;background:#82aef5;opacity:.72
}
#appScreen .main-cta:hover,#appScreen .receipt-cta:hover{transform:translateY(-2px)}
#appScreen .receipt-cta:hover{border-color:#b9cef0;box-shadow:0 13px 30px rgba(20,42,75,.11)}
#appScreen .cta-icon{box-shadow:inset 0 0 0 1px rgba(48,105,190,.04)}
#appScreen .main-cta .cta-icon{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
#appScreen .chevron{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#f1f5fb;font-size:22px;line-height:1}
#appScreen .main-cta .chevron{background:rgba(255,255,255,.13)}

#appScreen #progressPanel{
  position:relative;overflow:hidden;border-color:#e0e7f0;border-radius:19px;
  background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);box-shadow:0 10px 30px rgba(20,42,75,.065)
}
#appScreen #progressPanel::before{
  content:"";position:absolute;top:0;right:0;left:0;height:3px;background:linear-gradient(90deg,#2677e8,#67a8ff 58%,transparent)
}
#appScreen #progressPanel .panel-head{align-items:center;margin-bottom:15px}
#appScreen #progressPanel .panel-title-group>span{color:#4b87ed;font-size:9px;letter-spacing:.19em}
#appScreen #progressPanel .panel-title-group h3{font-size:20px;font-weight:950;letter-spacing:-.035em}
#appScreen #progressPanel .text-link{
  min-height:32px;padding:0 10px;display:inline-flex;align-items:center;border:1px solid #e0e7f1;border-radius:999px;
  color:#426792;background:#f8faff;font-size:10px;font-weight:900
}
#appScreen .search-row{align-items:stretch;margin-bottom:10px}
#appScreen .search-row input{min-height:48px;border-color:#dce4ef;border-radius:13px;background-color:#f8faff;transition:.18s ease}
#appScreen .search-row input:focus{border-color:#7eaaed;background-color:#fff;box-shadow:0 0 0 4px rgba(38,119,232,.1)}
#appScreen .filter-button{
  min-height:48px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-color:#dce4ef;border-radius:13px;color:#395572;background:#fff;font-size:12px
}
#appScreen .filter-button::before{content:"☷";color:#397bd9;font-size:16px}
#appScreen .filter-button:hover{border-color:#9ebce7;background:#f5f9ff}
#appScreen .chips{gap:7px;margin:0 0 12px;padding:2px 0 4px;scrollbar-width:none}
#appScreen .chips::-webkit-scrollbar{display:none}
#appScreen .chip{min-height:34px;padding:0 14px;border-radius:999px;font-size:11px;font-weight:850;transition:.16s ease}
#appScreen .chip:hover{border-color:#aac4eb;color:#2766be;background:#f4f8ff}
#appScreen .chip.active{border-color:#2677e8;color:#fff;background:linear-gradient(120deg,#1764d5,#2d86f3);box-shadow:0 5px 12px rgba(38,119,232,.2)}

#appScreen .orders-list .order-card.order-empty-state{
  min-height:112px;padding:16px;grid-template-columns:64px minmax(0,1fr);gap:14px;
  border:1px dashed #cbd8ea;border-radius:15px;background:linear-gradient(135deg,#f8fbff,#fff)
}
#appScreen .order-empty-state .car-box{min-height:64px;border:1px solid #e7edf5;background:#fff;color:#8da0b8}
#appScreen .order-empty-state .car-icon{border-color:#35516f;opacity:.85}
#appScreen .order-empty-state .order-main strong{font-size:13px;color:#24364b}
#appScreen .order-empty-state .order-meta{margin-top:6px;color:#75869b;font-size:11px;line-height:1.45}

#appScreen .quick-grid{gap:10px;margin-bottom:18px}
#appScreen .quick{
  position:relative;min-height:92px;overflow:hidden;border-color:#e0e7f0;border-radius:17px;
  background:linear-gradient(145deg,#fff,#fbfcff);box-shadow:0 7px 20px rgba(20,42,75,.055)
}
#appScreen .quick::after{content:"›";position:absolute;top:50%;right:14px;transform:translateY(-50%);color:#9babc0;font-size:19px;font-weight:500}
#appScreen .quick:hover{border-color:#b8cceb;box-shadow:0 11px 25px rgba(20,42,75,.1);transform:translateY(-2px)}
#appScreen .quick-icon{color:#2674d8;background:#edf5ff}
#appScreen .quick.receipt-departure .quick-icon{color:#176bd3;background:#eaf3ff}
#appScreen .quick.receipt-arrival .quick-icon{color:#8a5a15;background:#fff4df}
#appScreen .quick:nth-child(3) .quick-icon{color:#6a55c7;background:#f1efff}
#appScreen .quick:nth-child(4) .quick-icon{color:#0d7c61;background:#e8f8f3}
#appScreen .quick strong{padding-right:18px;font-weight:900}
#appScreen .quick>span:last-child{padding-right:18px}

@media(max-width:760px){
  #appScreen .cta-grid{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:17px}
  #appScreen .section-heading{margin-bottom:1px}
  #appScreen .main-cta{grid-column:1/-1;min-height:88px;padding:15px;display:grid;grid-template-columns:42px 1fr 30px;gap:11px;align-items:center;text-align:left}
  #appScreen .receipt-cta{min-height:88px;padding:13px 11px;display:grid;grid-template-columns:38px minmax(0,1fr) 24px;gap:8px;align-items:center;text-align:left}
  #appScreen .main-cta .cta-icon{width:42px;height:42px}
  #appScreen .receipt-cta .cta-icon{width:38px;height:38px}
  #appScreen .main-cta .cta-title{font-size:13px}#appScreen .receipt-cta .cta-title{font-size:11px}
  #appScreen .main-cta .cta-sub,#appScreen .receipt-cta .cta-sub{display:block;font-size:9px;line-height:1.4}
  #appScreen .main-cta .chevron,#appScreen .receipt-cta .chevron{display:grid;width:26px;height:26px;font-size:19px}
  #appScreen #progressPanel{padding:17px 14px 15px}
  #appScreen #progressPanel .panel-head{margin-bottom:13px}
  #appScreen .search-row{grid-template-columns:minmax(0,1fr) auto;gap:7px}
  #appScreen .search-row input{min-height:46px;padding-left:39px;font-size:12px;background-position:13px center}
  #appScreen .filter-button{width:auto;min-width:90px;min-height:46px;padding:0 11px;font-size:11px}
  #appScreen .chips{margin-right:-14px;padding-right:14px}
  #appScreen .chip{min-height:33px;padding:0 13px}
  #appScreen .quick-grid{grid-template-columns:1fr 1fr;gap:9px}
  #appScreen .quick{min-height:84px;padding:12px 10px;grid-template-columns:36px minmax(0,1fr);gap:0 9px}
  #appScreen .quick-icon{width:36px;height:36px;font-size:16px}
  #appScreen .quick strong{font-size:11px}#appScreen .quick>span:last-child{font-size:9px}
  #appScreen .quick::after{right:9px;font-size:16px}
}

@media(max-width:390px){
  #appScreen .receipt-cta{padding-inline:8px;grid-template-columns:34px minmax(0,1fr) 18px;gap:6px}
  #appScreen .receipt-cta .cta-icon{width:34px;height:34px}
  #appScreen .receipt-cta .cta-sub{display:none}
  #appScreen .filter-button{min-width:48px;width:48px;padding:0;font-size:0}
  #appScreen .filter-button::before{font-size:18px}
}
@media(prefers-reduced-motion:reduce){#appScreen *,#appScreen *::before,#appScreen *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Customer premium visual system — typography scale is preserved */
body[data-customer-page]{--customer-accent:#2176df;--customer-accent-2:#58a9ff;--customer-soft:#edf6ff;--customer-ring:rgba(33,118,223,.15)}
body[data-customer-page="new-order"]{--customer-accent:#176fe3;--customer-accent-2:#49a3ff;--customer-soft:#edf6ff;--customer-ring:rgba(23,111,227,.15)}
body[data-customer-page="progress"]{--customer-accent:#0f8e82;--customer-accent-2:#42c4ad;--customer-soft:#ebfaf6;--customer-ring:rgba(15,142,130,.15)}
body[data-customer-page="receipts"]{--customer-accent:#6657c8;--customer-accent-2:#9c8ff1;--customer-soft:#f2f0ff;--customer-ring:rgba(102,87,200,.15)}
body[data-customer-page="support"]{--customer-accent:#1681a8;--customer-accent-2:#51bfd4;--customer-soft:#ecf9fb;--customer-ring:rgba(22,129,168,.15)}
body[data-customer-page="my"]{--customer-accent:#7656b8;--customer-accent-2:#ae8ce7;--customer-soft:#f5efff;--customer-ring:rgba(118,86,184,.15)}

#appScreen.app-screen{background:
radial-gradient(circle at 84% -8%,rgba(41,126,224,.14),transparent 27%),
radial-gradient(circle at 18% 100%,rgba(24,158,133,.07),transparent 28%),
linear-gradient(180deg,#f5f8fc,#edf3f8)}
#appScreen .topbar{background:linear-gradient(145deg,#071a31,#0b294b);box-shadow:inset -1px 0 rgba(255,255,255,.05)}
#appScreen .bottom-nav{background:linear-gradient(180deg,#0b294b 0%,#071a31 72%);box-shadow:18px 0 48px rgba(7,24,45,.12)}
#appScreen .bottom-nav::after{position:absolute;right:16px;bottom:14px;left:16px;height:110px;border-radius:24px;background:radial-gradient(circle at 50% 100%,rgba(55,137,229,.12),transparent 68%);content:"";pointer-events:none}
#appScreen .nav-item{z-index:1}
#appScreen .nav-item strong{display:grid;height:29px;place-items:center;border:1px solid rgba(255,255,255,.055);border-radius:9px;background:rgba(255,255,255,.035);transition:.18s ease}
#appScreen .nav-item:hover strong{border-color:rgba(104,176,255,.2);background:rgba(75,150,235,.12)}
#appScreen .nav-item.active{border-color:color-mix(in srgb,var(--customer-accent-2) 30%,transparent);background:linear-gradient(105deg,color-mix(in srgb,var(--customer-accent) 38%,transparent),rgba(255,255,255,.035));box-shadow:inset 3px 0 0 var(--customer-accent-2),0 8px 22px rgba(2,16,32,.12)}
#appScreen .nav-item.active strong{border-color:color-mix(in srgb,var(--customer-accent-2) 34%,transparent);background:color-mix(in srgb,var(--customer-accent) 25%,transparent);color:#fff}

#appScreen .hero{border:1px solid rgba(255,255,255,.08);background:
radial-gradient(circle at 87% 14%,rgba(72,177,255,.36),transparent 24%),
radial-gradient(circle at 62% 120%,rgba(47,114,210,.25),transparent 36%),
linear-gradient(130deg,#081d36 0%,#10416f 64%,#126ec8 125%);
box-shadow:0 24px 58px rgba(11,52,94,.2),inset 0 1px rgba(255,255,255,.08)}
#appScreen .service-live{border-color:rgba(133,203,255,.22);background:rgba(4,18,35,.38);box-shadow:inset 0 1px rgba(255,255,255,.06)}
#appScreen .stat{border-color:rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.065));box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 22px rgba(3,23,45,.08)}
#appScreen .stat:hover,#appScreen .stat:focus-visible{border-color:rgba(119,194,255,.46);background:linear-gradient(145deg,rgba(255,255,255,.19),rgba(255,255,255,.1))}

#appScreen .main-cta{border-color:#2579df;background:
radial-gradient(circle at 92% 18%,rgba(113,195,255,.26),transparent 30%),
linear-gradient(125deg,#155fc9,#1f82ed);box-shadow:0 16px 36px rgba(31,111,225,.24),inset 0 1px rgba(255,255,255,.09)}
#appScreen .receipt-cta{border-color:#dbe5ef;background:linear-gradient(145deg,#fff,#f8fbff);box-shadow:0 9px 26px rgba(21,47,80,.06)}
#appScreen .receipt-cta:hover{border-color:color-mix(in srgb,var(--customer-accent) 28%,#d6e2ee);box-shadow:0 14px 32px rgba(20,56,96,.11)}
#appScreen .receipt-cta .cta-icon{background:var(--customer-soft);color:var(--customer-accent)}

#appScreen #progressPanel{border-color:#d8e4ef;background:rgba(255,255,255,.98);box-shadow:0 20px 55px rgba(19,48,80,.085),inset 0 1px #fff}
#appScreen #progressPanel::before{background:linear-gradient(90deg,var(--customer-accent),var(--customer-accent-2),transparent 82%)}
#appScreen #progressPanel .panel-head{padding-bottom:14px;border-bottom:1px solid #e8eef5}
#appScreen .search-row{padding:9px;border:1px solid #e1e9f2;border-radius:15px;background:#f6f9fc;box-shadow:inset 0 1px 2px rgba(23,48,79,.035)}
#appScreen .search-row input{border-color:transparent;background-color:#fff;box-shadow:0 5px 15px rgba(27,54,88,.055)}
#appScreen .search-row input:focus{border-color:color-mix(in srgb,var(--customer-accent) 42%,#cad9e7);box-shadow:0 0 0 4px var(--customer-ring),0 5px 15px rgba(27,54,88,.055)}
#appScreen .filter-button{border-color:#d7e3ed;background:linear-gradient(#fff,#f5f8fb);box-shadow:0 4px 11px rgba(25,52,84,.045)}
#appScreen .chip.active{border-color:var(--customer-accent);background:linear-gradient(120deg,var(--customer-accent),var(--customer-accent-2));box-shadow:0 6px 14px var(--customer-ring)}
#appScreen .order-card{border-color:#dbe5ef;background:linear-gradient(145deg,#fff,#fbfdff);box-shadow:0 9px 26px rgba(22,49,81,.055);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
#appScreen .order-card:hover{border-color:color-mix(in srgb,var(--customer-accent) 27%,#d6e2ed);box-shadow:0 14px 34px rgba(20,58,98,.1);transform:translateY(-1px)}

#appScreen .quick{border-color:#dbe5ef;background:linear-gradient(145deg,#fff,#f9fbfe);box-shadow:0 8px 23px rgba(22,49,81,.055)}
#appScreen .quick:hover{border-color:color-mix(in srgb,var(--customer-accent) 28%,#d6e2ed);box-shadow:0 13px 30px rgba(20,58,98,.1)}
#appScreen .quick-icon{background:var(--customer-soft);color:var(--customer-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--customer-accent) 7%,transparent)}

@media(max-width:760px){
#appScreen .bottom-nav{background:linear-gradient(180deg,rgba(9,36,65,.99),rgba(5,21,40,.99))}
#appScreen .bottom-nav::after{height:70px}
#appScreen .search-row{padding:7px}
}