/* ============================================================
   DermaGuard AI — Material Design 3 system
   Clinical-trust light theme · teal seed #0D9488
   ============================================================ */

/* ===== Tokens ===== */
:root {
  /* M3 color roles (teal seed) */
  --md-primary: #0D9488;
  --md-primary-dark: #0F766E;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #CCFBF1;
  --md-on-primary-container: #134E4A;
  --md-surface: #FFFFFF;
  --md-surface-dim: #F4F7F8;
  --md-surface-container: #EEF3F4;
  --md-surface-container-low: #F8FAFB;
  --md-surface-variant: #E2ECEB;
  --md-on-surface: #16211F;
  --md-on-surface-variant: #5B6B68;
  --md-outline: #74847F;
  --md-outline-variant: #D5E0DD;
  --md-bg: #F6F9FA;

  /* Risk system */
  --risk-low: #059669;
  --risk-low-container: #D1FAE5;
  --risk-med: #D97706;
  --risk-med-container: #FEF3C7;
  --risk-high: #DC2626;
  --risk-high-container: #FEE2E2;

  /* Type */
  --font-body: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-display: 'Space Grotesk', 'Noto Sans TC', sans-serif;

  /* Shape */
  --shape-card: 20px;
  --shape-pill: 999px;

  /* Elevation (soft, layered — never harsh) */
  --elev-1: 0 1px 2px rgba(13,60,55,.05), 0 1px 6px rgba(13,60,55,.06);
  --elev-2: 0 2px 6px rgba(13,60,55,.06), 0 6px 20px rgba(13,60,55,.08);
  --elev-3: 0 4px 12px rgba(13,60,55,.10), 0 12px 32px rgba(13,60,55,.12);

  /* Motion */
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --dur-short: 200ms;
  --dur-med: 320ms;
  --dur-long: 480ms;
}

/* ===== Reset / base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
body {
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(13,148,136,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(13,148,136,.05), transparent 55%),
    var(--md-bg);
  color: var(--md-on-surface);
  min-height: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
a { color: var(--md-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }

/* ===== App shell ===== */
#app {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;
}
@media (min-width: 520px) {
  #app {
    box-shadow: var(--elev-2);
    border-left: 1px solid var(--md-outline-variant);
    border-right: 1px solid var(--md-outline-variant);
    background: var(--md-bg);
  }
}
main {
  flex: 1;
  padding: 16px 20px calc(96px + env(safe-area-inset-bottom));
  position: relative;
}

/* ===== Top app bar (M3 small, center-ish) ===== */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px 20px;
  background: color-mix(in srgb, var(--md-bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow var(--dur-short) var(--ease-standard), background var(--dur-short);
}
.top-bar.scrolled { background: color-mix(in srgb, var(--md-surface-container) 92%, transparent); box-shadow: var(--elev-1); }
.top-bar-brand { display: flex; align-items: center; gap: 10px; }
.brand-icon { width: 30px; height: 30px; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--md-on-surface);
}
.brand-name em { font-style: normal; color: var(--md-primary); }

/* ===== Screens & shared-axis transition ===== */
.screen { display: none; }
.screen.active { display: block; animation: screen-in var(--dur-med) var(--ease-emphasized) both; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.screen-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 8px 0 16px;
}
.screen-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.screen-head .screen-title { flex: 1; }
.screen-head .icon-btn { margin: 4px 0 12px; }

/* ===== Cards ===== */
.card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-card);
  padding: 20px;
  box-shadow: var(--elev-1);
  margin-bottom: 14px;
}
.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--md-on-surface);
  margin-bottom: 12px;
  letter-spacing: .01em;
}

