@font-face{font-family:"Cairo";font-weight:400;font-display:swap;src:url(/fonts/cairo-arabic-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cairo";font-weight:700;font-display:swap;src:url(/fonts/cairo-arabic-700-normal.woff2) format("woff2")}
@font-face{font-family:"Cairo";font-weight:800;font-display:swap;src:url(/fonts/cairo-arabic-800-normal.woff2) format("woff2")}
@font-face{font-family:"Lalezar";font-weight:400;font-display:swap;src:url(/fonts/lalezar-arabic-400-normal.woff2) format("woff2")}
:root{--navy:#1D2B53;--navy2:#2A3A6B;--navy3:#16213F;--cream:#FFF9EC;--ink:#1B1B2F;--ink2:#4A4A63;--yel:#FFC400;--yel-d:#2B1B17;--cor:#FF5A4E;--teal:#11B5A4;--ok:#17784A;--bad:#C62F26;--line:#E6DFCB;--r:16px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--navy);color:var(--cream);font-family:"Cairo","Tahoma","Segoe UI",system-ui,sans-serif;font-size:clamp(14px,3.9vw,17px);line-height:1.65;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:radial-gradient(1200px 500px at 50% -10%,var(--navy2),var(--navy) 60%)}
#app{max-width:520px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));min-height:100dvh}
.boot{font-family:"Lalezar";font-size:64px;text-align:center;padding-top:30vh;color:var(--yel)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;touch-action:manipulation}
:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3,p{margin:0}
.top{display:flex;align-items:center;gap:10px;padding:6px 0 12px}
.logo{font-family:"Lalezar";font-size:30px;line-height:1;color:var(--yel);letter-spacing:.5px}
.tag{font-size:13px;color:#C9D2EE;line-height:1.4}
.sp{flex:1}
.ib{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.1);color:var(--cream);font-size:22px;display:grid;place-items:center}
.ib:active{transform:scale(.94)}
.card{background:var(--cream);color:var(--ink);border-radius:var(--r);padding:16px;margin:12px 0;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.card h2{font-size:17px;font-weight:800;margin-bottom:8px}
.lbl{display:block;font-weight:700;font-size:15px;margin:10px 0 6px}
.inp{width:100%;min-height:52px;border-radius:12px;border:2px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;font-size:18px}
.inp:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(255,196,0,.55)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border-radius:14px;font-weight:800;font-size:16px;padding:6px 14px}
.btn:active{transform:translateY(2px)}
.btn.pri{background:var(--yel);color:var(--yel-d);box-shadow:0 4px 0 #B58900}
.btn.pri:active{box-shadow:0 2px 0 #B58900}
.btn.sec{background:rgba(255,255,255,.12);color:var(--cream)}
.btn.lite{background:#fff;color:var(--ink);border:2px solid var(--line)}
.btn.dng{background:transparent;color:#FFB4AE;border:2px solid rgba(255,180,174,.4)}
.btn[disabled]{opacity:.45;pointer-events:none}
.row{display:flex;gap:10px}
.row>*{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rooms{display:grid;gap:10px}
.room{background:var(--cream);color:var(--ink);border-radius:var(--r);padding:14px;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.room h3{font-size:17px;font-weight:800;line-height:1.4}
.meta{font-size:14px;color:var(--ink2);margin:4px 0 10px;display:flex;flex-wrap:wrap;gap:4px 12px}
.pill{display:inline-block;border-radius:99px;padding:1px 10px;font-size:13px;font-weight:700;vertical-align:middle}
.pill.w{background:#D9F4E5;color:#0F5C37}
.pill.s{background:#FFE7C2;color:#7A4300}
.pill.f{background:#E7E7EE;color:#3B3B50}
.empty{text-align:center;color:#C9D2EE;padding:26px 8px;border:2px dashed rgba(255,255,255,.22);border-radius:var(--r)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:46px;padding:4px 16px;border-radius:99px;background:#fff;border:2px solid var(--line);color:var(--ink);font-weight:700}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.seg{display:grid;gap:8px}
.opt-card{display:block;text-align:right;width:100%;border-radius:14px;background:#fff;border:2px solid var(--line);padding:10px 14px;color:var(--ink)}
.opt-card[aria-pressed="true"]{border-color:var(--navy);background:#EEF1FB;box-shadow:inset 0 0 0 1px var(--navy)}
.opt-card b{display:block;font-size:17px}
.opt-card span{font-size:14px;color:var(--ink2)}
.sub{color:#C9D2EE;font-size:14px}
.sec-t{display:flex;align-items:center;gap:8px;margin:18px 2px 6px;font-weight:800;font-size:18px}
.dot{width:10px;height:10px;border-radius:50%;background:#888;display:inline-block}
.dot.on{background:#3DDC84}
.code{font-family:"Lalezar";font-size:28px;letter-spacing:6px;direction:ltr;color:var(--yel)}
.seats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seat{border-radius:var(--r);background:var(--cream);color:var(--ink);padding:8px 6px;text-align:center;min-height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.seat.e{background:transparent;border:2px dashed rgba(255,255,255,.28);color:#C9D2EE}
.seat .nm{font-weight:800;font-size:15px;line-height:1.3;word-break:break-word}
.seat .st{font-size:13px;color:var(--ink2)}
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:22px;flex:none;border:3px solid rgba(255,255,255,.7)}
.av.sm{width:28px;height:28px;font-size:15px;border-width:2px}
.syms{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sym{width:48px;height:48px;border-radius:50%;font-size:26px;display:grid;place-items:center;border:3px solid transparent}
.sym[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 3px var(--yel)}
.sym[disabled]{opacity:.28}
.hud{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#C9D2EE}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;margin:6px 0 10px}
.bar>i{display:block;height:100%;background:var(--yel);border-radius:99px;transition:width .3s}
.bar.tm>i{background:var(--cor);transition:width .25s linear}
.pl{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.pc{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border-radius:99px;padding:3px 12px 3px 4px;border:2px solid transparent;font-size:14px;font-weight:700}
.pc b{font-family:"Lalezar";font-size:18px;color:var(--yel);font-weight:400}
.pc.ok{border-color:#3DDC84}
.pc.me{background:rgba(255,196,0,.2)}
.pc.off{opacity:.5}
.pc .tg{font-size:12px;font-weight:700;color:#FFD9A0}
.q{background:var(--cream);color:var(--ink);border-radius:var(--r);padding:18px 16px;margin:6px 0 12px;font-size:20px;font-weight:700;line-height:1.95;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.opts{display:grid;gap:10px}
.o{position:relative;display:flex;align-items:center;gap:12px;text-align:right;width:100%;min-height:62px;padding:8px 12px;background:#fff;color:var(--ink);border-radius:14px;border:3px solid transparent;box-shadow:0 3px 0 rgba(0,0,0,.2);font-size:17px;font-weight:700;line-height:1.6}
.o .tx{flex:1}
.o:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.o[aria-pressed="true"]{border-color:var(--yel);background:#FFF4C9}
.o.cor{border-color:var(--ok);background:#E3F6EB}
.o.wr{border-color:var(--bad);background:#FBE6E4}
.o.dim{background:#E6E6EE;color:#3B3B50}
.o[disabled]{pointer-events:none}
.o .mk{font-size:22px;font-weight:800;min-width:26px;text-align:center}
.o .who{display:flex;gap:2px;flex:none}
.sh{flex:none;width:44px;height:44px}
.ex{background:var(--cream);color:var(--ink);border-radius:var(--r);padding:12px 14px;margin:12px 0}
.ex h3{font-size:16px;font-weight:800;margin-bottom:6px}
.ex div{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.ex div:first-of-type{border-top:0}
.ex p{font-size:15px;line-height:1.7;color:var(--ink2)}
.ex .c b{color:var(--ok)}
.wait{margin:10px 0;border-radius:14px;padding:10px 14px;background:rgba(255,255,255,.1);font-size:15px;font-weight:700;text-align:center}
.wait.slow{background:rgba(255,196,0,.18);color:#FFE29A}
.wait .btn{margin-top:8px;min-height:46px;font-size:16px}
.bell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:128px;height:128px;margin:6px auto 12px;border-radius:50%;background:var(--yel);color:var(--yel-d);font-family:"Lalezar";font-size:28px;box-shadow:0 6px 0 #B58900}
.bell:active{transform:translateY(3px);box-shadow:0 3px 0 #B58900}
.bell[disabled]{opacity:.4;pointer-events:none;box-shadow:none}
.bell svg{width:54px;height:54px}
.react{display:flex;justify-content:space-between;gap:6px;margin-top:14px;padding:6px;border-radius:99px;background:rgba(255,255,255,.1)}
.react button{flex:1;min-height:46px;border-radius:99px;background:transparent;font-size:24px;line-height:1}
.react button:active{background:rgba(255,255,255,.2)}
.rank{display:grid;gap:8px}
.rk{display:flex;align-items:center;gap:12px;background:var(--cream);color:var(--ink);border-radius:var(--r);padding:10px 14px}
.rk .n{font-family:"Lalezar";font-size:30px;width:34px;text-align:center;color:var(--navy)}
.rk.first{background:var(--yel);color:var(--yel-d)}
.rk.first .n{color:var(--yel-d)}
.rk .nm{flex:1;font-weight:800;font-size:18px}
.rk .sc{font-family:"Lalezar";font-size:26px}
.rk small{display:block;font-size:13px;font-weight:400;opacity:.8}
.big{font-family:"Lalezar";font-size:40px;text-align:center;color:var(--yel);line-height:1.3;margin:6px 0}
#net{position:fixed;top:0;left:0;right:0;z-index:30;text-align:center;font-size:14px;font-weight:700;background:#B3261E;color:#fff;padding:calc(4px + env(safe-area-inset-top)) 8px 4px;transform:translateY(-110%);transition:transform .2s}
#net.on{transform:none}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,40px);opacity:0;background:#fff;color:var(--ink);padding:10px 18px;border-radius:14px;font-weight:700;font-size:16px;box-shadow:0 6px 24px rgba(0,0,0,.35);max-width:min(92vw,460px);text-align:center;z-index:40;pointer-events:none;transition:.25s}
#toast.on{transform:translate(-50%,0);opacity:1}
#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.fl{position:absolute;bottom:90px;font-size:34px;animation:rise 2.6s ease-out forwards;text-align:center;line-height:1.1}
.fl small{display:block;font-size:11px;font-weight:700;background:rgba(0,0,0,.55);color:#fff;border-radius:99px;padding:0 8px}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:1;transform:translateY(-30px) scale(1.1)}100%{transform:translateY(-62vh) scale(1);opacity:0}}
.conf{position:absolute;top:-20px;width:10px;height:14px;animation:fall 2.8s ease-in forwards}
@keyframes fall{to{transform:translateY(112vh) rotate(540deg);opacity:.9}}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
.ringing{animation:ring .7s ease-in-out;transform-origin:50% 12%}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 .fl{animation:none!important;opacity:1;bottom:auto;top:40%;left:calc(50% - 20px)}
}

.mark{width:52px;height:52px;border-radius:14px;flex:none}
.btn .ic{font-size:15px;line-height:1}
@media (max-width:360px){#app{padding-left:10px;padding-right:10px}.btn{font-size:15px;padding:4px 10px}.mark{width:44px;height:44px}}
.room .btn.sec,.card .btn.sec{background:#fff;color:var(--ink);border:2px solid var(--line);box-shadow:0 3px 0 rgba(0,0,0,.08)}