/* =================================================================
 * xc-design.css — بخش طراحی مسیر کراس‌کانتری Babifly.ir
 * سازگار با پالت هواشناسی: سرمه‌ای / نارنجی / فیروزه‌ای
 * ================================================================= */

:root {
  --xc-navy:        #0e2338;
  --xc-navy-soft:   #16324b;
  --xc-navy-line:   #23405c;
  --xc-orange:      #c96412;
  --xc-orange-lit:  #ef8b35;
  --xc-teal:        #1194ab;
  --xc-teal-lit:    #35b6cc;

  --xc-surface:     #ffffff;
  --xc-surface-2:   #f4f6f8;
  --xc-ink:         #14212e;
  --xc-ink-2:       #4a5a6a;
  --xc-ink-3:       #8090a0;
  --xc-border:      #dfe5ea;

  --xc-ok:          #1f9d55;
  --xc-warn:        #b4453b;

  --xc-radius:      14px;
  --xc-radius-sm:   9px;
  --xc-shadow:      0 2px 14px rgba(14, 35, 56, 0.10);
}

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

.xc-wrap {
  display: grid;
  grid-template-columns: 1fr 306px;   /* ۱۰٪ باریک‌تر از ۳۴۰ */
  gap: 16px;
  align-items: start;
  padding: 16px;
  max-width: 1440px;
  margin: 0 auto;
}

.xc-main   { min-width: 0; }
.xc-aside  { position: sticky; top: 16px; }

.xc-card {
  background: var(--xc-surface);
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-radius);
  box-shadow: var(--xc-shadow);
  overflow: hidden;
}

.xc-card + .xc-card { margin-top: 14px; }

.xc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--xc-navy);
  color: #fff;
}
.xc-card-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.xc-card-body { padding: 14px 16px; }

/* ---------- نقشه ---------- */

#xc-map {
  height: 434px;   /* ۳۰٪ کمتر از ۶۲۰ */
  width: 100%;
  border-radius: var(--xc-radius);
  z-index: 1;
}

.leaflet-container {
  font-family: inherit;
  background: #e8eef2;
}

/* نشانگر نقاط مسیر */
.xc-pt-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
  cursor: grab;
}
.xc-pt-dot:active { cursor: grabbing; }

/* شروع و پایانِ مسیر کشیده‌شده — درشت و مشکی */
.xc-pt-end { cursor: grab; }
.xc-pt-end:active { cursor: grabbing; }
.xc-pt-end svg { display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }

/* ---------- نشانگرهای شکل امتیازی ----------
   بدون برچسب. نماد دقیقاً وسط نقطه می‌نشیند (iconAnchor نصف اندازه است). */
.xc-optmark {
  pointer-events: none;
  line-height: 0;                 /* وگرنه SVG چند پیکسل پایین‌تر می‌افتد */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.xc-optmark svg { display: block; }

/* فلش جهت حرکت روی خطوط */
.xc-dirarrow {
  pointer-events: none;
}
.xc-dirarrow svg {
  display: block;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* دستگیره میانی */
.xc-mid-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
  color: var(--xc-orange);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--xc-orange);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  opacity: .75;
  cursor: copy;
  transition: opacity .15s, transform .15s;
}
.xc-mid-dot:hover { opacity: 1; transform: scale(1.2); }

/* سایت‌های پروازی */
.xc-site-dot {
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--xc-teal);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.xc-site-pop { text-align: center; min-width: 150px; }
.xc-site-pop strong { display: block; margin-bottom: 2px; font-size: 14px; }
.xc-site-type {
  display: block;
  font-size: 12px;
  color: var(--xc-ink-3);
  margin-bottom: 8px;
}

/* ---------- پنل نتایج ---------- */

.xc-empty { text-align: center; padding: 26px 10px; }
.xc-empty-title { margin: 0 0 6px; font-weight: 700; color: var(--xc-ink); }
.xc-empty-hint  { margin: 0; font-size: 13px; line-height: 1.85; color: var(--xc-ink-2); }

.xc-hero {
  text-align: center;
  padding: 6px 0 16px;
  border-bottom: 1px solid var(--xc-border);
  margin-bottom: 14px;
}
.xc-hero-score {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--xc-navy);
  letter-spacing: -0.5px;
}
.xc-hero-unit {
  font-size: 12px;
  color: var(--xc-ink-3);
  margin-top: 2px;
}
.xc-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: var(--xc-surface-2);
  color: var(--xc-ink-2);
  border: 1px solid var(--xc-border);
}
.xc-badge .xc-mult { font-weight: 500; opacity: .75; }

.xc-type-tri_fai_cl  { background: #e8f5ec; color: #14663a; border-color: #bfe3cc; }
.xc-type-tri_fai     { background: #fdf0e3; color: #8a4409; border-color: #f2d5b5; }
.xc-type-tri_free_cl { background: #fdf0e3; color: #8a4409; border-color: #f2d5b5; }
.xc-type-tri_free    { background: #e7f4f7; color: #0b5e6d; border-color: #c2e2ea; }
.xc-type-free        { background: var(--xc-surface-2); color: var(--xc-ink-2); }

.xc-stats { margin: 0 0 4px; }
.xc-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--xc-surface-2);
}
.xc-stat dt { margin: 0; font-size: 13px; color: var(--xc-ink-2); }
.xc-stat dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--xc-ink); }
.xc-stat dd small { font-weight: 400; color: var(--xc-ink-3); }
.xc-ok { color: var(--xc-ok); font-weight: 700; }