/* Staggered entrance for result cards */
.stagger-item { opacity: 0; transform: translateY(14px); }
.screen.active .stagger-item {
  animation: card-up var(--dur-long) var(--ease-emphasized) forwards;
}
.screen.active .stagger-item:nth-child(1) { animation-delay: 0ms; }
.screen.active .stagger-item:nth-child(2) { animation-delay: 60ms; }
.screen.active .stagger-item:nth-child(3) { animation-delay: 120ms; }
.screen.active .stagger-item:nth-child(4) { animation-delay: 180ms; }
.screen.active .stagger-item:nth-child(5) { animation-delay: 240ms; }
.screen.active .stagger-item:nth-child(6) { animation-delay: 300ms; }
.screen.active .stagger-item:nth-child(7) { animation-delay: 360ms; }
@keyframes card-up { to { opacity: 1; transform: none; } }

/* ===== Buttons (M3) ===== */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--shape-pill);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  transition: box-shadow var(--dur-short) var(--ease-standard),
              transform 120ms var(--ease-standard),
              background var(--dur-short);
  user-select: none;
}
.btn:active { transform: scale(.97); }
.btn-lg { height: 54px; padding: 0 30px; font-size: 16px; font-weight: 700; }
.btn-filled {
  background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
  color: var(--md-on-primary);
  box-shadow: var(--elev-1);
}
.btn-filled:hover { box-shadow: var(--elev-2); }
.btn-tonal { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.btn-tonal:hover { background: color-mix(in srgb, var(--md-primary-container) 88%, var(--md-primary)); }
.btn-outlined { background: transparent; color: var(--md-primary-dark); border: 1.5px solid var(--md-outline-variant); }
.btn-outlined:hover { background: var(--md-primary-container); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.text-btn {
  color: var(--md-primary-dark);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--shape-pill);
  position: relative; overflow: hidden;
}
.text-btn:hover { background: var(--md-primary-container); }

/* Button loading state: label ↔ spinner swap, width preserved */
.btn.loading { pointer-events: none; }
.btn.loading > :not(.btn-spinner) { visibility: hidden; }
.btn .btn-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.btn.loading .btn-spinner { display: flex; }
.btn-spinner::after {
  content: '';
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Icon buttons */
.icon-btn {
  position: relative; overflow: hidden;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--md-on-surface-variant);
  transition: background var(--dur-short), transform 120ms;
}
.icon-btn:hover { background: var(--md-surface-container); }
.icon-btn:active { transform: scale(.92); }
.icon-btn-lg {
  position: relative; overflow: hidden;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--md-on-surface-variant);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--elev-1);
  transition: transform 120ms, box-shadow var(--dur-short);
}
.icon-btn-lg:active { transform: scale(.92); }

/* ===== Ripple (JS injects .ripple-ink) ===== */
.rip { position: relative; overflow: hidden; }
.ripple-ink {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: .14;
  transform: scale(0);
  animation: ripple 520ms var(--ease-standard) forwards;
}
@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* ===== Chips ===== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px;
  border-radius: var(--shape-pill);
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  font-size: 13px;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.chip-teal { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: transparent; }

/* ===== HOME ===== */
.hero { padding: 26px 4px 30px; }
.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--md-primary-dark);
  background: var(--md-primary-container);
  padding: 5px 14px;
  border-radius: var(--shape-pill);
  margin-bottom: 16px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 14px;
}
.hero-title .dot { color: var(--md-primary); }
.hero-sub {
  color: var(--md-on-surface-variant);
  font-size: 15.5px;
  margin-bottom: 24px;
  max-width: 34ch;
}

.step-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
.step-card { position: relative; padding: 18px 20px; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; margin-bottom: 0; }
.step-card .step-icon { grid-row: 1 / 3; font-size: 30px; line-height: 1; }
.step-card h3 { font-size: 15.5px; font-weight: 700; }
.step-card p { font-size: 13.5px; color: var(--md-on-surface-variant); grid-column: 2; }
.step-num {
  position: absolute;
  top: 14px; right: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--md-primary);
  background: var(--md-primary-container);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.stat-card .stat-row { display: flex; align-items: stretch; gap: 18px; margin: 4px 0 12px; }
