:root { font-family:"Vazirmatn",Tahoma,sans-serif; color:#132959; background:#f7faff; color-scheme:light; }
* { box-sizing:border-box; } html,body { min-height:100%; margin:0; } body { min-height:100vh; background:radial-gradient(circle at 82% 2%,rgba(117,170,255,.14),transparent 21rem),#f7faff; }
.more-page { width:min(100%,560px); min-height:100vh; margin:0 auto; padding:22px 17px 32px; }
.more-page__header { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; min-height:48px; margin-bottom:15px; }.more-page__header h1 { margin:0; color:#132959; text-align:center; font-size:1.08rem; font-weight:900; }.more-page__back { display:grid; width:40px; height:40px; place-items:center; border-radius:14px; color:#173b79; background:#fff; box-shadow:0 7px 18px rgba(35,75,139,.07); }.more-page__back svg { width:20px; }
.more-page__hero { min-height:144px; display:flex; align-items:center; justify-content:space-between; gap:12px; overflow:hidden; padding:18px 22px 14px; border-radius:22px; color:#fff; background:linear-gradient(135deg,#377ef2,#1558d8); box-shadow:0 15px 28px rgba(37,99,235,.19); }.more-page__hero h2 { margin:0; font-size:1rem; font-weight:850; line-height:1.95; }.more-page__hero img { width:112px; height:112px; filter:drop-shadow(0 12px 12px rgba(12,47,140,.26)); transform:rotate(-9deg) translate(-2px,4px); }
.more-page__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-top:17px; }.more-feature { min-height:128px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; border:1px solid rgba(232,239,250,.9); border-radius:20px; padding:12px 7px; color:#162958; background:#fff; box-shadow:0 9px 23px rgba(39,77,136,.075); font:inherit; text-align:center; text-decoration:none; }.more-feature:not(:disabled) { cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }.more-feature:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 13px 25px rgba(39,77,136,.12); }.more-feature:disabled { color:#687995; cursor:not-allowed; opacity:.62; }.more-feature b { max-width:100%; font-size:.73rem; font-weight:850; line-height:1.55; }.more-feature__icon { display:grid; width:48px; height:48px; place-items:center; border-radius:15px; color:#276be4; background:linear-gradient(145deg,#edf4ff,#dae9ff); box-shadow:inset 0 1px 1px rgba(255,255,255,.92),0 7px 13px rgba(49,106,220,.11); }.more-feature__icon svg { width:27px; height:27px; stroke-width:2.1; }.more-feature__icon.is-calendar { color:#2364de; background:linear-gradient(145deg,#e7f1ff,#d1e4ff); }
.more-page__invite { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:87px; margin-top:18px; padding:15px 20px; border-radius:20px; color:#193365; background:linear-gradient(120deg,#fff,#eef5ff); box-shadow:0 10px 24px rgba(39,77,136,.07); }.more-page__invite b,.more-page__invite small { display:block; }.more-page__invite b { font-size:.83rem; }.more-page__invite small { margin-top:5px; color:#74839b; font-size:.63rem; line-height:1.7; }.more-page__invite svg { width:48px; height:48px; flex:0 0 auto; padding:10px; border-radius:16px; color:#286ce8; background:#dfecff; }
.bottom-nav { position:fixed; left:50%; bottom:14px; z-index:4; width:min(calc(100% - 28px),402px); display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:10px 8px 12px; transform:translateX(-50%); border:1px solid #edf1f7; border-radius:28px; background:rgba(255,255,255,.96); box-shadow:0 18px 44px rgba(22,38,70,.12); backdrop-filter:blur(18px); }.bottom-nav a { min-width:0; display:grid; justify-items:center; gap:3px; position:relative; color:#20283a; text-decoration:none; font-size:.72rem; font-weight:800; line-height:1.4; }.bottom-nav a>svg { width:21px; height:21px; stroke-width:1.9; }.bottom-nav a>span { font-size:.72rem; }.bottom-nav a.is-active { color:#2563eb; font-weight:900; }.bottom-nav a.is-active::after { content:""; position:absolute; bottom:-9px; width:36px; height:4px; border-radius:99px; background:#2563eb; }
@media (min-width:680px) { body { padding:30px; }.more-page { min-height:calc(100vh - 60px); border:1px solid #e6eefb; border-radius:30px; background:#f9fbff; box-shadow:0 22px 55px rgba(34,72,132,.1); }.bottom-nav { bottom:32px; }.more-feature { min-height:142px; }.more-feature b { font-size:.78rem; } }
@media (min-width:900px) {
  body { padding:42px; }
  .more-page { width:min(1120px,100%); min-height:calc(100vh - 84px); padding:32px 38px 40px; border-radius:34px; }
  .more-page__header { min-height:58px; margin-bottom:23px; }
  .more-page__header h1 { font-size:1.45rem; }
  .more-page__back { width:46px; height:46px; border-radius:16px; }
  .more-page__hero { min-height:190px; padding:24px 34px; border-radius:28px; }
  .more-page__hero h2 { font-size:1.45rem; line-height:1.9; }
  .more-page__hero img { width:158px; height:158px; }
  .more-page__grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-top:22px; }
  .more-feature { min-height:158px; gap:13px; border-radius:22px; padding:17px 10px; }
  .more-feature__icon { width:55px; height:55px; border-radius:17px; }
  .more-feature__icon svg { width:30px; height:30px; }
  .more-feature b { font-size:.82rem; }
  .more-page__invite { min-height:98px; margin-top:22px; padding:18px 24px; border-radius:22px; }
  .more-page__invite b { font-size:.94rem; }
  .more-page__invite small { font-size:.71rem; }
}
@media (max-width:365px) { .more-page { padding-inline:12px; }.more-page__grid { gap:8px; }.more-feature { min-height:111px; border-radius:17px; gap:7px; }.more-feature__icon { width:42px; height:42px; border-radius:13px; }.more-feature__icon svg { width:24px; height:24px; }.more-feature b { font-size:.64rem; }.more-page__hero { min-height:128px; padding-inline:16px; }.more-page__hero img { width:98px; height:98px; }.more-page__hero h2 { font-size:.87rem; }.bottom-nav { width:calc(100% - 24px); bottom:9px; } }
@media (prefers-reduced-motion:reduce) { .more-feature { transition:none; } }

/* Keep the page header and unavailable cards visually aligned with the reference. */
.more-page__header { direction:ltr; }
.more-page__header h1 { direction:rtl; }
.more-feature:disabled { opacity:.82; }