:root {
  color-scheme: light;
  --bg: #f7efe5;
  --card: #fffaf3;
  --card-strong: #fff4e4;
  --ink: #24160f;
  --muted: #7a6758;
  --line: rgba(77, 47, 24, 0.14);
  --orange: #f07a2a;
  --orange-dark: #c45412;
  --mint: #8fd5b3;
  --mint-dark: #2f7f62;
  --lavender: #d8cef2;
  --green: #33845d;
  --red: #b5432f;
  --shadow: 0 18px 50px rgba(78, 42, 13, 0.12);
  --shadow-soft: 0 10px 30px rgba(78, 42, 13, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 4%, rgba(240, 122, 42, .30), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(143, 213, 179, .38), transparent 26%),
    linear-gradient(135deg, #f9efe4 0%, #f7efe5 48%, #edf4ea 100%);
  color: var(--ink);
}
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }
button, .client-button, .kpi, .card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }

.app-shell { width: min(1180px, calc(100vw - 36px)); margin: 28px auto 48px; }
.hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto -70px -120px auto; width: 260px; height: 260px; border-radius: 46% 54% 55% 45%; background: rgba(216, 206, 242, .48); z-index: 0; }
.hero > * { position: relative; z-index: 1; }
.hero-right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 0 0 auto; }
.hero-app-icon { width: 58px; height: 58px; flex: 0 0 58px; object-fit: cover; border-radius: 17px; box-shadow: 0 14px 26px rgba(78, 42, 13, .18); }
h1 { font-size: clamp(32px, 5vw, 58px); line-height: 0.95; margin: 8px 0 12px; letter-spacing: -0.05em; }
h2 { margin: 0 0 14px; font-size: 24px; letter-spacing: -0.03em; }
h3 { margin: 0 0 8px; }
p { margin: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-weight: 800; color: var(--orange-dark); font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }

.public-landing-wrap { display: block; }
.public-landing { min-height: calc(100svh - 76px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(12px, 2.4vh, 24px); }
.landing-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.landing-wordmark { color: var(--orange); font-size: 28px; font-weight: 600; letter-spacing: -0.06em; text-decoration: none; font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.landing-links { display: flex; align-items: center; gap: 12px; }
.landing-legal-links { display: inline-flex; align-items: center; gap: 14px; padding: 0 4px; }
.landing-link { color: var(--muted); font-size: 13px; font-weight: 650; text-decoration: none; }
.landing-link:hover { color: var(--orange-dark); }
.landing-language { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 34px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,250,243,.56); font-size: 12px; font-weight: 850; text-decoration: none; }
.landing-language:hover { color: var(--orange-dark); border-color: rgba(240,122,42,.35); background: rgba(255,244,228,.8); }
.landing-login { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 15px; border-radius: 999px; background: var(--ink); color: #fffaf3; font-size: 13px; font-weight: 850; text-decoration: none; box-shadow: 0 10px 22px rgba(36,22,15,.12); }
.landing-login:hover { background: var(--orange-dark); }
.landing-minimal { align-self: center; justify-self: center; width: min(820px, 100%); display: grid; justify-items: center; gap: clamp(10px, 1.8vh, 16px); text-align: center; padding: clamp(10px, 3vh, 34px) 0; }
.landing-logo { width: clamp(124px, 18vw, 220px); height: clamp(124px, 18vw, 220px); border-radius: 28%; object-fit: cover; box-shadow: 0 24px 58px rgba(78, 42, 13, .16); }
.landing-minimal h1 { margin: 2px 0 -4px; color: var(--orange); font-size: clamp(44px, 7vw, 92px); line-height: .82; letter-spacing: -.08em; font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.landing-minimal h2 { max-width: 760px; margin: 6px 0 0; font-size: clamp(36px, 5.8vw, 72px); line-height: .92; letter-spacing: -.07em; }
.landing-lead { max-width: 640px; color: var(--muted); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.48; }
.landing-supporting { max-width: 620px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.landing-footer { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 14px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; background: linear-gradient(180deg, rgba(247,239,229,0), rgba(247,239,229,.96) 22%, rgba(247,239,229,.98)); backdrop-filter: blur(10px); }
.landing-footer div { display: grid; gap: 5px; }
.landing-footer div:last-child { text-align: right; }
.landing-footer strong { color: var(--ink); letter-spacing: .01em; }
.landing-footer a { color: var(--orange-dark); font-weight: 750; text-decoration: none; }
.landing-footer a:hover { text-decoration: underline; }

.card { background: rgba(255, 250, 243, .82); border: 1px solid var(--line); border-radius: 28px; padding: 24px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.card:hover { box-shadow: 0 20px 54px rgba(78, 42, 13, 0.14); }
.grid { display: grid; gap: 18px; }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.stack { display: grid; gap: 14px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }

.session-card { min-width: 280px; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, var(--card-strong), rgba(143, 213, 179, .22)); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }

input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; background: #fffdf8; color: var(--ink); outline: none; }
select { appearance: none; padding-right: 42px; cursor: pointer; font-weight: 850; background-image: linear-gradient(45deg, transparent 50%, var(--orange-dark) 50%), linear-gradient(135deg, var(--orange-dark) 50%, transparent 50%); background-position: calc(100% - 22px) 54%, calc(100% - 16px) 54%; background-size: 7px 7px, 7px 7px; background-repeat: no-repeat; }
input:focus, textarea:focus, select:focus { border-color: rgba(240, 122, 42, .65); box-shadow: 0 0 0 4px rgba(240, 122, 42, .13); }
label { display: grid; gap: 7px; font-weight: 700; font-size: 13px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: linear-gradient(135deg, var(--orange), #ff9954); color: white; font-weight: 800; box-shadow: 0 10px 22px rgba(240,122,42,.22); }
.btn:hover { background: var(--orange-dark); }
.btn:active { transform: scale(.97); }
.btn.secondary { background: #fff4e4; color: var(--orange-dark); border: 1px solid rgba(240,122,42,.25); }
.btn.ghost { background: transparent; color: var(--orange-dark); border: 1px solid var(--line); }
.btn.danger { background: #fff0eb; color: var(--red); border: 1px solid rgba(181, 67, 47, .24); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.notice { padding: 12px 14px; border-radius: 16px; background: #fff4e4; color: var(--orange-dark); border: 1px solid rgba(240,122,42,.18); }
.error { padding: 12px 14px; border-radius: 16px; background: #fff0eb; color: var(--red); border: 1px solid rgba(181,67,47,.16); white-space: pre-wrap; }
.success { color: var(--green); font-weight: 800; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 24px; font-weight: 900; letter-spacing: .04em; padding: 14px 16px; border-radius: 18px; background: #26150c; color: #fff7ea; user-select: all; }

.client-list { display: grid; gap: 10px; }
.coach-card { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(255,250,243,.86), rgba(255,244,228,.72)); }
.brand-orbit { position: relative; width: 104px; height: 74px; }
.brand-orbit::before { content: ""; position: absolute; left: 14px; top: 22px; width: 74px; height: 20px; border-radius: 999px; border: 8px solid var(--orange); border-left-color: transparent; transform: rotate(-22deg); }
.brand-orbit span { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(143,213,179,.20); }
.brand-orbit span:nth-child(1) { left: 8px; top: 34px; }
.brand-orbit span:nth-child(2) { right: 16px; top: 14px; background: var(--ink); box-shadow: none; }
.brand-orbit span:nth-child(3) { right: 5px; bottom: 8px; background: var(--lavender); }
.client-button { width: 100%; text-align: left; padding: 16px; border-radius: 18px; background: rgba(255,253,248,.78); border: 1px solid var(--line); color: var(--ink); }
.client-button.active, .client-button:hover { border-color: rgba(240,122,42,.48); background: linear-gradient(135deg, #fff4e4, rgba(143,213,179,.16)); transform: translateY(-1px); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi-grid.two-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client-hero { background: linear-gradient(145deg, rgba(255,250,243,.88), rgba(255,244,228,.72) 54%, rgba(143,213,179,.18)); }
.pose-filter { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); gap: 14px; align-items: center; padding: 14px; border-radius: 22px; background: rgba(255,253,248,.62); border: 1px solid var(--line); }
.pose-select-label { width: min(360px, 100%); justify-self: end; }
.pose-select-label span { color: var(--muted); }
.kpi { padding: 16px; border-radius: 20px; background: rgba(255,253,248,.76); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.kpi:hover { transform: translateY(-2px); border-color: rgba(240,122,42,.30); }
.kpi strong { display: block; font-size: 26px; letter-spacing: -0.04em; }
.kpi em { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-style: normal; }
.session-list { display: grid; gap: 16px; }
.chart-wrap { padding: 16px; border-radius: 24px; background: linear-gradient(180deg, #fffdf8, rgba(255,244,228,.58)); border: 1px solid var(--line); overflow-x: auto; }
.chart-wrap.elevated { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-soft); }
.hero-chart .chart { min-height: 230px; }
.component-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini-chart { padding: 13px; border-radius: 20px; }
.mini-chart .chart { min-width: 320px; }
.mini-chart .chart-head { font-size: 13px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--orange-dark); }
.chart { width: 100%; min-width: 520px; height: auto; }
.chart line { stroke: rgba(77, 47, 24, 0.18); stroke-width: 2; }
.chart .gridline { stroke: rgba(143, 213, 179, .35); stroke-dasharray: 7 8; }
.chart path { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 7px 8px rgba(240,122,42,.18)); }
.chart.lower-better path { stroke: var(--mint-dark); filter: drop-shadow(0 7px 8px rgba(47,127,98,.16)); }
.chart circle { fill: #fffdf8; stroke: var(--orange-dark); stroke-width: 4; cursor: pointer; outline: none; }
.chart.lower-better circle { stroke: var(--mint-dark); }
.chart circle:hover, .chart circle:focus { r: 9; fill: #fff4e4; }
.chart circle.selected { r: 10; fill: var(--ink); stroke: var(--mint); stroke-width: 5; filter: drop-shadow(0 0 10px rgba(143,213,179,.70)); }
.chart text { fill: var(--muted); font-size: 12px; }
.segmented { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,253,248,.72); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.segment { min-height: 34px; padding: 0 12px; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 800; }
.segment.active { background: var(--ink); color: #fff7ea; box-shadow: 0 8px 16px rgba(36,22,15,.14); }
.progress-panel { position: relative; }
.chart-tooltip { position: absolute; z-index: 4; max-width: 260px; padding: 9px 11px; border-radius: 14px; background: var(--ink); color: #fff7ea; font-size: 12px; font-weight: 800; box-shadow: 0 14px 30px rgba(36,22,15,.22); pointer-events: none; }
.snapshot-carousel { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.carousel-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 190px); gap: 12px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(196,84,18,.55) rgba(255,244,228,.85); }
.carousel-strip::-webkit-scrollbar { height: 9px; }
.carousel-strip::-webkit-scrollbar-track { background: rgba(255,244,228,.85); border-radius: 999px; }
.carousel-strip::-webkit-scrollbar-thumb { background: rgba(196,84,18,.48); border-radius: 999px; }
.carousel-strip::-webkit-scrollbar-thumb:hover { background: rgba(196,84,18,.70); }
.carousel-item { position: relative; min-height: 150px; padding: 0; border-radius: 22px; overflow: hidden; background: #f3eadf; border: 2px solid transparent; box-shadow: var(--shadow-soft); scroll-snap-align: start; color: var(--ink); }
.carousel-item:hover { transform: translateY(-2px); border-color: rgba(240,122,42,.42); }
.carousel-item.active { border-color: var(--mint-dark); box-shadow: 0 16px 34px rgba(47,127,98,.18); }
.carousel-item img { width: 100%; height: 150px; object-fit: contain; object-position: center; display: block; background: #f3eadf; }
.point-badge { position: absolute; top: 9px; left: 9px; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff7ea; font-size: 12px; font-weight: 900; }
.carousel-meta { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 999px; background: rgba(255,250,243,.90); backdrop-filter: blur(10px); box-shadow: 0 8px 18px rgba(36,22,15,.10); }
.carousel-meta strong { font-size: 18px; letter-spacing: -.04em; }
.carousel-meta small { color: var(--muted); font-weight: 800; }
.carousel-placeholder { min-height: 150px; display: grid; place-items: center; color: var(--muted); font-weight: 800; }
.coach-comment-panel { display: grid; gap: 14px; padding: 16px; border-radius: 24px; background: rgba(255,253,248,.68); border: 1px solid var(--line); }
.selected-session-preview { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: center; }
.selected-session-preview img { width: 100%; max-height: 150px; object-fit: contain; object-position: center; border-radius: 18px; border: 1px solid var(--line); background: #f3eadf; }
.coach-comment-form { align-items: start; }
.coach-comment-form .btn { justify-self: start; }
.comment-history { gap: 8px; }
.coach-comment { padding: 12px 14px; border-radius: 18px; background: #fff4e4; border: 1px solid rgba(240,122,42,.16); }
.coach-comment p { margin-bottom: 4px; }
.session-row { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.snapshot { width: 100%; max-height: 320px; object-fit: contain; border-radius: 22px; background: #f3eadf; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.snapshot-hero { max-height: 520px; }
.metric-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.pill { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; background: #fff4e4; color: var(--orange-dark); font-weight: 800; font-size: 13px; }

/* Compact coach-dashboard layout: keep progress as the main screen. */
.app-shell { width: min(1360px, calc(100vw - 28px)); margin: 14px auto 28px; }
.hero { padding: 16px 18px; margin-bottom: 12px; }
.hero h1 { font-size: clamp(28px, 3.2vw, 42px); margin: 4px 0 6px; }
.hero .muted { font-size: 13px; }
.session-card { min-width: 220px; padding: 12px 14px; }
.dashboard { grid-template-columns: 270px minmax(0, 1fr); gap: 12px; }
.stack { gap: 10px; }
.card { border-radius: 24px; padding: 16px; }
.compact-sidebar h2 { font-size: 18px; margin-bottom: 0; }
.compact-card { padding: 14px; gap: 10px; }
.card-heading { display: grid; gap: 3px; }
.card-heading h2 { margin: 0; font-size: 25px; letter-spacing: -0.03em; }
.invite-heading { align-items: start; }
.help-dot { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: #fff4e4; color: var(--orange-dark); border: 1px solid rgba(240,122,42,.22); font-weight: 900; box-shadow: var(--shadow-soft); }
.help-dot:hover { transform: translateY(-1px); border-color: rgba(240,122,42,.48); }
.compact-sidebar { display: grid; grid-template-rows: auto auto; align-self: start; align-content: start; }
.compact-sidebar > .card { min-height: 0; }
.compact-form { gap: 9px; }
.compact-form textarea { display: none; }
.invite-card { align-content: start; }
.student-control-card { background: linear-gradient(145deg, rgba(255,250,243,.92), rgba(255,244,228,.70) 62%, rgba(143,213,179,.16)); }
.student-control-card .btn.danger { min-height: 38px; justify-self: stretch; }
.student-mini-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.student-mini-kpis div { padding: 9px 10px; border-radius: 15px; background: rgba(255,253,248,.76); border: 1px solid var(--line); }
.student-mini-kpis span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
.student-mini-kpis strong { display: block; margin-top: 2px; font-size: 20px; letter-spacing: -.04em; }
.sidebar-lock { width: 100%; }
.client-button { padding: 12px; border-radius: 16px; }
.client-hero.compact-client-hero { padding: 14px 16px; }
.compact-client-head h2 { font-size: 22px; margin: 0; }
.compact-actions { justify-content: flex-end; }
.compact-pose-filter { display: block; padding: 0; background: transparent; border: 0; min-width: 220px; }
.compact-pose-filter .pose-select-label { width: 240px; }
.compact-kpis { gap: 8px; }
.compact-kpis .kpi { padding: 10px 12px; border-radius: 16px; }
.compact-kpis .kpi strong { font-size: 22px; }
.focus-panel { padding: 16px; gap: 10px; box-shadow: 0 24px 70px rgba(78, 42, 13, 0.16); align-content: start; }
.compact-progress-head h2 { margin: 0; font-size: 25px; }
.time-range-label { width: 190px; }
.time-range-label span { color: var(--muted); }
.chart-hint { margin: -2px 0 -4px; }
.progress-split { display: grid; grid-template-columns: minmax(0, 1.46fr) minmax(280px, .74fr); gap: 12px; align-items: start; }
.progress-left { min-width: 0; display: grid; grid-template-rows: auto auto auto; align-content: start; }
.progress-right { min-width: 0; display: grid; align-self: start; }
.chart-wrap { padding: 10px 12px; border-radius: 18px; }
.hero-chart .chart { min-height: 0; }
.component-chart-grid { gap: 8px; align-self: stretch; }
.mini-chart { padding: 9px 10px; }
.chart-head { margin-bottom: 2px; }
.chart text { font-size: 10px; }
.snapshot-carousel { margin-top: 0; padding-top: 10px; }
.snapshot-carousel-strip { gap: 6px; }
.compact-carousel-head h3 { margin: 0; font-size: 16px; }
.carousel-strip { grid-auto-columns: minmax(112px, 132px); gap: 8px; padding-bottom: 8px; }
.carousel-item { min-height: 104px; border-radius: 16px; }
.carousel-item img { height: 104px; }
.carousel-placeholder { min-height: 104px; }
.point-badge { width: 22px; height: 22px; font-size: 11px; top: 6px; left: 6px; }
.carousel-meta { left: 5px; right: 5px; bottom: 5px; padding: 5px 7px; }
.carousel-meta strong { font-size: 15px; }
.carousel-meta small { font-size: 10px; }
.coach-comment-panel { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 12px; border-radius: 20px; }
.photo-first-panel { gap: 7px; padding: 9px; }
.selected-photo-frame { position: relative; flex: 0 0 475px; height: 475px; min-height: 475px; max-height: 475px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: #f3eadf; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.selected-photo-frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center center; display: block; background: #f3eadf; }
.selected-photo-fit { width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; }
.photo-comment-overlay { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; padding: 8px 36px 8px 11px; border-radius: 14px; background: rgba(255, 250, 243, .32); border: 1.5px solid rgba(255,255,255,.88); color: var(--orange-dark); backdrop-filter: blur(10px); box-shadow: 0 10px 24px rgba(36,22,15,.11); }
.photo-comment-overlay .coach-comment { padding: 0; border: 0; background: transparent; color: inherit; }
.photo-comment-overlay .coach-comment p { margin: 0; color: var(--orange-dark); font-size: 12px; font-weight: 820; line-height: 1.25; }
.photo-comment-overlay .coach-comment span { display: block; margin-top: 2px; color: rgba(196,84,18,.68); font-size: 9px; }
.comment-delete { position: absolute; top: 6px; right: 7px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.48); color: var(--orange-dark); border: 1px solid rgba(255,255,255,.82); font-size: 15px; font-weight: 900; line-height: 1; box-shadow: 0 6px 14px rgba(36,22,15,.10); }
.comment-delete:hover { background: rgba(255,255,255,.82); transform: translateY(-1px); }
.photo-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.photo-meta-row strong { color: var(--ink); font-size: 13px; }
.photo-meta-row span { padding: 4px 7px; border-radius: 999px; background: rgba(255,244,228,.72); }
.compact-comment-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: end; }
.coach-comment-form textarea { min-height: 46px; padding: 9px 10px; border-radius: 14px; resize: vertical; }
.coach-comment-form .btn { min-height: 36px; padding: 0 13px; }
.comment-history { grid-column: 1 / -1; max-height: 86px; overflow: auto; }
.compact-comment-history { max-height: 48px; overflow: hidden; }
.coach-comment { padding: 9px 11px; }

/* Requested final polish: mostly previous proportions, only lighter header,
   tighter carousel, and a quiet spacer under invites to align the sidebar. */
@media (min-width: 901px) {
  .app-shell { margin-top: 16px; }
  .hero { padding: 14px 18px; margin-bottom: 12px; }
  .hero h1 { font-size: clamp(26px, 3vw, 38px); margin: 3px 0 5px; }
  .hero .muted { font-size: 12px; }
  .hero-app-icon { width: 54px; height: 54px; flex-basis: 54px; border-radius: 16px; }
  .session-card { padding: 11px 13px; }
  .dashboard { align-items: start; }
  .compact-sidebar { grid-template-rows: auto auto; align-content: start; }
  .carousel-strip { grid-auto-columns: minmax(96px, 118px); gap: 7px; padding-bottom: 6px; }
  .carousel-item { min-height: 86px; border-radius: 15px; }
  .carousel-item img { height: 86px; }
  .carousel-placeholder { min-height: 86px; }
  .point-badge { width: 20px; height: 20px; font-size: 10px; }
  .carousel-meta { padding: 4px 6px; }
  .carousel-meta strong { font-size: 13px; }
  .carousel-meta small { font-size: 9px; }
}

@media (max-width: 900px) {
  .landing-minimal { padding-top: clamp(8px, 3vh, 24px); }
  .landing-nav { align-items: flex-start; }
  .landing-links { gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
  .landing-legal-links { order: 1; width: auto; justify-content: flex-end; gap: 12px; padding-right: 0; }
  .landing-login { order: 2; }
  .landing-language { order: 3; }
  .landing-footer { align-items: flex-start; flex-direction: column; }
  .landing-footer div:last-child { text-align: left; }
  .two, .dashboard, .session-row, .kpi-grid, .pose-filter, .component-chart-grid, .progress-split { grid-template-columns: 1fr; }
  .hero { align-items: stretch; flex-direction: column; }
  .hero-right { justify-content: space-between; }
  .session-card { min-width: 0; }
  .pose-select-label { justify-self: stretch; }
  .selected-session-preview { grid-template-columns: 1fr; }
  .selected-photo-frame { min-height: 260px; }
  .compact-comment-form { grid-template-columns: 1fr; }
}

.legal-page { max-width: 980px; }
.legal-card { margin-top: 24px; line-height: 1.65; }
.legal-card h1 { font-size: clamp(38px, 5vw, 64px); }
.legal-card h2 { margin-top: 18px; }
.legal-card ul { margin: 0; padding-left: 22px; color: var(--muted); }
.legal-card a { color: var(--orange-dark); font-weight: 800; }

.dashboard.onboarding-dashboard { grid-template-columns: 1fr; }
.onboarding-shell { width: min(1080px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(520px, 1.25fr) minmax(280px, .75fr); gap: 18px; align-items: start; }
.onboarding-card { max-width: none; }
.subtle-card { background: rgba(255,253,248,.68); }
.checkbox-line { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; font-weight: 650; color: var(--ink); }
.checkbox-line input { width: auto; margin-top: 3px; }
@media (max-width: 900px) { .onboarding-shell { grid-template-columns: 1fr; } }
.form-row.two-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
input[readonly] { color: var(--muted); background: rgba(255,253,248,.58); cursor: not-allowed; }
.checkbox-line a { color: var(--orange-dark); font-weight: 850; }
@media (max-width: 700px) { .form-row.two-fields { grid-template-columns: 1fr; } }
.checkbox-line { grid-template-columns: 22px minmax(0, 1fr); align-items: start; line-height: 1.38; }
.checkbox-line input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--orange-dark); }
.checkbox-line span { min-width: 0; }
.invite-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.icon-btn { width: 44px; min-width: 44px; padding: 0; font-size: 18px; }

/* Pose Registry admin */
.admin-card { background: linear-gradient(145deg, rgba(255,250,243,.94), rgba(216,206,242,.30)); }
.admin-select-label { min-width: min(420px, 100%); }
.admin-registry-list { overflow: hidden; }
.admin-pose-table { display: grid; gap: 8px; max-height: 360px; overflow: auto; padding-right: 4px; }
.admin-pose-row { display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,248,.72); }
.admin-pose-row.active { border-color: rgba(240,122,42,.58); background: linear-gradient(135deg, #fff4e4, rgba(216,206,242,.20)); }
.admin-badges, .admin-row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.admin-editor { gap: 16px; }
.thumbnail-panel { padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,253,248,.66); }
.form-grid { display: grid; gap: 12px; }
.two-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.four-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.checkbox-grid { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.checkbox-line { display: flex; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; font-weight: 750; }
.checkbox-line input[type="checkbox"] { width: auto; min-width: 18px; height: 18px; }
.json-editor, #thumbnailPrompt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 900px) {
  .admin-pose-row { grid-template-columns: 1fr; }
  .admin-badges, .admin-row-actions { justify-content: flex-start; }
  .two-fields, .three-fields, .four-fields { grid-template-columns: 1fr; }
}