.stat { flex: 1; text-align: center; }
.stat-divider { width: 1px; background: var(--md-outline-variant); }
.stat-value { font-family: var(--font-display); font-size: 34px; font-weight: 700; display: block; letter-spacing: -.02em; }
.stat-value.good { color: var(--risk-low); }
.stat-value.bad { color: var(--risk-high); }
.stat-label { font-size: 12.5px; color: var(--md-on-surface-variant); line-height: 1.45; display: block; margin-top: 4px; }
.stat-note { font-size: 12px; color: var(--md-on-surface-variant); text-align: center; }

.disclaimer-card {
  display: flex;
  gap: 12px;
  background: #FFFBEB;
  border-color: #FDE68A;
  align-items: flex-start;
}
.disclaimer-card .di-icon { color: var(--risk-med); flex-shrink: 0; margin-top: 3px; }
.disclaimer-card p { font-size: 13px; color: #78530B; line-height: 1.65; }

.home-footer { text-align: center; font-size: 12.5px; color: var(--md-on-surface-variant); padding: 10px 0 4px; }

/* ===== SCAN ===== */
.viewfinder {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3 / 3.4;
  background: #0B1514;
  box-shadow: var(--elev-2);
}
#camera-video, #scan-preview {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.vf-mask {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.vf-ring {
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 2000px rgba(4, 18, 16, .45);
  position: relative;
}
.vf-ring::after {
  content: '';
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.35);
  animation: ring-rotate 14s linear infinite;
}
@keyframes ring-rotate { to { transform: rotate(360deg); } }
.camera-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,.85);
  text-align: center;
  padding: 20px;
}
.camera-fallback p { font-weight: 700; font-size: 16px; }
.camera-fallback span { font-size: 13px; color: rgba(255,255,255,.6); }

.guide-chips { display: flex; gap: 8px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }

.scan-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin: 6px 0 10px;
}
.shutter {
  position: relative; overflow: hidden;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--md-surface);
  border: 3px solid var(--md-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--elev-2);
  transition: transform 120ms var(--ease-standard);
}
.shutter:active { transform: scale(.92); }
.shutter-inner {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
  transition: transform 120ms;
}
.shutter:active .shutter-inner { transform: scale(.9); }

.preview-controls { display: flex; gap: 12px; justify-content: center; margin: 16px 0 8px; }
.preview-controls .btn { flex: 1; max-width: 200px; }
.scan-hint { text-align: center; font-size: 12px; color: var(--md-on-surface-variant); margin-top: 8px; }

/* ===== ANALYZING ===== */
#screen-analyzing { text-align: center; padding-top: 8px; }

/* M3 indeterminate linear progress */
.progress-track {
  height: 4px;
  border-radius: 4px;
  background: var(--md-primary-container);
  overflow: hidden;
  margin: 4px 0 26px;
}
.progress-ind {
  height: 100%;
  width: 40%;
  border-radius: 4px;
  background: var(--md-primary);
  animation: prog-slide 1.3s var(--ease-standard) infinite;
}
@keyframes prog-slide {
  0%   { transform: translateX(-110%) scaleX(.6); }
  50%  { transform: translateX(80%) scaleX(1); }
  100% { transform: translateX(260%) scaleX(.6); }
}

.analyzing-photo-wrap {
  position: relative;
  width: 190px; height: 190px;
  margin: 0 auto 22px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--elev-3);
}
#analyzing-photo { width: 100%; height: 100%; object-fit: cover; }
.scan-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(13,148,136,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,148,136,.22) 1px, transparent 1px);
  background-size: 19px 19px;
  mix-blend-mode: screen;
  animation: grid-pulse 2.4s ease-in-out infinite;
}
@keyframes grid-pulse { 0%,100% { opacity: .35; } 50% { opacity: .9; } }
.scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(45,212,191,.38) 78%, rgba(255,255,255,.9));
  animation: scan-sweep 2.1s var(--ease-standard) infinite;
}
@keyframes scan-sweep {
  0%   { top: -36%; }
  100% { top: 104%; }
}
.analyzing-title { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.analyzing-sub { font-size: 13.5px; color: var(--md-on-surface-variant); margin: 4px 0 22px; }

/* Step choreography */
.step-list {
  max-width: 290px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.a-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-radius: 14px;
  color: var(--md-on-surface-variant);
  opacity: .45;
  transition: opacity var(--dur-med) var(--ease-standard), background var(--dur-med);
}
.a-step.running { opacity: 1; background: var(--md-surface); box-shadow: var(--elev-1); }
.a-step.done { opacity: 1; }
.a-step .a-label { font-size: 14.5px; font-weight: 500; }
.a-step.done .a-label { color: var(--md-on-surface); }

.a-spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--md-outline-variant);
  flex-shrink: 0;
  transition: opacity var(--dur-short);
}
.a-step.running .a-spinner {
  border-color: var(--md-primary-container);
  border-top-color: var(--md-primary);
  animation: spin 800ms linear infinite;
}
.a-check {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--risk-low);
  display: none;
}
.a-step.done .a-spinner { display: none; }
.a-step.done .a-check { display: block; }
.a-step.done .a-check path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: check-draw 420ms var(--ease-emphasized) forwards;
}
@keyframes check-draw { to { stroke-dashoffset: 0; } }

