@font-face { font-family: Vazirmatn; src: url(assets/Vazirmatn-FD-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url(assets/Vazirmatn-FD-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --turquoise: #0E7C86; --deep: #0A5A62; --saffron: #E8A33D; --danger: #B0233A;
  --bg: #FAF7F2; --card: #FFFFFF; --ink: #1B2430; --soft: #4A5563; --line: #E4DDD1;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0F1A1E; --card: #16242A; --ink: #E8EEF0; --soft: #A9B6BC; --line: #2A3D45; --turquoise: #3CC7CF; }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Vazirmatn, Tahoma, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.9; }
header { background: linear-gradient(135deg, #0E7C86, #0A5A62); color: #fff; padding: 48px 16px 64px; text-align: center; border-radius: 0 0 28px 28px; }
header img { width: 96px; height: 96px; border-radius: 22px; }
header h1 { margin: 12px 0 4px; font-size: 2.2rem; }
header p { margin: 0; opacity: .92; font-size: 1.1rem; }
main { max-width: 760px; margin: -32px auto 48px; padding: 0 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px 24px; margin-bottom: 16px; }
h2 { font-size: 1.25rem; margin: 0 0 8px; }
.stores { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 12px 22px; border-radius: 14px; background: var(--turquoise); color: #fff; text-decoration: none; font-weight: 700; }
.btn.alt { background: var(--saffron); color: #1B2430; }
code, .mono { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.fp { display: block; background: var(--bg); border: 1px dashed var(--line); border-radius: 12px; padding: 12px; margin-top: 8px; font-size: .9rem; }
.warn { border-color: var(--danger); }
footer { text-align: center; color: var(--soft); font-size: .9rem; padding-bottom: 32px; }
a { color: var(--turquoise); }