@font-face {
  font-family: 'IRANSansFaNum';
      src: url('./fonts/IRANSans(FaNum)_UltraLight.ttf') format('truetype');
      font-weight: 200;
      font-style: normal;
}

@font-face {
  font-family: 'IRANSansFaNum';
      src: url('./fonts/IRANSans(FaNum)_Light.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
}

@font-face {
  font-family: 'IRANSansFaNum';
      src: url('./fonts/IRANSans(FaNum).ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
}

@font-face {
  font-family: 'IRANSansFaNum';
      src: url('./fonts/IRANSans(FaNum)_Medium.ttf') format('truetype');
      font-weight: 500;
      font-style: normal;
}

@font-face {
  font-family: 'IRANSansFaNum';
      src: url('./fonts/IRANSans(FaNum)_Bold.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
}

@font-face {
  font-family: 'IRANSansFaNum';
      src: url('./fonts/IRANSans(FaNum)_Black.ttf') format('truetype');
      font-weight: 900;
      font-style: normal;
}

#view-health-calc {
  --bg: #F2F6F1;
      --surface: #FFFFFF;
      --surface-2: #EAF0E8;
      --ink: #152420;
      --ink-soft: #4B5C55;
      --line: #DAE3D8;
      --primary: #1F5C4F;
      --primary-dark: #123B32;
      --primary-light: #DCEAE4;
      --accent: #E2963B;
      --accent-soft: #FBE8CC;
      --accent-dark: #B8721F;
      --alert: #B54834;
      --alert-soft: #F5DCD4;
      --good: #2E7D53;
      --shadow: 0 1px 2px rgba(21, 36, 32, .05), 0 8px 24px -12px rgba(21, 36, 32, .18);
}

.info-modal, #info-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}


#view-health-calc .info-modal-content, .info-modal-content {
  background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 20px;
      max-width: 450px;
      width: 100%;
      box-shadow: 0 10px 25px rgba(0,0,0,0.3);
      animation: fadeInScale 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#view-health-calc from {
  opacity: 0; transform: scale(0.95);
}

#view-health-calc to {
  opacity: 1; transform: scale(1);
}

#view-health-calc .card-info-btn {
  background: transparent;
      color: var(--primary);
      border: none;
      cursor: pointer;
      font-size: 0.95rem;
      padding: 2px 6px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
}

#view-health-calc .card-info-btn:hover {
  background: rgba(20, 184, 166, 0.1);
}

#view-health-calc * {
  box-sizing: border-box;
}

#view-health-calc html, #view-health-calc body {
  margin: 0;
      padding: 0;
}

#view-health-calc {
  background: var(--bg);
  color: var(--ink);
  font-family: 'IRANSansFaNum', 'Vazirmatn', 'Noto Sans Arabic', sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  min-height: 100vh;
}

body.en-locale,
.en-locale,
#view-health-calc.en-locale,
#view-health-calc[dir="ltr"],
#view-health-calc.en-locale * {
  font-family: 'Outfit', 'Inter', 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-variant-numeric: normal !important;
}

body.en-locale #view-health-calc,
#view-health-calc.en-locale,
#view-health-calc[dir="ltr"] {
  direction: ltr !important;
  text-align: left !important;
}

#view-health-calc.en-locale p,
#view-health-calc.en-locale span,
#view-health-calc.en-locale div,
#view-health-calc.en-locale h1,
#view-health-calc.en-locale h2,
#view-health-calc.en-locale h3,
#view-health-calc.en-locale h4,
#view-health-calc.en-locale label,
#view-health-calc.en-locale summary,
#view-health-calc.en-locale details,
#view-health-calc.en-locale li,
#view-health-calc.en-locale td,
#view-health-calc.en-locale th,
#view-health-calc.en-locale .card,
#view-health-calc.en-locale .sec-card,
#view-health-calc.en-locale .report-toolbar,
#view-health-calc.en-locale .hero-stats,
#view-health-calc.en-locale .hs-tile,
#view-health-calc.en-locale .insight-item,
#view-health-calc.en-locale .cat-sec,
#view-health-calc.en-locale .history-table {
  text-align: left !important;
  direction: ltr !important;
}

