.shell { max-width: 960px; margin: 0 auto; padding: 20px 16px 110px; display: flex; flex-direction: column; gap: 18px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; text-decoration: none; color: var(--paper); }
.brand img { width: 34px; height: 34px; border-radius: 9px; }

.tabbar { position: fixed; inset-inline: 0; bottom: 0; background: rgb(20 17 12 / 94%); backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); z-index: 40; }
.tabbar a { min-height: 52px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--muted); font-size: .85rem; font-weight: 600; border-radius: 12px; }
.tabbar a[aria-current="page"] { color: var(--gold-hi); background: var(--ink-3); }

.hero { padding: 36px 0 12px; display: grid; gap: 22px; }
.hero p { color: var(--muted); max-width: 52ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.ticker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ticker .price { font-size: 1.7rem; font-weight: 800; color: var(--gold-hi); }
.stale { color: var(--warn); font-size: .85rem; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.features .card p { color: var(--muted); font-size: .92rem; }

.steps { counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; list-style: none; display: flex; gap: 12px; align-items: flex-start; }
.steps li::before { content: counter(s, persian); min-width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #25190a; font-weight: 800; }

.auth { max-width: 440px; margin: 8vh auto 0; }
.quote { display: grid; gap: 8px; }
.timer { font-variant-numeric: tabular-nums; }

.footer-note { color: var(--muted); font-size: .8rem; text-align: center; }

@media (min-width: 720px) {
  .tabbar { inset-inline: 50%; transform: translateX(50%); width: 560px; bottom: 16px; border: 1px solid var(--line); border-radius: 18px; }
}

.title-md { font-size: 1.5rem; }
.skeleton-ticker { height: 92px; }
.accent { color: var(--gold-hi); }
.stat { font-size: 1.6rem; font-weight: 800; }

.side-creditor { color: var(--gold-hi); }
.side-debtor { color: var(--down, #e0685c); }
.side-settled { color: var(--muted); }

.badge { padding: 2px 10px; border-radius: 999px; font-size: .8rem; border: 1px solid var(--line); color: var(--muted); }
.badge-active { color: var(--gold-hi); border-color: var(--gold-lo); }
.badge-executed { color: #6fcf97; border-color: #2f6b4a; }
.badge-rejected, .badge-cancelled, .badge-expired { color: var(--muted); }

.tabbar a { position: relative; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hi); }
.notice-unread { border-color: var(--gold-hi); }