/* ===== App Screen Mockups ===== */

/* Phone container — all screens same size */
.mockup-phone {
  width: 300px;
  margin: 0 auto 24px;
  background: #0d1117;
  border-radius: 40px;
  padding: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 60px rgba(59, 130, 246, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.5);
}

.mockup-screen {
  background: #0b1120;
  border-radius: 30px;
  padding: 20px 16px 16px;
  height: 660px;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, sans-serif;
  text-align: left;
}

/* --- Shared elements --- */
.m-back { font-size: 0.82rem; font-weight: 500; color: #3B82F6; text-align: left; }
.m-title { font-size: 1.25rem; font-weight: 700; color: #fff; }
.m-subtitle { font-size: 0.72rem; color: #6b7280; }
.m-spacer { flex: 1; }
.m-row { display: flex; align-items: center; }
.m-between { justify-content: space-between; }
.m-center { justify-content: center; }
.m-col { display: flex; flex-direction: column; }
.m-gap-8 { gap: 8px; }
.m-gap-10 { gap: 10px; }
.m-gap-12 { gap: 12px; }
.m-mt-auto { margin-top: auto; }

/* --- Onboarding screen --- */
.m-progress-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 20px;
}
.m-progress-seg {
  height: 3px;
  border-radius: 2px;
  flex: 1;
}
.m-progress-seg.active { background: #3B82F6; }
.m-progress-seg.inactive { background: #1f2937; }
.m-close-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: #6b7280;
  flex-shrink: 0;
  margin-left: 8px;
}
.m-option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #1a2236;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 16px;
}
.m-option-card.selected {
  background: rgba(168, 85, 247, 0.08);
  border: 2px solid #a855f7;
}
.m-option-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.m-option-title { font-size: 0.82rem; font-weight: 600; color: #fff; white-space: nowrap; }
.m-option-sub { font-size: 0.7rem; color: #6b7280; }
.m-btn-primary {
  background: #3B82F6;
  color: #fff;
  text-align: center;
  padding: 14px 0;
  border-radius: 28px;
  font-weight: 600;
  font-size: 0.82rem;
}

/* --- Run detail screen --- */
.m-run-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.m-run-desc {
  font-size: 0.72rem;
  color: #e5e7eb;
  line-height: 1.6;
}
.m-run-distance {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}
.m-toggle {
  display: flex;
  background: #1a2236;
  border-radius: 10px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.m-toggle-opt {
  flex: 1;
  text-align: center;
  padding: 7px;
  font-size: 0.75rem;
  color: #6b7280;
  border-radius: 8px;
}
.m-toggle-opt.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 600;
}
.m-segment-card {
  background: #1a2236;
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.m-segment-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.m-segment-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.m-segment-name { font-size: 0.8rem; font-weight: 600; color: #fff; }
.m-segment-pace { font-size: 0.62rem; color: #6b7280; }
.m-segment-value { font-size: 0.75rem; color: #9ca3af; }
.m-segment-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 10px 0;
}
.m-interval-detail {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  margin-left: 16px;
}
.m-interval-bar {
  display: inline-block;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  margin-right: 6px;
  vertical-align: middle;
}
.m-btn-start {
  background: #3B82F6;
  color: #fff;
  text-align: center;
  padding: 13px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.m-btn-watch {
  background: transparent;
  border: 1.5px solid rgba(59, 130, 246, 0.35);
  color: #3B82F6;
  text-align: center;
  padding: 13px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.m-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 12px;
}
.m-tab {
  text-align: center;
  font-size: 0.55rem;
  color: #6b7280;
  padding: 4px 8px;
}
.m-tab.active {
  color: #3B82F6;
  background: rgba(59, 130, 246, 0.12);
  border-radius: 10px;
  padding: 4px 12px;
}
.m-tab svg {
  display: block;
  margin: 0 auto 2px;
}

/* --- Workout screen --- */
.m-exercise-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #0f1729 0%, #111d33 100%);
  border-radius: 12px;
  position: relative;
}
.m-play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
}
.m-pills {
  display: flex;
  gap: 5px;
}
.m-pill {
  font-size: 0.62rem;
  color: #9ca3af;
  background: #1a2236;
  padding: 5px 8px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}
.m-set-header {
  display: flex;
  font-size: 0.55rem;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 4px 6px;
}
.m-set-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1a2236;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 9px 10px;
}
.m-set-row.active {
  background: rgba(59, 130, 246, 0.06);
  border: 1.5px solid #3B82F6;
}
.m-set-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #6b7280;
}
.m-set-row.active .m-set-num {
  background: #3B82F6;
  color: #fff;
  font-weight: 700;
}
.m-set-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 0.78rem;
  color: #fff;
  min-width: 34px;
  text-align: center;
  flex: 1;
}
.m-set-val {
  font-size: 0.78rem;
  color: #9ca3af;
  min-width: 34px;
  text-align: center;
  padding: 5px 8px;
  flex: 1;
}
.m-set-label {
  font-size: 0.6rem;
  color: #6b7280;
}
.m-set-lbs {
  font-size: 0.58rem;
  font-weight: 600;
  color: #3B82F6;
  padding: 4px 7px;
  border-radius: 6px;
}
.m-set-row.active .m-set-lbs {
  background: #3B82F6;
  color: #fff;
}
.m-set-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}
.m-set-row.active .m-set-check {
  border: 2px solid #3B82F6;
}
.m-set-row:not(.active) .m-set-check {
  color: #6b7280;
}
.m-add-set {
  text-align: center;
  font-size: 0.75rem;
  color: #6b7280;
  padding: 8px 0;
}
.m-btn-outline {
  flex: 1;
  text-align: center;
  padding: 14px 0;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d1d5db;
  font-weight: 600;
  font-size: 0.82rem;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .mockup-phone {
    width: 260px;
    border-radius: 34px;
    padding: 8px;
  }
  .mockup-screen {
    border-radius: 26px;
    padding: 16px 12px 12px;
    height: 590px;
  }
  .m-title { font-size: 1.1rem; }
  .m-run-title { font-size: 1.1rem; }
  .m-run-distance { font-size: 1.3rem; }
  .m-option-card { padding: 12px; gap: 10px; }
  .m-option-icon { width: 34px; height: 34px; }
  .m-option-title { font-size: 0.8rem; }
  .m-pill { font-size: 0.58rem; padding: 4px 6px; }
}