#view-health-calc.en-locale input,
#view-health-calc.en-locale select,
#view-health-calc.en-locale textarea,
#view-health-calc.en-locale .field input,
#view-health-calc.en-locale .field select,
#view-health-calc.en-locale .field input[type="number"],
#view-health-calc.en-locale .field input[type="text"],
#view-health-calc.en-locale .field input[type="date"],
#view-health-calc.en-locale .field input[type="time"] {
  direction: ltr !important;
  text-align: left !important;
}

#view-health-calc.en-locale ul,
#view-health-calc.en-locale ol,
#view-health-calc.en-locale .calc-sources-list {
  padding-left: 20px !important;
  padding-right: 0 !important;
  text-align: left !important;
}


#view-health-calc ::selection {
  background: var(--accent-soft);
}

#view-health-calc .app {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 80px 0 !important;
}

/* ---------- Header ---------- */
#view-health-calc .masthead {
  display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      padding: 26px 30px;
      background: linear-gradient(155deg, var(--primary-dark), var(--primary) 65%);
      border-radius: 22px;
      color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow);
}

#view-health-calc .masthead::after {
  content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(420px 220px at 92% -10%, rgba(226, 150, 59, .35), transparent 60%),
        radial-gradient(300px 200px at 10% 130%, rgba(255, 255, 255, .08), transparent 60%);
      pointer-events: none;
}

#view-health-calc .masthead .eyebrow {
  font-size: 12.5px;
      letter-spacing: .06em;
      font-weight: 700;
      color: var(--accent-soft);
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
}

#view-health-calc .masthead h1 {
  font-size: clamp(22px, 3.4vw, 32px);
      font-weight: 700;
      margin: 0 0 8px;
      letter-spacing: -.01em;
      position: relative;
}

#view-health-calc .masthead p {
  margin: 0;
      color: #DDEAE5;
      font-size: 14.5px;
      max-width: 56ch;
      position: relative;
}

#view-health-calc .masthead .badge {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  padding: 12px 18px;
  text-align: center;
  backdrop-filter: blur(8px);
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#view-health-calc .masthead .badge b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: #FFFFFF !important;
  font-family: inherit !important;
  line-height: 1.1;
  margin-bottom: 4px;
  text-align: center;
  width: 100%;
}

#view-health-calc .masthead .badge span {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: inherit !important;
  text-align: center;
  width: 100%;
}

/* ---------- Tabs ---------- */
#view-health-calc .tabbar {
  display: flex;
      align-items: center;
      gap: 0;
      margin: 32px 0 32px;
      /* فضای بیشتر بالا و پایین برای بیرون‌زدگی دایره */
      background: var(--surface-2);
      padding: 6px 6px;
      border-radius: 99px;
      position: relative;
      z-index: 20;
      box-shadow: 0 6px 18px -12px rgba(21, 36, 32, .25);
      overflow: visible;
      /* اجازه بیرون‌زدگی دایره از کپسول */
      height: 56px;
}

#view-health-calc .tabbar .tab-btn {
  flex: 1;
      border: none;
      background: transparent;
      padding: 0 14px;
      height: 100%;
      font-family: inherit;
      font-size: 14px;
      font-weight: 700;
      color: var(--ink-soft);
      border-radius: 99px;
      cursor: pointer;
      transition: background .15s ease, color .15s ease, box-shadow .15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      white-space: nowrap;
}

#view-health-calc .tabbar .tab-btn.active {
  background: var(--surface);
      color: var(--primary-dark);
      box-shadow: var(--shadow);
}

/* ---------- History Tabbar & Views ---------- */
#view-health-calc .hview {
  display: none;
}

#view-health-calc .hview.active {
  display: block;
}

#view-health-calc .history-table {
  width: 100%;
      border-collapse: collapse;
      text-align: right;
      font-size: 0.9rem;
}

#view-health-calc .history-table th, #view-health-calc .history-table td {
  padding: 12px;
      border-bottom: 1px solid var(--line);
}

#view-health-calc .history-table th {
  color: var(--ink-soft);
      font-weight: 500;
      background: rgba(0, 0, 0, 0.02);
}

#view-health-calc .btn-delete-record {
  background: var(--alert-soft);
      color: var(--alert);
      border: none;
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 0.8rem;
      font-weight: bold;
      cursor: pointer;
      transition: opacity 0.15s ease;
}

#view-health-calc .btn-delete-record:hover {
  opacity: 0.85;
}

#view-health-calc .btn-history {
  background: rgba(20, 184, 166, 0.1);
      color: var(--primary-dark);
      border: 1px solid var(--primary);
      width: 100%;
      border-radius: 12px;
      padding: 11px 14px;
      font-weight: 700;
      font-family: inherit;
      font-size: 0.9rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background 0.15s ease, transform 0.15s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

