:root {
  --ink: #17302d;
  --muted: #758682;
  --line: #e6eeec;
  --canvas: #f5f8f7;
  --paper: #ffffff;
  --green: #0b776d;
  --green-2: #13998a;
  --mint: #dff3ee;
  --coral: #e97665;
  --rose: #df6e78;
  --blue: #5f83d9;
  --amber: #e2a44a;
  --violet: #7466c6;
  --shadow: 0 16px 40px rgba(19, 72, 65, .10);
  --soft-shadow: 0 8px 24px rgba(28, 76, 70, .08);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #dce8e5;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; overflow: hidden; background: #dfeae7; }
button, input, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(20, 147, 134, .28); outline-offset: 2px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.desktop-backdrop { position: fixed; inset: 0; pointer-events: none; overflow: hidden; background: radial-gradient(circle at 20% 18%, rgba(255,255,255,.5), transparent 28%), linear-gradient(135deg, #d7e9e5 0%, #edf2ee 45%, #c8ddd8 100%); }
.desktop-backdrop::before, .desktop-backdrop::after { content: ""; position: absolute; border: 1px solid rgba(12,119,109,.1); border-radius: 50%; }
.desktop-backdrop::before { width: 560px; height: 560px; left: -180px; bottom: -240px; box-shadow: 0 0 0 70px rgba(255,255,255,.12), 0 0 0 140px rgba(255,255,255,.08); }
.desktop-backdrop::after { width: 420px; height: 420px; right: -120px; top: -150px; box-shadow: 0 0 0 60px rgba(255,255,255,.13); }
.backdrop-copy { position: absolute; left: max(5vw, calc(50vw - 540px)); top: 50%; width: 330px; transform: translateY(-50%); }
.backdrop-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: white; background: var(--green); box-shadow: 0 14px 26px rgba(11,119,109,.2); }
.backdrop-mark svg { width: 30px; height: 30px; fill: currentColor; stroke-width: 1.4; }
.backdrop-copy > p { margin: 22px 0 8px; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .22em; }
.backdrop-copy h1 { margin: 0 0 20px; color: #15413c; font-family: Georgia, "Songti SC", serif; font-size: 36px; line-height: 1.35; font-weight: 500; }
.backdrop-copy > span:last-child { color: #718580; font-size: 14px; }

.app-shell { position: relative; width: min(100%, 460px); height: min(100vh, 880px); margin: max(0px, calc((100vh - 880px) / 2)) auto 0; overflow: clip; background: var(--canvas); border-radius: 34px; box-shadow: 0 30px 90px rgba(29, 67, 62,.24), 0 0 0 1px rgba(255,255,255,.72); }
.status-bar { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 35px; padding: 12px 22px 0; display: flex; align-items: flex-start; justify-content: space-between; color: white; font-size: 11px; font-weight: 750; letter-spacing: .02em; pointer-events: none; }
.status-icons { display: flex; align-items: center; gap: 5px; }
.status-icons i { position: relative; width: 17px; height: 10px; display: block; border-bottom: 2px solid currentColor; }
.status-icons i::before, .status-icons i::after { content: ""; position: absolute; bottom: 0; width: 2px; background: currentColor; }
.status-icons i::before { left: 4px; height: 5px; box-shadow: 4px -2px 0 currentColor, 8px -5px 0 currentColor; }
.status-icons b { padding: 2px 5px; color: var(--green); background: white; border-radius: 5px; font-size: 9px; }
.app-shell[data-current-page="question"] .status-bar { color: var(--ink); }
.app-shell[data-current-page="question"] .status-icons b { color: white; background: var(--green); }
.screen-viewport { position: absolute; inset: 0 0 78px; overflow: hidden; }
.screen { position: absolute; inset: 0; display: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; background: var(--canvas); }
.screen::-webkit-scrollbar { display: none; }
.screen.active { display: block; animation: screen-in .28s ease-out; }
@keyframes screen-in { from { opacity: .45; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.page-content { padding: 0 18px 32px; }
.eyebrow { display: block; margin-bottom: 5px; color: var(--green-2); font-size: 9px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.elevated-card { background: var(--paper); border: 1px solid rgba(219,232,229,.8); box-shadow: var(--soft-shadow); border-radius: 22px; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; }
.icon-button svg { width: 18px; height: 18px; }
.notification-button { position: relative; color: white; background: rgba(255,255,255,.15); backdrop-filter: blur(10px); }
.notification-button > span { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #ffb15a; box-shadow: 0 0 0 2px var(--green); }
.section-block { margin-top: 29px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 2px 14px; }
.section-heading.inline { align-items: center; }
.section-heading h2, .card-heading h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 21px; line-height: 1.15; font-weight: 650; letter-spacing: .01em; }
.text-button { display: flex; align-items: center; gap: 1px; padding: 6px 0; border: 0; color: var(--green); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.text-button svg { width: 13px; height: 13px; }

/* Home */
.home-hero { position: relative; min-height: 262px; padding: 48px 24px 40px; overflow: hidden; color: white; background: radial-gradient(circle at 85% 30%, rgba(83,212,185,.55), transparent 27%), linear-gradient(145deg, #075f59 0%, #0b776d 54%, #17988a 100%); border-radius: 0 0 34px 34px; }
.home-hero::after { content: ""; position: absolute; width: 210px; height: 210px; right: -86px; bottom: -95px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.035), 0 0 0 70px rgba(255,255,255,.025); }
.top-actions { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.location-pill { padding: 8px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; color: white; background: rgba(255,255,255,.09); font-size: 11px; font-weight: 650; }
.pulse-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #78efad; box-shadow: 0 0 0 4px rgba(120,239,173,.13); }
.greeting { position: relative; z-index: 1; margin-top: 31px; }
.greeting p { margin: 0 0 6px; color: rgba(255,255,255,.74); font-size: 13px; }
.greeting h1 { position: relative; z-index: 2; margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 32px; line-height: 1.32; font-weight: 520; letter-spacing: .02em; }
.hero-heart { position: absolute; right: 8px; bottom: -2px; width: 104px; height: 95px; display: grid; place-items: center; color: #eab1a1; transform: rotate(-5deg); }
.hero-heart::before { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.hero-heart svg { width: 80px; height: 80px; fill: rgba(245,177,160,.18); stroke-width: 1.2; filter: drop-shadow(0 10px 16px rgba(0,0,0,.12)); }
.heart-line { position: absolute; left: -16px; top: 48%; width: 50px; height: 12px; border-top: 2px solid rgba(255,255,255,.7); clip-path: polygon(0 42%,33% 42%,41% 0,51% 100%,61% 42%,100% 42%,100% 60%,64% 60%,51% 100%,39% 30%,35% 60%,0 60%); background: rgba(255,255,255,.65); }
.home-content { position: relative; z-index: 2; margin-top: -24px; }
.overview-card { padding: 20px 18px 17px; }
.card-heading { display: flex; justify-content: space-between; align-items: center; }
.metric-row { display: grid; grid-template-columns: .8fr 1.25fr .95fr; margin-top: 20px; }
.metric { position: relative; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 7px; padding: 0 9px; border-right: 1px solid var(--line); }
.metric:first-child { padding-left: 0; }
.metric:last-child { padding-right: 0; border-right: 0; }
.metric-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; font-size: 8px; font-weight: 800; }
.metric-icon svg { width: 15px; height: 15px; fill: currentColor; }
.metric-icon.rose { color: var(--rose); background: #fbe8ea; }
.metric-icon.blue { color: #4f73bd; background: #e9effb; }
.metric-icon.mint { color: var(--green); background: var(--mint); }
.metric strong { align-self: end; font-size: 17px; line-height: 1; letter-spacing: -.03em; }
.metric small { margin-top: 4px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.status-note { display: flex; align-items: center; gap: 9px; margin-top: 17px; padding: 10px; border-radius: 13px; color: #526d68; background: #f0f7f5; }
.status-note > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--green); background: white; }
.status-note svg { width: 13px; height: 13px; }
.status-note p { margin: 0; font-size: 10px; }
.status-note strong { color: var(--green); }
.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.service-card { position: relative; display: grid; grid-template-columns: 42px 1fr 18px; grid-template-rows: 21px 17px; align-items: center; column-gap: 11px; min-height: 84px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; text-align: left; background: white; box-shadow: 0 8px 19px rgba(24,78,71,.06); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.service-card:hover { transform: translateY(-2px); box-shadow: 0 13px 24px rgba(24,78,71,.1); }
.service-card > span { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: currentColor; }
.service-card > span svg { width: 21px; height: 21px; }
.service-card b { align-self: end; font-size: 13px; }
.service-card small { align-self: start; color: var(--muted); font-size: 9px; white-space: nowrap; }
.service-card > i { grid-column: 3; grid-row: 1 / 3; color: #acbab7; }
.service-card > i svg { width: 14px; height: 14px; }
.service-card.coral > span { color: #c85e51; background: #fce9e5; }
.service-card.teal > span { color: var(--green); background: #ddf1ed; }
.service-card.violet > span { color: #6555b5; background: #ece9fa; }
.service-card.amber > span { color: #bd7d22; background: #fbf0dd; }
.article-card { position: relative; min-height: 175px; margin-top: 30px; overflow: hidden; border-radius: 24px; color: white; background: linear-gradient(125deg, #203e44, #0a7069 65%, #149989); box-shadow: var(--shadow); }
.article-visual { position: absolute; inset: 0 0 0 52%; display: grid; place-items: center; }
.article-visual svg { position: relative; z-index: 2; width: 104px; height: 104px; color: #f0b0a4; fill: rgba(240,176,164,.2); stroke-width: 1.1; }
.article-visual .orb { position: absolute; border-radius: 50%; background: rgba(255,255,255,.07); }
.article-visual .one { width: 150px; height: 150px; right: -28px; top: -42px; }
.article-visual .two { width: 70px; height: 70px; left: 6px; bottom: -12px; }
.article-copy { position: relative; z-index: 3; padding: 24px 20px; }
.article-copy > span { font-size: 9px; color: rgba(255,255,255,.66); letter-spacing: .03em; }
.article-copy h3 { margin: 11px 0 17px; font-family: Georgia, "Songti SC", serif; font-size: 20px; line-height: 1.48; font-weight: 520; }
.article-copy button { display: flex; align-items: center; padding: 0; border: 0; color: #a6e0d4; background: transparent; font-size: 10px; cursor: pointer; }
.article-copy button svg { width: 13px; height: 13px; }

/* Shared page headers */
.page-header { position: relative; min-height: 138px; padding: 60px 22px 23px; display: flex; align-items: flex-end; justify-content: space-between; overflow: hidden; }
.page-header::after { content: ""; position: absolute; width: 135px; height: 135px; right: -45px; top: 4px; border: 1px solid currentColor; border-radius: 50%; opacity: .07; box-shadow: 0 0 0 25px currentColor; }
.page-header > * { position: relative; z-index: 2; }
.page-header h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 29px; font-weight: 560; }
.pale-header { color: var(--ink); background: linear-gradient(145deg, #e5f4f0, #f4f8f7); }
.green-header, .profile-header { color: white; background: linear-gradient(145deg, #075f59, #118d80); }
.green-header .eyebrow, .profile-header .eyebrow { color: #9bd7cd; }
.header-action { display: flex; align-items: center; gap: 5px; padding: 8px 11px; border: 1px solid rgba(11,119,109,.15); border-radius: 99px; color: var(--green); background: white; font-size: 10px; font-weight: 750; box-shadow: 0 7px 15px rgba(20,95,85,.08); cursor: pointer; }
.header-action svg { width: 13px; height: 13px; }
.light-button { position: relative; z-index: 2; color: white; background: rgba(255,255,255,.13); font-weight: 800; }

/* Question */
#page-question { overflow: hidden; background: #f5f8f7; }
.chat-header { display: grid; grid-template-columns: 38px 1fr auto; align-items: end; gap: 10px; }
.chat-history-toggle { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #cfe2de; border-radius: 12px; color: var(--green); background: rgba(255,255,255,.82); box-shadow: 0 6px 14px rgba(26,82,75,.07); cursor: pointer; }
.chat-history-toggle svg { width: 17px; height: 17px; }
.chat-content { position: absolute; inset: 138px 0 72px; overflow-y: auto; padding-top: 16px; padding-bottom: 28px; scrollbar-width: none; }
.chat-content::-webkit-scrollbar { display: none; }
.ai-notice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid #f2dfb1; border-radius: 13px; color: #8c652b; background: #fff9e9; }
.ai-notice span { flex: 0 0 auto; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: white; background: #d8a543; font-size: 9px; font-weight: 850; }
.ai-notice p { margin: 0; font-size: 9px; line-height: 1.65; }
.assistant-intro { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; }
.ai-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 13px; color: white; background: linear-gradient(145deg, #087168, #15a090); box-shadow: 0 7px 17px rgba(11,119,109,.18); }
.ai-avatar svg { width: 19px; height: 19px; fill: rgba(255,255,255,.25); }
.assistant-intro > div:last-child > span { display: block; margin: 1px 0 5px; color: var(--muted); font-size: 9px; }
.assistant-intro p, .message.assistant p { margin: 0; padding: 13px 15px; border-radius: 4px 17px 17px 17px; color: #36504c; background: white; box-shadow: var(--soft-shadow); font-size: 12px; line-height: 1.75; }
.quick-questions { display: flex; flex-wrap: wrap; gap: 8px; margin: 23px 0 0 47px; }
.quick-questions > span { width: 100%; margin-bottom: 2px; color: var(--muted); font-size: 9px; }
.quick-questions button { padding: 9px 11px; border: 1px solid #d7e7e3; border-radius: 99px; color: #48655f; background: rgba(255,255,255,.78); font-size: 9px; cursor: pointer; }
.quick-questions button:hover { color: var(--green); border-color: #9acac2; background: white; }
.chat-messages { display: grid; gap: 16px; margin-top: 18px; }
.message { display: flex; gap: 10px; align-items: flex-start; }
.message.user { justify-content: flex-end; }
.message.user p { max-width: 78%; margin: 0; padding: 11px 14px; border-radius: 16px 4px 16px 16px; color: white; background: var(--green); font-size: 11px; line-height: 1.65; box-shadow: 0 8px 18px rgba(11,119,109,.15); }
.message.assistant p { max-width: calc(100% - 47px); }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 4px 17px 17px 17px; background: white; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #91aaa5; animation: typing 1s infinite alternate; }
.typing i:nth-child(2) { animation-delay: .2s; }.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes typing { to { transform: translateY(-4px); opacity: .45; } }
.chat-composer { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 35px 1fr 40px; align-items: center; gap: 7px; min-height: 72px; padding: 12px 15px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.composer-plus { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 50%; color: #718480; background: white; cursor: pointer; }
.composer-plus svg { width: 16px; height: 16px; }
.chat-composer label { display: block; }
.chat-composer input { width: 100%; height: 42px; padding: 0 14px; border: 1px solid transparent; border-radius: 15px; outline: 0; color: var(--ink); background: #f0f4f3; font-size: 11px; }
.chat-composer input:focus { border-color: #a8d0ca; background: white; }
.chat-composer input::placeholder { color: #a5b2af; }
.send-button { display: grid; place-items: center; width: 39px; height: 39px; border: 0; border-radius: 14px; color: white; background: var(--green); box-shadow: 0 7px 15px rgba(11,119,109,.2); cursor: pointer; }
.send-button svg { width: 17px; height: 17px; }
.chat-sidebar-backdrop { position: absolute; z-index: 11; inset: 0; width: 100%; border: 0; background: rgba(12,42,38,.38); backdrop-filter: blur(2px); }
.chat-sidebar-backdrop[hidden] { display: none; }
.chat-sidebar { position: absolute; z-index: 12; inset: 0 auto 0 0; display: flex; flex-direction: column; width: min(82%, 336px); padding: 48px 14px 20px; color: var(--ink); background: #f8faf9; box-shadow: 18px 0 42px rgba(15,54,49,.21); transform: translateX(-105%); visibility: hidden; transition: transform .28s ease, visibility .28s; }
.chat-sidebar.open { transform: translateX(0); visibility: visible; }
.chat-sidebar-head { display: grid; grid-template-columns: 42px 1fr 30px; align-items: center; gap: 10px; padding: 0 4px 15px; }
.sidebar-brand { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: white; background: linear-gradient(145deg, #087168, #16a08f); }
.sidebar-brand svg { width: 21px; height: 21px; fill: rgba(255,255,255,.2); }
.chat-sidebar-head > div { display: grid; gap: 3px; }
.chat-sidebar-head b { font-size: 13px; }.chat-sidebar-head small { color: var(--muted); font-size: 8px; }
.chat-sidebar-head > button { display: grid; place-items: center; width: 29px; height: 29px; border: 0; border-radius: 9px; color: #73837f; background: #e9efed; font-size: 19px; line-height: 1; cursor: pointer; }
.sidebar-new-chat { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 11px; border: 1px solid #badbd5; border-radius: 13px; color: var(--green); background: white; font-size: 10px; font-weight: 750; cursor: pointer; }
.sidebar-new-chat svg { width: 14px; height: 14px; }
.conversation-list { display: grid; gap: 4px; margin-top: 18px; overflow-y: auto; }
.conversation-group { margin: 11px 9px 4px; color: #98a6a3; font-size: 8px; font-weight: 750; letter-spacing: .08em; }
.conversation-item { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; width: 100%; min-height: 53px; padding: 8px 10px; border: 0; border-radius: 12px; text-align: left; color: #536965; background: transparent; cursor: pointer; }
.conversation-item > svg { width: 15px; height: 15px; }.conversation-item > span { display: grid; gap: 4px; min-width: 0; }.conversation-item b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.conversation-item small { color: #9aa7a4; font-size: 8px; }
.conversation-item:hover, .conversation-item.active { color: var(--green); background: #e7f3f0; }
.chat-sidebar-note { display: flex; align-items: center; gap: 6px; margin: auto 7px 0; color: #99a6a3; font-size: 8px; }.chat-sidebar-note svg { width: 13px; height: 13px; }

/* Knowledge graph */
.knowledge-content { padding-top: 16px; }
.knowledge-search { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; height: 46px; padding: 0 6px 0 12px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: var(--soft-shadow); }
.knowledge-search > svg { width: 16px; height: 16px; color: #8ca09c; }
.knowledge-search input { min-width: 0; height: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.knowledge-search input::placeholder { color: #9ba9a6; }
.knowledge-search button { padding: 8px 14px; border: 0; border-radius: 11px; color: white; background: var(--green); font-size: 10px; cursor: pointer; }
.segment-control { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 13px; padding: 4px; border-radius: 13px; background: #e9efed; }
.segment-control button { padding: 8px 4px; border: 0; border-radius: 10px; color: #71817e; background: transparent; font-size: 10px; cursor: pointer; }
.segment-control button.active { color: var(--green); background: white; box-shadow: 0 3px 8px rgba(38,81,75,.08); font-weight: 750; }
.graph-card { margin-top: 16px; padding: 18px 13px 13px; overflow: hidden; }
.graph-top { display: flex; align-items: center; justify-content: space-between; padding: 0 5px; }
.graph-top h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 19px; }
.live-label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.live-label i { width: 6px; height: 6px; border-radius: 50%; background: #43b995; box-shadow: 0 0 0 4px rgba(67,185,149,.12); }
.graph-stage { position: relative; height: 323px; margin: 5px 0 0; overflow: hidden; border-radius: 19px; background: radial-gradient(circle at center, rgba(11,119,109,.13), transparent 30%), linear-gradient(rgba(11,119,109,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(11,119,109,.026) 1px, transparent 1px), #f8fbfa; background-size: auto, 26px 26px, 26px 26px, auto; }
.graph-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.graph-lines path { fill: none; stroke: #c7d9d5; stroke-width: 1.2; stroke-dasharray: 3 5; }
.graph-lines .pulse-path { stroke: #24a494; stroke-width: 1.8; stroke-dasharray: 7 8; animation: dash 7s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -150; } }
.graph-node { --node-color: #70877f; position: absolute; left: var(--x); top: var(--y); display: grid; justify-items: center; gap: 5px; width: 86px; padding: 0; border: 0; transform: translate(-50%, -50%); color: #38534e; background: transparent; font-size: 9px; cursor: pointer; transition: opacity .2s, transform .2s; }
.graph-node:hover, .graph-node.selected { transform: translate(-50%, -50%) scale(1.08); }
.graph-node > span { display: grid; place-items: center; width: 19px; height: 19px; border: 4px solid white; border-radius: 50%; background: var(--node-color); box-shadow: 0 4px 12px color-mix(in srgb, var(--node-color), transparent 50%); }
.graph-node > b { padding: 4px 7px; border: 1px solid rgba(218,229,226,.9); border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: 0 4px 10px rgba(31,72,66,.05); white-space: nowrap; }
.graph-node.core { --node-color: var(--green); z-index: 2; width: 100px; }
.graph-node.core > span { width: 52px; height: 52px; border-width: 6px; color: white; }
.graph-node.core > span svg { width: 24px; height: 24px; fill: rgba(255,255,255,.22); }
.graph-node.core > b { color: var(--green); font-size: 11px; }
.graph-node.symptom { --node-color: var(--coral); }.graph-node.medicine { --node-color: var(--violet); }.graph-node.care { --node-color: var(--amber); }
.graph-node.filtered { opacity: .15; pointer-events: none; }
.node-detail { display: flex; gap: 11px; align-items: center; min-height: 77px; margin-top: 11px; padding: 11px 12px; border-radius: 16px; background: #f0f7f5; }
.node-detail-icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: white; background: var(--green); }
.node-detail-icon svg { width: 19px; height: 19px; fill: rgba(255,255,255,.2); }
.node-detail div { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 7px; }
.node-detail small { color: var(--muted); font-size: 8px; }
.node-detail b { color: var(--green); font-size: 12px; }
.node-detail p { grid-column: 1 / -1; margin: 3px 0 0; overflow: hidden; color: #5e7470; font-size: 9px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-list { margin-top: 28px; }
.knowledge-item { display: grid; grid-template-columns: 66px 1fr 17px; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); text-align: left; background: transparent; cursor: pointer; }
.knowledge-thumb { display: grid; place-items: center; width: 66px; height: 62px; border-radius: 16px; }
.knowledge-thumb svg { width: 28px; height: 28px; }
.knowledge-thumb.orange { color: #c65f52; background: #fae5dd; }.knowledge-thumb.blue { color: #5d70b8; background: #e8ecfa; }
.knowledge-item > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.knowledge-item small { color: var(--green); font-size: 8px; }.knowledge-item b { font-size: 12px; }.knowledge-item em { overflow: hidden; color: var(--muted); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-item > svg { color: #a6b3b0; width: 15px; height: 15px; }

/* Health */
.health-header { min-height: 138px; padding-right: 18px; padding-left: 18px; color: white; background: #173e3a; }
.health-header::after { color: #8fd5c9; }
.health-header .eyebrow { color: #9bd7cd; }
.health-header-points { display: grid; gap: 7px; }.health-header-points .eyebrow { margin: 0; font-size: 7px; }.health-points-balance { display: flex; align-items: center; gap: 5px; width: fit-content; color: #fff5ca; }.health-points-balance svg { width: 17px; height: 17px; fill: rgba(255,240,168,.16); }.health-points-balance b { font-family: Georgia, serif; font-size: 27px; line-height: 1; font-weight: 540; }.health-points-balance small { align-self: flex-end; margin-bottom: 2px; color: rgba(255,255,255,.68); font-size: 8px; }
.health-header-actions { display: flex; align-items: center; gap: 7px; }.health-mall-button { display: flex; align-items: center; gap: 7px; min-width: 96px; min-height: 39px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; text-align: left; color: white; background: linear-gradient(135deg, rgba(235,174,74,.28), rgba(255,255,255,.08)); cursor: pointer; }.health-mall-button > svg { flex: 0 0 auto; width: 18px; height: 18px; color: #ffd986; }.health-mall-button > span { display: grid; gap: 2px; }.health-mall-button b { font-size: 9px; white-space: nowrap; }.health-mall-button small { color: rgba(255,255,255,.58); font-size: 7px; white-space: nowrap; }
.dark-notification { background: rgba(255,255,255,.09); }
.dark-notification > span { box-shadow: 0 0 0 2px #173e3a; }
.health-content { padding-top: 16px; }
.followup-reward-card { position: relative; display: grid; grid-template-columns: 58px 1fr 70px; align-items: center; gap: 12px; min-height: 184px; padding: 18px 17px 15px; overflow: hidden; border: 1px solid #efc46e; border-radius: 24px; color: #6f431d; background: radial-gradient(circle at 92% 14%, rgba(255,255,255,.62), transparent 25%), linear-gradient(135deg, #fff6dc, #ffe2a4); box-shadow: 0 14px 30px rgba(177,112,35,.16); }
.followup-reward-card::before { content: ""; position: absolute; width: 128px; height: 128px; right: -57px; top: -61px; border: 1px solid rgba(173,107,31,.12); border-radius: 50%; box-shadow: 0 0 0 23px rgba(255,255,255,.14); }
.followup-date { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; place-items: center; width: 58px; height: 69px; padding: 7px 4px; border-radius: 17px; color: white; background: linear-gradient(145deg, #d98131, #b95f25); box-shadow: 0 8px 17px rgba(177,91,35,.22); }.followup-date strong { font-family: Georgia, serif; font-size: 26px; line-height: 1; }.followup-date > span { display: flex; align-items: center; gap: 5px; font-size: 8px; }.followup-date small { padding-left: 5px; border-left: 1px solid rgba(255,255,255,.35); font-size: 7px; }
.followup-copy { position: relative; z-index: 2; min-width: 0; }.followup-copy .eyebrow { color: #b86625; }.followup-copy h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 17px; }.followup-copy p { display: flex; align-items: center; gap: 3px; margin: 7px 0 8px; color: #94653a; font-size: 8px; }.followup-copy p svg { flex: 0 0 auto; width: 12px; height: 12px; }.followup-copy > strong { display: inline-block; padding: 4px 8px; border-radius: 8px; color: #a14e1d; background: rgba(255,255,255,.55); font-size: 13px; }
.egg-reward { position: relative; z-index: 2; width: 70px; height: 72px; }.egg-reward i { position: absolute; width: 31px; height: 39px; border: 2px solid rgba(175,99,32,.25); border-radius: 54% 54% 48% 48%; background: linear-gradient(145deg, #fffef8, #f5dcae); box-shadow: 0 6px 11px rgba(156,92,32,.13); transform: rotate(-12deg); }.egg-reward i:nth-child(1) { left: 4px; top: 7px; }.egg-reward i:nth-child(2) { right: 5px; top: 2px; transform: rotate(12deg); }.egg-reward i:nth-child(3) { left: 22px; top: 20px; z-index: 2; transform: rotate(2deg); }.egg-reward em { position: absolute; z-index: 3; right: 0; bottom: 0; padding: 4px 6px; border: 2px solid #fff1cd; border-radius: 99px; color: white; background: #d8792d; font-size: 7px; font-style: normal; font-weight: 850; }
.followup-reward-card > button { position: relative; z-index: 2; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 10px; border: 1px solid rgba(177,94,32,.17); border-radius: 12px; color: #9a4c1e; background: rgba(255,255,255,.7); font-size: 9px; font-weight: 750; cursor: pointer; }.followup-reward-card > button svg { width: 13px; height: 13px; }
.health-score-card { display: flex; align-items: center; justify-content: space-between; min-height: 142px; margin-top: 16px; padding: 20px 24px; overflow: hidden; border-radius: 24px; color: white; background: radial-gradient(circle at 92% 20%, rgba(255,255,255,.12), transparent 25%), linear-gradient(135deg, #087168, #16a08f); box-shadow: var(--shadow); }
.health-upload-section { margin-top: 28px; }.weekly-upload-section { margin-top: 23px; }.task-reward-label { padding: 6px 9px; border-radius: 99px; color: var(--green); background: var(--mint); font-size: 8px; white-space: nowrap; }.task-reward-label.weekly { color: #a76125; background: #fbecd8; }
.health-upload-list { padding: 0 14px; overflow-x: clip; }.health-upload-card { display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 11px; min-height: 82px; padding: 12px 0; border-bottom: 1px solid var(--line); transition: background .25s; }.health-upload-card:last-child { border-bottom: 0; }.health-upload-card.completed { background: linear-gradient(90deg, rgba(223,243,238,.35), transparent); }
.upload-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; }.upload-icon svg { width: 21px; height: 21px; }.upload-icon.heart { color: #c85e62; background: #fae7e9; }.upload-icon.heart svg { fill: rgba(200,94,98,.12); }.upload-icon.pressure { color: #5376c0; background: #e8eefb; }.upload-icon.sugar { color: #b97824; background: #fbefda; }.upload-icon.sugar svg { fill: rgba(185,120,36,.12); }.upload-icon.lab { color: var(--violet); background: #ece9fa; }
.health-upload-card > p { display: grid; gap: 4px; min-width: 0; margin: 0; }.health-upload-card p small { color: var(--green); font-size: 7px; }.health-upload-card p b { font-size: 11px; }.health-upload-card p em { overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.health-upload-card.completed p em { color: var(--green); font-weight: 700; }
.upload-task-button { display: grid; justify-items: center; gap: 2px; min-width: 54px; padding: 8px 7px; border: 0; border-radius: 10px; color: white; background: var(--green); box-shadow: 0 6px 14px rgba(11,119,109,.16); font-size: 8px; cursor: pointer; }.upload-task-button strong { font-size: 8px; }.upload-task-button:disabled { display: flex; align-items: center; gap: 4px; color: var(--green); background: #e5f4f0; box-shadow: none; cursor: default; }.upload-task-button:disabled svg { width: 12px; height: 12px; }
.score-copy > span { color: rgba(255,255,255,.7); font-size: 10px; }.score-copy > strong { display: block; margin: 9px 0 12px; font-family: Georgia, "Songti SC", serif; font-size: 26px; font-weight: 500; }.score-copy > strong small { margin-left: 7px; font-family: Inter, sans-serif; font-size: 8px; letter-spacing: .12em; opacity: .65; }.score-copy p { margin: 0; color: rgba(255,255,255,.76); font-size: 9px; }.score-copy p i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #83f0bb; }
.score-ring { position: relative; width: 90px; height: 90px; }.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }.score-ring circle { fill: none; stroke: rgba(255,255,255,.17); stroke-width: 7; }.score-ring .score-progress { stroke: #a6e6d7; stroke-linecap: round; stroke-dasharray: 227 264; }.score-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }.score-ring b { font-size: 24px; line-height: 1; }.score-ring small { margin-top: 4px; color: rgba(255,255,255,.7); font-size: 8px; }
.record-section, .medication-section { margin-top: 29px; }
.date-label { color: var(--muted); font-size: 10px; }
.record-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.record-card { display: grid; grid-template-columns: 39px 1fr 21px; align-items: center; gap: 10px; min-height: 69px; padding: 13px; border: 1px solid var(--line); border-radius: 17px; text-align: left; background: white; box-shadow: 0 6px 17px rgba(24,78,71,.05); cursor: pointer; }
.record-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; font-size: 9px; font-weight: 850; }.record-icon svg { width: 18px; height: 18px; }.heart-bg { color: var(--rose); background: #fae7e9; }.heart-bg svg { fill: currentColor; }.bp-bg { color: #4f73bd; background: #e7edfb; }.weight-bg { color: var(--green); background: var(--mint); }.symptom-bg { color: #bb7b22; background: #faefdd; }
.record-card > span:nth-child(2) { display: grid; gap: 4px; }.record-card b { font-size: 11px; }.record-card small { color: var(--muted); font-size: 9px; }
.record-card em { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: var(--green); background: #e7f5f2; font-style: normal; }.record-card em svg { width: 11px; height: 11px; }
.record-card.recorded em { color: white; background: var(--green-2); }
.trend-card { margin-top: 29px; padding: 18px 17px 15px; }
.trend-number strong { font-size: 22px; }.trend-number small { margin-left: 3px; color: var(--muted); font-size: 8px; }
.chart-wrap { position: relative; height: 154px; margin-top: 10px; padding: 0 2px 20px 26px; overflow: hidden; }
.chart-grid { position: absolute; inset: 10px 0 25px 0; display: flex; flex-direction: column; justify-content: space-between; color: #98a7a4; font-size: 8px; }
.chart-grid::before, .chart-grid::after { content: ""; position: absolute; left: 24px; right: 0; height: 1px; background: #ebf0ef; }.chart-grid::before { top: 4px; box-shadow: 0 47px 0 #ebf0ef, 0 94px 0 #ebf0ef; }
.line-chart { position: absolute; left: 26px; right: 0; top: 7px; width: calc(100% - 26px); height: 117px; overflow: visible; }.line-chart .area { fill: url(#chart-fill); stroke: none; }.line-chart .line { fill: none; stroke: var(--green-2); stroke-width: 3; vector-effect: non-scaling-stroke; }.line-chart circle { fill: white; stroke: var(--green-2); stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-labels { position: absolute; left: 26px; right: 0; bottom: 0; display: flex; justify-content: space-between; color: #8da09c; font-size: 8px; }.chart-labels span:last-child { color: var(--green); font-weight: 800; }
.trend-tip { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 11px; color: #5d7470; background: #f0f7f5; }.trend-tip svg { width: 15px; height: 15px; color: var(--green); }.trend-tip p { margin: 0; font-size: 9px; }.trend-tip b { color: var(--green); }
.medication-list { padding: 7px 15px; }
.med-time { position: relative; display: grid; grid-template-columns: 39px 31px 1fr auto; align-items: center; gap: 9px; min-height: 68px; }
.med-time:not(:last-child)::after { content: ""; position: absolute; left: 54px; top: 46px; height: 44px; border-left: 1px dashed #c9d7d4; }
.med-time > span { color: var(--muted); font-size: 9px; }.med-time > i { z-index: 1; display: grid; place-items: center; width: 27px; height: 27px; border: 3px solid white; border-radius: 50%; color: #8ca09b; background: #dfe7e5; box-shadow: 0 0 0 1px #dbe5e2; }.med-time > i svg { width: 12px; height: 12px; }
.med-time.done > i { color: white; background: var(--green-2); }.med-time.current > i { color: #bd7d22; background: #fae7bf; }
.med-time > div { display: grid; gap: 4px; }.med-time b { font-size: 11px; }.med-time small { color: var(--muted); font-size: 8px; }.med-time.done small { color: var(--green); }
.med-time button { padding: 7px 11px; border: 0; border-radius: 9px; color: white; background: var(--green); font-size: 9px; cursor: pointer; }

/* Profile */
.profile-content { position: relative; z-index: 2; top: -16px; padding-top: 0; }.profile-header { min-height: 180px; padding-bottom: 58px; }.profile-header > div { position: absolute; top: 64px; left: 22px; }.profile-header .eyebrow { margin: 0; }.profile-header .light-button { position: absolute; top: 49px; right: 22px; }.profile-card { position: relative; display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 14px; min-height: 120px; margin-top: -37px; padding: 19px; border-radius: 23px; background: white; box-shadow: var(--shadow); }
.avatar { position: relative; display: grid; place-items: center; width: 68px; height: 68px; overflow: visible; border: 4px solid #e0f1ee; border-radius: 22px; color: white; background: linear-gradient(145deg, #56b6a8, #087168); }.avatar svg { width: 38px; height: 38px; fill: rgba(255,255,255,.16); }.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 18px; object-fit: cover; }.avatar.has-image svg { visibility: hidden; }.avatar span { position: absolute; z-index: 2; right: -5px; bottom: -5px; width: 14px; height: 14px; border: 3px solid white; border-radius: 50%; background: #65cb90; }
.profile-copy { min-width: 0; }.profile-copy small { color: var(--muted); font-size: 9px; }.profile-copy h2 { margin: 3px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 22px; }.profile-copy p { margin: 0; color: var(--muted); font-size: 9px; white-space: nowrap; }.profile-copy p span { color: var(--green); }
.edit-profile { padding: 7px 10px; border: 1px solid #d7e7e3; border-radius: 10px; color: var(--green); background: #f6fbfa; font-size: 9px; cursor: pointer; }
.profile-stats { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; align-items: center; min-height: 75px; margin-top: 14px; padding: 11px; }.profile-stats i { width: 1px; height: 30px; background: var(--line); }.profile-stats button { display: grid; gap: 4px; border: 0; background: transparent; cursor: pointer; }.profile-stats strong { font-size: 17px; }.profile-stats span { color: var(--muted); font-size: 8px; }
.menu-section { margin-top: 28px; }.menu-list { padding: 0 15px; }.menu-list button { display: grid; grid-template-columns: 39px 1fr 17px; align-items: center; gap: 12px; width: 100%; min-height: 67px; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); text-align: left; background: transparent; cursor: pointer; }.menu-list button:last-child { border-bottom: 0; }.menu-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; }.menu-icon svg { width: 18px; height: 18px; }.menu-icon.teal { color: var(--green); background: var(--mint); }.menu-icon.coral { color: #ca5f53; background: #fae7e3; }.menu-icon.violet { color: #6555b5; background: #ece9fa; }.menu-list button > span:nth-child(2) { display: grid; gap: 3px; }.menu-list b { font-size: 11px; }.menu-list small { color: var(--muted); font-size: 8px; }.menu-list button > svg { width: 14px; height: 14px; color: #a6b3b0; }
.menu-icon.amber { color: #b87721; background: #fbefda; }
.menu-icon.blue { color: #5274bb; background: #e8eefb; }.menu-icon.rose { color: #c35c68; background: #fae7e9; }.menu-icon.rose svg { fill: rgba(195,92,104,.1); }
.menu-list.compact button { min-height: 53px; grid-template-columns: 1fr 17px; }.menu-list.compact button > svg { grid-column: 2; }
.logout-button { display: block; width: 70%; margin: 26px auto 0; padding: 12px; border: 1px solid #ebc9c8; border-radius: 14px; color: #c95755; background: white; font-size: 11px; cursor: pointer; }.version { margin: 17px 0 2px; color: #a0aeab; text-align: center; font-size: 8px; }

.profile-edit-header { background: radial-gradient(circle at 88% 20%, rgba(130,203,192,.3), transparent 28%), linear-gradient(145deg, #153f3b, #0b776d); }.profile-edit-header .eyebrow { color: #9bd7cd; }.profile-edit-badge { padding: 6px 8px; border-radius: 99px; color: #d4eee8; background: rgba(255,255,255,.11); font-size: 7px; white-space: nowrap; }.profile-edit-content { padding-top: 16px; }.profile-edit-content form { display: block; }
.profile-edit-avatar-card { display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 13px; min-height: 105px; padding: 17px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--soft-shadow); }.profile-edit-avatar { position: relative; display: grid; place-items: center; width: 68px; height: 68px; overflow: hidden; border: 4px solid #e0f1ee; border-radius: 22px; color: white; background: linear-gradient(145deg, #56b6a8, #087168); }.profile-edit-avatar svg { width: 36px; height: 36px; fill: rgba(255,255,255,.15); }.profile-edit-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.profile-edit-avatar.has-image svg { visibility: hidden; }.profile-edit-avatar-card > div { min-width: 0; }.profile-edit-avatar-card small { color: var(--muted); font-size: 7px; }.profile-edit-avatar-card h2 { overflow: hidden; margin: 4px 0 5px; font-family: Georgia, "Songti SC", serif; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }.profile-edit-avatar-card p { margin: 0; color: #93a19e; font-size: 7px; line-height: 1.5; }.avatar-upload-button { padding: 7px 9px; border: 1px solid #d6e6e2; border-radius: 9px; color: var(--green); background: #f5faf9; font-size: 8px; cursor: pointer; white-space: nowrap; }
.profile-form-section { margin-top: 26px; }.profile-form-heading { display: flex; align-items: center; gap: 9px; margin: 0 3px 10px; }.profile-form-heading > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; color: var(--green); background: var(--mint); }.profile-form-heading svg { width: 16px; height: 16px; }.profile-form-heading div { display: grid; gap: 2px; }.profile-form-heading small { color: var(--green); font-size: 6px; font-weight: 800; letter-spacing: .13em; }.profile-form-heading h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 17px; }.profile-form-card { display: grid; gap: 0; padding: 3px 16px; }.profile-form-field { display: grid; gap: 7px; padding: 13px 0; border-bottom: 1px solid var(--line); }.profile-form-card > .profile-form-field:last-child, .profile-form-row:last-child .profile-form-field { border-bottom: 0; }.profile-form-field > span:first-child { color: #536c67; font-size: 8px; font-weight: 700; }.profile-form-field > span em { color: #d06562; font-style: normal; }.profile-form-field input, .profile-form-field select { min-width: 0; width: 100%; height: 34px; padding: 0 9px; border: 1px solid #dce8e5; border-radius: 9px; outline: 0; color: var(--ink); background: #f8faf9; font-size: 10px; }.profile-form-field input:focus, .profile-form-field select:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(19,153,138,.09); }.profile-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; border-bottom: 1px solid var(--line); }.profile-form-row .profile-form-field { border-bottom: 0; }.profile-unit-input { display: grid; grid-template-columns: 1fr auto; align-items: center; height: 34px; padding-right: 9px; border: 1px solid #dce8e5; border-radius: 9px; background: #f8faf9; }.profile-unit-input input { height: 32px; border: 0; background: transparent; }.profile-unit-input em { color: var(--muted); font-size: 8px; font-style: normal; }
.profile-form-error { min-height: 15px; margin: 10px 3px 0; color: #c55654; font-size: 8px; }.profile-data-note { display: flex; align-items: flex-start; gap: 7px; margin: 7px 3px 0; color: #8f9d9a; font-size: 7px; line-height: 1.7; }.profile-data-note svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--green); }.profile-form-actions { display: grid; grid-template-columns: .75fr 1.25fr; gap: 10px; margin-top: 17px; }.profile-form-actions button { min-height: 44px; padding: 11px; border-radius: 13px; font-size: 10px; cursor: pointer; }.profile-form-actions button:first-child { border: 1px solid #d8e3e1; color: #6d7e7b; background: white; }.profile-form-actions button:last-child { border: 0; color: white; background: var(--green); box-shadow: 0 8px 18px rgba(11,119,109,.18); font-weight: 750; }

/* Navigation, login and feedback */
.bottom-nav { position: absolute; z-index: 15; left: 0; right: 0; bottom: 0; height: 78px; padding: 9px 12px max(8px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(217,228,225,.9); background: rgba(255,255,255,.96); backdrop-filter: blur(16px); }
.nav-item { position: relative; display: grid; place-items: center; align-content: center; gap: 3px; border: 0; color: #94a19e; background: transparent; cursor: pointer; }
.nav-item::after { content: ""; position: absolute; bottom: 0; width: 18px; height: 2px; border-radius: 99px; background: transparent; }
.nav-item span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; transition: .2s; }
.nav-item svg { width: 20px; height: 20px; }
.nav-item b { font-size: 8px; font-weight: 650; }
.nav-item.active { color: var(--green); }.nav-item.active span { background: #e5f3f0; transform: translateY(-1px); }.nav-item.active::after { background: var(--green); }
.featured-nav { overflow: visible; color: var(--green); }
.featured-nav span { width: 54px; height: 54px; margin-top: -27px; border: 5px solid white; border-radius: 19px; color: white; background: linear-gradient(145deg, #0b776d, #18a391); box-shadow: 0 10px 22px rgba(11,119,109,.28); transform: rotate(-4deg); }
.featured-nav svg { width: 25px; height: 25px; transform: rotate(4deg); }.featured-nav b { margin-top: -1px; color: var(--green); font-size: 9px; font-weight: 800; }.featured-nav::after { display: none; }
.featured-nav em { position: absolute; top: -19px; right: 9px; min-width: 25px; padding: 3px 5px; border: 2px solid white; border-radius: 99px; color: white; background: var(--coral); box-shadow: 0 4px 10px rgba(160,72,61,.22); font-size: 7px; font-style: normal; font-weight: 850; }
.featured-nav.active span { color: white; background: linear-gradient(145deg, #087168, #22ad9a); transform: rotate(-4deg) translateY(-2px) scale(1.04); }

.login-overlay { position: absolute; z-index: 50; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 54px 21px 25px; color: white; background: radial-gradient(circle at 17% 13%, rgba(94,211,193,.35), transparent 23%), radial-gradient(circle at 88% 60%, rgba(109,91,191,.2), transparent 26%), linear-gradient(155deg, #075c57 0%, #0b776d 42%, #183e3a 100%); transition: opacity .35s, visibility .35s; }
.login-overlay.closed { opacity: 0; visibility: hidden; pointer-events: none; }
.login-overlay::before { content: ""; position: absolute; width: 190px; height: 190px; right: -75px; top: 60px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.025); }
.login-brand { position: relative; z-index: 2; margin: auto 8px 32px; }
.login-heart { position: relative; display: grid; place-items: center; width: 71px; height: 71px; margin-bottom: 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 23px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.login-heart svg { width: 39px; height: 39px; color: #efaaa0; fill: rgba(239,170,160,.2); }.login-heart i { position: absolute; left: 46px; top: 35px; width: 31px; height: 2px; background: rgba(255,255,255,.72); }
.login-brand > span { color: #88d3c7; font-size: 9px; font-weight: 800; letter-spacing: .2em; }.login-brand h2 { margin: 8px 0 7px; font-family: Georgia, "Songti SC", serif; font-size: 29px; font-weight: 520; }.login-brand p { margin: 0; color: rgba(255,255,255,.6); font-size: 11px; }
.login-panel { position: relative; z-index: 2; padding: 24px 20px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 26px; color: var(--ink); background: rgba(255,255,255,.96); box-shadow: 0 22px 46px rgba(0,0,0,.21); }
.login-panel-head span { color: var(--green); font-size: 9px; letter-spacing: .08em; }.login-panel-head h3 { margin: 5px 0 20px; font-family: Georgia, "Songti SC", serif; font-size: 23px; }
.wechat-login { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px; border: 0; border-radius: 15px; color: white; background: linear-gradient(90deg, #09a65b, #1bb86b); box-shadow: 0 10px 22px rgba(24,171,99,.24); font-size: 13px; font-weight: 750; cursor: pointer; }
.wechat-login span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.18); }.wechat-login svg { width: 15px; height: 15px; }
.guest-login { display: block; margin: 13px auto 0; padding: 5px; border: 0; color: #72817e; background: transparent; font-size: 10px; cursor: pointer; }
.agreement { display: block; margin-top: 18px; color: #71817e; font-size: 8px; line-height: 1.6; cursor: pointer; }.agreement input { position: absolute; opacity: 0; pointer-events: none; }.agreement > span { display: flex; align-items: flex-start; }.agreement i { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; margin: -1px 7px 0 0; border: 1px solid #b9c7c4; border-radius: 5px; color: transparent; background: white; }.agreement i svg { width: 10px; height: 10px; }.agreement input:checked + span i { color: white; border-color: var(--green); background: var(--green); }.agreement a { color: var(--green); text-decoration: none; }
.login-safe { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 15px 0 0; color: #9aa8a5; font-size: 8px; }.login-safe svg { width: 12px; height: 12px; }
.modal-backdrop { position: absolute; z-index: 60; inset: 0; display: grid; place-items: center; padding: 30px; background: rgba(10,42,38,.48); backdrop-filter: blur(5px); }.modal-backdrop[hidden] { display: none; }.demo-modal { width: 100%; padding: 28px 22px 21px; border-radius: 23px; text-align: center; background: white; box-shadow: 0 22px 60px rgba(8,47,42,.27); animation: modal-in .25s ease-out; }@keyframes modal-in { from { opacity: 0; transform: scale(.94) translateY(8px); } }
.modal-icon { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 13px; border-radius: 16px; color: white; background: var(--green); }.modal-icon svg { width: 23px; height: 23px; }.demo-modal h3 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 21px; }.demo-modal p { margin: 10px 0 19px; color: var(--muted); font-size: 10px; line-height: 1.6; }.demo-modal button { width: 100%; padding: 11px; border: 0; border-radius: 12px; color: white; background: var(--green); font-size: 11px; cursor: pointer; }
.toast { position: absolute; z-index: 70; left: 50%; bottom: 92px; min-width: 180px; max-width: calc(100% - 40px); padding: 11px 15px; border-radius: 12px; color: white; background: rgba(18,49,45,.91); box-shadow: 0 10px 25px rgba(0,0,0,.18); text-align: center; font-size: 10px; transform: translate(-50%, 20px); opacity: 0; visibility: hidden; transition: .25s; }.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.points-float { position: absolute; z-index: 80; display: flex; align-items: center; gap: 5px; padding: 8px 11px; border: 2px solid rgba(255,255,255,.9); border-radius: 99px; pointer-events: none; color: white; background: linear-gradient(90deg, #eda53c, #ef7e58); box-shadow: 0 10px 24px rgba(196,103,46,.3); font-size: 11px; font-weight: 850; transform: translate(-50%, -50%); animation: points-fly 1.15s ease-out forwards; }
.points-float svg { width: 13px; height: 13px; fill: rgba(255,255,255,.22); }
.points-float.spent { background: linear-gradient(90deg, #b87825, #d39b43); }
@keyframes points-fly { 0% { opacity: 0; transform: translate(-50%, -10%) scale(.72); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -170%) scale(.96); } }

/* Medication guide and check-in */
.medicine-overview { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 17px; margin-top: 18px; }
.plan-doctor-line { display: flex; align-items: center; gap: 4px; margin: 12px 0 -3px; color: var(--muted); font-size: 8px; }.plan-doctor-line svg { width: 12px; height: 12px; color: var(--green); }.plan-doctor-line span { color: #526b66; font-weight: 650; }
.medicine-ring { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: conic-gradient(var(--green-2) 0 33%, #e8f0ee 33% 100%); }
.medicine-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: white; }
.medicine-ring > span { position: relative; z-index: 1; display: flex; align-items: baseline; color: var(--green); }
.medicine-ring b { font-size: 22px; }.medicine-ring small { color: var(--muted); font-size: 10px; }
.medicine-overview-copy { min-width: 0; }.medicine-overview-copy strong { display: block; font-size: 13px; }.medicine-overview-copy p { margin: 7px 0 11px; color: var(--muted); font-size: 9px; }
.medicine-progress { height: 6px; overflow: hidden; border-radius: 99px; background: #e8f0ee; }.medicine-progress i { display: block; width: 33%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #38b5a3); transition: width .35s ease; }
.medication-score-card .score-copy > strong { display: flex; align-items: baseline; }
.score-ring .score-progress { stroke-dasharray: 87 264; transition: stroke-dasharray .35s ease; }
.dose-section { margin-top: 29px; }
.dose-card-stack { display: grid; gap: 9px; }
.dose-check-card { display: grid; grid-template-columns: 50px 40px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 76px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 18px; text-align: left; background: white; box-shadow: 0 7px 19px rgba(24,78,71,.055); cursor: pointer; transition: transform .2s, border-color .2s; }
.dose-check-card:hover { transform: translateY(-1px); border-color: #b8d8d2; }.dose-check-card.current { border-color: #97ccc3; box-shadow: 0 9px 24px rgba(11,119,109,.12); }
.dose-time { display: grid; gap: 4px; color: var(--ink); font-size: 11px; font-weight: 780; }.dose-time small { color: var(--muted); font-size: 8px; font-weight: 500; }
.dose-pill { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: var(--green); background: var(--mint); }.dose-pill svg { width: 18px; height: 18px; }
.dose-check-card.completed .dose-pill { color: white; background: var(--green-2); }.dose-check-card.completed .dose-pill svg { width: 16px; }
.dose-copy { display: grid; gap: 4px; min-width: 0; }.dose-copy b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.dose-copy small { color: var(--muted); font-size: 8px; }
.dose-check-card em { padding: 7px 9px; border-radius: 9px; color: #879793; background: #f0f4f3; font-size: 8px; font-style: normal; white-space: nowrap; }.dose-check-card.current em { color: white; background: var(--green); }.dose-check-card.completed em { color: var(--green); background: #e7f5f2; }
.dose-safety { display: flex; align-items: flex-start; gap: 7px; margin: 12px 3px 0; color: #869692; font-size: 8px; line-height: 1.5; }.dose-safety svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--green); }
.adherence-card { margin-top: 29px; padding: 18px 17px 15px; }
.adherence-bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 12px; height: 132px; margin: 13px 4px 9px; padding-top: 8px; border-bottom: 1px solid var(--line); }
.adherence-bars div { height: 100%; display: grid; grid-template-rows: 1fr 19px; align-items: end; justify-items: center; }.adherence-bars i { width: 16px; height: var(--h); min-height: 10px; border-radius: 8px 8px 2px 2px; background: #c8e5df; transition: height .35s ease; }.adherence-bars span { align-self: center; color: var(--muted); font-size: 8px; }.adherence-bars .today i { background: linear-gradient(180deg, #25a796, var(--green)); }.adherence-bars .today span { color: var(--green); font-weight: 800; }
.medicine-guide-grid { display: grid; gap: 9px; }
.medicine-guide-grid button { display: grid; grid-template-columns: 40px 1fr 18px; grid-template-rows: auto auto; align-items: center; column-gap: 11px; width: 100%; min-height: 66px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 17px; text-align: left; background: white; box-shadow: 0 6px 17px rgba(24,78,71,.05); cursor: pointer; }
.guide-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; }.guide-icon svg { width: 19px; height: 19px; }.guide-icon.teal { color: var(--green); background: var(--mint); }.guide-icon.amber { color: #b77921; background: #fbefda; }.guide-icon.coral { color: #c75c51; background: #fae7e4; }
.medicine-guide-grid b { align-self: end; font-size: 11px; }.medicine-guide-grid small { align-self: start; color: var(--muted); font-size: 8px; }.medicine-guide-grid button > svg { grid-column: 3; grid-row: 1 / 3; width: 14px; height: 14px; color: #a6b3b0; }
.demo-modal p { max-height: 330px; overflow-y: auto; line-height: 1.75; text-align: left; white-space: pre-line; }

/* Independent content pages */
.subpage-header { display: grid; grid-template-columns: 38px 1fr auto; align-items: end; gap: 11px; min-height: 150px; padding-bottom: 25px; color: white; }
.subpage-header > div { min-width: 0; }.subpage-header h1 { white-space: nowrap; }
.back-button { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; color: white; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); cursor: pointer; }
.back-button svg { width: 19px; height: 19px; }
.article-header { background: radial-gradient(circle at 90% 22%, rgba(255,196,99,.2), transparent 27%), linear-gradient(145deg, #273f44, #0b776d); }
.article-header .eyebrow { color: #9bd7cd; }.header-count { padding: 6px 9px; border-radius: 99px; color: #d9f0eb; background: rgba(255,255,255,.11); font-size: 8px; white-space: nowrap; }.favorites-header-button { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; color: white; background: rgba(255,255,255,.11); font-size: 8px; cursor: pointer; }.favorites-header-button svg { width: 14px; height: 14px; color: #ffd98a; fill: rgba(255,217,138,.15); }.favorites-header-button b { font-size: 10px; }
.article-recommend-content { padding-top: 16px; }
.featured-article { position: relative; display: block; width: 100%; min-height: 205px; padding: 23px 20px; overflow: hidden; border: 0; border-radius: 24px; text-align: left; color: white; background: radial-gradient(circle at 90% 25%, rgba(247,186,150,.27), transparent 29%), linear-gradient(130deg, #0d675f, #173e3a); box-shadow: var(--shadow); cursor: pointer; }
.featured-article::after { content: ""; position: absolute; width: 150px; height: 150px; right: -54px; bottom: -73px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.03); }.featured-tag { color: #a8ddd3; font-size: 8px; letter-spacing: .05em; }.featured-article h2 { position: relative; z-index: 2; margin: 13px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 22px; line-height: 1.45; font-weight: 520; }.featured-article p { position: relative; z-index: 2; margin: 0 0 17px; color: rgba(255,255,255,.61); font-size: 9px; }.featured-article > i { position: relative; z-index: 2; display: flex; align-items: center; color: #bfe7df; font-size: 9px; font-style: normal; }.featured-article > i svg { width: 13px; height: 13px; }.featured-art { position: absolute; right: 20px; bottom: 17px; color: #ecaa9f; opacity: .55; }.featured-art svg { width: 76px; height: 76px; fill: rgba(236,170,159,.18); stroke-width: 1.2; }
.article-filter { margin-top: 17px; }
.recommend-list { display: grid; gap: 10px; margin-top: 18px; }
.recommend-card { display: grid; grid-template-columns: 68px 1fr 17px; align-items: center; gap: 12px; width: 100%; min-height: 86px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 18px; text-align: left; background: white; box-shadow: 0 7px 19px rgba(24,78,71,.055); cursor: pointer; }.recommend-card.filtered { display: none; }
.recommend-cover { display: grid; place-items: center; width: 66px; height: 64px; border-radius: 17px; }.recommend-cover svg { width: 27px; height: 27px; }.recommend-cover.teal { color: var(--green); background: var(--mint); }.recommend-cover.violet { color: var(--violet); background: #ece9fa; }.recommend-cover.coral { color: #ca5f53; background: #fae7e3; }.recommend-cover.amber { color: #b87721; background: #fbefda; }.recommend-cover.blue { color: #5878c1; background: #e8eefb; }
.recommend-card > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }.recommend-card small { color: var(--green); font-size: 8px; }.recommend-card b { font-size: 11px; line-height: 1.4; }.recommend-card em { overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.recommend-card > svg { width: 14px; height: 14px; color: #a6b3b0; }

.favorites-header { background: radial-gradient(circle at 89% 19%, rgba(255,206,122,.24), transparent 29%), linear-gradient(145deg, #244745, #0b776d); }.favorites-header .eyebrow, .article-detail-header .eyebrow { color: #9bd7cd; }.favorites-discover-button { padding: 7px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: white; background: rgba(255,255,255,.11); font-size: 8px; cursor: pointer; white-space: nowrap; }
.favorites-content { padding-top: 16px; }.favorites-summary { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 13px; min-height: 105px; padding: 18px; overflow: hidden; border-radius: 22px; color: white; background: radial-gradient(circle at 90% 15%, rgba(255,215,139,.24), transparent 30%), linear-gradient(135deg, #116f67, #2a9b8d); box-shadow: var(--shadow); }.favorites-summary > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; color: #ffdc8f; background: rgba(255,255,255,.13); }.favorites-summary svg { width: 27px; height: 27px; fill: rgba(255,220,143,.13); }.favorites-summary p { display: grid; gap: 3px; margin: 0; }.favorites-summary small { color: rgba(255,255,255,.67); font-size: 8px; }.favorites-summary strong { font-family: Georgia, serif; font-size: 24px; font-weight: 520; }.favorites-summary strong b { font-size: 30px; }.favorites-summary em { color: rgba(255,255,255,.7); font-size: 8px; font-style: normal; }
.favorites-list { display: grid; gap: 10px; margin-top: 18px; }.favorite-card { display: grid; grid-template-columns: 62px 1fr 35px; align-items: center; gap: 11px; min-height: 90px; padding: 11px 10px; border: 1px solid var(--line); border-radius: 19px; background: white; box-shadow: 0 7px 19px rgba(24,78,71,.055); }.favorite-card-cover { display: grid; place-items: center; width: 62px; height: 66px; border-radius: 16px; }.favorite-card-cover svg { width: 27px; height: 27px; }.favorite-card-cover.disease { color: #c65f52; background: #fae7e3; }.favorite-card-cover.medicine { color: var(--green); background: var(--mint); }.favorite-card-cover.life { color: #5878c1; background: #e8eefb; }.favorite-card-copy { display: grid; gap: 4px; min-width: 0; padding: 5px 0; border: 0; text-align: left; background: transparent; cursor: pointer; }.favorite-card-copy small { color: var(--green); font-size: 7px; }.favorite-card-copy b { font-size: 11px; line-height: 1.45; }.favorite-card-copy em { overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.favorite-remove { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 11px; color: #b87825; background: #fbefda; cursor: pointer; }.favorite-remove svg { width: 15px; height: 15px; fill: rgba(184,120,37,.13); }
.favorites-empty { min-height: 410px; padding: 68px 25px 30px; text-align: center; }.favorites-empty[hidden] { display: none; }.favorites-empty > span { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 18px; border-radius: 22px; color: var(--green); background: var(--mint); }.favorites-empty svg { width: 31px; height: 31px; }.favorites-empty h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 22px; }.favorites-empty p { margin: 11px auto 18px; color: var(--muted); font-size: 9px; line-height: 1.7; }.favorites-empty button { display: inline-flex; align-items: center; gap: 5px; padding: 11px 15px; border: 0; border-radius: 12px; color: white; background: var(--green); font-size: 10px; cursor: pointer; }.favorites-empty button svg { width: 13px; height: 13px; }

.article-detail-header { background: radial-gradient(circle at 88% 20%, rgba(247,186,150,.22), transparent 28%), linear-gradient(145deg, #173e3a, #0b776d); }.article-favorite-button { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; color: white; background: rgba(255,255,255,.11); font-size: 8px; cursor: pointer; }.article-favorite-button svg { width: 14px; height: 14px; }.article-favorite-button.saved { color: #75511e; border-color: #ffdc94; background: #ffdc94; }.article-favorite-button.saved svg { fill: currentColor; }
.article-detail-content { padding-top: 16px; }.article-detail-hero { position: relative; min-height: 230px; padding: 24px 21px; overflow: hidden; border-radius: 24px; color: white; box-shadow: var(--shadow); }.article-detail-hero.disease { background: radial-gradient(circle at 90% 20%, rgba(255,181,152,.25), transparent 29%), linear-gradient(135deg, #1b5651, #0b776d); }.article-detail-hero.medicine { background: radial-gradient(circle at 90% 20%, rgba(168,205,255,.22), transparent 28%), linear-gradient(135deg, #345564, #4f68a7); }.article-detail-hero.life { background: radial-gradient(circle at 90% 20%, rgba(255,220,139,.25), transparent 28%), linear-gradient(135deg, #876127, #b57d2c); }.article-detail-category { display: inline-block; padding: 5px 7px; border-radius: 7px; color: #d4f0e9; background: rgba(255,255,255,.1); font-size: 7px; }.article-detail-hero h2 { position: relative; z-index: 2; max-width: 300px; margin: 14px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 24px; line-height: 1.42; font-weight: 520; }.article-detail-hero > p { position: relative; z-index: 2; max-width: 290px; margin: 0; color: rgba(255,255,255,.66); font-size: 9px; line-height: 1.65; }.article-detail-meta { position: absolute; z-index: 2; left: 21px; right: 21px; bottom: 19px; display: flex; gap: 15px; color: rgba(255,255,255,.69); font-size: 7px; }.article-detail-meta span { display: flex; align-items: center; gap: 4px; }.article-detail-meta svg { width: 12px; height: 12px; }.article-detail-art { position: absolute; right: 15px; bottom: 22px; color: white; opacity: .1; }.article-detail-art svg { width: 94px; height: 94px; fill: currentColor; }
.article-body-card { margin-top: 14px; padding: 24px 21px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--soft-shadow); }.article-lead { margin: 0 0 22px; padding: 13px 14px; border-left: 3px solid var(--green-2); border-radius: 0 11px 11px 0; color: #45605b; background: #f1f8f6; font-size: 10px; line-height: 1.85; }.article-body section + section { margin-top: 24px; }.article-body h3 { margin: 0 0 10px; color: #244440; font-family: Georgia, "Songti SC", serif; font-size: 17px; }.article-body p { margin: 0; color: #5e716d; font-size: 10px; line-height: 1.95; white-space: pre-line; }.article-safety-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 25px; padding: 13px; border: 1px solid #f0dfbb; border-radius: 14px; color: #806139; background: #fff9e9; }.article-safety-note > svg { flex: 0 0 auto; width: 16px; height: 16px; }.article-safety-note p { display: grid; gap: 4px; margin: 0; }.article-safety-note b { font-size: 9px; }.article-safety-note span { font-size: 8px; line-height: 1.65; }
.article-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }.article-detail-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 43px; padding: 11px; border-radius: 13px; font-size: 9px; cursor: pointer; }.article-detail-actions button:first-child { border: 0; color: white; background: var(--green); }.article-detail-actions button:first-child.saved { color: #825c25; background: #fbefda; }.article-detail-actions button:last-child { border: 1px solid #d8e5e2; color: var(--green); background: white; }.article-detail-actions svg { width: 15px; height: 15px; }.article-detail-actions button.saved svg { fill: currentColor; }

.points-header { background: radial-gradient(circle at 90% 20%, rgba(255,220,136,.28), transparent 30%), linear-gradient(145deg, #9a6322, #d38b32); }.points-header .eyebrow { color: #ffe0a6; }.points-rule-button { padding: 7px 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 99px; color: white; background: rgba(255,255,255,.12); font-size: 8px; cursor: pointer; }
.points-content { padding-top: 16px; }.points-balance-card { position: relative; min-height: 244px; padding: 31px 23px 19px; overflow: hidden; border-radius: 25px; text-align: center; color: white; background: radial-gradient(circle at 84% 18%, rgba(255,231,171,.38), transparent 23%), linear-gradient(145deg, #b87525, #e6a340); box-shadow: 0 17px 38px rgba(179,115,35,.22); }.points-balance-card::before, .points-balance-card::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }.points-balance-card::before { width: 160px; height: 160px; left: -85px; top: -65px; }.points-balance-card::after { width: 130px; height: 130px; right: -65px; bottom: -55px; }
.points-orbit { position: absolute; top: 22px; left: 24px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff3cc; background: rgba(255,255,255,.13); transform: rotate(-8deg); }.points-orbit svg { width: 23px; height: 23px; fill: rgba(255,255,255,.18); }.points-balance-card > small { display: block; color: rgba(255,255,255,.72); font-size: 9px; }.points-balance-card > strong { display: block; margin: 9px 0 5px; font-family: Georgia, serif; font-size: 54px; line-height: 1; font-weight: 520; }.points-balance-card > p { margin: 0; color: rgba(255,255,255,.7); font-size: 9px; }.points-balance-card > div { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; margin-top: 23px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.17); }.points-balance-card > div span { display: grid; gap: 4px; }.points-balance-card > div b { font-size: 14px; }.points-balance-card > div small { color: rgba(255,255,255,.65); font-size: 8px; }.points-balance-card > div i { width: 1px; height: 27px; background: rgba(255,255,255,.2); }
.points-task-section, .points-history-section { margin-top: 28px; }.points-progress-copy { padding: 6px 9px; border-radius: 99px; color: #b67725; background: #fbefda; font-size: 8px; }.points-task-list { padding: 0 14px; }.points-task-list button { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 11px; width: 100%; min-height: 68px; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); text-align: left; background: transparent; cursor: pointer; }.points-task-list button:last-child { border-bottom: 0; }.points-task-list button > span:nth-child(2) { display: grid; gap: 4px; }.points-task-list b { font-size: 10px; }.points-task-list small { color: var(--muted); font-size: 8px; }.points-task-list em { padding: 6px 8px; border-radius: 8px; color: var(--green); background: var(--mint); font-size: 8px; font-style: normal; }
.points-history { padding: 0 15px; }.points-history > div { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; min-height: 66px; border-bottom: 1px solid var(--line); }.points-history > div:last-child { border-bottom: 0; }.history-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; font-size: 16px; }.history-icon.plus { color: var(--green); background: var(--mint); }.history-icon.minus { color: #b87825; background: #fbefda; }.points-history p { display: grid; gap: 4px; margin: 0; }.points-history p b { font-size: 10px; }.points-history p small { color: var(--muted); font-size: 8px; }.points-history strong { color: var(--green); font-size: 11px; }.points-history > div:last-child strong { color: #b87825; }
.points-history .dynamic-redemption strong { color: #b87825; }

.mall-header { min-height: 180px; background: radial-gradient(circle at 88% 20%, rgba(255,220,132,.28), transparent 29%), linear-gradient(145deg, #8e5a1e, #c98430); }.mall-header .eyebrow { color: #ffe0a1; }.mall-header-copy { display: grid; align-content: end; gap: 2px; }.mall-header-copy h1 { font-size: 25px; }.mall-header-copy p { display: flex; align-items: baseline; gap: 4px; margin: 7px 0 0; color: rgba(255,255,255,.72); }.mall-header-copy p span, .mall-header-copy p small { font-size: 7px; }.mall-header-copy p strong { color: white; font-family: Georgia, serif; font-size: 26px; line-height: 1; }.mall-header-detail { display: flex; align-items: center; gap: 2px; align-self: end; margin-bottom: 2px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; color: white; background: rgba(255,255,255,.12); font-size: 8px; cursor: pointer; white-space: nowrap; }.mall-header-detail svg { width: 13px; height: 13px; }
.mall-content { padding-top: 18px; }.mall-pickup-section { margin-top: 0; }.pickup-deadline-badge { padding: 6px 9px; border-radius: 99px; color: #a45f29; background: #fff0dc; font-size: 7px; font-weight: 800; white-space: nowrap; }.mall-pickup-list { padding: 3px 14px; }.mall-pickup-empty { display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 11px; min-height: 80px; }.mall-pickup-empty > span { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; color: #b5792b; background: #fbefda; }.mall-pickup-empty svg { width: 18px; height: 18px; }.mall-pickup-empty p { display: grid; gap: 4px; margin: 0; }.mall-pickup-empty b { font-size: 10px; }.mall-pickup-empty small { color: var(--muted); font-size: 8px; line-height: 1.5; }.mall-pickup-card { display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 94px; padding: 12px 0; border-bottom: 1px solid var(--line); }.mall-pickup-card:last-child { border-bottom: 0; }.pickup-date-box { display: grid; place-items: center; align-content: center; width: 43px; height: 51px; border-radius: 13px; color: #a66b25; background: #fbefda; }.pickup-date-box b { font-family: Georgia, serif; font-size: 18px; line-height: 1; }.pickup-date-box small { margin-top: 3px; font-size: 7px; }.mall-pickup-card > div { display: grid; gap: 3px; min-width: 0; }.mall-pickup-card > div > small { color: #a36a27; font-size: 7px; font-weight: 750; }.mall-pickup-card h3 { overflow: hidden; margin: 0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.mall-pickup-card p { overflow: hidden; margin: 0; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.mall-pickup-card em { color: #c25f54; font-size: 7px; font-style: normal; font-weight: 700; }.pickup-code { display: grid; gap: 2px; min-width: 47px; padding: 7px 6px; border: 1px dashed #deb877; border-radius: 10px; text-align: center; background: #fffaf1; }.pickup-code small { color: #a78c67; font-size: 6px; }.pickup-code b { color: #9b6120; font-family: Georgia, serif; font-size: 17px; letter-spacing: .08em; }
.mall-product-section { margin-top: 27px; }.mall-stock-label { padding: 6px 8px; border-radius: 99px; color: #9c6a2b; background: #fbefda; font-size: 7px; white-space: nowrap; }.mall-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.mall-product-card { min-width: 0; padding: 10px 10px 12px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 8px 21px rgba(31,76,70,.07); }.mall-product-art { position: relative; display: grid; place-items: center; width: 100%; height: 89px; margin-bottom: 11px; overflow: hidden; border-radius: 15px; }.mall-product-art::before, .mall-product-art::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.28); }.mall-product-art::before { width: 72px; height: 72px; right: -28px; top: -30px; }.mall-product-art::after { width: 48px; height: 48px; left: -21px; bottom: -22px; }.mall-product-art svg { position: relative; z-index: 2; width: 38px; height: 38px; }.mall-product-art i { position: absolute; z-index: 3; right: 7px; top: 7px; padding: 3px 5px; border-radius: 99px; color: white; background: rgba(59,48,27,.35); font-size: 6px; font-style: normal; }.mall-product-art.egg { color: #b85d58; background: linear-gradient(145deg, #ffe7d1, #f8c58e); }.mall-product-art.egg svg { fill: rgba(184,93,88,.12); }.mall-product-art.pill-box { color: var(--green); background: linear-gradient(145deg, #dff3ee, #b7ded5); }.mall-product-art.recipe { color: #5d68ac; background: linear-gradient(145deg, #ece9fa, #d8d1f2); }.mall-product-art.salt-kit { color: #a56c25; background: linear-gradient(145deg, #fff1cc, #f2d08a); }.mall-product-card > small { color: var(--green); font-size: 7px; }.mall-product-card h3 { overflow: hidden; margin: 4px 0 5px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.mall-product-card > p { min-height: 25px; margin: 0 0 10px; color: var(--muted); font-size: 7px; line-height: 1.7; }.mall-exchange-button { display: flex; align-items: baseline; justify-content: center; gap: 4px; width: 100%; min-height: 34px; padding: 8px; border: 0; border-radius: 10px; color: white; background: linear-gradient(90deg, #bf7b29, #dc9b3c); box-shadow: 0 6px 13px rgba(177,113,34,.15); cursor: pointer; }.mall-exchange-button b { font-size: 11px; }.mall-exchange-button span { font-size: 7px; }.mall-exchange-button.low-balance { color: #9b7d56; background: #f4eee5; box-shadow: none; }.mall-exchange-button:disabled { color: var(--green); background: #e4f3ef; box-shadow: none; cursor: default; }.mall-exchange-button:disabled svg { width: 13px; height: 13px; }
.mall-order-section { margin-top: 28px; }.mall-order-list { padding: 0 14px; }.mall-order-empty { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 11px; min-height: 75px; }.mall-order-empty > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: #b67a2d; background: #fbefda; }.mall-order-empty svg { width: 18px; height: 18px; }.mall-order-empty p, .mall-order-row p { display: grid; gap: 4px; margin: 0; }.mall-order-empty b, .mall-order-row b { font-size: 10px; }.mall-order-empty small, .mall-order-row small { color: var(--muted); font-size: 8px; }.mall-order-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; min-height: 69px; border-bottom: 1px solid var(--line); }.mall-order-row:last-child { border-bottom: 0; }.mall-order-row > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #b77925; background: #fbefda; }.mall-order-row svg { width: 16px; height: 16px; }.mall-order-row > strong { color: #b77925; font-size: 10px; }.mall-note { display: flex; align-items: flex-start; gap: 7px; margin: 17px 4px 0; color: #929f9c; font-size: 7px; line-height: 1.7; }.mall-note svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--green); }

.redemption-date-header { background: radial-gradient(circle at 88% 18%, rgba(255,226,151,.26), transparent 29%), linear-gradient(145deg, #6f4518, #b77527); }.redemption-date-header .eyebrow { color: #ffe0a1; }.hospital-date-badge { padding: 6px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; color: #fff0cf; background: rgba(255,255,255,.11); font-size: 7px; white-space: nowrap; }.redemption-date-content { padding-top: 16px; padding-bottom: 105px; }.redemption-summary-card { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; min-height: 92px; padding: 16px; border: 1px solid #eadcc7; border-radius: 20px; background: linear-gradient(135deg, #fffdf8, #fff8ed); box-shadow: 0 9px 23px rgba(124,78,24,.08); }.redemption-summary-card > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: #a66d29; background: #fbefda; }.redemption-summary-card svg { width: 23px; height: 23px; }.redemption-summary-card p { display: grid; gap: 4px; min-width: 0; margin: 0; }.redemption-summary-card small { color: #9a8365; font-size: 7px; }.redemption-summary-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.redemption-summary-card em { color: var(--muted); font-size: 8px; font-style: normal; }.redemption-summary-card em b { color: #a86d26; }.redemption-rule-card { display: grid; grid-template-columns: 19px 1fr; gap: 9px; margin-top: 12px; padding: 13px 14px; border: 1px solid #f0d9d3; border-radius: 15px; color: #a95550; background: #fff4f1; }.redemption-rule-card > svg { width: 18px; height: 18px; }.redemption-rule-card p { display: grid; gap: 4px; margin: 0; }.redemption-rule-card b { font-size: 9px; }.redemption-rule-card span { color: #8f6965; font-size: 7px; line-height: 1.65; }.redemption-date-section { margin-top: 27px; }.redemption-date-options { display: grid; gap: 10px; }.redemption-date-option { display: grid; grid-template-columns: 47px 1fr 22px; align-items: center; gap: 11px; width: 100%; min-height: 91px; padding: 13px; border: 1px solid var(--line); border-radius: 19px; text-align: left; background: white; box-shadow: 0 7px 18px rgba(24,78,71,.055); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }.redemption-date-option:hover { transform: translateY(-1px); }.redemption-date-option.selected { border-color: #c58a3e; box-shadow: 0 9px 23px rgba(173,111,35,.14); }.date-calendar { display: grid; place-items: center; align-content: center; width: 47px; height: 58px; border-radius: 14px; color: #a46a24; background: #fbefda; }.date-calendar b { font-family: Georgia, serif; font-size: 20px; line-height: 1; }.date-calendar small { margin-top: 3px; font-size: 7px; }.date-copy { display: grid; gap: 5px; min-width: 0; }.date-copy b { font-size: 11px; }.date-copy small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.date-copy em { color: #a67333; font-size: 7px; font-style: normal; }.redemption-date-option > i { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #cbd5d3; border-radius: 50%; color: transparent; }.redemption-date-option > i svg { width: 12px; height: 12px; }.redemption-date-option.selected > i { color: white; border-color: #ba7a2c; background: #ba7a2c; }.redemption-confirm-button { width: 100%; min-height: 46px; margin-top: 18px; padding: 12px; border: 0; border-radius: 14px; color: white; background: linear-gradient(90deg, #a76620, #d59136); box-shadow: 0 9px 20px rgba(174,108,31,.2); font-size: 11px; font-weight: 760; cursor: pointer; }.redemption-confirm-button:disabled { color: #a7b1af; background: #e4eae8; box-shadow: none; cursor: not-allowed; }.redemption-success-panel { display: grid; justify-items: center; padding: 29px 18px 22px; border: 1px solid #eadcc7; border-radius: 25px; text-align: center; background: radial-gradient(circle at 84% 10%, rgba(255,225,150,.22), transparent 25%), white; box-shadow: var(--soft-shadow); }.redemption-success-panel[hidden] { display: none; }.redemption-success-icon { display: grid; place-items: center; width: 57px; height: 57px; margin-bottom: 13px; border-radius: 19px; color: white; background: linear-gradient(145deg, #0b776d, #28aa97); box-shadow: 0 10px 23px rgba(11,119,109,.22); }.redemption-success-icon svg { width: 26px; height: 26px; }.redemption-success-panel > .eyebrow { color: #b1772d; }.redemption-success-panel h2 { margin: 5px 0 7px; font-family: Georgia, "Songti SC", serif; font-size: 23px; }.redemption-success-panel > p { margin: 0; color: var(--muted); font-size: 8px; }.redemption-ticket { position: relative; display: grid; justify-items: center; width: 100%; margin-top: 19px; padding: 20px 14px 17px; overflow: hidden; border: 1px dashed #d4a763; border-radius: 18px; background: #fffaf1; }.redemption-ticket::before, .redemption-ticket::after { content: ""; position: absolute; top: 61px; width: 18px; height: 18px; border: 1px solid #eadcc7; border-radius: 50%; background: white; }.redemption-ticket::before { left: -10px; }.redemption-ticket::after { right: -10px; }.redemption-ticket small { color: #9f7f57; font-size: 7px; letter-spacing: .15em; }.redemption-ticket strong { margin: 5px 0 11px; color: #9a5e18; font-family: Georgia, serif; font-size: 44px; line-height: 1; letter-spacing: .15em; }.redemption-ticket span { font-size: 11px; font-weight: 760; }.redemption-ticket em { margin-top: 6px; color: var(--muted); font-size: 8px; font-style: normal; }.redemption-success-items { display: grid; gap: 5px; width: 100%; margin-top: 14px; padding: 12px; border-radius: 13px; text-align: left; background: #f4f8f7; }.redemption-success-items small { color: var(--muted); font-size: 7px; }.redemption-success-items b { font-size: 10px; line-height: 1.55; }.redemption-expiry-warning { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 13px !important; padding: 10px; border-radius: 11px; color: #b8544f !important; background: #fff0ed; font-weight: 750; }.redemption-expiry-warning svg { width: 15px; height: 15px; }.redemption-success-panel > button { width: 100%; min-height: 44px; margin-top: 16px; padding: 11px; border: 0; border-radius: 13px; color: white; background: var(--green); box-shadow: 0 8px 18px rgba(11,119,109,.18); font-size: 10px; font-weight: 750; cursor: pointer; }

.metric-entry-backdrop { position: absolute; z-index: 65; inset: 0; display: flex; align-items: flex-end; padding: 18px; background: rgba(10,42,38,.5); backdrop-filter: blur(5px); }.metric-entry-backdrop[hidden] { display: none; }.metric-entry-modal { width: 100%; max-height: calc(100% - 34px); padding: 21px 19px 18px; overflow-y: auto; border-radius: 25px; background: white; box-shadow: 0 22px 60px rgba(8,47,42,.3); animation: metric-sheet-in .26s ease-out; }@keyframes metric-sheet-in { from { opacity: .5; transform: translateY(24px); } }.metric-entry-modal > header { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; margin-bottom: 18px; }.metric-entry-modal > header > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: white; background: linear-gradient(145deg, #0b776d, #19a08f); box-shadow: 0 8px 18px rgba(11,119,109,.18); }.metric-entry-modal > header svg { width: 23px; height: 23px; }.metric-entry-modal header div { min-width: 0; }.metric-entry-modal header small { color: var(--green); font-size: 7px; font-weight: 800; letter-spacing: .12em; }.metric-entry-modal h3 { margin: 4px 0 3px; font-family: Georgia, "Songti SC", serif; font-size: 21px; }.metric-entry-modal header p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.metric-entry-modal form { display: grid; gap: 11px; }.metric-type-field, .metric-field { display: grid; gap: 7px; }.metric-type-field[hidden], .metric-field[hidden] { display: none; }.metric-type-field > span, .metric-field > span:first-child { color: #526b66; font-size: 9px; font-weight: 700; }.metric-type-field select { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid #d9e7e4; border-radius: 13px; color: var(--ink); background: #f7faf9; font-size: 11px; }.metric-input-shell { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 48px; padding: 0 13px; border: 1px solid #d9e7e4; border-radius: 13px; background: #f7faf9; transition: border-color .2s, box-shadow .2s; }.metric-input-shell:focus-within { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(19,153,138,.1); }.metric-input-shell input { min-width: 0; width: 100%; padding: 11px 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 17px; font-weight: 760; }.metric-input-shell input::placeholder { color: #b2bfbc; font-size: 10px; font-weight: 500; }.metric-input-shell em { margin-left: 10px; color: var(--muted); font-size: 9px; font-style: normal; white-space: nowrap; }.metric-entry-error { min-height: 15px; margin: -2px 2px 0; color: #c55654; font-size: 8px; line-height: 1.5; }.metric-entry-actions { display: grid; grid-template-columns: .72fr 1.28fr; gap: 9px; }.metric-entry-actions button { min-height: 43px; padding: 11px; border-radius: 13px; font-size: 10px; cursor: pointer; }.metric-entry-actions button:first-child { border: 1px solid #d8e2e0; color: #697b77; background: white; }.metric-entry-actions button:last-child { border: 0; color: white; background: var(--green); box-shadow: 0 8px 18px rgba(11,119,109,.18); font-weight: 730; }

.doctor-detail-header { background: radial-gradient(circle at 88% 20%, rgba(130,203,192,.32), transparent 27%), linear-gradient(145deg, #153f3b, #0b776d); }.doctor-detail-header .eyebrow { color: #9bd7cd; }.readonly-badge { padding: 6px 9px; border-radius: 99px; color: #cdece5; background: rgba(255,255,255,.11); font-size: 8px; white-space: nowrap; }
.doctor-detail-content { padding-top: 16px; }.doctor-detail-empty { min-height: 450px; padding: 74px 28px 30px; text-align: center; }.doctor-detail-empty > span { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 20px; border-radius: 23px; color: var(--green); background: var(--mint); }.doctor-detail-empty svg { width: 34px; height: 34px; }.doctor-detail-empty h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 23px; }.doctor-detail-empty p { margin: 13px auto 0; color: var(--muted); font-size: 10px; line-height: 1.75; }
.doctor-profile-hero { position: relative; display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 15px; min-height: 136px; padding: 21px; overflow: hidden; border-radius: 24px; color: white; background: radial-gradient(circle at 90% 15%, rgba(255,255,255,.12), transparent 30%), linear-gradient(135deg, #087168, #16a08f); box-shadow: var(--shadow); }.doctor-detail-avatar { display: grid; place-items: center; width: 76px; height: 76px; border: 4px solid rgba(255,255,255,.18); border-radius: 24px; font-family: Georgia, "Songti SC", serif; font-size: 26px; background: rgba(255,255,255,.14); }.doctor-profile-hero > div { display: grid; gap: 5px; }.doctor-profile-hero > div span { color: rgba(255,255,255,.65); font-size: 8px; }.doctor-profile-hero h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 23px; font-weight: 520; }.doctor-profile-hero p { margin: 0; color: rgba(255,255,255,.72); font-size: 9px; }.doctor-profile-hero > i { position: absolute; right: 15px; top: 15px; display: flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 99px; color: #d8f1ec; background: rgba(255,255,255,.11); font-size: 7px; font-style: normal; }.doctor-profile-hero > i svg { width: 11px; height: 11px; }
.doctor-info-card { margin-top: 14px; padding: 5px 15px; }.doctor-info-card > div { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 11px; min-height: 66px; border-bottom: 1px solid var(--line); }.doctor-info-card > div:last-child { border-bottom: 0; }.doctor-info-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; color: var(--green); background: var(--mint); }.doctor-info-icon svg { width: 18px; height: 18px; }.doctor-info-card p { display: grid; gap: 4px; margin: 0; }.doctor-info-card small { color: var(--muted); font-size: 8px; }.doctor-info-card b { font-size: 11px; }
.doctor-intro-card { margin-top: 26px; padding: 20px; border: 1px solid var(--line); border-radius: 21px; background: white; box-shadow: var(--soft-shadow); }.doctor-intro-card h2 { margin: 0 0 10px; font-family: Georgia, "Songti SC", serif; font-size: 19px; }.doctor-intro-card p { margin: 0; color: #607570; font-size: 10px; line-height: 1.8; }.doctor-readonly-note { display: flex; align-items: flex-start; gap: 7px; margin: 15px 4px 0; padding: 11px 12px; border: 1px solid #f0dfbb; border-radius: 13px; color: #8b6b3d; background: #fff9e9; font-size: 8px; line-height: 1.65; }.doctor-readonly-note svg { flex: 0 0 auto; width: 14px; height: 14px; }

/* Doctor onboarding and empty medication-plan state */
.no-plan-only { display: none !important; }
.app-shell.no-medication-plan .has-plan-only { display: none !important; }
.app-shell.no-medication-plan .no-plan-only { display: block !important; }
.empty-plan-card { padding: 28px 24px 23px; text-align: center; }
.empty-plan-icon { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 22px; color: var(--green); background: var(--mint); }
.empty-plan-icon > svg { width: 32px; height: 32px; }.empty-plan-icon i { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 24px; height: 24px; border: 3px solid white; border-radius: 50%; color: white; background: var(--green); }.empty-plan-icon i svg { width: 11px; height: 11px; }
.empty-plan-card .eyebrow { margin-bottom: 7px; }.empty-plan-card h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 22px; }.empty-plan-card p { max-width: 310px; margin: 12px auto 18px; color: var(--muted); font-size: 10px; line-height: 1.75; }
.empty-plan-card > button, .checkin-empty > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 154px; padding: 12px 18px; border: 0; border-radius: 13px; color: white; background: var(--green); box-shadow: 0 9px 19px rgba(11,119,109,.2); font-size: 11px; font-weight: 720; cursor: pointer; }.empty-plan-card > button svg { width: 14px; height: 14px; }.empty-plan-card > small { display: block; margin-top: 13px; color: #9aa8a5; font-size: 8px; }
.checkin-empty { min-height: 520px; padding: 58px 24px 30px; text-align: center; }
.empty-orbit { position: relative; width: 126px; height: 126px; margin: 0 auto 28px; border: 1px dashed #aed3cd; border-radius: 50%; }
.empty-orbit::before { content: ""; position: absolute; inset: 18px; border: 1px solid #d8e9e6; border-radius: 50%; }.empty-orbit > span { position: absolute; z-index: 2; inset: 36px; display: grid; place-items: center; border-radius: 22px; color: white; background: linear-gradient(145deg, #0b776d, #20a391); box-shadow: 0 12px 25px rgba(11,119,109,.2); }.empty-orbit span svg { width: 28px; height: 28px; }.empty-orbit > i, .empty-orbit > b { position: absolute; width: 11px; height: 11px; border: 3px solid var(--canvas); border-radius: 50%; background: var(--coral); }.empty-orbit > i { right: 7px; top: 20px; }.empty-orbit > b { left: 2px; bottom: 26px; background: var(--amber); }
.checkin-empty .eyebrow { margin-bottom: 8px; }.checkin-empty h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 23px; }.checkin-empty > p { max-width: 330px; margin: 13px auto 21px; color: var(--muted); font-size: 10px; line-height: 1.75; }.checkin-empty > button svg { width: 13px; height: 13px; }
.empty-steps { display: flex; align-items: center; justify-content: center; margin-top: 36px; }.empty-steps span { display: grid; gap: 6px; width: 85px; color: var(--muted); font-size: 8px; }.empty-steps span b { display: grid; place-items: center; width: 25px; height: 25px; margin: 0 auto; border: 1px solid #bedbd6; border-radius: 50%; color: var(--green); background: white; }.empty-steps > i { width: 24px; margin-top: -17px; border-top: 1px dashed #bed5d1; }
.doctor-overlay { position: absolute; z-index: 55; inset: 0; overflow-x: hidden; overflow-y: auto; color: var(--ink); background: var(--canvas); transition: opacity .3s, visibility .3s, transform .3s; }
.doctor-overlay.closed { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(20px); }
.doctor-header { position: relative; min-height: 190px; padding: 68px 24px 48px; overflow: hidden; color: white; background: radial-gradient(circle at 90% 20%, rgba(87,205,185,.35), transparent 28%), linear-gradient(145deg, #075f59, #128e81); }
.doctor-header::after { content: ""; position: absolute; width: 155px; height: 155px; right: -50px; top: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 27px rgba(255,255,255,.03); }.doctor-header > div { position: relative; z-index: 2; }.doctor-header .eyebrow { color: #9bd7cd; }.doctor-header h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 28px; font-weight: 550; }.doctor-header p { margin: 9px 0 0; color: rgba(255,255,255,.67); font-size: 10px; }.doctor-step { position: absolute; z-index: 2; right: 25px; bottom: 42px; color: rgba(255,255,255,.18); font-family: Georgia, serif; font-size: 48px; }
.doctor-content { position: relative; z-index: 2; margin-top: -23px; padding: 0 18px 28px; }
.doctor-tip { display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; border: 1px solid #dbe9e6; border-radius: 15px; color: #5e746f; background: rgba(255,255,255,.97); box-shadow: var(--soft-shadow); }.doctor-tip svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--green); }.doctor-tip p { margin: 0; font-size: 8px; line-height: 1.6; }
.selection-panel[hidden] { display: none; }
.department-list { display: grid; gap: 11px; margin-top: 16px; }
.department-card { position: relative; display: grid; grid-template-columns: 48px 1fr auto 21px; align-items: center; gap: 11px; width: 100%; min-height: 91px; padding: 14px; border: 1px solid var(--line); border-radius: 20px; text-align: left; background: white; box-shadow: 0 7px 19px rgba(24,78,71,.055); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }.department-card:hover { transform: translateY(-1px); }.department-card.selected { border-color: var(--green-2); box-shadow: 0 10px 25px rgba(11,119,109,.13); }
.department-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; }.department-icon svg { width: 23px; height: 23px; }.department-icon.coral { color: #c65f52; background: #fae7e3; }.department-icon.teal { color: var(--green); background: var(--mint); }.department-icon.violet { color: var(--violet); background: #ece9fa; }
.department-card > span:nth-child(2) { display: grid; gap: 5px; min-width: 0; }.department-card b { font-size: 12px; }.department-card small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.department-card > em { padding: 5px 6px; border-radius: 7px; color: var(--green); background: #edf7f5; font-size: 7px; font-style: normal; white-space: nowrap; }.department-card > i { display: grid; place-items: center; width: 21px; height: 21px; border: 1.5px solid #c7d5d2; border-radius: 50%; color: transparent; }.department-card > i svg { width: 11px; height: 11px; }.department-card.selected > i { color: white; border-color: var(--green-2); background: var(--green-2); }
.selection-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 11px 2px; padding: 4px 0; border: 0; color: var(--green); background: transparent; font-size: 9px; cursor: pointer; }.selection-back svg { width: 14px; height: 14px; }
.selected-department { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; padding: 12px 13px; border: 1px solid #cbe2dd; border-radius: 15px; color: var(--green); background: #edf7f5; }.selected-department > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: white; background: var(--green); }.selected-department svg { width: 17px; height: 17px; }.selected-department p { display: grid; gap: 3px; margin: 0; }.selected-department small { color: #7c918d; font-size: 7px; }.selected-department b { font-size: 11px; }
.doctor-list { display: grid; gap: 11px; margin-top: 16px; }
.doctor-card { position: relative; display: grid; grid-template-columns: 54px 1fr 24px; align-items: center; gap: 12px; width: 100%; min-height: 105px; padding: 15px; border: 1px solid var(--line); border-radius: 20px; text-align: left; background: white; box-shadow: 0 7px 19px rgba(24,78,71,.055); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }.doctor-card[hidden] { display: none; }.doctor-card:hover { transform: translateY(-1px); }.doctor-card.selected { border-color: var(--green-2); box-shadow: 0 10px 25px rgba(11,119,109,.13); }
.doctor-avatar { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; color: white; font-family: Georgia, "Songti SC", serif; font-size: 20px; }.doctor-a { background: linear-gradient(145deg, #3c958a, #0b776d); }.doctor-b { background: linear-gradient(145deg, #7585ce, #5966ad); }.doctor-c { background: linear-gradient(145deg, #dd9870, #bf6956); }.doctor-d { background: linear-gradient(145deg, #4d8fbd, #3d6c9f); }.doctor-e { background: linear-gradient(145deg, #a878c8, #76589a); }.doctor-f { background: linear-gradient(145deg, #cfab4f, #aa7d26); }
.doctor-info { display: grid; gap: 6px; min-width: 0; }.doctor-info b { font-size: 13px; }.doctor-info b em { margin-left: 5px; padding: 3px 6px; border-radius: 6px; color: var(--green); background: var(--mint); font-size: 7px; font-style: normal; font-weight: 650; }.doctor-info small { overflow: hidden; color: #627672; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.doctor-info > i { color: #98a5a2; font-size: 8px; font-style: normal; }
.doctor-radio { display: grid; place-items: center; width: 21px; height: 21px; border: 1.5px solid #c7d5d2; border-radius: 50%; color: transparent; }.doctor-radio svg { width: 11px; height: 11px; }.doctor-card.selected .doctor-radio { color: white; border-color: var(--green-2); background: var(--green-2); }
.doctor-actions { display: grid; gap: 9px; margin-top: 19px; }.doctor-confirm, .doctor-skip { width: 100%; padding: 13px; border-radius: 14px; font-size: 11px; cursor: pointer; }.doctor-confirm { border: 0; color: white; background: var(--green); box-shadow: 0 9px 20px rgba(11,119,109,.2); font-weight: 750; }.doctor-confirm:disabled { color: #a3b0ad; background: #e3eae8; box-shadow: none; cursor: not-allowed; }.doctor-skip { border: 1px solid #d5e0de; color: #6c7d79; background: white; }.doctor-footnote { margin: 13px 0 0; color: #98a6a3; text-align: center; font-size: 8px; }

@media (max-width: 900px) {
  .desktop-backdrop { display: none; }
  .app-shell { width: 100%; height: 100vh; margin: 0; border-radius: 0; box-shadow: none; }
}
@media (min-width: 901px) {
  .app-shell { margin-left: calc(50% + 80px); }
}
@media (max-height: 680px) {
  .app-shell { height: 100vh; margin-top: 0; border-radius: 0; }
  .login-brand { margin-bottom: 15px; }
  .login-heart { width: 56px; height: 56px; margin-bottom: 10px; }
  .login-brand h2 { font-size: 24px; }
  .login-panel { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}