/* اندازه ثابت: پایین صفحه، 300px */
.sheet{
  position: fixed; inset: 0; pointer-events: none; z-index: 1000;
}
.sheet[aria-hidden="true"]{ display: block; } /* برای در دسترس بودن */
.sheet.is-open{ pointer-events: auto; }

.sheet__backdrop{
  position: absolute; inset: 0; background: rgba(0,0,0,.4);
  opacity: 0; transition: opacity .25s ease;
}
.sheet.is-open .sheet__backdrop{ opacity: 1; }

.sheet__panel{
  position: absolute; left: 0; right: 0; bottom: 0; height: 300px;
  background: #fff; border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,.12);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.sheet.is-open .sheet__panel{ transform: translateY(0); }

.sheet__grabber{
  width: 44px; height: 5px; border-radius: 5px;
  background: #ddd; margin: 8px auto;
}

.sheet__header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px 2px;
}
.sheet__title{ font-weight: 700; font-size: 16px; }
.sheet__close{
  border: 0; background: #f6f6f6; width: 32px; height: 32px; border-radius: 8px; font-size: 18px;
}

.sheet__grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 12px;
}
.sheet__tile{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 72px; border-radius: 12px; text-decoration: none; color: #111;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border: 1px solid #f0f0f0; transition: transform .15s ease, box-shadow .15s ease;
}
.sheet__tile:active{ transform: scale(.98); box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.sheet__icon{ font-size: 18px; }
.sheet__label{ font-size: 15px; font-weight: 600; }
@media (min-width: 768px){
  .sheet__panel{ height: 340px; }
}



/* هدر شیت */
.sheet__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px 8px;
}
.sheet__title { font-weight:700; font-size:16px; }
.sheet__close {
  background:#fff; border:1px solid #eee; width:32px; height:32px;
  border-radius:10px; line-height:28px; text-align:center; font-size:20px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}

/* گرید آیکن‌ها شبیه اسنپ */
.sheet__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* سه ستونه ثابت */
  gap:12px;
  padding:8px 16px 20px;
  list-style:none;
}

/* آیتم مربعی و ثابت – واکنش‌گرا نشود */
.sheet-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  text-decoration:none; color:inherit;
  background:#fff; border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.04);
  width:100%;
  height:112px;            /* ارتفاع ثابت → مربع‌نما */
}

.sheet-item__icon{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:#ffe45a;     /* زرد دلارچی */
  font-size:22px;
}

.sheet-item__label{
  font-size:14px; font-weight:600; letter-spacing:-.2px;
}

/* بدنه و انیمیشن شیت (اگر قبلاً داری، این‌ها مکمل‌اند) */
.sheet{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
}
.sheet[aria-hidden="true"] .sheet__backdrop{opacity:0; pointer-events:none;}
.sheet[aria-hidden="true"] .sheet__panel{transform:translateY(100%);}

.sheet__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.35);
  transition:opacity .25s ease;
}
.sheet__panel{
  position:absolute; left:0; right:0; bottom:0;
  background:#fafafa; border-radius:20px 20px 0 0;
  box-shadow:0 -10px 30px rgba(0,0,0,.15);
  transform:translateY(0);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  pointer-events:auto;
}

.sheet__handle{
  width:56px; height:5px; border-radius:5px;
  background:#ddd; margin:8px auto 6px;
}