@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn-arabic.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

html, body, #root { min-width: 320px; min-height: 100%; }
body { margin: 0; background: #f8fafb; color: #172126; font-family: Vazirmatn, Tahoma, Arial, sans-serif; }
html[data-theme="dark"] body { background: #090b0d; color: #f8fafc; }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body { background: #090b0d; color: #f8fafc; }
}
.skip-link { position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 9999; translate: 0 -200%; border-radius: .5rem; padding: .55rem .8rem; color: #fff; background: #0f8fa4; text-decoration: none; }
.skip-link:focus { translate: 0; }
.server-boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; padding: 1rem; text-align: center; }
.server-boot-spinner { width: 2.25rem; height: 2.25rem; box-sizing: border-box; border: 2px solid rgb(100 116 139 / 28%); border-top-color: #0f8fa4; border-radius: 999px; animation: server-boot-spin .75s linear infinite; }
@keyframes server-boot-spin { to { transform: rotate(360deg); } }
.server-boot-error { max-width: 34rem; border: 1px solid #fecaca; border-radius: .75rem; padding: 1rem; color: #991b1b; background: #fff7f7; line-height: 1.8; }