.container {
  max-width: 440px;
  margin: 10px auto;
  padding: 12px;
}

/* HEADER */
.header {
  background: linear-gradient(
    135deg,
    #1d4ed8,
    #2563eb 60%,
    #60a5fa
  );
  color: #fff;
  border-radius: 18px;
  padding: 10px 18px;
  margin-bottom: 14px;
  box-shadow: 0 14px 34px rgba(37, 99, 235, .18);
}

/* TOP BAR */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.title-wrap {
  flex: 1;
  min-width: 0;
}

.title-wrap h1 {
  font-size: clamp(14px, 4.5vw, 21px) !important;
}

/* اصلاح باگ: محدود کردن دامنه اثرگذاری تگ p به داخل هدر */
.title-wrap h1, 
.title-wrap p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-wrap p {
  margin: -6px 0px;
  opacity: 0.65;
}

/* SETTINGS BUTTON */
.settings-btn, 
.reset-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 32px;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 0;
}

/* =========================================================
   HERO PAYMENT SECTION (اصلاح شده و کاملاً ریسپانسیو)
========================================================= */
.hero-payment {
  background: rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 8px 16px;
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden; /* جلوگیری از بیرون زدن هرگونه محتوای متنی */
}

.hero-label {
  font-size: 0.85em;
  white-space: nowrap !important; /* اصلاح اول: اجبار متن به ماندن در یک خط تحت هر شرایطی */
  flex-shrink: 0 !important;      /* مانع از مچاله شدن یا فشرده شدن متن لیبل می‌شود */
}

.hero-value {
  font-size: 25px;
  line-height: 1.2;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important; /* فعال‌سازی سه نقطه (...) در صورت طولانی بودن مفرط عدد */
  direction: ltr;
  flex: 1 !important;             /* اصلاح دوم: حذف مقدار ثابت درصد و تصاحب هوشمند فضای باقی‌مانده */
  min-width: 0 !important;        /* اجازه به مرورگر برای فشرده‌سازی تا مرز لیبل و اعمال سه نقطه */
  text-align: left !important;    /* چسبیدن مرتب عدد و واحد ریال به سمت چپ باکس */
  margin-inline: 10px;
}

/* CARD */
.card {
  background: #fff;
  border-radius: 22px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
}

/* FORM */
.form-label {
  font-size: 13px;
  font-weight: 700;
  width: 35%; /* هماهنگ‌شده با معماری جدید برای تراز شدن عمودی */
  white-space: nowrap;
}

/* INPUT */
.input-wrap {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  transition: .2s;
}

.input-wrap:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .08);
}

.input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 11px 14px;
  font-size: 15px;
}

.unit {
  min-width: 60px;
  padding: 11px 10px;
  background: #eef2ff;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-align: center;
  border-right: 1px solid #dbeafe;
}

/* ACTIONS */
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

button {
  border: none;
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}

button:hover {
  transform: translateY(-1px);
}

button:active {
  transform: scale(.98);
}

.primary-btn {
  background: #2563eb;
  color: #fff;
}

.secondary-btn {
  background: #eef2ff;
  color: #2563eb;
}

/* RESULTS */
.result-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom:6px;
  margin-right: 6px;
}

.form-row{
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 6px;
}

.result-box, .form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--card) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.result-box:first-of-type {
  background: linear-gradient(
    135deg,
    #ecfeff,
    #dbeafe
  );
}

.result-label {
  font-size: 13px;
  color: #64748b;
  width: 35%; /* اصلاح چیدمان پایه برای هماهنگی با لیبل فرم */
  white-space: nowrap;
}

.result-value {
  font-size: 15px;
  font-weight: 800;
}

.result-value.empty{
  color: var(--result-empty-color);
}

/* INSTALL */
.install-wrap {
  text-align: center;
  margin-top: 14px;
}

.install-link {
  background: none;
  border: none;
  font-size: 12px;
  color: #64748b;
  padding: 0;
  cursor: pointer;
}

.install-link:hover {
  color: #2563eb;
  transform: none;
}

/* FOOTER */
.footer {
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
  padding: 6px;
}

