:root {
  color-scheme: dark;
  --bg: #06121e;
  --surface: #091a28;
  --surface-raised: #0d2030;
  --surface-soft: #10273a;
  --line: #1c3549;
  --line-strong: #294860;
  --text: #eaf1f7;
  --muted: #91a6b8;
  --green: #20df83;
  --green-deep: #07583f;
  --shadow: 0 16px 40px #0005;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

body.auth {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: radial-gradient(ellipse at 50% 5%, #123047 0, #06121e 56%);
}
.authbox {
  width: min(100%, 410px);
  padding: 30px;
  border: 1px solid #25445b;
  border-radius: 14px;
  background: linear-gradient(145deg, #0c2030, #081824);
  box-shadow: var(--shadow);
}
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }
.auth-brand b { display: block; color: #edf4f7; font-size: 13px; letter-spacing: .045em; }
.auth-brand small { display: block; margin-top: 3px; color: #94aaba; font-size: 9px; }
.auth-eyebrow { margin: 0 0 7px !important; color: #43df96 !important; font-size: 9px !important; font-weight: 700; letter-spacing: .12em; }
.authbox h1 { margin: 0 0 7px; color: #f0f5f8; font-size: 23px; letter-spacing: -.025em; }
.authbox p { margin: 0 0 20px; color: #9db1c0; font-size: 12px; }
.authbox label { display: block; margin: 14px 0; color: #c6d3dd; font-size: 11px; }
.authbox input:not([type="hidden"]) {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #2b4b62;
  border-radius: 7px;
  background: #071522;
  color: #edf3f7;
}
.authbox input[type="hidden"] { display: none !important; }
.authbox input:not([type="hidden"]):focus { border-color: #38916b; outline: none; box-shadow: 0 0 0 3px #20df831a; }
.authbox .primary {
  width: 100%;
  min-height: 41px;
  margin-top: 8px;
  border: 1px solid var(--green);
  border-radius: 7px;
  background: var(--green);
  color: #052617;
  font-weight: 750;
}
.authbox .error { margin: 0 0 12px; color: #ff9b92; }
.auth-error { padding: 9px 11px; border: 1px solid #713f3c; border-radius: 6px; background: #371f24; color: #ffaaa1 !important; font-size: 11px !important; }
.auth-foot { margin: 19px 0 0 !important; padding-top: 14px; border-top: 1px solid #1e384b; color: #8097a9 !important; font-size: 10px !important; text-align: center; }

.topbar {
  height: 62px;
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.2vw, 50px);
  padding: 0 24px;
  background: #071521;
  border-bottom: 1px solid #193044;
}
.brand {
  display: inline-flex;
  min-width: 195px;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}
.brand b { display: block; font-size: 14px; letter-spacing: .045em; line-height: 1.2; }
.brand small { display: block; margin-top: 3px; color: #96aabc; font-size: 9px; }
.logo-mark {
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-block;
  transform: skew(-17deg);
}
.logo-mark i { position: absolute; display: block; background: var(--green); border-radius: 3px; }
.logo-mark i:nth-child(1) { width: 11px; height: 28px; left: 1px; top: 2px; }
.logo-mark i:nth-child(2) { width: 20px; height: 8px; left: 4px; top: 2px; }
.logo-mark i:nth-child(3) { width: 20px; height: 8px; left: 11px; bottom: 2px; }
.searchbox {
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(345px, 34vw);
  height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #10263a;
  color: #dce9f2;
}
.searchbox:focus-within { border-color: #2a536b; }
.searchbox svg, .icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.searchbox input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 11px;
}
.searchbox input::placeholder { color: #b4c4d1; opacity: .9; }
.topbar-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #dbe8f1;
}
.icon-button:hover { border-color: var(--line-strong); background: #10263a; }
.profile { display: flex; align-items: center; gap: 9px; min-width: 0; }
.avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid #55716d;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 24%, #e4c9a4 0 12%, #665046 13% 37%, #293d49 38% 100%);
  color: #fff;
  font-size: 9px;
  font-weight: 750;
  box-shadow: inset 0 0 0 18px #08152233;
}
.profile-copy { display: grid; max-width: 180px; gap: 2px; }
.profile-copy b { overflow: hidden; color: #e8eff5; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy small { color: #99adbe; font-size: 9px; }
.chevron { color: #9db1c1; font-size: 18px; padding-left: 4px; }

.app-shell { display: flex; align-items: stretch; min-height: calc(100vh - 62px); }
.sidebar {
  position: sticky;
  top: 62px;
  display: flex;
  width: 223px;
  height: calc(100vh - 62px);
  flex: 0 0 223px;
  flex-direction: column;
  padding: 20px 10px 17px;
  border-right: 1px solid #193044;
  background: #06121d;
}
.sidebar nav { display: grid; gap: 4px; }
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 7px;
  color: #c5d4e0;
  font-size: 12px;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.sidebar nav a:hover { background: #0e2635; color: #fff; }
.sidebar nav a.active { background: linear-gradient(100deg, #08794f, #07583f); color: #f1fff8; }
.nav-icon {
  display: inline-grid;
  width: 17px;
  place-items: center;
  color: #d9e7ef;
  font-size: 17px;
  line-height: 1;
}
.active .nav-icon { color: var(--green); }
.plan-card {
  margin-top: auto;
  padding: 14px 15px 15px;
  border: 1px solid #234158;
  border-radius: 9px;
  background: linear-gradient(145deg, #0b1d2b, #081925);
}
.plan-card h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12px; }
.crown { color: var(--green); font-size: 17px; }
.plan-card p { margin: 13px 0 9px; color: #a8bac8; font-size: 10px; }
.usage { margin-top: 10px; }
.usage-track { height: 7px; overflow: hidden; border-radius: 8px; background: #183247; }
.usage-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0bbd73, #22e48b); }
.usage small { display: block; margin-top: 5px; color: #bfd0dc; font-size: 10px; }
.upgrade {
  width: 100%;
  margin-top: 15px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(100deg, #1ce184, #0fc77d);
  color: #062417;
  font-size: 11px;
  font-weight: 750;
}
.upgrade:disabled { cursor: default; opacity: .92; }
.upgrade:hover, .button-primary:hover { filter: brightness(1.07); }
.version { display: flex; align-items: center; gap: 7px; margin: 19px 8px 0; color: #8299ac; font-size: 10px; }
.version-mark { color: #90adc0; font-size: 17px; }
.version span { color: #657f92; }

.main-content { width: calc(100% - 223px); min-width: 0; flex: 1; padding: 14px 20px 28px; }
.page-heading { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 16px; }
.heading-title, .heading-actions { display: flex; align-items: center; }
.heading-title { gap: 22px; min-width: 0; }
.heading-title h1 { overflow: hidden; margin: 0; font-size: 17px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.heading-actions { gap: 9px; }
.back-button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #29445b;
  border-radius: 7px;
  background: #10253a;
  color: #e5edf3;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.back-button { border-color: transparent; background: #10253a; }
.back-button span { font-size: 17px; line-height: 0; }
.button-secondary:hover, .back-button:hover { border-color: #385a73; background: #142d43; }
.button-primary { border-color: var(--green); background: var(--green); color: #052617; }
.save-status { min-width: 0; color: #88a194; font-size: 10px; }
.save-status.success { color: #67e9a4; }
.save-status.error { color: #ff9b92; }

.stepper { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin: 14px 0 15px; }
.stepper button {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 9px;
  padding: 4px 5px;
  border: 0;
  background: transparent;
  color: #b5c5d2;
  text-align: left;
  white-space: nowrap;
}
.stepper button::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -6%;
  left: 71%;
  height: 1px;
  background: #2b465b;
  content: "";
}
.stepper button:last-child::after { display: none; }
.stepper button b {
  z-index: 1;
  display: grid;
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  place-items: center;
  border: 1px solid #3b5870;
  border-radius: 50%;
  background: #1a3045;
  color: #ecf2f6;
  font-size: 13px;
  font-weight: 600;
}
.stepper button span { overflow: hidden; font-size: 11px; text-overflow: ellipsis; }
.stepper button.active { color: #fff; }
.stepper button.active b { border-color: var(--green); background: var(--green); color: #062719; }
.stepper button.completed b { border-color: #139864; background: #0b5c42; color: #baffdc; }
.stepper button.completed::after { background: #11b973; }

.workarea {
  display: grid;
  grid-template-columns: minmax(250px, .88fr) minmax(390px, 1.31fr) minmax(400px, 1.43fr);
  align-items: start;
  gap: 12px;
}
.leftpane, .middlepane { min-width: 0; }
.panel, .rightpane {
  border: 1px solid #1e3a50;
  border-radius: 9px;
  background: linear-gradient(145deg, #091a28, #081824);
}
.panel { margin-bottom: 8px; padding: 13px 14px; }
.panel-heading { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.panel-icon { display: inline-grid; width: 18px; flex: 0 0 18px; place-items: center; color: #e3edf4; font-size: 16px; line-height: 1.15; }
.panel-heading h2, .settings-intro h2 { margin: 0; font-size: 12px; font-weight: 680; }
.panel-heading p, .settings-intro p { margin: 5px 0 0; color: #9db1c1; font-size: 10px; }
.panel label { display: block; margin: 10px 0; color: #bbcad5; font-size: 10px; }
.panel input, .panel select, .panel textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 10px;
  border: 1px solid #29485f;
  border-radius: 6px;
  background: #071522;
  color: #edf3f7;
  font-size: 11px;
}
.panel input, .panel select { min-height: 34px; }
.panel select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9db2c2 50%), linear-gradient(135deg, #9db2c2 50%, transparent 50%); background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; padding-right: 28px; }
.panel textarea { min-height: 68px; resize: vertical; line-height: 1.45; }
.panel input:focus, .panel select:focus, .panel textarea:focus { border-color: #398267; outline: none; box-shadow: 0 0 0 2px #20df8317; }
.add-client { margin: -3px 0 1px; padding: 3px 0; border: 0; background: transparent; color: var(--green); font-size: 10px; }
.add-client:hover, .link-button:hover { color: #9dffcb; }
.count { display: block; margin-top: 3px; color: #8fa5b6; font-size: 9px; text-align: right; }
.notes-panel textarea { min-height: 56px; margin-top: 0; }

.workout { padding: 8px; }
.workout-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 3px 7px; }
.workout-heading h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12px; font-weight: 680; }
.workout-heading-actions { display: flex; align-items: center; gap: 6px; }
.workout-count { color: #a5b7c5; font-size: 9px; white-space: nowrap; }
.more-button { display: grid; width: 28px; height: 26px; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #c5d4de; font-size: 16px; line-height: 1; }
.more-button:hover { background: #142b3d; }
.exercise {
  display: grid;
  grid-template-columns: 24px 86px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 94px;
  margin: 5px 0;
  padding: 7px;
  border: 1px solid #275068;
  border-radius: 8px;
  background: linear-gradient(110deg, #0d2434, #0b1e2d);
}
.exercise:hover { border-color: #34745f; background: #0e2736; }
.num { align-self: start; display: grid; width: 25px; height: 28px; place-items: center; border: 1px solid #34546b; border-radius: 5px; background: #142d42; color: #eaf1f5; font-size: 11px; }
.exercise img { display: block; width: 86px; height: 76px; object-fit: cover; border: 1px solid #284455; border-radius: 6px; background: #152d3d; }
.exercise-copy { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.exercise-name { display: block; min-width: 0; color: #edf3f7; font-size: 11px; font-weight: 700; line-height: 1.35; }
.exercise-name:focus { outline: 1px solid #20df83; outline-offset: 2px; }
.exercise-meta { display: flex; flex-wrap: wrap; gap: 4px 7px; margin-top: 6px; color: #b5c6d2; font-size: 9px; }
.exercise-meta span + span::before { content: "·"; margin-right: 7px; color: #547287; }
.exercise-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 7px; }
.exercise-tag { padding: 3px 6px; border-radius: 4px; background: #0b4c7b; color: #e7f4ff; font-size: 8px; line-height: 1.2; }
.exercise-tools { display: flex; align-items: center; gap: 5px; color: #99b2c5; font-size: 11px; }
.exercise-tools span { display: inline-grid; width: 16px; height: 16px; place-items: center; }
.workout-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 0; }
.button-add { min-height: 32px; padding: 0 11px; border-color: #129c69; background: #071c23; color: #1de38a; }
.button-add:hover { background: #0c392b; }
.link-button { border: 0; background: transparent; color: #b7ccda; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.compact {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  color: #e5edf3;
  text-align: left;
}
.compact b { flex: 1; font-size: 11px; font-weight: 650; }
.compact > span:last-child { color: #a5b7c5; font-size: 9px; white-space: nowrap; }
.compact:hover { border-color: #34566d; background: #0d2231; }

.rightpane { min-width: 0; padding: 8px; background: #081a28; }
.preview-tabs { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tab-group { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: #10263a; }
.tab-button { min-height: 28px; padding: 0 13px; border: 0; border-radius: 6px; background: transparent; color: #b7c7d3; font-size: 10px; }
.tab-button.active { background: var(--green); color: #062819; font-weight: 700; box-shadow: 0 2px 8px #05a95b42; }
.preview-controls { display: flex; align-items: center; gap: 4px; color: #c1cfda; font-size: 10px; white-space: nowrap; }
.preview-controls .icon-button { width: 28px; height: 28px; border-color: #1d3b51; background: #10263a; border-radius: 6px; }
.zoom-control, .page-arrow {
  display: grid;
  width: 25px;
  height: 26px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #c6d4de;
  font-size: 14px;
}
.zoom-control:hover, .page-arrow:hover { border-color: #35546b; background: #112a3d; }
.page-delete { display: grid; width: 27px; height: 27px; place-items: center; margin: 0 3px; border: 1px solid #613843; border-radius: 6px; background: #281923; color: #ff9da8; font-size: 17px; line-height: 1; cursor: pointer; }
.page-delete:hover:not(:disabled) { border-color: #bb5f6d; background: #451d28; color: #ffd6da; }
.page-delete:disabled { border-color: #243b4b; background: #0c1e2a; color: #526676; cursor: not-allowed; opacity: .7; }
.doc-page[hidden] { display: none !important; }
#zoom-label { min-width: 32px; text-align: center; }
.page-arrow { width: 23px; border-color: #26445a; background: #0e2435; font-size: 19px; }
.page-count { min-width: 37px; color: #e0eaf0; text-align: center; }
.page-count b { font-weight: 650; }
.preview-stage { display: flex; max-height: min(68vh, 710px); justify-content: center; overflow: auto; border-radius: 5px; scrollbar-color: #28465b #081a28; }
.paper {
  position: relative;
  width: min(100%, 480px);
  flex: 0 0 auto;
  overflow: hidden;
  aspect-ratio: 210 / 297;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 28px #0005;
  color: #17232c;
  zoom: 1;
}
.paper.mobile { width: min(78%, 340px); }
.paper.balance .cover { background: linear-gradient(105deg, #e6ece7 0%, #f2f3ee 57%, #dce7dd 100%); color: #172a32; }
.paper.balance .cover::before { opacity: .74; filter: saturate(.62); }
.paper.balance .cover::after { background: linear-gradient(90deg, #edf2ed 0%, #edf2edd9 43%, #edf2ed55 70%, transparent 100%); }
.paper.balance .cover-brand small, .paper.balance .cover-title small { color: #52675f; }
.paper.balance .cover-title > b { color: #233b32; }
.paper.athlete .cover { background: linear-gradient(110deg, #111d2b 0%, #153957 58%, #17314c 100%); }
.paper.athlete .cover::before { filter: saturate(1.2) contrast(1.05); }
.paper.athlete .mini-mark { color: #ff704e; }
.doc-page { position: absolute; inset: 0; display: none; width: 100%; height: 100%; overflow: hidden; background: #fff; }
.doc-page.is-active { display: block; }
.cover {
  position: relative;
  display: flex;
  height: 30.5%;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 20px 22px 17px;
  background: linear-gradient(106deg, #06131e 0%, #102330 50%, #162b32 100%);
  color: #fff;
}
.cover::before {
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  background-image: url("images/plan-cover-athlete.png");
  background-position: center 30%;
  background-size: cover;
  content: "";
}
.cover::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #06131e 0%, #0a1a26 43%, #0b1b258c 61%, transparent 100%);
  content: "";
}
.cover-brand, .cover-title { position: relative; z-index: 1; }
.cover-brand { display: flex; align-items: center; gap: 8px; }
.mini-mark { color: var(--green); font-size: 24px; font-weight: 900; line-height: 1; }
.cover-brand b { display: block; font-size: 11px; letter-spacing: .04em; }
.cover-brand small { display: block; margin-top: 2px; color: #b2c1ca; font-size: 7px; }
.cover-title { margin-top: auto; }
.cover-title > b { font-size: 18px; letter-spacing: -.015em; }
.cover-title h2 { max-width: 72%; margin: 3px 0 7px; font-size: 15px; font-weight: 520; line-height: 1.15; }
.cover-title small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 82%; color: #d5e0e6; font-size: 7px; }
.cover-title small i { display: inline-block; width: 2px; height: 2px; border-radius: 50%; background: var(--green); }
.cover-accent { display: none; }
.docbody { padding: 14px 18px 11px; }
.clientline { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.person { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 2px solid #e5eee9; border-radius: 50%; background: linear-gradient(140deg, #ddc5a4, #3c544e); color: #fff; font-size: 9px; font-weight: 750; }
.clientline b { display: block; color: #142536; font-size: 10px; line-height: 1.2; }
.clientline small { display: block; margin-top: 3px; color: #697d8b; font-size: 8px; }
.contact { margin-left: auto; color: #3c9a70; font-size: 7px; line-height: 1.8; white-space: nowrap; }
.toc { padding: 9px 10px 8px; border: 1px solid #deede5; border-radius: 4px; background: #f1f8f4; color: #1a2d36; font-size: 8px; }
.toc > b { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.toc-mark { display: inline-grid; width: 13px; height: 13px; place-items: center; border-radius: 2px; background: #d7f1e2; color: #167648; font-size: 8px; }
.toc ol { margin: 5px 0 0; padding-left: 16px; line-height: 1.75; }
.toc li { padding-left: 2px; }
.toc li span { float: right; color: #536b78; }
.doc-section-title { display: flex; align-items: center; gap: 6px; margin: 14px 0 9px; padding-bottom: 7px; border-bottom: 1px solid #e4ebe7; color: #182b3a; font-size: 9px; }
.doc-section-title span { color: #17b972; font-size: 12px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; padding: 0 3px; }
.facts > div { position: relative; min-height: 28px; padding-left: 18px; }
.facts > div::before { position: absolute; left: 0; top: 0; color: #15bb73; content: "◷"; font-size: 11px; }
.facts b { display: block; color: #223844; font-size: 8px; }
.facts small { display: block; margin-top: 2px; color: #718490; font-size: 7px; line-height: 1.35; }
blockquote { margin: 10px 0 0; padding: 8px 10px; border-left: 2px solid #40c986; border-radius: 3px; background: #f0f8f3; color: #527367; font-size: 7px; line-height: 1.5; }
blockquote small { display: block; margin-top: 3px; color: #60836e; text-align: right; }
.docbody footer, .doc-page > footer { position: absolute; right: 18px; bottom: 10px; left: 18px; display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid #e4ebe7; color: #80909a; font-size: 6px; }
.doc-page-heading { display: flex; justify-content: space-between; margin: 21px 23px 18px; padding-bottom: 8px; border-bottom: 1px solid #e2eae5; color: #42715b; font-size: 8px; font-weight: 750; letter-spacing: .05em; }
.doc-page-heading small { color: #84958e; font-size: 7px; font-weight: 500; }
.doc-workout-title { margin: 20px 23px 8px; color: #172a38; font-size: 17px; }
.doc-workout-title small { display: block; margin-top: 4px; color: #74848c; font-size: 9px; font-weight: 450; }
.doc-exercise-list { margin: 17px 23px; }
.doc-ex { padding: 12px 0; border-bottom: 1px solid #e5ece8; color: #263944; font-size: 9px; }
.doc-ex b { display: block; font-size: 10px; }
.doc-ex span { display: block; margin-top: 5px; color: #71818a; font-size: 8px; }
.doc-paragraph { margin: 22px 23px; color: #52636c; font-size: 10px; line-height: 1.7; }
.progression-grid { display: grid; gap: 10px; margin: 24px 23px; }
.progression-grid b { padding: 14px; border: 1px solid #dcebe1; border-radius: 5px; background: #f3f8f4; color: #276445; font-size: 10px; }
.progression-grid small { display: block; margin-top: 4px; color: #70857a; font-size: 8px; font-weight: 450; }
.trainer-note { min-height: 80px; margin: 20px 23px; padding: 16px; border-left: 2px solid #32c783; background: #f1f8f4; color: #567065; font-size: 9px; }
.summary-contact { display: grid; gap: 8px; margin: 45px 23px; padding: 18px; border-radius: 6px; background: #f1f8f4; color: #387354; font-size: 9px; }
.summary-contact b { font-size: 12px; letter-spacing: .04em; }
.thumbnails { display: flex; gap: 6px; overflow: auto; margin-top: 8px; padding: 1px 1px 3px; scrollbar-color: #29475c transparent; }
.thumbnails button { display: flex; min-width: 76px; flex: 1; flex-direction: column; align-items: stretch; gap: 5px; padding: 4px; border: 1px solid #1c384d; border-radius: 6px; background: #0b2030; color: #a9bdcc; text-align: center; }
.thumbnails button:hover { border-color: #426177; background: #10283b; }
.thumbnails button.selected { border-color: var(--green); box-shadow: inset 0 0 0 1px #20df8344; color: #75f5b1; }
.thumbnail-page { display: block; height: 48px; border: 1px solid #d9e2e6; border-radius: 3px; background: linear-gradient(#e9f2ed 0 8%, #fff 8% 100%); }
.thumbnail-page:not(.cover-thumb)::after { display: block; width: 65%; height: 26px; margin: 12px auto; border-top: 2px solid #87b99d; background: repeating-linear-gradient(to bottom, transparent 0 5px, #dbe6e0 5px 6px); content: ""; }
.cover-thumb { background: linear-gradient(160deg, #081723 0 45%, #1b3940 46% 60%, #f7faf8 60%); }
.thumbnails b { overflow: hidden; font-size: 8px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.template-settings { min-height: 360px; padding: 15px; border: 1px solid #1d3a50; border-radius: 7px; background: #091b29; }
.settings-intro { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.templates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tpl { min-width: 0; padding: 8px; border: 1px solid #29475d; border-radius: 7px; background: #10263a; color: #e8f0f5; text-align: left; }
.tpl:hover { border-color: #41647c; }
.tpl.selected { border-color: var(--green); box-shadow: 0 0 0 1px #20df8333; }
.tpl-swatch { display: block; height: 76px; margin-bottom: 9px; border-radius: 4px; background: linear-gradient(140deg, #09141e, #243842 67%, #90d84c); }
.balance-swatch { background: linear-gradient(140deg, #f8f6f1, #e7ede8 58%, #b7ceb9); }
.athlete-swatch { background: linear-gradient(140deg, #101d30, #225887 55%, #ef5b3e); }
.tpl b { display: block; font-size: 10px; }
.tpl small { display: block; margin-top: 4px; color: #9db0bf; font-size: 8px; line-height: 1.4; }
.below-fold { margin-top: 18px; }
.below-fold h2 { margin: 0 0 8px; font-size: 13px; }
.saved-list { padding: 10px; border: 1px solid #1e394e; border-radius: 7px; background: #091a28; color: #a9bdcb; font-size: 11px; }
.saved-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #183044; }
.saved-row:last-child { border-bottom: 0; }
.saved-row b { color: #e3edf3; font-weight: 600; }
.saved-row span { color: #8fa6b8; font-size: 10px; }
.saved-row[hidden] { display: none; }
.saved-row.client-row { justify-content: flex-start; gap: 12px; min-width: 0; }
.client-row-name { display: flex; flex: 1 1 150px; align-items: center; gap: 7px; min-width: 0; }
.client-row-name > b { min-width: 0; overflow-wrap: anywhere; }
.demo-badge { flex: 0 0 auto; padding: 3px 6px; border: 1px solid #a87639; border-radius: 4px; background: #392a19; color: #f3c981 !important; font-size: 8px !important; font-weight: 750; letter-spacing: .08em; }
.client-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 10px; }
.client-row-actions .link-button { min-height: 30px; padding: 4px 7px; border: 1px solid #24475a; border-radius: 5px; background: #0b2130; font-size: 9px; }
.client-row-actions .client-history-button { border-color: #16885a; background: #0b3028; color: #68efaa; font-weight: 650; }
.client-row-actions .client-history-button:hover { border-color: #35d98a; background: #0d4032; color: #a3ffcc; }

.source-actions {
  display: flex;
  min-height: 68px;
  align-items: center;
  gap: 8px;
  margin: 12px 0 10px;
  padding: 10px 12px;
  border: 1px solid #1d3a50;
  border-radius: 8px;
  background: linear-gradient(100deg, #0b2030, #0a1a27);
}
.source-actions > div { display: grid; min-width: 190px; flex: 1; gap: 3px; }
.source-actions > div b, .library-toolbar b { color: #edf4f7; font-size: 11px; }
.source-actions > div small, .library-toolbar small { color: #97acbd; font-size: 9px; }
.source-actions .button { min-height: 33px; padding: 0 10px; font-size: 10px; white-space: nowrap; }
.source-link { text-decoration: none; }
.source-actions .save-status { max-width: 230px; }
.import-note { flex: 1 1 160px; max-width: 250px; color: #7f96a8; font-size: 8px; line-height: 1.4; }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; padding: 6px 9px; border: 1px solid #1d3a50; border-radius: 7px; background: #0a1d2b; }
.library-toolbar > div { display: grid; gap: 2px; }
.library-toolbar .button { min-height: 30px; white-space: nowrap; }
.workout-title-input { width: min(250px, 32vw); padding: 1px 4px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #edf3f7; font-size: 11px; font-weight: 680; }
.workout-title-input:focus { border-color: #2d7959; outline: none; }
.exercise-copy { gap: 3px; }
.exercise-overview-row { display: grid; grid-template-columns: minmax(0, 1fr) 29px; align-items: center; gap: 5px; min-width: 0; }
.exercise-overview { display: grid; width: 100%; gap: 4px; min-width: 0; padding: 2px 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.exercise-overview:hover b { color: #7bf0b3; }
.exercise-open-editor { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #285342; border-radius: 5px; background: #0a2c25; color: #79eeb0; font-size: 14px; }
.exercise-open-editor:hover, .exercise-open-editor[aria-expanded="true"] { border-color: #39db8a; background: #10402f; }
.exercise-overview b { overflow-wrap: anywhere; color: #edf3f7; font-size: 10px; line-height: 1.35; }
.exercise-overview span, .exercise-overview small { overflow-wrap: anywhere; color: #9fb3c1; font-size: 8px; line-height: 1.35; }
.exercise-overview small { color: #74ddb0; }
.exercise-overview .exercise-overview-comment { color: #a8bac5; }
.exercise-editor-fields[hidden], .exercise-overview-row[hidden] { display: none !important; }
.workout-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.exercise-edit-toggle { min-height: 32px; padding: 0 10px; border-color: #2c5264; color: #c3d8e4; font-size: 9px; }
.exercise-edit-toggle[aria-pressed="true"] { border-color: #2aa973; background: #0b3227; color: #85f0b7; }
.exercise-field { display: grid; min-width: 0; gap: 3px; color: #829cad; font-size: 7px; }
.exercise-field > span { line-height: 1.2; }
.exercise-name { width: 100%; min-height: 27px; padding: 4px 6px; border: 1px solid #254458; border-radius: 4px; background: #081a27; color: #edf3f7; font-size: 10px; font-weight: 700; line-height: 1.35; }
.exercise-name:focus { border-color: #20df83; outline: 1px solid #20df83; outline-offset: 1px; }
.exercise-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.exercise-meta input { width: 100%; min-width: 0; min-height: 26px; padding: 4px 5px; border: 1px solid #203d50; border-radius: 4px; background: #0b2030; color: #d4e1e7; font-size: 8px; }
.exercise-meta input:focus { border-color: #36775c; outline: 1px solid #36775c; }
.exercise-detail-field > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exercise-tag-input { width: min(200px, 65%); min-width: 0; min-height: 25px; padding: 3px 6px; border: 1px solid #244257; border-radius: 4px; background: #0b2030; color: #bdd1dc; font-size: 8px; }
.exercise-tag-input:focus { border-color: #39735d; outline: 1px solid #39735d; }
.remove-exercise { padding: 2px 5px; border: 0; background: transparent; color: #adbac5; font-size: 8px; }
.remove-exercise:hover { color: #ffaaa1; }
.exercise-media { display: grid; gap: 7px; margin-top: 8px; padding: 8px 0 2px; border-top: 1px solid #203b4f; }
.exercise-media summary { color: #8faabb; font-size: 9px; font-weight: 650; cursor: pointer; }
.exercise-media[open] summary { margin-bottom: 2px; color: #46df94; }
.exercise-media label { display: grid; gap: 4px; color: #a8bdc9; font-size: 8px; line-height: 1.4; }
.exercise-media input[type=url], .exercise-media input[type=file] { width: 100%; min-width: 0; min-height: 31px; padding: 6px 7px; border: 1px solid #25455b; border-radius: 5px; background: #071723; color: #dce8ef; font-size: 9px; }
.exercise-media label[data-error]::after { content: attr(data-error); color: #ffaaa1; }
.exercise-video-preview { width: fit-content; color: #6de5a8; font-size: 8px; text-decoration: underline; text-underline-offset: 2px; }
.exercise-video-preview[hidden] { display: none; }
.frame-hint { color: #91aabc; font-size: 8px; }
.youtube-frame-choices { display: grid; gap: 5px; min-width: 0; }
.youtube-frame-choices[hidden] { display: none; }
.youtube-frame-choice-title { color: #a8bdc9; font-size: 8px; }
.frame-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.frame-choice { width: 66px; height: 44px; overflow: hidden; padding: 2px; border: 1px solid #2a465a; border-radius: 5px; background: #081925; cursor: pointer; }
.frame-choice:hover { border-color: #6aa68b; }
.frame-choice.selected { border-color: var(--green); box-shadow: 0 0 0 1px #20df8355; }
.frame-choice img { display: block; width: 100%; height: 100%; object-fit: cover; }
.youtube-time-details { display: grid; gap: 6px; min-width: 0; }
.youtube-time-details > summary { width: fit-content; color: #85dab1; font-size: 8px; cursor: pointer; }
.youtube-time-browser { display: grid; gap: 6px; min-width: 0; }
.youtube-time-open { width: fit-content; min-height: 31px; padding: 0 10px; border: 1px solid #31614f; border-radius: 5px; background: #0a2b25; color: #8bf0b6; font-size: 8px; font-weight: 650; }
.youtube-time-open:hover { border-color: #40d88d; background: #0d3a2c; }
.youtube-time-open:disabled { opacity: .65; cursor: wait; }
.youtube-frame-dialog { width: min(900px, calc(100vw - 24px)); max-width: 900px; max-height: min(92vh, 860px); overflow: auto; padding: 15px; border: 1px solid #2a4b61; border-radius: 12px; background: linear-gradient(145deg,#091d2b,#07151f); color: #eaf1f7; box-shadow: 0 24px 80px #000c; }
.youtube-frame-dialog::backdrop { background: #020913d9; backdrop-filter: blur(5px); }
.youtube-frame-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.youtube-frame-heading h3 { margin: 0; color: #f0f6f8; font-size: 15px; }
.youtube-frame-heading p { margin: 5px 0 0; color: #91aaba; font-size: 10px; }
.youtube-frame-heading .icon-button { flex: 0 0 30px; }
.youtube-player-host { width: min(100%, 760px); aspect-ratio: 16 / 9; min-height: 220px; margin: 12px auto 10px; overflow: hidden; border: 1px solid #234457; border-radius: 7px; background: #000; }
.youtube-player-host > div, .youtube-player-host iframe { display: block; width: 100% !important; height: 100% !important; min-height: 220px; border: 0; }
.youtube-time-controls { display: flex; align-items: center; gap: 7px; min-width: 0; }
.youtube-time-controls[hidden] { display: none; }
.youtube-time-rail { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 6px; min-width: 0; overflow-x: auto; padding: 7px 4px 10px; border: 1px solid #1c394b; border-radius: 7px; background: #071925; scrollbar-color: #3b7962 #0a1b28; scrollbar-width: thin; scroll-snap-type: x proximity; overscroll-behavior-x: contain; touch-action: pan-x; }
.youtube-time-chip { flex: 0 0 auto; min-width: 66px; min-height: 39px; padding: 5px 8px; border: 1px solid #29485b; border-radius: 7px; background: #0b2030; color: #b9cbd5; font-variant-numeric: tabular-nums; font-size: 10px; font-weight: 650; scroll-snap-align: center; }
.youtube-time-chip:hover, .youtube-time-chip.selected, .youtube-time-chip[aria-pressed="true"] { border-color: #35d98a; background: #0b382d; color: #8bf0b6; }
.youtube-time-scroll { flex: 0 0 30px; width: 30px; height: 38px; border: 1px solid #29485b; border-radius: 6px; background: #0b2030; color: #b9cbd5; font-size: 21px; }
.youtube-time-scroll:hover { border-color: #35d98a; color: #8bf0b6; }
.youtube-time-status { display: block; margin-top: 8px; color: #91aabc; font-size: 9px; line-height: 1.5; }
.save-exercise-profile { min-height: 25px; padding: 2px 6px; border: 1px solid #245545; border-radius: 4px; background: #0a2a24; color: #7ee8ac; font-size: 8px; }
.save-exercise-profile:hover { border-color: #3dca83; color: #b0ffd0; }
.exercise-bottom { flex-wrap: wrap; }
.local-video-label input { max-width: 100%; }
.local-video-preview { display: grid; justify-items: start; gap: 5px; }
.local-video-preview video { width: min(100%, 240px); max-height: 140px; border-radius: 4px; background: #000; }
.local-video-preview .button { min-height: 27px; padding: 0 8px; font-size: 8px; }
.empty-workout { margin: 5px; padding: 13px; border: 1px dashed #2a475c; border-radius: 6px; color: #95aabb; font-size: 10px; }
.add-workout { width: 100%; margin-top: 7px; }
.doc-ex { display: grid; grid-template-columns: 94px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 90px; padding: 8px 0; border-bottom: 1px solid #e5ece8; color: #263944; font-size: 9px; }
.doc-ex-image { width: 94px; height: 70px; border-radius: 4px; object-fit: cover; background: #eef3f0; }
.doc-ex-copy { min-width: 0; }
.doc-ex b { display: block; font-size: 10px; }
.doc-ex span { display: block; margin-top: 5px; color: #71818a; font-size: 8px; }
.doc-video-link { display: inline-block; margin-top: 5px; color: #168752; font-size: 8px; text-decoration: none; }
.doc-workout-note { margin: 12px 0; padding: 9px; border-left: 2px solid #20bf74; background: #f2f8f4; color: #4c6658; font-size: 9px; }
.doc-import-line { margin: 0 0 7px; color: #344650; font-size: 8px; line-height: 1.55; white-space: pre-wrap; }
.recipient-line { margin: -6px 0 11px; color: #627887; font-size: 7px; }
.recipient-line b { color: #263d4a; }
.person-image { width: 34px; height: 34px; flex: 0 0 34px; border: 2px solid #e5eee9; border-radius: 50%; object-fit: cover; }
#p-brand-logo { width: auto; max-width: 30px; height: 28px; object-fit: contain; }
.profile-editor { padding: 16px; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-grid label, .client-entry label, .library-search { display: grid; gap: 5px; color: #a9bdcb; font-size: 10px; }
.profile-grid input:not([type=file]), .profile-grid textarea, .client-entry input, .library-search input {
  width: 100%; min-width: 0; min-height: 35px; padding: 8px 10px; border: 1px solid #28475d; border-radius: 6px; background: #071724; color: #edf3f7; font-size: 10px;
}
.profile-grid input[type=color] { width: 64px; padding: 3px; }
.profile-grid input[type=file] { max-width: 100%; color: #a9bdcb; font-size: 9px; }
.profile-grid textarea { min-height: 60px; resize: vertical; }
.profile-wide { grid-column: 1 / -1; }
.profile-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.profile-actions .save-status { margin-right: auto; }
.client-manager { padding: 12px; }
.client-list-heading { margin: 0 0 8px; }
.client-list-heading h2 { margin: 0; color: #edf4f7; font-size: 12px; }
.client-list-heading p { margin: 4px 0 0; color: #8fa6b6; font-size: 9px; }
.client-entry { display: flex; align-items: flex-end; gap: 9px; margin-bottom: 10px; }
.client-entry label { flex: 1; }
.client-entry .button { min-height: 35px; white-space: nowrap; }
.library-dialog { width: min(620px, calc(100vw - 28px)); max-height: min(82vh, 780px); overflow: auto; padding: 16px; border: 1px solid #2a4b61; border-radius: 12px; background: #081a28; color: #eaf1f7; box-shadow: 0 24px 80px #000b; }
.library-dialog:has(#exercise-profile-manager[open]) { width: min(1080px, calc(100vw - 32px)); max-height: 92vh; }
.library-dialog::backdrop { background: #020913c9; backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dialog-heading h2 { margin: 0; font-size: 16px; }
.dialog-heading p { margin: 4px 0 0; color: #96aabd; font-size: 10px; }
.library-search { margin-bottom: 10px; }
.library-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.library-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 7px; border: 1px solid #1f3c51; border-radius: 6px; background: #0d2232; color: #e8f0f5; text-align: left; }
.library-item:hover { border-color: #20c77a; background: #102b3b; }
.library-item img { width: 48px; height: 40px; border-radius: 4px; object-fit: cover; }
.library-item span { display: grid; min-width: 0; gap: 3px; }
.library-item b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; }
.library-item small { color: #92a9ba; font-size: 8px; }
.library-item-actions { display: flex; align-items: center; gap: 4px; }
.library-add, .library-edit { min-height: 27px; padding: 0 7px; border: 1px solid #315367; border-radius: 4px; background: #0a1e2b; color: #c6d8e2; font-size: 8px; white-space: nowrap; }
.library-add { width: 27px; padding: 0; border-color: #17875d; background: #0b3027; color: #63ecaa; font-size: 16px; }
.library-add:hover, .library-edit:hover { border-color: #20c77a; color: #8af2bc; }
.library-section-title { margin: 14px 0 7px; color: #dce8ee; font-size: 11px; }
.exercise-profile-manager { margin: 12px 0 4px; padding: 10px; border: 1px solid #245141; border-radius: 8px; background: linear-gradient(135deg,#0a251f,#0b1d29); }
.exercise-profile-manager > summary { color: #87e9b1; font-size: 10px; font-weight: 700; cursor: pointer; }
.exercise-profile-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.9fr); gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #23483c; }
.exercise-profile-layout h3 { margin: 0 0 8px; color: #e2ecef; font-size: 10px; }
.exercise-profile-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 8px; }
.exercise-profile-form > label { display: grid; gap: 4px; min-width: 0; color: #a9bfca; font-size: 8px; }
.exercise-profile-form input:not([type=hidden]), .exercise-profile-form textarea { width: 100%; min-width: 0; min-height: 31px; padding: 6px 8px; border: 1px solid #28495b; border-radius: 5px; background: #071723; color: #e5edf1; font-size: 9px; }
.exercise-profile-form textarea { min-height: 60px; resize: vertical; }
.exercise-profile-form .profile-ex-name, .exercise-profile-form .profile-ex-video, .exercise-profile-form .profile-ex-comment, .exercise-profile-form #profile-frame-choices, .exercise-profile-form .profile-actions { grid-column: 1 / -1; }
.exercise-profile-form .profile-actions { flex-wrap: wrap; }
.exercise-profile-items { display: grid; gap: 6px; max-height: 430px; overflow: auto; }
.exercise-profile-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid #244155; border-radius: 6px; background: #081b28; }
.exercise-profile-copy { display: grid; gap: 4px; min-width: 0; }
.exercise-profile-copy b { overflow: hidden; color: #e7eef2; font-size: 9px; text-overflow: ellipsis; }
.exercise-profile-copy small { color: #8ea6b5; font-size: 8px; line-height: 1.4; }
.exercise-profile-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.exercise-profile-actions .button { min-height: 27px; padding: 0 7px; font-size: 8px; }
.exercise-profile-empty { padding: 10px; border: 1px dashed #294658; border-radius: 6px; color: #95aab8; font-size: 9px; line-height: 1.5; }
.exercise-profile-error { color: #ffaaa1; font-size: 8px; }
.export-measurements { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px 12px; margin: 12px 0; padding: 11px; border: 1px solid #245142; border-radius: 7px; background: #0b241f; }
.export-measurements > div { display: grid; gap: 3px; }
.export-measurements b { color: #dff4e8; font-size: 9px; }
.export-measurements small { color: #9db5ab; font-size: 8px; }
.export-measurements .save-status { grid-column: 1 / -1; }
.doc-measurement-history { margin: 8px 20px 12px; padding: 10px; border: 1px solid #dbe9e0; border-radius: 5px; background: #f5faf6; color: #233c31; }
.doc-measurement-history h3 { margin: 0; color: #17633f; font-size: 10px; }
.doc-measurement-history > p { margin: 3px 0 7px; color: #6b8175; font-size: 7px; }
.doc-measurement-table { width: 100%; border-collapse: collapse; font-size: 7px; }
.doc-measurement-table th { padding: 4px 5px; background: #e5f1e9; color: #446457; font-size: 6px; font-weight: 700; text-align: left; }
.doc-measurement-table td { padding: 4px 5px; border-top: 1px solid #dce8df; color: #33493e; font-variant-numeric: tabular-nums; }
.performance-swatch { background-image: url("images/template-performance.png"); }
.balance-swatch { background-image: url("images/template-balance.png"); }
.athlete-swatch { background-image: url("images/template-athlete-pro.png"); }
.tpl-swatch { background-position: center; background-size: cover; }
.paper.performance .cover::before { background-image: var(--cover-image, url("images/template-performance.png")); }
.paper.balance .cover::before { background-image: var(--cover-image, url("images/template-balance.png")); opacity: 1; filter: saturate(.92); }
.paper.athlete .cover::before { background-image: var(--cover-image, url("images/template-athlete-pro.png")); }
.paper.balance .cover::after { background: linear-gradient(90deg, #101c18 0%, #14251ed9 43%, #182b1a70 74%, transparent 100%); }
.paper.athlete .cover::after { background: linear-gradient(90deg, #07131e 0%, #0b1828df 43%, #0a192b59 75%, transparent 100%); }
.paper.balance .cover { color: #fff; }
.paper.balance .cover-brand small, .paper.balance .cover-title small { color: #e3eee8; }
.paper.athlete .mini-mark { color: #ff704e; }
.paper.balance .cover-title > b { color: #36e879; }
.paper.athlete .cover-title > b { color: #48ee8e; }
.paper.performance .cover-title h2, .paper.balance .cover-title h2, .paper.athlete .cover-title h2 { color: #43e94f; text-transform: uppercase; }
.paper.athlete .cover-title h2 { color: #49e98a; }
.cover-title .cover-plan-name { display: block; margin: -3px 0 6px; color: #f0f4f5; font-size: 9px; line-height: 1.3; }
.paper.balance .cover-plan-name { color: #e3eee8; }
.paper.athlete .cover-plan-name { color: #dde8ed; }

/* Guided editor and dedicated account subpages */
.page-heading { gap: 12px; }
.page-heading .source-actions {
  display: flex;
  width: auto;
  min-width: 225px;
  min-height: 43px;
  flex: 1 1 250px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 9px;
  border-color: #1f473f;
  background: linear-gradient(105deg, #0d2929, #0b1e2c);
}
.page-heading .source-actions > div { min-width: 120px; gap: 2px; }
.page-heading .source-actions > div b { font-size: 10px; }
.page-heading .source-actions > div small { font-size: 8px; }
.studio-link { padding: 5px 7px; border: 1px solid #275742; border-radius: 5px; color: #48e995; font-size: 9px; text-decoration: none; white-space: nowrap; }
.studio-link:hover { background: #103a2a; }
.client-shortcut { border-color: #29485b; color: #b8cbd7; }
.stage-panel { min-width: 0; margin-bottom: 9px; padding: 12px; border: 1px solid #1d3a50; border-radius: 8px; background: linear-gradient(155deg, #0b2030, #091a27); }
.stage-heading { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; }
.stage-heading > span { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border: 1px solid #28775a; border-radius: 50%; background: #0c362d; color: #4af09d; font-size: 11px; font-weight: 750; }
.stage-heading h2 { margin: 0; color: #edf4f7; font-size: 12px; }
.stage-heading p { margin: 4px 0 0; color: #96aabd; font-size: 9px; line-height: 1.5; }
.stage-action { min-height: 34px; margin: 2px 5px 6px 0; }
.stage-status { display: block; min-height: 16px; margin-top: 5px; }
.import-note { display: block; max-width: 100%; margin-top: 8px; color: #8097a8; font-size: 8px; line-height: 1.5; }
.stage-shortcuts { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; padding-top: 9px; border-top: 1px solid #203a4e; }
.stage-shortcuts a { color: #8fb5a5; font-size: 9px; text-decoration: none; }
.stage-shortcuts a:hover { color: #55ec9e; text-decoration: underline; }
.analysis-text { display: block; width: 100%; min-height: 170px; padding: 10px; border: 1px solid #28475d; border-radius: 6px; background: #071724; color: #e6eef2; font-size: 10px; line-height: 1.6; resize: vertical; }
.import-analysis-summary { margin: 0 0 9px; padding: 9px 10px; border: 1px solid #24644c; border-radius: 6px; background: #0a2b25; color: #adf2cb; font-size: 10px; line-height: 1.5; }
.import-analysis-summary.has-warning { border-color: #765d32; background: #29261c; color: #f5d99d; }
.context-label { display: grid; gap: 6px; margin-top: 8px; color: #a8bfce; font-size: 9px; }
.context-action { margin-top: 9px; }
.stage-summary { margin: 9px 0; padding: 11px; border: 1px solid #203f53; border-radius: 6px; background: #0a1b28; color: #bacbd5; font-size: 10px; line-height: 1.55; }
.media-workout-select { display: grid; gap: 5px; margin: 0 0 9px; color: #a9bdcb; font-size: 9px; }
.media-workout-select select { width: 100%; min-height: 34px; padding: 6px 9px; border: 1px solid #29475b; border-radius: 5px; background: #071724; color: #edf3f7; }
.subpage { min-height: calc(100vh - 100px); }
.subpage-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 12px 0 16px; padding: 20px; border: 1px solid #1d3a50; border-radius: 10px; background: radial-gradient(ellipse at 90% 5%, #123b36 0, #0b2030 54%, #091a27 100%); }
.subpage-heading p { margin: 0 0 4px; color: #38dd88; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.subpage-heading h1 { margin: 0; color: #f0f5f7; font-size: 20px; }
.subpage-heading span { display: block; margin-top: 5px; color: #99afbf; font-size: 10px; }
.subpage .profile-editor, .subpage .client-manager, .subpage > .saved-list { max-width: 940px; }
.subpage .profile-editor { padding: 20px; }
.subpage .profile-grid { gap: 13px; }
.subpage .profile-grid input:not([type=file]), .subpage .profile-grid textarea { min-height: 39px; }
.subpage .client-entry { max-width: 700px; }
.preferences-editor { max-width: 700px; }
.preferences-editor > label { display: grid; max-width: 420px; gap: 6px; color: #b7c8d3; font-size: 10px; }
.preferences-editor input[type=number] { min-height: 39px; padding: 8px 10px; border: 1px solid #29475b; border-radius: 5px; background: #071724; color: #edf3f7; }

@media (max-width: 1440px) and (min-width: 1151px) {
  .main-content { padding-right: 14px; padding-left: 14px; }
  .workarea { grid-template-columns: minmax(225px, .83fr) minmax(310px, 1.23fr) minmax(340px, 1.38fr); }
  .panel { padding-right: 12px; padding-left: 12px; }
  .preview-tabs { gap: 5px; }
  .preview-controls { gap: 2px; }
  .thumbnails button { min-width: 68px; }
}
@media (max-width: 1150px) and (min-width: 901px) {
  .page-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 9px; }
  .page-heading .source-actions { grid-column: 1 / -1; min-height: 42px; }
  .page-heading .heading-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 1150px) {
  .workarea { grid-template-columns: minmax(240px, .82fr) minmax(360px, 1.18fr); }
  .rightpane { grid-column: 1 / -1; }
  .preview-stage { max-height: 74vh; }
  .paper { width: min(100%, 480px); }
}
@media (max-width: 900px) {
  .page-heading { align-items: stretch; flex-direction: column; }
  .page-heading .source-actions { width: 100%; flex: 1 1 auto; }
  .source-actions { flex-wrap: wrap; }
  .source-actions > div { flex-basis: 100%; }
  .source-actions .save-status { max-width: none; }
  .page-heading .source-actions { display: flex; flex-wrap: wrap; min-width: 0; }
  .page-heading .source-actions > div { flex: 1 1 100%; }
  .page-heading .heading-actions { grid-column: auto; }
  .topbar { gap: 16px; padding: 0 14px; }
  .brand { min-width: 182px; }
  .searchbox { width: min(310px, 38vw); }
  .sidebar { display: none; }
  .main-content { width: 100%; padding: 13px 14px 24px; }
  .workarea { display: block; }
  .middlepane, .rightpane { margin-top: 12px; }
  .leftpane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .leftpane .panel { margin: 0; }
  .notes-panel { grid-column: 1 / -1; }
  .stepper { overflow-x: auto; justify-content: flex-start; padding-bottom: 3px; }
  .stepper button { min-width: 102px; }
  .stepper button::after { right: -5%; }
  .preview-stage { max-height: 72vh; }
}
@media (max-width: 620px) {
  .source-actions { align-items: stretch; }
  .source-actions .button { flex: 1 1 42%; }
  .page-heading .source-actions { align-items: center; }
  .page-heading .source-actions > div { flex: 1 1 100%; }
  .page-heading .studio-link { flex: 1; text-align: center; }
  .library-toolbar { align-items: flex-start; flex-direction: column; }
  .profile-grid, .library-items { grid-template-columns: 1fr; }
  .profile-wide { grid-column: auto; }
  .client-entry { align-items: stretch; flex-direction: column; }
  .topbar { height: 58px; gap: 10px; padding: 0 10px; }
  .brand { min-width: 0; gap: 8px; }
  .brand b { font-size: 11px; }
  .brand small { font-size: 8px; }
  .logo-mark { width: 27px; height: 28px; transform: scale(.85) skew(-17deg); transform-origin: left center; }
  .searchbox { width: 34px; height: 34px; flex: 0 0 34px; justify-content: center; padding: 0; }
  .searchbox input { display: none; }
  .topbar-right { gap: 6px; }
  .notification { display: none; }
  .profile-copy, .chevron { display: none; }
  .avatar { width: 31px; height: 31px; flex-basis: 31px; }
  .app-shell { min-height: calc(100vh - 58px); }
  .main-content { padding: 11px 10px 20px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .heading-title { gap: 10px; }
  .heading-title h1 { font-size: 15px; }
  .heading-actions { width: 100%; justify-content: flex-end; }
  .save-status { margin-right: auto; }
  .stepper { margin: 13px -10px 12px; padding: 0 10px 4px; }
  .stepper button { min-width: 94px; gap: 7px; }
  .stepper button b { width: 29px; height: 29px; flex-basis: 29px; font-size: 11px; }
  .stepper button span { font-size: 10px; }
  .leftpane { display: block; }
  .leftpane .panel { margin-bottom: 8px; }
  .exercise { grid-template-columns: 23px 72px minmax(0, 1fr); gap: 7px; min-height: 84px; padding: 6px; }
  .exercise img { width: 72px; height: 68px; }
  .exercise-name { font-size: 10px; }
  .exercise-meta { font-size: 8px; }
  .workout-footer { align-items: flex-start; flex-direction: column; }
  .preview-tabs { align-items: flex-start; flex-direction: column; }
  .preview-controls { width: 100%; justify-content: flex-end; }
  .preview-stage { max-height: 68vh; }
  .paper { width: min(100%, 390px); }
  .paper.mobile { width: min(82%, 330px); }
  .templates { grid-template-columns: 1fr; }
  .tpl { display: grid; grid-template-columns: 76px 1fr; column-gap: 10px; align-items: center; }
  .tpl-swatch { grid-row: span 2; width: 76px; height: 52px; margin: 0; }
  .compact { flex-wrap: wrap; }
}

.stage-panel[hidden], .app-view[hidden] { display: none !important; }
.page-heading .source-actions .studio-link { flex: 0 0 auto; }
.page-heading .source-actions .client-shortcut { display: none; }
.page-heading .source-actions > div { flex: 1 1 auto; }
@media (min-width: 901px) { .page-heading .source-actions .client-shortcut { display: inline-block; } }
@media (min-width: 901px) { .page-heading .source-actions { flex-wrap: nowrap; } }
@media (max-width: 900px) {
  .page-heading .source-actions { flex-wrap: wrap; }
  .page-heading .source-actions > div { flex: 1 1 100%; }
  .page-heading .source-actions .studio-link { flex: 0 1 auto; }
  .page-heading .source-actions .client-shortcut { display: inline-block; }
}
@media print {
  :root { color-scheme: light; }
  body { min-width: 0; background: #fff; }
  .topbar, .sidebar, .page-heading, .source-actions, .stepper, .leftpane, .middlepane, .preview-tabs, .thumbnails, .template-settings, .below-fold, dialog { display: none !important; }
  .app-shell, .main-content, .workarea, .rightpane, .preview-stage { display: block; width: auto; max-height: none; margin: 0; padding: 0; overflow: visible; border: 0; background: #fff; }
  .paper { width: 210mm; height: 297mm; max-width: none; overflow: visible; aspect-ratio: auto; border-radius: 0; box-shadow: none; zoom: 1; }
  .doc-page, .doc-page.is-active { position: relative; inset: auto; display: block !important; width: 210mm; height: 297mm; page-break-after: always; break-after: page; }
  .cover { height: 91mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 0; }
}

[hidden] { display: none !important; }

/* Account, security and data intensive views */
.logout-form { margin: 0; }
.logout-button { padding: 6px 9px; border: 1px solid #29475b; border-radius: 6px; background: #0d2030; color: #c3d2dc; font-size: 9px; }
.logout-button:hover { border-color: #41657b; color: #fff; }
.page-estimate { display: block; margin-top: 5px; color: #8fa7b7; font-size: 9px; line-height: 1.45; }
.page-estimate.error { color: #ffc18c; }
.page-default-link { display: inline-block; margin-top: -7px; margin-bottom: 8px; color: #50df98; font-size: 9px; text-decoration: none; }
.page-default-link:hover { text-decoration: underline; }
.exercise-comment { grid-column: 1 / -1; width: 100%; min-height: 45px; margin-top: 6px; padding: 7px 8px; border: 1px solid #203e51; border-radius: 5px; background: #081a27; color: #d5e1e8; font-size: 9px; line-height: 1.45; resize: vertical; }
.exercise-comment::placeholder { color: #829aaa; }
.doc-ex-comment { margin: -4px 0 7px 106px; padding: 5px 8px; border-left: 2px solid #37c982; background: #f3f8f5; color: #536960; font-size: 8px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-video-link { display: inline-block; width: fit-content; margin-top: 6px; color: #147b51; font-size: 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.paper.paper-zoom-70 { zoom: .7; }
.paper.paper-zoom-80 { zoom: .8; }
.paper.paper-zoom-90 { zoom: .9; }
.paper.paper-zoom-100 { zoom: 1; }
.paper.paper-zoom-110 { zoom: 1.1; }
.paper.paper-zoom-120 { zoom: 1.2; }
.paper.paper-zoom-130 { zoom: 1.3; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.stat-card { display: grid; min-width: 0; min-height: 104px; align-content: space-between; gap: 8px; padding: 15px; border: 1px solid #1e3d50; border-radius: 9px; background: linear-gradient(145deg, #0d2433, #091a27); }
.stat-card small { color: #8fa9b9; font-size: 9px; }
.stat-card b { overflow: hidden; color: #f0f5f7; font-size: 23px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.stat-card span { overflow: hidden; color: #38dc8a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.admin-section { margin: 9px 0; padding: 12px; }
.admin-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.admin-section-heading h2 { margin: 0; font-size: 13px; }
.admin-section-heading p { margin: 4px 0 0; color: #8fa6b6; font-size: 9px; }
.admin-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); align-items: stretch; gap: 8px; }
.admin-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: center; gap: 8px; min-height: 92px; padding: 10px 11px; border: 1px solid #1d3b4f; border-radius: 7px; background: linear-gradient(135deg, #0b1f2d, #0a1a27); color: #cad7df; font-size: 10px; }
.admin-setting-row input { grid-column: 1; grid-row: 2; width: min(100%, 150px); min-height: 30px; padding: 5px 7px; border: 1px solid #29475b; border-radius: 5px; background: #071724; color: #edf3f7; }
.admin-setting-row input[type=checkbox] { width: 18px; height: 18px; min-height: 18px; justify-self: start; padding: 0; accent-color: #20df83; }
.admin-setting-row .button { grid-column: 2; grid-row: 2; min-height: 29px; padding: 0 9px; font-size: 9px; }
.demo-data-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.demo-data-actions > span { flex: 1 1 240px; color: #a9bdcb; font-size: 10px; }
.button-danger { border-color: #70404a; background: #2c1820; color: #ffabb2; }
.button-danger:hover { border-color: #bb5f6d; background: #451d28; color: #ffd6da; }
.admin-setting-copy { display: grid; grid-column: 1 / -1; align-content: start; gap: 3px; }
.admin-setting-copy b { color: #e4edf2; font-size: 10px; font-weight: 650; }
.admin-setting-copy small { color: #8fa7b7; font-size: 8px; line-height: 1.4; }
.admin-table-wrap { max-width: 100%; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; color: #c9d6df; font-size: 9px; }
.admin-table th, .admin-table td { min-width: 85px; padding: 8px; border-bottom: 1px solid #203b4e; text-align: left; vertical-align: middle; }
.admin-table th { color: #8faabd; font-size: 8px; font-weight: 650; white-space: nowrap; }
.admin-table td select { max-width: 130px; min-height: 30px; padding: 5px; border: 1px solid #29475b; border-radius: 4px; background: #081a27; color: #e6eef3; font-size: 9px; }
.admin-table .button { min-height: 29px; padding: 0 8px; font-size: 9px; }
.health-dialog { max-width: 560px; }
.health-dialog form label { display: grid; gap: 6px; color: #c7d4de; font-size: 10px; }
.health-dialog textarea { min-height: 170px; }
.health-dialog input[type=password], .health-dialog input[type=text] { width: 100%; min-height: 38px; margin-top: 5px; padding: 8px 10px; border: 1px solid #28475d; border-radius: 6px; background: #071724; color: #edf3f7; }
.health-dialog .profile-actions { margin-top: 10px; }
.admin-mfa-challenge { margin: 0 0 12px; color: #9db2c0; font-size: 10px; line-height: 1.55; }
.trainer-client-admin { margin-top: 12px; }
.trainer-client-groups { display: grid; gap: 8px; }
.trainer-client-group { overflow: hidden; border: 1px solid #214155; border-radius: 8px; background: #081a27; }
.trainer-client-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 9px 12px; color: #e8f0f5; cursor: pointer; list-style: none; }
.trainer-client-group > summary::-webkit-details-marker { display: none; }
.trainer-client-group > summary::after { color: #56e89c; content: "＋"; font-size: 14px; }
.trainer-client-group[open] > summary::after { content: "−"; }
.trainer-client-owner { display: grid; gap: 3px; min-width: 0; }
.trainer-client-owner b { overflow: hidden; color: #e9f1f5; font-size: 10px; text-overflow: ellipsis; }
.trainer-client-owner small { overflow: hidden; color: #8da5b5; font-size: 8px; text-overflow: ellipsis; }
.trainer-client-count { margin-left: auto; color: #75dda6; font-size: 9px; white-space: nowrap; }
.trainer-client-rows { padding: 0 10px 5px; border-top: 1px solid #1a3547; }
.trainer-client-rows .saved-row:last-child { border-bottom: 0; }
.progress-dialog { width: min(1480px, calc(100vw - 64px)); max-width: none; max-height: min(92vh, 1040px); overflow: auto; padding: 24px; border: 1px solid #294a5d; border-radius: 14px; background: radial-gradient(ellipse at 4% 0%, #12372f 0, #0b1c29 32%, #081521 78%); color: #eaf2f6; box-shadow: 0 28px 100px #000c; scrollbar-color: #315d68 #081521; scrollbar-width: thin; }
.progress-dialog::backdrop { background: #020710d9; backdrop-filter: blur(5px); }
.progress-dialog [hidden] { display: none !important; }
.progress-dialog-heading { align-items: center; padding-bottom: 13px; border-bottom: 1px solid #203b4e; }
.progress-dialog-heading > div > p { margin: 0 0 5px; color: #43e995; font-size: 9px; font-weight: 750; letter-spacing: .15em; }
.progress-dialog-heading h2 { font-size: 20px; }
.progress-dialog-heading span { display: block; margin-top: 6px; color: #8fa7b8; font-size: 10px; }
.client-profile-bar { display: flex; align-items: flex-end; gap: 9px; padding: 12px; border: 1px solid #1d3a4c; border-radius: 9px; background: #0a1b28; }
.client-profile-bar label { display: grid; width: min(420px, 100%); gap: 5px; color: #a9bdcb; font-size: 9px; }
.client-profile-bar input { width: 100%; min-height: 35px; padding: 8px 10px; border: 1px solid #28475d; border-radius: 6px; background: #071724; color: #edf3f7; font-size: 10px; }
.client-profile-bar .save-status { margin: 0 auto 8px 0; }
.progress-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 12px 0; }
.progress-summary .stat-card { min-height: 85px; padding: 11px 13px; }
.progress-summary .stat-card b { font-size: 19px; }
.progress-layout { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.5fr); align-items: start; gap: 12px; }
.body-map-card, .measurement-form, .progress-history { min-width: 0; padding: 14px; border: 1px solid #1c394c; border-radius: 10px; background: linear-gradient(145deg, #0c202e, #091824); }
.progress-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.progress-section-heading h3 { margin: 0; color: #edf4f7; font-size: 12px; }
.progress-section-heading p { margin: 4px 0 0; color: #8da5b5; font-size: 9px; line-height: 1.45; }
.map-legend { display: flex; align-items: center; gap: 5px; color: #91a9b8; font-size: 8px; white-space: nowrap; }
.map-legend i { width: 7px; height: 7px; border-radius: 50%; background: #36e58b; box-shadow: 0 0 10px #36e58b88; }
#body-map { display: block; width: min(100%, 330px); height: auto; max-height: 470px; margin: 0 auto; }
.body-silhouette { filter: drop-shadow(0 13px 14px #0005); }
.body-point { cursor: pointer; outline: none; }
.body-point:focus-visible circle { stroke: #dfffee; stroke-width: 3; }
.body-point circle { fill: #112b39; stroke: #79a394; stroke-width: 2; transition: .18s ease; }
.body-point text { fill: #b5c9d0; font-size: 9px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.body-point.has-value circle, .body-point:hover circle, .body-point:focus circle { fill: #0c5138; stroke: #4af09d; stroke-width: 3; filter: drop-shadow(0 0 5px #34e98b); }
.body-point.has-value text { fill: #eafff2; font-size: 7px; }
.body-map-footnote { display: block; margin-top: 8px; color: #718b9b; font-size: 8px; line-height: 1.5; text-align: center; }
.measurement-form { display: grid; gap: 10px; }
.measurement-form > label { display: grid; gap: 5px; color: #a9bdcb; font-size: 9px; }
.measurement-form > label small { color: #7f98a8; }
.measurement-form input, .measurement-form textarea { width: 100%; min-width: 0; min-height: 34px; padding: 7px 9px; border: 1px solid #28475d; border-radius: 6px; background: #071724; color: #edf3f7; font: inherit; font-size: 10px; }
.measurement-form textarea { min-height: 54px; resize: vertical; }
.measurement-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.measurement-fields label { display: grid; gap: 4px; min-width: 0; color: #b8c9d3; font-size: 9px; }
.measurement-fields label small { color: #6f899a; font-size: 8px; }
.measurement-form .profile-actions { flex-wrap: wrap; }
.progress-history { margin-top: 12px; }
.progress-chart { display: block; width: 100%; height: auto; min-height: 155px; overflow: visible; border: 1px solid #1a3548; border-radius: 8px; background: linear-gradient(180deg, #0b1e2a, #081722); }
.chart-grid { stroke: #284153; stroke-width: 1; stroke-dasharray: 3 5; }
.chart-label { fill: #8199a9; font: 10px system-ui, sans-serif; }
.chart-value { fill: #e4fff0; font-weight: 700; }
.chart-empty { fill: #94aaba; font: 11px system-ui, sans-serif; }
.chart-date { font-size: 8px; }
.chart-line { fill: none; stroke: #39e892; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { fill: url(#progress-area); opacity: .24; }
.chart-dot { fill: #dfffee; stroke: #24d77b; stroke-width: 3; }
.measurement-timeline { display: grid; gap: 8px; margin-top: 10px; }
.measurement-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 9px 14px; padding: 13px 14px; border: 1px solid #1d3b4e; border-radius: 9px; background: linear-gradient(120deg, #0a1b28, #0b202c); }
.measurement-entry-date { display: grid; gap: 3px; color: #e8f1f5; font-size: 10px; font-weight: 700; }
.measurement-entry-date small { color: #7f98a8; font-size: 8px; font-weight: 400; }
.measurement-entry-values { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 6px; min-width: 0; }
.measurement-chip { padding: 5px 7px; border: 1px solid #214354; border-radius: 20px; background: #0c2732; color: #b9ced4; font-size: 8px; }
.measurement-chip b { color: #59eaa0; font-weight: 700; }
.measurement-entry-note { grid-column: 1 / -1; margin: 0; color: #8ca4b3; font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.measurement-entry-actions { display: flex; justify-content: flex-end; gap: 6px; }
.measurement-entry-actions button { min-height: 28px; padding: 0 8px; border: 1px solid #29495d; border-radius: 5px; background: #0b2130; color: #b8c9d3; font-size: 8px; cursor: pointer; }
.measurement-entry-actions button:hover { border-color: #36d987; color: #69efaa; }
.measurement-entry-actions .danger-link { border-color: #65404a; color: #e9a1a6; }
.measurement-entry-actions .danger-link:hover { border-color: #c96170; color: #ffb2bb; }
.measurement-empty { padding: 20px 12px; border: 1px dashed #294658; border-radius: 8px; color: #8da5b5; font-size: 10px; text-align: center; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 12px 0 18px; padding: 0; list-style: none; }
.recovery-codes li { padding: 8px; border: 1px solid #29475b; border-radius: 5px; background: #071724; text-align: center; }
.recovery-codes code, .mfa-secret code { color: #8df1b6; font-size: 12px; letter-spacing: .08em; }
.mfa-secret { padding: 12px; border: 1px dashed #3d705d; border-radius: 6px; background: #071724; text-align: center; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subpage-heading { align-items: flex-start; flex-direction: column; }
  .progress-dialog { padding: 14px; }
  .progress-layout { grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); }
  .measurement-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .logout-button { padding: 5px 6px; font-size: 8px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { min-height: 85px; }
  .admin-settings { grid-template-columns: 1fr; }
  .admin-setting-row { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-setting-row .admin-setting-copy { grid-column: 1 / -1; }
  .admin-setting-row input { grid-column: 1; grid-row: 2; }
  .admin-setting-row .button { grid-column: 2; grid-row: 2; }
  .admin-section-heading { align-items: flex-start; flex-direction: column; }
  .doc-ex-comment { margin-left: 0; }
  .saved-row.client-row { align-items: stretch; flex-direction: column; gap: 6px; }
  .client-row-actions { justify-content: flex-start; }
  .trainer-client-group > summary { align-items: flex-start; }
  .trainer-client-count { margin-left: 0; }
  .progress-dialog { width: calc(100vw - 14px); max-height: 96vh; padding: 10px; }
  .library-dialog:has(#exercise-profile-manager[open]) { width: calc(100vw - 14px); max-height: 96vh; padding: 10px; }
  .exercise-profile-layout { grid-template-columns: 1fr; }
  .exercise-profile-form { grid-template-columns: 1fr; }
  .exercise-profile-form .profile-ex-name, .exercise-profile-form .profile-ex-video, .exercise-profile-form .profile-ex-comment, .exercise-profile-form #profile-frame-choices, .exercise-profile-form .profile-actions { grid-column: 1; }
  .exercise-profile-row { align-items: flex-start; flex-direction: column; }
  .exercise-profile-actions { justify-content: flex-start; }
  .export-measurements { grid-template-columns: 1fr; }
  .doc-measurement-history { margin-right: 0; margin-left: 0; padding: 7px; }
  .doc-measurement-table th, .doc-measurement-table td { padding: 3px 2px; font-size: 6px; }
  .progress-dialog-heading h2 { font-size: 17px; }
  .client-profile-bar { align-items: stretch; flex-direction: column; }
  .client-profile-bar label { width: 100%; }
  .client-profile-bar .save-status { margin: 0; }
  .progress-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-layout { grid-template-columns: 1fr; }
  #body-map { max-height: 380px; }
  .measurement-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .measurement-entry { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  .measurement-entry-date { grid-column: 1; }
  .measurement-entry-values { grid-column: 1 / -1; grid-row: 2; }
  .measurement-entry-actions { grid-column: 2; grid-row: 1; }
  .measurement-entry-note { grid-column: 1 / -1; margin: 0; }
}

@media print {
  .paper[class*="paper-zoom-"] { zoom: 1; }
}