:root { --bg:#f5f7f9; --surface:#fff; --ink:#1c252d; --muted:#83909b; --line:#e8edf0; --mint:#68b9a5; --mint-dark:#278b79; --mint-soft:#eaf7f3; --peach:#ffb28a; --peach-soft:#fff2ea; --purple:#9186d7; --purple-soft:#f0effb; --yellow:#e5b851; --shadow:0 18px 40px rgba(32, 47, 58, .08); }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,'HarmonyOS Sans','Noto Sans SC',sans-serif; color:var(--ink); background:var(--bg); font-size:14px; }
button, input, textarea, select { font:inherit; }
button { border:0; cursor:pointer; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:246px; background:#fbfcfc; border-right:1px solid var(--line); padding:24px 16px 18px; display:flex; flex-direction:column; flex-shrink:0; }
.brand { display:flex; align-items:center; gap:11px; padding:2px 12px 27px; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:var(--mint); color:#fff; font-weight:800; font-size:20px; box-shadow:0 7px 15px rgba(104,185,165,.28); }
.brand-name { font-size:20px; font-weight:800; letter-spacing:.02em; }.brand-name small { display:block; color:var(--muted); font-size:10px; letter-spacing:.12em; margin-top:1px; font-weight:500; }
.nav-label { color:#a5afb7; font-size:11px; padding:0 12px 8px; letter-spacing:.08em; text-transform:uppercase; }
.nav { display:grid; gap:4px; }.nav button { display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border-radius:9px; background:transparent; color:#6c7881; text-align:left; transition:.2s; }.nav button:hover { background:#f0f5f3; color:var(--mint-dark); }.nav button.active { background:var(--mint-soft); color:var(--mint-dark); font-weight:700; }.nav-icon { width:21px; text-align:center; font-size:18px; line-height:1; }
.sidebar-spacer { flex:1; }.mini-profile { border-top:1px solid var(--line); padding:16px 8px 0; display:flex; gap:10px; align-items:center; }.avatar { width:34px; height:34px; display:grid; place-items:center; background:#fee0d5; color:#ae6748; border-radius:11px; font-weight:800; flex-shrink:0; }.profile-text { min-width:0; }.profile-text b,.profile-text span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.profile-text span { color:var(--muted); font-size:11px; margin-top:2px; }
.main { flex:1; min-width:0; padding:28px 34px 40px; max-width:1540px; margin:auto; width:100%; }.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; }.eyebrow { color:var(--mint-dark); font-size:12px; font-weight:700; letter-spacing:.08em; }.page-title { font-size:27px; margin:5px 0 0; letter-spacing:-.03em; }.top-actions { display:flex; align-items:center; gap:12px; }.icon-btn { width:38px; height:38px; border-radius:11px; background:var(--surface); border:1px solid var(--line); color:#68747e; position:relative; }.icon-btn:hover { border-color:#bedfd6; color:var(--mint-dark); }.notice-dot { position:absolute; width:7px; height:7px; border:2px solid #fff; border-radius:50%; background:#ec7864; right:8px; top:7px; }.btn-primary { border-radius:10px; background:var(--mint-dark); color:#fff; padding:11px 16px; font-weight:700; box-shadow:0 8px 16px rgba(39,139,121,.16); }.btn-primary:hover { background:#1b7666; }.btn-light { background:#f0f4f3; color:#426a63; border-radius:9px; padding:9px 13px; font-weight:600; }.btn-light:hover { background:#e3efeb; }
.grid { display:grid; gap:18px; }.dashboard-grid { grid-template-columns:1.45fr 1fr 1fr; }.wide { grid-column:span 2; }.panel { background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:20px; box-shadow:0 6px 20px rgba(32,47,58,.025); }.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:17px; }.panel-title { font-size:16px; font-weight:800; margin:0; }.panel-subtitle { color:var(--muted); font-size:12px; margin:5px 0 0; }.link-btn { color:var(--mint-dark); background:none; font-size:12px; font-weight:700; padding:2px 0; }.hero-card { min-height:196px; background:linear-gradient(135deg,#e8f6f2 0%,#f5fbfa 62%,#fff 100%); position:relative; overflow:hidden; }.hero-card:after { content:'✦'; position:absolute; right:26px; top:24px; color:#bde6dc; font-size:74px; transform:rotate(15deg); }.hero-kicker { color:var(--mint-dark); font-weight:700; font-size:13px; }.hero-card h2 { margin:10px 0 7px; font-size:23px; letter-spacing:-.04em; }.hero-card p { max-width:300px; color:#73827f; margin:0; line-height:1.75; font-size:13px; }.hero-card .btn-light { margin-top:19px; background:#fff; }
.stat-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.stat { padding:14px 15px; border-radius:12px; background:#f8fafb; }.stat strong { display:block; font-size:22px; letter-spacing:-.04em; }.stat span { color:var(--muted); font-size:11px; display:block; margin-top:3px; }.stat.mint strong { color:var(--mint-dark); }.stat.peach strong { color:#df8056; }.stat.purple strong { color:#7569bf; }
.task-list { display:grid; gap:12px; }.task { display:flex; align-items:center; gap:11px; }.task-icon { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-size:16px; }.task-icon.peach { background:var(--peach-soft); }.task-icon.mint { background:var(--mint-soft); }.task-icon.purple { background:var(--purple-soft); }.task-text { flex:1; min-width:0; }.task-text b { font-size:13px; display:block; }.task-text span { font-size:11px; color:var(--muted); }.task-time { font-size:11px; color:var(--muted); }
.conversation { display:flex; gap:12px; padding:11px 0; border-bottom:1px solid #f0f2f3; cursor:pointer; }.conversation:last-child { border-bottom:0; padding-bottom:0; }.conversation:first-child { padding-top:0; }.conversation.active { background:#f2f8f6; margin:0 -10px; padding-left:10px; padding-right:10px; border-radius:9px; border-color:transparent; }.conversation .avatar { width:36px; height:36px; border-radius:12px; }.conversation-main { min-width:0; flex:1; }.conversation-top { display:flex; justify-content:space-between; gap:8px; }.conversation-top b { font-size:13px; }.conversation-time { color:var(--muted); font-size:10px; }.conversation-preview { color:var(--muted); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:12px; margin-top:4px; }.count { background:var(--mint-dark); color:#fff; border-radius:10px; font-size:10px; min-width:18px; height:18px; display:grid; place-items:center; padding:0 5px; }
.menu-summary { display:flex; gap:11px; align-items:center; padding:12px; border-radius:11px; background:#fff9ec; }.menu-day { font-size:26px; font-weight:800; line-height:1; color:#bd8d28; }.menu-summary b { display:block; font-size:13px; }.menu-summary span { display:block; color:#ab9873; font-size:11px; margin-top:3px; }.tag { display:inline-flex; align-items:center; border-radius:6px; background:#f5f7f8; color:#71808a; font-size:10px; padding:4px 7px; }.tag.mint { background:var(--mint-soft); color:var(--mint-dark); }.tag.peach { background:var(--peach-soft); color:#c16c4a; }
.pet-overview { display:flex; align-items:center; gap:14px; }.pet-avatar { width:54px; height:54px; display:grid; place-items:center; border-radius:18px; background:#ffeadf; font-size:27px; }.pet-overview h3 { margin:0; font-size:16px; }.pet-overview p { color:var(--muted); margin:5px 0 0; font-size:12px; }.pet-badges { display:flex; gap:6px; margin-top:10px; }.pet-badges .tag { font-size:10px; }.health-line { margin-top:17px; display:flex; align-items:center; justify-content:space-between; font-size:12px; }.progress { height:6px; background:#edf1f1; border-radius:99px; margin-top:8px; overflow:hidden; }.progress i { display:block; height:100%; background:var(--mint); border-radius:99px; }
.page { display:none; }.page.active { display:block; }.page-grid { grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr); }.section-card { background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:21px; }.section-title { font-size:18px; font-weight:800; margin:0; }.section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }.search { border:1px solid var(--line); border-radius:9px; padding:9px 12px; background:#fff; color:var(--ink); outline:0; }.search:focus, .field input:focus, .field textarea:focus, .field select:focus { border-color:#9acfc2; box-shadow:0 0 0 3px #e8f6f2; }
.chat-layout { height:calc(100vh - 115px); min-height:550px; display:grid; grid-template-columns:270px minmax(0,1fr); background:#fff; border:1px solid var(--line); border-radius:15px; overflow:hidden; }.chat-list { border-right:1px solid var(--line); padding:16px; overflow:auto; }.chat-list-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }.chat-list-head b { font-size:15px; }.chat-list .conversation { padding:12px 4px; }.chat-list .conversation.active { margin:0 -6px; padding-left:10px; padding-right:8px; }.chat-main { display:flex; flex-direction:column; min-width:0; background:#fbfcfc; }.chat-head { padding:16px 22px; background:#fff; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }.chat-head h3 { margin:0; font-size:15px; }.chat-head small { color:var(--muted); display:block; margin-top:3px; }.chat-head-actions { display:flex; gap:7px; }.message-stream { flex:1; overflow:auto; padding:25px 27px; display:flex; flex-direction:column; gap:18px; }.message-row { display:flex; gap:9px; max-width:75%; align-items:flex-start; }.message-row.self { align-self:flex-end; flex-direction:row-reverse; }.message-bubble { padding:11px 13px; background:#fff; border:1px solid var(--line); border-radius:5px 13px 13px 13px; line-height:1.6; font-size:13px; box-shadow:0 3px 9px rgba(32,47,58,.025); }.message-row.self .message-bubble { background:var(--mint); border-color:var(--mint); color:#fff; border-radius:13px 5px 13px 13px; }.message-meta { color:var(--muted); font-size:10px; margin:5px 2px 0; }.message-row.self .message-meta { text-align:right; }.chat-avatar { width:28px; height:28px; font-size:12px; border-radius:9px; }.shared-card { border:1px solid #d8ece6; background:#f3fbf8; padding:11px; border-radius:10px; min-width:205px; }.shared-card strong { display:block; font-size:12px; color:var(--mint-dark); }.shared-card span { display:block; font-size:11px; color:#69817a; margin-top:4px; }.composer { padding:13px 20px 17px; background:#fff; border-top:1px solid var(--line); }.quick-actions { display:flex; gap:7px; margin-bottom:9px; }.quick-actions button { color:#80908f; background:#f3f7f6; padding:5px 8px; border-radius:6px; font-size:11px; }.composer-row { display:flex; gap:10px; align-items:flex-end; }.composer textarea { resize:none; flex:1; border:1px solid var(--line); padding:10px 12px; outline:0; border-radius:10px; min-height:42px; max-height:100px; }.send-btn { height:42px; padding:0 16px; border-radius:10px; background:var(--mint-dark); color:#fff; font-weight:700; }
.menu-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr); gap:18px; }.date-switch { display:flex; gap:7px; margin-bottom:18px; overflow:auto; }.date-btn { min-width:64px; padding:9px 7px; border-radius:9px; background:#f7f9f9; color:#77838a; text-align:center; }.date-btn b { font-size:15px; display:block; }.date-btn span { font-size:10px; display:block; margin-top:3px; }.date-btn.active { background:var(--mint-dark); color:#fff; }.meal-list { display:grid; gap:9px; }.meal-row { display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:12px; border:1px solid var(--line); border-radius:11px; padding:12px 14px; }.meal-type { color:var(--muted); font-size:11px; }.meal-type b { display:block; color:var(--ink); font-size:13px; margin-top:3px; }.meal-row p { margin:0; font-weight:600; font-size:13px; }.meal-row small { color:var(--muted); display:block; margin-top:4px; font-size:11px; }.meal-emoji { width:35px; height:35px; display:grid; place-items:center; border-radius:10px; background:#fff5e6; font-size:18px; }.delete-btn { background:none; color:#b1bbc0; font-size:18px; }.add-form { display:grid; gap:11px; }.field { display:grid; gap:6px; }.field label { color:#68757d; font-size:11px; font-weight:600; }.field input,.field textarea,.field select { width:100%; border:1px solid var(--line); border-radius:9px; outline:0; padding:10px 11px; background:#fff; color:var(--ink); }.field textarea { resize:vertical; min-height:74px; }.two-col { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.pet-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr); gap:18px; }.pet-card { border:1px solid var(--line); border-radius:13px; padding:18px; }.pet-card-top { display:flex; justify-content:space-between; }.pet-card .pet-overview { align-items:flex-start; }.info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; }.info-cell { padding:10px 11px; border-radius:9px; background:#f8fafb; }.info-cell span { display:block; color:var(--muted); font-size:10px; }.info-cell b { display:block; margin-top:4px; font-size:12px; }.timeline { display:grid; gap:11px; }.timeline-item { display:flex; gap:10px; align-items:flex-start; }.timeline-dot { width:9px; height:9px; margin-top:4px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px var(--mint-soft); }.timeline-item b { font-size:12px; }.timeline-item span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.share-grid { display:grid; grid-template-columns:1.4fr .8fr; gap:18px; }.member-list { display:grid; gap:12px; }.member { display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid #f0f2f3; }.member:last-child { border-bottom:0; padding-bottom:0; }.member .avatar { width:34px; height:34px; }.member-main { flex:1; }.member-main b { display:block; font-size:13px; }.member-main span { color:var(--muted); font-size:11px; }.role { color:var(--mint-dark); font-size:10px; background:var(--mint-soft); border-radius:5px; padding:4px 7px; }.share-item { padding:13px 0; border-bottom:1px solid #f0f2f3; display:flex; gap:11px; align-items:center; }.share-item:last-child { border-bottom:0; }.share-type { width:33px; height:33px; border-radius:9px; display:grid; place-items:center; background:var(--purple-soft); }.share-item b { display:block; font-size:12px; }.share-item span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.modal-backdrop { position:fixed; inset:0; z-index:10; background:rgba(31,42,47,.37); display:grid; place-items:center; padding:20px; }.modal { width:min(440px,100%); background:#fff; border-radius:16px; padding:23px; box-shadow:0 24px 70px rgba(20,31,36,.2); }.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }.modal-head h3 { margin:0; font-size:18px; }.close-btn { width:29px; height:29px; border-radius:8px; background:#f4f6f6; color:#77838a; }.auth-shell { width:min(420px,100%); background:#fff; border-radius:18px; padding:29px; box-shadow:0 24px 80px rgba(20,31,36,.22); }.auth-brand { display:flex; align-items:center; gap:10px; margin-bottom:25px; }.auth-title { margin:0; font-size:22px; }.auth-copy { margin:6px 0 20px; color:var(--muted); font-size:12px; line-height:1.7; }.tabs { display:flex; border-bottom:1px solid var(--line); margin-bottom:17px; }.tabs button { background:none; padding:9px 3px; margin-right:22px; color:var(--muted); font-weight:600; border-bottom:2px solid transparent; }.tabs button.active { color:var(--mint-dark); border-bottom-color:var(--mint-dark); }.code-row { display:flex; gap:8px; }.code-row input { flex:1; }.code-btn { white-space:nowrap; border-radius:8px; background:var(--mint-soft); color:var(--mint-dark); padding:0 10px; font-size:12px; }.form-error { color:#d46b5e; font-size:11px; min-height:16px; }.full-btn { width:100%; margin-top:4px; }.hidden { display:none !important; }
@media (max-width:1050px) { .sidebar { width:205px; }.main { padding:24px; }.dashboard-grid { grid-template-columns:1fr 1fr; }.dashboard-grid .hero-card { grid-column:span 2; }.page-grid,.menu-layout,.pet-grid,.share-grid { grid-template-columns:1fr; } }
@media (max-width:720px) { .sidebar { width:64px; padding:18px 9px; }.brand { padding:1px 5px 23px; }.brand-name,.nav-label,.nav button span,.profile-text { display:none; }.brand-mark { width:38px; height:38px; }.nav button { justify-content:center; padding:11px 0; }.mini-profile { justify-content:center; padding-left:0; padding-right:0; }.main { padding:19px 14px 30px; }.topbar { margin-bottom:20px; }.page-title { font-size:22px; }.top-actions .btn-primary { padding:9px 10px; font-size:12px; }.dashboard-grid { grid-template-columns:1fr; }.dashboard-grid .hero-card { grid-column:auto; }.wide { grid-column:auto; }.stat-strip { grid-template-columns:repeat(3,1fr); }.chat-layout { height:calc(100vh - 101px); min-height:520px; grid-template-columns:1fr; }.chat-list { display:none; }.message-stream { padding:18px 14px; }.message-row { max-width:92%; }.chat-head { padding:14px; }.composer { padding:10px 12px 13px; }.quick-actions { overflow:auto; }.meal-row { grid-template-columns:53px 1fr auto; gap:7px; padding:10px; }.section-card { padding:16px; }.hero-card { padding:18px; }.two-col { grid-template-columns:1fr; } }
@media (max-width:720px) {
  body { padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
  .app-shell { display:block; }
  .sidebar { position:fixed; z-index:8; left:0; right:0; bottom:0; width:100%; height:calc(68px + env(safe-area-inset-bottom)); padding:5px 7px env(safe-area-inset-bottom); background:#fff; border-right:0; border-top:1px solid var(--line); box-shadow:0 -8px 22px rgba(32,47,58,.05); }
  .sidebar .brand,.sidebar .nav-label,.sidebar .sidebar-spacer,.sidebar .mini-profile { display:none; }
  .sidebar .nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; height:100%; }
  .sidebar .nav button { display:flex; flex-direction:column; justify-content:center; gap:3px; padding:4px 1px; border-radius:8px; min-width:0; font-size:10px; line-height:1.1; }
  .sidebar .nav button span { display:block; white-space:nowrap; }
  .sidebar .nav-icon { font-size:20px; width:auto; }
  .main { padding:calc(15px + env(safe-area-inset-top)) 14px 16px; }
  .topbar { align-items:flex-end; }
  .top-actions [data-action="notifications"] { display:none; }
  .chat-layout { height:calc(100dvh - 162px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height:400px; grid-template-columns:minmax(0,1fr); grid-template-rows:76px minmax(0,1fr); }
  .chat-list { display:flex; align-items:center; gap:8px; overflow-x:auto; overflow-y:hidden; padding:8px; border-right:0; border-bottom:1px solid var(--line); scrollbar-width:none; }
  .chat-list::-webkit-scrollbar { display:none; }
  .chat-list-head { order:2; flex:0 0 37px; margin:0; }
  .chat-list-head b,.chat-list .search { display:none; }
  .chat-list-head .icon-btn { width:36px; height:48px; }
  .chat-list .conversation { flex:0 0 147px; height:54px; margin:0; padding:7px; border:0; background:#f5f7f7; border-radius:9px; gap:6px; align-items:center; }
  .chat-list .conversation.active { margin:0; padding:7px; background:var(--mint-soft); }
  .chat-list .conversation .avatar { width:30px; height:30px; }
  .chat-list .conversation-top b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chat-list .conversation-time,.chat-list .conversation-preview,.chat-list .count { display:none; }
  .chat-main { min-height:0; }
  .message-stream { min-height:0; }
  .modal-backdrop { padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); }
  .modal,.auth-shell { max-height:calc(100dvh - 34px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y:auto; }
  .info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .share-grid .info-grid { grid-template-columns:1fr !important; }
}

/* Mobile app controls and interaction states */
button { -webkit-tap-highlight-color:transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid var(--mint-dark); outline-offset:2px; }
button svg { width:17px; height:17px; flex:none; vertical-align:middle; }
.btn-primary,.btn-light,.link-btn,.send-btn,.logout-button,.btn-danger,.photo-actions button,.section-actions button { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.btn-primary,.btn-light,.icon-btn,.nav button,.conversation,.member-row,.quick-tile,.date-btn,.delete-btn { transition:background-color .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s; }
.btn-primary:active,.btn-light:active,.icon-btn:active,.nav button:active,.conversation:active,.quick-tile:active { transform:scale(.96); }
.icon-btn { display:inline-grid; place-items:center; flex:none; }
.icon-btn svg { width:19px; height:19px; }
.nav button { position:relative; }
.nav button .nav-icon { width:22px; height:22px; stroke-width:2.7; }
.nav button.active .nav-icon { stroke-width:3; filter:drop-shadow(0 2px 3px rgba(39,139,121,.12)); }
.mini-profile { width:100%; background:none; text-align:left; cursor:pointer; }
.mini-profile > svg { width:16px; height:16px; color:var(--muted); margin-left:auto; }
.page.active { animation:page-enter .28s ease-out both; }
.conversation { width:100%; background:transparent; text-align:left; color:inherit; }
.conversation .conversation-main,.conversation .conversation-top,.conversation .conversation-preview { display:block; }
.conversation .conversation-top { display:flex; }
.chat-list .conversation { width:100%; }
.chat-list .conversation[hidden] { display:none; }
.chat-head .icon-btn { width:34px; height:34px; }
.quick-actions button { display:inline-flex; gap:6px; align-items:center; white-space:nowrap; }
.quick-actions svg { width:14px; height:14px; }
.send-btn { min-width:76px; }
.shared-card img { display:block; width:min(220px,100%); max-height:130px; object-fit:cover; border-radius:7px; margin:9px 0 6px; }
.shared-card strong { display:flex; align-items:center; gap:5px; }
.shared-card strong svg { width:15px; height:15px; }
.menu-layout { grid-template-columns:minmax(0,1fr); }
.menu-date-line { display:flex; align-items:center; gap:10px; margin:0 0 14px; color:var(--muted); font-size:12px; }
.menu-date-line input { border:1px solid var(--line); border-radius:8px; padding:6px 9px; color:var(--ink); background:#fff; min-width:0; }
.date-switch { padding-bottom:3px; scrollbar-width:thin; }
.date-btn { flex:1 0 54px; }
.section-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.meal-row { grid-template-columns:66px minmax(0,1fr) auto; min-height:76px; }
.meal-row.has-photo { grid-template-columns:66px minmax(0,1fr) 58px auto; }
.meal-type { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.meal-type svg { width:22px; height:22px; color:#c79532; stroke-width:2.4; }
.meal-details { min-width:0; }
.meal-details p { overflow-wrap:anywhere; }
.meal-photo { width:54px; height:54px; border-radius:7px; object-fit:cover; background:#f2f4f5; }
.delete-btn { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; }
.delete-btn:hover { background:#fff0ee; color:#c8554a; }
.delete-btn svg { width:17px; height:17px; }
.empty-state { min-height:210px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); }
.empty-state > svg { width:28px; height:28px; color:#b9cbc5; }
.empty-state b { font-size:13px; color:#697981; }
.pet-notes { font-size:12px; color:var(--muted); line-height:1.7; margin:16px 0 0; }
.peach-dot { background:var(--peach); box-shadow:0 0 0 4px var(--peach-soft); }
.purple-dot { background:var(--purple); box-shadow:0 0 0 4px var(--purple-soft); }
.reminder-box { margin-top:24px; padding-top:17px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.reminder-box > div { display:flex; align-items:center; gap:9px; flex:1; min-width:140px; }
.reminder-box > div > svg { width:27px; height:27px; color:var(--mint-dark); }
.reminder-box b,.reminder-box small { display:block; }
.reminder-box b { font-size:12px; }
.reminder-box small { color:var(--muted); margin-top:3px; font-size:11px; }
.member-row { width:100%; display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid #f0f2f3; background:#fff; text-align:left; color:var(--ink); }
.member-row:last-child { border-bottom:0; }
.member-row:hover { background:#f7faf9; }
.member-row .member-main { min-width:0; }
.member-row .member-main b,.member-row .member-main span { display:block; }
.member-row .member-main span { color:var(--muted); font-size:11px; margin-top:3px; }
.member-row > svg { color:#a4b1b7; width:16px; height:16px; }
.member-access { color:var(--mint-dark); background:var(--mint-soft); border-radius:6px; padding:4px 6px; font-size:10px; white-space:nowrap; }
.share-type svg { width:17px; height:17px; color:#7469b9; }
.permissions-section { grid-column:1/-1; }
.permission-form { display:grid; gap:0; }
.permission-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.permission-row > span { display:flex; align-items:center; gap:9px; min-width:0; }
.permission-row > span svg { color:var(--mint-dark); width:17px; height:17px; }
.permission-row b { font-size:12px; font-weight:600; }
.permission-row select { min-width:126px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:8px 9px; color:var(--ink); }
.permission-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }
.account-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(290px,.7fr); gap:18px; align-items:start; }
.account-profile { overflow:hidden; padding:0; }
.account-cover { height:86px; background:#d9efe8; border-bottom:1px solid #cce5dd; }
.account-identity { display:flex; align-items:end; gap:15px; padding:0 20px 17px; margin-top:-28px; }
.account-avatar { width:68px; height:68px; border:4px solid #fff; border-radius:18px; display:grid; place-items:center; background:var(--mint-dark); color:#fff; font-size:26px; font-weight:800; flex:none; }
.account-identity > div:nth-child(2) { min-width:0; flex:1; padding-bottom:2px; }
.account-identity h2 { font-size:19px; margin:0; }
.account-identity p { font-size:11px; color:var(--muted); line-height:1.5; margin:4px 0 0; }
.account-facts { padding:16px 20px 20px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.account-facts span,.account-facts b { display:block; overflow-wrap:anywhere; }
.account-facts span { color:var(--muted); font-size:11px; }
.account-facts b { font-size:12px; margin-top:5px; }
.setting-line { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); font-size:12px; }
.setting-line span { display:flex; align-items:center; gap:9px; }
.setting-line svg { color:var(--mint-dark); width:18px; height:18px; }
.setting-line b { color:var(--muted); font-size:11px; font-weight:500; text-align:right; }
.logout-button { width:100%; margin-top:18px; border-radius:9px; padding:11px 14px; color:#b74843; background:#fff0ee; font-weight:700; }
.logout-button:hover { background:#ffe5e1; }
.auth-wrap { position:fixed; inset:0; z-index:15; display:grid; place-items:center; padding:20px; background:var(--bg); overflow:auto; }
.auth-shell { animation:modal-pop .32s cubic-bezier(.2,.8,.2,1) both; }
.auth-hint { color:var(--muted); font-size:11px; text-align:center; margin:17px 0 0; line-height:1.6; }
.modal-backdrop { animation:backdrop-in .2s ease-out both; }
.modal-backdrop .modal { animation:modal-pop .25s cubic-bezier(.2,.8,.2,1) both; }
.modal-backdrop.closing { animation:backdrop-out .19s ease-in both; }
.modal-backdrop.closing .modal { animation:modal-away .19s ease-in both; }
.modal-wide { width:min(550px,100%); }
.modal-compact { width:min(390px,100%); }
.modal-head { margin-bottom:14px; }
.close-btn { display:grid; place-items:center; }
.close-btn svg { width:17px; height:17px; }
.modal-actions { display:flex; justify-content:flex-end; align-items:center; gap:9px; margin-top:8px; flex-wrap:wrap; }
.modal-intro,.confirm-copy { color:#6a7981; line-height:1.7; font-size:13px; margin:0 0 16px; }
.btn-danger { background:#c8554a; color:#fff; border-radius:9px; padding:10px 15px; font-weight:700; }
.btn-danger:hover { background:#b4473e; }
.link-danger { background:none; color:#ba4b43; font-weight:600; font-size:12px; }
.split-actions { justify-content:space-between; }
.photo-actions { display:flex; gap:8px; flex-wrap:wrap; }
.photo-preview { position:relative; margin-top:6px; width:min(100%,270px); border-radius:9px; overflow:hidden; background:#f3f6f7; }
.photo-preview img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.photo-preview .icon-btn { position:absolute; top:8px; right:8px; background:#fff; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.member-modal-identity,.group-info { display:flex; align-items:center; gap:11px; padding:10px 0 15px; }
.member-modal-identity b,.member-modal-identity small,.group-info b,.group-info small { display:block; }
.member-modal-identity small,.group-info small { color:var(--muted); font-size:11px; margin-top:3px; }
.check-row { display:flex; gap:9px; flex-wrap:wrap; }
.check-row label { display:flex; align-items:center; gap:7px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:12px; }
.check-row input { accent-color:var(--mint-dark); }
.quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.quick-tile { display:flex; align-items:center; gap:9px; min-height:62px; padding:12px; border:1px solid var(--line); border-radius:9px; background:#f8faf9; text-align:left; color:var(--ink); font-weight:600; }
.quick-tile:hover { background:var(--mint-soft); border-color:#cee9e0; }
.quick-tile svg { width:20px; height:20px; color:var(--mint-dark); }
.toast { position:fixed; z-index:30; left:50%; bottom:24px; transform:translateX(-50%); max-width:min(90vw,400px); padding:10px 15px; border-radius:8px; background:#223632; color:#fff; font-size:12px; text-align:center; box-shadow:0 10px 28px rgba(22,42,36,.23); animation:toast-in .22s ease-out both; }
.toast.leaving { animation:toast-out .18s ease-in both; }
@keyframes page-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes backdrop-out { from { opacity:1; } to { opacity:0; } }
@keyframes modal-pop { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes modal-away { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(9px) scale(.985); } }
@keyframes toast-in { from { opacity:0; transform:translate(-50%,10px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes toast-out { from { opacity:1; transform:translate(-50%,0); } to { opacity:0; transform:translate(-50%,8px); } }
@media (max-width:1050px) { .account-layout { grid-template-columns:1fr; } }
@media (max-width:720px) {
  .sidebar .nav { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .sidebar .nav button { gap:4px; }
  .sidebar .nav button .nav-icon { width:23px; height:23px; stroke-width:2.8; }
  .sidebar .nav button.active .nav-icon { background:#d8eee7; width:37px; height:31px; padding:4px 7px; border-radius:9px; }
  .top-actions .icon-btn { display:inline-grid; }
  .section-head { align-items:flex-start; flex-wrap:wrap; }
  .section-actions { width:100%; justify-content:flex-start; }
  .section-actions .btn-primary { flex:1; }
  .meal-row { grid-template-columns:48px minmax(0,1fr) auto; }
  .meal-row.has-photo { grid-template-columns:48px minmax(0,1fr) 48px auto; }
  .meal-photo { width:46px; height:46px; }
  .meal-type svg { width:19px; height:19px; }
  .meal-type b { font-size:11px; }
  .account-facts { grid-template-columns:1fr 1fr; }
  .account-identity { flex-wrap:wrap; align-items:center; }
  .account-identity > .btn-light { width:100%; }
  .permission-row { align-items:flex-start; flex-direction:column; gap:7px; }
  .permission-row select { width:100%; }
  .permission-actions > button { flex:1; }
  .chat-list .conversation { width:auto; }
  .chat-list .conversation .conversation-main { display:block; }
  .chat-list .conversation .conversation-top { display:flex; }
  .chat-list .conversation .conversation-preview { display:none; }
  .toast { bottom:calc(82px + env(safe-area-inset-bottom)); }
  .modal-actions > button { min-height:40px; }
}
@media (max-width:380px) {
  .sidebar .nav button { font-size:9px; }
  .top-actions .btn-primary span { display:none; }
  .top-actions .btn-primary { width:38px; height:38px; padding:0; }
  .quick-grid { grid-template-columns:1fr 1fr; }
  .member-access { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
.pending-invites { margin-top:17px; padding-top:12px; border-top:1px solid var(--line); }
.pending-invites h3 { margin:0 0 7px; font-size:12px; color:#64747b; }
.pending-invites h3 span { margin-left:4px; color:var(--mint-dark); }
.pending-avatar { background:var(--mint-soft); color:var(--mint-dark); }
.pending-avatar svg { width:17px; height:17px; }
.account-gate { text-align:left; }
.gate-icon { width:45px; height:45px; display:grid; place-items:center; border-radius:12px; margin-bottom:17px; background:var(--mint-soft); color:var(--mint-dark); }
.gate-icon svg { width:23px; height:23px; }
.invite-summary { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:10px; padding:14px; margin:15px 0; border-radius:8px; background:#f6faf8; font-size:12px; }
.invite-summary span { color:var(--muted); }
.invite-summary b { text-align:right; overflow-wrap:anywhere; }
.gate-actions { display:flex; gap:9px; }
.gate-actions > button { flex:1; }
.account-gate .logout-button { margin-top:13px; }