#view-health-calc .btn-history:hover {
  background: rgba(20, 184, 166, 0.2);
      transform: translateY(-1px);
}

#view-health-calc .btn-history:active {
  transform: translateY(0);
}

#view-health-calc /* دکمه دایره‌ای محاسبه — بزرگتر از کپسول و بیرون می‌زند */
    .tabbar .calc-circle-btn {
  flex-shrink: 0;
      position: relative;
      width: 76px;
      height: 76px;
      border-radius: 50%;
      border: 4px solid var(--surface-2);
      background: linear-gradient(145deg, #27ae7a 0%, var(--primary) 45%, var(--primary-dark) 100%);
      color: #fff;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .01em;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      /* سایه‌ی عمیق برای حس برجستگی */
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, .18) inset,
        0 8px 24px -6px rgba(18, 59, 50, .65),
        0 2px 8px -2px rgba(18, 59, 50, .35);
      transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), filter .18s ease, box-shadow .18s ease;
      z-index: 5;
      margin: 0 -2px;
      /* کمی روی‌هم‌افتادگی با تب‌ها */
}

#view-health-calc .tabbar .calc-circle-btn:hover {
  transform: scale(1.08) translateY(-2px);
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, .22) inset,
        0 12px 32px -6px rgba(18, 59, 50, .7),
        0 4px 12px -2px rgba(18, 59, 50, .4);
}

#view-health-calc .tabbar .calc-circle-btn:active {
  transform: scale(0.94) translateY(0);
      filter: brightness(0.95);
}

#view-health-calc .view {
  display: none;
}

#view-health-calc .view.active {
  display: block;
      animation: fadein .25s ease;
}

#view-health-calc from {
  opacity: 0;
        transform: translateY(4px);
}

#view-health-calc to {
  opacity: 1;
        transform: none;
}

/* ---------- Progress ---------- */
#view-health-calc .progress-card {
  background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px 18px;
      margin-bottom: 16px;
      box-shadow: var(--shadow);
}

#view-health-calc .progress-top {
  display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      font-size: 13px;
      color: var(--ink-soft);
}

#view-health-calc .progress-top b {
  color: var(--ink);
      font-weight: 700;
}

#view-health-calc .progress-pct {
  font-weight: 700;
      color: var(--primary-dark);
      font-size: 14px;
}

#view-health-calc .progress-track {
  height: 8px;
      border-radius: 99px;
      background: var(--surface-2);
      margin: 9px 0 8px;
      overflow: hidden;
}

#view-health-calc .progress-fill {
  height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--primary), var(--accent));
      transition: width .3s ease;
}

#view-health-calc .progress-hint {
  font-size: 11.5px;
      color: #8A9A93;
      line-height: 1.7;
}

/* ---------- Section cards (inputs) ---------- */
#view-health-calc .section {
  background: var(--surface);
      border: 1px solid var(--line);
      border-inline-start: 4px solid var(--sec-color, var(--primary));
      border-radius: 18px;
      margin-bottom: 16px;
      overflow: hidden;
      box-shadow: var(--shadow);
}

#view-health-calc .section>.head {
  display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      cursor: pointer;
      user-select: none;
}

#view-health-calc .section>.head .icon {
  width: 38px;
      height: 38px;
      border-radius: 11px;
      background: var(--surface-2);
      background: color-mix(in srgb, var(--sec-color, var(--primary)) 16%, white);
      color: var(--sec-color, var(--primary-dark));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
}

#view-health-calc .section>.head .ttl {
  flex: 1;
}

#view-health-calc .section>.head .ttl h3 {
  margin: 0;
      font-size: 15.5px;
      font-weight: 700;
      display: flex;
      align-items: center;
}

#view-health-calc .section>.head .ttl small {
  color: var(--ink-soft);
      font-size: 12.5px;
}

#view-health-calc .section>.head .chev {
  transition: .2s;
      color: var(--ink-soft);
      font-size: 13px;
}

#view-health-calc .section.open>.head .chev {
  transform: rotate(180deg);
}

#view-health-calc .done-dot {
  width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--good);
      margin-inline-start: 8px;
      display: inline-block;
      flex-shrink: 0;
}