/* MOBILE */
@media(max-width: 300px) {
  .form-row {
    grid-template-columns: 92px 1fr;
    gap: 8px;
  }

  .hero-value {
    font-size: 22px;
  }

  .actions {
    grid-template-columns: 1fr;
  }

  .title-wrap h1 {
    font-size: 22px;
  }
}

/* =========================================================
   CUSTOM SELECT
========================================================= */
.custom-select {
  position: relative;
  flex: 1; /* تصاحب هوشمند فضای باقی‌مانده در موبایل */
  min-width: 0;
  max-width: 285px; /* حداکثر عرض مجاز در دسکتاپ */
  display: flex;
  align-items: center;
}

/* TRIGGER */
.custom-select-trigger {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  padding-left: 34px;
  min-height: 28px;
  /* حذف کدهای اورفلو از این بخش برای باز شدن مجدد منو */
}

/* TEXT */
#selectedLoanType {
  width: 100%;
  text-align: left;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important; /* متن طولانی در حالت بسته به زیبایی سه نقطه می‌خورد */
}

/* ARROW */
.custom-arrow {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
  pointer-events: none;
  opacity: .9;
}

/* OPEN */
.custom-select.open .custom-arrow {
  transform: translateY(-30%) rotate(-135deg);
}

/* OPTIONS */
.custom-options {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 100%; /* هوشمندسازی: به جای ۲۲۰ ثابت، دقیقاً هم‌اندازه تریگر بالا می‌شود */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 999;
}

/* OPEN STATE */
.custom-select.open .custom-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* OPTION */
.custom-option {
  height: 46px;
  display: block; /* تغییر به حالت بلاک جهت فعال‌سازی استاندارد text-overflow */
  line-height: 46px; /* تراز عمودی کاملاً دقیق متن */
  padding: 0 10px 0 34px;
  text-align: left;
  direction: ltr;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  
  /* اعمال بی نقص سه نقطه بدون مسدود کردن رویدادهای کلیک */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* HOVER */
.custom-option:hover {
  background: rgba(37, 100, 235, 0.1);
}

/* ACTIVE */
.custom-option.active {
  background: rgba(37, 99, 235, .08);
  color: var(--primary);
}

/* DARK */
body[data-theme="dark"] .custom-options {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .35);
}

body[data-theme="dark"] .custom-option:hover {
  background: rgba(59, 130, 246, .12);
}

body[data-theme="dark"] .custom-option.active {
  background: rgba(59, 130, 246, .16);
}

/* =========================================================
   HIDDEN FORM
========================================================= */
.hidden-form {
  display: none;
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}



/* =========================================================
   Tooltips
========================================================= */

/* =========================================================
   معماری جدید تولتیپ هوشمند - کاملاً محتومحور و بدون محدودیت عرض
========================================================= */

/* لایه نگهدارنده نقش انتقال‌دهنده فلکس‌باکس را ایفا می‌کند */
.calculated-field-wrapper {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
}

/* تضمین سازگاری فیلدهای ورودی درون رپر جدید */
.calculated-field-wrapper input {
  width: 100% !important;
  flex: 1;
}

/* لغو هرگونه محدودیت برش در والدین تا جعبه تولتیپ بتواند به راحتی خارج شود */
.value-wrap, .hero-payment, .result-box, .header, .header-top, .hero-block {
  overflow: visible !important;
}

/* اعمال رفتار سه‌نقطه (...) روی هدر اصلی و فیلدهای خلاصه نتایج */
.result-value, .hero-value {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1;
  min-width: 0;
}

/* استایل نهایی تولتیپ شیشه‌ای و مدرن با اندازه فونت همسان */
.custom-tooltip {
  position: absolute;
  bottom: 135%; /* قرارگیری دقیق در بالای کادر */
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  
  /* ابعاد کاملاً پویا با حفظ مارجین معقول ۱۶ پیکسلی از لبه‌های صفحه */
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  
  /* همسان‌سازی دقیق فونت با فیلدهای اصلی */
  font-size: 15px !important;
  font-weight: bold;
  white-space: nowrap;
  
  /* طراحی بصری جذاب تیره با افکت بلور */
  background: rgba(15, 23, 42, 0.96);
  color: #ffffff;
  padding: 7px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 999;
  
  /* حالت اولیه مخفی (استفاده از opacity بجای display جهت فعال بودن محاسبات ابعادی در JS) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, left 0.1s ease;
}

/* مثلث راهنما در زیر تولتیپ */
.custom-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(15, 23, 42, 0.96) transparent transparent transparent;
}

