:root {
  --ink: #17312f;
  --muted: #71817f;
  --line: #e6efed;
  --paper: #ffffff;
  --mint: #13b89d;
  --mint-deep: #087f72;
  --sky: #eaf4ff;
  --lavender: #f0ecff;
  --coral: #ff7f70;
  --amber: #ffbf4b;
  --shadow: 0 18px 50px rgba(25, 83, 76, 0.12);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html { background: #dfece9; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 10%, #f8ffff 0, #dfece9 52%, #c9dfda 100%); }
button, input { font: inherit; }
button { color: inherit; }
.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; }

.app-shell {
  position: relative;
  width: min(100%, 440px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(180deg, #eff7f6 0, #f7faf9 44%, #eef6f4 100%);
  box-shadow: 0 0 80px rgba(16, 71, 65, 0.22);
  padding-bottom: 104px;
}

.hero {
  position: relative;
  height: 250px;
  overflow: hidden;
  color: white;
  background: #087f72 url("./assets/taikang-xianlin-campus.jpg") center 46% / cover no-repeat;
}
.hero::before { content: ""; position: absolute; z-index: 1; inset: 45px 0 0; background: linear-gradient(90deg, rgba(2,42,38,.66), rgba(4,63,57,.42) 52%, rgba(2,42,38,.22)); }
.status-bar { position: relative; z-index: 4; display: flex; min-height: 45px; align-items: center; justify-content: space-between; padding: max(12px, env(safe-area-inset-top)) 22px 8px; color: #152725; background: white; font-weight: 760; font-size: 13px; letter-spacing: .03em; }
.status-icons { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.status-icons b { padding: 2px 5px; border-radius: 5px; color: white; background: var(--mint-deep); }
.mini-nav { position: relative; z-index: 6; display: flex; justify-content: flex-end; align-items: center; padding: 11px 18px; }
.mini-actions { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.2); color: white; backdrop-filter: blur(15px); box-shadow: inset 0 1px rgba(255,255,255,.18); }
.mini-actions { display: flex; gap: 13px; align-items: center; height: 36px; padding: 0 13px; border-radius: 999px; }
.mini-actions i { display: block; width: 1px; height: 18px; background: rgba(255,255,255,.35); }
.brand-card { position: absolute; z-index: 5; left: 18px; right: 18px; bottom: 14px; display: grid; margin: 0; padding: 12px; grid-template-columns: minmax(0,1.12fr) minmax(164px,.88fr); gap: 12px; border: 1px solid rgba(255,255,255,.38); border-radius: 18px; color: white; background: rgba(255,255,255,.16); box-shadow: inset 0 1px rgba(255,255,255,.14), 0 12px 32px rgba(4,67,60,.13); backdrop-filter: blur(13px); }
.brand-row { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 5px 2px; }
.brand-mark { display: grid; width: 42px; height: 49px; flex: none; place-items: center; clip-path: polygon(50% 0, 91% 17%, 85% 68%, 50% 100%, 15% 68%, 9% 17%); color: var(--mint-deep); background: rgba(255,255,255,.88); filter: drop-shadow(0 7px 12px rgba(4,69,62,.14)); }
.brand-mark span { font-size: 22px; font-weight: 500; transform: translateY(-1px); }
.brand-name { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.brand-meta { display: flex; align-items: center; gap: 4px; }
.brand-meta small, .brand-meta i { padding: 2px 6px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: rgba(255,255,255,.92); background: rgba(255,255,255,.14); font-size: 6px; font-style: normal; font-weight: 700; line-height: 1.35; }
.brand-meta small { letter-spacing: .04em; }
.brand-name strong { margin-top: 5px; overflow: hidden; font-family: inherit; font-size: 16px; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.brand-name em { margin-top: 5px; color: rgba(255,255,255,.65); font-size: 7px; font-style: normal; letter-spacing: .04em; }
.patient-pass { display: grid; min-width: 0; padding: 8px 9px; grid-template-columns: 1fr auto; grid-template-areas: "person switch" "barcode barcode"; gap: 6px; border: 1px solid rgba(255,218,124,.86); border-radius: 12px; color: #5e4a25; text-align: left; background: rgba(255,246,210,.88); box-shadow: 0 5px 16px rgba(45,76,68,.1), inset 0 1px rgba(255,255,255,.65); backdrop-filter: blur(10px); }
.patient-switch-button { display: inline-flex; min-width: 0; min-height: 30px; padding: 2px 4px 2px 0; grid-area: person; align-items: center; justify-self: start; gap: 3px; border: 0; color: #5e4a25; background: transparent; }
.current-patient-name { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.patient-switch-button svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.patient-center-button { display: grid; width: 30px; height: 30px; padding: 0; grid-area: switch; place-items: center; align-self: start; border: 1px solid rgba(183,134,38,.2); border-radius: 50%; color: #80611f; background: rgba(255,255,255,.52); box-shadow: inset 0 1px rgba(255,255,255,.55); }
.patient-center-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.patient-barcode-button { display: flex; width: 100%; min-height: 36px; padding: 4px 6px 3px; grid-area: barcode; align-items: stretch; justify-content: center; flex-direction: column; gap: 3px; border: 1px solid rgba(157,111,25,.18); border-radius: 7px; color: #6a511d; background: rgba(255,255,255,.55); }
.patient-barcode-button b { color: #6a511d; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 6px; font-weight: 650; letter-spacing: .12em; }
.mini-barcode { display: block; width: 100%; height: 18px; border-radius: 2px; background: repeating-linear-gradient(90deg, #3f3219 0 1px, transparent 1px 3px, #3f3219 3px 5px, transparent 5px 6px, #3f3219 6px 7px, transparent 7px 10px); }
.segment { display: grid; grid-template-columns: 1fr 1fr; margin: 0 14px; padding: 4px; border-radius: 15px; background: #f1f5f4; }
.segment-button { border: 0; border-radius: 12px; padding: 11px 7px; background: transparent; color: #75817f; font-size: 16px; font-weight: 650; transition: .2s ease; }
.segment-button.active { color: var(--mint-deep); background: white; box-shadow: 0 5px 18px rgba(22,74,68,.09); }
.segment-button span { color: var(--mint); }
.view { display: none; padding: 18px 14px 30px; }
.view.active { display: block; animation: view-in .32s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(7px); } }
.assistant-card, .service-section { border: 1px solid rgba(255,255,255,.9); border-radius: 24px; background: rgba(255,255,255,.78); box-shadow: 0 10px 32px rgba(21,74,68,.07); }
.assistant-card { padding: 22px 16px 16px; }
.shared-capabilities { margin: 18px 14px 0; }
.assistant-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 5px; }
.assistant-heading p { margin: 0 0 4px; color: var(--mint-deep); font-size: 13px; font-weight: 700; }
.assistant-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.doctor-avatar { position: relative; width: 71px; height: 68px; flex: none; overflow: hidden; border-radius: 45% 45% 18px 18px; background: linear-gradient(#bbefe4 0 45%, white 46%); box-shadow: inset 0 -15px #dff4f0; }
.doctor-avatar .hair { position: absolute; left: 17px; top: 8px; width: 39px; height: 23px; border-radius: 50% 50% 20% 20%; background: #214b48; transform: rotate(-7deg); }
.doctor-avatar .face { position: absolute; left: 23px; top: 22px; display: grid; place-items: center; width: 31px; height: 28px; border-radius: 45%; background: #ffd3b7; color: #704438; }
.doctor-avatar .coat { position: absolute; left: 17px; bottom: -2px; width: 42px; height: 24px; color: var(--mint); text-align: center; font-size: 22px; font-style: normal; }
.quick-list { display: grid; gap: 9px; }
.quick-list button { display: grid; grid-template-columns: 44px 1fr 16px; gap: 11px; align-items: center; width: 100%; padding: 13px 12px; border: 1px solid #edf2f1; border-radius: 17px; text-align: left; background: white; box-shadow: 0 5px 15px rgba(17,72,65,.045); transition: .18s ease; }
.quick-list button:active { transform: scale(.985); background: #f9fcfb; }
.quick-list button > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.quick-list strong { font-size: 15px; }
.quick-list small { margin-top: 3px; overflow: hidden; color: #7e8a88; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.quick-list b { color: #a8b6b3; font-size: 23px; font-weight: 400; }
.quick-icon, .service-icon { display: grid; place-items: center; border-radius: 14px; font-weight: 800; }
.quick-icon { width: 42px; height: 42px; }
.mint { color: #088b78; background: #dff8f2; }
.blue { color: #258fdf; background: #e5f3ff; }
.violet { color: #7d69df; background: #efebff; }
.coral { color: #ea6558; background: #fff0ed; }
.amber { color: #d88c00; background: #fff5da; }
.chat-panel { display: none; margin-top: 14px; padding: 16px; border-radius: 22px; background: #e8f4f1; }
.chat-panel.visible { display: grid; gap: 12px; }
.message { display: flex; gap: 8px; align-items: flex-end; }
.message.user-message { justify-content: flex-end; }
.message p { max-width: 77%; margin: 0; padding: 11px 13px; border-radius: 16px 16px 16px 5px; color: #38504d; background: white; font-size: 13px; line-height: 1.55; box-shadow: 0 4px 14px rgba(25,73,68,.07); }
.user-message p { order: -1; color: white; border-radius: 16px 16px 5px 16px; background: var(--mint-deep); }
.message-avatar { display: grid; width: 27px; height: 27px; flex: none; place-items: center; border-radius: 9px; color: white; background: var(--mint); font-size: 11px; }
.user-message .message-avatar { background: #7d9591; }
.service-section { padding: 16px 14px; }
.shortcut-section { padding: 16px 10px 14px; }
.shortcut-services { display: grid; grid-template-columns: repeat(4, 1fr); }
.shortcut-services button { display: flex; min-width: 0; align-items: center; flex-direction: column; gap: 8px; padding: 2px; border: 0; background: none; }
.service-icon { display: grid; width: 45px; height: 45px; margin: 0; place-items: center; border-radius: 14px; font-size: 21px; font-weight: 800; }
.shortcut-services strong { font-size: 11px; white-space: nowrap; }
.feature-services { display: grid; margin-top: 10px; grid-template-columns: 1fr 1fr; gap: 9px; }
.feature-services > button { position: relative; display: grid; min-width: 0; padding: 11px 10px; grid-template-columns: 36px 1fr; gap: 8px; align-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 16px; text-align: left; background: rgba(255,255,255,.83); box-shadow: 0 8px 22px rgba(21,74,68,.06); }
.feature-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; font-size: 15px; }
.feature-services button > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.feature-services strong { font-size: 12px; }
.feature-services small { margin-top: 3px; overflow: hidden; color: #8a9795; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.feature-services b { position: absolute; right: 7px; top: 5px; padding: 2px 4px; border-radius: 5px; color: var(--coral); background: #fff0ed; font-size: 6px; }
.service-catalog { margin-top: 10px; padding: 0 0 15px; overflow: hidden; }
.service-category-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #edf1f0; }
.service-category-tabs button { position: relative; padding: 13px 4px 12px; border: 0; color: #6d7b79; background: none; font-size: 12px; font-weight: 650; }
.service-category-tabs button.active { color: var(--mint-deep); }
.service-category-tabs button.active::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--mint); transform: translateX(-50%); }
.service-category-panel { display: grid; padding: 16px 10px 2px; grid-template-columns: repeat(3, 1fr); row-gap: 17px; }
.service-category-panel[hidden] { display: none; }
.service-category-panel button { display: flex; align-items: center; flex-direction: column; gap: 7px; border: 0; background: none; font-size: 10px; white-space: nowrap; }
.service-category-panel button span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; color: #2c8de1; background: #f0f5fb; font-size: 16px; font-weight: 650; }
.expert-section { margin-top: 12px; }
.expert-title { display: grid; padding: 0 5px 9px; grid-template-columns: 4px 1fr auto; gap: 7px; align-items: center; }
.expert-title > span { width: 4px; height: 18px; border-radius: 4px; background: var(--coral); }
.expert-title h2 { margin: 0; font-size: 16px; }
.expert-title button { border: 0; color: #7e8e8b; background: none; font-size: 9px; }
.expert-card { display: grid; width: 100%; min-height: 78px; padding: 11px 12px; grid-template-columns: 47px minmax(0,1fr) 145px; gap: 10px; align-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 18px; text-align: left; background: rgba(255,255,255,.88); box-shadow: 0 8px 24px rgba(21,74,68,.06); }
.expert-card + .expert-card { margin-top: 8px; }
.expert-avatar { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; color: white; background: linear-gradient(145deg, #64b2ed, #3475ce); font-size: 18px; font-weight: 800; }
.expert-copy { display: flex; min-width: 0; flex-direction: column; }
.expert-copy strong { font-size: 13px; font-style: normal; }
.expert-copy small { margin-top: 6px; overflow: hidden; color: #82918f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.expert-side { display: flex; min-width: 0; align-self: stretch; justify-content: space-between; flex-direction: column; }
.expert-tags { display: flex; justify-content: flex-end; gap: 4px; }
.expert-tags i { padding: 3px 5px; border-radius: 999px; color: #607572; background: #edf4f2; font-size: 6px; font-style: normal; font-weight: 600; white-space: nowrap; }
.expert-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.expert-actions button { min-width: 48px; padding: 5px 9px; border: 0; border-radius: 999px; color: white; background: var(--mint-deep); font-size: 8px; font-weight: 750; }
.expert-actions button:disabled { color: #879390; background: #e7eceb; }
.expert-actions .profile-link-button { min-width: auto; padding: 2px 0; border-radius: 0; color: #6c829f; background: none; font-size: 7px; font-weight: 600; }
.expert-card.unavailable { background: rgba(249,251,250,.76); }
.mint-avatar { background: linear-gradient(145deg, #3cc6aa, #078174); }

.variant-switcher { position: fixed; z-index: 25; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); display: flex; align-items: center; width: min(calc(100% - 24px), 416px); height: 60px; padding: 7px 8px 7px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; color: white; background: rgba(19,49,46,.94); box-shadow: 0 16px 38px rgba(12,45,42,.27); backdrop-filter: blur(18px); transform: translateX(-50%); }
.variant-switcher > span { width: 61px; flex: none; color: #b9cfcb; font-size: 9px; letter-spacing: .08em; }
.variant-switcher > div { display: grid; height: 100%; flex: 1; grid-template-columns: 1fr 1.22fr; gap: 5px; padding: 3px; border-radius: 14px; background: rgba(255,255,255,.08); }
.variant-switcher button { border: 0; border-radius: 11px; color: #d2dfdc; background: transparent; font-size: 11px; font-weight: 650; transition: .2s ease; }
.variant-switcher button b { display: inline-grid; width: 19px; height: 19px; margin-right: 3px; place-items: center; border-radius: 7px; color: #b9d8d2; background: rgba(255,255,255,.1); font-size: 9px; }
.variant-switcher button.active { color: var(--ink); background: white; box-shadow: 0 5px 16px rgba(0,0,0,.15); }
.variant-switcher button.active b { color: white; background: var(--mint); }
.composer { position: fixed; z-index: 21; left: 50%; bottom: 78px; display: none; width: min(100%, 440px); padding: 9px 13px; gap: 8px; background: linear-gradient(180deg, rgba(240,247,245,.2), rgba(240,247,245,.98) 30%); transform: translateX(-50%); }
.composer.visible { display: flex; }
.composer label { flex: 1; }
.composer input { width: 100%; height: 47px; padding: 0 15px; border: 1px solid #deebe8; outline: none; border-radius: 16px; color: var(--ink); background: white; box-shadow: 0 7px 20px rgba(21,70,65,.08); font-size: 13px; }
.composer input:focus { border-color: #72cbbb; box-shadow: 0 0 0 3px rgba(19,184,157,.11); }
.chat-mode-toggle, .send-button { width: 47px; height: 47px; flex: none; border: 0; border-radius: 50%; }
.chat-mode-toggle { display: grid; place-items: center; border: 1px solid #d2e0dd; color: #263f3b; background: white; box-shadow: 0 7px 20px rgba(21,70,65,.08); }
.material-icon { width: 25px; height: 25px; fill: currentColor; }
.chat-keyboard-icon { display: none; }
.chat-voice-button { display: none; height: 47px; min-width: 0; flex: 1; border: 1px solid #deebe8; border-radius: 16px; color: var(--ink); background: white; box-shadow: 0 7px 20px rgba(21,70,65,.08); font-size: 13px; font-weight: 700; }
.composer.voice-mode label, .composer.voice-mode .send-button, .composer.voice-mode .chat-audio-icon { display: none; }
.composer.voice-mode .chat-voice-button { display: block; }
.composer.voice-mode .chat-keyboard-icon { display: block; }
.send-button { color: white; background: var(--mint-deep); font-size: 20px; }
.voice-controls { position: fixed; z-index: 24; left: 50%; bottom: 84px; display: none; width: min(calc(100% - 40px), 300px); height: 70px; padding: 7px; align-items: center; gap: 8px; border: 1px solid rgba(215,230,226,.92); border-radius: 22px; background: rgba(244,248,247,.96); box-shadow: 0 14px 32px rgba(17,69,63,.18); opacity: 1; backdrop-filter: blur(16px); transform: translateX(-50%); transition: width .24s ease, opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; }
.voice-controls.scroll-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 18px) scale(.96); }
.voice-fab { position: relative; display: flex; height: 54px; min-width: 0; touch-action: none; user-select: none; align-items: center; justify-content: center; flex: 1; gap: 9px; border: 1px solid #e1eae8; border-radius: 12px; color: var(--ink); background: white; box-shadow: 0 3px 10px rgba(17,69,63,.06); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease; }
.voice-fab .voice-ripple { position: absolute; inset: -3px; border: 1px solid rgba(19,184,157,.2); border-radius: 15px; opacity: 0; }
.mic-icon { position: relative; display: block; width: 18px; height: 23px; border: 2px solid white; border-radius: 9px; }
.mic-icon::before { content: ""; position: absolute; left: 50%; bottom: -7px; width: 24px; height: 13px; border: 2px solid white; border-top: 0; border-radius: 0 0 13px 13px; transform: translateX(-50%); }
.mic-icon::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 2px; height: 5px; background: white; transform: translateX(-50%); }
.voice-fab .mic-icon { display: none; }
.voice-fab small { font-size: 15px; font-weight: 750; letter-spacing: .08em; }
.voice-fab.holding { color: var(--mint-deep); background: #dff5f0; box-shadow: inset 0 2px 8px rgba(4,83,75,.08); transform: scale(.985); }
.voice-fab.holding .voice-ripple { animation: voice-pulse 1.05s ease-out infinite; }
@keyframes voice-pulse { 0% { opacity: .7; transform: scale(.88); } 100% { opacity: 0; transform: scale(1.45); } }
.input-mode-toggle { display: grid; width: 52px; height: 52px; flex: none; place-items: center; border: 1.5px solid #cbd9d6; border-radius: 50%; color: #324b47; background: white; }
.input-mode-toggle .keyboard-icon { display: block; }
.input-mode-toggle .mode-mic-icon { display: none; }
.unified-text-composer { display: none; height: 54px; min-width: 0; padding: 4px 5px; flex: 1; gap: 4px; border: 1px solid #e1eae8; border-radius: 12px; background: white; box-shadow: 0 3px 10px rgba(17,69,63,.06); }
.unified-text-composer label { min-width: 0; flex: 1; }
.unified-text-composer input { width: 100%; height: 100%; padding: 0 8px 0 13px; border: 0; outline: none; color: var(--ink); background: transparent; font-size: 11px; }
.unified-text-composer button { width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; color: white; background: var(--mint-deep); font-size: 18px; }
.voice-controls.text-mode { width: min(calc(100% - 20px), 420px); }
.voice-controls.text-mode .voice-fab { display: none; }
.voice-controls.text-mode .unified-text-composer { display: flex; }
.voice-controls.text-mode .keyboard-icon { display: none; }
.voice-controls.text-mode .mode-mic-icon { display: block; }
.voice-hold-overlay { position: fixed; z-index: 60; left: 50%; top: 0; bottom: 0; width: min(100%, 440px); overflow: hidden; color: white; background: rgba(11,30,28,.6); backdrop-filter: blur(2px); pointer-events: none; transform: translateX(-50%); animation: fade-in .15s ease both; }
.voice-hold-overlay[hidden] { display: none; }
.overlay-center { position: absolute; left: 50%; top: 46%; display: flex; width: 86%; align-items: center; flex-direction: column; transform: translate(-50%,-50%); text-align: center; }
.overlay-center h2 { margin: 21px 0 7px; font-size: 22px; }
.overlay-center p { margin: 0; font-size: 13px; font-weight: 700; }
.overlay-center small { width: min(100%, 340px); margin-top: 16px; padding: 0 10px; border: 0; background: transparent; color: white; font-size: 17px; font-weight: 700; line-height: 26px; overflow-wrap: anywhere; text-shadow: 0 2px 8px rgba(0,0,0,.28); }
.overlay-center small.overlay-tip-mode { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: baseline; gap: 5px; text-align: left; }
.overlay-tip-prefix { min-width: 0; text-align: right; white-space: nowrap; }
.overlay-tip-example { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .16s ease, transform .16s ease; }
.overlay-tip-example.changing { opacity: 0; transform: translateY(6px); }
.overlay-wave { display: flex; height: 62px; align-items: center; gap: 8px; }
.overlay-wave i { width: 8px; height: 26px; border-radius: 7px; background: white; animation: overlay-wave 720ms ease-in-out infinite alternate; }
.overlay-wave i:nth-child(2), .overlay-wave i:nth-child(6) { height: 44px; animation-delay: -120ms; }
.overlay-wave i:nth-child(3), .overlay-wave i:nth-child(5) { height: 58px; animation-delay: -240ms; }
.overlay-wave i:nth-child(4) { height: 68px; animation-delay: -360ms; }
@keyframes overlay-wave { to { transform: scaleY(.45); opacity: .6; } }
.overlay-listening-pill { position: absolute; left: 50%; bottom: 84px; display: flex; width: min(calc(100% - 40px), 340px); min-height: 62px; padding: 12px 20px; align-items: center; justify-content: center; gap: 12px; border-radius: 24px; background: linear-gradient(100deg, #19bfa2, #087f72); box-shadow: 0 15px 30px rgba(0,39,35,.28); transform: translateX(-50%); }
.overlay-listening-pill strong { font-size: 15px; }
.mini-wave { display: flex; height: 17px; align-items: center; gap: 3px; }
.mini-wave i { width: 3px; height: 7px; border-radius: 3px; background: white; animation: wave 650ms ease-in-out infinite alternate; }
.mini-wave i:nth-child(2), .mini-wave i:nth-child(4) { height: 13px; animation-delay: -160ms; }
.mini-wave i:nth-child(3) { height: 17px; animation-delay: -320ms; }
.voice-hold-overlay.canceling .overlay-center p { color: #ffd1cb; }
.voice-hold-overlay.canceling .overlay-listening-pill { background: linear-gradient(100deg, #ff8a78, #ea6259); }
.app-shell[data-layout="split"]:has(#consult-view.active) { padding-bottom: 165px; }
.app-shell[data-layout="unified"] { padding-bottom: 172px; }
.app-shell[data-layout="unified"] .segment { display: none; }
.app-shell[data-layout="unified"] .view { display: block; }
.app-shell[data-layout="unified"] #consult-view { padding-bottom: 10px; }
.app-shell[data-layout="unified"] #services-view { padding-top: 0; }
.app-shell[data-layout="unified"] .shared-capabilities,
.app-shell[data-layout="split"][data-view="services"] .shared-capabilities { display: none; }
.app-shell[data-layout="unified"] .voice-controls { display: flex; }

.conversation-backdrop { position: fixed; z-index: 30; inset: 0; background: rgba(7,34,31,.28); backdrop-filter: blur(2px); animation: fade-in .22s ease both; }
@keyframes fade-in { from { opacity: 0; } }
.conversation-sheet { position: fixed; z-index: 31; left: 50%; bottom: 0; display: flex; width: min(100%, 440px); height: min(72vh, 630px); min-height: 510px; padding: 8px 17px max(17px, env(safe-area-inset-bottom)); flex-direction: column; border-radius: 28px 28px 0 0; background: #f8fbfa; box-shadow: 0 -22px 55px rgba(8,55,49,.24); transform: translateX(-50%); animation: sheet-in .3s cubic-bezier(.2,.8,.2,1) both; }
.conversation-sheet[hidden] { display: none; }
.conversation-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 3px; }
.conversation-header h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.conversation-header button { width: 33px; height: 33px; border: 0; border-radius: 50%; color: #81908e; background: #eaf1ef; font-size: 23px; }
@keyframes mic-breathe { 50% { transform: scale(1.06); box-shadow: 0 8px 24px rgba(237,94,87,.35); } }
@keyframes wave { to { transform: scaleY(.35); } }
.unified-sheet-chat { display: grid; min-height: 0; margin-top: 12px; padding: 13px; flex: 1; align-content: start; gap: 11px; overflow-y: auto; border-radius: 19px; background: #e8f4f1; }
.unified-sheet-chat .message p { max-width: 82%; }
.conversation-composer { display: flex; min-height: 52px; margin-top: 10px; padding: 5px; align-items: center; gap: 6px; border: 1px solid #dce8e5; border-radius: 17px; background: white; box-shadow: 0 6px 18px rgba(18,68,62,.08); }
.conversation-composer label { min-width: 0; flex: 1; }
.conversation-composer input { width: 100%; height: 40px; padding: 0 8px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.conversation-composer input::placeholder { color: #95a3a0; }
.conversation-voice-button, .conversation-send-button { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border: 0; border-radius: 13px; }
.conversation-voice-button { color: var(--mint-deep); background: #e5f5f1; }
.conversation-voice-button .material-icon { width: 22px; height: 22px; }
.conversation-voice-button.listening { color: white; background: linear-gradient(145deg, #ff8b78, #ed5e57); animation: mic-breathe 1.2s ease-in-out infinite; }
.conversation-send-button { color: white; background: var(--mint-deep); font-size: 18px; }
.conversation-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; }
.conversation-actions button { min-height: 42px; padding: 0 15px; border: 0; border-radius: 13px; font-size: 11px; font-weight: 700; }
#sheet-appointment { color: white; background: linear-gradient(100deg, #14b99d, #078174); box-shadow: 0 8px 18px rgba(7,129,116,.18); }
#sheet-appointment span { margin-left: 7px; }
#minimize-conversation { color: #637572; background: #e8efed; }
#sheet-appointment[hidden] + #minimize-conversation { grid-column: 1 / -1; }
.conversation-privacy { margin: 9px 0 0; color: #899693; text-align: center; font-size: 8px; }
.conversation-privacy span { color: var(--mint); }
.sheet-backdrop { position: fixed; z-index: 36; inset: 0; background: rgba(7,34,31,.42); backdrop-filter: blur(4px); }
.appointment-sheet { position: fixed; z-index: 37; left: 50%; bottom: 0; width: min(100%, 440px); padding: 8px 19px max(22px, env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: white; box-shadow: 0 -20px 50px rgba(10,49,45,.19); transform: translateX(-50%); animation: sheet-in .3s ease both; }
@keyframes sheet-in { from { transform: translate(-50%, 30px); opacity: 0; } }
.sheet-handle { width: 37px; height: 4px; margin: 0 auto 16px; border-radius: 3px; background: #d5dfdd; }
.sheet-header { display: flex; align-items: flex-start; justify-content: space-between; }
.sheet-header span { color: var(--mint-deep); font-size: 11px; font-weight: 700; }
.sheet-header h2 { margin: 3px 0 0; font-size: 22px; }
.sheet-header button { width: 33px; height: 33px; border: 0; border-radius: 50%; color: #81908e; background: #f1f5f4; font-size: 24px; }
.step-label { display: flex; align-items: center; justify-content: center; margin: 20px 24px 0; }
.step-label b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: white; background: var(--mint); font-size: 11px; }
.step-label span { height: 2px; flex: 1; background: #cfeae5; }
.step-copy { display: flex; justify-content: space-between; margin: 5px 17px 20px; color: #79908c; font-size: 9px; }
.field-group { margin-top: 16px; }
.field-group > label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700; }
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.choice-row button { min-height: 42px; padding: 7px 3px; border: 1px solid #e3ecea; border-radius: 12px; background: white; font-size: 11px; }
.choice-row button.selected { border-color: var(--mint); color: var(--mint-deep); background: #eaf8f5; box-shadow: inset 0 0 0 1px var(--mint); }
.date-row button { display: flex; flex-direction: column; }
.date-row small { color: #899693; font-size: 9px; }
.date-row strong { margin-top: 2px; font-size: 11px; }
.doctor-choice { display: grid; grid-template-columns: 45px 1fr auto; gap: 10px; align-items: center; margin-top: 17px; padding: 12px; border-radius: 16px; background: #f4f8f7; }
.doctor-photo { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: white; background: linear-gradient(145deg, #8dcfc4, #348e82); }
.doctor-choice div { display: flex; min-width: 0; flex-direction: column; }
.doctor-choice strong { font-size: 12px; }
.doctor-choice small { margin-top: 4px; overflow: hidden; color: #7d8b89; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.doctor-choice > span:last-child { color: var(--coral); font-size: 13px; font-weight: 700; }
.confirm-button { width: 100%; margin-top: 17px; padding: 14px; border: 0; border-radius: 15px; color: white; background: linear-gradient(100deg, #14b99d, #078174); box-shadow: 0 10px 24px rgba(7,129,116,.22); font-weight: 700; }
.service-sheet-backdrop { position: fixed; z-index: 38; inset: 0; background: rgba(7,34,31,.42); backdrop-filter: blur(4px); }
.service-flow-sheet { position: fixed; z-index: 39; left: 50%; bottom: 0; width: min(100%, 440px); padding: 8px 19px max(22px, env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: #f8fbfa; box-shadow: 0 -20px 50px rgba(10,49,45,.2); transform: translateX(-50%); animation: sheet-in .3s ease both; }
.service-flow-sheet[hidden] { display: none; }
.service-sheet-view { margin-top: 18px; }
.service-patient-row, .payment-summary { display: flex; align-items: center; justify-content: space-between; color: #71817e; font-size: 11px; }
.service-patient-row strong, .payment-summary strong { color: var(--ink); font-size: 12px; }
.payment-card { display: grid; margin-top: 12px; padding: 16px; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border: 1px solid #dce9e6; border-radius: 18px; background: white; box-shadow: 0 8px 24px rgba(17,70,63,.06); }
.payment-card div { display: flex; min-width: 0; flex-direction: column; }
.payment-card span { color: var(--mint-deep); font-size: 9px; font-weight: 700; }
.payment-card strong { margin-top: 5px; font-size: 14px; }
.payment-card small { margin-top: 5px; color: #81908d; font-size: 9px; }
.payment-card b { color: var(--coral); font-size: 18px; }
.payment-summary { margin-top: 14px; padding: 0 2px; }
.service-sheet-note { margin: 12px 0 0; color: #8a9795; text-align: center; font-size: 9px; }
.report-summary { margin: 0 0 10px; color: #657572; font-size: 11px; }
.report-list > button { display: grid; width: 100%; min-height: 68px; margin-top: 9px; padding: 11px 12px; grid-template-columns: 44px 1fr auto; gap: 11px; align-items: center; border: 1px solid #dfeae8; border-radius: 17px; color: var(--ink); text-align: left; background: white; }
.report-list > button > span:nth-child(2) { display: flex; flex-direction: column; }
.report-list > button strong { font-size: 13px; }
.report-list > button small { margin-top: 5px; color: #82908e; font-size: 9px; }
.report-list > button > b { color: var(--mint-deep); font-size: 10px; }
.report-status { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; font-size: 10px; font-weight: 750; }
.report-status.ready { color: #087d70; background: #e0f5f0; }
.patient-backdrop { position: fixed; z-index: 42; inset: 0; background: rgba(7,34,31,.42); backdrop-filter: blur(4px); }
.patient-sheet { position: fixed; z-index: 43; left: 50%; bottom: 0; width: min(100%, 440px); padding: 8px 19px max(22px, env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: #f8fbfa; box-shadow: 0 -20px 50px rgba(10,49,45,.2); transform: translateX(-50%); animation: sheet-in .3s ease both; }
.patient-list { display: grid; gap: 9px; margin-top: 18px; }
.patient-list > button { display: grid; min-height: 68px; padding: 10px 12px; grid-template-columns: 43px 1fr 26px; gap: 11px; align-items: center; border: 1px solid #e1ebe9; border-radius: 17px; color: var(--ink); text-align: left; background: white; }
.patient-list > button.selected { border-color: #68cbb9; background: #eaf8f5; box-shadow: inset 0 0 0 1px rgba(19,184,157,.2); }
.patient-avatar { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 14px; color: white; background: linear-gradient(145deg, #31c9ad, #078174); font-weight: 750; }
.coral-avatar { background: linear-gradient(145deg, #ff9b8c, #e8665d); }
.blue-avatar { background: linear-gradient(145deg, #67baf1, #4380d8); }
.patient-list button > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.patient-list strong { font-size: 13px; }
.patient-list small { margin-top: 4px; color: #7c8c89; font-size: 9px; }
.patient-list i { display: none; color: var(--mint-deep); font-size: 17px; font-style: normal; font-weight: 800; }
.patient-list button.selected i { display: block; }
.add-patient-button { width: 100%; margin-top: 12px; padding: 13px; border: 1px dashed #bcd6d1; border-radius: 15px; color: var(--mint-deep); background: transparent; font-size: 12px; font-weight: 700; }
.barcode-backdrop { position: fixed; z-index: 44; inset: 0; background: rgba(7,34,31,.48); backdrop-filter: blur(5px); }
.barcode-sheet { position: fixed; z-index: 45; left: 50%; top: 32%; width: min(calc(100% - 30px), 400px); padding: 12px 22px 26px; border-radius: 28px; background: #f8fbfa; box-shadow: 0 24px 60px rgba(10,49,45,.28); transform: translate(-50%,-50%); animation: barcode-in .24s ease both; }
@keyframes barcode-in { from { opacity: 0; transform: translate(-50%,-47%) scale(.97); } }
.barcode-sheet-head { position: relative; display: flex; align-items: center; justify-content: center; }
.barcode-sheet-head h2 { margin: 0; font-size: 19px; }
.barcode-sheet-head button { position: absolute; right: 0; top: 50%; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #81908e; background: #eef3f2; font-size: 23px; transform: translateY(-50%); }
.large-barcode { width: min(100%, 320px); margin: 22px auto 0; padding: 18px 18px 13px; border: 1px solid #e7dfca; border-radius: 16px; background: white; box-shadow: 0 12px 30px rgba(78,62,25,.1); }
.large-barcode i { display: block; width: 100%; height: 96px; background: repeating-linear-gradient(90deg, #172c29 0 2px, transparent 2px 4px, #172c29 4px 5px, transparent 5px 8px, #172c29 8px 12px, transparent 12px 14px, #172c29 14px 15px, transparent 15px 18px); }
.large-barcode strong { display: block; margin-top: 8px; color: #374946; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .13em; }
.profile-backdrop { position: fixed; z-index: 46; inset: 0; background: rgba(7,34,31,.44); backdrop-filter: blur(4px); }
.profile-sheet { position: fixed; z-index: 47; left: 50%; bottom: 0; display: flex; width: min(100%, 440px); height: min(90vh, 780px); padding: 8px 0 max(0px, env(safe-area-inset-bottom)); flex-direction: column; border-radius: 28px 28px 0 0; background: white; box-shadow: 0 -22px 55px rgba(8,55,49,.24); transform: translateX(-50%); animation: sheet-in .3s cubic-bezier(.2,.8,.2,1) both; }
.profile-sheet[hidden] { display: none; }
.profile-close { position: absolute; z-index: 2; top: 16px; right: 12px; width: 36px; height: 36px; border: 1px solid rgba(0,0,0,.06); border-radius: 50%; color: #697876; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(22,48,45,.14); font-size: 24px; line-height: 1; backdrop-filter: blur(10px); }
.profile-browser { display: flex; min-height: 0; margin-top: 4px; flex: 1; overflow: hidden; flex-direction: column; background: white; }
.profile-browser iframe { width: 100%; min-height: 0; flex: 1; border: 0; background: white; }
.personal-center-page { position: fixed; z-index: 70; inset: 0; left: 50%; display: flex; width: min(100%, 440px); min-height: 100vh; flex-direction: column; overflow: hidden; color: #1f2941; background: #f3f5f9; transform: translateX(-50%); animation: fade-in .2s ease both; }
.personal-center-page[hidden] { display: none; }
.personal-center-header { display: grid; min-height: max(58px, calc(58px + env(safe-area-inset-top))); padding: max(8px, env(safe-area-inset-top)) 16px 0; grid-template-columns: 42px 1fr 42px; align-items: center; background: white; border-bottom: 1px solid #edf0f5; }
.personal-center-header h1 { margin: 0; text-align: center; font-size: 19px; letter-spacing: .02em; }
.personal-back-button { width: 38px; height: 38px; border: 0; color: #283144; background: transparent; font-size: 34px; font-weight: 350; line-height: 1; }
.personal-center-content { min-height: 0; padding: 12px 12px 96px; flex: 1; overflow-y: auto; }
.health-overview-card, .personal-section { border-radius: 18px; background: white; box-shadow: 0 6px 20px rgba(39,61,97,.055); }
.health-overview-card { position: relative; min-height: 222px; padding: 17px 15px; overflow: hidden; }
.health-overview-copy { position: relative; z-index: 2; }
.health-overview-copy p { margin: 0; color: #8190a9; font-size: 11px; }.health-overview-copy h2 { margin: 5px 0 3px; font-size: 18px; }
.body-figure { position: absolute; left: 18px; bottom: 3px; width: 104px; height: 160px; opacity: .96; }.body-figure svg { width: 100%; height: 100%; overflow: visible; }.body-outline { stroke: #c6dbf5; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }.body-outline.limb { stroke-width: 1.8; }.body-locus { fill: #35af4b; stroke: #edf9ef; stroke-width: 2; }.body-locus.soft { fill: #8ad997; }.body-pulse { stroke: #35af4b; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.health-system-list { position: relative; z-index: 1; display: grid; gap: 10px; margin: 12px 0 0 122px; padding: 0; list-style: none; }.health-system-list li { display: grid; grid-template-columns: 10px 1fr auto; gap: 7px; align-items: center; color: #68758b; font-size: 12px; }.health-system-list i { width: 9px; height: 9px; border-radius: 50%; background: #2daa20; }.health-system-list b { padding: 3px 8px; border-radius: 999px; color: #2b9c20; background: #edf9e9; font-size: 10px; }.health-system-list li:first-child b { color: #b17e0a; background: #fff4d9; }
.personal-section { margin-top: 12px; overflow: hidden; }.personal-section-title { display: flex; min-height: 58px; padding: 0 14px; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0f5; }.personal-section-title > div { display: flex; gap: 8px; align-items: center; }.personal-section-title h2 { margin: 0; font-size: 17px; }.section-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; font-size: 15px; }.section-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.section-icon.blue { color: #237bd4; background: #eaf3ff; }.section-icon.amber { color: #b37a1c; background: #fff3de; }.personal-section-title button { padding: 7px 10px; border: 1px solid #77aef4; border-radius: 9px; color: #2c78d7; background: white; font-size: 12px; font-weight: 700; }
.health-data-grid { display: grid; padding: 10px; grid-template-columns: 1fr 1fr; gap: 9px; }.health-metric-card { position: relative; min-width: 0; min-height: 122px; padding: 10px 10px 8px; border: 1px solid #e9edf3; border-radius: 11px; color: #65738a; text-align: left; background: #fff; }.metric-title { position: absolute; top: 10px; left: 10px; display: flex; height: 20px; max-width: 48%; align-items: center; gap: 5px; color: #748197; font-size: 12px; line-height: 20px; }.metric-icon { width: 17px; height: 17px; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.health-metric-card strong { position: absolute; top: 10px; right: 10px; display: flex; height: 20px; align-items: center; margin: 0; color: #273954; font-size: 16px; line-height: 20px; letter-spacing: -.02em; }.health-metric-card strong small { display: inline; margin: 0 0 0 2px; color: #8d9aab; font-size: 9px; font-weight: 600; letter-spacing: 0; }.metric-chart { display: block; width: 100%; height: 31px; margin-top: 40px; overflow: visible; }.metric-line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }.coral-line { stroke: #ef726f; }.blue-line { stroke: #5b9fda; }.slate-line { stroke: #8196b2; }.metric-time { display: block; margin-top: 3px; color: #a4b0c0; font-size: 9px; }
.medical-record-grid { display: grid; padding: 15px 8px 18px; grid-template-columns: repeat(4, 1fr); row-gap: 18px; }.medical-record-grid button { display: flex; min-width: 0; padding: 0 2px; align-items: center; flex-direction: column; gap: 7px; border: 0; color: #69758a; background: transparent; font-size: 10px; line-height: 1.2; }.record-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 13px; font-size: 23px; font-weight: 700; }.record-icon.blue { color: #1877d2; background: #e6f2ff; }.record-icon.mint { color: #148b89; background: #ddf6f3; }.record-icon.amber { color: #ef801f; background: #fff0df; }.record-icon.violet { color: #7e65ea; background: #efebff; }.record-icon.lime { color: #4aa52f; background: #ebf7e6; }.record-icon.pink { color: #ed4782; background: #ffe8f0; }.record-icon.cyan { color: #1399a8; background: #dcf6f8; }.record-icon.red { color: #e9484b; background: #ffe8e8; }.record-icon.indigo { color: #5962d6; background: #ebecff; }
.personal-center-assistant { position: absolute; right: 0; bottom: 0; left: 0; display: grid; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); grid-template-columns: 45px 1fr; gap: 8px; align-items: center; border-top: 1px solid #edf0f5; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }.personal-center-assistant > span { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 14px; color: #626d84; background: #f1f3f7; }.personal-center-assistant button { min-height: 43px; border: 0; border-radius: 13px; color: #3c465c; background: #f1f3f7; font-size: 15px; font-weight: 750; }
.metric-detail-backdrop { position: fixed; z-index: 90; inset: 0; background: rgba(24,39,61,.32); backdrop-filter: blur(3px); }.metric-detail-sheet { position: fixed; z-index: 91; left: 50%; bottom: 0; width: min(100%, 440px); max-height: min(92vh, 800px); padding: 8px 16px max(18px, env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 27px 27px 0 0; color: #263651; background: #f7f9fd; box-shadow: 0 -18px 48px rgba(25,45,75,.22); transform: translateX(-50%); animation: sheet-in .3s ease both; }.metric-detail-sheet[hidden] { display: none; }.metric-detail-sheet > header { display: flex; align-items: center; justify-content: space-between; }.metric-detail-sheet header p { margin: 0; color: #8a9ab0; font-size: 10px; }.metric-detail-sheet header h2 { margin: 3px 0 0; font-size: 24px; }.metric-detail-sheet header button { width: 36px; height: 36px; border: 0; border-radius: 50%; color: #6b7890; background: #e9eef5; font-size: 25px; }.metric-range-tabs { display: grid; margin-top: 18px; padding: 4px; grid-template-columns: repeat(3, 1fr); border-radius: 13px; background: #eaf0f7; }.metric-range-tabs button { min-height: 35px; border: 0; border-radius: 10px; color: #71819a; background: transparent; font-size: 13px; font-weight: 750; }.metric-range-tabs button.active { color: #2076c9; background: white; box-shadow: 0 3px 9px rgba(42,78,118,.12); }.metric-detail-chart, .metric-statistics, .metric-education { margin-top: 14px; padding: 15px; border: 1px solid #e4eaf2; border-radius: 17px; background: white; }.metric-detail-chart > div { display: flex; align-items: end; justify-content: space-between; }.metric-detail-chart > div span { font-size: 23px; font-weight: 780; letter-spacing: -.04em; }.metric-detail-chart > div small { color: #96a3b5; font-size: 10px; }.metric-detail-chart svg { width: 100%; height: 150px; margin-top: 8px; }.metric-detail-chart svg path { stroke: #e6edf5; stroke-width: 1; }.metric-detail-chart svg polyline { fill: none; stroke: #4e9bd8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.metric-statistics h3, .metric-education h3 { margin: 0; font-size: 15px; }.metric-statistics > div { display: grid; margin-top: 13px; grid-template-columns: repeat(3, 1fr); gap: 8px; }.metric-statistics article { display: flex; min-height: 59px; padding: 9px; flex-direction: column; justify-content: space-between; border-radius: 12px; background: #f3f7fc; }.metric-statistics article span { color: #8998ad; font-size: 10px; }.metric-statistics article strong { color: #2b3d5b; font-size: 14px; }.metric-education p { margin: 10px 0 0; color: #61718a; font-size: 12px; line-height: 1.65; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 105px; max-width: 84%; padding: 10px 15px; border-radius: 999px; color: white; background: rgba(17,45,42,.9); box-shadow: 0 8px 24px rgba(0,0,0,.16); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .25s ease; font-size: 11px; white-space: nowrap; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.metric-detail-sheet header h2 { margin: 0; }
.record-entry-backdrop { position: fixed; z-index: 92; inset: 0; background: rgba(24,39,61,.32); backdrop-filter: blur(3px); }.record-entry-sheet { position: fixed; z-index: 93; left: 50%; bottom: 0; width: min(100%, 440px); max-height: min(91vh, 800px); padding: 8px 16px max(18px, env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 27px 27px 0 0; color: #263651; background: #f7f9fd; box-shadow: 0 -18px 48px rgba(25,45,75,.22); transform: translateX(-50%); animation: sheet-in .3s ease both; }.record-entry-sheet[hidden] { display: none; }.record-entry-sheet > header { display: flex; align-items: center; justify-content: space-between; }.record-entry-sheet header h2 { margin: 0; font-size: 22px; }.record-entry-sheet header button { width: 36px; height: 36px; border: 0; border-radius: 50%; color: #6b7890; background: #e9eef5; font-size: 25px; }.record-entry-section { margin-top: 17px; padding: 15px; border: 1px solid #e4eaf2; border-radius: 17px; background: white; }.record-entry-section h3 { margin: 0 0 13px; color: #2b3d5b; font-size: 15px; }.recognition-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.recognition-actions button { display: grid; padding: 13px 10px; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; border: 1px solid #e6edf6; border-radius: 13px; color: #354663; text-align: left; background: #fbfdff; }.recognition-actions strong { font-size: 12px; }.recognition-actions small { grid-column: 2; margin-top: 3px; color: #92a0b4; font-size: 9px; line-height: 1.35; }.entry-icon { display: grid; width: 32px; height: 32px; place-items: center; grid-row: span 2; border-radius: 10px; font-size: 18px; }.entry-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.entry-icon.blue { color: #2b82dc; background: #e8f3ff; }.entry-icon.violet { color: #8065d7; background: #f0ecff; }.entry-icon.coral { color: #e8606a; background: #fff0f0; }.entry-icon.red { color: #df5252; background: #ffeded; }.entry-icon.pink { color: #de5a91; background: #ffeaf2; }.entry-icon.indigo { color: #6377bd; background: #ecefff; }.manual-entry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.manual-entry-grid button { display: flex; min-width: 0; padding: 5px 0; align-items: center; flex-direction: column; gap: 6px; border: 0; color: #66758d; background: transparent; font-size: 10px; }.manual-entry-grid .entry-icon { width: 40px; height: 40px; grid-row: auto; border-radius: 12px; }.entry-history ul { margin: 0; padding: 0; list-style: none; }.entry-history li { display: flex; padding: 11px 0; align-items: center; justify-content: space-between; border-top: 1px solid #eef2f7; }.entry-history li:first-child { padding-top: 0; border-top: 0; }.entry-history li:last-child { padding-bottom: 0; }.entry-history time { color: #98a5b7; font-size: 10px; }.entry-history span { display: flex; align-items: center; gap: 7px; color: #52627a; font-size: 11px; }.entry-history b { color: #2c3e5b; font-size: 11px; }
.manual-entry-grid button.active { color: #287bd3; font-weight: 750; }.manual-entry-grid button.active .entry-icon { box-shadow: 0 0 0 2px #8abaf1; }.manual-entry-form { margin-top: 13px; padding-top: 14px; border-top: 1px solid #edf1f6; }.manual-entry-form h3 { margin-bottom: 11px; }.entry-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.entry-fields[hidden] { display: none; }.entry-fields label { position: relative; display: flex; padding: 8px 9px; flex-direction: column; gap: 4px; border: 1px solid #e2e9f2; border-radius: 10px; color: #8390a2; font-size: 10px; background: #fbfcfe; }.entry-fields label:only-child { grid-column: 1 / -1; }.entry-fields input { width: 100%; padding: 0 35px 0 0; border: 0; outline: none; color: #2b3d5b; background: transparent; font-size: 16px; font-weight: 750; }.entry-fields input::placeholder { color: #c0c9d6; }.entry-fields small { position: absolute; right: 9px; bottom: 10px; color: #93a0b2; font-size: 9px; }.entry-submit { width: 100%; min-height: 38px; margin-top: 12px; border: 0; border-radius: 10px; color: white; background: #3e90da; font-size: 12px; font-weight: 750; }
.manual-entry-grid .entry-icon { color: #748197; background: #f2f5fa; }.manual-entry-grid button.active .entry-icon { color: #237bd4; background: #eaf3ff; box-shadow: 0 0 0 2px #8abaf1; }
.wheel-fields { min-height: 122px; grid-template-columns: 92px auto 92px; align-items: end; justify-content: center; gap: 18px; }.wheel-fields label { width: 92px; padding: 0; align-items: center; border: 0; background: transparent; }.wheel-fields label > span { color: #8f9cb0; font-size: 10px; }.wheel-fields i { padding-bottom: 31px; color: #65758d; font-size: 22px; font-style: normal; font-weight: 750; }.number-wheel { width: 92px; height: 86px; margin-top: 5px; padding: 0; border: 1px solid #e3eaf3; border-radius: 10px; color: #2c7bca; text-align: center; background: linear-gradient(to bottom, #f9fbfe 0 32%, #edf5ff 32% 68%, #f9fbfe 68%); font-size: 16px; font-weight: 750; line-height: 28px; }.number-wheel option { color: #708099; background: transparent; }.number-wheel option:checked { color: #2479ca; background: #eaf3ff; }.wheel-fields small { position: static; margin-top: 5px; color: #95a2b5; font-size: 9px; }.wheel-fields.one-wheel { grid-template-columns: 1fr; }.wheel-fields.one-wheel label { width: 112px; }
.entry-reading { display: flex; margin: 2px 0 12px; align-items: baseline; justify-content: center; gap: 5px; }.entry-reading strong { color: #243754; font-size: 24px; letter-spacing: -.04em; }.entry-reading small { color: #91a0b4; font-size: 10px; }.wheel-stage { display: grid; min-height: 126px; grid-template-columns: 88px 26px 88px; align-items: center; justify-content: center; gap: 14px; }.wheel-stage[hidden] { display: none; }.wheel-stage > i { color: #6b7b92; font-size: 23px; font-style: normal; font-weight: 750; text-align: center; }.wheel-stage.one-wheel { grid-template-columns: 88px; }.wheel-column { position: relative; display: grid; height: 114px; padding: 19px 0 0; grid-template-rows: repeat(3, 25px); overflow: hidden; border: 1px solid #e1e9f3; border-radius: 13px; background: linear-gradient(to bottom, #fbfcff 0 30%, #edf5ff 30% 70%, #fbfcff 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }.wheel-column > span { position: absolute; top: -1px; left: 50%; color: #8e9cb0; font-size: 9px; white-space: nowrap; transform: translateX(-50%); }.wheel-column button { height: 25px; padding: 0; border: 0; color: #a8b4c4; background: transparent; font-size: 15px; font-weight: 650; line-height: 25px; }.wheel-column button.active { color: #227bce; background: rgba(218,234,253,.7); font-size: 20px; font-weight: 780; }.wheel-column button:focus-visible { outline: 2px solid #74adea; outline-offset: -2px; }.manual-entry-form .entry-submit { margin-top: 3px; }
.metric-detail-chart svg { overflow: visible; }
.wheel-stage { min-height: 118px; grid-template-columns: repeat(2, 72px); gap: 14px; }.wheel-stage > i { display: none; }.wheel-stage.one-wheel { grid-template-columns: 72px; }.wheel-column { height: 106px; padding-top: 19px; grid-template-rows: repeat(3, 24px); border-radius: 12px; }.wheel-column button { display: grid; height: 24px; place-items: center; line-height: 1; }.wheel-column button.active { font-size: 19px; }
[data-entry-form="blood-glucose"] .wheel-column:nth-of-type(2), [data-entry-form="sleep"] .wheel-column:nth-of-type(2) { display: none; }.wheel-stage.one-wheel .wheel-column { width: 86px; justify-self: center; }.wheel-stage.one-wheel .wheel-column button.active { font-size: 17px; }
.manual-entry-form { margin-top: 11px; padding-top: 10px; }
.manual-entry-form h3 { display: none; }
.entry-reading { margin: 0 0 8px; }
.wheel-stage { min-height: 104px; }
.wheel-stage.one-wheel { grid-template-columns: 104px; }
.wheel-stage.one-wheel .wheel-column { width: 104px; height: 88px; padding-top: 4px; grid-template-rows: repeat(3, 26px); }
.wheel-stage.one-wheel .wheel-column > span { display: none; }
.wheel-stage.one-wheel .wheel-column button { height: 26px; font-size: 13px; }
.wheel-stage.one-wheel .wheel-column button.active { font-size: 20px; }
.wheel-stage.one-wheel { display: flex; width: 100%; align-items: center; justify-content: center; }
.wheel-stage.one-wheel .wheel-column { flex: 0 0 104px; margin: 0 auto; }
.wheel-stage[hidden], .wheel-stage.one-wheel[hidden] { display: none !important; }
.wheel-column { touch-action: none; user-select: none; }
.wheel-column { display: block; height: 106px; padding: 0; overflow: hidden; touch-action: pan-y; }
.wheel-column > span { z-index: 1; pointer-events: none; }
.wheel-scroll { box-sizing: border-box; height: 100%; padding: 38px 0; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scroll-padding-block: 38px; scrollbar-width: none; }
.wheel-scroll::-webkit-scrollbar { display: none; }
.wheel-scroll button { display: grid; width: 100%; height: 26px; place-items: center; scroll-snap-align: center; }
.wheel-stage.one-wheel .wheel-column { height: 106px; padding: 0; }
.wheel-stage { min-height: 124px; padding-bottom: 4px; }
.wheel-column { height: 112px; }
.wheel-stage.one-wheel .wheel-column { height: 112px; }
.wheel-scroll { padding-block: 43px; scroll-padding-block: 43px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.manual-entry-form .entry-submit { margin-top: 12px; }
.wheel-column > span { top: 8px; line-height: 1.2; }
.metric-chart-stage { position: relative; margin-top: 8px; touch-action: none; cursor: crosshair; }.metric-detail-chart .metric-chart-stage svg { display: block; margin-top: 0; }.metric-detail-chart svg #metric-reference-band { fill: rgba(108, 190, 125, .14); stroke: none; }.metric-detail-chart svg #metric-reference-label { fill: #5d9869; font-size: 10px; font-weight: 700; }.metric-detail-chart svg line { stroke: #9eb8d5; stroke-width: 1; stroke-dasharray: 3 3; }.metric-detail-chart svg circle { fill: white; stroke: #4e9bd8; stroke-width: 3; }.metric-chart-tooltip { position: absolute; top: 4px; padding: 5px 8px; border-radius: 7px; color: white; background: #2e78b8; box-shadow: 0 5px 12px rgba(45,101,153,.2); font-size: 10px; font-weight: 750; pointer-events: none; transform: translateX(-50%); }
.metric-detail-chart svg .metric-detail-line-secondary { stroke: #7991b5; }.metric-detail-chart svg .metric-detail-secondary-point { stroke: #7991b5; }.metric-detail-chart svg .reference-bound { stroke: #78b583; stroke-width: 1; stroke-dasharray: 0; }.metric-detail-chart svg text { fill: #609a6b; font-size: 8px; font-weight: 700; }

@media (min-width: 700px) {
  body { padding: 28px 0; }
  .app-shell { min-height: calc(100vh - 56px); border-radius: 30px; }
  .variant-switcher { bottom: 38px; }
  .composer { bottom: 106px; }
  .voice-controls { bottom: 110px; }
  .voice-hold-overlay { top: 28px; bottom: 28px; border-radius: 30px; }
  .overlay-listening-pill { bottom: 82px; }
  .conversation-sheet { bottom: 28px; border-radius: 28px; }
  .appointment-sheet { bottom: 28px; border-radius: 28px; }
  .service-flow-sheet { bottom: 28px; border-radius: 28px; }
  .patient-sheet { bottom: 28px; border-radius: 28px; }
  .barcode-sheet { top: 36%; bottom: auto; }
  .profile-sheet { bottom: 28px; border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}