.analyze-error { margin-top: 22px; text-align: center; }
.analyze-error svg { color: var(--risk-high); margin-bottom: 8px; }
.analyze-error p { font-size: 14.5px; margin-bottom: 14px; color: var(--md-on-surface-variant); white-space: pre-line; }
.row-gap { display: flex; gap: 10px; justify-content: center; }

/* ===== RESULT ===== */
.risk-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  color: #fff;
  border-radius: var(--shape-card);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: 0 6px 24px rgba(220,38,38,.35);
}
/* glow pulse on a pseudo-layer (opacity only — compositor-friendly) */
.risk-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 6px 34px rgba(220,38,38,.55);
  opacity: 0;
  animation: banner-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes banner-pulse { 50% { opacity: 1; } }
.risk-banner-text { display: flex; flex-direction: column; gap: 2px; }
.risk-banner-text strong { font-size: 16.5px; }
.risk-banner-text span { font-size: 13.5px; opacity: .92; }
.btn-banner {
  background: #fff;
  color: #B91C1C;
  height: 46px;
  border-radius: var(--shape-pill);
  font-weight: 700;
  font-size: 15px;
  position: relative; overflow: hidden;
}

/* Gauge */
.gauge-card { text-align: center; }
.gauge-wrap { position: relative; width: 220px; margin: 6px auto 2px; }
.gauge { width: 100%; display: block; }
.gauge-bg, .gauge-val {
  fill: none;
  stroke-width: 17;
  stroke-linecap: round;
}
.gauge-bg { stroke: var(--md-surface-container); }
.gauge-val { stroke: var(--risk-low); transition: stroke .4s; }
.gauge-center {
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.gauge-score {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.gauge-max { font-size: 14px; color: var(--md-on-surface-variant); font-weight: 500; }
.risk-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 10px;
}
.risk-level { font-size: 19px; font-weight: 700; }
.risk-level.low { color: var(--risk-low); }
.risk-level.medium { color: var(--risk-med); }
.risk-level.high { color: var(--risk-high); }
.urgency-chip.low { background: var(--risk-low-container); color: #065F46; border-color: transparent; }
.urgency-chip.medium { background: var(--risk-med-container); color: #92400E; border-color: transparent; }
.urgency-chip.high { background: var(--risk-high-container); color: #991B1B; border-color: transparent; }
.lesion-desc { font-size: 14px; color: var(--md-on-surface-variant); max-width: 36ch; margin: 0 auto; }
.quality-warning {
  margin-top: 12px;
  font-size: 13px;
  background: var(--risk-med-container);
  color: #92400E;
  border-radius: 12px;
  padding: 9px 14px;
  display: inline-block;
}

/* ABCDE */
.abcde-grid { display: flex; flex-direction: column; gap: 10px; }
.abcde-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
}
.abcde-letter {
  grid-row: 1 / 3;
  width: 44px; height: 44px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  align-self: center;
}
.abcde-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.abcde-name { font-size: 14px; font-weight: 700; }
.abcde-score-txt { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--md-on-surface-variant); }
.abcde-bar {
  height: 6px;
  border-radius: 6px;
  background: var(--md-surface-variant);
  overflow: hidden;
  margin: 3px 0 4px;
}
.abcde-fill {
  height: 100%;
  border-radius: 6px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-emphasized);
}
.abcde-fill.low { background: var(--risk-low); }
.abcde-fill.med { background: var(--risk-med); }
.abcde-fill.high { background: var(--risk-high); }
.abcde-note { font-size: 12.5px; color: var(--md-on-surface-variant); line-height: 1.5; }

/* Conditions */
.condition-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--md-outline-variant);
}
.condition-item:last-of-type { border-bottom: none; }
.cond-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--md-surface-container);
  display: flex; align-items: center; justify-content: center;
  color: var(--md-on-surface-variant);
  margin-top: 2px;
}
.cond-body { flex: 1; }
.cond-name { font-size: 15px; font-weight: 700; }
.cond-en { font-size: 12px; color: var(--md-on-surface-variant); font-style: italic; margin-left: 6px; }
.cond-desc { font-size: 13px; color: var(--md-on-surface-variant); margin-top: 3px; line-height: 1.55; }
.likelihood { flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: var(--shape-pill); margin-top: 3px; }
.likelihood.high { background: var(--risk-high-container); color: #991B1B; }
.likelihood.med  { background: var(--risk-med-container); color: #92400E; }
.likelihood.low  { background: var(--md-surface-container); color: var(--md-on-surface-variant); }
.cond-note { font-size: 11.5px; color: var(--md-on-surface-variant); margin-top: 10px; }

/* Red flags */
.red-flags-card { background: #FEF5F5; border-color: #FECACA; }
.red-flags-card .card-title { color: var(--risk-high); }
#red-flags-list li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 13.5px;
  color: #7F1D1D;
}
#red-flags-list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 13px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--risk-high);
}

/* Recommendation */
.recommendation { font-size: 14.5px; margin-bottom: 12px; }
.care-tips li {
  position: relative;
  padding: 5px 0 5px 26px;
  font-size: 13.5px;
  color: var(--md-on-surface-variant);
}
.care-tips li::before {
  content: '✓';
  position: absolute;
  left: 2px;
  color: var(--md-primary);
  font-weight: 700;
}
.specialty-row { margin-top: 14px; font-size: 13.5px; color: var(--md-on-surface-variant); display: flex; align-items: center; gap: 8px; }

.result-actions { display: flex; gap: 10px; margin: 18px 0 10px; }
.result-actions .btn { flex: 1; padding: 0 10px; font-size: 13.5px; height: 48px; }
.result-disclaimer {
  text-align: center;
  font-size: 12px;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-container-low);
  border: 1px dashed var(--md-outline-variant);
  border-radius: 12px;
  padding: 11px 16px;
  margin-bottom: 6px;
}

