:root {
  --navy: var(--palette-173e75,#173e75);
  --navy-deep: #112f5a;
  --sky: var(--palette-b9d8ff,#b9d8ff);
  --sky-soft: var(--palette-e5efff,#e5efff);
  --ink: #24364f;
  --muted: #758397;
  --line: #e1e7ef;
  --paper: #f5f7fb;
  --white: #fff;
  --serif: Georgia, 'Times New Roman', serif;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.messages-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); overflow: hidden; }
.conversation-list { border-right: 1px solid var(--line); background: #fafcff; overflow-y: auto; max-height: 740px; padding: 12px; }
.conversation-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.conversation-row > .conversation { flex: 1; min-width: 0; }
.conversation-profile { flex-shrink: 0; color: var(--navy); }
.conversation { display: flex; align-items: center; gap: 10px; padding: 14px 10px; border-radius: 10px; margin-bottom: 5px; color: var(--ink); }
.conversation:hover, .conversation.selected { background: var(--sky-soft); }
.conversation-all { border: 1px solid var(--palette-cad8e9,#cad8e9); border-radius: 6px; margin-bottom: 12px; }
.conversation-all .avatar { background: var(--palette-e4edff,#e4edff); color: var(--navy); }
.conversation-all .icon { width: 18px; height: 18px; }
.conversation-copy { min-width: 0; flex: 1; }
.conversation-copy strong { display: block; font-size: 12px; }
.conversation-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--muted); margin-top: 5px; }
.unread-badge { border-radius: 20px; background: var(--navy); color: white; padding: 4px 7px; font-size: 10px; }
.message-conversation { min-width: 0; }
.message-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 20px; border-bottom: 1px solid var(--line); }
.message-person { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.message-header .message-profile-link { font-size: 10px; padding: 9px 10px; white-space: nowrap; }
.message-header h2 { font-size: 17px; }
.message-header p { font-size: 10px; color: var(--muted); margin-top: 5px; }
#message-connection { margin-left: auto; max-width: 160px; font-size: 9px; color: var(--muted); }
.message-thread { height: 390px; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
.message-thread > * { flex-shrink: 0; }
.message-bubble { max-width: 85%; border-radius: 14px; padding: 13px 16px; font-size: 12px; overflow-wrap: anywhere; }
.message-bubble.incoming { align-self: flex-start; background: white; border: 1px solid var(--line); }
.message-bubble.outgoing { align-self: flex-end; background:var(--navigation-surface,var(--palette-102238,#0a1527)); color:white; }
.message-bubble strong { font-size: 10px; opacity: .8; }
.message-broadcast-label { display: block; margin-top: 6px; font-size: 10px; opacity: .8; }
.message-bubble p { margin-block: 7px; white-space: pre-wrap; line-height: 1.7; }
.message-bubble time { display: block; font-size: 9px; opacity: .7; }
.message-composer { padding: 20px; border-top: 1px solid var(--line); }
.message-composer > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.message-composer > div > span { font-size: 9px; color: var(--muted); }
.message-pending { padding: 22px; font-size: 12px; color: var(--muted); }
.older-messages { align-self: center; }
.schedule-card { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 22px; margin-bottom: 22px; }
.schedule-card-title { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 180px; }
.schedule-card-title > .icon { width: 28px; height: 28px; color: var(--navy); flex-shrink: 0; }
.schedule-card h2 { font-size: 16px; }
.schedule-card p { font-size: 11px; line-height: 1.7; color: var(--muted); margin-top: 5px; }
.schedule-status { display: inline-flex; border-radius: 20px; background: #e8edf6; color: #4f6384; padding: 6px 10px; font-size: 10px; font-weight: 600; }
.status-due { background: var(--palette-dcecff,#dcecff); color: var(--navy); }
.status-overdue { background: #fff0df; color: #8d5a23; }
.status-completed { background: var(--palette-dcecff,#dcecff); color: var(--navy); }
.schedule-detail { width: 100%; }
.checkin-summary { display: flex; gap: 12px; align-items: center; padding: 17px 20px; border: 1px solid #d6e3f6; background: var(--sky-soft); border-radius: 10px; margin-bottom: 24px; font-size: 12px; }
.checkin-reminder { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; background: var(--sky-soft); border: 1px solid var(--palette-cbdcf4,#cbdcf4); padding: 20px; border-radius: 12px; margin-bottom: 24px; }
.checkin-reminder > .icon { width: 28px; height: 28px; flex-shrink: 0; }
.checkin-reminder > div { flex: 1; min-width: 180px; }
.checkin-reminder strong { font-size: 14px; }
.checkin-reminder p { margin-top: 5px; font-size: 11px; line-height: 1.7; color: var(--muted); }
.client-schedule { padding: 20px; margin-bottom: 18px; }
.client-schedule-person { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.client-schedule-person strong { font-size: 14px; }
.client-schedule-person p { font-size: 10px; color: var(--muted); margin-top: 5px; }
.client-schedule > .schedule-card { margin: 0; background: #f8faff; box-shadow: none; }
@media (max-width: 760px) { .schedule-card { gap: 16px; padding: 18px; } .schedule-card-state { width: 100%; } .client-schedule { padding: 15px; } }
@media (max-width: 1050px) { .messages-layout { grid-template-columns: 220px minmax(0, 1fr); } #message-connection { display: none; } }
@media (max-width: 760px) {
  .messages-layout { grid-template-columns: 1fr; }
  .conversation-list { border-right: 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; overflow-x: auto; padding: 10px; }
  .conversation { flex: 0 0 200px; width: 200px; min-width: 0; margin: 0; padding: 10px; }
  .conversation-row { flex: 0 0 236px; width: 236px; }
  .conversation-row > .conversation { width: auto; }
  .message-header { padding: 16px; }
  .message-thread { height: 330px; padding: 14px; }
  .message-composer { padding: 16px; }
  .message-composer > div { flex-wrap: wrap; }
  .message-bubble { max-width: 92%; }
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary, label, [role="button"] { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:disabled { opacity: .55; cursor: wait; }
button:disabled[data-action^="builder-"] { cursor: not-allowed; }
input, select, textarea { width: 100%; color: var(--ink); background: #fff; border: 1px solid #d7dbe2; border-radius: 9px; padding: 12px 14px; min-width: 0; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { border-color: #677a9b; box-shadow: 0 0 0 3px #7e93b620; }
textarea { resize: vertical; min-height: 85px; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: #8e9298; }
label { display: block; font-weight: 600; font-size: 13px; }
label > input, label > textarea, label > select { display: block; margin-top: 10px; font-weight: 400; }
label + input, label + textarea, label + select { margin-top: 10px; }
form > label { margin-bottom: 19px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #6481b3; outline-offset: 4px; }
::selection { background: var(--palette-b9d8ff,#b9d8ff); color: var(--palette-173e75,#173e75); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; }
.icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 13px; font-weight: 600; border-radius: 9px; padding: 12px 17px; min-height: 44px; border: 1px solid transparent; white-space: nowrap; transition: background .15s, transform .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary, .btn-dark { color: #fff; background: var(--navy); }
.btn-primary:hover, .btn-dark:hover { background: var(--palette-253552,#253552); }
.btn-secondary { background: #fff; border-color: #d7dbe2; color: var(--navy); }
.btn-secondary:hover { background: #eaeef4; }
.btn .icon { width: 17px; height: 17px; }
.full { width: 100%; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: 0; border-radius: 8px; color: var(--muted); }
.icon-btn:hover { background: #e4e8ee; color: var(--navy); }
.text-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12px; color: var(--navy); border: 0; padding: 0; background: none; }
.text-link:hover { text-decoration: underline; }
.text-link .icon { width: 16px; height: 16px; }
.eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: #717782; }
.muted { color: #686e79; font-size: 12px; }
.fine-print { display: block; font-weight: 400; color: #6d727b; font-size: 11px; line-height: 1.6; }
.tag { display: inline-flex; align-items: center; padding: 6px 9px; border-radius: 5px; font-size: 9px; font-weight: 700; letter-spacing: .4px; background: #eceef2; color: #5f6673; white-space: nowrap; }
.tag-blue { background: var(--sky); color: var(--navy); }
.tag-amber { background: #faf0d7; color: #947123; }
.tag-outline { border: 1px solid #a5b0c4; color: var(--navy); background: transparent; font-size: 8px; letter-spacing: 1px; padding: 5px 8px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 24px; letter-spacing: -1px; }
.brand-symbol { display: inline-flex; justify-content: center; align-items: center; font-size: 26px; font-family: var(--serif); font-weight: bold; letter-spacing: -2px; width: 39px; height: 39px; background: var(--sky); color: var(--navy); border-radius: 11px; padding-right: 3px; }
.brand-dot { font-size: 10px; vertical-align: top; margin-left: 3px; opacity: .5; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.color-0 { background: #d8dfec; color: #475874; }
.color-1 { background: #f2e6d8; color: #a7835c; }
.color-2 { background: #e0e8f0; color: #607d97; }
.color-3 { background: #efdfdf; color: #ad7878; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 238px; flex: 0 0 238px; background: var(--navy); color: #fff; padding: 30px 19px 18px; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 10; overflow-y: auto; }
.sidebar .brand { padding: 0 9px; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.sidebar-close { display: none; }
.workspace-badge { display: flex; gap: 10px; align-items: center; border: 1px solid #ffffff1b; background: #ffffff06; border-radius: 10px; margin: 32px 0 28px; padding: 12px 10px; }
.workspace-icon { display: flex; align-items: center; justify-content: center; background: #ffffff0c; color: #c4d1e7; border-radius: 7px; width: 30px; height: 32px; }
.workspace-icon .icon { width: 17px; }
.workspace-badge strong { display: block; font-size: 11px; font-weight: 500; }
.workspace-badge div > span { color: #a9b0bd; display: block; font-size: 9px; margin-top: 4px; }
.nav-label { font-size: 8px; font-weight: 600; color: #939daf; letter-spacing: 1.5px; margin: 0 13px 13px; }
.nav-link { display: flex; align-items: center; gap: 11px; padding: 13px 13px; margin-bottom: 5px; color: #b7bfcd; font-size: 12px; font-weight: 500; border-radius: 8px; transition: background .15s, color .15s; }
.nav-link .icon { width: 18px; height: 18px; opacity: .85; }
.nav-link:hover { background: #ffffff0e; color: #fff; }
.nav-link.active { color: var(--navy); background: var(--sky); font-weight: 650; }
.nav-count { margin-left: auto; padding: 2px 6px; background: #ffffff1a; font-size: 10px; border-radius: 4px; }
.active .nav-count { background: var(--palette-173e7514,#173e7514); }
.sidebar-bottom { margin-top: auto; padding-top: 25px; }
.sidebar-note { padding: 19px 15px; border-radius: 10px; background: #ffffff06; border: 1px solid #ffffff12; margin-bottom: 18px; }
.sidebar-note > .icon { color: var(--palette-8eacdf,#8eacdf); width: 23px; height: 23px; margin-bottom: 14px; }
.sidebar-note strong { font-family: var(--serif); font-size: 20px; line-height: 1.3; font-weight: 400; display: block; color: #dde4ef; }
.sidebar-note p { font-size: 10px; line-height: 1.6; color: #a7afbc; margin-top: 9px; }
.demo-switch { width: 100%; border: 0; padding: 10px 6px; margin-bottom: 14px; text-align: left; color: #c4cbd6; background: transparent; font-size: 10px; display: flex; align-items: center; gap: 7px; }
.demo-switch:hover { color: var(--sky); }
.demo-switch .icon { width: 15px; }
.user-card { border-top: 1px solid #ffffff16; display: flex; align-items: center; gap: 9px; padding: 18px 4px 2px; }
.user-card strong { display: block; font-size: 11px; font-weight: 500; }
.user-card div > span { display: block; font-size: 9px; color: #a9b0bd; margin-top: 4px; }
.user-card .icon-btn { margin-left: auto; color: #a9b0bd; }
.user-card .icon-btn:hover { background: #ffffff10; }
.user-card .avatar { width: 32px; height: 32px; font-size: 10px; }
.main-shell { margin-left: 238px; flex: 1; min-width: 0; }
.topbar { height: 72px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 36px; background: #f8f9fc; }
.breadcrumb { font-size: 11px; color: #777c84; }
.breadcrumb > span { margin: 0 10px; color: #b7bcc5; }
.breadcrumb strong { font-weight: 500; color: var(--navy); }
.topbar-right { display: flex; align-items: center; gap: 22px; }
.topbar-date { font-size: 11px; color: #717781; }
.topbar-avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #c1cad9; background: #e4e9f2; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
.demo-indicator { font-size: 10px; color: #606b7e; display: inline-flex; align-items: center; gap: 6px; }
.demo-indicator > span, .live-label > span { background: #6279a0; height: 5px; width: 5px; border-radius: 50%; }
.mobile-menu { display: none; }
.page-content { max-width: 1520px; padding: 34px 36px 16px; margin: 0 auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 27px; }
.page-heading h1 { font-size: 29px; letter-spacing: -1px; margin-top: 8px; line-height: 1.2; }
.page-heading p { font-size: 12px; line-height: 1.6; color: #747982; margin-top: 8px; }
.page-footer { max-width: 1520px; margin: 0 auto; padding: 22px 36px 26px; display: flex; justify-content: space-between; color: #878c95; font-size: 9px; }
.welcome-banner { background: #dce3ee; border: 1px solid #ced6e5; border-radius: 15px; min-height: 263px; padding: 28px 33px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; margin-bottom: 21px; }
.welcome-banner > div:first-child { position: relative; z-index: 1; }
.welcome-banner h2 { font-family: var(--serif); font-weight: 400; font-size: 43px; line-height: 1.04; letter-spacing: -1.7px; margin: 15px 0 12px; }
.welcome-banner h2 em { font-weight: 400; }
.welcome-banner p { font-size: 11px; line-height: 1.7; color: #5d6574; margin-bottom: 16px; }
.banner-art { position: absolute; right: 15px; top: 0; width: 340px; height: 100%; }
.art-orbit { border: 1px solid #a2b1cb77; border-radius: 50%; position: absolute; width: 260px; height: 260px; right: 40px; top: 20px; transform: rotate(-35deg); }
.orbit-one { width: 290px; height: 175px; top: 60px; }
.orbit-two { width: 320px; height: 190px; top: 65px; right: -20px; transform: rotate(35deg); }
.orbit-three { width: 140px; height: 300px; top: -30px; right: 65px; transform: rotate(-40deg); }
.art-progress { position: absolute; top: 48px; right: 60px; width: 211px; height: 174px; padding: 20px; border-radius: 14px; background: var(--navy); color: var(--sky); transform: rotate(-6deg); box-shadow: 12px 17px 0 #95a8c845; }
.art-progress > span { display: flex; gap: 7px; font-size: 8px; color: #aab8d0; letter-spacing: .8px; align-items: center; }
.art-progress .icon { height: 14px; width: 14px; }
.art-progress > svg { width: 100%; height: 78px; margin: 12px 0 5px; }
.art-progress > strong { font-size: 11px; color: #e9eef7; font-weight: 500; }
.art-star { position: absolute; color: #516a94; font-family: var(--serif); font-size: 65px; right: 1px; top: 15px; transform: rotate(16deg); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; }
.stat-card { background: #fff; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 11px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.stat-top > span:first-child { font-size: 10px; font-weight: 500; color: #6e737c; }
.stat-icon { height: 27px; width: 27px; border-radius: 7px; background: #edf0f5; color: #707e95; display: inline-flex; align-items: center; justify-content: center; }
.stat-icon .icon { width: 15px; height: 15px; }
.stat-card > strong { display: block; font-size: 29px; font-weight: 550; margin-top: 8px; letter-spacing: -1px; line-height: 1.25; }
.stat-card small { font-size: 14px; color: #878e9a; font-weight: 400; letter-spacing: 0; }
.stat-detail { display: block; font-size: 9px; color: #788190; margin-top: 8px; }
.stat-attention { background: #e6ebf4; border-color: var(--palette-d1dae9,#d1dae9); }
.stat-attention .stat-icon { background: var(--palette-d3dbea,#d3dbea); color: #586f98; }
.goal-stat > strong { font-size: 17px; letter-spacing: -.4px; line-height: 1.4; margin-top: 14px; }
.dashboard-grid { display: grid; grid-template-columns: 1.22fr 1fr; gap: 20px; }
.panel { border: 1px solid var(--line); background: #fff; border-radius: 12px; overflow: hidden; }
.panel-heading { padding: 22px 22px 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-heading h2 { font-size: 15px; letter-spacing: -.3px; }
.panel-heading p { font-size: 10px; color: #798190; margin-top: 5px; }
.table-scroll { width: 100%; overflow-x: auto; }
.client-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; white-space: nowrap; }
.client-table th { color: #757c89; font-size: 8px; font-weight: 600; letter-spacing: .4px; padding: 12px 12px; border-block: 1px solid #e9ecf0; background: #f9fafd; }
.client-table th:first-child, .client-table td:first-child { padding-left: 22px; }
.client-table td { padding: 14px 12px; border-bottom: 1px solid #e9ecf0; }
.client-table tr:last-child td { border-bottom: 0; }
.client-table tbody tr:hover { background: #f8fafd; }
.client-identity { display: flex; align-items: center; gap: 10px; }
.client-identity strong { display: block; font-size: 11px; font-weight: 600; }
.client-identity span > span { font-size: 9px; color: #7d8490; display: block; margin-top: 5px; max-width: 130px; text-overflow: ellipsis; overflow: hidden; }
.plan-label { font-size: 9px; font-weight: 500; color: #5b6577; }
.week-chart { display: block; width: calc(100% - 36px); margin: 0 auto; min-height: 135px; max-height: 208px; }
.chart-grid { stroke: #dfe4ed; stroke-width: 1; stroke-dasharray: 3 4; }
.chart-label { fill: #828996; font-size: 10px; font-family: 'Segoe UI', sans-serif; }
.chart-bar { fill: var(--palette-c3d1ea,#c3d1ea); }
.chart-bar.today { fill: #414f66; }
.chart-caption { border-top: 1px solid #e9ecf0; display: flex; align-items: center; gap: 6px; padding: 15px 22px; color: #757f90; font-size: 9px; }
.legend-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--palette-93aad3,#93aad3); }
.chart-caption strong { margin-left: auto; color: #4e5d78; font-weight: 600; }
.activity-list { padding: 0 22px 7px; }
.activity-item { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid #e6eaf0; }
.activity-item:last-child { border-bottom: 0; }
.activity-symbol { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #596b8b; background: #e8edf5; flex-shrink: 0; }
.activity-symbol .icon { width: 15px; height: 15px; }
.activity-item strong { font-size: 10px; font-weight: 600; line-height: 1.5; }
.activity-item strong > span { color: #6d7584; font-weight: 400; }
.activity-item p { font-size: 9px; margin-top: 4px; color: #7f8795; }
.activity-item time { font-size: 9px; color: #7d8696; margin-left: auto; white-space: nowrap; }
.live-label { display: inline-flex; align-items: center; gap: 5px; font-size: 8px; color: #707c90; white-space: nowrap; }
.next-step-panel { background: #e8ecf3; border-color: #d6dde8; padding: 27px; display: flex; align-items: flex-start; flex-direction: column; }
.next-step-panel h2 { font-family: var(--serif); font-size: 27px; font-weight: 400; letter-spacing: -.6px; line-height: 1.15; margin: 13px 0; }
.next-step-panel p { font-size: 11px; color: #6d788c; line-height: 1.8; max-width: 340px; margin-bottom: 20px; }
.next-step-panel .btn { font-size: 11px; padding: 10px 13px; }
.mini-avatars { display: flex; align-items: center; padding-top: 23px; margin-top: auto; }
.mini-avatars .avatar { border: 3px solid #e8ecf3; margin-left: -9px; width: 30px; height: 30px; font-size: 8px; }
.mini-avatars .avatar:first-child { margin-left: 0; }
.mini-avatars > span:last-child { font-size: 9px; color: #788294; margin-left: 9px; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; }
.search-field { display: flex; align-items: center; border: 1px solid #dbdfe6; background: #fff; border-radius: 8px; padding-left: 12px; width: 320px; max-width: 100%; }
.search-field .icon { width: 16px; height: 16px; color: #7a8598; }
.search-field input { border: 0; background: transparent; padding: 11px; font-size: 11px; }
.search-field:focus-within { border-color: #788bab; box-shadow: 0 0 0 3px #7e93b620; }
.search-field input:focus { box-shadow: none; }
.empty-state { text-align: center; padding: 38px 20px; width: 100%; }
.empty-icon { width: 45px; height: 45px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #e7ecf4; color: #6c80a2; margin-bottom: 12px; }
.empty-state h3 { font-size: 16px; }
.empty-state p { font-size: 12px; line-height: 1.6; color: #757f90; margin-top: 9px; max-width: 370px; margin-inline: auto; }
.empty-state .btn { margin-top: 18px; }
.back-link { display: inline-flex; font-size: 11px; font-weight: 500; color: #707b8f; margin-bottom: 22px; }
.back-link:hover { color: var(--navy); }
.profile-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.profile-heading > .avatar { width: 68px; height: 68px; font-size: 19px; }
.profile-heading h1 { font-size: 29px; letter-spacing: -1px; margin-top: 5px; }
.profile-heading p { font-size: 11px; color: #737b8a; margin-top: 6px; }
.profile-heading p > span { margin: 0 5px; }
.profile-heading > .btn { margin-left: auto; }
.profile-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.profile-plan { padding: 0 22px 24px; }
.plan-card-icon { height: 44px; width: 44px; border-radius: 12px; background: #dce4f1; display: flex; justify-content: center; align-items: center; color: #465877; }
.profile-plan h3 { margin-top: 15px; font-size: 21px; letter-spacing: -.5px; }
.profile-plan > p { margin-top: 8px; color: #717b8b; font-size: 11px; line-height: 1.7; }
.plan-day-list { margin-block: 19px; border-top: 1px solid #e0e5ee; }
.plan-day-list > div { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid #e0e5ee; }
.plan-day-list > div > span { font-size: 9px; color: #8b97ab; }
.plan-day-list strong { font-size: 11px; font-weight: 500; }
.plan-day-list small { font-size: 9px; color: #818b9c; margin-left: auto; white-space: nowrap; }
.weight-chart { width: calc(100% - 36px); display: block; margin: 15px 18px 25px; }
.chart-line { stroke: #506384; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: #fff; stroke: #506384; stroke-width: 2; }
.checkin-list { padding: 0 22px 10px; }
.checkin-list article { padding: 13px 0; border-bottom: 1px solid #e5e9f0; }
.checkin-list article:last-child { border-bottom: 0; }
.checkin-list article > div { display: flex; align-items: center; gap: 12px; }
.checkin-list time { margin-left: auto; font-size: 9px; color: #7b8597; }
.checkin-list p { font-size: 11px; line-height: 1.7; margin-top: 9px; color: #636e81; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.plan-card { padding: 26px; }
.plan-card-top { display: flex; align-items: center; justify-content: space-between; }
.plan-card h2 { margin-top: 22px; font-family: var(--serif); font-weight: 400; font-size: 29px; letter-spacing: -.5px; }
.plan-card > p { font-size: 12px; line-height: 1.8; color: #6e798c; margin-top: 10px; min-height: 43px; }
.plan-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.plan-card-bottom { flex-wrap: wrap; }
.session-summary > .text-link { margin-bottom: 12px; }
.plan-preview { margin-top: 18px; font-size: 10px; }
.workout-day-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.workout-day-actions .text-link { font-size: 10px; }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.filter-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.filter-chip { border-radius: 7px; border: 1px solid #d4dae5; background: transparent; color: #60708b; padding: 9px 12px; font-size: 10px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.filter-chip:hover { background: #dce3f0; }
.filter-chip.selected { color: #fff; border-color: var(--navy); background: var(--navy); }
.filter-chip .icon { width: 12px; height: 12px; }
.exercise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.exercise-grid > .empty-state { grid-column: 1 / -1; }
.exercise-visual { height: 156px; position: relative; display: flex; align-items: center; justify-content: center; background: #dfe5ee; overflow: hidden; }
.exercise-visual::before, .exercise-visual::after { content: ''; width: 145px; height: 145px; border: 1px solid #7c8faf35; border-radius: 50%; position: absolute; top: 5px; left: calc(50% - 55px); }
.exercise-visual::after { left: calc(50% - 100px); top: 30px; }
.exercise-visual > svg { width: 112px; height: 112px; fill: none; stroke: #536482; stroke-width: 4; stroke-linecap: round; position: relative; }
.exercise-visual > .tag { position: absolute; bottom: 14px; right: 14px; background: #ffffffb0; }
.exercise-number { position: absolute; top: 15px; left: 17px; color: #55678650; font-family: var(--serif); font-size: 28px; }
.muscle-chest { background: #eee8dd; }
.muscle-chest > svg { stroke: #988463; }
.muscle-back { background: #e1e4e9; }
.muscle-back > svg { stroke: #637188; }
.muscle-shoulders { background: #e8e4ec; }
.muscle-shoulders > svg { stroke: #8e7d9b; }
.muscle-core { background: #d5ddec; }
.muscle-core > svg { stroke: #5a7199; }
.exercise-body { padding: 20px; }
.exercise-body .eyebrow { font-size: 8px; }
.exercise-body h2 { font-size: 16px; letter-spacing: -.3px; margin-top: 7px; }
.exercise-body p { font-size: 11px; line-height: 1.8; color: #707a8a; margin-top: 10px; }
.progress-selector { display: flex; align-items: center; gap: 14px; margin-bottom: 23px; }
.progress-selector label { font-size: 11px; color: #727c8e; font-weight: 400; }
.progress-selector select { width: 230px; padding: 10px; font-size: 12px; }
.wide-panel { grid-column: 1 / -1; }
.client-banner h2 { font-size: 43px; max-width: 420px; }
.client-art-icon { position: absolute; right: 72px; top: 57px; background: var(--navy); color: var(--sky); width: 146px; height: 146px; border-radius: 36px; transform: rotate(-12deg); display: flex; justify-content: center; align-items: center; box-shadow: 10px 13px 0 #95a8c845; }
.client-art-icon .icon { width: 79px; height: 79px; stroke-width: 1.2; }
.client-banner .btn { font-size: 11px; }
.workout-notice { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #697384; background: #e3e8f1; padding: 13px 16px; border: 1px solid #cfd7e6; border-radius: 9px; margin-bottom: 20px; }
.workout-notice .icon { width: 16px; height: 16px; }
.workout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 286px; align-items: start; gap: 23px; }
.workout-exercises { display: grid; gap: 20px; }
.workout-exercise { padding: 22px; }
.workout-exercise-heading { display: flex; align-items: center; gap: 12px; }
.workout-number { height: 41px; width: 41px; border-radius: 10px; background: #e4e9f2; color: #687ea3; font-family: var(--serif); font-size: 20px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.workout-exercise-heading .eyebrow { font-size: 8px; }
.workout-exercise-heading h2 { font-size: 16px; letter-spacing: -.4px; margin-top: 6px; }
.workout-exercise-heading p { font-size: 10px; color: #737f95; margin-top: 5px; }
.rest-btn { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid #d5dce7; background: #f3f6fa; border-radius: 7px; font-size: 9px; color: #5b6b86; margin-left: auto; white-space: nowrap; }
.rest-btn .icon { width: 13px; height: 13px; }
.exercise-instructions { margin-block: 17px; font-size: 10px; color: #758093; }
.exercise-instructions summary { cursor: pointer; }
.exercise-instructions p { line-height: 1.7; margin-top: 10px; }
.set-grid { display: grid; grid-template-columns: 40px 1fr 1fr 42px; gap: 14px; align-items: center; padding: 9px 5px; border-bottom: 1px solid #e7ebf1; border-radius: 4px; }
.set-grid:last-child { border-bottom: 0; }
.set-grid-heading { font-size: 8px; letter-spacing: .7px; color: #7d889b; border-bottom: 0; padding-bottom: 5px; }
.set-grid input[type="number"] { text-align: center; font-size: 12px; padding: 9px; background: #f9fafd; }
.set-number { font-size: 12px; color: #858fa1; text-align: center; }
.set-checkbox { position: relative; display: flex; width: 31px; height: 31px; cursor: pointer; }
.set-checkbox input { appearance: none; margin: 0; width: 31px; height: 31px; border-radius: 8px; border: 1px solid #d0d7e2; padding: 0; background: #eef1f7; }
.set-checkbox input:checked { background: var(--navy); border-color: var(--navy); }
.set-checkbox .icon { pointer-events: none; position: absolute; left: 6px; top: 6px; width: 19px; height: 19px; color: #9caac1; }
.set-checkbox input:checked + .icon { color: var(--sky); }
.set-done { background: #f1f4fa; }
.session-summary { padding: 24px; position: sticky; top: 20px; }
.session-summary h2 { font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: -.4px; margin-top: 9px; }
.session-completion { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 8px; }
.session-completion strong { font-size: 31px; font-weight: 500; }
.session-completion span { font-size: 10px; color: #7e899b; }
progress { appearance: none; width: 100%; height: 5px; border: 0; border-radius: 10px; overflow: hidden; background: #dfe4ec; }
progress::-webkit-progress-bar { background: #dfe4ec; }
progress::-webkit-progress-value { background: #6079a4; border-radius: 10px; }
progress::-moz-progress-bar { background: #6079a4; }
.rest-timer-box { text-align: center; background: #ebeff5; border-radius: 9px; padding: 16px; margin: 24px 0; }
.rest-timer-box > span { display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 8px; color: #7c899f; letter-spacing: 1px; }
.rest-timer-box .icon { width: 14px; height: 14px; }
.rest-timer-box strong { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.4px; margin-top: 12px; }
.rest-timer-box .text-link { margin-top: 11px; font-size: 9px; color: #7887a0; font-weight: 400; }
.session-summary > label { margin-top: 19px; font-size: 10px; }
.session-summary .fine-print { margin-top: 15px; font-size: 9px; }
.session-summary .btn { font-size: 11px; }
.session-summary input, .session-summary textarea { font-size: 11px; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: #f7f9fc; }
.login-story { background: var(--navy); color: #fff; padding: 42px 55px 28px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.login-story .brand { z-index: 1; }
.login-story-content { position: relative; z-index: 1; margin: auto 0; padding-block: 55px; }
.eyebrow.light { color: #9aadcd; font-size: 9px; }
.login-story h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 4.4vw, 75px); letter-spacing: -2.8px; line-height: 1.08; margin: 26px 0 22px; }
.login-story h1 em { color: var(--sky); font-weight: 400; }
.login-story-content > p { font-size: 13px; line-height: 1.9; max-width: 355px; color: #bac1cd; }
.login-benefits { display: flex; flex-direction: column; gap: 13px; margin-top: 34px; font-size: 11px; color: #cad2df; }
.login-benefits > span { display: flex; align-items: center; gap: 10px; }
.login-benefits .icon { color: var(--sky); width: 15px; height: 15px; }
.login-footnote { position: relative; z-index: 1; font-size: 10px; color: #939daf; }
.login-orbit { position: absolute; bottom: -120px; right: -110px; width: 500px; height: 500px; pointer-events: none; }
.login-orbit span { position: absolute; width: 470px; height: 350px; border: 1px solid var(--palette-6b89bc18,#6b89bc18); border-radius: 50%; transform: rotate(-35deg); }
.login-orbit span:nth-child(2) { transform: rotate(35deg); }
.login-orbit span:nth-child(3) { transform: rotate(90deg); }
.login-form-area { display: flex; justify-content: center; align-items: center; padding: 48px; }
.login-card { max-width: 370px; width: 100%; }
.login-card h2 { font-size: 34px; letter-spacing: -1.3px; margin-top: 14px; }
.login-card > .muted { margin-top: 10px; font-size: 12px; }
.login-card form { margin-top: 34px; }
.login-card label { font-size: 11px; }
.login-card input { font-size: 12px; padding-block: 13px; }
.login-card .btn { font-size: 12px; }
.login-card .full .icon { margin-left: auto; }
.login-card .full { justify-content: space-between; }
.demo-access { margin-top: 31px; padding: 20px; border: 1px solid #d3dae7; border-radius: 11px; background: #e9edf5; }
.demo-heading { display: flex; align-items: center; gap: 10px; }
.demo-heading > span:last-child { font-size: 11px; font-weight: 600; }
.demo-access p { margin: 12px 0 15px; font-size: 11px; color: #6c778b; line-height: 1.7; }
.demo-buttons { display: flex; flex-direction: column; gap: 8px; }
.demo-buttons .btn { justify-content: flex-start; font-size: 11px; }
.demo-access .fine-print { font-size: 9px; margin-top: 12px; }
.login-security { margin-top: 27px; display: flex; justify-content: center; align-items: center; gap: 7px; font-size: 10px; color: #7e899b; }
.login-security .icon { width: 15px; height: 15px; }
.calendar-toolbar { padding: 20px; }
.calendar-week-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.calendar-range-controls { display: contents; }
.calendar-week-controls strong { font-size: 14px; margin-right: auto; }
.calendar-week-controls [data-action="calendar-previous"] .icon { transform: rotate(180deg); }
.calendar-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-top: 20px; }
.calendar-filters > label { flex: 1; min-width: 150px; }
.calendar-filters .calendar-cancelled-toggle { display: flex; align-items: center; gap: 8px; font-weight: 400; min-height: 42px; }
.calendar-cancelled-toggle input { width: 16px; margin: 0; accent-color: var(--navy); }
.calendar-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; margin: 22px 0; }
.week-settings { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.week-settings > div { flex: 1; min-width: 180px; }
.week-settings strong { font-size: 14px; }
.week-settings p { color: var(--muted); font-size: 11px; line-height: 1.7; margin-top: 6px; }
.week-settings label { min-width: 150px; font-size: 10px; }
.week-settings select { font-size: 11px; padding: 9px 10px; margin-top: 6px; }
.week-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 17px 0 12px; color: var(--muted); font-size: 10px; }
.week-legend > span { display: flex; align-items: center; gap: 6px; }
.week-legend > span:last-child { margin-left: auto; }
.week-legend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line); }
.week-open-dot { background: white; }
.week-booked-dot { background: var(--palette-b9d8ff,#b9d8ff); border-color: var(--palette-6b94cd,#6b94cd) !important; }
.week-other-dot { background: #e1e7ef; }
.week-cancelled-dot { background: white; border-style: dashed !important; }
.week-range-note { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 10px 0; }
.week-timeline-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: white; }
.week-timeline { min-width: 0; width: 100%; --week-height: 480px; }
.week-compact { --hour-height: 40px; }
.week-comfortable { --hour-height: 64px; }
.week-column-headings, .week-time-columns { display: grid; grid-template-columns: 52px repeat(7,minmax(0,1fr)); }
.week-column-headings { border-bottom: 1px solid var(--line); background: #f7f9fc; }
.week-axis-heading { display: grid; place-items: center; color: var(--muted); font-size: 10px; }
.week-day-heading { min-width: 0; display: flex; align-items: center; flex-direction: column; gap: 4px; background: transparent; color: var(--ink); border: 0; border-left: 1px solid var(--line); padding: 11px 3px; cursor: pointer; }
.week-day-heading > span { font-size: 10px; color: var(--muted); }
.week-day-heading strong { display: grid; place-items: center; font-size: 17px; width: 26px; height: 26px; border-radius: 50%; }
.week-day-heading small { font-size: 9px; color: var(--muted); }
.week-day-heading-today strong { background: var(--navy); color: white; }
.week-day-heading-today { background: #eaf1fa; }
.week-day-heading-selected { box-shadow: inset 0 -3px var(--palette-6b94cd,#6b94cd); }
.week-time-columns { padding-bottom: 14px; }
.week-time-axis, .week-day-column { height: var(--week-height); position: relative; }
.week-time-axis { background: #fafbfd; }
.week-hour-label { height: var(--hour-height); text-align: right; padding-right: 8px; font-size: 10px; color: var(--muted); }
.week-hour-label span { position: relative; top: -6px; }
.week-hour-label:first-child span { top: 2px; }
.week-time-end { position: absolute; right: 8px; bottom: -6px; color: var(--muted); font-size: 10px; }
.week-day-column { border-left: 1px solid var(--line); }
.week-today-column { background: var(--palette-eef4fc,#eef4fc); }
.week-working-hours { background: #f8e9e6; }
.week-available-band { position: absolute; left: 0; right: 0; background: white; pointer-events: none; }
.week-today-column .week-available-band { background: var(--palette-eef4fc,#eef4fc); }
.week-closed-dot { background: #e7ecf2; }
.week-slot { display: block; position: relative; height: var(--hour-height); width: 100%; padding: 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--palette-6b94cd,#6b94cd); }
button.week-slot { cursor: crosshair; }
.week-slot > span { opacity: 0; font-size: 18px; }
button.week-slot:hover { background: var(--sky-soft); }
button.week-slot:hover > span { opacity: 1; }
button.week-slot:disabled { cursor: default; opacity: 1; }
button.week-slot:disabled:hover { background: transparent; }
button.week-slot:disabled:hover > span { opacity: 0; }
.week-event { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 3px 5px; border: 1px solid var(--palette-8aacda,#8aacda); border-left: 3px solid var(--navy); border-radius: 2px; background: var(--palette-dceaff,#dceaff); color: var(--navy); text-align: left; cursor: pointer; overflow: hidden; line-height: 1.25; }
.week-event strong { font-size: 10px; white-space: nowrap; }
.week-event > span { font-size: 10px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-event small { font-size: 8px; }
.week-other-event { background: #edf0f5; border-color: #c2cad7; border-left-color: #7d8da5; color: #5a6d87; }
.week-cancelled-event { background: #fff; border: 1px dashed #a5b2c5; color: var(--muted); }
.week-cancelled-event strong, .week-cancelled-event > span { text-decoration: line-through; }
.week-event:hover, .week-event:focus-visible { outline: 2px solid var(--palette-6b94cd,#6b94cd); outline-offset: -2px; }
.booking-date-picker { border:1px solid #d7dbe2; border-radius:6px; background:#fff; margin-top:10px; }
.booking-date-picker > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; min-height:44px; cursor:pointer; list-style:none; font-size:13px; }
.booking-date-picker > summary::-webkit-details-marker { display:none; }
.booking-form-grid:has(.booking-date-picker[open]) > div:first-child { grid-column:1 / -1; }
.booking-date-month { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-top:1px solid #e3e9f1; }
.booking-date-month .icon-btn { width:40px; height:40px; }
.booking-date-month [data-action="booking-date-month:-1"] .icon { transform:rotate(180deg); }
.booking-date-month strong { font-size:13px; }
.booking-date-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; padding:8px; }
.booking-date-grid > span { text-align:center; color:var(--muted); font-size:10px; padding-block:6px; }
.booking-date-grid button { min-width:0; min-height:40px; border:1px solid var(--palette-c6d5e7,#c6d5e7); border-radius:6px; background:#f9fbff; color:var(--navy); font-size:12px; font-weight:700; }
.booking-date-grid button:disabled { background:#f5f5f6; border-color:transparent; color:#a3a9b3; cursor:default; opacity:1; }
.booking-date-grid button[aria-pressed="true"]:not(:disabled) { background:var(--palette-245a91,#245a91); border-color:var(--palette-245a91,#245a91); color:white; }
.booking-date-picker > .fine-print { margin:8px 12px 14px; }
.week-short-event { padding: 0 3px; gap: 0; }
.week-short-event strong { font-size: 8px; }
.week-short-event > span { display: none; }
.week-day-agenda { margin-top: 24px; scroll-margin-top: 85px; }
.availability-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.availability-notice strong { font-size: 12px; }
.availability-notice p { color: var(--muted); font-size: 11px; line-height: 1.7; margin-top: 6px; }
.availability-notice .btn { flex-shrink: 0; }
.availability-warning { color: #8a5618 !important; }
.booking-series-badge { color: var(--navy); font-size: 10px !important; margin: 0 0 6px !important; }
.self-booking-slots { display: grid; grid-template-columns: repeat(auto-fit,minmax(90px,1fr)); gap: 8px; margin: 16px 0; }
.self-booking-slots > p { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.7; }
.self-booking-slot { padding: 12px 8px; border: 1px solid var(--palette-c6d6ec,#c6d6ec); border-radius: 8px; background: #f4f8ff; color: var(--navy); font-size: 13px; cursor: pointer; }
.self-booking-slot:hover { border-color: var(--navy); }
.self-booking-slot[aria-pressed="true"] { background: var(--navy); color: white; border-color: var(--navy); }
.self-booking-selection { color: var(--navy); font-size: 12px; line-height: 1.7; margin: 12px 0; }
.booking-form-grid > * { min-width: 0; }
.booking-form-grid input, .booking-form-grid select { min-width: 0; max-width: 100%; }
.series-preview { margin-top: 12px; font-size: 11px; line-height: 1.7; color: var(--muted); }
.series-preview ul { list-style: none; margin: 12px 0; padding: 0; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.series-preview li { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.series-preview li:last-child { border-bottom: 0; }
.series-preview .series-conflict { background: #fff8ee; color: #8a5618; }
#booking-recurrence { margin: 12px 0 20px; padding: 14px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; }
.agenda-working-hours { padding: 14px 20px; background: #f7f9fc; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 11px; line-height: 1.7; }
.availability-weekly { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.availability-day, .availability-time-off { border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-width: 0; background: #fafbfd; }
.availability-day-heading, .availability-section-heading { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 10px; }
.availability-day-heading h3, .availability-section-heading h3 { font-size: 13px; }
.availability-day-heading > span { color: var(--muted); font-size: 10px; margin-right: auto; }
.availability-day-heading .text-link { font-size: 11px; }
.availability-period { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) 32px; gap: 8px; align-items: end; }
.availability-period .icon-btn { margin-bottom: 12px; }
#availability-form label { font-size: 11px; min-width: 0; }
#availability-form input:not([type="checkbox"]), #availability-form select { min-width: 0; width: 100%; font-size: 12px; padding: 9px; }
.availability-section-title { font-size: 15px; margin: 20px 0 8px; }
.availability-section-heading { margin-top: 24px; }
.availability-off-dates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.availability-time-off { margin-bottom: 12px; }
.availability-no-timeoff { color: var(--muted); font-size: 12px; padding: 16px 0; }
@media (max-width: 560px) {
  .availability-weekly { grid-template-columns: minmax(0,1fr); }
  .availability-notice { flex-wrap: wrap; padding: 14px; }
  .availability-section-heading { flex-wrap: wrap; }
  .availability-off-dates { grid-template-columns: minmax(0,1fr); gap: 0; }
}
@media (max-width: 760px) {
  .week-settings label { flex: 1; }
  .week-settings > div { flex-basis: 100%; }
  .week-legend > span:last-child { margin-left: 0; }
  .week-column-headings, .week-time-columns { grid-template-columns: 30px repeat(7,minmax(0,1fr)); }
  .week-axis-heading, .week-hour-label, .week-time-end { font-size: 8px; }
  .week-hour-label { padding-right: 3px; }
  .week-time-end { right: 3px; }
  .week-day-heading { padding: 10px 0; }
  .week-day-heading > span { font-size: 9px; }
  .week-day-heading strong { width: 23px; height: 23px; font-size: 14px; }
  .week-day-heading small { display: none; }
  .week-event { padding: 2px 1px; border-left-width: 2px; gap: 1px; }
  .week-event strong { width: 100%; font-size: 8px; line-height: 1.2; }
  .week-event-start, .week-event-end { display: block; overflow: hidden; text-overflow: ellipsis; }
  .week-event-divider { display: none; }
  .week-event > span { font-size: 8px; }
  .week-event small { font-size: 7px; }
  .week-short-event { padding: 0 1px; }
  .week-short-event .week-event-end { display: none; }
}
.calendar-view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; padding: 3px; background: var(--paper); }
.calendar-view-toggle button { border: 0; background: transparent; color: var(--muted); padding: 9px 12px; font-size: 11px; border-radius: 6px; cursor: pointer; }
.calendar-view-toggle button[aria-pressed="true"] { background: var(--navy); color: white; }
.month-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 23px 0 10px; color: var(--muted); font-size: 12px; }
.month-summary > span { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; line-height: 1.7; }
.month-summary .icon { width: 18px; margin-right: 5px; color: var(--navy); }
.month-summary strong { color: var(--ink); }
.month-legend { display: flex; align-items: center; gap: 14px; font-size: 10px; }
.month-legend > span { display: flex; align-items: center; gap: 6px; }
.month-legend i { display: inline-block; height: 10px; width: 10px; border-radius: 3px; }
.month-empty-dot { background: var(--sky-soft); border: 1px solid var(--palette-cbdcf4,#cbdcf4); }
.month-booked-dot { background: var(--navy); }
.month-help, .month-filter-note { color: var(--muted); font-size: 11px; line-height: 1.7; margin-bottom: 14px; }
.month-filter-note { background: var(--sky-soft); border-radius: 8px; padding: 10px 14px; }
.month-weekdays, .month-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; }
.month-weekdays { margin-bottom: 8px; }
.month-weekdays span { text-align: center; color: var(--muted); padding: 8px; font-size: 11px; }
.month-cell { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 0; min-height: 96px; border: 1px solid var(--line); border-radius: 9px; padding: 10px; color: var(--ink); text-align: left; background: white; cursor: pointer; }
.month-empty { background: var(--palette-eef4fe,#eef4fe); border-color: #dce6f5; }
.month-has-bookings { border-top: 3px solid var(--navy); padding-top: 8px; }
.month-cell:hover { border-color: var(--palette-96b4df,#96b4df); }
.month-cell.month-day-off { background: #edf0f5; border-color: #d8dfe8; }
.month-date { align-self: flex-start; display: grid; place-items: center; width: 26px; height: 26px; font-size: 13px; font-weight: 600; border-radius: 50%; }
.month-cell-count { color: var(--muted); font-size: 9px; line-height: 1.5; }
.month-session { display: flex; flex-direction: column; gap: 2px; font-size: 9px; line-height: 1.4; color: var(--navy); }
.month-session strong, .month-session > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-session-cancelled { color: var(--muted); text-decoration: line-through; }
.month-more { font-size: 9px; color: var(--muted); }
.month-outside { opacity: .45; }
.month-today .month-date { background: var(--navy); color: white; }
.month-selected { outline: 2px solid var(--palette-6b94cd,#6b94cd); outline-offset: -2px; }
.month-day-agenda { margin-top: 24px; scroll-margin-top: 85px; }
@media (max-width: 760px) {
  .month-weekdays, .month-grid { gap: 3px; }
  .month-weekdays span { padding: 6px 0; font-size: 10px; }
  .month-cell { padding: 5px 3px; gap: 4px; min-height: 78px; border-radius: 6px; }
  .month-has-bookings { padding-top: 3px; }
  .month-date { width: 23px; height: 23px; font-size: 12px; }
  .month-cell-count { font-size: 8px; }
  .month-session { display: none; }
  .month-more { font-size: 8px; }
}
.calendar-day { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 14px 6px; display: flex; flex-direction: column; gap: 8px; align-items: center; color: var(--ink); cursor: pointer; }
.calendar-day:hover, .calendar-day-today { background: var(--sky-soft); border-color: var(--palette-b4cbea,#b4cbea); }
.calendar-day span, .calendar-day small { font-size: 11px; color: var(--muted); }
.calendar-day strong { font-size: 23px; }
.agenda-day { scroll-margin-top: 85px; margin-bottom: 16px; }
.agenda-day { display:block; }
.agenda-day .agenda-date { white-space:nowrap; overflow-wrap:normal; font-variant-numeric:tabular-nums; }
.agenda-day > .agenda-empty { margin:0; padding:16px 20px; border-top:1px solid var(--line); }
.agenda-empty { color: var(--muted); font-size: 12px; padding: 12px 0; }
.booking-card { display: flex; gap: 18px; padding: 20px 22px; border-top: 1px solid var(--line); }
.booking-time { display: flex; flex-direction: column; gap: 7px; min-width: 75px; }
.booking-time strong { font-size: 20px; color: var(--navy); }
.booking-time span, .booking-time small, .booking-info small { color: var(--muted); font-size: 11px; }
.booking-info { flex: 1; min-width: 0; }
.booking-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.booking-title h3 { font-size: 15px; }
.booking-info p { font-size: 12px; color: var(--muted); margin-top: 7px; line-height: 1.7; overflow-wrap: anywhere; }
.booking-note { white-space: pre-wrap; }
.booking-actions { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.booking-actions .btn { font-size: 11px; padding: 9px 12px; }
.booking-cancelled { opacity: .7; }
.booking-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#booking-form label { display: block; margin-top: 16px; margin-bottom: 8px; }
#booking-form .fine-print { display: block; margin-top: 14px; line-height: 1.7; }
.upcoming-sessions { margin-bottom: 24px; }
.upcoming-session { display: flex; gap: 14px; padding: 13px 22px; border-top: 1px solid var(--line); }
.upcoming-sessions > .agenda-empty { padding: 12px 22px 22px; }
.upcoming-sessions > .btn { margin: 12px 22px 22px; }
.upcoming-session > span { color: var(--navy); padding-top: 3px; }
.upcoming-session strong { font-size: 13px; }
.upcoming-session-person { display: block; font-size: 14px; font-weight: 800; line-height: 1.5; color: var(--navy); overflow-wrap: anywhere; margin-bottom: 3px; }
a.upcoming-session-person { display: flex; align-items: center; width: fit-content; max-width: 100%; min-height: 44px; padding-block: 4px; text-decoration: underline; text-underline-offset: 3px; }
a.upcoming-session-person:focus-visible { outline: 2px solid var(--palette-075cff,#075cff); outline-offset: 3px; }
.upcoming-session-title { display: block; overflow-wrap: anywhere; line-height: 1.5; }
.upcoming-session p { font-size: 11px; color: var(--muted); line-height: 1.7; margin-top: 5px; }
@media (max-width: 760px) {
  .calendar-days { gap: 4px; }
  .calendar-day { padding: 12px 2px; }
  .calendar-day small { font-size: 8px; }
  .calendar-day strong { font-size: 19px; }
  .calendar-day span { font-size: 10px; }
  .calendar-week-controls strong { order: -1; flex-basis: 100%; }
  .booking-card { flex-wrap: wrap; gap: 12px; }
  .booking-time { min-width: 55px; }
  .booking-actions { flex-basis: 100%; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
  .booking-form-grid { gap: 10px; }
}
.form-error { color: #aa5b42; font-size: 11px; line-height: 1.6; min-height: 0; margin-block: 13px; }
.form-error:empty { margin-block: 0 15px; }
dialog { color: var(--ink); width: min(500px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 28px; border: 1px solid #d8dee7; border-radius: 15px; box-shadow: 0 30px 100px var(--palette-141f3330,#141f3330); }
dialog::backdrop { background: var(--palette-121c2c70,#121c2c70); backdrop-filter: blur(3px); }
dialog.modal-wide { width: min(860px, calc(100% - 32px)); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.modal-header h2 { font-size: 25px; font-family: var(--serif); font-weight: 400; letter-spacing: -.5px; }
.modal-header .icon-btn { flex-shrink: 0; }
.modal-description { font-size: 12px; line-height: 1.8; color: #6f7a8d; margin-bottom: 24px; }
.app-invite-preview { border: 1px solid var(--palette-cbd8ec,#cbd8ec); background: var(--palette-f3f7ff,#f3f7ff); border-radius: 8px; margin-bottom: 20px; }
.client-review-panel { border-color: var(--palette-ccd9f0,#ccd9f0); background: var(--palette-f3f7ff,#f3f7ff); margin-bottom: 18px; padding: 20px; }
.client-review-panel h2 { font-size: 18px; margin-bottom: 10px; }
.client-review-panel ul { padding-left: 18px; font-size: 13px; line-height: 1.65; }
.client-review-panel li + li { margin-top: 8px; }
.client-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.client-review-actions .btn { min-height: 44px; white-space: normal; }
.client-review-done { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.6; margin: 0 0 16px; color: #455f86; }
.profile-progress-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.checkin-workflow-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-bottom: 16px; }
.checkin-workflow-tabs .filter-chip { min-width: 0; min-height: 48px; white-space: normal; justify-content: center; font-size: 12px; padding: 8px 6px; }
.checkin-review-card { margin-bottom: 16px; }
.checkin-review-state { color: #526884; font-size: 12px; }
.checkin-list article > .btn { min-height: 44px; margin: 0 10px 8px 0; }
.checkin-list .checkin-edit { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 539px) { .client-review-panel { padding: 16px; } .client-review-actions .btn { flex: 1 1 160px; } }
.app-invite-preview > summary { min-height: 48px; padding: 12px 14px; cursor: pointer; font-size: 13px; font-weight: 700; }
.app-invite-preview > summary:focus-visible { outline: 2px solid var(--palette-075cff,#075cff); outline-offset: 3px; }
.app-invite-badge { margin-left: 8px; padding: 3px 6px; background: var(--palette-e1eaff,#e1eaff); color: var(--palette-164ba3,#164ba3); border-radius: 4px; font-size: 10px; font-weight: 600; }
.app-invite-content { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 0 14px 14px; }
.app-invite-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 136px; background: white; border: 1px dashed var(--palette-a8bddc,#a8bddc); border-radius: 6px; color: var(--palette-164ba3,#164ba3); gap: 4px; }
.app-invite-qr svg { width: 80px; height: 80px; }
.app-invite-qr span { font-size: 11px; }
.app-invite-coach { margin: 0 0 8px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.app-invite-instructions ol { padding-left: 18px; margin: 0; font-size: 12px; line-height: 1.6; }
.app-invite-instructions li + li { margin-top: 6px; }
.app-invite-stores { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.app-invite-stores .btn { min-width: 0; padding: 10px 6px; min-height: 44px; opacity: .65; }
.app-invite-notice { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.6; color: #536581; }
@media (max-width: 380px) {
  .app-invite-content { grid-template-columns: minmax(0, 1fr); }
  .app-invite-qr { width: 120px; justify-self: center; }
}
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 24px; padding-top: 19px; border-top: 1px solid #dfe5ee; }
.modal-actions .fine-print { margin-right: auto; font-size: 10px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-bottom: 22px; }
.optional { font-weight: 400; color: #808ca0; font-size: 10px; margin-left: 5px; }
.credentials-box { white-space: pre-wrap; overflow-wrap: anywhere; background: #e6ecf5; border: 1px solid var(--palette-cbd5e7,#cbd5e7); border-radius: 9px; padding: 18px; font-size: 12px; line-height: 2; }
.assignment-list { max-height: 350px; overflow-y: auto; }
.assignment-item { display: flex; align-items: center; gap: 12px; padding: 13px 6px; border-bottom: 1px solid #e0e5ee; cursor: pointer; }
.assignment-item > input { width: 16px; height: 16px; margin: 0; accent-color: var(--navy); }
.assignment-item strong { font-size: 12px; font-weight: 600; }
.assignment-item small { display: block; margin-top: 4px; font-weight: 400; color: #768399; font-size: 10px; }
.builder-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 24px 0; padding-block: 15px; border-block: 1px solid #dbe2ed; }
.builder-day-heading { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 20px; }
.builder-day-heading > label { max-width: 350px; flex: 1; }
.builder-day-heading .text-link { font-size: 10px; padding-bottom: 12px; margin-left: auto; }
.builder-exercises { display: flex; flex-direction: column; gap: 12px; margin-bottom: 15px; }
.builder-exercise { display: grid; grid-template-columns: 22px minmax(120px, 1fr) 60px 65px 73px 30px; gap: 12px; padding: 16px 12px; align-items: center; background: #f3f6fa; border: 1px solid #d9e0eb; border-radius: 10px; }
.builder-index { font-family: var(--serif); color: #8998b2; font-size: 18px; }
.builder-exercise label { font-size: 9px; color: #677691; }
.builder-exercise input, .builder-exercise select { font-size: 11px; padding: 9px; margin-top: 10px; }
.builder-exercise .icon-btn { margin-top: 18px; width: 25px; }
.danger { color: #a27861; }
.plan-preview-day { padding-bottom: 20px; }
.plan-preview-day h3 { font-size: 15px; margin-bottom: 10px; }
.plan-preview-day > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #dce3ef; }
.plan-preview-day strong { font-size: 11px; font-weight: 500; }
.plan-preview-day span { font-size: 10px; color: #7988a2; }
.session-detail-note { font-size: 12px; color: #687894; margin-top: 20px; line-height: 1.8; }
#toast { position: fixed; bottom: 25px; left: 50%; transform: translate(-50%, 15px); background: var(--navy); color: #fff; padding: 14px 22px; border-radius: 10px; z-index: 100; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; box-shadow: 0 10px 40px var(--palette-173e7530,#173e7530); font-size: 12px; max-width: calc(100% - 32px); width: max-content; text-align: center; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
#toast.toast-error { background: #895844; }
.boot-screen, .startup-error { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.boot-screen p { color: #6c7990; font-size: 13px; margin-top: 20px; }
.startup-error h1 { margin-top: 24px; font-family: var(--serif); font-weight: 400; }
.startup-error p { font-size: 13px; line-height: 1.8; color: #6b7991; max-width: 400px; margin: 15px 0 24px; }
@media (min-width: 1500px) {
  .page-content { padding-top: 42px; }
  .welcome-banner { min-height: 280px; }
  .stat-card { padding: 22px; }
  .client-table td { padding-block: 18px; }
  .client-table th { padding-block: 14px; }
  .week-chart { max-height: 238px; }
}
@media (max-width: 1200px) {
  .sidebar { width: 212px; flex-basis: 212px; padding-inline: 15px; }
  .main-shell { margin-left: 212px; }
  .page-content { padding: 28px 25px 16px; }
  .topbar { padding-inline: 25px; }
  .page-footer { padding-inline: 25px; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .client-table th, .client-table td { padding-inline: 8px; }
  .client-table td:first-child, .client-table th:first-child { padding-left: 16px; }
  .dashboard-grid > .panel:first-child .client-table th:nth-child(3), .dashboard-grid > .panel:first-child .client-table td:nth-child(3) { display: none; }
  .panel-heading { padding-inline: 18px; }
  .stat-card { padding: 15px; }
  .stat-top > span:first-child { font-size: 9px; }
  .stat-detail { font-size: 8px; }
  .workout-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 15px; }
  .workout-exercise { padding: 17px; }
  .session-summary { padding: 20px; }
  .workout-exercise-heading { flex-wrap: wrap; }
  .rest-btn { margin-left: 53px; margin-top: 5px; }
  .exercise-grid { gap: 15px; }
  .login-story { padding-inline: 40px; }
}
@media (max-width: 980px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid > .panel:first-child .client-table th:nth-child(3), .dashboard-grid > .panel:first-child .client-table td:nth-child(3) { display: table-cell; }
  .exercise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-grid { grid-template-columns: 1fr; }
  .banner-art { right: -55px; opacity: .8; }
  .welcome-banner { padding: 27px; }
  .welcome-banner h2 { font-size: 38px; }
  .workout-layout { grid-template-columns: 1fr; }
  .session-summary { position: static; }
  .session-summary h2 { font-size: 30px; }
  .session-summary > label { font-size: 12px; }
  .session-summary input, .session-summary textarea { font-size: 13px; }
  .session-summary .fine-print { font-size: 11px; }
  .next-step-panel { min-height: 310px; }
  .topbar-right { gap: 14px; }
  .profile-heading { flex-wrap: wrap; }
  .profile-heading > .btn { margin-left: 86px; }
  .profile-actions { margin-left: 86px; justify-content: flex-start; }
  .login-story { padding-inline: 30px; }
  .login-form-area { padding: 35px; }
  .login-story h1 { font-size: 50px; }
}
@media (max-width: 760px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; width: 238px; box-shadow: 10px 0 40px var(--palette-173e7520,#173e7520); top: 62px; padding-top: 22px; }
  .sidebar.is-open { transform: translateX(0); }
  .main-shell { margin-left: 0; }
  .topbar { height: 62px; padding: 0 18px; position: sticky; top: 0; z-index: 20; }
  .mobile-menu { display: flex; margin-right: 8px; }
  .breadcrumb { margin-right: auto; font-size: 10px; }
  .breadcrumb > span { margin-inline: 6px; }
  .topbar-date { display: none; }
  .topbar-right { gap: 12px; }
  .demo-indicator { font-size: 9px; }
  .page-content { padding: 27px 18px 10px; }
  .page-heading { gap: 12px; }
  .page-heading h1 { font-size: 25px; }
  .page-heading p { font-size: 11px; max-width: 290px; }
  .page-heading .btn { font-size: 11px; padding: 10px 12px; }
  .welcome-banner { min-height: 252px; }
  .banner-art { right: -10px; }
  .welcome-banner h2 { font-size: 40px; }
  .page-footer { padding-inline: 18px; font-size: 8px; }
  .login-layout { grid-template-columns: 1fr; }
  .login-story { min-height: 350px; padding: 27px; }
  .login-story-content { padding-block: 32px 20px; }
  .login-story h1 { font-size: 46px; margin-block: 15px; }
  .login-story h1 br:nth-of-type(2) { display: none; }
  .login-benefits, .login-footnote { display: none; }
  .login-story-content > p { font-size: 12px; max-width: 400px; }
  .login-form-area { padding: 36px 25px; }
  .login-card { max-width: 420px; }
  .login-card h2 { font-size: 30px; }
  .login-card form { margin-top: 27px; }
}
@media (max-width: 480px) {
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading .btn { min-height: 40px; }
  .eyebrow { font-size: 9px; }
  .welcome-banner { padding: 24px; }
  .banner-art { right: -155px; opacity: .28; }
  .welcome-banner h2 { font-size: 39px; }
  .welcome-banner .text-link { font-size: 11px; }
  .stats-grid { gap: 10px; }
  .stat-card { padding: 13px; }
  .stat-card > strong { font-size: 27px; }
  .goal-stat > strong { font-size: 15px; }
  .stat-icon { height: 24px; width: 24px; }
  .stat-top > span:first-child { font-size: 9px; max-width: 90px; }
  .stat-detail { line-height: 1.7; }
  .dashboard-grid { gap: 16px; }
  .client-table td, .client-table th { padding-inline: 8px; }
  .client-table td:first-child, .client-table th:first-child { padding-left: 14px; }
  .client-table .avatar { width: 30px; height: 30px; font-size: 9px; }
  .client-identity { gap: 7px; }
  .client-identity strong { font-size: 10px; }
  .client-identity span > span { font-size: 8px; max-width: 100px; }
  .dashboard-grid > .panel:first-child .client-table th:nth-child(3), .dashboard-grid > .panel:first-child .client-table td:nth-child(3) { display: none; }
  .plan-label { font-size: 8px; }
  .client-table .icon-btn { width: 25px; }
  .panel-heading { padding: 19px 16px 16px; }
  .panel-heading h2 { font-size: 14px; }
  .panel-heading p { font-size: 9px; }
  .activity-list { padding-inline: 16px; }
  .activity-item strong { font-size: 9px; }
  .activity-item time { font-size: 8px; }
  .activity-item strong > span { display: block; }
  .next-step-panel { padding: 24px; }
  .exercise-grid { grid-template-columns: 1fr; }
  .exercise-card { display: grid; grid-template-columns: 110px 1fr; }
  .exercise-visual { height: 100%; min-height: 175px; }
  .exercise-visual > svg { width: 95px; }
  .exercise-visual > .tag { right: 8px; bottom: 10px; font-size: 8px; }
  .exercise-body { padding: 17px; }
  .exercise-body h2 { font-size: 14px; }
  .exercise-body p { font-size: 10px; line-height: 1.7; }
  .profile-heading > .avatar { height: 50px; width: 50px; font-size: 15px; }
  .profile-heading { gap: 12px; }
  .profile-heading h1 { font-size: 24px; }
  .profile-heading p { font-size: 10px; }
  .profile-heading > .btn { margin-left: 62px; }
  .profile-actions { margin-left: 62px; }
  .plan-card { padding: 22px; }
  .plan-card h2 { font-size: 26px; }
  .progress-selector { align-items: flex-start; flex-direction: column; gap: 8px; }
  .progress-selector select { width: 100%; }
  .workout-exercise { padding: 16px; }
  .workout-exercise-heading h2 { font-size: 15px; }
  .workout-exercise-heading .eyebrow { font-size: 7px; }
  .set-grid { gap: 10px; grid-template-columns: 28px 1fr 1fr 32px; }
  .set-grid-heading { font-size: 7px; }
  .workout-notice { font-size: 10px; line-height: 1.6; }
  .page-footer > span:last-child { display: none; }
  dialog { padding: 21px; max-height: calc(100dvh - 30px); }
  .modal-header h2 { font-size: 23px; }
  .modal-description { font-size: 11px; }
  .form-row { grid-template-columns: 1fr; gap: 16px; }
  .modal-actions { flex-wrap: wrap; gap: 8px; }
  .modal-actions .fine-print { width: 100%; }
  .builder-exercise { grid-template-columns: 1fr 1fr 1fr 26px; gap: 10px; padding: 13px; }
  .builder-index { display: none; }
  .builder-exercise-select { grid-column: 1 / -1; }
  .builder-exercise .icon-btn { grid-column: 4; }
  .builder-day-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .builder-day-heading > label { width: 100%; }
  .builder-day-heading .text-link { padding: 0; margin: 0; }
  .login-story { min-height: 335px; }
  .login-story h1 { font-size: 42px; }
  .login-story .brand { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
.forgot-link { margin-top: 17px; font-size: 11px; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.account-panel > .panel-heading > .icon { color: #7194c6; }
.account-form { padding: 0 24px 24px; }
.account-form > label { margin-bottom: 18px; }
.account-form input, .account-form textarea { font-size: 12px; }
.account-form .fine-print { font-size: 10px; }
.account-description { font-size: 12px; line-height: 1.8; color: #647a99; }
.session-list { padding: 0 24px 14px; }
.session-list > article { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding: 17px 0; }
.session-icon { display: flex; align-items: center; justify-content: center; height: 38px; width: 38px; flex-shrink: 0; background: var(--palette-edf3fc,#edf3fc); color: #7194c6; border-radius: 10px; }
.session-list article > div { min-width: 0; flex: 1; }
.session-list strong { font-size: 12px; }
.session-list p { font-size: 10px; color: #7388a5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 570px; margin-top: 6px; }
.session-list small { display: block; font-size: 10px; color: #8798af; margin-top: 6px; }
.session-list .btn { font-size: 10px; padding: 9px 12px; }
.preference-toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 4px 0 12px; }
.preference-toggle > input { margin: 3px 0 0; height: 17px; width: 17px; accent-color: var(--navy); flex-shrink: 0; }
.preference-toggle strong { font-size: 12px; font-weight: 600; }
.preference-toggle small { display: block; font-weight: 400; color: #7489a5; font-size: 11px; line-height: 1.8; margin-top: 9px; }
dialog label.preference-toggle { display: flex; align-items: flex-start; gap: 12px; }
dialog label.preference-toggle > input { width: 17px; height: 17px; margin: 3px 0 0; padding: 0; }
@media (max-width: 540px) {
  .booking-form-grid { grid-template-columns: minmax(0,1fr); }
}
.data-export { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 21px; }
.data-export h3 { font-size: 14px; }
.data-export p { color: #7388a5; font-size: 11px; line-height: 1.8; margin: 10px 0 16px; }
.account-audit { padding: 0 24px 22px; }
.account-audit > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 12px 0; font-size: 11px; }
.account-audit time { font-size: 10px; color: #8095b1; white-space: nowrap; }
.account-audit > p { font-size: 12px; color: #7388a5; }
.danger-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; background: #fcf8f6; border-color: #eee1dc; }
.danger-panel h2 { font-size: 15px; color: #8d6250; }
.danger-panel p { margin-top: 8px; font-size: 11px; color: #977e72; line-height: 1.8; max-width: 550px; }
.btn-danger { background: #924e38; color: #fff; }
.access-layout { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: radial-gradient(ellipse at top left, var(--palette-dceaff,#dceaff), #f5f7fb 65%); }
.access-card { width: 440px; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 36px; box-shadow: 0 18px 60px var(--palette-173e7510,#173e7510); }
.access-card > .eyebrow { margin-top: 30px; }
.access-card h1 { font-family: var(--serif); font-weight: 400; font-size: 33px; line-height: 1.15; letter-spacing: -.8px; margin-top: 14px; }
.access-card > p { font-size: 12px; color: #7388a5; line-height: 1.8; margin-top: 15px; }
.access-card form { margin-top: 24px; }
.access-card label { font-size: 11px; }
.access-card input { font-size: 12px; }
.access-email { display: block; padding: 11px 14px; margin-top: 19px; border-radius: 7px; background: var(--palette-edf3fc,#edf3fc); color: #5377a8; font-size: 12px; overflow-wrap: anywhere; }
.local-mail-notice { background: var(--palette-edf3fc,#edf3fc); border: 1px solid #dce7f7; border-radius: 9px; padding: 17px; }
.local-mail-notice strong { font-size: 12px; }
.local-mail-notice p { font-size: 11px; color: #7388a5; line-height: 1.8; margin-top: 8px; }
@media (max-height: 950px) and (min-width: 761px) { .sidebar-note { display: none; } .sidebar-bottom { padding-top: 12px; } }
@media (max-width: 980px) { .account-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .sidebar { overflow-y: auto; } .sidebar-note { display: none; } }
@media (max-width: 480px) {
  .account-form, .session-list, .account-audit { padding-inline: 18px; }
  .account-panel .panel-heading:has(.btn) { align-items: flex-start; flex-direction: column; gap: 14px; }
  .session-list > article { gap: 10px; flex-wrap: wrap; }
  .session-list .btn { margin-left: 48px; }
  .session-list small { font-size: 9px; }
  .account-audit > div { font-size: 10px; }
  .account-audit time { font-size: 9px; }
  .danger-panel { flex-direction: column; align-items: flex-start; padding: 20px; }
  .access-card { padding: 26px; }
}

.notification-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; color: var(--navy); text-decoration: none; }
.notification-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; background: var(--navy); color: white; border: 2px solid var(--paper); border-radius: 12px; font-size: 9px; font-weight: 700; }
.notification-badge[hidden] { display: none; }
.notification-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
.notification-controls .calendar-view-toggle { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-right: auto; }
.notification-controls .calendar-view-toggle button { min-width: 0; width: 100%; }
.notification-help { font-size: 12px; color: var(--muted); line-height: 1.8; margin: -8px 0 24px; }
.notification-list { display: grid; gap: 12px; }
.notification-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.notification-card.notification-unread { border-color: var(--palette-b7ceec,#b7ceec); background: #f7faff; }
.notification-symbol { flex-shrink: 0; width: 38px; height: 38px; background: var(--sky-soft); border-radius: 10px; display: grid; place-items: center; color: var(--navy); }
.notification-body { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.notification-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.notification-title h2 { font-size: 14px; font-weight: 600; }
.notification-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--navy); flex-shrink: 0; }
.notification-body p { font-size: 12px; line-height: 1.8; margin: 3px 0; color: var(--muted); }
.notification-body p strong { color: var(--ink); font-weight: 500; }
.notification-body small { display: block; color: var(--muted); font-size: 10px; margin-top: 10px; }
.notification-actions { display: flex; align-items: center; flex-direction: column; gap: 12px; flex-shrink: 0; }
.notification-actions .btn { width: 100%; min-height: 44px; justify-content: center; }
.notification-actions .muted { font-size: 11px; }
.notification-more { margin-top: 22px; }
.notification-error { color: #aa5b42; font-size: 12px; line-height: 1.8; margin-bottom: 16px; }
@media (max-width: 540px) {
  .notification-card { grid-template-columns: 30px minmax(0, 1fr); gap: 14px 12px; padding: 18px; }
  .notification-symbol { width: 30px; height: 30px; }
  .notification-body { flex-basis: calc(100% - 42px); }
  .notification-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: center; }
  .notification-actions .btn { min-width: 0; padding-inline: 10px; }
  .notification-actions .muted { text-align: center; }
  .notification-controls .btn { flex: 1; justify-content: center; }
  .notification-controls .calendar-view-toggle { flex-basis: 100%; }
}

.coach-registration-link { font-size: 12px; line-height: 1.8; margin-top: 22px; color: var(--muted); }
.coach-registration-card { max-width: 620px; }
.coach-registration-card form { margin-top: 24px; }
.workspace-badge > div { min-width: 0; }
.workspace-badge > div > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#practice-form .booking-form-grid { margin-bottom: 18px; }

.training-library-controls { display: grid; grid-template-columns: minmax(0,1fr) 170px 170px; gap: 16px; align-items: end; margin-bottom: 24px; }
.training-library-controls .search-field { min-width: 0; margin: 0; }
.training-library-controls label { font-size: 12px; color: var(--muted); }
.training-library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.movement-card { padding: 22px; min-width: 0; }
.movement-card-heading { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.movement-card h2 { font-size: 20px; line-height: 1.35; overflow-wrap: anywhere; }
.movement-card > p { font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 8px; }
.movement-guidance { margin-top: 15px; border-top: 1px solid var(--line); }
.movement-guidance summary, .last-results summary, .builder-target-details > summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 13px; }
.movement-guidance p { white-space: pre-wrap; font-size: 13px; color: var(--muted); line-height: 1.8; overflow-wrap: anywhere; padding-bottom: 10px; }
.movement-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 15px; }
.movement-actions .text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.private-note-panel { display: flex; align-items: center; gap: 20px; padding: 22px; margin-bottom: 22px; }
.private-note-panel > div { flex: 1; min-width: 0; }
.private-note-panel h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 16px; }
.coach-note-preview { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.private-note-panel > button { flex-shrink: 0; }
.builder-day-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 22px; }
.builder-day-tools .text-link { min-height: 44px; margin-left: auto; font-size: 12px; }
.training-builder-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #f7f9fd; }
.training-builder-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px; }
.training-builder-heading > strong { font-size: 13px; font-weight: 600; }
.training-builder-heading > div { display: flex; gap: 4px; }
.training-builder-heading .icon-btn, .builder-day-tools .icon-btn { min-width: 44px; width: 44px; height: 44px; font-size: 20px; border: 1px solid var(--line); border-radius: 9px; }
.training-builder-card label { font-size: 12px; }
.builder-basic-targets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0 10px; }
.builder-target-details { margin-top: 12px; border-top: 1px solid var(--line); }
.builder-target-details > summary span { display: block; color: var(--muted); font-size: 11px; margin-top: 6px; }
.builder-set-targets { display: grid; gap: 12px; margin-top: 12px; }
.builder-set-targets fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.builder-set-targets legend { padding: 0 6px; font-size: 12px; font-weight: 600; }
.builder-set-targets fieldset > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.training-session-progress { position: sticky; top: 8px; z-index: 4; display: flex; align-items: center; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #f8faff; margin-bottom: 20px; box-shadow: 0 2px 10px var(--palette-173e7508,#173e7508); }
.training-session-progress strong { white-space: nowrap; font-size: 13px; }
.training-session-progress progress { flex: 1; }
#workout-form .session-summary { top: 78px; }
.training-workout-card { padding: 0; overflow: hidden; }
.training-workout-card > summary { padding: 18px; cursor: pointer; min-height: 76px; list-style: none; flex-wrap: nowrap; }
.training-workout-card > summary::-webkit-details-marker { display: none; }
.training-workout-card > summary > div { min-width: 0; flex: 1; }
.training-workout-card > summary h2 { margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.training-workout-card > summary::after { content: '+'; color: var(--navy); font-size: 22px; }
.training-workout-card[open] > summary::after { content: '−'; }
.training-workout-body { padding: 0 18px 18px; }
.exercise-done-count { font-size: 11px; white-space: nowrap; color: var(--muted); }
.training-workout-body .exercise-instructions { font-size: 13px; }
.training-workout-body .exercise-instructions > summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
.last-results { border-block: 1px solid var(--line); margin-bottom: 15px; }
.last-results ul { margin: 0 0 14px; padding-left: 20px; font-size: 13px; line-height: 1.9; }
.last-results > button { margin-bottom: 14px; }
.first-result-hint { color: var(--muted); font-size: 12px; margin: 10px 0 18px; }
.training-workout-body .set-grid { grid-template-columns: 28px minmax(0,1fr) minmax(0,1fr) 44px; gap: 10px; }
.training-workout-body .set-grid input[type="number"] { min-height: 44px; font-size: 16px; padding: 9px 6px; }
.training-workout-body .set-checkbox, .training-workout-body .set-checkbox input { width: 44px; height: 44px; }
.training-workout-body .set-checkbox .icon { left: 12px; top: 12px; }
.set-target-hint { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.set-target-hint > span { overflow-wrap: anywhere; }
.set-target-hint small { display: block; font-size: 11px; margin-top: 4px; }
.set-target-hint > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.set-target-hint .rest-btn, .set-target-hint .text-link { min-height: 44px; margin: 0; font-size: 12px; }
.set-target-hint .rest-btn { padding: 9px 12px; }
.preview-movement { border-bottom: 1px solid var(--line); padding: 8px 0; }
.preview-movement summary { min-height: 44px; cursor: pointer; font-size: 13px; line-height: 1.8; }
.preview-movement summary > span { color: var(--muted); margin-left: 12px; }
.preview-movement p { padding: 4px 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.workout-detail-list { display: grid; gap: 22px; }
.workout-detail-list h3 { font-size: 16px; margin-bottom: 12px; }
.workout-detail-list section > div { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.workout-detail-list small { flex-basis: 100%; font-size: 12px; color: var(--muted); line-height: 1.7; }
.exercise-progress-panel, .training-rhythm { margin-bottom: 22px; }
.exercise-progress-body { padding: 0 24px 24px; }
.exercise-progress-body > label { max-width: 460px; }
.exercise-records { display: flex; flex-wrap: wrap; gap: 30px; margin: 24px 0 15px; }
.exercise-records small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.exercise-records strong { font-size: 23px; font-weight: 600; }
.exercise-progress-chart { display: block; width: 100%; height: auto; margin: 12px 0; overflow: visible; }
.exercise-progress-chart text { font-size: 12px; fill: #718095; }
.training-history { padding: 0 24px 24px; }
.training-history-row { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); text-align: left; }
.training-history-row > span { min-width: 0; overflow-wrap: anywhere; }
.training-history-row > .icon { flex-shrink: 0; }
.training-history-row strong { font-size: 14px; font-weight: 600; }
.training-history-row small { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 5px; }
.training-history > .btn, .exercise-session-history > .btn { margin-top: 18px; }
.rhythm-grid { padding: 0 24px 24px; max-width: 550px; }
.rhythm-labels, .rhythm-week { display: grid; grid-template-columns: 70px repeat(7,minmax(0,1fr)); align-items: center; gap: 8px; margin-bottom: 8px; }
.rhythm-labels span { text-align: center; color: var(--muted); font-size: 12px; }
.rhythm-week small { font-size: 11px; color: var(--muted); }
.rhythm-day { height: 32px; display: flex; justify-content: center; align-items: center; background: #edf2f8; border: 1px solid #dce4f0; border-radius: 6px; }
.rhythm-day.trained { background: var(--navy); border-color: var(--navy); color: white; }
.rhythm-day.future { background: transparent; border-style: dashed; }
.rhythm-day .icon { width: 15px; height: 15px; }
.rhythm-grid > p { margin-top: 18px; }
.progress-extra { grid-column: 1 / -1; }
.progress-extra > summary { padding: 22px 24px; cursor: pointer; min-height: 64px; }
.progress-extra > summary > span { display: block; font-size: 12px; margin: 8px 0 0 17px; color: var(--muted); }
.progress-extra > div { padding-bottom: 20px; }
.progress-extra h3 { font-size: 14px; padding: 0 24px; }
@media (max-width: 1050px) { .training-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .training-library-controls { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .training-library-controls .search-field { grid-column: 1 / -1; }
  .training-library-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .movement-card { padding: 18px; }
  .movement-card h2 { font-size: 19px; }
  .private-note-panel { flex-direction: column; align-items: stretch; gap: 15px; padding: 18px; }
  .private-note-panel h2 { font-size: 15px; }
  .private-note-panel > button { align-self: flex-start; }
  .training-builder-card { padding: 14px; }
  .builder-basic-targets { gap: 8px; }
  .builder-set-targets fieldset > div { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  #plan-form input, #plan-form select, #exercise-form input, #exercise-form select, #exercise-form textarea, #coach-note-form textarea, #workout-form input, #workout-form textarea, .training-library-controls input, .training-library-controls select, #progress-client, #progress-exercise { font-size: 16px; min-height: 44px; }
  #plan-form .btn, #exercise-form .btn, #coach-note-form .btn, #workout-form .btn { min-height: 44px; }
  #plan-form .filter-chip { min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
  .builder-day-tools { gap: 8px; }
  .builder-day-tools .text-link { margin-left: 0; }
  .training-workout-card > summary { padding: 16px; }
  .training-workout-card > summary .workout-number { width: 32px; height: 32px; font-size: 17px; }
  .training-workout-card > summary h2 { font-size: 16px; }
  .training-workout-body { padding: 0 14px 14px; }
  .training-workout-body .set-grid { gap: 8px; padding-inline: 0; }
  .exercise-done-count { font-size: 10px; }
  .training-session-progress { top: 70px; padding: 14px; gap: 12px; }
  .training-session-progress strong { font-size: 12px; }
  .session-summary { position: static; }
  .exercise-progress-body, .training-history, .rhythm-grid { padding: 0 16px 18px; }
  .exercise-records { gap: 24px; }
  .exercise-records strong { font-size: 21px; }
  .rhythm-labels, .rhythm-week { grid-template-columns: 44px repeat(7,minmax(0,1fr)); gap: 4px; }
  .rhythm-week small { font-size: 10px; }
  .rhythm-day { height: 26px; }
  .progress-extra > summary { padding: 18px 16px; }
  .progress-extra h3 { padding-inline: 16px; }
}

/* Fit the complete phone navigation to the current viewport, including landscape. */
@media (max-width: 760px), (max-width: 960px) and (max-height: 500px) {
  .app-shell { min-height: 100dvh; }
  body.navigation-open { overflow: hidden; }
  .main-shell { margin-left: 0; }
  .topbar { height: 62px; position: sticky; top: 0; z-index: 20; padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); }
  .mobile-menu { display: flex; width: 44px; height: 44px; flex-shrink: 0; margin-right: 8px; }
  .topbar-date { display: none; }
  .breadcrumb { min-width: 0; margin-right: auto; font-size: 10px; }
  .breadcrumb > span { margin-inline: 6px; }
  .topbar-right { gap: 12px; }
  .page-content { padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); }
  .sidebar {
    inset: 0; z-index: 40; width: 100%; height: 100dvh; max-height: 100dvh;
    display: grid; grid-template-rows: 44px auto minmax(0, 1fr) auto; gap: 12px;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overflow: hidden; overscroll-behavior: contain;
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar .brand { min-height: 44px; padding: 0; font-size: 23px; }
  .sidebar-close { display: inline-flex; color: white; width: 44px; height: 44px; }
  .sidebar-close:hover { background: #ffffff12; color: white; }
  .sidebar .workspace-badge { margin: 0; padding: 8px 10px; }
  .sidebar .nav-label, .sidebar .sidebar-note { display: none; }
  .sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(44px, 1fr); gap: 8px; height: 100%; max-height: 380px; min-height: 0; }
  .sidebar .nav-link { min-width: 0; min-height: 44px; margin: 0; padding: 8px 10px; gap: 8px; font-size: 13px; line-height: 1.4; border: 1px solid #ffffff12; }
  .sidebar .nav-link > span:first-of-type { min-width: 0; overflow-wrap: anywhere; }
  .sidebar .nav-link .icon { width: 18px; height: 18px; }
  .sidebar .nav-count { padding: 2px 4px; font-size: 9px; flex-shrink: 0; }
  .sidebar-bottom { min-width: 0; margin: 0; padding: 0; }
  .sidebar .demo-switch { min-height: 44px; margin: 0; padding: 6px 0; font-size: 11px; }
  .sidebar .user-card { min-width: 0; min-height: 44px; padding: 4px 0; }
  .sidebar .user-card > div { min-width: 0; }
  .sidebar .user-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar .user-card .icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
}
@media (max-width: 760px) and (max-height: 600px) {
  .sidebar .workspace-badge { display: none; }
  .sidebar { grid-template-rows: 44px minmax(0, 1fr) auto; }
}
@media (max-width: 960px) and (max-height: 500px) {
  .sidebar { grid-template-rows: 44px minmax(0, 1fr) auto; gap: 8px; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .sidebar .workspace-badge { display: none; }
  .sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-height: 252px; align-self: center; }
  .sidebar .nav-link { padding: 4px 6px; gap: 5px; font-size: 12px; }
}
@media (max-width: 539px) and (max-height: 500px) {
  .sidebar .nav-link { flex-direction: column; justify-content: center; gap: 2px; font-size: 11px; line-height: 1.25; text-align: center; position: relative; }
  .sidebar .nav-link .icon { width: 16px; height: 16px; }
  .sidebar .nav-count { position: absolute; top: 3px; right: 3px; }
}
@media (min-width: 540px) and (max-width: 960px) and (max-height: 500px) {
  .sidebar-bottom { display: flex; align-items: center; gap: 16px; }
  .sidebar .demo-switch { width: auto; flex-shrink: 0; }
  .sidebar .user-card { flex: 1; border-top: 0; }
}
@media (min-width: 600px) and (max-width: 960px) and (max-height: 500px) {
  .sidebar nav { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 210px; }
}

/* The whole upcoming session opens its details, including its client. */
button.upcoming-session { width:100%; min-height:80px; border:0; border-top:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; font:inherit; cursor:pointer; align-items:center; }
button.upcoming-session:hover { background:#edf3fb; }
button.upcoming-session:active { background:#e2ecf8; }
button.upcoming-session:focus-visible { outline:2px solid var(--palette-326499,#326499); outline-offset:-4px; border-radius:6px; }
.upcoming-session > .upcoming-session-content { flex:1; min-width:0; padding-top:0; }
.upcoming-session-content small { display:block; font-size:11px; color:var(--muted); line-height:1.7; margin-top:5px; overflow-wrap:anywhere; }
.upcoming-session-arrow { margin-left:auto; }

/* Private notebook: comfortable touch targets and readable observations. */
.notebook-actions,.notebook-heading,.notebook-meta { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.notebook-heading,.notebook-meta { justify-content:space-between; }
.notebook-heading { margin-bottom:20px; }
.notebook-heading p { margin:0; }
.notebook-list { display:grid;gap:14px;margin-bottom:16px; }
.notebook-entry { padding:18px;border:1px solid var(--palette-c7d4e5,#c7d4e5);border-radius:12px;background:#f7f9fd; }
.notebook-meta time { font-size:12px;color:#637792; }
.notebook-meta .btn { min-height:40px; }
.notebook-context { font-size:12px;font-weight:700;color:#496789;margin:12px 0; }
.notebook-content,.notebook-task span { white-space:pre-wrap;overflow-wrap:anywhere; }
.notebook-content { margin:14px 0;line-height:1.65; }
.notebook-task { display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:12px;border:1px solid var(--palette-bdcde0,#bdcde0);border-radius:10px;background:#eaf0f8;color:#193250;min-height:52px; }
.notebook-task small { display:block;margin-bottom:5px;font-weight:700; }
.notebook-task-check { display:grid;place-items:center;flex:0 0 24px;height:24px;border:1px solid #6583a9;border-radius:6px; }
.notebook-task.is-done { opacity:.65; }
.notebook-task.is-done small { text-decoration:none; }
.notebook-workout-button { flex-shrink:0;color:var(--palette-c8dbf2,#c8dbf2); }
.modal-training .notebook-entry { background:var(--palette-172a40,#172a40);border-color:var(--palette-365575,#365575);color:#e2edfb; }
.modal-training .notebook-meta time,.modal-training .notebook-context { color:var(--palette-aac3e1,#aac3e1); }
.modal-training .notebook-task { background:var(--palette-233d59,#233d59);border-color:#486b90;color:#e2edfb; }
#notebook-entry-form label { margin-bottom:18px; }
#notebook-entry-form textarea,#notebook-entry-form input { margin-top:10px; }