:root {
  --ink: #173e31;
  --muted: #718078;
  --line: #dfe7e1;
  --paper: #fff;
  --canvas: #f5f7f2;
  --green: #205844;
  --green-dark: #153e30;
  --lime: #d9f36f;
  --mint: #e7f4ec;
  --coral: #ff8c78;
  --violet: #a99be9;
  --shadow: 0 10px 32px rgba(28, 69, 52, .08);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
* { box-sizing: border-box; }
html { width: 100%; background: var(--canvas); -webkit-text-size-adjust: 100%; }
body { width: 100%; margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--canvas); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, summary, select { cursor: pointer; }
button, .primary, .secondary { min-height: 42px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 7px; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
h2 { margin-bottom: 14px; font-size: 19px; letter-spacing: -.015em; }
.app-shell { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 30px 22px 24px; color: white; background: var(--green-dark); display: flex; flex-direction: column; }
.brand, .login-brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 14px; color: var(--green-dark); background: var(--lime); font-weight: 900; letter-spacing: -.05em; }
.brand strong, .brand small, .login-brand strong, .login-brand small { display: block; }
.brand strong { font-size: 17px; }.brand small { margin-top: 3px; opacity: .63; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.main-nav { display: grid; gap: 6px; margin-top: 45px; }
.main-nav a { padding: 12px 14px; border-radius: 12px; display: flex; align-items: center; gap: 12px; font-weight: 650; color: rgba(255,255,255,.7); }
.main-nav a:hover, .main-nav a.active { color: white; background: rgba(255,255,255,.1); }
.main-nav a.active { box-shadow: inset 3px 0 var(--lime); }
.main-nav a span { width: 20px; color: var(--lime); text-align: center; }
.trainer { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: grid; grid-template-columns: 38px 1fr 32px; align-items: center; gap: 10px; }
.avatar, .mini-avatar { display: grid; place-items: center; border-radius: 50%; font-weight: 800; }
.avatar { width: 38px; height: 38px; color: var(--green-dark); background: var(--lime); }.trainer strong,.trainer small { display:block }.trainer small { color: rgba(255,255,255,.55); font-size: 11px; }
.logout { border: 0; color: white; background: transparent; font-size: 20px; }
.workspace { min-width: 0; padding: 42px clamp(24px, 4vw, 64px) 72px; }
.page-head { min-width: 0; margin-bottom: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-head p { margin: 0; color: var(--muted); }.page-head > div { min-width: 0; }
.primary, .secondary { border: 1px solid transparent; border-radius: 12px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 750; white-space: nowrap; }
.primary { color: white; background: var(--green); border-color: var(--green); box-shadow: 0 6px 16px rgba(32,88,68,.16); }
.primary:hover { background: var(--green-dark); }.secondary { color: var(--ink); background: white; border-color: var(--line); }
.secondary:hover { border-color: #abc1b4; background: #fbfdfa; }.wide { width: 100%; }
.back { display: inline-block; margin-bottom: 12px; color: var(--muted); font-weight: 650; }
.panel { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }.panel-head h2 { margin: 0; }.panel-head > a { color: var(--green); font-weight: 700; font-size: 13px; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.metric span,.metric small { display: block; color: var(--muted); }.metric span { font-size: 13px; font-weight: 700; }.metric strong { display: block; margin: 10px 0 4px; font-size: 28px; line-height: 1; }.metric small { font-size: 12px; }.metric.attention { border-color: #ffd7cd; background: #fff8f5; }.metric.attention strong { color: #b84e3b; }
.dashboard-grid, .detail-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr); gap: 20px; align-items: start; }.dashboard-grid aside, .detail-grid > section, .detail-grid > aside { display: grid; gap: 20px; }
.timeline-row, .week-row { min-width: 0; display: grid; grid-template-columns: 54px 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid #edf1ed; }.timeline-row:last-child,.week-row:last-child { border: 0; }.timeline-row:hover strong,.week-row:hover strong { color: var(--green); }
.timeline-row time { font-weight: 800; }.timeline-rail { width: 8px; height: 38px; border-radius: 8px; background: var(--lime); }.timeline-rail.split { background: var(--violet); }.timeline-person { min-width: 0; }.timeline-person strong,.timeline-person small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.timeline-person small,.week-row small { margin-top: 4px; color: var(--muted); font-size:12px; }
.pill { justify-self: end; padding: 6px 9px; border-radius: 999px; background: var(--mint); color: #25664c; font-size: 11px; font-weight: 750; white-space: nowrap; }.pill.completed { background:#e8f3df }.pill.cancelled { background:#fff0ec;color:#a34d3e }.pill.rescheduled { background:#f0edff;color:#6351a4 }
.empty { padding: 42px 16px; text-align:center; color:var(--muted); }.empty strong { color:var(--ink); font-size:18px }.empty p { margin: 7px 0 18px; }.span-all { grid-column:1/-1; }
.compact-list a { display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #edf1ed }.compact-list a:last-child{border:0}.mini-avatar{width:38px;height:38px;background:var(--mint);font-size:12px}.compact-list strong,.compact-list small{display:block}.compact-list small{color:var(--muted);font-size:11px}.compact-list b{font-size:12px;color:#b4503e}
.reminder { display:flex;gap:14px;background:#f0edff;border-color:#ded7ff }.reminder-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:var(--violet);color:white;font-size:20px}.reminder h2{margin-bottom:7px}.reminder p{color:#686079;font-size:13px}.reminder a{font-weight:750;color:#5f4fab;font-size:13px}
.quick-actions { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px }.quick-actions a{padding:15px;border:1px solid var(--line);border-radius:14px;background:white;text-align:center;font-weight:700;font-size:13px}.quick-actions a:hover{border-color:#abc1b4}
.filter-bar,.date-bar { display:flex;gap:10px;margin-bottom:20px }.filter-bar input{flex:1;min-width:0}.filter-bar select{min-width:150px}
input,select,textarea { width:100%;min-width:0;border:1px solid #ccd8d0;border-radius:11px;padding:10px 12px;color:var(--ink);background:white;outline:none; }.filter-bar input,.filter-bar select{width:auto}.filter-bar input{width:100%} textarea{resize:vertical;line-height:1.45} input:focus,select:focus,textarea:focus{border-color:#4d8a70;box-shadow:0 0 0 3px rgba(77,138,112,.12)}
label { display:grid;gap:7px;color:#42554c;font-size:13px;font-weight:700 }.form-card{max-width:900px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.span-2{grid-column:span 2}.sensitive{padding:14px;border-radius:13px;background:#fff8f5}.sensitive small{color:#9b6155;font-weight:500}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.form-section{padding:8px 0 24px;margin-bottom:20px;border-bottom:1px solid var(--line)}.form-section:last-of-type{margin-bottom:0}.form-section h2 small{margin-left:8px;color:var(--muted);font-size:12px;font-weight:500}.form-row,.measure-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.client-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.client-card{min-width:0;padding:17px;border:1px solid var(--line);border-radius:16px;background:white;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px}.client-card:hover{border-color:#9bb9aa;box-shadow:var(--shadow)}.client-avatar,.large-avatar{display:grid;place-items:center;border-radius:16px;background:var(--mint);font-weight:850}.client-avatar{width:48px;height:48px}.client-main{min-width:0}.client-main strong,.client-main small,.client-balance b,.client-balance small{display:block}.client-main strong,.client-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.client-main small,.client-balance small{margin-top:3px;color:var(--muted);font-size:11px}.client-balance{text-align:right}.client-balance b{font-size:19px}
.title-with-avatar{display:flex;align-items:center;gap:14px}.title-with-avatar h1{margin:0}.large-avatar{width:62px;height:62px;flex:0 0 62px;font-size:18px}.head-actions{display:flex;gap:10px}.client-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}.client-summary article{padding:17px;border:1px solid var(--line);border-radius:15px;background:white}.client-summary span{color:var(--muted);font-size:12px;font-weight:700}.client-summary p{margin:8px 0 0;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.client-summary .sensitive{background:#fff8f5}
.inline-dialog{position:relative}.inline-dialog summary{list-style:none}.inline-dialog summary::-webkit-details-marker{display:none}.popover-form{position:absolute;z-index:10;right:0;top:48px;width:min(350px,calc(100vw - 48px));padding:18px;border:1px solid var(--line);border-radius:16px;background:white;box-shadow:0 18px 50px rgba(20,55,42,.2);display:grid;gap:12px}.membership-list,.payment-list,.measurement-list,.history-list{display:grid}.membership,.payment-list>div,.measurement-list>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.6fr) auto;gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid #edf1ed}.membership:last-child,.payment-list>div:last-child,.measurement-list>div:last-child{border:0}.membership strong,.membership small,.payment-list strong,.payment-list small{display:block}.membership small,.payment-list small{margin-top:4px;color:var(--muted);font-size:11px}.membership-progress b{font-size:13px}.membership-progress span{display:block;height:5px;margin:5px 0;border-radius:9px;background:#edf1ed;overflow:hidden}.membership-progress i{display:block;height:100%;background:var(--lime)}.membership em,.payment-list em,.measurement-list em{color:var(--muted);font-size:12px;font-style:normal;text-align:right;overflow-wrap:anywhere}.history-list a{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #edf1ed}.history-list a:last-child{border:0}.history-list time{color:var(--muted);font-size:12px}.history-list small{color:var(--muted)}
.photo-upload{margin-top:12px;padding-top:14px;border-top:1px solid var(--line)}.photo-upload summary{font-weight:750;color:var(--green)}.photo-upload form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.photo-upload .primary{grid-column:1/-1}.file-button{position:relative;display:flex;align-items:center;justify-content:center;border:1px dashed #9bb9aa;border-radius:11px;background:#f8fbf7}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer}.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.photo-grid figure{margin:0;min-width:0}.photo-grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:13px}.photo-grid figcaption{padding-top:5px;color:var(--muted);font-size:10px;overflow-wrap:anywhere}
.week-row time{display:grid;gap:3px}.week-row time span{color:var(--muted);font-size:12px}.week-row>span:nth-child(3){min-width:0}.week-row strong,.week-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.participant-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.participant-title{display:flex;align-items:center;gap:13px}.participant-title h2{margin:0}.participant-title p{margin:4px 0 0;color:var(--muted);font-size:12px}.current-outcome{margin:20px 0;padding:14px;border-radius:13px;background:var(--canvas)}.current-outcome span,.current-outcome small{display:block;color:var(--muted);font-size:11px}.current-outcome strong{display:block;margin:4px 0}.current-outcome p{margin:8px 0 0;font-size:12px}.outcome-form{display:grid;gap:12px}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.plan-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:white}.plan-card span,.plan-card strong,.plan-card b,.plan-card small{display:block}.plan-card span{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.plan-card strong{margin-top:13px}.plan-card b{margin-top:8px;font-size:25px}.plan-card small{margin-top:5px;color:var(--muted)}.plan-card.accent{background:var(--mint);border-color:#cde4d5}
.flash{margin-bottom:16px;padding:12px 15px;border-radius:12px;background:#e9f6ed;color:#1c6848;font-weight:650}.flash.error{background:#fff0ec;color:#a04635}.muted{color:var(--muted)}
.login-page{min-height:100vh;min-height:100svh;padding:24px;display:flex;align-items:center;justify-content:center;background:var(--green-dark)}.login-card{width:100%;max-width:430px;padding:34px;border-radius:24px;background:white;box-shadow:0 24px 80px rgba(0,0,0,.22)}.login-brand{margin-bottom:35px}.login-brand strong,.login-brand small{display:block}.login-brand small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.login-card>p{color:var(--muted)}.form-stack{display:grid;gap:15px;margin-top:24px}.privacy-note{display:block;margin-top:20px;color:var(--muted);text-align:center}
.bottom-nav{display:none}
@media (max-width: 1050px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid,.detail-grid{grid-template-columns:1fr}.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 760px){
  body{padding-bottom:72px}.app-shell{display:block}.sidebar{display:none}.workspace{padding:24px 16px 36px}.bottom-nav{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);padding:7px max(6px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));border-top:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}.bottom-nav a{min-width:0;display:grid;place-items:center;gap:2px;color:var(--muted);font-size:9px;font-weight:650}.bottom-nav a span{font-size:20px;line-height:1}.bottom-nav a.active{color:var(--green)}
  .page-head{align-items:flex-start}.page-head>.primary{padding:10px 12px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.metric{padding:15px}.metric strong{font-size:23px}.quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.client-grid,.participant-cards,.client-summary,.plan-grid{grid-template-columns:1fr}.form-grid.three{grid-template-columns:1fr 1fr}.form-grid.three label:last-child{grid-column:1/-1}.popover-form{position:fixed;left:12px;right:12px;top:auto;bottom:78px;width:auto;max-height:calc(100vh - 105px);overflow:auto}.head-actions{flex-direction:column}.client-heading{align-items:flex-start}.filter-bar{display:grid;grid-template-columns:minmax(0,1fr) auto}.filter-bar select{min-width:0}.filter-bar .secondary{grid-column:1/-1}.date-bar{align-items:end}.photo-upload form{grid-template-columns:1fr}.photo-upload .primary{grid-column:auto}
}
@media (max-width: 420px){
  .workspace{padding-left:12px;padding-right:12px}.page-head{display:grid}.page-head>.primary{width:100%}.page-head h1{font-size:30px}.metrics{grid-template-columns:1fr 1fr}.metric small{font-size:10px}.panel{padding:17px;border-radius:16px}.form-grid,.form-grid.three,.measure-grid{grid-template-columns:1fr}.span-2,.form-grid.three label:last-child{grid-column:auto}.timeline-row,.week-row{grid-template-columns:42px 8px minmax(0,1fr);gap:9px}.timeline-row>.pill,.week-row>.pill{grid-column:3;justify-self:start}.timeline-row time{font-size:13px}.quick-actions{grid-template-columns:1fr 1fr}.client-card{grid-template-columns:42px minmax(0,1fr) auto;padding:13px;gap:9px}.client-avatar{width:42px;height:42px}.title-with-avatar{align-items:flex-start}.large-avatar{width:50px;height:50px;flex-basis:50px}.head-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.client-summary{gap:8px}.membership,.payment-list>div,.measurement-list>div{grid-template-columns:minmax(0,1fr) auto}.membership-progress{grid-column:1/-1;grid-row:2}.history-list a{display:grid;gap:4px}.photo-grid{grid-template-columns:1fr 1fr}.participant-title{align-items:flex-start}.plan-card{padding:18px}.login-page{padding:12px}.login-card{padding:25px 20px}.form-actions{display:grid;grid-template-columns:1fr 1fr}.date-bar{display:grid;grid-template-columns:minmax(0,1fr) auto}
}
@media (max-width: 340px){.workspace{padding-left:9px;padding-right:9px}.metrics{gap:6px}.metric{padding:12px}.metric strong{font-size:20px}.bottom-nav a{font-size:8px}.bottom-nav a span{font-size:18px}.quick-actions{gap:7px}.quick-actions a{padding:12px 6px;font-size:11px}.head-actions{grid-template-columns:1fr}.client-card{grid-template-columns:38px minmax(0,1fr)}.client-avatar{width:38px;height:38px}.client-balance{grid-column:2;text-align:left;display:flex;gap:5px;align-items:baseline}.client-balance b,.client-balance small{display:inline}.form-actions{grid-template-columns:1fr}}