@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root {
  --ocean: #205d82;
  --ocean-deep: #123e5b;
  --teal: #5197a4;
  --mint: #96cbbb;
  --ivory: #f4f1c8;
  --ivory-soft: #fbfaf0;
  --coral: #de5358;
  --coral-soft: #fff0ef;
  --blue: var(--ocean);
  --blue-dark: var(--ocean-deep);
  --navy: #17384d;
  --yellow: var(--ivory);
  --yellow-light: #faf8df;
  --bg: #f1f7f5;
  --surface: #fffefa;
  --ink: #17394b;
  --muted: #617984;
  --line: #d8e7e4;
  --soft: #e8f4f1;
  --danger: #ba3e47;
  --shadow: 0 18px 50px rgba(24, 76, 92, .08);
}

body { background: linear-gradient(180deg, #f7fbf9, var(--bg)); color: var(--ink); }
h1, h2, .guest-hero h1, .guest-intro h2, .guest-story h2, .guest-final h2, .hero-copy h2 {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -.025em;
}
button, input, select, textarea, nav, .tag, .chip { font-family: 'Be Vietnam Pro', system-ui, sans-serif; }

.ambient-glow {
  position: fixed; z-index: 3; width: 280px; height: 280px; left: 0; top: 0;
  border-radius: 44% 56% 63% 37% / 44% 45% 55% 56%; pointer-events: none;
  background: radial-gradient(circle at 34% 35%, rgba(244, 241, 200, .30), rgba(81, 151, 164, .16) 42%, transparent 70%);
  filter: blur(9px); opacity: .72; transform: translate3d(-400px, -400px, 0);
  animation: ambientMorph 9s ease-in-out infinite alternate;
}
@keyframes ambientMorph { to { border-radius: 65% 35% 42% 58% / 35% 60% 40% 65%; } }
.app-frame, .guest-site, dialog { position: relative; z-index: 4; }
.sidebar { z-index: 20; }
.mobile-nav { z-index: 30; }

.sidebar { background: rgba(255, 254, 250, .94); border-color: var(--line); }
.main-nav a, .profile-link, .home-action, .card, .btn, .shot, .habit, .day {
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
}
.main-nav a:hover, .home-action:hover, .card.interactive:hover { transform: translateY(-2px); }
.main-nav a.active { background: #dfeeea; color: var(--ocean-deep); }
.main-nav a.active:before { background: var(--teal); }
.nav-badge { background: var(--ivory); color: var(--ocean-deep); }
.side-note { background: linear-gradient(145deg, var(--ivory-soft), #e6f3ef); color: var(--ocean-deep); }
.side-note p { color: var(--muted); }
.topbar { background: rgba(255, 254, 250, .86); border-color: var(--line); backdrop-filter: blur(18px); }
.status-pill.ready:before { background: var(--mint); box-shadow: 0 0 0 4px rgba(150, 203, 187, .24); }
.btn { border-radius: 14px; }
.btn-blue { background: linear-gradient(135deg, var(--ocean-deep), var(--ocean)); box-shadow: 0 10px 24px rgba(32, 93, 130, .16); }
.btn-soft { background: #e4f1ee; color: var(--ocean-deep); }
.btn-yellow { background: var(--ivory); color: var(--ocean-deep); }
.btn-white { background: rgba(255, 254, 250, .94); }
.text-link { color: var(--ocean); }
.chip { background: var(--ivory); color: var(--ocean-deep); }
.card { border-color: var(--line); background: rgba(255, 254, 250, .96); box-shadow: var(--shadow); }
.notice { background: #e4f1ee; color: #3e6970; }
.notice.yellow { background: var(--ivory-soft); color: #6e673e; }

/* Một luồng dọc, ưu tiên đọc và chạm bằng điện thoại. */
main { max-width: 820px; }
.home-hero, .home-grid, .grid-two, .home-actions-grid, .diary-layout, .calendar-layout, .scan-layout,
.result-pair, .guest-feature-grid, .guest-story, #knowledgeWorkspace {
  grid-template-columns: minmax(0, 1fr) !important;
}
.home-hero { min-height: 0; background: linear-gradient(145deg, var(--ocean-deep), var(--ocean) 60%, var(--teal)); }
.hero-visual { min-height: 260px; background: linear-gradient(145deg, var(--teal), var(--mint)); }
.home-actions-grid, .home-grid { gap: 16px; }
.diary-aside { order: -1; }
.scan-layout { max-width: 760px; margin: 0 auto; }
.result-pair { gap: 14px; }
.result-comment-column { padding-top: 2px; }

.guest-site { background: linear-gradient(180deg, #fffefa, #eff7f4); }
.guest-header { border-color: var(--line); background: rgba(255, 254, 250, .88); }
.guest-main { max-width: 940px; }
.guest-hero {
  grid-template-columns: minmax(0, 1fr) !important; min-height: 0; color: #fff;
  background: radial-gradient(circle at 83% 14%, rgba(150, 203, 187, .55), transparent 30%),
              linear-gradient(145deg, var(--ocean-deep), var(--ocean) 58%, var(--teal));
  box-shadow: 0 28px 75px rgba(18, 62, 91, .22);
}
.guest-hero h1 em { color: var(--ivory); }
.guest-hero-copy > p, .guest-hero-copy > small { color: #e5f2ef; }
.guest-hero-art { min-height: 330px; }
.guest-hero-art:before { width: 70%; background: linear-gradient(145deg, var(--ivory), var(--mint)); animation: heroMorph 8s ease-in-out infinite alternate; }
@keyframes heroMorph { to { border-radius: 40% 60% 58% 42% / 52% 36% 64% 48%; transform: rotate(6deg) scale(1.03); } }
.guest-streak { color: var(--ocean-deep); }
.guest-feature { min-height: 0; color: var(--ocean-deep) !important; background: rgba(255, 254, 250, .88) !important; border-color: var(--line); }
.guest-feature > span { background: var(--soft); color: var(--ocean); }
.guest-story { background: linear-gradient(145deg, var(--ivory-soft), #e5f2ee); border-color: var(--line); }
.story-card, .guest-final { background: linear-gradient(145deg, var(--ocean-deep), var(--ocean)); }
.story-card svg { color: var(--ivory); }

/* Phân vùng AI: đỏ rõ nhưng vẫn thấy bề mặt bên dưới. */
.result-image svg polygon.focus-shape,
.result-image svg rect.focus-shape {
  fill: rgba(222, 83, 88, .16); stroke: var(--coral); stroke-width: 3;
  stroke-dasharray: none; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(222, 83, 88, .32));
}
.result-image svg .urgent .focus-shape { fill: rgba(186, 62, 71, .20); stroke: #ad303b; }
.target-halo, .target-core { display: none; }
.marker-label circle { fill: var(--coral); stroke: #fff; stroke-width: 4; }
.result-image svg .marker-label text { font-size: 23px; }
.finding-number { background: var(--coral); }
.tag.confidence { background: #e5f2ee; color: var(--ocean-deep); }
.healthy-reference { background: var(--ivory-soft); border-color: #ddd9a6; }
.healthy-reference summary { color: var(--ocean-deep); }
.healthy-reference-svg { overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: #15394c; }
.healthy-reference-svg svg { display: block; width: 100%; height: auto; }
.reference-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

.daily-guidance { overflow: hidden; position: relative; margin-bottom: 16px; background: linear-gradient(145deg, var(--ivory-soft), #e4f2ee); }
.daily-guidance:after { content: ''; position: absolute; width: 150px; height: 150px; right: -55px; top: -70px; border-radius: 45% 55% 62% 38%; background: rgba(81, 151, 164, .14); }
.daily-guidance .advice-emoji { font-size: 28px; }
.daily-guidance h2 { margin-top: 12px; font-size: 27px; }
.daily-guidance p { color: #506e77; }
.advice-basis { font-size: 10px; color: var(--muted); }

.calendar-card { overflow: hidden; }
.calendar-motif { min-height: 120px; margin: -28px -28px 20px; padding: 14px 22px; display: grid; grid-template-columns: 1fr 150px; align-items: center; background: linear-gradient(135deg, rgba(222,83,88,.18), rgba(244,241,200,.62)); }
.calendar-motif h3 { font-family: 'Fraunces', Georgia, serif; font-size: 23px; margin: 0; color: var(--ocean-deep); }
.calendar-motif p { margin: 4px 0 0; font-size: 10px; color: var(--muted); }
.calendar-motif svg { width: 140px; height: 90px; justify-self: end; }

.avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0 18px; }
.avatar-choice { border: 1px solid var(--line); background: #fff; min-height: 58px; border-radius: 15px; font-size: 25px; }
.avatar-choice[aria-pressed=true] { border-color: var(--ocean); background: var(--soft); box-shadow: inset 0 0 0 2px var(--ocean); }
.profile-avatar { background: linear-gradient(145deg, var(--ocean), var(--teal)); }
.profile-avatar[data-avatar] { font-size: 27px; }
.remembered-accounts { display: grid; gap: 7px; margin: 0 0 15px; }
.remembered-account { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--ivory-soft); text-align: left; }
.remembered-account span:first-child { font-size: 20px; }
.remembered-account small { color: var(--muted); display: block; }
.visit-card { padding: 16px 0; border-bottom: 1px solid var(--line); }
.visit-card:last-child { border-bottom: 0; }
.visit-card h3 { margin: 5px 0; }
.visit-card p { margin: 3px 0; font-size: 11px; color: var(--muted); }
.intake-summary { display: grid; gap: 8px; }
.intake-row { padding: 10px 12px; border-radius: 11px; background: var(--soft); font-size: 11px; }

.maps-launch { padding: 34px 24px; text-align: center; border-radius: 24px; background: radial-gradient(circle at 75% 20%, rgba(244,241,200,.85), transparent 36%), linear-gradient(145deg, #e0efeb, #c9e2dc); }
.maps-launch > svg { width: 52px; height: 52px; color: var(--ocean); margin-bottom: 14px; }
.maps-ready { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }

@media (max-width: 680px) {
  .ambient-glow { display: none; }
  main { max-width: none; padding-left: 14px; padding-right: 14px; }
  .topbar:before { color: var(--ocean); }
  .home-hero { grid-template-columns: 1fr !important; }
  .hero-copy { padding: 26px 23px; }
  .hero-visual { min-height: 210px; border-radius: 0 0 19px 19px; }
  .guest-hero { padding: 30px 22px 20px; }
  .guest-hero h1 { font-size: 39px; }
  .guest-hero-art { min-height: 245px; }
  .shot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot { min-height: 78px; font-size: 9px; }
  .form-grid { grid-template-columns: 1fr; }
  .calendar-motif { margin: -17px -13px 16px; grid-template-columns: 1fr 100px; min-height: 105px; }
  .calendar-motif svg { width: 100px; height: 72px; }
  .calendar-motif h3 { font-size: 19px; }
  .avatar-grid { grid-template-columns: repeat(5, 1fr); }
  dialog { width: calc(100vw - 22px); padding: 23px 18px; }
  .entry-row { align-items: flex-start; flex-wrap: wrap; }
  .entry-row .text-link { margin-left: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-glow, .guest-hero-art:before { animation: none !important; }
}