/* انیمیشن نرم ظهور هنگام فعال شدن کلاس اکتیو */
.calculated-field-wrapper.tooltip-active .custom-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* کلاس متغیر برای تولتیپ هدر اصلی (مبلغ قسط) */
.custom-tooltip.tooltip-hero {
  font-size: 17px !important; /* کمی بزرگتر و خواناتر برای رقم اصلی هدر */
  background: rgba(15, 23, 42, 0.98); /* تیره تر و با ابهت تر */
  padding: 8px 16px; /* پدینگ متناسب با سایز فونت جدید */
  border-color: rgba(255, 255, 255, 0.2); /* درخشش بیشتر لبه‌ها */
}

/* استایل تعاملی اصلاح‌شده برای بخش ایمیل توسعه‌دهنده */
.dev-email-btn {
  cursor: pointer !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit; /* ۱. همرنگ شدن با بقیه اطلاعات برنامه در حالت عادی */
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* رفتار المان در حالت هوور (موس اور) */
.dev-email-btn:hover {
  color: var(--primary, #2563eb); /* ۲. تغییر رنگ به آبی/رنگ اصلی تم فعال */
  text-decoration: none !important; /* ۳. حذف کامل خط زیرین در حالت هوور */
  opacity: 0.9;
}

.dev-email-btn .copy-icon {
  font-size: 13px;
  opacity: 0.6;
  transition: color 0.2s ease;
}

/* لایه اعلان اختصاصی و شناور (Toast) - بدون تغییر */
.toast-notification {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 23, 42, 0.98);
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 10005;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}



/* آماده‌سازی المان برای پذیرش تولتیپ فرزند */
.has-tooltip {
  position: relative;
  overflow: visible !important; /* تضمین عدم بریده شدن تولتیپ توسط کادرهای والد */
}

/* کادر اصلی متنی تولتیپ */
.has-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  padding: 12px 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  opacity: 0;
  z-index: 10100;
  /* ۱. زمان انیمیشن محو شدن (اینجا delay روی 0s است تا آنی غیب شود) */
  transition: opacity 0.15s ease, transform 0.15s ease;
  transition-delay: 0s; 
}

/* فلش کوچک (مثلثی) */
.has-tooltip::after {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  border-width: 0 5px 5px 5px;
  border-style: solid;
  border-color: transparent transparent rgba(15, 23, 42, 0.96) transparent;
  pointer-events: none;
  opacity: 0;
  z-index: 10100;
  /* زمان انیمیشن محو شدن آنی */
  transition: opacity 0.15s ease, transform 0.15s ease;
  transition-delay: 0s;
}

/* پدیدار شدن هوشمند با تاخیر ۱ ثانیه‌ای هنگام هوور و فوکوس */
.has-tooltip:hover::before,
.has-tooltip:hover::after{
opacity: 1; 
  transform: translateX(-50%) translateY(0); 
  transition-delay: 1.2s; 
}

/* حل مشکل اسکرول و لرزش برای دکمه‌های چسبیده به لبه چپ صفحه */

/* تراز کردن باکس متن تولتیپ از سمت چپ دکمه */
.has-tooltip.tooltip-left::before {
  left: 0;
  right: auto;
  transform: translateY(-4px); /* حذف translateX(-50%) برای جلوگیری از خروج از لبه صفحه */
}

/* حالت هوور برای باکس متن دکمه‌های سمت چپ */
.has-tooltip.tooltip-left:hover::before {
  transform: translateY(0); /* انیمیشن فقط در راستای عمودی اجرا می‌شود */
}

/* فلش کوچک (مثلثی) تولتیپ می‌تواند وسط دکمه باقی بماند چون عرض کمی دارد و بیرون نمی‌زند */
.has-tooltip.tooltip-left::after {
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}
.has-tooltip.tooltip-left:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* بالا آوردن دکمه‌های تولتیپ‌دار نسبت به لایه‌های فیلتردار زیرین */
.has-tooltip {
  position: relative; /* اگر از قبل تعریف نکرده‌اید */
  z-index: 10;        /* این مقدار باعث می‌شود تولتیپ همیشه روی لایه hero قرار بگیرد */
}