.xc-section-title {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--xc-ink-3);
  letter-spacing: .3px;
}

.xc-legs { list-style: none; margin: 0; padding: 0; }
.xc-legs li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--xc-surface-2);
}
.xc-leg-no {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--xc-surface-2);
  color: var(--xc-ink-2);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xc-leg-km  { flex: 1; font-weight: 700; color: var(--xc-ink); }
.xc-leg-brg { color: var(--xc-ink-3); font-size: 12px; }

.xc-notes {
  margin-top: 14px;
  padding: 10px 12px;
  background: #fdf7ed;
  border: 1px solid #f0e0c4;
  border-radius: var(--xc-radius-sm);
}
.xc-notes p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: #7a5518;
}
.xc-notes p + p { margin-top: 6px; }

/* ---------- کنترل‌ها ---------- */

.xc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--xc-border);
  background: var(--xc-surface-2);
}

.xc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--xc-radius-sm);
  border: 1px solid var(--xc-border);
  background: var(--xc-surface);
  color: var(--xc-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.xc-btn:hover:not(:disabled) { background: #eef2f5; border-color: #c9d3db; }
.xc-btn:active:not(:disabled) { transform: translateY(1px); }
.xc-btn:disabled { opacity: .45; cursor: not-allowed; }
.xc-btn:focus-visible { outline: 2px solid var(--xc-teal); outline-offset: 2px; }

.xc-btn-primary {
  background: var(--xc-orange);
  border-color: var(--xc-orange);
  color: #fff;
}
.xc-btn-primary:hover:not(:disabled) {
  background: var(--xc-orange-lit);
  border-color: var(--xc-orange-lit);
}
.xc-btn-sm { padding: 5px 11px; font-size: 12px; }

.xc-field { margin-bottom: 10px; }
.xc-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--xc-ink-2);
  margin-bottom: 5px;
}
.xc-field input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-radius-sm);
  font-family: inherit;
  font-size: 14px;
  color: var(--xc-ink);
  background: var(--xc-surface);
}
.xc-field input[type="text"]:focus {
  outline: none;
  border-color: var(--xc-teal);
  box-shadow: 0 0 0 3px rgba(17,148,171,.14);
}
.xc-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--xc-ink-2);
  cursor: pointer;
}

/* ---------- نیم‌رخ ارتفاعی ---------- */

#xc-profile { position: relative; min-height: 120px; }
#xc-profile.is-loading { opacity: .5; }

.xc-profile-svg { width: 100%; height: auto; display: block; }
.xc-profile-empty {
  margin: 0;
  padding: 34px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--xc-ink-3);
}

