:root{--bg:#07080d;--s1:#0e1018;--s2:#151824;--s3:#1d2130;--line:#23283a;--text:#eceef6;--muted:#8a91a8;--a1:#6366f1;--a2:#a855f7;--ok:#22c55e;--okbg:rgba(34,197,94,.12);--warn:#f59e0b;--warnbg:rgba(245,158,11,.12);--bad:#ef4444;--badbg:rgba(239,68,68,.12);
color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100vh;color:var(--text);font-family:Vazirmatn,Tahoma,"Segoe UI",sans-serif;line-height:1.7;
background:radial-gradient(900px 420px at 85% -10%,rgba(99,102,241,.18),transparent),radial-gradient(700px 380px at 0% 0%,rgba(168,85,247,.12),transparent),var(--bg)}
.wrap{max-width:520px;margin:0 auto;padding:22px 16px 56px}
.wrap.wide{max-width:860px}
.hide{display:none!important}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}
h1{font-size:1.2rem;font-weight:800;margin:0}
h2{font-size:.95rem;font-weight:700;margin:0 0 14px;color:var(--text)}
.tag{font-size:.7rem;color:var(--warn);background:var(--warnbg);padding:3px 11px;border-radius:99px;font-weight:500}
.box{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:16px}

/* credit card */
.cc{position:relative;overflow:hidden;border-radius:22px;padding:22px;margin-bottom:16px;color:#fff;
background:linear-gradient(135deg,#2b2f6b 0%,#4c2a85 55%,#1b1c3a 100%);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -18px rgba(99,102,241,.55)}
.cc::before{content:"";position:absolute;inset:-40% -20% auto auto;width:320px;height:320px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%)}
.cc-top{display:flex;justify-content:space-between;align-items:center;position:relative}
.chip{width:40px;height:30px;border-radius:7px;background:linear-gradient(135deg,#f3d98b,#b98d2e);opacity:.9}
.cc small{opacity:.75;font-size:.78rem}
.num{position:relative;direction:ltr;text-align:center;font-size:clamp(1.15rem,6vw,1.6rem);letter-spacing:.14em;font-weight:700;margin:22px 0 14px;font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.cc-foot{display:flex;justify-content:space-between;align-items:center;position:relative}
.cbtn{font:inherit;font-size:.78rem;cursor:pointer;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;padding:5px 14px;border-radius:99px;backdrop-filter:blur(6px)}

/* form */
label{display:block;font-size:.8rem;color:var(--muted);margin:14px 0 6px}
.f{width:100%;font:inherit;font-size:1rem;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:var(--s3);color:var(--text);text-align:right;transition:border-color .15s,box-shadow .15s}
.f::placeholder{color:#5d647b}
.f:focus,.f.open{outline:0;border-color:var(--a1);box-shadow:0 0 0 3px rgba(99,102,241,.25)}
.tbtn{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.tbtn .v{direction:ltr;font-variant-numeric:tabular-nums;font-weight:700}
.tbtn .ph{color:#5d647b}
.tbtn svg{color:var(--muted);flex:none}
.err{color:var(--bad);font-size:.8rem;min-height:1.3em;margin-top:8px}
.btn{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:14px;padding:13px 18px;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2));box-shadow:0 10px 24px -12px rgba(99,102,241,.8);transition:transform .1s,filter .15s}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.98)}
.btn.full{width:100%;margin-top:6px}
.btn.ghost{background:var(--s3);box-shadow:none;border:1px solid var(--line);color:var(--text)}
.btn.sm{padding:7px 14px;font-size:.82rem;border-radius:11px}
.btn.ok{background:var(--ok);box-shadow:none;color:#04210f}
.btn.no{background:var(--badbg);box-shadow:none;color:var(--bad);border:1px solid rgba(239,68,68,.35)}

/* lists */
.item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0;padding-top:0}
.item b{font-weight:700}.item .sub{display:block;color:var(--muted);font-size:.78rem}
.st{font-style:normal;font-size:.72rem;font-weight:500;padding:3px 11px;border-radius:99px;white-space:nowrap}
.st.pending{background:var(--warnbg);color:var(--warn)}.st.approved{background:var(--okbg);color:var(--ok)}.st.rejected{background:var(--badbg);color:var(--bad)}
.empty{color:var(--muted);text-align:center;padding:22px 0;font-size:.88rem}
.demo{text-align:center;margin-top:6px}
.dot{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-inline-start:8px;border-radius:99px;background:var(--warn);color:#201400;font-size:.72rem;font-weight:800}

/* admin */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.stat{background:var(--s2);border:1px solid var(--line);border-radius:16px;padding:14px}
.stat span{color:var(--muted);font-size:.76rem}.stat b{display:block;font-size:1.25rem;font-weight:800}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}
.tab{font:inherit;font-size:.82rem;cursor:pointer;white-space:nowrap;border:1px solid var(--line);background:var(--s2);color:var(--muted);padding:6px 14px;border-radius:99px}
.tab.on{background:var(--a1);border-color:var(--a1);color:#fff}
.order{display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:center;background:var(--s2);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px}
.order.pending{border-color:rgba(245,158,11,.35)}
.order .amt{font-size:1.1rem;font-weight:800}
.order .meta{color:var(--muted);font-size:.78rem}
.order .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:520px){.order{grid-template-columns:1fr}.order .acts{justify-content:stretch}.order .acts .btn{flex:1}}

/* custom time picker */
.tp{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.tp-back{position:absolute;inset:0;background:rgba(3,4,8,.7);backdrop-filter:blur(4px)}
.tp-sheet{position:relative;width:100%;max-width:380px;margin:0 auto;background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--line);border-radius:24px 24px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));animation:up .22s ease}
@media(min-width:560px){.tp{align-items:center}.tp-sheet{border-radius:24px}}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.tp-head{direction:ltr;text-align:center;font-size:2.6rem;font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,#c7d2fe,#e9d5ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tp-cap{text-align:center;color:var(--muted);font-size:.76rem;margin-bottom:12px}
.tp-cols{direction:ltr;display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.tp-sep{font-size:1.6rem;font-weight:800;color:var(--muted)}
.col{position:relative;height:208px;overflow-y:auto;scrollbar-width:none;background:var(--s3);border:1px solid var(--line);border-radius:16px;padding:84px 6px;scroll-snap-type:y proximity}
.col::-webkit-scrollbar{display:none}
.col button{display:block;width:100%;height:40px;font:inherit;font-size:1.05rem;font-variant-numeric:tabular-nums;background:transparent;border:0;border-radius:10px;color:#6b7390;cursor:pointer;scroll-snap-align:center}
.col button:hover{color:var(--text)}
.col button.on{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font-weight:800}
.tp-quick{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.q{font:inherit;font-size:.78rem;cursor:pointer;border:1px solid var(--line);background:var(--s3);color:var(--muted);padding:4px 12px;border-radius:99px}
.q:hover{color:var(--text);border-color:var(--a1)}
.tp-acts{display:grid;grid-template-columns:1fr 2fr;gap:8px}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--s3);border:1px solid var(--line);padding:10px 18px;border-radius:14px;font-size:.88rem;z-index:60;box-shadow:0 12px 30px -10px #000}
/* ===== animations ===== */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px 320px at 20% 30%,rgba(99,102,241,.16),transparent),radial-gradient(520px 320px at 80% 70%,rgba(168,85,247,.13),transparent);animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-4%,3%) scale(1.12)}}
.wrap{animation:fade .35s ease}
.wrap>*{animation:rise .55s cubic-bezier(.2,.7,.2,1) backwards}
.wrap>*:nth-child(2){animation-delay:.07s}.wrap>*:nth-child(3){animation-delay:.14s}.wrap>*:nth-child(4){animation-delay:.21s}.wrap>*:nth-child(5){animation-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes fade{from{opacity:0}}
.cc{transition:transform .25s ease;will-change:transform}
.cc::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);transform:translateX(-130%);animation:shine 5s ease-in-out 1s infinite;pointer-events:none}
@keyframes shine{0%{transform:translateX(-130%)}35%,100%{transform:translateX(130%)}}
.btn{transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.cbtn,.tab,.q{transition:background .2s,color .2s,border-color .2s,transform .15s}
.cbtn:hover{background:rgba(255,255,255,.2)}
.cbtn:active,.tab:active,.q:active{transform:scale(.95)}
.order,.stat{transition:transform .2s,border-color .2s}
.order:hover,.stat:hover{transform:translateY(-2px);border-color:rgba(129,140,248,.5)}
.item.new,.order.new{animation:itemIn .45s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0)*60ms)}
@keyframes itemIn{from{opacity:0;transform:translateX(-22px) scale(.97)}}
.order.flash{animation:flash .9s ease}
@keyframes flash{0%{transform:scale(.97);box-shadow:0 0 0 0 rgba(99,102,241,.65)}45%{transform:scale(1.015)}100%{transform:none;box-shadow:0 0 0 16px rgba(99,102,241,0)}}
.dot{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(245,158,11,.7)}100%{box-shadow:0 0 0 9px rgba(245,158,11,0)}}
.st.pending::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-inline-end:6px;animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.tp:not(.hide) .tp-back{animation:fade .2s ease}
.col button{transition:background .15s,color .15s,transform .15s}
.col button.on{transform:scale(1.05)}
.tick{animation:tick .28s ease}
@keyframes tick{from{transform:scale(.92);opacity:.55}}
.toast{animation:toast 1.8s ease forwards}
@keyframes toast{0%{opacity:0;transform:translate(-50%,16px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important}}

a{text-decoration:none;color:#a5b4fc}.muted{color:var(--muted);font-size:.82rem}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.notice{padding:15px;border:1px solid #315347;background:var(--okbg);border-radius:14px;margin-bottom:16px}.box input,.box select{min-width:0}.order{overflow-wrap:anywhere}code{direction:ltr;display:inline-block}.foot{text-align:center;color:var(--muted);font-size:.75rem;margin-top:24px}.cc .num{letter-spacing:.08em}.bar h2{margin:0}button:focus-visible,a:focus-visible{outline:2px solid #a5b4fc;outline-offset:4px}@media(max-width:640px){.grid{grid-template-columns:minmax(0,1fr)}}

.order[hidden]{display:none!important}

.wrap,.wrap>*{animation:none}