:root{
  --bg: #F7F6F3;
  --card: #ffffff;
  --muted:#667085;
  --radius:14px;
  --max-w:980px;
  --transition: 260ms cubic-bezier(.2,.9,.2,1);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Vazirmatn";
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:#0F172A}
body{padding:12px 12px 96px}

/* timeline overlay (از نسخهٔ اصلی) */
.timeline-overlay{
  position:fixed; top:0; left:0; right:0; height:140px;
  pointer-events:none; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; opacity:0.06; transform:rotate(-8deg);
  z-index:0;
}
.timeline-row{ font-size:26px; font-weight:800; letter-spacing:8px; white-space:nowrap; }

/* shell (card-like) */
.shell{ position:relative; z-index:2; margin:6px auto; max-width:var(--max-w); border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98));
  box-shadow: 0 14px 38px rgba(11,16,23,0.06); padding:14px; backdrop-filter: blur(4px);
}

/* header */
.header{ display:flex; align-items:center; justify-content:space-between; padding:8px 6px 14px }
.app-title{ margin:0; font-size:20px; font-weight:800 }
.subtitle{ margin:6px 0 0; color:var(--muted); font-size:13px }

/* content */
.content{ padding:6px 6px 18px }

/* === CARD / BUTTON STYLES (تمرکز اصلی) ===
   Design concept:
   - هر کارت یک "دکمه بزرگ" است (button element) با تصویر پس‌زمینه یا گرادیانت
   - بالای کارت یک "band" تصویری/گرادیانت با overlay تاریک برای متن سفید
   - badge کوچک با آیکون شهر در گوشهٔ بالا-چپ
   - sheen (نور لغزنده) که در hover/pointer حرکت می‌کند
   - ripple روی کلیک
   - هر کارت از متغیرهای CSS (--accent, --accent2, --img) استفاده می‌کند که JS مقداردهی می‌کند
*/

/* grid / scroller (mobile-first) */
.card-grid{
  display:flex; gap:12px; overflow-x:auto; padding-bottom:6px;
}
.card{
  --accent: #EAD7B7;
  --accent2: #C69B62;
  --img: none;
  min-width:220px; flex:0 0 220px;
  background: var(--card);
  border-radius:12px; padding:10px; box-shadow: 0 10px 28px rgba(11,16,23,0.04);
  border:1px solid rgba(11,16,23,0.03);
  position:relative; overflow:hidden; cursor:pointer;
  transform: translateY(18px) scale(.995);
  opacity:0; transition: transform 420ms var(--transition), opacity 420ms ease, box-shadow 220ms;
  -webkit-tap-highlight-color: transparent;
}

/* inview (entrance) */
.card.inview{ transform: translateY(0) scale(1); opacity:1; }

/* visual top band: image or gradient */
.card-media{
  height:92px; border-radius:10px; overflow:hidden; margin-bottom:10px; position:relative;
  background-image: var(--img), linear-gradient(135deg, var(--accent), var(--accent2));
  background-size: cover; background-position:center;
  display:flex; align-items:flex-end; justify-content:flex-start; padding:10px;
  color:#fff; font-weight:700; font-size:14px; text-shadow:0 6px 16px rgba(0,0,0,0.32);
  box-shadow: inset 0 -10px 30px rgba(0,0,0,0.12);
}

/* content area */
.card-title{ font-size:14px; font-weight:800; margin:0; color:#0f172a }
.card-sub{ font-size:12px; color:var(--muted); margin-top:8px }

/* badge (city icon) */
.card-badge{
  position:absolute; left:12px; top:12px; z-index:4;
  width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(11,16,23,0.08);
  border:1px solid rgba(11,16,23,0.04);
  transition: transform 220ms var(--transition), box-shadow 220ms;
}
.card:hover .card-badge{ transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 30px rgba(11,16,23,0.1); }

/* sheen (moving light) */
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0) 75%);
  transform: translateX(-140%); transition: transform 850ms var(--transition);
  mix-blend-mode: screen;
}
.card:hover::after{ transform: translateX(40%); transition-duration: 700ms; }

/* hover uplift */
.card:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 22px 60px rgba(11,16,23,0.10); }

/* ripple */
.card .ripple{ position:absolute; border-radius:999px; transform:translate(-50%,-50%); pointer-events:none; background: rgba(255,255,255,0.36); animation: ripple 520ms ease-out; z-index:5; }
@keyframes ripple{ from{ opacity:0.9; transform: translate(-50%,-50%) scale(.2) } to{ opacity:0; transform: translate(-50%,-50%) scale(2.6) } }

/* focus */
.card:focus{ outline: 3px solid rgba(198,155,98,0.12); outline-offset:4px }

/* responsive grid on larger screens */
@media (min-width:720px){
  .card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; overflow:visible; }
  .card{ min-width:0; flex:1; }
}

/* mobile tweaks */
@media (max-width:420px){
  .card{ min-width:200px; flex:0 0 200px; padding:8px }
  .card-media{ height:76px }
  .card-badge{ width:40px; height:40px; left:10px; top:10px; border-radius:8px }
}

/* small polish for bottom nav */
.bottom-nav{ position:fixed; left:12px; right:12px; bottom:12px; height:64px; display:flex; gap:10px; align-items:center; justify-content:space-between;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.995));
  border-radius:14px; box-shadow: 0 20px 46px rgba(11,16,23,0.08); padding:8px 10px; z-index:6; }
.nav-btn{ flex:1; height:48px; border-radius:12px; border:0; background:transparent; font-weight:700; cursor:pointer; color:var(--muted) }
.nav-btn.active{ background: linear-gradient(90deg,#EAD7B7,#C69B62); color:#311f13 }