:root {
  --night: #0b1028; --blue: #73a7ff; /* legacy tokens retained for compatibility; active palette remains unchanged below */
  --night: #f3edf2; --night-mid: #e8dfe8; --panel: rgba(255, 251, 247, .72); --line: rgba(88, 65, 76, .14);
  --ink: #30252b; --muted: #89747e; --soft: #66545e; --blue: #9a7790; --yellow: #e9a04f; --rose: #c86a73;
  font-family: "Avenir Next", "SF Pro Display", Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink); background: var(--night); font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--night); color: var(--ink); }
button, input { font: inherit; } button { cursor: pointer; }
.app-shell { min-height: 100vh; background-color: var(--night); background-image: radial-gradient(circle at 14% 10%, rgba(255,255,255,.72) 0 1px, transparent 1.5px), radial-gradient(circle at 78% 18%, rgba(255,255,255,.58) 0 1px, transparent 1.5px), radial-gradient(circle at 62% 64%, rgba(255,255,255,.5) 0 1px, transparent 1.5px); background-size: 240px 210px, 320px 280px, 280px 300px; display: flex; flex-direction: column; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 5; background: rgba(243,237,242,.78); backdrop-filter: blur(18px); }
.topbar-spacer { flex: 1; }
.pet-switch, .icon-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.55); color: var(--ink); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.pet-picker { position: relative; }
.account-picker .pet-switch { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.account-picker .pet-picker-option { text-align: center; }
.account-picker .pet-picker-menu { min-width: 0; width: 100%; padding: 0; overflow: hidden; border-radius: 14px; }
.account-picker .pet-picker-option { min-height: 36px; padding: 0 6px; border-radius: inherit; }
.pet-picker-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px; padding: 7px; border: 1px solid rgba(255,255,255,.72); border-radius: 16px; background: rgba(255,251,247,.88); box-shadow: 0 14px 38px rgba(75,47,62,.16); backdrop-filter: blur(22px); }
.pet-picker-option, .pet-picker-add { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; color: var(--soft); background: transparent; text-align: left; }
.pet-picker-option:hover, .pet-picker-option.active, .pet-picker-add:hover { color: var(--ink); background: rgba(154,119,144,.13); }
.pet-picker-add { margin-top: 4px; border-top: 1px solid var(--line); }
.icon-delete { color: var(--rose); }
.main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 38px 0 130px; flex: 1; }
.hero { position: relative; min-height: 360px; display: flex; flex-direction: column; justify-content: center; padding: 26px 0 34px; }
.pet-avatar { position: absolute; right: 4%; bottom: 18%; z-index: 0; width: 132px; height: 132px; object-fit: cover; border: 5px solid rgba(255,255,255,.72); border-radius: 50%; box-shadow: 0 14px 32px rgba(75,47,62,.18); }
.page-profile > :not(.pet-hero-photo) { position: relative; z-index: 1; }
.has-pet-photo::before { display: none; }
.pet-hero-photo { position: absolute; right: 0; bottom: 0; width: 48%; height: 100%; object-fit: cover; border-radius: 28px; z-index: -1; mask-image: linear-gradient(90deg, transparent 0%, black 28%, black 100%); }
.photo-preview { width: 100px; height: 100px; object-fit: cover; border-radius: 12px; }
.modal-list { line-height: 1.7; padding-left: 22px; }
.reminder-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 12px 0; }
.reminder-row p { margin: 0; }
.sheet-form textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.58); font: inherit; resize: vertical; }
.page-hero { isolation: isolate; overflow: hidden; padding-right: 48%; }
.page-hero::before { content: ""; position: absolute; z-index: -1; right: 0; bottom: 0; width: 48%; height: 100%; border-radius: 28px; background-position: center; background-size: cover; opacity: .62; mask-image: linear-gradient(90deg, transparent 0%, black 28%, black 100%); }
.page-hero::after { z-index: -1; }
.page-home::before { background-image: url("https://images.unsplash.com/photo-1558788353-f76d92427f16?auto=format&fit=crop&w=900&q=82"); }
.page-food::before { background-image: url("https://images.unsplash.com/photo-1519052537078-e6302a4968d4?auto=format&fit=crop&w=900&q=82"); }
.page-health::before { background-image: url("https://images.unsplash.com/photo-1543852786-1cf6624b9987?auto=format&fit=crop&w=900&q=82"); }
.page-travel::before { background-image: url("https://images.unsplash.com/photo-1552053831-71594a27632d?auto=format&fit=crop&w=900&q=82"); }
.page-map::before { background-image: url("https://images.unsplash.com/photo-1548199973-03cce0bbc87b?auto=format&fit=crop&w=900&q=82"); }
.page-profile::before { background-image: url("https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?auto=format&fit=crop&w=900&q=82"); }
.hero::after { content: ""; width: 92px; height: 46px; border: 1px solid rgba(105,77,94,.4); border-top-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(-16deg); position: absolute; left: 8%; bottom: 42px; opacity: .7; }
.eyebrow { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
h1, h2, h3, p { margin-top: 0; } h1 { font-size: clamp(42px, 7vw, 82px); line-height: .98; letter-spacing: -.06em; margin-bottom: 22px; font-weight: 300; } h2 { font-size: 18px; line-height: 1.4; margin-bottom: 14px; }
.hero h1 strong { font-weight: 600; } .hero-copy { max-width: 510px; color: var(--soft); font-size: 17px; line-height: 1.6; }
.location { color: var(--soft); font-size: 18px; } .location strong { display: block; color: var(--ink); font-size: 34px; font-weight: 500; margin-top: 4px; }
.temperature { display: flex; align-items: flex-start; gap: 4px; margin: 24px 0 18px; font-size: clamp(90px, 15vw, 170px); line-height: .82; letter-spacing: -.1em; font-weight: 200; } .temperature sup { font-size: 34px; line-height: 1; letter-spacing: 0; margin-top: 9px; }
.range { display: flex; gap: 30px; color: var(--soft); font-size: 18px; } .range strong { color: var(--ink); font-size: 34px; font-weight: 300; margin-left: 5px; }
.input-card { display: flex; gap: 10px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(18px); }
.smart-input input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 16px; } .smart-input input::placeholder { color: var(--muted); }
.primary, .secondary, .danger { min-height: 42px; padding: 0 17px; border-radius: 12px; font-weight: 600; border: 1px solid transparent; } .primary { background: var(--ink); color: #fffaf7; } .secondary { background: rgba(255,255,255,.55); color: var(--ink); border-color: var(--line); } .danger { background: rgba(200,106,115,.12); color: var(--rose); border-color: rgba(200,106,115,.32); }
.chips { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 13px; } .chip { border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; color: var(--soft); background: rgba(255,255,255,.06); }
.section { margin-top: 30px; } .section-heading { display: flex; align-items: baseline; justify-content: space-between; } .section-heading .muted { color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; backdrop-filter: blur(18px); box-shadow: 0 15px 50px rgba(0,0,0,.14); } .card-title { display: flex; justify-content: space-between; gap: 10px; align-items: start; margin-bottom: 8px; } .card p { color: var(--soft); line-height: 1.6; }
.status { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-size: 12px; background: rgba(154,119,144,.16); color: #78586d; white-space: nowrap; } .status.warn { background: rgba(233,160,79,.16); color: #a96725; } .status.risk { background: rgba(200,106,115,.15); color: #a64f5b; }
.progress { height: 7px; background: rgba(88,65,76,.12); border-radius: 999px; overflow: hidden; margin: 14px 0; } .progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--yellow)); width: 40%; }
.forecast { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; backdrop-filter: blur(18px); overflow: hidden; } .forecast-title { color: var(--soft); font-size: 14px; margin-bottom: 18px; } .forecast-strip { display: grid; grid-template-columns: repeat(6, minmax(80px, 1fr)); gap: 8px; border-top: 1px solid var(--line); padding-top: 17px; } .forecast-item { color: var(--muted); text-align: center; } .forecast-item strong { display: block; color: var(--ink); font-size: 16px; margin: 8px 0 12px; } .forecast-item .weather-icon { display: block; color: var(--yellow); font-size: 26px; height: 32px; } .forecast-item em { display: block; color: var(--soft); font-style: normal; font-size: 16px; }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; position: relative; padding-top: 18px; } .timeline::before { content: ""; position: absolute; left: 2%; right: 2%; top: 29px; border-top: 1px solid rgba(105,77,94,.28); } .timeline-item { position: relative; text-align: center; color: var(--muted); font-size: 12px; } .timeline-dot { width: 12px; height: 12px; margin: 5px auto 11px; border-radius: 50%; background: var(--muted); border: 3px solid var(--night-mid); position: relative; z-index: 1; } .timeline-item.active { color: var(--ink); } .timeline-item.active .timeline-dot { background: var(--yellow); box-shadow: 0 0 0 4px rgba(233,160,79,.18); } .timeline-item strong { display: block; font-size: 14px; font-weight: 500; }
.assistant-result { margin: 18px 0 0; max-width: 820px; border-color: rgba(154,119,144,.32); } .assistant-result .card-title { align-items: center; } .assistant-prompt { color: var(--muted); font-size: 13px; margin-bottom: 12px; } .assistant-text { color: var(--ink) !important; line-height: 1.7 !important; } .assistant-text p { margin: 0 0 10px; } .assistant-text h3, .assistant-text h4 { margin: 17px 0 8px; color: var(--ink); line-height: 1.35; } .assistant-text h3:first-child, .assistant-text h4:first-child { margin-top: 0; } .assistant-text ul, .assistant-text ol { margin: 7px 0 13px; padding-left: 21px; } .assistant-text li { padding-left: 3px; margin: 5px 0; } .assistant-text strong { font-weight: 700; } .assistant-text code { padding: 2px 5px; border-radius: 5px; background: rgba(154,119,144,.12); font-size: .92em; } .assistant-thinking { color: var(--muted) !important; } .assistant-thinking i, .assistant-dots i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: linear-gradient(135deg, #c889d8, #6e9cff); animation: assistant-dot 1s infinite ease-in-out; } .assistant-thinking i:nth-child(2), .assistant-dots i:nth-child(2) { animation-delay: .15s; } .assistant-thinking i:nth-child(3), .assistant-dots i:nth-child(3) { animation-delay: .3s; } .assistant-dots { display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; } .assistant-warning { color: #a96725 !important; font-size: 13px; } .assistant-error { border-color: rgba(200,106,115,.35); }
@keyframes assistant-caret { 50% { opacity: 0; } } @keyframes assistant-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.assistant-placeholder { min-height: 126px; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(48,37,43,.08); backdrop-filter: blur(0); animation: sheet-backdrop-in .28s ease-out forwards; }
.pet-sheet { width: min(620px, 100%); max-height: min(86vh, 760px); overflow: auto; padding: 22px 24px 24px; border: 1px solid rgba(255,255,255,.68); border-radius: 28px; background: rgba(255,251,247,.78); box-shadow: 0 20px 70px rgba(75,47,62,.22); backdrop-filter: blur(26px); animation: sheet-rise .3s ease-out; }
.sheet-handle { width: 44px; height: 4px; margin: -8px auto 18px; border-radius: 999px; background: rgba(102,84,94,.28); }
.sheet-help { color: var(--muted); line-height: 1.5; }
.sheet-form { display: grid; gap: 12px; }
.sheet-form label { display: grid; gap: 6px; color: var(--soft); font-size: 13px; }
.sheet-form .file-field { justify-items: stretch; text-align: left; }
.sheet-form input[type="file"] { width: 100%; height: 42px; min-height: 42px; margin: 0; padding: 0 12px; line-height: 40px; text-align: left; }
.sheet-form input[type="file"]::file-selector-button { height: 30px; margin-right: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: rgba(255,255,255,.72); cursor: pointer; vertical-align: middle; }
.sheet-form input, .sheet-form select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; outline: 0; color: var(--ink); background: rgba(255,255,255,.58); }
.sheet-form input:focus, .sheet-form select:focus { border-color: rgba(154,119,144,.62); box-shadow: 0 0 0 3px rgba(154,119,144,.12); }
.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; }
@keyframes sheet-backdrop-in { to { background: rgba(48,37,43,.18); backdrop-filter: blur(26px); } }
@keyframes sheet-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.nav { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 6; width: min(620px, calc(100% - 32px)); padding: 6px; border: 1px solid rgba(154,119,144,.45); border-radius: 999px; background: rgba(255,248,245,.82); backdrop-filter: blur(22px); box-shadow: 0 12px 45px rgba(75,47,62,.16); } .nav-inner { display: grid; grid-template-columns: repeat(6, 1fr); } .nav button { min-height: 46px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font-size: 16px; font-weight: 500; line-height: 1.4; } .nav button.active { color: var(--ink); background: rgba(154,119,144,.17); }
@media (max-width: 720px) { .topbar { height: 62px; padding: 0 16px; } .main { width: calc(100% - 28px); padding-top: 20px; } .hero { min-height: 440px; } .hero::after { left: 5%; bottom: 24px; } .temperature { font-size: 116px; } .grid { grid-template-columns: 1fr; } .forecast-strip { overflow-x: auto; grid-template-columns: repeat(6, 80px); } .nav { bottom: 12px; } .nav button { font-size: 15px; padding: 0 2px; } .sheet-backdrop { padding: 10px; } .pet-sheet { max-height: 92vh; padding: 18px 16px 18px; } .sheet-grid { grid-template-columns: 1fr; } }

