:root{--deep:#0E2240;--river:#1B3766;--brand:#4A5F82;--sky:#A7B3C6;--foam:#F5F0E6;--paper:#FCFAF5;--ink:#0F1B2D;--muted:#556070;--line:rgba(14,34,64,.12);--copper:#1B3766;--gold:#C9A46A;--ok:#2F7D55;--okb:rgba(47,125,85,.12);--warn:#B7791F;--warnb:rgba(201,138,27,.14);--bad:#B83A2E;--badb:rgba(184,58,46,.1);--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0;padding:0;font-variant-numeric:lining-nums tabular-nums}
html{-webkit-text-size-adjust:100%}
body{font-family:Manrope,system-ui,sans-serif;background:var(--foam);color:var(--ink);font-size:14px;line-height:20px;min-height:100vh;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
button:disabled{cursor:not-allowed;opacity:.45}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
h1,h2,.serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;letter-spacing:-.01em}
h1{font-size:36px;line-height:40px}h2{font-size:30px;line-height:36px}h3{font-size:16px;line-height:24px;font-weight:700}
.muted{color:var(--muted)}.sm{font-size:12px;line-height:16px}
.wrap{max-width:1360px;margin:0 auto;padding:24px}
.row{display:flex;align-items:center;gap:8px}.sp{justify-content:space-between}.wr{flex-wrap:wrap}.f1{flex:1;min-width:0}
.grid{display:grid;gap:16px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.head p{color:var(--muted);margin-top:4px}

/* tugmalar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;font-weight:600;white-space:nowrap;transition:transform .2s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.btn:active{transform:scale(.98)}
.btn.cu{background:var(--copper);color:#fff}.btn.cu:hover{background:color-mix(in srgb,var(--copper) 82%,#000)}
.btn.dk{background:var(--deep);color:#fff}.btn.dk:hover{background:var(--river)}
.btn.ok{background:var(--ok);color:#fff}.btn.ok:hover{background:#286b49}
.btn.bad{background:var(--badb);color:var(--bad)}
.btn.ol{border:1px solid var(--line);background:var(--paper)}.btn.ol:hover{background:#fff}
.btn.gh{background:transparent}.btn.gh:hover{background:rgba(19,32,46,.06)}
.btn.s{height:32px;padding:0 12px;font-size:13px}
.btn.l{height:52px;padding:0 24px;font-size:16px}
.btn.w{width:100%}
.ib{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);flex:none}

.card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:12px;line-height:20px;font-weight:700;background:rgba(19,32,46,.06);white-space:nowrap}
.chip i{font-size:14px}
.chip.new{background:#FBE7D7;color:#9A4A1A}.chip.cook{background:var(--warnb);color:var(--warn)}.chip.ready{background:var(--okb);color:var(--ok)}
.chip.onway{background:rgba(77,109,147,.14);color:var(--brand)}.chip.done,.chip.served{background:rgba(19,32,46,.06);color:var(--muted)}
.chip.paid{background:var(--okb);color:var(--ok)}.chip.unpaid{background:var(--badb);color:var(--bad)}.chip.dk{background:var(--deep);color:#fff}
.dot{width:8px;height:8px;border-radius:99px;display:inline-block;background:currentColor}

.inp{width:100%;height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(77,109,147,.15)}
.lbl{display:block;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:rgba(19,32,46,.06);gap:2px;flex-wrap:wrap}
.seg button{height:32px;padding:0 14px;border-radius:999px;font-weight:600;font-size:13px;color:var(--muted);transition:background .3s var(--ease),color .3s var(--ease)}
.seg button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(13,31,51,.12)}
.seg button .n{margin-left:6px;font-size:11px;background:var(--copper);color:#fff;border-radius:99px;padding:0 6px}

.kpi{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px 20px}
.kpi small{display:block;color:var(--muted);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.kpi b{display:block;font-family:"Cormorant Garamond",serif;font-size:36px;line-height:40px;font-weight:600;margin-top:8px}
.kpi span{font-size:12px;line-height:16px;color:var(--muted)}
.empty{display:grid;place-items:center;text-align:center;gap:8px;padding:48px 16px;color:var(--muted)}
.empty i{font-size:40px;color:var(--sky)}
.empty b{color:var(--ink);font-size:16px}

.sz-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,24px);opacity:0;pointer-events:none;z-index:99;display:flex;align-items:center;gap:8px;background:var(--deep);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;box-shadow:0 20px 50px rgba(13,31,51,.3);transition:transform .5s var(--ease),opacity .3s var(--ease);max-width:calc(100% - 32px)}
.sz-toast.on{opacity:1;transform:translate(-50%,0)}.sz-toast i{color:#5BD68E;font-size:20px}

.fresh{animation:fresh 1.6s var(--ease)}
@keyframes fresh{0%{box-shadow:0 0 0 0 rgba(184,101,62,.7)}40%{box-shadow:0 0 0 8px rgba(184,101,62,.25)}100%{box-shadow:0 0 0 0 rgba(184,101,62,0)}}
.list>*+*{border-top:1px solid var(--line)}

dialog{border:0;border-radius:24px;padding:24px;max-width:480px;width:calc(100% - 32px);margin:auto;inset:0;background:var(--paper);color:var(--ink);box-shadow:0 40px 120px rgba(13,31,51,.35);max-height:calc(100dvh - 48px);overflow:auto}
dialog::backdrop{background:rgba(13,31,51,.55);backdrop-filter:blur(6px)}
dialog[open]{animation:dIn .4s var(--ease)}@keyframes dIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:640px){.wrap{padding:16px}h1{font-size:30px;line-height:36px}}

/* ilova sarlavhasi */
.ap-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;padding:0 16px;background:var(--deep);color:#fff}
.ap-id{display:flex;align-items:center;gap:10px;min-width:0}.ap-id img{width:36px;height:36px;border-radius:999px;flex:none}
.ap-id b{display:block;font-size:16px;line-height:20px}.ap-id span{display:block;font-size:12px;line-height:16px;color:var(--sky)}
.ap-r{display:flex;align-items:center;gap:12px;font-size:13px;white-space:nowrap}
.ap-net{display:flex;align-items:center;gap:6px;color:var(--sky);font-weight:600}.ap-net .ph-fill{color:#5BD68E;font-size:10px}
html.offline .ap-net{color:#F1C27A}
.ap-clock{font-weight:700;font-size:15px}
.ap-user{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-weight:600;transition:background .3s var(--ease)}
.ap-user:hover{background:rgba(255,255,255,.18)}.ap-user i{font-size:18px}
html.offline body:before{content:"Aloqa yo‘q. Amallar saqlanadi va ulanganda yuboriladi";position:fixed;left:0;right:0;bottom:0;z-index:60;background:#F1C27A;color:#3A2A08;text-align:center;font-weight:600;font-size:13px;padding:6px}
@media(max-width:640px){.ap-net span,.ap-user span{display:none}.ap-id span{display:none}}

/* kirish */
.lg{position:fixed;inset:0;z-index:100;background:var(--deep);color:#fff;display:grid;place-items:center;padding:24px;overflow:auto;transition:opacity .4s var(--ease)}
.lg.out{opacity:0}
.lg-c{width:100%;max-width:360px;text-align:center}
.lg-logo{width:72px;height:72px;border-radius:999px}
.lg h1{color:#fff;margin-top:16px}.lg p{color:var(--sky);margin-top:4px}
.lg-who{display:grid;gap:8px;margin-top:24px}
.lg-who button{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;border-radius:16px;background:rgba(255,255,255,.08);color:#fff;font-weight:600;font-size:16px;transition:background .3s var(--ease)}
.lg-who button:hover{background:rgba(255,255,255,.14)}
.lg-who span{width:36px;height:36px;border-radius:999px;background:var(--copper);display:grid;place-items:center;font-weight:700}
.lg-dots{display:flex;justify-content:center;gap:16px;margin:24px 0 8px}.lg-dots i{width:14px;height:14px;border-radius:99px;border:2px solid var(--sky)}.lg-dots i.on{background:#fff;border-color:#fff}
.lg-dots.shake{animation:shake .4s}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.lg-err{color:#F19A8F;min-height:20px;font-weight:600}
.lg-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.lg-pad button{height:64px;border-radius:20px;background:rgba(255,255,255,.08);color:#fff;font-size:24px;font-weight:600;transition:background .2s var(--ease),transform .2s var(--ease)}
.lg-pad button:hover{background:rgba(255,255,255,.14)}.lg-pad button:active{transform:scale(.96)}
.lg-demo{font-size:12px;line-height:16px;margin-top:24px;opacity:.7}
.sz-toast.bad{background:#5A1B14}.sz-toast.bad i{color:#F19A8F}