/* ==========================================================================
   Portal surfaces — Login + Trainer dashboard
   ========================================================================== */

/* ---- Login ------------------------------------------------------------- */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}
.auth-aside {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--glass-line);
}
.auth-aside::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 70% at 20% 10%, rgba(59, 103, 244, 0.34), transparent 60%),
    radial-gradient(70% 60% at 90% 100%, rgba(51, 179, 166, 0.18), transparent 62%);
}
.auth-aside .brand { font-size: 21px; }
.auth-quote {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.12;
  max-width: 16ch; text-wrap: balance;
}
.auth-quote span { color: var(--accent-bright); }
.auth-aside .who { margin-top: 18px; color: var(--ink-2); font-size: 14px; }
.auth-mini {
  display: flex; gap: 22px; margin-top: 26px; flex-wrap: wrap;
}
.auth-mini .am .v { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-feature-settings: var(--num-feat); }
.auth-mini .am .k { font-size: 12px; color: var(--ink-3); }

.auth-main {
  display: grid;
  place-items: center;
  padding: clamp(28px, 4vw, 48px);
}
.auth-card { width: 100%; max-width: 380px; }
.auth-card .top { display: flex; justify-content: flex-end; margin-bottom: clamp(20px, 8vh, 64px); }
.auth-card h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.auth-card .sub { color: var(--ink-2); margin-top: 8px; font-size: 15px; }

.btn-apple {
  width: 100%; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px; border-radius: var(--r-pill); border: none; cursor: pointer;
  background: #fff; color: #000; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  transition: opacity 0.16s var(--ease-out);
}
.btn-apple:hover { opacity: 0.9; }
.auth-or {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 4px;
  color: var(--ink-3); font-size: 12.5px;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--glass-line); }

.form { margin-top: 12px; display: grid; gap: 16px; }
.field-group { display: grid; gap: 7px; }
.field-group label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.input {
  width: 100%;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-field);
  padding: 13px 14px;
  transition: border-color 0.16s var(--ease-out), background 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out);
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: var(--glass-line-2); }
.input:focus {
  outline: none;
  border-color: var(--accent-bright);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-row { display: flex; align-items: center; justify-content: space-between; }
.field-row .lk { font-size: 13px; color: var(--accent-bright); font-weight: 500; }
.checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.checkbox input { accent-color: var(--accent); width: 15px; height: 15px; }
.form .btn-primary { width: 100%; padding: 14px; margin-top: 4px; }
.demo-note {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; color: var(--ink-3);
  background: var(--accent-soft);
  border: 1px solid rgba(106, 141, 255, 0.22);
  border-radius: var(--r-field);
  padding: 11px 13px;
}
.demo-note b { color: var(--ink-2); font-weight: 600; }
.auth-alt { margin-top: 22px; font-size: 14px; color: var(--ink-3); text-align: center; }
.auth-alt a { color: var(--accent-bright); font-weight: 600; }

@media (max-width: 820px) {
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: 256px 1fr;
  min-height: 100vh;
}

/* Sidebar */
.side {
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  display: flex; flex-direction: column;
  padding: 20px 16px;
  border-right: 1px solid var(--glass-line);
  background: rgba(13, 16, 26, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.side .brand { padding: 8px 10px; margin-bottom: 18px; }
.side-nav { display: grid; gap: 3px; }
.side-nav .nl {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--ink-2); font-size: 14.5px; font-weight: 500;
  transition: background 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
.side-nav .nl svg { width: 19px; height: 19px; flex: none; opacity: 0.85; }
.side-nav .nl:hover { background: var(--glass); color: var(--ink); }
.side-nav .nl.active { background: var(--accent-soft); color: #fff; }
.side-nav .nl.active svg { opacity: 1; color: var(--accent-bright); }
.side-nav .nl .badge {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--accent); color: #fff;
  padding: 1px 7px; border-radius: 999px;
}
.side-sep { margin: 16px 10px; height: 1px; background: var(--glass-line); }
.side-foot { margin-top: auto; padding-top: 16px; }
.side-upgrade {
  padding: 16px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(59,103,244,0.18), rgba(89,60,230,0.10));
  border: 1px solid var(--glass-line-2);
}
.side-upgrade .ut { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.side-upgrade .us { font-size: 12.5px; color: var(--ink-2); margin: 6px 0 14px; line-height: 1.45; }
.side-upgrade .btn { width: 100%; padding: 10px; font-size: 13px; }
/* Sign out — a footer action, styled to line up like the nav items above. */
.side-signout {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 14px; padding: 10px 12px; border-radius: 12px;
  background: none; border: none; cursor: pointer; text-align: left;
  color: var(--ink-2); font-size: 14.5px; font-weight: 500;
  transition: background 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
.side-signout svg { width: 18px; height: 18px; flex: none; opacity: 0.85; }
.side-signout:hover { background: var(--glass); color: var(--ink); }

/* Topbar */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: 16px;
  padding: 14px clamp(20px, 3vw, 36px);
  border-bottom: 1px solid var(--glass-line);
  background: rgba(15, 18, 30, 0.66);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.topbar .side-toggle {
  display: none; width: 40px; height: 40px; border-radius: 11px;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink);
  align-items: center; justify-content: center; cursor: pointer;
}
.search {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-pill);
  padding: 9px 16px; flex: 1; max-width: 360px; min-width: 0;
  color: var(--ink-3);
}
.search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-family: inherit; font-size: 14px; color: var(--ink);
}
.search input::placeholder { color: var(--ink-3); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--glass-line);
  color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; position: relative;
  transition: background 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
.icon-btn:hover { background: var(--glass-2); color: var(--ink); }
.icon-btn .ping {
  position: absolute; top: 9px; right: 9px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--cat-chest);
  border: 2px solid #131722;
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--cat-shoulders), var(--accent), var(--cat-hamstrings));
  display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.16);
}
/* When the coach has a profile photo, show it instead of the gradient + initials. */
.avatar.has-img { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Views (sidebar tabs switch these client-side) */
.main { min-height: 100dvh; }
.pview { flex: 1; min-height: 0; }

/* Content */
.content { padding: clamp(22px, 3vw, 36px); display: grid; gap: clamp(18px, 2.4vw, 26px); }

/* Placeholder for tabs not built yet */
.view-soon {
  display: grid; place-items: center; text-align: center;
  min-height: calc(100dvh - 200px); padding: 40px;
}
.view-soon .vs-card { max-width: 420px; }
.view-soon h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.view-soon p { color: var(--ink-2); margin-top: 10px; line-height: 1.55; }
.view-soon .vs-ico {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 18px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-bright);
}

