/* CCS module preview layout — UX-3.0 */

.tb-app-preview .tb-mp { max-width: 52rem; margin: 0 auto; }

.tb-mp-banner {

  margin: 0 0 1.25rem;

  padding: 0.65rem 1rem;

  border-radius: var(--tb-radius-md, 0.5rem);

  border: 1px solid rgba(45, 212, 191, 0.25);

  background: rgba(45, 212, 191, 0.08);

  font-size: 0.875rem;

  color: var(--tb-color-text-muted, #94a3b8);

}

.tb-mp-hero { margin-bottom: 2rem; }

.tb-mp-hero__title { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 0.5rem; color: #f8fafc; }

.tb-mp-hero__lead { font-size: 1.0625rem; line-height: 1.55; margin: 0 0 1.25rem; max-width: 38rem; }

.tb-mp-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }

.tb-mp-section { margin-bottom: 2rem; }

.tb-mp-section__title {

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--tb-color-accent, #5eead4);

  margin: 0 0 0.75rem;

}

.tb-mp-kpi-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));

  gap: 0.75rem;

}

.tb-mp-kpi {

  padding: 1rem;

  border-radius: var(--tb-radius-md, 0.5rem);

  border: 1px solid var(--tb-color-border-strong, #334155);

  background: var(--tb-color-surface, #1e293b);

}

.tb-mp-kpi__value { font-size: 1.5rem; font-weight: 700; color: #f8fafc; margin: 0.15rem 0; }

.tb-mp-kpi__label { font-size: 0.75rem; color: var(--tb-color-text-muted, #94a3b8); margin: 0; }

.tb-mp-benefits {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));

  gap: 0.75rem;

}

.tb-mp-benefit {

  padding: 1rem;

  border-radius: var(--tb-radius-md, 0.5rem);

  border: 1px solid var(--tb-color-border, #334155);

  background: rgba(15, 23, 42, 0.5);

}

.tb-mp-benefit strong { display: block; color: #f8fafc; margin-bottom: 0.35rem; font-size: 0.9375rem; }

.tb-mp-benefit p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--tb-color-text-muted, #94a3b8); }

.tb-mp-workflow {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));

  gap: 0.75rem;

  list-style: none;

  margin: 0;

  padding: 0;

  counter-reset: mp-step;

}

.tb-mp-workflow li {

  counter-increment: mp-step;

  padding: 0.85rem 0.85rem 0.85rem 2.5rem;

  position: relative;

  border-radius: var(--tb-radius-md, 0.5rem);

  border: 1px solid var(--tb-color-border, #334155);

  font-size: 0.875rem;

  line-height: 1.45;

}

.tb-mp-workflow li::before {

  content: counter(mp-step);

  position: absolute;

  left: 0.75rem;

  top: 0.85rem;

  width: 1.25rem;

  height: 1.25rem;

  border-radius: 999px;

  background: rgba(94, 234, 212, 0.15);

  color: var(--tb-color-accent, #5eead4);

  font-size: 0.75rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

}

.tb-mp-table-wrap { overflow-x: auto; border-radius: var(--tb-radius-md, 0.5rem); border: 1px solid var(--tb-color-border-strong, #334155); }

.tb-mp-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; text-align: left; }

.tb-mp-table th, .tb-mp-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--tb-color-border, #334155); }

.tb-mp-table th { background: #1e293b; color: #f8fafc; font-weight: 600; }

.tb-mp-table tr:last-child td { border-bottom: none; }

.tb-mp-connected {

  padding: 1rem 1.15rem;

  border-left: 3px solid var(--tb-color-accent, #5eead4);

  background: rgba(15, 23, 42, 0.6);

  border-radius: 0 var(--tb-radius-md, 0.5rem) var(--tb-radius-md, 0.5rem) 0;

  font-size: 0.9375rem;

  line-height: 1.55;

  margin: 0;

}

.tb-mp-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--tb-color-border, #334155); }

.tb-mp-details { margin-top: 1.5rem; }

.tb-mp-details summary {

  cursor: pointer;

  font-size: 0.875rem;

  font-weight: 600;

  color: var(--tb-color-accent, #5eead4);

  padding: 0.5rem 0;

}

.tb-mp-details ul { margin: 0.5rem 0 0; padding-left: 1.25rem; font-size: 0.875rem; line-height: 1.55; color: var(--tb-color-text-muted, #94a3b8); }

@media (max-width: 40rem) {

  .tb-mp-kpi-grid { grid-template-columns: 1fr 1fr; }

  .tb-mp-benefits { grid-template-columns: 1fr; }
  .tb-mp-hero__title { font-size: 1.35rem; }
  .tb-mp-cta .tb-btn { width: 100%; justify-content: center; }

}

@media (max-width: 480px) {
  .tb-mp-kpi-grid { grid-template-columns: 1fr; }
  .tb-mp-workflow { grid-template-columns: 1fr; }
}