#view-health-calc .section>.body {
  display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .28s ease, border-top-color .28s ease;
      border-top: 1px solid transparent;
}

#view-health-calc .section.open>.body {
  grid-template-rows: 1fr;
      border-top: 1px solid var(--line);
}

#view-health-calc .section>.body .inner {
  overflow: hidden;
      min-height: 0;
}

#view-health-calc .section>.body .inner > div {
  padding: 18px 20px 22px;
}

#view-health-calc .grid {
  display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 14px;
}

#view-health-calc .field {
  display: flex;
      flex-direction: column;
      gap: 6px;
}

#view-health-calc .field label {
  font-size: 12.5px;
      font-weight: 700;
      color: var(--ink-soft);
}

#view-health-calc .field label .req {
  color: var(--accent-dark);
}

#view-health-calc .field .hint {
  font-size: 11px;
      color: #8A9A93;
      margin-top: -2px;
}

#view-health-calc .field input, #view-health-calc .field select {
  border: 1.5px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
      font-family: inherit;
      font-size: 14px;
      background: #FBFCFA;
      color: var(--ink);
      transition: .15s;
      font-variant-numeric: tabular-nums;
}

#view-health-calc /* ورودی‌های عددی/زمانی: تایپ و نمایش رقم‌ها LTR باشد (طبیعی برای اعداد)
   ولی چیدمان و راست‌چین بودن جعبه با بقیهٔ فرم هماهنگ بماند */
    .field input[type="number"], #view-health-calc .field input[type="text"], #view-health-calc .field input[type="date"], #view-health-calc .field input[type="time"] {
  direction: ltr;
      text-align: right;
}

#view-health-calc .field select {
  direction: rtl;
      text-align: right;
}

#view-health-calc .field input:focus, #view-health-calc .field select:focus {
  outline: none;
      border-color: var(--primary);
      background: #fff;
      box-shadow: 0 0 0 3px var(--primary-light);
}

/* =========================================================
   استایل ورودی‌های نا معتبر و دکمه محاسبه قرمز رنگ
   ========================================================= */
#view-health-calc .field input.invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

#view-health-calc html.dark .field input.invalid {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25) !important;
}

#view-health-calc .tabbar .calc-circle-btn.invalid-btn,
#view-health-calc .tabbar .calc-circle-btn:disabled {
  background: linear-gradient(145deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) inset, 0 8px 24px -6px rgba(220, 38, 38, 0.6) !important;
  cursor: not-allowed !important;
  opacity: 0.85 !important;
  transform: none !important;
}


#view-health-calc .seg {
  display: flex;
  background: var(--surface-2, rgba(255, 255, 255, 0.06));
  border: 1.5px solid var(--line);
  border-radius: 99px;
  padding: 4px;
  gap: 4px;
  box-sizing: border-box;
}

#view-health-calc .seg button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 16px;
  border-radius: 99px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

#view-health-calc .seg button.on,
#view-health-calc .seg button.active {
  background: var(--primary);
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#view-health-calc .seg button+button {
  border-right: none;
  border-left: none;
}

#view-health-calc .usage-wrap {
  display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 1px;
}

#view-health-calc .usage-tag {
  display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 700;
      color: var(--sec-color, var(--primary-dark));
      background: var(--primary-light);
      background: color-mix(in srgb, var(--sec-color, var(--primary)) 12%, white);
      padding: 2px 8px;
      border-radius: 99px;
}

/* ---------- Report ---------- */
#view-health-calc .report-toolbar {
  display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
      flex-wrap: wrap;
}

#view-health-calc .report-toolbar h2 {
  margin: 0 0 4px;
      font-size: 20px;
      font-weight: 700;
}

#view-health-calc .report-toolbar .meta {
  font-size: 12.5px;
      color: var(--ink-soft);
}

#view-health-calc .report-toolbar .meta b {
  color: var(--primary-dark);
}

#view-health-calc .empty-state {
  background: var(--surface);
      border: 1.5px dashed var(--line);
      border-radius: 18px;
      padding: 50px 20px;
      text-align: center;
      color: var(--ink-soft);
}

#view-health-calc .empty-state .big {
  font-size: 34px;
      margin-bottom: 10px;
}

#view-health-calc .empty-state button {
  margin-top: 14px;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 11px 22px;
      font-family: inherit;
      font-weight: 700;
      font-size: 13.5px;
      cursor: pointer;
}

