/* Generated by scripts/build-lite-assets.mjs from calculators.entry.css. */

/* Source: assets/calculators/age.css */
/* Calculator styles: age */

/* Inputs: The Timeline */
/* Match .vareoncalc-panel-input: card already provides --sc-card-padding */
.vareoncalc-age-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

.age-section {
  gap: 12px;
}

.age-section .age-date-row {
  margin-bottom: 0;
}

.age-target-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.age-target-group .age-section--target {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.age-target-group .age-section--presets {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.age-section--presets .age-presets {
  margin-bottom: 0;
}

.age-section--presets .age-presets-label {
  display: none;
}

.age-timeline-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
  margin-bottom: 4px;
}

.age-timeline-header .timeline-icon {
  font-size: 24px;
}

.age-timeline-header .timeline-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

/* Date row: Date + Time side by side */
.age-date-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.age-date-row .vareoncalc-field {
  flex: 1;
  min-width: 0;
}

/* Time field: narrower than date field */
.age-date-row .vareoncalc-field--time {
  flex: 0 0 120px;
  min-width: 100px;
}

/* Optional label styling */
.age-optional {
  font-weight: 400;
  font-size: 11px;
  color: var(--sc-muted-text, #9ca3af);
}

.age-date-arrow {
  flex-shrink: 0;
  padding-bottom: 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--sc-muted-text, #6b7280);
}

/* Preset buttons: clean grid layout */
.age-presets {
  display: block;
  margin-bottom: 12px;
}

.age-presets-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--sc-muted-text, #9ca3af);
  margin-bottom: 8px;
}

.age-presets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.age-preset-btn {
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--sc-input-bg, #f9fafb);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 8px;
  color: var(--sc-card-text, #374151);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.age-preset-btn:hover {
  background: var(--sc-card-bg, #ffffff);
  border-color: var(--vareoncalc-accent, #3b82f6);
  color: var(--vareoncalc-accent, #3b82f6);
}

.vareoncalc-age-timeline .vareoncalc-btn {
  width: 100%;
}

/* Right Panel: Life Stats */
.vareoncalc-age-lifestats {
  display: flex;
  flex-direction: column;
  background: var(--sc-input-bg, #f9fafb);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  min-height: 320px;
}

.vareoncalc-age-lifestats--placeholder {
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--sc-muted-text, #6b7280);
  padding: var(--sc-card-padding);
}

.vareoncalc-age-lifestats--placeholder .placeholder-icon {
  font-size: 52px;
  opacity: 0.4;
  margin-bottom: 12px;
}

.vareoncalc-age-lifestats--placeholder .placeholder-text {
  font-size: 14px;
  opacity: 0.7;
}

/* No blind footer handle — drop reserved bottom padding on results */
.vareoncalc-two-step--blind[data-step="results"] .vareoncalc-two-step__results:has(.vareoncalc-age-lifestats) {
  padding-bottom: 0;
}

/* Headline: theme surface */
.lifestats-headline {
  padding: var(--sc-card-padding);
  text-align: center;
  background: var(--sc-card-bg, #ffffff);
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.lifestats-years {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  color: var(--sc-card-text, #111827);
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

.lifestats-years-label {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sc-muted-text, #6b7280);
  margin-top: 2px;
}

/* Ring inside hero */
.lifestats-ring-wrap {
  display: flex;
  justify-content: center;
  margin: 18px auto 8px;
}

.lifestats-ring {
  position: relative;
  width: 130px;
  height: 130px;
}

.lifestats-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.lifestats-ring__track {
  fill: none;
  stroke: color-mix(in srgb, var(--sc-card-border, #e5e7eb) 88%, var(--sc-card-text, #111827) 12%);
  stroke-width: 8;
}

.lifestats-ring__progress {
  fill: none;
  stroke: var(--sc-accent, #2563eb);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.lifestats-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.lifestats-ring__line {
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-card-text, #374151);
  line-height: 1.4;
}

.lifestats-ring__line .subage-value {
  font-weight: 700;
}

.lifestats-since {
  font-size: 13px;
  font-weight: 500;
  color: var(--sc-muted-text, #6b7280);
  margin-top: 10px;
}

.lifestats-since strong {
  color: var(--sc-card-text, #111827);
  font-weight: 700;
}

/* Stats Grid: 2x2 individual cards */
.lifestats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: var(--sc-card-padding);
  background: transparent;
}

.lifestats-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sc-card-padding);
  background: var(--sc-card-bg, #ffffff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  text-align: center;
  transition: border-color 0.15s ease;
}

.lifestats-stat:hover {
  border-color: color-mix(in srgb, var(--sc-accent, #2563eb) 30%, var(--sc-card-border, #e5e7eb) 70%);
}

.stat-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sc-input-bg, #f9fafb);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  color: var(--sc-card-text, #374151);
  margin-bottom: 8px;
}

.lifestats-stat .stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.lifestats-stat .stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-muted-text, #6b7280);
  margin-top: 4px;
}

/* Milestone card */
.age-milestone-card {
  margin: 0 var(--sc-card-padding);
  padding: var(--sc-card-padding);
  background: color-mix(in srgb, var(--sc-accent, #2563eb) 6%, var(--sc-card-bg, #ffffff) 94%);
  border: 1px solid color-mix(in srgb, var(--sc-accent, #2563eb) 14%, var(--sc-card-border, #e5e7eb) 86%);
  border-radius: 12px;
}

.age-milestone-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.age-milestone-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-muted-text, #6b7280);
}

.age-milestone-content {
  margin-top: 4px;
  font-size: 13px;
  color: var(--sc-card-text, #374151);
  line-height: 1.4;
}

.age-milestone-content strong {
  font-weight: 700;
  color: var(--sc-card-text, #111827);
}

.milestone-highlight {
  color: var(--sc-accent, #2563eb) !important;
  font-weight: 800 !important;
}

.age-milestone-date {
  font-weight: 600;
}

.age-milestone-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.milestone-progress-container {
  flex: 1;
  min-width: 0;
}

.milestone-progress-track {
  height: 6px;
  background: var(--sc-card-border, #e5e7eb);
  border-radius: 999px;
  overflow: hidden;
}

.milestone-progress-fill {
  height: 100%;
  background: var(--sc-accent, #2563eb);
  border-radius: 999px;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.age-milestone-trophy {
  font-size: 22px;
  flex-shrink: 0;
}

/* Celebration: Next Birthday */
.lifestats-celebration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: var(--sc-card-padding) var(--sc-card-padding) 0;
  padding: var(--sc-card-padding);
  background: var(--sc-card-bg, #ffffff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  color: var(--sc-card-text, #374151);
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
}

.lifestats-celebration .celebration-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.lifestats-celebration .celebration-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.lifestats-celebration .age-next-bday-label {
  line-height: 1.25;
  font-size: 14px;
  font-weight: 500;
  color: var(--sc-card-text, #374151);
}

.lifestats-celebration .age-next-bday-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  line-height: 1;
  margin: 4px 0;
}

.age-next-bday-number {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  color: var(--sc-card-text, #111827);
  font-variant-numeric: tabular-nums;
}

.age-next-bday-unit {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sc-muted-text, #6b7280);
}

.age-next-bday-dayname {
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-muted-text, #6b7280);
}

/* Birthday: "today" state */
.lifestats-celebration--today {
  background: color-mix(in srgb, var(--sc-accent, #2563eb) 8%, var(--sc-card-bg, #ffffff) 92%);
  border-color: var(--sc-card-border, #e5e7eb);
  color: var(--sc-card-text, #111827);
}

/* Back to inputs */
.age-back-wrap {
  margin-top: 8px;
}

.age-back-handle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-top: 1px dashed var(--sc-card-border, #e5e7eb);
  background: var(--sc-card-bg, #ffffff);
  color: var(--sc-muted-text, #6b7280);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.age-back-handle:hover,
.age-back-handle:focus-visible {
  color: var(--sc-accent, #3b82f6);
  background: var(--sc-input-bg, #f9fafb);
}

.age-back-handle svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.age-back-handle:hover svg,
.age-back-handle:focus-visible svg {
  transform: translateY(-2px);
}


/* Dark Theme: Age Calculator */
.vareoncalc-root[data-theme="dark"] .vareoncalc-age-lifestats,
.vareoncalc-root.theme-dark .vareoncalc-age-lifestats {
  background: var(--sc-input-bg, #1f2937);
}

.vareoncalc-root[data-theme="dark"] .lifestats-headline,
.vareoncalc-root.theme-dark .lifestats-headline {
  background: var(--sc-card-bg, #111827);
  border-bottom-color: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .lifestats-stat,
.vareoncalc-root.theme-dark .lifestats-stat {
  background: var(--sc-card-bg, #111827);
  border-color: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .age-milestone-card,
.vareoncalc-root.theme-dark .age-milestone-card {
  background: color-mix(in srgb, var(--sc-accent, #3b82f6) 8%, var(--sc-card-bg, #111827) 92%);
  border-color: color-mix(in srgb, var(--sc-accent, #3b82f6) 18%, var(--sc-card-border, #374151) 82%);
}

.vareoncalc-root[data-theme="dark"] .lifestats-celebration,
.vareoncalc-root.theme-dark .lifestats-celebration {
  background: var(--sc-card-bg, #111827);
  border-color: var(--sc-card-border, #374151);
  color: var(--sc-card-text, #e5e7eb);
}

.vareoncalc-root[data-theme="dark"] .lifestats-celebration--today,
.vareoncalc-root.theme-dark .lifestats-celebration--today {
  background: color-mix(in srgb, var(--sc-accent, #3b82f6) 10%, var(--sc-card-bg, #111827) 90%);
  border-color: var(--sc-card-border, #374151);
  color: var(--sc-card-text, #e5e7eb);
}

.vareoncalc-root[data-theme="dark"] .age-preset-btn,
.vareoncalc-root.theme-dark .age-preset-btn {
  background: var(--sc-input-bg, #1f2937);
  border-color: var(--sc-card-border, #374151);
  color: var(--sc-card-text, #e5e7eb);
}

.vareoncalc-root[data-theme="dark"] .age-preset-btn:hover,
.vareoncalc-root.theme-dark .age-preset-btn:hover {
  background: var(--sc-card-bg, #111827);
}

/* Responsive */
@media (max-width: 720px) {
  .vareoncalc-age-lifestats {
    min-height: auto;
  }

  .lifestats-years {
    font-size: 48px;
  }

  .lifestats-stat .stat-value {
    font-size: 20px;
  }

  .age-next-bday-number {
    font-size: 40px;
  }
}

@media (max-width: 480px) {
  .age-date-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .age-date-row .vareoncalc-field {
    flex: 1 1 calc(60% - 5px);
    min-width: 0;
  }

  .age-date-row .vareoncalc-field--time {
    flex: 1 1 calc(40% - 5px);
    min-width: 90px;
  }

  .age-date-arrow {
    display: none;
  }

  .age-presets-grid {
    grid-template-columns: 1fr;
  }

  .lifestats-years {
    font-size: 42px;
  }

  .lifestats-ring {
    width: 110px;
    height: 110px;
  }

  .stat-icon-wrap {
    display: none;
  }

  .lifestats-stat .stat-value {
    font-size: 16px;
  }

  .lifestats-stat {
    padding: max(10px, calc(var(--sc-card-padding) * 0.875)) max(6px, calc(var(--sc-card-padding) * 0.5));
  }

  .lifestats-grid {
    gap: 8px;
  }

  .age-milestone-card {
    margin-top: 0;
  }

  .lifestats-celebration {
    margin-top: 8px;
  }

  .age-next-bday-number {
    font-size: 36px;
  }
}

@media (max-width: 410px) {
  .age-timeline-header {
    align-items: flex-start;
  }

  .age-date-row {
    flex-direction: column;
    align-items: stretch;
  }

  .age-date-row .vareoncalc-field--time {
    flex: 1 1 auto;
    min-width: 0;
  }

  .age-presets-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lifestats-years {
    font-size: 40px;
  }

  .lifestats-grid {
    gap: 6px;
    padding: var(--sc-card-padding);
  }

  .lifestats-stat .stat-value {
    font-size: 14px;
  }

  .lifestats-stat .stat-label {
    font-size: 9px;
  }

  .age-milestone-card {
    margin: 0 var(--sc-card-padding);
  }

  .lifestats-celebration {
    margin: 6px var(--sc-card-padding) 0;
  }

  .age-next-bday-number {
    font-size: 32px;
  }
}

@media (max-width: 360px) {
  .age-presets-grid {
    grid-template-columns: 1fr;
  }

  .lifestats-years {
    font-size: 36px;
  }
}

@container vareoncalc (max-width: 410px) {
  .age-timeline-header {
    align-items: flex-start;
  }

  .age-date-row {
    flex-direction: column;
    align-items: stretch;
  }

  .age-date-row .vareoncalc-field--time {
    flex: 1 1 auto;
    min-width: 0;
  }

  .age-presets-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lifestats-years {
    font-size: 40px;
  }

  .stat-icon-wrap {
    display: none;
  }

  .lifestats-grid {
    gap: 6px;
    padding: var(--sc-card-padding);
  }

  .lifestats-stat .stat-value {
    font-size: 14px;
  }

  .lifestats-stat .stat-label {
    font-size: 9px;
  }

  .age-milestone-card {
    margin: 0 var(--sc-card-padding);
  }

  .lifestats-celebration {
    margin: 6px var(--sc-card-padding) 0;
  }

  .age-next-bday-number {
    font-size: 32px;
  }
}

@container vareoncalc (max-width: 360px) {
  .age-presets-grid {
    grid-template-columns: 1fr;
  }

  .lifestats-years {
    font-size: 36px;
  }
}

/* Source: assets/calculators/bmi.css */
/* Calculator styles: bmi */

/* BMI Category Colors */
.vareoncalc-category-underweight {
  color: var(--sc-warning);
}

.vareoncalc-category-normal {
  color: var(--sc-success);
}

.vareoncalc-category-overweight {
  color: var(--sc-warning);
}

.vareoncalc-category-obese {
  color: var(--sc-error);
}

/* ====================================
   BMI Calculator - Health Vitals Dashboard
   Two-panel "Check-Up + Diagnosis" design
   ==================================== */

/* Dashboard-specific layout */
.vareoncalc-bmi-dashboard {
  gap: 24px;
}

/* Wider card for BMI dashboard */
.vareoncalc-card:has(.vareoncalc-bmi-dashboard) {
  max-width: 780px;
}

/* Unit Toggle - compact segmented control */
.bmi-unit-toggle,
.bmi-unit-switcher {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0;
  margin-left: auto;
  width: fit-content;
  max-width: 100%;
}

.bmi-unit-toggle .vareoncalc-measurement-toggle,
.bmi-unit-switcher .vareoncalc-measurement-toggle {
  width: fit-content;
  max-width: 100%;
}

.bmi-vitals-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Vitals Section */
.bmi-vitals-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bmi-section-title {
  padding-bottom: 0;
  border-bottom: 0;
  min-width: 0;
}

/* Compact binary toggle styling exported from the Fuel Cost km/mi switch */
.bmi-icon-toggle {
  width: fit-content;
}

.bmi-icon-toggle.vareoncalc-toggle,
.bmi-icon-toggle.vareoncalc-measurement-toggle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}

.bmi-icon-toggle.vareoncalc-toggle:hover,
.bmi-icon-toggle.vareoncalc-toggle:focus-within,
.bmi-icon-toggle.vareoncalc-measurement-toggle:hover,
.bmi-icon-toggle.vareoncalc-measurement-toggle:focus-within {
  border: none;
  box-shadow: none;
}

.bmi-icon-toggle .vareoncalc-toggle__track {
  display: inline-flex;
  align-items: stretch;
  width: auto;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.bmi-icon-toggle .vareoncalc-toggle__option {
  flex: 0 0 auto;
}

.bmi-icon-toggle__btn.vareoncalc-measurement-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--sc-muted-text, #6b7280);
  font-size: 11px;
  font-weight: 700;
  min-height: 26px;
  min-width: 48px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1;
  white-space: nowrap;
}

.bmi-icon-toggle__btn.vareoncalc-measurement-toggle__btn.is-active,
.bmi-icon-toggle__btn.vareoncalc-measurement-toggle__btn[aria-pressed="true"],
.bmi-icon-toggle__btn.vareoncalc-measurement-toggle__btn.vareoncalc-measurement-toggle__btn--active {
  background: var(--sc-accent, #3b82f6);
  color: var(--sc-accent-text, var(--sc-button-text, #fff));
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.18);
}

.bmi-icon-toggle__btn.vareoncalc-measurement-toggle__btn:hover:not(.is-active):not([aria-pressed="true"]):not(.vareoncalc-measurement-toggle__btn--active) {
  background: rgba(59, 130, 246, 0.08);
}

.bmi-icon-toggle__btn.vareoncalc-measurement-toggle__btn:focus-visible {
  outline: 2px solid var(--sc-accent, #3b82f6);
  outline-offset: 1px;
}

/* Vitals Grid - Height & Weight side by side */
.bmi-vitals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.bmi-vitals-grid > .vareoncalc-field,
.bmi-vitals-grid > .bmi-height-imperial,
.bmi-height-imperial__inputs > .vareoncalc-field,
.bmi-height-imperial__input > .vareoncalc-field {
  min-width: 0;
}

.bmi-vitals-grid .vareoncalc-input-adorned {
  --sc-suffix-rail-min-width: 20px;
  --sc-suffix-rail-max-width: 42px;
  --sc-suffix-rail-fluid-width: 34%;
}

/* Imperial Height compound field */
.bmi-height-imperial {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bmi-height-imperial>label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--sc-label-text);
  opacity: 0.88;
}

.bmi-height-imperial__inputs,
.bmi-height-imperial__input {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 0;
}

.bmi-height-imperial__inputs .vareoncalc-field,
.bmi-height-imperial__input .vareoncalc-field {
  margin-bottom: 0;
}

.bmi-height-imperial__inputs .vareoncalc-field--compact label,
.bmi-height-imperial__input .vareoncalc-field--compact label {
  display: none;
}

/* Left panel (Check-Up) styling — card already applies --sc-card-padding; match .vareoncalc-panel-input */
.bmi-checkup {
  padding: 0;
}

.bmi-checkup .vareoncalc-btn {
  margin-top: 8px;
}

/* Right panel (Diagnosis) styling - Placeholder */
.bmi-diagnosis {
  background: var(--sc-input-bg, #f9fafb);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  min-height: 280px;
}

.bmi-diagnosis--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sc-card-padding);
  color: var(--sc-muted-text, #6b7280);
}

.bmi-diagnosis--placeholder .placeholder-icon {
  font-size: 48px;
  opacity: 0.4;
  margin-bottom: 12px;
}

.bmi-diagnosis--placeholder .placeholder-text {
  font-size: 14px;
  opacity: 0.7;
  max-width: 200px;
}

/* ====================================
   BMI Results - Redesigned Layout
   ==================================== */
.bmi-results {
  --bmi-text-strong: var(--sc-card-text, #111827);
  --bmi-text-base: var(--sc-card-text, #374151);
  --bmi-text-soft: var(--sc-muted-text, #6b7280);
  --bmi-text-faint: var(--sc-muted-text, #9ca3af);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--sc-card-padding);
  background: transparent;
  border: none;
  border-radius: 0;
}

.bmi-results--fitness {
  /* No outer shadow: blur was visible in the blind two-step gap above "Edit inputs". */
  box-shadow: none;
}

/* ---- Hero ---- */
.bmi-results__hero {
  --bmi-coach-accent: var(--sc-accent, #3b82f6);
  --bmi-coach-accent-soft: rgba(59, 130, 246, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: var(--sc-card-padding);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  background: var(--sc-card-bg, #ffffff);
}

.bmi-results__hero.bmi-category--underweight {
  --bmi-coach-accent: #2563eb;
  --bmi-coach-accent-soft: rgba(37, 99, 235, 0.15);
}

.bmi-results__hero.bmi-category--normal {
  --bmi-coach-accent: #059669;
  --bmi-coach-accent-soft: rgba(5, 150, 105, 0.14);
}

.bmi-results__hero.bmi-category--overweight {
  --bmi-coach-accent: #d97706;
  --bmi-coach-accent-soft: rgba(217, 119, 6, 0.14);
}

.bmi-results__hero.bmi-category--obese-1,
.bmi-results__hero.bmi-category--obese-2,
.bmi-results__hero.bmi-category--obese-3 {
  --bmi-coach-accent: #dc2626;
  --bmi-coach-accent-soft: rgba(220, 38, 38, 0.14);
}

.bmi-hero__score-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bmi-text-soft);
}

.bmi-hero__score {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bmi-coach-accent);
}

.bmi-hero__category {
  display: inline-flex;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bmi-coach-accent);
  border: 1.5px solid var(--bmi-coach-accent);
  background: transparent;
  margin-bottom: 4px;
}

/* ---- Spectrum Bar ---- */
.bmi-hero__spectrum {
  width: 100%;
  margin-top: 6px;
}

.bmi-spectrum__track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa 0%, #34d399 25%, #fbbf24 55%, #f87171 100%);
}

.bmi-spectrum__marker {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  background: var(--sc-card-bg, #ffffff);
  border: 3px solid var(--bmi-coach-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px var(--bmi-coach-accent-soft), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.bmi-spectrum__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.bmi-spectrum__zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.bmi-spectrum__zone-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bmi-text-soft);
}

.bmi-spectrum__zone-range {
  font-size: 10px;
  font-weight: 500;
  color: var(--bmi-text-faint);
}

/* ---- Gauge (Body Composition Zone) ---- */
.bmi-results__gauge {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--sc-card-padding);
  border-radius: 12px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-input-bg, #f9fafb);
}

.bmi-coach-gauge__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.bmi-coach-gauge__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bmi-text-strong);
}

.bmi-coach-gauge__value {
  font-size: 16px;
  font-weight: 800;
  color: var(--bmi-text-strong);
}

.bmi-coach-gauge__unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--bmi-text-soft);
}

.bmi-gauge {
  position: relative;
}

.bmi-gauge__track {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
}

.bmi-gauge__zone {
  flex: 1;
}

.bmi-gauge__zone--under {
  background: #60a5fa;
}

.bmi-gauge__zone--normal {
  background: #34d399;
}

.bmi-gauge__zone--over {
  background: #fbbf24;
}

.bmi-gauge__zone--obese {
  background: #f87171;
}

.bmi-gauge__marker {
  position: absolute;
  top: -4px;
  width: 18px;
  height: 18px;
  background: var(--sc-card-bg, #ffffff);
  border: 3px solid var(--sc-card-text, #111827);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.25);
}

.bmi-gauge__scale {
  position: relative;
  height: 15px;
  padding-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--bmi-text-soft);
}

.bmi-gauge__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  line-height: 1;
  white-space: nowrap;
}

.bmi-gauge__tick--start {
  left: 0;
  transform: none;
}

.bmi-gauge__tick--end {
  left: 100%;
  transform: translateX(-100%);
}

/* ---- Insight Cards ---- */
.bmi-results__insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bmi-coach-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sc-card-padding);
  border-radius: 12px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-card-bg, #ffffff);
}

.bmi-insight__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bmi-text-soft);
}

.bmi-insight__value-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bmi-insight__svg-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--bmi-text-soft);
}

.bmi-insight__value {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--bmi-text-strong);
}

.bmi-insight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.bmi-insight__text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--bmi-text-base);
}

.bmi-insight__text strong {
  font-weight: 700;
  color: var(--bmi-text-strong);
}

/* ---- Advice Card ---- */
.bmi-results__advice {
  margin: 0;
  padding: var(--sc-card-padding);
  border-radius: 12px;
  border: 1px solid transparent;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bmi-results__advice.bmi-advice--positive {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}

.bmi-results__advice.bmi-advice--action {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}

.bmi-results__advice::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='80' viewBox='0 0 200 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40c30-15 50 15 80 0s50-15 80 0 40 15 40 0' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 180px auto;
  background-repeat: repeat;
}

.bmi-coach-advice__title {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--bmi-text-strong);
}

/* ---- Note ---- */
.bmi-results__note {
  margin-top: -2px;
  padding: 2px 2px 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--bmi-text-faint);
  text-align: center;
}

/* ---- Dark Theme ---- */
.vareoncalc-root[data-theme="dark"] .bmi-diagnosis,
.vareoncalc-root.theme-dark .bmi-diagnosis {
  background: var(--sc-input-bg, #1f2937);
  border-color: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .bmi-results,
.vareoncalc-root.theme-dark .bmi-results {
  background: transparent;
  --bmi-text-strong: #d2dced;
  --bmi-text-base: #bcc9dd;
  --bmi-text-soft: #9bacc4;
  --bmi-text-faint: #8598b2;
}

.vareoncalc-root[data-theme="dark"] .bmi-results--fitness,
.vareoncalc-root.theme-dark .bmi-results--fitness {
  box-shadow: none;
}

.vareoncalc-root[data-theme="dark"] .bmi-results__hero,
.vareoncalc-root.theme-dark .bmi-results__hero {
  border-color: var(--sc-card-border, #374151);
  background: var(--sc-card-bg, #111827);
}

.vareoncalc-root[data-theme="dark"] .bmi-coach-card,
.vareoncalc-root.theme-dark .bmi-coach-card {
  border-color: var(--sc-card-border, #374151);
  background: linear-gradient(145deg, var(--sc-card-bg, #111827) 0%, var(--sc-input-bg, #1f2937) 100%);
}

.vareoncalc-root[data-theme="dark"] .bmi-results__gauge,
.vareoncalc-root.theme-dark .bmi-results__gauge {
  border-color: var(--sc-card-border, #374151);
  background: rgba(17, 24, 39, 0.78);
}

.vareoncalc-root[data-theme="dark"] .bmi-spectrum__marker,
.vareoncalc-root.theme-dark .bmi-spectrum__marker {
  background: #1f2937;
}

.vareoncalc-root[data-theme="dark"] .bmi-gauge__marker,
.vareoncalc-root.theme-dark .bmi-gauge__marker {
  background: #e2e8f0;
  border-color: #0f172a;
}

.vareoncalc-root[data-theme="dark"] .bmi-results__advice::after,
.vareoncalc-root.theme-dark .bmi-results__advice::after {
  opacity: 0.04;
  filter: invert(1);
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .vareoncalc-bmi-dashboard {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .bmi-diagnosis {
    min-height: auto;
  }

  .bmi-vitals-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bmi-height-imperial__inputs,
  .bmi-height-imperial__input {
    grid-template-columns: 1fr 1fr;
  }

  .bmi-unit-toggle,
  .bmi-unit-switcher {
    margin-left: 0;
  }

  .bmi-hero__score {
    font-size: 46px;
  }

  .bmi-results {
    gap: 12px;
    padding: var(--sc-card-padding);
  }

  .bmi-results__insights {
    grid-template-columns: 1fr;
  }

  .bmi-insight__value {
    font-size: 18px;
  }
}

@media (max-width: 520px) {
  .bmi-vitals-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .bmi-hero__score {
    font-size: 42px;
  }

  .bmi-hero__category {
    font-size: 10px;
  }

  .bmi-spectrum__zone-name {
    font-size: 9px;
  }

  .bmi-spectrum__zone-range {
    font-size: 9px;
  }
}

@media (max-width: 410px) {
  .bmi-vitals-section,
  .bmi-vitals-grid {
    gap: 10px;
  }

  .bmi-height-imperial__inputs,
  .bmi-height-imperial__input {
    grid-template-columns: 1fr;
  }

  .bmi-unit-toggle,
  .bmi-unit-switcher {
    width: 100%;
    justify-content: flex-start;
  }

  .bmi-coach-card--target .bmi-insight__svg-icon {
    display: none;
  }
}

@media (max-width: 360px) {
  .bmi-results {
    padding: var(--sc-card-padding);
  }

  .bmi-hero__score {
    font-size: 36px;
  }
}

@container vareoncalc (max-width: 520px) {
  .bmi-vitals-grid {
    grid-template-columns: 1fr;
  }
}

@container vareoncalc (max-width: 410px) {
  .bmi-coach-card--target .bmi-insight__svg-icon {
    display: none;
  }

  .bmi-vitals-section,
  .bmi-vitals-grid {
    gap: 10px;
  }

  .bmi-height-imperial__inputs,
  .bmi-height-imperial__input {
    grid-template-columns: 1fr;
  }

  .bmi-unit-toggle,
  .bmi-unit-switcher {
    width: 100%;
    justify-content: flex-start;
  }
}

@container vareoncalc (max-width: 360px) {
  .bmi-results {
    padding: var(--sc-card-padding);
  }

  .bmi-hero__score {
    font-size: 36px;
  }
}

/* Source: assets/calculators/credit-card-payoff.css */
/* Calculator styles: credit-card-payoff */

/* ====================================
   Credit Card Payoff - Debt Destruction Command Center
   Two-step "Attack Plan + Freedom Timeline" design
   ==================================== */

/* Dashboard-specific layout */
.vareoncalc-ccpayoff-dashboard {
  width: 100%;
}

.ccpayoff-section {
  gap: 12px;
}

.ccpayoff-section .ccpayoff-strategy-switch {
  margin-bottom: 0;
}

/* Wider card for CC payoff dashboard */
.vareoncalc-card:has(.vareoncalc-ccpayoff-dashboard) {
  max-width: 800px;
}

/* Strategy Switch Toggle */
.ccpayoff-strategy-switch {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.strategy-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--sc-muted-text, #6b7280);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.strategy-btn:hover {
  border-color: var(--sc-text, #374151);
  background: var(--sc-input-bg, #f3f4f6);
  color: var(--sc-text, #374151);
}

.strategy-btn--active {
  border-color: var(--sc-accent, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
  color: var(--sc-accent, #3b82f6);
}

.strategy-icon {
  display: none;
}

.strategy-label {
  font-weight: 600;
  white-space: nowrap;
}

#payment-field label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.ccpayoff-payment-min {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--sc-muted-text, #6b7280);
}

/* Result Panel */
.vareoncalc-ccpayoff-result {
  display: flex;
  flex-direction: column;
  background: var(--sc-input-bg, #f9fafb);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  min-height: 380px;
}

/* Placeholder state */
.ccpayoff-result__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: var(--sc-card-padding);
  color: var(--sc-muted-text, #6b7280);
}

.ccpayoff-result__placeholder .placeholder-icon {
  font-size: 52px;
  opacity: 0.4;
  margin-bottom: 12px;
}

.ccpayoff-result__placeholder .placeholder-text {
  font-size: 14px;
  opacity: 0.7;
  max-width: 200px;
}

/* Results content container */
.ccpayoff-result__content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Error state */
.ccpayoff-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: var(--sc-card-padding);
  color: #dc2626;
}

.ccpayoff-error .error-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.ccpayoff-error .error-text {
  font-size: 14px;
  line-height: 1.5;
  max-width: 260px;
}

/* ---- Hero: two-column layout ---- */
.ccpayoff-hero {
  display: flex;
  gap: 1px;
  background: var(--sc-card-border, #e5e7eb);
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.ccpayoff-hero__breakdown,
.ccpayoff-hero__timeline {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  background: var(--sc-card-bg, #ffffff);
}

.ccpayoff-hero__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 12px;
  text-align: center;
}

/* ---- SVG Donut ---- */
.ccpayoff-donut {
  width: 130px;
  height: 130px;
  margin: 0 auto;
}

.ccpayoff-donut__svg {
  width: 100%;
  height: 100%;
}

.ccpayoff-donut__track {
  stroke: var(--sc-card-border, #e5e7eb);
}

.ccpayoff-donut__segment {
  transition: stroke-dasharray 0.5s ease-out, stroke-dashoffset 0.5s ease-out;
}

.ccpayoff-donut__segment--principal {
  stroke: #3b82f6;
}

.ccpayoff-donut__segment--interest {
  stroke: #ef4444;
}

.ccpayoff-donut__label {
  font-size: 10px;
  fill: var(--sc-muted-text, #6b7280);
  font-weight: 600;
}

.ccpayoff-donut__value {
  font-size: 12px;
  font-weight: 800;
  fill: var(--sc-text, #1f2937);
}

/* Donut legend */
.ccpayoff-donut__legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ccpayoff-donut__legend .legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}

.ccpayoff-donut__legend .legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ccpayoff-donut__legend .legend-item--principal .legend-color {
  background: #3b82f6;
}

.ccpayoff-donut__legend .legend-item--interest .legend-color {
  background: #ef4444;
}

.ccpayoff-donut__legend .legend-label {
  color: var(--sc-muted-text, #6b7280);
  font-weight: 600;
}

.ccpayoff-donut__legend .legend-amount {
  font-weight: 700;
  color: var(--sc-text, #1f2937);
  white-space: nowrap;
}

/* ---- Timeline column ---- */
.ccpayoff-hero__timeline {
  justify-content: center;
  text-align: center;
}

.ccpayoff-months {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--sc-text, #1f2937);
  font-variant-numeric: tabular-nums;
}

.ccpayoff-date {
  font-size: 13px;
  color: var(--sc-muted-text, #6b7280);
  margin-top: 6px;
}

.ccpayoff-date strong {
  color: var(--sc-text, #1f2937);
  font-weight: 700;
}

/* Long payoff warning */
.ccpayoff-warning {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #92400e;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

/* ---- Summary Stats ---- */
.ccpayoff-summary {
  display: flex;
  gap: 10px;
  margin: 14px 16px;
}

.ccpayoff-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 10px;
  border-radius: 10px;
  background: var(--sc-card-bg, #ffffff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
}

.ccpayoff-stat .stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 4px;
}

.ccpayoff-stat .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--sc-text, #1f2937);
  white-space: nowrap;
}

/* ---- Payment Schedule ---- */
.ccpayoff-schedule {
  margin: 0 16px 18px;
}

.ccpayoff-schedule-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  margin: 0;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 8px;
  background: var(--sc-card-bg, #ffffff);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--sc-text, #1f2937);
}

.ccpayoff-schedule-header:hover {
  background: var(--sc-input-bg, #f9fafb);
}

.ccpayoff-schedule-chevron {
  flex-shrink: 0;
  color: var(--sc-muted-text, #6b7280);
  transition: transform 0.2s ease;
}

.ccpayoff-schedule-header[aria-expanded="true"] .ccpayoff-schedule-chevron {
  transform: rotate(180deg);
}

.ccpayoff-schedule-label {
  font-size: 12px;
  font-weight: 700;
}

.ccpayoff-schedule-body {
  margin-top: 8px;
}

.ccpayoff-schedule-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ccpayoff-schedule-per-page {
  font-size: 11px;
  font-weight: 600;
  color: var(--sc-muted-text, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ccpayoff-schedule-pagination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ccpayoff-schedule-page-info {
  font-size: 12px;
  font-weight: 600;
  color: var(--sc-text, #1f2937);
  min-width: 82px;
  text-align: center;
}

.ccpayoff-schedule-page-btn {
  border: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-card-bg, #ffffff);
  color: var(--sc-text, #1f2937);
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

.ccpayoff-schedule-page-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ccpayoff-schedule-table {
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 8px;
  overflow: auto;
  background: var(--sc-card-bg, #ffffff);
}

.ccpayoff-schedule-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.ccpayoff-schedule-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  color: var(--sc-muted-text, #6b7280);
  background: var(--sc-input-bg, #f9fafb);
}

.ccpayoff-schedule-table td {
  padding: 8px 10px;
  border-top: 1px solid var(--sc-card-border, #e5e7eb);
  font-variant-numeric: tabular-nums;
}

.ccpayoff-schedule-table td:first-child,
.ccpayoff-schedule-table th:first-child {
  text-align: left;
}

.ccpayoff-schedule-table td:not(:first-child),
.ccpayoff-schedule-table th:not(:first-child) {
  text-align: right;
}

/* ---- Dark Theme ---- */
.vareoncalc-root[data-theme="dark"] .strategy-btn,
.vareoncalc-root.theme-dark .strategy-btn {
  border-color: var(--sc-card-border, #374151);
  color: var(--sc-muted-text, #9ca3af);
}

.vareoncalc-root[data-theme="dark"] .strategy-btn:hover,
.vareoncalc-root.theme-dark .strategy-btn:hover {
  background: var(--sc-input-bg, #374151);
  border-color: var(--sc-text, #e5e7eb);
  color: var(--sc-text, #e5e7eb);
}

.vareoncalc-root[data-theme="dark"] .strategy-btn--active,
.vareoncalc-root.theme-dark .strategy-btn--active {
  background: rgba(59, 130, 246, 0.2);
  border-color: var(--sc-accent, #60a5fa);
  color: var(--sc-accent, #60a5fa);
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-ccpayoff-result,
.vareoncalc-root.theme-dark .vareoncalc-ccpayoff-result {
  background: var(--sc-input-bg, #1f2937);
}

.vareoncalc-root[data-theme="dark"] .ccpayoff-hero__breakdown,
.vareoncalc-root[data-theme="dark"] .ccpayoff-hero__timeline,
.vareoncalc-root.theme-dark .ccpayoff-hero__breakdown,
.vareoncalc-root.theme-dark .ccpayoff-hero__timeline {
  background: var(--sc-card-bg, #111827);
}

.vareoncalc-root[data-theme="dark"] .ccpayoff-hero,
.vareoncalc-root.theme-dark .ccpayoff-hero {
  background: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .ccpayoff-donut__track,
.vareoncalc-root.theme-dark .ccpayoff-donut__track {
  stroke: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .ccpayoff-donut__value,
.vareoncalc-root.theme-dark .ccpayoff-donut__value {
  fill: var(--sc-text, #e5e7eb);
}

.vareoncalc-root[data-theme="dark"] .ccpayoff-warning,
.vareoncalc-root.theme-dark .ccpayoff-warning {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.vareoncalc-root[data-theme="dark"] .ccpayoff-schedule-header,
.vareoncalc-root.theme-dark .ccpayoff-schedule-header {
  background: var(--sc-card-bg, #111827);
  border-color: var(--sc-card-border, #374151);
  color: var(--sc-text, #e5e7eb);
}

.vareoncalc-root[data-theme="dark"] .ccpayoff-schedule-header:hover,
.vareoncalc-root.theme-dark .ccpayoff-schedule-header:hover {
  background: var(--sc-input-bg, #1f2937);
}

.vareoncalc-root[data-theme="dark"] .ccpayoff-schedule-page-btn,
.vareoncalc-root.theme-dark .ccpayoff-schedule-page-btn {
  background: var(--sc-card-bg, #111827);
  border-color: var(--sc-card-border, #374151);
  color: var(--sc-text, #e5e7eb);
}

.vareoncalc-root[data-theme="dark"] .ccpayoff-schedule-table,
.vareoncalc-root.theme-dark .ccpayoff-schedule-table {
  background: var(--sc-card-bg, #111827);
  border-color: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .ccpayoff-schedule-table th,
.vareoncalc-root.theme-dark .ccpayoff-schedule-table th {
  background: var(--sc-input-bg, #1f2937);
}

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .vareoncalc-ccpayoff-result {
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .ccpayoff-hero {
    flex-direction: column;
  }

  .ccpayoff-months {
    font-size: 26px;
  }

  .ccpayoff-stat .stat-value {
    font-size: 17px;
  }

  .ccpayoff-summary {
    gap: 8px;
  }
}

@media (max-width: 410px) {
  .ccpayoff-strategy-switch {
    flex-direction: column;
  }

  .strategy-btn {
    width: 100%;
  }

  .ccpayoff-summary {
    margin: 12px var(--sc-card-padding);
  }

  .ccpayoff-schedule {
    margin-left: var(--sc-card-padding);
    margin-right: var(--sc-card-padding);
  }

  .ccpayoff-stat .stat-value {
    font-size: 15px;
  }

  .ccpayoff-stat .stat-label {
    font-size: 10px;
  }

  .ccpayoff-donut {
    width: 110px;
    height: 110px;
  }
}

@media (max-width: 360px) {
  .ccpayoff-months {
    font-size: 22px;
  }

  .ccpayoff-stat .stat-value {
    font-size: 14px;
  }

  .ccpayoff-summary {
    flex-direction: column;
  }
}

@container vareoncalc (max-width: 720px) {
  .vareoncalc-ccpayoff-result {
    min-height: auto;
  }
}

@container vareoncalc (max-width: 480px) {
  .ccpayoff-hero {
    flex-direction: column;
  }

  .ccpayoff-months {
    font-size: 26px;
  }

  .ccpayoff-stat .stat-value {
    font-size: 17px;
  }

  .ccpayoff-summary {
    gap: 8px;
  }
}

@container vareoncalc (max-width: 410px) {
  .ccpayoff-strategy-switch {
    flex-direction: column;
  }

  .strategy-btn {
    width: 100%;
  }

  .ccpayoff-summary {
    margin: 12px var(--sc-card-padding);
  }

  .ccpayoff-schedule {
    margin-left: var(--sc-card-padding);
    margin-right: var(--sc-card-padding);
  }

  .ccpayoff-stat .stat-value {
    font-size: 15px;
  }

  .ccpayoff-stat .stat-label {
    font-size: 10px;
  }

  .ccpayoff-donut {
    width: 110px;
    height: 110px;
  }
}

@container vareoncalc (max-width: 360px) {
  .ccpayoff-months {
    font-size: 22px;
  }

  .ccpayoff-stat .stat-value {
    font-size: 14px;
  }

  .ccpayoff-summary {
    flex-direction: column;
  }
}

/* Source: assets/calculators/discount.css */
/* Calculator styles: discount */

/* Layout: discount form sections */
.discount-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.discount-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.discount-grid--price {
  grid-template-columns: minmax(0, 1fr);
}

.discount-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.discount-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

.discount-field--toggle .vareoncalc-toggle {
  width: 100%;
  min-width: 0;
}

.discount-mode-toggle__control {
  min-width: 108px;
}

.discount-price-field {
  width: 100%;
}

.discount-price-field__label-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.discount-price-field__label-row label {
  margin: 0;
}

.discount-price-field__label-row .discount-mode-toggle {
  justify-self: end;
}

.discount-price-field .discount-price-input {
  width: 100%;
}

.discount-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.discount-grid--advanced .discount-field--wide {
  grid-column: 1 / -1;
}

.discount-static {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--sc-input-border, #d1d5db);
  border-radius: 10px;
  background: var(--sc-input-bg, #f9fafb);
  color: var(--sc-card-text, #111827);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .discount-grid {
    grid-template-columns: 1fr;
  }

  .discount-price-field {
    max-width: none;
  }

}

/* Receipt headline: Final Price (the big number) */
.vareoncalc-receipt-headline {
  padding: var(--sc-card-padding);
  text-align: center;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.vareoncalc-receipt-headline--discount {
  border-top: 2px dashed var(--sc-card-border, #e5e7eb);
}

.vareoncalc-receipt-headline .receipt-price {
  font-size: 36px;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
  line-height: 1.2;
}

.vareoncalc-receipt-headline .receipt-label {
  font-size: 13px;
  color: var(--sc-muted-text, #6b7280);
  margin-top: 4px;
}

/* Receipt breakdown card: the math */
.vareoncalc-receipt-breakdown {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--sc-card-padding);
  font-size: 14px;
  line-height: 1.8;
  flex: 1;
}

.vareoncalc-receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
}

.vareoncalc-receipt-row .receipt-label {
  color: var(--sc-muted-text, #6b7280);
  min-width: 0;
}

.vareoncalc-receipt-row .receipt-value {
  font-weight: 600;
  color: var(--sc-card-text, #111827);
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Discount amount: RED for deductions */
.vareoncalc-receipt-row .receipt-value--discount {
  color: #dc2626;
  font-weight: 600;
}

.receipt-sign {
  margin-right: 0.1em;
}

/* Group dividers: visual separation between per-item and cart math */
.vareoncalc-receipt-group + .vareoncalc-receipt-group {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--sc-card-border, #e5e7eb);
}

/* Final price row: amber highlight */
.vareoncalc-receipt-row--final .receipt-label,
.vareoncalc-receipt-row--final .receipt-value {
  color: #b45309;
  font-weight: 700;
}

/* Savings box: GREEN "emotional payoff" */
.vareoncalc-receipt-savings {
  background: #ecfdf5;
  border-top: 1px solid #a7f3d0;
  padding: var(--sc-card-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.vareoncalc-receipt-savings .savings-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #059669;
}

.vareoncalc-receipt-savings .savings-text {
  font-size: 16px;
  font-weight: 700;
  color: #059669;
  line-height: 1.3;
}

/* Dark theme adjustments */
.vareoncalc-root[data-theme="dark"] .vareoncalc-receipt-row--final .receipt-label,
.vareoncalc-root[data-theme="dark"] .vareoncalc-receipt-row--final .receipt-value,
.vareoncalc-root.theme-dark .vareoncalc-receipt-row--final .receipt-label,
.vareoncalc-root.theme-dark .vareoncalc-receipt-row--final .receipt-value {
  color: #fbbf24;
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-receipt-savings,
.vareoncalc-root.theme-dark .vareoncalc-receipt-savings {
  background: rgba(16, 185, 129, 0.15);
  border-top-color: rgba(16, 185, 129, 0.3);
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-receipt-savings .savings-icon,
.vareoncalc-root.theme-dark .vareoncalc-receipt-savings .savings-icon {
  color: #34d399;
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-receipt-savings .savings-text,
.vareoncalc-root.theme-dark .vareoncalc-receipt-savings .savings-text {
  color: #34d399;
}

@media (max-width: 410px) {
  .discount-form,
  .discount-grid {
    gap: 8px;
  }

  .discount-price-field__label-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .discount-price-field__label-row .discount-mode-toggle {
    justify-self: start;
  }

  .discount-advanced-toggle {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 360px) {
  .discount-mode-toggle__control {
    width: 100%;
    min-width: 0;
  }

  .discount-static {
    padding: 8px 10px;
    font-size: 12px;
  }
}

@container vareoncalc (max-width: 410px) {
  .discount-form,
  .discount-grid {
    gap: 8px;
  }

  .discount-price-field__label-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .discount-price-field__label-row .discount-mode-toggle {
    justify-self: start;
  }

  .discount-advanced-toggle {
    flex-direction: column;
    align-items: stretch;
  }
}

@container vareoncalc (max-width: 360px) {
  .discount-mode-toggle__control {
    width: 100%;
    min-width: 0;
  }

  .discount-static {
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* Source: assets/calculators/fuel-cost.css */
/* Calculator styles: fuel-cost */

/* ========================================
   FUEL COST CALCULATOR - TRIP BUDGET PLANNER
   ======================================== */

/* Main Layout Container */
.fuel-budget-planner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.fuel-budget-planner--compact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Panel Styling */
.fuel-panel {
  background: var(--sc-card-bg, #fff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  padding: var(--sc-card-padding);
}

/* Let Fuel Cost UI follow the parent block width. */
.vareoncalc-content[data-vareoncalc-type="fuel-cost"] {
  width: 100%;
  max-width: 100%;
}

.fuel-panel--input {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Two-step layout: avoid nested input card styling */
.vareoncalc-two-step .fuel-panel--input {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Card already applies --sc-card-padding; panels sit inside .vareoncalc-content like other two-step calcs */
.vareoncalc-two-step .fuel-panel--input,
.vareoncalc-two-step .fuel-panel--result {
  padding: 0;
}

.fuel-panel--result {
  background: transparent;
  border: none;
}

.fuel-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.fuel-panel__icon {
  color: var(--sc-accent, #3b82f6);
  flex-shrink: 0;
}

.fuel-panel__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

/* Unit Toggle (shared measurement segmented control) */
.fuel-unit-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: fit-content;
  max-width: 100%;
  margin-left: 0;
  margin-bottom: 0;
}

.fuel-unit-toggle .vareoncalc-measurement-toggle {
  width: fit-content;
  max-width: 100%;
}

/* Fallback for cached/legacy toggle markup that only has id + measurement buttons. */
.fuel-unit-toggle [id^="fuel-unit-toggle-"]:not(.vareoncalc-toggle) {
  display: inline-grid;
  grid-template-columns: max-content max-content;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  background: var(--sc-input-bg, #f3f4f6);
  border: 1px solid var(--sc-input-border, #d1d5db);
  border-radius: 10px;
  padding: 3px;
}

.fuel-unit-toggle [id^="fuel-unit-toggle-"]:not(.vareoncalc-toggle) .vareoncalc-measurement-toggle__btn {
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sc-muted-text, #6b7280);
  font-size: 12px;
  font-weight: 600;
  min-height: 28px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}

.fuel-unit-toggle [id^="fuel-unit-toggle-"]:not(.vareoncalc-toggle) .vareoncalc-measurement-toggle__btn:hover:not(.is-active):not([aria-pressed="true"]) {
  background: rgba(59, 130, 246, 0.08);
}

.fuel-unit-toggle [id^="fuel-unit-toggle-"]:not(.vareoncalc-toggle) .vareoncalc-measurement-toggle__btn.is-active,
.fuel-unit-toggle [id^="fuel-unit-toggle-"]:not(.vareoncalc-toggle) .vareoncalc-measurement-toggle__btn[aria-pressed="true"],
.fuel-unit-toggle [id^="fuel-unit-toggle-"]:not(.vareoncalc-toggle) .vareoncalc-measurement-toggle__btn--active {
  background: var(--sc-accent, #3b82f6);
  color: var(--sc-accent-text, var(--sc-button-text, #fff));
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
}

/* Iconic Toggle - compact switch for binary choices (km/mi, →/⇌) */
.fuel-icon-toggle {
  width: fit-content;
}

/* Strip shared toggle chrome (base .vareoncalc-toggle + .vareoncalc-measurement-toggle) — no outer gray box */
.fuel-icon-toggle.vareoncalc-toggle,
.fuel-icon-toggle.vareoncalc-measurement-toggle {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}

.fuel-icon-toggle.vareoncalc-toggle:hover,
.fuel-icon-toggle.vareoncalc-toggle:focus-within,
.fuel-icon-toggle.vareoncalc-measurement-toggle:hover,
.fuel-icon-toggle.vareoncalc-measurement-toggle:focus-within {
  border: none;
  box-shadow: none;
}

.fuel-icon-toggle .vareoncalc-toggle__track {
  display: inline-flex;
  align-items: stretch;
  width: auto;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.fuel-icon-toggle .vareoncalc-toggle__option {
  flex: 0 0 auto;
}

.fuel-icon-toggle__btn.vareoncalc-measurement-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--sc-muted-text, #6b7280);
  font-size: 11px;
  font-weight: 700;
  min-height: 26px;
  min-width: 30px;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1;
}

.fuel-icon-toggle__btn.vareoncalc-measurement-toggle__btn.is-active,
.fuel-icon-toggle__btn.vareoncalc-measurement-toggle__btn[aria-pressed="true"],
.fuel-icon-toggle__btn.vareoncalc-measurement-toggle__btn.vareoncalc-measurement-toggle__btn--active {
  background: var(--sc-accent, #3b82f6);
  color: var(--sc-accent-text, var(--sc-button-text, #fff));
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.18);
}

.fuel-icon-toggle__btn.vareoncalc-measurement-toggle__btn:hover:not(.is-active):not([aria-pressed="true"]):not(.vareoncalc-measurement-toggle__btn--active) {
  background: rgba(59, 130, 246, 0.08);
}

.fuel-icon-toggle__btn.vareoncalc-measurement-toggle__btn:focus-visible {
  outline: 2px solid var(--sc-accent, #3b82f6);
  outline-offset: 1px;
}

.fuel-icon-toggle__btn svg {
  display: block;
  flex-shrink: 0;
}

/* Trip block: chrome comes from .vareoncalc-section (same element in markup) */
.fuel-trip-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.fuel-trip-section__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.vareoncalc-content[data-vareoncalc-type="fuel-cost"] .fuel-trip-section__controls {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.vareoncalc-content[data-vareoncalc-type="fuel-cost"] .fuel-trip-section__controls > * {
  flex: 0 1 auto;
  min-width: 0;
}

.vareoncalc-content[data-vareoncalc-type="fuel-cost"] .fuel-trip-section__controls > .fuel-unit-toggle {
  margin-right: auto;
}

.vareoncalc-content[data-vareoncalc-type="fuel-cost"] .fuel-trip-section__controls > .fuel-trip-mode-toggle {
  margin-left: auto;
  flex-shrink: 0;
}

.fuel-trip-section__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-muted-text, #6b7280);
}

.fuel-distance-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
}

.fuel-distance-row .fuel-distance-field {
  flex: 1 1 100%;
  min-width: 0;
  margin-bottom: 0;
}

/* Economics block: chrome comes from .vareoncalc-section */

/* Keep long metric suffix (L/100km) fully visible on compact inputs. */
.fuel-economics-section .fuel-consumption-rail.vareoncalc-input-adorned.vareoncalc-input-adorned--suffix-rail {
  --sc-suffix-rail-min-width: 46px;
  --sc-suffix-rail-max-width: 82px;
  --sc-suffix-rail-fluid-width: 56%;
  --sc-suffix-rail-padding-inline: clamp(4px, 1.2vw, 8px);
}

.fuel-economics-section .fuel-consumption-rail.fuel-consumption-rail--metric {
  --sc-suffix-visible-width: 52px;
}

.fuel-economics-section .fuel-consumption-rail.fuel-consumption-rail--imperial {
  --sc-suffix-visible-width: 24px;
  --sc-suffix-rail-min-width: 28px;
  --sc-suffix-rail-max-width: 48px;
  --sc-suffix-rail-fluid-width: 36%;
}

@media (max-width: 480px) {
  .fuel-economics-section .fuel-consumption-rail.vareoncalc-input-adorned.vareoncalc-input-adorned--suffix-rail {
    --sc-suffix-rail-min-width: 42px;
    --sc-suffix-rail-max-width: 72px;
    --sc-suffix-rail-fluid-width: 60%;
  }
}

.fuel-economics-section .fuel-consumption-rail.vareoncalc-input-adorned.vareoncalc-input-adorned--suffix-rail .vareoncalc-input-suffix {
  font-size: clamp(9px, 0.68rem, 10px);
  letter-spacing: 0.01em;
}

@media (max-width: 480px) {
  .fuel-economics-section .fuel-consumption-rail.vareoncalc-input-adorned.vareoncalc-input-adorned--suffix-rail .vareoncalc-input-suffix {
    font-size: 9px;
  }
}

.fuel-economics-section__header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 12px;
}

/* Result Panel Content */
.fuel-result-content {
  min-height: 280px;
}

/* Result Placeholder */
.fuel-result-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--sc-card-padding);
  text-align: center;
  min-height: 280px;
}

.fuel-result-placeholder__icon {
  color: var(--sc-muted-text, #9ca3af);
  opacity: 0.5;
}

.fuel-result-placeholder__text {
  font-size: 14px;
  color: var(--sc-muted-text, #6b7280);
  margin: 0;
  max-width: 200px;
  line-height: 1.5;
}

/* Detailed Results Container */
.fuel-detailed-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fuel-detailed-results__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Base Detail Card — flat panels (match main .fuel-panel; no floating shadow stack) */
.fuel-detail-card {
  background: var(--sc-card-bg, #fff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  padding: var(--sc-card-padding);
  box-shadow: none;
}

/* Hero Card */
.fuel-detail-card--hero {
  text-align: center;
  padding: var(--sc-card-padding);
  background: var(--sc-card-bg, #fff);
}

.fuel-detail-card__cost-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--sc-card-text, #1e2a4a);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.fuel-detail-card__cost-amount {
  font-size: 3rem;
  font-weight: 800;
  color: var(--sc-card-text, #1e2a4a);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: center;
}

/* Native tooltip precision hint for large rounded amounts */
.fuel-currency-hover,
.fuel-volume-hover {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

.fuel-detail-card--hero > .fuel-currency-hover,
.fuel-detail-card--hero > .fuel-volume-hover,
.fuel-detail-card__cost-amount .fuel-currency-hover {
  text-decoration: none;
  cursor: default;
}

.fuel-currency-hover__exact {
  display: none;
}

.fuel-detail-card__perperson-amount .fuel-currency-hover {
  display: inline-grid;
  justify-items: center;
  min-width: min(100%, 8ch);
}

.fuel-comparison__column-value .fuel-currency-hover {
  display: inline-block;
}

.fuel-comparison__column-value .fuel-currency-hover__exact {
  display: none;
}

/* Fuel-required strip: uses card background + subtle border (matches per-person card) */

/* Modern (“light with black accents”): keep the navy fuel rail */


/* Hero: fuel + optional round-trip in one framed block */
.fuel-detail-card__metrics {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border: none;
  border-radius: 12px;
  background: var(--sc-card-bg, #fff);
  overflow: hidden;
  text-align: left;
}

.fuel-detail-card__fuel-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--sc-card-padding);
}

.fuel-detail-card--hero .fuel-detail-card__fuel-stat {
  justify-content: center;
}

.fuel-detail-card--hero .fuel-detail-card__fuel-stat-body {
  align-items: center;
  text-align: center;
}

.fuel-detail-card__fuel-stat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sc-accent, #3b82f6) 14%, transparent);
  border: none;
  color: var(--sc-accent, #3b82f6);
}

.fuel-detail-card__fuel-stat-icon svg {
  display: block;
}

.fuel-detail-card__fuel-stat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.fuel-detail-card__fuel-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sc-muted-text, #6b7280);
  text-transform: uppercase;
}

.fuel-detail-card__fuel-stat-value {
  font-size: 19px;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fuel-detail-card__trip-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px var(--sc-card-padding) 10px;
  border-top: 1px solid var(--sc-card-border, #e5e7eb);
  background: transparent;
  color: var(--sc-muted-text, #6b7280);
  font-size: 12px;
  font-weight: 600;
}

.fuel-detail-card__trip-mode-icon {
  flex-shrink: 0;
  color: var(--sc-muted-text, #6b7280);
  opacity: 1;
}

.fuel-detail-card__metrics .fuel-currency-hover,
.fuel-detail-card__metrics .fuel-volume-hover {
  text-decoration-color: color-mix(in srgb, var(--sc-card-text, #111827) 40%, transparent);
}

.fuel-detail-card__trip-mode-text {
  letter-spacing: 0.01em;
}

/* Section Title (shared) */
.fuel-detail-card__section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-card-text, #1e2a4a);
  margin-bottom: 16px;
}

/* Trip Breakdown — always one row of three columns */
.fuel-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.fuel-breakdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.fuel-breakdown-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sc-accent, #3b82f6) 14%, transparent);
  color: var(--sc-accent, #3b82f6);
}

.fuel-breakdown-item__icon svg {
  display: block;
}

.fuel-breakdown-item__label {
  font-size: 11px;
  color: var(--sc-muted-text, #6b7280);
  line-height: 1.3;
}

.fuel-breakdown-item__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--sc-card-text, #1e2a4a);
}

/* Cost Splitting Card */
.fuel-detail-card--splitting {
  padding: var(--sc-card-padding);
  min-width: 0;
}

.fuel-detail-slider {
  --fuel-slider-percent: 0%;
  --fuel-slider-track-color: var(--sc-input-border, #d1d5db);
  --fuel-slider-active-color: var(--sc-accent, #3b82f6);
  width: calc(100% - 22px);
  max-width: calc(100% - 22px);
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  padding: 0;
  outline: none;
  cursor: pointer;
  margin-inline: 11px;
  margin-bottom: 10px;
  min-width: 0;
  display: block;
  box-sizing: border-box;
}

.fuel-detail-slider::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--fuel-slider-active-color) 0,
    var(--fuel-slider-active-color) var(--fuel-slider-percent),
    var(--fuel-slider-track-color) var(--fuel-slider-percent),
    var(--fuel-slider-track-color) 100%
  );
  border-radius: 999px;
}

.fuel-detail-slider::-moz-range-track {
  height: 8px;
  background: var(--fuel-slider-track-color);
  border-radius: 999px;
}

.fuel-detail-slider::-moz-range-progress {
  height: 8px;
  background: var(--fuel-slider-active-color);
  border-radius: 999px;
}

.fuel-detail-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--sc-card-bg, #fff);
  border: 3px solid var(--sc-accent, #3b82f6);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  cursor: pointer;
}

.fuel-detail-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--sc-card-bg, #fff);
  border: 3px solid var(--sc-accent, #3b82f6);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  cursor: pointer;
}

.fuel-detail-slider:focus-visible {
  outline: 2px solid var(--sc-accent, #3b82f6);
  outline-offset: 2px;
}

.fuel-detail-slider__label {
  font-size: 13px;
  color: var(--sc-muted-text, #6b7280);
  text-align: center;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fuel-detail-slider__label strong {
  color: var(--sc-card-text, #1e2a4a);
  font-weight: 700;
}

/* Bottom Row: Per Person + Comparison */
.fuel-detail-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Cost Per Person Card */
.fuel-detail-card--perperson {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding-block: 24px;
  background: var(--sc-card-bg, #fff);
}

.fuel-detail-card--perperson .fuel-detail-card__section-title {
  text-align: center;
}

.fuel-detail-card__perperson-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
}

.fuel-detail-card__perperson-amount {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--sc-card-text, #1e2a4a);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: center;
  max-width: 100%;
}

.fuel-detail-card__perperson-amount .fuel-currency-hover {
  text-decoration: none;
  cursor: default;
}

/* Trip Comparison Card — Vertical Bars */
.fuel-detail-card--comparison {
  display: flex;
  flex-direction: column;
}

.fuel-detail-card--comparison .fuel-detail-card__section-title {
  text-align: center;
}

.fuel-comparison__columns {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: flex-end;
  flex: 1;
  padding-top: 4px;
}

.fuel-comparison__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 80px;
}

.fuel-comparison__column-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--sc-card-text, #1e2a4a);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fuel-comparison__column-bar-wrap {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: flex-end;
}

.fuel-comparison__column-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height 0.4s ease;
}

.fuel-comparison__column-bar--oneway {
  background: var(--sc-accent, #3b82f6);
}

.fuel-comparison__column-bar--roundtrip {
  background: #1e2a4a;
}

.fuel-comparison__column-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--sc-muted-text, #6b7280);
  white-space: nowrap;
}

/* Annual Commute Insight */
.fuel-annual-insight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--sc-card-padding);
  background: var(--sc-card-bg, #fff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: none;
}

.fuel-annual-insight__icon {
  color: var(--sc-accent, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fuel-annual-insight__text {
  font-size: 14px;
  color: var(--sc-card-text, #374151);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fuel-annual-insight__amount {
  font-weight: 700;
  color: var(--sc-accent, #3b82f6);
}

/* Responsive Design */
@media (max-width: 768px) {
  .fuel-budget-planner {
    grid-template-columns: 1fr;
  }

  .fuel-panel {
    padding: var(--sc-card-padding);
  }

  .fuel-panel--input {
    gap: 12px;
  }

  .fuel-trip-section__controls {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .fuel-detail-bottom-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 410px) {
  .fuel-panel {
    padding: var(--sc-card-padding);
  }

  .fuel-trip-section__controls {
    gap: 4px;
  }

  .fuel-detail-card {
    padding: var(--sc-card-padding);
  }

  .fuel-breakdown-grid {
    gap: 8px;
  }

  .fuel-breakdown-item__label {
    font-size: 10px;
  }

  .fuel-breakdown-item__value {
    font-size: clamp(11px, 2.6vw, 14px);
    word-break: break-word;
  }

  .fuel-detail-bottom-row {
    grid-template-columns: 1fr;
  }
}

/* Dark Theme Support */
.vareoncalc-root[data-theme="dark"] .fuel-panel,
.vareoncalc-root.theme-dark .fuel-panel {
  background: var(--sc-card-bg, #1f2937);
  border-color: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .fuel-panel--result,
.vareoncalc-root.theme-dark .fuel-panel--result {
  background: transparent;
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-two-step .fuel-panel--input,
.vareoncalc-root.theme-dark .vareoncalc-two-step .fuel-panel--input {
  background: transparent;
  border-color: transparent;
}

.vareoncalc-root[data-theme="dark"] .fuel-panel__header,
.vareoncalc-root.theme-dark .fuel-panel__header {
  border-color: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .fuel-unit-toggle [id^="fuel-unit-toggle-"]:not(.vareoncalc-toggle),
.vareoncalc-root.theme-dark .fuel-unit-toggle [id^="fuel-unit-toggle-"]:not(.vareoncalc-toggle) {
  background: var(--sc-input-bg, #111827);
  border-color: var(--sc-input-border, #4b5563);
}

.vareoncalc-root[data-theme="dark"] .fuel-icon-toggle.vareoncalc-toggle,
.vareoncalc-root.theme-dark .fuel-icon-toggle.vareoncalc-toggle,
.vareoncalc-root[data-theme="dark"] .fuel-icon-toggle.vareoncalc-measurement-toggle,
.vareoncalc-root.theme-dark .fuel-icon-toggle.vareoncalc-measurement-toggle {
  background: transparent;
  border: none;
  box-shadow: none;
}

.vareoncalc-root[data-theme="dark"] .fuel-icon-toggle .vareoncalc-toggle__track,
.vareoncalc-root.theme-dark .fuel-icon-toggle .vareoncalc-toggle__track {
  background: transparent;
  border: none;
}

.vareoncalc-root[data-theme="dark"] .fuel-detail-card,
.vareoncalc-root.theme-dark .fuel-detail-card {
  background: var(--sc-card-bg, #1f2937);
  border-color: var(--sc-card-border, #374151);
  box-shadow: none;
}

.vareoncalc-root[data-theme="dark"] .fuel-detail-card__cost-label,
.vareoncalc-root.theme-dark .fuel-detail-card__cost-label,
.vareoncalc-root[data-theme="dark"] .fuel-detail-card__cost-amount,
.vareoncalc-root.theme-dark .fuel-detail-card__cost-amount {
  color: var(--sc-card-text, #e5e7eb);
}

.vareoncalc-root[data-theme="dark"] .fuel-detail-card__section-title,
.vareoncalc-root.theme-dark .fuel-detail-card__section-title {
  color: var(--sc-card-text, #e5e7eb);
}


.vareoncalc-root[data-theme="dark"] .fuel-breakdown-item__value,
.vareoncalc-root.theme-dark .fuel-breakdown-item__value {
  color: var(--sc-card-text, #e5e7eb);
}

.vareoncalc-root[data-theme="dark"] .fuel-detail-slider,
.vareoncalc-root.theme-dark .fuel-detail-slider {
  --fuel-slider-track-color: var(--sc-card-border, #4b5563);
}

.vareoncalc-root[data-theme="dark"] .fuel-detail-slider::-webkit-slider-thumb,
.vareoncalc-root.theme-dark .fuel-detail-slider::-webkit-slider-thumb,
.vareoncalc-root[data-theme="dark"] .fuel-detail-slider::-moz-range-thumb,
.vareoncalc-root.theme-dark .fuel-detail-slider::-moz-range-thumb {
  background: var(--sc-card-bg, #1f2937);
  border-color: var(--sc-accent, #60a5fa);
}

.vareoncalc-root[data-theme="dark"] .fuel-detail-slider__label strong,
.vareoncalc-root.theme-dark .fuel-detail-slider__label strong {
  color: var(--sc-card-text, #e5e7eb);
}

.vareoncalc-root[data-theme="dark"] .fuel-detail-card__perperson-amount,
.vareoncalc-root.theme-dark .fuel-detail-card__perperson-amount {
  color: var(--sc-card-text, #e5e7eb);
}


.vareoncalc-root[data-theme="dark"] .fuel-comparison__column-value,
.vareoncalc-root.theme-dark .fuel-comparison__column-value {
  color: var(--sc-card-text, #e5e7eb);
}

.vareoncalc-root[data-theme="dark"] .fuel-comparison__column-bar--roundtrip,
.vareoncalc-root.theme-dark .fuel-comparison__column-bar--roundtrip {
  background: #4b5563;
}

.vareoncalc-root[data-theme="dark"] .fuel-annual-insight,
.vareoncalc-root.theme-dark .fuel-annual-insight {
  background: var(--sc-card-bg, #1f2937);
  border-color: var(--sc-card-border, #374151);
  box-shadow: none;
}

@container vareoncalc (max-width: 410px) {
  .fuel-panel {
    padding: var(--sc-card-padding);
  }

  .fuel-trip-section__controls {
    gap: 4px;
  }

  .fuel-detail-card {
    padding: var(--sc-card-padding);
  }

  .fuel-breakdown-grid {
    gap: 8px;
  }

  .fuel-breakdown-item__label {
    font-size: 10px;
  }

  .fuel-breakdown-item__value {
    font-size: 11px;
    font-size: clamp(11px, 2.6cqw, 14px);
    word-break: break-word;
  }

  .fuel-comparison__column-bar-wrap {
    height: 56px;
  }
}

@container vareoncalc (max-width: 360px) {
  .fuel-detail-bottom-row {
    grid-template-columns: 1fr;
  }
}

/* Source: assets/calculators/gpa.css */
/* Calculator styles: gpa */

.gpa-two-step {
  width: 100%;
}

.gpa-semester-entry {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gpa-semester-entry__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gpa-semester-entry__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gpa-semester-entry__title {
  display: none;
}

.gpa-scale-inline {
  justify-self: start;
  margin: 0;
}

.gpa-scale-inline-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-width: 0;
}

.gpa-scale-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-muted-text, #6b7280);
  white-space: nowrap;
}

.gpa-scale-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 8px;
  background: var(--sc-card-bg, #fff);
  color: var(--sc-muted-text, #6b7280);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.gpa-scale-settings-btn:hover {
  border-color: var(--sc-accent, #2563eb);
  color: var(--sc-accent, #2563eb);
  background: var(--sc-input-bg, #f8fafc);
}

.gpa-scale-settings-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sc-accent, #2563eb) 45%, transparent);
  outline-offset: 2px;
}

.gpa-scale-settings-btn.is-active {
  border-color: color-mix(in srgb, var(--sc-accent, #2563eb) 38%, var(--sc-card-border, #e5e7eb) 62%);
  color: var(--sc-accent, #2563eb);
  background: color-mix(in srgb, var(--sc-accent, #2563eb) 8%, var(--sc-card-bg, #fff) 92%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc-accent, #2563eb) 18%, transparent);
}

.gpa-scale-inline.vareoncalc-measurement-toggle,
.gpa-scale-inline.vareoncalc-measurement-toggle:not(.vareoncalc-toggle) {
  width: fit-content;
  min-width: 0;
  grid-template-columns: max-content max-content;
}

.gpa-scale-inline__btn {
  min-width: 42px;
  padding-inline: 10px;
}

.gpa-scale-inline.vareoncalc-measurement-toggle .gpa-scale-inline__btn,
.gpa-scale-inline.vareoncalc-measurement-toggle:not(.vareoncalc-toggle) .gpa-scale-inline__btn {
  min-width: 0;
}

.gpa-course-header {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 92px 92px 36px;
  gap: 8px;
  padding: 4px 14px;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sc-muted-text, #6b7280);
}

.gpa-course-header--weighted {
  grid-template-columns: minmax(0, 1.6fr) 92px 96px 92px 36px;
}

.gpa-course-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  border: none;
  border-radius: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
  background: transparent;
  padding: 0 2px;
}

.gpa-course-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 92px 92px 36px;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  transition: background-color 0.15s ease;
}

.gpa-course-row:hover {
  background: var(--sc-input-bg, #f9fafb);
}

.gpa-course-row--weighted {
  grid-template-columns: minmax(0, 1.6fr) 92px 96px 92px 36px;
}

.gpa-course-header>div,
.gpa-course-row>div {
  min-width: 0;
}

.vareoncalc-card input.gpa-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.vareoncalc-card select.gpa-input {
  width: 100%;
  min-width: 0;
  height: 38px;
  margin-bottom: 0;
  border: 1px solid var(--sc-input-border, #d1d5db);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  background: var(--sc-input-bg, #fff);
  color: var(--sc-card-text, #111827);
}

.vareoncalc-card input.gpa-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
.vareoncalc-card select.gpa-input:focus {
  border-color: var(--sc-accent, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc-accent, #2563eb) 22%, transparent);
  outline: none;
}

.gpa-grade-tint--a {
  border-color: color-mix(in srgb, #16a34a 36%, var(--sc-input-border, #d1d5db) 64%) !important;
}

.gpa-grade-tint--b {
  border-color: color-mix(in srgb, #2563eb 36%, var(--sc-input-border, #d1d5db) 64%) !important;
}

.gpa-grade-tint--c {
  border-color: color-mix(in srgb, #f59e0b 36%, var(--sc-input-border, #d1d5db) 64%) !important;
}

.gpa-grade-tint--d {
  border-color: color-mix(in srgb, #ea580c 36%, var(--sc-input-border, #d1d5db) 64%) !important;
}

.gpa-grade-tint--f {
  border-color: color-mix(in srgb, #dc2626 36%, var(--sc-input-border, #d1d5db) 64%) !important;
}

.gpa-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sc-muted-text, #94a3b8);
  cursor: pointer;
  margin: 0;
  padding: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.gpa-remove-btn:hover {
  color: var(--sc-error, #dc2626);
  background: color-mix(in srgb, var(--sc-error, #dc2626) 10%, transparent);
}

.gpa-add-course-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px dashed var(--sc-accent, #2563eb);
  background: transparent;
  color: var(--sc-accent, #2563eb);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gpa-add-course-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sc-accent, #2563eb) 8%, transparent);
}

.gpa-add-course-btn:disabled,
.gpa-add-course-btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.gpa-add-course-btn__icon {
  font-size: 16px;
  font-weight: 700;
}

.gpa-step-actions {
  margin-top: 2px;
}

.gpa-step-actions .vareoncalc-btn {
  border-radius: 12px;
}

.gpa-step-actions .vareoncalc-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.gpa-limit-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--sc-warning, #f59e0b) 42%, var(--sc-card-border, #d1d5db) 58%);
  background: color-mix(in srgb, var(--sc-warning, #f59e0b) 9%, var(--sc-card-bg, #fff) 91%);
  font-size: 11px;
  max-width: min(100%, 420px);
  white-space: nowrap;
  color: color-mix(in srgb, var(--sc-warning, #f59e0b) 64%, var(--sc-muted-text, #6b7280) 36%);
}

.gpa-limit-note[hidden] {
  display: none !important;
}

.gpa-limit-note::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.gpa-results-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vareoncalc-gpa-report {
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  background: var(--sc-card-bg, #fff);
  overflow: hidden;
}

.vareoncalc-gpa-report--placeholder {
  padding: var(--sc-card-padding);
}

.gpa-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 170px;
  text-align: center;
  color: var(--sc-muted-text, #6b7280);
}

.gpa-empty-state svg {
  width: 40px;
  height: 40px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  opacity: 0.7;
}

.gpa-empty-state p {
  margin: 0;
  max-width: 300px;
  line-height: 1.45;
}

.gpa-report-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: var(--sc-card-padding);
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.gpa-ring-wrap {
  display: flex;
  justify-content: center;
}

.gpa-ring {
  position: relative;
  width: 150px;
  height: 150px;
}

.gpa-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gpa-ring__track,
.gpa-ring__progress {
  fill: none;
  stroke-width: 14;
}

.gpa-ring__track {
  stroke: color-mix(in srgb, var(--sc-card-border, #e5e7eb) 78%, transparent);
}

.gpa-ring__progress {
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.gpa-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gpa-ring__value {
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  color: var(--sc-card-text, #111827);
}

.gpa-ring__scale {
  margin-top: 3px;
  font-size: 11px;
  color: var(--sc-muted-text, #6b7280);
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.gpa-ring__letter {
  font-size: 12px;
  font-weight: 700;
  margin: 0;
}

.gpa-report-hero__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gpa-report-hero__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--sc-muted-text, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gpa-report-hero__gpa-value {
  display: none;
}

.gpa-report-hero__badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}

.gpa-report-hero__stats {
  display: none;
}

.gpa-report-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.gpa-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: none;
  border-right: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.gpa-stat-card:last-child {
  border-right: none;
}

.gpa-stat-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sc-muted-text, #6b7280);
  line-height: 1.3;
}

.gpa-stat-card__value {
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
}

.gpa-distribution {
  margin: 0;
  padding: 14px 16px 18px;
  border: none;
  border-top: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 0;
  background: var(--sc-card-bg, #fff);
}

.gpa-distribution__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gpa-distribution__label::before,
.gpa-distribution__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sc-card-border, #e5e7eb);
}

.gpa-distribution__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.gpa-dist-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-left: 3px solid currentColor;
  font-size: 12px;
  font-weight: 600;
  background: var(--sc-card-bg, #fff);
}

.gpa-dist-tag__count {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.gpa-dist-tag__label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.72;
}

.gpa-dist-tag--a {
  color: #166534;
  border-left-color: #16a34a;
  background: color-mix(in srgb, #16a34a 6%, var(--sc-card-bg, #fff) 94%);
}

.gpa-dist-tag--b {
  color: #1d4ed8;
  border-left-color: #2563eb;
  background: color-mix(in srgb, #2563eb 6%, var(--sc-card-bg, #fff) 94%);
}

.gpa-dist-tag--c {
  color: #92400e;
  border-left-color: #eab308;
  background: color-mix(in srgb, #eab308 6%, var(--sc-card-bg, #fff) 94%);
}

.gpa-dist-tag--d {
  color: #c2410c;
  border-left-color: #ea580c;
  background: color-mix(in srgb, #ea580c 6%, var(--sc-card-bg, #fff) 94%);
}

.gpa-dist-tag--f {
  color: #b91c1c;
  border-left-color: #dc2626;
  background: color-mix(in srgb, #dc2626 6%, var(--sc-card-bg, #fff) 94%);
}

.gpa-dist-tag--empty {
  color: var(--sc-muted-text, #6b7280);
  border-left-color: var(--sc-card-border, #d1d5db);
  background: var(--sc-input-bg, #f8fafc);
}

.gpa-edit-semester-wrap {
  display: none;
}

.gpa-edit-semester-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sc-accent, #2563eb);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.gpa-edit-semester-link:hover {
  opacity: 0.75;
}

.gpa-edit-semester-link svg {
  flex-shrink: 0;
}

.gpa-report-notes {
  margin: 0 16px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--sc-warning, #f59e0b) 32%, var(--sc-card-border, #e5e7eb) 68%);
  background: color-mix(in srgb, var(--sc-warning, #f59e0b) 10%, transparent);
}

.gpa-report-note {
  font-size: 12px;
  color: color-mix(in srgb, var(--sc-warning, #f59e0b) 70%, var(--sc-card-text, #111827) 30%);
}

.gpa-scenarios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gpa-form-section {
  background: var(--sc-card-bg, #fff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gpa-form-section.vareoncalc-section {
  padding: 0;
  gap: 0;
  box-shadow: none;
  background: var(--sc-card-bg, #fff);
}

.gpa-form-section.is-active,
.gpa-form-section:focus-within {
  border-color: color-mix(in srgb, var(--sc-accent, #2563eb) 34%, var(--sc-card-border, #e5e7eb) 66%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc-accent, #2563eb) 12%, transparent);
}

.gpa-form-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-input-bg, #f9fafb);
  letter-spacing: 0.01em;
}

.gpa-form-section__header svg {
  color: var(--sc-accent, #2563eb);
  flex-shrink: 0;
}

.gpa-form-section__body {
  padding: 14px;
  background: var(--sc-card-bg, #fff);
}

.gpa-scenario-hint {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--sc-muted-text, #6b7280);
}

.gpa-scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gpa-scenario-grid .vareoncalc-field {
  margin-bottom: 0;
}

.gpa-scenario-grid .vareoncalc-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-card-text, #374151);
}

.gpa-scenario-grid .vareoncalc-field > input {
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--sc-input-border, #d1d5db);
  border-radius: 8px;
  background: var(--sc-input-bg, #fff);
  color: var(--sc-input-text, #111827);
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gpa-scenario-grid .vareoncalc-field > input:focus {
  outline: none;
  border-color: var(--sc-accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.gpa-scenario-grid--single {
  grid-template-columns: minmax(0, 260px);
}

.gpa-scenario-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--sc-muted-text, #6b7280);
}

.gpa-target-output {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-input-bg, #f8fafc);
  font-size: 13px;
  line-height: 1.45;
}

.gpa-target-output--info {
  border-color: color-mix(in srgb, #2563eb 34%, var(--sc-card-border, #e5e7eb) 66%);
  background: color-mix(in srgb, #2563eb 10%, transparent);
  color: color-mix(in srgb, #2563eb 72%, var(--sc-card-text, #111827) 28%);
}

.gpa-target-output--success {
  border-color: color-mix(in srgb, #16a34a 34%, var(--sc-card-border, #e5e7eb) 66%);
  background: color-mix(in srgb, #16a34a 10%, transparent);
  color: color-mix(in srgb, #166534 72%, var(--sc-card-text, #111827) 28%);
}

.gpa-target-output--warning {
  border-color: color-mix(in srgb, #d97706 34%, var(--sc-card-border, #e5e7eb) 66%);
  background: color-mix(in srgb, #d97706 12%, transparent);
  color: color-mix(in srgb, #92400e 72%, var(--sc-card-text, #111827) 28%);
}

.gpa-scenario-modal {
  position: fixed;
  inset: 0;
  z-index: var(--vareoncalc-modal-z-index, 2000000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sc-card-padding);
}

.gpa-scenario-modal[hidden] {
  display: none !important;
}

.gpa-scenario-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: gpa-modal-backdrop-in 0.18s ease;
}

@keyframes gpa-modal-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.gpa-scenario-modal__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 40px);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-top: 2px solid var(--sc-accent, #2563eb);
  border-radius: 11px;
  background: var(--sc-card-bg, #fff);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: gpa-modal-in 0.2s ease;
}

@keyframes gpa-modal-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gpa-scenario-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-card-bg, #fff);
}

.gpa-scenario-modal__title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.gpa-scenario-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
  line-height: 1.25;
}

.gpa-scenario-modal__subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--sc-muted-text, #6b7280);
}

.gpa-scenario-modal__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sc-muted-text, #6b7280);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.gpa-scenario-modal__close:hover {
  border-color: var(--sc-card-border, #e5e7eb);
  color: var(--sc-card-text, #111827);
  background: var(--sc-input-bg, #f9fafb);
}

.gpa-scenario-modal__close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sc-accent, #2563eb) 45%, transparent);
  outline-offset: 2px;
}

.gpa-scenario-modal__body {
  padding: 14px 16px;
  overflow-y: auto;
  background: var(--sc-card-bg, #fff);
}

.gpa-scenario-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-card-bg, #fff);
}

.gpa-scenario-modal__footer .vareoncalc-btn {
  margin-top: 0;
  background: var(--sc-button-bg, var(--sc-accent, #2563eb));
  color: var(--sc-button-text, #fff);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.gpa-scenario-modal__footer .vareoncalc-btn:hover:not(:disabled) {
  background: var(--sc-button-hover, color-mix(in srgb, var(--sc-accent, #2563eb) 85%, #000));
}

@media (max-width: 720px) {
  .gpa-scenario-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .gpa-semester-entry__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .gpa-limit-note {
    justify-self: start;
    order: 3;
  }

  .gpa-course-header,
  .gpa-course-row {
    grid-template-columns: 1fr 80px 74px 32px;
    gap: 6px;
    font-size: 12px;
  }

  .gpa-course-header--weighted,
  .gpa-course-row--weighted {
    grid-template-columns: 1fr 74px 78px 74px 32px;
    gap: 6px;
  }

  .gpa-scale-inline {
    justify-self: start;
    width: fit-content;
  }

  .gpa-scale-inline-wrap {
    justify-self: start;
    width: fit-content;
    order: 1;
  }

  .gpa-scale-inline__btn {
    min-width: 42px;
  }

  .gpa-scenario-modal {
    padding: 0;
    align-items: flex-end;
  }

  .gpa-scenario-modal__container {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    animation: gpa-modal-slide-up 0.28s ease;
  }

  .gpa-scenario-modal__header {
    padding: 14px 16px;
    gap: 10px;
  }

  .gpa-scenario-modal__title {
    font-size: 16px;
  }

  .gpa-scenario-modal__subtitle {
    font-size: 12px;
  }

  .gpa-scenario-modal__body {
    padding: 12px 16px;
  }

  .gpa-scenario-modal__footer {
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .gpa-scenario-modal__footer .vareoncalc-btn {
    width: 100%;
  }

  .gpa-stat-card__value {
    font-size: 18px;
  }

  .gpa-report-metrics {
    grid-template-columns: 1fr;
    padding: 8px 16px;
  }

  .gpa-stat-card {
    flex-direction: row;
    justify-content: space-between;
    border-right: none;
    border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
    padding: 8px;
  }

  .gpa-stat-card:last-child {
    border-bottom: none;
  }
}

@keyframes gpa-modal-slide-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 410px) {
  .gpa-scale-inline-wrap {
    width: 100%;
    flex-wrap: wrap;
  }

  .gpa-course-header,
  .gpa-course-row {
    grid-template-columns: 1fr 64px 64px 28px;
    gap: 6px;
  }

  .gpa-course-header--weighted,
  .gpa-course-row--weighted {
    grid-template-columns: 1fr 64px 68px 64px 28px;
    gap: 6px;
  }
}

@media (max-width: 360px) {
  .gpa-course-header,
  .gpa-course-header--weighted {
    display: none;
  }

  .gpa-course-row {
    grid-template-columns: 1fr 1fr 28px;
    gap: 6px;
    padding: 10px 12px;
  }

  .gpa-course-row__name {
    grid-column: 1 / -1;
  }

  .gpa-course-row--weighted {
    grid-template-columns: 1fr 1fr 1fr 28px;
  }

  .gpa-course-row--weighted .gpa-course-row__name {
    grid-column: 1 / -1;
  }
}

@container vareoncalc (max-width: 480px) {
  .gpa-stat-card__value {
    font-size: 18px;
  }

  .gpa-report-metrics {
    grid-template-columns: 1fr;
    padding: 8px 16px;
  }

  .gpa-stat-card {
    flex-direction: row;
    justify-content: space-between;
    border-right: none;
    border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
    padding: 8px;
  }

  .gpa-stat-card:last-child {
    border-bottom: none;
  }
}

@container vareoncalc (max-width: 410px) {
  .gpa-scale-inline-wrap {
    width: 100%;
    flex-wrap: wrap;
  }

  .gpa-course-header,
  .gpa-course-row {
    grid-template-columns: 1fr 64px 64px 28px;
    gap: 6px;
  }

  .gpa-course-header--weighted,
  .gpa-course-row--weighted {
    grid-template-columns: 1fr 64px 68px 64px 28px;
    gap: 6px;
  }
}

@container vareoncalc (max-width: 360px) {
  .gpa-course-header,
  .gpa-course-header--weighted {
    display: none;
  }

  .gpa-course-row {
    grid-template-columns: 1fr 1fr 28px;
    gap: 6px;
    padding: 10px 12px;
  }

  .gpa-course-row__name {
    grid-column: 1 / -1;
  }

  .gpa-course-row--weighted {
    grid-template-columns: 1fr 1fr 1fr 28px;
  }

  .gpa-course-row--weighted .gpa-course-row__name {
    grid-column: 1 / -1;
  }
}

/* Source: assets/calculators/grade-calc.css */
/* Calculator styles: grade-calc */

.gradebook-two-step {
  width: 100%;
  --gradebook-pill-graded-text: #0f766e;
  --gradebook-pill-graded-bg: rgba(20, 184, 166, 0.14);
  --gradebook-pill-graded-border: rgba(20, 184, 166, 0.22);
  --gradebook-pill-remaining-text: #1d4ed8;
  --gradebook-pill-remaining-bg: rgba(59, 130, 246, 0.14);
  --gradebook-pill-remaining-border: rgba(59, 130, 246, 0.22);
  --gradebook-pill-overweight-text: #9a3412;
  --gradebook-pill-overweight-bg: rgba(249, 115, 22, 0.14);
  --gradebook-pill-overweight-border: rgba(249, 115, 22, 0.22);
}

.vareoncalc-root.theme-dark .gradebook-two-step,
.vareoncalc-root[data-theme="dark"] .gradebook-two-step,
.vareoncalc-root[data-vareoncalc-theme="dark"] .gradebook-two-step {
  --gradebook-pill-graded-text: #99f6e4;
  --gradebook-pill-graded-bg: rgba(20, 184, 166, 0.28);
  --gradebook-pill-graded-border: rgba(45, 212, 191, 0.5);
  --gradebook-pill-remaining-text: #bfdbfe;
  --gradebook-pill-remaining-bg: rgba(59, 130, 246, 0.28);
  --gradebook-pill-remaining-border: rgba(96, 165, 250, 0.5);
  --gradebook-pill-overweight-text: #fed7aa;
  --gradebook-pill-overweight-bg: rgba(249, 115, 22, 0.28);
  --gradebook-pill-overweight-border: rgba(251, 146, 60, 0.5);
}

.gradebook-entry {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: none;
  padding: 0;
}

.gradebook-entry__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gradebook-entry__section.vareoncalc-section,
.gradebook-step-actions.vareoncalc-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gradebook-entry__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gradebook-entry__title {
  display: none;
}

.gradebook-entry__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  order: 1;
}

.gradebook-mode-toggle.vareoncalc-measurement-toggle,
.gradebook-mode-toggle.vareoncalc-measurement-toggle:not(.vareoncalc-toggle) {
  width: fit-content;
  min-width: 0;
  margin: 0;
}

.gradebook-mode-toggle__btn {
  min-width: 0;
  padding-inline: 8px;
}

.gradebook-settings-inline-wrap {
  display: inline-flex;
  align-items: center;
  order: 3;
}

.gradebook-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 8px;
  background: var(--sc-card-bg, #fff);
  color: var(--sc-muted-text, #6b7280);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.gradebook-settings-btn:hover {
  border-color: var(--sc-accent, #2563eb);
  color: var(--sc-accent, #2563eb);
  background: var(--sc-input-bg, #f8fafc);
}

.gradebook-settings-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sc-accent, #2563eb) 45%, transparent);
  outline-offset: 2px;
}

.gradebook-settings-btn.is-active {
  border-color: color-mix(in srgb, var(--sc-accent, #2563eb) 38%, var(--sc-card-border, #e5e7eb) 62%);
  color: var(--sc-accent, #2563eb);
  background: color-mix(in srgb, var(--sc-accent, #2563eb) 8%, var(--sc-card-bg, #fff) 92%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc-accent, #2563eb) 18%, transparent);
}

.gradebook-weight-indicator {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-left: auto;
  order: 2;
  padding: 0;
  min-height: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
}

.gradebook-weight-indicator__prefix {
  font-weight: 600;
  font-size: 20px;
  color: var(--sc-card-text, #111827);
}

.gradebook-weight-indicator__value {
  font-weight: 700;
  color: var(--sc-card-text, #111827);
  font-size: 20px;
}

.gradebook-weight-indicator__label {
  display: none;
}

.gradebook-quick-add {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 96px 112px 40px;
  gap: 8px;
  align-items: stretch;
}

.gradebook-quick-add.vareoncalc-section {
  border: none;
  border-radius: 10px;
  background: var(--sc-card-bg, #fff);
}

.gradebook-input {
  margin-bottom: 0;
}

.vareoncalc-card input.gradebook-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.vareoncalc-card select.gradebook-input {
  width: 100%;
  min-width: 0;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid var(--sc-input-border, #d1d5db);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  background: var(--sc-input-bg, #fff);
  color: var(--sc-card-text, #111827);
}

/* Keep suffix-wrapped score/weight fields the same row height as plain inputs + add button */
.gradebook-quick-add > .vareoncalc-input-adorned {
  display: flex;
  align-items: stretch;
  min-height: 40px;
  width: 100%;
  min-width: 0;
}

.gradebook-quick-add > .vareoncalc-input-adorned > input.gradebook-input,
.gradebook-quick-add > .vareoncalc-input-adorned > select.gradebook-input {
  height: 100%;
  min-height: 40px;
  align-self: stretch;
}

.vareoncalc-card input.gradebook-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
.vareoncalc-card select.gradebook-input:focus {
  border-color: var(--sc-accent, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc-accent, #2563eb) 22%, transparent);
  outline: none;
}

/*
 * Scenario modal is portaled to document.body (outside .vareoncalc-card). Duplicate the
 * gradebook field look so "Desired Final Grade" matches quick-add row; theme vars are
 * copied onto the modal element in JS when it opens.
 */
.gradebook-settings-modal input.gradebook-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.gradebook-settings-modal select.gradebook-input {
  width: 100%;
  min-width: 0;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid var(--sc-input-border, #d1d5db);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  background: var(--sc-input-bg, #fff);
  color: var(--sc-card-text, #111827);
}

.gradebook-settings-modal input.gradebook-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
.gradebook-settings-modal select.gradebook-input:focus {
  border-color: var(--sc-accent, #2563eb);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc-accent, #2563eb) 22%, transparent);
  outline: none;
}

.gradebook-input::placeholder {
  color: var(--sc-muted-text, #94a3b8);
}

.gradebook-add-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border: 1px dashed var(--sc-accent, #2563eb);
  border-radius: 10px;
  background: transparent;
  color: var(--sc-accent, #2563eb);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.gradebook-add-btn:hover {
  background: color-mix(in srgb, var(--sc-accent, #2563eb) 8%, transparent);
}

.gradebook-add-btn--editing {
  border-style: solid;
  background: color-mix(in srgb, var(--sc-accent, #2563eb) 12%, transparent);
}

.gradebook-add-btn__icon {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.gradebook-list-shell {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.gradebook-list-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 104px 36px;
  gap: 8px;
  padding: 4px 14px 10px;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sc-muted-text, #6b7280);
}

.gradebook-list-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-muted-text, #94a3b8);
}

.gradebook-list-header__action svg {
  width: 14px;
  height: 14px;
}

.gradebook-assignment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  padding: 8px 2px 2px;
}

.gradebook-assignment-list::-webkit-scrollbar {
  width: 6px;
}

.gradebook-assignment-list::-webkit-scrollbar-track {
  background: var(--sc-input-bg, #f1f5f9);
}

.gradebook-assignment-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sc-muted-text, #94a3b8) 86%, transparent);
  border-radius: 999px;
}

.gradebook-assignment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 104px 36px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  background: var(--sc-card-bg, #fff);
  transition: border-color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}

.gradebook-assignment-row:hover {
  border-color: color-mix(in srgb, var(--sc-accent, #2563eb) 28%, var(--sc-card-border, #e5e7eb) 72%);
}

.gradebook-assignment-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sc-accent, #2563eb) 48%, transparent);
  outline-offset: -2px;
}

.gradebook-assignment-row--editing {
  background: color-mix(in srgb, var(--sc-accent, #2563eb) 10%, var(--sc-card-bg, #fff) 90%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc-accent, #2563eb) 28%, transparent);
}

.gradebook-assignment-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--sc-card-text, #111827);
}

.gradebook-assignment-row__score,
.gradebook-assignment-row__weight {
  text-align: center;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

.gradebook-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sc-muted-text, #94a3b8);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.gradebook-remove-btn:hover {
  color: var(--sc-error, #dc2626);
  background: color-mix(in srgb, var(--sc-error, #dc2626) 10%, transparent);
}

.gradebook-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 16px;
}

.gradebook-empty__text {
  font-size: 13px;
  color: var(--sc-muted-text, #6b7280);
  text-align: center;
}

.gradebook-entry__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.gradebook-remaining-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 38px;
  padding: 10px 14px;
  border: 1px dashed var(--sc-accent, #2563eb);
  border-radius: 12px;
  background: transparent;
  color: var(--sc-accent, #2563eb);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.gradebook-remaining-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sc-accent, #2563eb) 8%, transparent);
}

.gradebook-remaining-btn:disabled,
.gradebook-remaining-btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.gradebook-remaining {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.gradebook-remaining::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sc-muted-text, #6b7280) 45%, transparent);
  flex: 0 0 auto;
}

.gradebook-remaining[hidden] {
  display: none !important;
}

.gradebook-entry__footer .gradebook-remaining {
  margin-top: 0;
}

.gradebook-remaining__text {
  font-size: 11px;
  line-height: 1.35;
  color: var(--sc-muted-text, #6b7280);
  font-weight: 500;
}

.gradebook-step-actions {
  margin-top: 2px;
}

.gradebook-step-actions .vareoncalc-btn {
  border-radius: 12px;
}

.gradebook-step-actions .vareoncalc-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.gradebook-results-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vareoncalc-gradebook-report {
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  background: var(--sc-card-bg, #fff);
  overflow: hidden;
}

.vareoncalc-gradebook-report--placeholder {
  padding: var(--sc-card-padding);
}

.gradebook-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 170px;
  text-align: center;
  color: var(--sc-muted-text, #6b7280);
}

.gradebook-empty-state svg {
  width: 40px;
  height: 40px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  opacity: 0.7;
}

.gradebook-empty-state p {
  margin: 0;
  max-width: 320px;
  line-height: 1.45;
}

.gradebook-report-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: var(--sc-card-padding);
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-card-bg, #fff);
}

.gradebook-ring-wrap {
  display: flex;
  justify-content: center;
}

.gradebook-ring {
  position: relative;
  width: 170px;
  height: 170px;
}

.gradebook-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.gradebook-ring__track,
.gradebook-ring__progress {
  fill: none;
  stroke-width: 14;
}

.gradebook-ring__track {
  stroke: color-mix(in srgb, var(--sc-card-border, #e5e7eb) 78%, transparent);
}

.gradebook-ring__progress {
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.gradebook-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gradebook-ring__value {
  font-size: 32px;
  line-height: 1;
  font-weight: 800;
  color: var(--sc-card-text, #111827);
}

.gradebook-ring__letter {
  margin-top: 7px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gradebook-report-hero__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gradebook-report-hero__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--sc-muted-text, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gradebook-report-hero__headline {
  font-size: 22px;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
}

.gradebook-report-hero__stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--sc-muted-text, #6b7280);
}

.gradebook-report-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
}

.gradebook-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 12px 10px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  background: var(--sc-input-bg, #f8fafc);
}

.gradebook-stat-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sc-muted-text, #6b7280);
}

.gradebook-stat-card__value {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
}

.gradebook-completion {
  margin: 0 16px 16px;
  padding: 14px 16px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 10px;
  background: var(--sc-input-bg, #f8fafc);
}

.gradebook-completion__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gradebook-completion__label::before,
.gradebook-completion__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sc-card-border, #e5e7eb);
}

.gradebook-completion__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.gradebook-completion-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.gradebook-completion-pill--graded {
  color: var(--gradebook-pill-graded-text, #0f766e);
  background: var(--gradebook-pill-graded-bg, rgba(20, 184, 166, 0.14));
  border-color: var(--gradebook-pill-graded-border, rgba(20, 184, 166, 0.22));
}

.gradebook-completion-pill--remaining {
  color: var(--gradebook-pill-remaining-text, #1d4ed8);
  background: var(--gradebook-pill-remaining-bg, rgba(59, 130, 246, 0.14));
  border-color: var(--gradebook-pill-remaining-border, rgba(59, 130, 246, 0.22));
}

.gradebook-completion-pill--overweight {
  color: var(--gradebook-pill-overweight-text, #9a3412);
  background: var(--gradebook-pill-overweight-bg, rgba(249, 115, 22, 0.14));
  border-color: var(--gradebook-pill-overweight-border, rgba(249, 115, 22, 0.22));
}

.gradebook-scenario-card {
  margin: 0 16px 16px;
  padding: 16px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 10px;
  background: var(--sc-card-bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gradebook-scenario-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
  text-align: center;
}

.gradebook-scenario-card__message {
  font-size: 13px;
  color: var(--sc-muted-text, #6b7280);
  line-height: 1.5;
}

.gradebook-scenario-card__required {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}

.gradebook-scenario-card__required-label {
  font-size: 12px;
  color: var(--sc-muted-text, #6b7280);
}

.gradebook-scenario-card__required-value {
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  color: var(--sc-card-text, #111827);
}

.gradebook-scenario-card__required-context {
  font-size: 12px;
  color: var(--sc-muted-text, #6b7280);
}

.gradebook-scenario-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.gradebook-scenario-card__badge--impossible {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.12);
}

.gradebook-scenario-card__badge--achieved {
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
}

.gradebook-scenario-card__badge--hard {
  color: #c2410c;
  background: rgba(249, 115, 22, 0.12);
}

.gradebook-scenario-card__badge--moderate {
  color: #a16207;
  background: rgba(245, 158, 11, 0.14);
}

.gradebook-scenario-card__badge--easy {
  color: #166534;
  background: rgba(34, 197, 94, 0.14);
}

.gradebook-scenario-card--notice {
  border-color: color-mix(in srgb, var(--sc-warning, #f59e0b) 30%, var(--sc-card-border, #e5e7eb) 70%);
  background: color-mix(in srgb, var(--sc-warning, #f59e0b) 8%, var(--sc-card-bg, #fff) 92%);
}

.gradebook-scenario-card--prompt {
  border-style: dashed;
  border-color: var(--sc-card-border, #e5e7eb);
  background: var(--sc-input-bg, #f9fafb);
  text-align: center;
}

.gradebook-scenario-card--prompt .gradebook-scenario-card__title {
  font-weight: 700;
  color: var(--sc-card-text, #111827);
}

.gradebook-scenario-card--prompt .gradebook-scenario-card__message {
  color: var(--sc-muted-text, #6b7280);
}

.gradebook-scenario-card--final {
  align-items: center;
  text-align: center;
}

.gradebook-settings-modal {
  position: fixed;
  inset: 0;
  z-index: var(--vareoncalc-modal-z-index, 2000000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sc-card-padding);
}

.gradebook-settings-modal[hidden] {
  display: none !important;
}

.gradebook-settings-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: gradebook-modal-backdrop-in 0.18s ease;
}

@keyframes gradebook-modal-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.gradebook-settings-modal__container {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: min(88vh, 820px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-top: 2px solid var(--sc-accent, #2563eb);
  border-radius: 11px;
  background: var(--sc-card-bg, #fff);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  z-index: 1;
  animation: gradebook-modal-in 0.2s ease;
}

@keyframes gradebook-modal-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gradebook-settings-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-card-bg, #fff);
}

.gradebook-settings-modal__title-group {
  flex: 1;
  min-width: 0;
}

.gradebook-settings-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sc-card-text, #111827);
}

.gradebook-settings-modal__subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--sc-muted-text, #6b7280);
}

.gradebook-settings-modal__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sc-muted-text, #6b7280);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.gradebook-settings-modal__close:hover {
  border-color: var(--sc-card-border, #e5e7eb);
  color: var(--sc-card-text, #111827);
  background: var(--sc-input-bg, #f9fafb);
}

.gradebook-settings-modal__close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sc-accent, #2563eb) 45%, transparent);
  outline-offset: 2px;
}

.gradebook-settings-modal__body {
  padding: 14px 16px;
  overflow-y: auto;
  background: var(--sc-card-bg, #fff);
}

.gradebook-settings-modal__footer {
  padding: 14px 16px;
  border-top: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-card-bg, #fff);
  display: flex;
  justify-content: flex-end;
}

.gradebook-settings-modal__footer .vareoncalc-btn {
  margin-top: 0;
  background: var(--sc-button-bg, var(--sc-accent, #2563eb));
  color: var(--sc-button-text, #fff);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.gradebook-settings-modal__footer .vareoncalc-btn:hover:not(:disabled) {
  background: var(--sc-button-hover, color-mix(in srgb, var(--sc-accent, #2563eb) 85%, #000));
}

.gradebook-goal-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 10px;
  background: var(--sc-card-bg, #fff);
  overflow: hidden;
}

.gradebook-goal-card.vareoncalc-section {
  padding: 0;
  gap: 0;
  box-shadow: none;
  background: var(--sc-card-bg, #fff);
}

.gradebook-goal-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-input-bg, #f9fafb);
}

.gradebook-goal-card__header svg {
  flex-shrink: 0;
  color: var(--sc-accent, #2563eb);
}

.gradebook-goal-card__header-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.gradebook-goal-card__eyebrow {
  color: var(--sc-card-text, #111827);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.gradebook-goal-card.is-active {
  border-color: color-mix(in srgb, var(--sc-accent, #2563eb) 34%, var(--sc-card-border, #e5e7eb) 66%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc-accent, #2563eb) 12%, transparent);
}

.gradebook-goal-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: var(--sc-card-bg, #fff);
}

.gradebook-goal-primary {
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 10px;
  padding: 12px;
  background: var(--sc-card-bg, #fff);
}

.gradebook-goal-card.is-active .gradebook-goal-primary {
  border-color: color-mix(in srgb, var(--sc-accent, #2563eb) 34%, var(--sc-card-border, #e5e7eb) 66%);
}

.gradebook-goal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.gradebook-goal-grid .vareoncalc-field {
  margin-bottom: 0;
}

.gradebook-goal-grid label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

/* Match quick-add row: same 40px height, radii, and suffix rail as other gradebook inputs */
.gradebook-goal-grid .vareoncalc-input-adorned {
  display: flex;
  align-items: stretch;
  min-height: 40px;
  width: 100%;
  min-width: 0;
}

.gradebook-goal-grid .vareoncalc-input-adorned > input.gradebook-input,
.gradebook-goal-grid .vareoncalc-input-adorned > select.gradebook-input {
  height: 100%;
  min-height: 40px;
  align-self: stretch;
  margin-bottom: 0;
}

.gradebook-goal-actions-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gradebook-goal-actions__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--sc-muted-text, #6b7280);
  letter-spacing: 0.01em;
}

.gradebook-goal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.gradebook-goal-btn {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  border: 1px solid var(--sc-card-border, #d1d5db);
  border-radius: 10px;
  background: var(--sc-input-bg, #f8fafc);
  color: var(--sc-card-text, #111827);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.gradebook-goal-btn:hover {
  border-color: var(--sc-accent, #2563eb);
  color: var(--sc-accent, #2563eb);
  background: color-mix(in srgb, var(--sc-accent, #2563eb) 8%, transparent);
}

.gradebook-goal-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sc-accent, #2563eb) 40%, transparent);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .gradebook-report-hero__summary {
    align-items: center;
  }

  .gradebook-report-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .gradebook-entry__header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .gradebook-entry__title-row {
    flex-wrap: wrap;
  }

  .gradebook-weight-indicator {
    margin-left: auto;
  }

  .gradebook-weight-indicator__prefix,
  .gradebook-weight-indicator__value {
    font-size: 16px;
  }

  .gradebook-quick-add {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .gradebook-input--name {
    grid-column: 1 / -1;
  }

  .gradebook-add-btn {
    grid-column: 1 / -1;
    width: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .gradebook-list-header,
  .gradebook-assignment-row {
    grid-template-columns: minmax(0, 1fr) 72px 92px 32px;
    gap: 6px;
    font-size: 12px;
  }

  .gradebook-settings-modal {
    padding: 0;
    align-items: flex-end;
  }

  .gradebook-settings-modal__container {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    animation: gradebook-modal-slide-up 0.28s ease;
  }

  .gradebook-settings-modal__header {
    padding: 14px 16px;
    gap: 10px;
  }

  .gradebook-settings-modal__title {
    font-size: 16px;
  }

  .gradebook-settings-modal__subtitle {
    font-size: 12px;
  }

  .gradebook-settings-modal__body {
    padding: 12px 16px;
  }

  .gradebook-settings-modal__footer {
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .gradebook-settings-modal__footer .vareoncalc-btn {
    width: 100%;
  }
}

@keyframes gradebook-modal-slide-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@container vareoncalc (max-width: 640px) {
  .gradebook-entry__header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .gradebook-entry__title-row {
    flex-wrap: wrap;
  }

  .gradebook-weight-indicator {
    margin-left: auto;
  }

  .gradebook-weight-indicator__prefix,
  .gradebook-weight-indicator__value {
    font-size: 16px;
  }

  .gradebook-quick-add {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .gradebook-input--name {
    grid-column: 1 / -1;
  }

  .gradebook-add-btn {
    grid-column: 1 / -1;
    width: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .gradebook-list-header,
  .gradebook-assignment-row {
    grid-template-columns: minmax(0, 1fr) 72px 92px 32px;
    gap: 6px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .gradebook-report-metrics {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .gradebook-stat-card {
    flex-direction: row;
    justify-content: space-between;
    border: none;
    border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
    border-radius: 0;
    background: transparent;
    padding: 10px 16px;
    gap: 8px;
  }

  .gradebook-stat-card:last-child {
    border-bottom: none;
  }

  .gradebook-stat-card__value {
    font-size: 16px;
  }

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

  .gradebook-ring {
    width: 140px;
    height: 140px;
  }

  .gradebook-ring__value {
    font-size: 26px;
  }

  .gradebook-report-hero__headline {
    font-size: 18px;
  }

  .gradebook-report-hero__stats {
    font-size: 12px;
  }

  .gradebook-completion__label::before,
  .gradebook-completion__label::after {
    display: none;
  }

  .gradebook-scenario-card {
    margin: 0 12px 12px;
    padding: 12px;
  }

  .gradebook-scenario-card__title {
    font-size: 14px;
  }

  .gradebook-scenario-card__required-value {
    font-size: 28px;
  }
}

@media (max-width: 410px) {
  .gradebook-settings-inline-wrap {
    order: 2;
    width: auto;
  }

  .gradebook-weight-indicator {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .gradebook-quick-add {
    grid-template-columns: 1fr;
  }

  .gradebook-list-header,
  .gradebook-assignment-row {
    grid-template-columns: 1fr 64px 74px 28px;
    gap: 6px;
  }
}

@media (max-width: 360px) {
  .gradebook-entry {
    gap: 10px;
  }

  .gradebook-entry__section {
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .gradebook-entry__header {
    gap: 6px;
  }

  .gradebook-entry__title-row {
    gap: 6px;
  }

  .gradebook-settings-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .gradebook-mode-toggle__btn {
    padding-inline: 6px;
    font-size: 11px;
  }

  .gradebook-weight-indicator__prefix,
  .gradebook-weight-indicator__value {
    font-size: 14px;
  }

  .gradebook-quick-add,
  .gradebook-list-shell,
  .gradebook-step-actions {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .gradebook-quick-add {
    gap: 6px;
  }

  .gradebook-add-btn {
    margin-bottom: 0;
    min-height: 40px;
  }

  .gradebook-list-header {
    grid-template-columns: 1fr;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
  }

  .gradebook-list-header > :not(:first-child) {
    display: none;
  }

  .gradebook-assignment-row {
    grid-template-columns: 1fr 1fr 28px;
    gap: 6px;
    padding: 8px 10px;
  }

  .gradebook-assignment-row__name {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .gradebook-remove-btn {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .gradebook-assignment-row__score {
    grid-row: 2;
  }

  .gradebook-assignment-row__weight {
    grid-row: 2;
  }

  .gradebook-assignment-row__score,
  .gradebook-assignment-row__weight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--sc-card-border, #e5e7eb);
    border-radius: 8px;
    background: var(--sc-input-bg, #f8fafc);
    text-align: left;
    font-size: 12px;
  }

  .gradebook-assignment-row__score::before,
  .gradebook-assignment-row__weight::before {
    content: attr(data-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sc-muted-text, #6b7280);
  }

  .gradebook-empty {
    min-height: 72px;
    padding: 10px 0;
  }

  .gradebook-entry__footer {
    gap: 8px;
  }

  .gradebook-entry__footer .gradebook-remaining {
    width: 100%;
    margin-inline-start: 0;
  }
}

@container vareoncalc (max-width: 560px) {
  .gradebook-report-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container vareoncalc (max-width: 480px) {
  .gradebook-report-metrics {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .gradebook-stat-card {
    flex-direction: row;
    justify-content: space-between;
    border: none;
    border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
    border-radius: 0;
    background: transparent;
    padding: 10px 16px;
    gap: 8px;
  }

  .gradebook-stat-card:last-child {
    border-bottom: none;
  }

  .gradebook-stat-card__value {
    font-size: 16px;
  }

  .gradebook-ring {
    width: 140px;
    height: 140px;
  }

  .gradebook-ring__value {
    font-size: 26px;
  }

  .gradebook-report-hero__headline {
    font-size: 18px;
  }

  .gradebook-report-hero__stats {
    font-size: 12px;
  }

  .gradebook-scenario-card {
    margin: 0 12px 12px;
    padding: 12px;
  }

  .gradebook-scenario-card__title {
    font-size: 14px;
  }

  .gradebook-scenario-card__required-value {
    font-size: 28px;
  }

  .gradebook-completion__label::before,
  .gradebook-completion__label::after {
    display: none;
  }
}

@container vareoncalc (max-width: 410px) {
  .gradebook-settings-inline-wrap {
    order: 2;
    width: auto;
  }

  .gradebook-weight-indicator {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .gradebook-quick-add {
    grid-template-columns: 1fr;
  }

  .gradebook-list-header,
  .gradebook-assignment-row {
    grid-template-columns: 1fr 64px 74px 28px;
    gap: 6px;
  }
}

@container vareoncalc (max-width: 360px) {
  .gradebook-entry {
    gap: 10px;
  }

  .gradebook-entry__section {
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .gradebook-entry__header {
    gap: 6px;
  }

  .gradebook-entry__title-row {
    gap: 6px;
  }

  .gradebook-settings-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .gradebook-mode-toggle__btn {
    padding-inline: 6px;
    font-size: 11px;
  }

  .gradebook-weight-indicator__prefix,
  .gradebook-weight-indicator__value {
    font-size: 14px;
  }

  .gradebook-quick-add,
  .gradebook-list-shell,
  .gradebook-step-actions {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .gradebook-quick-add {
    gap: 6px;
  }

  .gradebook-add-btn {
    margin-bottom: 0;
    min-height: 40px;
  }

  .gradebook-list-header {
    grid-template-columns: 1fr;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
  }

  .gradebook-list-header > :not(:first-child) {
    display: none;
  }

  .gradebook-assignment-row {
    grid-template-columns: 1fr 1fr 28px;
    gap: 6px;
    padding: 8px 10px;
  }

  .gradebook-assignment-row__name {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .gradebook-remove-btn {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .gradebook-assignment-row__score {
    grid-row: 2;
  }

  .gradebook-assignment-row__weight {
    grid-row: 2;
  }

  .gradebook-assignment-row__score,
  .gradebook-assignment-row__weight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--sc-card-border, #e5e7eb);
    border-radius: 8px;
    background: var(--sc-input-bg, #f8fafc);
    text-align: left;
    font-size: 12px;
  }

  .gradebook-assignment-row__score::before,
  .gradebook-assignment-row__weight::before {
    content: attr(data-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sc-muted-text, #6b7280);
  }

  .gradebook-empty {
    min-height: 72px;
    padding: 10px 0;
  }

  .gradebook-entry__footer {
    gap: 8px;
  }

  .gradebook-entry__footer .gradebook-remaining {
    width: 100%;
    margin-inline-start: 0;
  }
}

/* Source: assets/calculators/loan.css */
/* Calculator styles: loan */

/* ====================================
  Loan Calculator - Financial Advisor Dashboard
  Two-step "Terms + Cost Analysis" design
  ==================================== */

/* Dashboard-specific layout */
.vareoncalc-loan-dashboard {
  width: 100%;
}

.loan-section {
  gap: 12px;
}

.loan-section .vareoncalc-field-row {
  margin-bottom: 0;
}

/* Loan presets (segmented control) */
.vareoncalc-loan-presets {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--sc-input-bg, #f3f4f6);
  border: 1px solid var(--sc-card-border, #e5e7eb);
}

.vareoncalc-loan-preset {
  border: 0;
  background: transparent;
  color: var(--sc-muted-text, #6b7280);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.vareoncalc-loan-preset:hover,
.vareoncalc-loan-preset:focus-visible {
  color: var(--sc-card-text, #111827);
}

.vareoncalc-loan-preset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.vareoncalc-loan-preset.is-active {
  background: var(--sc-card-bg, #ffffff);
  color: var(--sc-card-text, #111827);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

/* Field header (label + inline toggle) */
.vareoncalc-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.vareoncalc-field-header label {
  margin-bottom: 0;
}

/* Term unit toggle (inline in label) */
.vareoncalc-term-units {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.vareoncalc-term-unit {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: 1;
  color: var(--sc-muted-text, #6b7280);
  cursor: pointer;
  transition: color 0.15s ease;
}

.vareoncalc-term-unit:hover,
.vareoncalc-term-unit:focus-visible {
  color: var(--sc-card-text, #111827);
}

.vareoncalc-term-unit:focus-visible {
  outline: 2px solid var(--sc-accent, #2563eb);
  outline-offset: 2px;
  border-radius: 4px;
}

.vareoncalc-term-unit.is-active {
  font-weight: 700;
  color: var(--sc-card-text, #111827);
}

.vareoncalc-term-unit-divider {
  color: var(--sc-muted-text, #6b7280);
}

.vareoncalc-term-warning {
  margin-top: 6px;
  font-size: 12px;
  color: var(--sc-warning, #f59e0b);
}

/* Wider card for loan dashboard */
.vareoncalc-card:has(.vareoncalc-loan-dashboard) {
  max-width: 800px;
}

/* Right Panel: Cost Analysis */
.vareoncalc-loan-result {
  display: flex;
  flex-direction: column;
  background: var(--sc-input-bg, #f9fafb);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  min-height: 340px;
}

/* Placeholder state */
.vareoncalc-loan-result__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: var(--sc-card-padding);
  color: var(--sc-muted-text, #6b7280);
}

.vareoncalc-loan-result__placeholder .placeholder-icon {
  font-size: 52px;
  opacity: 0.4;
  margin-bottom: 12px;
}

.vareoncalc-loan-result__placeholder .placeholder-text {
  font-size: 14px;
  opacity: 0.7;
}

/* Results content container */
.vareoncalc-loan-result__content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Monthly Payment Headline */
.loan-result-headline {
  padding: var(--sc-card-padding);
  text-align: center;
  background: var(--sc-card-bg, #ffffff);
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.loan-monthly-amount {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--sc-card-text, #111827);
  font-variant-numeric: tabular-nums;
}

.loan-monthly-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sc-muted-text, #6b7280);
  margin-top: 8px;
}

/* Info Grid: Loan Details + Impact */
.loan-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}

.loan-info-grid--solo {
  grid-template-columns: 1fr;
}

/* Detail Cards (shared base) */
.loan-detail-card {
  padding: var(--sc-card-padding);
  border-radius: 10px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-card-bg, #ffffff);
}

.loan-detail-card__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-card-text, #111827);
  margin-bottom: 12px;
}

/* Loan Details Card */
.loan-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  gap: 8px;
}

.loan-breakdown-row + .loan-breakdown-row {
  border-top: 1px solid var(--sc-card-border, #e5e7eb);
}

.loan-breakdown-row .breakdown-label {
  font-size: 13px;
  color: var(--sc-muted-text, #6b7280);
}

.loan-breakdown-row .breakdown-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

.loan-breakdown-row--interest .breakdown-value--interest {
  color: #ea580c;
  font-weight: 700;
}

.loan-breakdown-row--total {
  padding-top: 12px;
  margin-top: 4px;
}

.loan-breakdown-row--total .breakdown-label {
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

.loan-breakdown-row--total .breakdown-value--total {
  font-size: 15px;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
}

/* Impact Card (green tint) */
.loan-detail-card--impact {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.18);
  display: flex;
  flex-direction: column;
}

.loan-impact__badge {
  margin-bottom: 14px;
}

.loan-impact__badge-value {
  font-size: 13px;
  font-weight: 700;
  color: #16a34a;
}

.loan-impact__stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.loan-impact__stat {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loan-impact__stat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.loan-impact__stat-icon--savings {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}

.loan-impact__stat-icon--time {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}

.loan-impact__stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.loan-impact__stat-value {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  color: #16a34a;
}

.loan-impact__stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--sc-muted-text, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Cost of Money */
.loan-cost-metric {
  margin: 0 16px 12px;
  padding: var(--sc-card-padding);
  border-radius: 12px;
  background: var(--sc-card-bg, #ffffff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
}

.loan-cost-metric__header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 14px;
  text-align: center;
}

.loan-cost-metric__visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  justify-items: stretch;
}

.loan-cost-metric__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.loan-cost-metric__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.loan-cost-metric__icon--borrow {
  background: #3b82f6;
  color: #ffffff;
}

.loan-cost-metric__icon--payback {
  background: #ea580c;
  color: #ffffff;
}

.loan-cost-metric__amount {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--sc-card-text, #111827);
  font-variant-numeric: tabular-nums;
}

.loan-cost-metric__caption {
  font-size: 11px;
  font-weight: 600;
  color: var(--sc-muted-text, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
}

.loan-cost-metric__arrow {
  color: var(--sc-muted-text, #6b7280);
  opacity: 0.5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Donut Chart: Principal vs Interest */
.loan-donut {
  margin: 0 16px 16px;
  padding: var(--sc-card-padding);
  border-radius: 12px;
  background: var(--sc-card-bg, #ffffff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  overflow: hidden;
}

.loan-donut__header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 16px;
  text-align: center;
}

.loan-donut__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loan-donut__svg {
  display: block;
  width: 180px;
  height: auto;
  max-width: 100%;
}

.loan-donut__track {
  stroke: var(--sc-card-border, #e5e7eb);
}

.loan-donut__segment {
  transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
}

.loan-donut__segment--principal {
  stroke: #3b82f6;
}

.loan-donut__segment--interest {
  stroke: #ea580c;
}

.loan-donut__legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.loan-donut__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.loan-donut__legend-color {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.loan-donut__legend-item--principal .loan-donut__legend-color {
  background: #3b82f6;
}

.loan-donut__legend-item--interest .loan-donut__legend-color {
  background: #ea580c;
}

.loan-donut__legend-label {
  color: var(--sc-muted-text, #6b7280);
  font-weight: 500;
}

.loan-donut__legend-pct {
  font-weight: 700;
  color: var(--sc-card-text, #111827);
}

/* Error display in loan result panel */
[data-role="result-error"] {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: var(--sc-card-padding);
}

[data-role="result-error"] .vareoncalc-result-error {
  max-width: 280px;
}

/* Dark theme: Loan Dashboard */
.vareoncalc-root[data-theme="dark"] .vareoncalc-loan-result,
.vareoncalc-root.theme-dark .vareoncalc-loan-result {
  background: var(--sc-input-bg, #1f2937);
}

.vareoncalc-root[data-theme="dark"] .loan-result-headline,
.vareoncalc-root.theme-dark .loan-result-headline {
  background: var(--sc-card-bg, #111827);
}

.vareoncalc-root[data-theme="dark"] .loan-detail-card,
.vareoncalc-root.theme-dark .loan-detail-card {
  background: var(--sc-card-bg, #111827);
  border-color: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .loan-detail-card--impact,
.vareoncalc-root.theme-dark .loan-detail-card--impact {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
}

.vareoncalc-root[data-theme="dark"] .loan-cost-metric,
.vareoncalc-root.theme-dark .loan-cost-metric {
  background: var(--sc-card-bg, #111827);
  border-color: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .loan-breakdown-row--interest .breakdown-value--interest,
.vareoncalc-root.theme-dark .loan-breakdown-row--interest .breakdown-value--interest {
  color: #fb923c;
}

.vareoncalc-root[data-theme="dark"] .loan-donut,
.vareoncalc-root.theme-dark .loan-donut {
  background: var(--sc-card-bg, #111827);
  border-color: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .loan-donut__track,
.vareoncalc-root.theme-dark .loan-donut__track {
  stroke: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .loan-cost-metric__icon--borrow,
.vareoncalc-root.theme-dark .loan-cost-metric__icon--borrow {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.vareoncalc-root[data-theme="dark"] .loan-cost-metric__icon--payback,
.vareoncalc-root.theme-dark .loan-cost-metric__icon--payback {
  background: rgba(234, 88, 12, 0.2);
  color: #fb923c;
}

/* Responsive */
@media (max-width: 720px) {
  .vareoncalc-loan-result {
    min-height: auto;
  }

  .loan-monthly-amount {
    font-size: 40px;
  }
}

@media (max-width: 480px) {
  .loan-monthly-amount {
    font-size: 34px;
  }

  .loan-info-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .loan-cost-metric {
    margin: 0 12px 12px;
  }

  .loan-donut {
    margin: 0 12px 12px;
  }
}

@media (max-width: 410px) {
  .vareoncalc-field-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .loan-info-grid {
    padding: 12px;
  }

  .loan-cost-metric {
    margin: 0 12px 12px;
  }

  .loan-cost-metric__visual {
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: center;
  }

  .loan-cost-metric__arrow {
    transform: rotate(90deg);
  }

  .loan-breakdown-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .loan-impact__stat-value {
    font-size: 16px;
  }

  .loan-donut {
    margin: 0 12px 12px;
  }
}

@media (max-width: 360px) {
  .loan-monthly-amount {
    font-size: 30px;
  }

  .loan-cost-metric {
    margin: 0 10px 10px;
  }

  .loan-donut {
    margin: 0 10px 10px;
  }
}

@container vareoncalc (max-width: 480px) {
  .loan-info-grid {
    grid-template-columns: 1fr;
  }
}

@container vareoncalc (max-width: 410px) {
  .vareoncalc-field-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .loan-info-grid {
    padding: 12px;
  }

  .loan-cost-metric {
    margin: 0 12px 12px;
  }

  .loan-cost-metric__visual {
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: center;
  }

  .loan-cost-metric__arrow {
    transform: rotate(90deg);
  }

  .loan-breakdown-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .loan-impact__stat-value {
    font-size: 16px;
  }

  .loan-donut {
    margin: 0 12px 12px;
  }
}

@container vareoncalc (max-width: 360px) {
  .loan-monthly-amount {
    font-size: 30px;
  }

  .loan-cost-metric {
    margin: 0 10px 10px;
  }

  .loan-donut {
    margin: 0 10px 10px;
  }
}

/* Source: assets/calculators/mortgage.css */
/* Calculator styles: mortgage */

/* ====================================
   Mortgage Calculator - 2-Step Wizard Layout
   Step 1: Your Mortgage (hero field + loan terms card + monthly costs card)
   Step 2: Pay It Off Faster (extra payments card)
   → Results
   ==================================== */

/* ── Wizard Step Fields Container ── */
.mortgage-wizard__step-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Restart button inside results ── */
.mortgage-wizard__restart {
  margin-top: 16px;
  width: 100%;
}

/* ========== Card Component ========== */
.mortgage-card {
  background: var(--sc-card-bg, #ffffff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.mortgage-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--sc-input-bg, #f9fafb);
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.mortgage-card__header:empty {
  display: none;
}

.mortgage-card__icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.mortgage-card__title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
  letter-spacing: 0.01em;
  text-transform: none;
}

.mortgage-card__badge {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-muted-text, #6b7280);
  background: var(--sc-card-bg, #ffffff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 100px;
  line-height: 1.6;
}

/* Collapsible card variant */
.mortgage-card--collapsible {
  border-color: var(--sc-card-border, #e5e7eb);
}

.mortgage-card__header--toggle {
  cursor: pointer;
  width: 100%;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  color: inherit;
  transition: background 0.15s ease;
}

.mortgage-card__header--toggle:hover {
  background: var(--sc-input-bg, #f9fafb);
}

.mortgage-card__header--toggle:focus {
  outline: none;
}

.mortgage-card__header--toggle:focus-visible {
  box-shadow: inset 0 0 0 2px var(--sc-card-border, #cbd5e1);
}

.mortgage-card__header--toggle[aria-expanded="true"] {
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.mortgage-card__chevron {
  margin-left: auto;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--sc-muted-text, #6b7280);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.mortgage-card__header--toggle[aria-expanded="true"] .mortgage-card__chevron {
  transform: rotate(90deg);
}

/* When badge + chevron both present, chevron takes auto-margin */
.mortgage-card__header--toggle .mortgage-card__badge {
  margin-left: auto;
}

.mortgage-card__header--toggle .mortgage-card__chevron {
  margin-left: 8px;
}

.mortgage-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mortgage-card__body[hidden] {
  display: none !important;
}

.mortgage-card__body .vareoncalc-field {
  margin-bottom: 0;
}

/* ── Card row (label + inputs) ── */
.mortgage-card__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mortgage-card__row > label {
  display: block;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--sc-label-text, #374151);
}

/* ── 2-column grid within cards ── */
.mortgage-card__grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.mortgage-card__grid-2 .vareoncalc-field {
  margin-bottom: 0;
}

.mortgage-card__grid-2 > * {
  min-width: 0;
}

/* ── Start date (inside card) ── */
.mortgage-card__start-date {
  max-width: 220px;
}

/* ========== Hero Field (Home Price) ========== */
.mortgage-hero-field {
  margin-bottom: 0;
}

.mortgage-hero-field label {
  font-size: 0.9375rem;
  font-weight: 600;
}

.mortgage-hero-field__input {
  font-size: 1.25rem;
  font-weight: 700;
  padding: 14px 16px;
  letter-spacing: -0.01em;
}

/* ========== Down Payment Row ========== */
.mortgage-dp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: flex-end;
}

.mortgage-dp-row__amount,
.mortgage-dp-row__percent {
  margin-bottom: 0;
}

.mortgage-dp-row__percent {
  width: 148px;
}

.mortgage-dp-row__percent .vareoncalc-input-adorned.vareoncalc-input-adorned--suffix-rail {
  --sc-stepper-zone-width: 0px;
}

.mortgage-dp-row__percent input {
  text-align: center;
  height: 48px;
  min-height: 48px;
  font-size: 1rem;
}

/* ========== Escrow Estimate Fields ========== */
.mortgage-escrow__estimate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mortgage-escrow__estimate-card {
  background: var(--sc-input-bg, #f9fafb);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 10px;
  padding: 12px;
}

.mortgage-escrow__estimate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.mortgage-escrow__estimate-header label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

.mortgage-escrow__mode-toggle {
  min-width: 92px;
}

.mortgage-escrow__mode-toggle .mortgage-escrow__mode-option {
  min-width: 38px;
  padding: 3px 10px;
}

.mortgage-escrow__mode-toggle[data-mode="amount"] .mortgage-escrow__mode-option--amount,
.mortgage-escrow__mode-toggle[data-mode="percent"] .mortgage-escrow__mode-option--percent {
  color: var(--sc-button-text, #ffffff);
}

.mortgage-escrow__estimate-input-wrap {
  display: flex;
  align-items: center;
}

.mortgage-escrow__estimate-input-wrap input {
  flex: 1;
}

/* Unit indicator (sits inline inside the label) */
.mortgage-escrow__estimate-unit {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--sc-muted-text, #6b7280);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

.mortgage-escrow__estimate-helper {
  margin-top: 4px;
}

/* ── HOA / PMI grid ── */
.mortgage-escrow__dues-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mortgage-escrow__dues-grid .vareoncalc-field {
  margin-bottom: 0;
}

/* ========== Extra Payments ========== */
.mortgage-extra__advanced {
  margin-top: 6px;
  min-width: 0;
  max-width: 100%;
}

.mortgage-extra__advanced-header {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.mortgage-extra__advanced-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mortgage-extra__advanced-fields[hidden] {
  display: none !important;
}

/* ========== Results Container ========== */
.mortgage-studio__result {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 16px;
  padding: var(--sc-card-padding);
  background: var(--sc-card-bg, #ffffff);
  border-radius: var(--sc-border-radius, 12px);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mortgage-studio__result.has-result .mortgage-studio__empty {
  display: none;
}

/* Empty state */
.mortgage-studio__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  color: var(--sc-muted-text, #6b7280);
  padding: var(--sc-card-padding);
}

.mortgage-studio__empty-icon {
  font-size: 48px;
  opacity: 0.5;
  line-height: 1;
}

.mortgage-studio__empty-text {
  font-size: 0.9375rem;
  opacity: 0.7;
  max-width: 200px;
}

/* ========== Results Section ========== */

/* --- Hero: Monthly Payment --- */
.mortgage-results__hero {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.mortgage-results__hero-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 4px;
}

.mortgage-results__hero-amount {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--sc-hero-accent, #3b82f6);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.mortgage-results__hero-period {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--sc-muted-text, #6b7280);
  margin-top: 2px;
}

.mortgage-results__hero-detail {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.8125rem;
}

.mortgage-results__hero-detail-item {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--sc-card-text, #111827);
  font-weight: 500;
  white-space: nowrap;
}

.mortgage-results__hero-detail-item--extra {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.mortgage-results__hero-detail-sep {
  color: var(--sc-muted-text, #6b7280);
  font-weight: 600;
}

/* --- Breakdown: Donut + Legend --- */
.mortgage-results__breakdown {
  padding: var(--sc-card-padding) 0;
}

.mortgage-results__breakdown-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-muted-text, #6b7280);
  text-align: center;
  margin-bottom: 12px;
}

.mortgage-results__breakdown-chart {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.mortgage-results__donut {
  position: relative;
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}

.mortgage-donut__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.mortgage-donut__segment {
  transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
}

.mortgage-donut__labels-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mortgage-donut__labels-col--left {
  align-items: flex-end;
  text-align: right;
}

.mortgage-donut__labels-col--right {
  align-items: flex-start;
  text-align: left;
}

.mortgage-donut__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mortgage-donut__label-line {
  font-size: 0.8125rem;
  color: var(--sc-card-text, #111827);
}

.mortgage-donut__label-name {
  font-weight: 600;
}

.mortgage-donut__label-pct {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
}

.mortgage-results__legend-fallback {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.mortgage-results__legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--sc-card-bg, #ffffff);
  border-radius: 8px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
}

.mortgage-results__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mortgage-results__legend-name {
  font-size: 0.8125rem;
  color: var(--sc-muted-text, #6b7280);
  flex: 1;
}

.mortgage-results__legend-amount {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mortgage-results__legend-pct {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sc-muted-text, #6b7280);
  min-width: 32px;
  text-align: right;
}

/* --- Loan Metrics Grid (2x2 cards) --- */
.mortgage-results__metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mortgage-results__metric-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 14px 12px;
  background: var(--sc-input-bg, #f8fafc);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 10px;
}

.mortgage-results__metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  flex-shrink: 0;
}

.mortgage-results__metric-icon svg {
  width: 20px;
  height: 20px;
}

.mortgage-results__metric-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.mortgage-results__metric-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sc-muted-text, #6b7280);
  line-height: 1.3;
}

.mortgage-results__metric-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mortgage-results__metric-unit {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--sc-muted-text, #6b7280);
}

.mortgage-results__metric-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--sc-muted-text, #6b7280);
  margin-top: 1px;
}

/* --- Amortization Chart --- */
.mortgage-results__amort {
  padding: 16px 0;
}

.mortgage-results__amort-header {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 12px;
  text-align: center;
}

.mortgage-results__amort-chart {
  width: 100%;
  position: relative;
}

.mortgage-amortization__svg {
  width: 100%;
  height: auto;
}

.mortgage-amortization__label,
.mortgage-amortization__axis-label {
  font-size: 0.6875rem;
  fill: var(--sc-muted-text, #6b7280);
}

.mortgage-amortization__ylabel {
  font-size: 0.625rem;
  fill: var(--sc-muted-text, #6b7280);
}

.mortgage-amortization__gridline {
  stroke: rgba(148, 163, 184, 0.3);
  stroke-width: 1;
}

.mortgage-amortization__crossover {
  stroke: var(--sc-card-border, #e5e7eb);
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

.mortgage-amortization__crosshair {
  stroke: rgba(148, 163, 184, 0.75);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
  pointer-events: none;
}

.mortgage-amortization__dot {
  pointer-events: none;
  stroke: var(--sc-card-bg, #ffffff);
  stroke-width: 2;
}

.mortgage-amortization__dot--principal {
  fill: var(--vareoncalc-chart-principal, #3b82f6);
}

.mortgage-amortization__dot--interest {
  fill: var(--vareoncalc-chart-interest, #f97316);
}

.mortgage-amortization__tooltip {
  position: absolute;
  z-index: 6;
  min-width: 156px;
  background: var(--sc-card-bg, #ffffff);
  border: 1px solid var(--sc-card-border, #d1d5db);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--sc-card-text, #111827);
  display: none;
  pointer-events: none;
}

.mortgage-amortization__tooltip-year {
  font-weight: 700;
  margin-bottom: 6px;
}

.mortgage-amortization__tooltip-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 6px;
}

.mortgage-amortization__tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.mortgage-amortization__tooltip-dot--principal {
  background: var(--vareoncalc-chart-principal, #3b82f6);
}

.mortgage-amortization__tooltip-dot--interest {
  background: var(--vareoncalc-chart-interest, #f97316);
}

.mortgage-amortization__tooltip-label {
  color: var(--sc-muted-text, #6b7280);
}

.mortgage-amortization__tooltip-value {
  font-weight: 600;
}

.mortgage-amortization__crossover-point {
  fill: var(--sc-card-bg, #ffffff);
  stroke: var(--sc-card-text, #111827);
  stroke-width: 2;
}

.mortgage-amortization__crossover-label {
  font-size: 0.625rem;
  font-weight: 600;
  fill: var(--sc-card-text, #111827);
  paint-order: stroke;
  stroke: var(--sc-card-bg, #ffffff);
  stroke-width: 3;
  stroke-linejoin: round;
}

.mortgage-results__amort-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--sc-muted-text, #6b7280);
  flex-wrap: wrap;
}

.mortgage-results__amort-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mortgage-results__amort-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.mortgage-results__amort-dot--principal {
  background: var(--vareoncalc-chart-principal, #3b82f6);
}

.mortgage-results__amort-dot--interest {
  background: var(--vareoncalc-chart-interest, #f97316);
}

/* --- Total Cost Cards --- */
.mortgage-results__cost {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mortgage-results__cost-card {
  padding: 14px;
  border-radius: 10px;
  background: var(--sc-card-bg, #ffffff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
}

.mortgage-results__cost-card--solo {
  grid-column: 1 / -1;
}

.mortgage-results__cost-card--extra {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.1) 100%);
  border-color: rgba(34, 197, 94, 0.25);
}

.mortgage-results__cost-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.mortgage-results__cost-card--extra .mortgage-results__cost-title {
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.2);
}

.mortgage-results__cost-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mortgage-results__cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
}

.mortgage-results__cost-label {
  color: var(--sc-muted-text, #6b7280);
}

.mortgage-results__cost-value {
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

/* --- Savings Banner --- */
.mortgage-results__savings {
  padding: 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06) 0%, rgba(34, 197, 94, 0.12) 100%);
  border: 1px solid rgba(34, 197, 94, 0.2);
  text-align: center;
}

.mortgage-results__savings-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #16a34a;
  margin-bottom: 10px;
}

.mortgage-results__savings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mortgage-results__savings-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mortgage-results__savings-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  margin-bottom: 2px;
}

.mortgage-results__savings-icon svg {
  width: 18px;
  height: 18px;
}

.mortgage-results__savings-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: #16a34a;
}

.mortgage-results__savings-label {
  font-size: 0.75rem;
  color: var(--sc-muted-text, #6b7280);
}

/* --- Mobile Results Tabs (<=460px rendering path) --- */
.mortgage-results-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mortgage-results-tabs__header {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  background: var(--sc-input-bg, #f3f4f6);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mortgage-results-tabs__header::-webkit-scrollbar {
  display: none;
}

.mortgage-results-tab {
  flex: 1 1 auto;
  min-width: 84px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--sc-muted-text, #6b7280);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.mortgage-results-tab:hover {
  color: var(--sc-card-text, #111827);
}

.mortgage-results-tab--active {
  color: var(--sc-accent, #3b82f6);
  border-color: var(--sc-card-border, #d1d5db);
  background: var(--sc-card-bg, #ffffff);
}

.mortgage-results-panel[hidden] {
  display: none !important;
}

/* ========== Dark Theme ========== */
.vareoncalc-root.theme-dark .mortgage-card,
.vareoncalc-root[data-theme="dark"] .mortgage-card {
  background: var(--sc-card-bg, #1f2937);
  border-color: rgba(255, 255, 255, 0.1);
}

.vareoncalc-root.theme-dark .mortgage-card__header,
.vareoncalc-root[data-theme="dark"] .mortgage-card__header {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.08);
}

.vareoncalc-root.theme-dark .mortgage-card__header--toggle:hover,
.vareoncalc-root[data-theme="dark"] .mortgage-card__header--toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.vareoncalc-root.theme-dark .mortgage-card__header--toggle:focus-visible,
.vareoncalc-root[data-theme="dark"] .mortgage-card__header--toggle:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.vareoncalc-root.theme-dark .mortgage-card__badge,
.vareoncalc-root[data-theme="dark"] .mortgage-card__badge {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}

.vareoncalc-root.theme-dark .mortgage-escrow__estimate-card,
.vareoncalc-root[data-theme="dark"] .mortgage-escrow__estimate-card {
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(255, 255, 255, 0.08);
}

.vareoncalc-root.theme-dark .mortgage-studio__result,
.vareoncalc-root[data-theme="dark"] .mortgage-studio__result {
  background: var(--sc-card-bg, #1f2937);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.vareoncalc-root.theme-dark .mortgage-results__hero-detail-item,
.vareoncalc-root[data-theme="dark"] .mortgage-results__hero-detail-item {
  background: rgba(0, 0, 0, 0.2);
}

.vareoncalc-root.theme-dark .mortgage-results__hero-detail-item--extra,
.vareoncalc-root[data-theme="dark"] .mortgage-results__hero-detail-item--extra {
  background: rgba(34, 197, 94, 0.15);
}

.vareoncalc-root.theme-dark .mortgage-donut__label-line,
.vareoncalc-root[data-theme="dark"] .mortgage-donut__label-line,
.vareoncalc-root.theme-dark .mortgage-donut__label-pct,
.vareoncalc-root[data-theme="dark"] .mortgage-donut__label-pct {
  color: var(--sc-card-text, #e5e7eb);
}

.vareoncalc-root.theme-dark .mortgage-results__legend-row,
.vareoncalc-root[data-theme="dark"] .mortgage-results__legend-row {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.1);
}

.vareoncalc-root.theme-dark .mortgage-results__metric-card,
.vareoncalc-root[data-theme="dark"] .mortgage-results__metric-card {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.1);
}

.vareoncalc-root.theme-dark .mortgage-results__metric-icon,
.vareoncalc-root[data-theme="dark"] .mortgage-results__metric-icon {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.vareoncalc-root.theme-dark .mortgage-results__savings-icon,
.vareoncalc-root[data-theme="dark"] .mortgage-results__savings-icon {
  background: rgba(34, 197, 94, 0.15);
}

.vareoncalc-root.theme-dark .mortgage-results__cost-card,
.vareoncalc-root[data-theme="dark"] .mortgage-results__cost-card {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.1);
}

.vareoncalc-root.theme-dark .mortgage-results__cost-card--extra,
.vareoncalc-root[data-theme="dark"] .mortgage-results__cost-card--extra {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
}

.vareoncalc-root.theme-dark .mortgage-results__savings,
.vareoncalc-root[data-theme="dark"] .mortgage-results__savings {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.15);
}

.vareoncalc-root.theme-dark .mortgage-results-tabs__header,
.vareoncalc-root[data-theme="dark"] .mortgage-results-tabs__header {
  background: var(--sc-input-bg, #1f2937);
  border-color: rgba(255, 255, 255, 0.1);
}

.vareoncalc-root.theme-dark .mortgage-results-tab,
.vareoncalc-root[data-theme="dark"] .mortgage-results-tab {
  color: var(--sc-muted-text, #9ca3af);
}

.vareoncalc-root.theme-dark .mortgage-results-tab:hover,
.vareoncalc-root[data-theme="dark"] .mortgage-results-tab:hover {
  color: var(--sc-card-text, #f3f4f6);
}

.vareoncalc-root.theme-dark .mortgage-results-tab--active,
.vareoncalc-root[data-theme="dark"] .mortgage-results-tab--active {
  color: var(--sc-accent, #60a5fa);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

.vareoncalc-root.theme-dark .mortgage-amortization__crossover-label,
.vareoncalc-root[data-theme="dark"] .mortgage-amortization__crossover-label {
  fill: var(--sc-card-text, #e5e7eb);
  stroke: var(--sc-card-bg, #1f2937);
}

.vareoncalc-root.theme-dark .mortgage-amortization__gridline,
.vareoncalc-root[data-theme="dark"] .mortgage-amortization__gridline {
  stroke: rgba(148, 163, 184, 0.25);
}

.vareoncalc-root.theme-dark .mortgage-amortization__tooltip,
.vareoncalc-root[data-theme="dark"] .mortgage-amortization__tooltip {
  background: var(--sc-card-bg, #1f2937);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.45);
}

/* ========== Responsive ========== */
@media (max-width: 560px) {
  .mortgage-card__grid-2 {
    grid-template-columns: 1fr;
  }

  .mortgage-escrow__dues-grid {
    grid-template-columns: 1fr;
  }

  .mortgage-escrow__estimate-header {
    align-items: flex-start;
  }

  .mortgage-dp-row {
    grid-template-columns: 1fr 120px;
  }

  .mortgage-card__start-date {
    max-width: 100%;
  }

  .mortgage-donut__labels-col {
    display: none;
  }

  .mortgage-results__breakdown-chart {
    display: flex;
    justify-content: center;
  }

  .mortgage-results__legend-fallback {
    display: flex;
  }

  .mortgage-results__donut {
    width: 120px;
    height: 120px;
  }

  .mortgage-results__metrics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mortgage-results__cost {
    grid-template-columns: 1fr;
  }

  .mortgage-results__savings-grid {
    grid-template-columns: 1fr;
  }

  .mortgage-results__hero-detail {
    flex-direction: column;
    gap: 4px;
  }

  .mortgage-results__hero-detail-sep {
    display: none;
  }
}

@media (max-width: 400px) {
  .mortgage-results__hero-amount {
    font-size: 2rem;
  }

  .mortgage-results__donut {
    width: 100px;
    height: 100px;
  }

  .mortgage-card__body {
    padding: 12px;
  }
}

@media (max-width: 460px) {
  .mortgage-studio__result {
    padding: 16px;
    gap: 14px;
  }
}

@media (max-width: 410px) {
  .mortgage-card__body {
    padding: 14px;
  }

  .mortgage-extra__advanced {
    padding: 10px;
  }

  .mortgage-extra__advanced-fields {
    gap: 10px;
  }

  .mortgage-dp-row,
  .mortgage-results__metrics-grid,
  .mortgage-results__cost,
  .mortgage-results__savings-grid {
    grid-template-columns: 1fr;
  }

  .mortgage-results__hero-amount {
    font-size: 2rem;
  }

  .mortgage-results__legend-row {
    padding: 6px 10px;
    gap: 8px;
  }

  .mortgage-results__legend-name {
    font-size: 0.75rem;
  }

  .mortgage-results__legend-amount {
    font-size: 0.8125rem;
  }

  .mortgage-results__legend-pct {
    display: none;
  }

  .mortgage-results__metric-value {
    font-size: 0.875rem;
  }

  .mortgage-studio__result {
    padding: 14px;
    gap: 12px;
  }
}

@media (max-width: 360px) {
  .mortgage-results__hero-amount {
    font-size: 1.85rem;
  }

  .mortgage-card__body,
  .mortgage-studio__result {
    padding: 12px;
  }

  .mortgage-extra__advanced {
    padding: 8px;
  }

  .mortgage-extra__advanced-fields {
    gap: 8px;
  }

  .mortgage-results__donut {
    width: 90px;
    height: 90px;
  }

  .mortgage-results__legend-row {
    padding: 5px 8px;
    gap: 6px;
  }

  .mortgage-results__legend-name {
    font-size: 0.6875rem;
  }

  .mortgage-results__legend-amount {
    font-size: 0.75rem;
  }

  .mortgage-results__metric-card {
    padding: 10px 12px;
    gap: 8px;
  }

  .mortgage-results__metric-value {
    font-size: 0.8125rem;
  }

  .mortgage-results__cost-row {
    font-size: 0.75rem;
  }
}

@container vareoncalc (max-width: 560px) {
  .mortgage-card__grid-2 {
    grid-template-columns: 1fr;
  }

  .mortgage-escrow__dues-grid {
    grid-template-columns: 1fr;
  }

  .mortgage-escrow__estimate-header {
    align-items: flex-start;
  }

  .mortgage-dp-row {
    grid-template-columns: 1fr 120px;
  }

  .mortgage-card__start-date {
    max-width: 100%;
  }

  .mortgage-donut__labels-col {
    display: none;
  }

  .mortgage-results__breakdown-chart {
    display: flex;
    justify-content: center;
  }

  .mortgage-results__legend-fallback {
    display: flex;
  }

  .mortgage-results__donut {
    width: 120px;
    height: 120px;
  }

  .mortgage-results__metrics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mortgage-results__cost {
    grid-template-columns: 1fr;
  }

  .mortgage-results__savings-grid {
    grid-template-columns: 1fr;
  }

  .mortgage-results__hero-detail {
    flex-direction: column;
    gap: 4px;
  }

  .mortgage-results__hero-detail-sep {
    display: none;
  }
}

@container vareoncalc (max-width: 410px) {
  .mortgage-card__body {
    padding: 14px;
  }

  .mortgage-extra__advanced {
    padding: 10px;
  }

  .mortgage-extra__advanced-fields {
    gap: 10px;
  }

  .mortgage-dp-row,
  .mortgage-results__metrics-grid,
  .mortgage-results__cost,
  .mortgage-results__savings-grid {
    grid-template-columns: 1fr;
  }

  .mortgage-results__hero-amount {
    font-size: 2rem;
  }

  .mortgage-results__legend-row {
    padding: 6px 10px;
    gap: 8px;
  }

  .mortgage-results__legend-name {
    font-size: 0.75rem;
  }

  .mortgage-results__legend-amount {
    font-size: 0.8125rem;
  }

  .mortgage-results__legend-pct {
    display: none;
  }

  .mortgage-results__metric-value {
    font-size: 0.875rem;
  }

  .mortgage-studio__result {
    padding: 14px;
    gap: 12px;
  }
}

@container vareoncalc (max-width: 360px) {
  .mortgage-results__hero-amount {
    font-size: 1.85rem;
  }

  .mortgage-card__body,
  .mortgage-studio__result {
    padding: 12px;
  }

  .mortgage-extra__advanced {
    padding: 8px;
  }

  .mortgage-extra__advanced-fields {
    gap: 8px;
  }

  .mortgage-results__donut {
    width: 90px;
    height: 90px;
  }

  .mortgage-results__legend-row {
    padding: 5px 8px;
    gap: 6px;
  }

  .mortgage-results__legend-name {
    font-size: 0.6875rem;
  }

  .mortgage-results__legend-amount {
    font-size: 0.75rem;
  }

  .mortgage-results__metric-card {
    padding: 10px 12px;
    gap: 8px;
  }

  .mortgage-results__metric-value {
    font-size: 0.8125rem;
  }

  .mortgage-results__cost-row {
    font-size: 0.75rem;
  }
}

/* Source: assets/calculators/percentage.css */
/* Calculator styles: percentage */

/* Layout: percentage form sections */
.percentage-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.percentage-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.percentage-field > input,
.percentage-field > select {
  width: 100%;
  margin-bottom: 0;
}

.percentage-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

.percentage-field--static .percentage-static {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--sc-input-border, #d1d5db);
  border-radius: 10px;
  background: var(--sc-input-bg, #f9fafb);
  color: var(--sc-card-text, #111827);
  font-size: 13px;
  font-weight: 600;
}

/* Sentence Builder: natural language input layout */
.vareoncalc-sentence-builder {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 0;
}

.vareoncalc-sentence-builder .percentage-field {
  flex: 1;
  min-width: 0;
}

.vareoncalc-sentence-builder .percentage-field label {
  display: block;
  margin-bottom: 8px;
}

.vareoncalc-sentence-connector {
  flex-shrink: 0;
  align-self: center;
  position: relative;
  top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--sc-muted-text, #6b7280);
  white-space: nowrap;
}

.vareoncalc-mode-header label {
  font-weight: 600;
  font-size: 15px;
  color: var(--sc-card-text, #111827);
}

/* Blackboard: Teacher's Note / Math Explanation panel */
.vareoncalc-blackboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--sc-input-bg, #f9fafb);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  min-height: 280px;
}

.vareoncalc-blackboard--placeholder {
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--sc-muted-text, #6b7280);
  font-size: 14px;
  padding: var(--sc-card-padding);
}

.vareoncalc-blackboard--placeholder .placeholder-icon {
  font-size: 48px;
  opacity: 0.4;
  margin-bottom: 12px;
}

.vareoncalc-blackboard--placeholder .placeholder-text {
  opacity: 0.7;
}

/* Blackboard headline: The Big Answer */
.blackboard-headline {
  padding: var(--sc-card-padding);
  text-align: center;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-card-bg, #ffffff);
}

.blackboard-answer {
  font-size: 42px;
  font-weight: 700;
  color: var(--vareoncalc-accent, #3b82f6);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.blackboard-answer--positive {
  color: #10b981;
}

.blackboard-answer--negative {
  color: #dc2626;
}

.blackboard-answer--ratio {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 2px;
}

.blackboard-label {
  font-size: 13px;
  color: var(--sc-muted-text, #6b7280);
  margin-top: 6px;
  line-height: 1.4;
}

/* Blackboard breakdown: Additional values */
.blackboard-breakdown {
  padding: var(--sc-card-padding);
  font-size: 13px;
  line-height: 1.6;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.breakdown-row--bold .breakdown-value {
  font-weight: 700;
  font-size: 14px;
}

.breakdown-label {
  color: var(--sc-muted-text, #6b7280);
}

.breakdown-value {
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

.breakdown-value--positive {
  color: #10b981;
}

.breakdown-value--negative {
  color: #dc2626;
}

/* Formula Card: The "Why" - textbook style */
.blackboard-formula-card {
  margin: 16px;
  padding: var(--sc-card-padding);
  background: var(--sc-card-bg, #ffffff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  flex: 1;
}

.formula-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.formula-icon {
  font-size: 18px;
  opacity: 0.8;
}

.formula-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-muted-text, #6b7280);
}

.formula-expression {
  display: block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
  background: var(--sc-input-bg, #f9fafb);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow-x: auto;
}

.formula-explanation {
  font-size: 12px;
  color: var(--sc-muted-text, #6b7280);
  line-height: 1.5;
  font-style: italic;
}

/* Ratio-specific: percentage bars */
.blackboard-percentages {
  padding: var(--sc-card-padding);
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.percentage-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 12px;
}

.percentage-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.percentage-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-label {
  width: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
  text-align: center;
}

.bar-track {
  flex: 1;
  height: 12px;
  background: var(--sc-card-border, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease-out;
}

.bar-fill--a {
  background: var(--vareoncalc-accent, #3b82f6);
}

.bar-fill--b {
  background: #10b981;
}

.bar-value {
  width: 50px;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: var(--sc-card-text, #111827);
}

.percentage-total {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--sc-card-border, #e5e7eb);
  font-size: 13px;
  color: var(--sc-muted-text, #6b7280);
}

.percentage-total .total-value {
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

/* Educational tip box */
.blackboard-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 16px 16px;
  padding: 12px;
  background: var(--sc-panel-info-soft-bg, #eff6ff);
  border: 1px solid var(--sc-panel-info-border, #bfdbfe);
  border-radius: 8px;
  font-size: 12px;
  color: var(--sc-panel-info-text, #1e40af);
}

.blackboard-tip .tip-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.blackboard-tip .tip-text {
  line-height: 1.5;
}

/* Dark theme: Blackboard adjustments */
.vareoncalc-root[data-theme="dark"] .vareoncalc-blackboard,
.vareoncalc-root.theme-dark .vareoncalc-blackboard {
  background: var(--sc-input-bg, #1f2937);
}

.vareoncalc-root[data-theme="dark"] .blackboard-headline,
.vareoncalc-root.theme-dark .blackboard-headline {
  background: var(--sc-card-bg, #111827);
}

.vareoncalc-root[data-theme="dark"] .blackboard-formula-card,
.vareoncalc-root.theme-dark .blackboard-formula-card {
  background: var(--sc-card-bg, #111827);
  border-color: var(--sc-card-border, #374151);
  box-shadow: none;
}

.vareoncalc-root[data-theme="dark"] .formula-title,
.vareoncalc-root.theme-dark .formula-title {
  color: var(--sc-muted-text, #9ca3af);
}

.vareoncalc-root[data-theme="dark"] .formula-expression,
.vareoncalc-root.theme-dark .formula-expression {
  background: var(--sc-input-bg, #1f2937);
  border-color: var(--sc-card-border, #374151);
  color: var(--sc-card-text, #f9fafb);
}

.vareoncalc-root[data-theme="dark"] .formula-explanation,
.vareoncalc-root.theme-dark .formula-explanation {
  color: var(--sc-muted-text, #9ca3af);
}

.vareoncalc-root[data-theme="dark"] .blackboard-tip,
.vareoncalc-root.theme-dark .blackboard-tip {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

/* Responsive: stack sentence builder on phones */
@media (max-width: 576px) {
  .vareoncalc-sentence-builder {
    flex-direction: column;
    align-items: stretch;
  }

  .vareoncalc-sentence-connector {
    display: none;
  }

  .blackboard-answer {
    font-size: 32px;
  }

  .formula-expression {
    font-size: 13px;
  }
}

@media (max-width: 410px) {
  .vareoncalc-sentence-builder {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .vareoncalc-sentence-connector {
    top: 0;
    min-height: 0;
    padding: 0;
    justify-content: flex-start;
  }

  .blackboard-headline {
    padding: var(--sc-card-padding);
  }

  .blackboard-answer {
    font-size: 36px;
  }
}

@media (max-width: 360px) {
  .blackboard-answer {
    font-size: 32px;
  }
}

@container vareoncalc (max-width: 410px) {
  .vareoncalc-sentence-builder {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .vareoncalc-sentence-connector {
    top: 0;
    min-height: 0;
    padding: 0;
    justify-content: flex-start;
  }

  .blackboard-headline {
    padding: var(--sc-card-padding);
  }

  .blackboard-answer {
    font-size: 36px;
  }
}

@container vareoncalc (max-width: 360px) {
  .blackboard-answer {
    font-size: 32px;
  }
}

/* Source: assets/calculators/roi.css */
/* Calculator styles: roi */

/* ====================================
   ROI Calculator - Clean Modern Design
   ==================================== */

/* Form container */
.roi-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Section styling */
.roi-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roi-section__header {
  gap: 12px;
  min-width: 0;
}

.roi-section__title {
  color: var(--sc-accent, #3b82f6);
}

/* Grid layouts */
.roi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.roi-grid--optional-details {
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  min-width: 0;
}

.roi-grid--optional-details > .roi-field:nth-child(1) {
  grid-column: 1 / -1;
  grid-row: 1;
}

.roi-grid--optional-details > .roi-field:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.roi-grid--optional-details > .roi-field:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

/* Field styling */
.roi-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.roi-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--sc-card-text, #374151);
}

.roi-field input,
.roi-field select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 8px;
  background: var(--sc-input-bg, #fff);
  color: var(--sc-card-text, #111827);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.roi-field input:focus,
.roi-field select:focus {
  outline: none;
  border-color: var(--sc-accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.roi-field input::placeholder {
  color: var(--sc-muted-text, #9ca3af);
}

.roi-field input:disabled,
.roi-field select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Duration input with unit select */
.roi-duration-input {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.roi-duration-input > .vareoncalc-stepper,
.roi-duration-input > input,
.roi-duration-input > .vareoncalc-input-adorned {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.roi-duration-input > select {
  flex: 0 0 116px;
  width: 116px;
  min-width: 116px;
}

/* ====================================
   Result Panel: The Scoreboard
   ==================================== */
.vareoncalc-roi-result {
  display: flex;
  flex-direction: column;
  background: var(--sc-input-bg, #f9fafb);
  border-radius: 12px;
  overflow: hidden;
}

/* Placeholder state */
.vareoncalc-roi-result__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 320px;
  text-align: center;
  padding: var(--sc-card-padding);
  gap: 12px;
}

.vareoncalc-roi-result__placeholder .placeholder-icon {
  font-size: 48px;
  opacity: 0.8;
}

.vareoncalc-roi-result__placeholder .placeholder-text {
  font-size: 14px;
  color: var(--sc-muted-text, #6b7280);
  max-width: 200px;
}

/* Results content */
.vareoncalc-roi-result__content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Error display */
.vareoncalc-roi-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  min-height: 320px;
  padding: var(--sc-card-padding);
  gap: 12px;
}

.vareoncalc-roi-error .error-icon {
  font-size: 36px;
  opacity: 0.8;
}

.vareoncalc-roi-error .error-text {
  font-size: 14px;
  color: var(--sc-error, #dc2626);
  font-weight: 500;
  max-width: 280px;
}

/* The Headline: Massive ROI Percentage */
.roi-result-headline {
  padding: var(--sc-card-padding);
  text-align: center;
  background: var(--sc-card-bg, #fff);
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.roi-percentage {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
}

.roi-percentage--profit {
  color: var(--sc-success, #10b981);
}

.roi-percentage--loss {
  color: var(--sc-error, #dc2626);
}

.roi-multiplier {
  font-size: 16px;
  font-weight: 600;
  color: var(--sc-muted-text, #6b7280);
  margin-top: 6px;
  display: none;
}

/* Visual Bar: Investment Growth Waterfall */
.roi-visual-bar {
  padding: var(--sc-card-padding);
  flex: 1;
}

.roi-visual-bar__header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 14px;
}

.roi-visual-bar__track {
  display: flex;
  width: 100%;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sc-card-border, #e5e7eb);
}

.roi-visual-bar__initial {
  height: 100%;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  transition: width 0.5s ease-out;
  border-radius: 8px 0 0 8px;
}

.roi-visual-bar__profit {
  height: 100%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  transition: width 0.5s ease-out;
  border-radius: 0 8px 8px 0;
}

.roi-visual-bar__profit--loss {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* When only initial investment (no growth) */
.roi-visual-bar__initial:only-child,
.roi-visual-bar__profit[style*="width: 0"]+.roi-visual-bar__initial {
  border-radius: 8px;
}

/* Bar Labels */
.roi-visual-bar__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  gap: 8px;
}

.roi-bar-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.roi-bar-label--initial {
  align-items: flex-start;
}

.roi-bar-label--profit {
  align-items: center;
  flex: 1;
}

.roi-bar-label--total {
  align-items: flex-end;
}

.roi-bar-label__title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-muted-text, #6b7280);
}

.roi-bar-label__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--sc-card-text, #111827);
  white-space: nowrap;
}

.roi-bar-label__value--profit {
  color: var(--sc-success, #10b981);
}

.roi-bar-label__value--loss {
  color: var(--sc-error, #dc2626);
}

/* Annualized + Real ROI Cards Row */
.roi-metrics-row {
  display: flex;
  gap: 12px;
  margin: 0 20px 20px;
}

.roi-speed-metric,
.roi-real-metric {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--sc-card-bg, #ffffff);
  border: 1px solid var(--sc-card-border, #e5e7eb);
  border-radius: 12px;
}

.roi-speed-metric__icon,
.roi-real-metric__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.roi-speed-metric__icon {
  background: rgba(59, 130, 246, 0.08);
  color: #3b82f6;
}

.roi-real-metric__icon {
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a;
}

.roi-speed-metric__icon svg,
.roi-real-metric__icon svg {
  width: 20px;
  height: 20px;
}

.roi-speed-metric__content,
.roi-real-metric__content {
  flex: 1;
  min-width: 0;
}

.roi-speed-metric__label,
.roi-real-metric__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sc-muted-text, #6b7280);
  line-height: 1.3;
}

.roi-speed-metric__value,
.roi-real-metric__value {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.roi-speed-metric__value--profit,
.roi-real-metric__value--profit {
  color: var(--sc-success, #10b981);
}

.roi-speed-metric__value--loss,
.roi-real-metric__value--loss {
  color: var(--sc-error, #dc2626);
}

.roi-speed-metric__duration {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--sc-muted-text, #6b7280);
  background: var(--sc-input-bg, #f1f5f9);
  padding: 4px 10px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Break-Even Requirement */
.roi-break-even {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 20px 20px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--sc-panel-warning-soft-bg, #fef3c7) 0%, var(--sc-panel-warning-bg, #fde68a) 100%);
  border: 1px solid var(--sc-panel-warning-border, #fcd34d);
  border-radius: 10px;
  color: var(--sc-panel-warning-text, #78350f);
}

.roi-break-even__icon {
  font-size: 24px;
  flex-shrink: 0;
}

.roi-break-even__content {
  flex: 1;
}

.roi-break-even__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-panel-warning-text, #78350f);
  opacity: 0.8;
}

.roi-break-even__value {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* Cost Note */
.roi-cost-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 20px 16px;
  padding: 10px 14px;
  background: var(--sc-panel-warning-bg, #fef3c7);
  border: 1px solid var(--sc-panel-warning-border, #fcd34d);
  border-radius: 8px;
  font-size: 12px;
  color: var(--sc-panel-warning-text, #78350f);
}

.roi-cost-note__icon {
  font-size: 14px;
}

/* ====================================
   Dark Theme
   ==================================== */
.vareoncalc-root[data-theme="dark"] .roi-section__title,
.vareoncalc-root.theme-dark .roi-section__title {
  color: var(--sc-accent, #60a5fa);
}

.vareoncalc-root[data-theme="dark"] .roi-field label,
.vareoncalc-root.theme-dark .roi-field label {
  color: var(--sc-card-text, #e5e7eb);
}

.vareoncalc-root[data-theme="dark"] .roi-field input,
.vareoncalc-root[data-theme="dark"] .roi-field select,
.vareoncalc-root.theme-dark .roi-field input,
.vareoncalc-root.theme-dark .roi-field select {
  background: var(--sc-input-bg, #1f2937);
  border-color: var(--sc-card-border, #374151);
  color: var(--sc-card-text, #f3f4f6);
}

.vareoncalc-root[data-theme="dark"] .roi-field input::placeholder,
.vareoncalc-root.theme-dark .roi-field input::placeholder {
  color: var(--sc-muted-text, #6b7280);
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-roi-result,
.vareoncalc-root.theme-dark .vareoncalc-roi-result {
  background: var(--sc-input-bg, #1f2937);
}

.vareoncalc-root[data-theme="dark"] .roi-result-headline,
.vareoncalc-root.theme-dark .roi-result-headline {
  background: var(--sc-card-bg, #111827);
  border-color: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .roi-visual-bar__track,
.vareoncalc-root.theme-dark .roi-visual-bar__track {
  background: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .roi-visual-bar__initial,
.vareoncalc-root.theme-dark .roi-visual-bar__initial {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

.vareoncalc-root[data-theme="dark"] .roi-speed-metric,
.vareoncalc-root.theme-dark .roi-speed-metric,
.vareoncalc-root[data-theme="dark"] .roi-real-metric,
.vareoncalc-root.theme-dark .roi-real-metric {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.1);
}

.vareoncalc-root[data-theme="dark"] .roi-speed-metric__icon,
.vareoncalc-root.theme-dark .roi-speed-metric__icon {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.vareoncalc-root[data-theme="dark"] .roi-real-metric__icon,
.vareoncalc-root.theme-dark .roi-real-metric__icon {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.vareoncalc-root[data-theme="dark"] .roi-speed-metric__duration,
.vareoncalc-root.theme-dark .roi-speed-metric__duration {
  background: rgba(255, 255, 255, 0.08);
}

.vareoncalc-root[data-theme="dark"] .roi-break-even,
.vareoncalc-root.theme-dark .roi-break-even {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fcd34d;
}

.vareoncalc-root[data-theme="dark"] .roi-break-even__label,
.vareoncalc-root.theme-dark .roi-break-even__label {
  color: #fcd34d;
}

.vareoncalc-root[data-theme="dark"] .roi-cost-note,
.vareoncalc-root.theme-dark .roi-cost-note {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fcd34d;
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-roi-error .error-text,
.vareoncalc-root.theme-dark .vareoncalc-roi-error .error-text {
  color: #f87171;
}

/* ====================================
   Responsive
   ==================================== */
@media (max-width: 520px) {
  .roi-grid {
    grid-template-columns: 1fr;
  }

  .roi-section--optional,
  .roi-optional-content,
  .roi-grid--optional-details,
  .roi-grid--optional-details > .roi-field,
  .roi-duration-input {
    min-width: 0;
  }

  .roi-grid--optional-details {
    grid-template-columns: 1fr;
  }

  .roi-grid--optional-details > .roi-field,
  .roi-grid--optional-details > .roi-field:nth-child(1),
  .roi-grid--optional-details > .roi-field:nth-child(2),
  .roi-grid--optional-details > .roi-field:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
  }

  .roi-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .roi-section__header > * {
    min-width: 0;
    max-width: 100%;
  }

  .roi-optional-accordion {
    max-width: 100%;
  }

  .roi-duration-input {
    flex-direction: column;
    align-items: stretch;
  }

  .roi-duration-input > select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .roi-percentage {
    font-size: 36px;
  }

  .roi-visual-bar {
    padding: 16px;
  }

  .roi-visual-bar__labels {
    flex-direction: column;
    gap: 8px;
  }

  .roi-bar-label {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .roi-bar-label--initial,
  .roi-bar-label--profit,
  .roi-bar-label--total {
    align-items: center;
  }

  .roi-metrics-row {
    flex-direction: column;
    margin: 0 16px 16px;
  }

  .roi-speed-metric {
    flex-wrap: wrap;
  }

  .roi-speed-metric__content {
    min-width: calc(100% - 50px);
  }

  .roi-speed-metric__icon,
  .roi-real-metric__icon {
    width: 34px;
    height: 34px;
  }

  .roi-speed-metric__icon svg,
  .roi-real-metric__icon svg {
    width: 17px;
    height: 17px;
  }

  .roi-break-even {
    flex-wrap: wrap;
    margin: 0 16px 16px;
  }
}

@media (max-width: 410px) {
  .roi-visual-bar {
    padding: 14px;
  }

  .roi-metrics-row {
    margin: 0 14px 14px;
    gap: 10px;
  }

  .roi-speed-metric,
  .roi-real-metric {
    padding: 12px 14px;
    gap: 10px;
  }

  .roi-speed-metric__icon,
  .roi-real-metric__icon {
    width: 30px;
    height: 30px;
  }

  .roi-speed-metric__icon svg,
  .roi-real-metric__icon svg {
    width: 15px;
    height: 15px;
  }

  .roi-break-even {
    margin: 0 14px 14px;
    padding: 12px 14px;
    gap: 10px;
  }

  .roi-cost-note {
    margin: 0 14px 14px;
  }

  .roi-percentage {
    font-size: 34px;
  }

  .roi-speed-metric__value,
  .roi-real-metric__value {
    font-size: 16px;
  }

  .roi-bar-label__value {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .roi-visual-bar {
    padding: 12px;
  }

  .roi-metrics-row {
    margin: 0 12px 12px;
    gap: 8px;
  }

  .roi-speed-metric,
  .roi-real-metric {
    padding: 10px 12px;
  }

  .roi-break-even {
    margin: 0 12px 12px;
    padding: 10px 12px;
  }

  .roi-cost-note {
    margin: 0 12px 12px;
    padding: 8px 10px;
  }

  .roi-percentage {
    font-size: 28px;
  }

  .roi-speed-metric__value,
  .roi-real-metric__value {
    font-size: 15px;
  }

  .roi-speed-metric__label,
  .roi-real-metric__label,
  .roi-break-even__label {
    font-size: 10px;
  }

  .roi-bar-label__title {
    font-size: 9px;
  }

  .roi-bar-label__value {
    font-size: 11px;
  }
}

@container vareoncalc (max-width: 520px) {
  .roi-grid {
    grid-template-columns: 1fr;
  }

  .roi-section--optional,
  .roi-optional-content,
  .roi-grid--optional-details,
  .roi-grid--optional-details > .roi-field,
  .roi-duration-input {
    min-width: 0;
  }

  .roi-grid--optional-details {
    grid-template-columns: 1fr;
  }

  .roi-grid--optional-details > .roi-field,
  .roi-grid--optional-details > .roi-field:nth-child(1),
  .roi-grid--optional-details > .roi-field:nth-child(2),
  .roi-grid--optional-details > .roi-field:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
  }

  .roi-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .roi-section__header > * {
    min-width: 0;
    max-width: 100%;
  }

  .roi-optional-accordion {
    max-width: 100%;
  }

  .roi-duration-input {
    flex-direction: column;
    align-items: stretch;
  }

  .roi-duration-input > select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .roi-percentage {
    font-size: 36px;
  }

  .roi-visual-bar {
    padding: 16px;
  }

  .roi-visual-bar__labels {
    flex-direction: column;
    gap: 8px;
  }

  .roi-bar-label {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .roi-bar-label--initial,
  .roi-bar-label--profit,
  .roi-bar-label--total {
    align-items: center;
  }

  .roi-metrics-row {
    flex-direction: column;
    margin: 0 16px 16px;
  }

  .roi-speed-metric {
    flex-wrap: wrap;
  }

  .roi-speed-metric__content {
    min-width: calc(100% - 50px);
  }

  .roi-speed-metric__icon,
  .roi-real-metric__icon {
    width: 34px;
    height: 34px;
  }

  .roi-speed-metric__icon svg,
  .roi-real-metric__icon svg {
    width: 17px;
    height: 17px;
  }

  .roi-break-even {
    flex-wrap: wrap;
    margin: 0 16px 16px;
  }
}

@container vareoncalc (max-width: 410px) {
  .roi-visual-bar {
    padding: 14px;
  }

  .roi-metrics-row {
    margin: 0 14px 14px;
    gap: 10px;
  }

  .roi-speed-metric,
  .roi-real-metric {
    padding: 12px 14px;
    gap: 10px;
  }

  .roi-speed-metric__icon,
  .roi-real-metric__icon {
    width: 30px;
    height: 30px;
  }

  .roi-speed-metric__icon svg,
  .roi-real-metric__icon svg {
    width: 15px;
    height: 15px;
  }

  .roi-break-even {
    margin: 0 14px 14px;
    padding: 12px 14px;
    gap: 10px;
  }

  .roi-cost-note {
    margin: 0 14px 14px;
  }

  .roi-percentage {
    font-size: 34px;
  }

  .roi-speed-metric__value,
  .roi-real-metric__value {
    font-size: 16px;
  }

  .roi-bar-label__value {
    font-size: 12px;
  }
}

@container vareoncalc (max-width: 360px) {
  .roi-visual-bar {
    padding: 12px;
  }

  .roi-metrics-row {
    margin: 0 12px 12px;
    gap: 8px;
  }

  .roi-speed-metric,
  .roi-real-metric {
    padding: 10px 12px;
  }

  .roi-break-even {
    margin: 0 12px 12px;
    padding: 10px 12px;
  }

  .roi-cost-note {
    margin: 0 12px 12px;
    padding: 8px 10px;
  }

  .roi-percentage {
    font-size: 28px;
  }

  .roi-speed-metric__value,
  .roi-real-metric__value {
    font-size: 15px;
  }

  .roi-speed-metric__label,
  .roi-real-metric__label,
  .roi-break-even__label {
    font-size: 10px;
  }

  .roi-bar-label__title {
    font-size: 9px;
  }

  .roi-bar-label__value {
    font-size: 11px;
  }
}

/* Source: assets/calculators/savings.css */
/* Calculator styles: savings */

/* =========================================================================
   SAVINGS & COMPOUND GROWTH CALCULATOR - Wizard Layout
   ========================================================================= */

/* ── Wizard step fields spacing ── */
.savings-wizard__step-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.savings-section {
  gap: 12px;
}

.savings-section .vareoncalc-field-row {
  margin: 0;
}

.savings-section--apy {
  gap: 4px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--sc-panel-border, #d1d5db) 60%, transparent);
  background: var(--sc-panel-bg, #f9fafb);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.85em;
  opacity: 0.88;
}

.savings-section--apy[hidden] {
  display: none !important;
}

.savings-wizard__restart {
  margin-top: 16px;
}

/* ── Compact APY converter (Step 2) ── */
.savings-wizard__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.savings-wizard__inline-label {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin-bottom: 0 !important;
  min-width: 0;
}

.savings-wizard__apy-toggle {
  border: 1px solid var(--sc-panel-border, #d1d5db);
  background: var(--sc-card-bg, #ffffff);
  color: var(--sc-muted-text, #6b7280);
  border-radius: 999px;
  padding: 2px 8px;
  min-height: 24px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15px;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.savings-wizard__apy-toggle:hover {
  border-color: var(--sc-accent, #2563eb);
  color: var(--sc-card-text, #111827);
}

.savings-wizard__apy-toggle:focus-visible {
  outline: 2px solid var(--sc-accent, #2563eb);
  outline-offset: 2px;
}

.savings-wizard__apy-toggle.is-active {
  border-color: var(--sc-accent, #2563eb);
  background: color-mix(in srgb, var(--sc-accent, #2563eb) 12%, var(--sc-card-bg, #ffffff));
  color: var(--sc-card-text, #111827);
}

.savings-wizard__apy-field {
  margin-top: 0;
  margin-bottom: 0;
}

.savings-wizard__apy-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 0.92em;
  color: var(--sc-muted-text, #6b7280);
}

.savings-wizard__apy-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.savings-wizard__apy-row .vareoncalc-input {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.savings-wizard__apy-row .vareoncalc-input-adorned input,
.savings-wizard__apy-row input.vareoncalc-input {
  height: 34px;
  min-height: 34px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 13px;
}

.vareoncalc-apy-converter__btn {
  border: 1px solid var(--sc-accent, #2563eb);
  background: var(--sc-accent, #2563eb);
  color: var(--sc-accent-text, #ffffff);
  border-radius: 6px;
  padding: 6px 10px;
  min-height: 34px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

#apy-apply {
  margin-bottom: 14px;
}

.vareoncalc-apy-converter__btn:hover {
  opacity: 0.88;
}

/* ── Results Panel (inside wizard results) ── */
.vareoncalc-savings-results {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--sc-panel-bg, #f8fafc) 0%, var(--sc-card-bg, #ffffff) 100%);
  border: 1px solid var(--sc-panel-border, #e5e7eb);
  border-radius: 12px;
  padding: var(--sc-card-padding);
  gap: 20px;
}

/* ── Hero: Total Balance ── */
.vareoncalc-savings-hero {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sc-panel-border, #e5e7eb);
}

.vareoncalc-savings-total {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--sc-card-text, #111827);
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.vareoncalc-savings-subtitle {
  font-size: 13px;
  color: var(--sc-muted-text, #6b7280);
}

.vareoncalc-savings-real {
  font-size: 12px;
  color: var(--sc-muted-text, #6b7280);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  background: var(--sc-panel-bg, #f9fafb);
  border: 1px solid var(--sc-panel-border, #e5e7eb);
  border-radius: 20px;
  padding: 4px 12px;
}

.vareoncalc-savings-real__label {
  color: var(--sc-muted-text, #6b7280);
}

.vareoncalc-savings-real__value {
  font-weight: 600;
  color: var(--sc-card-text, #374151);
}

/* ── Composition Breakdown ── */
.vareoncalc-savings-breakdown {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vareoncalc-composition-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--sc-panel-border, #e5e7eb);
}

.vareoncalc-composition-bar__fill--principal {
  background: var(--vareoncalc-chart-principal, #3b82f6);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 5px 0 0 5px;
}

.vareoncalc-composition-bar__fill--interest {
  background: var(--vareoncalc-chart-interest, #10b981);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 5px 5px 0;
}

.vareoncalc-breakdown-metrics {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.vareoncalc-breakdown-metric {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.vareoncalc-breakdown-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.vareoncalc-breakdown-dot--principal {
  background: var(--vareoncalc-chart-principal, #3b82f6);
}

.vareoncalc-breakdown-dot--interest {
  background: var(--vareoncalc-chart-interest, #10b981);
}

.vareoncalc-breakdown-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vareoncalc-breakdown-label {
  font-size: 11px;
  color: var(--sc-muted-text, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.vareoncalc-breakdown-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vareoncalc-breakdown-metric--interest .vareoncalc-breakdown-value {
  color: var(--vareoncalc-chart-interest, #10b981);
}

/* ── Growth Pill ── */
.vareoncalc-growth-pill {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  background: color-mix(in srgb, var(--vareoncalc-chart-interest, #10b981) 10%, transparent);
  color: var(--vareoncalc-chart-interest, #10b981);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
}

.vareoncalc-growth-pill__arrow {
  font-weight: 700;
  font-size: 14px;
}

.vareoncalc-growth-pill__label {
  font-weight: 400;
  opacity: 0.85;
}

/* ── Chart Section ── */
.vareoncalc-savings-chart-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--sc-panel-border, #e5e7eb);
}

.vareoncalc-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.vareoncalc-chart-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sc-muted-text, #6b7280);
}

.vareoncalc-chart-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
}

.vareoncalc-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--sc-muted-text, #6b7280);
}

.vareoncalc-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.vareoncalc-legend-principal .vareoncalc-legend-dot {
  background: var(--vareoncalc-chart-principal, #3b82f6);
}

.vareoncalc-legend-interest .vareoncalc-legend-dot {
  background: var(--vareoncalc-chart-interest, #10b981);
}

.vareoncalc-savings-chart {
  width: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.vareoncalc-growth-svg {
  width: 100%;
  height: auto;
  max-height: 220px;
}

/* Chart areas */
.vareoncalc-area-principal {
  opacity: 0.9;
}

.vareoncalc-area-interest {
  opacity: 0.85;
}

.vareoncalc-line-principal,
.vareoncalc-line-interest {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Chart gridlines */
.vareoncalc-chart-gridline {
  stroke: var(--sc-panel-border, #e5e7eb);
  stroke-width: 0.5;
  stroke-dasharray: 4 3;
}

/* Y-axis labels */
.vareoncalc-chart-ylabel {
  font-size: 9px;
  fill: var(--sc-muted-text, #9ca3af);
  text-anchor: end;
}

/* Chart labels */
.vareoncalc-chart-label {
  font-size: 10px;
  fill: var(--sc-muted-text, #9ca3af);
  text-anchor: middle;
}

.vareoncalc-chart-axis-label {
  font-size: 9px;
  fill: var(--sc-muted-text, #9ca3af);
  text-anchor: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Chart hover elements ── */
.vareoncalc-chart-crosshair {
  stroke: var(--sc-muted-text, #9ca3af);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

.vareoncalc-chart-dot--principal {
  fill: var(--vareoncalc-chart-principal, #3b82f6);
  stroke: var(--sc-card-bg, #ffffff);
  stroke-width: 2;
  pointer-events: none;
}

.vareoncalc-chart-dot--total {
  fill: var(--vareoncalc-chart-interest, #10b981);
  stroke: var(--sc-card-bg, #ffffff);
  stroke-width: 2;
  pointer-events: none;
}

.vareoncalc-chart-overlay {
  cursor: crosshair;
}

/* ── Chart tooltip ── */
.vareoncalc-chart-tooltip {
  position: absolute;
  background: var(--sc-card-bg, #ffffff);
  border: 1px solid var(--sc-panel-border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  display: none;
}

.vareoncalc-chart-tooltip__year {
  font-weight: 600;
  color: var(--sc-card-text, #111827);
  margin-bottom: 4px;
  font-size: 13px;
}

.vareoncalc-chart-tooltip__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vareoncalc-chart-tooltip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vareoncalc-chart-tooltip__dot--principal {
  background: var(--vareoncalc-chart-principal, #3b82f6);
}

.vareoncalc-chart-tooltip__dot--interest {
  background: var(--vareoncalc-chart-interest, #10b981);
}

.vareoncalc-chart-tooltip__label {
  color: var(--sc-muted-text, #6b7280);
  min-width: 70px;
}

.vareoncalc-chart-tooltip__value {
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .vareoncalc-savings-total {
    font-size: 2rem;
  }

  .vareoncalc-breakdown-metrics {
    flex-direction: column;
    gap: 10px;
  }

  .vareoncalc-breakdown-metric {
    flex: none;
  }

  .vareoncalc-savings-results {
    padding: 16px;
    gap: 16px;
  }
}

/* ── Dark Theme Overrides ── */
.vareoncalc-root[data-theme="dark"] .vareoncalc-savings-results,
.vareoncalc-root.theme-dark .vareoncalc-savings-results {
  background: linear-gradient(135deg, var(--sc-panel-bg, #1b2435) 0%, var(--sc-card-bg, #1f2937) 100%);
  border-color: var(--sc-panel-border, #324154);
}

.vareoncalc-root[data-theme="dark"] .savings-section--apy,
.vareoncalc-root.theme-dark .savings-section--apy {
  border-color: color-mix(in srgb, var(--sc-panel-border, #324154) 60%, transparent);
  background: var(--sc-panel-bg, #1b2435);
}

.vareoncalc-root[data-theme="dark"] .savings-wizard__apy-toggle,
.vareoncalc-root.theme-dark .savings-wizard__apy-toggle {
  background: var(--sc-panel-bg, #1b2435);
  border-color: var(--sc-panel-border, #324154);
  color: var(--sc-muted-text, #9ca3af);
}

.vareoncalc-root[data-theme="dark"] .savings-wizard__apy-toggle.is-active,
.vareoncalc-root.theme-dark .savings-wizard__apy-toggle.is-active {
  border-color: var(--sc-accent, #60a5fa);
  background: rgba(37, 99, 235, 0.22);
  color: var(--sc-card-text, #f9fafb);
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-savings-real,
.vareoncalc-root.theme-dark .vareoncalc-savings-real {
  background: var(--sc-panel-bg, #1b2435);
  border-color: var(--sc-panel-border, #324154);
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-composition-bar,
.vareoncalc-root.theme-dark .vareoncalc-composition-bar {
  background: var(--sc-panel-border, #324154);
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-chart-gridline,
.vareoncalc-root.theme-dark .vareoncalc-chart-gridline {
  stroke: var(--sc-panel-border, #324154);
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-chart-label,
.vareoncalc-root[data-theme="dark"] .vareoncalc-chart-axis-label,
.vareoncalc-root[data-theme="dark"] .vareoncalc-chart-ylabel,
.vareoncalc-root.theme-dark .vareoncalc-chart-label,
.vareoncalc-root.theme-dark .vareoncalc-chart-axis-label,
.vareoncalc-root.theme-dark .vareoncalc-chart-ylabel {
  fill: var(--sc-muted-text, #9ca3af);
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-chart-tooltip,
.vareoncalc-root.theme-dark .vareoncalc-chart-tooltip {
  background: var(--sc-card-bg, #1f2937);
  border-color: var(--sc-panel-border, #324154);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-chart-dot--principal,
.vareoncalc-root.theme-dark .vareoncalc-chart-dot--principal,
.vareoncalc-root[data-theme="dark"] .vareoncalc-chart-dot--total,
.vareoncalc-root.theme-dark .vareoncalc-chart-dot--total {
  stroke: var(--sc-card-bg, #1f2937);
}

@media (max-width: 410px) {
  .savings-wizard__label-row {
    flex-direction: column;
    align-items: stretch;
  }

  .savings-wizard__apy-toggle {
    align-self: flex-start;
  }

  .savings-wizard__apy-row {
    flex-direction: column;
    align-items: stretch;
  }

  .vareoncalc-savings-results {
    padding: 14px;
    gap: 14px;
  }

  .savings-section--contribution-growth,
  .savings-section--contribution-growth .vareoncalc-field,
  .savings-section--contribution-growth label,
  .savings-section--contribution-growth .vareoncalc-mobile-shift-label {
    min-width: 0;
    max-width: 100%;
  }

  .savings-section--contribution-growth label {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
}

@media (max-width: 360px) {
  .vareoncalc-savings-total {
    font-size: 1.8rem;
  }

  .vareoncalc-savings-results {
    padding: 12px;
  }
}

@container vareoncalc (max-width: 410px) {
  .savings-wizard__label-row {
    flex-direction: column;
    align-items: stretch;
  }

  .savings-wizard__apy-toggle {
    align-self: flex-start;
  }

  .savings-wizard__apy-row {
    flex-direction: column;
    align-items: stretch;
  }

  .vareoncalc-savings-results {
    padding: 14px;
    gap: 14px;
  }

  .savings-section--contribution-growth,
  .savings-section--contribution-growth .vareoncalc-field,
  .savings-section--contribution-growth label,
  .savings-section--contribution-growth .vareoncalc-mobile-shift-label {
    min-width: 0;
    max-width: 100%;
  }

  .savings-section--contribution-growth label {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
}

@container vareoncalc (max-width: 360px) {
  .vareoncalc-savings-total {
    font-size: 1.8rem;
  }

  .vareoncalc-savings-results {
    padding: 12px;
  }
}

/* Source: assets/calculators/tip.css */
/* Calculator styles: tip */

/* Layout: tip form sections */
.tip-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tip-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.tip-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tip-field>input,
.tip-field>select {
  width: 100%;
  margin-bottom: 0;
}

.tip-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

.tip-field--full {
  grid-column: 1 / -1;
}

.tip-actions {
  margin-top: 4px;
}

.tip-actions .vareoncalc-btn {
  width: 100%;
}

@media (max-width: 640px) {
  .tip-grid {
    grid-template-columns: 1fr;
  }
}

/* Tip preset toggle group */
.vareoncalc-tip-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vareoncalc-tip-presets .tip-preset {
  flex: 1;
  min-width: 52px;
  padding: 10px 14px;
  border: 2px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-card-bg, #ffffff);
  color: var(--sc-card-text, #111827);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease;
  text-align: center;
}

.vareoncalc-tip-presets .tip-preset:hover {
  border-color: var(--sc-accent, #3b82f6);
  background: var(--sc-input-bg, #f9fafb);
}

.vareoncalc-tip-presets .tip-preset--active {
  background: var(--sc-accent, #3b82f6);
  border-color: var(--sc-accent, #3b82f6);
  color: #ffffff;
}

.vareoncalc-tip-presets .tip-preset--active:hover {
  background: var(--sc-accent, #3b82f6);
  border-color: var(--sc-accent, #3b82f6);
}

/* ── Tip Results: Hero ── */
.tip-results__hero {
  text-align: center;
  padding: 20px var(--sc-card-padding, 16px) 16px;
  border-bottom: 1px solid var(--sc-card-border, #e5e7eb);
}

.tip-results__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 4px;
}

.tip-results__amount {
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 800;
  color: var(--sc-card-text, #111827);
  line-height: 1.1;
  margin-bottom: 12px;
}

.tip-results__bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 auto 8px;
  max-width: 240px;
}

.tip-results__bar-bill {
  background: var(--sc-card-text, #111827);
  opacity: 0.18;
  transition: width 0.3s ease;
}

.tip-results__bar-tip {
  background: #10b981;
  transition: width 0.3s ease;
}

.tip-results__bar-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  color: var(--sc-muted-text, #6b7280);
}

.tip-results__legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.tip-results__legend-dot--bill {
  background: var(--sc-card-text, #111827);
  opacity: 0.22;
}

.tip-results__legend-dot--tip {
  background: #10b981;
}

/* ── Tip Results: Detail Rows ── */
.tip-results__details {
  padding: 14px var(--sc-card-padding, 16px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tip-results__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.tip-results__row-label {
  color: var(--sc-muted-text, #6b7280);
}

.tip-results__row-value {
  color: var(--sc-card-text, #111827);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tip-results__row--accent .tip-results__row-value {
  color: #10b981;
  font-weight: 600;
}

.tip-results__divider {
  border: none;
  border-top: 1px dashed var(--sc-card-border, #e5e7eb);
  margin: 2px 0;
}

.tip-results__row--total .tip-results__row-label {
  font-weight: 600;
  color: var(--sc-card-text, #111827);
}

.tip-results__row--total .tip-results__row-value {
  font-weight: 700;
  font-size: 15px;
}

/* ── Tip Results: Smart Rounding ── */
.tip-results__rounding {
  border-top: 1px dashed var(--sc-card-border, #e5e7eb);
  padding: 12px var(--sc-card-padding, 16px);
  text-align: center;
}

.tip-results__rounding-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-muted-text, #6b7280);
  margin-bottom: 8px;
}

.tip-results__rounding-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.tip-results__round-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--sc-card-border, #e5e7eb);
  background: var(--sc-card-bg, #ffffff);
  color: var(--sc-card-text, #111827);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.tip-results__round-btn:hover {
  border-color: var(--sc-accent, #3b82f6);
  background: var(--sc-input-bg, #f9fafb);
}

.tip-results__round-btn svg {
  color: var(--sc-muted-text, #6b7280);
  flex-shrink: 0;
}

/* ── Tip Results: Split / Per Person ── */
.tip-results__split {
  background: #ecfdf5;
  border-top: 1px solid #a7f3d0;
  border-radius: 0 0 8px 8px;
  padding: 14px var(--sc-card-padding, 16px) 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tip-results__split-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tip-results__split-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #059669;
}

.tip-results__split-icon svg {
  width: 18px;
  height: 18px;
}

.tip-results__split-amount {
  font-size: 20px;
  font-weight: 700;
  color: #059669;
  line-height: 1.2;
}

.tip-results__split-label {
  font-size: 12px;
  color: #10b981;
  font-weight: 500;
}

.tip-results__split-adjust {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #a7f3d0;
  border-radius: 20px;
  padding: 3px 5px;
  flex-shrink: 0;
}

.tip-results__adj-btn {
  background: none;
  border: none;
  color: #059669;
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}

.tip-results__adj-btn:hover:not(:disabled) {
  background: #d1fae5;
}

.tip-results__adj-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.tip-results__adj-count {
  font-size: 14px;
  font-weight: 600;
  color: #047857;
  min-width: 18px;
  text-align: center;
}

/* ── Tip Results: Footer / Copy (inside green split) ── */
.tip-results__footer {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  padding: 4px 0 0;
  border-top: 1px solid rgba(5, 150, 105, 0.12);
  margin-top: 2px;
}

.tip-results__copy-btn {
  background: none;
  border: none;
  color: #059669;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  transition: background 0.15s;
}

.tip-results__copy-btn:hover {
  background: rgba(5, 150, 105, 0.1);
}

/* ── Tip: Dark Theme ── */
.vareoncalc-root[data-theme="dark"] .vareoncalc-tip-presets .tip-preset,
.vareoncalc-root.theme-dark .vareoncalc-tip-presets .tip-preset {
  background: var(--sc-card-bg, #1f2937);
  border-color: var(--sc-card-border, #374151);
  color: var(--sc-card-text, #f9fafb);
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-tip-presets .tip-preset:hover,
.vareoncalc-root.theme-dark .vareoncalc-tip-presets .tip-preset:hover {
  border-color: var(--sc-accent, #3b82f6);
  background: var(--sc-input-bg, #111827);
}

.vareoncalc-root[data-theme="dark"] .vareoncalc-tip-presets .tip-preset--active,
.vareoncalc-root.theme-dark .vareoncalc-tip-presets .tip-preset--active {
  background: var(--sc-accent, #3b82f6);
  border-color: var(--sc-accent, #3b82f6);
  color: #ffffff;
}

.vareoncalc-root[data-theme="dark"] .tip-results__bar-bill,
.vareoncalc-root.theme-dark .tip-results__bar-bill {
  background: var(--sc-card-text, #f9fafb);
  opacity: 0.15;
}

.vareoncalc-root[data-theme="dark"] .tip-results__legend-dot--bill,
.vareoncalc-root.theme-dark .tip-results__legend-dot--bill {
  background: var(--sc-card-text, #f9fafb);
  opacity: 0.25;
}

.vareoncalc-root[data-theme="dark"] .tip-results__divider,
.vareoncalc-root.theme-dark .tip-results__divider {
  border-top-color: var(--sc-card-border, #374151);
}

.vareoncalc-root[data-theme="dark"] .tip-results__row--accent .tip-results__row-value,
.vareoncalc-root.theme-dark .tip-results__row--accent .tip-results__row-value {
  color: #34d399;
}

.vareoncalc-root[data-theme="dark"] .tip-results__round-btn,
.vareoncalc-root.theme-dark .tip-results__round-btn {
  background: var(--sc-panel-bg, #1b2435);
  border-color: var(--sc-card-border, #374151);
  color: var(--sc-card-text, #f9fafb);
}

.vareoncalc-root[data-theme="dark"] .tip-results__round-btn:hover,
.vareoncalc-root.theme-dark .tip-results__round-btn:hover {
  border-color: var(--sc-accent, #60a5fa);
}

.vareoncalc-root[data-theme="dark"] .tip-results__split,
.vareoncalc-root.theme-dark .tip-results__split {
  background: rgba(16, 185, 129, 0.12);
  border-top-color: rgba(16, 185, 129, 0.25);
}

.vareoncalc-root[data-theme="dark"] .tip-results__split-icon,
.vareoncalc-root.theme-dark .tip-results__split-icon {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

.vareoncalc-root[data-theme="dark"] .tip-results__split-amount,
.vareoncalc-root.theme-dark .tip-results__split-amount {
  color: #34d399;
}

.vareoncalc-root[data-theme="dark"] .tip-results__split-label,
.vareoncalc-root.theme-dark .tip-results__split-label {
  color: #6ee7b7;
}

.vareoncalc-root[data-theme="dark"] .tip-results__split-adjust,
.vareoncalc-root.theme-dark .tip-results__split-adjust {
  background: transparent;
  border-color: rgba(52, 211, 153, 0.35);
}

.vareoncalc-root[data-theme="dark"] .tip-results__adj-btn,
.vareoncalc-root.theme-dark .tip-results__adj-btn {
  color: #34d399;
}

.vareoncalc-root[data-theme="dark"] .tip-results__adj-btn:hover:not(:disabled),
.vareoncalc-root.theme-dark .tip-results__adj-btn:hover:not(:disabled) {
  background: rgba(52, 211, 153, 0.18);
}

.vareoncalc-root[data-theme="dark"] .tip-results__adj-count,
.vareoncalc-root.theme-dark .tip-results__adj-count {
  color: #6ee7b7;
}

.vareoncalc-root[data-theme="dark"] .tip-results__footer,
.vareoncalc-root.theme-dark .tip-results__footer {
  border-top-color: rgba(52, 211, 153, 0.15);
}

.vareoncalc-root[data-theme="dark"] .tip-results__copy-btn,
.vareoncalc-root.theme-dark .tip-results__copy-btn {
  color: #6ee7b7;
}

.vareoncalc-root[data-theme="dark"] .tip-results__copy-btn:hover,
.vareoncalc-root.theme-dark .tip-results__copy-btn:hover {
  background: rgba(52, 211, 153, 0.12);
}

/* ── Tip: Responsive ── */
@media (max-width: 410px) {
  .tip-form,
  .tip-grid {
    gap: 8px;
  }

  .vareoncalc-tip-presets {
    gap: 6px;
  }

  .vareoncalc-tip-presets .tip-preset {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    padding: 9px 10px;
  }

  .tip-results__split {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .tip-results__split-main {
    flex-direction: column;
    align-items: center;
  }

  .tip-results__split-icon {
    width: 32px;
    height: 32px;
  }

  .tip-results__split-icon svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 360px) {
  .vareoncalc-tip-presets .tip-preset {
    flex-basis: 100%;
  }
}

@container vareoncalc (max-width: 410px) {
  .tip-form,
  .tip-grid {
    gap: 8px;
  }

  .vareoncalc-tip-presets {
    gap: 6px;
  }

  .vareoncalc-tip-presets .tip-preset {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    padding: 9px 10px;
  }

  .tip-results__split {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .tip-results__split-main {
    flex-direction: column;
    align-items: center;
  }

  .tip-results__split-icon {
    width: 32px;
    height: 32px;
  }

  .tip-results__split-icon svg {
    width: 16px;
    height: 16px;
  }
}

@container vareoncalc (max-width: 360px) {
  .vareoncalc-tip-presets .tip-preset {
    flex-basis: 100%;
  }
}

/* Source: assets/calculators/unit-converter.css */
/* Calculator styles: unit-converter */

/* ====================================
   Unit Converter - Studio Layout
   "Command Center" design with Control Deck + Multi-View
   ==================================== */

/* Panel base styles */
.unit-converter-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Left Panel: Control Deck (Inputs) */
.unit-converter-panel--input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 16px;
}

.unit-converter-section {
  min-width: 0;
  gap: 12px;
}

.unit-converter-section--conversion,
.unit-converter-action {
  grid-column: 1 / -1;
}

/* Right Panel: Multi-View (Results) */
.unit-converter-panel--result {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Category Selector (Context Switch) - prominent at top */
.unit-converter-category {
  margin-bottom: 0;
  min-width: 0;
}

.unit-converter-category__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sc-label-text, var(--sc-card-text, #111827));
  margin-bottom: 8px;
}

.unit-converter-category__select {
  width: 100%;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 16px;
  border: 2px solid var(--sc-accent, #3b82f6);
  border-radius: var(--sc-radius, 8px);
  background: var(--sc-input-bg, #ffffff);
  color: var(--sc-input-text, #111827);
  cursor: pointer;
  transition: all 0.2s ease;
}

.unit-converter-category__select:hover {
  border-color: var(--sc-button-hover, #2563eb);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.unit-converter-category__select:focus {
  outline: none;
  border-color: var(--sc-accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Value Input (The Variable - larger text) */
.unit-converter-value {
  margin-bottom: 0;
  min-width: 0;
}

.unit-converter-value label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--sc-label-text, var(--sc-card-text, #111827));
}

.unit-converter-value__input {
  width: 100%;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 14px 16px;
  border: 1px solid var(--sc-input-border, #d1d5db);
  border-radius: var(--sc-radius, 8px);
  background: var(--sc-input-bg, #ffffff);
  color: var(--sc-input-text, #111827);
  transition: all 0.2s ease;
}

.unit-converter-value__input:focus {
  outline: none;
  border-color: var(--sc-accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.unit-converter-value__input::placeholder {
  color: var(--sc-placeholder, #9ca3af);
  font-weight: 400;
}

/* Unit Sandwich: [From] — [Swap] — [To] */
.unit-converter-units {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: flex-end;
}

.unit-converter-units__field {
  min-width: 0;
}

.unit-converter-units__field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sc-label-text, var(--sc-card-text, #111827));
}

.unit-converter-units__field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sc-input-border, #d1d5db);
  border-radius: var(--sc-radius, 8px);
  background: var(--sc-input-bg, #ffffff);
  color: var(--sc-input-text, #111827);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.unit-converter-units__field select:focus {
  outline: none;
  border-color: var(--sc-accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Swap Button (between From/To) */
.unit-converter-units__swap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: center;
  align-self: center;
  width: 44px;
  height: 44px;
  padding: 0 12px;
  margin-top: 15px;
  margin-bottom: 0;
  border: 1px solid var(--sc-input-border, #d1d5db);
  background: var(--sc-input-bg, #ffffff);
  color: var(--sc-accent, #3b82f6);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  overflow: hidden;
}

.unit-converter-units__swap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sc-accent, #3b82f6);
  opacity: 0.08;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.unit-converter-units__swap:hover {
  border-color: var(--sc-accent, #3b82f6);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.14);
  transform: translateY(-1px);
}

.unit-converter-units__swap:hover::before {
  opacity: 0.16;
}

.unit-converter-units__swap:focus-visible {
  outline: none;
  border-color: var(--sc-accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22), 0 8px 16px rgba(15, 23, 42, 0.14);
}

.unit-converter-units__swap:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.unit-converter-units__swap-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 18px;
  height: 18px;
  line-height: 0;
  transition: transform 0.28s ease;
}

.unit-converter-units__swap-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.unit-converter-units__swap-text {
  position: relative;
  z-index: 1;
  display: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.unit-converter-units__swap.is-animating .unit-converter-units__swap-icon {
  transform: rotate(180deg);
}

/* Convert Button */
.unit-converter-action {
  width: 100%;
  margin-top: 8px;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 600;
}

/* Result Panel Styles */
.unit-converter-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
  padding: var(--sc-card-padding);
  background: var(--sc-result-bg, linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%));
  border-radius: var(--sc-radius, 12px);
  border: 1px solid var(--sc-result-border, rgba(59, 130, 246, 0.2));
}

/* Empty state */
.unit-converter-result__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  color: var(--sc-muted, #6b7280);
}

.unit-converter-result__empty-icon {
  font-size: 48px;
  opacity: 0.4;
  line-height: 1;
}

.unit-converter-result__empty-text {
  font-size: 0.9375rem;
  opacity: 0.7;
}

/* Hide empty state when result is shown */
.unit-converter-result.has-result .unit-converter-result__empty {
  display: none;
}

/* Primary Result Section */
.unit-converter-result__primary {
  text-align: center;
  margin-bottom: 20px;
}

.unit-converter-result__main {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--sc-accent, #3b82f6);
  line-height: 1.2;
  margin-bottom: 8px;
  word-break: break-word;
}

.unit-converter-result__unit {
  font-size: 1.5rem;
  font-weight: 600;
  opacity: 0.85;
}

.unit-converter-result__formula {
  font-size: 0.9375rem;
  color: var(--sc-text-secondary, #64748b);
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  display: inline-block;
}

/* Dark theme adjustments */
.vareoncalc-root.theme-dark .unit-converter-result,
.vareoncalc-root[data-theme="dark"] .unit-converter-result {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 64, 175, 0.15) 100%);
  border-color: rgba(59, 130, 246, 0.3);
}

.vareoncalc-root.theme-dark .unit-converter-result__formula,
.vareoncalc-root[data-theme="dark"] .unit-converter-result__formula {
  background: rgba(0, 0, 0, 0.2);
}

.vareoncalc-root.theme-dark .unit-converter-units__swap,
.vareoncalc-root[data-theme="dark"] .unit-converter-units__swap {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(59, 130, 246, 0.48);
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.45);
}

.vareoncalc-root.theme-dark .unit-converter-units__swap::before,
.vareoncalc-root[data-theme="dark"] .unit-converter-units__swap::before {
  opacity: 0.18;
}

/* Responsive: tighten results on mobile */
@media (max-width: 768px) {
  .unit-converter-panel--input {
    grid-template-columns: 1fr;
  }

  .unit-converter-section--conversion,
  .unit-converter-action {
    grid-column: 1;
  }

  .unit-converter-units,
  .unit-converter-action {
    grid-column: 1;
  }

  .unit-converter-result {
    min-height: 160px;
    padding: var(--sc-card-padding);
  }

  .unit-converter-result__main {
    font-size: 1.75rem;
  }

  .unit-converter-result__unit {
    font-size: 1.125rem;
  }

}

/* Small screens: adjust unit sandwich */
@media (max-width: 480px) {
  .unit-converter-units {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .unit-converter-units__swap {
    order: 1;
    width: 100%;
    min-height: 42px;
    margin-bottom: 0;
    border-radius: var(--sc-radius, 8px);
    padding: 0 14px;
    justify-content: center;
  }

  .unit-converter-units__swap-icon {
    width: 16px;
    height: 16px;
  }

  .unit-converter-units__swap-text {
    display: inline-flex;
    font-size: 0.8125rem;
  }

  .unit-converter-units__field:first-child {
    order: 0;
  }

  .unit-converter-units__field:last-child {
    order: 2;
  }

  .unit-converter-value__input {
    font-size: 1.125rem;
    padding: 12px 14px;
  }

  .unit-converter-category__select {
    padding: 10px 14px;
    font-size: 0.9375rem;
  }
}

/* ====================================
  Unit Converter Refinement Overrides
  ==================================== */

.unit-converter-panel--input {
  align-items: start;
  align-content: start;
  gap: 16px;
}

.unit-converter-section--category,
.unit-converter-section--value {
  height: auto;
  align-self: stretch;
  gap: 0;
  padding-top: 10px;
}

.unit-converter-section--category .vareoncalc-section__header,
.unit-converter-section--value .vareoncalc-section__header {
  display: none;
}

.unit-converter-category {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.unit-converter-category__label {
  margin-bottom: 0;
  color: var(--sc-label-text, var(--sc-card-text, #111827));
}

.unit-converter-category__select {
  border-width: 2px;
  font-weight: 700;
}

.unit-converter-category__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--sc-muted-text, #64748b);
}

.unit-converter-value {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.unit-converter-value__label {
  display: block;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sc-label-text, var(--sc-card-text, #111827));
}

.unit-converter-units__field label.vareoncalc-label--truncate,
.unit-converter-value__label .vareoncalc-tooltip,
.unit-converter-category__label .vareoncalc-tooltip {
  color: var(--sc-label-text, var(--sc-card-text, #111827));
}

.unit-converter-value > .vareoncalc-input-adorned {
  width: 100%;
}

.unit-converter-value > .vareoncalc-input-adorned.vareoncalc-input-adorned--suffix-rail {
  --sc-suffix-rail-min-width: 34px;
  --sc-suffix-rail-max-width: 58px;
  --sc-suffix-rail-fluid-width: 30%;
}

.unit-converter-value__input {
  border-width: 2px;
  font-size: 1.25rem;
  font-weight: 700;
}

.unit-converter-value__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--sc-muted-text, #64748b);
}

.unit-converter-action {
  border-radius: 10px;
}

.unit-converter-result {
  gap: 18px;
  min-height: 220px;
  background: var(--sc-card-bg, #ffffff);
  border-color: var(--sc-card-border, #d1d5db);
}

.unit-converter-result__context {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sc-muted-text, #64748b);
  letter-spacing: 0.01em;
}

.unit-converter-result__primary {
  margin-bottom: 0;
}

.unit-converter-result__main {
  letter-spacing: -0.01em;
}

.unit-converter-result__formula {
  border: 1px dashed color-mix(in srgb, var(--sc-card-border, #d1d5db) 72%, var(--sc-accent, #3b82f6) 28%);
}

.unit-converter-result.is-updated .unit-converter-result__main {
  animation: unitConverterResultPop 220ms ease;
}

@keyframes unitConverterResultPop {
  0% {
    opacity: 0.5;
    transform: translateY(4px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.vareoncalc-root.theme-dark .unit-converter-result,
.vareoncalc-root[data-theme="dark"] .unit-converter-result {
  background: var(--sc-card-bg, rgba(15, 23, 42, 0.9));
  border-color: var(--sc-card-border, rgba(71, 85, 105, 0.6));
}

@media (max-width: 768px) {
  .unit-converter-section--category,
  .unit-converter-section--value {
    height: auto;
    padding-top: 8px;
  }
}

@media (max-width: 480px) {
  .unit-converter-value > .vareoncalc-input-adorned.vareoncalc-input-adorned--suffix-rail {
    --sc-suffix-rail-min-width: 32px;
    --sc-suffix-rail-max-width: 52px;
    --sc-suffix-rail-fluid-width: 26%;
  }
}

@media (max-width: 560px) {
  .unit-converter-result__formula {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .unit-converter-result__main {
    word-break: normal;
    overflow-wrap: break-word;
  }
}

@container vareoncalc (max-width: 560px) {
  .unit-converter-result__formula {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .unit-converter-result__main {
    word-break: normal;
    overflow-wrap: break-word;
  }
}

@media (prefers-reduced-motion: reduce) {
  .unit-converter-result.is-updated .unit-converter-result__main {
    transition: none;
    animation: none;
  }
}

@media (max-width: 410px) {
  .unit-converter-panel--input,
  .unit-converter-units {
    grid-template-columns: 1fr;
  }

  .unit-converter-panel--input {
    gap: 12px;
  }

  .unit-converter-units__swap {
    width: 100%;
    height: 40px;
    margin-top: 0;
  }
}

@media (max-width: 360px) {
  .unit-converter-category__select,
  .unit-converter-value__input {
    padding: 12px 14px;
    font-size: 1rem;
  }
}

@container vareoncalc (max-width: 410px) {
  .unit-converter-panel--input,
  .unit-converter-units {
    grid-template-columns: 1fr;
  }

  .unit-converter-panel--input {
    gap: 12px;
  }

  .unit-converter-units__swap {
    width: 100%;
    height: 40px;
    margin-top: 0;
  }
}

@container vareoncalc (max-width: 360px) {
  .unit-converter-category__select,
  .unit-converter-value__input {
    padding: 12px 14px;
    font-size: 1rem;
  }
}