/* ===== HISTORY ===== */
.history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 18px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--elev-1);
  cursor: pointer;
  transition: transform 140ms var(--ease-standard), box-shadow var(--dur-short);
  position: relative; overflow: hidden;
  width: 100%;
  text-align: left;
}
.history-item:hover { box-shadow: var(--elev-2); }
.history-item:active { transform: scale(.98); }
.h-thumb {
  width: 56px; height: 56px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--md-surface-container);
}
.h-body { flex: 1; min-width: 0; }
.h-date { font-size: 13.5px; font-weight: 700; }
.h-cond { font-size: 12.5px; color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.h-score.low { background: var(--risk-low-container); color: #065F46; }
.h-score.medium { background: var(--risk-med-container); color: #92400E; }
.h-score.high { background: var(--risk-high-container); color: #991B1B; }

/* Skeleton shimmer */
.skeleton-card {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 18px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.sk-thumb { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.sk-line { height: 12px; border-radius: 6px; }
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }
.sk-thumb, .sk-line {
  background: linear-gradient(90deg, var(--md-surface-container) 25%, var(--md-surface-variant) 50%, var(--md-surface-container) 75%);
  background-size: 220% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

.trend-card canvas { width: 100%; display: block; }

.empty-state { text-align: center; padding: 34px 20px; }
.empty-art { margin-bottom: 6px; display: flex; justify-content: center; }
.empty-state h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.empty-state p { font-size: 13.5px; color: var(--md-on-surface-variant); max-width: 30ch; margin: 0 auto 18px; }

/* ===== SETTINGS ===== */
.server-status { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; }
.status-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--md-outline-variant);
  flex-shrink: 0;
}
.status-dot.ok { background: var(--risk-low); box-shadow: 0 0 0 4px var(--risk-low-container); }
.status-dot.err { background: var(--risk-high); box-shadow: 0 0 0 4px var(--risk-high-container); }
.setting-note { font-size: 12.5px; color: var(--md-on-surface-variant); margin-top: 10px; }
.key-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.key-row input {
  flex: 1;
  height: 48px;
  border-radius: 14px;
  border: 1.5px solid var(--md-outline-variant);
  padding: 0 16px;
  font-size: 14px;
  font-family: inherit;
  background: var(--md-surface-container-low);
  color: var(--md-on-surface);
  transition: border-color var(--dur-short), box-shadow var(--dur-short);
}
.key-row input:focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px var(--md-primary-container);
}
.key-test-result { font-size: 13px; margin-top: 10px; min-height: 18px; }
.key-test-result.ok { color: var(--risk-low); }
.key-test-result.err { color: var(--risk-high); }
.about-text { font-size: 13.5px; color: var(--md-on-surface-variant); }
.about-text.version { margin-top: 8px; font-size: 12.5px; }

/* ===== Bottom navigation (M3 nav bar) ===== */
.nav-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 460px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--md-surface) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--md-outline-variant);
}
.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 20px 4px;
  border-radius: 18px;
  color: var(--md-on-surface-variant);
  overflow: hidden;
  transition: color var(--dur-short);
}
.nav-item .nav-pill {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%) scaleX(.4);
  width: 56px; height: 30px;
  border-radius: var(--shape-pill);
  background: var(--md-primary-container);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-standard), transform var(--dur-med) var(--ease-emphasized);
}
.nav-item.active { color: var(--md-on-primary-container); }
.nav-item.active .nav-pill { opacity: 1; transform: translateX(-50%) scaleX(1); }
.nav-item svg { position: relative; z-index: 1; }
.nav-label { font-size: 11.5px; font-weight: 500; position: relative; z-index: 1; }
.nav-fab {
  position: relative;
  overflow: hidden;
  width: 58px; height: 58px;
  border-radius: 19px;
  background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -26px;
  box-shadow: 0 6px 18px rgba(13,148,136,.42), var(--elev-2);
  transition: transform 140ms var(--ease-standard), box-shadow var(--dur-short);
}
.nav-fab:hover { box-shadow: 0 8px 24px rgba(13,148,136,.5), var(--elev-3); }
.nav-fab:active { transform: scale(.92); }