/* ---- Hero stats strip ---- */
#view-health-calc .hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: stretch;
  gap: 14px;
  margin-bottom: 22px;
}

#view-health-calc .hero-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  border-inline-start: 4px solid var(--hs-color, var(--primary));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
}

#view-health-calc .hero-stat .hs-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#view-health-calc .hero-stat .hs-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.4;
  word-break: break-word;
  unicode-bidi: isolate;
}

#view-health-calc .hero-stat .hs-sub {
  margin-top: auto;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 6px;
}

/* ---- Insights panel ---- */
#view-health-calc .insights {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space);
  margin-bottom: 26px;
}

@media (min-width: 640px) {
  #view-health-calc .insights {
    grid-template-columns: 1fr 1fr;
  }
}

#view-health-calc .insight-col {
  background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px 18px;
      box-shadow: var(--shadow);
}

#view-health-calc .insight-col h4 {
  margin: 0 0 12px;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
}

#view-health-calc .insight-col.warn h4 {
  color: var(--alert);
}

#view-health-calc .insight-col.good h4 {
  color: var(--good);
}

#view-health-calc .insight-item {
  display: flex;
      gap: 10px;
      padding: 9px 0;
      border-bottom: 1px dashed var(--line);
      font-size: 12.5px;
      line-height: 1.7;
}

#view-health-calc .insight-item:last-child {
  border-bottom: none;
      padding-bottom: 0;
}

#view-health-calc .insight-item .ic {
  flex-shrink: 0;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      margin-top: 1px;
}

#view-health-calc .insight-col.warn .ic {
  background: var(--alert-soft);
      color: var(--alert);
}

#view-health-calc .insight-col.good .ic {
  background: var(--primary-light);
      color: var(--good);
}

#view-health-calc .insight-item .txt b {
  display: block;
      color: var(--ink);
      font-weight: 700;
      margin-bottom: 1px;
}

#view-health-calc .insight-item .txt span {
  color: var(--ink-soft);
}

#view-health-calc .insight-empty {
  font-size: 12.5px;
      color: #8A9A93;
}

#view-health-calc .capsule-tabbar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 16px auto 24px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: 99px;
  box-shadow: 0 6px 18px -12px rgba(21, 36, 32, .25);
  overflow-x: auto;
  height: 48px;
  scrollbar-width: none;
  width: max-content;
  max-width: 100%;
  position: relative;
}

#view-health-calc .capsule-tabbar::-webkit-scrollbar {
  display: none;
}

#view-health-calc .capsule-tabbar button {
  flex: 0 0 auto;
      border: none;
      background: transparent;
      padding: 0 20px;
      height: 100%;
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink-soft);
      border-radius: 99px;
      cursor: pointer;
      transition: background .15s ease, color .15s ease, box-shadow .15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      white-space: nowrap;
}

#view-health-calc .capsule-tabbar button:hover {
  color: var(--ink);
}

#view-health-calc .capsule-tabbar button.active {
  background: var(--surface);
      color: var(--ink);
      box-shadow: 0 2px 8px rgba(21, 36, 32, .08);
}

#view-health-calc .capsule-tabbar button .cn-dot {
  width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--cn-color, var(--primary));
}

#view-health-calc .cat {
  margin-bottom: 26px;
      scroll-margin-top: 80px;
}

#view-health-calc .cat>h3 {
  display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      margin: 0 0 12px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--cat-color, var(--primary-light));
}

#view-health-calc .cat>h3 .cat-icon {
  width: 28px;
      height: 28px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      background: var(--surface-2);
      background: color-mix(in srgb, var(--cat-color, var(--primary)) 16%, white);
      color: var(--cat-color, var(--primary-dark));
      flex-shrink: 0;
}

#view-health-calc .cat>h3 .tag {
  background: var(--surface-2);
      background: color-mix(in srgb, var(--cat-color, var(--primary)) 14%, white);
      color: var(--cat-color, var(--primary-dark));
      font-size: 11px;
      padding: 2px 9px;
      border-radius: 99px;
      font-weight: 700;
      margin-inline-start: auto;
}

#view-health-calc .cards {
  display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
}

#view-health-calc .card {
  background: var(--surface);
      border: 1px solid var(--line);
      border-top: 3px solid var(--cat-color, var(--primary));
      border-radius: 14px;
      padding: 16px 16px 14px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 10px;
}

#view-health-calc .card .top {
  display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
}

#view-health-calc .card .top h4 {
  margin: 0;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink);
}