/* Path: /assets/css/components.css */

/* ۱. به هدر و باکس وام لایه‌های ثابت و مستقل می‌دهیم */
.header-top {
  position: relative !important;
  z-index: 10 !important; /* هدر به طور پیش‌فرض بالاتر قرار می‌گیرد */
}

.hero-payment {
  position: relative !important;
  z-index: 1 !important; /* باکس وام زیر هدر قرار می‌گیرد */
}

/* ۲. جادوی اصلی: وقتی موس روی تولتیپِ مبلغ وام می‌رود */
.hero-payment:hover,
.hero-payment:has(.has-tooltip:hover) {
  z-index: 100 !important; /* لایه باکس وام فوراً از هدر بالاتر می‌زند تا تولتیپش زیر هدر نرود */
}

/* ۳. وقتی موس روی هدر یا دکمه‌های آن می‌رود */
.header-top:hover,
.header-top:has(.has-tooltip:hover) {
  z-index: 200 !important; /* لایه هدر مجدداً بالاترین می‌شود تا تولتیپ دکمه‌ها زیر باکس وام نرود */
}

/* ۴. مهار قطعی تمام متن‌های تولتیپ در بالاترین سطح کل پروژه */
.has-tooltip::before,
.has-tooltip::after,
.tooltip-box {
  z-index: 99999 !important;
}

.result-box2{
  background: #dbeafe10;
  border: 1px solid var(--border);
  border-radius: 15px;
  align-items: center;
  justify-content: space-between;
  background-image: none !important;
}

.result-box2-int{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 15px;
  position: relative;
}

.result-box2-int:not(:last-child) {
    background-image: linear-gradient(
        to right, 
        transparent 0px, 
        #b0b0b07d 25%, 
        #b0b0b07d calc(100% - 25%), 
        transparent 100%
    );
    background-size: 100% 1px; /* عرض خط ۱۰۰٪ و ارتفاع ۱ پیکسل */
    background-position: bottom; /* خط در پایین قرار گیرد */
    background-repeat: no-repeat;
}


/* =========================================================
   TAG: adaptive-height-fit-14050320-01
   Stage-based vertical fitting for mobile screens
========================================================= */