/* ==========================================================================
   Messages view — two-pane (client list + conversation)
   ========================================================================== */
.pview.msgs { display: flex; min-height: 0; height: calc(100dvh - 69px); }

.msgs-list {
  width: 300px; flex: none; border-right: 1px solid var(--glass-line);
  overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px;
}
.msgs-list-head { padding: 6px 10px 12px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.msg-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px;
  border-radius: 13px; cursor: pointer; text-align: left; width: 100%;
  background: none; border: none; font: inherit; color: var(--ink);
  transition: background 0.14s var(--ease-out);
}
.msg-item:hover { background: var(--glass); }
.msg-item.active { background: var(--accent-soft); }
.msg-item .client-av { width: 42px; height: 42px; font-size: 14px; flex: none; }
.msg-item .mi-meta { min-width: 0; flex: 1; }
.msg-item .mi-top { display: flex; align-items: baseline; gap: 8px; }
.msg-item .mi-name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item .mi-time { margin-left: auto; font-size: 11px; color: var(--ink-3); flex: none; }
.msg-item .mi-prev { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.msg-item .mi-un { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-bright); flex: none; }

.msgs-conv { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.msgs-conv-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; border-bottom: 1px solid var(--glass-line); flex: none;
}
.msgs-conv-head .cc-back {
  display: none; background: var(--glass); border: 1px solid var(--glass-line);
  color: var(--ink); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 18px;
}
.msgs-conv-head .cc-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.msgs-conv-head .cc-sub { font-size: 12px; color: var(--ink-3); }
.msgs-empty { flex: 1; display: grid; place-items: center; color: var(--ink-3); padding: 40px; text-align: center; }

@media (max-width: 760px) {
  .pview.msgs { height: calc(100dvh - 61px); }
  .msgs-list { width: 100%; }
  .pview.msgs.show-conv .msgs-list { display: none; }
  .pview.msgs:not(.show-conv) .msgs-conv { display: none; }
  .msgs-conv-head .cc-back { display: grid; place-items: center; }
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); font-weight: 700; letter-spacing: -0.03em; }
.page-head .ph-sub { color: var(--ink-2); margin-top: 6px; font-size: 15px; }
.page-head .ph-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-l); }
.stat {
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
}
.stat .stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat .si { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; }
.stat .delta { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.stat .delta.up { color: var(--cat-quads); }
.stat .delta.down { color: var(--cat-chest); }
.stat .delta.flat { color: var(--ink-3); }
.stat .sv { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; font-feature-settings: var(--num-feat); line-height: 1; }
.stat .sv small { font-size: 15px; color: var(--ink-3); font-weight: 600; }
.stat .sk { font-size: 13px; color: var(--ink-2); }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }

/* Dashboard grid */
.dash-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(18px, 2.4vw, 26px);
  align-items: start;
}
@media (max-width: 1080px) { .dash-grid { grid-template-columns: 1fr; } }

.panel { padding: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.panel-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.panel-head .arrow-link { font-size: 13.5px; }

/* Quick actions */
.actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.action {
  display: flex; align-items: center; gap: 13px;
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-tile);
  cursor: pointer; text-align: left;
  font-family: inherit; color: var(--ink);
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.action:hover { transform: translateY(-2px); border-color: var(--glass-line-2); background: var(--glass-2); }
.action .ai { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; }
.action .at { display: block; font-weight: 600; font-size: 15px; }
.action .as { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 560px) { .actions { grid-template-columns: 1fr; } }

/* Client list */
.client-row {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 8px;
  border-radius: 12px;
  transition: background 0.16s var(--ease-out);
}
.client-row:hover { background: var(--glass); }
.client-row + .client-row { border-top: 1px solid rgba(255,255,255,0.05); }
.client-av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff;
}
.client-meta { min-width: 0; }
.client-meta .cn { font-weight: 600; font-size: 15px; }
.client-meta .cd { font-size: 12.5px; color: var(--ink-3); }
.client-prog { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.client-prog .pct { width: 96px; }
.bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.09); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; }
.client-prog .pv { font-size: 13px; font-weight: 700; color: var(--ink-2); font-feature-settings: var(--num-feat); width: 38px; text-align: right; }
.tag-pill {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--glass-line-2);
}
@media (max-width: 560px) { .client-prog .pct { display: none; } }

/* Schedule list */
.sched-item { display: flex; gap: 14px; padding: 12px 6px; }
.sched-item + .sched-item { border-top: 1px solid rgba(255,255,255,0.05); }
.sched-time {
  flex: none; width: 58px; text-align: center;
}
.sched-time .t { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; font-feature-settings: var(--num-feat); }
.sched-time .ap { font-size: 11px; color: var(--ink-3); }
.sched-body { flex: 1; padding-left: 14px; border-left: 1px solid var(--glass-line); min-width: 0; }
.sched-body .st { font-weight: 600; font-size: 14.5px; }
.sched-body .ss { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.sched-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; }

/* Revenue / momentum chart panel */
.rev-head { display: flex; align-items: baseline; gap: 12px; }
.rev-val { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; font-feature-settings: var(--num-feat); }
.rev-delta { font-size: 13px; font-weight: 600; color: var(--cat-quads); }
.rev-chart { margin-top: 16px; width: 100%; height: 150px; display: block; }
.rev-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }

.empty-hint { color: var(--ink-3); font-size: 13.5px; text-align: center; padding: 18px; }

