:root {
  /* Mini-program 28rpx maps to 14px in this 750rpx-wide H5 design. */
  --font-body-28rpx: 14px;
  --line-body: 1.65;
  --ink: #16304a;
  --ink-strong: #0b2742;
  --muted: #70869a;
  --muted-2: #9eb0bf;
  --line: rgba(61, 132, 190, 0.13);
  --blue: #4799ef;
  --blue-strong: #2379d5;
  --cyan: #54c6de;
  --sky: #eaf7ff;
  --sky-2: #f4fbff;
  --aqua: #dff9f4;
  --teal: #25a9a0;
  --orange: #ffaf5d;
  --orange-soft: #fff3e4;
  --red: #ef6b72;
  --red-soft: #fff0f2;
  --purple: #8581ef;
  --white: #fff;
  --shadow-sm: 0 8px 24px rgba(44, 119, 171, 0.08);
  --shadow-md: 0 18px 44px rgba(43, 112, 162, 0.14);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background: #e8f4fb;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100dvh;
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

button:focus {
  outline: none;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(42, 133, 207, 0.72);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ambient {
  position: fixed;
  z-index: 0;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.ambient-a {
  top: -16vw;
  left: -10vw;
  background: rgba(124, 205, 255, 0.26);
}

.ambient-b {
  right: -12vw;
  bottom: -16vw;
  background: rgba(110, 235, 214, 0.2);
}

.is-hidden {
  display: none !important;
}

.icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.icon-btn {
  display: inline-grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(64, 139, 196, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 5px 18px rgba(34, 107, 161, 0.07);
  cursor: pointer;
}

.icon-btn:active,
.primary-btn:active,
.secondary-btn:active,
.shortcut:active,
.question-row:active {
  transform: scale(0.97);
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.text-btn {
  border: 0;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.primary-btn {
  min-height: 48px;
  padding: 0 18px;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(135deg, #5cb8f7, #347edc);
  box-shadow: 0 12px 26px rgba(51, 136, 214, 0.25);
  font-weight: 700;
}

.secondary-btn {
  min-height: 44px;
  padding: 0 16px;
  color: var(--blue-strong);
  border: 1px solid rgba(53, 137, 206, 0.22);
  border-radius: 14px;
  background: #f7fcff;
  font-weight: 650;
}

.ghost-btn {
  min-height: 38px;
  padding: 0 14px;
  color: var(--blue-strong);
  border: 1px solid rgba(52, 133, 202, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
  font-weight: 650;
}

.ghost-btn.danger {
  color: var(--red);
  border-color: rgba(239, 107, 114, 0.2);
  background: var(--red-soft);
}

.text-btn {
  padding: 7px 8px;
  color: var(--blue-strong);
  background: transparent;
  font-weight: 650;
}

.section-kicker {
  margin-bottom: 5px;
  color: var(--blue-strong);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.muted {
  color: var(--muted);
}

.tiny {
  color: var(--muted-2);
  font-size: 11px;
}

.login-screen {
  position: relative;
  z-index: 1;
  height: 100dvh;
  overflow-y: auto;
  background:
    radial-gradient(circle at 12% 8%, rgba(124, 214, 255, 0.22), transparent 32%),
    radial-gradient(circle at 92% 16%, rgba(141, 234, 213, 0.24), transparent 28%),
    linear-gradient(165deg, #f7fcff 0%, #ecf8ff 57%, #f7fcff 100%);
}

.login-card {
  position: relative;
  width: min(100%, 480px);
  min-height: 100%;
  margin: 0 auto;
  padding: calc(18px + var(--safe-top)) 24px calc(20px + var(--safe-bottom));
  overflow: hidden;
}

.login-card::before {
  position: absolute;
  top: 19%;
  left: 50%;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(82, 162, 219, 0.11);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
  box-shadow: 0 0 0 54px rgba(116, 201, 248, 0.035), 0 0 0 108px rgba(116, 201, 248, 0.025);
}

.login-brand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  color: #3c9ce8;
}

.login-brand strong {
  display: block;
  color: var(--ink-strong);
  font-size: 18px;
  letter-spacing: 0.01em;
}

.login-brand span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.login-hero {
  position: relative;
  z-index: 1;
  height: 34vh;
  min-height: 265px;
  max-height: 350px;
  margin: 4px -16px 0;
}

.hero-halo {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 204, 245, 0.35), rgba(111, 219, 208, 0.11) 50%, transparent 71%);
  transform: translate(-50%, -50%);
}

.login-hero img {
  position: absolute;
  z-index: 2;
  bottom: -4px;
  left: 50%;
  width: min(270px, 69vw);
  height: min(270px, 69vw);
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 22px 23px rgba(43, 125, 183, 0.15));
  animation: hero-float 4.2s ease-in-out infinite;
}

@keyframes hero-float {
  0%,
  100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-7px); }
}

.login-bubble {
  position: absolute;
  z-index: 3;
  padding: 8px 12px;
  color: #3a719c;
  border: 1px solid rgba(74, 153, 211, 0.12);
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 650;
}

.bubble-left { top: 22%; left: 2%; }
.bubble-right { top: 9%; right: 2%; border-radius: 14px 14px 4px 14px; }
.bubble-bottom { right: 3%; bottom: 8%; border-radius: 14px 14px 4px 14px; }

.login-copy {
  position: relative;
  z-index: 2;
  margin-top: -3px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #5597c8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.eyebrow i {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
}

.login-copy h1 {
  margin: 9px 0 7px;
  color: var(--ink-strong);
  font-size: clamp(26px, 7.5vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.login-copy h1 span {
  color: var(--blue-strong);
}

.login-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.login-actions {
  position: relative;
  z-index: 3;
  margin-top: 24px;
  text-align: center;
}

.login-primary {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border-radius: 17px;
}

.btn-icon {
  width: 20px;
  height: 20px;
}

.agreement-check {
  display: grid;
  grid-template-columns: 17px 1fr;
  align-items: start;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  text-align: left;
  font-size: 10px;
  line-height: 1.6;
  cursor: pointer;
}

.agreement-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.custom-check {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1.5px solid #9fc3dc;
  border-radius: 5px;
  background: #fff;
}

.agreement-check input:checked + .custom-check {
  border-color: var(--blue);
  background: var(--blue);
}

.agreement-check input:checked + .custom-check::after {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}

.agreement-check a {
  color: #3981bc;
  text-decoration: none;
}

.medical-disclaimer {
  position: relative;
  z-index: 2;
  margin: 20px 0 0;
  color: #a0b0bd;
  text-align: center;
  font-size: 9px;
}

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100vw;
  height: 100dvh;
  place-items: center;
  background:
    linear-gradient(rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.36)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(63, 143, 198, 0.035) 40px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(63, 143, 198, 0.035) 40px);
}

.phone-frame {
  position: relative;
  width: min(100%, 470px);
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #edf8ff 0%, #f7fbfd 46%, #eef6fa 100%);
}

.status-safe-area {
  height: var(--safe-top);
  min-height: 0;
}

.app-header {
  position: absolute;
  z-index: 20;
  top: var(--safe-top);
  left: 0;
  display: flex;
  width: 100%;
  min-height: 64px;
  padding: 11px 15px 9px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(237, 248, 255, 0.98), rgba(237, 248, 255, 0.84), rgba(237, 248, 255, 0));
  pointer-events: none;
}

.app-header > * {
  pointer-events: auto;
}

.app-shell[data-view="home"] .phone-frame {
  background:
    radial-gradient(circle at 88% 2%, rgba(115, 207, 239, 0.18), transparent 27%),
    linear-gradient(180deg, #eaf8ff 0%, #f6fbfd 47%, #eef6fa 100%);
}

.app-shell[data-view="home"] .app-header {
  background:
    radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.62), transparent 33%),
    linear-gradient(180deg, rgba(232, 247, 255, 0.98), rgba(235, 248, 255, 0.8) 72%, rgba(235, 248, 255, 0));
}

.header-left,
.header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.header-title {
  min-width: 0;
  margin-left: 3px;
}

.header-title strong {
  display: block;
  overflow: hidden;
  color: var(--ink-strong);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-title small {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.header-page-title {
  position: absolute;
  top: 11px;
  right: 64px;
  left: 64px;
  display: grid;
  height: 38px;
  margin: 0;
  overflow: hidden;
  color: var(--ink-strong);
  place-items: center;
  font-size: 17px;
  font-weight: 820;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none !important;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35c79a;
  box-shadow: 0 0 0 3px rgba(53, 199, 154, 0.13);
}

.hall-trigger {
  display: flex;
  width: 38px;
  height: 38px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: #236da8;
  border: 1px solid rgba(72, 159, 219, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 6px 20px rgba(44, 119, 171, 0.08);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.hall-trigger .icon {
  width: 20px;
  height: 20px;
}

.agent-online {
  display: inline-flex;
  height: 32px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  color: #397da9;
  border: 1px solid rgba(72, 159, 219, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  font-weight: 750;
}

.view-container {
  position: absolute;
  inset: calc(63px + var(--safe-top)) 0 0;
  overflow: hidden auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.app-shell[data-view="home"] .view-container {
  overflow-anchor: none;
}

.view-container::-webkit-scrollbar,
.chip-scroll::-webkit-scrollbar,
.home-quickbar-track::-webkit-scrollbar,
.process-scroll::-webkit-scrollbar,
.tab-scroll::-webkit-scrollbar {
  display: none;
}

.view {
  min-height: 100%;
  padding: 5px 15px calc(30px + var(--safe-bottom));
  animation: view-in 0.25s ease-out;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.home-view {
  padding-top: 0;
  padding-bottom: calc(156px + var(--safe-bottom));
}

.home-hero {
  --hero-bg-x: 0px;
  --hero-bg-y: 0px;
  --hero-ip-x: 0px;
  --hero-ip-y: 0px;
  position: relative;
  z-index: 0;
  min-height: 164px;
  margin: -5px -15px 9px;
  padding: 0 17px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(83, 167, 218, 0.12);
  border-radius: 0 0 27px 27px;
  background:
    radial-gradient(circle at 82% 56%, rgba(255, 255, 255, 0.78), transparent 23%),
    linear-gradient(118deg, #eefaff 0%, #e3f5ff 43%, #edf9ff 71%, #e4f5ff 100%);
  background-size: 135% 135%;
  box-shadow: 0 12px 28px rgba(47, 129, 178, 0.07);
  touch-action: pan-y;
  transition: box-shadow 0.3s ease, background-position 0.35s ease;
  animation: home-hero-gradient 9s ease-in-out infinite alternate;
}

.home-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.24;
  background-image: radial-gradient(circle, rgba(45, 141, 201, 0.22) 1px, transparent 1.5px);
  background-position: 14px 12px;
  background-size: 24px 24px;
  content: "";
  mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, 0.2) 42%, #000 100%);
}

.home-hero::after {
  position: absolute;
  z-index: 0;
  top: -45px;
  left: 36%;
  width: 190px;
  height: 230px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  content: "";
  opacity: 0.72;
  transform: rotate(22deg);
  filter: blur(4px);
  pointer-events: none;
}

@keyframes home-hero-gradient {
  0% { background-position: 0% 45%; }
  100% { background-position: 100% 55%; }
}

.home-hero-atmosphere {
  position: absolute;
  z-index: 0;
  inset: -12px;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(var(--hero-bg-x), var(--hero-bg-y), 0) scale(1.06);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-hero-ring {
  position: absolute;
  display: block;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.52);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(82, 169, 219, 0.08),
    0 0 38px rgba(64, 166, 222, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.home-hero-ring::after {
  position: absolute;
  inset: -19px;
  border: 1px solid rgba(64, 159, 217, 0.13);
  border-radius: inherit;
  content: "";
}

.home-hero-ring.ring-one {
  top: -139px;
  right: -70px;
  width: 292px;
  height: 292px;
  border-width: 31px;
  animation: hero-ring-one 7.8s ease-in-out infinite alternate;
}

.home-hero-ring.ring-two {
  bottom: -134px;
  left: -115px;
  width: 225px;
  height: 225px;
  border-width: 26px;
  border-color: rgba(208, 235, 250, 0.76);
  animation: hero-ring-two 9.5s ease-in-out infinite alternate;
}

@keyframes hero-ring-one {
  from { translate: 0 0; opacity: 0.68; }
  to { translate: -9px 12px; opacity: 1; }
}

@keyframes hero-ring-two {
  from { translate: 0 0; opacity: 0.54; }
  to { translate: 13px -8px; opacity: 0.86; }
}

.home-hero-glow {
  position: absolute;
  top: 25px;
  right: 82px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 210, 238, 0.25), rgba(108, 203, 239, 0.08) 48%, transparent 71%);
  filter: blur(2px);
  animation: hero-glow-pulse 4.6s ease-in-out infinite;
}

@keyframes hero-glow-pulse {
  0%, 100% { opacity: 0.58; scale: 0.94; }
  50% { opacity: 1; scale: 1.08; }
}

.home-hero-particle {
  position: absolute;
  display: block;
  width: 6px;
  height: 6px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: #69c9ed;
  box-shadow: 0 0 0 5px rgba(96, 192, 231, 0.08), 0 6px 13px rgba(46, 143, 194, 0.16);
}

.home-hero-particle.particle-one {
  top: 27px;
  left: 47%;
  animation: hero-particle-drift 4.8s ease-in-out infinite;
}

.home-hero-particle.particle-two {
  right: 21px;
  bottom: 28px;
  width: 4px;
  height: 4px;
  opacity: 0.65;
  animation: hero-particle-drift 5.8s 0.8s ease-in-out infinite reverse;
}

.home-hero-particle.particle-three {
  top: 70px;
  left: 60%;
  width: 3px;
  height: 3px;
  opacity: 0.72;
  animation: hero-particle-drift 4.2s 1.1s ease-in-out infinite;
}

@keyframes hero-particle-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 5px -10px; }
}

.home-hero.is-pressed .home-hero-ring {
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(82, 169, 219, 0.13), 0 0 45px rgba(64, 166, 222, 0.16);
}

.home-hero-touch-ripple {
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(64, 164, 220, 0.34);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: hero-touch-ripple 0.75s ease-out forwards;
}

@keyframes hero-touch-ripple {
  from { opacity: 0.9; scale: 0.2; }
  to { opacity: 0; scale: 8; }
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: 62%;
  padding: 24px 0 0 4px;
}

.hero-copy .hello {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
  color: #5088b2;
  font-size: 11px;
  font-weight: 700;
}

.hero-copy h1 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 24px;
  line-height: 1.28;
  letter-spacing: -0.04em;
}

.hero-copy h1 span {
  color: var(--blue-strong);
}

.hero-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.home-hero-mascot {
  position: absolute;
  z-index: 2;
  right: -12px;
  bottom: -25px;
  width: 173px;
  height: 173px;
  transform: translate3d(var(--hero-ip-x), var(--hero-ip-y), 0) scale(0.9);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-hero-mascot > span {
  position: absolute;
  top: 30px;
  left: 29px;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(79, 170, 221, 0.17);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.13), 0 0 0 31px rgba(72, 170, 223, 0.035);
  animation: mascot-halo-breathe 4.2s ease-in-out infinite;
}

@keyframes mascot-halo-breathe {
  0%, 100% { opacity: 0.5; scale: 0.94; }
  50% { opacity: 0.95; scale: 1.04; }
}

.home-hero-mascot img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 17px 16px rgba(42, 124, 179, 0.13));
  animation: home-mascot-float 4.5s ease-in-out infinite;
}

@keyframes home-mascot-float {
  0%, 100% { translate: 0 2px; rotate: -0.4deg; }
  50% { translate: 0 -5px; rotate: 0.7deg; }
}

@media (hover: hover) and (pointer: fine) {
  .home-hero:hover {
    box-shadow: 0 15px 34px rgba(47, 129, 178, 0.11);
  }
}

.home-view > .health-card {
  z-index: 2;
}

.card {
  border: 1px solid rgba(79, 157, 211, 0.1);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.89);
  box-shadow: var(--shadow-sm);
}

.health-card {
  position: relative;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 0%, rgba(91, 197, 221, 0.14), transparent 35%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(236, 248, 255, 0.94));
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-strong);
  font-size: 16px;
  font-weight: 800;
}

.title-accent {
  width: 4px;
  height: 17px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
}

.health-status {
  display: inline-flex;
  padding: 5px 8px;
  align-items: center;
  gap: 5px;
  color: #16817b;
  border-radius: 9px;
  background: var(--aqua);
  font-size: 9px;
  font-weight: 750;
}

.glucose-row {
  display: grid;
  margin-top: 13px;
  grid-template-columns: 91px 1fr;
  gap: 10px;
}

.glucose-now {
  padding: 8px 3px 5px;
}

.glucose-now .value {
  display: flex;
  align-items: baseline;
  color: var(--ink-strong);
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.glucose-now .value small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}

.glucose-now .label {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}

.glucose-now .change {
  display: inline-flex;
  margin-top: 9px;
  padding: 4px 7px;
  color: #16817b;
  border-radius: 8px;
  background: #e9faf5;
  font-size: 9px;
  font-weight: 700;
}

.chart-wrap {
  position: relative;
  min-height: 103px;
}

.chart-wrap svg {
  width: 100%;
  height: 103px;
  overflow: visible;
}

.chart-grid {
  stroke: rgba(66, 134, 183, 0.1);
  stroke-width: 1;
}

