/* v62 — نمایش مدارک (کارت‌های بزرگ، گروه‌بندی، نمایشگر) */
.d62-chips{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 10px}
.d62-chip{border:1px solid var(--line,#c9d3e3);background:#fff;border-radius:16px;padding:4px 12px;font:inherit;font-size:12.5px;cursor:pointer;color:inherit}
.d62-chip.on{background:#dbe7fb;border-color:#6d94d8;color:#1f3a6a}
.d62-group h4{margin:12px 2px 7px;font-size:14px;font-weight:600;color:#2b4a7a}
.d62-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.d62-tile{display:flex;flex-direction:column;text-align:right;background:#fff;border:1px solid var(--line,#d6dce6);border-radius:14px;padding:0;overflow:hidden;cursor:pointer;font:inherit;color:inherit}
.d62-im{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.d62-im img{width:100%;height:100%;object-fit:cover;display:block}
.d62-pdfico{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#fff;font-size:34px}
.d62-pdfico small{font-size:12px}
.d62-cat{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.58);color:#fff;border-radius:10px;padding:1px 9px;font-style:normal;font-size:11px}
.d62-tile b{display:block;font-size:13px;font-weight:600;margin:7px 9px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d62-tile small{display:block;font-size:11px;color:#667;margin:1px 9px 8px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.d62-grid{grid-template-columns:1fr 1fr;gap:9px}}
.d62-search{position:relative;margin:0 0 12px}
.d62-search input{width:100%;box-sizing:border-box;border:1px solid var(--line,#b9c3d3);border-radius:12px;padding:11px 14px;font:inherit;font-size:14px;background:#fff}
.d62-dd{position:absolute;z-index:5;top:100%;right:0;left:0;margin-top:4px;background:#fff;border:1px solid #c5cddb;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.d62-dd button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:8px;border:0;border-bottom:1px solid #eef1f6;background:#fff;padding:10px 14px;font:inherit;cursor:pointer;text-align:right}
.d62-dd button:hover{background:#eef3fc}
.d62-dd small{color:#667}
.d62-empty{padding:14px;text-align:center;color:#667}
.d62-selbar{display:flex;align-items:center;gap:10px;background:#eef3fc;border:1px solid #c9d8f2;border-radius:12px;padding:8px 12px;margin-bottom:10px}
.d62-selbar b{font-size:14px}.d62-selbar small{color:#556}.d62-selbar button{margin-right:auto}
/* نمایشگر */
.d62-dlg{border:0;padding:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:#0d0f12;color:#fff;overflow:hidden}
.d62-dlg[open]{display:flex;flex-direction:column}
.d62-dlg::backdrop{background:#000}
.d62-top{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
.d62-title{font-size:15px;font-weight:600}
.d62-x{width:34px;height:34px;border-radius:50%;border:1px solid #555;background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.d62-meta{padding:0 14px 6px;color:#aab;font-size:12px}
.d62-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;user-select:none;-webkit-user-select:none}
.d62-img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .12s;will-change:transform;-webkit-user-drag:none}
.d62-pdf{width:100%;height:100%;border:0;background:#fff}
.d62-nav{position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:24px;cursor:pointer;z-index:2}
.d62-next{left:8px}.d62-prev{right:8px}
.d62-count{text-align:center;color:#aab;font-size:12px;padding:6px}
.d62-bar{display:flex;gap:8px;padding:8px 12px 14px}
.d62-bar{flex-wrap:wrap}.d62-bar button{flex:1 1 28%;border:1px solid #666;background:transparent;color:#fff;border-radius:10px;padding:9px 0;font:inherit;font-size:13px;cursor:pointer}
.d62-bar .d62-del{color:#ff9a9a;border-color:#7a4a4a}

/* ---------- انیمیشن‌ها و حس تعاملی ---------- */
@keyframes d62In{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes d62Pop{0%{transform:scale(.85)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes d62Drop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes d62Slide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes d62Open{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes d62Close{to{opacity:0;transform:scale(.96)}}
@keyframes d62Fade{from{opacity:0}to{opacity:1}}
.d62-tile{animation:d62In .42s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0)*45ms);transition:transform .2s cubic-bezier(.2,.9,.3,1.2),box-shadow .2s,border-color .2s}
.d62-tile:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(30,60,110,.16);border-color:#9db8e6}
.d62-tile:active{transform:scale(.96);box-shadow:none;transition-duration:.08s}
.d62-im img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.d62-tile:hover .d62-im img{transform:scale(1.07)}
.d62-group h4{animation:d62Slide .4s ease both}
.d62-chip{transition:background .2s,border-color .2s,transform .18s cubic-bezier(.2,1.4,.4,1),box-shadow .2s}
.d62-chip:hover{transform:translateY(-1px)}
.d62-chip:active{transform:scale(.93)}
.d62-chip.on{animation:d62Pop .35s ease;box-shadow:0 2px 8px rgba(60,100,180,.2)}
.d62-dd{animation:d62Drop .2s ease both;transform-origin:top center}
.d62-dd button{transition:background .15s,padding-right .15s}
.d62-dd button:hover{padding-right:20px}
.d62-search input{transition:box-shadow .2s,border-color .2s}
.d62-search input:focus{outline:0;border-color:#6d94d8;box-shadow:0 0 0 4px rgba(109,148,216,.22)}
.d62-selbar{animation:d62Drop .3s ease both}
.d62-empty{animation:d62Fade .4s ease both}
.d62-dlg[open]{animation:d62Open .26s cubic-bezier(.2,.9,.25,1.1)}
.d62-dlg[open]::backdrop{animation:d62Fade .26s ease}
.d62-dlg.d62-closing{animation:d62Close .17s ease forwards}
.d62-slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}
.d62-img{transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
.d62-nav{transition:background .2s,transform .18s cubic-bezier(.2,1.4,.4,1)}
.d62-nav:hover{background:rgba(255,255,255,.34);transform:scale(1.12)}
.d62-nav:active{transform:scale(.88)}
.d62-x{transition:background .2s,transform .25s cubic-bezier(.2,1.4,.4,1)}
.d62-x:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
.d62-bar button{transition:background .2s,transform .16s cubic-bezier(.2,1.4,.4,1),border-color .2s}
.d62-bar button:hover{background:rgba(255,255,255,.1)}
.d62-bar button.d62-press,.d62-bar button:active{transform:scale(.93)}
.d62-dots{display:flex;gap:6px;justify-content:center;padding:4px 0 0}
.d62-dots i{width:6px;height:6px;border-radius:3px;background:#556;transition:width .3s cubic-bezier(.2,1,.3,1),background .3s}
.d62-dots i.on{width:20px;background:#8fb4ff}
/* مودال‌های برنامه (QR، افزودن مدرک، تخفیف و…) */
#modal[open]{animation:d62Fade .18s ease}
#modal[open] .modal-card{animation:d62Open .26s cubic-bezier(.2,.9,.25,1.1)}
#modal[open]::backdrop{animation:d62Fade .2s ease}
#rcQrBox svg{animation:d62Pop .5s cubic-bezier(.2,1.2,.3,1) both}
.rc-ledger-subtotal,.rc-ledger-total{animation:d62Slide .35s ease both}
@media (prefers-reduced-motion:reduce){
  .d62-tile,.d62-group h4,.d62-chip,.d62-chip.on,.d62-dd,.d62-selbar,.d62-empty,.d62-dlg[open],.d62-dlg[open]::backdrop,#modal[open],#modal[open] .modal-card,#rcQrBox svg,.rc-ledger-subtotal,.rc-ledger-total{animation:none!important}
  .d62-tile,.d62-img,.d62-dots i,.d62-chip,.d62-x,.d62-nav,.d62-bar button{transition:none!important}
}
/* ناحیه‌ی بالای گوشی (ساعت/باتری): دکمه‌ها و عنوان نمایشگر زیر آن نروند — --safe-top در mobile-native.css روی اپ مقدار می‌گیرد */
:root{--safe-top:0px}
.d62-top{padding-top:calc(var(--safe-top,0px) + 10px)}