/* ==========================================================================
   سامانهٔ جدول‌نویسی مسابقات کاراته — شیوه‌نامهٔ ظاهری

   دو حالت کاملاً متفاوت دارد:
     • صفحه — ابزار کار مسئول برگزاری، در سالن و زیر فشار زمان
     • چاپ  — برگهٔ A4 که روی دیوار سالن نصب می‌شود

   خروجی چاپی عمداً با CSS ساخته می‌شود، نه با عکس‌برداری از صفحه.
   نسخهٔ قبلی پروژه از html2canvas استفاده می‌کرد که از رابط تیره عکس
   می‌گرفت و PDF سیاه و ناخوانا تولید می‌کرد.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   ۱) فونت — محلی، نه از CDN

   در سالن مسابقه اینترنت پایدار نیست. اگر فونت از اینترنت بیاید، درست
   همان‌جایی که به برنامه نیاز داریم ظاهرش خراب می‌شود. نسخهٔ قبلی پروژه
   دقیقاً همین مشکل را داشت.

   فونت متغیر یک فایل ۱۰۹ کیلوبایتی است که همهٔ وزن‌ها را می‌دهد؛
   نسخه‌های ایستا فقط برای مرورگرهایی است که فونت متغیر نمی‌شناسند.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Vazirmatn VF';
  src: url('fonts/Vazirmatn-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   ۲) نشانه‌های طراحی
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* ---- رنگ ----
     سرمه‌ای پایه از رنگ رسمی فرم‌های کاغذی هیات گرفته شده تا خروجی
     دیجیتال و کاغذی یک خانواده به‌نظر برسند. */
  --ink:        #16202e;
  --ink-soft:   #4a5568;
  --ink-faint:  #8a95a5;

  --bg:         #f1f4f8;
  --surface:    #ffffff;
  --surface-2:  #f7f9fc;

  --line:       #e4e9f0;
  --line-2:     #cbd4e1;

  --brand:      #14304f;
  --brand-600:  #1d4374;
  --brand-100:  #e8eef6;

  --accent:     #1e63d0;
  --accent-600: #1750ac;
  --accent-100: #e6efff;

  --ok:      #14602f;  --ok-bg:   #e6f6ea;  --ok-line:   #8ed3a4;
  --warn:    #8a5a06;  --warn-bg: #fff6e3;  --warn-line: #edc77c;
  --err:     #a51d1d;  --err-bg:  #fdeced;  --err-line:  #e79fa1;
  --info:    #12557f;  --info-bg: #e7f1f9;  --info-line: #a2c6e0;

  --gold:   #a67c00;
  --silver: #6b7280;
  --bronze: #92552a;

  /* ---- فاصله و شکل ---- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(16, 32, 46, .05);
  --shadow:    0 2px 8px rgba(16, 32, 46, .07);
  --shadow-lg: 0 8px 28px rgba(16, 32, 46, .12);

  --header-h: 3.5rem;

  /* ---- تایپوگرافی ---- */
  --font: 'Vazirmatn VF', 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  --font-mono: 'Cascadia Mono', Consolas, 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  font-feature-settings: 'ss01';   /* شکل بهتر «ی» و «ک» فارسی */
  -webkit-font-smoothing: antialiased;
}

/* اعداد در جدول‌ها باید هم‌عرض باشند تا ستون‌ها نلرزند */
table, .stat b, .clock, .num { font-variant-numeric: tabular-nums; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-600); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------------------
   ۳) نوار بالا
   --------------------------------------------------------------------------- */

.topbar {
  background: linear-gradient(180deg, var(--brand-600), var(--brand));
  color: #fff;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar .inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.topbar .brand {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.topbar .brand::before {
  content: '';
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  flex: 0 0 auto;
  /* نشان ساده: دو نوار افقی مثل کمربند */
  background-image: linear-gradient(180deg, transparent 38%, #fff 38%, #fff 46%, transparent 46%,
                                            transparent 56%, rgba(255,255,255,.55) 56%, rgba(255,255,255,.55) 64%, transparent 64%);
}

.topbar .who {
  margin-inline-start: auto;
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  color: rgba(255, 255, 255, .92);
}