.chart-area {
  fill: url(#glucoseGradient);
}

.chart-line {
  fill: none;
  stroke: #4297e8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  filter: drop-shadow(0 4px 4px rgba(61, 149, 226, 0.22));
}

.chart-dot {
  fill: #fff;
  stroke: #3990e2;
  stroke-width: 2.5;
}

.chart-axis {
  fill: #91a5b5;
  font-size: 8px;
}

.health-metrics {
  display: grid;
  margin-top: 9px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
}

.health-metrics > div {
  text-align: center;
  border-right: 1px solid var(--line);
}

.health-metrics > div:last-child {
  border-right: 0;
}

.health-metrics strong {
  display: block;
  color: var(--ink-strong);
  font-size: 14px;
}

.health-metrics span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.health-card[data-view="health"] {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.health-card[data-view="health"]:active {
  transform: scale(0.992);
}

.health-detail-view {
  padding-top: 5px;
}

.health-detail-hero {
  position: relative;
  padding: 17px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 0%, rgba(91, 197, 221, 0.18), transparent 36%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(231, 247, 255, 0.95));
}

.health-detail-update {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.health-detail-hero .glucose-row {
  grid-template-columns: 102px 1fr;
}

.health-detail-hero .chart-wrap svg {
  height: 112px;
}

.health-insight-card {
  display: grid;
  margin-top: 11px;
  padding: 14px;
  align-items: start;
  grid-template-columns: 39px 1fr;
  gap: 11px;
  border: 1px solid rgba(67, 155, 209, 0.12);
  border-radius: 19px;
  background: linear-gradient(120deg, rgba(224, 246, 255, 0.96), rgba(229, 250, 247, 0.94));
}

.health-insight-icon {
  display: grid;
  width: 39px;
  height: 39px;
  color: #277fca;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 7px 18px rgba(42, 117, 169, 0.09);
}

.health-insight-icon .icon {
  width: 19px;
  height: 19px;
}

.health-insight-card h2 {
  margin: 1px 0 4px;
  color: var(--ink-strong);
  font-size: 14px;
}

.health-insight-card p {
  margin: 0;
  color: #5f788a;
  font-size: 9px;
  line-height: 1.65;
}

.health-reading-head {
  margin-top: 18px;
}

.health-reading-head h2 {
  font-size: 18px;
}

.health-reading-head p {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
}

.health-reading-head .text-btn {
  font-size: 13px;
}

.health-reading-list {
  margin-top: 9px;
  padding: 3px 14px;
}

.health-reading-row {
  display: grid;
  min-height: 60px;
  padding: 10px 0;
  align-items: center;
  grid-template-columns: 42px 1fr auto 54px;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.health-reading-row:last-child {
  border-bottom: 0;
}

.health-reading-row time {
  color: #6b8497;
  font-size: 13px;
  font-weight: 750;
}

.health-reading-row > div:nth-child(2) strong,
.health-reading-row > div:nth-child(2) span,
.health-reading-value strong,
.health-reading-value span {
  display: block;
}

.health-reading-row > div:nth-child(2) strong {
  color: var(--ink-strong);
  font-size: 14px;
}

.health-reading-row > div:nth-child(2) span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.health-reading-value {
  text-align: right;
}

.health-reading-value strong {
  color: var(--blue-strong);
  font-size: 17px;
}

.health-reading-value span {
  color: var(--muted);
  font-size: 10px;
}

.health-reading-row em {
  padding: 6px 8px;
  color: #188277;
  border-radius: 8px;
  background: #e8f9f4;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
}

.health-reading-row em.attention {
  color: #b66b22;
  background: #fff3e4;
}

.health-next-step {
  display: grid;
  margin-top: 12px;
  padding: 13px;
  align-items: center;
  grid-template-columns: 35px 1fr auto;
  gap: 10px;
}

.health-next-step .tile-icon {
  width: 35px;
  height: 35px;
}

.health-next-step h3 {
  margin: 0 0 3px;
  color: var(--ink-strong);
  font-size: 11px;
}

.health-next-step p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.health-next-step .secondary-btn {
  min-height: 34px;
  padding: 0 10px;
  font-size: 9px;
}

.health-next-step.health-action-bar {
  display: grid;
  padding: 12px;
  grid-template-columns: 1fr 1.08fr;
  gap: 10px;
  border-color: rgba(76, 151, 205, 0.1);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 28px rgba(46, 105, 148, 0.08);
}

.health-action-bar button {
  min-height: 45px;
  padding: 0 14px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.health-action-bar button:active {
  transform: scale(0.97);
}

.health-record-btn {
  color: #315d7a;
  border: 1px solid rgba(71, 145, 199, 0.16);
  background: linear-gradient(145deg, rgba(246, 251, 255, 0.98), rgba(232, 244, 252, 0.94));
}

.health-insight-btn {
  color: #fff;
  border: 0;
  background: linear-gradient(125deg, #53ace9, #438be0 58%, #6652cc);
  box-shadow: 0 10px 22px rgba(63, 119, 201, 0.23);
}

.home-conversation-active {
  padding-top: 0;
  overflow-anchor: none;
  animation: none;
}

.health-card-collapsed {
  position: sticky;
  z-index: 18;
  top: 0;
  margin: -5px 0 9px;
  padding: 10px 13px 11px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 0 0 19px 19px;
  background: transparent;
  box-shadow: 0 12px 28px rgba(37, 104, 153, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.56);
  isolation: isolate;
  backface-visibility: hidden;
  will-change: padding, border-radius, background-color, box-shadow;
}

/* 覆盖通用健康卡片的点击过渡，避免吸顶展开时内边距和圆角瞬间跳变。 */
.health-card.health-card-collapsed[data-view="health"] {
  transition:
    padding 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.38s ease,
    box-shadow 0.42s ease;
}

.health-card.health-card-collapsed[data-view="health"]:active {
  transform: none;
}

.health-card-collapsed::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(220, 242, 252, 0.4));
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  backface-visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.34s ease;
  content: "";
}

@keyframes health-collapse-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.collapsed-health-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.collapsed-health-head .card-title {
  font-size: 12px;
}

.collapsed-health-head .health-status {
  padding: 4px 7px;
  font-size: 8px;
}

.collapsed-health-data {
  display: grid;
  max-height: 58px;
  margin-top: 7px;
  align-items: center;
  grid-template-columns: 1.55fr 0.9fr 0.8fr auto;
  gap: 9px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease,
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.collapsed-health-data > div:not(.collapsed-glucose) {
  padding-left: 9px;
  border-left: 1px solid var(--line);
}

.collapsed-health-data strong,
.collapsed-health-data span {
  display: block;
}

.collapsed-health-data strong {
  color: var(--ink-strong);
  font-size: 13px;
}

.collapsed-health-data span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
  white-space: nowrap;
}

.collapsed-health-data .collapsed-glucose strong {
  display: inline;
  color: var(--blue-strong);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.collapsed-health-data .collapsed-glucose span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.collapsed-health-data .row-arrow {
  color: #81a0b6;
  font-size: 18px;
}

.sticky-health-expanded {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px) scale(0.985);
  transform-origin: top center;
  transition:
    max-height 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease 0.04s,
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: max-height, opacity, transform;
}

.health-card-collapsed.is-expanded {
  padding: 14px 16px 15px;
  border-radius: 24px;
  background: rgba(250, 254, 255, 0.99);
  box-shadow: 0 18px 38px rgba(37, 104, 153, 0.17);
}

.health-card-collapsed.is-expanded::before {
  opacity: 0;
}

.health-card-collapsed.is-expanded .collapsed-health-data {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-8px);
}

.health-card-collapsed.is-expanded .sticky-health-expanded {
  max-height: 210px;
  margin-top: 10px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.home-conversation {
  min-height: 65vh;
  padding: 2px 0 12px;
}

.home-conversation .day-divider {
  margin: 5px 0 10px;
}

.home-conversation .chat-stream {
  padding-top: 0;
}

.campaign-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 87px;
  margin-top: 11px;
  padding: 14px 12px 14px 78px;
  align-items: center;
  overflow: hidden;
  color: inherit;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(115deg, #dff7f7, #e8f5ff 62%, #e6edff);
  box-shadow: var(--shadow-sm);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.campaign-visual {
  position: absolute;
  bottom: -17px;
  left: -11px;
  width: 97px;
  height: 97px;
  object-fit: contain;
}

.campaign-copy {
  transform: translateX(10px);
}

.campaign-card h3 {
  margin: 0 0 5px;
  color: var(--ink-strong);
  font-size: 14px;
}

.campaign-card p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.campaign-action {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: var(--blue-strong);
  font-size: 10px;
  font-weight: 800;
}

.home-section {
  margin-top: 17px;
}

.section-head {
  display: flex;
  margin-bottom: 9px;
  align-items: flex-end;
  justify-content: space-between;
}

.section-head h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 16px;
}

.section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.question-list {
  display: grid;
  gap: 8px;
}

.question-row {
  display: grid;
  min-height: 56px;
  padding: 9px 11px;
  align-items: center;
  grid-template-columns: 34px 1fr 18px;
  gap: 9px;
  border: 1px solid rgba(64, 141, 195, 0.09);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 22px rgba(42, 105, 153, 0.06);
  cursor: pointer;
}

.question-icon {
  display: grid;
  width: 33px;
  height: 33px;
  color: #2c85d4;
  place-items: center;
  border-radius: 11px;
  background: #e9f6ff;
  font-weight: 900;
}

.question-row strong {
  display: block;
  color: var(--ink-strong);
  font-size: 12px;
}

.question-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.row-arrow {
  color: #a7b8c5;
  font-size: 18px;
}

.chip-scroll,
.tab-scroll,
.process-scroll {
  display: flex;
  margin-right: -15px;
  padding-right: 15px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chip-scroll {
  gap: 7px;
}

.shortcut {
  display: inline-flex;
  min-width: max-content;
  height: 39px;
  padding: 0 12px;
  align-items: center;
  gap: 7px;
  color: #466b88;
  border: 1px solid rgba(62, 141, 199, 0.12);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(42, 105, 153, 0.05);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.shortcut .icon {
  width: 17px;
  height: 17px;
  color: var(--blue);
}

.chat-view {
  padding-bottom: calc(156px + var(--safe-bottom));
}

.chat-stream {
  display: grid;
  gap: 12px;
  padding: 4px 0 18px;
}

.day-divider {
  color: var(--muted-2);
  text-align: center;
  font-size: 9px;
}

.message-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.message-row.user {
  justify-content: flex-end;
}

.mini-avatar {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(145deg, #dff5ff, #dff8f3);
}

.mini-avatar img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.message-bubble {
  max-width: 78%;
  padding: 11px 13px;
  color: var(--ink);
  border-radius: 5px 17px 17px 17px;
  background: #fff;
  box-shadow: 0 7px 21px rgba(42, 105, 153, 0.07);
  font-size: 12px;
  line-height: 1.65;
}

.message-row.user .message-bubble {
  color: #fff;
  border-radius: 17px 5px 17px 17px;
  background: linear-gradient(135deg, #56acf0, #357fd5);
}

.message-meta {
  display: block;
  margin-top: 5px;
  color: #9fb2c0;
  font-size: 8px;
}

.message-row.user .message-meta {
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
}

.system-card {
  position: relative;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(65, 145, 202, 0.12);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(235, 248, 255, 0.96));
  box-shadow: var(--shadow-sm);
}

.system-card.warning {
  border-color: rgba(238, 166, 80, 0.18);
  background: linear-gradient(150deg, #fff, #fff8ee);
}

.system-card.done {
  opacity: 0.66;
  filter: saturate(0.75);
}

.system-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.system-card-icon {
  display: grid;
  width: 39px;
  height: 39px;
  color: var(--blue-strong);
  place-items: center;
  border-radius: 13px;
  background: #e5f4ff;
}

.system-card.warning .system-card-icon {
  color: #d88329;
  background: #fff0db;
}

.system-card-title {
  min-width: 0;
  flex: 1;
}

.system-card-title strong {
  display: block;
  color: var(--ink-strong);
  font-size: 14px;
}

.system-card-title small {
  color: var(--muted);
  font-size: 9px;
}

.privacy-tag {
  display: inline-flex;
  padding: 4px 6px;
  align-items: center;
  gap: 3px;
  color: #4582ad;
  border-radius: 7px;
  background: #edf7fe;
  font-size: 8px;
  font-weight: 700;
}

.system-card-body {
  margin: 12px 0 0;
  color: #49667d;
  font-size: 11px;
  line-height: 1.65;
}

.system-card-info {
  display: flex;
  margin-top: 9px;
  padding: 8px 10px;
  justify-content: space-between;
  border-radius: 10px;
  background: rgba(236, 247, 253, 0.85);
  color: var(--muted);
  font-size: 9px;
}

.system-card-actions {
  display: grid;
  margin-top: 12px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.system-card-foot {
  margin: 10px 0 0;
  color: #9cadba;
  font-size: 8px;
  line-height: 1.5;
}

.plan-push-card {
  padding: 0 0 14px;
  border-color: rgba(42, 143, 205, 0.2);
  background:
    radial-gradient(circle at 100% 0, rgba(123, 212, 255, 0.24), transparent 34%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(234, 248, 255, 0.98));
  box-shadow: 0 16px 35px rgba(28, 112, 170, 0.13);
}

.plan-push-card::before {
  position: absolute;
  width: 145px;
  height: 145px;
  top: -76px;
  right: -58px;
  border: 22px solid rgba(122, 204, 250, 0.11);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.plan-push-card > * {
  position: relative;
  z-index: 1;
}

.plan-push-head {
  padding: 15px 15px 12px;
}

.plan-push-icon {
  color: white;
  background: linear-gradient(145deg, #56b9ef, #398ce5);
  box-shadow: 0 7px 16px rgba(47, 139, 212, 0.24);
}

.plan-push-update {
  display: inline-flex;
  min-height: 26px;
  padding: 0 8px;
  align-items: center;
  gap: 4px;
  color: #18796f;
  border: 1px solid rgba(60, 187, 164, 0.14);
  border-radius: 13px;
  background: rgba(224, 250, 244, 0.88);
  font-size: 9px;
  font-weight: 760;
}

.plan-push-update .icon {
  width: 13px;
  height: 13px;
}

.plan-push-hero {
  display: flex;
  min-height: 104px;
  margin: 0 14px;
  padding: 15px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(67, 157, 218, 0.14);
  border-radius: 19px;
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.68), transparent 24%),
    linear-gradient(135deg, rgba(213, 243, 255, 0.96), rgba(224, 248, 245, 0.94));
}

.plan-push-hero::after {
  position: absolute;
  width: 118px;
  height: 118px;
  right: -40px;
  bottom: -69px;
  border: 18px solid rgba(73, 169, 226, 0.08);
  border-radius: 50%;
  content: "";
}

.plan-push-hero-copy {
  min-width: 0;
  flex: 1;
}

.plan-push-hero-copy > span {
  display: block;
  margin-bottom: 5px;
  color: #2791cd;
  font-size: 8px;
  font-weight: 820;
  letter-spacing: 0.12em;
}

.plan-push-hero h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 17px;
  line-height: 1.35;
}

.plan-push-hero p {
  margin: 6px 0 0;
  color: #5e788d;
  font-size: 11px;
  line-height: 1.5;
}

.plan-push-ring {
  position: relative;
  display: flex;
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  background: conic-gradient(#359ee8 0 var(--plan-progress), rgba(255, 255, 255, 0.68) var(--plan-progress) 360deg);
  box-shadow: 0 7px 18px rgba(43, 142, 207, 0.14);
}

.plan-push-ring::before {
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: rgba(250, 254, 255, 0.96);
  content: "";
}

.plan-push-ring strong,
.plan-push-ring span {
  position: relative;
  z-index: 1;
}

.plan-push-ring strong {
  color: #1678be;
  font-size: 19px;
  line-height: 1;
}

.plan-push-ring strong small {
  font-size: 10px;
}

.plan-push-ring > span {
  margin-top: 4px;
  color: #758fa2;
  font-size: 8px;
}

.plan-push-options {
  display: grid;
  margin: 9px 14px 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.plan-push-option {
  min-width: 0;
  padding: 11px;
  color: inherit;
  text-align: left;
  border: 1px solid rgba(61, 157, 213, 0.13);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 7px 17px rgba(45, 113, 157, 0.06);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.plan-push-option:active {
  transform: scale(0.975);
}

.plan-push-option.nutrition {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(232, 251, 247, 0.92));
}

.plan-push-option.exercise {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(233, 244, 255, 0.94));
}

.plan-push-option-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.plan-push-option-head > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: #168f80;
  place-items: center;
  border-radius: 10px;
  background: #dcf7f0;
}

.plan-push-option.exercise .plan-push-option-head > span {
  color: #357fd4;
  background: #e1efff;
}

.plan-push-option-head .icon {
  width: 17px;
  height: 17px;
}

.plan-push-option-head strong {
  min-width: 0;
  flex: 1;
  color: var(--ink-strong);
  font-size: 12px;
}

.plan-push-option-head em {
  color: #168f80;
  font-size: 9px;
  font-style: normal;
  font-weight: 780;
}

.plan-push-option.exercise .plan-push-option-head em {
  color: #357fd4;
}

.plan-push-option h4 {
  margin: 10px 0 0;
  color: #173d58;
  font-size: 12px;
  line-height: 1.4;
}

.plan-push-option p {
  display: -webkit-box;
  min-height: 45px;
  margin: 5px 0 0;
  overflow: hidden;
  color: #6c8496;
  font-size: 9px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.plan-push-option p b {
  display: block;
  margin-bottom: 1px;
  color: #3b718f;
  font-size: 9px;
}

.plan-push-meter {
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(90, 159, 192, 0.13);
}

.plan-push-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4bc6ad, #2ea899);
}

.plan-push-option.exercise .plan-push-meter i {
  background: linear-gradient(90deg, #66b8f1, #3c87db);
}

.plan-push-link {
  display: flex;
  margin-top: 8px;
  align-items: center;
  justify-content: space-between;
  color: #188878;
  font-size: 9px;
  font-weight: 760;
}

.plan-push-option.exercise .plan-push-link {
  color: #357fd4;
}

.plan-push-link b {
  font-size: 13px;
}

.plan-push-timeline {
  display: flex;
  margin: 9px 14px 0;
  padding: 10px 11px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(62, 149, 207, 0.1);
  border-radius: 14px;
  background: rgba(241, 249, 254, 0.86);
}

.plan-push-timeline > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: #2c91d2;
  place-items: center;
  border-radius: 10px;
  background: white;
}

.plan-push-timeline .icon {
  width: 16px;
  height: 16px;
}

.plan-push-timeline div {
  min-width: 0;
}

.plan-push-timeline small,
.plan-push-timeline strong {
  display: block;
}

.plan-push-timeline small {
  color: #7f98aa;
  font-size: 8px;
}

.plan-push-timeline strong {
  margin-top: 2px;
  overflow: hidden;
  color: #2f5873;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-push-actions {
  display: grid;
  margin: 10px 14px 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.plan-push-actions .primary-btn,
.plan-push-actions .secondary-btn {
  display: inline-flex;
  min-height: 43px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
}

.plan-push-actions .primary-btn .icon,
.plan-push-actions .secondary-btn .icon {
  width: 15px;
  height: 15px;
}

.plan-push-meta {
  display: flex;
  margin: 9px 15px 0;
  justify-content: space-between;
  color: #8298a8;
  font-size: 8px;
}

.plan-push-meta span:last-child {
  color: #2b8c7f;
  font-weight: 760;
}

.plan-push-card > .system-card-foot {
  margin: 8px 15px 0;
}

.warning-alert-card {
  --alert-rgb: 224, 126, 52;
  --alert-accent: #df7c34;
  --alert-light: #f2a45f;
  --alert-deep: #ae5b24;
  --alert-ink: #63391f;
  --alert-text: #8b654b;
  --alert-soft: #fff1df;
  --alert-card-end: #fff7ed;
  --alert-hero-start: #ffebd3;
  --alert-hero-end: #fff6e8;
  padding: 0 0 14px;
  border-color: rgba(var(--alert-rgb), 0.25);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--alert-rgb), 0.2), transparent 35%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.99), var(--alert-card-end));
  box-shadow: 0 16px 35px rgba(var(--alert-rgb), 0.13);
}

.warning-alert-card.alert-normal,
.warning-feedback-summary.alert-normal {
  --alert-rgb: 58, 137, 215;
  --alert-accent: #3a89d8;
  --alert-light: #68abe8;
  --alert-deep: #246cae;
  --alert-ink: #173f63;
  --alert-text: #55758f;
  --alert-soft: #e8f4ff;
  --alert-card-end: #f1f8ff;
  --alert-hero-start: #dfefff;
  --alert-hero-end: #eef8ff;
}

.warning-alert-card.alert-mild,
.warning-feedback-summary.alert-mild {
  --alert-rgb: 224, 126, 52;
  --alert-accent: #df7c34;
  --alert-light: #f2a45f;
  --alert-deep: #ae5b24;
  --alert-ink: #63391f;
  --alert-text: #8b654b;
  --alert-soft: #fff1df;
  --alert-card-end: #fff7ed;
  --alert-hero-start: #ffebd3;
  --alert-hero-end: #fff6e8;
}

.warning-alert-card.alert-high,
.warning-feedback-summary.alert-high {
  --alert-rgb: 222, 67, 67;
  --alert-accent: #df4545;
  --alert-light: #ef7777;
  --alert-deep: #ad2f39;
  --alert-ink: #64242a;
  --alert-text: #87545a;
  --alert-soft: #ffe9e9;
  --alert-card-end: #fff3f3;
  --alert-hero-start: #ffe0e0;
  --alert-hero-end: #fff0f0;
}

.warning-alert-card.alert-low,
.warning-feedback-summary.alert-low {
  --alert-rgb: 126, 87, 194;
  --alert-accent: #7e57c2;
  --alert-light: #a182d8;
  --alert-deep: #6040a0;
  --alert-ink: #442b6d;
  --alert-text: #715e89;
  --alert-soft: #f0e9ff;
  --alert-card-end: #f7f2ff;
  --alert-hero-start: #eadfff;
  --alert-hero-end: #f5efff;
}

.warning-alert-card::before {
  position: absolute;
  width: 154px;
  height: 154px;
  top: -84px;
  right: -62px;
  border: 23px solid rgba(var(--alert-rgb), 0.09);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.warning-alert-card > * {
  position: relative;
  z-index: 1;
}

.warning-alert-head {
  padding: 15px 15px 12px;
}

.warning-alert-icon {
  color: #fff;
  background: linear-gradient(145deg, var(--alert-light), var(--alert-accent));
  box-shadow: 0 7px 16px rgba(var(--alert-rgb), 0.23);
}

.warning-alert-status {
  display: inline-flex;
  min-height: 26px;
  padding: 0 9px;
  align-items: center;
  gap: 5px;
  color: var(--alert-deep);
  border: 1px solid rgba(var(--alert-rgb), 0.16);
  border-radius: 13px;
  background: var(--alert-soft);
  font-size: 9px;
  font-weight: 780;
}

.warning-alert-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--alert-accent);
  box-shadow: 0 0 0 4px rgba(var(--alert-rgb), 0.12);
  animation: warningAlertPulse 2.2s ease-in-out infinite;
}

.warning-alert-hero {
  display: flex;
  min-height: 112px;
  margin: 0 14px;
  padding: 15px;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--alert-rgb), 0.14);
  border-radius: 19px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.7), transparent 28%),
    linear-gradient(135deg, var(--alert-hero-start), var(--alert-hero-end));
}

.warning-alert-mark {
  display: grid;
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  color: var(--alert-accent);
  place-items: center;
  border: 1px solid rgba(var(--alert-rgb), 0.12);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 9px 22px rgba(var(--alert-rgb), 0.1);
}

.warning-alert-mark .icon {
  width: 28px;
  height: 28px;
}

.warning-alert-hero > div {
  min-width: 0;
  flex: 1;
}

.warning-alert-hero small {
  display: block;
  color: var(--alert-deep);
  font-size: 8px;
  font-weight: 820;
  letter-spacing: 0.14em;
}

.warning-alert-hero h3 {
  margin: 6px 0 5px;
  color: var(--alert-ink);
  font-size: 16px;
  line-height: 1.35;
}

.warning-alert-hero p {
  margin: 0;
  color: var(--alert-text);
  font-size: 11px;
  line-height: 1.55;
}

.warning-alert-reading {
  display: grid;
  min-height: 76px;
  margin: 10px 14px 0;
  padding: 11px 12px;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  border: 1px solid rgba(var(--alert-rgb), 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 18px rgba(var(--alert-rgb), 0.07);
}

.warning-alert-value {
  min-width: 78px;
  padding-right: 11px;
  border-right: 1px solid rgba(var(--alert-rgb), 0.13);
}

.warning-alert-value strong {
  color: var(--alert-accent);
  font-size: 27px;
  line-height: 1;
}

.warning-alert-value span {
  display: block;
  margin-top: 4px;
  color: var(--alert-text);
  font-size: 9px;
}

.warning-alert-context small,
.warning-alert-context strong,
.warning-alert-context span {
  display: block;
}

.warning-alert-context small {
  color: var(--alert-text);
  font-size: 9px;
}

.warning-alert-context strong {
  margin-top: 2px;
  color: var(--alert-ink);
  font-size: 13px;
}

.warning-alert-context span {
  margin-top: 3px;
  color: #8193a1;
  font-size: 9px;
}

.warning-alert-reading > em {
  padding: 6px 8px;
  color: var(--alert-deep);
  border-radius: 10px;
  background: var(--alert-soft);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.warning-alert-time {
  display: flex;
  min-height: 56px;
  margin: 10px 14px 0;
  padding: 9px 11px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(var(--alert-rgb), 0.11);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.86);
}

.warning-alert-time > span {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  color: var(--alert-accent);
  place-items: center;
  border-radius: 10px;
  background: var(--alert-soft);
}

.warning-alert-time .icon {
  width: 16px;
  height: 16px;
}

.warning-alert-time div {
  min-width: 0;
  flex: 1;
}

.warning-alert-time small,
.warning-alert-time strong {
  display: block;
}

.warning-alert-time small {
  color: var(--alert-text);
  font-size: 8px;
}

.warning-alert-time strong {
  margin-top: 2px;
  color: var(--alert-ink);
  font-size: 11px;
}

.warning-alert-time em {
  padding: 5px 7px;
  color: var(--alert-deep);
  border-radius: 9px;
  background: var(--alert-soft);
  font-size: 8px;
  font-style: normal;
  font-weight: 760;
}

.warning-alert-actions {
  display: grid;
  margin: 10px 14px 0;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.warning-alert-actions .primary-btn,
.warning-alert-actions .secondary-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
}

.warning-alert-actions .primary-btn {
  background: linear-gradient(135deg, var(--alert-light), var(--alert-accent));
  box-shadow: 0 10px 21px rgba(var(--alert-rgb), 0.21);
}

.warning-alert-actions .secondary-btn {
  color: var(--alert-deep);
  border-color: rgba(var(--alert-rgb), 0.23);
  background: rgba(255, 255, 255, 0.88);
}

.warning-alert-actions .icon {
  width: 16px;
  height: 16px;
}

.warning-alert-actions button:active {
  transform: translateY(1px) scale(0.99);
}

.warning-alert-foot {
  display: flex;
  margin: 9px 15px 0;
  align-items: flex-start;
  gap: 5px;
  color: var(--alert-text);
  font-size: 8px;
  line-height: 1.55;
}

.warning-alert-foot .icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin-top: 1px;
}

@keyframes warningAlertPulse {
  0%, 100% { transform: scale(1); opacity: 0.78; }
  50% { transform: scale(1.18); opacity: 1; }
}

.warning-feedback-sheet {
  max-height: 92dvh;
  padding: 20px 18px calc(22px + var(--safe-bottom));
  background: linear-gradient(180deg, #ffffff, #f5faff 72%, #eef7fd);
}

.warning-feedback-sheet .modal-head {
  align-items: center;
}

.warning-feedback-sheet .modal-head p {
  font-size: 11px;
}

.warning-feedback-form {
  display: grid;
  margin-top: 14px;
  gap: 14px;
}

.warning-feedback-summary {
  --alert-rgb: 222, 67, 67;
  --alert-accent: #df4545;
  --alert-deep: #ad2f39;
  --alert-soft: #ffe9e9;
  display: grid;
  min-height: 82px;
  padding: 12px;
  align-items: center;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  border: 1px solid rgba(var(--alert-rgb), 0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--alert-soft), #fff);
}

.warning-feedback-summary > span {
  display: grid;
  width: 42px;
  height: 42px;
  color: #fff;
  place-items: center;
  border-radius: 14px;
  background: var(--alert-accent);
  box-shadow: 0 8px 18px rgba(var(--alert-rgb), 0.2);
}

.warning-feedback-summary > span .icon {
  width: 21px;
  height: 21px;
}

.warning-feedback-summary small,
.warning-feedback-summary strong,
.warning-feedback-summary p {
  display: block;
}

.warning-feedback-summary small {
  color: #71899a;
  font-size: 10px;
}

.warning-feedback-summary strong {
  margin-top: 3px;
  color: var(--alert-accent);
  font-size: 21px;
}

.warning-feedback-summary strong em {
  font-size: 10px;
  font-style: normal;
}

.warning-feedback-summary p {
  margin: 3px 0 0;
  color: var(--alert-deep);
  font-size: 11px;
  font-weight: 750;
}

.warning-feedback-summary > b {
  padding: 6px 8px;
  color: var(--alert-deep);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  font-size: 10px;
  white-space: nowrap;
}

.warning-feedback-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.warning-feedback-fieldset legend {
  display: flex;
  margin-bottom: 8px;
  align-items: center;
  gap: 7px;
  color: #254b67;
  font-size: 14px;
  font-weight: 800;
}

.warning-feedback-fieldset legend > span {
  display: grid;
  width: 22px;
  height: 22px;
  color: #fff;
  place-items: center;
  border-radius: 8px;
  background: #4b9bda;
  font-size: 11px;
}

.warning-feedback-fieldset legend small {
  color: #8ca0af;
  font-size: 10px;
  font-weight: 600;
}

.warning-feedback-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.warning-feedback-options.scene-options,
.warning-feedback-options.medication-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.warning-feedback-options label {
  cursor: pointer;
}

.warning-feedback-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.warning-feedback-options label > span {
  display: grid;
  min-height: 40px;
  padding: 6px 8px;
  color: #55758d;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(69, 145, 204, 0.13);
  border-radius: 13px;
  background: #edf7ff;
  font-size: 11px;
  line-height: 1.3;
  transition: 0.18s ease;
}

.warning-feedback-options input:checked + span {
  color: #216eaa;
  border-color: rgba(55, 139, 205, 0.46);
  background: #dfefff;
  box-shadow: inset 0 0 0 1px rgba(62, 146, 210, 0.12), 0 5px 12px rgba(61, 135, 193, 0.08);
  font-weight: 800;
}

.warning-feedback-options input:focus-visible + span {
  outline: 2px solid #4b9bda;
  outline-offset: 2px;
}

.warning-feedback-note > span {
  display: block;
  margin-bottom: 7px;
  color: #254b67;
  font-size: 14px;
  font-weight: 800;
}

.warning-feedback-note textarea {
  width: 100%;
  min-height: 76px;
  padding: 11px 12px;
  resize: vertical;
  color: #294e68;
  border: 1px solid rgba(69, 145, 204, 0.15);
  border-radius: 14px;
  outline: none;
  background: #f2f9ff;
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
}

.warning-feedback-note textarea:focus {
  border-color: rgba(55, 139, 205, 0.48);
  box-shadow: 0 0 0 3px rgba(61, 148, 216, 0.09);
}

.warning-feedback-care {
  display: flex;
  padding: 10px 11px;
  align-items: flex-start;
  gap: 7px;
  color: #6f8190;
  border-radius: 13px;
  background: #edf5fa;
}

.warning-feedback-care .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: #438bc2;
}

.warning-feedback-care p {
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}

.warning-feedback-submit {
  min-height: 48px;
  color: #fff;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #57aae5, #3b85d4);
  box-shadow: 0 10px 22px rgba(52, 126, 192, 0.2);
  font-size: 14px;
  font-weight: 800;
}

.warning-feedback-submit:active {
  transform: scale(0.985);
}

.report-interpretation-card {
  overflow: hidden;
  border-color: rgba(84, 113, 198, 0.14);
  background: linear-gradient(155deg, rgba(247, 251, 255, 0.98), rgba(238, 245, 255, 0.98) 62%, rgba(237, 241, 255, 0.98));
}

.report-interpretation-head {
  padding: 15px 15px 11px;
}

.report-interpretation-icon {
  color: #fff;
  background: linear-gradient(145deg, #6eacf2, #6277d8);
  box-shadow: 0 7px 16px rgba(76, 111, 204, 0.22);
}

.report-interpretation-status {
  display: inline-flex;
  min-height: 26px;
  padding: 0 8px;
  align-items: center;
  gap: 4px;
  color: #5268ba;
  border-radius: 13px;
  background: #e8edff;
  font-size: 9px;
  font-weight: 800;
}

.report-interpretation-status .icon {
  width: 12px;
  height: 12px;
}

.report-interpretation-hero {
  display: grid;
  min-height: 132px;
  margin: 0 14px;
  padding: 15px;
  align-items: center;
  grid-template-columns: 86px 1fr;
  gap: 15px;
  overflow: hidden;
  border: 1px solid rgba(83, 115, 197, 0.12);
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(218, 237, 255, 0.96), rgba(235, 240, 255, 0.96));
}

.report-interpretation-hero > div:last-child > span {
  color: #6477bd;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.report-interpretation-hero h3 {
  margin: 6px 0 5px;
  color: #263f78;
  font-size: 17px;
  line-height: 1.3;
}

.report-interpretation-hero p {
  margin: 0;
  color: #59708e;
  font-size: 10px;
  line-height: 1.62;
}

.report-document-art {
  position: relative;
  display: grid;
  width: 76px;
  height: 96px;
  padding: 13px 11px;
  overflow: hidden;
  align-content: start;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 24px rgba(67, 96, 163, 0.14);
  transform: rotate(-3deg);
}

.report-document-art::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(225deg, #d5e3fb 50%, transparent 51%);
  content: "";
}

.report-document-art > span {
  width: 22px;
  height: 22px;
  color: #6687d8;
}

.report-document-art i {
  width: 43px;
  height: 3px;
  margin-top: 5px;
  border-radius: 2px;
  background: #d8e2f4;
}

.report-document-art i:nth-of-type(2) { width: 36px; }
.report-document-art i:nth-of-type(3) { width: 46px; }

.report-document-art em {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  width: 31px;
  height: 31px;
  color: #fff;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #71a9ef, #6878d7);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  box-shadow: 0 6px 13px rgba(82, 106, 190, 0.24);
}

.report-interpretation-meta {
  display: flex;
  margin: 10px 15px 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #72839c;
  font-size: 8px;
}

.report-interpretation-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.report-interpretation-meta .icon {
  width: 12px;
  height: 12px;
  color: #6682cc;
}