.nav button { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
@media (hover: hover) {
  .nav button:hover { color: var(--ink); background: rgba(154,119,144,.11); box-shadow: inset 0 0 0 1px rgba(154,119,144,.16); }
  .nav button.active:hover { background: rgba(154,119,144,.24); }
}
.nav button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* Theme changes only colors; the original light layout remains intact. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --night: #17151f; --night-mid: #27232f; --panel: rgba(39,35,47,.88); --line: rgba(216,195,212,.18);
  --ink: #f2e9f0; --muted: #b4a0b0; --soft: #d0bdcb; --blue: #c7a0ba; --yellow: #efb56c; --rose: #ee98a1;
}
[data-theme="dark"] .topbar { background: rgba(23,21,31,.85); }
[data-theme="dark"] :is(.pet-switch,.icon-button,.secondary,.sheet-form input,.sheet-form select,.sheet-form textarea) { background: rgba(65,55,71,.65); }
[data-theme="dark"] :is(.pet-picker-menu,.pet-sheet,.nav) { background: rgba(39,35,47,.94); border-color: var(--line); }
[data-theme="dark"] .primary { background: #c7a0ba; color: #211c28; }
[data-theme="dark"] .status { color: #d2acc9; }
[data-theme="dark"] :is(.status.warn,.assistant-warning) { color: #efb56c !important; }
[data-theme="dark"] .status.risk { color: #ee98a1; }
[data-theme="dark"] .sheet-form input[type="file"]::file-selector-button { background: #403747; }
[data-assistant-panel] { overflow-anchor: none; }
[data-assistant-panel] [hidden] { display: none !important; }
.chat-panel { position: relative; width: 100%; max-width: 820px; height: 540px; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-toolbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chat-toolbar h2 { min-width: 0; margin: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-toolbar-actions { display: flex; flex: none; gap: 8px; }
.chat-toolbar .chip { font-size: 13px; padding: 7px 11px; }
.chat-body { position: relative; display: flex; flex: 1; min-height: 0; }
.chat-scroll { flex: 1; min-height: 0; padding: 22px; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-gutter: stable; }
.chat-empty { height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; color: var(--muted); }
.chat-empty h3 { color: var(--ink); font-size: 20px; font-weight: 500; }
.chat-turn + .chat-turn { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.chat-user { width: fit-content; max-width: 90%; margin: 0 0 20px auto; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: rgba(154,119,144,.14); }
.chat-user .assistant-prompt { margin: 5px 0 0; color: var(--ink); font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-role { color: var(--muted); font-size: 12px; }
.chat-message-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.chat-assistant .assistant-text { overflow-wrap: anywhere; }
.assistant-streaming { white-space: pre-wrap; }
.assistant-streaming::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 3px; background: var(--blue); vertical-align: -.12em; animation: assistant-caret 1s step-end infinite; }
.chat-alert { flex: none; margin: 0; padding: 10px 20px; }
.chat-jump-button { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--night-mid); box-shadow: 0 3px 14px rgba(0,0,0,.14); }
.chat-jump-button:hover { background: var(--panel); }
.chat-jump-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.chat-text-button { border: 0; padding: 3px 0; background: transparent; color: var(--soft); font-size: 12px; }
button:disabled { cursor: default; opacity: .5; }
.chat-history-sheet { display: flex; flex-direction: column; width: min(540px, 100%); height: min(680px, 86vh); }
.chat-history-search { flex: none; padding: 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font: inherit; }
.chat-history-list { flex: 1; min-height: 0; overflow-y: auto; margin-bottom: 14px; }
.chat-history-item { display: block; width: 100%; margin-bottom: 8px; padding: 13px 14px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); }
.chat-history-item:hover, .chat-history-item.active { background: rgba(154,119,144,.12); }
.chat-history-item strong, .chat-history-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-item span { margin-top: 6px; color: var(--muted); font-size: 12px; }
.chat-history-item p { margin: 8px 0 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .chat-panel { height: 500px; } .chat-toolbar { padding: 12px; gap: 8px; } .chat-toolbar-actions { gap: 5px; } .chat-toolbar .chip { padding: 6px 9px; } .chat-scroll { padding: 16px; } }