.xc-grid        { stroke: var(--xc-border); stroke-width: 1; }
.xc-axis-label  { font-size: 11px; fill: var(--xc-ink-3); font-family: inherit; direction: ltr; }
.xc-crosshair   { stroke: var(--xc-ink-3); stroke-width: 1; stroke-dasharray: 3,3; }
.xc-cursor-dot  { fill: var(--xc-teal); stroke: #fff; stroke-width: 2; }
.xc-hit         { cursor: crosshair; }

/* راهنمای سری‌های نمودار */
.xc-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--xc-border);
  font-size: 12px;
  color: var(--xc-ink-2);
}
.xc-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.xc-swatch {
  width: 15px;
  height: 3px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.xc-swatch-terrain { background: #1194ab; }
.xc-swatch-glide {
  background: repeating-linear-gradient(
    to right, #c96412 0 5px, transparent 5px 8px);
}
.xc-legend-axis {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--xc-ink-3);
}

.xc-tooltip {
  position: absolute;
  top: 26%;
  padding: 6px 10px;
  border-radius: var(--xc-radius-sm);
  background: var(--xc-navy);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.xc-tooltip strong { display: block; font-size: 13px; }
.xc-tooltip span   { opacity: .8; }

/* ---------- اعلان ---------- */

#xc-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--xc-navy);
  color: #fff;
  font-size: 13.5px;
  box-shadow: 0 4px 20px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 1200;
  max-width: 90vw;
  text-align: center;
}
#xc-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- هشدار ایمنی ---------- */

.xc-disclaimer {
  margin: 0;
  padding: 11px 16px;
  background: #fdf7ed;
  border-top: 1px solid #f0e0c4;
  font-size: 12.5px;
  line-height: 1.85;
  color: #7a5518;
}
.xc-disclaimer strong { color: #5f420f; }

/* ---------- گالری ---------- */

.xc-gallery { display: grid; gap: 10px; }
.xc-gal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--xc-border);
  border-radius: var(--xc-radius-sm);
  background: var(--xc-surface);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.xc-gal-item:hover { border-color: var(--xc-teal); background: #f7fcfd; }
.xc-gal-name  { font-size: 13.5px; font-weight: 600; color: var(--xc-ink); }
.xc-gal-meta  { font-size: 11.5px; color: var(--xc-ink-3); margin-top: 2px; }
.xc-gal-score { font-size: 17px; font-weight: 800; color: var(--xc-orange); }

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

@media (max-width: 980px) {
  .xc-wrap {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 12px;
  }
  .xc-aside { position: static; }
  #xc-map { height: 41vh; min-height: 238px; }   /* ۳۰٪ کمتر */
  .xc-hero-score { font-size: 38px; }
  .xc-toolbar { padding: 8px; gap: 5px; }
  .xc-btn { padding: 9px 12px; font-size: 12.5px; }
  .xc-toolbar .xc-btn { padding: 6px 9px; font-size: 11.5px; }
}

@media (max-width: 460px) {
  .xc-btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .xc-card-body { padding: 12px; }
}

/* ---------- حالت تاریک ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --xc-surface:   #132133;
    --xc-surface-2: #1b2c42;
    --xc-ink:       #eaf0f6;
    --xc-ink-2:     #a9bacb;
    --xc-ink-3:     #7a8ba0;
    --xc-border:    #26394f;
    --xc-navy:      #0a1a2a;
  }
  :root:not([data-theme="light"]) .xc-hero-score { color: var(--xc-teal-lit); }
  :root:not([data-theme="light"]) .xc-notes {
    background: #2a2314;
    border-color: #4a3c1d;
  }
  :root:not([data-theme="light"]) .xc-notes p { color: #e0c48a; }
  :root:not([data-theme="light"]) .xc-disclaimer {
    background: #2a2314;
    border-color: #4a3c1d;
    color: #e0c48a;
  }
  :root:not([data-theme="light"]) .xc-disclaimer strong { color: #f0dcae; }
  :root:not([data-theme="light"]) .xc-type-free { color: var(--xc-ink-2); }
}

/* =================================================================
 * هماهنگ‌سازی با پوستهٔ بابی‌فلای (سرمه‌ای تیره / نارنجی)
 * این بخش بعد از بقیه می‌آید تا همیشه غالب باشد — سایت همیشه تیره است،
 * پس به prefers-color-scheme وابسته نیست.
 * ================================================================= */

:root{
  /* پالت مشترک سایت — shared-nav.css و shared-footer.css به این‌ها نیاز دارند */
  --sky-deep:#0B2545;  --sky-dusk:#13315C;  --sky-dusk-2:#1C3F6E;
  --thermal:#FF9F1C;   --thermal-dim:#c97e17;
  --contour:#5C8374;   --cloud:#F5F7FA;     --cloud-dim:#c7cfd9;
  --ink:#0B1622;       --line:#E4E8EC;      --danger:#D64545;

  /* بازتعریف پالت این صفحه روی تم سایت.
     مقادیر از توکن‌های babifly-ui.css گرفته می‌شوند تا اگر ظاهر سایت
     عوض شد، این صفحه هم خودکار همراهش بیاید. */
  --xc-navy:       var(--sky-deep, #0B2545);
  --xc-navy-soft:  var(--bf-card-solid, #10294B);
  --xc-navy-line:  var(--bf-line, rgba(255,255,255,.13));
  --xc-orange:     var(--thermal, #FF9F1C);
  --xc-orange-lit: var(--thermal-dim, #FFB44D);
  --xc-teal:       var(--bf-teal, #19CBE3);
  --xc-teal-lit:   var(--bf-teal, #19CBE3);

  --xc-surface:    var(--bf-card-solid, #10294B);
  --xc-surface-2:  var(--sky-dusk-2, #163560);
  --xc-ink:        var(--cloud, #F7FAFC);
  --xc-ink-2:      var(--cloud-dim, rgba(247,250,252,.68));
  --xc-ink-3:      var(--bf-faint, rgba(247,250,252,.46));
  --xc-border:     var(--bf-line, rgba(255,255,255,.13));

  --xc-ok:         #3ec27a;
  --xc-warn:       var(--danger, #FF5A76);
  --xc-radius:     18px;
  --xc-radius-sm:  12px;
  --xc-shadow:     var(--bf-shadow, 0 18px 50px rgba(0,0,0,.28));
}

html{background:var(--sky-deep);overflow-x:hidden;}
body{
  margin:0;
  background:var(--sky-deep);
  color:var(--xc-ink);
  font-family:'Vazirmatn',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  overflow-x:hidden;
}

.xc-wrap{max-width:1200px;}

/* کارت‌ها و کنترل‌ها روی زمینهٔ تیره */
.xc-card-head{background:rgba(255,255,255,.04);}
.xc-btn{background:var(--sky-dusk-2);color:var(--xc-ink);border-color:var(--xc-border);}
.xc-btn:hover:not(:disabled){background:#24508a;border-color:rgba(255,255,255,.22);}
.xc-btn-primary{background:var(--thermal);color:var(--sky-deep);border-color:var(--thermal);}
.xc-btn-primary:hover:not(:disabled){background:#ffb03f;border-color:#ffb03f;}
.xc-hero-score{color:var(--xc-teal-lit);}
.xc-field input[type="text"],
.xc-field input[type="search"]{
  background:var(--sky-deep);color:var(--xc-ink);border-color:var(--xc-border);
}
.xc-notes{background:rgba(255,159,28,.10);border-color:rgba(255,159,28,.28);}
.xc-notes p{color:#f0d49a;}
.xc-disclaimer{
  background:rgba(255,159,28,.10);
  border-top-color:rgba(255,159,28,.28);
  color:#f0d49a;
}
.xc-disclaimer strong{color:var(--thermal);}
.xc-type-free{color:var(--xc-ink-2);}
.xc-gal-item:hover{border-color:var(--xc-teal);background:rgba(53,182,204,.10);}
.xc-cursor-dot{stroke:var(--sky-deep);}
.xc-swatch-terrain{background:#35b6cc;}
.xc-swatch-glide{background:repeating-linear-gradient(to right,#FF9F1C 0 5px,transparent 5px 8px);}

/* برچسب نقاط چرخش روی نقشه */
.leaflet-tooltip.xc-opt-tip{
  background:var(--sky-deep);
  color:var(--cloud);
  border:1px solid var(--xc-teal);
  border-radius:7px;
  padding:2px 7px;
  font-size:10.5px;
  font-weight:700;
  font-family:inherit;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.leaflet-tooltip.xc-opt-tip::before{ border-top-color:var(--xc-teal); }

/* ---------- راهنمای خطوط زیر نقشه ---------- */

.xc-map-legend{
  display:flex;
  flex-wrap:wrap;
  gap:5px 13px;
  align-items:center;
  padding:7px 12px;
  border-top:1px solid var(--xc-border);
  font-size:10px;
  line-height:1.6;
  color:var(--xc-ink-3);
}
.xc-mlg{ display:inline-flex; align-items:center; gap:5px; }
.xc-mlg i{ width:17px; height:0; flex:0 0 auto; display:inline-block; }
.xc-mlg-drawn  { border-top:2px solid #1B1B1B; }
.xc-mlg-scoring{ border-top:3px dashed #1E6BFF; }
.xc-mlg-closing{ border-top:2px dashed rgba(30,107,255,.55); }
.xc-mlg-leg    { border-top:2px dotted #6b7c8c; }

/* برچسب نرم‌تر برای فاصله بستگی روی نقشه */
.leaflet-tooltip.xc-opt-tip-soft{
  background:rgba(11,37,69,.88);
  border-color:rgba(30,107,255,.55);
  font-weight:600;
}
.leaflet-tooltip.xc-opt-tip{ border-color:#1E6BFF; }
.leaflet-tooltip.xc-opt-tip::before{ border-top-color:#1E6BFF; }


/* ---------- اصلاح مدل جعبه ----------
   بدون این، عرض ۱۰۰٪ + padding از کادر بیرون می‌زند
   (اینپوت «نام مسیر») و فوتر تمام‌عرض از وسط خارج می‌شود. */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- فهرست مسیرهای ذخیره‌شده ---------- */

.xc-gallery{ max-height:340px; overflow-y:auto; }
.xc-gal-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  cursor:pointer;
}
.xc-gal-main{ min-width:0; flex:1 1 auto; }
.xc-gal-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* پیش‌نمایش شکل مسیر کنار هر ردیف — SVG درجا، بدون درخواست شبکه */
.xc-gal-thumb{
  flex:0 0 auto;
  width:56px; height:56px;
  border:1px solid var(--xc-border);
  border-radius:var(--xc-radius-sm);
  background:rgba(255,255,255,.05);
  overflow:hidden;
}
.xc-gal-thumb.is-empty{ opacity:.35; }
@media (max-width:420px){
  .xc-gal-thumb{ width:44px; height:44px; }
}
.xc-gal-side{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.xc-gal-score{ color:var(--thermal); }
.xc-gal-del{
  width:24px; height:24px; line-height:1; padding:0;
  border:1px solid var(--xc-border); border-radius:7px;
  background:transparent; color:var(--xc-ink-3);
  font-family:inherit; font-size:12px; cursor:pointer;
}
.xc-gal-del:hover{ border-color:var(--xc-warn); color:var(--xc-warn); }
.xc-list-empty{
  margin:0; padding:16px 4px; text-align:center;
  font-size:12.5px; color:var(--xc-ink-3);
}
.xc-btn-sm{ padding:5px 10px; font-size:11.5px; }
.xc-mini-select{
  background:var(--sky-deep); color:var(--xc-ink);
  border:1px solid var(--xc-border); border-radius:8px;
  padding:5px 8px; font-family:inherit; font-size:11.5px; cursor:pointer;
}

/* ---------- پنجره‌ی QR ---------- */

.xc-modal{ position:fixed; inset:0; z-index:12000; display:flex; align-items:center; justify-content:center; padding:16px; }
.xc-modal[hidden]{ display:none; }
.xc-modal-backdrop{ position:absolute; inset:0; background:rgba(4,12,24,.72); }
.xc-modal-box{
  position:relative; width:100%; max-width:420px; max-height:92vh; overflow-y:auto;
  background:var(--xc-surface); border:1px solid var(--xc-border);
  border-radius:var(--xc-radius); box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.xc-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px; border-bottom:1px solid var(--xc-border);
  background:rgba(255,255,255,.04);
}
.xc-modal-head h2{ margin:0; font-size:15px; font-weight:700; color:var(--xc-ink); }
.xc-modal-x{
  width:28px; height:28px; padding:0; line-height:1;
  border:1px solid var(--xc-border); border-radius:8px;
  background:transparent; color:var(--xc-ink-2); font-family:inherit; cursor:pointer;
}
.xc-modal-x:hover{ border-color:var(--xc-warn); color:var(--xc-warn); }
.xc-modal-body{ padding:16px; }

.xc-qr-img{
  background:#fff; border-radius:12px; padding:12px;
  display:flex; align-items:center; justify-content:center;
}
.xc-qr-img svg{ width:100%; height:auto; max-width:300px; display:block; }
.xc-qr-steps{
  margin:13px 0 0; font-size:12.5px; line-height:2; color:var(--xc-ink-2);
}
.xc-qr-steps b{ color:var(--xc-teal-lit); }
.xc-qr-meta{ margin-top:9px; font-size:12px; color:var(--xc-ink-3); }
.xc-qr-note{
  margin:12px 0 0; font-size:11.5px; line-height:1.9; color:var(--xc-ink-3);
}
.xc-qr-steps-title{ font-size:12.5px; font-weight:700; color:var(--xc-ink-2); margin-bottom:5px; }
.xc-qr-steps ol{ margin:0; padding-inline-start:20px; font-size:12.5px; line-height:2; color:var(--xc-ink-2); }
.xc-qr-steps bdi{ color:var(--xc-teal-lit); font-weight:700; }

/* ---------- بنر مشترک سایت ---------- */
.banner-hero{ width:100%; height:auto; display:block; margin:0; padding:0; }
.banner-hero img{ width:100%; height:auto; display:block; margin:0; padding:0; }

/* ستون اصلی سایت، مثل بقیه‌ی صفحه‌ها */
body{ max-width:1200px; margin:0 auto; }

/* ---------- پنجره‌ی اشتراک‌گذاری ---------- */
.xc-share-url{
  width:100%; padding:9px 11px;
  border:1px solid var(--xc-border); border-radius:var(--xc-radius-sm);
  background:var(--sky-deep); color:var(--xc-ink);
  font-family:'JetBrains Mono',monospace; font-size:12px;
}
.xc-share-url:focus{ outline:none; border-color:var(--xc-teal); }



/* ---------- انتخاب نقاط QR ---------- */
.xc-qr-modes{ display:flex; gap:6px; margin-bottom:11px; }
.xc-qr-mode{
  flex:1; padding:7px 8px; font-size:11.5px; font-weight:600;
  border:1px solid var(--xc-border); border-radius:var(--xc-radius-sm);
  background:transparent; color:var(--xc-ink-2);
  font-family:inherit; cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.xc-qr-mode:hover{ border-color:var(--xc-teal); }
.xc-qr-mode.is-on{
  background:var(--xc-teal); border-color:var(--xc-teal); color:#04222b;
}
.xc-qr-img svg{ max-width:340px; }

/* کد متراکم: پنجره و تصویر بزرگ‌تر تا هر خانه درشت‌تر بیفتد */
.xc-modal-box.xc-modal-wide{ max-width:min(560px, 96vw); }
.xc-modal-box.xc-modal-wide .xc-qr-img svg{ max-width:460px; }

/* ---------- نوار اسکرول کنار نقشه ----------
   روی موبایل، کشیدن انگشت روی نقشه صفحه را اسکرول نمی‌کند.
   این نوار باریک کنار نقشه خالی می‌ماند تا انگشت جایی برای اسکرول داشته باشد. */
.xc-map-shell{
  display:flex;
  align-items:stretch;
  gap:0;
}
/* نقشه داخل .xc-map-zone است؛ خودِ zone عضو انعطاف‌پذیر این ردیف است. */
.xc-scroll-rail{
  order:-1;                        /* در چیدمان راست‌به‌چپ، سمت راست بیفتد */
  flex:0 0 10%;
  max-width:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.10) 0 10px, transparent 10px 20px);
  border-inline-end:1px solid var(--xc-border);
  touch-action:pan-y;              /* اینجا فقط اسکرول عمودی */
  user-select:none;
}
.xc-scroll-rail span{
  writing-mode:vertical-rl;
  font-size:10.5px;
  letter-spacing:2px;
  color:var(--xc-ink-3);
  opacity:.75;
}

/* ---------- میله‌ی باد کنار نقشه ----------
   ارتفاع پرواز را انتخاب می‌کنید و باد همان ارتفاع روی نقشه می‌آید. */
.xc-wind-bar{
  order:1;                          /* در RTL سمت چپِ نقشه بیفتد */
  flex:0 0 58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:8px 4px;
  background:rgba(255,255,255,.05);
  border-inline-start:1px solid var(--xc-border);
  user-select:none;
  touch-action:none;                /* کشیدن اسلایدر، نه اسکرول صفحه */
}
.xc-wind-bar.is-off{ opacity:.45; }

.xc-wind-head{
  display:flex; flex-direction:column; align-items:center; line-height:1;
}
.xc-wind-alt{
  font-size:14px; font-weight:800; color:var(--xc-teal-lit);
}
.xc-wind-unit{ font-size:9.5px; color:var(--xc-ink-3); margin-top:2px; }

.xc-wind-step{
  width:26px; height:22px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; line-height:1;
  color:var(--xc-ink-2);
  background:transparent;
  border:1px solid var(--xc-border);
  border-radius:var(--xc-radius-sm);
  cursor:pointer;
}
.xc-wind-step:hover{ border-color:var(--xc-teal); color:var(--xc-teal-lit); }

/* اسلایدر عمودی، ارتفاع خودش را به بقیه تحمیل نکند:
   اینپوت range در حالت عمودی ارتفاع ذاتیِ بسیار بزرگی دارد (حدود ۹۰۰ پیکسل)
   و چون این میله عضو یک ردیف flex است، همان ارتفاع کل ردیف — و در نتیجه
   نقشه و بوم‌های باد — را کش می‌آورد. با position:absolute اینپوت دیگر
   ارتفاع ذاتی به بیرون نمی‌دهد و ارتفاع میله از نقشه گرفته می‌شود. */
.xc-wind-slider{
  position:relative;
  flex:1 1 auto;
  min-height:70px;
  width:100%;
  overflow:hidden;                  /* اگر مرورگر اسلایدر عمودی را نشناخت، بیرون نزند */
}
.xc-wind-range{
  position:absolute;
  top:0; bottom:0; left:50%;
  transform:translateX(-50%);
  /* دو نحو برای اسلایدر عمودی: مدرن و وبکیت قدیمی */
  writing-mode:vertical-lr;
  direction:rtl;                    /* کمترین ارتفاع پایین بماند */
  -webkit-appearance:slider-vertical;
  appearance:slider-vertical;
  width:26px;
  height:auto;
  margin:0;
  accent-color:var(--xc-teal);
  cursor:pointer;
  background:transparent;
}

.xc-wind-read{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-height:38px; justify-content:center;
  text-align:center;
}
.xc-wind-read b{ font-size:15px; font-weight:800; line-height:1; }
.xc-wind-kmh{ font-size:8.5px; color:var(--xc-ink-3); }
.xc-wind-dir{ font-size:9.5px; color:var(--xc-ink-2); white-space:nowrap; }
.xc-wind-read-hint{ font-size:9.5px; color:var(--xc-ink-3); line-height:1.4; }
.xc-wind-err{ color:#ff9c9c; }

/* ---------- ردیف کنترل باد زیر نقشه ---------- */
.xc-wind-controls{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding:10px 12px 0;
}
.xc-wind-toggle{
  padding:7px 12px;
  font-family:inherit; font-size:12px; font-weight:700;
  color:var(--xc-ink-2);
  background:transparent;
  border:1px solid var(--xc-border);
  border-radius:var(--xc-radius-sm);
  cursor:pointer;
  white-space:nowrap;
}
.xc-wind-toggle.is-on{
  background:var(--xc-teal); border-color:var(--xc-teal); color:#04222b;
}
/* ---------- تایم‌لاین باد: نوار کشیدنی چپ و راست ---------- */
.xc-wind-timeline{
  flex:1 1 220px;
  min-width:0;
  display:flex; align-items:center; gap:8px;
  direction:ltr;                  /* زمان از چپ (زودتر) به راست (دیرتر) */
}
.xc-wind-timeend{
  flex:0 0 auto;
  font-size:10px; color:var(--xc-ink-3); white-space:nowrap;
}
.xc-wind-track{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  height:36px;            /* جا برای برچسب شناور، بدون افتادن روی خط‌های راهنما */
  display:flex; align-items:flex-end;
}
.xc-wind-timerange{
  position:relative;
  z-index:2;
  width:100%;
  margin:0;
  accent-color:var(--xc-teal);
  cursor:pointer;
  background:transparent;
}
/* خط‌های راهنمای نیمه‌شب و ظهر، پشت نوار */
.xc-wind-ticks{
  position:absolute;
  inset-inline:0;
  bottom:11px;
  height:7px;
  pointer-events:none;
}
.xc-wind-ticks i{
  position:absolute; bottom:0;
  width:1px; height:4px;
  background:var(--xc-ink-3);
  opacity:.45;
}
.xc-wind-ticks i.is-day{ height:7px; opacity:.85; background:var(--xc-teal-lit); }

/* برچسب شناور روی دستهٔ نوار */
.xc-wind-timenow{
  position:absolute;
  direction:rtl;                  /* خود برچسب فارسی است */
  top:0;
  transform:translateX(-50%);     /* وسطِ دستهٔ نوار (موقعیت با left داده می‌شود) */
  padding:1px 7px;
  border-radius:100px;
  background:var(--xc-teal);
  color:#04222b;
  font-family:inherit; font-size:10.5px; font-weight:800;
  line-height:1.6; white-space:nowrap;
  pointer-events:none;
}
.xc-wind-scale{
  display:flex; align-items:flex-end; gap:5px;
  margin-inline-start:auto;
  font-size:10.5px; color:var(--xc-ink-3); white-space:nowrap;
}
.xc-wind-scale-u{ color:var(--xc-ink-3); padding-bottom:1px; }

/* ستون عدد + نوار رنگ: اعداد بالا، طیف زیرشان */
.xc-wind-ramp-wrap{
  position:relative;
  direction:ltr;                  /* ۰ سمت چپ، مثل خود گرادیان */
  width:104px;
  padding-top:12px;               /* جای ردیف اعداد */
}
.xc-wind-ramp-nums{
  position:absolute;
  top:0; left:0; right:0;
  height:12px;
  display:block;
}
.xc-wind-ramp-nums b{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  font-size:9px; font-weight:700; line-height:1.25;
  color:var(--xc-ink-2);
}
/* عددهای دو سر نباید از لبه بیرون بزنند */
.xc-wind-ramp-nums b:first-child{ transform:translateX(0); }
.xc-wind-ramp-nums b:last-child { transform:translateX(-100%); }

/* ---------- بوم‌های باد روی نقشه ----------
   همان چیدمان «هوانما»: میدان رنگی زیر، ذرات روان رویش، هر دو بدون
   دریافت رویداد تا کلیک روی نقشه همچنان نقطه‌ی مسیر بگذارد. */
.xc-map-zone{
  position:relative;
  flex:1 1 auto;
  min-width:0;
}
.xc-map-zone #xc-map{ width:100%; }
.xc-wind-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  border-radius:var(--xc-radius);
}
#xc-wind-grid{ z-index:415; }
#xc-wind-particles{ z-index:416; }

/* طیف رنگ — هم‌رنگ با WIND_STOPS در هوانما */
.xc-wind-ramp{
  /* display لازم است: قبلاً فقط چون فرزندِ مستقیم یک flex بود جعبه می‌گرفت،
     حالا داخل .xc-wind-ramp-wrap است و بدون این، عرض و ارتفاع نادیده می‌رود. */
  display:block;
  width:100%; height:8px; border-radius:3px;
  background:linear-gradient(to right,
    rgb(25,203,227) 0%, rgb(120,230,240) 28.57%, rgb(255,211,122) 50%,
    rgb(255,159,28) 71.43%, rgb(255,90,118) 100%);
}

.xc-mlg i.xc-mlg-wind{
  height:7px; border-radius:3px;
  background:linear-gradient(to right,
    rgb(25,203,227), rgb(120,230,240), rgb(255,211,122),
    rgb(255,159,28), rgb(255,90,118));
}

/* ---------- دکمه‌های انتخاب لایه‌ی نقشه ----------
   شناور روی خود نقشه، گوشه‌ی بالا-چپ. کنترل زوم لیفلت بالا-راست است و
   مقیاس پایین-راست، پس این گوشه آزاد می‌ماند. */
.xc-base-picker{
  position:absolute;
  top:8px;
  left:8px;                        /* چپِ فیزیکی — کنترل زوم لیفلت راستِ فیزیکی است.
                                      اینجا عمداً left است نه inset-inline-start:
                                      در صفحهٔ RTL آن یعنی سمت راست و روی دکمه‌های زوم می‌افتد. */
  z-index:500;                     /* بالاتر از بوم‌های باد (۴۱۵/۴۱۶) */
  display:flex;
  gap:3px;
  padding:3px;
  border-radius:9px;
  background:rgba(11,37,69,.82);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.xc-base-btn{
  padding:4px 8px;
  font-family:inherit;
  font-size:10.5px;
  font-weight:700;
  line-height:1.6;
  white-space:nowrap;
  color:#d6e0ea;
  background:transparent;
  border:0;
  border-radius:6px;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.xc-base-btn:hover{ background:rgba(255,255,255,.12); color:#ffffff; }
.xc-base-btn.is-on{
  background:var(--xc-teal);
  color:#04222b;
}

/* جداکننده بین لایه‌های نقشه و مدل هواشناسی — دو چیز متفاوت‌اند */
.xc-base-sep{
  width:1px;
  align-self:stretch;
  margin:2px 1px;
  background:rgba(255,255,255,.22);
}

/* انتخابگر مدل هواشناسی، هم‌شکل دکمه‌های کنارش */
.xc-base-select{
  /* هم‌اندازهٔ دکمه‌های لایه بماند، وگرنه کل کادر شناور بلند می‌شود.
     important لازم است: babifly-ui.css یک قانون سراسری
     «main select { padding:12px 14px !important }» دارد و بعد از این فایل
     بارگذاری می‌شود؛ بدون این، متن از کادر ۲۵ پیکسلی بیرون می‌زد و
     انتخابگر خالی دیده می‌شد. */
  padding:3px 4px !important;
  height:25px;
  font-family:inherit !important;
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  color:#d6e0ea !important;
  background:rgba(255,255,255,.06) !important;
  border:0 !important;
  border-radius:6px !important;
  cursor:pointer;
  max-width:112px;
}
.xc-base-select:hover{ background:rgba(255,255,255,.12); color:#ffffff; }
.xc-base-select:focus{ outline:1px solid var(--xc-teal); }
/* فهرست باز شده روی زمینهٔ سیستم رندر می‌شود، پس متنش باید تیره بماند */
.xc-base-select option{ color:#14212e; background:#ffffff; }

/* ---------- نوار ابزار بالای نقشه ----------
   جمع‌وجورتر از دکمه‌های عادی سایت، تا جای نقشه را نگیرد. */
.xc-btn{ display:inline-flex; align-items:center; gap:6px; }
a.xc-btn{ text-decoration:none; }

.xc-toolbar{ padding:9px 13px; gap:5px; }
.xc-toolbar .xc-btn{
  padding:6px 9px;
  font-size:12px;
  gap:5px;
  border-radius:8px;
}
.xc-toolbar .xc-ico{ width:13px; height:13px; stroke-width:2; }

.xc-ico{
  width:15px; height:15px; flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- هشدار ایمنی در پای صفحه ---------- */
.xc-disclaimer-foot{
  grid-column:1 / -1;              /* تمام‌عرضِ هر دو ستون */
  margin:4px 0 0;
  border-radius:var(--xc-radius);
  border:1px solid rgba(255,159,28,.28);
}

@media (max-width:560px){
  /* روی موبایل هم نوار اسکرول لازم است و هم میله‌ی باد؛ هر دو باریک‌تر
     می‌شوند تا نقشه جای کافی بماند. */
  .xc-scroll-rail{ flex-basis:10%; max-width:42px; }
  .xc-scroll-rail span{ font-size:9.5px; letter-spacing:1px; }
  /* دکمه‌های شناور لایه روی نقشه‌ی موبایل باید کوچک بمانند تا نقشه را نپوشانند */
  .xc-base-picker{ top:6px; left:6px; gap:2px; padding:2px; }
  .xc-base-btn{ font-size:9.5px; padding:3px 6px; }
  .xc-base-select{ height:21px; font-size:9px; padding:2px 3px !important; max-width:92px; }
  .xc-base-select{ font-size:9.5px; padding:3px 4px; max-width:92px; }

  .xc-wind-bar{ flex-basis:44px; padding:6px 2px; gap:3px; }
  .xc-wind-alt{ font-size:12.5px; }
  .xc-wind-unit{ font-size:8.5px; }
  .xc-wind-step{ width:22px; height:20px; }
  .xc-wind-range{ width:22px; }
  .xc-wind-read b{ font-size:13px; }
  .xc-wind-scale{ margin-inline-start:0; }
  /* روی موبایل: ردیف اول «دکمهٔ باد + طیف رنگ» کنار هم، ردیف دوم تایم‌لاین.
     قبلاً هر سه ردیف خودشان را می‌گرفتند و زیر نقشه شلوغ و پراکنده می‌شد. */
  .xc-wind-controls{ row-gap:6px; }
  .xc-wind-toggle  { order:1; flex:0 0 auto; }
  .xc-wind-scale   { order:2; flex:0 1 auto; margin-inline-start:0;
                     justify-content:flex-start; }
  .xc-wind-timeline{ order:3; flex-basis:100%; }
  .xc-wind-timeend { font-size:9px; }
  .xc-wind-ramp-wrap{ width:92px; }
}

/* ---------- خلاصه‌ی زنده زیر نقشه (فقط موبایل) ---------- */
.xc-quick{ display:none; }

@media (max-width:980px){
  .xc-quick{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    padding:11px 13px;
    border-top:1px solid var(--xc-border);
    background:rgba(255,255,255,.04);
  }
  .xc-quick-hint{
    flex:1; text-align:center; font-size:12.5px; color:var(--xc-ink-3);
  }
  .xc-quick-score{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    flex:0 0 auto; padding-inline-end:12px;
    border-inline-end:1px solid var(--xc-border);
  }
  .xc-quick-score b{
    font-size:26px; font-weight:800; line-height:1; color:var(--xc-teal-lit);
  }
  .xc-quick-score span{ font-size:10.5px; color:var(--xc-ink-3); white-space:nowrap; }
  .xc-quick-grid{
    flex:1 1 0; min-width:0;
    display:grid; grid-template-columns:repeat(2,1fr); gap:5px 12px;
  }
  .xc-quick-cell{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; min-width:0; }
  .xc-quick-cell span{ font-size:11px; color:var(--xc-ink-3); white-space:nowrap; }
  .xc-quick-cell b{ font-size:12.5px; font-weight:700; color:var(--xc-ink); white-space:nowrap; }
}

@media (max-width:420px){
  .xc-quick-grid{ grid-template-columns:1fr; }
  .xc-quick-score b{ font-size:23px; }
}