#view-health-calc .card .top .card-heading {
  flex: 1 1 auto;
      min-width: 0;
}

#view-health-calc .card .top .formula-name {
  font-size: 11.5px;
      color: #8A9A93;
      margin-top: 2px;
      direction: ltr;
      text-align: center;
      unicode-bidi: isolate;
}

#view-health-calc .card .value {
  display: flex;
      align-items: baseline;
      gap: 6px;
}

#view-health-calc .card .value b {
  font-size: 26px;
      font-weight: 700;
      color: var(--ink);
}

#view-health-calc .card .value span {
  font-size: 12px;
      color: var(--ink-soft);
      font-weight: 700;
}

#view-health-calc .card .note {
  font-size: 12px;
      color: var(--ink-soft);
      background: var(--surface-2);
      padding: 8px 10px;
      border-radius: 9px;
}

#view-health-calc .card .note.warn {
  background: var(--alert-soft);
      color: var(--alert);
}

#view-health-calc .card .note.critical {
  background: #fef2f2;
      color: #dc2626;
      border: 1px solid #f87171;
}

#view-health-calc .card .note.good {
  background: var(--primary-light);
      color: var(--primary-dark);
}

#view-health-calc .card .rows {
  display: flex;
      flex-direction: column;
      gap: 5px;
      font-size: 12.5px;
}

#view-health-calc .card .rows .r {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 5px;
}

#view-health-calc .card .rows .r:last-child {
  border-bottom: none;
      padding-bottom: 0;
}

#view-health-calc .card .rows .r span {
  flex: 1 1 auto;
  min-width: 100px;
  word-break: normal;
  overflow-wrap: break-word;
}

#view-health-calc .card .rows .r b {
  color: var(--ink);
  font-weight: 700;
  flex: 0 0 auto;
  max-width: 55%;
  word-break: normal;
  overflow-wrap: break-word;
}

#view-health-calc .card .rows .r.r-highlight {
  background: var(--primary-light);
      border-bottom-color: transparent;
      border-radius: 8px;
      padding: 5px 8px;
      margin: 0 -8px;
}

#view-health-calc .card .rows .r.r-highlight span, #view-health-calc .card .rows .r.r-highlight b {
  color: var(--primary-dark);
      font-weight: 700;
}

#view-health-calc .gauge {
  width: 100%;
      display: flex;
      justify-content: center;
}

#view-health-calc .pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  display: inline-block;
  max-width: 100% !important;
  box-sizing: border-box;
  line-height: 1.35;
}

#view-health-calc .pill.low {
  background: #DCEBFA;
      color: #2B5D8A;
}

#view-health-calc .pill.ok {
  background: var(--primary-light);
      color: var(--primary-dark);
}

#view-health-calc .pill.high {
  background: var(--alert-soft);
      color: var(--alert);
}

#view-health-calc .pill.critical {
  background: #fef2f2;
      color: #dc2626;
      border: 1px solid #f87171;
}

#view-health-calc .calc-btn-wrap {
  display: none;
}

#view-health-calc footer.note {
  text-align: center;
      color: #8A9A93;
      font-size: 11.5px;
      margin-top: 30px;
      line-height: 1.9;
}

#view-health-calc .masthead {
  flex-direction: column;
        align-items: stretch;
}

#view-health-calc .masthead .badge {
  align-self: flex-start;
}

#view-health-calc .tabbar {
  flex-wrap: nowrap;
}

#view-health-calc .tabbar .tab-btn {
  font-size: 12px;
        padding: 10px 6px;
}

html:not([data-theme="light"]) #view-health-calc {
  color-scheme: dark;
        --bg: #0f172a;
        --surface: #1e293b;
        --surface-2: #162032;
        --ink: #f1f5f9;
        --ink-soft: #94a3b8;
        --line: #334155;
        --primary: #14b8a6;
        --primary-dark: #2dd4bf;
        --primary-light: rgba(20, 184, 166, 0.15);
        --accent: #f59e0b;
        --accent-soft: rgba(245, 158, 11, 0.30);
        --accent-dark: #fbbf24;
        --alert: #ef4444;
        --alert-soft: rgba(239, 68, 68, 0.12);
        --good: #10b981;
        --shadow: 0 1px 3px rgba(0, 0, 0, .2), 0 8px 24px -12px rgba(0, 0, 0, .5);
}

