:root {
  --ink: #10182b;
  --muted: #778197;
  --line: #e5e9f1;
  --canvas: #eef3f9;
  --card: #fff;
  --purple: #6846ee;
  --purple-dark: #5131cf;
  --purple-soft: #efeaff;
  --cyan: #0aa8e6;
  --orange: #ff6b12;
  --green: #0e9958;
  --shadow: 0 10px 28px rgba(30, 42, 70, .07);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: #e8eef6; }
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 5%, rgba(119, 91, 246, .10), transparent 31rem),
    #e8eef6;
  font-family: "Noto Sans KR", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.025em;
}

button, input, textarea { font: inherit; }
button { color: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }

.app {
  position: relative;
  display: flex;
  width: min(100%, 480px);
  min-height: 100dvh;
  margin: 0 auto;
  flex-direction: column;
  overflow: hidden;
  background: var(--canvas);
}

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  min-height: 68px;
  padding: 15px 18px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
}

.brand {
  color: var(--cyan);
  font-size: 19px;
  font-weight: 950;
  letter-spacing: -.07em;
  text-decoration: none;
}
.member-meta { display: flex; align-items: center; gap: 8px; color: #58647a; font-size: 11px; white-space: nowrap; }
.member-meta strong { color: var(--ink); font-size: 12px; }
.role { padding: 4px 8px; border-radius: 999px; color: #3f2ab0; background: var(--purple-soft); font-weight: 800; }

.viewport {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #cbd3df transparent;
}

.screen { display: none; padding: 20px 18px calc(105px + env(safe-area-inset-bottom)); }
.screen.is-active { display: block; animation: enter .24s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } }

.alert-card {
  display: flex;
  margin-bottom: 13px;
  padding: 11px 12px;
  align-items: center;
  gap: 9px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(120deg, #6545e9, #8a6af2);
  box-shadow: 0 13px 26px -18px #4d2dc8;
}
.alert-icon { font-size: 16px; }
.alert-card > div { min-width: 0; flex: 1; }
.alert-card strong, .alert-card small { display: block; }
.alert-card strong { margin-bottom: 2px; font-size: 12px; }
.alert-card small { overflow: hidden; color: rgba(255,255,255,.82); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.alert-card.diet-alert { color: #70470a; border: 1px solid #f2d18e; background: #fff8e8; box-shadow: none; }
.alert-card.diet-alert small { color: #927044; }
.alert-card.diet-alert .button-white { color: #86540e; border: 1px solid #edd09a; }

.hero {
  position: relative;
  min-height: 162px;
  margin-bottom: 15px;
  padding: 28px 23px;
  overflow: hidden;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 13%, rgba(255,255,255,.25), transparent 6.6rem),
    linear-gradient(135deg, #5934d6 0%, #7858ec 62%, #a276f1 100%);
  box-shadow: 0 18px 36px -24px #4326ac;
}
.hero::after { position: absolute; right: -55px; bottom: -100px; width: 210px; height: 210px; border: 28px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; }
.hero h1, .page-title h1 { margin: 0; font-size: 26px; line-height: 1.25; letter-spacing: -.06em; }
.hero > p:last-child { position: relative; z-index: 1; margin: 9px 0 0; color: rgba(255,255,255,.86); font-size: 13px; }
.eyebrow { position: relative; z-index: 1; margin: 0 0 10px; color: rgba(255,255,255,.66); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.eyebrow.dark { color: #8676d6; }
.refresh { position: absolute; z-index: 2; top: 18px; right: 18px; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 11px; color: #fff; background: rgba(255,255,255,.12); font-size: 19px; cursor: pointer; }
.refresh.is-spinning { animation: spin .55s ease; }
@keyframes spin { to { transform: rotate(360deg); } }

.card {
  margin-bottom: 15px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.card h2, .outside-title { margin: 0; font-size: 15px; font-weight: 900; letter-spacing: -.045em; }
.section-head { display: flex; margin-bottom: 15px; align-items: center; justify-content: space-between; gap: 12px; }
.section-head > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.muted, .helper { color: var(--muted); }
.month-card > .muted { margin: 12px 0 0; font-size: 11px; }
.helper { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid #eef0f5; font-size: 11px; line-height: 1.6; }
.helper b { color: var(--purple); }
.card-copy { margin: 0 0 13px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.provider-grid .button { padding-right: 5px; padding-left: 5px; font-size: 9px; }
.wearable-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.wearable-metrics > div { min-width: 0; padding: 11px 8px; border-radius: 12px; background: #f7f8fb; }
.wearable-metrics small, .wearable-metrics strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wearable-metrics small { margin-bottom: 5px; color: var(--muted); font-size: 8px; }
.wearable-metrics strong { font-size: 12px; }
.wearable-progress { height: 7px; margin-top: 11px; overflow: hidden; border-radius: 99px; background: #e7eaf0; }
.wearable-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b6cf3, var(--purple)); transition: width .3s ease; }
.sync-copy { margin: 7px 0 10px; color: var(--muted); font-size: 9px; }
.inline-actions { display: flex; gap: 7px; }

.navigator-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.navigator-grid > div, .metric-pair > div { min-width: 0; padding: 12px 10px; border: 1px solid #e8eaf1; border-radius: 13px; background: #fafbfe; }
.navigator-grid small, .metric-pair small { display: block; margin-bottom: 7px; color: #8b94a5; font-size: 9px; white-space: nowrap; }
.navigator-grid strong, .metric-pair strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.navigator-grid em, .metric-pair em, .calorie-card em, .metric-card em, .score-card em { font-size: .68em; font-style: normal; }
.navigator-grid .accent { border-color: #ded5ff; background: #f5f2ff; }
.navigator-grid .accent strong { color: var(--purple); }
.metric-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.metric-pair > div { padding: 13px; }
.metric-pair strong { font-size: 18px; }

.section-block { margin: 22px 0 19px; }
.outside-title { margin-bottom: 13px; }
.session-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.session { padding: 16px 8px; border-radius: 15px; text-align: center; }
.session small { display: block; margin-bottom: 8px; color: #6f7788; font-size: 10px; }
.session strong { font-size: 22px; }
.session-blue { color: #244bbe; background: #dceaff; }
.session-green { color: #087541; background: #dcf9e9; }
.session-orange { color: #d2490a; background: #fff0d9; }
.progress-row, .stage-row { display: flex; margin-top: 18px; align-items: center; gap: 12px; font-size: 12px; }
.progress-row > b, .stage-row > b { width: 61px; flex: 0 0 auto; }
.progress-row > strong { font-size: 14px; }
.progress { height: 9px; flex: 1; overflow: hidden; border-radius: 999px; background: #dfe3ea; }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8c24, var(--orange)); }
.stage-row span { padding: 9px 13px; border-radius: 11px; color: #c75017; background: #ffecd1; font-weight: 800; }

.action-card { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.action-card > div { min-width: 0; }
.action-card h2 { display: inline; margin-left: 6px; }
.action-card p { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.round-icon { font-size: 9px; vertical-align: 2px; }
.icon-orange { color: var(--orange); }
.icon-purple { color: var(--purple); font-size: 13px; }

.button { min-height: 38px; padding: 9px 14px; border: 0; border-radius: 11px; font-size: 11px; font-weight: 850; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.button:active { transform: scale(.97); }
.button-small { min-height: 30px; padding: 6px 9px; font-size: 10px; }
.button-white { color: #4d35bd; background: #fff; }
.button-outline { border: 1px solid #dce1e9; color: #526077; background: #fff; }
.button-primary { color: #fff; background: linear-gradient(135deg, #8061f3, var(--purple)); box-shadow: 0 9px 18px -12px var(--purple-dark); }
.wide { width: 100%; }
.text-button { padding: 3px; border: 0; color: var(--purple); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }

.page-title { display: flex; margin: 3px 0 21px; align-items: end; justify-content: space-between; gap: 14px; }
.page-title .eyebrow { margin-bottom: 7px; }
.page-title h1 { font-size: 27px; }
.page-title p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.week-days button { display: grid; min-width: 0; min-height: 49px; padding: 6px 2px; place-items: center; border: 0; border-radius: 11px; color: #9aa3b2; background: #f5f6f9; cursor: pointer; }
.week-days small { font-size: 9px; }
.week-days b { font-size: 11px; }
.week-days .done { color: #087541; background: #e4f8ed; }
.week-days .today { color: #fff; background: var(--purple); box-shadow: 0 8px 14px -10px var(--purple); }

.status { padding: 4px 8px; border-radius: 999px; color: #b34b0f !important; background: #ffecd9; }
.schedule-time { display: flex; margin-bottom: 16px; align-items: center; gap: 15px; }
.schedule-time > strong { color: var(--purple); font-size: 25px; }
.schedule-time div b, .schedule-time div small { display: block; }
.schedule-time div b { margin-bottom: 5px; font-size: 13px; }
.schedule-time div small { color: var(--muted); font-size: 10px; }

.check-list { display: grid; gap: 8px; }
.check-list label { display: flex; padding: 12px; align-items: center; gap: 10px; border: 1px solid #ebedf2; border-radius: 13px; cursor: pointer; }
.check-list input, .share-check input { width: 18px; height: 18px; accent-color: var(--purple); }
.check-list span { min-width: 0; flex: 1; }
.check-list b, .check-list small { display: block; }
.check-list b { font-size: 11px; }
.check-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.check-list label:has(input:checked) { border-color: #d9d0ff; background: #f6f3ff; }
.check-list input:checked + span b { color: var(--purple); text-decoration: line-through; opacity: .68; }

.log-list { display: grid; }
.log-row { display: grid; width: 100%; padding: 12px 0; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid #edf0f4; background: transparent; text-align: left; cursor: pointer; }
.log-row:last-child { border-bottom: 0; }
.log-date { display: grid; width: 36px; height: 42px; place-items: center; border-radius: 10px; color: #5035c6; background: var(--purple-soft); font-size: 15px; font-weight: 900; line-height: 1; }
.log-date small { font-size: 8px; }
.log-row > span:nth-child(2) { min-width: 0; }
.log-row b, .log-row small { display: block; }
.log-row b { margin-bottom: 4px; font-size: 11px; }
.log-row small { color: var(--muted); font-size: 9px; }
.log-row em { color: #667085; font-size: 9px; font-style: normal; font-weight: 800; }
.extra-log { display: none; }
.log-list.is-expanded .extra-log { display: grid; }
.log-detail { display: grid; margin: 0 0 9px 49px; padding: 12px; gap: 9px; border-radius: 12px; color: #596579; background: #f7f8fb; font-size: 9px; line-height: 1.5; }
.log-detail[hidden] { display: none !important; }
.log-detail b { color: var(--ink); font-size: 9px; }
.log-detail p { margin: 3px 0 0; }
.log-detail .detail-goal { padding: 9px; border-radius: 9px; color: #5138bc; background: #eee9ff; }
.log-row[aria-expanded="true"] { color: var(--purple); }

.calorie-card { position: relative; overflow: hidden; color: #fff; background: linear-gradient(140deg, #502ec9, #7958eb); border: 0; }
.calorie-card::after { position: absolute; top: -60px; right: -45px; width: 160px; height: 160px; border: 22px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; }
.calorie-card > small { color: rgba(255,255,255,.7); font-size: 10px; }
.calorie-card > strong { display: block; margin: 8px 0 14px; font-size: 30px; }
.macro-grid { position: relative; z-index: 1; display: flex; gap: 14px; font-size: 10px; }
.macro-grid b { margin-left: 3px; }
.goal-line { height: 6px; margin-top: 17px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.2); }
.goal-line i { display: block; height: 100%; border-radius: inherit; background: #fff; }
.calorie-card > p { margin: 6px 0 0; color: rgba(255,255,255,.7); font-size: 9px; text-align: right; }

.diet-form-card form, .modal form { display: grid; gap: 13px; }
.segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 4px; border-radius: 12px; background: #f0f2f6; }
.segmented.three { grid-template-columns: repeat(3, 1fr); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label { padding: 8px 2px; border-radius: 9px; color: #7f899c; font-size: 10px; font-weight: 800; text-align: center; cursor: pointer; }
.segmented input:checked + label { color: #4f33c5; background: #fff; box-shadow: 0 3px 9px rgba(39,50,75,.08); }
.field { display: grid; min-width: 0; gap: 6px; }
.field > span { color: #58647a; font-size: 10px; font-weight: 800; }
.field input, .field textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #dfe3ea; border-radius: 11px; outline: 0; color: var(--ink); background: #fff; font-size: 11px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: #9c86f5; box-shadow: 0 0 0 3px rgba(104,70,238,.11); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 9px; }
.photo-button { display: grid; min-height: 58px; padding: 7px; place-items: center; border: 1px dashed #cfd4de; border-radius: 11px; color: #7d8798; background: #fafbfc; font-size: 9px; cursor: pointer; }
.photo-button span { display: block; font-size: 17px; line-height: 1; }
.photo-button.has-photo { border-color: #a99af2; color: var(--purple); background: var(--purple-soft); }
.share-check { display: flex; align-items: center; gap: 8px; color: #4f5b70; font-size: 10px; font-weight: 700; }

.meal-head { display: flex; align-items: center; gap: 8px; }
.meal-kind { padding: 5px 8px; border-radius: 8px; color: #4d32c0; background: var(--purple-soft); font-size: 10px; font-weight: 850; }
.meal-head time { color: var(--muted); font-size: 9px; }
.delete-meal { margin-left: auto; border: 0; color: #a0a7b4; background: transparent; font-size: 18px; cursor: pointer; }
.meal-card > h2 { margin: 14px 0 6px; font-size: 13px; }
.meal-card > strong { color: var(--purple); font-size: 21px; }
.trainer-feedback { margin-top: 14px; padding: 12px; border-radius: 13px; background: #f6f3ff; }
.trainer-feedback span { color: #6b4de0; font-size: 9px; font-weight: 850; }
.trainer-feedback p { margin: 6px 0 0; color: #535e73; font-size: 10px; line-height: 1.55; }
.feedback-form { display: flex; margin-top: 9px; gap: 6px; }
.feedback-form input { min-width: 0; padding: 8px 9px; flex: 1; border: 1px solid #ded8f5; border-radius: 9px; outline: 0; color: var(--ink); background: #fff; font-size: 9px; }
.feedback-form button { padding: 7px 10px; border: 0; border-radius: 9px; color: #fff; background: var(--purple); font-size: 9px; font-weight: 800; cursor: pointer; }
.feedback-reply { margin-top: 8px !important; padding-left: 8px; border-left: 2px solid #a892f6; }

.score-card { display: flex; margin-bottom: 15px; padding: 22px; align-items: center; justify-content: space-between; overflow: hidden; border-radius: 20px; color: #fff; background: linear-gradient(140deg, #4d2bc8, #7c5bea); box-shadow: 0 18px 34px -25px #4324ac; }
.score-card small { color: rgba(255,255,255,.7); font-size: 10px; }
.score-card strong { display: block; margin: 4px 0; font-size: 38px; }
.score-card p { margin: 0; color: rgba(255,255,255,.76); font-size: 10px; }
.score-card p b { color: #b9ffd9; }
.score-ring { display: grid; width: 86px; height: 86px; place-items: center; border-radius: 50%; background: conic-gradient(#fff calc(var(--score) * 1%), rgba(255,255,255,.18) 0); }
.score-ring::before { position: absolute; width: 69px; height: 69px; border-radius: 50%; background: #7252e2; content: ""; }
.score-ring span { position: relative; z-index: 1; font-size: 9px; font-weight: 900; letter-spacing: .08em; }

.body-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 15px; }
.metric-card { position: relative; margin: 0; padding: 15px; }
.metric-card small, .metric-card strong { display: block; }
.metric-card small { margin-bottom: 6px; color: var(--muted); font-size: 9px; }
.metric-card strong { font-size: 19px; }
.metric-card > span { position: absolute; right: 13px; bottom: 16px; font-size: 8px; font-weight: 850; }
.up { color: #0a9053; }.down { color: #2976ca; }.neutral { color: #8b94a5; }
.chart { position: relative; height: 145px; }
.chart-grid { position: absolute; inset: 3px 0 21px; background: repeating-linear-gradient(to bottom, #edf0f4 0 1px, transparent 1px 30px); }
.chart svg { position: absolute; inset: 0 0 20px; width: 100%; height: 120px; overflow: visible; }
.chart .line { fill: none; stroke: var(--purple); stroke-width: 3; stroke-linecap: round; }
.chart .area { fill: url(#area); }
.chart-labels { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: #9aa2b2; font-size: 8px; }
.body-advice { display: flex; align-items: start; gap: 12px; border-color: #dcd3ff; background: #f7f5ff; }
.body-advice > span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #fff; background: var(--purple); }
.body-advice p { margin: 7px 0 0; color: #596579; font-size: 10px; line-height: 1.65; }
.measurement-list { display: grid; }
.measurement-list button { display: grid; padding: 12px 2px; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 7px; border: 0; border-bottom: 1px solid #edf0f4; color: #526078; background: transparent; font-size: 9px; text-align: right; cursor: pointer; }
.measurement-list button:last-child { border-bottom: 0; }
.measurement-list time { color: var(--ink); font-weight: 750; text-align: left; }

.bottom-nav {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  min-height: calc(76px + env(safe-area-inset-bottom));
  padding: 9px 7px calc(7px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  border-top: 1px solid rgba(225,229,237,.9);
  background: rgba(255,255,255,.96);
  box-shadow: 0 -10px 28px rgba(29,39,64,.07);
  backdrop-filter: blur(18px);
}
.bottom-nav > button { display: flex; min-height: 53px; padding: 4px 2px; align-items: center; justify-content: center; flex-direction: column; gap: 3px; border: 0; border-radius: 12px; color: #8a94a5; background: transparent; cursor: pointer; }
.bottom-nav > button { position: relative; }
.bottom-nav b { font-size: 9px; }
.nav-icon { font-size: 20px; line-height: 1; }
.bottom-nav > button.is-active { color: var(--purple); }
.bottom-nav > button.is-active:not(.main-action) { background: #f5f2ff; }
.bottom-nav .main-action span { display: grid; width: 47px; height: 47px; margin-top: -27px; place-items: center; border: 5px solid #fff; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #8668f3, var(--purple)); box-shadow: 0 10px 19px -10px var(--purple-dark); font-size: 25px; }
.nav-badge { position: absolute; top: 4px; right: 15px; display: grid; width: 15px; height: 15px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #ef4444; font-size: 7px; font-style: normal; font-weight: 900; }
.nav-badge[hidden] { display: none; }

.modal[hidden] { display: none; }
.modal { position: fixed; z-index: 100; inset: 0; display: flex; padding: 20px; align-items: end; justify-content: center; background: rgba(15, 24, 43, .5); backdrop-filter: blur(5px); }
.modal-sheet { width: min(100%, 440px); max-height: 88dvh; padding: 21px; overflow-y: auto; border: 1px solid var(--line); border-radius: 23px 23px 18px 18px; background: #fff; box-shadow: 0 25px 65px rgba(18,27,48,.25); animation: sheet .22s ease both; }
@keyframes sheet { from { opacity: 0; transform: translateY(24px); } }
.modal-head { display: flex; margin-bottom: 18px; align-items: start; justify-content: space-between; }
.modal-head small { color: #8876dc; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.modal-head h2 { margin: 4px 0 0; font-size: 20px; }
.modal-head > button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 10px; color: #778197; background: #f1f3f6; font-size: 19px; cursor: pointer; }
.modal form > p { margin: 0; color: var(--muted); font-size: 10px; }
.choice-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-field legend { margin-bottom: 7px; color: #58647a; font-size: 10px; font-weight: 800; }
.pain-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pain-options label { display: flex; padding: 9px 2px; align-items: center; justify-content: center; gap: 4px; border: 1px solid #e0e4eb; border-radius: 10px; color: #667085; font-size: 9px; font-weight: 750; cursor: pointer; }
.pain-options input { width: 13px; height: 13px; accent-color: var(--purple); }
.pain-options label:has(input:checked) { border-color: #a994f3; color: var(--purple); background: #f4f1ff; }
.survey-session { display: flex; padding: 13px; align-items: center; gap: 10px; border: 1px solid #e5e1f8; border-radius: 14px; background: #f8f6ff; }
.survey-trainer-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #8468ef, var(--purple)); font-size: 13px; font-weight: 900; }
.survey-session > div:nth-child(2) { min-width: 0; flex: 1; }
.survey-session b, .survey-session span { display: block; }
.survey-session b { margin-bottom: 4px; font-size: 11px; }
.survey-session span { color: var(--muted); font-size: 8px; }
.survey-session em { padding: 5px 7px; border-radius: 7px; color: #087541; background: #dcf8e8; font-size: 7px; font-style: normal; font-weight: 850; }
.survey-guide { padding: 13px; border-radius: 14px; background: #f7f8fa; }
.survey-guide > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.survey-guide b { font-size: 10px; }
.survey-guide span { color: var(--purple); font-size: 8px; font-weight: 850; }
.survey-guide p { margin: 7px 0 0; color: #9199a7; font-size: 7px; }
.survey-progress-bar { height: 6px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: #e3e6ec; }
.survey-progress-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #967cf4, var(--purple)); transition: width .2s ease; }
.survey-items { display: grid; gap: 8px; }
.survey-item { display: grid; margin: 0; padding: 10px 11px; grid-template-columns: 80px 1fr; align-items: center; gap: 9px; border: 1px solid #e8eaf0; border-radius: 12px; }
.survey-item legend { display: contents; color: #455167; font-size: 9px; font-weight: 850; }
.survey-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.survey-scale label { cursor: pointer; }
.survey-scale input { position: absolute; opacity: 0; pointer-events: none; }
.survey-scale span { display: grid; height: 29px; place-items: center; border: 1px solid #dfe3ea; border-radius: 8px; color: #818a9b; background: #fff; font-size: 8px; font-weight: 800; transition: .14s ease; }
.survey-scale input:checked + span { border-color: var(--purple); color: #fff; background: var(--purple); box-shadow: 0 6px 12px -9px var(--purple-dark); }
.field > span small { margin-left: 4px; color: #9aa2b1; font-size: 7px; font-weight: 700; }
.private-field { padding: 12px; border: 1px solid #e1e5ec; border-radius: 13px; background: #f8f9fb; }
.private-field textarea { background: #fff; }
.private-field > em { color: #8992a2; font-size: 7px; font-style: normal; }

.notification-button { position: relative; display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid #e2e6ee; border-radius: 11px; background: #fff; cursor: pointer; }
.notification-button i { position: absolute; top: -5px; right: -5px; display: grid; width: 17px; height: 17px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #ef4444; font-size: 8px; font-style: normal; font-weight: 900; }
.notification-button i[hidden] { display: none; }
.guide-button { padding: 6px 8px; border: 1px solid #d9d0ff; border-radius: 8px; color: var(--purple); background: #fff; font-size: 8px; font-weight: 800; cursor: pointer; }
.photo-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-button b { font-size: 9px; }
.photo-preview { position: relative; height: 150px; overflow: hidden; border-radius: 14px; background: #eef1f5; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview button { position: absolute; top: 9px; right: 9px; display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 9px; color: #fff; background: rgba(15,24,43,.72); cursor: pointer; }
.nutrition-result { display: flex; margin-top: 12px; padding: 11px; flex-wrap: wrap; gap: 6px; border-radius: 11px; background: #f4f1ff; }
.nutrition-result b { width: 100%; color: var(--purple); font-size: 9px; }
.nutrition-result span { padding: 5px 7px; border-radius: 7px; color: #546078; background: #fff; font-size: 8px; font-weight: 750; }
.exercise-builder { padding: 12px; border: 1px solid #e4e7ed; border-radius: 14px; background: #f8f9fb; }
.exercise-builder-head { display: flex; margin-bottom: 9px; align-items: center; justify-content: space-between; gap: 10px; }
.exercise-builder-head > div { display: flex; align-items: center; gap: 6px; }
.exercise-builder-head b { font-size: 10px; }
.exercise-builder-head span { color: #929aaa; font-size: 7px; }
.exercise-builder-head button { padding: 7px 9px; border: 0; border-radius: 8px; color: var(--purple); background: #ece7ff; font-size: 8px; font-weight: 850; cursor: pointer; }
#exercise-list { display: grid; gap: 8px; }
.exercise-entry { padding: 10px; border: 1px solid #e2e5ec; border-radius: 11px; background: #fff; }
.exercise-entry-head { display: flex; margin-bottom: 8px; align-items: center; justify-content: space-between; }
.exercise-entry-head b { font-size: 8px; }
.remove-exercise { display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 7px; color: #9ca3af; background: #f3f4f6; cursor: pointer; }
.exercise-entry .field { gap: 4px; }
.exercise-entry .field input { padding: 9px 10px; font-size: 9px; }
.exercise-metrics { display: grid; margin-top: 8px; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.exercise-metrics label { position: relative; color: #8790a1; font-size: 7px; }
.exercise-metrics input { width: 100%; height: 35px; margin-top: 4px; padding: 5px 19px 5px 7px; border: 1px solid #dfe3ea; border-radius: 8px; outline: 0; color: var(--ink); background: #fff; font-size: 8px; }
.exercise-metrics em { position: absolute; right: 6px; bottom: 10px; color: #9da4b1; font-size: 6px; font-style: normal; }
.effort-field { padding: 12px; border-radius: 13px; background: #f6f3ff; }
.effort-field > div:first-child, .effort-field > div:last-child { display: flex; align-items: center; justify-content: space-between; }
.effort-field b { font-size: 9px; }
.effort-field output { color: var(--purple); font-size: 8px; font-weight: 900; }
.effort-field input { width: 100%; margin: 10px 0 5px; accent-color: var(--purple); }
.effort-field span { color: #969eac; font-size: 6px; }
.trainer-share { padding: 11px; border: 1px solid #ded7fa; border-radius: 12px; background: #f8f6ff; }
.trainer-share span { min-width: 0; }
.trainer-share b, .trainer-share small { display: block; }
.trainer-share b { color: #4d3bac; font-size: 9px; }
.trainer-share small { margin-top: 3px; color: #898fa0; font-size: 7px; font-weight: 600; }
.saved-workout-detail .exercise-detail-list { display: grid; margin-top: 5px; gap: 4px; }
.saved-workout-detail .exercise-detail-list span { display: flex; justify-content: space-between; gap: 8px; }
.saved-workout-detail .exercise-detail-list em { color: #7b8495; font-style: normal; }
.condition-score-row, .condition-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.condition-score-row output { display: block; margin-top: 4px; color: var(--purple); font-size: 11px; font-weight: 900; }
.condition-score-row input[type="range"] { padding: 0; accent-color: var(--purple); }
.condition-score-row em { margin-top: -24px; margin-right: 10px; align-self: end; color: #9199a8; font-size: 8px; font-style: normal; }
.condition-result-grid div { padding: 11px; border-radius: 11px; background: #f7f8fa; }
.condition-result-grid small, .condition-result-grid strong { display: block; }
.condition-result-grid small { color: #8b94a4; font-size: 8px; }
.condition-result-grid strong { margin-top: 4px; font-size: 11px; }
.pain-result { margin: 10px 0; color: #687286; font-size: 9px; }
.notification-list { display: grid; gap: 8px; }
.notification-list button { display: grid; padding: 13px; gap: 4px; border: 1px solid #e6e8ee; border-radius: 13px; background: #fff; text-align: left; cursor: pointer; }
.notification-list span { width: max-content; padding: 4px 6px; border-radius: 6px; color: var(--purple); background: #f0ecff; font-size: 7px; font-weight: 900; }
.notification-list b { color: var(--ink); font-size: 10px; }
.notification-list small { color: #949cab; font-size: 8px; }
.video-placeholder { display: grid; min-height: 190px; padding: 20px; place-items: center; align-content: center; gap: 8px; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #1d2840, #38445f); text-align: center; }
.video-placeholder span { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(255,255,255,.13); font-size: 19px; }
.video-placeholder b { font-size: 13px; }
.video-placeholder small { color: #bcc4d3; font-size: 8px; }
.guide-steps { margin: 15px 0 0; padding-left: 20px; color: #5e697c; font-size: 9px; line-height: 1.8; }
.muscle-card { overflow: hidden; }
.muscle-period, .muscle-side { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.muscle-period { margin-top: 13px; }
.muscle-period button, .muscle-side button { height: 39px; border: 1px solid #e4e6ec; border-radius: 12px; color: var(--purple); background: #fff; font-size: 10px; font-weight: 850; cursor: pointer; }
.muscle-period button.is-active { border-color: var(--purple); color: #fff; background: linear-gradient(135deg, #8b45ef, #722ff0); }
.muscle-side { margin-top: 8px; padding: 3px; gap: 3px; border-radius: 14px; background: #f0f3f8; }
.muscle-side button { height: 37px; border: 0; color: #8590a2; background: transparent; }
.muscle-side button.is-active { color: var(--ink); background: #fff; box-shadow: 0 3px 10px rgba(25,35,54,.09); }
.muscle-map-shell { display: grid; min-height: 420px; margin-top: 10px; padding: 15px 5px; grid-template-columns: 68px minmax(120px, 1fr) 68px; align-items: center; border-radius: 17px; background: linear-gradient(145deg, #f8fafc, #edf3f9); }
.muscle-map { width: 100%; max-height: 390px; filter: drop-shadow(0 8px 13px rgba(56,77,103,.08)); }
.rbh polygon { stroke: #fff; stroke-width: .65; stroke-linejoin: round; transition: fill .2s ease, filter .2s ease, transform .2s ease; transform-box: fill-box; transform-origin: center; cursor: pointer; outline: none; }
.rbh polygon.muscle-recovered { fill: #32d39b; }
.rbh polygon.muscle-recovering { fill: #ffa5a8; }
.rbh polygon.muscle-none { fill: #dfe7f1; }
.rbh polygon:hover, .rbh polygon:focus { filter: brightness(.92) drop-shadow(0 1px 2px rgba(20,35,55,.18)); transform: scale(1.018); }
.muscle-labels { display: flex; min-height: 330px; padding: 12px 0; justify-content: space-around; flex-direction: column; gap: 7px; }
.muscle-label { line-height: 1.15; }
.muscle-labels-right { text-align: right; }
.muscle-label b, .muscle-label strong, .muscle-label small { display: block; }
.muscle-label b { color: var(--ink); font-size: 8px; }
.muscle-label strong { margin-top: 3px; color: #0ca56f; font-size: 13px; }
.muscle-label.is-active strong { color: #eb5157; }
.muscle-label small { margin-top: 2px; color: #a0a8b6; font-size: 7px; }
.muscle-legend { display: flex; margin-top: 12px; flex-wrap: wrap; gap: 9px 12px; color: #768195; font-size: 7px; font-weight: 750; }
.muscle-legend span { display: inline-flex; align-items: center; gap: 4px; }
.muscle-legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend-done { background: #32d39b; }.legend-active { background: #ffa5a8; }.legend-none { background: #dfe7f1; }.legend-low { background: #76c795; }.legend-enough { background: #f05254; }
.volume-list { display: grid; margin-top: 14px; gap: 9px; }
.volume-row { display: grid; grid-template-columns: 55px 1fr 34px; align-items: center; gap: 8px; color: #6e788a; font-size: 8px; }
.volume-row > div { height: 8px; overflow: hidden; border-radius: 8px; background: #edf0f6; }
.volume-row i { display: block; height: 100%; border-radius: inherit; background: #f05254; transition: width .28s ease; }
.volume-row b { color: #465166; font-size: 8px; text-align: right; }

.toast { position: fixed; z-index: 150; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom)); left: 20px; max-width: 410px; margin: auto; padding: 12px 15px; border-radius: 13px; color: #fff; background: rgba(16,24,43,.94); box-shadow: 0 12px 30px rgba(16,24,43,.22); font-size: 11px; font-weight: 750; text-align: center; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (min-width: 620px) {
  body { padding: 28px 0; }
  .app { height: calc(100dvh - 56px); min-height: 720px; max-height: 940px; border: 1px solid #dde3ec; border-radius: 27px; box-shadow: 0 24px 70px rgba(29,42,71,.16); }
  .bottom-nav { position: absolute; }
  .modal { padding-bottom: 42px; }
}

@media (max-width: 370px) {
  .branch { display: none; }
  .screen { padding-right: 13px; padding-left: 13px; }
  .card { padding: 17px; }
  .navigator-grid { gap: 5px; }
  .navigator-grid strong { font-size: 12px; }
  .bottom-nav b { font-size: 8px; }
  .member-meta { gap: 4px; }
  .survey-item { grid-template-columns: 68px 1fr; }
  .muscle-map-shell { grid-template-columns: 58px minmax(110px, 1fr) 58px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}