:root {
  --bg: #f6f1e7;
  --surface: #fffdf7;
  --surface-2: #f1eadc;
  --surface-3: #e8f0e7;
  --text: #373732;
  --muted: #77746c;
  --line: #ded6c7;
  --brand: #557b68;
  --brand-dark: #3f6252;
  --brand-soft: #dfeadf;
  --coral: #d87762;
  --coral-soft: #f4ddd6;
  --sun: #e2b85d;
  --sun-soft: #f5e8bd;
  --blue: #7597a5;
  --blue-soft: #e0eaed;
  --danger: #ae5a4f;
  --shadow: 0 12px 30px rgba(78, 68, 50, .08);
  --radius: 22px;
  --font-size: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: ui-rounded, "SF Pro Rounded", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; background: #ebe5da; color: var(--text); font-size: var(--font-size); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .65; }
.visually-hidden { position: fixed; left: -9999px; opacity: 0; pointer-events: none; }
.app-shell { width: min(100%, 590px); min-height: 100vh; margin: 0 auto; background: var(--bg); padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.console-shell { width: min(100%, 1220px); min-height: 100vh; margin: 0 auto; background: var(--bg); }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 11px 16px; background: rgba(246,241,231,.95); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(210,201,184,.75); }
.brand-button { border: 0; background: transparent; color: inherit; text-align: left; }
.brand-wrap { display: flex; align-items: center; gap: 10px; padding: 0; }
.brand-mark { position: relative; width: 42px; height: 42px; border-radius: 16px 16px 20px 20px; background: var(--sun); display: grid; place-items: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,.04); }
.brand-mark::before { content: ""; position: absolute; width: 15px; height: 10px; border-radius: 80% 10% 80% 10%; background: var(--coral); top: -4px; right: 3px; transform: rotate(-28deg); }
.brand-face { font-size: 12px; font-weight: 900; letter-spacing: -1px; color: #4d463b; margin-top: 4px; }
.brand-title { display: block; font-size: 15px; font-weight: 900; line-height: 1.1; }
.brand-subtitle { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { position: relative; width: 41px; height: 41px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.bell.has-dot::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); right: 7px; top: 7px; border: 2px solid var(--surface); }
.role-chip { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; min-height: 41px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12px; }
.role-dot { width: 8px; height: 8px; background: var(--brand); border-radius: 50%; }
.content { padding: 18px 16px 34px; }
.console-content { padding: 26px 28px 50px; }
h1,h2,h3,p { margin-top: 0; }
h1 { letter-spacing: -.035em; }
h2 { letter-spacing: -.02em; }
p { line-height: 1.65; }
.eyebrow, .section-kicker { display: block; color: var(--brand-dark); font-size: 10px; letter-spacing: .12em; font-weight: 900; text-transform: uppercase; }
.section-kicker { margin-bottom: 4px; }
.today-hero { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; padding: 10px 2px 16px; }
.today-hero h1 { margin: 5px 0 7px; font-size: clamp(27px,7vw,34px); line-height: 1.12; }
.today-hero p { margin: 0; color: var(--muted); font-size: 13px; }
.speak-btn { white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--brand-dark); border-radius: 14px; padding: 10px 12px; font-weight: 800; font-size: 12px; }
.companion-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: center; background: linear-gradient(135deg,#e6efe5,#f7e5c7); border: 1px solid #d8d5c4; border-radius: 26px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 22px; }
.companion-card::after { content:""; position:absolute; width:130px; height:130px; border:24px solid rgba(255,255,255,.25); border-radius:50%; right:-45px; top:-45px; }
.companion { position: relative; width: 82px; height: 92px; border-radius: 48% 48% 44% 44% / 44% 44% 55% 55%; background: var(--sun); transform: rotate(-2deg); box-shadow: inset 0 -7px 0 rgba(126,92,37,.05), 0 10px 24px rgba(94,72,39,.1); }
.companion-leaf { position:absolute; width:30px; height:18px; border-radius:90% 8% 90% 8%; background:var(--coral); top:-9px; right:2px; transform:rotate(-25deg); }
.companion .eye { position:absolute; width:6px; height:8px; border-radius:50%; background:#4b453b; top:39px; }
.companion .e1 { left:25px; }.companion .e2 { right:25px; }
.companion .mouth { position:absolute; width:18px; height:9px; border-bottom:3px solid #4b453b; border-radius:0 0 20px 20px; left:32px; top:55px; }
.companion.mood-happy { transform: rotate(2deg) translateY(-2px); }
.companion-copy { position: relative; z-index: 2; }
.mini-label { color: var(--brand-dark); font-size: 11px; font-weight: 900; }
.companion-copy h2 { margin: 4px 0 5px; font-size: 20px; }
.companion-copy p { margin: 0; font-size: 13px; color: #5d5a52; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 2px 10px; }
.section-head.compact { margin: 0 0 12px; }
.section-head h2 { margin: 0; font-size: 20px; }
.soft-count { color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; padding: 6px 9px; font-size: 11px; font-weight: 900; }
.text-btn { border: 0; background: transparent; color: var(--brand-dark); padding: 5px 0; font-size: 12px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.meal-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; }
.meal-slot { min-width: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 17px; padding: 10px 4px; min-height: 94px; color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; box-shadow: 0 5px 14px rgba(78,68,50,.04); }
.meal-slot.done { background: #eef4eb; border-color: #bdceb9; }
.meal-icon { display:grid; place-items:center; width: 32px; height: 32px; border-radius: 12px; background: var(--sun-soft); color: #6b5527; font-size: 17px; font-weight: 900; }
.meal-slot.done .meal-icon { background: var(--brand); color:white; }
.meal-slot strong { font-size: 12px; }
.meal-slot small { width: 100%; color: var(--muted); font-size: 9px; line-height: 1.25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.goal-list { display: grid; gap: 9px; }
.goal-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--line); background: var(--surface); border-radius: 18px; padding: 13px 14px; }
.goal-card.complete { background: #edf3ea; border-color: #c6d4c1; }
.goal-check { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--brand); background: white; font-weight: 900; }
.goal-card.complete .goal-check { background: var(--brand); color: white; border-color: var(--brand); }
.goal-copy { min-width: 0; }
.goal-source { color: var(--muted); font-size: 10px; margin-bottom: 2px; }
.goal-copy strong { display:block; font-size: 13px; }
.goal-copy small { display:block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.goal-progress { height: 5px; background: #e8e2d7; border-radius: 999px; overflow: hidden; margin-top: 7px; }
.goal-progress span { display:block; height:100%; border-radius:inherit; background:var(--brand); }
.mini-btn { border: 1px solid var(--line); background: white; color: var(--brand-dark); border-radius: 11px; padding: 7px 9px; font-size: 11px; font-weight: 900; }
.water-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 15px; padding: 17px; border-radius: 22px; background: var(--blue-soft); border: 1px solid #cbdade; }
.water-card h2 { margin: 3px 0 5px; font-size: 20px; }
.water-card p { margin:0; color:#62747a; font-size:12px; }
.water-action { display:flex; align-items:center; gap:10px; }
.water-ring { --p:0%; width: 62px; height:62px; border-radius:50%; display:grid; place-items:center; background: conic-gradient(var(--blue) var(--p), rgba(255,255,255,.8) 0); position:relative; }
.water-ring::after { content:""; position:absolute; inset:7px; background:var(--blue-soft); border-radius:50%; }
.water-ring span { position:relative; z-index:2; font-size:11px; font-weight:900; color:#4c6771; }
.btn { border:0; border-radius:14px; padding:11px 15px; font-weight:900; min-height:41px; }
.btn.primary { background: var(--brand); color:white; }
.btn.soft { background: var(--surface); color: var(--brand-dark); border:1px solid rgba(85,123,104,.22); }
.btn.ghost { background:transparent; color:var(--brand-dark); border:1px solid var(--line); }
.btn.full { width:100%; }
.coach-message { display:grid; grid-template-columns:44px 1fr; gap:11px; margin-top:15px; border-radius:22px; padding:15px; background:var(--surface); border:1px solid var(--line); }
.coach-message.unread { border-color:#c5d3bd; box-shadow:0 0 0 3px rgba(85,123,104,.06); }
.coach-avatar { width:44px; height:44px; border-radius:15px; display:grid; place-items:center; background:var(--brand); color:white; font-weight:900; }
.coach-meta { color:var(--muted); font-size:10px; font-weight:700; }
.coach-copy p { margin:4px 0 2px; font-size:13px; }
.challenge-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; margin-top:15px; padding:16px; border-radius:22px; border:1px solid #dfcf9f; background:var(--sun-soft); }
.challenge-icon { width:47px; height:47px; border-radius:16px; display:grid; place-items:center; background:var(--surface); color:#aa802d; font-size:25px; }
.challenge-card h2 { margin:2px 0 4px; font-size:17px; }
.challenge-card p { margin:0; font-size:11px; color:#74633f; }
.challenge-progress { margin-top:5px; font-size:10px; font-weight:900; color:#856a32; }
.today-footer-note { margin:20px 3px 0; padding:13px 15px; border-radius:16px; background:#eee8dc; color:#6e6a62; font-size:11px; line-height:1.6; }
.page-heading { padding: 8px 2px 14px; }
.page-heading h1 { margin:4px 0 6px; font-size:30px; }
.page-heading p { margin:0; color:var(--muted); font-size:13px; }
.tabs { display:flex; gap:7px; overflow-x:auto; padding:2px 0 14px; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { white-space:nowrap; border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:999px; padding:9px 13px; font-size:12px; font-weight:900; }
.tab.active { background:var(--brand); color:white; border-color:var(--brand); }
.panel-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 2px 14px; }
.panel-toolbar strong { font-size:24px; }
.panel-toolbar span { color:var(--muted); font-size:12px; }
.timeline { display:grid; gap:16px; }
.timeline-day { display:grid; gap:8px; }
.timeline-date { display:flex; align-items:center; justify-content:space-between; padding:0 2px; }
.timeline-date strong { font-size:13px; }.timeline-date span { color:var(--muted); font-size:11px; }
.meal-record { display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:12px; }
.meal-record-icon { width:38px; height:38px; border-radius:13px; display:grid; place-items:center; background:var(--sun-soft); }
.meal-record-top { display:flex; justify-content:space-between; gap:8px; }.meal-record-top small { color:var(--muted); }
.meal-record p { margin:4px 0 7px; font-size:12px; }
.tag-row { display:flex; flex-wrap:wrap; gap:5px; }
.food-tag { padding:4px 7px; border-radius:999px; background:var(--surface-2); color:#655e51; font-size:9px; font-weight:800; }
.meal-thumb { width:100%; max-height:240px; object-fit:cover; border-radius:13px; margin-top:9px; }
.card, .console-card, .metric-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:17px; box-shadow:var(--shadow); }
.card { margin-bottom:13px; }
.week-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.week-day { min-width:0; display:flex; flex-direction:column; gap:4px; align-items:center; padding:9px 2px; border-radius:13px; background:var(--surface-2); }
.week-day.today { outline:2px solid var(--brand); }
.week-day small { color:var(--muted); font-size:8px; }.week-day strong { font-size:12px; }.week-day span { color:var(--muted); font-size:8px; }
.rule-note { margin:13px 0 0; padding:12px 14px; border-radius:14px; background:#f1ede4; color:#69655c; font-size:11px; line-height:1.6; }
.muted { color:var(--muted); font-size:12px; line-height:1.65; }
.health-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:13px 0; }
.health-metric { background:var(--surface-2); border-radius:15px; padding:12px; text-align:center; }.health-metric span { display:block; color:var(--muted); font-size:10px; }.health-metric strong { font-size:22px; }.health-metric small { color:var(--muted); }
.button-row { display:flex; gap:8px; flex-wrap:wrap; }
.chart-wrap { height:185px; }.chart-wrap svg { width:100%; height:100%; overflow:visible; }
.chart-grid-line { stroke:#e6ded1; stroke-width:1; }.chart-line-path { fill:none; stroke:var(--brand); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }.chart-dot { fill:var(--surface); stroke:var(--brand); stroke-width:3; }
.photo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.photo-card { margin:0; border-radius:18px; overflow:hidden; background:var(--surface); border:1px solid var(--line); }.photo-card img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }.photo-card figcaption { padding:8px 10px; font-size:10px; color:var(--muted); }
.collection-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.reward-card { min-height:170px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; border-radius:20px; padding:16px; border:1px solid var(--line); background:var(--surface); }
.reward-card.locked { background:#efebe2; color:#888177; }.reward-card.unlocked { border-color:#c9d4bd; background:#f1f5ec; }
.reward-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:white; font-size:26px; box-shadow:0 4px 12px rgba(0,0,0,.04); }
.reward-card strong { font-size:14px; }.reward-card small { color:var(--muted); font-size:10px; line-height:1.45; }.reward-card span { margin-top:4px; font-size:9px; font-weight:900; color:var(--brand-dark); }
.rule-box { margin-top:14px; border:1px dashed #cbbf9e; background:#fbf5e2; border-radius:18px; padding:15px; color:#6f6242; font-size:12px; }
.rule-box ul { padding-left:20px; margin:8px 0 0; line-height:1.8; }.rule-box p { margin:7px 0 0; }
.campaign-card { border:1px solid #d3c493; background:linear-gradient(145deg,#fff9e9,#f2e4b9); border-radius:24px; padding:19px; }.campaign-card h2 { margin:4px 0 6px; }.campaign-card p { font-size:12px; }.campaign-meter { height:12px; background:rgba(255,255,255,.7); border-radius:999px; overflow:hidden; margin:15px 0 7px; }.campaign-meter span { display:block; height:100%; background:var(--sun); border-radius:inherit; }
.status-pill { display:inline-flex; align-items:center; width:max-content; border-radius:999px; padding:5px 8px; background:var(--surface-2); color:#6f6b62; font-size:9px; font-weight:900; }.status-pill.on { background:var(--brand-soft); color:var(--brand-dark); }.status-pill.off { background:#ece8e0; color:#8b867d; }
.chip-row { display:flex; gap:6px; overflow-x:auto; padding-bottom:10px; }.content-chip { white-space:nowrap; border-radius:999px; padding:6px 9px; background:var(--brand-soft); color:var(--brand-dark); font-size:10px; font-weight:800; }
.content-list { display:grid; gap:10px; }.content-card { display:grid; grid-template-columns:52px minmax(0,1fr); gap:13px; align-items:start; border:1px solid var(--line); border-radius:20px; padding:14px; background:var(--surface); }.content-type { width:52px; height:52px; border-radius:17px; display:grid; place-items:center; background:var(--coral-soft); color:var(--coral); font-size:24px; }.content-card h2 { margin:2px 0 5px; font-size:16px; }.content-card p { margin:0; color:var(--muted); font-size:11px; }
.profile-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:15px; margin-bottom:12px; }.profile-avatar { width:52px; height:52px; border-radius:18px; display:grid; place-items:center; background:var(--sun); color:#4b4438; font-weight:900; font-size:20px; }.profile-avatar.small { width:44px; height:44px; border-radius:14px; }.profile-card h2 { margin:0 0 2px; font-size:17px; }.profile-card p { margin:0; color:var(--muted); font-size:10px; }
.mode-options { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.mode-option { text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:15px; padding:11px; color:var(--text); }.mode-option.selected { border-color:var(--brand); background:var(--brand-soft); }.mode-option strong,.mode-option small { display:block; }.mode-option small { margin-top:3px; color:var(--muted); font-size:9px; }
.info-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; }.info-row:last-child { border-bottom:0; }.info-row > div strong,.info-row > div small { display:block; }.info-row > div small { color:var(--muted); margin-top:2px; }
.toggle { width:46px; height:27px; padding:3px; border:0; border-radius:999px; background:#d8d3ca; }.toggle span { display:block; width:21px; height:21px; border-radius:50%; background:white; transition:.2s; box-shadow:0 1px 4px rgba(0,0,0,.15); }.toggle.on { background:var(--brand); }.toggle.on span { transform:translateX(19px); }
.bottom-nav { position:fixed; z-index:35; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,590px); display:grid; grid-template-columns:repeat(5,1fr); padding:7px 5px calc(8px + env(safe-area-inset-bottom)); background:rgba(255,253,247,.96); backdrop-filter:blur(16px); border-top:1px solid var(--line); }
.nav-btn { border:0; background:transparent; color:#8b867c; min-height:55px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:10px; font-weight:800; }.nav-icon { font-size:21px; line-height:1; }.nav-btn.active { color:var(--brand-dark); }.nav-btn.active .nav-icon { transform:translateY(-1px); }
.empty { border:1px dashed var(--line); background:rgba(255,255,255,.35); border-radius:17px; padding:24px 14px; text-align:center; color:var(--muted); font-size:12px; }
.toast { position:fixed; z-index:100; left:50%; transform:translateX(-50%); bottom:100px; max-width:min(90vw,460px); background:#3f4a40; color:white; border-radius:13px; padding:11px 14px; font-size:12px; box-shadow:0 12px 30px rgba(0,0,0,.2); text-align:center; }
.modal-backdrop { position:fixed; z-index:80; inset:0; display:grid; align-items:end; background:rgba(48,44,36,.42); backdrop-filter:blur(2px); }
.modal { width:min(590px,100%); max-height:91vh; overflow:auto; margin:0 auto; background:var(--bg); border-radius:26px 26px 0 0; padding:19px 16px calc(24px + env(safe-area-inset-bottom)); box-shadow:0 -18px 50px rgba(0,0,0,.18); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }.modal-head h2 { margin:2px 0 0; font-size:20px; }.modal-close { width:38px; height:38px; border-radius:13px; border:1px solid var(--line); background:var(--surface); font-size:23px; color:var(--text); }
.form-grid { display:grid; gap:12px; }.field > span { display:block; margin-bottom:6px; color:var(--muted); font-size:11px; font-weight:900; }.field input,.field select,.field textarea { width:100%; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:13px; padding:11px 12px; outline:none; }.field textarea { min-height:90px; resize:vertical; }.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(85,123,104,.1); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.check-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.check-chip { position:relative; display:block; cursor:pointer; }.check-chip input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }.check-chip span { display:block; text-align:center; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:9px 4px; font-size:10px; font-weight:800; }.check-chip input:checked + span { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-dark); }.check-line { font-size:12px; color:var(--text); }
.photo-picker { display:grid; gap:8px; }.photo-preview { min-height:94px; display:grid; place-items:center; border:1px dashed var(--line); border-radius:15px; background:#eee9df; color:var(--muted); padding:12px; font-size:11px; text-align:center; overflow:hidden; }.photo-preview.has-photo { padding:0; }.photo-preview img { width:100%; max-height:280px; object-fit:cover; }.form-note { margin:0; color:var(--muted); font-size:10px; text-align:center; }
.role-select { display:grid; gap:9px; }.role-option { display:grid; grid-template-columns:48px 1fr; gap:12px; align-items:center; text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:17px; padding:12px; color:var(--text); }.role-option.selected { border-color:var(--brand); background:var(--brand-soft); }.role-big-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:var(--sun-soft); font-size:22px; }.role-option strong,.role-option small { display:block; }.role-option small { margin-top:3px; color:var(--muted); font-size:10px; }
.message-thread { display:grid; gap:9px; }.thread-msg { width:85%; border-radius:16px; padding:10px 12px; }.thread-msg.coach { justify-self:start; background:var(--brand-soft); }.thread-msg.member { justify-self:end; background:var(--sun-soft); }.thread-msg small { color:var(--muted); font-size:9px; }.thread-msg p { margin:3px 0 0; font-size:12px; }
.article-view .article-lead { margin:12px 0; font-size:16px; font-weight:800; line-height:1.6; }.article-body { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:15px; line-height:1.9; font-size:13px; }
.cloud-status { display:grid; gap:8px; }.status-line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); font-size:12px; }.status-line strong { color:#8b6c48; }.status-line .ok { color:var(--brand-dark); }
.console-header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }.console-header h1 { margin:4px 0 6px; font-size:34px; }.console-header p { margin:0; color:var(--muted); font-size:13px; }
.console-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; align-items:start; }.member-sidebar { position:sticky; top:92px; background:var(--surface); border:1px solid var(--line); border-radius:21px; padding:12px; }.sidebar-head { display:flex; justify-content:space-between; padding:4px 5px 10px; font-size:12px; }.sidebar-head span { color:var(--muted); }.member-list { display:grid; gap:5px; }.member-row { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:9px; align-items:center; text-align:left; border:0; background:transparent; border-radius:14px; padding:8px; color:var(--text); }.member-row.active { background:var(--brand-soft); }.member-avatar { width:38px; height:38px; border-radius:13px; display:grid; place-items:center; background:var(--surface-2); color:var(--brand-dark); font-weight:900; }.member-row-copy strong,.member-row-copy small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.member-row-copy strong { font-size:11px; }.member-row-copy small { margin-top:2px; color:var(--muted); font-size:8px; }.notification-dot { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--coral); color:white; font-size:8px; }
.selected-member { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:11px; align-items:center; margin-bottom:12px; }.selected-member h2 { margin:0; font-size:20px; }.selected-member p { margin:2px 0 0; color:var(--muted); font-size:11px; }.console-tabs { padding-bottom:12px; }
.console-main { min-width:0; }.console-card { margin-bottom:12px; }.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }.kpi-grid.three { grid-template-columns:repeat(3,1fr); }.kpi { border:1px solid var(--line); border-radius:17px; padding:14px; background:var(--surface); }.kpi span,.kpi strong,.kpi small { display:block; }.kpi span { color:var(--muted); font-size:10px; }.kpi strong { margin:4px 0 2px; font-size:26px; }.kpi small { color:var(--muted); font-size:9px; }
.task-table,.cms-list,.admin-member-table { display:grid; gap:7px; }.task-row,.cms-row,.admin-member-row { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:15px; padding:11px 12px; }.task-row > div:first-child,.cms-row > div:first-child { display:grid; gap:4px; }.task-row strong,.cms-row strong { font-size:12px; }.task-row small,.cms-row small,.admin-member-row small { color:var(--muted); font-size:9px; }.plain-list { margin:0; padding-left:20px; line-height:1.9; font-size:12px; }
.bar-chart { height:220px; display:flex; align-items:end; gap:5px; padding:20px 0 4px; border-bottom:1px solid var(--line); }.bar-col { flex:1; height:100%; min-width:0; display:grid; grid-template-rows:18px 1fr 18px; align-items:end; justify-items:center; }.bar { width:72%; min-height:4px; max-width:26px; border-radius:7px 7px 2px 2px; background:var(--brand); }.bar-value { font-size:8px; color:var(--muted); }.bar-col small { font-size:7px; color:var(--muted); transform:rotate(-40deg); transform-origin:center; white-space:nowrap; }
.consult-note { border-left:3px solid var(--brand); padding:7px 0 7px 12px; margin:9px 0; }.consult-note strong,.consult-note small { display:block; }.consult-note small { color:var(--muted); font-size:9px; }.consult-note p { margin:4px 0 0; font-size:11px; }
.metrics-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; }.metric-panel:nth-child(3) { grid-column:1/-1; }.metric-panel h2 { margin:4px 0 14px; }.metric-big { display:flex; align-items:baseline; gap:7px; }.metric-big strong { font-size:48px; }.metric-big span { color:var(--muted); font-size:11px; }.metric-panel p { color:var(--muted); font-size:10px; margin:5px 0 0; }.progress-stat { margin:12px 0; }.progress-stat > div:first-child { display:flex; justify-content:space-between; gap:10px; font-size:11px; margin-bottom:5px; }.progress { height:9px; background:#ebe6dc; border-radius:999px; overflow:hidden; }.progress span { display:block; height:100%; background:var(--brand); border-radius:inherit; }
.source-bars { display:grid; gap:10px; }.source-bars > div { display:grid; grid-template-columns:110px 1fr 30px; align-items:center; gap:10px; font-size:10px; }.admin-member-row > div strong,.admin-member-row > div small { display:block; }.role-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.role-grid > div { border:1px solid var(--line); border-radius:16px; padding:13px; }.role-grid p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.audit-list { display:grid; gap:5px; }.audit-list > div { display:grid; grid-template-columns:120px 75px minmax(0,1fr); gap:8px; padding:7px 0; border-bottom:1px solid var(--line); font-size:10px; }.audit-list small { color:var(--muted); }
@media (max-width: 780px) {
  .console-content { padding:18px 14px 38px; }
  .console-header { align-items:flex-start; flex-direction:column; }
  .console-header h1 { font-size:28px; }
  .console-layout { grid-template-columns:1fr; }
  .member-sidebar { position:static; overflow-x:auto; }
  .member-list { display:flex; min-width:max-content; }
  .member-row { width:180px; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .metrics-grid { grid-template-columns:1fr; }.metric-panel:nth-child(3){grid-column:auto;}
  .role-grid { grid-template-columns:1fr; }
}
@media (max-width: 430px) {
  .content { padding-left:12px; padding-right:12px; }
  .topbar { padding-left:12px; padding-right:12px; }
  .brand-subtitle { display:none; }
  .meal-strip { gap:5px; }.meal-slot { min-height:88px; padding:8px 2px; }.meal-slot small { font-size:8px; }
  .companion-card { grid-template-columns:84px 1fr; padding:15px; }.companion { width:72px; height:82px; }.companion .eye { top:35px; }.companion .e1{left:22px}.companion .e2{right:22px}.companion .mouth{left:28px;top:50px}.companion-copy h2{font-size:18px}
  .water-card { align-items:flex-start; }.water-action { flex-direction:column; }
  .challenge-card { grid-template-columns:auto 1fr; }.challenge-card .btn { grid-column:1/-1; width:100%; }
  .week-day span { display:none; }
  .health-grid { grid-template-columns:1fr 1fr; }.health-metric:last-child { grid-column:1/-1; }
  .profile-card { grid-template-columns:auto 1fr; }.profile-card .btn { grid-column:1/-1; width:100%; }
  .check-grid { grid-template-columns:repeat(2,1fr); }
  .collection-grid { grid-template-columns:1fr 1fr; }
  .selected-member { grid-template-columns:auto 1fr; }.selected-member .status-pill { grid-column:1/-1; }
  .kpi-grid,.kpi-grid.three { grid-template-columns:1fr 1fr; }
  .source-bars > div { grid-template-columns:80px 1fr 24px; }
  .audit-list > div { grid-template-columns:1fr; gap:2px; }
}
body.mode-clear { --font-size: 18px; }
body.mode-clear .app-shell { max-width:660px; }
body.mode-clear .content { padding-left:20px; padding-right:20px; }
body.mode-clear .brand-title { font-size:18px; }
body.mode-clear .brand-subtitle { font-size:13px; }
body.mode-clear .today-hero h1 { font-size:36px; }
body.mode-clear .today-hero p,.mode-clear .companion-copy p,.mode-clear .water-card p,.mode-clear .coach-copy p { font-size:15px; }
body.mode-clear .meal-strip { grid-template-columns:repeat(2,1fr); }
body.mode-clear .meal-slot { min-height:110px; }
body.mode-clear .meal-slot strong { font-size:16px; }.mode-clear .meal-slot small { font-size:12px; }
body.mode-clear .goal-copy strong { font-size:16px; }.mode-clear .goal-copy small,.mode-clear .goal-source { font-size:12px; }
body.mode-clear .bottom-nav { width:min(100%,660px); }.mode-clear .nav-btn { font-size:13px; min-height:66px; }.mode-clear .nav-icon { font-size:24px; }
body.mode-compact .today-footer-note { display:none; }

/* === v3 Monster Companion Concept === */
.bottom-nav { grid-template-columns: repeat(4,1fr); }
.monster-heading { padding-bottom:12px; }
.monster-room-card { position:relative; overflow:hidden; min-height:270px; margin-bottom:16px; border:1px solid #d8d1c4; border-radius:30px; background:linear-gradient(#dfeaec 0 47%,#f6e7c7 47% 100%); box-shadow:var(--shadow); }
.monster-room-card.large { min-height:340px; }
.room-sky { position:absolute; inset:0 0 53% 0; background:linear-gradient(180deg,#d9e9ee,#edf3ee); }
.room-cloud { position:absolute; width:68px; height:20px; border-radius:999px; background:rgba(255,255,255,.62); top:25px; }
.room-cloud::before,.room-cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.room-cloud::before { width:30px; height:30px; left:12px; top:-13px; }.room-cloud::after { width:23px; height:23px; right:9px; top:-8px; }
.room-cloud.c1 { left:24px; }.room-cloud.c2 { right:38px; top:52px; transform:scale(.72); }
.room-window { position:absolute; width:72px; height:86px; left:23px; top:58px; border:8px solid #fff9ed; border-radius:34px 34px 8px 8px; background:#a9ced1; box-shadow:0 5px 0 rgba(91,77,52,.05); }
.room-window span { position:absolute; width:2px; height:100%; background:#fff9ed; left:50%; }
.room-shelf { position:absolute; right:20px; top:78px; min-width:112px; height:44px; padding:4px 9px 8px; display:flex; justify-content:center; align-items:flex-end; gap:7px; border-bottom:8px solid #ad8665; }
.room-shelf span { font-size:25px; filter:drop-shadow(0 3px 2px rgba(0,0,0,.08)); }
.room-floor { position:absolute; inset:47% 0 0; background:linear-gradient(165deg,#f3dfbb,#e8cf9f); }
.room-floor::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 72px,rgba(126,96,57,.06) 72px 74px); }
.monster-wrap { position:absolute; z-index:4; width:120px; height:132px; left:50%; bottom:18px; transform:translateX(-50%); display:grid; place-items:center; }
.monster-body { width:92px; height:102px; background:#e2b85d; border-radius:48% 48% 42% 42% / 42% 42% 57% 57%; }
.monster-body .eye { top:43px; }.monster-body .e1 { left:27px; }.monster-body .e2 { right:27px; }.monster-body .mouth { left:35px; top:60px; width:22px; }
.monster-horn { position:absolute; width:17px; height:26px; top:-12px; background:#d87762; border-radius:90% 20% 60% 20%; z-index:-1; }
.monster-horn.h1 { left:14px; transform:rotate(-28deg); }.monster-horn.h2 { right:14px; transform:scaleX(-1) rotate(-28deg); }
.monster-foot { position:absolute; width:27px; height:13px; bottom:-6px; background:#d8ab52; border-radius:50%; }.monster-foot.f1 { left:12px; transform:rotate(8deg); }.monster-foot.f2 { right:12px; transform:rotate(-8deg); }
.monster-shadow { position:absolute; bottom:3px; width:92px; height:14px; border-radius:50%; background:rgba(92,70,45,.12); }
.monster-speech { position:absolute; z-index:6; left:16px; bottom:18px; width:min(47%,205px); padding:12px 13px; background:rgba(255,253,247,.95); border:1px solid rgba(190,177,152,.75); border-radius:18px 18px 18px 5px; box-shadow:0 9px 20px rgba(77,66,46,.08); }
.monster-speech small,.monster-speech strong { display:block; }.monster-speech small { color:var(--brand-dark); font-size:9px; font-weight:900; }.monster-speech strong { margin:3px 0 2px; font-size:13px; }.monster-speech p { margin:0; color:var(--muted); font-size:10px; line-height:1.45; }
.monster-stage-note { position:absolute; z-index:6; right:14px; bottom:13px; max-width:140px; padding:6px 9px; border-radius:999px; background:rgba(255,253,247,.82); font-size:8px; color:#6f675a; font-weight:800; }

.daily-habit-card,.nutrition-card,.membership-card { margin:15px 0; padding:16px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 7px 20px rgba(78,68,50,.04); }
.habit-progress-line { display:flex; align-items:baseline; gap:8px; margin:-2px 0 10px; }.habit-progress-line strong { font-size:22px; }.habit-progress-line span { color:var(--muted); font-size:10px; }
.habit-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.habit-card { position:relative; min-height:88px; text-align:left; border:1px solid var(--line); border-radius:17px; background:#fbf8f0; padding:12px; color:var(--text); }
.habit-card.done { background:#eaf2e7; border-color:#bdd0b7; }.habit-card > span { display:block; font-size:23px; }.habit-card strong,.habit-card small { display:block; }.habit-card strong { margin:4px 0 2px; font-size:12px; }.habit-card small { color:var(--muted); font-size:9px; }.habit-card b { position:absolute; top:10px; right:11px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--brand-dark); font-size:11px; }.habit-card.done b { background:var(--brand); color:white; }

.meal-photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.meal-photo-card { min-width:0; overflow:hidden; text-align:left; padding:0; border:1px solid var(--line); background:var(--surface); border-radius:20px; color:var(--text); box-shadow:0 6px 15px rgba(78,68,50,.04); }
.meal-photo-card.done { border-color:#bdceb9; }
.meal-photo-card > img,.meal-photo-placeholder { width:100%; aspect-ratio:1/1.05; display:grid; place-items:center; object-fit:cover; background:linear-gradient(145deg,#f1eadc,#f5e8bd); }
.meal-photo-placeholder span { display:block; font-size:31px; text-align:center; }.meal-photo-placeholder small { display:block; margin-top:-26px; padding-top:33px; color:#806d4e; font-size:9px; font-weight:900; }
.meal-photo-copy { padding:9px; min-height:70px; }.meal-photo-copy strong,.meal-photo-copy small,.meal-photo-copy span { display:block; }.meal-photo-copy strong { font-size:11px; }.meal-photo-copy small { margin-top:3px; color:var(--muted); font-size:8px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.meal-photo-copy span { margin-top:5px; color:var(--brand-dark); font-size:8px; font-weight:800; }
.wide-add-meal { width:100%; display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; text-align:left; margin-top:9px; padding:12px 14px; border:1px dashed #cbbfae; background:rgba(255,253,247,.65); border-radius:18px; color:var(--text); }.wide-add-meal span { grid-row:1/3; font-size:25px; color:var(--brand); }.wide-add-meal strong { font-size:11px; }.wide-add-meal small { color:var(--muted); font-size:9px; }

.nutrition-card { background:linear-gradient(150deg,#fffdf7,#eef4eb); }.nutrition-card.compact { margin:0; box-shadow:none; background:#fbfcf8; }.serving-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.serving-item { padding:10px; border:1px solid #d7dfd2; border-radius:16px; background:rgba(255,255,255,.72); }.serving-item span,.serving-item strong,.serving-item small { display:block; }.serving-item span { color:#5d665e; font-size:9px; font-weight:900; }.serving-item strong { margin:3px 0 2px; font-size:24px; }.serving-item small { color:var(--muted); font-size:7px; line-height:1.35; }
.portion-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }.portion-row span { padding:4px 6px; border-radius:999px; background:#edf4e9; color:var(--brand-dark); font-size:8px; font-weight:800; }
.serving-editor { border:1px solid var(--line); border-radius:17px; padding:12px; background:#f8f5ed; }.serving-editor legend { padding:0 7px; font-weight:900; font-size:12px; }.serving-editor legend small { color:var(--muted); font-size:8px; }.serving-editor p { margin:8px 0 0; color:var(--muted); font-size:9px; }.serving-input-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.serving-input-grid label { display:grid; gap:4px; font-size:9px; font-weight:800; }.serving-input-grid input { width:100%; border:1px solid var(--line); border-radius:10px; background:white; padding:8px; }.serving-input-grid.large { grid-template-columns:repeat(2,1fr); }
.photo-picker.priority .photo-preview { min-height:170px; }.photo-picker.priority .photo-preview > span { display:grid; place-items:center; gap:4px; }.photo-picker.priority .photo-preview > span:first-letter { font-size:26px; }.photo-picker.priority .photo-preview strong,.photo-picker.priority .photo-preview small { display:block; }.photo-picker.priority .photo-preview small { color:var(--muted); font-size:9px; }

.meal-record.visual { display:grid; grid-template-columns:115px minmax(0,1fr); padding:0; overflow:hidden; }.meal-record-media { min-height:115px; display:grid; place-items:center; background:linear-gradient(145deg,#f1eadc,#e8f0e7); font-size:34px; }.meal-record-media img { width:100%; height:100%; min-height:115px; object-fit:cover; }.meal-record.visual .meal-record-copy { padding:12px; }

.membership-card { display:flex; justify-content:space-between; align-items:center; gap:14px; background:linear-gradient(145deg,#fff7df,#f1eadc); }.membership-card h2 { margin:4px 0; }.membership-card p { margin:0; color:var(--muted); font-size:10px; }
.profile-links { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.profile-links button { text-align:left; border:1px solid var(--line); border-radius:15px; padding:12px; background:#fbf8f0; color:var(--text); font-weight:900; font-size:11px; }
.choice-picker { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.choice-option input { position:absolute; opacity:0; pointer-events:none; }.choice-option > span { display:grid; min-height:105px; border:1px solid var(--line); border-radius:17px; padding:12px; background:var(--surface); }.choice-option input:checked + span { border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 2px rgba(85,123,104,.08); }.choice-option b { font-size:24px; }.choice-option strong { margin-top:5px; font-size:12px; }.choice-option small { margin-top:3px; color:var(--muted); font-size:9px; }
.membership-modal,.plan-list { display:grid; gap:9px; }.plan-current { padding:14px; border-radius:17px; background:var(--brand-soft); }.plan-current span,.plan-current strong,.plan-current small { display:block; }.plan-current span,.plan-current small { color:var(--muted); font-size:9px; }.plan-current strong { margin:3px 0; font-size:20px; }.plan-list article { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:14px; padding:11px; }.plan-list strong,.plan-list small { display:block; }.plan-list strong { font-size:11px; }.plan-list small { margin-top:2px; color:var(--muted); font-size:8px; }.payment-test-status { margin-top:8px; padding:14px; border:1px dashed #c8bda9; border-radius:17px; background:#faf7ef; }.payment-test-status h3 { margin:4px 0; }.payment-test-status p { color:var(--muted); font-size:9px; }
.room-collection { margin-bottom:22px; }

@media (max-width:430px) {
  .monster-room-card { min-height:255px; }.monster-room-card.large { min-height:310px; }
  .monster-speech { left:10px; bottom:11px; width:44%; padding:9px; }.monster-speech p { font-size:8px; }.monster-stage-note { display:none; }
  .monster-wrap { left:57%; }
  .room-window { left:13px; }.room-shelf { right:10px; }
  .meal-photo-grid { gap:6px; }.meal-photo-copy { padding:7px; }.meal-photo-copy small { font-size:7px; }
  .serving-grid { grid-template-columns:repeat(2,1fr); }.serving-input-grid { grid-template-columns:repeat(2,1fr); }
  .meal-record.visual { grid-template-columns:92px minmax(0,1fr); }.meal-record-media,.meal-record-media img { min-height:100px; }
  .membership-card { align-items:flex-start; flex-direction:column; }.membership-card .btn { width:100%; }
}
body.mode-clear .habit-grid { grid-template-columns:1fr; }
body.mode-clear .habit-card { min-height:92px; }
body.mode-clear .habit-card strong { font-size:16px; }
body.mode-clear .habit-card small { font-size:13px; }
body.mode-clear .meal-photo-grid { grid-template-columns:1fr; }
body.mode-clear .meal-photo-card { display:grid; grid-template-columns:135px 1fr; }
body.mode-clear .meal-photo-card > img, body.mode-clear .meal-photo-placeholder { aspect-ratio:auto; min-height:125px; }
body.mode-clear .meal-photo-copy strong { font-size:17px; }
body.mode-clear .meal-photo-copy small,body.mode-clear .meal-photo-copy span { font-size:12px; white-space:normal; }

/* === v3.3 Monster rig / semantic layer + anchor system === */
.profile-mini { width:41px; height:41px; border-radius:50%; border:0; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:900; box-shadow:0 5px 14px rgba(63,98,82,.18); }
.role-chip.static { cursor:default; }

.monster-room-card { isolation:isolate; }
.monster-wrap {
  --monster-main:#7faa91; --monster-belly:#dbe9d9;
  --anchor-head-x:50%; --anchor-head-y:0px;
  --anchor-face-x:50%; --anchor-face-y:39px;
  --anchor-neck-x:50%; --anchor-neck-y:72px;
  --anchor-body-x:50%; --anchor-body-y:58px;
  --anchor-back-x:50%; --anchor-back-y:57px;
  --anchor-hand-left-x:7px; --anchor-hand-left-y:60px;
  --anchor-hand-right-x:85px; --anchor-hand-right-y:60px;
  --anchor-foot-y:111px;
  transition:left .6s ease,bottom .6s ease;
}
.monster-rig { position:relative; width:120px; height:132px; }
.monster-layer { position:absolute; inset:0; pointer-events:none; }
.monster-layer-back { z-index:1; }
.monster-layer-body { z-index:3; }
.monster-layer-clothing { z-index:5; }
.monster-layer-neck { z-index:7; }
.monster-layer-face { z-index:9; }
.monster-layer-head { z-index:11; }
.monster-layer-front { z-index:13; }
.monster-layer-interaction { z-index:15; }

.monster-body {
  position:absolute; left:14px; top:15px; z-index:3; width:92px; height:102px;
  background:var(--monster-main); box-shadow:inset 0 -7px 0 rgba(70,70,45,.06),0 10px 24px rgba(94,72,39,.1);
  transform-origin:50% 85%; transition:background .2s ease;
}
.monster-wrap.mood-happy .monster-body { transform:rotate(2deg) translateY(-2px); }
.monster-belly { position:absolute; width:49px; height:43px; left:22px; top:54px; border-radius:48% 48% 52% 52%; background:var(--monster-belly); opacity:.9; }
.monster-horn { background:#d87762; }
.monster-foot { background:var(--monster-main); filter:brightness(.88); z-index:-1; }
.monster-arm { position:absolute; z-index:5; width:18px; height:42px; top:51px; background:var(--monster-main); border-radius:999px; transform-origin:50% 8px; }
.monster-arm.a1 { left:-5px; transform:rotate(18deg); }
.monster-arm.a2 { right:-5px; transform:rotate(-18deg); }
.monster-shadow { z-index:0; }

/* Back layer: anchored to the body's back center, never painted over face/body layers. */
.monster-backwear { position:absolute; pointer-events:none; left:var(--anchor-back-x); top:var(--anchor-back-y); }
.backwear-cape { width:82px; height:76px; translate:-48% -14%; border-radius:18px 18px 45px 45px; background:linear-gradient(145deg,#6f8f9f,#557783); transform:rotate(3deg); box-shadow:inset 0 0 0 2px rgba(255,255,255,.13),0 5px 8px rgba(70,60,50,.08); transform-origin:50% 10%; }
.backwear-cape::before { content:""; position:absolute; left:29px; top:-5px; width:25px; height:10px; border-radius:999px; background:#496a75; }
.backwear-cape::after { content:""; position:absolute; right:8px; bottom:7px; width:32px; height:52px; border-right:2px solid rgba(255,255,255,.14); border-radius:50%; transform:rotate(-9deg); }
.backwear-bag { width:31px; height:39px; translate:61% 3%; border-radius:11px 12px 13px 10px; background:linear-gradient(#c98b55,#ad6e40); border:2px solid #8e5d39; box-shadow:0 5px 8px rgba(70,50,35,.12); transform:rotate(7deg); }
.backwear-bag::before { content:""; position:absolute; left:6px; top:-9px; width:16px; height:13px; border:3px solid #8e5d39; border-bottom:0; border-radius:10px 10px 0 0; }
.backwear-bag i { position:absolute; left:5px; right:5px; bottom:5px; height:12px; border-radius:5px; background:#dba06d; border:1px solid rgba(92,55,32,.3); }

/* Head layer: every item follows headAnchor supplied by the selected shape profile. */
.monster-headwear { position:absolute; left:var(--anchor-head-x); top:var(--anchor-head-y); pointer-events:none; translate:-50% -50%; filter:drop-shadow(0 3px 2px rgba(0,0,0,.1)); }
.headwear-leaf { width:53px; height:20px; border-radius:50% 50% 40% 40%; background:#557b68; transform:rotate(-5deg); }
.headwear-leaf::before { content:""; position:absolute; width:29px; height:16px; left:6px; top:-7px; border-radius:90% 8% 90% 8%; background:#6d957c; transform:rotate(-16deg); }
.headwear-leaf::after { content:""; position:absolute; width:21px; height:7px; right:5px; bottom:-2px; border-radius:50%; background:#496d59; }
.headwear-cap { width:58px; height:24px; border-radius:58% 58% 34% 34% / 68% 68% 32% 32%; background:linear-gradient(#6e9fc2,#547f9e); transform:rotate(-3deg); box-shadow:inset 0 -3px 0 rgba(36,77,106,.12); }
.headwear-cap::before { content:""; position:absolute; left:8px; top:4px; width:9px; height:9px; border-radius:50%; background:#8bb3ce; }
.headwear-cap::after { content:""; position:absolute; right:-19px; bottom:-1px; width:32px; height:8px; border-radius:0 12px 12px 10px; background:#456f8d; transform:rotate(5deg); }
.headwear-crown { width:49px; height:29px; background:linear-gradient(#f5cf5d,#d6a934); clip-path:polygon(0 20%,18% 52%,31% 4%,50% 50%,69% 4%,82% 52%,100% 20%,91% 100%,9% 100%); transform:rotate(1deg); box-shadow:inset 0 -4px 0 rgba(145,99,15,.14); }
.headwear-crown::after { content:""; position:absolute; left:9px; right:9px; bottom:4px; height:4px; border-radius:999px; background:#ffe695; }

/* Neck/clothing/face/front layers use their semantic anchors rather than body-local pixel positions. */
.monster-outfit { position:absolute; pointer-events:none; }
.outfit-scarf { left:var(--anchor-neck-x); top:var(--anchor-neck-y); width:78px; height:13px; translate:-50% -50%; border-radius:999px; background:linear-gradient(90deg,#c96054,#dd796a 55%,#bf564d); transform:rotate(-2deg); box-shadow:0 2px 0 rgba(0,0,0,.05); }
.outfit-scarf::before { content:""; position:absolute; left:8px; right:8px; top:4px; height:2px; border-radius:999px; background:rgba(255,255,255,.2); }
.outfit-scarf i { position:absolute; width:18px; height:38px; right:7px; top:8px; border-radius:5px 5px 12px 12px; background:linear-gradient(#d36a5d,#bd5148); transform:rotate(-11deg); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.outfit-scarf i::after { content:""; position:absolute; left:3px; right:3px; bottom:4px; height:1px; box-shadow:0 3px 0 rgba(255,255,255,.28),0 6px 0 rgba(255,255,255,.24); }
.outfit-bib { left:var(--anchor-body-x); top:var(--anchor-body-y); width:44px; height:37px; translate:-50% 14%; border-radius:10px 10px 48% 48%; background:#fff7df; border:2px solid rgba(216,119,98,.34); }
.outfit-bib::before { content:""; position:absolute; left:7px; right:7px; top:-8px; height:10px; border:3px solid #fff7df; border-bottom:0; border-radius:14px 14px 0 0; }
.outfit-bib::after { content:"♡"; position:absolute; inset:6px 0 0; text-align:center; color:#d87762; font-size:15px; font-weight:900; }

.monster-accessory { position:absolute; pointer-events:none; }
.accessory-glasses { left:var(--anchor-face-x); top:var(--anchor-face-y); width:53px; height:22px; translate:-50% -16%; background:linear-gradient(#4d463b,#4d463b) center 8px/13px 3px no-repeat; }
.accessory-glasses::before,.accessory-glasses::after { content:""; position:absolute; top:0; width:19px; height:17px; border:3px solid #4d463b; border-radius:50%; background:rgba(255,255,255,.13); }
.accessory-glasses::before { left:0; }.accessory-glasses::after { right:0; }
.accessory-bag-strap { left:var(--anchor-back-x); top:var(--anchor-back-y); width:31px; height:59px; translate:26% -35%; border-right:4px solid #8e5d39; border-radius:0 70% 65% 0; transform:rotate(-8deg); opacity:.88; }
.accessory-flower { left:var(--anchor-head-x); top:var(--anchor-head-y); width:21px; height:21px; translate:105% 38%; }
.accessory-flower::before { content:"✿"; position:absolute; inset:0; display:grid; place-items:center; color:#e7a840; font-size:25px; line-height:1; text-shadow:0 2px 2px rgba(0,0,0,.08); }
.accessory-flower i { position:absolute; z-index:2; left:8px; top:8px; width:6px; height:6px; border-radius:50%; background:#8d7447; }

.monster-prop { position:absolute; left:var(--anchor-hand-right-x); top:var(--anchor-hand-right-y); min-width:38px; min-height:38px; translate:-8% -24%; display:grid; place-items:center; font-size:33px; filter:drop-shadow(0 5px 4px rgba(0,0,0,.12)); transform-origin:50% 80%; }

.monster-wrap.action-idle .monster-body { animation:monsterBreathe 3.6s ease-in-out infinite; }
.monster-wrap.action-idle .monster-foot.f1 { animation:monsterFootTap 5s ease-in-out infinite; }
.monster-wrap.action-walk { animation:monsterWalkAcross 7.2s ease-in-out infinite alternate; }
.monster-wrap.action-walk .monster-body { animation:monsterWalkBob .48s ease-in-out infinite alternate; }
.monster-wrap.action-walk .monster-foot.f1 { animation:monsterStep .48s ease-in-out infinite alternate; }
.monster-wrap.action-walk .monster-foot.f2 { animation:monsterStep .48s ease-in-out infinite alternate-reverse; }
.monster-wrap.action-walk .backwear-cape { animation:capeFlutter .55s ease-in-out infinite alternate; }
.monster-wrap.action-walk .backwear-bag { animation:bagWalkBob .48s ease-in-out infinite alternate; }
.monster-wrap.action-relax .monster-body { animation:monsterRelax 5s ease-in-out infinite; }
.monster-wrap.action-relax .monster-arm.a1 { transform:rotate(65deg); }
.monster-wrap.action-relax .monster-arm.a2 { transform:rotate(-65deg); }
.monster-wrap.action-sleep { bottom:10px; }
.monster-wrap.action-sleep .monster-body { animation:monsterSleep 4.2s ease-in-out infinite; transform:rotate(8deg) translateY(14px); }
.monster-wrap.action-sleep .eye { height:3px; top:47px; border-radius:999px; }
.monster-wrap.action-sleep .mouth { width:10px; left:41px; top:61px; border-bottom-width:2px; }
.monster-wrap.action-sleep .monster-prop { left:calc(var(--anchor-head-x) + 34px); top:calc(var(--anchor-head-y) + 18px); translate:0 0; animation:sleepBubble 2.6s ease-in-out infinite; }
.monster-wrap.action-eat .monster-body,.monster-wrap.action-veg .monster-body { animation:monsterHappyBounce .7s ease-in-out infinite alternate; }
.monster-wrap.action-eat .monster-prop,.monster-wrap.action-veg .monster-prop { animation:foodNibble .8s ease-in-out infinite alternate; }
.monster-wrap.action-eat .monster-arm.a2,.monster-wrap.action-veg .monster-arm.a2 { animation:monsterReach .8s ease-in-out infinite alternate; }
.monster-wrap.action-drink .monster-body { animation:monsterSipBody 1.1s ease-in-out infinite alternate; }
.monster-wrap.action-drink .monster-prop { animation:monsterSipCup 1.1s ease-in-out infinite alternate; }
.monster-wrap.action-drink .monster-arm.a2 { transform:rotate(-75deg); }
.monster-wrap.action-celebrate .monster-body { animation:monsterCelebrate .52s ease-in-out infinite alternate; }
.monster-wrap.action-celebrate .monster-prop { animation:celebrateSpark 1s ease-in-out infinite; }

@keyframes monsterBreathe { 0%,100%{transform:translateY(0) rotate(-1deg) scale(1)} 50%{transform:translateY(-5px) rotate(1deg) scale(1.015)} }
@keyframes monsterFootTap { 0%,82%,100%{transform:rotate(8deg)} 88%{transform:rotate(22deg) translateY(-2px)} }
@keyframes monsterWalkAcross { 0%{transform:translateX(-50%) translateX(-82px)} 100%{transform:translateX(-50%) translateX(82px)} }
@keyframes monsterWalkBob { 0%{transform:translateY(0) rotate(-3deg)} 100%{transform:translateY(-7px) rotate(3deg)} }
@keyframes monsterStep { 0%{transform:rotate(18deg) translateY(-2px)} 100%{transform:rotate(-12deg) translateY(2px)} }
@keyframes capeFlutter { 0%{transform:rotate(1deg) skewX(0deg)} 100%{transform:rotate(7deg) skewX(-7deg)} }
@keyframes bagWalkBob { 0%{transform:rotate(5deg) translateY(0)} 100%{transform:rotate(10deg) translateY(-4px)} }
@keyframes monsterRelax { 0%,100%{transform:rotate(-4deg) translateY(7px)} 50%{transform:rotate(4deg) translateY(2px)} }
@keyframes monsterSleep { 0%,100%{transform:rotate(8deg) translateY(14px) scale(1)} 50%{transform:rotate(7deg) translateY(16px) scale(1.02)} }
@keyframes sleepBubble { 0%,100%{transform:translate(0,0) scale(.82);opacity:.5} 50%{transform:translate(9px,-12px) scale(1.1);opacity:1} }
@keyframes monsterHappyBounce { 0%{transform:translateY(0) rotate(-2deg)} 100%{transform:translateY(-8px) rotate(2deg)} }
@keyframes foodNibble { 0%{transform:translate(7px,3px) rotate(5deg) scale(1)} 100%{transform:translate(-6px,-2px) rotate(-8deg) scale(.92)} }
@keyframes monsterReach { 0%{transform:rotate(-30deg)} 100%{transform:rotate(-82deg)} }
@keyframes monsterSipBody { 0%{transform:rotate(0deg)} 100%{transform:rotate(3deg) translateY(-2px)} }
@keyframes monsterSipCup { 0%{transform:rotate(0deg) translate(5px,3px)} 100%{transform:rotate(-22deg) translate(-6px,-5px)} }
@keyframes monsterCelebrate { 0%{transform:translateY(0) rotate(-4deg) scale(1)} 100%{transform:translateY(-10px) rotate(4deg) scale(1.04)} }
@keyframes celebrateSpark { 0%,100%{transform:scale(.8) rotate(-8deg);opacity:.65} 50%{transform:scale(1.2) rotate(8deg);opacity:1} }

.wardrobe-card { margin:16px 0 22px; padding:16px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 7px 20px rgba(78,68,50,.04); }
.wardrobe-group + .wardrobe-group { margin-top:17px; padding-top:15px; border-top:1px solid #eee7dc; }
.wardrobe-group h3 { margin:0 0 9px; font-size:13px; }
.wardrobe-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.wardrobe-option { position:relative; min-height:76px; border:1px solid var(--line); border-radius:16px; background:#fbf8f0; color:var(--text); padding:9px 5px; display:grid; place-items:center; align-content:center; gap:6px; }
.wardrobe-option.selected { border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 2px rgba(85,123,104,.08); }
.wardrobe-option strong { font-size:9px; line-height:1.25; }
.wardrobe-icon { font-size:23px; line-height:1; }
.wardrobe-swatch { width:28px; height:28px; border-radius:50%; border:3px solid rgba(255,255,255,.8); box-shadow:0 0 0 1px rgba(70,70,60,.12); }
.wardrobe-check { position:absolute; right:6px; top:6px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:#fff; font-size:10px; font-weight:900; }

@media (max-width:430px) {
  .monster-wrap.action-walk { animation-name:monsterWalkAcrossMobile; }
  .wardrobe-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .wardrobe-option { min-height:70px; padding:7px 3px; }
  .wardrobe-option strong { font-size:8px; }
}
@keyframes monsterWalkAcrossMobile { 0%{transform:translateX(-50%) translateX(-58px)} 100%{transform:translateX(-50%) translateX(58px)} }

@media (prefers-reduced-motion: reduce) {
  .monster-wrap,.monster-rig,.monster-layer,.monster-body,.monster-foot,.monster-prop,.monster-arm,.monster-backwear,.monster-outfit,.monster-accessory,.monster-headwear { animation:none !important; transition:none !important; }
}
.monster-body.shape-round { border-radius:48% 48% 42% 42% / 42% 42% 57% 57%; }
.monster-body.shape-bean { border-radius:58% 42% 52% 48% / 38% 48% 58% 62%; }
.monster-body.shape-drop { border-radius:54% 54% 43% 43% / 30% 30% 66% 66%; }
.monster-body.shape-soft { border-radius:34% 34% 38% 38% / 31% 31% 44% 44%; }