@font-face {
  font-family: Vazirmatn;
  src: url('/assets/fonts/Vazirmatn.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  font-family: Vazirmatn, Tahoma, sans-serif;
  color: #17243b;
  background: #f5f7fb;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { max-width: 1600px; margin: auto; padding: 0 32px 48px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 90px; border-bottom: 1px solid #e5e9f1;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 13px; background: #087d83; color: white;
  font-size: 23px; font-weight: 800;
}
.brand strong, .brand small { display: block; }
.brand small { color: #7c879b; font-size: 12px; }
h1 { font-size: 26px; margin: 8px 0; }
h2 { font-size: 16px; margin: 0; }
p { color: #78859a; font-size: 13px; }
.eyebrow { color: #087d83; font-size: 12px; font-weight: 700; }
.button {
  border: 0; border-radius: 11px; padding: 12px 18px;
  font-weight: 700;
}
.primary { background: #087d83; color: white; }
.secondary { color: #34445c; background: #e8edf4; }
.button:focus-visible, input:focus-visible {
  outline: 3px solid #80c9cc; outline-offset: 2px;
}
.login-wrap {
  min-height: calc(100vh - 140px);
  display: grid; place-items: center; padding: 28px 0;
}
.login-card {
  width: min(100%, 420px); background: white; padding: 36px;
  border: 1px solid #e7ebf2; border-radius: 22px;
  box-shadow: 0 12px 40px #1c2c4a0a;
}
.login-card label { display: block; font-size: 13px; margin: 18px 0 8px; }
.login-card input {
  width: 100%; padding: 13px; border: 1px solid #dce3ee;
  border-radius: 11px; background: #fbfcfe; direction: ltr;
}
.login-card .primary { width: 100%; margin-top: 24px; }
.error { margin-top: 14px; color: #b32938; font-size: 13px; }
.page-heading {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; margin: 30px 0 22px;
}
.status {
  background: #e6f3f2; color: #087d83;
  padding: 9px 14px; border-radius: 30px; font-size: 12px;
}
.metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.metric, .panel {
  min-width: 0; background: white; border: 1px solid #e7ebf2;
  border-radius: 17px; padding: 22px;
}
.metric span { font-size: 13px; color: #7c879b; }
.metric strong { display: block; font-size: 30px; margin-top: 12px; }
.panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.panel p { margin: 7px 0 0; }
.panel.wide { grid-column: 1 / -1; }
.empty {
  min-height: 210px; margin-top: 18px; border-radius: 12px;
  background: #f7f9fc; color: #8995a7; display: grid;
  place-items: center; text-align: center; padding: 20px; font-size: 13px;
}
.empty.short { min-height: 145px; }
.footer-note { margin-top: 25px; text-align: center; }
@media (min-width: 1440px) {
  .shell { padding-left: 48px; padding-right: 48px; }
  .metric strong { font-size: 36px; }
  .empty { min-height: 260px; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .shell { max-width: 1200px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .shell { padding-left: 22px; padding-right: 22px; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .panels { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .shell { padding: 0 14px 30px; }
  .topbar { min-height: 70px; }
  .brand strong { font-size: 13px; }
  .brand-mark { width: 36px; height: 36px; }
  h1 { font-size: 21px; }
  .login-card { padding: 24px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .metrics, .panels { grid-template-columns: 1fr; gap: 12px; }
  .metric, .panel { padding: 17px; }
  .empty { min-height: 165px; }
  .status { font-size: 11px; }
}