/* ===== Modals ===== */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 24, 22, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  animation: scrim-in var(--dur-short) var(--ease-standard);
  overflow-y: auto;
}
@keyframes scrim-in { from { opacity: 0; } }
.modal-card {
  background: var(--md-surface);
  border-radius: 28px;
  padding: 30px 26px;
  max-width: 400px;
  width: 100%;
  box-shadow: var(--elev-3);
  animation: modal-up var(--dur-med) var(--ease-emphasized);
}
@keyframes modal-up {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
}
.modal-icon { width: 52px; height: 52px; margin-bottom: 14px; }
.modal-card h2 { font-size: 21px; margin-bottom: 10px; letter-spacing: -.01em; }
.modal-card > p { font-size: 14px; color: var(--md-on-surface-variant); margin-bottom: 12px; }
.modal-list { margin-bottom: 18px; }
.modal-list li {
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 13.5px;
  color: var(--md-on-surface-variant);
}
.modal-list li::before {
  content: '';
  position: absolute;
  left: 6px; top: 14px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--md-primary);
}
.check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  margin-bottom: 18px;
  cursor: pointer;
  user-select: none;
}
.check-row input {
  width: 19px; height: 19px;
  accent-color: var(--md-primary);
  margin-top: 2px;
  flex-shrink: 0;
}
#btn-disclaimer-continue { width: 100%; }