.report-interpretation-open {
  display: flex;
  width: calc(100% - 28px);
  min-height: 44px;
  margin: 11px 14px 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(135deg, #62aef0, #627bdc);
  box-shadow: 0 10px 22px rgba(70, 102, 190, 0.22);
  font-size: 11px;
}

.report-interpretation-open .icon {
  width: 15px;
  height: 15px;
}

.report-interpretation-card > .system-card-foot {
  margin: 8px 15px 0;
}

.checkup-card {
  padding: 0 0 14px;
  border-color: rgba(56, 155, 157, 0.2);
  background: radial-gradient(circle at 100% 0, rgba(90, 206, 194, 0.2), transparent 35%), linear-gradient(155deg, #fff, #f0fbfa);
  box-shadow: 0 16px 34px rgba(42, 128, 132, 0.1);
}

.checkup-card-head { padding: 15px 15px 11px; }
.checkup-card-icon { color: #fff; background: linear-gradient(145deg, #65c9bf, #289b95); box-shadow: 0 7px 16px rgba(39, 145, 141, 0.22); }
.checkup-card-status { display:inline-flex; min-height:26px; padding:0 8px; align-items:center; gap:4px; color:#21847e; border-radius:13px; background:#e4f8f5; font-size:9px; font-weight:800; }
.checkup-card-status .icon { width:12px; height:12px; }

.checkup-card-hero { display:grid; min-height:98px; margin:0 14px; padding:14px; align-items:center; grid-template-columns:1fr auto; gap:12px; border:1px solid rgba(48,155,157,.13); border-radius:18px; background:linear-gradient(135deg,#ddf6f3,#effbfa); }
.checkup-card-hero > div > span { color:#228e88; font-size:8px; font-weight:850; letter-spacing:.12em; }
.checkup-card-hero h3 { margin:6px 0 4px; color:#164e51; font-size:16px; line-height:1.35; }
.checkup-card-hero p { margin:0; color:#5a7d7f; font-size:10px; line-height:1.55; }
.checkup-card-hero time { display:grid; min-width:76px; min-height:62px; padding:8px; place-content:center; text-align:center; border-radius:15px; background:rgba(255,255,255,.88); }
.checkup-card-hero time small { color:#789596; font-size:8px; }
.checkup-card-hero time strong { margin-top:4px; color:#238b86; font-size:11px; }

.checkup-card-items { display:grid; margin:10px 14px 0; grid-template-columns:1fr 1fr; gap:6px; }
.checkup-card-items span { display:flex; min-height:34px; padding:6px 8px; align-items:center; gap:5px; color:#456f72; border-radius:11px; background:rgba(255,255,255,.84); font-size:9px; }
.checkup-card-items .icon { width:12px; height:12px; flex:0 0 12px; color:#2da095; }
.checkup-card-items em { overflow:hidden; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }

.checkup-card-appointment { display:flex; min-height:54px; margin:9px 14px 0; padding:9px 10px; align-items:center; gap:9px; border:1px solid rgba(48,155,157,.1); border-radius:14px; background:rgba(255,255,255,.86); }
.checkup-card-appointment > span { display:grid; width:31px; height:31px; color:#278f8a; place-items:center; border-radius:10px; background:#e4f8f5; }
.checkup-card-appointment .icon { width:16px; height:16px; }
.checkup-card-appointment div { min-width:0; flex:1; }
.checkup-card-appointment small,.checkup-card-appointment strong { display:block; }
.checkup-card-appointment small { color:#799496; font-size:8px; }
.checkup-card-appointment strong { margin-top:2px; color:#295b5e; font-size:11px; }
.checkup-card-appointment em { padding:5px 7px; color:#25877f; border-radius:9px; background:#e8f8f5; font-size:8px; font-style:normal; font-weight:760; }

.checkup-card-actions { display:grid; margin:10px 14px 0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.checkup-card-actions button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:6px; font-size:11px; }
.checkup-card-actions .primary-btn { background:linear-gradient(135deg,#50b9b0,#27978f); box-shadow:0 10px 21px rgba(37,143,137,.2); }
.checkup-card-actions .secondary-btn { color:#287f7a; border-color:rgba(42,147,141,.2); background:rgba(255,255,255,.88); }
.checkup-card-actions .icon { width:15px; height:15px; }
.checkup-card > .system-card-foot { margin:8px 15px 0; }

.checkup-detail-sheet,.checkup-reminder-sheet { max-height:92dvh; }
.checkup-detail-body,.checkup-reschedule-body,.checkup-reminder-body { display:grid; padding-top:6px; gap:12px; }
.checkup-detail-appointment { display:grid; min-height:88px; padding:12px; align-items:center; grid-template-columns:43px 1fr auto; gap:11px; border:1px solid rgba(48,155,157,.14); border-radius:18px; background:linear-gradient(135deg,#def6f3,#effbfa); }
.checkup-detail-appointment > span { display:grid; width:43px; height:43px; color:#fff; place-items:center; border-radius:14px; background:linear-gradient(145deg,#61c5bb,#299b94); }
.checkup-detail-appointment small { color:#668b8d; font-size:9px; }
.checkup-detail-appointment h3 { margin:3px 0; color:#1f585a; font-size:15px; }
.checkup-detail-appointment p { margin:0; color:#4f7476; font-size:11px; }
.checkup-detail-appointment em { padding:6px 8px; color:#247f79; border-radius:10px; background:#fff; font-size:9px; font-style:normal; font-weight:780; }

.checkup-detail-section { padding:13px; border:1px solid rgba(60,135,166,.1); border-radius:17px; background:#fff; }
.checkup-detail-title { display:flex; align-items:center; gap:9px; }
.checkup-detail-title > span { display:grid; width:34px; height:34px; color:#318c9a; place-items:center; border-radius:11px; background:#e8f7f7; }
.checkup-detail-title h3 { margin:0; color:#244d61; font-size:14px; }
.checkup-detail-title p { margin:3px 0 0; color:#8398a4; font-size:9px; }
.checkup-project-grid { display:grid; margin-top:10px; grid-template-columns:1fr 1fr; gap:7px; }
.checkup-project-grid > div { display:grid; min-height:45px; padding:7px 8px; align-items:center; grid-template-columns:20px 1fr 14px; gap:5px; border-radius:12px; background:#eef8fb; }
.checkup-project-grid span { color:#54a4b2; font-size:9px; font-weight:800; }
.checkup-project-grid strong { color:#385f70; font-size:10px; line-height:1.35; }
.checkup-project-grid .icon { width:13px; height:13px; color:#2f9b8e; }
.checkup-notice-list { margin:10px 0 0; padding-left:18px; color:#5f7886; font-size:10px; line-height:1.75; }
.checkup-notice-list li + li { margin-top:3px; }

.checkup-location-card { display:flex; min-height:72px; padding:11px; align-items:center; gap:10px; border:1px solid rgba(54,144,153,.12); border-radius:16px; background:#eef9f8; }
.checkup-location-card > span { display:grid; width:37px; height:37px; color:#2d918b; place-items:center; border-radius:12px; background:#fff; }
.checkup-location-card div { min-width:0; flex:1; }
.checkup-location-card small,.checkup-location-card strong,.checkup-location-card p { display:block; }
.checkup-location-card small { color:#799496; font-size:9px; }
.checkup-location-card strong { margin-top:2px; color:#2b5c5d; font-size:12px; }
.checkup-location-card p { margin:2px 0 0; color:#6d898b; font-size:9px; }
.checkup-location-card button { min-height:34px; padding:0 10px; color:#27867f; border:1px solid rgba(40,143,135,.18); border-radius:11px; background:#fff; font-size:10px; font-weight:760; }
.checkup-tools { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.checkup-tools button { display:flex; min-height:42px; align-items:center; justify-content:center; gap:6px; color:#397282; border:1px solid rgba(54,137,166,.13); border-radius:13px; background:#f2f9fc; font-size:10px; font-weight:760; }
.checkup-tools .icon { width:15px; height:15px; }
.checkup-detail-foot { margin:0; color:#93a3ac; text-align:center; font-size:8px; line-height:1.5; }

.checkup-reminder-sheet {
  --reminder-accent: #299b94;
  --reminder-deep: #247f79;
  --reminder-soft: #e5f7f4;
  --reminder-rgb: 42, 151, 143;
}
.checkup-reminder-sheet.reminder-theme-trace {
  --reminder-accent: #318bd1;
  --reminder-deep: #276fa9;
  --reminder-soft: #e5f3ff;
  --reminder-rgb: 49, 139, 209;
}
.checkup-reminder-sheet.reminder-theme-plan {
  --reminder-accent: #2e96c9;
  --reminder-deep: #2478a2;
  --reminder-soft: #e5f6fc;
  --reminder-rgb: 46, 150, 201;
}
.checkup-slot-list,.checkup-reminder-options { display:grid; gap:8px; }
.checkup-slot,.checkup-reminder-options button { display:flex; min-height:62px; padding:10px 12px; align-items:center; gap:10px; text-align:left; border:1px solid rgba(62,139,168,.13); border-radius:15px; background:#f4fafc; }
.checkup-slot.selected,.checkup-reminder-options button.selected { border-color:rgba(var(--reminder-rgb, 42,151,143),.4); background:var(--reminder-soft, #e5f7f4); box-shadow:inset 0 0 0 1px rgba(var(--reminder-rgb, 42,151,143),.08); }
.checkup-slot span,.checkup-reminder-options button span { flex:1; }
.checkup-slot strong,.checkup-slot small,.checkup-reminder-options strong,.checkup-reminder-options small { display:block; }
.checkup-slot strong,.checkup-reminder-options strong { color:#315d66; font-size:12px; }
.checkup-slot small,.checkup-reminder-options small { margin-top:3px; color:#80969e; font-size:9px; }
.checkup-slot em { flex:1; color:#39737b; font-size:11px; font-style:normal; font-weight:700; }
.checkup-slot > .icon,.checkup-reminder-options button > .icon:last-child { width:15px; height:15px; color:var(--reminder-accent, #259388); opacity:0; }
.checkup-slot.selected > .icon,.checkup-reminder-options button.selected > .icon:last-child { opacity:1; }
.checkup-reminder-options button > .icon:first-child { width:20px; height:20px; color:var(--reminder-accent, #36938e); }
.checkup-modal-tip { display:flex; margin:0; gap:6px; color:#6f858f; font-size:9px; line-height:1.55; }
.checkup-modal-tip .icon { width:14px; height:14px; flex:0 0 14px; color:var(--reminder-accent, #3f9290); }
.checkup-reminder-sheet .checkup-reminder-options button.selected strong { color:var(--reminder-deep); }
.checkup-reminder-sheet .modal-actions .primary-btn { background:linear-gradient(135deg, color-mix(in srgb, var(--reminder-accent) 76%, white), var(--reminder-accent)); box-shadow:0 10px 22px rgba(var(--reminder-rgb),.22); }
.checkup-reminder-sheet .modal-actions .secondary-btn { color:var(--reminder-deep); border-color:rgba(var(--reminder-rgb),.2); background:color-mix(in srgb, var(--reminder-soft) 58%, white); }

.followup-card {
  padding: 0 0 14px;
  border-color: rgba(79, 139, 210, 0.2);
  background:
    radial-gradient(circle at 100% 0, rgba(130, 183, 255, 0.22), transparent 35%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(238, 247, 255, 0.98));
  box-shadow: 0 16px 35px rgba(41, 105, 177, 0.12);
}

.followup-card::before {
  position: absolute;
  width: 156px;
  height: 156px;
  top: -86px;
  right: -64px;
  border: 23px solid rgba(99, 156, 226, 0.09);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.followup-card > * {
  position: relative;
  z-index: 1;
}

.followup-card.done {
  opacity: 1;
  filter: none;
  border-color: rgba(48, 181, 151, 0.23);
  background:
    radial-gradient(circle at 100% 0, rgba(83, 208, 169, 0.16), transparent 35%),
    linear-gradient(155deg, #fff, #effbf7);
}

.followup-head {
  padding: 15px 15px 12px;
}

.followup-icon {
  color: #fff;
  background: linear-gradient(145deg, #649ee7, #427fd2);
  box-shadow: 0 7px 16px rgba(55, 117, 198, 0.24);
}

.followup-status {
  display: inline-flex;
  min-height: 26px;
  padding: 0 8px;
  align-items: center;
  gap: 4px;
  color: #416fa9;
  border: 1px solid rgba(74, 129, 196, 0.14);
  border-radius: 13px;
  background: rgba(235, 244, 255, 0.92);
  font-size: 9px;
  font-weight: 760;
}

.followup-status.confirmed {
  color: #18836f;
  border-color: rgba(42, 181, 151, 0.14);
  background: rgba(226, 249, 243, 0.92);
}

.followup-status .icon {
  width: 13px;
  height: 13px;
}

.followup-hero {
  display: flex;
  min-height: 102px;
  margin: 0 14px;
  padding: 13px 14px;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  border: 1px solid rgba(76, 136, 206, 0.13);
  border-radius: 19px;
  background:
    radial-gradient(circle at 92% 16%, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(135deg, rgba(222, 239, 255, 0.98), rgba(230, 248, 247, 0.95));
}

.followup-hero > time {
  display: grid;
  width: 75px;
  height: 75px;
  flex: 0 0 75px;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(86, 146, 211, 0.14);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(49, 111, 178, 0.1);
}

.followup-hero > time strong {
  color: #347ec9;
  font-size: 26px;
  line-height: 0.92;
}

.followup-hero > time span {
  margin-top: 2px;
  color: #4c7396;
  font-size: 10px;
  font-weight: 760;
}

.followup-hero > time em {
  margin-top: 4px;
  color: #7d96aa;
  font-size: 8px;
  font-style: normal;
}

.followup-hero > div {
  min-width: 0;
  flex: 1;
}

.followup-hero > div > span {
  display: block;
  color: #4b85c6;
  font-size: 8px;
  font-weight: 820;
  letter-spacing: 0.13em;
}

.followup-hero h3 {
  margin: 6px 0 5px;
  color: #173f5f;
  font-size: 17px;
  line-height: 1.3;
}

.followup-hero p {
  margin: 0;
  color: #5d7b91;
  font-size: 10px;
  line-height: 1.5;
}

.followup-details {
  display: grid;
  margin: 10px 14px 0;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 7px;
}

.followup-details > div {
  display: grid;
  min-width: 0;
  min-height: 67px;
  padding: 10px 10px 9px 42px;
  align-content: center;
  border: 1px solid rgba(72, 133, 197, 0.11);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
}

.followup-details > div > span {
  position: absolute;
  left: 9px;
  display: grid;
  width: 27px;
  height: 27px;
  color: #3d82c9;
  place-items: center;
  border-radius: 9px;
  background: #eaf3ff;
}

.followup-details .icon {
  width: 14px;
  height: 14px;
}

.followup-details small,
.followup-details strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.followup-details small {
  color: #8499aa;
  font-size: 8px;
}

.followup-details strong {
  margin-top: 3px;
  color: #294e69;
  font-size: 10px;
}

.followup-method {
  display: flex;
  width: calc(100% - 28px);
  min-height: 52px;
  margin: 9px 14px 0;
  padding: 8px 10px;
  align-items: center;
  gap: 9px;
  text-align: left;
  border: 1px solid rgba(68, 135, 203, 0.12);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(235, 245, 255, 0.95), rgba(235, 249, 247, 0.95));
}

.followup-method > span {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  color: #3f83c8;
  place-items: center;
  border-radius: 10px;
  background: #fff;
}

.followup-method .icon {
  width: 16px;
  height: 16px;
}

.followup-method div {
  min-width: 0;
  flex: 1;
}

.followup-method small,
.followup-method strong {
  display: block;
}

.followup-method small {
  color: #8199aa;
  font-size: 8px;
}

.followup-method strong {
  margin-top: 2px;
  color: #2a526e;
  font-size: 11px;
}

.followup-method em {
  color: #3b83c7;
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
}

.followup-actions {
  margin: 10px 14px 0;
}

.followup-actions > .primary-btn {
  display: flex;
  width: 100%;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #5899e2, #3c7dce);
  box-shadow: 0 10px 21px rgba(54, 117, 195, 0.2);
  font-size: 11px;
}

.followup-actions > .primary-btn .icon {
  width: 15px;
  height: 15px;
}

.followup-actions > div {
  display: grid;
  margin-top: 7px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.followup-actions > div button {
  display: inline-flex;
  min-height: 39px;
  padding: 0 7px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #3c6f9e;
  border: 1px solid rgba(69, 130, 194, 0.16);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.84);
  font-size: 9px;
  font-weight: 760;
}

.followup-actions > div .icon {
  width: 14px;
  height: 14px;
}

.followup-method:active,
.followup-actions button:active {
  transform: translateY(1px) scale(0.99);
}

.followup-meta {
  display: flex;
  margin: 9px 15px 0;
  align-items: center;
  justify-content: space-between;
  color: #8198a9;
  font-size: 8px;
}

.followup-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.followup-meta span:last-child {
  color: #2a887b;
  font-weight: 760;
}

.followup-meta .icon {
  width: 11px;
  height: 11px;
}

.followup-card > .system-card-foot {
  margin: 8px 15px 0;
}

.followup-sheet {
  max-height: 92dvh;
}

.followup-modal-body {
  padding-top: 4px;
}

.followup-modal-summary {
  display: flex;
  padding: 13px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(76, 136, 206, 0.13);
  border-radius: 18px;
  background: linear-gradient(135deg, #eaf5ff, #edf9f7);
}

.followup-modal-summary time {
  display: grid;
  min-width: 76px;
  min-height: 61px;
  place-content: center;
  text-align: center;
  border-radius: 16px;
  background: #fff;
}

.followup-modal-summary time strong {
  color: #347ec9;
  font-size: 15px;
}

.followup-modal-summary time span {
  margin-top: 3px;
  color: #7b94a8;
  font-size: 9px;
}

.followup-modal-summary h3 {
  margin: 0 0 5px;
  color: #173f5f;
  font-size: 15px;
}

.followup-modal-summary p {
  display: flex;
  margin: 3px 0 0;
  align-items: center;
  gap: 5px;
  color: #678397;
  font-size: 10px;
}

.followup-modal-summary .icon {
  width: 13px;
  height: 13px;
}

.followup-modal-method {
  display: flex;
  min-height: 57px;
  margin-top: 10px;
  padding: 9px 10px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(69, 130, 194, 0.11);
  border-radius: 15px;
  background: #f7fbfe;
}

.followup-modal-method > span {
  display: grid;
  width: 32px;
  height: 32px;
  color: #3f83c8;
  place-items: center;
  border-radius: 10px;
  background: #e8f3ff;
}

.followup-modal-method div {
  flex: 1;
}

.followup-modal-method small,
.followup-modal-method strong {
  display: block;
}

.followup-modal-method small {
  color: #8499aa;
  font-size: 9px;
}

.followup-modal-method strong {
  margin-top: 2px;
  color: #294e69;
  font-size: 12px;
}

.followup-modal-method button {
  min-height: 31px;
  padding: 0 10px;
  color: #397ec2;
  border: 1px solid rgba(59, 126, 194, 0.18);
  border-radius: 10px;
  background: #fff;
  font-size: 9px;
  font-weight: 760;
}

.followup-modal-notice {
  display: flex;
  margin-top: 10px;
  padding: 11px;
  gap: 9px;
  border-radius: 14px;
  background: #fff8ee;
}

.followup-modal-notice > span {
  color: #c27c2d;
}

.followup-modal-notice .icon {
  width: 17px;
  height: 17px;
}

.followup-modal-notice strong {
  color: #7c5a33;
  font-size: 11px;
}

.followup-modal-notice p {
  margin: 3px 0 0;
  color: #8d7356;
  font-size: 9px;
  line-height: 1.55;
}

.followup-slot-list,
.followup-method-list {
  display: grid;
  gap: 8px;
}

.followup-slot,
.followup-method-option {
  display: flex;
  min-height: 64px;
  padding: 10px 12px;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px solid rgba(76, 136, 206, 0.13);
  border-radius: 15px;
  background: #f8fbfe;
}

.followup-slot.selected,
.followup-method-option.selected {
  border-color: rgba(55, 130, 207, 0.38);
  background: linear-gradient(135deg, #eaf4ff, #edf9f7);
  box-shadow: inset 0 0 0 1px rgba(65, 133, 205, 0.08);
}

.followup-slot > span {
  min-width: 76px;
}

.followup-slot strong,
.followup-slot small,
.followup-method-option strong,
.followup-method-option small {
  display: block;
}

.followup-slot strong,
.followup-method-option strong {
  color: #294e69;
  font-size: 12px;
}

.followup-slot small,
.followup-method-option small {
  margin-top: 3px;
  color: #8197a8;
  font-size: 9px;
}

.followup-slot em {
  flex: 1;
  color: #4b7190;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.followup-slot > .icon,
.followup-method-option > .icon:last-child {
  width: 18px;
  height: 18px;
  color: transparent;
}

.followup-slot.selected > .icon,
.followup-method-option.selected > .icon:last-child {
  color: #2f87cc;
}

.followup-method-option > span {
  display: grid;
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  color: #3f83c8;
  place-items: center;
  border-radius: 12px;
  background: #e7f2ff;
}

.followup-method-option > span .icon {
  width: 18px;
  height: 18px;
}

.followup-method-option > div {
  min-width: 0;
  flex: 1;
}

.followup-modal-tip {
  display: flex;
  margin: 10px 2px 0;
  align-items: flex-start;
  gap: 5px;
  color: #7f96a7;
  font-size: 9px;
  line-height: 1.5;
}

.followup-modal-tip .icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.trace-push-card {
  padding: 0 0 14px;
  border-color: rgba(54, 154, 194, 0.2);
  background:
    radial-gradient(circle at 100% 0, rgba(90, 207, 209, 0.19), transparent 34%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(235, 249, 251, 0.98));
  box-shadow: 0 16px 35px rgba(33, 120, 154, 0.12);
}

.trace-push-card::before {
  position: absolute;
  width: 154px;
  height: 154px;
  top: -83px;
  right: -62px;
  border: 23px solid rgba(87, 193, 207, 0.09);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.trace-push-card > * {
  position: relative;
  z-index: 1;
}

.trace-push-card.done {
  opacity: 1;
  filter: none;
  border-color: rgba(48, 181, 151, 0.23);
  background:
    radial-gradient(circle at 100% 0, rgba(85, 211, 170, 0.17), transparent 34%),
    linear-gradient(155deg, #fff, #effbf7);
}

.trace-push-head {
  padding: 15px 15px 12px;
}

.trace-push-icon {
  color: #fff;
  background: linear-gradient(145deg, #54bcd5, #318cc7);
  box-shadow: 0 7px 16px rgba(39, 137, 182, 0.22);
}

.trace-push-status {
  display: inline-flex;
  min-height: 26px;
  padding: 0 8px;
  align-items: center;
  gap: 4px;
  color: #247e9e;
  border: 1px solid rgba(50, 155, 191, 0.13);
  border-radius: 13px;
  background: rgba(230, 247, 253, 0.9);
  font-size: 9px;
  font-weight: 760;
}

.trace-push-status.completed {
  color: #168675;
  border-color: rgba(42, 181, 151, 0.14);
  background: rgba(226, 249, 243, 0.92);
}

.trace-push-status .icon {
  width: 13px;
  height: 13px;
}

.trace-push-hero {
  display: flex;
  min-height: 110px;
  margin: 0 14px;
  padding: 15px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(52, 151, 193, 0.13);
  border-radius: 19px;
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(135deg, rgba(215, 245, 251, 0.97), rgba(225, 247, 243, 0.95));
}

.trace-push-hero::after {
  position: absolute;
  width: 118px;
  height: 118px;
  right: -44px;
  bottom: -70px;
  border: 17px solid rgba(65, 171, 199, 0.08);
  border-radius: 50%;
  content: "";
}

.trace-push-hero-copy {
  min-width: 0;
  flex: 1;
}

.trace-push-hero-copy > span {
  display: block;
  color: #288eb7;
  font-size: 8px;
  font-weight: 820;
  letter-spacing: 0.13em;
}

.trace-push-hero-copy h3 {
  margin: 6px 0 5px;
  color: #103d58;
  font-size: 16px;
  line-height: 1.3;
}

.trace-push-hero-copy p {
  margin: 0;
  color: #5b7a8e;
  font-size: 10px;
  line-height: 1.55;
}

.trace-push-ring {
  --trace-progress: 0deg;
  display: grid;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f7fdff 0 59%, transparent 60%),
    conic-gradient(#3ca8c8 0 var(--trace-progress), rgba(121, 193, 209, 0.2) var(--trace-progress) 360deg);
  box-shadow: 0 7px 18px rgba(54, 140, 174, 0.12);
}

.trace-push-ring strong,
.trace-push-ring span {
  display: block;
}

.trace-push-ring strong {
  color: #14769d;
  font-size: 20px;
  line-height: 1;
}

.trace-push-ring strong small {
  font-size: 11px;
}

.trace-push-ring span {
  margin-top: 4px;
  color: #7192a4;
  font-size: 8px;
}

.trace-push-steps {
  display: grid;
  margin: 10px 14px 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.trace-push-step {
  position: relative;
  min-width: 0;
  min-height: 82px;
  padding: 10px 8px 9px;
  border: 1px solid rgba(56, 146, 186, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 16px rgba(46, 119, 151, 0.06);
}

.trace-push-step > span {
  display: grid;
  width: 28px;
  height: 28px;
  margin-bottom: 7px;
  color: #248eaf;
  place-items: center;
  border-radius: 9px;
  background: #e6f7fb;
}

.trace-push-step:nth-child(2) > span {
  color: #3b83ca;
  background: #e9f3ff;
}

.trace-push-step:nth-child(3) > span {
  color: #268d7b;
  background: #e6f8f3;
}

.trace-push-step.completed > span {
  color: #fff;
  background: linear-gradient(145deg, #52c5ae, #269d87);
}

.trace-push-step .icon {
  width: 15px;
  height: 15px;
}

.trace-push-step strong,
.trace-push-step small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-push-step strong {
  color: #234d65;
  font-size: 10px;
}

.trace-push-step small {
  margin-top: 3px;
  color: #8197a5;
  font-size: 8px;
}

.trace-push-step > i {
  position: absolute;
  top: 17px;
  right: -7px;
  z-index: 2;
  color: #8bb4c7;
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
}

.trace-push-insight {
  display: flex;
  min-height: 48px;
  margin: 9px 14px 0;
  padding: 9px 11px;
  align-items: center;
  gap: 9px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(231, 247, 253, 0.95), rgba(235, 249, 246, 0.95));
}

.trace-push-insight > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: #2c91b5;
  place-items: center;
  border-radius: 10px;
  background: #fff;
}

.trace-push-insight .icon {
  width: 16px;
  height: 16px;
}

.trace-push-insight small,
.trace-push-insight strong {
  display: block;
}

.trace-push-insight small {
  color: #7593a4;
  font-size: 8px;
}

.trace-push-insight strong {
  margin-top: 2px;
  color: #315a70;
  font-size: 10px;
  line-height: 1.45;
}

.trace-push-actions {
  display: grid;
  margin: 10px 14px 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.trace-push-actions .primary-btn,
.trace-push-actions .secondary-btn {
  display: inline-flex;
  min-height: 43px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
}

.trace-push-actions .primary-btn {
  background: linear-gradient(135deg, #48b5d0, #318bd1);
  box-shadow: 0 10px 21px rgba(40, 137, 181, 0.2);
}

.trace-push-actions .primary-btn .icon,
.trace-push-actions .secondary-btn .icon {
  width: 15px;
  height: 15px;
}

.trace-push-card:not(.done) .trace-push-actions .primary-btn {
  animation: traceActionGlow 2.8s ease-in-out infinite;
}

.trace-push-actions button:active,
.trace-push-step:active {
  transform: translateY(1px) scale(0.99);
}

.trace-push-meta {
  display: flex;
  margin: 9px 15px 0;
  align-items: center;
  justify-content: space-between;
  color: #7f97a7;
  font-size: 8px;
}

.trace-push-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.trace-push-meta span:last-child {
  color: #2a887b;
  font-weight: 760;
}

.trace-push-meta .icon {
  width: 11px;
  height: 11px;
}

.trace-push-card > .system-card-foot {
  margin: 8px 15px 0;
}

@keyframes traceActionGlow {
  0%, 100% { box-shadow: 0 10px 21px rgba(40, 137, 181, 0.18); }
  50% { box-shadow: 0 12px 25px rgba(40, 137, 181, 0.3); }
}

.education-card {
  border-color: rgba(49, 146, 216, 0.2);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(230, 247, 255, 0.97));
  box-shadow: 0 15px 32px rgba(38, 121, 179, 0.12);
}

.education-card.done {
  opacity: 1;
  filter: none;
  border-color: rgba(55, 190, 157, 0.25);
  background: linear-gradient(155deg, #fff, #ecfbf7);
}

.education-card-icon {
  color: #267fbe;
  background: linear-gradient(145deg, #e3f5ff, #e9fbf7);
}

.education-required-tag {
  display: inline-flex;
  min-height: 27px;
  padding: 0 9px;
  align-items: center;
  gap: 4px;
  color: #9b6927;
  border: 1px solid rgba(221, 157, 73, 0.18);
  border-radius: 14px;
  background: #fff5e8;
  font-size: 10px;
  font-weight: 800;
}

.education-required-tag.completed {
  color: #16816d;
  border-color: rgba(54, 185, 151, 0.18);
  background: #e7f8f3;
}

.education-required-tag .icon {
  width: 13px;
  height: 13px;
}

.education-preview {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 13px;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  color: white;
  border: 0;
  border-radius: 17px;
  background: #dff2fd;
  box-shadow: 0 10px 24px rgba(33, 115, 171, 0.14);
  cursor: pointer;
  isolation: isolate;
}

.education-preview::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(9, 54, 86, 0.5));
  content: "";
}

.education-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), filter 0.3s ease;
}

.education-preview:hover img,
.education-preview:focus-visible img {
  transform: scale(1.025);
  filter: saturate(1.04);
}

.education-preview-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #268bd7;
  border: 5px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(17, 80, 123, 0.25);
  transform: translate(-50%, -50%);
  animation: education-play-pulse 2.2s ease-in-out infinite;
}

.education-preview-play .icon {
  width: 24px;
  height: 24px;
  margin-left: 3px;
}

.education-preview-duration,
.education-preview-state {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  border-radius: 13px;
  background: rgba(10, 56, 87, 0.72);
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 800;
}

.education-preview-state {
  left: 10px;
  padding: 0 10px;
}

.education-preview-duration {
  right: 10px;
  padding: 0 8px;
}

@keyframes education-play-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(17, 80, 123, 0.24), 0 0 0 0 rgba(78, 171, 233, 0.28); }
  50% { box-shadow: 0 8px 24px rgba(17, 80, 123, 0.24), 0 0 0 12px rgba(78, 171, 233, 0); }
}

.education-card-copy {
  padding: 12px 2px 2px;
}

.education-card-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.education-card-copy > div span {
  display: inline-flex;
  min-height: 25px;
  padding: 0 9px;
  align-items: center;
  color: #35799f;
  border-radius: 13px;
  background: #e9f6fd;
  font-size: 10px;
  font-weight: 750;
}

.education-card-copy h3 {
  margin: 10px 0 4px;
  color: var(--ink-strong);
  font-size: 17px;
}

.education-card-copy p {
  margin: 0;
  color: #506d82;
  font-size: 14px;
  line-height: 1.65;
}

.education-card-info {
  font-size: 11px;
}

.education-start-btn {
  display: flex;
  width: 100%;
  min-height: 45px;
  margin-top: 11px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
}

.education-start-btn .icon {
  width: 16px;
  height: 16px;
}

.education-learning-sheet {
  width: min(100%, 470px);
  height: min(96dvh, 860px);
  max-height: 96dvh;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, #f9fdff, #edf8fe 76%, #f8fcff);
}

.education-modal-head {
  position: sticky;
  z-index: 8;
  top: 0;
  display: flex;
  padding: 17px 18px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(57, 138, 194, 0.09);
  background: rgba(249, 253, 255, 0.93);
  backdrop-filter: blur(16px);
}

.education-modal-head > div {
  min-width: 0;
}

.education-modal-head > div > span {
  display: block;
  color: #2b8bce;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.education-modal-head h2 {
  margin: 3px 0 0;
  color: var(--ink-strong);
  font-size: 20px;
  line-height: 1.35;
}

.education-modal-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px !important;
  line-height: 1.45;
}

.education-gate-chip {
  display: inline-flex;
  min-height: 32px;
  flex: 0 0 auto;
  padding: 0 9px;
  align-items: center;
  gap: 4px;
  color: #9b6927;
  border-radius: 16px;
  background: #fff4e5;
  font-size: 10px;
  font-weight: 800;
}

.education-gate-chip .icon {
  width: 13px;
  height: 13px;
}

.education-modal-body {
  padding: 15px 16px calc(20px + var(--safe-bottom));
}

.education-video-shell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(69, 151, 208, 0.16);
  border-radius: 19px;
  background: #ddecf5;
  box-shadow: 0 14px 30px rgba(25, 93, 139, 0.16);
}

.education-video-shell video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #ddecf5;
}

.education-video-badge {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 9px;
  right: 9px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.education-video-badge > span {
  display: inline-flex;
  min-height: 29px;
  padding: 0 9px 0 5px;
  align-items: center;
  gap: 5px;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(8, 48, 76, 0.78), rgba(13, 83, 118, 0.66));
  box-shadow: 0 5px 14px rgba(2, 34, 55, 0.16);
  backdrop-filter: blur(9px);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.01em;
}

.education-video-badge .education-badge-icon {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  color: #b9efff;
  border: 1px solid rgba(186, 239, 255, 0.34);
  border-radius: 50%;
  background: rgba(93, 196, 236, 0.18);
}

.education-video-badge .education-badge-icon svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.15;
}

.education-video-badge .education-no-seek {
  background: linear-gradient(135deg, rgba(69, 48, 33, 0.78), rgba(112, 76, 43, 0.7));
}

.education-video-badge .education-no-seek .education-badge-icon {
  color: #ffe4ad;
  border-color: rgba(255, 226, 168, 0.38);
  background: rgba(255, 201, 108, 0.16);
}

.education-video-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  padding-top: 15px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: white;
  background: linear-gradient(180deg, rgba(10, 49, 75, 0.06), rgba(8, 45, 70, 0.42));
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.education-video-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.education-video-overlay button {
  display: grid;
  width: 58px;
  height: 58px;
  padding: 0;
  place-items: center;
  color: #278bd4;
  border: 5px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: white;
  box-shadow: 0 10px 26px rgba(13, 63, 96, 0.28);
  cursor: pointer;
}

.education-video-overlay button .icon {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

.education-video-overlay strong {
  margin-top: 8px;
  font-size: 14px;
}

.education-video-overlay small {
  margin-top: 2px;
  font-size: 10px;
  opacity: 0.86;
}

.education-video-progress {
  position: absolute;
  z-index: 5;
  right: 10px;
  bottom: 9px;
  left: 10px;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 8px;
  pointer-events: none;
}

.education-video-progress i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.45);
}

.education-video-progress b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #67c9f6, #42d4b2);
  transition: width 0.18s linear;
}

.education-video-progress span {
  min-width: 74px;
  color: white;
  text-align: right;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.34);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.education-video-shell.has-error .education-video-overlay {
  background: rgba(26, 59, 82, 0.82);
}

.education-watch-note {
  display: grid;
  margin-top: 12px;
  padding: 12px;
  align-items: center;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  border: 1px solid rgba(77, 156, 211, 0.13);
  border-radius: 16px;
  background: #eef8fe;
}

.education-watch-note > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #2a87c8;
  border-radius: 12px;
  background: white;
}

.education-watch-note > span .icon {
  width: 18px;
  height: 18px;
}

.education-watch-note strong {
  display: block;
  color: var(--ink-strong);
  font-size: 14px;
}

.education-watch-note p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px !important;
  line-height: 1.5;
}

.education-watch-note.completed {
  border-color: rgba(55, 188, 153, 0.18);
  background: #e9faf5;
}

.education-watch-note.completed > span {
  color: #16816d;
}

.education-quiz,
.education-complete-panel {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid rgba(64, 147, 206, 0.14);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(35, 105, 154, 0.08);
}

.education-quiz:not([hidden]) {
  animation: education-quiz-in 0.35s cubic-bezier(.2, .8, .2, 1);
}

.education-quiz[hidden] {
  display: none;
}

@keyframes education-quiz-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.education-quiz.has-error {
  animation: education-quiz-shake 0.4s ease;
}

@keyframes education-quiz-shake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
}

.education-quiz-head {
  display: grid;
  align-items: center;
  grid-template-columns: 40px 1fr;
  gap: 10px;
}

.education-quiz-head > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #2a87c8;
  border-radius: 13px;
  background: #e7f5ff;
}

.education-quiz-head > span .icon {
  width: 20px;
  height: 20px;
}

.education-quiz-head small {
  color: #2586c7;
  font-size: 10px;
  font-weight: 800;
}

.education-quiz-head h3 {
  margin: 3px 0 0;
  color: var(--ink-strong);
  font-size: 16px;
}

.education-answer-list {
  display: grid;
  margin-top: 13px;
  gap: 8px;
}

.education-answer-list button {
  display: grid;
  min-height: 56px;
  padding: 9px 11px;
  align-items: center;
  grid-template-columns: 32px 1fr;
  gap: 9px;
  color: #385c75;
  text-align: left;
  border: 1px solid rgba(62, 146, 205, 0.14);
  border-radius: 15px;
  background: #f4faff;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.education-answer-list button:active {
  transform: scale(0.985);
}

.education-answer-list button i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #398bc4;
  border-radius: 10px;
  background: white;
  font-style: normal;
  font-weight: 850;
}

.education-answer-list button.selected {
  color: #135d91;
  border-color: rgba(46, 142, 211, 0.5);
  background: #e7f5ff;
  box-shadow: 0 5px 14px rgba(42, 127, 188, 0.1);
}

.education-answer-list button.selected i {
  color: white;
  background: linear-gradient(145deg, #54b4ee, #2e87d3);
}

.education-answer-feedback {
  min-height: 20px;
  margin: 9px 2px 0;
  color: #9a6a2c;
  font-size: 12px !important;
  line-height: 1.55;
}

.education-answer-feedback.wrong {
  color: #b7624f;
}

.education-submit-btn {
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  font-size: 14px;
}

.education-quiz.is-passed {
  padding: 22px 17px 18px;
  text-align: center;
  border-color: rgba(48, 187, 151, 0.22);
  background: linear-gradient(155deg, #fff, #eafaf5);
}

.education-pass-mark {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  place-items: center;
  color: white;
  border-radius: 20px;
  background: linear-gradient(145deg, #5bd3b5, #27a88b);
  box-shadow: 0 10px 24px rgba(42, 165, 135, 0.22);
}

.education-pass-mark .icon {
  width: 28px;
  height: 28px;
}

.education-quiz.is-passed > small {
  color: #18846e;
  font-size: 11px;
  font-weight: 850;
}

.education-quiz.is-passed h3 {
  margin: 4px 0 6px;
  color: var(--ink-strong);
  font-size: 18px;
}

.education-quiz.is-passed p {
  margin: 0;
  color: var(--muted);
  font-size: 13px !important;
  line-height: 1.6;
}

.education-quiz.is-passed button {
  width: 100%;
  min-height: 46px;
  margin-top: 14px;
  font-size: 14px;
}

.education-complete-panel {
  display: grid;
  padding: 15px;
  align-items: center;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  border-color: rgba(48, 187, 151, 0.18);
  background: #f1fbf8;
}

.education-complete-panel > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: white;
  border-radius: 14px;
  background: #38b796;
}

.education-complete-panel strong {
  color: var(--ink-strong);
  font-size: 14px;
}

.education-complete-panel p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px !important;
  line-height: 1.5;
}

.education-complete-panel button {
  min-height: 44px;
  grid-column: 1 / -1;
  font-size: 14px;
}

.education-source-note {
  margin: 13px 6px 0;
  color: #8ca0ae;
  text-align: center;
  font-size: 10px !important;
  line-height: 1.55;
}

.home-quickbar {
  position: fixed;
  z-index: 29;
  bottom: calc(64px + var(--safe-bottom));
  left: 50%;
  width: min(100%, 470px);
  padding: 8px 13px 7px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(246, 251, 254, 0.5), rgba(250, 253, 255, 0.97) 34%);
  transform: translateX(-50%);
}

.home-quickbar-track {
  display: flex;
  padding: 1px 14px 2px 0;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  touch-action: pan-x;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

.home-quickbar-track:active {
  cursor: grabbing;
}

.home-quickbar-track.is-dragging {
  scroll-snap-type: none;
  user-select: none;
}

.home-quickbar .shortcut {
  min-width: 92px;
  height: 40px;
  flex: 0 0 auto;
  justify-content: center;
  scroll-snap-align: start;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 5px 16px rgba(42, 105, 153, 0.06);
}

.chat-composer {
  position: fixed;
  z-index: 30;
  bottom: 0;
  left: 50%;
  display: flex;
  width: min(100%, 470px);
  min-height: calc(64px + var(--safe-bottom));
  padding: 9px 13px calc(9px + var(--safe-bottom));
  align-items: center;
  gap: 7px;
  border-top: 1px solid rgba(67, 132, 178, 0.08);
  background: rgba(250, 253, 255, 0.96);
  box-shadow: 0 -10px 30px rgba(42, 103, 148, 0.07);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.composer-field {
  display: flex;
  min-width: 0;
  height: 44px;
  flex: 1;
  align-items: center;
  border: 1px solid rgba(54, 136, 197, 0.09);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(42, 105, 153, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.composer-input {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 16px;
  color: var(--ink);
  border: 0;
  border-radius: inherit;
  outline: none;
  background: transparent;
  font-size: 11px;
}

.composer-input::placeholder {
  color: #a4b5c1;
}

.composer-btn {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  flex: 0 0 auto;
  color: #506c80;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.composer-btn .icon {
  width: 21px;
  height: 21px;
}

.composer-btn.voice {
  width: 30px;
  height: 30px;
  color: #557184;
  border: 1.5px solid #6d8291;
}

.composer-btn.voice .icon {
  width: 22px;
  height: 22px;
}

.composer-btn.voice.is-listening {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #59b9ed, #3b82d9);
  box-shadow: 0 0 0 5px rgba(75, 157, 219, 0.13), 0 6px 16px rgba(49, 125, 197, 0.22);
  animation: voice-listening 1.25s ease-in-out infinite;
}

@keyframes voice-listening {
  0%, 100% { box-shadow: 0 0 0 4px rgba(75, 157, 219, 0.1), 0 6px 16px rgba(49, 125, 197, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(75, 157, 219, 0.04), 0 7px 20px rgba(49, 125, 197, 0.28); }
}

.composer-btn.camera {
  color: #46687e;
}

.composer-btn.primary-action {
  color: #46687e;
  border: 1.5px solid #6d8291;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.composer-send-icon {
  display: none;
}

.chat-composer.has-text .composer-more-icon {
  display: none;
}

.chat-composer.has-text .composer-send-icon {
  display: inline-flex;
}

.chat-composer.has-text .composer-btn.primary-action {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #5bb9ef, #3a82da);
  box-shadow: 0 6px 16px rgba(49, 125, 197, 0.25);
}

.hall-view,
.archive-view,
.plan-view,
.profile-view,
.trace-view,
.camera-view {
  padding-top: 5px;
}

.plan-view {
  --plan-font-caption: 11px;
  --plan-font-meta: 12px;
  --plan-font-body: 13px;
  --plan-font-card-title: 15px;
  --plan-font-section-title: 18px;
  --plan-font-page-title: 24px;
  font-size: var(--plan-font-body);
  line-height: 1.55;
}

.plan-view .page-intro h1 {
  font-size: var(--plan-font-page-title);
  line-height: 1.25;
}

.plan-view .page-intro p {
  font-size: var(--plan-font-meta);
  line-height: 1.5;
}

.plan-view .sync-badge {
  font-size: var(--plan-font-caption);
  line-height: 1.2;
}

.page-intro {
  display: flex;
  margin-bottom: 13px;
  align-items: flex-end;
  justify-content: space-between;
}

.page-intro h1 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 23px;
  letter-spacing: -0.04em;
}

.page-intro p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.sync-badge {
  display: inline-flex;
  padding: 7px 9px;
  align-items: center;
  gap: 5px;
  color: #148175;
  border-radius: 10px;
  background: #e5faf5;
  font-size: 8px;
  font-weight: 800;
}

.process-summary {
  padding: 13px 14px 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(230, 247, 255, 0.93)),
    #fff;
}

.progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-top strong {
  color: var(--ink-strong);
  font-size: 14px;
}

.progress-top span {
  padding: 5px 8px;
  color: #377cae;
  border-radius: 999px;
  background: rgba(228, 242, 252, 0.82);
  font-size: 9px;
  font-weight: 800;
}

.progress-top span b {
  font-size: 11px;
}

.progress-meta {
  display: flex;
  margin-top: 6px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
}

.progress-meta strong {
  color: #396e92;
  font-weight: 800;
}

.process-scroll {
  position: relative;
  display: grid;
  margin: 10px 0 0;
  padding: 1px 0;
  overflow: visible;
  grid-template-columns: repeat(var(--stage-count), minmax(0, 1fr));
  gap: 0;
}

.process-line {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: var(--stage-edge);
  left: var(--stage-edge);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfeaf1;
  transform: translateY(-50%);
}

.process-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #62c6b2, #4da4df);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-step {
  position: relative;
  z-index: 1;
  display: grid;
  width: 38px;
  height: 38px;
  min-width: 0;
  padding: 0;
  justify-self: center;
  place-items: center;
  color: #738a9c;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 9px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.process-step .step-dot {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #6f8798;
  border: 3px solid rgba(249, 253, 255, 0.98);
  border-radius: 50%;
  background: #e8f0f5;
  box-shadow: 0 2px 7px rgba(50, 102, 139, 0.08);
  font-size: 9px;
  font-weight: 800;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.process-step.done {
  color: #208978;
}

.process-step.done .step-dot {
  color: #fff;
  background: #5bc3ae;
}

.process-step.current {
  color: #2679ba;
}

.process-step.current .step-dot {
  color: #fff;
  background: linear-gradient(145deg, #5bbbea, #357fd5);
}

.process-step.active {
  color: #236fac;
  background: transparent;
  box-shadow: none;
}

.process-step.active .step-dot {
  color: #fff;
  background: linear-gradient(145deg, #5bbbea, #357fd5);
  box-shadow: 0 0 0 3px rgba(70, 153, 218, 0.16), 0 6px 14px rgba(49, 132, 194, 0.2);
  transform: scale(1.08);
}

.stage-panel {
  margin-top: 10px;
  padding: 15px;
}

.stage-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.stage-panel-head h2 {
  margin: 2px 0 3px;
  color: var(--ink-strong);
  font-size: 18px;
}

.stage-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.state-tag {
  display: inline-flex;
  padding: 5px 8px;
  align-items: center;
  gap: 4px;
  color: #1b8676;
  border-radius: 9px;
  background: #e5faf5;
  font-size: 8px;
  font-weight: 800;
}

.state-tag.pending {
  color: #c37725;
  background: #fff2df;
}

.state-tag.active {
  color: #2677b8;
  background: #e5f3ff;
}

.stage-panel {
  animation: journey-panel-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes journey-panel-in {
  from { opacity: 0.55; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.stage-body {
  margin-top: 15px;
}

.kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.kv-item {
  min-height: 62px;
  padding: 10px;
  border-radius: 13px;
  background: #f2f9fd;
}

.kv-item.full {
  grid-column: 1 / -1;
}

.kv-item span {
  display: block;
  color: var(--muted);
  font-size: 8px;
}

.kv-item strong {
  display: block;
  margin-top: 5px;
  color: var(--ink-strong);
  font-size: 12px;
  line-height: 1.45;
}

.root-cause-list {
  display: grid;
  margin-top: 12px;
  gap: 7px;
}

.root-cause {
  display: grid;
  padding: 9px 10px;
  align-items: center;
  grid-template-columns: 27px 1fr auto;
  gap: 8px;
  border-radius: 12px;
  background: #f7fbfd;
}

.root-rank {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #fff;
  border-radius: 9px;
  background: #56a8e7;
  font-size: 9px;
  font-weight: 800;
}

.root-cause strong {
  font-size: 10px;
}

.root-cause span {
  color: var(--muted);
  font-size: 8px;
}

.stage-actions {
  display: grid;
  margin-top: 14px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.team-strip {
  display: flex;
  margin-top: 14px;
  padding: 12px;
  align-items: center;
  gap: 9px;
  border-radius: 15px;
  background: linear-gradient(110deg, #e8f7ff, #eafaf6);
}

.team-avatars {
  display: flex;
  padding-left: 6px;
}

.team-avatars span {
  display: grid;
  width: 31px;
  height: 31px;
  margin-left: -6px;
  color: #326d98;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #c9eaff, #d6f5ed);
  font-size: 10px;
  font-weight: 800;
}

.team-strip strong {
  display: block;
  font-size: 10px;
}

.team-strip small {
  color: var(--muted);
  font-size: 8px;
}

.journey-section-head {
  display: flex;
  margin: 17px 2px 8px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.journey-section-head h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 14px;
  line-height: 1.3;
}

.journey-section-head span,
.journey-section-head button {
  color: #69869a;
  border: 0;
  background: transparent;
  font-size: 10px;
  white-space: nowrap;
}

.journey-section-head button {
  color: var(--blue-strong);
  cursor: pointer;
  font-weight: 750;
}

.journey-hero {
  display: flex;
  padding: 15px;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
}

.journey-hero-success {
  background: linear-gradient(135deg, #e4f8f1, #ebfbf7);
}

.journey-hero-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  color: #168d70;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
}

.journey-hero-icon .icon {
  width: 22px;
  height: 22px;
}

.journey-hero small,
.journey-hero h3,
.journey-hero p {
  display: block;
}

.journey-hero small {
  color: #62857a;
  font-size: 10px;
}

.journey-hero h3 {
  margin: 3px 0;
  color: var(--ink-strong);
  font-size: 15px;
}

.journey-hero p {
  margin: 0;
  color: #5f7d73;
  font-size: 11px;
  line-height: 1.5;
}

.journey-billing {
  padding: 14px;
  border: 1px solid rgba(72, 159, 219, 0.1);
  border-radius: 17px;
  background: #f6fbfe;
}

.journey-billing > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.journey-billing > div span {
  color: #476b82;
  font-size: 11px;
  line-height: 1.45;
}

.journey-billing > div strong {
  color: #246fae;
  font-size: 17px;
  white-space: nowrap;
}

.journey-billing ul {
  display: grid;
  margin: 11px 0 0;
  padding: 10px 0 0 17px;
  gap: 6px;
  color: #71899a;
  border-top: 1px solid #e5f0f6;
  font-size: 10px;
  line-height: 1.45;
}

.journey-row-list {
  padding: 3px 12px;
  overflow: hidden;
  border: 1px solid rgba(72, 159, 219, 0.08);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.92);
}

.journey-row-list > * {
  display: grid;
  width: 100%;
  min-height: 59px;
  padding: 8px 0;
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  color: inherit;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
}

.journey-row-list > button {
  cursor: pointer;
}

.journey-row-list > * + * {
  border-top: 1px solid #eaf1f5;
}

.journey-row-icon {
  display: grid;
  width: 32px;
  height: 32px;
  color: #2b7fc3;
  place-items: center;
  border-radius: 11px;
  background: #eaf6fe;
}

.journey-row-icon.success {
  color: #168e70;
  background: #e3f8f1;
}

.journey-row-icon.pending {
  color: #bc762a;
  background: #fff2df;
}

.journey-row-icon.warning {
  color: #cc7331;
  background: #fff0e5;
}

.journey-row-icon .icon {
  width: 16px;
  height: 16px;
}

.journey-row-list strong,
.journey-row-list small {
  display: block;
}

.journey-row-list strong {
  color: var(--ink-strong);
  font-size: 12px;
  line-height: 1.35;
}

.journey-row-list small {
  margin-top: 3px;
  color: #7e93a4;
  font-size: 10px;
  line-height: 1.4;
}

.journey-row-list em {
  padding: 5px 7px;
  color: #168e70;
  border-radius: 9px;
  background: #e4f7f0;
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
}

.journey-row-list em.neutral {
  color: #788c9c;
  background: #eef3f6;
}

.journey-row-list em.wait {
  color: #b96d22;
  background: #fff1df;
}

.journey-row-list em.action {
  color: #2679ba;
  background: #e8f4fc;
}

.journey-row-list.compact > * {
  min-height: 55px;
}

.journey-note {
  display: flex;
  margin: 10px 2px 0;
  align-items: flex-start;
  gap: 7px;
  color: #7890a0;
  font-size: 10px;
  line-height: 1.5;
}

.journey-note .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.journey-record-hero,
.journey-progress-hero {
  display: flex;
  padding: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 20px;
}

.journey-record-hero {
  background: linear-gradient(135deg, #e3f4ff, #e8f8ff);
}

.journey-record-hero > div:first-child span,
.journey-record-hero > div:first-child strong,
.journey-record-hero > div:first-child p,
.journey-progress-hero > div:first-child span,
.journey-progress-hero > div:first-child strong,
.journey-progress-hero > div:first-child small {
  display: block;
}

.journey-record-hero > div:first-child span {
  color: #68859a;
  font-size: 11px;
}

.journey-record-hero > div:first-child strong {
  margin: 2px 0;
  color: #206fae;
  font-size: 27px;
}

.journey-record-hero > div:first-child p {
  margin: 0;
  color: #7790a3;
  font-size: 10px;
}

.journey-ring {
  --ring-value: 0;
  position: relative;
  display: grid;
  width: 70px;
  height: 70px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#4aa5e4 calc(var(--ring-value) * 1%), rgba(74, 165, 228, 0.17) 0);
}

.journey-ring::before {
  position: absolute;
  content: "";
  inset: 7px;
  border-radius: inherit;
  background: #f7fcff;
}

.journey-ring > div {
  position: relative;
  z-index: 1;
  text-align: center;
}

.journey-ring strong,
.journey-ring span {
  display: block;
}

.journey-ring strong {
  color: #2476b7;
  font-size: 14px;
}

.journey-ring span {
  margin-top: 1px;
  color: #8195a5;
  font-size: 8px;
}

.journey-ring.light {
  background: conic-gradient(#fff calc(var(--ring-value) * 1%), rgba(255, 255, 255, 0.2) 0);
}

.journey-ring.light::before {
  background: #2c80c7;
}

.journey-ring.light strong,
.journey-ring.light span {
  color: #fff;
}

.journey-record-list {
  margin: 0;
  padding: 3px 13px;
  border: 1px solid rgba(72, 159, 219, 0.08);
  border-radius: 17px;
  background: #fff;
}

.journey-record-list div {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.journey-record-list div + div {
  border-top: 1px solid #edf2f6;
}

.journey-record-list dt {
  color: #7d92a4;
  font-size: 11px;
}

.journey-record-list dd {
  margin: 0;
  color: var(--ink-strong);
  font-size: 11px;
  text-align: right;
}

.journey-appointment {
  padding: 15px;
  border-radius: 19px;
  background: linear-gradient(135deg, #e3f4ff, #dcefff);
}

.journey-appointment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.journey-appointment-head span {
  color: #168d70;
  font-size: 10px;
}

.journey-appointment-head h3 {
  margin: 3px 0 0;
  color: var(--ink-strong);
  font-size: 16px;
}

.journey-appointment-head > .icon {
  width: 25px;
  height: 25px;
  color: #2d8fe8;
}

.journey-appointment > p {
  display: flex;
  margin: 9px 0 0;
  align-items: center;
  gap: 7px;
  color: #58768d;
  font-size: 11px;
}

.journey-appointment > p .icon {
  width: 15px;
  height: 15px;
}

.journey-inline-actions {
  display: grid;
  margin-top: 13px;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.journey-inline-actions button,
.journey-next-visit button,
.journey-center-card button {
  min-height: 37px;
  color: #2678b8;
  border: 1px solid rgba(50, 132, 194, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  font-weight: 720;
  cursor: pointer;
}

.journey-data-grid,
.journey-capture-grid,
.journey-match-grid,
.journey-outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.journey-data-grid > div,
.journey-match-grid > div,
.journey-outcome-grid > article {
  min-height: 92px;
  padding: 12px;
  border: 1px solid rgba(72, 159, 219, 0.07);
  border-radius: 15px;
  background: #f8fcfe;
}

.journey-data-grid .icon {
  width: 18px;
  height: 18px;
  margin-bottom: 7px;
  color: #2d8fe8;
}

.journey-data-grid span,
.journey-data-grid strong,
.journey-data-grid small,
.journey-match-grid span,
.journey-match-grid strong,
.journey-match-grid small {
  display: block;
}

.journey-data-grid span,
.journey-match-grid span {
  color: #7d92a4;
  font-size: 9px;
}

.journey-data-grid strong,
.journey-match-grid strong {
  margin-top: 3px;
  color: var(--ink-strong);
  font-size: 12px;
}

.journey-data-grid small,
.journey-match-grid small {
  margin-top: 3px;
  color: #7d92a4;
  font-size: 9px;
  line-height: 1.4;
}

.journey-tip {
  display: flex;
  margin-top: 10px;
  padding: 13px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 15px;
  background: #fff5e8;
}

.journey-tip > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: #bf752c;
  place-items: center;
  border-radius: 10px;
  background: #fff;
}

.journey-tip .icon {
  width: 16px;
  height: 16px;
}

.journey-tip strong {
  color: #6f543c;
  font-size: 12px;
}

.journey-tip p {
  margin: 3px 0 0;
  color: #866f58;
  font-size: 10px;
  line-height: 1.5;
}

.journey-progress-hero {
  color: #fff;
  background: linear-gradient(135deg, #3c99e4, #1d6cbb);
}

.journey-progress-hero.intervention {
  background: linear-gradient(135deg, #4aafea, #2977c8);
}

.journey-progress-hero > div:first-child span,
.journey-progress-hero > div:first-child small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
}

.journey-progress-hero > div:first-child strong {
  margin: 2px 0;
  font-size: 25px;
}

.journey-intro {
  margin: 11px 2px 0;
  color: #6f8798;
  font-size: 10px;
  line-height: 1.55;
}

.journey-capture-grid > div {
  display: flex;
  min-height: 43px;
  padding: 10px;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  border-radius: 13px;
  background: #f6fbfd;
}

.journey-capture-grid span {
  color: #6e8699;
  font-size: 10px;
}

.journey-capture-grid strong {
  color: #168e70;
  font-size: 11px;
}

.journey-finding-list {
  display: grid;
  gap: 8px;
}

.journey-finding-list article {
  display: grid;
  padding: 12px;
  grid-template-columns: 61px 1fr;
  gap: 10px;
  border: 1px solid rgba(72, 159, 219, 0.07);
  border-radius: 15px;
  background: #f9fcfe;
}

.journey-finding-list article > span {
  height: fit-content;
  padding: 5px 6px;
  color: #216fae;
  border-radius: 9px;
  background: #e8f4fc;
  font-size: 9px;
  text-align: center;
}

.journey-finding-list strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.journey-finding-list p {
  margin: 3px 0 0;
  color: #778c9d;
  font-size: 10px;
  line-height: 1.5;
}

.journey-process-list {
  margin: 0;
  padding: 3px 12px;
  list-style: none;
  border: 1px solid rgba(72, 159, 219, 0.08);
  border-radius: 17px;
  background: #fff;
}

.journey-process-list li {
  display: grid;
  min-height: 61px;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
}

.journey-process-list li + li {
  border-top: 1px solid #edf2f6;
}

.journey-process-list li > span {
  display: grid;
  width: 29px;
  height: 29px;
  color: #159171;
  place-items: center;
  border-radius: 10px;
  background: #e3f8f1;
  font-size: 10px;
}

.journey-process-list li.current > span {
  color: #fff;
  background: #3d94da;
}

.journey-process-list .icon {
  width: 15px;
  height: 15px;
}

.journey-process-list strong,
.journey-process-list small {
  display: block;
}

.journey-process-list strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.journey-process-list small {
  margin-top: 3px;
  color: #8296a7;
  font-size: 9px;
}

.journey-process-list time {
  color: #8598a8;
  font-size: 9px;
}

.journey-match-grid > div {
  min-height: 83px;
}

.journey-primary-action,
.journey-secondary-action {
  display: flex;
  width: 100%;
  min-height: 47px;
  margin-top: 14px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 780;
  cursor: pointer;
}

.journey-primary-action {
  color: #fff;
  border: 0;
  background: linear-gradient(105deg, #51b8ef, #367fd7);
  box-shadow: 0 10px 24px rgba(44, 126, 200, 0.18);
}

.journey-secondary-action {
  color: #2677b8;
  border: 1px solid rgba(55, 138, 204, 0.18);
  background: #f6fbff;
}

.journey-primary-action .icon,
.journey-secondary-action .icon {
  width: 17px;
  height: 17px;
}

.journey-team-list {
  padding: 3px 12px;
  border: 1px solid rgba(72, 159, 219, 0.08);
  border-radius: 17px;
  background: #fff;
}

.journey-team-list > div {
  display: grid;
  min-height: 61px;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
}

.journey-team-list > div + div {
  border-top: 1px solid #edf2f6;
}

.journey-team-list > div > span {
  display: grid;
  width: 34px;
  height: 34px;
  color: #287fc3;
  place-items: center;
  border-radius: 12px;
  background: #eaf6fe;
  font-size: 11px;
  font-weight: 780;
}

.journey-team-list strong,
.journey-team-list small {
  display: block;
}

.journey-team-list strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.journey-team-list small {
  margin-top: 3px;
  color: #8296a7;
  font-size: 9px;
}

.journey-team-list em {
  color: #148c6d;
  font-size: 9px;
  font-style: normal;
}

.journey-center-card {
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(110deg, #e8f7ff, #eafaf6);
}

.journey-center-card,
.journey-center-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.journey-center-card > div:first-child > span {
  display: grid;
  width: 36px;
  height: 36px;
  color: #2679ba;
  place-items: center;
  border-radius: 12px;
  background: #fff;
}

.journey-center-card .icon {
  width: 18px;
  height: 18px;
}

.journey-center-card strong,
.journey-center-card small {
  display: block;
}

.journey-center-card strong {
  color: var(--ink-strong);
  font-size: 11px;
}

.journey-center-card small {
  margin-top: 2px;
  color: #7890a0;
  font-size: 9px;
}

.journey-center-card > div:last-child {
  gap: 5px;
}

.journey-center-card button {
  min-height: 32px;
  padding: 0 9px;
}

.journey-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.journey-metrics article {
  padding: 12px 6px;
  border: 1px solid rgba(72, 159, 219, 0.07);
  border-radius: 15px;
  background: #f8fcfe;
  text-align: center;
}

.journey-metrics strong,
.journey-metrics span {
  display: block;
}

.journey-metrics strong {
  color: #267fc3;
  font-size: 22px;
}

.journey-metrics span {
  margin-top: 3px;
  color: #7e93a4;
  font-size: 9px;
}

.journey-next-visit {
  margin-top: 10px;
  padding: 15px;
  border-radius: 18px;
  background: linear-gradient(135deg, #e5f5ff, #dcefff);
}

.journey-next-visit > span {
  color: #168d70;
  font-size: 10px;
}

.journey-next-visit h3 {
  margin: 4px 0 8px;
  color: var(--ink-strong);
  font-size: 15px;
}

.journey-next-visit p {
  display: flex;
  margin: 0;
  align-items: center;
  gap: 6px;
  color: #647e92;
  font-size: 10px;
}

.journey-next-visit p .icon {
  width: 15px;
  height: 15px;
}

.journey-next-visit > div {
  display: grid;
  margin-top: 11px;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.journey-follow-list {
  padding: 2px 12px;
  border: 1px solid rgba(72, 159, 219, 0.08);
  border-radius: 17px;
  background: #fff;
}

.journey-follow-list article {
  display: grid;
  padding: 12px 0;
  grid-template-columns: 47px 1fr;
  gap: 10px;
}

.journey-follow-list article + article {
  border-top: 1px solid #edf2f6;
}

.journey-follow-list time {
  color: #2b7ec0;
  font-size: 10px;
}

.journey-follow-list strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.journey-follow-list p {
  margin: 3px 0 0;
  color: #7d91a1;
  font-size: 10px;
  line-height: 1.5;
}

.journey-close-hero {
  display: flex;
  padding: 15px;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, #e8f7f2, #def4ec);
}

.journey-close-hero > span {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  color: #168f70;
  place-items: center;
  border-radius: 14px;
  background: #fff;
}

.journey-close-hero .icon {
  width: 22px;
  height: 22px;
}

.journey-close-hero small {
  color: #568074;
  font-size: 10px;
}

.journey-close-hero h3 {
  margin: 3px 0;
  color: var(--ink-strong);
  font-size: 15px;
}

.journey-close-hero p {
  margin: 0;
  color: #607b72;
  font-size: 10px;
}

.journey-outcome-grid > article {
  min-height: 91px;
}

.journey-outcome-grid span,
.journey-outcome-grid small {
  display: block;
  color: #7c91a3;
  font-size: 9px;
}

.journey-outcome-grid article > div {
  display: flex;
  margin: 7px 0 3px;
  align-items: center;
  gap: 7px;
}

.journey-outcome-grid strong {
  color: var(--ink-strong);
  font-size: 16px;
}

.journey-outcome-grid strong:last-child {
  color: #168e70;
}

.journey-outcome-grid b {
  color: #91a3b1;
  font-size: 11px;
}

.journey-warm-note {
  display: flex;
  margin-top: 10px;
  padding: 13px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 16px;
  background: #fff1e4;
}

.journey-warm-note > span {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  color: #ca7a34;
  place-items: center;
  border-radius: 10px;
  background: #fff;
}

.journey-warm-note .icon {
  width: 17px;
  height: 17px;
}

.journey-warm-note strong {
  color: #76583f;
  font-size: 12px;
}

.journey-warm-note p {
  margin: 3px 0 0;
  color: #806b55;
  font-size: 10px;
  line-height: 1.5;
}

.archive-completion {
  display: grid;
  padding: 14px;
  align-items: center;
  grid-template-columns: 1fr 73px;
  gap: 12px;
}

.archive-completion h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 15px;
}

.archive-completion p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.completion-ring {
  position: relative;
  display: grid;
  width: 65px;
  height: 65px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#4ea6e7 0 82%, #e6f1f7 82% 100%);
}

.completion-ring::before {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.completion-ring strong {
  position: relative;
  color: var(--blue-strong);
  font-size: 13px;
}

.device-banner {
  display: grid;
  min-height: 90px;
  margin-top: 11px;
  padding: 14px;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 10px;
  border: 1px solid rgba(61, 146, 206, 0.11);
  border-radius: 19px;
  background: linear-gradient(120deg, #e4f7ff, #e7faf7);
}

.device-banner h3 {
  margin: 0 0 4px;
  color: var(--ink-strong);
  font-size: 14px;
}

.device-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.data-grid {
  display: grid;
  margin-top: 11px;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.data-tile {
  position: relative;
  min-height: 128px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(62, 143, 202, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 21px rgba(42, 105, 153, 0.06);
  cursor: pointer;
}

.data-tile.wide {
  min-height: 113px;
  grid-column: 1 / -1;
}

.tile-icon {
  display: grid;
  width: 31px;
  height: 31px;
  color: var(--blue-strong);
  place-items: center;
  border-radius: 10px;
  background: #e9f6ff;
}

.data-tile:nth-child(2n) .tile-icon {
  color: #1c9183;
  background: #e6faf5;
}

.data-tile h3 {
  margin: 9px 0 2px;
  color: var(--ink-strong);
  font-size: 12px;
}

.data-tile p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.tile-value {
  display: flex;
  margin-top: 10px;
  align-items: baseline;
  color: var(--ink-strong);
  font-size: 18px;
  font-weight: 800;
}

.tile-value small {
  margin-left: 3px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
}

.mini-bars {
  position: absolute;
  right: 11px;
  bottom: 14px;
  display: flex;
  height: 36px;
  align-items: flex-end;
  gap: 3px;
}

.mini-bars i {
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #63c2ec, #4b93df);
  opacity: 0.65;
}

.record-tabs,
.category-tabs {
  display: flex;
  padding: 4px;
  gap: 4px;
  border-radius: 14px;
  background: rgba(225, 239, 248, 0.75);
}

.record-tabs button,
.category-tabs button {
  min-height: 35px;
  flex: 1;
  padding: 0 10px;
  color: var(--muted);
  border: 0;
  border-radius: 11px;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.record-tabs button.active,
.category-tabs button.active {
  color: var(--blue-strong);
  background: #fff;
  box-shadow: 0 6px 16px rgba(42, 105, 153, 0.08);
}

.plan-date-head {
  display: flex;
  margin: 3px 2px 12px;
  align-items: center;
  justify-content: space-between;
}

.plan-date-head > div > span {
  display: block;
  color: #6687a1;
  font-size: var(--plan-font-meta);
  line-height: 1.45;
}

.plan-date-head h2 {
  margin: 5px 0 0;
  color: var(--ink-strong);
  font-size: 22px;
  font-weight: 760;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.plan-date-head .icon-btn {
  width: 39px;
  height: 39px;
  color: #2d76af;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.plan-progress-card {
  display: grid;
  min-height: 108px;
  padding: 14px 17px;
  align-items: center;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  border: 1px solid rgba(74, 158, 211, 0.1);
  border-radius: 21px;
  background: linear-gradient(125deg, #dff2ff, #d9f1ff 62%, #def8f4);
}

.plan-progress-ring {
  position: relative;
  display: grid;
  width: 65px;
  height: 65px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#3c9ae8 0 var(--plan-progress), rgba(255, 255, 255, 0.66) var(--plan-progress) 100%);
  box-shadow: 0 8px 20px rgba(49, 135, 201, 0.13);
}

.plan-progress-ring::before {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(250, 254, 255, 0.96);
  content: "";
}

.plan-progress-ring > div {
  position: relative;
  text-align: center;
}

.plan-progress-ring strong,
.plan-progress-ring span {
  display: block;
}

.plan-progress-ring strong {
  color: var(--ink-strong);
  font-size: 18px;
  line-height: 1;
}

.plan-progress-ring span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}

.plan-progress-card > div:last-child > span {
  color: #18877c;
  font-size: var(--plan-font-caption);
  line-height: 1.4;
}

.plan-progress-card h3 {
  margin: 5px 0 4px;
  color: var(--ink-strong);
  font-size: 16px;
  font-weight: 760;
  line-height: 1.35;
}

.plan-progress-card p {
  margin: 0;
  color: #668197;
  font-size: var(--plan-font-caption);
  line-height: 1.6;
}

.plan-view .category-tabs {
  position: sticky;
  z-index: 8;
  top: 0;
  margin-right: 0;
  padding-right: 4px;
  border: 1px solid rgba(62, 141, 199, 0.1);
  background: rgba(228, 241, 249, 0.9);
  box-shadow: 0 8px 20px rgba(38, 105, 153, 0.06);
  backdrop-filter: blur(14px);
}

.plan-view .category-tabs button {
  min-width: 70px;
  padding: 0 7px;
  font-size: var(--plan-font-caption);
  line-height: 1.35;
  white-space: nowrap;
}

.plan-target-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(67, 151, 207, 0.18);
  border-radius: 19px;
  background: rgba(232, 247, 255, 0.74);
}

.plan-target-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #567a96;
  font-size: var(--plan-font-meta);
  line-height: 1.4;
}

.plan-target-top strong {
  color: #0875cd;
  font-size: 24px;
  font-weight: 580;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.plan-target-top strong small {
  margin-left: 5px;
  font-size: 10px;
  font-weight: 600;
}

.plan-target-pills {
  display: grid;
  margin-top: 11px;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 6px;
}

.plan-target-pills span {
  padding: 8px 6px;
  color: #55758e;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  font-size: var(--plan-font-caption);
  line-height: 1.4;
  text-align: center;
}

.plan-target-card > p {
  margin: 10px 0 0;
  color: #58758d;
  font-size: var(--plan-font-meta);
  line-height: 1.7;
}

.daily-plan-group {
  margin-top: 17px;
}

.daily-plan-group.is-filtered {
  margin-top: 12px;
}

.daily-plan-section-head {
  display: flex;
  margin: 0 2px 9px;
  align-items: center;
  justify-content: space-between;
}

.daily-plan-section-head > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.daily-plan-group-icon {
  display: grid;
  width: 27px;
  height: 27px;
  color: #2783cf;
  place-items: center;
  border-radius: 9px;
  background: #e5f4ff;
}

.daily-plan-group-icon .icon {
  width: 15px;
  height: 15px;
}

.daily-plan-section-head h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: var(--plan-font-section-title);
  line-height: 1.35;
}

.daily-plan-section-head p {
  margin: 0;
  color: #7790a4;
  font-size: var(--plan-font-caption);
  line-height: 1.4;
  white-space: nowrap;
}

.daily-plan-list {
  display: grid;
  gap: 9px;
}

.daily-plan-task {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(72, 151, 205, 0.1);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(42, 105, 153, 0.055);
}

.daily-plan-task.is-next {
  border-color: rgba(46, 146, 225, 0.42);
  box-shadow: 0 10px 25px rgba(47, 139, 208, 0.09);
}

.daily-plan-task.is-done {
  background: rgba(253, 255, 255, 0.82);
}

.daily-plan-task.is-skipped {
  border-style: dashed;
  background: rgba(250, 252, 253, 0.82);
}

.daily-plan-task.has-open-fan {
  z-index: 12;
  border-color: rgba(46, 146, 225, 0.46);
  box-shadow: 0 15px 34px rgba(42, 126, 190, 0.14);
}

.daily-task-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.daily-task-time {
  display: block;
  color: #6d8da6;
  font-size: var(--plan-font-caption);
  line-height: 1.45;
}

.daily-task-time em {
  color: #2f82c5;
  font-style: normal;
  font-weight: 750;
}

.daily-task-head h3 {
  margin: 4px 0 0;
  color: var(--ink-strong);
  font-size: var(--plan-font-card-title);
  line-height: 1.4;
}

.daily-check-wrap {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
}

.daily-check-wrap.is-open {
  z-index: 20;
}

.daily-check-btn {
  display: inline-flex;
  min-width: 62px;
  min-height: 34px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(145deg, #43a9ed, #2e82dc);
  box-shadow: 0 7px 15px rgba(46, 130, 213, 0.16);
  font-size: var(--plan-font-caption);
  line-height: 1.35;
  cursor: pointer;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.daily-check-btn[aria-expanded="true"] {
  box-shadow: 0 9px 22px rgba(46, 130, 213, 0.3), 0 0 0 5px rgba(71, 159, 227, 0.09);
  transform: translateY(-1px);
  animation: daily-check-trigger-open 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.daily-check-status {
  display: inline-flex;
  min-width: 62px;
  min-height: 34px;
  padding: 0 9px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 11px;
  font-size: var(--plan-font-caption);
  line-height: 1.35;
  font-weight: 720;
}

.daily-check-status.is-done {
  color: #188878;
  background: #e9f9f4;
}

.daily-check-status.is-skipped {
  color: #9b7752;
  background: #f6f1eb;
}

.daily-check-status .icon {
  width: 13px;
  height: 13px;
}

.daily-check-fan {
  position: absolute;
  z-index: 19;
  top: 29px;
  right: -2px;
  width: 135px;
  height: 108px;
  pointer-events: none;
  transform-origin: 104px 0;
  animation: daily-fan-shell-in 0.2s ease-out both;
}

.daily-check-fan::before {
  position: absolute;
  top: 0;
  right: 31px;
  width: 104px;
  height: 104px;
  border: 1px solid rgba(87, 166, 221, 0.09);
  border-radius: 0 0 0 100%;
  background:
    radial-gradient(circle at 100% 0, transparent 0 68px, rgba(73, 157, 218, 0.14) 69px 70px, transparent 71px),
    linear-gradient(140deg, rgba(230, 246, 255, 0.82), rgba(244, 251, 255, 0.38) 68%, rgba(255, 255, 255, 0.16));
  box-shadow: 0 15px 28px rgba(46, 126, 184, 0.1);
  transform-origin: 100% 0;
  animation: daily-fan-sector-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  content: "";
}

.daily-fan-action {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 54px;
  height: 54px;
  padding: 6px 4px 5px;
  place-items: center;
  gap: 2px;
  border: 1px solid rgba(65, 145, 203, 0.13);
  border-radius: 50%;
  background: rgba(252, 255, 255, 0.96);
  box-shadow: 0 10px 22px rgba(39, 109, 159, 0.15);
  pointer-events: auto;
  cursor: pointer;
  will-change: opacity, transform;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.daily-fan-action:active {
  box-shadow: 0 6px 15px rgba(39, 109, 159, 0.13);
  transform: scale(0.94);
}

.daily-fan-action > span {
  display: grid;
  width: 26px;
  height: 26px;
  color: #fff;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #52afea, #2f84d8);
  animation: daily-fan-icon-in 0.28s 0.19s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.daily-fan-action .icon {
  width: 14px;
  height: 14px;
}

.daily-fan-action em {
  color: #46667e;
  font-size: 9px;
  line-height: 1.1;
  font-style: normal;
  font-weight: 700;
}

.daily-fan-primary {
  top: 4px;
  left: 14px;
  animation: daily-fan-primary-in 0.44s 0.04s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.daily-fan-secondary {
  top: 42px;
  left: 60px;
  border-color: rgba(190, 145, 87, 0.13);
  background: rgba(255, 250, 242, 0.97);
  animation: daily-fan-secondary-in 0.5s 0.1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.daily-fan-secondary > span {
  color: #9b6b39;
  background: #fff2df;
}

.daily-fan-secondary em {
  color: #8d6944;
}

.daily-check-fan.has-complete {
  width: 145px;
  height: 116px;
  transform-origin: 112px 0;
}

.daily-check-fan.has-complete::before {
  right: 31px;
  width: 110px;
  height: 110px;
  background:
    radial-gradient(circle at 100% 0, transparent 0 72px, rgba(73, 157, 218, 0.14) 73px 74px, transparent 75px),
    linear-gradient(140deg, rgba(230, 246, 255, 0.84), rgba(244, 251, 255, 0.4) 68%, rgba(255, 255, 255, 0.18));
}

.daily-check-fan.has-complete .daily-fan-action {
  width: 48px;
  height: 48px;
  padding: 5px 3px 4px;
}

.daily-check-fan.has-complete .daily-fan-action > span {
  width: 23px;
  height: 23px;
}

.daily-check-fan.has-complete .daily-fan-action .icon {
  width: 13px;
  height: 13px;
}

.daily-check-fan.has-complete .daily-fan-primary {
  top: 2px;
  left: 10px;
}

.daily-fan-complete {
  top: 37px;
  left: 39px;
  border-color: rgba(45, 158, 135, 0.15);
  background: rgba(244, 255, 251, 0.98);
  animation: daily-fan-complete-in 0.48s 0.075s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.daily-fan-complete > span {
  color: #fff;
  background: linear-gradient(145deg, #55c6ac, #26977f);
}

.daily-fan-complete em {
  color: #267d6d;
}

.daily-check-fan.has-complete .daily-fan-secondary {
  top: 59px;
  left: 82px;
}

@keyframes daily-fan-shell-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes daily-fan-sector-in {
  from { opacity: 0; transform: scale(0.12) rotate(-10deg); }
  72% { opacity: 1; transform: scale(1.035) rotate(1deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes daily-fan-primary-in {
  from { opacity: 0; transform: translate(63px, -31px) scale(0.28) rotate(-16deg); }
  72% { opacity: 1; transform: translate(-2px, 1px) scale(1.06) rotate(1deg); }
  to { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}

@keyframes daily-fan-secondary-in {
  from { opacity: 0; transform: translate(17px, -69px) scale(0.28) rotate(-12deg); }
  72% { opacity: 1; transform: translate(1px, 2px) scale(1.06) rotate(1deg); }
  to { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}

@keyframes daily-fan-complete-in {
  from { opacity: 0; transform: translate(49px, -56px) scale(0.28) rotate(-14deg); }
  72% { opacity: 1; transform: translate(0, 2px) scale(1.06) rotate(1deg); }
  to { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}

@keyframes daily-fan-icon-in {
  from { opacity: 0; transform: scale(0.62); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes daily-check-trigger-open {
  0% { transform: translateY(0) scale(1); }
  48% { transform: translateY(-2px) scale(1.045); }
  100% { transform: translateY(-1px) scale(1); }
}

.daily-check-fan.is-closing {
  animation: daily-fan-shell-out 0.2s ease-in both;
}

.daily-check-fan.is-closing::before {
  animation: daily-fan-sector-out 0.2s ease-in both;
}

.daily-check-fan.is-closing .daily-fan-primary {
  animation: daily-fan-primary-out 0.18s ease-in both;
}

.daily-check-fan.is-closing .daily-fan-secondary {
  animation: daily-fan-secondary-out 0.2s ease-in both;
}

.daily-check-fan.is-closing .daily-fan-complete {
  animation: daily-fan-complete-out 0.19s ease-in both;
}

@keyframes daily-fan-shell-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes daily-fan-sector-out {
  from { opacity: 1; transform: scale(1) rotate(0); }
  to { opacity: 0; transform: scale(0.18) rotate(-8deg); }
}

@keyframes daily-fan-primary-out {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(63px, -31px) scale(0.35); }
}

@keyframes daily-fan-secondary-out {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(17px, -69px) scale(0.35); }
}

@keyframes daily-fan-complete-out {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(49px, -56px) scale(0.35); }
}

.daily-task-summary {
  margin: 7px 0 0;
  color: #64829a;
  font-size: var(--plan-font-meta);
  line-height: 1.6;
}

.daily-task-items {
  display: grid;
  margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.daily-task-items > div {
  min-height: 49px;
  padding: 9px 10px;
  border-radius: 11px;
  background: #f1f7fb;
}

.daily-task-items strong,
.daily-task-items span {
  display: block;
}

.daily-task-items strong {
  color: #355f7e;
  font-size: var(--plan-font-meta);
  font-weight: 650;
  line-height: 1.4;
}

.daily-task-items span {
  margin-top: 3px;
  color: #7390a6;
  font-size: var(--plan-font-caption);
  line-height: 1.35;
}

.daily-task-tip {
  display: grid;
  margin-top: 9px;
  padding: 9px;
  align-items: center;
  grid-template-columns: 16px 1fr;
  gap: 6px;
  color: #7b5b38;
  border-radius: 10px;
  background: #fff5e8;
  font-size: var(--plan-font-caption);
  line-height: 1.6;
}

.daily-task-tip .icon {
  width: 15px;
  height: 15px;
}

.plan-reason-card {
  display: grid;
  margin-top: 15px;
  padding: 14px;
  align-items: start;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  border: 1px solid rgba(80, 157, 208, 0.12);
  border-radius: 17px;
  background: linear-gradient(125deg, rgba(225, 245, 255, 0.9), rgba(233, 250, 247, 0.9));
}

.plan-reason-card > span {
  display: grid;
  width: 34px;
  height: 34px;
  color: #2c84cc;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.8);
}

.plan-reason-card strong {
  color: var(--ink-strong);
  font-size: 13px;
  line-height: 1.4;
}

.plan-reason-card p {
  margin: 4px 0 0;
  color: #627f94;
  font-size: var(--plan-font-meta);
  line-height: 1.65;
}

.plan-adjust-btn {
  display: flex;
  width: 100%;
  min-height: 45px;
  margin-top: 10px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #277bc0;
  border: 1px solid rgba(51, 137, 203, 0.22);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 20px rgba(42, 105, 153, 0.06);
  font-size: var(--plan-font-body);
  line-height: 1.4;
  font-weight: 760;
  cursor: pointer;
}

.plan-adjust-btn .icon {
  width: 16px;
  height: 16px;
}

.plan-view .medical-disclaimer {
  font-size: var(--plan-font-caption);
  line-height: 1.55;
}

.plan-card {
  margin-top: 10px;
  padding: 15px;
}

.plan-card-head {
  display: grid;
  align-items: center;
  grid-template-columns: 39px 1fr auto;
  gap: 9px;
}

.plan-card-head .tile-icon {
  width: 39px;
  height: 39px;
  border-radius: 13px;
}

.plan-card-head h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 14px;
}

.plan-card-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 8px;
}

.plan-summary {
  margin: 12px 0 0;
  padding: 10px;
  color: #45647b;
  border-radius: 12px;
  background: #f4f9fc;
  font-size: 10px;
  line-height: 1.55;
}

.plan-actions {
  display: grid;
  margin-top: 11px;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 7px;
}

.plan-actions button {
  min-height: 39px;
  padding: 0 7px;
  font-size: 9px;
}

.plan-card.feedback {
  opacity: 0.67;
}

.trace-phase {
  display: grid;
  margin-bottom: 11px;
  padding: 13px 14px;
  align-items: center;
  grid-template-columns: 1fr auto;
}

.trace-phase strong {
  display: block;
  color: var(--ink-strong);
  font-size: 14px;
}

.trace-phase span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.trace-phase .day-count {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: var(--blue-strong);
  border-radius: 18px;
  background: #e9f6ff;
  font-size: 13px;
  font-weight: 800;
}

.phase-tabs {
  display: grid;
  margin-bottom: 10px;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.phase-tabs button {
  min-height: 42px;
  color: var(--muted);
  border: 1px solid rgba(65, 144, 201, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.phase-tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #61bfed, #3f87db);
  box-shadow: 0 8px 18px rgba(52, 134, 207, 0.2);
}

.trace-form {
  padding: 15px;
}

.trace-form h2 {
  margin: 0 0 3px;
  color: var(--ink-strong);
  font-size: 16px;
}

.trace-form > p {
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 9px;
}

.form-group {
  margin-top: 12px;
}

.form-group > label,
.form-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-strong);
  font-size: 10px;
  font-weight: 750;
}

.input-wrap {
  position: relative;
}

.input-wrap input,
.input-wrap textarea,
.input-wrap select,
.modal-field input,
.modal-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ink);
  border: 1px solid rgba(56, 136, 194, 0.13);
  border-radius: 12px;
  outline: none;
  background: #f8fcfe;
  font-size: 11px;
}

.input-wrap textarea,
.modal-field textarea {
  min-height: 78px;
  resize: none;
}

.input-unit {
  position: absolute;
  top: 50%;
  right: 11px;
  color: var(--muted);
  font-size: 9px;
  transform: translateY(-50%);
}

.choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.choice-chip {
  min-height: 35px;
  padding: 0 10px;
  color: #567187;
  border: 1px solid rgba(62, 143, 202, 0.12);
  border-radius: 10px;
  background: #f8fcfe;
  font-size: 9px;
  cursor: pointer;
}

.choice-chip.selected {
  color: var(--blue-strong);
  border-color: rgba(58, 145, 214, 0.35);
  background: #e9f6ff;
  font-weight: 750;
}

.abnormal-box {
  margin-top: 13px;
  padding: 11px;
  border: 1px solid rgba(231, 160, 72, 0.16);
  border-radius: 13px;
  background: #fff9ef;
}

.abnormal-box strong {
  display: block;
  margin-bottom: 7px;
  color: #a86721;
  font-size: 9px;
}

.trace-submit {
  width: 100%;
  margin-top: 15px;
}

.trace-view {
  --trace-font-caption: 11px;
  --trace-font-meta: 12px;
  --trace-font-body: 14px;
  --trace-font-section-title: 20px;
  --trace-font-page-title: 26px;
  font-size: var(--trace-font-body);
  line-height: 1.55;
}

.trace-view .section-kicker {
  font-size: var(--trace-font-caption);
  line-height: 1.35;
}

.trace-view .page-intro h1 {
  font-size: var(--trace-font-page-title);
  line-height: 1.25;
}

.trace-view .page-intro p {
  font-size: var(--trace-font-meta);
  line-height: 1.55;
}

.trace-view .sync-badge {
  font-size: var(--trace-font-caption);
  line-height: 1.2;
}

.trace-view .trace-phase strong {
  font-size: 16px;
  line-height: 1.4;
}

.trace-view .trace-phase span {
  font-size: var(--trace-font-meta);
  line-height: 1.5;
}

.trace-view .trace-phase .day-count {
  font-size: 16px;
}

.trace-view .phase-tabs button {
  min-height: 48px;
  font-size: var(--trace-font-meta);
  line-height: 1.3;
}

.trace-view .phase-tabs button small {
  font-size: 10px;
  line-height: 1.25;
}

.trace-view .trace-form {
  padding: 17px;
}

.trace-view .trace-form h2 {
  font-size: var(--trace-font-section-title);
  line-height: 1.35;
}

.trace-view .trace-form > p {
  font-size: var(--trace-font-meta);
  line-height: 1.6;
}

.trace-view .form-group {
  margin-top: 15px;
}

.trace-view .form-group > label,
.trace-view .form-label {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.trace-view .input-wrap input,
.trace-view .input-wrap textarea,
.trace-view .input-wrap select {
  min-height: 49px;
  padding: 12px 14px;
  font-size: var(--trace-font-body);
  line-height: 1.4;
}

.trace-view .input-unit {
  right: 13px;
  font-size: var(--trace-font-caption);
}

.trace-view .choice-grid {
  gap: 7px;
}

.trace-view .choice-chip {
  min-height: 40px;
  padding: 0 12px;
  font-size: var(--trace-font-meta);
  line-height: 1.3;
}

.trace-view .abnormal-box {
  padding: 13px;
}

.trace-view .abnormal-box strong {
  margin-bottom: 9px;
  font-size: var(--trace-font-meta);
  line-height: 1.5;
}

.trace-view .trace-submit {
  min-height: 50px;
  font-size: var(--trace-font-body);
}

.camera-view {
  height: 100%;
  min-height: 590px;
  margin-top: -5px;
  padding: 0;
  overflow: hidden;
  background: #132b3b;
}

.camera-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 53% 35%, rgba(108, 174, 187, 0.32), transparent 24%),
    linear-gradient(145deg, #234759, #112a3a 45%, #25495a 100%);
}

.camera-viewport::before {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background: repeating-linear-gradient(90deg, transparent 0 25px, rgba(255, 255, 255, 0.03) 26px);
  content: "";
}

.camera-subject {
  position: absolute;
  top: 27%;
  left: 50%;
  width: 210px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #d8b077 0 28%, #6fa458 29% 39%, #f2f1e5 40% 45%, transparent 46%);
  filter: blur(1px) drop-shadow(0 20px 22px rgba(0, 0, 0, 0.26));
  transform: translateX(-50%) rotate(-6deg);
}

.focus-frame {
  position: absolute;
  top: 19%;
  left: 7%;
  width: 86%;
  height: 43%;
  border: 0;
}

.focus-frame i {
  position: absolute;
  width: 34px;
  height: 34px;
}

.focus-frame i:nth-child(1) { top: 0; left: 0; border-top: 3px solid #fff; border-left: 3px solid #fff; border-radius: 8px 0 0; }
.focus-frame i:nth-child(2) { top: 0; right: 0; border-top: 3px solid #fff; border-right: 3px solid #fff; border-radius: 0 8px 0 0; }
.focus-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom: 3px solid #fff; border-left: 3px solid #fff; border-radius: 0 0 0 8px; }
.focus-frame i:nth-child(4) { right: 0; bottom: 0; border-right: 3px solid #fff; border-bottom: 3px solid #fff; border-radius: 0 0 8px; }

.camera-tip {
  position: absolute;
  z-index: 2;
  bottom: 205px;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
}

.camera-tip strong {
  display: block;
  font-size: 12px;
}

.camera-tip span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 9px;
}

.camera-controls {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 194px;
  padding: 11px 16px calc(16px + var(--safe-bottom));
  border-radius: 25px 25px 0 0;
  background: rgba(250, 253, 255, 0.97);
}

.camera-modes {
  display: flex;
  justify-content: space-around;
}

.camera-modes button {
  position: relative;
  padding: 7px 9px;
  color: var(--muted);
  border: 0;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.camera-modes button.active {
  color: var(--ink-strong);
}

.camera-modes button.active::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  content: "";
  transform: translateX(-50%);
}

.capture-row {
  display: grid;
  margin-top: 13px;
  align-items: center;
  grid-template-columns: 1fr 92px 1fr;
}

.capture-button {
  display: grid;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  padding: 0;
  place-items: center;
  border: 6px solid #d9edfb;
  border-radius: 50%;
  background: #4d99e8;
  box-shadow: 0 0 0 3px #fff, 0 8px 18px rgba(49, 132, 194, 0.23);
  cursor: pointer;
}

.capture-button::after {
  width: 25px;
  height: 25px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  content: "";
}

.file-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 9px;
  cursor: pointer;
}

.file-trigger input {
  display: none;
}

.preview-thumb {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(68, 143, 198, 0.17);
  border-radius: 12px;
  background: #eaf6fc;
}

.preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-hero {
  position: relative;
  padding: 17px;
  overflow: hidden;
  background: linear-gradient(125deg, #dff5ff, #e7faf7 72%, #f0f6ff);
}

.profile-main {
  display: grid;
  align-items: center;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
}

.profile-avatar {
  display: grid;
  width: 52px;
  height: 52px;
  color: #3778a9;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 18px;
  background: linear-gradient(145deg, #bee9ff, #cff4eb);
  font-weight: 800;
}

.profile-main h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 16px;
}

.profile-main p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.member-strip {
  display: grid;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(60, 143, 199, 0.11);
  grid-template-columns: 1fr 1fr 1fr;
}

.member-strip div {
  text-align: center;
  border-right: 1px solid rgba(60, 143, 199, 0.12);
}

.member-strip div:last-child {
  border-right: 0;
}

.member-strip strong {
  display: block;
  color: var(--ink-strong);
  font-size: 11px;
}

.member-strip span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.profile-group {
  margin-top: 11px;
  padding: 5px 13px;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
}

.profile-row {
  display: grid;
  min-height: 52px;
  align-items: center;
  grid-template-columns: 31px 1fr auto;
  gap: 9px;
  border-bottom: 1px solid rgba(59, 135, 189, 0.08);
  cursor: pointer;
}

.profile-row:last-child {
  border-bottom: 0;
}

.profile-row .tile-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.profile-row strong {
  color: var(--ink-strong);
  font-size: 11px;
}

.profile-row span {
  color: var(--muted);
  font-size: 9px;
}

.drawer {
  position: fixed;
  z-index: 101;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(84vw, 380px);
  padding: calc(19px + var(--safe-top)) 16px calc(18px + var(--safe-bottom));
  overflow-y: auto;
  background: linear-gradient(180deg, #edf8ff, #f8fbfd 65%);
  box-shadow: 24px 0 55px rgba(16, 58, 90, 0.2);
  transform: translateX(-105%);
  transition: transform 0.28s cubic-bezier(.2, .8, .2, 1);
}

.drawer.open {
  transform: translateX(0);
}

.backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: rgba(9, 35, 55, 0.36);
  backdrop-filter: blur(3px);
}

.drawer-profile {
  display: grid;
  padding: 13px 2px 20px;
  align-items: center;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
}

.drawer-profile .profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

.drawer-profile h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 20px;
  line-height: 1.3;
}

.drawer-profile p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.drawer-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.drawer-quick button {
  display: grid;
  min-height: 94px;
  padding: 16px;
  text-align: left;
  border: 1px solid rgba(60, 142, 200, 0.1);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.drawer-quick strong {
  color: var(--ink-strong);
  font-size: 16px;
  line-height: 1.35;
}

.drawer-quick span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.drawer-title {
  margin: 26px 2px 10px;
  color: var(--ink-strong);
  font-size: 18px;
  line-height: 1.4;
}

.history-row {
  display: grid;
  min-height: 66px;
  padding: 0 5px;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 12px;
  border-bottom: 1px solid rgba(58, 133, 188, 0.09);
  cursor: pointer;
}

.history-row strong {
  overflow: hidden;
  color: #3f5e76;
  font-size: 15px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-row span {
  color: var(--muted-2);
  font-size: 14px;
  line-height: 1.45;
}

.modal-root {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(9, 35, 55, 0.38);
  backdrop-filter: blur(4px);
}

.modal-root.open {
  display: flex;
}

.modal-sheet {
  width: min(100%, 470px);
  max-height: 88dvh;
  padding: 20px 18px calc(18px + var(--safe-bottom));
  overflow-y: auto;
  border-radius: 25px 25px 0 0;
  background: #fafdff;
  box-shadow: 0 -18px 48px rgba(18, 67, 102, 0.22);
  animation: sheet-in 0.25s ease-out;
}

@keyframes sheet-in {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.modal-head h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 19px;
}

.modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.glucose-record-sheet {
  max-height: min(430px, 72dvh);
  padding: 20px 20px calc(22px + var(--safe-bottom));
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #ffffff, #f7fbff 68%, #f1f8fd);
}

.glucose-record-sheet .modal-head {
  align-items: center;
}

.glucose-record-sheet .modal-head h2 {
  font-size: 18px;
}

.glucose-record-form {
  margin-top: 14px;
}

.glucose-period-tabs {
  display: flex;
  padding-bottom: 2px;
  overflow-x: auto;
  gap: 7px;
  scrollbar-width: none;
}

.glucose-period-tabs::-webkit-scrollbar {
  display: none;
}

.glucose-period-tabs button {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 12px;
  color: #557995;
  border: 1px solid rgba(76, 157, 216, 0.14);
  border-radius: 17px;
  background: #eef8ff;
  font-size: 11px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.glucose-period-tabs button.active {
  color: #1976c9;
  border-color: rgba(66, 158, 222, 0.36);
  background: linear-gradient(145deg, #e5f6ff, #d9efff);
  box-shadow: 0 5px 14px rgba(49, 139, 203, 0.11);
  font-weight: 800;
}

.glucose-period-tabs button:active {
  transform: scale(0.96);
}

.glucose-value-field {
  position: relative;
  display: block;
  margin-top: 13px;
}

.glucose-value-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 86px 0 16px;
  color: var(--ink-strong);
  border: 1px solid rgba(65, 151, 215, 0.25);
  border-radius: 16px;
  outline: none;
  background: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  appearance: textfield;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.glucose-value-field input::-webkit-inner-spin-button,
.glucose-value-field input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.glucose-value-field input:focus {
  border-color: rgba(55, 145, 213, 0.58);
  box-shadow: 0 0 0 4px rgba(82, 174, 232, 0.11);
}

.glucose-value-field > span {
  position: absolute;
  top: 50%;
  right: 16px;
  color: #7495ad;
  font-size: 11px;
  transform: translateY(-50%);
}

.glucose-save-btn {
  width: 100%;
  min-height: 47px;
  margin-top: 14px;
  color: #fff;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(115deg, #78c8f4, #4f9fe8);
  box-shadow: 0 10px 24px rgba(54, 143, 209, 0.2);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.glucose-record-note {
  margin: 10px 0 0;
  color: var(--muted-2);
  font-size: 9px;
  line-height: 1.55;
  text-align: center;
}

.modal-close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  color: var(--muted);
  border: 0;
  border-radius: 12px;
  background: #edf5f9;
  font-size: 19px;
  cursor: pointer;
}

.campaign-launch-sheet {
  position: relative;
  width: min(100%, 470px);
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: #e9f7ff;
  box-shadow: 0 -18px 52px rgba(12, 55, 87, 0.24);
}

.campaign-launch-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #e9f7ff;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.campaign-launch-sheet.loaded .campaign-launch-frame {
  opacity: 1;
}

.campaign-launch-close {
  position: absolute;
  z-index: 40;
  top: calc(14px + var(--safe-top));
  right: 14px;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #326f98;
  place-items: center;
  border: 1px solid rgba(102, 186, 229, 0.28);
  border-radius: 15px;
  background: rgba(246, 252, 255, 0.88);
  box-shadow: 0 10px 24px rgba(5, 44, 76, 0.18);
  backdrop-filter: blur(14px) saturate(145%);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.campaign-launch-close:active {
  background: #fff;
  transform: scale(0.94);
}

.campaign-launch-loading {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 13px;
  color: #4a7896;
  background: linear-gradient(180deg, #eef9ff, #e5f5ff);
  font-size: 13px;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.campaign-launch-loading span {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(61, 156, 214, 0.18);
  border-top-color: #3ba0dc;
  border-radius: 50%;
  animation: launch-loading-spin 0.75s linear infinite;
}

.campaign-launch-sheet.loaded .campaign-launch-loading {
  visibility: hidden;
  opacity: 0;
}

@keyframes launch-loading-spin {
  to { transform: rotate(360deg); }
}

/* Full-page health profile registration */
.registration-sheet {
  position: relative;
  width: min(100%, 470px);
  height: 100dvh;
  max-height: 100dvh;
  padding: 0 18px calc(26px + var(--safe-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  color: #163a55;
  border-radius: 0;
  background:
    radial-gradient(circle at 94% 3%, rgba(118, 214, 236, 0.24), transparent 28%),
    radial-gradient(circle at 4% 42%, rgba(112, 183, 239, 0.12), transparent 32%),
    linear-gradient(180deg, #f7fcff 0%, #eef9ff 48%, #f7fcff 100%);
  box-shadow: 0 -18px 48px rgba(18, 67, 102, 0.18);
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.registration-sheet::-webkit-scrollbar {
  display: none;
}

.registration-page-head,
.registration-policy-head {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  min-height: calc(70px + var(--safe-top));
  margin: 0 -18px;
  padding: calc(12px + var(--safe-top)) 18px 11px;
  align-items: center;
  grid-template-columns: 42px 1fr 42px;
  background: linear-gradient(180deg, rgba(247, 252, 255, 0.96) 68%, rgba(247, 252, 255, 0.84) 88%, rgba(247, 252, 255, 0));
  backdrop-filter: blur(18px) saturate(145%);
}

.registration-page-head button,
.registration-policy-head button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #2f739f;
  place-items: center;
  border: 1px solid rgba(70, 155, 211, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 22px rgba(50, 123, 171, 0.09);
  cursor: pointer;
}

.registration-page-head button .icon,
.registration-policy-head button .icon {
  width: 19px;
  height: 19px;
}

.registration-page-head > div,
.registration-policy-head > div {
  text-align: center;
}

.registration-page-head span,
.registration-policy-head span {
  display: block;
  color: #4b9ed5;
  font-family: Inter, system-ui, sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.registration-page-head h2,
.registration-policy-head h2 {
  margin: 2px 0 0;
  color: #123650;
  font-size: 18px;
  line-height: 1.25;
}

.registration-page-head > i,
.registration-policy-head > i {
  width: 42px;
}

.registration-hero {
  position: relative;
  min-height: 180px;
  margin: 5px 0 14px;
  padding: 25px 16px 21px;
  overflow: hidden;
  border: 1px solid rgba(72, 159, 215, 0.16);
  border-radius: 25px;
  background:
    radial-gradient(circle at 82% 52%, rgba(255, 255, 255, 0.92) 0 14%, transparent 15%),
    radial-gradient(circle at 78% 50%, rgba(78, 170, 229, 0.12) 0 35%, transparent 36%),
    linear-gradient(135deg, rgba(230, 247, 255, 0.96), rgba(230, 251, 249, 0.9));
  box-shadow: 0 14px 34px rgba(48, 123, 170, 0.09);
}

.registration-hero::after {
  position: absolute;
  right: -46px;
  bottom: -72px;
  width: 235px;
  height: 235px;
  border: 1px solid rgba(69, 164, 220, 0.14);
  border-radius: 50%;
  content: "";
}

.registration-hero-copy {
  position: relative;
  z-index: 3;
  width: 59%;
}

.registration-hero-copy > span {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
  gap: 6px;
  color: #258ac8;
  font-size: 11px;
  font-weight: 800;
}

.registration-hero-copy > span i {
  width: 7px;
  height: 7px;
  border: 2px solid rgba(61, 176, 206, 0.2);
  border-radius: 50%;
  background: #42c4b0;
  box-shadow: 0 0 0 5px rgba(66, 196, 176, 0.09);
}

.registration-hero-copy strong {
  display: block;
  color: #103e5d;
  font-size: 22px;
  line-height: 1.34;
  letter-spacing: -0.02em;
}

.registration-hero-copy p {
  margin: 10px 0 0;
  color: #63859b;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.registration-avatar {
  position: absolute;
  z-index: 2;
  right: 1px;
  bottom: 1px;
  display: grid;
  width: 158px;
  height: 158px;
  margin: 0;
  place-items: center;
}

.registration-avatar img {
  position: relative;
  z-index: 2;
  width: 126px;
  height: 126px;
  object-fit: contain;
  filter: drop-shadow(0 15px 15px rgba(38, 112, 158, 0.15));
  animation: registration-float 3.6s ease-in-out infinite;
}

.registration-orbit {
  position: absolute;
  border: 1px solid rgba(69, 161, 218, 0.24);
  border-radius: 50%;
}

.registration-orbit::after {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: #4bb0e8;
  box-shadow: 0 4px 10px rgba(46, 146, 203, 0.25);
  content: "";
}

.registration-orbit.orbit-one {
  width: 148px;
  height: 100px;
  transform: rotate(-18deg);
}

.registration-orbit.orbit-one::after {
  top: 6px;
  right: 18px;
}

.registration-orbit.orbit-two {
  width: 115px;
  height: 145px;
  opacity: 0.55;
  transform: rotate(28deg);
}

.registration-orbit.orbit-two::after {
  right: 1px;
  bottom: 37px;
  width: 4px;
  height: 4px;
}

@keyframes registration-float {
  0%, 100% { transform: translateY(1px) rotate(-0.5deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

.registration-form {
  display: grid;
  gap: 12px;
}

.registration-card {
  padding: 16px;
  border: 1px solid rgba(68, 149, 204, 0.13);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.87);
  box-shadow: 0 11px 29px rgba(41, 105, 148, 0.065);
}

.registration-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.registration-section-title > b {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: #2189ca;
  place-items: center;
  border: 1px solid rgba(71, 157, 215, 0.15);
  border-radius: 10px;
  background: #e9f7ff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
}

.registration-section-title > div {
  display: grid;
  gap: 2px;
}

.registration-section-title strong {
  color: #173d57;
  font-size: 16px;
}

.registration-section-title small {
  color: #7c99ab;
  font-size: 11px;
}

.registration-field {
  display: grid;
  margin-top: 13px;
  gap: 7px;
}

.registration-field > span,
.registration-gender legend {
  color: #345c77;
  font-size: 14px;
  font-weight: 700;
}

.registration-field em,
.registration-gender em {
  margin-left: 5px;
  color: #53a6d8;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.registration-field > div {
  position: relative;
  display: flex;
  height: 52px;
  padding: 0 13px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(68, 151, 207, 0.17);
  border-radius: 15px;
  background: #f2f9fd;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.registration-field > div:focus-within {
  border-color: rgba(52, 151, 215, 0.56);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(68, 165, 222, 0.1);
}

.registration-field > div > .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #58a8da;
}

.registration-field input {
  min-width: 0;
  height: 100%;
  flex: 1;
  padding: 0;
  color: #163a55;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
}

.registration-field input::placeholder {
  color: #9ab0bf;
}

.registration-two-column {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
}

.registration-gender {
  min-width: 0;
  margin: 13px 0 0;
  padding: 0;
  border: 0;
}

.registration-gender > div {
  display: grid;
  height: 52px;
  margin-top: 7px;
  padding: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid rgba(68, 151, 207, 0.17);
  border-radius: 15px;
  background: #f2f9fd;
}

.registration-gender button {
  padding: 0;
  color: #69869a;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.registration-gender button.selected {
  color: #167fc2;
  background: linear-gradient(135deg, #e1f4ff, #dff7f6);
  box-shadow: 0 5px 13px rgba(53, 144, 199, 0.13);
}

.registration-gender button:active {
  transform: scale(0.96);
}

.registration-phone-prefix {
  color: #557c94;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.registration-field input.has-prefix {
  padding-left: 1px;
}

.registration-consent-card {
  padding: 13px 14px;
  border: 1px solid rgba(65, 151, 209, 0.14);
  border-radius: 19px;
  background: rgba(246, 251, 255, 0.88);
}

.registration-consent-row {
  display: grid;
  padding: 4px 0;
  align-items: start;
  grid-template-columns: 23px 1fr;
  gap: 8px;
}

.registration-consent-row + .registration-consent-row {
  margin-top: 8px;
  padding: 11px 10px;
  border-radius: 13px;
}

.registration-consent-row.sensitive {
  background: linear-gradient(135deg, rgba(224, 246, 255, 0.86), rgba(229, 250, 246, 0.86));
}

.registration-consent-row > label {
  position: relative;
  display: block;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  cursor: pointer;
}

.registration-consent-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.registration-checkmark {
  display: grid;
  width: 21px;
  height: 21px;
  color: transparent;
  place-items: center;
  border: 1.5px solid rgba(74, 153, 207, 0.38);
  border-radius: 7px;
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.registration-checkmark::after {
  width: 8px;
  height: 4px;
  margin-top: -2px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  transform: rotate(-45deg);
}

.registration-consent-row input:checked + .registration-checkmark {
  color: #fff;
  border-color: #49a9de;
  background: linear-gradient(135deg, #58bde9, #358fdd);
  box-shadow: 0 5px 13px rgba(51, 145, 206, 0.22);
}

.registration-consent-row.sensitive input:checked + .registration-checkmark {
  border-color: #43b9a6;
  background: linear-gradient(135deg, #60cfbb, #38a997);
}

.registration-consent-row input:focus-visible + .registration-checkmark {
  box-shadow: 0 0 0 4px rgba(71, 160, 216, 0.15);
}

.registration-consent-row p {
  margin: 0;
  color: #5d7d92;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.registration-consent-row p strong {
  color: #258c82;
}

.registration-consent-row p button {
  padding: 0;
  color: #187fc5;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.registration-submit {
  display: flex;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(110deg, #68c6ed, #378fdf);
  box-shadow: 0 14px 27px rgba(47, 139, 207, 0.22);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.registration-submit span {
  font-size: 22px;
  line-height: 1;
}

.registration-submit:active {
  transform: scale(0.98);
  box-shadow: 0 8px 18px rgba(47, 139, 207, 0.2);
}

.registration-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.registration-login-return {
  min-height: 39px;
  padding: 0;
  color: #66869c;
  border: 0;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
}

.registration-login-return strong {
  color: #197fc4;
}

.registration-security-note {
  display: flex;
  margin: -2px 0 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #8ba3b3;
  font-size: 10px !important;
}

.registration-security-note .icon {
  width: 14px;
  height: 14px;
  color: #58a9da;
}

.registration-policy-layer {
  position: absolute;
  z-index: 50;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: #18364d;
  background:
    radial-gradient(circle at 92% 2%, rgba(95, 196, 239, 0.18), transparent 24%),
    linear-gradient(180deg, #fbfdff, #f4faff 48%, #f8fcff);
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  scrollbar-width: thin;
}

.registration-policy-layer.open {
  opacity: 1;
  transform: translateX(0);
}

.registration-policy-head {
  margin: 0;
}

.registration-policy-content {
  padding: 5px 18px calc(25px + var(--safe-bottom));
}

.registration-policy-content .agreement-hero {
  margin-top: 0;
}

.registration-policy-content .agreement-acknowledge {
  position: sticky;
  z-index: 5;
  bottom: 0;
  padding-top: 18px;
  background: linear-gradient(180deg, rgba(248, 252, 255, 0), rgba(248, 252, 255, 0.96) 42%);
}

@media (max-width: 370px) {
  .registration-hero-copy strong {
    font-size: 20px;
  }

  .registration-avatar {
    right: -13px;
    width: 145px;
    height: 145px;
  }

  .registration-avatar img {
    width: 116px;
    height: 116px;
  }
}

.agreement-sheet {
  max-height: 94dvh;
  padding: 20px 18px calc(20px + var(--safe-bottom));
  overflow-x: hidden;
  color: #18364d;
  background:
    radial-gradient(circle at 92% 2%, rgba(95, 196, 239, 0.18), transparent 24%),
    linear-gradient(180deg, #fbfdff, #f4faff 48%, #f8fcff);
  scroll-behavior: smooth;
  scrollbar-color: rgba(74, 155, 211, 0.35) transparent;
  scrollbar-width: thin;
}

.agreement-sheet::-webkit-scrollbar {
  width: 5px;
}

.agreement-sheet::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(74, 155, 211, 0.35);
}

.agreement-sheet .modal-head {
  position: sticky;
  z-index: 20;
  top: -20px;
  margin: -20px -1px 0;
  padding: 20px 1px 13px;
  align-items: center;
  background: linear-gradient(180deg, rgba(250, 253, 255, 0.98) 68%, rgba(250, 253, 255, 0.88) 88%, rgba(250, 253, 255, 0));
  backdrop-filter: blur(16px);
}

.agreement-sheet .modal-head h2 {
  font-size: 20px;
  letter-spacing: 0.01em;
}

.agreement-sheet .modal-head p {
  margin-top: 3px;
  color: #6f8da2;
  font-size: 12px;
  line-height: 1.45;
}

.agreement-sheet .modal-close {
  color: #4e7894;
  border: 1px solid rgba(74, 155, 211, 0.13);
  background: rgba(237, 247, 253, 0.92);
}

.agreement-hero {
  display: grid;
  min-height: 95px;
  margin: 5px 0 16px;
  padding: 17px 16px;
  align-items: end;
  grid-template-columns: 1fr auto;
  gap: 14px;
  border: 1px solid rgba(74, 155, 211, 0.16);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 18%, rgba(119, 216, 224, 0.23), transparent 35%),
    linear-gradient(135deg, rgba(224, 244, 255, 0.92), rgba(235, 252, 249, 0.86));
  box-shadow: 0 14px 30px rgba(43, 112, 157, 0.08);
}

.agreement-hero > div {
  display: grid;
  gap: 8px;
}

.agreement-hero span {
  color: #398dca;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.agreement-hero strong {
  max-width: 270px;
  color: #123955;
  font-size: 17px;
  line-height: 1.45;
}

.agreement-hero small {
  padding-left: 12px;
  color: #7893a6;
  border-left: 1px solid rgba(67, 144, 197, 0.18);
  font-size: 10px;
  line-height: 1.55;
  white-space: nowrap;
}

.agreement-hero small b {
  color: #397fb6;
  font-size: 11px;
}

.agreement-document {
  display: grid;
  gap: 12px;
}

.agreement-notice {
  display: grid;
  padding: 14px;
  align-items: start;
  grid-template-columns: 35px 1fr;
  gap: 11px;
  border: 1px solid rgba(74, 155, 211, 0.18);
  border-radius: 17px;
  background: rgba(235, 248, 255, 0.94);
}

.agreement-notice > span {
  display: grid;
  width: 35px;
  height: 35px;
  color: #2d8fd1;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 7px 16px rgba(46, 129, 183, 0.09);
}

.agreement-notice > span .icon {
  width: 19px;
  height: 19px;
}

.agreement-notice strong {
  display: block;
  color: #14425f;
  font-size: 14px;
}

.agreement-notice p {
  margin: 4px 0 0;
  color: #55778f;
  font-size: 14px;
  line-height: 1.75;
}

.agreement-notice-medical {
  border-color: rgba(236, 165, 91, 0.25);
  background: linear-gradient(135deg, rgba(255, 248, 236, 0.95), rgba(245, 251, 255, 0.95));
}

.agreement-notice-medical > span {
  color: #bc7a34;
}

.agreement-notice-sensitive {
  background: linear-gradient(135deg, rgba(232, 248, 255, 0.96), rgba(235, 252, 248, 0.94));
}

.agreement-section {
  padding: 16px;
  border: 1px solid rgba(50, 129, 186, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 9px 24px rgba(41, 99, 138, 0.055);
}

.agreement-section h3 {
  display: flex;
  margin: 0 0 11px;
  align-items: center;
  gap: 9px;
  color: #123650;
  font-size: 16px;
  line-height: 1.35;
}

.agreement-section h3 > span {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: #338bc8;
  place-items: center;
  border: 1px solid rgba(65, 153, 212, 0.16);
  border-radius: 9px;
  background: #eaf7ff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
}

.agreement-section p,
.agreement-section li {
  color: #4c6c83;
  font-size: 14px;
  line-height: 1.8;
}

.agreement-section p {
  margin: 0;
}

.agreement-section p + p {
  margin-top: 9px;
}

.agreement-section ul {
  display: grid;
  margin: 0;
  padding-left: 20px;
  gap: 7px;
}

.agreement-section li::marker {
  color: #4aa4df;
}

.agreement-section p strong,
.agreement-section li strong {
  color: #224d69;
}

.agreement-feature-grid {
  display: grid;
  margin: 12px 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.agreement-feature-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(70, 157, 214, 0.12);
  border-radius: 14px;
  background: linear-gradient(145deg, #f2faff, #f6fcfc);
}

.agreement-feature-grid strong {
  color: #247ab4;
  font-size: 14px;
}

.agreement-feature-grid p {
  margin-top: 5px;
  color: #627f93;
  font-size: 14px;
  line-height: 1.65;
}

.agreement-meta-card {
  display: flex;
  margin-top: 12px;
  padding: 10px 12px;
  justify-content: space-between;
  gap: 10px;
  color: #65839a;
  border-radius: 12px;
  background: #eef8fe;
  font-size: 11px;
}

.agreement-data-list {
  display: grid;
  margin-top: 12px;
  gap: 8px;
}

.agreement-data-list article {
  position: relative;
  padding: 12px 12px 12px 15px;
  overflow: hidden;
  border: 1px solid rgba(63, 145, 201, 0.12);
  border-radius: 14px;
  background: #f5fbff;
}

.agreement-data-list article::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #68b8e9;
  content: "";
}

.agreement-data-list article.sensitive {
  background: linear-gradient(135deg, #eef9ff, #f0fcf9);
}

.agreement-data-list article.sensitive::before {
  background: #51c2ae;
}

.agreement-data-list article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.agreement-data-list strong {
  color: #215b7e;
  font-size: 14px;
}

.agreement-data-list em {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: #4486af;
  border-radius: 999px;
  background: rgba(223, 244, 255, 0.9);
  font-size: 10px;
  font-style: normal;
  line-height: 1.3;
}

.agreement-data-list article.sensitive em {
  color: #278d7b;
  background: rgba(220, 248, 240, 0.95);
}

.agreement-data-list p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
}

.agreement-contact {
  display: grid;
  padding: 13px 14px;
  gap: 4px;
  border: 1px solid rgba(70, 158, 216, 0.16);
  border-radius: 14px;
  background: linear-gradient(135deg, #eaf7ff, #effcf9);
}

.agreement-contact > strong {
  margin-bottom: 3px;
  color: #1e74ad;
  font-size: 14px;
}

.agreement-contact p,
.agreement-contact p + p {
  margin: 0;
  color: #56778e;
  font-size: 14px;
  line-height: 1.7;
}

.agreement-acknowledge {
  padding: 17px 1px 1px;
  text-align: center;
}

.agreement-acknowledge .primary-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
  font-size: 14px;
}

.agreement-acknowledge p {
  margin: 9px 0 0;
  color: #89a0b0;
  font-size: 10px;
  line-height: 1.6;
}

@media (max-width: 370px) {
  .agreement-feature-grid {
    grid-template-columns: 1fr;
  }

  .agreement-data-list article > div,
  .agreement-meta-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .agreement-hero {
    grid-template-columns: 1fr;
  }

  .agreement-hero small {
    padding: 0;
    border: 0;
  }
}

.quick-feature-sheet {
  max-height: 90dvh;
}

.quick-feature-plan-sheet .modal-head h2 {
  font-size: 22px;
  line-height: 1.3;
}

.quick-feature-plan-sheet .modal-head p {
  font-size: 11px;
  line-height: 1.5;
}

.quick-feature-content {
  margin-top: 17px;
}

.quick-feature-content > .view {
  min-height: 0;
  padding: 0 0 6px;
  animation: none;
}

.quick-feature-content > .view > .page-intro:first-child {
  display: none;
}

.quick-feature-content .record-tabs {
  margin-top: 2px;
}

.quick-feature-content .medical-disclaimer {
  margin-bottom: 4px;
}

.trace-report-sheet {
  max-height: 92dvh;
}

.trace-modal-summary {
  display: grid;
  margin-bottom: 11px;
  padding: 12px 13px;
  align-items: center;
  grid-template-columns: 1fr auto;
  border: 1px solid rgba(65, 145, 202, 0.1);
  border-radius: 16px;
  background: linear-gradient(145deg, #eef9ff, #f0fbf8);
}

.trace-modal-summary strong,
.trace-modal-summary span {
  display: block;
}

.trace-modal-summary strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.trace-modal-summary span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.trace-modal-summary .day-count {
  display: grid;
  width: 45px;
  height: 45px;
  color: #377fb9;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 800;
}

.trace-modal-tabs {
  margin-bottom: 11px;
}

.trace-modal-form {
  box-shadow: none;
}

.trace-modal-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

@media (max-width: 360px) {
  .trace-modal-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.agent-tool-grid {
  display: grid;
  margin-top: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.agent-tool-grid button {
  display: flex;
  min-width: 0;
  min-height: 98px;
  padding: 12px 7px 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink-strong);
  border: 1px solid rgba(62, 141, 199, 0.1);
  border-radius: 18px;
  background: linear-gradient(150deg, #fff, #f0f8fd);
  box-shadow: 0 8px 22px rgba(42, 105, 153, 0.06);
  cursor: pointer;
}

.agent-tool-grid button > span {
  display: grid;
  width: 36px;
  height: 36px;
  margin-bottom: 7px;
  color: #397fc1;
  place-items: center;
  border-radius: 13px;
  background: #e5f4ff;
}

.agent-tool-grid .icon {
  width: 19px;
  height: 19px;
}

.agent-tool-grid strong {
  font-size: 11px;
}

.agent-tool-grid small {
  display: block;
  max-width: 100%;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-tools-note {
  margin: 14px 0 0;
  color: var(--muted-2);
  text-align: center;
  font-size: 8px;
}

.modal-body {
  margin-top: 17px;
}

.modal-field {
  margin-top: 12px;
}

.modal-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-strong);
  font-size: 10px;
  font-weight: 750;
}

.modal-actions {
  display: grid;
  margin-top: 17px;
  grid-template-columns: 1fr 1.6fr;
  gap: 8px;
}

.phone-login-sheet .phone-prefix {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--ink-strong);
  font-size: 11px;
  transform: translateY(-50%);
}

.phone-login-sheet .phone-input {
  padding-left: 48px;
}

.goal-option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.goal-option {
  display: grid;
  min-height: 67px;
  padding: 10px 5px;
  place-items: center;
  gap: 5px;
  color: #587288;
  border: 1px solid rgba(61, 141, 199, 0.12);
  border-radius: 13px;
  background: #f7fbfd;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.goal-option.selected {
  color: var(--blue-strong);
  border-color: rgba(58, 144, 212, 0.34);
  background: #e9f6ff;
}

.goal-option .icon {
  width: 23px;
  height: 23px;
}

.period-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.period-option {
  min-height: 39px;
  color: var(--muted);
  border: 1px solid rgba(59, 137, 193, 0.12);
  border-radius: 11px;
  background: #f7fbfd;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.period-option.selected {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, #5ab4eb, #3d84d8);
}

.reference-data {
  display: grid;
  margin-top: 13px;
  padding: 11px;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 13px;
  background: #edf7fc;
}

.reference-data div {
  text-align: center;
}

.reference-data strong {
  display: block;
  color: var(--ink-strong);
  font-size: 12px;
}

.reference-data span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.guide-visual {
  display: grid;
  margin-top: 13px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.guide-sample {
  min-height: 105px;
  padding: 10px;
  border-radius: 14px;
  background: #eef8fd;
}

.guide-sample.bad {
  background: #fff3f2;
}

.guide-sample strong {
  display: block;
  color: #258272;
  font-size: 9px;
}

.guide-sample.bad strong {
  color: #c65b62;
}

.sample-art {
  position: relative;
  height: 64px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(145deg, #cce8f2, #e9f5f8);
}

.sample-art::after {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 58px;
  height: 37px;
  border: 5px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle, #e1a95b 0 30%, #69a967 31% 50%, #fff 51%);
  content: "";
  transform: translateX(-50%);
}

.guide-sample.bad .sample-art {
  filter: blur(3px);
  opacity: 0.7;
  transform: rotate(9deg);
}

.report-letter-sheet {
  max-height: 94dvh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 88% 4%, rgba(80, 184, 235, 0.16), transparent 24%),
    linear-gradient(180deg, #fbfdff, #f3faff);
  transition: max-height 0.6s cubic-bezier(0.22, 0.8, 0.22, 1);
  overflow-anchor: none;
}

.report-letter-sheet.report-is-open {
  max-height: 96dvh;
}

.report-letter-sheet .modal-head {
  position: sticky;
  z-index: 20;
  top: -20px;
  margin-top: -20px;
  padding: 20px 0 12px;
  background: linear-gradient(180deg, rgba(249, 253, 255, 0.98) 72%, rgba(249, 253, 255, 0));
  backdrop-filter: blur(16px);
}

.report-letter-sheet .modal-head h2 {
  font-size: 20px;
  line-height: 1.3;
}

.report-letter-sheet .modal-head p {
  font-size: 10px;
  line-height: 1.5;
}

.report-letter-body {
  margin-top: 8px;
}

.report-letter-intro {
  margin-bottom: 8px;
  text-align: center;
}

.report-letter-intro span {
  color: #2b8bd0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.report-letter-intro p {
  margin: 4px 0 0;
  color: #758b9e;
  font-size: 10px;
  line-height: 1.5;
}

.envelope {
  position: relative;
  height: 300px;
  margin: 7px 0 13px;
  overflow: hidden;
  perspective: 1200px;
  transition: height 0.78s cubic-bezier(0.2, 0.82, 0.2, 1);
}

.envelope::before {
  position: absolute;
  top: 32px;
  left: 50%;
  width: 82%;
  height: 230px;
  border-radius: 50%;
  background: rgba(72, 177, 227, 0.13);
  content: "";
  filter: blur(28px);
  transform: translateX(-50%);
  transition: width 0.7s ease, height 0.7s ease, opacity 0.5s ease;
}

.envelope.open {
  height: 575px;
}

.envelope.open::before {
  width: 100%;
  height: 500px;
  opacity: 0.48;
}

.envelope-back {
  position: absolute;
  z-index: 1;
  right: 4px;
  bottom: 4px;
  left: 4px;
  height: 187px;
  overflow: hidden;
  border: 1px solid rgba(59, 151, 208, 0.12);
  border-radius: 18px;
  background: linear-gradient(145deg, #caebf7, #e3f7f6);
  box-shadow: 0 20px 42px rgba(45, 126, 181, 0.2);
  transform-origin: center bottom;
  transition: opacity 0.45s ease 0.12s, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.envelope-back::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 132px;
  background: linear-gradient(160deg, #d9f0f8, #bfe7f3);
  clip-path: polygon(0 0, 50% 76%, 100% 0);
  content: "";
}

.envelope.open .envelope-back {
  opacity: 0;
  transform: translateY(120px) scale(0.94);
}

.envelope-letter {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 24px;
  left: 24px;
  height: 245px;
  padding: 18px 19px;
  overflow: hidden;
  border: 1px solid rgba(64, 142, 196, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(62, 144, 202, 0.07) 28px);
  box-shadow: 0 12px 28px rgba(38, 112, 165, 0.14);
  transform: translateY(42px) scale(0.98);
  transform-origin: center top;
  transition:
    top 0.75s cubic-bezier(0.2, 0.82, 0.2, 1),
    right 0.75s cubic-bezier(0.2, 0.82, 0.2, 1),
    left 0.75s cubic-bezier(0.2, 0.82, 0.2, 1),
    height 0.75s cubic-bezier(0.2, 0.82, 0.2, 1),
    border-radius 0.55s ease,
    box-shadow 0.55s ease,
    transform 0.75s cubic-bezier(0.2, 0.82, 0.2, 1);
}

.envelope-letter::after {
  position: absolute;
  z-index: 3;
  top: -30%;
  left: -45%;
  width: 25%;
  height: 150%;
  background: linear-gradient(90deg, transparent, rgba(112, 204, 240, 0.12), transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: rotate(16deg);
}

.envelope.open .envelope-letter {
  top: 0;
  right: 2px;
  left: 2px;
  height: 558px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(38, 112, 165, 0.16);
  transform: translateY(0) scale(1);
}

.envelope.open .envelope-letter::after {
  animation: report-letter-sheen 1.05s ease 0.15s both;
}

@keyframes report-letter-sheen {
  0% { left: -45%; opacity: 0; }
  24% { opacity: 1; }
  100% { left: 125%; opacity: 0; }
}

.letter-brand {
  display: flex;
  padding-bottom: 10px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(61, 137, 194, 0.1);
}

.letter-brand > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.letter-brand strong {
  color: #197cc3;
  font-size: 14px;
}

.letter-brand span {
  color: #68859a;
  font-size: 9px;
  font-weight: 650;
}

.letter-brand em {
  color: #8ba1b1;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.08em;
}

.report-letter-content {
  padding-top: 12px;
  opacity: 0.38;
  transform: translateY(8px);
  transition: opacity 0.48s ease 0.24s, transform 0.62s ease 0.2s;
}

.envelope.open .report-letter-content {
  opacity: 1;
  transform: translateY(0);
}

.letter-salutation small {
  color: #3f91c4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.letter-salutation h3 {
  margin: 3px 0 0;
  color: #12314b;
  font-size: 17px;
  line-height: 1.4;
}

.letter-lead {
  margin: 8px 0 11px;
  color: #536f84;
  font-size: 12px;
  line-height: 1.72;
}

.letter-data-summary {
  display: grid;
  padding: 10px 7px;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(54, 143, 205, 0.12);
  border-radius: 15px;
  background: linear-gradient(145deg, #edf8ff, #f0fbf8);
}

.letter-data-summary > div {
  min-width: 0;
  padding: 0 7px;
  text-align: center;
  border-right: 1px solid rgba(62, 139, 194, 0.1);
}

.letter-data-summary > div:last-child {
  border-right: 0;
}

.letter-data-summary span,
.letter-data-summary strong,
.letter-data-summary small {
  display: block;
}

.letter-data-summary span {
  color: #6e879a;
  font-size: 9px;
}

.letter-data-summary strong {
  margin-top: 3px;
  color: #177dc8;
  font-size: 20px;
  line-height: 1.2;
}

.letter-data-summary small {
  margin-top: 2px;
  color: #409383;
  font-size: 8px;
}

.letter-focus-title {
  display: flex;
  margin: 12px 0 7px;
  align-items: center;
  gap: 8px;
}

.letter-focus-title span {
  height: 1px;
  flex: 1;
  background: rgba(56, 139, 198, 0.13);
}

.letter-focus-title strong {
  color: #284d67;
  font-size: 11px;
  white-space: nowrap;
}

.letter-focus-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 7px;
  list-style: none;
}

.letter-focus-list li {
  display: flex;
  padding: 8px 9px;
  align-items: flex-start;
  gap: 9px;
  border-radius: 12px;
  background: rgba(242, 249, 253, 0.9);
}

.letter-focus-list li > b {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  color: #2788cf;
  border-radius: 9px;
  background: #e3f3fc;
  font-size: 8px;
}

.letter-focus-list strong {
  display: block;
  color: #24445d;
  font-size: 11px;
  line-height: 1.4;
}

.letter-focus-list p {
  margin: 2px 0 0;
  color: #72889a;
  font-size: 9px;
  line-height: 1.5;
}

.letter-closing {
  margin: 10px 0 0;
  padding: 9px 10px;
  color: #34756c;
  border-left: 3px solid #53b9aa;
  border-radius: 0 10px 10px 0;
  background: #ebf9f5;
  font-size: 10px;
  line-height: 1.55;
}

.letter-signature {
  display: flex;
  margin-top: 10px;
  padding-top: 9px;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px dashed rgba(59, 136, 192, 0.16);
}

.letter-signature > div:last-child {
  text-align: right;
}

.letter-signature span,
.letter-signature strong,
.letter-signature small {
  display: block;
}

.letter-signature span {
  color: #8297a7;
  font-size: 8px;
}

.letter-signature strong {
  margin-top: 2px;
  color: #355a72;
  font-size: 10px;
}

.letter-signature small {
  margin-top: 2px;
  color: #9aabb8;
  font-size: 8px;
}

.envelope-front {
  position: absolute;
  z-index: 4;
  right: 4px;
  bottom: 4px;
  left: 4px;
  height: 158px;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(150deg, #d8f0f7, #afe0ef);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  transform-origin: center bottom;
  transition: opacity 0.4s ease 0.1s, transform 0.68s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.envelope.open .envelope-front {
  opacity: 0;
  transform: translateY(170px) scale(0.94);
}

.envelope-seal {
  position: absolute;
  top: 76px;
  left: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  border: 4px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: linear-gradient(145deg, #4cb9df, #2e83ce);
  box-shadow: 0 7px 16px rgba(43, 125, 184, 0.24);
  font-size: 14px;
  font-weight: 800;
  transform: translateX(-50%);
  animation: envelope-seal-breathe 2.3s ease-in-out infinite;
}

@keyframes envelope-seal-breathe {
  0%, 100% { box-shadow: 0 7px 16px rgba(43, 125, 184, 0.24), 0 0 0 0 rgba(75, 181, 222, 0.22); }
  50% { box-shadow: 0 8px 20px rgba(43, 125, 184, 0.28), 0 0 0 8px rgba(75, 181, 222, 0); }
}

.envelope-front small {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  color: #5f91aa;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
}

.envelope-open-surface {
  position: absolute;
  z-index: 6;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.envelope.open .envelope-open-surface {
  pointer-events: none;
}

.report-letter-issued {
  display: flex;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #748b9d;
  text-align: center;
  font-size: 9px;
  line-height: 1.5;
}

.report-letter-issued > span,
.report-letter-issued .icon {
  width: 14px;
  height: 14px;
  color: #3697c9;
}

.report-letter-actions {
  margin-top: 13px;
}

.report-open-btn {
  position: relative;
  overflow: hidden;
}

.report-open-btn::after {
  position: absolute;
  top: -40%;
  left: -35%;
  width: 24%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  content: "";
  transform: rotate(18deg);
  animation: report-button-shine 2.8s ease-in-out infinite;
}

@keyframes report-button-shine {
  0%, 52% { left: -35%; }
  82%, 100% { left: 125%; }
}

.report-is-open .report-open-btn {
  color: #287ebd;
  border: 1px solid rgba(53, 137, 206, 0.22);
  background: #edf8ff;
  box-shadow: none;
}

@media (max-height: 760px) {
  .envelope.open {
    height: 555px;
  }

  .envelope.open .envelope-letter {
    height: 540px;
  }

  .letter-focus-list {
    gap: 5px;
  }

  .letter-focus-list li {
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

/* Health analytics dashboard */
.insights-view {
  padding-top: 4px;
  padding-bottom: calc(36px + var(--safe-bottom));
}

.insight-page-intro {
  margin-bottom: 12px;
  padding: 0 2px;
  align-items: center;
}

.insight-page-intro h1 {
  font-size: 24px;
  line-height: 1.25;
}

.insight-page-intro p {
  font-size: 11px;
  line-height: 1.5;
}

.insight-page-intro .icon-btn {
  width: 42px;
  height: 42px;
  color: #2f87d5;
  border-color: rgba(58, 143, 208, 0.18);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
}

.insight-tabs {
  position: sticky;
  z-index: 8;
  top: 0;
  display: grid;
  margin: 0 0 14px;
  padding: 4px;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid rgba(70, 146, 201, 0.14);
  border-radius: 15px;
  background: rgba(238, 248, 254, 0.86);
  box-shadow: 0 8px 22px rgba(37, 105, 153, 0.08);
  backdrop-filter: blur(18px);
}

.insight-tabs button,
.insight-compare-picker button {
  min-height: 38px;
  padding: 0 10px;
  color: #6f879b;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.insight-tabs button:active,
.insight-compare-picker button:active,
.insight-share-report:active,
.insight-share-channels button:active {
  transform: scale(0.98);
}

.insight-tabs button[aria-selected="true"] {
  color: #1974c8;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 15px rgba(46, 122, 178, 0.11);
}

.insight-panel {
  display: grid;
  gap: 12px;
}

.insight-compare-hero,
.insight-score-hero {
  position: relative;
  display: flex;
  min-height: 130px;
  padding: 20px;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.28), transparent 27%),
    linear-gradient(135deg, #5bb8ee 0%, #3b92df 48%, #347cd5 100%);
  box-shadow: 0 16px 34px rgba(44, 132, 205, 0.2);
}

.insight-compare-hero::after,
.insight-score-hero::after {
  position: absolute;
  right: -38px;
  bottom: -62px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.055), 0 0 0 56px rgba(255, 255, 255, 0.035);
  content: "";
}

.insight-compare-hero > div:first-child,
.insight-score-hero > div {
  position: relative;
  z-index: 1;
}

.insight-compare-hero span,
.insight-score-hero span {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 650;
}

.insight-compare-hero > div:first-child > strong {
  display: block;
  margin-top: 5px;
  font-size: 20px;
  line-height: 1.35;
}

.insight-compare-hero p {
  max-width: 255px;
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  line-height: 1.55;
}

.insight-compare-days {
  position: relative;
  z-index: 1;
  display: grid;
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  margin-left: 10px;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}

.insight-compare-days strong {
  font-size: 27px;
  line-height: 1;
}

.insight-compare-days span {
  margin-top: 4px;
  font-size: 9px;
}

.insight-compare-period {
  display: grid;
  padding: 14px 16px;
  align-items: center;
  grid-template-columns: 1fr 30px 1fr;
  border: 1px solid rgba(62, 139, 198, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}

.insight-compare-period > div:last-child {
  text-align: right;
}

.insight-compare-period span,
.insight-compare-period small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.insight-compare-period strong {
  display: block;
  margin: 3px 0;
  color: var(--ink-strong);
  font-size: 14px;
}

.insight-compare-period b {
  color: #5fa5d9;
  text-align: center;
  font-size: 19px;
}

.insight-section-head {
  display: flex;
  margin: 3px 2px -2px;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.insight-section-head h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 16px;
  line-height: 1.35;
}

.insight-section-head > span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.insight-compare-picker {
  display: grid;
  padding: 4px;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(57, 137, 197, 0.12);
  border-radius: 14px;
  background: rgba(228, 241, 249, 0.72);
}

.insight-compare-picker button {
  min-height: 36px;
  padding: 0 5px;
  font-size: 12px;
}

.insight-compare-picker button[aria-selected="true"] {
  color: #1978cc;
  background: #fff;
  box-shadow: 0 5px 13px rgba(40, 115, 170, 0.1);
}

.insight-spotlight {
  padding: 17px;
  border: 1px solid rgba(54, 144, 210, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 10%, rgba(93, 188, 240, 0.18), transparent 35%),
    rgba(250, 253, 255, 0.93);
  box-shadow: 0 12px 30px rgba(38, 112, 165, 0.09);
}

.insight-spotlight > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.insight-spotlight > header span {
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 800;
}

.insight-spotlight > header em {
  padding: 5px 8px;
  color: #168f7d;
  border-radius: 999px;
  background: #e7f8f3;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.insight-before-after {
  display: grid;
  margin: 16px 0 14px;
  align-items: center;
  grid-template-columns: 1fr 92px 1fr;
  text-align: center;
}

.insight-before-after > div:not(.insight-change-arrow) {
  padding: 11px 6px;
  border-radius: 14px;
  background: rgba(231, 242, 249, 0.75);
}

.insight-before-after > div:last-child {
  background: linear-gradient(145deg, #e8f6ff, #e7faf6);
}

.insight-before-after span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.insight-before-after > div > strong {
  display: block;
  margin-top: 4px;
  color: var(--ink-strong);
  font-size: 24px;
  line-height: 1.15;
}

.insight-before-after > div:last-child > strong {
  color: #258bd8;
}

.insight-change-arrow b,
.insight-change-arrow strong,
.insight-change-arrow span {
  display: block;
}

.insight-change-arrow b {
  color: #7eb5db;
  font-size: 19px;
}

.insight-change-arrow strong {
  margin: 2px 0;
  color: #1a9a84;
  font-size: 14px;
}

.insight-change-arrow span {
  font-size: 9px;
}

.insight-paired-bars {
  display: grid;
  gap: 8px;
}

.insight-paired-bars > div {
  display: grid;
  align-items: center;
  grid-template-columns: 35px 1fr;
  gap: 8px;
}

.insight-paired-bars span {
  color: var(--muted);
  font-size: 9px;
}

.insight-paired-bars i {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #e4eef4;
}

.insight-paired-bars b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #a9c8dd;
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.insight-paired-bars > div:last-child b {
  background: linear-gradient(90deg, #55bae9, #2b8ddd);
}

.insight-spotlight > p {
  margin: 13px 0 0;
  padding-top: 12px;
  color: #55738b;
  border-top: 1px solid rgba(64, 139, 194, 0.12);
  font-size: 11px;
  line-height: 1.65;
}

.insight-compare-table {
  overflow: hidden;
  border: 1px solid rgba(61, 137, 194, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.83);
  box-shadow: 0 9px 25px rgba(42, 111, 159, 0.07);
}

.insight-compare-table header,
.insight-compare-table > div {
  display: grid;
  padding: 0 12px;
  align-items: center;
  grid-template-columns: minmax(0, 1.55fr) minmax(44px, 0.72fr) minmax(44px, 0.72fr) minmax(52px, 0.86fr);
  column-gap: 6px;
}

.insight-compare-table header {
  min-height: 35px;
  color: #71899d;
  background: #edf7fc;
  font-size: 10px;
  font-weight: 700;
}

.insight-compare-table header span:not(:first-child) {
  text-align: right;
}

.insight-compare-table > div {
  min-height: 52px;
  border-top: 1px solid rgba(72, 139, 188, 0.09);
}

.insight-compare-table > div > span {
  min-width: 0;
  color: #26455e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.insight-compare-table > div > span small {
  display: block;
  margin-top: 2px;
  color: #8aa0b2;
  font-size: 8px;
  font-weight: 500;
}

.insight-compare-table > div strong,
.insight-compare-table > div em {
  text-align: right;
  font-size: 11px;
  white-space: nowrap;
}

.insight-compare-table > div strong {
  color: #4e687d;
}

.insight-compare-table > div strong:nth-of-type(2) {
  color: #177bcc;
}

.insight-compare-table > div em {
  color: #15917e;
  font-style: normal;
  font-weight: 800;
}

.insight-highlight,
.insight-positive-card {
  display: flex;
  padding: 14px 15px;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid rgba(47, 168, 147, 0.14);
  border-radius: 17px;
  background: linear-gradient(135deg, #ecfbf7, #f5fcff);
}

.insight-highlight > span,
.insight-positive-card > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: #1a9d86;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.insight-highlight .icon,
.insight-positive-card .icon {
  width: 18px;
  height: 18px;
}

.insight-highlight strong,
.insight-positive-card strong {
  display: block;
  color: #185f58;
  font-size: 13px;
}

.insight-highlight p,
.insight-positive-card p {
  margin: 4px 0 0;
  color: #557b75;
  font-size: 10px;
  line-height: 1.6;
}

.insight-doctor-summary {
  display: flex;
  padding: 17px;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid rgba(73, 140, 193, 0.14);
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(231, 247, 255, 0.88));
  box-shadow: var(--shadow-sm);
}

.insight-doctor-summary > span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  color: #318ed4;
  border-radius: 14px;
  background: #e5f5ff;
}

.insight-doctor-summary small,
.insight-doctor-summary strong {
  display: block;
}

.insight-doctor-summary small {
  color: #4187b8;
  font-size: 10px;
  font-weight: 700;
}

.insight-doctor-summary strong {
  margin-top: 4px;
  color: var(--ink-strong);
  font-size: 14px;
  line-height: 1.45;
}

.insight-doctor-summary p {
  margin: 6px 0 0;
  color: #55738a;
  font-size: 11px;
  line-height: 1.65;
}

.insight-share-report {
  display: flex;
  min-height: 52px;
  padding: 0 16px;
  align-items: center;
  gap: 10px;
  color: #fff;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(135deg, #54b8f1, #2e82db);
  box-shadow: 0 12px 25px rgba(43, 131, 208, 0.22);
  cursor: pointer;
  transition: transform 0.18s ease;
}

.insight-share-report .icon {
  width: 19px;
  height: 19px;
}

.insight-share-report span {
  flex: 1;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
}

.insight-share-report b {
  font-size: 22px;
  font-weight: 400;
}

.insight-medical-note {
  display: flex;
  margin: 1px 3px 0;
  align-items: flex-start;
  gap: 6px;
  color: #8a9eae;
  font-size: 9px;
  line-height: 1.55;
}

.insight-medical-note .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.insight-score-hero {
  min-height: 126px;
  padding: 18px 22px;
}

.insight-score-hero > div:first-child strong {
  display: inline-block;
  margin-top: 3px;
  font-size: 52px;
  line-height: 1;
}

.insight-score-hero > div:first-child em {
  margin-left: 3px;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.insight-score-hero > div:last-child {
  padding: 12px 16px;
  text-align: right;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
}

.insight-score-hero > div:last-child strong {
  display: block;
  margin: 2px 0 3px;
  font-size: 25px;
}

.insight-score-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 9px;
}

.insight-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.insight-metrics article {
  display: flex;
  min-width: 0;
  min-height: 123px;
  padding: 13px 9px;
  align-items: center;
  flex-direction: column;
  text-align: center;
  border: 1px solid rgba(61, 137, 194, 0.12);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.83);
  box-shadow: 0 8px 22px rgba(42, 111, 159, 0.07);
}

.insight-metrics .icon {
  width: 22px;
  height: 22px;
  color: #378ed0;
}

.insight-metrics span {
  margin-top: 7px;
  color: #607b90;
  font-size: 10px;
  font-weight: 700;
}

.insight-metrics strong {
  margin-top: 4px;
  color: #147ac7;
  font-size: 20px;
}

.insight-metrics small {
  margin-top: auto;
  color: #14917e;
  font-size: 8px;
}

.insight-week-chart {
  padding: 17px 14px 8px;
  overflow: hidden;
  border: 1px solid rgba(61, 137, 194, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-sm);
}

.insight-chart-head {
  display: flex;
  padding: 0 2px;
  align-items: flex-start;
  justify-content: space-between;
}

.insight-chart-head h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 15px;
}

.insight-chart-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.insight-chart-head > span {
  padding: 5px 8px;
  color: #168f7d;
  border-radius: 999px;
  background: #e8f8f4;
  font-size: 9px;
  font-weight: 750;
}

.insight-week-chart svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6px;
}

.insight-next-focus {
  display: flex;
  min-height: 105px;
  padding: 17px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(111, 117, 219, 0.14);
  border-radius: 20px;
  background: linear-gradient(140deg, #f4f5ff, #edf8ff);
}

.insight-next-focus span,
.insight-next-focus strong {
  display: block;
}

.insight-next-focus span {
  color: #65779c;
  font-size: 10px;
  font-weight: 700;
}

.insight-next-focus strong {
  margin-top: 5px;
  color: #333e83;
  font-size: 15px;
}

.insight-next-focus p {
  margin: 5px 0 0;
  color: #708099;
  font-size: 10px;
  line-height: 1.55;
}

.insight-next-focus > .icon {
  width: 38px;
  height: 38px;
  color: #696fc1;
}

.insight-share-sheet {
  max-height: 94dvh;
  padding-bottom: calc(22px + var(--safe-bottom));
  background:
    radial-gradient(circle at 86% 1%, rgba(79, 181, 239, 0.15), transparent 24%),
    #f8fcff;
}

.insight-share-sheet .modal-head p {
  font-size: 10px;
  line-height: 1.5;
}

.insight-share-content {
  margin-top: 14px;
}

.insight-result-poster {
  position: relative;
  padding: 17px;
  overflow: hidden;
  color: #14324b;
  border: 1px solid rgba(72, 150, 206, 0.15);
  border-radius: 23px;
  background:
    radial-gradient(circle at 94% 2%, rgba(88, 188, 236, 0.21), transparent 26%),
    linear-gradient(155deg, #fafdff 0%, #eaf8ff 58%, #effbf7 100%);
  box-shadow: 0 17px 38px rgba(40, 111, 160, 0.13);
}

.insight-result-poster::after {
  position: absolute;
  right: -78px;
  bottom: -94px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(54, 147, 210, 0.08);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 34px rgba(72, 160, 217, 0.035), 0 0 0 68px rgba(72, 160, 217, 0.025);
}

.insight-result-poster > * {
  position: relative;
  z-index: 1;
}

.insight-result-poster > header,
.insight-result-poster > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.insight-result-poster > header > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.insight-result-poster > header strong {
  color: #137dc6;
  font-size: 15px;
}

.insight-result-poster > header span {
  color: #5d7c93;
  font-size: 9px;
}

.insight-result-poster > header em {
  padding: 5px 8px;
  color: #2485c8;
  border: 1px solid rgba(49, 141, 205, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.insight-poster-owner {
  display: flex;
  margin: 15px 0;
  align-items: center;
  gap: 11px;
}

.insight-poster-owner > span {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: linear-gradient(145deg, #64c5ec, #397ed8);
  box-shadow: 0 7px 15px rgba(50, 131, 194, 0.2);
  font-size: 19px;
  font-weight: 800;
}

.insight-poster-owner small {
  color: #52778f;
  font-size: 9px;
}

.insight-poster-owner h2 {
  margin: 2px 0 0;
  color: #12314b;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.insight-poster-owner p {
  margin: 3px 0 0;
  color: #7790a3;
  font-size: 8px;
}

.insight-poster-key,
.insight-poster-grid > section {
  border: 1px solid rgba(54, 143, 205, 0.13);
  background: rgba(255, 255, 255, 0.74);
}

.insight-poster-key {
  padding: 13px;
  border-radius: 17px;
}

.insight-poster-key > header,
.insight-poster-grid header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.insight-poster-key > header span,
.insight-poster-grid header span {
  color: #385a73;
  font-size: 10px;
  font-weight: 750;
}

.insight-poster-key > header em {
  padding: 4px 6px;
  color: #138f7b;
  border-radius: 999px;
  background: #e7f8f3;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.insight-poster-key > div {
  display: grid;
  margin-top: 9px;
  align-items: center;
  grid-template-columns: 1fr 90px 1fr;
  text-align: center;
}

.insight-poster-key section span,
.insight-poster-key section strong,
.insight-poster-key > div > b span,
.insight-poster-key > div > b strong {
  display: block;
}

.insight-poster-key section span,
.insight-poster-key > div > b span {
  color: #7a91a3;
  font-size: 8px;
  font-weight: 500;
}

.insight-poster-key section strong {
  margin-top: 2px;
  color: #1e79b9;
  font-size: 27px;
}

.insight-poster-key section strong small {
  font-size: 11px;
}

.insight-poster-key > div > b {
  color: #72a8cb;
  font-size: 13px;
}

.insight-poster-key > div > b strong {
  margin: 2px 0;
  color: #14917e;
  font-size: 12px;
}

.insight-poster-key > p {
  display: flex;
  margin: 8px 0 0;
  padding-top: 8px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #31816f;
  border-top: 1px dashed rgba(46, 143, 130, 0.18);
  font-size: 8px;
}

.insight-poster-key > p .icon {
  width: 12px;
  height: 12px;
}

.insight-poster-grid {
  display: grid;
  margin-top: 9px;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.insight-poster-grid > section {
  padding: 11px;
  border-radius: 15px;
}

.insight-poster-grid header em {
  color: #8aa0b0;
  font-size: 7px;
  font-style: normal;
}

.insight-poster-grid > section > div {
  display: grid;
  margin-top: 7px;
  align-items: center;
  grid-template-columns: 1fr 17px 1fr;
  text-align: center;
}

.insight-poster-grid > section > div span small,
.insight-poster-grid > section > div span strong {
  display: block;
}

.insight-poster-grid > section > div span small {
  color: #8ca0b0;
  font-size: 7px;
}

.insight-poster-grid > section > div span strong {
  color: #226fa8;
  font-size: 17px;
}

.insight-poster-grid > section > div b {
  color: #85abc5;
}

.insight-poster-grid > section > p {
  margin: 5px 0 0;
  color: #67869b;
  text-align: center;
  font-size: 8px;
}

.insight-poster-grid > section > p strong {
  color: #14917e;
}

.insight-poster-progress {
  margin-top: 12px;
}

.insight-poster-progress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #718ca0;
  font-size: 7px;
}

.insight-poster-progress > div strong {
  color: #39799f;
  font-size: 8px;
}

.insight-poster-progress > i {
  position: relative;
  display: block;
  height: 6px;
  margin: 7px 4px 0;
  border-radius: 99px;
  background: rgba(92, 152, 193, 0.15);
}

.insight-poster-progress > i b {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #58b8ea, #33a791);
}

.insight-poster-progress > i em {
  position: absolute;
  top: 50%;
  left: 42%;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #26998c;
  box-shadow: 0 3px 8px rgba(30, 128, 118, 0.25);
  font-size: 7px;
  font-style: normal;
  transform: translate(-50%, -50%);
}

.insight-poster-message {
  display: flex;
  margin-top: 16px;
  padding: 10px 12px;
  align-items: center;
  gap: 7px;
  color: #3a728d;
  border-radius: 13px;
  background: rgba(228, 246, 255, 0.78);
  font-size: 9px;
  font-weight: 700;
}

.insight-poster-message .icon {
  width: 15px;
  height: 15px;
  color: #45a6d2;
}

.insight-result-poster > footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(69, 139, 188, 0.1);
}

.insight-result-poster > footer div:last-child {
  text-align: right;
}

.insight-result-poster > footer span,
.insight-result-poster > footer strong {
  display: block;
}

.insight-result-poster > footer span {
  color: #8aa0b1;
  font-size: 7px;
}

.insight-result-poster > footer strong {
  margin-top: 2px;
  color: #43677f;
  font-size: 8px;
}

.insight-share-status,
.insight-share-privacy {
  display: flex;
  align-items: center;
  gap: 6px;
}

.insight-share-status {
  margin: 12px 0 5px;
  padding: 9px 11px;
  color: #187f71;
  border: 1px solid rgba(37, 159, 140, 0.13);
  border-radius: 12px;
  background: #eaf9f5;
  font-size: 10px;
  font-weight: 700;
}

.insight-share-status .icon,
.insight-share-privacy .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.insight-share-channels {
  display: grid;
  margin-top: 9px;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.insight-share-channels button {
  display: flex;
  min-width: 0;
  min-height: 78px;
  padding: 9px 4px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  color: #4f7088;
  border: 1px solid rgba(59, 137, 195, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.insight-share-channels button > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #328cd0;
  border-radius: 11px;
  background: #e7f5fd;
}

.insight-share-channels button .icon {
  width: 17px;
  height: 17px;
}

.insight-share-channels button strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-share-channels button[aria-pressed="true"] {
  color: #1978c8;
  border-color: rgba(45, 137, 207, 0.35);
  background: #eaf7ff;
}

.insight-share-privacy {
  margin: 11px 2px 0;
  color: #8297a8;
  font-size: 8px;
  line-height: 1.5;
}

.toast {
  position: fixed;
  z-index: 300;
  top: calc(20px + var(--safe-top));
  left: 50%;
  max-width: min(86vw, 380px);
  padding: 10px 14px;
  color: #fff;
  border-radius: 12px;
  background: rgba(17, 52, 76, 0.93);
  box-shadow: 0 12px 30px rgba(9, 37, 57, 0.23);
  font-size: 10px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (min-width: 720px) {
  .phone-frame {
    height: min(920px, calc(100dvh - 36px));
    border: 8px solid rgba(255, 255, 255, 0.85);
    border-radius: 36px;
    box-shadow: 0 28px 70px rgba(36, 92, 132, 0.2);
  }

  .app-header {
    border-radius: 28px 28px 0 0;
  }

  .chat-composer {
    bottom: max(calc((100dvh - min(920px, calc(100dvh - 36px))) / 2), 18px);
    border-radius: 0 0 27px 27px;
  }

  .home-quickbar {
    bottom: max(calc((100dvh - min(920px, calc(100dvh - 36px))) / 2 + 64px), 82px);
  }
}

@media (max-height: 720px) {
  .login-hero {
    min-height: 225px;
    height: 31vh;
  }

  .login-hero img {
    width: 225px;
    height: 225px;
  }

  .login-actions {
    margin-top: 17px;
  }

  .medical-disclaimer {
    margin-top: 12px;
  }
}

/* Knowledge-base style welcome screen */
.login-screen {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 40%, rgba(106, 196, 239, 0.14), transparent 31%),
    radial-gradient(circle at 90% 76%, rgba(85, 193, 219, 0.1), transparent 29%),
    linear-gradient(180deg, #fbfdff 0%, #f2faff 52%, #edf9ff 100%);
}

.welcome-login-card {
  display: flex;
  min-height: 100%;
  padding: calc(24px + var(--safe-top)) 32px calc(18px + var(--safe-bottom));
  flex-direction: column;
  overflow: hidden;
}

.welcome-login-card::before {
  top: 28%;
  left: 14%;
  width: 355px;
  height: 355px;
  border-color: rgba(76, 165, 219, 0.07);
  opacity: 0.9;
  transform: translateX(-50%);
  box-shadow: 0 0 0 42px rgba(104, 196, 239, 0.025), 0 0 0 84px rgba(104, 196, 239, 0.018);
}

.welcome-login-card::after {
  position: absolute;
  top: 12%;
  right: -150px;
  width: 320px;
  height: 520px;
  border-radius: 50%;
  background: rgba(111, 205, 237, 0.08);
  content: "";
  filter: blur(70px);
  pointer-events: none;
}

.welcome-stage {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 430px;
  padding: clamp(82px, 12vh, 126px) 0 34px;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

.welcome-avatar {
  position: relative;
  display: grid;
  width: clamp(132px, 31vw, 151px);
  height: clamp(132px, 31vw, 151px);
  margin: 0 0 0 2px;
  place-items: center;
  border: 8px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #fff 0%, #edf9ff 68%, #dff3fb 100%);
  box-shadow:
    0 16px 38px rgba(45, 126, 181, 0.13),
    0 0 0 1px rgba(91, 174, 225, 0.08),
    0 0 0 11px rgba(255, 255, 255, 0.4);
  animation: welcome-avatar-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both, welcome-avatar-float 4.6s ease-in-out 1s infinite;
}

.welcome-avatar img {
  position: relative;
  z-index: 2;
  width: 126%;
  height: 126%;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(45, 119, 170, 0.13));
  transform: translateY(2%);
}

.welcome-avatar-orbit {
  position: absolute;
  z-index: 1;
  inset: -15px;
  border: 1px solid rgba(71, 159, 216, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.welcome-avatar-orbit::after {
  position: absolute;
  top: 12%;
  right: 8%;
  width: 7px;
  height: 7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #56b7e6;
  box-shadow: 0 3px 10px rgba(53, 145, 203, 0.25);
  content: "";
}

.welcome-avatar-orbit.orbit-two {
  inset: -27px;
  border-color: rgba(74, 163, 218, 0.055);
  animation: welcome-orbit 12s linear infinite;
}

.welcome-avatar-orbit.orbit-two::after {
  top: auto;
  right: auto;
  bottom: 13%;
  left: 7%;
  width: 5px;
  height: 5px;
  opacity: 0.65;
}

@keyframes welcome-avatar-in {
  from { opacity: 0; transform: translateY(18px) scale(0.88); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes welcome-avatar-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes welcome-orbit {
  to { transform: rotate(360deg); }
}

.welcome-copy {
  margin-top: clamp(38px, 5.5vh, 54px);
  animation: welcome-copy-in 0.75s ease 0.25s both;
}

@keyframes welcome-copy-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.welcome-copy h1 {
  margin: 0;
  color: #123954;
  font-size: clamp(24px, 6.7vw, 32px);
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.welcome-copy h1 > span {
  color: #0c3551;
  font-family: Inter, "SF Pro Display", system-ui, sans-serif;
  font-weight: 700;
}

.welcome-prompt {
  position: relative;
  display: block;
  height: 42px;
  margin: 16px 0 0;
  overflow: hidden;
  color: #1d4b68;
  font-size: clamp(17px, 4.45vw, 22px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.welcome-flip-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  perspective: 760px;
  transform-style: preserve-3d;
}

.welcome-flip-item {
  position: absolute;
  inset: 0 auto auto 0;
  display: inline-flex;
  height: 100%;
  max-width: 100%;
  align-items: center;
  opacity: 0;
  transform: translateY(72%) rotateX(-84deg) scale(0.97);
  transform-origin: center bottom;
  backface-visibility: hidden;
  will-change: opacity, transform;
  animation: welcome-flip-card 15s cubic-bezier(0.22, 0.8, 0.22, 1) infinite;
  animation-delay: 0.62s;
}

.welcome-flip-item:nth-child(2) { animation-delay: 3.62s; }
.welcome-flip-item:nth-child(3) { animation-delay: 6.62s; }
.welcome-flip-item:nth-child(4) { animation-delay: 9.62s; }
.welcome-flip-item:nth-child(5) { animation-delay: 12.62s; }

@keyframes welcome-flip-card {
  0% {
    opacity: 0;
    transform: translateY(72%) rotateX(-84deg) scale(0.97);
  }
  3% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
  }
  17% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
  }
  22% {
    opacity: 0;
    transform: translateY(-68%) rotateX(82deg) scale(0.97);
  }
  100% {
    opacity: 0;
    transform: translateY(-68%) rotateX(82deg) scale(0.97);
  }
}

.welcome-caret {
  display: inline-block;
  width: 3px;
  height: 1.24em;
  margin-left: 4px;
  border-radius: 3px;
  background: #50b5e2;
  box-shadow: 0 0 12px rgba(80, 181, 226, 0.34);
  animation: welcome-caret-blink 0.86s steps(1, end) infinite;
}

@keyframes welcome-caret-blink {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

.welcome-actions {
  position: relative;
  z-index: 3;
  display: grid;
  margin-top: auto;
  gap: 13px;
  text-align: initial;
  transform: translateY(-20px);
  animation: welcome-actions-in 0.75s ease 0.62s both;
}

@keyframes welcome-actions-in {
  from { opacity: 0; transform: translateY(0); }
  to { opacity: 1; transform: translateY(-20px); }
}

.welcome-action {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 64px;
  padding: 0 24px;
  overflow: hidden;
  align-items: center;
  grid-template-columns: 34px 1fr 34px;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(115deg, #61bce9, #3c9ed9 55%, #378bd0);
  box-shadow: 0 15px 30px rgba(43, 139, 202, 0.21);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.welcome-action::before {
  position: absolute;
  top: -80%;
  left: -38%;
  width: 23%;
  height: 250%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  content: "";
  transform: rotate(18deg);
  animation: welcome-button-sheen 3.6s ease-in-out 1.6s infinite;
}

@keyframes welcome-button-sheen {
  0%, 54% { left: -38%; }
  84%, 100% { left: 125%; }
}

.welcome-action:active {
  transform: scale(0.985);
}

.welcome-action strong {
  grid-column: 2;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
}

.welcome-action > span {
  grid-column: 3;
  text-align: right;
  font-family: Inter, system-ui, sans-serif;
  font-size: 29px;
  font-weight: 350;
  line-height: 1;
}

.welcome-action-secondary {
  color: #247da9;
  border: 1px solid rgba(55, 147, 198, 0.19);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 13px 28px rgba(49, 124, 173, 0.11);
  backdrop-filter: blur(12px);
}

.welcome-action-secondary::before {
  display: none;
}

.welcome-actions .agreement-check {
  margin: 2px 8px 0;
  color: #70899b;
  font-size: 11px;
  line-height: 1.6;
}

.welcome-platform-note {
  margin: -3px 0 0;
  color: #8198a8;
  text-align: center;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.03em;
}

.login-medical-note {
  margin: 10px 0 0;
  color: #a1b1bd;
  font-size: 8px;
  line-height: 1.5;
}

@media (max-width: 370px) {
  .welcome-login-card {
    padding-right: 24px;
    padding-left: 24px;
  }

  .welcome-copy h1 {
    font-size: 23px;
  }

  .welcome-prompt {
    font-size: 17px;
  }
}

@media (max-height: 760px) {
  .welcome-login-card {
    padding-top: calc(16px + var(--safe-top));
    padding-bottom: calc(12px + var(--safe-bottom));
  }

  .welcome-stage {
    min-height: 342px;
    padding: 44px 0 18px;
  }

  .welcome-avatar {
    width: 116px;
    height: 116px;
  }

  .welcome-copy {
    margin-top: 28px;
  }

  .welcome-prompt {
    margin-top: 10px;
  }

  .welcome-action {
    min-height: 53px;
  }

  .welcome-actions {
    gap: 9px;
  }

  .welcome-actions .agreement-check {
    margin-top: 0;
  }

  .login-medical-note {
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-flip-item {
    animation: none !important;
    opacity: 0;
  }

  .welcome-flip-item:first-child {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Unified body copy
 * Keep page titles, metric figures, units, chart axes and compact status chips
 * on their existing hierarchy; normalize readable prose and form copy to 28rpx.
 */
:where(
  .welcome-login-card,
  .view-container,
  .drawer,
  .modal-root
) p,
.message-bubble,
.system-card-body,
.plan-summary,
.daily-task-summary,
.journey-intro,
:where(
  .welcome-login-card,
  .view-container,
  .drawer,
  .modal-root
) :where(input, textarea, select),
.form-group > label,
.form-label,
.modal-field label {
  font-size: var(--font-body-28rpx) !important;
  line-height: var(--line-body);
}

/* Keep the login flip prompt at its original display size. */
.welcome-login-card .welcome-prompt {
  font-size: clamp(17px, 4.45vw, 22px) !important;
  line-height: 1.45;
}

/*
 * System-card typography hierarchy
 * Primary task data must be easier to read than compliance/help copy.
 */
.system-card > .system-card-foot,
.warning-alert-foot {
  font-size: 10px !important;
  line-height: 1.55;
}

.checkup-card-items span {
  min-height: 42px;
  padding: 8px 10px;
  font-size: var(--font-body-28rpx);
  line-height: 1.35;
}

.checkup-card-items .icon {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}

.checkup-card-appointment {
  min-height: 62px;
  padding: 10px 11px;
}

.checkup-card-appointment small {
  font-size: 11px;
}

.checkup-card-appointment strong,
.checkup-card-appointment em {
  font-size: var(--font-body-28rpx);
  line-height: 1.35;
}

.checkup-card > .system-card-foot {
  color: #8fa1a7;
}

/* Match checkup, trace and follow-up cards to the calmer plan-card type scale. */
.system-card-title small,
.checkup-card-status,
.trace-push-status,
.followup-status {
  font-size: 10px;
}

.checkup-card-items span {
  min-height: 28px;
  padding: 3px 8px;
  color: #345f63;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 250, 248, 0.92));
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.checkup-card-appointment {
  min-height: 56px;
  padding: 8px 10px;
}

.checkup-card-appointment small {
  font-size: 10px;
}

.checkup-card-appointment strong {
  font-size: 13px;
  font-weight: 720;
}

.checkup-card-appointment em {
  font-size: 11px;
  font-weight: 720;
}

.trace-push-hero-copy h3,
.followup-hero h3 {
  font-size: 17px;
  font-weight: 760;
  line-height: 1.35;
}

.trace-push-step strong,
.trace-push-insight strong,
.followup-details strong,
.followup-method strong {
  font-size: 12px;
  font-weight: 680;
  line-height: 1.4;
}

.trace-push-step small,
.trace-push-insight small,
.followup-details small,
.followup-method small {
  font-size: 10px;
  line-height: 1.35;
}

.trace-push-meta,
.followup-meta {
  font-size: 10px;
  line-height: 1.4;
}

.followup-hero > time em,
.followup-method em,
.followup-actions > div button {
  font-size: 10px;
}

/* Compact personal drawer typography without changing the home push cards. */
.drawer-profile h2 {
  font-size: 18px;
}

.drawer-profile p {
  margin-top: 3px;
  font-size: 12px !important;
  line-height: 1.4;
}

.drawer-quick button {
  min-height: 84px;
  padding: 14px;
}

.drawer-quick strong {
  font-size: 14px;
}

.drawer-quick span {
  margin-top: 5px;
  font-size: 12px;
}

.drawer-title {
  margin-top: 23px;
  font-size: 16px;
}

.history-row {
  min-height: 58px;
}

.history-row strong {
  font-size: 13px;
}

.history-row span {
  font-size: 12px;
}