/* Răng Xinh V12: bề mặt giàu màu, camera rõ luồng và nhật ký không tràn. */
:root {
  --bg: #ccece3;
  --surface: #fff2a8;
  --line: #91c9c4;
  --soft: #bde7d8;
  --yellow: #ffdc63;
  --yellow-light: #fff0a8;
  --shadow: 0 22px 56px rgba(18, 63, 92, .15);
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 82% 7%, rgba(255, 218, 87, .88), transparent 31rem),
    radial-gradient(circle at 5% 78%, rgba(62, 157, 169, .42), transparent 38rem),
    linear-gradient(145deg, #bfe7dc, #e5f3bd 46%, #84c9ca);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  background: repeating-linear-gradient(118deg, transparent 0 250px, rgba(255,255,255,.76) 252px 266px, transparent 268px 510px);
  mask-image: linear-gradient(to bottom, transparent 2%, #000 17%, #000 83%, transparent 98%);
}

.guest-site, .app-frame { position: relative; z-index: 1; }
.sidebar, .topbar, .mobile-nav { z-index: 20; }
.guest-header { background: linear-gradient(110deg, #fff09a, #a8dfd2 56%, #53a6b1); }
.guest-hero { background: linear-gradient(135deg, #164e70, #2d8998); box-shadow: var(--shadow); }
.guest-feature.blue { background: linear-gradient(145deg, #75bec8, #c3eee0); }
.guest-feature.yellow { background: linear-gradient(145deg, #ffd75d, #fff1a9); }
.guest-feature.cyan { background: linear-gradient(145deg, #a9dfcc, #69bcc2); }
.guest-intro, .guest-story, .guest-final { background: linear-gradient(135deg, rgba(255,235,125,.92), rgba(151,220,205,.92)); border-radius: 26px; padding: clamp(24px,4vw,52px); }
.guest-footer { background: linear-gradient(90deg, #1b5878, #2d8998); color: #fff6c8; }

.sidebar { background: linear-gradient(180deg, #ffef96 0%, #bce8d7 53%, #6fb9c0 100%); }
.topbar { background: linear-gradient(100deg, rgba(177,226,213,.96), rgba(255,231,118,.94)); }
.mobile-nav { background: linear-gradient(100deg, #fff09b, #b6e6d8 55%, #7ac5c7); border-top-color: #65b6b8; }
.main-nav a.active { background: linear-gradient(120deg, #74c4c5, #ffe36e); color: #103f5b; }
.side-note { background: linear-gradient(145deg, #ffda5c, #93d8c7); }

.card, .result-card, .next-card {
  background: linear-gradient(145deg, rgba(255,231,119,.95), rgba(173,224,208,.96));
  border-color: #7fc1bf;
}
.card:nth-of-type(even), .mission-card, .daily-guidance {
  background: linear-gradient(145deg, rgba(91,177,187,.94), rgba(212,239,184,.96) 56%, rgba(255,223,101,.94));
}
.scan-photo-card { background: linear-gradient(145deg, #ffe47b, #fff3b2 48%, #aee3d4); }
.drop-zone {
  background: linear-gradient(145deg, #fff4b6, #ffdc69 56%, #b5e5d7);
  border: 2px solid #d8ad2e;
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.28), 0 12px 28px rgba(18,63,92,.10);
}
.shot { background: linear-gradient(145deg, #d3eee3, #fff0a3); }
.shot.active { background: linear-gradient(145deg, #7bc7c8, #ffe165); }
.habit, .finding-card, .result-more details, .healthy-reference, .maps-ready, .intake-row, .visit-card {
  background: linear-gradient(145deg, #fff1a7, #c3eadc);
}
.notice { background: linear-gradient(135deg, #a9dfd1, #dff1bd); }
.notice.yellow { background: linear-gradient(135deg, #ffe477, #fff2b2); }
.btn-white, .icon-btn { background: linear-gradient(145deg, #fff2a7, #bce7da); border-color: #82c2bf; }
.btn-soft { background: linear-gradient(145deg, #b8e7d9, #83c9cb); color: #103f5b; }
.btn-yellow { background: linear-gradient(135deg, #ffe36e, #ffc94e); color: #123f5c; }
.btn-blue { background: linear-gradient(135deg, #184f71, #2d8797); }
input:not([type=checkbox]):not([type=file]), select, textarea { background: linear-gradient(145deg, #fff6c2, #d8f0e4); border-color: #86c4c0; }

.home-action.scan { background: linear-gradient(135deg, #ffdd62, #fff0a3 48%, #81ccca); color: #103f5b; }
.home-action.diary { background: linear-gradient(135deg, #4aa3ad, #a9e0d0 55%, #ffe374); color: #103f5b; }
.home-action.scan p, .home-action.scan small, .home-action.diary p, .home-action.diary small { color: #315d69; opacity: 1; }

dialog { background: linear-gradient(145deg, #fff0a0, #c4eadc 52%, #76c1c4); border-color: #69b7b8; }
dialog::backdrop { background: rgba(10,42,61,.62); backdrop-filter: blur(7px); }
.password-message { padding: 12px 14px; border-radius: 12px; background: #bce8d9; color: #174f66; }
.password-message:empty { display: none; }

.camera-stage { height: clamp(220px, 42dvh, 460px); aspect-ratio: auto; background: #102d49; border: 4px solid #ffd95b; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.camera-stage video { width: 100%; height: 100%; object-fit: cover; }
.camera-guide { border-color: #ffe36e; box-shadow: 0 0 0 999px rgba(8,34,62,.14), 0 0 30px rgba(255,220,83,.35); }
.camera-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.camera-actions .btn { width: 100%; }
.scan-capture-actions .btn { flex: 1 1 130px; }
.native-file-picker { position: relative; overflow: hidden; cursor: pointer; margin: 0; }
.native-file-picker input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 100px; }
.native-file-picker.disabled { opacity: .55; pointer-events: none; }

#entryDialog {
  width: min(96vw, 980px);
  max-height: 92dvh;
  padding: 0;
  overflow: hidden;
  transition: width .2s ease, height .2s ease, border-radius .2s ease;
}
#entryDialog .entry-dialog-content { max-height: 92dvh; overflow: auto; overflow-x: hidden; padding: 32px; scrollbar-gutter: stable; }
.entry-dialog-tools { position: absolute; z-index: 8; top: 13px; right: 14px; display: flex; gap: 8px; }
#entryDialog .scan-result, #entryDialog .result-pairs, #entryDialog .result-pair, #entryDialog .result-visual-column, #entryDialog .result-comment-column { min-width: 0; max-width: 100%; }
#entryDialog .result-pair { grid-template-columns: minmax(220px,.72fr) minmax(280px,1.28fr) !important; gap: 16px; padding: 15px; }
#entryDialog .result-image img { width: 100%; max-height: 320px; object-fit: contain; background: #123f5c; }
#entryDialog .result-summary h3 { font-size: 19px; line-height: 1.48; padding-right: 88px; }
#entryDialog .finding-title h4 { font-size: 15px; }
#entryDialog .finding-card > p, #entryDialog .finding-card details p, #entryDialog .result-more li, #entryDialog .result-more p, #entryDialog .result-disclaimer { font-size: 13px; line-height: 1.64; overflow-wrap: anywhere; }
#entryDialog .healthy-reference-photo img { max-height: 220px; object-fit: cover; }
#entryDialog.is-fullscreen { inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
#entryDialog.is-fullscreen .entry-dialog-content { height: 100dvh; max-height: none; padding: clamp(24px,4vw,54px); }

@media (max-width: 760px) {
  body::before { background: repeating-linear-gradient(125deg, transparent 0 135px, rgba(255,255,255,.7) 137px 146px, transparent 148px 280px); }
  .card { padding: 20px 17px; }
  .guest-intro, .guest-story, .guest-final { border-radius: 20px; padding: 25px 19px; }
  .camera-actions { grid-template-columns: 1fr 1fr; }
  #cameraDialog { padding: 25px 18px; }
  #entryDialog { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  #entryDialog .entry-dialog-content { height: 100dvh; max-height: none; padding: 26px 16px 90px; }
  #entryDialog .result-pair { grid-template-columns: minmax(0,1fr) !important; padding: 10px; }
  #entryDialog .result-image img { max-height: 220px; }
  #entryDialog .result-summary h3 { font-size: 18px; padding-right: 72px; }
  #toggleEntryFullscreen { display: none; }
  .scan-capture-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .scan-capture-actions .btn:first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  #entryDialog { transition: none; }
}

.verification-code { font-size: 28px; font-weight: 800; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; }
#verifyStep .text-link { margin-top: 14px; text-align: center; }