/* همکاران معلم کلاس — shared design tokens (brand: ruby/gold on ivory; black retired).
   Rules: headings, cards and buttons centered; Persian paragraphs justified; graphics over text;
   solid ruby = "click me"; gold = decoration/value only (never gold text on light backgrounds). */
.mkh, .mkh-wrap {
  --mkh-ruby:#D0101C; --mkh-ruby2:#A50E24; --mkh-seal:#8C1428; --mkh-wine:#6E1423; --mkh-wine-dark:#5E0E1C;
  --mkh-paper:#FFFCF8; --mkh-ivory:#FFF8EE; --mkh-bg:#FFF6F5; --mkh-blush:#FFE4E6; --mkh-sand:#FBF1EC;
  --mkh-gold:#D4AF37; --mkh-gold-soft:#F6DB8A; --mkh-gold-text:#7A5C00;
  --mkh-ink:#22161A; --mkh-text:#4A3B3D; --mkh-muted:#76605F; --mkh-line:#EBD6D2;
  --mkh-ok:#1F7A4D; --mkh-ok-bg:#E3F4EA; --mkh-warn:#8A5A00; --mkh-warn-bg:#FFF1CF;
  --mkh-radius:14px; --mkh-shadow:0 2px 10px rgba(110,20,35,.06);
  direction: rtl; color: var(--mkh-text); font-family: inherit; line-height: 1.9;
}
.mkh *, .mkh-wrap * { box-sizing: border-box; }
.mkh h1, .mkh h2, .mkh h3, .mkh-wrap .mkh-center { text-align: center; color: var(--mkh-ink); text-wrap: balance; }
.mkh p, .mkh .mkh-justify { text-align: justify; }
.mkh-card { background: var(--mkh-paper); border: 1px solid var(--mkh-line); border-radius: var(--mkh-radius); padding: 18px; box-shadow: var(--mkh-shadow); }
.mkh-card--value { background: var(--mkh-ivory); border: 1.5px solid var(--mkh-gold); }
.mkh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--mkh-ruby); color: #fff !important; border: 0; border-radius: 12px; padding: 10px 22px; font-weight: 700; font-family: inherit; font-size: 15px; cursor: pointer; text-decoration: none !important; transition: background .2s; }
.mkh-btn:hover, .mkh-btn:focus { background: var(--mkh-ruby2); color: #fff; }
.mkh-btn:focus-visible { outline: 3px solid var(--mkh-gold-soft); outline-offset: 2px; }
.mkh-btn--ghost { background: transparent; color: var(--mkh-ruby) !important; border: 1.5px solid var(--mkh-ruby); }
.mkh-btn--ghost:hover { background: var(--mkh-blush); color: var(--mkh-ruby2) !important; }
.mkh-btn--sm { padding: 6px 14px; font-size: 13px; border-radius: 10px; }
.mkh-badge { display: inline-block; border-radius: 999px; padding: 2px 12px; font-size: 12px; font-weight: 700; line-height: 1.8; white-space: nowrap; }
.mkh-icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mkh-icon-bubble { width: 48px; height: 48px; border-radius: 50%; background: var(--mkh-blush); color: var(--mkh-ruby); display: inline-grid; place-items: center; }
.mkh-grid { display: grid; gap: 14px; }
.mkh-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mkh-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mkh-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 782px) { .mkh-grid-3, .mkh-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .mkh-grid-2, .mkh-grid-3, .mkh-grid-4 { grid-template-columns: 1fr; } }
.mkh-kpi { text-align: center; }
.mkh-kpi b { display: block; font-size: 24px; color: var(--mkh-ink); font-variant-numeric: tabular-nums; }
.mkh-kpi span:not(.mkh-icon-bubble) { font-size: 13px; color: var(--mkh-muted); }
.mkh-kpi .mkh-icon-bubble { color: var(--mkh-ruby); font-size: inherit; }
.mkh-notice { border-radius: 12px; padding: 12px 16px; text-align: center; font-weight: 600; }
.mkh-notice--ok { background: var(--mkh-ok-bg); color: var(--mkh-ok); }
.mkh-notice--warn { background: var(--mkh-warn-bg); color: var(--mkh-warn); }
.mkh-notice--err { background: var(--mkh-blush); color: var(--mkh-ruby2); }
.mkh-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mkh-table th, .mkh-table td { padding: 10px 8px; border-bottom: 1px solid var(--mkh-line); text-align: center; vertical-align: middle; }
.mkh-table th { color: var(--mkh-muted); font-weight: 600; font-size: 13px; }
.mkh-table td { font-variant-numeric: tabular-nums; }
.mkh-table-wrap { position: relative; overflow-x: auto; }
.mkh-progress { height: 10px; border-radius: 999px; background: var(--mkh-blush); overflow: hidden; }
.mkh-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--mkh-gold), var(--mkh-ruby)); border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { .mkh *, .mkh-wrap * { transition: none !important; animation: none !important; } }