@media (max-width: 768px) {

/* =========================
   INTEREST PANEL — FIXED SWIPE TOOL
========================= */

#cc-interest {
  position: relative;
  z-index: 1900;
  outline: none !important;
}

#cc-interest > .cc-collapsible-header {
  display: none !important;
}

#cc-interest.is-collapsed:not(.is-mobile-tool-active) .cc-collapsible-content {
  display: none !important;
}

#cc-interest.is-mobile-tool-active {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2600 !important;

  width: 100vw !important;
  height: 100svh !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch;
  background: var(--bg-main);
}

#cc-interest.is-mobile-tool-active .cc-collapsible-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  max-height: none !important;
  height: auto !important;

  padding: 18px 0 32px !important;
}

/* =========================
   INTEREST GRID — STACKED TOOL CARDS
========================= */

.interest-reality-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;

  overflow: visible !important;
  padding: 8px 14px 28px !important;
  margin: 0 !important;
}

/* =========================
   INPUT CARD
========================= */

.interest-inputs-card {
  width: 100% !important;
  max-width: 100% !important;

  padding: 14px !important;
  border-radius: 22px !important;
}

.interest-note-box,
.payoff-target-group:has(#balance-trap-text),
.payoff-target-group .breakdown-header p {
  display: none !important;
}

.interest-inputs-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.slider-group {
  padding: 12px !important;
  border-radius: 16px !important;
}

/* =========================
   PAYOFF OPTIONS
========================= */

.payoff-options-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.payoff-option-box {
  min-height: 76px;
  padding: 10px 8px;
  border-radius: 16px;
  text-align: center;
}

.payoff-option-box span {
  font-size: 10.5px;
}

.payoff-option-value {
  font-size: 15px;
  font-weight: 900;
}

.payoff-option-box small {
  display: none !important;
}

/* =========================
   OUTPUT / CHART CARD
========================= */

.interest-snapshot-card {
  width: 100% !important;
  max-width: 100% !important;

  padding: 14px !important;
  border-radius: 22px !important;
}

.interest-snapshot-card > .snapshot-metric,
.interest-snapshot-card > .strategy-summary-box {
  display: none !important;
}

.interest-snapshot-card h3 {
  text-align: center;
  font-size: 18px !important;
  line-height: 1.1;
}

.chart-container {
  min-height: 280px !important;
  margin-top: 10px;
}

#balance-path-chart {
  max-height: 260px !important;
}

/* =========================
   VISUAL SEPARATOR
========================= */

.interest-inputs-card::after {
  content: "";
  display: block;
  height: 20px;
  margin-top: 6px;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 0, 0, 0.08)
  );

  border-radius: 0 0 20px 20px;
}

}