/* HipUp finished-product shell.
   Loaded after page-local styles to unify the current vanilla app without a framework rewrite. */
:root {
  --hipup-bg: #f7f8f2;
  --hipup-surface: #ffffff;
  --hipup-surface-soft: #f1f7ef;
  --hipup-border: #dde8da;
  --hipup-border-strong: #bdd7bd;
  --hipup-ink: #14172b;
  --hipup-body: #4e5266;
  --hipup-muted: #747889;
  --hipup-green: #009b70;
  --hipup-green-dark: #006b4f;
  --hipup-green-soft: #dff7ed;
  --hipup-gold: #f7aa16;
  --hipup-gold-dark: #b66f00;
  --hipup-gold-soft: #fff3ce;
  --hipup-coral: #ef6f5a;
  --hipup-info: #2d7dd2;
  --hipup-radius: 10px;
  --hipup-radius-sm: 8px;
  --hipup-shadow: 0 10px 28px rgba(24, 31, 44, 0.08);
  --hipup-shadow-soft: 0 4px 14px rgba(24, 31, 44, 0.06);
  --hipup-focus: 0 0 0 3px rgba(0, 155, 112, 0.18);
}

html {
  text-rendering: optimizeLegibility;
}

body.hipup-finished-shell {
  background:
    radial-gradient(circle at top left, rgba(0, 155, 112, 0.08), transparent 34rem),
    linear-gradient(180deg, #fbfcf8 0%, var(--hipup-bg) 100%);
  color: var(--hipup-body);
}

.hipup-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  transform: translateY(-160%);
  background: var(--hipup-ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--hipup-radius-sm);
  font-weight: 800;
}

.hipup-skip-link:focus {
  transform: translateY(0);
  outline: none;
  box-shadow: var(--hipup-focus);
}

.top-nav,
.video-top-nav {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(221, 232, 218, 0.86) !important;
  box-shadow: 0 8px 24px rgba(24, 31, 44, 0.06) !important;
  backdrop-filter: blur(16px);
}

.top-nav .logo,
.video-top-nav > a:first-child,
.brand,
.logo-text {
  color: var(--hipup-green) !important;
  letter-spacing: -0.03em !important;
}

.top-nav .admin-badge,
.admin-badge {
  border-radius: 999px !important;
  background: var(--hipup-ink) !important;
  color: #fff !important;
}

.nav-links a,
.nav-right a,
.video-top-nav a,
.user-dropdown a {
  border-radius: 999px;
}

.nav-links a,
.nav-right a {
  min-height: 38px;
  padding: 8px 10px;
}

.nav-links a.active,
.nav-links a:hover,
.nav-right a:hover,
.video-top-nav a:hover {
  background: var(--hipup-green-soft);
  color: var(--hipup-green-dark) !important;
}