html:not([data-theme="light"]) #view-health-calc ::selection {
  background: rgba(20, 184, 166, 0.25);
}

html:not([data-theme="light"]) #view-health-calc .masthead {
  background: linear-gradient(155deg, #064e3b, #0d9488 65%);
}

html:not([data-theme="light"]) #view-health-calc .masthead .eyebrow {
  color: var(--accent);
}

html:not([data-theme="light"]) #view-health-calc .masthead p {
  color: #94a3b8;
}

html:not([data-theme="light"]) #view-health-calc .masthead .badge span {
  color: #94a3b8;
}

html:not([data-theme="light"]) #view-health-calc .tabbar {
  background: var(--surface);
        box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .5);
        border: 1px solid var(--line);
}

html:not([data-theme="light"]) #view-health-calc .tabbar .tab-btn.active {
  background: var(--bg);
}

html:not([data-theme="light"]) #view-health-calc .tabbar .calc-circle-btn {
  border-color: var(--surface);
        background: linear-gradient(145deg, #0fb87a 0%, var(--primary) 45%, #0d9488 100%);
        box-shadow:
          0 0 0 2px rgba(255, 255, 255, .12) inset,
          0 8px 24px -6px rgba(20, 184, 166, .55),
          0 2px 8px -2px rgba(20, 184, 166, .3);
}

html:not([data-theme="light"]) #view-health-calc .progress-hint, html:not([data-theme="light"]) #view-health-calc.field .hint, html:not([data-theme="light"]) #view-health-calc.insight-empty, html:not([data-theme="light"]) #view-health-calcfooter.note, html:not([data-theme="light"]) #view-health-calc.card .top .formula-name {
  color: #64748b;
}

html:not([data-theme="light"]) #view-health-calc .section>.head .icon {
  background: var(--surface-2);
        background: color-mix(in srgb, var(--sec-color, var(--primary)) 20%, #0f172a);
        color: var(--sec-color, var(--primary));
}

html:not([data-theme="light"]) #view-health-calc .field input, html:not([data-theme="light"]) #view-health-calc.field select {
  background: var(--bg);
        color: var(--ink);
}

html:not([data-theme="light"]) #view-health-calc .field input:focus, html:not([data-theme="light"]) #view-health-calc.field select:focus {
  background: var(--surface);
}

html:not([data-theme="light"]) #view-health-calc .seg button {
  background: var(--bg);
}

html:not([data-theme="light"]) #view-health-calc .usage-tag {
  background: var(--surface-2);
        background: color-mix(in srgb, var(--sec-color, var(--primary)) 15%, #0f172a);
}

html:not([data-theme="light"]) #view-health-calc .cat>h3 {
  border-bottom-color: var(--line);
        border-bottom-color: color-mix(in srgb, var(--cat-color, var(--primary)) 35%, #0f172a);
}

html:not([data-theme="light"]) #view-health-calc .cat>h3 .cat-icon {
  background: var(--surface-2);
        background: color-mix(in srgb, var(--cat-color, var(--primary)) 20%, #0f172a);
        color: var(--cat-color, var(--primary));
}

html:not([data-theme="light"]) #view-health-calc .cat>h3 .tag {
  background: var(--surface-2);
        background: color-mix(in srgb, var(--cat-color, var(--primary)) 15%, #0f172a);
        color: var(--cat-color, var(--primary));
}

html:not([data-theme="light"]) #view-health-calc .pill.low {
  background: rgba(59, 130, 246, 0.15);
        color: #60a5fa;
}

html:not([data-theme="light"]) #view-health-calc .card .note.good {
  color: var(--good);
}

html:not([data-theme="light"]) #view-health-calc ::-webkit-scrollbar {
  width: 6px;
        height: 6px;
}

html:not([data-theme="light"]) #view-health-calc ::-webkit-scrollbar-track {
  background: var(--bg);
}

html:not([data-theme="light"]) #view-health-calc ::-webkit-scrollbar-thumb {
  background: var(--line);
        border-radius: 3px;
}

#view-health-calc /* پایان media query تم تیره */

    /* ===== دکمه ذخیره گزارش ===== */
    .masthead-right {
  display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      flex-shrink: 0;
      min-width: 140px;
}

#view-health-calc .save-report-btn {
  background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 12px;
      padding: 10px 16px;
      color: #fff;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      backdrop-filter: blur(6px);
      transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
      white-space: nowrap;
      letter-spacing: .01em;
}

