/* DesiPass mobile app — theme vars + motion. Component styling lives in the JSX. */
*{box-sizing:border-box}
html,body{margin:0;min-height:100vh;background:#ECE6F0;font-family:var(--dp-font-body);-webkit-font-smoothing:antialiased}
body{display:flex;align-items:center;justify-content:center;padding:28px 16px}
#root{display:flex;align-items:center;justify-content:center;width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
input{font-family:inherit}
img{display:block}
a{color:var(--red)}a:hover{opacity:.85}

/* phone surface (inside the device frame) */
.ph{--bg:#FFFFFF;--sur:#FFFFFF;--sur2:#FAF6EE;--paper:#FDFAF7;--ink:#1D0D31;--mut:#6B6478;--mut2:#9A93A6;--line:rgba(29,13,49,.10);--red:#E54558;--red-soft:#FFF0F2;--purple:#3B2E4D;--purple-soft:#ECD9FF;--fill:#3B2E4D;--price:#FD2E00;--green:#129E6A;--chip:#F4EEF8;--tabbg:rgba(255,255,255,.88);--shadow:0 2px 4px rgba(184,184,184,.5);--card-ring:linear-gradient(145deg,rgba(229,69,88,.22),rgba(123,92,255,.16) 52%,rgba(29,13,49,.06));--warn-bg:#FDEDE4;--warn-fg:#EA580C;--out-bg:#F3F4F6;--out-fg:rgba(0,0,0,.71);--logo-filter:none;
  position:relative;isolation:isolate;z-index:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--dp-font-body);font-size:14px;line-height:1.35}
.ph[data-theme=dark]{--bg:#140C1E;--sur:#1A1126;--sur2:#211830;--paper:#0F0817;--ink:#F7F2FA;--mut:#B6ACC3;--mut2:#877D95;--line:rgba(255,255,255,.10);--red:#F2596B;--red-soft:rgba(242,89,107,.14);--purple:#D3C4EC;--purple-soft:#3A2B4F;--fill:#5A4A75;--price:#FF6E4F;--green:#3ED598;--chip:#261C34;--tabbg:rgba(22,15,32,.9);--shadow:0 2px 8px rgba(0,0,0,.45);--card-ring:linear-gradient(145deg,rgba(242,89,107,.35),rgba(123,92,255,.3) 52%,rgba(255,255,255,.06));--warn-bg:rgba(234,88,12,.18);--warn-fg:#FFA26B;--out-bg:rgba(255,255,255,.08);--out-fg:rgba(255,255,255,.7)}

.dcard{border:1px solid transparent;border-radius:16px;padding:16px;background:linear-gradient(var(--sur),var(--sur)) padding-box,var(--card-ring) border-box;box-shadow:var(--shadow)}
.dp-date::-webkit-calendar-picker-indicator{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.dp-date{position:relative}
/* screens */
.scr{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;background:var(--bg)}
.scr::-webkit-scrollbar{display:none}
.hs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hs::-webkit-scrollbar{display:none}
.hs>*{scroll-snap-align:start}

/* motion */
.press{transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.press:active{transform:scale(.965)}
.fade-in{animation:dpFade .32s cubic-bezier(.2,.8,.2,1) both}
.push{animation:dpPush .42s cubic-bezier(.32,.72,0,1) both}
.push.out{animation:dpPushOut .34s cubic-bezier(.32,.72,0,1) both}
.sheet-bg{animation:dpFade .3s ease both}
.sheet-bg.out{animation:dpFadeOut .28s ease both}
.sheet{animation:dpSheet .46s cubic-bezier(.32,.72,0,1) both}
.sheet.out{animation:dpSheetOut .3s cubic-bezier(.4,0,1,1) both}
.rise{animation:dpRise .5s cubic-bezier(.2,.8,.2,1) both}
.skel{position:relative;overflow:hidden;background:var(--chip)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:dpShimmer 1.2s infinite}
.ph[data-theme=dark] .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
.burst{position:absolute;inset:0;pointer-events:none}
.burst i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--red);animation:dpBurst .6s cubic-bezier(.2,.8,.2,1) both}
.burst b{position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);animation:dpRing .55s ease-out both}
.pop{animation:dpPop .45s cubic-bezier(.34,1.56,.64,1) both}
.tick path{stroke-dasharray:40;stroke-dashoffset:40;animation:dpDraw .5s .25s ease-out forwards}