.topbar .who a { color: #cddffa; text-decoration: none; }
.topbar .who a:hover { color: #fff; text-decoration: underline; }

.topbar .role {
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: .1rem .65rem;
  font-size: .78rem;
}

/* ---------------------------------------------------------------------------
   ۴) نوار مسابقه
   --------------------------------------------------------------------------- */

.eventbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--header-h);
  z-index: 15;
}

.eventbar .inner { max-width: 1280px; margin: 0 auto; padding: .8rem 1.25rem .3rem; }

.eventbar .etitle {
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.eventbar nav {
  display: flex;
  gap: .1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  margin: 0 -.4rem;
  padding: 0 .4rem;
}

.eventbar nav a {
  text-decoration: none;
  color: var(--ink-soft);
  padding: .5rem .85rem .7rem;
  font-size: .93rem;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  transition: color .12s, border-color .12s;
}

.eventbar nav a:hover { color: var(--ink); }
.eventbar nav a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------------------
   ۵) نشان وضعیت
   --------------------------------------------------------------------------- */

.status {
  font-size: .76rem;
  font-weight: 500;
  border-radius: 999px;
  padding: .12rem .7rem;
  white-space: nowrap;
  border: 1px solid transparent;
}

.status-draft        { background: #eef1f6; color: var(--ink-soft);   border-color: var(--line-2); }
.status-registration { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
.status-drawn        { background: #efe9fb; color: #5a2ca0;            border-color: #c9b6ea; }
.status-running      { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-line); }
.status-finished     { background: #e9edf2; color: #3c4757;            border-color: var(--line-2); }
.status-archived     { background: #f2f4f7; color: var(--ink-faint);   border-color: var(--line); }

/* ---------------------------------------------------------------------------
   ۶) چیدمان
   --------------------------------------------------------------------------- */

.wrap { max-width: 1280px; margin: 0 auto; padding: 1.75rem 1.25rem 5rem; }
.narrow { max-width: 760px; }

h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .35rem; }
h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin: 2.25rem 0 .9rem; }
h3 { font-size: 1rem;    font-weight: 700; margin: 1.6rem 0 .6rem; }

.lede { color: var(--ink-soft); margin: 0 0 1.6rem; max-width: 68ch; }
.hint { color: var(--ink-faint); font-size: .87rem; font-weight: 400; line-height: 1.6; }
.muted { color: var(--ink-soft); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------------------------------------------------------------------------
   ۷) فرم
   --------------------------------------------------------------------------- */

label { display: block; font-weight: 500; font-size: .91rem; margin-bottom: .35rem; }

input[type=text], input[type=password], input[type=number], input[type=file],
select, textarea {
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font: inherit;
  background: var(--surface);
  color: inherit;
  transition: border-color .12s, box-shadow .12s;
}

input:hover:not(:disabled), select:hover, textarea:hover { border-color: #aab7c8; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-100);
}

input[type=file] { padding: .45rem; cursor: pointer; }
textarea { min-height: 8.5rem; resize: vertical; line-height: 1.85; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%234a5568' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .7rem center;
  padding-inline-start: 2rem;
}

input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

.field { margin-bottom: 1.1rem; }

/* ---------------------------------------------------------------------------
   ۸) دکمه
   --------------------------------------------------------------------------- */

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: .55rem 1.3rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background .12s, box-shadow .12s, transform .06s;
}

button:hover, .btn:hover { background: var(--accent-600); color: #fff; box-shadow: var(--shadow); }
button:active, .btn:active { transform: translateY(1px); box-shadow: none; }

.btn-plain {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-plain:hover { background: var(--surface-2); color: var(--ink); border-color: #aab7c8; }

.btn-danger { background: var(--err); }
.btn-danger:hover { background: #8b1717; }

.btn-sm { padding: .32rem .85rem; font-size: .87rem; }

button[disabled], .btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-top: 1.2rem;
}

/* ---------------------------------------------------------------------------
   ۹) پیام
   --------------------------------------------------------------------------- */

.flash, .note {
  padding: .8rem 1.1rem;
  border-radius: var(--r);
  margin-bottom: 1rem;
  border: 1px solid;
  border-inline-start-width: 3px;
}

.flash.ok,    .note.ok    { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-line); }
.flash.error, .note.error { background: var(--err-bg);  color: var(--err);  border-color: var(--err-line); }
.flash.warn,  .note.warn  { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.flash.info,  .note.info  { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }

.note a { color: inherit; font-weight: 500; }

/* ---------------------------------------------------------------------------
   ۱۰) جدول داده
   --------------------------------------------------------------------------- */

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

table.data { width: 100%; border-collapse: collapse; }

table.data th, table.data td {
  padding: .6rem .85rem;
  text-align: right;
  border-bottom: 1px solid var(--line);
}

table.data th {
  background: var(--surface-2);
  color: var(--ink-soft);
  font-weight: 500;
  font-size: .84rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
  position: sticky;
  top: 0;
  z-index: 1;
}

table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data td.muted { color: var(--ink-soft); }

.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   ۱۱) کارت آمار
   --------------------------------------------------------------------------- */

.stats { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }

.stat {
  flex: 1 1 150px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .85rem 1.05rem;
  box-shadow: var(--shadow-sm);
}

.stat b {
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.stat span { color: var(--ink-faint); font-size: .82rem; }

.pill {
  display: inline-block;
  background: var(--brand-100);
  color: var(--brand);
  border: 1px solid #cddcec;
  border-radius: 999px;
  padding: .1rem .65rem;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
}

.yes { color: var(--ok); font-weight: 700; }
.no  { color: #d0d7e0; }

/* مدال */
.medal-gold   { color: var(--gold);   font-weight: 700; }
.medal-silver { color: var(--silver); font-weight: 700; }
.medal-bronze { color: var(--bronze); font-weight: 700; }

code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: .08rem .4rem;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: .88em;
  direction: ltr;
  display: inline-block;
}

details > summary { cursor: pointer; font-weight: 500; }
details > summary::marker { color: var(--ink-faint); }

/* ==========================================================================
   ۱۲) جدول حذفی
   ========================================================================== */

.bracket {
  display: flex;
  align-items: stretch;
  direction: rtl;
  overflow-x: auto;
  padding: .5rem 0 .75rem;
  scrollbar-width: thin;
}

.bracket .round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-width: 200px;
  flex: 0 0 auto;
}

.bracket .match {
  position: relative;
  margin: .3rem 0;
  padding-inline-end: 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 0 auto;
}

.bracket .slot {
  border: 1px solid var(--line-2);
  background: var(--surface);
  padding: .32rem .6rem;
  font-size: .88rem;
  line-height: 1.5;
  min-height: 2.1rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  transition: border-color .12s;
}

.bracket .slot:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.bracket .slot:last-child  { border-radius: 0 0 var(--r-sm) var(--r-sm); }
.bracket .slot + .slot { border-top: 0; }
.bracket .match:hover .slot { border-color: #aab7c8; }

.bracket .slot .seed {
  color: var(--ink-faint);
  font-size: .76rem;
  min-width: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.bracket .slot .name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.bracket .slot .club { color: var(--ink-faint); font-size: .75rem; }

.bracket .slot.bye {
  background: var(--surface-2);
  color: var(--ink-faint);
  font-style: italic;
}

/* مبارزه‌ای که یک طرفش استراحت است: یک کادر، با نشان «استراحت».
   بدون این، کادر خالیِ روبه‌رو روی برگهٔ چاپی شبیه «این نفر هم استراحت
   خورده» دیده می‌شد. */
.bracket .match-bye .slot { border-radius: var(--r-sm); }

.bracket .slot.advances { border-style: dashed; }

.bracket .slot .bye-tag {
  flex: 0 0 auto;
  font-size: .68rem;
  color: var(--ink-faint);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0 .4rem;
  line-height: 1.5;
}

.bracket .slot.winner {
  background: var(--ok-bg);
  border-color: var(--ok-line);
  position: relative;
}

.bracket .slot.winner .name { font-weight: 700; color: var(--ok); }

/* خطوط اتصال بین دورها */
.bracket .match::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: 1.15rem;
  border-top: 1px solid var(--line-2);
}

.bracket .round:last-child .match::after { display: none; }

.bracket .match::before {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 25%;
  bottom: 25%;
  border-inline-end: 1px solid var(--line-2);
}

.bracket .round:first-child .match::before,
.bracket .round:last-child .match::before { display: none; }

/* ==========================================================================
   ۱۳) چاپ — برگهٔ A4
   ========================================================================== */

@page {
  size: A4 portrait;
  margin: 12mm 10mm;
}

@media print {
  .no-print, .topbar, .eventbar, .flash, .actions, form.no-print,
  details, button { display: none !important; }

  body {
    background: #fff;
    color: #000;
    font-size: 10pt;
    line-height: 1.5;
  }

  .wrap { max-width: none; padding: 0; margin: 0; }

  .card {
    border: 0;
    padding: 0;
    margin: 0 0 4mm;
    background: transparent;
    box-shadow: none;
  }

  a { color: #000; text-decoration: none; }

  /* هر جدول یک برگهٔ مستقل؛ هرگز وسطش نمی‌شکند */
  .print-page {
    page-break-after: always;
    break-after: page;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
  }

  .print-page:last-child { page-break-after: auto; break-after: auto; }
  .avoid-break { page-break-inside: avoid; break-inside: avoid; }

  .print-header {
    text-align: center;
    border-bottom: 1.5pt solid #000;
    padding-bottom: 2mm;
    margin-bottom: 4mm;
  }

  .print-header .title { font-size: 13pt; font-weight: 700; }
  .print-header .sub { font-size: 9pt; margin-top: 1mm; color: #000; }
  .print-header .logo { max-height: 18mm; margin-bottom: 2mm; }

  /* سربرگ با آرم: آرم کنارهٔ راست، متن وسط برگه می‌ماند */
  .print-header.has-logo {
    display: flex;
    align-items: center;
    gap: 4mm;
    text-align: right;
  }

  .print-header.has-logo .print-headtext { flex: 1; text-align: center; }
  .print-header .print-logo { max-height: 20mm; max-width: 32mm; flex: 0 0 auto; }

  /* ردیف استراحت در برنامهٔ اجرا */
  .break-row td { background: #eee !important; font-style: italic; }

  .print-meta {
    display: flex;
    justify-content: space-between;
    font-size: 9.5pt;
    border: 1pt solid #000;
    padding: 1.5mm 3mm;
    margin-bottom: 3mm;
  }

  .print-footer {
    margin-top: 5mm;
    padding-top: 2mm;
    border-top: 1pt solid #000;
    display: flex;
    justify-content: space-between;
    font-size: 9pt;
    color: #000;
  }

  /* جدول حذفی در چاپ: سیاه روی سفید، بدون رنگ و سایه */
  .bracket { overflow: visible; page-break-inside: avoid; break-inside: avoid; }
  .bracket .round { min-width: 44mm; }

  .bracket .slot {
    border: .8pt solid #000 !important;
    border-radius: 0;
    background: #fff !important;
    color: #000;
    font-size: 9pt;
    min-height: 7mm;
    padding: .8mm 1.5mm;
  }

  .bracket .slot.bye { background: #f0f0f0 !important; }
  .bracket .slot .bye-tag { border-color: #999; color: #444; }
  .bracket .slot.winner { background: #fff !important; }
  .bracket .slot.winner .name { color: #000; font-weight: 700; }
  .bracket .slot .name { font-weight: 400; }
  .bracket .match::after, .bracket .match::before { border-color: #000; }

  .tablewrap { overflow: visible; border: 0; border-radius: 0; box-shadow: none; }

  table.data { border: .8pt solid #000; }
  table.data th {
    background: #e8e8e8 !important;
    color: #000 !important;
    border: .6pt solid #000;
    position: static;
    font-weight: 700;
  }
  table.data td { border: .6pt solid #000; }
  table.data tbody tr:hover td { background: transparent !important; }

  .stat, .pill { border: .6pt solid #000; background: #fff !important; color: #000; box-shadow: none; }
}

/* جدول‌های چاپی روی صفحه هم دیده می‌شوند تا پیش از چاپ قابل بررسی باشند */
.print-page {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.print-header {
  text-align: center;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .7rem;
  margin-bottom: 1.1rem;
}

.print-header .title { font-size: 1.1rem; font-weight: 700; }
.print-header .sub { font-size: .85rem; color: var(--ink-soft); margin-top: .25rem; }

.print-header.has-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: right;
}

.print-header.has-logo .print-headtext { flex: 1; text-align: center; }
.print-header .print-logo { max-height: 72px; max-width: 120px; flex: 0 0 auto; }

.break-row td {
  background: var(--surface-2);
  font-style: italic;
  color: var(--ink-soft);
}

.print-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: .45rem .85rem;
  margin-bottom: .9rem;
  font-size: .89rem;
  color: var(--ink-soft);
}

.print-footer {
  margin-top: 1.3rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  font-size: .87rem;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   ۱۴) صفحهٔ باریک (ورود)
   --------------------------------------------------------------------------- */

body.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  background:
    radial-gradient(circle at 15% 0%, #e3ecf8 0%, transparent 55%),
    radial-gradient(circle at 85% 100%, #e8eef6 0%, transparent 50%),
    var(--bg);
}

/* ---------------------------------------------------------------------------
   ۱۵) — بخش «دستگاه‌های کوچک» عمداً به انتهای فایل منتقل شده است.

   پرس‌وجوی رسانه‌ای، ویژگی‌ها را با همان قدرت انتخابگر بازنویسی می‌کند،
   پس هر قاعده‌ای که بعد از آن بیاید برنده می‌شود. وقتی این بخش اینجا بود،
   بخش‌های بعدی (خطا، راهنما، تور، تأیید کاربر) قواعد موبایلش را بی‌صدا
   خنثی می‌کردند. انتهای فایل تنها جای درست برای آن است.
   --------------------------------------------------------------------------- */

/* ==========================================================================
   ۱۶) جعبهٔ خطای کاربرپسند
   کاربر متن فنی نمی‌بیند: یک جمله، یک فهرست «چه کار کنم؟»، و کد پیگیری.
   ========================================================================== */

.errorbox { padding: 1rem 1.2rem; }
.errorbox-msg { margin: 0; font-weight: 600; font-size: 1.02rem; }
.errorbox-lead { margin: .8rem 0 .3rem; font-weight: 600; font-size: .93rem; }

.errorbox-steps {
  margin: 0;
  padding-inline-start: 1.3rem;
  font-size: .93rem;
  line-height: 1.9;
}

.errorbox-links { margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }

.errorbox-ref {
  margin: .9rem 0 0;
  font-size: .85rem;
  color: var(--ink-faint);
}

.errorbox-tech {
  margin-top: 1rem;
  padding: .9rem;
  background: #1c2733;
  color: #d8e3ee;
  border-radius: var(--r-sm);
  font-size: .78rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ==========================================================================
   ۱۷) راهنمای کاربری — نسخهٔ چاپی/PDF
   ========================================================================== */

.guide { max-width: 52rem; }
.guide h2 { border-bottom: 2px solid var(--line); padding-bottom: .35rem; }
.guide h3 { margin-top: 1.6rem; }
.guide p, .guide li { line-height: 2.05; }
.guide ol, .guide ul { padding-inline-start: 1.4rem; }
.guide li { margin-bottom: .35rem; }

.guide-toc { columns: 2; column-gap: 2rem; font-size: .95rem; }
.guide-toc a { display: block; padding: .18rem 0; }

.guide-step {
  display: flex;
  gap: .9rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}

.guide-step:last-child { border-bottom: 0; }

.guide-step .n {
  flex: 0 0 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .95rem;
}

.guide-step .body { flex: 1 1 auto; }
.guide-step .body b { display: block; margin-bottom: .2rem; }

.guide-cover {
  text-align: center;
  padding: 3rem 1rem;
  border-bottom: 3px double var(--line-2);
  margin-bottom: 2rem;
}

.guide-cover h1 { font-size: 1.9rem; margin-bottom: .4rem; }
.guide-cover .sub { color: var(--ink-faint); }

@media print {
  .guide-toc { columns: 2; }
  .guide h2 { page-break-before: always; break-before: page; page-break-after: avoid; }
  .guide h2:first-of-type { page-break-before: auto; break-before: auto; }
  .guide h3 { page-break-after: avoid; }
  .guide-step, .guide figure { page-break-inside: avoid; break-inside: avoid; }
  .guide-cover { page-break-after: always; break-after: page; border: 0; }
}

/* ==========================================================================
   ۱۸) تور آموزشی (driver.js) — تطبیق با پوستهٔ سامانه
   ========================================================================== */

/*
 * فونت تور.
 *
 * driver.css این را دارد:  .driver-popover * { font-family: Helvetica … }
 * یعنی یک انتخابگر فرزندِ همگانی که به عنوان، متن و دکمه‌های داخل پنجره
 * می‌نشیند. تنظیم font-family روی خود پنجره کافی نیست، چون فرزندها
 * همان قاعده را روی خودشان دارند و ارث نمی‌برند — نتیجه‌اش این بود که
 * متن تور با فونت پیش‌فرض سیستم نمایش داده می‌شد، نه وزیرمتن.
 *
 * انتخابگر زیر دو کلاسه است (۰٬۲٬۰) و از قاعدهٔ کتابخانه (۰٬۱٬۰) قوی‌تر،
 * پس نیازی به !important نیست. عنوان و توضیح هم `font` سرنویس دارند که
 * font-family را ریست می‌کند؛ همین قاعده جبرانش می‌کند.
 *
 * پشتیبان صریح نوشته شده چون .driver-popover مقدار all:unset دارد.
 */
.driver-popover.komite-tour,
.driver-popover.komite-tour * {
  font-family: var(--font, 'Vazirmatn VF', 'Vazirmatn', Tahoma, sans-serif);
}

.driver-popover.komite-tour {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: 0 18px 40px rgba(12, 28, 48, .22);
  font-family: inherit;
  max-width: 22rem;
  padding: 1rem 1.1rem;
}

.komite-tour .driver-popover-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: .35rem;
}

.komite-tour .driver-popover-description {
  font-size: .92rem;
  line-height: 1.95;
  color: var(--ink-soft);
}

.komite-tour .driver-popover-progress-text {
  font-size: .8rem;
  color: var(--ink-faint);
}

.komite-tour .driver-popover-footer button {
  font-size: .88rem;
  border-radius: var(--r-sm);
  padding: .35rem .9rem;
  text-shadow: none;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink);
}

.komite-tour .driver-popover-footer .driver-popover-next-btn {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.komite-tour .driver-popover-arrow-side-left  { border-left-color: var(--surface); }
.komite-tour .driver-popover-arrow-side-right { border-right-color: var(--surface); }
.komite-tour .driver-popover-arrow-side-top   { border-top-color: var(--surface); }
.komite-tour .driver-popover-arrow-side-bottom{ border-bottom-color: var(--surface); }

/* نوار پیشنهاد تور — فقط برای کاربر تازه، و همیشه قابل رد کردن */
.tourbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.4rem;
  padding: .8rem 1.1rem;
  border: 1px solid var(--line-2);
  border-inline-start: 4px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: .93rem;
}

.tourbar .txt { flex: 1 1 14rem; }
.tourbar .txt b { display: block; }
.tourbar .txt span { color: var(--ink-faint); font-size: .88rem; }

.tour-hint {
  display: inline-block;
  margin-inline-start: .3rem;
  color: var(--ink-faint);
  cursor: help;
}

/* ==========================================================================
   ۱۹) تأیید کاربر
   ========================================================================== */

/* نشان تعداد درخواست‌های بررسی‌نشده، در نوار بالا کنار «کاربران» */
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  margin-inline-start: .25rem;
  border-radius: 999px;
  background: var(--err);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: middle;
}

/* کارتی که عدد در انتظار تأیید را نشان می‌دهد، وقتی صفر نیست */
.pending-stat {
  border-color: var(--warn-line);
  background: var(--warn-bg);
}

.pending-stat b { color: var(--warn); }

/* ---------------------------------------------------------------------------
   ۲۰) دستگاه‌های کوچک — اول موبایل
   ---------------------------------------------------------------------------

   سه اندازه در نظر گرفته شده:

     ≤ ۹۰۰px   تبلت و لپ‌تاپ کوچک — فقط فشرده‌تر می‌شود
     ≤ ۶۴۰px   موبایل — جدول‌ها به کارت تبدیل می‌شوند
     ≤ ۳۶۰px   موبایل کوچک — یک ستونه و فشرده‌تر

   مهم‌ترین تصمیم، رفتار جدول‌هاست. جدول هفت‌ستونی روی صفحهٔ ۳۶۰ پیکسلی
   یا آن‌قدر فشرده می‌شود که هر کلمه یک سطر بگیرد، یا ستون‌های سمت چپش —
   که معمولاً دکمه‌های عمل‌اند — کاملاً از دید بیرون می‌مانند و کاربر
   نمی‌داند باید افقی اسکرول کند. هر دو حالت روی گوشی غیرقابل استفاده
   بود. پس روی موبایل، جدول‌های عملیاتی به کارت تبدیل می‌شوند: هر سطر یک
   کارت، و هر خانه یک جفت «برچسب: مقدار» که برچسبش از data-label می‌آید.

   جدول‌های عددی (مثل فرم امتیاز داوران) از این قاعده مستثنا هستند و
   افقی اسکرول می‌شوند، چون شبکهٔ عددی به‌شکل کارت خوانایی‌اش را از دست
   می‌دهد. آن‌ها کلاس cards نمی‌گیرند.
   --------------------------------------------------------------------------- */

/* هر سه پرس‌وجو عمداً screen هستند: عرض کاغذ A4 حدود ۷۹۴ پیکسل است و
   بدون این قید، قواعد «تبلت» موقع چاپ هم اجرا می‌شدند و حاشیهٔ صفر
   برگهٔ چاپی را خراب می‌کردند. */

/* ───────── تبلت ───────── */

@media screen and (max-width: 900px) {
  .wrap { padding: 1.5rem 1.1rem 4rem; }
  .grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .guide-toc { columns: 1; }
}

/* ───────── موبایل ───────── */

@media screen and (max-width: 640px) {
  body { font-size: 14.5px; }

  .wrap { padding: 1.1rem .8rem 3.5rem; }
  .card { padding: 1.05rem 1rem; border-radius: var(--r); }

  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.05rem; margin-top: 1.7rem; }
  h3 { font-size: .97rem; }

  .lede { margin-bottom: 1.1rem; }

  /* ── نوار بالا ──
     برند و بخش کاربر در دو سطر می‌نشینند تا نام و نقش بریده نشوند. */
  .topbar { height: auto; }

  .topbar .inner {
    padding: .5rem .8rem;
    flex-wrap: wrap;
    gap: .4rem .7rem;
    min-height: 0;
  }

  .topbar .brand { font-size: .94rem; }
  .topbar .brand::before { width: 1.35rem; height: 1.35rem; }

  .topbar .who {
    margin-inline-start: 0;
    width: 100%;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .82rem;
    padding-bottom: .1rem;
  }

  /* نوار بالا روی موبایل چسبان نمی‌ماند: ارتفاعش دو سطر است و روی
     صفحهٔ کوتاه، یک‌سومِ فضای مفید را می‌خورد. */
  .topbar, .eventbar { position: static; }

  .eventbar .inner { padding: .7rem .8rem .2rem; }
  .eventbar .etitle { font-size: .95rem; margin-bottom: .45rem; }

  /* زبانه‌ها افقی اسکرول می‌شوند؛ سایهٔ لبه نشان می‌دهد که ادامه دارد */
  .eventbar nav {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to left, #000 88%, transparent 100%);
    mask-image: linear-gradient(to left, #000 88%, transparent 100%);
  }

  .eventbar nav::-webkit-scrollbar { display: none; }
  .eventbar nav a { padding: .45rem .7rem .6rem; font-size: .89rem; }

  /* ── آمار ── */
  .stat { flex: 1 1 calc(50% - .4rem); padding: .8rem .9rem; }
  .stat b { font-size: 1.22rem; }

  /* ── دکمه‌ها: هدف لمس دست‌کم ۴۴ پیکسل ── */
  button, .btn { padding: .62rem 1.1rem; min-height: 2.75rem; }
  .btn-sm { padding: .45rem .8rem; min-height: 2.25rem; font-size: .85rem; }

  .actions { gap: .5rem; }
  .actions > form { display: contents; }

  /* فرم‌های تک‌ستونه؛ فیلدها تمام‌عرض */
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: .9rem; }
  .field { margin-bottom: .95rem; }
  .field[style*="max-width"] { max-width: none !important; }

  /* ── جدول‌های عملیاتی → کارت ── */
  .tablewrap.cards {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  table.data.cards,
  table.data.cards tbody,
  table.data.cards tr,
  table.data.cards td {
    display: block;
    width: auto;
  }

  table.data.cards thead { display: none; }

  table.data.cards tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    margin-bottom: .7rem;
    padding: .25rem .1rem;
  }

  table.data.cards tbody tr:hover td { background: transparent; }

  table.data.cards td {
    border-bottom: 1px dashed var(--line);
    padding: .5rem .85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    text-align: start;
  }

  table.data.cards tr td:last-child { border-bottom: 0; }

  /* برچسب ستون، از data-label همان خانه */
  table.data.cards td[data-label]::before {
    content: attr(data-label);
    color: var(--ink-faint);
    font-size: .8rem;
    font-weight: 600;
    flex: 0 0 auto;
  }

  /* خانه‌های بدون برچسب (ستون دکمه‌ها) تمام‌عرض می‌شوند */
  table.data.cards td:not([data-label]) {
    background: var(--surface-2);
    border-radius: 0 0 var(--r) var(--r);
    padding: .6rem .85rem;
  }

  table.data.cards td:not([data-label]) > .actions { margin: 0; }

  /* عنوان هر کارت: خانهٔ نخست، درشت‌تر و بدون برچسب تکراری */
  table.data.cards td.cardtitle {
    background: var(--surface-2);
    border-radius: var(--r) var(--r) 0 0;
    font-size: 1rem;
  }

  table.data.cards td.cardtitle::before { display: none; }

  /* ستون‌هایی که روی موبایل ارزش جا گرفتن ندارند */
  table.data.cards td.hide-sm { display: none; }

  /* ── جدول‌های عددیِ اسکرول‌شونده ── */
  .tablewrap { border-radius: var(--r); }
  table.data:not(.cards) th, table.data:not(.cards) td { padding: .5rem .7rem; font-size: .88rem; }

  /* ── جدول حذفی ── */
  .bracket .round { min-width: 168px; }
  .bracket .slot { font-size: .84rem; padding: .3rem .5rem; }

  /* ── تور و راهنما ── */
  .tourbar { padding: .7rem .85rem; gap: .5rem; }
  .tourbar .txt { flex: 1 1 100%; }
  .tourbar button { flex: 1 1 auto; }

  .guide-step { gap: .7rem; }
  .guide-step .n { flex-basis: 1.7rem; height: 1.7rem; font-size: .85rem; }
  .guide-cover { padding: 1.6rem .5rem; }
  .guide-cover h1 { font-size: 1.32rem; }

  .errorbox { padding: .9rem 1rem; }
  .errorbox-links .btn { flex: 1 1 auto; }

  /* پنجرهٔ تور نباید از عرض صفحه بیرون بزند */
  .driver-popover.komite-tour { max-width: calc(100vw - 1.6rem); }
}

/* ───────── موبایل کوچک ───────── */

@media screen and (max-width: 380px) {
  .wrap { padding: 1rem .65rem 3rem; }
  .card { padding: .9rem .8rem; }
  /* دکمه‌ها به‌جای تمام‌عرض شدن، عرض سطر را بین خودشان پخش می‌کنند:
     یک ردیف چهار زبانه‌ای روی گوشی چهار سطر جدا می‌گرفت. */
  .actions > .btn, .actions > button, .actions > form > button { flex: 1 1 8rem; }
  .topbar .brand { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}