@media (max-width: 480px) {
  html,
  body {
    min-height: 100dvh;
    overflow-x: hidden;
  }

  /* Stage 1: reduce only vertical gaps between major blocks */
  body.fit-stage-1 .container {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  body.fit-stage-1 .header {
    margin-bottom: 8px;
  }

  body.fit-stage-1 .card {
    margin-bottom: 8px;
  }

  /* Stage 2: reduce form row density with safe minimums */
  body.fit-stage-2 .card {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  body.fit-stage-2 .form-row {
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 5px;
  }

  body.fit-stage-2 .actions {
    margin-top: 10px;
    gap: 8px;
  }

  body.fit-stage-2 button {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Stage 3: reduce result rows and bottom spacing */
  body.fit-stage-3 .result-title {
    margin-bottom: 4px;
  }

  body.fit-stage-3 .result-box2-int {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  body.fit-stage-3 .install-wrap {
    margin-top: 7px;
  }
}

/* =========================================================
   TAG: info-modal-system-14050320-01
   App Changelog / Info Popup
========================================================= */

/* =========================
   INFO BUTTON
========================= */

/* TAG: install-state-fix-14050320-01 */
/* Preserve action row spacing even after install text is hidden */
.install-actions {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 22px;
  margin-top: 14px;

  width: 100%;
}

/* TAG: share-system-14050320-02 */
/* Keep info button fixed and bring share button closer */
.install-side-actions {
  position: absolute;
  left: 0;

  display: flex;
  align-items: center;

  gap: 0;
}

/* TAG: info-modal-system-14050320-03 */
/* Match icon alignment with form units and placeholder color */
.info-btn {
  background: transparent;
  border: none;

  /* ایجاد فاصله مشابه واحدهای فرم */
  padding: 4px 12px;

  color: #cbd5e1;

  font-size: 22px;
  cursor: pointer;

  line-height: 1;

  display: grid;
  place-items: center;

  transition:
    opacity .2s ease,
    transform .2s ease,
    color .2s ease;
}

.info-btn:hover {
  opacity: .85;
  color: var(--primary);
}

.info-btn:active {
  transform: scale(.92);
}

/* TAG: share-system-14050320-01 */
/* Share button visual style aligned with info button */
.share-btn {
  background: transparent;
  border: none;

  padding: 4px 0px;

  color: #cbd5e1;

  font-size: 22px;

  cursor: pointer;

  line-height: 1;

  display: grid;
  place-items: center;

  transition:
    opacity .2s ease,
    transform .2s ease,
    color .2s ease;
}

.share-btn:hover {
  opacity: .85;
  color: var(--primary);
}

.share-btn:active {
  transform: scale(.92);
}

/* =========================
   INFO MODAL
========================= */

.info-modal {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 16px;

  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease;

  z-index: 10050;
}

.info-modal.active {
  opacity: 1;
  visibility: visible;
}

/* =========================
   PANEL
========================= */

/* TAG: info-pagination-system-14050320-02 */
/* Fixed-height paged changelog modal */
.info-panel {
  width: 100%;
  max-width: 440px;

  max-height: 75dvh;
  overflow: hidden;

  border-radius: 18px;

  background: #f5f7fb;
  color: var(--text);

  box-shadow:
    0 20px 60px rgba(0,0,0,.18);

  transform: translateY(12px);

  transition:
    transform .25s ease;
}

.info-modal.active .info-panel {
  transform: translateY(0);
}

/* =========================
   HEADER
========================= */

/* TAG: info-modal-system-14050320-04 */
/* Header spacing tuned to reduce unused vertical height */
.info-header {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 18px 4px 18px;
}

/* TAG: info-modal-system-14050320-04 */
/* Faded divider matching result row separators */
.info-header::after {
  content: '';
  position: absolute;
  right: 18px;
  left: 18px;
  bottom: 0;

  height: 1px;

  background-image: linear-gradient(
    to right,
    transparent 0px,
    #b0b0b07d 25%,
    #b0b0b07d calc(100% - 25%),
    transparent 100%
  );
}

.info-title {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 18px;
  font-weight: 800;
}

.info-close-btn {
  background: transparent;
  border: none;

  padding: 0;

  font-size: 24px;

  color: var(--muted);

  cursor: pointer;
}

/* TAG: info-modal-system-14050320-04 */
/* Match close button interaction with info button */
.info-close-btn:hover {
  opacity: .85;
  color: var(--primary);
}

.info-close-btn:active {
  transform: scale(.92);
}

/* =========================
   BODY
========================= */

/* TAG: info-pagination-system-14050320-01 */
/* Single-page changelog content area */
.info-body {
  padding: 14px 28px;
  min-height: 220px;
}

.info-version:last-child {
  margin-bottom: 0;
}

.info-version-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 10px;

  font-weight: 700;
}

.info-version-date {
  opacity: .7;
  font-size: 13px;
}

.info-list {
  padding-right: 18px;
}

/* TAG: info-modal-system-14050320-05 */
/* More compact changelog rows with improved visual rhythm */
.info-list li {
  margin-bottom: 10px;
  line-height: 1.2;
}

/* =========================
   DARK MODE SUPPORT
========================= */

body[data-theme="dark"] .info-panel {
  background: #1e293b;
  color: #f8fafc;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 480px) {

  .info-panel {
    max-height: 90vh;
  }

  .info-header {
    padding: 14px 16px;
  }

  .info-body {
    padding: 16px;
  }

}

/* =========================================================
   TAG: info-pagination-system-14050320-01
   Changelog page navigation
========================================================= */

.info-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  padding: 0 0 16px;
}

.info-nav-btn {
  width: 32px;
  height: 32px;

  border: none;
  border-radius: 32px;

  background: transparent;

  color: #cbd5e1;

  font-size: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition:
    opacity .2s ease,
    transform .2s ease,
    color .2s ease;
}

.info-nav-btn:hover {
  opacity: .85;
  color: var(--primary);
}

.info-nav-btn:active {
  transform: scale(.92);
}

.info-nav-btn.hidden {
  display: none;
}