/* Report modal */
.report-card {
  max-width: 430px;
  max-height: 72vh;
  overflow-y: auto;
  text-align: left;
}
.report-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.report-header img { width: 30px; height: 30px; }
.report-header h2 { font-size: 18px; }
.report-date { font-size: 12.5px; color: var(--md-on-surface-variant); margin-bottom: 14px; }
.report-photo { width: 110px; height: 110px; object-fit: cover; border-radius: 14px; margin-bottom: 14px; border: 1px solid var(--md-outline-variant); }
.report-score-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.report-score {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 700;
  line-height: 1;
}
.report-score.low { color: var(--risk-low); }
.report-score.medium { color: var(--risk-med); }
.report-score.high { color: var(--risk-high); }
.report-section { margin-bottom: 13px; }
.report-section h3 { font-size: 13.5px; font-weight: 700; margin-bottom: 5px; color: var(--md-on-surface); }
.report-section p, .report-section li { font-size: 13px; color: var(--md-on-surface-variant); line-height: 1.6; }
.report-section ul { padding-left: 4px; }
.report-abcde { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 4px; }
.report-abcde div {
  text-align: center;
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 10px;
  padding: 8px 2px;
  font-size: 11px;
  color: var(--md-on-surface-variant);
}
.report-abcde strong { display: block; font-family: var(--font-display); font-size: 16px; color: var(--md-on-surface); }
.report-disclaimer {
  font-size: 11px;
  color: var(--md-on-surface-variant);
  border-top: 1px dashed var(--md-outline-variant);
  padding-top: 10px;
  margin-top: 6px;
}
.report-actions { display: flex; gap: 10px; margin-top: 14px; }

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: calc(104px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: #26332F;
  color: #fff;
  font-size: 13.5px;
  padding: 12px 22px;
  border-radius: var(--shape-pill);
  box-shadow: var(--elev-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-standard), transform var(--dur-med) var(--ease-emphasized);
  z-index: 200;
  max-width: 86vw;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Home: module grid + chat entry ===== */
.hero-hint { font-size: 12.5px; color: var(--md-on-surface-variant); margin-top: 12px; }
.section-title { font-size: 15px; font-weight: 700; margin: 6px 2px 12px; letter-spacing: .01em; }
.module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.module-card {
  position: relative; overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 18px;
  padding: 16px;
  text-align: left;
  box-shadow: var(--elev-1);
  transition: transform 140ms var(--ease-standard), box-shadow var(--dur-short);
}
.module-card:hover { box-shadow: var(--elev-2); }
.module-card:active { transform: scale(.97); }
.module-icon { font-size: 26px; line-height: 1; }
.module-card strong { font-size: 14.5px; }
.module-desc { font-size: 12px; color: var(--md-on-surface-variant); line-height: 1.45; }

.chat-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.chat-entry-icon { font-size: 26px; }
.chat-entry-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.chat-entry-body strong { font-size: 14.5px; }
.chat-entry-body span { font-size: 12.5px; color: var(--md-on-surface-variant); }
.chat-entry > svg { color: var(--md-on-surface-variant); flex-shrink: 0; }

/* ===== Precheck (pre-questions) ===== */
.precheck-sub { font-size: 13.5px; color: var(--md-on-surface-variant); margin: -6px 0 16px; }
.pc-q { margin-bottom: 18px; }
.pc-q h4 { font-size: 14.5px; font-weight: 700; margin-bottom: 9px; }
.pc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-opt {
  position: relative; overflow: hidden;
  padding: 9px 15px;
  border-radius: var(--shape-pill);
  border: 1.5px solid var(--md-outline-variant);
  background: var(--md-surface);
  font-size: 13.5px;
  color: var(--md-on-surface);
  transition: background var(--dur-short), border-color var(--dur-short), color var(--dur-short), transform 120ms;
}
.pc-opt:active { transform: scale(.96); }
.pc-opt.selected {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
  color: var(--md-on-primary-container);
  font-weight: 700;
}
.precheck-actions { display: flex; gap: 10px; margin-top: 8px; }
.precheck-actions .btn { flex: 1; }

/* ===== Scan head ===== */
.scan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.scan-head .screen-title { margin-bottom: 10px; }

/* ===== Immediate first-aid card ===== */
.immediate-card { background: #FFF7ED; border-color: #FED7AA; }
.immediate-card .card-title { color: #C2410C; }
.immediate-list { counter-reset: ia; padding: 0; }
.immediate-list li {
  position: relative;
  counter-increment: ia;
  padding: 7px 0 7px 36px;
  font-size: 14px;
  line-height: 1.6;
  color: #7C2D12;
}
.immediate-list li::before {
  content: counter(ia);
  position: absolute;
  left: 0; top: 7px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #F97316;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* ===== Chat ===== */
#screen-chat { display: none; }
#screen-chat.active { display: flex; flex-direction: column; min-height: calc(100dvh - 210px); }
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 14px;
  border-bottom: 1px solid var(--md-outline-variant);
  margin-bottom: 12px;
}
.chat-avatar {
  font-size: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--md-primary-container);
  display: flex; align-items: center; justify-content: center;
}
.chat-header > div { flex: 1; }
.chat-title { font-size: 17px; font-weight: 700; }
.chat-status { font-size: 12px; color: var(--md-on-surface-variant); }
.chat-messages { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.chat-msg { display: flex; }
.chat-msg.user { justify-content: flex-end; }
.chat-msg .bubble {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.65;
  animation: bubble-in var(--dur-med) var(--ease-emphasized);
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
}
.chat-msg.model .bubble {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-bottom-left-radius: 6px;
  box-shadow: var(--elev-1);
}
.chat-msg.user .bubble {
  background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
  color: #fff;
  border-bottom-right-radius: 6px;
}
.chat-action {
  position: relative; overflow: hidden;
  display: block;
  margin-top: 10px;
  padding: 9px 16px;
  border-radius: var(--shape-pill);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-size: 13.5px;
  font-weight: 700;
}
.bubble.typing { display: flex; gap: 5px; align-items: center; padding: 15px 17px; }
.tdot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--md-on-surface-variant);
  animation: tdot-wave 1.2s ease-in-out infinite;
}
.tdot:nth-child(2) { animation-delay: .15s; }
.tdot:nth-child(3) { animation-delay: .3s; }
@keyframes tdot-wave {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px; }
.chat-suggestions .chip { cursor: pointer; height: 34px; }
.chat-input-row {
  position: sticky;
  bottom: calc(96px + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  padding-top: 6px;
  background: transparent;
}
.chat-input-row input {
  flex: 1;
  height: 50px;
  border-radius: var(--shape-pill);
  border: 1.5px solid var(--md-outline-variant);
  background: var(--md-surface);
  padding: 0 20px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--md-on-surface);
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-short), box-shadow var(--dur-short);
}
.chat-input-row input:focus {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px var(--md-primary-container);
}
.chat-send {
  position: relative; overflow: hidden;
  width: 50px; height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--elev-2);
  transition: transform 120ms;
}
.chat-send:active { transform: scale(.9); }

/* ===== Print (report) ===== */
@media print {
  body * { visibility: hidden; }
  #report-modal, #report-modal * { visibility: visible; }
  #report-modal {
    position: static !important;
    background: #fff !important;
    backdrop-filter: none !important;
    padding: 0;
    display: block;
  }
  .report-card {
    box-shadow: none !important;
    max-height: none !important;
    max-width: none !important;
    border-radius: 0;
    animation: none;
  }
  .report-actions { display: none !important; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .scan-line, .scan-grid, .progress-ind, .vf-ring::after, .risk-banner { animation: none !important; }
  .stagger-item { opacity: 1 !important; transform: none !important; }
}