.app-main {
  width: min(100% - 32px, var(--max-width, 1200px));
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.card,
.summary-card,
.detail-card,
.stat-card,
.admin-table-wrap,
.operator-card,
.path-impact-card,
.lane-card,
.command-card,
.modal,
.pricing-card,
.program-card,
.video-card,
.activity-panel,
.review-map-card,
.review-guide,
.auth-card {
  border: 1px solid rgba(221, 232, 218, 0.92) !important;
  border-radius: var(--hipup-radius) !important;
  box-shadow: var(--hipup-shadow-soft) !important;
}

.member-overview,
.launch-hero,
.page-header,
.tracker-hero,
.path-hero {
  border-radius: var(--hipup-radius) !important;
  border: 1px solid rgba(221, 232, 218, 0.86);
  background:
    linear-gradient(135deg, rgba(223, 247, 237, 0.92), rgba(255, 243, 206, 0.72)) !important;
  box-shadow: var(--hipup-shadow-soft);
}

h1, h2, h3,
.member-overview-title,
.page-title,
.section-heading,
.stat-card-value {
  color: var(--hipup-ink) !important;
  letter-spacing: 0 !important;
}

p,
.page-subtitle,
.member-overview-copy,
.form-help,
.import-help {
  color: var(--hipup-body);
}

.btn,
button.btn,
.overview-btn,
.filter-pill,
.service-btn,
.provider-filter-btn,
.calendar-nav-btn,
.calendar-text-btn,
.tab-btn,
.nav-link,
.card-action {
  border-radius: var(--hipup-radius-sm) !important;
  letter-spacing: 0 !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.btn:hover,
.overview-btn:hover,
.filter-pill:hover,
.service-btn:hover,
.provider-filter-btn:hover,
.calendar-nav-btn:hover,
.calendar-text-btn:hover,
.tab-btn:hover,
.card-action:hover {
  transform: translateY(-1px);
}

.btn-primary,
.overview-btn.primary,
.service-btn.active,
.provider-filter-btn.active,
.filter-pill.active,
.tab-btn.active {
  background: var(--hipup-green) !important;
  border-color: var(--hipup-green) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(0, 155, 112, 0.18) !important;
}

.btn-gold,
.btn-primary.btn-gold {
  background: var(--hipup-gold) !important;
  border-color: var(--hipup-gold) !important;
  color: #171400 !important;
}

.btn-outline,
.overview-btn,
.calendar-text-btn {
  background: var(--hipup-surface) !important;
  border-color: var(--hipup-border) !important;
  color: var(--hipup-ink) !important;
}

input,
select,
textarea,
.input,
.search-input,
.form-input {
  border-radius: var(--hipup-radius-sm) !important;
  border: 1px solid var(--hipup-border) !important;
  background: #fff !important;
  color: var(--hipup-ink) !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.search-input:focus,
.form-input:focus,
button:focus-visible,
a:focus-visible {
  outline: none !important;
  border-color: var(--hipup-green) !important;
  box-shadow: var(--hipup-focus) !important;
}

.tab-nav {
  background: rgba(223, 247, 237, 0.58) !important;
  border: 1px solid rgba(221, 232, 218, 0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.tab-btn.active {
  color: #fff !important;
}

.command-center-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.command-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  background: #fff;
}

.command-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.command-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--hipup-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hipup-green-soft);
  color: var(--hipup-green-dark);
  flex: 0 0 auto;
}

.command-icon.gold {
  background: var(--hipup-gold-soft);
  color: var(--hipup-gold-dark);
}

.command-card h4 {
  margin: 0 0 4px;
  color: var(--hipup-ink);
}

.command-card p {
  margin: 0;
  color: var(--hipup-body);
  line-height: 1.45;
}

.command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tier-badge,
.launch-status,
.status-pill,
.entry-chip,
.track-pill {
  border-radius: 999px !important;
  letter-spacing: 0.03em !important;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

th {
  color: var(--hipup-muted) !important;
  letter-spacing: 0.06em !important;
}

tr:hover td {
  background: rgba(223, 247, 237, 0.32);
}

.table-empty,
.empty-state,
.continue-watching-empty,
.detail-item-empty {
  border-radius: var(--hipup-radius-sm) !important;
  border: 1px dashed var(--hipup-border-strong) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--hipup-body) !important;
}

.bottom-nav {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid rgba(221, 232, 218, 0.92) !important;
  box-shadow: 0 -10px 28px rgba(24, 31, 44, 0.08) !important;
  backdrop-filter: blur(16px);
}

.bottom-nav a {
  min-width: 48px;
  color: var(--hipup-muted) !important;
}

.bottom-nav a.active {
  color: var(--hipup-green) !important;
}

.hipup-placeholder-thumb,
.thumb-sm:not([src]),
.video-thumbnail:empty {
  background:
    radial-gradient(circle at 72% 22%, rgba(247, 170, 22, 0.42), transparent 30%),
    linear-gradient(135deg, #dff7ed, #fff3ce) !important;
}

.hipup-finished-shell .review-walkthrough-panel,
.hipup-finished-shell .review-guide-float {
  border-radius: var(--hipup-radius) !important;
  box-shadow: var(--hipup-shadow) !important;
}

@media (max-width: 1024px) {
  .top-nav {
    flex-wrap: wrap;
    gap: 8px 12px;
    height: auto !important;
    min-height: 64px;
  }

  .top-nav .nav-links {
    order: 3;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    padding-bottom: 2px;
  }

  .top-nav .nav-links a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .top-nav .nav-right,
  .top-nav .hipup-notification-wrap,
  .top-nav .user-menu {
    flex: 0 0 auto;
  }

  .tab-nav {
    overflow-x: auto;
    justify-content: flex-start !important;
  }

  .tab-btn {
    flex: 0 0 auto !important;
    min-width: 104px;
  }

  .stats-grid,
  .launch-summary-grid,
  .member-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .app-main {
    width: min(100% - 20px, var(--max-width, 1200px));
    padding-bottom: 92px !important;
  }

  .top-nav {
    min-height: 60px !important;
    padding: 8px 14px !important;
  }

  .stats-grid,
  .launch-summary-grid,
  .member-summary-grid,
  .member-detail-grid,
  .coaching-overview-grid,
  .program-overview-grid,
  .tracker-hero,
  .tracker-grid,
  .path-hero,
  .path-grid,
  .setup-form,
  .milestone-lane,
  .grid,
  .path-admin-grid,
  .operator-grid,
  .command-center-grid,
  .content-import-grid {
    grid-template-columns: 1fr !important;
  }

  .modal {
    width: min(100% - 18px, 720px) !important;
    max-height: calc(100vh - 24px) !important;
  }

  .calendar-head,
  .member-overview-head,
  .panel-head,
  .page-header {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .calendar-controls,
  .hero-actions,
  .member-overview-actions,
  .summary-actions,
  .program-overview-actions {
    width: 100%;
    justify-content: flex-start !important;
  }

  .content-import-grid,
  .import-actions,
  .import-textarea,
  .decision-answer,
  #contentImportCsv,
  #contentImportNotes,
  #contentImportState {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .import-actions {
    align-items: flex-start !important;
  }

  .import-actions > * {
    max-width: 100% !important;
  }

  #contentImportNotes {
    width: 100% !important;
  }
}

@media (max-width: 520px) {
  .calendar-grid,
  .activity-calendar-mini {
    font-size: 0.82rem;
  }

  .day-cell {
    min-height: 84px !important;
    padding: 7px !important;
  }

  .entry-chip {
    font-size: 0.62rem !important;
  }

  .program-overview-stats,
  .activity-summary-grid,
  .summary-stats {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}