/* Clients data table */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 660px; }
.data-table thead th {
  text-align: left; padding: 14px 18px; font-size: 12px; font-weight: 600;
  color: var(--ink-3); border-bottom: 1px solid var(--glass-line); white-space: nowrap;
}
.data-table tbody td { padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--ink); }
.data-table tbody tr { cursor: pointer; transition: background 0.14s var(--ease-out); }
.data-table tbody tr:hover { background: var(--glass); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .dt-num, .data-table th.dt-num { text-align: right; font-feature-settings: var(--num-feat); white-space: nowrap; }
.dt-client { display: flex; align-items: center; gap: 11px; }
.dt-client .client-av { width: 34px; height: 34px; font-size: 13px; }
.dt-name { font-weight: 600; }

/* Textareas reuse the .input look */
textarea.input { resize: vertical; min-height: 64px; font-family: inherit; line-height: 1.45; }

/* Clickable client rows open the slide-over */
.client-row.tappable { cursor: pointer; }
.client-row.tappable:hover { background: var(--glass); }

/* ==========================================================================
   Client slide-over (assign routines + message)
   ========================================================================== */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(6, 8, 14, 0.6);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease-out), visibility 0.25s;
}
.drawer-scrim.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 401;
  width: min(460px, 100%); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: rgba(15, 18, 30, 0.86);
  border-left: 1px solid var(--glass-line-2);
  backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%);
  transform: translateX(100%);
  transition: transform 0.34s var(--ease-out);
}
.drawer.open { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
  .drawer-scrim { transition: none; }
}

.drawer-head {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 20px; border-bottom: 1px solid var(--glass-line);
}
.drawer-head .cn { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.drawer-head .cd { font-size: 12.5px; color: var(--ink-3); }
.drawer-head .dc-close {
  margin-left: auto; width: 36px; height: 36px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink-2);
  cursor: pointer; font-size: 20px; line-height: 1; display: grid; place-items: center;
}
.drawer-head .dc-close:hover { background: var(--glass-2); color: var(--ink); }

.drawer-tabs { display: flex; gap: 4px; padding: 12px 16px 0; border-bottom: 1px solid var(--glass-line); }
.dtab {
  flex: 1; padding: 11px; font: inherit; font-size: 14px; font-weight: 600;
  background: none; border: none; color: var(--ink-3); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
}
.dtab:hover { color: var(--ink-2); }
.dtab.active { color: var(--ink); border-bottom-color: var(--accent-bright); }

.drawer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dpane { padding: 18px 20px; overflow-y: auto; flex: 1; min-height: 0; }
.dpane[hidden] { display: none; }

