/* Memory Garden — single stylesheet, all surfaces.
   Lightweight, no framework, designed to work on Fire 7 (1024×600, low RAM)
   through TV (1080p+) and iPhone/iPad. */

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
  background: #f6f3ee;
  color: #2b2b2b;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
.muted { color: #666; }
.err { color: #b3261e; margin-top: 0.5rem; min-height: 1.2em; }
button { font: inherit; cursor: pointer; }

/* ============= LANDING ============= */
.landing { padding: 2rem; }
.landing h1 { font-size: 2rem; }
.landing h1 small { color: #888; font-weight: 400; font-size: 1rem; margin-left: 0.5rem; }
.landing-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 1.5rem; }
.landing-card {
  display: flex; gap: 1rem; align-items: center;
  background: #fff; padding: 1.25rem; border-radius: 12px;
  text-decoration: none; color: inherit; border: 1px solid #e5e0d6;
  transition: transform 0.1s, box-shadow 0.1s;
}
.landing-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.landing-emoji { font-size: 2rem; }

/* ============= TABLET (senior) ============= */
.tablet { background: linear-gradient(180deg, #fff7ec 0%, #f6e7c8 100%); min-height: 100vh; }

/* Picker (first launch) */
.picker { padding: 1.5rem 1rem; max-width: 100%; }
.picker h1 { text-align: center; font-size: 1.5rem; margin: 0.5rem 0 1.25rem; }
.picker h1 small { display: block; color: #777; font-size: 0.9rem; font-weight: 400; }
.picker-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.picker-card {
  background: #fff; border: 2px solid #e8d9b8;
  border-radius: 16px; padding: 1rem 0.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font: inherit;
}
.picker-card:active { background: #fdf3df; }
.picker-card img { width: 80px; height: 80px; border-radius: 50%; }
.picker-name { font-size: 1.4rem; font-weight: 600; }
.picker-name-en { color: #777; font-size: 0.85rem; }

/* Tablet main app */
.tablet-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; background: rgba(255,255,255,0.6);
}
.me-photo { width: 56px; height: 56px; border-radius: 50%; }
.me-name { font-size: 1.4rem; font-weight: 600; }
.me-name-en { color: #888; font-size: 0.85rem; }

.waiting {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 4rem 1rem; text-align: center;
}
.waiting[hidden], .tap-btn[hidden], .voice-hint[hidden] { display: none; }

/* Voice-hint overlay — shown on the senior's tablet during voice instructions
   so they look up at the TV and listen instead of trying to tap. */
.voice-hint {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 4rem 1rem; text-align: center;
  background: rgba(255, 250, 235, 0.6);
  border-radius: 16px;
  margin: 1rem;
}
.voice-hint .voice-emoji { font-size: 4rem; animation: pulse 1.4s ease-in-out infinite; }
.voice-hint p { font-size: 1.6rem; font-weight: 600; color: #6b4a1c; margin: 0; }
.voice-hint p small { display: block; color: #8a7860; font-size: 0.9rem; font-weight: 400; margin-top: 0.25rem; }
.waiting p { font-size: 1.1rem; color: #555; }
.waiting p small { display: block; color: #999; }
.dot {
  width: 16px; height: 16px; border-radius: 50%; background: #d4a04c;
  animation: pulse 1.4s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.4; }
  50% { transform: scale(1.2); opacity: 1; }
}

.tap-btn {
  display: block; width: calc(100% - 2rem); margin: 1rem auto;
  min-height: 50vh;
  background: linear-gradient(180deg, #f0a868 0%, #d4824c 100%);
  color: #fff;
  border: none; border-radius: 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
  box-shadow: 0 6px 0 #a85e2c, 0 12px 24px rgba(168,94,44,0.3);
  transition: transform 0.1s, box-shadow 0.1s;
  -webkit-user-select: none; user-select: none;
}
.tap-btn:active, .tap-btn.tapped {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #a85e2c, 0 4px 8px rgba(168,94,44,0.3);
}
.tap-emoji { font-size: 4rem; }
.tap-cn { font-size: 3rem; font-weight: 700; }
.tap-en { font-size: 1.25rem; opacity: 0.85; font-weight: 500; }

.tablet-footer {
  position: sticky; bottom: 0;
  padding: 0.75rem 1rem 1.25rem;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(6px);
}
.garden { display: flex; flex-wrap: wrap; gap: 0.25rem; min-height: 32px; margin-bottom: 0.5rem; }
.petal { font-size: 1.5rem; line-height: 1; animation: drop 0.4s ease-out; }
.petal-overflow { font-weight: 600; align-self: center; padding-left: 0.5rem; color: #c4781c; }
@keyframes drop { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.counter { font-size: 1.1rem; font-weight: 600; color: #6b4a1c; text-align: center; }

/* ============= CAREGIVER ============= */
.caregiver { padding: 0; max-width: 1100px; margin: 0 auto; }

.login-box {
  margin: 4rem auto; max-width: 360px; padding: 2rem;
  background: #fff; border-radius: 12px; text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.login-box h1 { margin: 0 0 0.5rem; }
.login-box input {
  width: 100%; padding: 1rem; font-size: 1.5rem; text-align: center;
  letter-spacing: 0.5em; border: 1px solid #ccc; border-radius: 8px;
  margin: 1rem 0;
}
.login-box button {
  width: 100%; padding: 1rem; font-size: 1.1rem;
  background: #2c5f2d; color: #fff; border: none; border-radius: 8px;
}

.caregiver-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; background: #fff;
  border-bottom: 1px solid #eae5db;
}
.caregiver-header h1 { font-size: 1.15rem; margin: 0; }
.status { padding: 0.25rem 0.75rem; border-radius: 999px; font-weight: 600; font-size: 0.85rem; }
.status.idle { background: #eee; color: #555; }
.status.live { background: #e6f4e6; color: #2c5f2d; }

.now-playing { padding: 1rem 1.25rem; border-bottom: 1px solid #eae5db; background: #fafaf6; }
.now-playing-label { font-size: 0.75rem; text-transform: uppercase; color: #999; letter-spacing: 0.05em; }
.now-title { font-size: 1.4rem; font-weight: 600; margin: 0.25rem 0; }
.now-meta { color: #777; font-size: 0.9rem; }
.now-progress { color: #999; font-size: 0.8rem; margin-top: 0.25rem; }

.roster { padding: 1rem 1.25rem; }
.roster h2 { font-size: 1rem; color: #777; margin: 0 0 0.75rem; }
.roster-grid {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.client-card {
  background: #fff; border-radius: 12px; padding: 1rem 0.75rem; text-align: center;
  border: 2px solid transparent; transition: transform 0.15s, border-color 0.15s;
}
.client-card.connected { border-color: #2c5f2d; }
.client-card.pulse { transform: scale(1.05); }
.client-card img { width: 64px; height: 64px; border-radius: 50%; }
.client-name { font-size: 1.1rem; font-weight: 600; margin-top: 0.25rem; }
.client-name-en { color: #888; font-size: 0.8rem; }
.tap-count { font-size: 1.6rem; font-weight: 700; color: #c4781c; margin-top: 0.25rem; }
.client-status { font-size: 0.75rem; color: #888; }

.controls {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 1rem 1.25rem; border-top: 1px solid #eae5db; background: #fff;
  position: sticky; bottom: 0;
}
.controls input { flex: 1 1 200px; padding: 0.75rem; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; }
.controls button { padding: 0.75rem 1.25rem; border-radius: 8px; border: none; font-size: 1rem; font-weight: 600; }
.controls .primary  { background: #2c5f2d; color: #fff; }
.controls .secondary{ background: #f0e7d4; color: #6b4a1c; }
.controls .danger   { background: #b3261e; color: #fff; }

.summary {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100;
}
.summary[hidden] { display: none; }   /* override .summary's display:flex so [hidden] works */
.summary > * { background: #fff; padding: 2rem; border-radius: 12px; max-width: 480px; max-height: 80vh; overflow-y: auto; }
.summary h2 { margin-top: 0; }
.summary-row { padding: 0.4rem 0; border-bottom: 1px solid #eee; }
#summary-close { margin-top: 1rem; padding: 0.75rem 1.25rem; border-radius: 8px; background: #2c5f2d; color: #fff; border: none; font-weight: 600; }

/* iPad optimization (caregiver landscape) */
@media (min-width: 768px) {
  .caregiver-header h1 { font-size: 1.5rem; }
  .now-title { font-size: 1.8rem; }
}

/* ============= TV =============
   Warm traditional Chinese palette: rice paper cream background, Chinese red
   accents, warm brown/gold text. Designed for senior comfort — high contrast
   for tired eyes, evokes vintage photo album / 紅紙 feel. */
.tv { background: #faf3e3; color: #2a1f15; overflow: hidden; height: 100vh; }
.tv * { user-select: none; }

.tv-idle {
  height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #fdf8e8 0%, #f0e0c0 70%);
  text-align: center; padding: 2rem;
}
.tv-idle-title { font-size: 6rem; font-weight: 700; letter-spacing: 0.05em; color: #b8333b; }
.tv-idle-sub   { font-size: 2rem; color: #6b4a1c; margin-top: 0.5rem; }
.tv-idle-hint  { margin-top: 3rem; font-size: 1.25rem; color: #8a7860; }

.tv-stage { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.tv-idle[hidden], .tv-stage[hidden] { display: none; }   /* override display:flex/grid so [hidden] works */
.tv-header { padding: 1.5rem 3rem; }
.tv-now-title { font-size: 3rem; font-weight: 600; color: #6b4a1c; }
.tv-now-meta  { font-size: 1.25rem; color: #8a7860; margin-top: 0.25rem; }

.tv-media {
  display: flex; align-items: center; justify-content: center;
  padding: 1rem 3rem; min-height: 0; /* allow grid child to shrink */
  position: relative;
}
.tv-photo-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.tv-photo-wrap[hidden] { display: none; }
#tv-photo {
  max-width: 100%; max-height: 100%;
  border-radius: 8px;
  border: 6px solid #fff;             /* white paper border for vintage photo feel */
  box-shadow: 0 8px 40px rgba(80,50,20,0.25);
  background: #fff;
  animation: kenburns 18s ease-in-out infinite alternate;
  transition: opacity 0.4s ease;
}

/* Song card — replaces photo when a song is playing. Big, warm, centered.
   Traditional palette: cream/gold gradient like aged paper, Chinese red title. */
.tv-song-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.5rem;
  width: 100%; height: 100%;
  padding: 3rem;
  background: linear-gradient(135deg, #fdf8e8 0%, #f0d896 100%);
  border: 4px solid #b8333b;          /* Chinese red border */
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(80,50,20,0.25);
  text-align: center;
}
.tv-song-card[hidden] { display: none; }
.tv-song-emoji {
  font-size: 8rem;
  animation: pulse-music 2.4s ease-in-out infinite;
}
@keyframes pulse-music {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.tv-song-title-cn { font-size: 5rem; font-weight: 700; color: #b8333b; line-height: 1.1; }   /* Chinese red */
.tv-song-title-en { font-size: 2rem; color: #6b4a1c; font-weight: 400; }
.tv-song-era      { font-size: 1.5rem; color: #8a6a3c; margin-top: 0.5rem; letter-spacing: 0.05em; }

/* Phase card — voice instructions between hearing/seeing phases. */
.tv-phase-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.5rem;
  width: 100%; height: 100%;
  padding: 3rem;
  background: linear-gradient(135deg, #fff8e8 0%, #ffe0a0 100%);
  border: 4px solid #c4781c;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(80,50,20,0.25);
  text-align: center;
}
.tv-phase-card[hidden] { display: none; }
.tv-phase-emoji      { font-size: 8rem; }
.tv-phase-title-cn   { font-size: 5rem; font-weight: 700; color: #b8333b; line-height: 1.1; }
.tv-phase-title-en   { font-size: 1.75rem; color: #6b4a1c; font-weight: 400; opacity: 0.7; }
.tv-phase-text       { font-size: 1.75rem; color: #2a1f15; max-width: 70%; line-height: 1.5; margin-top: 1rem; }

/* Recognition window: titles fade in only after the senior has had 5–8s to
   recognize the content from memory. Smooth opacity transition for delight. */
.tv .tv-now-title,
.tv .tv-now-meta,
.tv .tv-song-title-cn,
.tv .tv-song-title-en,
.tv .tv-song-era {
  transition: opacity 0.6s ease-out;
}
.tv.title-hidden .tv-now-title,
.tv.title-hidden .tv-now-meta,
.tv.title-hidden .tv-song-title-cn,
.tv.title-hidden .tv-song-title-en,
.tv.title-hidden .tv-song-era {
  opacity: 0;
}
@keyframes kenburns {
  from { transform: scale(1) translate(0,0); }
  to   { transform: scale(1.06) translate(-1%, -1%); }
}

.tv-garden-bar {
  background: rgba(255, 250, 235, 0.7);
  padding: 1.25rem 3rem;
  border-top: 1px solid rgba(184, 51, 59, 0.2);
}
.tv-garden-row { display: flex; gap: 2rem; justify-content: center; }
.tv-flower {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  transition: transform 0.4s;
}
.tv-flower.bloom { transform: scale(1.25); }
.tv-flower-bloom { font-size: 2.5rem; }
.tv-flower-name  { font-size: 1.25rem; font-weight: 600; color: #2a1f15; }
.tv-flower-count { font-size: 1.5rem; color: #c4781c; font-weight: 700; }

.tv-tap-overlay { position: fixed; inset: 0; pointer-events: none; }
.floating-petal {
  position: absolute; bottom: 80px;
  font-size: 2rem;
  animation: float-up 2.2s ease-out forwards;
}
@keyframes float-up {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-80vh) rotate(180deg); }
}

/* ============= FAMILY ============= */
.family { padding: 1.5rem; max-width: 720px; margin: 0 auto; }
.family-header { display: flex; gap: 1rem; align-items: center; }
.family-photo { width: 80px; height: 80px; border-radius: 50%; }
.family-stats {
  margin: 1.5rem 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem;
}
.stat { background: #fff; border-radius: 12px; padding: 1.25rem 1rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.stat-num { font-size: 2.5rem; font-weight: 700; color: #c4781c; line-height: 1; }
.stat-label { color: #777; font-size: 0.85rem; margin-top: 0.5rem; }

.family-trend, .family-favorites, .family-garden { margin: 2rem 0; }
.family-trend h2, .family-favorites h2, .family-garden h2 {
  font-size: 1rem; color: #6b4a1c; font-weight: 600; margin: 0 0 0.75rem;
}

/* Trend chart — vertical bars per day. Pure CSS, no chart library. */
.trend-bars {
  display: flex; gap: 0.4rem; align-items: flex-end;
  height: 140px; background: #fff; border-radius: 12px; padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04); overflow-x: auto;
}
.trend-col {
  display: flex; flex-direction: column; align-items: center;
  flex: 0 0 32px; height: 100%; justify-content: flex-end;
}
.trend-bar {
  width: 22px; background: linear-gradient(180deg, #f0a868 0%, #c4781c 100%);
  border-radius: 4px 4px 0 0; min-height: 4px;
  transition: height 0.4s ease-out;
}
.trend-day   { font-size: 0.7rem; color: #888; margin-top: 0.4rem; }
.trend-count { font-size: 0.85rem; color: #c4781c; font-weight: 700; }

/* Favorites list — songs and photos the senior recognizes most often. */
.favorites-list { list-style: none; padding: 0; margin: 0; }
.favorite {
  background: #fff; border-radius: 8px; padding: 0.75rem 1rem;
  margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fav-icon { font-size: 1.5rem; }
.fav-title { font-weight: 600; color: #2a1f15; }
.fav-en { color: #888; font-size: 0.85rem; flex: 1; }
.fav-count { color: #c4781c; font-weight: 700; }

.family-garden-grid { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem 0; }

/* ============= CAREGIVER: tabs, roster, QR ============= */
.caregiver-header { flex-wrap: wrap; gap: 0.75rem; }
.cg-tabs { display: flex; gap: 0.25rem; background: #f3eee4; padding: 0.25rem; border-radius: 10px; }
.cg-tab {
  border: none; background: transparent; padding: 0.5rem 1rem; border-radius: 8px;
  font-size: 0.95rem; font-weight: 600; color: #6b4a1c;
}
.cg-tab.active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); color: #2c5f2d; }
.cg-header-right { display: flex; align-items: center; gap: 0.75rem; }
.link-btn { border: none; background: none; color: #888; font-size: 0.85rem; text-decoration: underline; padding: 0; }
.cg-panel[hidden] { display: none; }

.roster h2 { display: flex; align-items: center; gap: 0.5rem; }
.count-pill { background: #2c5f2d; color: #fff; border-radius: 999px; font-size: 0.75rem; padding: 0.1rem 0.55rem; }
.empty-note { color: #888; font-size: 0.95rem; margin: 0.5rem 0 1rem; }
.empty-note[hidden] { display: none; }
.client-card { position: relative; }
.remove-present {
  position: absolute; top: 4px; right: 6px; border: none; background: none;
  color: #bbb; font-size: 1.2rem; line-height: 1; padding: 0.25rem;
}
.remove-present:hover { color: #b3261e; }

.cg-panel button.primary, .cg-panel button.secondary, .qr-box button {
  padding: 0.65rem 1.1rem; border-radius: 8px; border: none; font-size: 0.95rem; font-weight: 600;
}
.cg-panel button.primary, .qr-box button { background: #2c5f2d; color: #fff; }
.cg-panel button.secondary { background: #f0e7d4; color: #6b4a1c; }
.cg-panel button:disabled { opacity: 0.5; }

.client-form {
  margin: 1rem 1.25rem; padding: 1.25rem; background: #fff; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.client-form h2 { font-size: 1.05rem; margin: 0 0 1rem; color: #6b4a1c; }
.cf-grid { display: grid; gap: 0.75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cf-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: #666; }
.cf-grid input, .cf-grid select {
  padding: 0.65rem; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; background: #fff;
}
.cf-wide { grid-column: 1 / -1; }
.cf-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
.cf-actions .err { margin: 0; }

.client-list-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 1.5rem 1.25rem 0.5rem;
}
.client-list-head h2 { font-size: 1rem; color: #777; margin: 0; }
.secondary-link { color: #2c5f2d; font-weight: 600; font-size: 0.9rem; }
.client-list { margin: 0 1.25rem 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.client-row {
  display: flex; align-items: center; gap: 0.9rem; background: #fff; border-radius: 12px;
  padding: 0.75rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); flex-wrap: wrap;
}
.client-row.inactive { opacity: 0.55; }
.client-row img { width: 48px; height: 48px; border-radius: 50%; }
.client-row-main { flex: 1 1 180px; min-width: 0; }
.client-row-name { font-size: 1.1rem; font-weight: 600; }
.client-row-name span { color: #888; font-weight: 400; font-size: 0.9rem; }
.client-row-meta { color: #888; font-size: 0.85rem; margin-top: 0.15rem; }
.client-row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.client-row-actions button { padding: 0.45rem 0.8rem; font-size: 0.85rem; }
.badge { font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.5rem; vertical-align: middle; }
.badge.here { background: #e6f4e6; color: #2c5f2d; }
.badge.off { background: #eee; color: #777; }

.summary > .qr-box { max-width: 680px; width: calc(100% - 2rem); text-align: center; }
.qr-box h2 { margin-top: 0; }
.qr-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.qr-pair figure { margin: 0; }
.qr-pair img { width: 100%; max-width: 260px; border: 1px solid #eee; border-radius: 8px; }
.qr-pair figcaption { font-size: 0.85rem; color: #666; margin-top: 0.4rem; line-height: 1.4; }

/* ============= TABLET: personal-code required ============= */
.need-code { padding: 4rem 1.5rem; text-align: center; }
.need-code[hidden] { display: none; }
.need-code-emoji { font-size: 4rem; }
.need-code h1 { font-size: 1.6rem; color: #6b4a1c; }
.need-code h1 small { display: block; font-size: 1rem; color: #8a7860; font-weight: 400; margin-top: 0.5rem; }
.need-code p { color: #777; }

/* ============= TV + FAMILY extras ============= */
.tv-garden-empty { font-size: 1.4rem; color: #8a7860; padding: 0.5rem 0; }
.family-notice { margin-top: 4rem; text-align: center; font-size: 1.2rem; line-height: 1.8; }

/* ============= CAREGIVER: content manager ============= */
.cf-grid label[hidden] { display: none; }
.client-list-head h2 small { font-weight: 400; color: #aaa; font-size: 0.8rem; }
.hint { color: #999; font-size: 0.8rem; margin: 0.75rem 0 0; }
.ct-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; }
.client-row img.ct-thumb { border-radius: 6px; }
.ct-icon { display: flex; align-items: center; justify-content: center; background: #f6efe2; font-size: 1.5rem; }
.ct-preview { display: block; max-width: 240px; max-height: 160px; margin-top: 0.75rem; border-radius: 8px; }
.ct-preview[hidden] { display: none; }
.ct-progress { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin-top: 0.75rem; max-width: 420px; }
.ct-progress[hidden] { display: none; }
#ct-progress-bar { height: 100%; width: 0; background: #2c5f2d; transition: width 0.2s; }
.cg-panel button.danger-text { color: #b3261e; }
@media (max-width: 480px) {
  .client-row-actions { width: 100%; }
  .client-row-actions button { flex: 1 1 auto; padding: 0.45rem 0.5rem; }
}
.cg-panel button.soft-disabled { opacity: 0.45; }

/* Clear test history */
.danger-zone {
  margin: 2rem 1.25rem 3rem; padding: 1.25rem; border: 1px solid #ecc9c5;
  border-radius: 12px; background: #fdf6f5;
}
.danger-zone h2 { font-size: 1rem; color: #b3261e; margin: 0 0 0.5rem; }
.danger-zone p { color: #666; font-size: 0.9rem; margin: 0 0 1rem; }
.clear-box { text-align: left; }
.clear-box p { color: #555; font-size: 0.95rem; line-height: 1.5; }
.clear-box label { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.75rem 0; font-size: 0.85rem; color: #666; }
.clear-box input { padding: 0.65rem; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; }
.qr-box button.secondary { background: #f0e7d4; color: #6b4a1c; }
.qr-box button.danger-btn { background: #b3261e; color: #fff; }
.summary > .qr-box.clear-box { text-align: left; }

/* ============= Sign-in forms (caregiver + admin) ============= */
.login-box input { margin: 0.5rem 0; }
.login-box .text-input { letter-spacing: normal; font-size: 1.05rem; text-align: left; }
.login-box button#login-btn, .login-box #req-btn, .login-box #a-next, .login-box #a-signin, .login-box #a-enroll { margin-top: 0.5rem; }
.login-box .link-btn { display: block; width: auto; margin: 1rem auto 0; padding: 0.25rem; background: none; border: none; font-size: 0.9rem; color: #2c5f2d; text-decoration: underline; }
.login-box p { color: #666; line-height: 1.5; }
.err.ok { color: #2c5f2d; }
.who { font-size: 0.85rem; color: #555; font-weight: 600; }
.enroll-qr { width: 200px; height: 200px; display: block; margin: 0.5rem auto; }
.login-box code { font-size: 0.85rem; background: #f3eee4; padding: 0.1rem 0.3rem; border-radius: 4px; word-break: break-all; }

/* ============= Admin ============= */
.admin-panel section { margin-bottom: 1.5rem; }
.badge.revoked { background: #fbe4e2; color: #b3261e; }
.code-value { font-size: 3rem; font-weight: 700; letter-spacing: 0.15em; color: #2c5f2d; margin: 1rem 0; font-variant-numeric: tabular-nums; }
.table-wrap { margin: 0 1.25rem; overflow-x: auto; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th { text-align: left; color: #888; font-weight: 600; padding: 0.6rem 0.75rem; border-bottom: 1px solid #eee; white-space: nowrap; }
.admin-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #f4f1ea; vertical-align: top; }
.admin-table tr.flag td { background: #fdf6f5; }
.admin .cg-panel button.primary { padding: 0.45rem 0.8rem; font-size: 0.85rem; }