/* POURA v0.4 portal brand and product separation */
:root {
  --poura-orange: #ff5a1f;
  --poura-orange-2: #ff7a45;
  --poura-ink: #090a0c;
  --poura-card: rgba(22, 24, 28, .88);
  --poura-line: rgba(255, 255, 255, .10);
  --portal-accent: var(--poura-orange);
}

html[data-portal="gyms"] { --portal-accent: #ff7a45; }
html[data-portal="admin"] { --portal-accent: #ff4f2e; }

body {
  background:
    radial-gradient(circle at 82% -10%, rgba(255, 90, 31, .12), transparent 34%),
    var(--bg, #090a0c);
}

.poura-brand-lockup { display: inline-flex; align-items: center; gap: .75rem; vertical-align: middle; }
.poura-brand-lockup img { width: 2.35rem; height: 2.35rem; border-radius: .72rem; box-shadow: 0 10px 28px rgba(255, 90, 31, .18); }
.poura-brand-copy { display: grid; gap: .08rem; text-align: left; }
.poura-brand-copy strong { color: var(--text); font-size: 1.06rem; line-height: 1; letter-spacing: -.02em; }
.poura-brand-copy small { color: var(--text-dim); font-size: .68rem; font-weight: 650; letter-spacing: .03em; }
.poura-brand-lockup.is-compact .poura-brand-copy strong { font-size: 1rem; }
.auth-logo { letter-spacing: 0 !important; }
.auth-logo .poura-brand-lockup img { width: 3.5rem; height: 3.5rem; border-radius: 1rem; }
.auth-logo .poura-brand-copy strong { font-size: 1.7rem; }
.auth-logo .poura-brand-copy small { font-size: .78rem; }

.portal-member .sidebar { border-right-color: rgba(255, 90, 31, .11); }
.portal-gyms .sidebar { background: linear-gradient(180deg, rgba(255, 90, 31, .045), transparent 36%), var(--surface, #111216); }
.portal-admin .sidebar { background: linear-gradient(180deg, rgba(255, 90, 31, .075), transparent 34%), #0c0d10; }

.portal-gyms .sidebar-tagline,
.portal-admin .sidebar-tagline { max-width: 180px; }

.nav-item.active { color: var(--portal-accent) !important; }
.nav-item.active::before { background: var(--portal-accent) !important; }
.btn-primary { background: var(--portal-accent) !important; border-color: var(--portal-accent) !important; }

.portal-page-v04 { max-width: 1500px; margin: 0 auto; }
.v04-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border: 1px solid var(--poura-line);
  border-radius: 1.6rem;
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 90, 31, .19), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: 0 24px 75px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.v04-hero h1 { margin: .3rem 0 .6rem; font-size: clamp(2rem, 4vw, 4.2rem); line-height: .96; letter-spacing: -.055em; }
.v04-hero p { margin: 0; color: var(--text-dim); max-width: 690px; font-size: 1rem; }
.v04-orb { width: 118px; height: 118px; padding: 1.2rem; border: 1px solid rgba(255,255,255,.09); border-radius: 2.2rem; background: rgba(0,0,0,.28); transform: rotate(3deg); flex: 0 0 auto; }
.v04-orb img { width: 100%; height: 100%; }

.v04-grid { display: grid; gap: 1rem; }
.v04-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v04-card {
  padding: 1.35rem;
  border: 1px solid var(--poura-line);
  border-radius: 1.35rem;
  background: var(--poura-card);
  box-shadow: 0 14px 45px rgba(0,0,0,.14);
}
.v04-card h2 { margin: .35rem 0 .6rem; font-size: 1.45rem; letter-spacing: -.025em; }
.v04-card p { color: var(--text-dim); margin: 0; }
.v04-card-kicker, .eyebrow { color: var(--portal-accent); font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }

.v04-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .85rem; margin-top: 1rem; }
.v04-metric { min-height: 145px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2rem; border: 1px solid var(--poura-line); border-radius: 1.3rem; background: rgba(255,255,255,.025); }
.v04-metric strong { font-size: 2.25rem; line-height: 1; letter-spacing: -.06em; }
.v04-metric span { margin-top: .55rem; font-weight: 750; }
.v04-metric small { color: var(--text-dim); margin-top: .22rem; }

.action-stack { display: grid; gap: .65rem; margin-top: 1rem; }
.v04-action-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .95rem 1rem; color: var(--text); text-align: left; border: 1px solid var(--poura-line); border-radius: 1rem; background: rgba(255,255,255,.02); cursor: pointer; }
.v04-action-row:hover { border-color: rgba(255, 90, 31, .45); transform: translateY(-1px); }
.v04-action-row span { display: grid; gap: .15rem; }
.v04-action-row small { color: var(--text-dim); font-weight: 500; }
.v04-action-row b { color: var(--portal-accent); font-size: 1.2rem; }
.retention-card { background: radial-gradient(circle at 100% 0, rgba(255,90,31,.13), transparent 45%), var(--poura-card); }
.roadmap-pill { display: inline-flex; margin-top: 1rem; padding: .45rem .7rem; border-radius: 999px; color: var(--portal-accent); background: rgba(255,90,31,.10); font-weight: 750; font-size: .72rem; }

.coach-tip-loading { color: var(--text-dim); padding: 1.2rem 0; }
.coach-tip { margin-top: .8rem; font-size: 1.15rem; line-height: 1.6; }
.coach-tip-error { color: #ffb4a0; }
.coach-chat-card { display: grid; gap: .8rem; }
.coach-conversation { min-height: 210px; max-height: 390px; overflow: auto; display: flex; flex-direction: column; gap: .65rem; padding: .25rem; }
.coach-message { max-width: 88%; padding: .8rem .9rem; border-radius: 1rem; line-height: 1.45; }
.coach-message.assistant { align-self: flex-start; background: rgba(255,255,255,.055); border: 1px solid var(--poura-line); }
.coach-message.member { align-self: flex-end; color: #1b0d08; background: var(--portal-accent); font-weight: 650; }
.coach-message.pending { opacity: .65; }
.coach-message.error { color: #ffb4a0; }
.coach-ask-form { display: grid; grid-template-columns: 1fr auto; gap: .65rem; }
.quick-prompt-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .8rem; }
.quick-prompt { padding: .65rem .8rem; border: 1px solid var(--poura-line); border-radius: 999px; color: var(--text); background: transparent; cursor: pointer; }
.quick-prompt:hover { border-color: var(--portal-accent); color: var(--portal-accent); }

.portal-access-page { min-height: calc(100vh - 150px); display: grid; place-items: center; }
.portal-access-card { width: min(580px, 100%); padding: clamp(1.4rem, 4vw, 2.4rem); text-align: center; border: 1px solid var(--poura-line); border-radius: 1.7rem; background: var(--poura-card); }
.portal-access-logo { width: 80px; height: 80px; margin-bottom: 1rem; border-radius: 1.3rem; }
.portal-access-card h1 { margin: .4rem 0 .8rem; font-size: 2rem; letter-spacing: -.04em; }
.portal-access-card p { color: var(--text-dim); }
.portal-access-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.workspace-picker { display: grid; gap: .7rem; margin: 1.25rem 0; text-align: left; }

.portal-gyms .page-admin .admin-section,
.portal-gyms .page-admin .gym-section-hero { max-width: 1500px; margin-left: auto; margin-right: auto; }
.gym-section-hero { margin-bottom: 1rem; }
.portal-admin .platform-hero .eyebrow { font-size: 0; }
.portal-admin .platform-hero .eyebrow::after { content: 'POURA CONTROL'; font-size: .7rem; }
.portal-admin .platform-hero h1 { font-size: clamp(2rem,4vw,3.5rem); }
.portal-admin .platform-page { max-width: 1500px; margin: 0 auto; }

@media (max-width: 1050px) {
  .v04-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .v04-grid-2 { grid-template-columns: 1fr; }
  .v04-hero { align-items: flex-start; flex-direction: column; }
  .v04-orb { width: 86px; height: 86px; }
  .v04-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .v04-metric { min-height: 120px; }
  .coach-ask-form { grid-template-columns: 1fr; }
  .portal-member .bottom-nav .nav-item:nth-of-type(n+6),
  .portal-gyms .bottom-nav .nav-item:nth-of-type(n+6) { display: none; }
}
@media (max-width: 430px) {
  .v04-metric-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .v04-metric { padding: .9rem; }
  .v04-metric strong { font-size: 1.8rem; }
}
.poura-install-button { margin-right: .5rem; white-space: nowrap; }
@media (max-width: 760px) { .poura-install-button { display: none; } }