/* Routines pane */
.rt-card {
  border: 1px solid var(--glass-line); border-radius: 14px;
  padding: 14px; margin-bottom: 10px;
  display: flex; align-items: flex-start; gap: 12px;
}
.rt-card .rt-bar { width: 4px; align-self: stretch; border-radius: 999px; flex: none; }
.rt-card .rt-main { flex: 1; min-width: 0; }
.rt-card .rt-name { font-weight: 600; font-size: 15px; }
.rt-card .rt-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.rt-card .rt-ex { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
.rt-card .rt-del {
  background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 13px;
  padding: 4px; border-radius: 6px;
}
.rt-card .rt-del:hover { color: var(--cat-chest); }

.rt-add {
  width: 100%; padding: 12px; border-radius: 12px; cursor: pointer;
  background: var(--accent-soft); border: 1px solid rgba(106,141,255,0.28);
  color: var(--accent-bright); font: inherit; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.rt-add:hover { background: rgba(106,141,255,0.14); }
.exm-flags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.exm-flags .checkbox { font-size: 13.5px; }
.ex-uni { color: var(--ink-2); }
.cd-tpl { display: flex; gap: 8px; margin-bottom: 10px; }
.cd-tpl .input { flex: 1; min-width: 0; }
.cd-tpl .btn { flex: none; white-space: nowrap; }

.rt-form { display: grid; gap: 12px; margin-top: 6px; }
.rt-form .grow { display: grid; gap: 6px; }
.rt-form label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.rt-swatches { display: flex; gap: 8px; }
.rt-swatches .sw {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; transition: transform 0.14s var(--ease-out);
}
.rt-swatches .sw:hover { transform: scale(1.1); }
.rt-swatches .sw.sel { border-color: #fff; }
.ex-row { display: grid; grid-template-columns: 1fr 56px 56px 30px; gap: 8px; align-items: center; }
.ex-row .ex-x { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 17px; }
.ex-row .ex-x:hover { color: var(--cat-chest); }
.ex-head { display: grid; grid-template-columns: 1fr 56px 56px 30px; gap: 8px; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.rt-form-actions { display: flex; gap: 8px; margin-top: 4px; }
.rt-form-actions .btn { flex: 1; padding: 11px; }
.input.sm { padding: 9px 10px; text-align: center; font-feature-settings: var(--num-feat); }

/* Messages pane */
.msg-pane { padding: 0; display: flex; flex-direction: column; }
.msg-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.msg {
  max-width: 78%; padding: 9px 13px; border-radius: 15px; font-size: 14px; line-height: 1.4;
  word-wrap: break-word;
}
.msg .mt { display: block; font-size: 10.5px; margin-top: 3px; opacity: 0.6; }
.msg.them { align-self: flex-start; background: var(--glass-2); border: 1px solid var(--glass-line); border-bottom-left-radius: 5px; }
.msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.msg-day { align-self: center; font-size: 11px; color: var(--ink-3); margin: 8px 0; }
.msg-compose { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--glass-line); }
.msg-compose input[type="text"] {
  flex: 1; min-width: 0; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-line);
  border-radius: var(--r-pill); padding: 11px 16px; font: inherit; font-size: 14px; color: var(--ink); outline: none;
}
.msg-attach {
  flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--ink-2);
  display: grid; place-items: center;
}
.msg-attach:hover { background: rgba(255,255,255,0.13); color: var(--ink); }
.msg-attach:disabled { opacity: 0.5; cursor: default; }
.msg-media { display: block; max-width: min(260px, 100%); max-height: 300px; border-radius: 12px; }
.msg.media-only { background: transparent; padding: 2px 0; }
.msg.media-only .mt { display: block; padding: 3px 2px 0; }
.msg-compose input:focus { border-color: var(--accent-bright); }
.msg-compose button {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #fff; display: grid; place-items: center;
}
.msg-compose button:disabled { opacity: 0.5; cursor: default; }

/* ==========================================================================
   Schedule — Apple-Calendar-style week grid
   ========================================================================== */
.cal { display: flex; flex-direction: column; height: calc(100dvh - 69px); }
.cal-top { display: flex; align-items: center; gap: 16px; padding: 16px clamp(16px, 3vw, 28px); border-bottom: 1px solid var(--glass-line); flex: none; }
.cal-title { font-size: 22px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink-2); }
.cal-title b { font-weight: 700; color: var(--ink); }
.cal-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cal-nav .cal-ico {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--glass-line);
  background: var(--glass); color: var(--ink); cursor: pointer; font-size: 17px;
  display: grid; place-items: center;
}
.cal-nav .cal-ico:hover { background: var(--glass-2); }
.cal-nav .cal-today { padding: 0 14px; height: 34px; border-radius: 9px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.cal-nav .btn { padding: 8px 14px; font-size: 13px; }

.cal-body { flex: 1; overflow-y: auto; min-height: 0; }
.cal-head, .cal-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.cal-head { position: sticky; top: 0; z-index: 3; background: rgba(15, 18, 30, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--glass-line); }
.ch-gutter { }
.ch-day { padding: 8px 4px 10px; text-align: center; border-left: 1px solid var(--glass-line); }
.ch-day .ch-name { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.ch-day .ch-num { font-size: 17px; font-weight: 600; margin-top: 4px; height: 28px; display: flex; align-items: center; justify-content: center; }
.ch-day.today .ch-name { color: var(--accent-bright); }
.ch-day.today .ch-num { width: 28px; border-radius: 50%; background: var(--accent); color: #fff; margin-inline: auto; }

.cal-gutter .gh { height: 78px; text-align: right; padding-right: 8px; font-size: 10.5px; color: var(--ink-3); transform: translateY(-7px); }
.cal-col {
  position: relative; border-left: 1px solid var(--glass-line); cursor: pointer;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 77px, rgba(255,255,255,0.05) 77px, rgba(255,255,255,0.05) 78px);
}
.cal-ev {
  position: absolute; left: 3px; right: 3px; border-radius: 7px; padding: 3px 7px;
  overflow: hidden; cursor: grab; color: #fff; box-shadow: inset 3px 0 0 rgba(255,255,255,0.45);
  min-height: 20px; touch-action: none; user-select: none; -webkit-user-select: none;
}
.cal-ev.dragging {
  cursor: grabbing; opacity: 0.92; z-index: 6;
  box-shadow: inset 3px 0 0 rgba(255,255,255,0.45), 0 10px 28px -6px rgba(0,0,0,0.55);
}
.cal-ev .ev-t { font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev .ev-time { font-size: 10.5px; opacity: 0.85; }
.cal-now { position: absolute; left: -1px; right: 0; height: 2px; background: #f2595a; z-index: 2; }
.cal-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #f2595a; }

/* ==========================================================================
   Modal (session editor)
   ========================================================================== */
.modal-scrim {
  position: fixed; inset: 0; z-index: 410; background: rgba(6,8,14,0.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity 0.22s var(--ease-out), visibility 0.22s;
}
.modal-scrim.open { opacity: 1; visibility: visible; }
.modal {
  position: fixed; z-index: 411; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.97); opacity: 0; visibility: hidden;
  width: min(440px, 92vw); max-height: 90vh; overflow-y: auto;
  background: rgba(20, 24, 38, 0.96); border: 1px solid var(--glass-line-2); border-radius: 20px;
  padding: 22px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
}
.modal.open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
select.input { appearance: none; -webkit-appearance: none; background-image: none; }
@media (prefers-reduced-motion: reduce) { .modal, .modal-scrim { transition: none; } }

@media (max-width: 760px) {
  .cal-head, .cal-grid { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
  .ch-day .ch-name { font-size: 9.5px; }
  .cal-ev { left: 1px; right: 1px; padding: 2px 4px; }
  .cal-ev .ev-t { font-size: 10.5px; }
}

/* ==========================================================================
   Routines — advanced builder
   ========================================================================== */
.rt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.rt-list-card {
  text-align: left; cursor: pointer; padding: 16px; border-radius: var(--r-tile);
  background: var(--glass); border: 1px solid var(--glass-line); font: inherit; color: var(--ink);
  display: flex; gap: 13px; align-items: flex-start;
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.rt-list-card:hover { transform: translateY(-2px); border-color: var(--glass-line-2); }
.rt-list-card .rl-bar { width: 4px; align-self: stretch; border-radius: 999px; flex: none; }
.rt-list-card .rl-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.rt-list-card .rl-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.rt-list-card .rl-meta { font-size: 12px; color: var(--ink-2); margin-top: 10px; display: flex; gap: 6px; align-items: center; }
.rt-new-card {
  cursor: pointer; padding: 16px; border-radius: var(--r-tile); min-height: 96px;
  background: var(--accent-soft); border: 1px dashed rgba(106,141,255,0.4); color: var(--accent-bright);
  font: inherit; font-weight: 600; display: grid; place-items: center; gap: 6px;
}
.rt-new-card:hover { background: rgba(106,141,255,0.14); }
.rt-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.rt-section-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.rt-section-head .ph-sub { margin: 0; font-size: 13px; }
/* Template card = clickable body + an Assign button */
.rt-tpl { align-items: center; }
.rt-card-main { flex: 1; min-width: 0; display: flex; gap: 13px; align-items: flex-start;
  background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.rt-assign-btn { flex: none; align-self: center; padding: 7px 13px; border-radius: 9px;
  background: var(--accent-soft); border: 1px solid rgba(106,141,255,0.3); color: var(--accent-bright);
  font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.rt-assign-btn:hover { background: rgba(106,141,255,0.16); }

/* Builder */
.rb-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.rb-back { background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink); width: 38px; height: 38px; border-radius: 11px; cursor: pointer; font-size: 18px; display: grid; place-items: center; flex: none; }
.rb-top h1 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); }
.rb-top .rb-actions { margin-left: auto; display: flex; gap: 10px; }
.rb-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.rb-meta .grow.full { grid-column: 1 / -1; }
@media (max-width: 620px) { .rb-meta { grid-template-columns: 1fr; } }

.ex-card { border: 1px solid var(--glass-line); border-radius: var(--r-tile); padding: 16px; margin-bottom: 12px; position: relative; }
.ex-card.in-ss { border-left: 3px solid var(--accent-bright); }
.ex-card-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.ex-card-head .ex-num { font-size: 13px; font-weight: 700; color: var(--ink-3); flex: none; width: 20px; }
.ex-card-head .ex-name { flex: 1; }
.ex-card-head .ex-remove { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 19px; padding: 4px; }
.ex-card-head .ex-remove:hover { color: var(--cat-chest); }
.ss-badge { font-size: 10.5px; font-weight: 700; color: var(--accent-bright); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }

.ex-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ex-line { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.ex-line .grow { gap: 5px; }
.ex-line label { font-size: 11.5px; }

.seg { display: inline-flex; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { background: none; border: none; color: var(--ink-3); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.seg button.active { background: var(--accent); color: #fff; }

.rest-pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rest-pill { background: rgba(255,255,255,0.05); border: 1px solid var(--glass-line); color: var(--ink-2); font: inherit; font-size: 12.5px; padding: 7px 11px; border-radius: 999px; cursor: pointer; }
.rest-pill.active { background: var(--accent); color: #fff; border-color: transparent; }
.rest-pill input { width: 54px; background: none; border: none; color: inherit; font: inherit; outline: none; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.rest-pill input::-webkit-outer-spin-button, .rest-pill input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.scheme-head { display: grid; grid-template-columns: 26px 1fr 1fr 30px; gap: 8px; font-size: 11px; color: var(--ink-3); font-weight: 600; padding: 0 2px; }
.scheme-row { display: grid; grid-template-columns: 26px 1fr 1fr 30px; gap: 8px; align-items: center; margin-top: 6px; }
.scheme-row .sr-n { font-size: 12px; color: var(--ink-3); font-weight: 700; text-align: center; }
.scheme-row .sr-x { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 16px; }
.scheme-row .sr-x:hover { color: var(--cat-chest); }
.ex-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; margin-top: 12px; }
.ex-link input { accent-color: var(--accent); }

/* Exercise autosuggest combobox (body-portaled, escapes overflow clipping) */
.ex-dd {
  position: fixed; z-index: 420; max-height: 280px; overflow-y: auto;
  background: rgba(22, 26, 40, 0.98); border: 1px solid var(--glass-line-2); border-radius: 12px;
  padding: 5px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.6);
}
.ex-dd-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 11px; border: none; background: none; color: var(--ink); font: inherit; font-size: 14px;
  cursor: pointer; border-radius: 8px; text-align: left;
}
.ex-dd-item:hover, .ex-dd-item.active { background: var(--accent-soft); }
.ex-dd-cat { font-size: 11.5px; color: var(--ink-3); flex: none; }
.ex-dd-create { color: var(--accent-bright); font-weight: 600; }

/* Exercises tab */
.ex-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ex-lib-row { display: flex; align-items: center; gap: 13px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ex-lib-row:last-child { border-bottom: none; }
.ex-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ex-lib-main { flex: 1; min-width: 0; }
.ex-lib-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.ex-tag { font-size: 10px; font-weight: 700; color: var(--accent-bright); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; }
.ex-tag.vid { color: #66cc73; background: rgba(102, 204, 115, 0.16); }
.ex-lib-note { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.ex-lib-cat { font-size: 12.5px; color: var(--ink-2); flex: none; }
.ex-lib-edit { background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; flex: none; }
.ex-lib-edit:hover { background: var(--glass-2); color: var(--ink); }

/* Subscription paywall banner (dashboard) */
.sub-banner {
  display: flex; align-items: center; gap: 16px; padding: 15px 20px; margin-bottom: 4px;
  background: rgba(242, 191, 51, 0.09); border-color: rgba(242, 191, 51, 0.35);
}
.sub-banner .sb-main { flex: 1; min-width: 0; }
.sub-banner .sb-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.sub-banner .sb-sub { font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.sub-banner .btn { flex: none; }
@media (max-width: 640px) { .sub-banner { flex-wrap: wrap; } .sub-banner .btn { width: 100%; } }

/* Payments tab */
.pay-connect { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.pay-connect .pc-ic { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-bright); }
.pay-connect .pc-main { flex: 1; min-width: 0; }
.pay-connect .pc-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.pay-connect .pc-sub { font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; max-width: 64ch; }
.pay-connect .btn { flex: none; }
@media (max-width: 640px) { .pay-connect { flex-wrap: wrap; } .pay-connect .btn { width: 100%; } }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.plan-card {
  text-align: left; cursor: pointer; padding: 16px; border-radius: var(--r-tile);
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-line); font: inherit; color: var(--ink);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.plan-card:hover { transform: translateY(-2px); border-color: var(--glass-line-2); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.plan-price { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-feature-settings: var(--num-feat); }
.plan-price span { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.plan-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.pay-del { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 13px; padding: 4px; }
.pay-del:hover { color: var(--cat-chest); }

/* Loading skeletons (shown until Supabase data lands) */
.skel {
  display: block;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.11), rgba(255,255,255,0.05));
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skel 1.3s ease-in-out infinite;
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Mobile sidebar */
.scrim {
  display: none; position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(6, 8, 14, 0.6); backdrop-filter: blur(2px);
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side {
    position: fixed; left: 0; top: 0; z-index: calc(var(--z-overlay) + 1);
    width: 270px; transform: translateX(-100%);
    transition: transform 0.32s var(--ease-out);
  }
  .app.nav-open .side { transform: none; }
  .app.nav-open .scrim { display: block; }
  .topbar .side-toggle { display: grid; }
  .search { max-width: none; }
}
@media (max-width: 600px) {
  .search .sx { display: none; }
  .page-head .ph-actions .btn span.lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
}

/* ---- Shop tab ---------------------------------------------------------- */
.btn-sm { padding: 8px 13px; font-size: 13px; }
.shop-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.shop-card { border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.shop-thumb {
  aspect-ratio: 16 / 10; background-size: cover; background-position: center;
  background-color: var(--glass); border-bottom: 1px solid var(--glass-line);
}
.shop-thumb-empty {
  display: grid; place-items: center; font-size: 34px; font-weight: 800;
  color: var(--accent-bright); background: var(--accent-soft);
}
.shop-body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.shop-cat {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-bright);
}
.shop-title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.shop-note { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.shop-promo {
  font-size: 12.5px; color: var(--ink-2); align-self: flex-start;
  background: var(--glass); border: 1px dashed var(--glass-line-2);
  padding: 3px 9px; border-radius: 8px;
}
.shop-promo b { color: var(--ink); font-feature-settings: var(--num-feat); letter-spacing: 0.04em; }
.shop-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.shop-actions .btn { flex: 1; text-align: center; }

/* ---- Settings tab ------------------------------------------------------ */
.set-avatar-row { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.set-avatar {
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  background: var(--accent-soft); background-size: cover; background-position: center;
  border: 1px solid var(--glass-line); display: grid; place-items: center;
  font-size: 28px; font-weight: 800; color: var(--accent-bright);
}
.set-avatar.has-img { color: transparent; }
.set-av-hint { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.set-saved { align-self: center; margin-right: auto; color: #66cc73; font-size: 13.5px; font-weight: 600; }

/* ---- Onboarding plan picker ------------------------------------------- */
.onb { min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; }
.onb-card { width: 100%; max-width: 560px; padding: 30px; border-radius: var(--r-card); }
.onb-top { margin-bottom: 20px; }
.onb-card h1 { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; }
.onb-sub { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; margin: 8px 0 22px; }
.onb-tiers { display: grid; gap: 10px; }
.onb-tier {
  position: relative; text-align: left; cursor: pointer;
  display: grid; gap: 3px; padding: 15px 16px;
  background: var(--glass); border: 1.5px solid var(--glass-line); border-radius: 14px;
  color: var(--ink); transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.onb-tier:hover { border-color: var(--glass-line-2); }
.onb-tier.selected { border-color: var(--accent-bright); background: var(--accent-soft); }
.onb-tier-name { font-weight: 700; font-size: 15.5px; }
.onb-tier-price { font-size: 13px; color: var(--ink-2); }
.onb-tier-price b { color: var(--ink); font-size: 14px; }
.onb-tier-blurb { font-size: 12.5px; color: var(--ink-3); }
.onb-pop {
  position: absolute; top: 14px; right: 14px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-bright);
  background: var(--accent-soft); padding: 2px 8px; border-radius: 999px;
}
.onb-check {
  position: absolute; top: 15px; right: 14px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--accent);
  opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.15s;
}
.onb-tier.pop .onb-check { top: 40px; }
.onb-tier.selected .onb-check { opacity: 1; transform: scale(1); }
.onb-tier.selected .onb-pop { opacity: 0; }
.onb-seats {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 18px; padding: 14px 16px; background: var(--glass); border-radius: 14px;
}
.onb-seats-label { font-weight: 600; font-size: 14px; }
.onb-seats-hint { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.onb-stepper { display: flex; align-items: center; gap: 6px; flex: none; }
.onb-stepper button {
  width: 34px; height: 34px; border-radius: 10px; font-size: 18px; line-height: 1;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink); cursor: pointer;
}
.onb-stepper button:hover { background: var(--glass-2); }
.onb-stepper input {
  width: 58px; text-align: center; padding: 7px 4px; font-size: 15px; font-weight: 600;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 10px; color: var(--ink);
  -moz-appearance: textfield;
}
.onb-stepper input::-webkit-outer-spin-button, .onb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.onb-total {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--glass-line);
  font-size: 14px; color: var(--ink-2);
}
.onb-total-amt { font-weight: 700; color: var(--ink); font-size: 15px; }
.onb-continue { width: 100%; padding: 14px; font-size: 15px; }
.onb-skip {
  display: block; width: 100%; margin-top: 10px; padding: 10px; text-align: center;
  background: none; border: none; cursor: pointer; color: var(--ink-2); font: inherit; font-size: 14px;
}
.onb-skip:hover { color: var(--ink); }
.onb-fine { margin-top: 14px; font-size: 12px; color: var(--ink-3); text-align: center; line-height: 1.5; }

/* ---- Settings: Plan & licenses ---------------------------------------- */
.plan-status { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.plan-pill {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.plan-pill.on { color: #66cc73; background: rgba(102,204,115,0.14); }
.plan-pill.warn { color: #f2bf33; background: rgba(242,191,51,0.14); }
.plan-pill.off { color: var(--ink-2); background: var(--glass); }
.plan-current { font-size: 13.5px; color: var(--ink-2); }
.plan-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plan-tier {
  cursor: pointer; text-align: left; display: grid; gap: 2px; padding: 12px;
  background: var(--glass); border: 1.5px solid var(--glass-line); border-radius: 12px; color: var(--ink);
  transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.plan-tier:hover { border-color: var(--glass-line-2); }
.plan-tier.selected { border-color: var(--accent-bright); background: var(--accent-soft); }
.plan-tier .pt-name { font-weight: 700; font-size: 13.5px; }
.plan-tier .pt-price { font-size: 11.5px; color: var(--ink-3); }
.plan-tier .pt-price b { color: var(--ink-2); font-size: 12.5px; }
.plan-actions { display: flex; gap: 8px; }
.plan-actions .btn { flex: 1; padding: 11px; }
.plan-fine { margin-top: 12px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 480px) {
  .plan-tiers { grid-template-columns: 1fr; }
}

/* ---- Insights tab ------------------------------------------------------ */
.ins-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.ins-sel { width: auto; min-width: 150px; padding: 9px 12px; font-size: 13.5px; cursor: pointer; }
.ins-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 11px; }
.ins-seg button {
  padding: 7px 13px; border: none; background: none; cursor: pointer;
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; border-radius: 8px;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.ins-seg button:hover { color: var(--ink); }
.ins-seg button.active { background: var(--accent-soft); color: var(--accent-bright); }
.stat .sv-u { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.delta.up { color: #66cc73; }
.delta.down { color: #f2595a; }
.ins-chart-wrap { width: 100%; overflow-x: auto; }
.ins-chart-wrap { position: relative; }
.ins-svg { width: 100%; min-width: 420px; height: auto; display: block; cursor: crosshair; }
.ins-grid { stroke: var(--glass-line); stroke-width: 1; }
.ins-ylab { fill: var(--ink-3); font-size: 11px; text-anchor: end; }
.ins-xlab { fill: var(--ink-3); font-size: 11px; }
.ins-dot { fill: var(--accent-bright); stroke: var(--bg, #0d101a); stroke-width: 1.5; cursor: pointer; }
/* Draw-in animation + crosshair hover layer */
.ins-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ins-draw 0.9s var(--ease-out) forwards; }
.ins-area { opacity: 0; animation: ins-fade 0.9s ease forwards; }
@keyframes ins-draw { to { stroke-dashoffset: 0; } }
@keyframes ins-fade { to { opacity: 1; } }
.ins-cross { transition: opacity 0.12s ease; pointer-events: none; }
.ins-cross-x { stroke: var(--accent-bright); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.5; }
.ins-cross-dot { fill: var(--accent-bright); stroke: #0b0d15; stroke-width: 2; }
.ins-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; z-index: 4;
  background: rgba(13,16,26,0.94); border: 1px solid var(--glass-line-2); border-radius: 10px;
  padding: 7px 11px; font-size: 12.5px; white-space: nowrap;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,0.65);
}
.ins-tip b { display: block; font-weight: 700; font-feature-settings: var(--num-feat); }
.ins-tip i { font-style: normal; color: var(--ink-3); font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) {
  .ins-line { animation: none; stroke-dashoffset: 0; }
  .ins-area { animation: none; opacity: 1; }
}
.ins-loading { padding: 60px; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.ins-empty { padding: 54px 24px; text-align: center; }
.ins-empty-t { font-weight: 600; font-size: 15px; }
.ins-empty-b { color: var(--ink-3); font-size: 13.5px; margin-top: 6px; }
@media (max-width: 600px) {
  .ins-sel { flex: 1; min-width: 0; }
}

/* Insights — analytics panels */
.ins-panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }
.ins-panels .panel { min-width: 0; }
.ins-note { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.ins-chip {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
}
@media (max-width: 900px) { .ins-panels { grid-template-columns: 1fr; } }

/* Muscle-group distribution */
.dist-row { margin-bottom: 13px; }
.dist-row:last-child { margin-bottom: 0; }
.dist-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.dist-name { font-weight: 600; }
.dist-val { color: var(--ink-3); font-feature-settings: var(--num-feat); }
.dist-bar { height: 8px; border-radius: 999px; background: var(--glass); overflow: hidden; }
.dist-fill { height: 100%; border-radius: 999px; }

/* Consistency — single-client weekly bars */
.adh-summary { font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px; }
.adh-summary b { color: var(--ink); }
.adh-bars { display: flex; align-items: flex-end; gap: 4px; height: 58px; }
.adh-col { flex: 1; display: flex; align-items: flex-end; }
.adh-bar { width: 100%; height: 54px; display: flex; align-items: flex-end; }
.adh-fill { width: 100%; border-radius: 4px 4px 2px 2px; background: var(--accent-soft); min-height: 2px; }
.adh-fill.hit { background: #66cc73; }
.adh-target-note { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.adh-dot { width: 9px; height: 9px; border-radius: 3px; background: #66cc73; }
/* Consistency — roster list */
.adh-listrow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--glass-line); }
.adh-listrow:last-child { border-bottom: none; }
.adh-listmeta { flex: 1; min-width: 0; }
.adh-listname { font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.adh-listbar { height: 6px; border-radius: 999px; background: var(--glass); overflow: hidden; }
.adh-listfill { height: 100%; border-radius: 999px; }
.adh-listval { text-align: right; font-size: 14px; font-weight: 700; font-feature-settings: var(--num-feat); flex: none; }
.adh-listval span { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.adh-listtarget { font-size: 11px; font-weight: 500; color: var(--ink-3); }

/* Recent PRs + Leaderboard shared rows */
.pr-row, .lead-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--glass-line); }
.pr-row:last-child, .lead-row:last-child { border-bottom: none; }
.pr-meta, .lead-meta { flex: 1; min-width: 0; }
.pr-ex, .lead-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.pr-val { text-align: right; font-size: 15px; font-weight: 700; font-feature-settings: var(--num-feat); flex: none; }
.pr-val span { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.pr-gain { font-size: 11.5px; font-weight: 700; color: #66cc73; }
.lead-rank { width: 18px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-3); flex: none; }
.lead-meta { display: flex; flex-direction: column; gap: 5px; }
.lead-bar { height: 6px; border-radius: 999px; background: var(--glass); overflow: hidden; }
.lead-fill { height: 100%; border-radius: 999px; }
.lead-val { text-align: right; font-size: 14px; font-weight: 700; font-feature-settings: var(--num-feat); flex: none; }
.lead-val span { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.lead-row.on { background: var(--accent-soft); border-radius: 10px; margin: 0 -8px; padding: 9px 8px; border-bottom: none; }

/* Needs attention */
.ins-attn { margin: 18px 0; border-color: rgba(242,191,51,0.28); }
.attn-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(242,191,51,0.16); color: #f2bf33; }
.attn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.attn-card { display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 13px; border-radius: 13px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--ink); transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out); }
.attn-card:hover { border-color: var(--glass-line-2); background: var(--glass-2); }
.attn-card.hi { border-color: rgba(242,89,90,0.32); background: rgba(242,89,90,0.07); }
.attn-meta { min-width: 0; }
.attn-name { font-size: 13.5px; font-weight: 600; }
.attn-reason { font-size: 12px; color: var(--ink-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Muscle-group balance over time (stacked weekly bars) */
.bal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.bal-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.bal-swatch { width: 10px; height: 10px; border-radius: 3px; }
.bal-chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.bal-col { flex: 1; display: flex; align-items: flex-end; min-width: 0; }
.bal-stack { width: 100%; display: flex; flex-direction: column-reverse; align-items: stretch; }
.bal-seg:first-child { border-radius: 3px 3px 0 0; }
.bal-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--ink-3); }

/* Weekly activity heatmap */
.heat-wrap { overflow-x: auto; }
.heat-grid { display: grid; gap: 4px; align-items: center; justify-content: start; width: max-content; max-width: 100%; }
.heat-name { display: flex; align-items: center; gap: 8px; font-size: 13px; overflow: hidden; }
.heat-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-chip.sm { width: 24px; height: 24px; font-size: 10px; }
.heat-cell { height: 26px; border-radius: 4px; background: var(--glass); }
.heat-corner { height: 34px; }
.heat-hcol { writing-mode: vertical-rl; justify-self: center; align-self: end; height: 34px; font-size: 10px; line-height: 1; color: var(--ink-3); white-space: nowrap; font-feature-settings: var(--num-feat); }
.heat-cell.on { cursor: default; }

/* ---- Toast notifications (replaces native alert) ---------------------- */
.toast-host {
  position: fixed; top: 18px; right: 18px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 12px 12px 14px; border-radius: 13px;
  background: rgba(20,24,38,0.96); border: 1px solid var(--glass-line-2);
  border-left: 3px solid var(--glass-line-2);
  box-shadow: 0 16px 36px -12px rgba(0,0,0,0.7); color: var(--ink);
  font-size: 13.5px; line-height: 1.4;
  transform: translateX(120%); opacity: 0;
  transition: transform 0.28s var(--ease-out), opacity 0.28s var(--ease-out);
}
.toast.in { transform: none; opacity: 1; }
.toast-msg { flex: 1; min-width: 0; padding-top: 1px; }
.toast-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; margin-top: 1px; }
.toast-x { flex: none; background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 17px; line-height: 1; padding: 0 2px; }
.toast-x:hover { color: var(--ink); }
.toast-error { border-left-color: #f2595a; }
.toast-error .toast-ic { background: rgba(242,89,90,0.16); color: #f2595a; }
.toast-success { border-left-color: #66cc73; }
.toast-success .toast-ic { background: rgba(102,204,115,0.16); color: #66cc73; }
.toast-info .toast-ic { background: var(--accent-soft); color: var(--accent-bright); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity 0.2s; transform: none; } }

/* ============================== Creator Portal ============================== */
/* Portal switcher pinned above sign-out in the side-foot (both portals). */
.side-foot .portal-switch {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin-bottom: 10px;
  border-radius: 12px; font-size: 14px; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
  border: 1px solid var(--glass-line); background: var(--glass);
}
.side-foot .portal-switch:hover { color: var(--ink); background: var(--glass-2); }
.side-foot .portal-switch svg { width: 19px; height: 19px; flex: none; opacity: 0.85; }

.topbar-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
label .opt { color: var(--ink-3); font-weight: 400; }

/* Application gate */
.apply-hero {
  border-radius: var(--r-card); padding: 40px 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.apply-hero h1 { font-size: 24px; letter-spacing: -0.02em; }
.apply-hero p { color: var(--ink-2); line-height: 1.55; max-width: 44ch; }
.apply-hero .apply-sub { font-size: 12.5px; color: var(--ink-3); }
.apply-badge { font-size: 40px; line-height: 1; }
.apply-note {
  border-radius: var(--r-tile); padding: 14px 18px; margin-bottom: 16px;
  color: var(--ink-2); font-size: 14px;
}

/* Header image editor (My Page) */
.cp-header {
  width: 100%; max-width: 280px; aspect-ratio: 3 / 4;
  border-radius: var(--r-tile); background-size: cover; background-position: center;
  border: 1px solid var(--glass-line-2);
  display: grid; place-items: center; color: var(--ink-3);
  font-size: 13px; text-align: center; padding: 8px;
}
.cp-header:not(.empty) { color: transparent; }

/* Cropper modal */
.crop-modal { width: min(420px, calc(100vw - 32px)); }
.crop-viewport {
  margin: 0 auto; max-width: calc(100% - 36px); overflow: hidden;
  border-radius: var(--r-tile); border: 1px solid var(--glass-line-2);
  background: #000;
}
.crop-viewport canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.crop-viewport canvas:active { cursor: grabbing; }
.crop-controls { padding: 14px 18px; }
.crop-controls input[type="range"] { width: 100%; accent-color: var(--accent); }

/* Creator routine / challenge rows */
.crr-row {
  display: flex; align-items: center; gap: 14px;
  border-radius: var(--r-tile); padding: 14px 16px; margin-bottom: 10px;
}
.crr-dot { width: 12px; height: 44px; border-radius: 6px; flex: none; }
.crr-meta { min-width: 0; flex: 1; }
.crr-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.crr-sub { font-size: 13px; color: var(--ink-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crr-line { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* Exercise rows in the routine builder */
.crr-item {
  display: grid; grid-template-columns: 1fr 64px auto 64px auto;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.crr-item .crr-x { color: var(--ink-3); font-size: 13px; }
.crr-item .dc-close { flex: none; }

/* Accent swatches */
.accent-row { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.accent-swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.accent-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }

/* Inline helper text under a form field (Athlete Portal). */
.field-hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 6px; }

/* ============================== Moderation ================================ */
.mod-card { margin-bottom: 14px; }
.mod-reason {
  font-size: 13.5px; color: var(--ink-2); margin: 8px 0 2px;
}
.mod-content {
  margin-top: 10px; padding: 12px 14px;
  border-radius: var(--r-tile);
  background: var(--glass); border: 1px solid var(--glass-line);
  font-size: 14px; line-height: 1.5; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.mod-content .crr-line { margin-top: 6px; }
.mod-gone { color: var(--ink-3); font-style: italic; }
.mod-flag {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 9px 12px; border-radius: var(--r-field);
  background: rgba(242,89,90,0.12); border: 1px solid rgba(242,89,90,0.3);
  color: #f2595a; font-size: 13px; font-weight: 600;
}
.mod-actions { margin-top: 14px; flex-wrap: wrap; }
.mod-ban { background: #f2595a; border-color: #f2595a; }
.mod-ban:hover { background: #d94a4b; }
.mod-resolved { margin-top: 12px; text-transform: capitalize; }