:root{--red:#b01e23;--red-d:#8e171b;--ink:#231f20;--mute:#6b6465;--line:#e4dcdc;--bg:#faf6f5}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Vazirmatn,Tahoma,"Segoe UI",sans-serif;line-height:1.7}
.wrap{max-width:560px;margin:0 auto;padding:20px 16px 48px}
.brand{display:flex;align-items:center;gap:14px;margin:8px 0 22px}
.brand img{width:64px;height:64px;object-fit:contain}
.brand h1{font-size:1.35rem;margin:0;line-height:1.3}
.brand p{margin:0;color:var(--mute);font-size:.9rem}
form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
label{display:block;font-weight:700;margin:0 0 4px;font-size:.95rem}
label small{font-weight:400;color:var(--mute)}
input[type=text],input[type=tel],input[type=password],input[type=search]{width:100%;padding:11px 12px;font:inherit;border:1.5px solid var(--line);border-radius:8px;background:#fff}
input:focus{outline:3px solid #b01e2333;border-color:var(--red)}
.f{margin-bottom:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.row{grid-template-columns:1fr}}
.sep{border:0;border-top:1px dashed var(--line);margin:20px 0}
.opt{color:var(--mute);font-size:.85rem;margin:0 0 12px}
button,.btn{display:inline-block;background:var(--red);color:#fff;border:0;border-radius:8px;padding:12px 22px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
button:hover,.btn:hover{background:var(--red-d)}
.btn.ghost{background:#fff;color:var(--red);border:1.5px solid var(--red)}
.err{background:#fdecec;border:1px solid #f1b9b9;color:#8e171b;padding:10px 14px;border-radius:8px;margin-bottom:16px}
.ltr{direction:ltr;text-align:right}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:.92rem}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right}
th{background:#f3eaea}
.wide{max-width:980px}
.yn{display:flex;gap:18px}.yn label{display:flex;align-items:center;gap:6px;font-weight:400;margin:0}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tabs a{flex:1;text-align:center;padding:10px;border-radius:10px;border:1.5px solid var(--red);color:var(--red);text-decoration:none;font-weight:700;background:#fff}
.tabs a.on{background:var(--red);color:#fff}
.flt{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.flt select{font:inherit;padding:9px 10px;border:1.5px solid var(--line);border-radius:8px;background:#fff}
.acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.acts form{margin:0;padding:0;border:0;background:none;display:inline}
.sm{padding:5px 11px;font-size:.85rem;border-radius:6px}
.danger{background:#fff;color:#8e171b;border:1.5px solid #8e171b}
.danger:hover{background:#8e171b;color:#fff}
.badge{display:inline-block;padding:1px 10px;border-radius:99px;font-size:.82rem;font-weight:700}
.badge.held{background:#fdecec;color:#8e171b}.badge.delivered{background:#e4f4e8;color:#1d7a3a}

/* ===== انیمیشن‌ها ===== */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 #b01e2355}50%{box-shadow:0 0 0 6px #b01e2300}}

.brand img{animation:pop .6s cubic-bezier(.2,.9,.3,1.3) both;transition:transform .35s cubic-bezier(.2,.9,.3,1.3)}
.brand img:hover{transform:rotate(-8deg) scale(1.12)}
.brand h1,.brand p{animation:rise .5s .1s both}
form{animation:rise .5s .05s both}
.f{animation:rise .45s both}
form>.f:nth-child(1),form>.row:nth-child(1) .f{animation-delay:.08s}
form>.f:nth-child(2),form>.row:nth-child(2) .f{animation-delay:.14s}
form>.f:nth-child(n+3){animation-delay:.2s}
#items .f{animation:pop .3s both}
.err{animation:shake .45s both}

button,.btn{transition:transform .18s ease,box-shadow .18s ease,background-color .18s,color .18s;cursor:pointer}
button:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px #b01e2340}
button:active,.btn:active{transform:translateY(0) scale(.96);box-shadow:none}
.btn.ghost:hover,button.ghost:hover{background:#fbeaea}
.danger:hover{box-shadow:0 6px 14px #8e171b40}

input[type=text],input[type=tel],input[type=password],input[type=search],input[type=number],select{transition:border-color .2s,box-shadow .2s,transform .2s}
input:hover,select:hover{border-color:#cdb9b9}
input:focus,select:focus{transform:translateY(-1px)}
input[type=radio]{accent-color:var(--red);cursor:pointer}
.yn label{cursor:pointer;transition:color .15s,transform .15s}
.yn label:hover{color:var(--red);transform:translateX(-3px)}
#room,#nid{animation:pop .25s both}

.tabs a{transition:transform .18s,box-shadow .18s,background-color .18s,color .18s}
.tabs a:hover{transform:translateY(-2px);box-shadow:0 6px 14px #b01e2333}
.tabs a:not(.on):hover{background:#fbeaea}

table{animation:rise .5s .1s both}
tr{animation:rise .4s both}
tr:nth-child(2){animation-delay:.05s}tr:nth-child(3){animation-delay:.1s}tr:nth-child(4){animation-delay:.15s}
tr:nth-child(5){animation-delay:.2s}tr:nth-child(6){animation-delay:.25s}tr:nth-child(n+7){animation-delay:.3s}
td{transition:background-color .2s}
tr:hover td{background:#fdf1f1}
td a{transition:color .15s}

.item{transition:transform .2s,box-shadow .2s,border-color .2s;animation:rise .4s both}
.item:hover{transform:translateX(-6px);box-shadow:0 6px 16px #b01e2326;border-color:var(--red)}
.item .n{transition:transform .2s}
.item:hover .n{transform:scale(1.12) rotate(-4deg)}
.badge.held{animation:glow 2.4s infinite}
.bag{animation:rise .45s both}
.bag img{transition:transform .35s}
.bag img:hover{transform:scale(1.03)}
.bag[data-has="1"] img{animation:pop .45s both}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}