:root {
  --primary: #6469C9;
  --primary-dark: #565CB6;
  --primary-light: #9CA0E4;
  --primary-bg: #EFF0FF;
  --danger: #B94F5B;
  --danger-bg: #FAECEF;
  --warn: #B76149;
  --warn-bg: #FFF0EB;
  --info: #6177B8;
  --info-bg: #EEF2FF;
  --text: #27283A;
  --text-sub: #6F7082;
  --text-light: #9A9AAA;
  --bg: #F8F7FA;
  --card: #FFFFFF;
  --border: #E5E3EA;
  --shadow: 0 1px 0 rgba(39,40,58,.03);
  --shadow-lg: 0 12px 34px rgba(39,40,58,.10);
  --radius: 16px;
  --radius-sm: 10px;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: #F0EFF4;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}
#app { max-width:520px; margin:0 auto; min-height:100vh; position:relative; padding-bottom:76px; background:var(--bg); border-left:1px solid rgba(39,40,58,.04); border-right:1px solid rgba(39,40,58,.04); }
a { color: inherit; text-decoration: none; }
input, button, select, textarea { font-family: inherit; font-size: inherit; border: none; outline: none; }
button { cursor: pointer; }

/* ---- Top Bar ---- */
.topbar {
  background: rgba(248,247,250,.96);
  color: var(--text);
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 100;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);
}
.topbar h1 { font-size: 16px; font-weight: 650; letter-spacing:.01em; }
.topbar .back-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.topbar .right-action { font-size: 14px; opacity: 0.9; }

/* ---- Bottom Nav ---- */
.bottom-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px;
  bottom: 0;
  background: rgba(254,254,252,.97);
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(18px);
  display: flex;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
}
.bottom-nav a {
  flex: 1; text-align: center; padding: 8px 0 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-sub); font-size: 11px;
  transition: color .2s;
}
.bottom-nav a.active { color: var(--primary); background:transparent; font-weight:650; }
.bottom-nav a svg { width: 22px; height: 22px; }

/* ---- Cards ---- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin: 14px 16px;
  border: 1px solid var(--border);
}
.card-title { font-size: 15px; font-weight: 650; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.card-title .more { font-size: 12px; color: var(--text-sub); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 650;
  transition: opacity .2s, transform .1s; background: var(--primary-dark); color: #fff;
  width: 100%; box-shadow:none;
}
.btn:active { transform: scale(0.98); }
.btn svg { width:18px; height:18px; flex:0 0 auto; }
.record-primary-action { width:calc(100% - 32px); margin:16px; }
.weight-prefill-wrap { position:relative; }.weight-prefill-wrap .input { padding-right:46px; font-size:24px; font-weight:700; }.weight-prefill-wrap>span { position:absolute; top:50%; right:14px; transform:translateY(-50%); color:var(--text-sub); font-size:12px; }.field-assist { margin-top:6px; color:var(--primary); font-size:10px; line-height:1.5; }
.btn-block { display: flex; width: 100%; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-danger { background: var(--danger); }
.btn-sm { padding: 6px 14px; font-size: 13px; width: auto; border-radius: 8px; }
.btn:disabled { opacity: 0.5; }

/* ---- Inputs ---- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--text-sub); margin-bottom: 6px; }
.input, .select, .textarea {
  width: 100%; padding: 12px 13px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #FEFEFC; font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow:0 0 0 3px rgba(100,105,201,.10); }
.textarea { resize: vertical; min-height: 60px; }

/* ---- Auth pages ---- */
.auth-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 34px 28px; background:var(--bg); }
.auth-logo { width: 56px; height: 56px; border-radius: 15px; background: var(--primary-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow:none; }
.auth-logo svg { width: 28px; height: 28px; color: #fff; }
.auth-page h2 { font-size: 26px; margin-bottom: 6px; letter-spacing:.04em; }
.auth-page .subtitle { color: var(--text-sub); font-size: 14px; margin-bottom: 24px; }
.auth-form { width: 100%; max-width: 380px; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px; box-shadow:none; }
.auth-form .field { margin-bottom: 16px; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-sub); }
.auth-switch a { color: var(--primary); font-weight: 500; }
.agreement { display:flex; align-items:flex-start; gap:8px; color:var(--text-sub); font-size:12px; line-height:1.6; margin:2px 0 16px; cursor:pointer; }
.agreement input { margin-top:3px; width:16px; height:16px; accent-color:var(--primary); flex:0 0 auto; }
.agreement a { color:var(--primary); font-weight:600; }
.error-msg { color: var(--danger); font-size: 13px; margin-bottom: 12px; text-align: center; }

/* ---- Dashboard ---- */
.dash-hero {
  background: var(--primary-bg);
  color: var(--text);
  padding: 24px 22px 26px;
  border-radius: 0 0 22px 22px;
  box-shadow:none;
}
.dash-heading { display:flex; align-items:flex-start; justify-content:space-between; }.dash-heading small { color:var(--text-sub); font-size:11px; }.dash-hero .greeting { font-size: 17px; font-weight:650; margin-top:2px; }
.dash-heading-actions { display:flex; align-items:center; gap:8px; }.dashboard-customize { width:31px; height:31px; display:grid; place-items:center; border:1px solid rgba(100,105,201,.20); border-radius:9px; color:var(--primary-dark); background:rgba(255,255,255,.54); }.dashboard-customize svg { width:16px; height:16px; }
.dash-hero .streak { display: inline-flex; align-items: center; gap: 5px; color:var(--primary-dark); border:1px solid rgba(100,105,201,.24); border-radius: 8px; padding: 6px 8px; font-size: 11px; }.dash-hero .streak svg { width:15px; height:15px; }
.dash-primary-metric { margin:27px 0 14px; }.dash-primary-metric>span { display:block; color:var(--text-sub); font-size:12px; }.dash-primary-metric strong { font-size:48px; line-height:1.05; letter-spacing:-.04em; font-weight:650; }.dash-primary-metric em { margin-left:7px; color:var(--text-sub); font-size:12px; font-style:normal; }
.dash-progress { height:4px; overflow:hidden; border-radius:10px; background:#DDDDF0; }.dash-progress span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
.cal-stats { display: flex; justify-content: space-around; margin-top: 8px; }
.cal-stat { text-align: center; }
.cal-stat .v { font-size: 18px; font-weight: 600; }
.cal-stat .l { font-size: 11px; opacity: 0.8; }

/* ---- Weight section ---- */
.weight-current { display: flex; align-items: baseline; gap: 8px; }
.weight-current .num { font-size: 36px; font-weight: 700; color: var(--text); }
.weight-current .unit { font-size: 14px; color: var(--text-sub); }
.weight-change { font-size: 13px; margin-top: 4px; }
.weight-change.up { color: var(--danger); }
.weight-change.down { color: var(--primary); }
.bmi-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }

/* ---- Quick actions ---- */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin:16px; }
.quick-action {
  background: var(--card); border-radius: 14px; box-shadow: none; border:1px solid var(--border);
  padding: 12px 5px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: transform .1s;
}
.quick-action:active { transform: scale(0.96); }
.quick-action .icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background:var(--primary-bg)!important; }
.quick-action .icon svg { width: 19px; height: 19px; color: var(--primary)!important; }
.quick-action .name { font-size: 12px; color: var(--text); }
.qa-weight,.qa-diet,.qa-exercise,.qa-water { background:var(--card); color:var(--text); }
.dashboard-modules { padding-bottom:8px; }
.dashboard-modules > :first-child { margin-top:16px; }
.dashboard-editor-tip { margin:-7px 0 14px; color:var(--text-sub); font-size:11px; line-height:1.6; }
.dashboard-sort-list { border-top:1px solid var(--border); }.dashboard-sort-item { min-height:52px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); background:#fff; transition:.15s; }.dashboard-sort-item.is-dragging { opacity:.56; transform:scale(.98); background:var(--primary-bg); }.dashboard-drag-handle { flex:0 0 36px; height:38px; color:var(--text-light); background:transparent; font-size:19px; touch-action:none; cursor:grab; }.dashboard-sort-item strong { flex:1; font-size:13px; }.dashboard-hide-module { padding:7px 9px; border-radius:8px; color:var(--text-sub); background:#F4F3F7; font-size:10px; }.dashboard-hidden-title { margin:17px 0 8px; color:var(--text-sub); font-size:11px; }.dashboard-hidden-list { display:flex; flex-wrap:wrap; gap:7px; }.dashboard-hidden-list button { padding:8px 10px; border:1px dashed #C9C8D3; border-radius:9px; color:var(--primary); background:#FAF9FC; font-size:11px; }.dashboard-editor-actions { display:grid; grid-template-columns:1fr 1.4fr; gap:9px; margin-top:19px; }.dashboard-editor-actions .btn { margin:0; }