#view-health-calc .save-report-btn:hover {
  background: rgba(255, 255, 255, 0.22);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .4);
}

#view-health-calc .save-report-btn:active {
  transform: scale(0.97);
}

#view-health-calc .save-report-btn:disabled {
  opacity: 0.65;
      cursor: wait;
      transform: none;
}

#view-health-calc to {
  transform: rotate(360deg);
}

#view-health-calc .btn-spin {
  display: inline-block;
      animation: btn-spin 0.85s linear infinite;
}

#view-health-calc /* پشتیبانی صریح از کلاس .dark */
    html.dark {
  color-scheme: dark;
      --bg: #0f172a;
      --surface: #1e293b;
      --surface-2: #162032;
      --ink: #f1f5f9;
      --ink-soft: #94a3b8;
      --line: #334155;
      --primary: #14b8a6;
      --primary-dark: #2dd4bf;
      --primary-light: rgba(20, 184, 166, 0.15);
      --accent: #f59e0b;
      --accent-soft: rgba(245, 158, 11, 0.30);
      --accent-dark: #fbbf24;
      --alert: #ef4444;
      --alert-soft: rgba(239, 68, 68, 0.12);
      --good: #10b981;
      --shadow: 0 1px 3px rgba(0, 0, 0, .2), 0 8px 24px -12px rgba(0, 0, 0, .5);
}

#view-health-calc html.dark ::selection {
  background: rgba(20, 184, 166, 0.25);
}

#view-health-calc html.dark .masthead {
  background: linear-gradient(155deg, #064e3b, #0d9488 65%);
}

#view-health-calc html.dark .masthead .eyebrow {
  color: var(--accent);
}

#view-health-calc html.dark .masthead p {
  color: #94a3b8;
}

#view-health-calc html.dark .masthead .badge span {
  color: #94a3b8;
}

#view-health-calc html.dark .tabbar {
  background: var(--surface); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .5); border: 1px solid var(--line);
}

#view-health-calc html.dark .tabbar .tab-btn.active {
  background: var(--bg);
}

#view-health-calc html.dark .tabbar .calc-circle-btn {
  border-color: var(--surface); background: linear-gradient(145deg, #0fb87a 0%, var(--primary) 45%, #0d9488 100%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .12) inset, 0 8px 24px -6px rgba(20, 184, 166, .55), 0 2px 8px -2px rgba(20, 184, 166, .3);
}

#view-health-calc html.dark .progress-hint, #view-health-calc html.dark .field .hint, #view-health-calc html.dark .insight-empty, #view-health-calc html.dark footer.note, #view-health-calc html.dark .card .top .formula-name {
  color: #64748b;
}

#view-health-calc html.dark .section>.head .icon {
  background: var(--surface-2); background: color-mix(in srgb, var(--sec-color, var(--primary)) 20%, #0f172a); color: var(--sec-color, var(--primary));
}

#view-health-calc html.dark .field input, #view-health-calc html.dark .field select {
  background: var(--bg); color: var(--ink);
}

#view-health-calc html.dark .field input:focus, #view-health-calc html.dark .field select:focus {
  background: var(--surface);
}

#view-health-calc html.dark .seg button {
  background: var(--bg);
}

#view-health-calc html.dark .usage-tag {
  background: var(--surface-2); background: color-mix(in srgb, var(--sec-color, var(--primary)) 15%, #0f172a);
}

#view-health-calc html.dark .cat>h3 {
  border-bottom-color: var(--line); border-bottom-color: color-mix(in srgb, var(--cat-color, var(--primary)) 35%, #0f172a);
}

#view-health-calc html.dark .cat>h3 .cat-icon {
  background: var(--surface-2); background: color-mix(in srgb, var(--cat-color, var(--primary)) 20%, #0f172a); color: var(--cat-color, var(--primary));
}

#view-health-calc html.dark .cat>h3 .tag {
  background: var(--surface-2); background: color-mix(in srgb, var(--cat-color, var(--primary)) 15%, #0f172a); color: var(--cat-color, var(--primary));
}

#view-health-calc html.dark .pill.low {
  background: rgba(59, 130, 246, 0.15); color: #60a5fa;
}

#view-health-calc html.dark .card .note.good {
  color: var(--good);
}

#view-health-calc html.dark ::-webkit-scrollbar-track {
  background: var(--bg);
}

#view-health-calc html.dark ::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 3px;
}