@keyframes dpShake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.shake{animation:dpShake .4s}
@keyframes dpRingFill{to{stroke-dashoffset:0}}
@keyframes dpFlyUp{0%{transform:translateY(0) scale(1);opacity:1}15%{transform:translateY(8px) scale(1.02)}75%{opacity:1}100%{transform:translateY(-270px) scale(.18);opacity:0}}
@keyframes dpCardIn{from{opacity:0;transform:translateY(60px) rotateX(35deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes dpScan{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes dpDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-6px);opacity:1}}
@keyframes spBeat{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@keyframes spDraw{to{stroke-dashoffset:0}}
@keyframes spPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes omChip{0%{opacity:0;transform:translateY(8px) scale(.9)}10%,70%{opacity:1;transform:none}85%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes omBuy{0%{opacity:0;transform:translateY(4px)}20%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
@keyframes omAlert{from{opacity:0;transform:translateY(-18px) scale(.96)}to{opacity:1}}
@keyframes omSeat{to{background:#E54558;transform:scale(1.18);box-shadow:0 0 12px rgba(229,69,88,.8)}}
@keyframes omTap{0%{transform:translate(260px,200px);opacity:0}15%{opacity:1}35%,45%{transform:translate(113px,53px) scale(.8)}50%{transform:translate(113px,53px) scale(1)}60%,72%{transform:translate(135px,53px) scale(.8)}80%{transform:translate(135px,53px) scale(1);opacity:1}100%{transform:translate(135px,53px);opacity:0}}
@keyframes siFloat{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes siMarq{from{transform:translateX(0)}to{transform:translateX(-33.33%)}}
@keyframes siBlob1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,30px) scale(1.15)}}
@keyframes siBlob2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,40px) scale(.9)}}
@keyframes rqTurn{0%,40%{transform:rotate(0)}60%,100%{transform:rotate(180deg)}}
@keyframes scTicket{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:70px;opacity:0}}
@keyframes dpFade{from{opacity:0}to{opacity:1}}
@keyframes dpFadeOut{from{opacity:1}to{opacity:0}}
@keyframes dpPush{from{transform:translateX(100%)}to{transform:none}}
@keyframes dpPushOut{from{transform:none}to{transform:translateX(100%)}}
@keyframes dpSheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes dpSheetOut{from{transform:none}to{transform:translateY(100%)}}
@keyframes dpRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes dpShimmer{to{transform:translateX(100%)}}
@keyframes dpBurst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes dpRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes dpPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes dpDraw{to{stroke-dashoffset:0}}

/* splash */
@keyframes dpBeamL{0%{transform:rotate(-38deg)}50%{transform:rotate(-12deg)}100%{transform:rotate(-30deg)}}
@keyframes dpBeamR{0%{transform:rotate(36deg)}50%{transform:rotate(10deg)}100%{transform:rotate(28deg)}}
@keyframes dpBeamC{0%{transform:rotate(8deg)}50%{transform:rotate(-8deg)}100%{transform:rotate(4deg)}}
@keyframes dpHaze{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes dpCrowd{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes dpCrowd2{0%,100%{transform:translateY(-4px)}50%{transform:translateY(3px)}}
@keyframes dpLogoIn{0%{opacity:0;transform:scale(.72);filter:blur(10px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1)}}
@keyframes dpFlash{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}
@keyframes dpTag{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dpSpark{0%{transform:translateY(0) scale(1);opacity:0}20%{opacity:1}100%{transform:translateY(-140px) scale(.3);opacity:0}}
@keyframes dpSpin{to{transform:rotate(360deg)}}
@keyframes dpPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.25);opacity:0}}

.ph{--stat-shadow:0 1px 2px rgba(29,13,49,.08),0 0 0 .5px rgba(29,13,49,.04)}.ph[data-theme=dark]{--stat-shadow:none}