.water-card { background:var(--card); }
.water-progress { height:9px; border-radius:999px; background:rgba(8,145,178,.13); overflow:hidden; }
.water-progress span { display:block; height:100%; border-radius:inherit; background:var(--primary); transition:width .35s ease; }
.water-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.water-actions button { color:var(--primary); background:var(--primary-bg); border:1px solid transparent; border-radius:8px; padding:8px 4px; font-weight:600; }
.water-sheet { text-align:center; }
.water-drop { width:58px; height:58px; margin:0 auto 8px; border-radius:20px; background:#ECFEFF; color:#0891B2; display:grid; place-items:center; }
.water-drop svg { width:30px; height:30px; }
.water-hint { color:var(--text-sub); margin:-8px 0 18px; }
.water-preset { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.water-preset button { padding:12px 6px; border-radius:12px; color:#0E7490; background:#ECFEFF; border:1px solid transparent; font-weight:600; }
.water-preset button.active { border-color:#0891B2; background:#CFFAFE; }

/* ---- Macro bar ---- */
.macro-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 8px 0; }
.macro-bar .seg-protein { background: var(--info); }
.macro-bar .seg-fat { background: var(--warn); }
.macro-bar .seg-carbs { background: var(--primary-light); }
.macro-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-sub); }
.macro-legend span { display: inline-flex; align-items: center; gap: 4px; }
.macro-legend .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ---- Lists ---- */
.list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: none; }
.list-item .info .title { font-size: 15px; font-weight: 500; }
.list-item .info .sub { font-size: 12px; color: var(--text-sub); }
.list-item .value { font-size: 15px; font-weight: 600; }
.list-item .del-btn { color: var(--danger); font-size: 13px; padding: 4px 8px; }

/* ---- Meal sections ---- */
.meal-section { margin-bottom: 16px; }
.meal-card { padding:16px; }.meal-header { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; margin-bottom:8px; }
.meal-header .meal-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.meal-header .meal-cal { font-size: 13px; color: var(--text-sub); }
.meal-header .add-btn { min-height:36px; display:flex; align-items:center; gap:4px; padding:7px 10px; border:1px solid #DCDCEF; border-radius:9px; color:var(--primary); background:#F5F4FA; font-size:11px; font-weight:650; }.meal-header .add-btn>span { width:15px; height:15px; display:grid; place-items:center; }.meal-header .add-btn svg { width:15px; height:15px; }
.meal-items .meal-item { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid #F0EFF4; }.meal-items .meal-item:last-child { border-bottom:0; }.meal-item>div { min-width:0; flex:1; }
.meal-item .name { font-size: 14px; }
.meal-item .meta { font-size: 12px; color: var(--text-sub); }
.meal-item .cal { font-size: 14px; font-weight: 500; color: var(--warn); }
.meal-item.is-hidden { display:none; }.meal-expand { width:100%; min-height:39px; margin-top:5px; padding:8px; display:flex; align-items:center; justify-content:center; gap:4px; border-top:1px solid var(--border); color:var(--primary); background:transparent; font-size:11px; font-weight:650; }.meal-expand svg { width:14px; height:14px; transition:transform .2s; }.meal-expand.expanded svg { transform:rotate(-90deg); }
.record-delete-button { flex:0 0 auto; min-width:64px; min-height:36px; padding:7px 9px; display:flex; align-items:center; justify-content:center; gap:4px; border:1px solid #E8DCD9; border-radius:9px; color:#B6685B; background:#FFF9F7; font-size:10px; font-weight:600; }.record-delete-button svg { width:14px; height:14px; }.record-delete-button:active { transform:scale(.97); background:#FCEDEA; }
.initial-weight-entry { min-width:82px; padding:5px 7px; border:1px solid #E1E0ED; border-radius:10px; background:#FAF9FC; text-align:center; }.initial-weight-entry span,.initial-weight-entry strong,.initial-weight-entry small { display:block; }.initial-weight-entry span { color:var(--text-sub); font-size:10px; }.initial-weight-entry strong { margin:1px 0; color:var(--text); font-size:20px; }.initial-weight-entry small { color:var(--primary); font-size:8px; }.weight-history-item { min-height:63px; }.weight-note { margin-top:3px; color:var(--text-sub); font-size:10px; }.weight-delete-button { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border:1px solid #E8DCD9; border-radius:11px; color:#B6685B; background:#FFF9F7; }.weight-delete-button svg { width:17px; height:17px; }.weight-delete-button:active { transform:scale(.96); background:#FCEDEA; }.initial-weight-notice { margin-bottom:15px; padding:12px; border-radius:11px; background:var(--primary-bg); }.initial-weight-notice strong { font-size:12px; }.initial-weight-notice p { margin-top:4px; color:var(--text-sub); font-size:10px; line-height:1.6; }
.initial-request-state { margin:0 16px 12px; padding:12px 13px; border:1px solid var(--border); border-radius:12px; background:var(--card); }.initial-request-state strong,.initial-request-state small { display:block; }.initial-request-state strong { font-size:12px; }.initial-request-state small { margin-top:3px; color:var(--text-sub); font-size:9px; }.initial-request-state p { margin-top:8px; padding-top:8px; border-top:1px solid var(--border); color:var(--text-sub); font-size:10px; line-height:1.6; }.initial-request-state.state-pending { border-color:#E9DDB8; background:#FFFCF3; }.initial-request-state.state-approved { border-color:#CFE6DC; background:#F7FCFA; }.initial-request-state.state-rejected { border-color:#E8D7D9; background:#FFF9F9; }

/* ---- Search ---- */
.search-bar { position: relative; margin-bottom: 12px; }
.search-bar input { width: 100%; padding: 10px 14px 10px 38px; border: 1.5px solid var(--border); border-radius: 20px; font-size: 14px; }
.search-bar svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-light); }

/* ---- Food/Exercise list ---- */
.pick-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px; border-bottom: 1px solid var(--border);
}
.pick-item .info .name { font-size: 15px; font-weight: 500; }
.pick-item .info .meta { font-size: 12px; color: var(--text-sub); }
.pick-item .pick-btn { min-height:36px; display:flex; align-items:center; gap:4px; padding:7px 11px; border:1px solid #DCDCEF; border-radius:9px; color:var(--primary); background:var(--primary-bg); font-size:11px; font-weight:650; }.pick-item .pick-btn svg { width:14px; height:14px; }
.record-page-action { width:calc(100% - 32px); min-height:62px; margin:16px; padding:12px 14px; display:flex; align-items:center; gap:11px; border:1px solid #DDDCEF; border-radius:14px; color:var(--text); background:linear-gradient(135deg,#F3F2FA,#FFF); text-align:left; }.record-action-icon { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#fff; background:var(--primary-dark); }.record-action-icon svg { width:20px; height:20px; }.record-page-action>div { flex:1; }.record-page-action strong,.record-page-action small { display:block; }.record-page-action strong { font-size:13px; }.record-page-action small { margin-top:3px; color:var(--text-sub); font-size:9px; }.record-page-action>i { width:17px; height:17px; color:var(--primary); }.record-page-action>i svg { width:100%; height:100%; }.exercise-record-card { padding:16px; }.exercise-record-row { gap:10px; }.exercise-record-row .info { flex:1; min-width:0; }.exercise-record-icon { flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:var(--primary); background:var(--primary-bg); }.exercise-record-icon svg { width:18px; height:18px; }

/* ---- Charts ---- */
.chart-wrap { width: 100%; overflow-x: auto; }
canvas.chart-canvas { display: block; margin: 0 auto; }

/* ---- Profile ---- */
.profile-header { background:var(--card); color:var(--text); padding:30px 16px 24px; text-align:center; border-bottom:1px solid var(--border); border-radius:0; box-shadow:none; }
.profile-header .avatar { width:60px; height:60px; border-radius:18px; background:var(--primary-dark); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:24px; }
.profile-header .name { font-size: 18px; font-weight: 600; }
.profile-header .bmi { font-size: 12px; color:var(--text-sub); margin-top: 4px; }
.feedback-intro { padding:27px 20px 19px; background:var(--card); border-bottom:1px solid var(--border); }.feedback-intro>span { color:var(--primary); font-size:10px; font-weight:650; letter-spacing:.08em; }.feedback-intro h2 { margin:6px 0; font-size:22px; }.feedback-intro p { color:var(--text-sub); font-size:11px; line-height:1.7; }.feedback-form { padding:16px; }.feedback-history { padding:3px 16px 26px; }.feedback-history .section-title { margin:12px 0 8px; font-size:16px; font-weight:650; }.feedback-history-item { margin-bottom:9px; padding:14px; border:1px solid var(--border); border-radius:13px; background:var(--card); }.feedback-history-item header { display:flex; align-items:center; justify-content:space-between; }.feedback-history-item header strong { font-size:12px; }.feedback-history-item>p { margin:8px 0; color:#4E4F60; font-size:11px; line-height:1.7; white-space:pre-wrap; }.feedback-history-item>small { color:var(--text-light); font-size:9px; }.feedback-status { padding:3px 7px; border-radius:999px; font-size:9px; }.status-pending { color:#9A6700; background:#FFF8DD; }.status-processing { color:var(--primary); background:var(--primary-bg); }.status-resolved { color:#417A66; background:#EAF6F1; }.status-closed { color:var(--text-sub); background:#F0EFF3; }.feedback-reply { margin-top:10px; padding:10px; border-radius:9px; background:#F6F5F9; }.feedback-reply b { color:var(--primary); font-size:9px; }.feedback-reply p { margin-top:3px; color:var(--text-sub); font-size:10px; line-height:1.6; }
.menu-list { background:var(--card); border-radius:var(--radius); box-shadow:none; border:1px solid var(--border); margin:12px 16px; overflow:hidden; }
.menu-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.menu-item:last-child { border-bottom: none; }
.menu-item .icon { width: 28px; height: 28px; margin-right: 12px; display: flex; align-items: center; justify-content: center; }
.menu-item .icon svg { width: 20px; height: 20px; }
.menu-item .label { flex: 1; font-size: 15px; }
.menu-item .arrow { color: var(--text-light); font-size: 18px; }
.menu-button { width:100%; background:#fff; text-align:left; }
.account-delete-link { display:block; margin:6px auto 14px; padding:8px 16px; background:transparent; color:var(--text-light); font-size:12px; }
.danger-hint { color:var(--danger); background:var(--danger-bg); border-radius:12px; padding:12px; margin-bottom:16px; line-height:1.6; }

.legal-page { padding:24px 20px 40px; }
.legal-page h2 { font-size:24px; margin-bottom:4px; }
.legal-date { color:var(--text-light); font-size:12px; margin-bottom:24px; }
.legal-page section { background:#fff; border:1px solid rgba(15,118,110,.07); border-radius:16px; padding:16px; margin-bottom:12px; box-shadow:var(--shadow); }
.legal-page h3 { font-size:15px; margin-bottom:8px; }
.legal-page section p { color:var(--text-sub); font-size:13px; line-height:1.8; }
.legal-notice { color:#92400E; background:#FFFBEB; border:1px solid #FDE68A; border-radius:14px; padding:14px; font-size:12px; line-height:1.7; margin-top:20px; }

/* ---- Guest mode ---- */
.guest-hero { margin:0 0 22px; padding:40px 22px 30px; color:var(--text); border-radius:0 0 22px 22px; background:var(--primary-bg); box-shadow:none; }
.guest-kicker { display:inline-block; padding:0; border-radius:0; background:transparent; color:var(--primary-dark); font-size:11px; letter-spacing:.08em; margin-bottom:16px; }
.guest-hero h2 { font-size:29px; line-height:1.24; letter-spacing:-.02em; font-weight:650; }
.guest-hero p { color:var(--text-sub); font-size:14px; line-height:1.75; margin:12px 0 22px; }
.guest-hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.guest-hero-actions a { padding:11px 8px; text-align:center; border-radius:9px; font-weight:650; background:var(--primary); color:#fff; }
.guest-hero-actions a:last-child { background:#fff; color:var(--primary-dark); border:1px solid #D9DAF1; }
.guest-section-title { padding:0 18px 10px; }
.guest-section-title span { display:block; font-weight:800; font-size:18px; }
.guest-section-title small { color:var(--text-sub); }
.guest-tool-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; padding:0 16px; }
.guest-tool { min-height:132px; border-radius:14px; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--border); box-shadow:none; background:var(--card)!important; }
.guest-tool-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; margin-bottom:auto; color:var(--primary)!important; background:var(--primary-bg)!important; }
.guest-tool-icon svg { width:23px; height:23px; }
.guest-tool strong { font-size:14px; margin-top:14px; }
.guest-tool small { color:var(--text-sub); margin-top:3px; }
.tool-bmi,.tool-food,.tool-run,.tool-privacy { background:var(--card); }.tool-bmi .guest-tool-icon,.tool-food .guest-tool-icon,.tool-run .guest-tool-icon,.tool-privacy .guest-tool-icon { background:var(--primary-bg); }
.guest-buddy-showcase { margin:15px 16px; padding:18px; border-radius:16px; color:var(--text); background:#F2F0FF; border:1px solid #E0DDF5; box-shadow:none; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; }
.guest-buddy-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--primary-dark); }.guest-buddy-icon svg { width:24px; height:24px; }
.guest-buddy-showcase strong,.guest-buddy-showcase small { display:block; }.guest-buddy-showcase strong { font-size:16px; }.guest-buddy-showcase small { color:var(--text-sub); font-size:12px; line-height:1.6; margin-top:4px; }
.guest-buddy-showcase a { grid-column:1/-1; padding:10px; text-align:center; border-radius:9px; background:var(--primary-dark); color:#fff; font-weight:650; font-size:13px; }
.guest-record-card { margin:15px 16px; padding:17px; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:none; display:flex; gap:12px; align-items:center; }
.guest-record-card div { flex:1; min-width:0; }.guest-record-card span { display:block; font-weight:700; }.guest-record-card small { display:block; color:var(--text-sub); margin-top:3px; line-height:1.5; }
.guest-record-card a { flex:0 0 auto; padding:9px 12px; border-radius:8px; background:var(--primary-dark); color:#fff; font-weight:650; font-size:13px; }
.guest-health-note { margin:15px 16px 24px; padding:16px; border-radius:18px; background:#F8FAFC; border:1px solid #E2E8F0; }
.guest-health-note strong { font-size:14px; }.guest-health-note p { color:var(--text-sub); font-size:12px; line-height:1.7; margin-top:5px; }
.guest-page-intro { padding:30px 20px 24px; background:var(--card); border-bottom:1px solid var(--border); }
.guest-page-intro>span { color:var(--primary); font-weight:700; font-size:12px; }.guest-page-intro h2 { font-size:24px; margin:7px 0; }.guest-page-intro p { color:var(--text-sub); line-height:1.7; }
.food-intro,.exercise-intro { background:var(--card); }.food-intro>span,.exercise-intro>span { color:var(--primary); }
.guest-calculator { padding:20px; }.guest-bmi-result { margin-top:18px; padding:18px; text-align:center; border-radius:16px; background:var(--primary-bg); }
.guest-bmi-result small,.guest-bmi-result strong,.guest-bmi-result span { display:block; }.guest-bmi-result strong { font-size:42px; line-height:1.15; color:var(--text); }.guest-bmi-result span { font-weight:700; margin:4px 0 13px; }.guest-bmi-result a { display:inline-block; color:var(--primary); font-weight:700; }
.bmi-reference>div:not(.card-title) { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }.bmi-reference>div:last-child { border-bottom:0; }.bmi-reference span { display:flex; align-items:center; gap:8px; }.bmi-reference i { width:10px; height:10px; border-radius:50%; }.bmi-reference b { font-size:13px; }.bmi-low{background:#3B82F6}.bmi-normal{background:#10B981}.bmi-high{background:#F59E0B}.bmi-obese{background:#EF4444}
.guest-library-controls { position:sticky; top:57px; z-index:20; padding:12px 16px 10px; background:rgba(248,247,250,.94); backdrop-filter:blur(14px); display:grid; grid-template-columns:minmax(0,1fr) 118px; gap:8px; }.guest-library-controls .search-bar { margin:0; }.guest-library-controls .select { padding:9px 8px; font-size:13px; }
.guest-library-count { padding:4px 18px 8px; color:var(--text-sub); font-size:12px; }.guest-library-list { padding:0 16px 88px; }
.guest-library-item { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:16px; margin-bottom:10px; border-radius:14px; background:var(--card); border:1px solid var(--border); box-shadow:none; }
.guest-library-item>div:first-child strong,.guest-library-item>div:first-child span { display:block; }.guest-library-item>div:first-child strong { font-size:15px; }.guest-library-item>div:first-child span { color:var(--text-sub); font-size:12px; margin-top:3px; }
.guest-calorie { text-align:right; color:#B45309; }.guest-calorie b { display:block; font-size:22px; line-height:1; }.guest-calorie small { font-size:10px; }
.guest-nutrients { grid-column:1/-1; display:flex; gap:6px; flex-wrap:wrap; padding-top:9px; border-top:1px solid var(--border); }.guest-nutrients span { padding:4px 7px; border-radius:7px; background:#F8FAFC; color:var(--text-sub); font-size:11px; }
.guest-met { width:54px; height:54px; border-radius:15px; background:#EFF6FF; color:#1D4ED8; display:flex; flex-direction:column; align-items:center; justify-content:center; }.guest-met small { font-size:9px; }.guest-met b { font-size:18px; line-height:1.1; }.exercise-item p { grid-column:1/-1; color:var(--text-sub); font-size:12px; padding-top:8px; border-top:1px solid var(--border); }
.guest-sticky-action { position:fixed; left:50%; bottom:82px; transform:translateX(-50%); width:calc(100% - 40px); max-width:480px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; border-radius:15px; color:#fff; background:rgba(15,23,42,.9); backdrop-filter:blur(10px); z-index:80; box-shadow:0 10px 30px rgba(15,23,42,.2); }.guest-sticky-action span { font-size:11px; }.guest-sticky-action a { flex:0 0 auto; color:#5EEAD4; font-weight:700; font-size:12px; }
.guest-gate { min-height:calc(100vh - 130px); padding:52px 28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.guest-gate-icon { width:64px; height:64px; display:grid; place-items:center; color:var(--primary); background:var(--primary-bg); border-radius:22px; }.guest-gate-icon svg { width:30px; height:30px; }.guest-gate h2 { font-size:23px; margin:17px 0 8px; }.guest-gate p { color:var(--text-sub); line-height:1.75; margin-bottom:22px; }.guest-gate .btn { margin-bottom:10px; }.guest-back-link { color:var(--text-sub); margin-top:8px; padding:8px; }
.guest-profile-card { margin:22px 16px 12px; padding:28px 22px; text-align:center; border-radius:24px; background:#fff; box-shadow:var(--shadow); }.guest-avatar { width:70px; height:70px; margin:0 auto 14px; border-radius:24px; background:var(--primary-bg); color:var(--primary); display:grid; place-items:center; }.guest-avatar svg { width:34px; height:34px; }.guest-profile-card h2 { font-size:22px; }.guest-profile-card p { color:var(--text-sub); line-height:1.7; margin:8px 0 20px; }.guest-profile-card .btn { margin-top:9px; }

/* ---- Buddy / shared challenge ---- */
.buddy-home-entry { margin:0 16px 16px; padding:15px; border-radius:14px; display:flex; align-items:center; gap:12px; color:var(--text); background:#F2F0FF; border:1px solid #E0DDF5; box-shadow:none; }
.buddy-home-icon { flex:0 0 42px; height:42px; display:grid; place-items:center; border-radius:11px; color:#fff; background:var(--primary-dark); }.buddy-home-icon svg { width:22px; height:22px; }
.buddy-home-entry>span:nth-child(2) { flex:1; }.buddy-home-entry strong,.buddy-home-entry small { display:block; }.buddy-home-entry strong { font-size:15px; }.buddy-home-entry small { opacity:.78; font-size:11px; margin-top:3px; }
.buddy-home-entry i { width:20px; height:20px; opacity:.75; }.buddy-home-entry i svg { width:20px; height:20px; }
.buddy-hero { margin:0; padding:28px 20px 24px; display:flex; gap:15px; color:var(--text); background:var(--card); border-bottom:1px solid var(--border); border-radius:0; box-shadow:none; }
.buddy-hero-icon { flex:0 0 50px; height:50px; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--primary-dark); }.buddy-hero-icon svg { width:27px; height:27px; }
.buddy-hero h2 { font-size:23px; line-height:1.2; margin:3px 0 7px; }.buddy-hero small { color:var(--primary); }.buddy-hero p { color:var(--text-sub); font-size:12px; line-height:1.65; }
.buddy-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 16px 19px; }
.buddy-actions button { min-height:46px; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:10px; background:var(--card); color:var(--primary); border:1px solid var(--border); box-shadow:none; font-weight:650; }.buddy-actions svg { width:19px; height:19px; }
.buddy-actions button:last-child { color:var(--primary); }
.buddy-section-head { margin:18px 16px 10px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }.buddy-section-head strong,.buddy-section-head small { display:block; }.buddy-section-head strong { font-size:18px; }.buddy-section-head small { color:var(--text-sub); margin-top:2px; font-size:11px; }
.buddy-section-head>button { flex:0 0 auto; display:flex; align-items:center; gap:3px; padding:7px 10px; border-radius:8px; background:var(--primary-bg); color:var(--primary); font-size:12px; font-weight:650; }.buddy-section-head>button svg { width:15px; height:15px; }
.buddy-empty,.buddy-task-empty { margin:0 16px; padding:28px 22px; text-align:center; border-radius:14px; background:var(--card); border:1px dashed #CAC9D3; box-shadow:none; }.buddy-empty>span,.buddy-task-empty>span { width:50px; height:50px; margin:0 auto 12px; border-radius:13px; display:grid; place-items:center; background:var(--primary-bg); color:var(--primary); }.buddy-empty svg,.buddy-task-empty svg { width:26px; height:26px; }.buddy-empty strong { display:block; font-size:16px; }.buddy-empty p,.buddy-task-empty p { color:var(--text-sub); font-size:12px; line-height:1.7; margin-top:6px; }
.buddy-comparison-list,.buddy-task-list { padding:0 16px; }
.buddy-compare-card { margin-bottom:11px; padding:16px; border-radius:14px; background:var(--card); border:1px solid var(--border); box-shadow:none; }
.buddy-compare-head { display:flex; align-items:center; justify-content:space-between; }.buddy-compare-head>div { display:flex; align-items:center; gap:9px; }.buddy-compare-head strong,.buddy-compare-head small { display:block; }.buddy-compare-head small { color:var(--text-sub); font-size:10px; margin-top:2px; }.buddy-compare-head>button { color:var(--text-light); font-size:11px; padding:6px; }
.buddy-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#fff; background:var(--primary-dark); font-weight:700; }
.buddy-versus { margin:15px 0 11px; display:grid; grid-template-columns:1fr 38px 1fr; align-items:center; text-align:center; }.buddy-versus>span { width:32px; height:32px; margin:auto; display:grid; place-items:center; border-radius:50%; background:var(--primary-bg); color:var(--primary); font-size:9px; font-weight:800; }.buddy-versus small,.buddy-versus strong,.buddy-versus div>span { display:block; }.buddy-versus small { color:var(--text-sub); }.buddy-versus strong { font-size:22px; margin:2px 0; }.buddy-versus div>span { color:var(--primary); font-size:11px; }
.buddy-week { padding:9px 10px; display:grid; grid-template-columns:1fr auto auto; gap:10px; border-radius:11px; background:#F8FAFC; font-size:10px; }.buddy-week span { color:var(--text-sub); }.buddy-week b { font-weight:600; }
.buddy-task-card { margin-bottom:12px; padding:17px; border-radius:14px; background:var(--card); border:1px solid var(--border); box-shadow:none; }
.buddy-task-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.buddy-task-head h3 { font-size:17px; margin-top:5px; }.buddy-task-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:#D97706; background:#FFFBEB; }.buddy-task-icon svg { width:24px; height:24px; }
.buddy-task-state { padding:3px 7px; border-radius:6px; font-size:10px; font-weight:700; }.state-active{background:#ECFDF5;color:#047857}.state-upcoming{background:#EFF6FF;color:#1D4ED8}.state-ended{background:#F1F5F9;color:#64748B}
.buddy-task-desc { color:var(--text-sub); font-size:12px; line-height:1.6; margin:9px 0; }
.buddy-task-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:9px 0 12px; color:var(--text-sub); font-size:10px; border-bottom:1px solid var(--border); }.buddy-task-meta b { color:var(--text); }
.buddy-member-progress { padding-top:5px; }.buddy-member-row { display:grid; grid-template-columns:1fr auto; gap:6px 10px; padding:10px 0; border-bottom:1px solid var(--border); }.buddy-member-row:last-child { border-bottom:0; }.buddy-member-row>div:first-child { display:flex; align-items:center; gap:7px; }.buddy-member-row strong { font-size:12px; }.buddy-member-row>b { font-size:12px; }.buddy-member-row>small { grid-column:1/-1; color:var(--text-sub); font-size:10px; }
.buddy-mini-avatar { width:26px; height:26px; display:inline-grid; place-items:center; border-radius:8px; color:var(--primary); background:var(--primary-bg); font-size:11px; font-weight:700; }
.buddy-progress { grid-column:1/-1; height:5px; border-radius:999px; overflow:hidden; background:#E9E8F0; }.buddy-progress i { display:block; height:100%; border-radius:inherit; background:var(--primary); }
.buddy-task-buttons { display:flex; gap:8px; margin-top:13px; }.buddy-task-buttons .btn { min-height:40px; padding:8px 12px; font-size:12px; }
.buddy-privacy-note { margin:18px 16px 26px; padding:13px; display:flex; gap:9px; color:#475569; background:#F8FAFC; border-radius:14px; font-size:10px; line-height:1.6; }.buddy-privacy-note svg { flex:0 0 20px; width:20px; height:20px; color:var(--primary); }
.buddy-modal-desc { margin:-6px 0 18px; color:var(--text-sub); text-align:center; font-size:12px; line-height:1.7; }.buddy-invite-code { margin:12px 0 18px; padding:17px; border-radius:12px; text-align:center; letter-spacing:.24em; color:var(--primary-dark); background:var(--primary-bg); font-size:27px; font-weight:800; }.buddy-modal-foot { color:var(--text-light); text-align:center; font-size:10px; margin-top:11px; }.buddy-code-input { text-align:center; letter-spacing:.18em; font-size:21px; font-weight:700; text-transform:uppercase; }
.buddy-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.buddy-friend-picks { display:flex; flex-wrap:wrap; gap:8px; }.buddy-friend-picks label { display:flex; align-items:center; gap:6px; padding:7px 9px; border-radius:11px; background:#F8FAFC; border:1px solid var(--border); font-size:12px; }.buddy-friend-picks input { accent-color:var(--primary); }
.buddy-view-tabs { position:sticky; top:57px; z-index:25; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:0; padding:10px 16px; background:rgba(248,247,250,.96); border-bottom:1px solid var(--border); backdrop-filter:blur(14px); }
.buddy-view-tabs button { padding:9px 5px; border-radius:8px; color:var(--text-sub); background:transparent; font-size:12px; font-weight:600; }.buddy-view-tabs button.active { color:#fff; background:var(--primary-dark); }.buddy-view-tabs button:disabled { opacity:.38; }
.buddy-panel { display:none; padding-top:1px; }.buddy-panel.active { display:block; }
.buddy-section-head select { max-width:120px; padding:7px 28px 7px 9px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--card); font-size:12px; }
.buddy-data-table { margin:0 16px 12px; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--card); }.buddy-data-head,.buddy-data-row { display:grid; grid-template-columns:1.2fr 1fr 1fr; align-items:center; gap:6px; padding:11px 12px; }.buddy-data-head { color:var(--text-sub); background:#F3F2F7; font-size:10px; }.buddy-data-row { border-top:1px solid var(--border); font-size:12px; }.buddy-data-head b,.buddy-data-row b { text-align:right; }.buddy-data-row b { font-weight:600; }
.buddy-trend-card { margin:0 16px; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--card); }.buddy-trend-card>button { width:100%; margin-top:8px; padding:10px; border-top:1px solid var(--border); color:var(--primary); background:transparent; font-size:12px; font-weight:650; }
.buddy-analysis-note { margin:12px 16px 0; padding:14px; border-left:3px solid var(--primary-light); color:var(--text-sub); background:#F2F1F8; }.buddy-analysis-note strong { color:var(--text); font-size:12px; }.buddy-analysis-note p { font-size:11px; line-height:1.7; margin-top:4px; }
.buddy-activity-tools { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 16px 12px; }.buddy-activity-tools button { min-height:40px; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px; border:1px solid var(--border); border-radius:10px; color:var(--primary); background:var(--card); font-size:11px; font-weight:650; }.buddy-activity-tools svg { width:16px; height:16px; }
.buddy-daily-compare { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:10px; padding:0 16px; }.buddy-daily-person { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:15px; background:var(--card); }.buddy-daily-person.is-me { border-color:#D9D8EF; }.buddy-daily-person>header { display:flex; align-items:center; gap:8px; padding:13px; border-bottom:1px solid var(--border); }.buddy-daily-person>header .buddy-avatar { flex:0 0 34px; width:34px; height:34px; border-radius:10px; }.buddy-daily-person>header strong,.buddy-daily-person>header small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.buddy-daily-person>header strong { font-size:13px; }.buddy-daily-person>header small { margin-top:2px; color:var(--text-sub); font-size:9px; }
.buddy-daily-block { padding:13px; border-bottom:1px solid var(--border); }.buddy-daily-block:last-child { border-bottom:0; }.buddy-daily-title { min-height:26px; display:flex; align-items:center; justify-content:space-between; gap:5px; }.buddy-daily-title>div { display:flex; align-items:center; gap:5px; min-width:0; }.buddy-daily-title strong { font-size:12px; white-space:nowrap; }.buddy-daily-title button { flex:0 0 auto; padding:5px 6px; border-radius:7px; color:var(--primary); background:var(--primary-bg); font-size:9px; font-weight:650; }.buddy-daily-title>small { color:var(--text-sub); font-size:9px; }.buddy-daily-title svg { width:15px; height:15px; color:var(--primary); }.buddy-status-dot { width:8px; height:8px; border-radius:50%; background:#C9C9D4; box-shadow:0 0 0 3px #F1F1F5; }.buddy-status-dot.done { background:#E58A78; box-shadow:0 0 0 3px #FCEDEA; }
.buddy-today-stats { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:10px 0; }.buddy-today-stats>div { min-width:0; padding:9px 5px; border-radius:9px; text-align:center; background:#F6F5F9; }.buddy-today-stats b,.buddy-today-stats span { display:block; }.buddy-today-stats b { overflow:hidden; color:var(--text); font-size:17px; text-overflow:ellipsis; }.buddy-today-stats span { margin-top:2px; color:var(--text-sub); font-size:8px; }
.buddy-week-stats { display:grid; grid-template-columns:1fr; gap:3px; padding:8px; border-radius:9px; background:#FBFAFC; color:var(--text-sub); font-size:9px; }.buddy-week-stats span { margin-bottom:2px; font-weight:650; }.buddy-week-stats b { color:var(--text); font-weight:550; }
.buddy-records { margin-top:9px; border-top:1px dashed var(--border); }.buddy-records>div { display:flex; align-items:flex-start; justify-content:space-between; gap:5px; padding:7px 0; border-bottom:1px solid #F0EFF4; font-size:9px; }.buddy-records>div:last-child { border-bottom:0; }.buddy-records span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.buddy-records b { flex:0 0 auto; color:var(--text-sub); font-weight:500; white-space:nowrap; }
.buddy-detail-lock,.buddy-detail-empty { margin-top:9px; padding:8px; border-radius:8px; color:var(--text-sub); background:#F7F6F9; font-size:8px; line-height:1.5; }.buddy-detail-lock svg { width:11px; height:11px; margin-right:3px; vertical-align:-2px; }.buddy-locked-block { min-height:102px; display:flex; align-items:center; gap:9px; padding:13px; border-bottom:1px solid var(--border); color:var(--text-sub); background:#FBFAFC; }.buddy-locked-block:last-child { border-bottom:0; }.buddy-locked-block>span { flex:0 0 31px; width:31px; height:31px; display:grid; place-items:center; border-radius:9px; color:#9292A2; background:#EFEEF3; }.buddy-locked-block svg { width:15px; height:15px; }.buddy-locked-block strong { display:block; color:var(--text); font-size:10px; }.buddy-locked-block p { margin-top:3px; font-size:8px; line-height:1.5; }
.buddy-nutrition { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:9px; }.buddy-nutrition>div { min-width:0; padding:7px 4px; border-radius:8px; background:#FFF8F5; text-align:center; }.buddy-nutrition b,.buddy-nutrition span { display:block; }.buddy-nutrition b { overflow:hidden; color:#A65F51; font-size:13px; text-overflow:ellipsis; }.buddy-nutrition span { margin-top:1px; color:var(--text-sub); font-size:7px; }
.buddy-sharing-list { margin:-3px 0 15px; border-top:1px solid var(--border); }.buddy-sharing-list label { position:relative; min-height:63px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border); cursor:pointer; }.buddy-sharing-list strong,.buddy-sharing-list small { display:block; }.buddy-sharing-list strong { font-size:13px; }.buddy-sharing-list small { margin-top:3px; color:var(--text-sub); font-size:10px; line-height:1.4; }.buddy-sharing-list input { position:absolute; opacity:0; pointer-events:none; }.buddy-sharing-list i { position:relative; flex:0 0 43px; width:43px; height:25px; border-radius:999px; background:#D9D8E0; transition:.2s; }.buddy-sharing-list i:after { content:''; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); transition:.2s; }.buddy-sharing-list input:checked+i { background:var(--primary); }.buddy-sharing-list input:checked+i:after { transform:translateX(18px); }.buddy-sharing-notice { display:flex; gap:8px; margin-bottom:15px; padding:11px; border-radius:10px; color:var(--text-sub); background:#F4F3F8; font-size:10px; line-height:1.55; }.buddy-sharing-notice svg { flex:0 0 17px; width:17px; height:17px; color:var(--primary); }
.buddy-trend-locked { height:100%; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; text-align:center; color:var(--text-sub); }.buddy-trend-locked svg { width:25px; height:25px; margin-bottom:9px; color:var(--primary); }.buddy-trend-locked strong { color:var(--text); font-size:13px; }.buddy-trend-locked p { max-width:260px; margin-top:5px; font-size:10px; line-height:1.65; }
.buddy-summary-callout { margin:12px 16px 4px; padding:15px; display:flex; align-items:center; gap:11px; border:1px solid #DEDDF0; border-radius:14px; background:#F3F2FA; }.buddy-summary-callout>span { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#fff; background:var(--primary); }.buddy-summary-callout>span svg { width:20px; height:20px; }.buddy-summary-callout>div { flex:1; }.buddy-summary-callout strong { font-size:13px; }.buddy-summary-callout p { margin-top:3px; color:var(--text-sub); font-size:10px; line-height:1.5; }.buddy-summary-callout>i { width:17px; height:17px; color:var(--primary); }.buddy-summary-callout>i svg { width:100%; height:100%; }

/* ---- Contextual feedback ---- */
.daily-summary-entry { margin:0 16px 14px; padding:15px; display:flex; align-items:center; gap:11px; border:1px solid #DEDDF0; border-radius:14px; background:linear-gradient(135deg,#F3F2FA,#FFF9F6); }.daily-summary-entry>span { flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--primary-dark); }.daily-summary-entry>span svg { width:21px; height:21px; }.daily-summary-entry>div { flex:1; }.daily-summary-entry strong,.daily-summary-entry small { display:block; }.daily-summary-entry strong { font-size:14px; }.daily-summary-entry small { margin-top:3px; color:var(--text-sub); font-size:10px; line-height:1.5; }.daily-summary-entry>i { width:17px; height:17px; color:var(--primary); }.daily-summary-entry>i svg { width:100%; height:100%; }
.health-insights { margin:0 16px 14px; }.health-insights-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:8px; }.health-insights-head strong { font-size:15px; }.health-insights-head small { color:var(--text-light); font-size:9px; }.health-insight { position:relative; display:flex; align-items:flex-start; gap:10px; margin-bottom:7px; padding:13px; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--card); }.health-insight>i { flex:0 0 8px; width:8px; height:8px; margin-top:5px; border-radius:50%; background:#8C8FD4; }.health-insight>div { flex:1; }.health-insight strong { font-size:12px; }.health-insight p { margin-top:3px; color:var(--text-sub); font-size:10px; line-height:1.6; }.health-insight>span { width:15px; height:15px; color:var(--text-light); }.health-insight>span svg { width:100%; height:100%; }.health-insight.tone-notice>i { background:#E58A78; }.health-insight.tone-care>i { background:#D97706; }.health-insight.tone-positive>i { background:#6F9D8A; }.health-insight.tone-info>i { background:#8C8FD4; }
.feedback-sheet { text-align:center; }.feedback-mark { width:48px; height:48px; margin:0 auto 12px; display:grid; place-items:center; border-radius:15px; background:#F1F0F8; }.feedback-mark i { width:11px; height:11px; border-radius:50%; background:#8C8FD4; }.feedback-mark.tone-notice i { background:#E58A78; }.feedback-mark.tone-care i { background:#D97706; }.feedback-mark.tone-positive i { background:#6F9D8A; }.feedback-message { margin:-5px auto 20px; max-width:330px; color:var(--text-sub); font-size:13px; line-height:1.75; }.apple-metric-card { background:#FBFBFC; }.apple-metric-grid { display:grid; grid-template-columns:repeat(3,1fr); }.apple-metric-grid>div { text-align:center; border-right:1px solid var(--border); }.apple-metric-grid>div:last-child { border-right:0; }.apple-metric-grid b,.apple-metric-grid span { display:block; }.apple-metric-grid b { font-size:19px; }.apple-metric-grid span { margin-top:2px; color:var(--text-sub); font-size:9px; }

/* ---- Daily summary ---- */
.summary-hero { padding:27px 20px 23px; border-bottom:1px solid var(--border); background:var(--card); }.summary-hero>span { color:var(--primary); font-size:10px; font-weight:700; letter-spacing:.14em; }.summary-hero h2 { margin:7px 0; font-size:22px; }.summary-hero p { color:var(--text-sub); font-size:11px; line-height:1.75; }.summary-mode-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:12px 16px; }.summary-mode-tabs button { padding:10px; border-radius:9px; color:var(--text-sub); background:#ECEBF1; font-size:12px; font-weight:650; }.summary-mode-tabs button.active { color:#fff; background:var(--primary-dark); }
.summary-unavailable { display:flex; gap:10px; margin:0 16px 11px; padding:13px; border:1px solid #E5DCCB; border-radius:12px; color:#725B3C; background:#FFFAF0; }.summary-unavailable>svg { flex:0 0 20px; width:20px; height:20px; }.summary-unavailable strong { font-size:12px; }.summary-unavailable p { margin-top:3px; font-size:10px; line-height:1.55; }
.summary-create-panel { display:none; }.summary-create-panel.active { display:block; }.summary-create-card { margin:0 16px 15px; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--card); }.summary-create-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--primary); }.summary-create-icon.buddy { background:#E58A78; }.summary-create-icon svg { width:22px; height:22px; }.summary-create-card>div>strong { display:block; margin-top:11px; font-size:15px; }.summary-create-card>div>p { margin:4px 0 14px; color:var(--text-sub); font-size:10px; line-height:1.65; }.summary-create-card>.btn { margin-top:13px; }
.summary-friend-list { display:flex; flex-direction:column; gap:7px; margin-top:12px; }.summary-friend-list label { position:relative; display:flex; align-items:center; gap:9px; padding:10px; border:1px solid var(--border); border-radius:10px; background:#FAFAFC; }.summary-friend-list label.disabled { opacity:.58; }.summary-friend-list input { position:absolute; opacity:0; }.summary-friend-list label>div { flex:1; }.summary-friend-list strong,.summary-friend-list small { display:block; }.summary-friend-list strong { font-size:12px; }.summary-friend-list small { margin-top:2px; color:var(--text-sub); font-size:9px; }.summary-friend-list label>i { width:20px; height:20px; border:1.5px solid #C6C5CF; border-radius:6px; background:#fff; }.summary-friend-list input:checked~i { border-color:var(--primary); background:var(--primary); box-shadow:inset 0 0 0 4px #fff; }.summary-no-friend { padding:15px; color:var(--text-sub); text-align:center; font-size:11px; }
.summary-history { padding:0 16px 24px; }.summary-history-head { display:flex; align-items:end; justify-content:space-between; margin:18px 0 9px; }.summary-history-head strong { font-size:17px; }.summary-history-head small { color:var(--text-light); font-size:9px; }.summary-empty { padding:24px 15px; border:1px dashed #CCCBD5; border-radius:13px; color:var(--text-sub); text-align:center; background:var(--card); font-size:11px; line-height:1.7; }.summary-result { margin-bottom:11px; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--card); }.summary-result header { display:flex; align-items:center; gap:9px; padding-bottom:11px; border-bottom:1px solid var(--border); }.summary-result header>span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--primary); background:var(--primary-bg); }.summary-result header svg { width:18px; height:18px; }.summary-result header strong,.summary-result header small { display:block; }.summary-result header strong { font-size:13px; }.summary-result header small { margin-top:2px; color:var(--text-sub); font-size:9px; }.summary-content { padding-top:12px; color:#4D4E60; font-size:12px; line-height:1.85; }

/* ---- Apple Health import ---- */
.import-hero { display:flex; gap:14px; padding:25px 20px; border-bottom:1px solid var(--border); background:var(--card); }.import-apple { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border-radius:14px; color:#fff; background:#24252F; font-size:25px; }.import-hero small { color:var(--primary); font-size:10px; }.import-hero h2 { margin:3px 0 6px; font-size:21px; }.import-hero p { color:var(--text-sub); font-size:10px; line-height:1.65; }.import-guide { margin:14px 16px; padding:15px; border-radius:13px; background:#F0EFF5; }.import-guide strong { font-size:13px; }.import-guide ol { padding-left:20px; margin:8px 0; color:var(--text); font-size:11px; line-height:1.9; }.import-guide p { padding-top:8px; border-top:1px solid #DEDEE6; color:var(--text-sub); font-size:9px; line-height:1.55; }
.import-picker { margin:0 16px 18px; padding:15px; border:1px solid var(--border); border-radius:14px; background:var(--card); }.import-picker input { position:absolute; width:1px; height:1px; opacity:0; }.import-picker label { min-height:105px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #BBBAC8; border-radius:11px; color:var(--primary); background:#FAF9FC; cursor:pointer; }.import-picker label>span { width:25px; height:25px; margin-bottom:7px; }.import-picker label svg { width:100%; height:100%; }.import-picker label strong { max-width:280px; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.import-picker label small { margin-top:3px; color:var(--text-light); font-size:9px; }.import-picker .btn { margin-top:11px; }.import-history { padding:0 16px 25px; }.import-history article { margin-bottom:8px; padding:13px; display:grid; grid-template-columns:1fr auto; gap:5px 10px; border:1px solid var(--border); border-radius:12px; background:var(--card); }.import-history strong,.import-history small { display:block; }.import-history strong { max-width:230px; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.import-history small { margin-top:2px; color:var(--text-light); font-size:8px; }.import-history article>span { color:var(--primary); font-size:10px; font-weight:650; }.import-history article>p { grid-column:1/-1; color:var(--text-sub); font-size:9px; line-height:1.5; }

/* ---- Analysis / open-source charts ---- */
.chart-wrap { width:100%; overflow:hidden; }.chart-canvas { width:100%; height:210px; }.chart-canvas.chart-large { height:250px; }.chart-empty { height:100%; min-height:180px; display:grid; place-items:center; color:var(--text-light); font-size:12px; }
.analysis-card { padding:16px 14px; }.report-intro { padding:30px 20px 22px; background:var(--card); border-bottom:1px solid var(--border); }.report-intro>span { color:var(--primary); font-size:11px; font-weight:650; letter-spacing:.08em; }.report-intro h2 { font-size:23px; margin:7px 0; }.report-intro p { color:var(--text-sub); font-size:12px; line-height:1.7; }

/* ---- Flatpickr local theme ---- */
.flatpickr-calendar { width:310px; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:var(--shadow-lg); font-family:inherit; overflow:hidden; }
.flatpickr-months { padding:8px 6px 3px; }.flatpickr-months .flatpickr-month { color:var(--text); fill:var(--text); }.flatpickr-current-month { font-size:14px; }.flatpickr-weekdays { background:#F4F3F8; }.flatpickr-weekday { color:var(--text-sub)!important; font-weight:500!important; }.flatpickr-day { border-radius:9px; color:var(--text); }.flatpickr-day.today { border-color:var(--primary-light); }.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange { border-color:var(--primary-dark); background:var(--primary-dark); }.flatpickr-day:hover { border-color:var(--primary-bg); background:var(--primary-bg); }.flatpickr-input[readonly] { background:var(--card); }

@media (max-width: 360px) {
  .guest-hero { padding-left:18px; padding-right:18px; }
  .guest-tool-grid { gap:8px; padding:0 12px; }
  .guest-tool { padding:14px; min-height:132px; }
  .guest-library-controls { grid-template-columns:1fr; }
  .guest-sticky-action { bottom:78px; }
  .buddy-hero { padding-left:16px; padding-right:16px; }
  .buddy-week { grid-template-columns:1fr; gap:4px; }
  .buddy-form-grid { grid-template-columns:1fr; gap:0; }
  .buddy-daily-compare { gap:7px; padding-left:10px; padding-right:10px; }
  .buddy-daily-block,.buddy-daily-person>header { padding:10px; }
}

/* ---- Onboarding ---- */
.onboard-page { padding: 20px 16px; }
.onboard-page h2 { font-size: 22px; margin-bottom: 4px; }
.onboard-page .desc { color: var(--text-sub); font-size: 14px; margin-bottom: 24px; }
.gender-pick { display: flex; gap: 12px; }
.gender-pick .opt { flex: 1; padding: 16px; border: 2px solid var(--border); border-radius: var(--radius); text-align: center; font-size: 15px; }
.gender-pick .opt.active { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); }
.activity-options { display: flex; flex-direction: column; gap: 8px; }
.activity-opt { padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; }
.activity-opt.active { border-color: var(--primary); background: var(--primary-bg); }
.activity-opt .label { font-size: 14px; font-weight: 500; }
.activity-opt .desc { font-size: 12px; color: var(--text-sub); }

/* ---- Modal ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(39,40,58,.42); z-index: 200; display: flex; align-items: flex-end; justify-content: center; backdrop-filter:blur(3px); }
.modal-sheet { background: var(--card); width: 100%; max-width: 520px; border-radius: 18px 18px 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); max-height: 88vh; overflow-y: auto; box-shadow:0 -12px 34px rgba(39,40,58,.12); }
.modal-sheet .sheet-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; text-align: center; }
.modal-sheet .sheet-close { position:absolute; top:12px; right:12px; z-index:2; width:32px; height:32px; display:grid; place-items:center; border-radius:10px; color:var(--text-sub); background:transparent; cursor:pointer; }
.modal-sheet .sheet-close svg { width:20px; height:20px; }
.modal-sheet .sheet-close:active { color:var(--text); background:var(--primary-bg); transform:scale(.96); }

/* ---- Toast ---- */
.toast { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; z-index: 300; animation: toastIn .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ---- Loading ---- */
.loading { text-align: center; padding: 40px; color: var(--text-sub); }
.spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 40px 16px; color: var(--text-sub); }
.empty svg { width: 48px; height: 48px; color: var(--text-light); margin-bottom: 8px; }

/* ---- Tag ---- */
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; }
.tag-primary { background: var(--primary-bg); color: var(--primary); }
.tag-warn { background: var(--warn-bg); color: var(--warn); }
.tag-info { background: var(--info-bg); color: var(--info); }
.tag-danger { background: var(--danger-bg); color: var(--danger); }

/* ---- Tabs ---- */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.tab { flex: 1; text-align: center; padding: 10px 0; font-size: 14px; color: var(--text-sub); border-bottom: 2px solid transparent; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }

/* ---- Progress bar ---- */
.progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress-bar .fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width .3s; }

/* ---- Misc ---- */
.text-center { text-align: center; }
.text-sub { color: var(--text-sub); }
.text-danger { color: var(--danger); }
.text-primary { color: var(--primary); }
.text-warn { color: var(--warn); }
.fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; } .fs-16 { font-size: 16px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; }
.flex { display: flex; } .flex-1 { flex: 1; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
::-webkit-scrollbar { width: 0; }